@charset "utf-8";

body { position: relative; min-width: 1400px; background:#F8FBFF; }

/* 重置 */
.wrap { position: static; }
#header { display: none; }
#footer { font-weight: 400; }

@font-face {
    font-family: 'font-webicon';
    src: url('../../votingsystem/font-webicon/iconfont.eot');
    src: url('../../votingsystem/font-webicon/iconfont.woff2') format('woff2'),
        url('../../votingsystem/font-webicon/iconfont.woff') format('woff'),
        url('../../votingsystem/font-webicon/iconfont.ttf') format('truetype');
}

/* row ---------------------------------------------------- */
.row { min-width: 1400px; clear: both; padding: 50px 0; }
.container { max-width: 1400px; margin: 0 auto; }
.content-manage { font-size: 16px; font-weight: 400; text-align: left; line-height: 2; }


/* manage-header----------------------------------------------- */
.manage-header { position: relative; }

/* logo-box */
.logo-box { position: absolute; top: 41px;  left: 0; width: 100%; min-width: 1400px; z-index: 2; }
.logo-box .container { display: flex; align-items: center; justify-content: space-between; height: 50px;}
.logo-box .logo { animation: moveTop 2s ease; display: block; height: 50px; }
.logo-box .logo img { max-height: 50px; width: auto;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
 }

/* links */
.links { display: flex; min-width: 0; animation: moveTop 2s ease; }
.links a { padding: 0 24px; box-sizing: border-box; transition: 0.5s; display: block; font-weight: 400; border-radius: 36px; border: 1px solid rgba(255, 255, 255, 0.5); filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15)); line-height: 36px; margin-left: 10px; color: #fff; float: left;}
.links a:hover { background-color: rgba(0, 0, 0, 0.2);  border-color: rgba(0, 0, 0, 0.3); }

/* 大图 */
.banner { min-width: 1400px; position: relative; overflow: hidden; clear: both; z-index: 1; height: 738px; }
.banner::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; animation: slideBanner 8s ease-in-out 1; background: url(../img/banner.jpg) no-repeat center; }
.banner .con { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center; }
.banner .con .title { font-size: 80px; font-weight: bold; line-height: 1.5; animation: moveLeft 3s ease; margin-bottom: 20px; }
.banner .con .title a { color: inherit; }
.banner .con .intro { display: block; font-size: 18px; line-height: 2; font-weight: 300; animation: moveRight 2s ease;  }
.banner .container { position: relative; height: 100%; }
@keyframes slideBanner {
    0% { transform: scale(1.2); }
    100% {transform: scale(1); }
}



/* manage-content----------------------------------------------- */

.title-bar { text-align: center; font-size: 40px; font-weight: bold; color: #1C45AE; line-height: 1.1; margin-bottom: 40px; }


/* list */
.list { padding: 0 20px 10px; }
.list li { line-height: 2; margin-bottom: 18px; box-sizing: border-box; text-align: justify; position: relative; padding-left: 16px; transition: 0.5s; }
.list li::before { content: ""; width: 5px; height: 5px; background-color: #666; border-radius: 100%; position: absolute; left: 0; top: 14px; transition: 0.5s; }
.list li:hover { color: #284CBF; }
.list li:hover::before { background-color: #284CBF; }


/* row-about ----------------------------- */
.row-about { border-bottom: 1px solid #d0dcf4; padding-bottom: 0; }

/* box-default */
.box-default .bd { display: flex; align-items: center; justify-content: space-between; }
.box-default .bd .intro { text-align: justify; flex: 1 0 0%; min-width: 0; }
.box-default .bd .intro p { line-height: 2; margin-bottom: 18px; color: #666; text-indent: 2em;}
.box-default .pic img { max-width: 100%;
      image-rendering: -moz-crisp-edges; /* Firefox */
        image-rendering: -o-crisp-edges; /* Opera */
        image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

/* box-about */
.box-about .pic { width: 592px; padding-right: 50px; }
.box-about .intro { font-size: 22px; }

/* box-value */
.box-value .pic { width: 460px; text-align: center; padding-left: 60px; }

/* row-advantage ----------------------------- */
.row-advantage { background: linear-gradient(85.5deg, #225396 9.23%, #256BC5 98.39%); }
.row-advantage .title-bar { color: #fff; }

/* list-item */
.list-item { display: flex; flex-wrap: wrap; justify-content: space-between; }
.list-item li { width: 48%; margin: 20px 0; position: relative; }
.list-item .con { position: relative; z-index: 2; box-sizing: border-box; background-color: #fff; padding: 25px 30px; min-height: 250px; border-radius: 10px; }
.list-item .con h4 { font-size: 24px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; }
.list-item .con h4::before { content: "\E796"; font-family: "font-webicon"; font-size: 20px; color: #1559B2; margin-right: 10px; }
.list-item .intro { text-indent: 2em; line-height: 2; color: #666; }
.list-item li::before,
.list-item li::after { display: block; content: ""; position: absolute; left: 0; height: 100%; border-radius: 10px; }
.list-item li::before { bottom: -6px; background-color: rgba(255, 255, 255, 0.4); width: 101%; z-index: 1; }
.list-item li::after { bottom: -14px; background-color: rgba(255, 255, 255, 0.2); width: 102%; }

/* row-feature --------------------------- */

/* box-feature */
.box-feature { background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 12px rgba(16, 103, 219, 0.3); padding: 10px 30px 20px; }
.box-feature .hd { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #D1E1F2; margin-bottom: 20px; }
.box-feature .hd h3 { display: flex; align-items: center; line-height: 1.5; font-size: 24px; font-weight: 400; flex: 1 0 0%; min-width: 0; cursor: pointer; }
.box-feature .hd h3::before { width: 32px; height: 32px; background-color: #E8ECF7; border-radius: 100%; text-align: center; line-height: 32px; content: "\E815"; font-family: "font-webicon"; font-size: 22px; color: #284CBF; margin-right: 14px; }
.box-feature .on .hd h3 { color: #284CBF; }
.box-feature .on .hd h3::before { background-color: #284CBF; color: #fff; }
.box-feature .hd::after { content: '\E817'; font-family: "font-webicon"; font-size: 32px; color: #E8ECF7; cursor: pointer; }
.box-feature .on .hd::after { content: '\E816'; color: #284CBF; }
.box-feature .list { display: none; }
.box-feature .on .list { display: block; }

/* row-relevance ----------- */
#technicalSupport { background-color: #fff; padding-bottom: 0; }
#technicalSupport .row { width: 1400px; margin: 0 auto; padding: 0;}
.techSupportList li a { box-sizing: border-box; border: 1px solid #EDEDED; transition: 0.5s;}
.techSupportList li a:hover { border-color: #0062D9; }
.rowTi h2 { color: #1C45AE; }

/* lxss */
.lxss { padding-top: 30px; }
.lxss a,
.lxss a.sq { background-color: #1C45AE; }


/* keyframes------------------ */
@keyframes moveLeft
{
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveRight
{
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveTop
{
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveTop1
{
    0%{
        opacity: 0;
        transform: translateY(-20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveBottom
{
    0%{
        opacity: 0;
        transform: translateY(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/* 旋转 */
@keyframes circle{
    50% { transform: rotate(180deg)}
}


@media (min-width:1440px) {
    body { overflow-x: hidden; }
}