/*
* @ PROJECT F3
* @ AUTNOR ZoomWell Team
* @ LINK WWW.ZWLBS.COM
*/
@charset "utf-8";
*{box-sizing:border-box}
body,div,h1,h3,h4,li,p,ul{margin:0;padding:0}
ul{list-style:none}
a{text-decoration:none;border:none;outline:0}
img{display:block;border:none}
body{width:100%;font-family:"Hiragino Sans GB","黑体","Microsoft YaHei",sans-serif}
body,html{height:100%}
h1{font-size:56px;font-weight:100}
h2{font-size:42px;font-weight:700}
h3{font-size:30px;font-family:"微软雅黑";font-weight:700;color:#4d4d4d}
h4{font-size:28px;font-weight:100}
h5{font-size:22px;font-weight:100}
.center-h{text-align:center}
.color-gray{color:#333}
.color-orange{color:#e95b29}
.color-yellow{color:#f5c120}
.color-white{color:#fff}
.preloader-mask{background:#eee;position:fixed;z-index:9999;left:0;right:0;bottom:0;top:0}
canvas{background:#fff;display:block}
#c{position:absolute;-wekit-transform:translate(-50%,-50%)}
.preloader-container{width:500px;height:150px;position:absolute;left:50%;top:35%;margin-left:-250px}
.preloader-progress-bg{width:100%;height:10px;border-radius:10px;background-color:#f5c120;margin-bottom:5px}
.preloader-progress{width:0;height:100%;border-radius:10px;background-color:#e95b29}
.preloader-text{color:#f5c120;text-align:center;font-size:22px;font-weight:100}
.gray-bg{background:-webkit-linear-gradient(top,#fff 0,#f6f6f6 150px);background:linear-gradient(to bottom,#fff 0,#f6f6f6 150px)}
.section1{overflow:hidden;background-color:#000}
.section1 .contain{height:980px;position:relative}
.firstpage-container{position:relative;height:860px;overflow:hidden}
.video-line-cutter{height:2px;background-color:#000;position:absolute;width:100%;left:0;bottom:0;z-index:20}
.logo{position:absolute;height:60px;top:150px;left:28px;z-index:10}
.firstpage-bg{position:absolute;object-fit:fill;width:100%;height:100%;left:0;top:0;bottom:0;z-index:1;background-size:cover;background-repeat:no-repeat}
.video-bg{position:absolute;right:0;bottom:0;left:0;width:auto!important;height:100%}
.slide-indicator-container{position:absolute;bottom:15px;width:168px;height:8px;margin:auto;z-index:30;left:0;right:0}
.slide-indicator-container:after{content:'';display:block;clear:both}
.slide-indicator{width:40px;height:8px;background-color:#fff;margin-left:8px;margin-right:8px;background-color:rgba(255,255,255,.3);float:left;cursor:pointer}
.slide-indicator-container .active{background-color:rgba(225,225,225,.8)}
.section1 .contain{background-color:#000}
.firstpage-content{width:63.22%;height:100%;margin:auto;margin-top:240px;position:relative;z-index:10;overflow:hidden}
.nav-arrow{position:absolute;cursor:pointer;top:470px;color:#666;line-height:0;font-size:0;width:60px;height:60px;-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;background:url(../img/slide-shortcut.png) no-repeat;opacity:.5;z-index:100}
.nav-arrow-left{left:100px;background-position:0 0}
.nav-arrow-left:hover{background-position:0 -60px;opacity:1}
.nav-arrow-right{right:100px;background-position:-60px 0}
.nav-arrow-right:hover{background-position:-60px -60px;opacity:1}
.firstpage-content .left{margin-right:440px}
.firstpage-content .right{position:absolute;float:right;width:440px;right:0;top:0;bottom:0;z-index:11}
.detail-button{display:inline-block;background-color:rgba(44,48,60,.8);color:#e95b29;border:2px solid #e95b29;border-radius:5px;width:222px;line-height:60px;text-align:center;height:60px;font-size:28px;text-decoration:none}
.detail-button:hover{color:#fff;background-color:#e95b29}
.login-outer-border{border:16px solid rgba(255,225,225,.08);height:100%;width:100%}
.login-inner-bg{background-color:rgba(225,225,225,.18);height:100%;width:100%}
.login-title{text-align:center;padding-top:59px;margin-bottom:45px;font-size:24px}
.login-control-wraper{width:280px;margin:auto;margin-top:20px;border-radius:6px;height:40px;position:relative}
.border-black{border:1px solid #0a0a0c;background-color:rgba(14,19,22,.8)}
.login-control-wraper input,.login-control-wraper input:focus{border:none;background-color:transparent!important;height:100%;display:inline-block;margin-left:37px;width:241px;font-size:14px;color:#fff;border-top-right-radius:6px;border-bottom-right-radius:6px;outline:0}
input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-transition-delay:9999s;-webkit-transition:color 9999s ease-out,background-color 9999s ease-out}
.login-control-icon{display:inline-block;width:20px;height:20px;background-image:url(../img/sprite.svg);background-repeat:no-repeat;position:absolute;left:10px;top:10px}
.icon-username{background-position:-20px 0}
.icon-pwd{background-position:0 0}
.slide-code{width:100%;height:40px;position:relative;border:1px solid #cfcfcf;background-color:#f5f5f5;overflow:hidden;text-align:center;user-select:none;-moz-user-select:none;-webkit-user-select:none;border-radius:3px}
.slide-code-bg{height:100%;background-color:#e8e8e8;z-index:1}
.slide-code-bg,.slide-code-label{position:absolute;left:0;top:0}
.slide-code-label{width:40px;height:40px;line-height:40px;border-right:1px solid #cfcfcf;border-top:none;border-bottom:none;border-left:none;background:#fff;z-index:3;cursor:move;background:#fff url(../img/codee.png) no-repeat center}
.slide-code-labeltip{position:absolute;left:0;width:100%;height:100%;font-size:13px;color:#787878;line-height:40px;text-align:center;z-index:2;background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation:slidetounlock 3s infinite}
@-webkit-keyframes slidetounlock{0%{background-position:-113px 0}
to{background-position:113px 0}
}
.login_msg,.slide-code-labeltip{font-family:Microsoft Yahei,serif}
.login-button{background-image:url(../img/login_button.png);background-repeat:repeat-x;-moz-transition:transform .2s ease,box-shadow .25s ease;-webkit-transition:transform .2s ease,box-shadow .25s ease;transition:transform .2s ease,box-shadow .25s ease;border-radius:6px}
.login-button button{cursor:pointer;text-align:center;line-height:40px;color:#fff;width:100%;height:100%;font-size:16px;font-family:'黑体';border:none;background-color:transparent}
.error-info{color:red;font-family:'Microsoft YaHei';font-size:14px}
.login-button:focus,.login-button:hover{box-shadow:0 5px 8px rgba(0,0,0,.4)}
.hidden{display:none}
.section2{width:1244px;margin:auto}
.section2 .contain::after{content:'';display:block;clear:both}
.section2 .contain .left{width:639px;float:left}
.section2 .contain .left img{width:100%;height:auto}
.section2 .contain .right{width:605px;float:left;position:relative;padding-left:40px}
.computer-text{margin:60px 0 20px 32px;font-size:22px}
.computer-grid{padding-top:40px}
.computer-grid .icon-text{margin-left:0}
.computer-grid::after{content:'';display:block;clear:both}
.computer-grid-item{width:33.33%;float:left;text-align:center}
.desc{font-family:'Microsoft YaHei';font-size:20px;color:#4a4a4a;margin:auto;line-height:30px}
.section2 .desc{padding-left:140px}
.section3{margin-top:22px}
.section3 .content{width:980px;margin:auto;height:100%;position:relative;padding-top:290px}
.section3 h2{padding-top:10px;margin-bottom:140px}
.demo{width:551px;height:330px;position:absolute;background-image:url(../img/demo.png);background-repeat:no-repeat;left:31px;top:-55px;z-index:10}
.demobig{width:774px;height:427px;position:absolute;background-image:url(../img/demobig.png);background-repeat:no-repeat;left:170px;top:-113px;z-index:20}
.icon-grid{margin-top:80px;margin-bottom:20px}
.icon-grid::after{content:'';display:block;clear:both}
.icon-grid-item{width:20%;float:left}
.icon-icon{width:130px;height:130px;background-image:url(../img/newtubiao.png);background-repeat:no-repeat;margin:auto}
.computer-grid .icon-icon{height:100px}
.icon-big{background-position:0 0}
.icon-open{background-position:0 -100px}
.icon-independent{background-position:0 -206px}
.icon-mail{background-position:-1px -318px}
.icon-sim{background-position:-1px -450px}
.icon-data{background-position:-1px -582px}
.icon-trend{background-position:-1px -716px}
.icon-computer{background-position:-1px -848px}
.icon-yidi{background-position:0 -980px}
.icon-pingtai{background-position:0 -1098px}
.icon-liucheng{background-position:0 -1218px}
.icon-zhiling{background-position:0 -1334px}
.icon-duanxin{background-position:0 -1454px}
.icon-text{color:#4a4a4a;font-size:24px;margin-left:50px;margin-top:30px;display:inline-block}
.section3 .desc{padding-left:0}
.section3 .icon-text-underline{height:20px;float:right;background-image:url(../img/sprite.svg);background-position:0 -20px;width:41px;margin-top:8px;margin-right:2px;display:inline-block}
.phone-grid{width:1244px;margin:auto}
.phone-grid .left{width:40%;float:left}
.phone-grid .right{width:60%;float:left}
.phone-grid::after{content:'';display:block;clear:both}
.phone-grid-item{width:33.33%;float:left;text-align:center}
.phone-grid-item-second{width:25%;float:left;text-align:center}
.phone-grid-item .icon-text,.phone-grid-item-second .icon-text{margin-left:0}
.three-phone{position:relative;padding-left:50px}
.three-phone img{display:block;position:absolute;height:auto}

.corner{
  width:50px;
  height:50px;
  position:fixed;
  right:60px;
  z-index:30;
  background-image:url(../img/sprite.svg);
  background-repeat:no-repeat;
  background-color:rgb(201, 198, 198);
  border-radius:5px;
  cursor:pointer
}
.gotop{
  bottom:50px;
  background-position:0 -34px;
}
.gotop:hover{
  background-position:0 -80px
}
.android{
  bottom:156px;
  background-position:-88px -34px;
}
.android:hover{
  background-position:-44px -34px
}
.ios{
  bottom:103px;
  background-position:-88px -82px;
}
.ios:hover{
  background-position:-44px -82px
}
.corner-show{
  width:155px;
  height:125px;
  position:fixed;
  right:110px;
  z-index:30;
  bottom:100px;
}
.corner-show-rec{
  background-color: #dddddd;
  border-radius: 5px;
  width:124px;
  height:100%;
  padding: 6px;
}
.corner-show-rec img{
  border-radius:5px;
  width:100%;
  height:100%;
  display: block;
}
.corner-show-triag{
  width:20px;
  height:10px;
  border-left:12px solid #dddddd;
  border-top:8px solid transparent;
  border-bottom: 8px solid transparent;
  position: absolute;
  top:calc(50% - 10px);
  right:12px;
}
.footer{width:100%;color:#2d2d2d;text-align:center;font-family:Microsoft Yahei;font-size:9pt;line-height:14pt;margin-bottom:20px;margin-top:20px}
.footer a{color:#428bca;text-decoration:none}
.text-container{height:450px}
@media screen and (max-width:1600px){.firstpage-content{width:73.22%}
.logo{height:50px;top:125px;left:22px}
.section1 .contain{height:880px;position:relative}
.firstpage-container{height:780px}
h1{font-size:54px}
h2{font-size:36px}
h3{font-size:26px}
h4{font-size:24px}
h5{font-size:18px}
.detail-button{font-size:24px;width:218px;line-height:56px;height:56px}
.three-text-item span{width:190px;height:75px;line-height:75px;font-size:55px}
}
@media screen and (max-width:1400px){.firstpage-content{width:83.22%}
.logo{height:40px;top:60px;left:18px}
.section1 .contain{height:780px;position:relative}
.firstpage-container{height:740px}
h1{font-size:50px}
h2{font-size:36px}
h3{font-size:24px}
h4{font-size:22px}
h5{font-size:16px}
.detail-button{font-size:22px;width:216px;line-height:54px;height:54px}
.three-text-item span{width:180px;height:70px;line-height:70px;font-size:50px}
.nav-arrow{top:350px}
.nav-arrow-left{left:15px}
.nav-arrow-right{right:15px}
.firstpage-content{margin-top:140px}
}
.animation{animation-play-state:paused;visibility:hidden}
.animated{animation-duration:1s;animation-fill-mode:backwards;animation-play-state:running;visibility:visible}
@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}
to{transform:translate3d(0,0,0)}
}
.slideInRight{animation-name:slideInRight}
@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}
to{transform:translate3d(0,0,0)}
}
.slideInDown{animation-name:slideInDown}
@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}
to{transform:translate3d(0,0,0)}
}
.slideInLeft{animation-name:slideInLeft}
@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}
to{transform:translate3d(0,0,0)}
}
.slideInUp{animation-name:slideInUp}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}
to{opacity:1;transform:none}
}
.fadeInDown{animation-name:fadeInDown}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}
to{opacity:1;transform:none}
}
.fadeInUp{animation-name:fadeInUp}
@keyframes bounceInLeft{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;transform:translate3d(-3000px,0,0)}
60%{opacity:1;transform:translate3d(25px,0,0)}
75%{transform:translate3d(-10px,0,0)}
90%{transform:translate3d(5px,0,0)}
to{transform:none}
}
.bounceInLeft{animation-name:bounceInLeft}
@keyframes flipInX{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}
40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}
60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}
80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}
to{transform:perspective(400px)}
}
.flipInX{backface-visibility:visible!important;animation-name:flipInX}
@keyframes lightSpeedIn{from{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
60%{transform:skewX(20deg);opacity:1}
80%{transform:skewX(-5deg);opacity:1}
to{transform:none;opacity:1}
}
.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}
@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}
50%{opacity:1}
}
.zoomIn{animation-name:zoomIn}
@keyframes flipInY{from{transform:perspective(400px) rotate3d(0,1,0,90deg);animation-timing-function:ease-in;opacity:0}
40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);animation-timing-function:ease-in}
60%{transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}
80%{transform:perspective(400px) rotate3d(0,1,0,-5deg)}
to{transform:perspective(400px)}
}
.flipInY{backface-visibility:visible!important;animation-name:flipInY}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}
to{opacity:1;transform:none}
}
.fadeInLeft{animation-name:fadeInLeft}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}
to{opacity:1;transform:none}
}
.fadeInRight{animation-name:fadeInRight}
@keyframes bounceInRight{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
from{opacity:0;transform:translate3d(3000px,0,0)}
60%{opacity:1;transform:translate3d(-25px,0,0)}
75%{transform:translate3d(10px,0,0)}
90%{transform:translate3d(-5px,0,0)}
to{transform:none}
}
.bounceInRight{animation-name:bounceInRight}
@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}
to{opacity:0;transform:translate3d(-2000px,0,0)}
}
.bounceOutLeft{animation-name:bounceOutLeft}
@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}
to{opacity:0;transform:translate3d(2000px,0,0)}
}
.bounceOutRight{animation-name:bounceOutRight}
@keyframes slideOutRight{from{transform:translate3d(0,0,0)}
to{visibility:hidden;transform:translate3d(100%,0,0)}
}
.slideOutRight{animation-name:slideOutRight}
@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}
to{visibility:hidden;transform:translate3d(-100%,0,0)}
}
.slideOutLeft{animation-name:slideOutLeft}
@keyframes fadeIn{from{opacity:0}
to{opacity:1}
}
.fadeIn{animation-name:fadeIn}
@keyframes fadeOut{from{opacity:1}
to{opacity:0}
}
.fadeOut{animation-name:fadeOut}
.mobile-bg{padding:15px;background-image:url(../img/video-poster.jpg);background-position:center;background-size:cover;height:100%}