@charset "utf-8";
/* CSS Document */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; outline:0 none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{font:12px/1.5 "Arial","Hiragino Sans GB","Microsoft YaHei",'\5FAE\8F6F\96C5\9ED1',tahoma,sans-serif;background:#fff;color:#000;}
a{outline:0 none;cursor:pointer;text-decoration:none;color:#000;}
a:hover{text-decoration:none;}
ul,ol{list-style:none;}
img{border:0 none;}
em,i{font-style:normal;font-weight:normal;}
h1,h2,h3,h4{font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;width:100%;}
.fl, .fr { display: inline; float: left; }
.fr { float: right; }
.pr { position: relative; }
.pa { position: absolute; }
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder{ color: #c2d2f7;}
textarea:-moz-placeholder,
input:-moz-placeholder{ color: #c2d2f7;}
textarea::-moz-placeholder,
input::-moz-placeholder{ color: #c2d2f7;}
textarea:-ms-input-placeholder,
input:-ms-input-placeholder{ color: #c2d2f7;}
.thickdiv {  position: fixed; top: 0; left: 0; width: 100%;  height: 100%; background:#000000; border: 0 none; opacity: 0.5; filter:alpha(opacity=50); z-index:101;}
@font-face {
    font-family: 'PINGFANG';
    src: url("/images/eye/fonts/PINGFANG_REGULAR.TTF") format('truetype');
    font-weight: normal;
    font-style: normal;
}

.wrapper{ min-width: 1100px; font-family: 'PINGFANG'; color: #999; font-size: 16px;}
.kefu-btn{ position: fixed; bottom: 50px; right: 20px ; width: 120px; height: 120px; background:url(/images/eye/newpc/btn_service.png) no-repeat; background-size: 100% 100%; z-index: 102;}
.container{display: flex;display: -webkit-flex;margin: 0 auto;width: 1200px;-webkit-flex-flow:column;flex-flow: column;}
.item-top{ position:relative; top: 0; left: 0; width: 100%; height: 66px; background: #2f5597; color: #fff; z-index: 22;}
.item-top.active{ position: fixed; background: rgba(47,85,151,.8); -webkit-animation:move-down .5s linear; animation:move-down .5s linear;}
@-webkit-keyframes move-down {
    0%{ -webkit-transform: translateY(-100%); }
    100%{ -webkit-transform: translateY(0); }
}
@keyframes move-down {
    0%{ transform: translateY(-100%); }
    100%{ transform: translateY(0); }
}
.item-top .container{ -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-flow: initial; flex-flow: initial; -webkit-align-items: center; align-items: center;}
.item-top .container .logo img{margin-top: 5px;width: 65px;}
.nav{ display: inline-block;}
.nav li{ margin-right: 110px; display: inline-block; font-size: 16px; line-height: 66px; cursor: pointer;}
.nav li a{display: block;color: #fff;}
.nav li a:hover,
.nav li a.active{color: #45adfe;font-weight: bold;}
.btn{ display: block; height: 40px; line-height: 40px; color: #fff; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; }
.btn-white{ display: inline-block; width: 160px; border: 1px #fff solid;}
.btn-white:hover{ background: #ffffff; color: #2f5597;}
.btn-deongaree{display: inline-block;margin-top: 40px;width: 200px;height: 47px;line-height: 47px;background: #2f70e1;}
.btn-deongaree:hover{ background: #1c5ac4;}
.btn-blue{margin: 20px auto 0;width: 200px;height: 47px;line-height: 47px;font-size: 18px;background: #2f5597;}
.btn-blue:hover{ background: #274882;}

.item-banner .bg-banner{ width: 100%;}
.item-banner .bg-banner img{ width: 100%; height: 100%; object-fit: cover;}
.item-banner .container{top: 175px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.item-banner .container .slogan{font-size: 56px;color: #fff;font-family: "microsoft yahei";line-height: 1.5;text-shadow: 0 0 5px rgba(0,0,0,.3);}
.item-banner .container .slogan span,
.item-video .container .item-title span{position: relative;margin: 0 50px 0 25px;}
.item-banner .container .slogan span:after,
.item-banner .container .slogan span:before,
.item-video .container .item-title span:after,
.item-video .container .item-title span:before{content: "";position: absolute;top: 10px;left: -25px;width: 24px;height: 53px;background: url(/images/eye/newpc/slogan_after.png) no-repeat;background-size: 100% 100%;}
.item-banner .container .slogan span:after,
.item-video .container .item-title span:after{left: auto;top: auto;bottom: 10px;right: -25px;-webkit-transform: rotate(-180deg);transform: rotate(-180deg);}
.item-banner .container .tips{margin-top: 56px;color: #fff;}

.item-title{margin-top: 100px;font-size: 40px;font-family: "microsoft yahei";color: #333333;}
.sub-title{margin: 30px 0 20px;font-size: 16px;color: #000;}

.item-video .container{ -webkit-flex-flow:column; flex-flow: column;}
.item-video .video{margin: 0 auto;width: 100%;height: 675px;box-sizing: border-box;overflow: hidden;}
.item-video .video video{ width: 100%; height: 100%; max-width: 100%; max-height: 760px; object-fit: fill;}
.item-video .container .item-title span{position: relative;margin: 0 0 0 50px;}
.item-video .container .item-title span:after,
.item-video .container .item-title span:before{left: -20px;width: 11px;height: 32px;background-image: url(/images/eye/newpc/title_after.png);}
.item-video .container .item-title span:after{ left: auto; right: -30px;}

.item-advantage .list-advantage,
.item-step .list-step,
.item-service .list-service{display: flex;display: -webkit-flex;padding: 80px 0 40px;border-bottom: 1px #E2DDDD solid;-webkit-justify-content: space-around;justify-content: space-around;}
.item-advantage .list-advantage li,
.item-step .list-step li{width: 250px;text-align: center;}
.item-advantage #list-advantage-01 li .advantage-ico img{ height: 110px;}
.item-advantage #list-advantage-02 li .advantage-ico img{ height: 200px;}
.item-advantage .list-advantage .advantage-describe{font-size: 18px;word-break: break-word;color: #000;}
.item-advantage .list-advantage .advantage-title,
.item-step .list-step .step-title{margin: 30px 0 25px;font-size: 24px;color: #333;font-family: "microsoft yahei";}
.item-advantage .list-advantage{ border-bottom: transparent;}

.item-feedback .list-feedback{ display: flex; display: -webkit-flex; margin-top: 50px; -webkit-justify-content: space-between; justify-content: space-between;}
.item-feedback .list-feedback li{ padding-bottom: 20px; width: 370px;height: auto;background: #fff;box-shadow: 0 18px 23px rgb(186,186,186,.7); transition: transform .4s}
/*.item-feedback .list-feedback li:hover{ transform: scale(1.05);}*/
.item-feedback .list-feedback .feedback-img{width: 370px;height: 330px;overflow: hidden;}
.item-feedback .list-feedback .feedback-img img{width: 370px;height: 330px;}
.item-feedback .list-feedback .feedback-text{margin: 20px auto 0;width: 330px;height: 120px;font-size: 18px;color: #000;line-height: 1.5;word-break: break-word;}
.item-feedback .list-feedback .feedback-from{margin-right: 20px;text-align: right;font-size: 16px;}
/*.item-feedback .list-feedback .feedback-text span{ color: #333;}*/

.item-step .list-step li{width: 200px;}
.item-step .list-step li .step-ico img{width: 160px;}
.item-step .list-step li .step-ico:after{content: "";position: absolute;top: 50%;right: -50px;margin-top: -8px;width: 58px;height: 15px;background: url(/images/eye/newpc/arrow_step.png) no-repeat top right;background-size: 175px 15px;}
.item-step .list-step li:last-of-type .step-ico:after{ background: none;}
.item-step .list-step li .step-describe{font-size: 18px;color: #000;word-break: break-word;}

.item-service .list-service{-webkit-flex-flow: wrap;flex-flow: wrap;padding: 80px 0 0 60px;margin: 0 auto;box-sizing: border-box;}
.item-service .list-service li{margin-bottom: 40px;width: 50%;font-size: 24px;color: #000;}
.item-service .list-service li:nth-of-type(even){width: 47%;}
.item-service .list-service li img{margin-right: 30px;vertical-align: middle;width: 30px;}
.item-service .list-service li:last-of-type{ padding: 30px 0; width: 100%;}

.item-download .list-download{display: flex;display: -webkit-flex;margin-top: 130px;}
.item-download .list-download li:first-of-type .download-img{ width: 770px;}
.item-download .list-download li:last-of-type .download-img{width: 370px;}
.item-download .list-download .download-tips{margin-top: -30px;margin-left: -60px;font-size: 18px;color: #666;text-align: center;}
.item-download .list-download li:first-of-type .btn-blue{margin: 20px 0 0 250px;}
.item-download .list-download li:last-child .download-img{margin-top: -91px;}
.item-download .list-download .btn img{margin-right: 10px;height: 35px;vertical-align: middle;}

.item-contact{ margin-top: 140px; width: 100%; height: 953px; background: url(/images/eye/newpc/bg_contact.jpg) no-repeat; background-size: cover;}
.item-contact .item-title,
.item-contact .sub-title{color: #fff;}
.item-contact .sub-title{color: #b3bfd5;margin: 24px 0 60px;}
.item-contact .contact-form{ display: flex; display: -webkit-flex; margin: 0 auto; width: 1200px; -webkit-justify-content: space-between; justify-content: space-between;}
.item-contact .contact-form .cont-left{ width: 480px;}
.item-contact .contact-form .form-title{ margin-bottom: 25px; color: #fff;}
.item-contact .contact-form .form-title span{ color: #ed2e0f;}
.item-contact .contact-form .form-ipt,
.item-contact .contact-form .form-select{position: relative;margin-bottom: 16px;padding: 0 20px;width: 100%;height: 50px;font-size: 20px;line-height: 50px;color: #c2d2f7;background: #143165;-webkit-border-radius: 5px;border-radius: 5px;box-sizing: border-box;}
.item-contact .contact-form .form-ipt.error,
.item-contact .contact-form .form-select.error{ border: 1px red solid;}
.item-contact .contact-form .form-ipt .error-tips,
.item-contact .contact-form .form-select .error-tips{ display: none; top: 0; right: 20px; font-size: 14px; color: #f43212;}
.item-contact .contact-form .form-ipt.error .error-tips,
.item-contact .contact-form .form-select.error .error-tips{ display: block;}
.item-contact .contact-form .form-ipt .form-text{ display: inline-block;}
.item-contact .contact-form .form-ipt .form-text{ display: inline-block;}
.item-contact .contact-form .form-ipt input{width: 370px;height: 100%;font-size: 16px;color: #ffff;line-height: 50px;background: none;border: none;}
.item-contact .contact-form .form-select .form-text{cursor: pointer;font-size: 16px;}
.item-contact .contact-form .form-select .form-text i{ position: absolute; top: 20px; right: 0; width: 17px; height: 11px; background: url(/images/eye/newpc/ico_arrow.gif) no-repeat; background-size: 100% 100%;}
.item-contact .contact-form .form-select .form-text i.show{ -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
.item-contact .contact-form .select-list{ display: none; top: 60px; left: 0; width: 480px; background: #143165; -webkit-border-radius: 5px; border-radius: 5px;}
.item-contact .contact-form .select-list.show{ display: block;}
.item-contact .contact-form .select-list li{ padding: 0 25px; height: 50px; line-height: 50px; color: #c2d2f7; -webkit-border-radius: 5px; border-radius: 5px; box-sizing: border-box; cursor: pointer;}
.item-contact .contact-form .select-list li:hover,
.item-contact .contact-form .select-list li.active{ background: #2f70e1; color: #fff;}
.item-contact .contact-form .cont-left .form-title:last-of-type{ margin-top: 30px;}
.item-contact .contact-form .form-textarea textarea{padding: 10px 20px;width: 480px;height: 315px;background: #143165;font-family: "microsoft yahei";font-size: 16px;color: #fff;resize: none;-webkit-border-radius: 5px;border-radius: 5px;border: none;box-sizing: border-box;}
.item-contact .btn-deongaree{margin-top: 20px;}
.item-contact .contact-tips{margin-top: 24px;color: #c2d2f7;}
.item-contact .contact-text{ margin-top: 80px; font-size: 20px; color: #fff;}
.item-contact .contact-text span{ margin: 0 40px;}
.tips-pup{ position: fixed; top: 50%; left: 50%; padding: 20px 80px; text-align: center; letter-spacing: 2px; font-size: 24px; color: #2f70e1; background: #fff; -webkit-transform: translate(-50%); transform: translate(-50%); -webkit-border-radius:10px; border-radius: 10px; z-index: 102;}
.tips-pup-common{ color: #333;}
.tips-pup i{ display: inline-block; margin-right: 20px; width: 48px; height: 48px; background: url(/images/eye/newpc/ico_success.gif) no-repeat; background-size: 100% 100%; vertical-align: middle;}
.tips-pup-common i{ background-image:url(/images/eye/newpc/ico_tips.gif);}
.tips-pup span{ display: inline-block; max-width: 500px;}

.item-footer{ background: #011432;}
.item-footer .item-title{margin-top: 60px;font-size: 40px;color: #fff;}
.item-footer .sub-title{margin-top: 15px;color: #375da0;}
.item-footer .footer-list{ display: flex; display: -webkit-flex; margin: 0 auto 50px; width: 1200px; -webkit-align-items: flex-end; align-items: flex-end;}
.item-footer .footer-list .footer-logo{ margin-bottom: 30px; width: 132px; height: 132px;}
.item-footer .footer-nav,
.item-footer .footer-buy{ margin: 0 160px 30px 55px; font-size: 20px; color: #c2d2f7;}
.item-footer .footer-nav a,
.item-footer .footer-buy a{ color: #c2d2f7;}
.item-footer .footer-nav .nav-title,
.item-footer .footer-buy .buy-title{ margin-bottom: 35px; color: #fff;}
.item-footer .footer-nav .nav-title{ margin-bottom: 48px;}
.item-footer .footer-nav .nav-list,
.item-footer .footer-buy .buy-list{ width: 220px;}
.item-footer .footer-nav .nav-list li,
.item-footer .footer-buy .buy-list li{ display: inline-block; line-height: 1.8; cursor: pointer;}
.item-footer .footer-nav .nav-list li:hover,
.item-footer .footer-buy .buy-list li:hover{ text-decoration: underline;}
.item-footer .footer-nav .nav-list li:nth-of-type(odd){ margin-right: 20px;}
.item-footer .footer-buy .buy-list li{ text-align: center;}
.item-footer .footer-buy .buy-list li:first-of-type{ margin-right: 55px;}
.item-footer .footer-buy .buy-list li a{ font-size: 18px; color: #c2d2f7;}
.item-footer .footer-buy .buy-list img{ display: block;}
.item-footer .footer-code{ font-size: 18px; color: #ffffff; text-align: center;}
.item-footer .footer-code img{ display: block; width: 175px;}
.item-footer .footer-version{height: 60px;background: #000c1f;font-size: 16px;color: #c2d2f7;line-height: 60px;}

.move_top {
    -webkit-animation: move_top 1s forwards;
    animation: move_top 1s forwards;
}
.move_topS {
    -webkit-animation: move_topS 1s forwards;
    animation: move_topS 1s forwards;
}
.border_opacity {
    animation: border_opacity 1s forwards;
    animation-delay: .5s;
}
.list-advantage li,
.list-feedback li,
.item-contact .cont-left,
.item-contact .cont-right,
.list-download li{ -webkit-transform: translateY(100px); transform: translateY(100px);}
.list-service li,
.list-step li,
.item-footer .footer-logo,
.item-footer .footer-nav,
.item-footer .footer-buy,
.item-footer .footer-code{ -webkit-transform: translateY(30px); transform: translateY(30px);}
.list-advantage li:nth-of-type(2).move_top,
.list-feedback li:nth-of-type(2).move_top,
.list-service li:nth-of-type(2).move_topS,
.list-step li:nth-of-type(2).move_topS,
.item-footer .footer-nav.move_topS{ -webkit-animation-delay: .2s; animation-delay: .2s;}
.list-advantage li:nth-of-type(3).move_top,
.list-feedback li:nth-of-type(3).move_top,
.list-service li:nth-of-type(3).move_topS,
.list-step li:nth-of-type(3).move_topS,
.item-contact .cont-right.move_top,
.list-download li:nth-of-type(2).move_top,
.item-footer .footer-buy.move_topS{ -webkit-animation-delay: .4s; animation-delay: .4s;}
.list-service li:nth-of-type(4).move_topS,
.list-step li:nth-of-type(4).move_topS,
.item-footer .footer-code.move_topS{ -webkit-animation-delay: .6s; animation-delay: .6s;}
.list-step li:nth-of-type(5).move_topS{ -webkit-animation-delay: .8s; animation-delay: .8s;}
@-webkit-keyframes move_top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@keyframes move_top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes move_topS {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@keyframes move_topS {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes border_opacity {
    0% {
        border-bottom: 1px transparent solid;
    }
    100% {
        border-bottom:1px #E2DDDD solid;
    }
}
@media only screen and (min-width: 2148px){
    .item-banner .container{ top: 260px;}
}
@media only screen and (max-width: 1680px) {
    /*.wrapper{ font-size: 20px;}
    .container{ width: 1400px;}
    .item-banner .container .slogan{ font-size: 60px;}
    .item-title{ margin-top: 80px; font-size: 55px;}
    .item-advantage .list-advantage .advantage-title,
    .item-step .list-step .step-title{ margin: 35px 0 25px; font-size: 30px;}
    .item-feedback .list-feedback li{ width: 400px; height: 500px;}
    .item-feedback .list-feedback .feedback-img,
    .item-feedback .list-feedback .feedback-img img{ width: 400px; height: 304px;}
    .item-feedback .list-feedback .feedback-text{ width: 355px;}
    .item-step .list-step li .step-ico:after{ right: -90px; width: 135px;}
    .item-step .list-step li:nth-of-type(2) .step-ico:after{ right: -65px;}
    .item-step .list-step li:nth-of-type(3) .step-ico:after{ right: -65px; width: 110px;}
    .item-contact .btn-deongaree,
    .item-contact .contact-tips,
    .item-contact .contact-text{ margin-left: 100px;}
    .item-video .video{ height: 650px;}*/
    .item-banner .container{ top: 160px;}
    .item-banner .bg-banner{ height: 675px;}
    .kefu-btn{ bottom: 30px; width: 80px; height: 80px;}
}
@media only screen and (max-width: 1400px) {
    .container,
    .item-contact .contact-form,
    .item-footer .footer-list{ width: 98%; }
    .item-footer .footer-nav,
    .item-footer .footer-buy{ margin-right: 120px;}
    .item-contact .btn-deongaree,
    .item-contact .contact-tips{ margin-left: 10px;}

}
@media only screen and (max-width: 1200px) {
    .item-footer .footer-nav,
    .item-footer .footer-buy{ margin-right: 100px;}
    .item-step .container,
    .item-download .container{ overflow: hidden; }
    .item-feedback .container{ width: 95%; }
    .item-feedback .list-feedback li{ width: 32%; }
    .item-feedback .list-feedback .feedback-from{ font-size: 12px;}
    .item-feedback .list-feedback .feedback-img,
    .item-feedback .list-feedback .feedback-img img{ width:100%; height: auto;}
    .item-feedback .list-feedback .feedback-text{ width: 90%;}
    .item-download .list-download li:first-of-type .download-img{ width: 740px;}
    .item-download .list-download li:last-of-type .download-img{ margin-top: -61px; width: 340px;}
    .item-step .list-step li .step-ico:after{ right: -30px; width: 48px; height: 12px;  background-size: 175px 12px; }
    .item-video .video{ height: 620px;}
}