@charset "utf-8";
.swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1 }
.computer-left-align { width: 60%; float: right; text-align: left; margin-top: -150px; }
.computer-left-align3 { width: 60%; float: right; text-align: left; margin-top: -80px; }
.index-news { width: 235px; height: 250px; float: left; }
.index-news a { color: #e1e1e1; text-align: center; display: block; margin: 0 auto; line-height: 4; }
.swiper-wrapper { position: relative; width: 100%; -webkit-transition-property: -webkit-transform, left, top; -webkit-transition-duration: 0s; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-timing-function: ease; -moz-transition-property: -moz-transform, left, top; -moz-transition-duration: 0s; -moz-transform: translate3d(0px, 0, 0); -moz-transition-timing-function: ease; -o-transition-property: -o-transform, left, top; -o-transition-duration: 0s; -o-transform: translate3d(0px, 0, 0); -o-transition-timing-function: ease; -o-transform: translate(0px, 0px); -ms-transition-property: -ms-transform, left, top; -ms-transition-duration: 0s; -ms-transform: translate3d(0px, 0, 0); -ms-transition-timing-function: ease; transition-property: transform, left, top; transition-duration: 0s; transform: translate3d(0px, 0, 0); transition-timing-function: ease; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box }
.swiper-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto }
.swiper-slide { float: left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box }
.swiper-wp8-horizontal { -ms-touch-action: pan-y }
.swiper-wp8-vertical { -ms-touch-action: pan-x }
.swiper-container { }
.swiper-slide { }
.swiper-slide-active { }
.swiper-slide-visible { }
.swiper-pagination-switch { }
.swiper-active-switch { }
.swiper-visible-switch { }
body { width: 100%; height: 100%; font-family: "微软雅黑", Arial; }
a:focus { outline: none; }
div.welcome { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/welcome.jpg) 40% 80%; background-color: White; -moz-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-in-out .5s; -moz-transition: all .3s ease-in-out .5s; -ms-transition: all .3s ease-in-out .5s; -o-transition: all .3s ease-in-out .5s; transition: all .3s ease-in-out .5s; z-index: 999; }
div.welcome p { display: block; position: absolute; margin: 0px; padding: 0px; width: 370px; height: 30px; padding-top: 240px; top: 50%; left: 50%; margin-top: -135px; margin-left: -185px; color: #2fd0b5; font-size: 20px; text-align: center; background: url(../images/welcome_words.png) no-repeat; overflow: hidden; }
div.welcome p u { text-decoration: none; }
section { position: relative; overflow: hidden; }
.video .swiper-container { width: 100%; }
.video .swiper-container .swiper-slide { position: relative; overflow: hidden; }
.video .swiper-container .nth1 { background: url(../images/wp1_1.jpg) 50% 35%; -moz-background-size: cover; background-size: cover; }
.video .swiper-container .nth1 .box { position: relative; margin: 0 auto; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; z-index: 10; }
.video .swiper-container .nth1 .box .left { position: absolute; left: -300px; width: 123px; height: 231px; background: url(../images/words.png) no-repeat top right; -moz-opacity: 0; opacity: 0; -webkit-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; }
.video .swiper-container .nth1.active .box .left { left: 0px; -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth1 .box .right { position: absolute; right: -500px; margin: 0 0 0 150px; -moz-opacity: 0; opacity: 0; -webkit-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; }
.video .swiper-container .nth1.active .box .right { right: 0px; -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth1 .box .right span { font-size: 36px; color: White; }
.video .swiper-container .nth1 .box .right p span { font-size: 30px; line-height: 2; }
.video .swiper-container .nth1 .box .right i { display: block; width: 360px; height: 66px; margin-bottom: 5px; background: url(../images/words.png) no-repeat; }
.video .swiper-container .nth1 .box .right p { font-size: 18px; line-height: 22px; color: #ccc; text-align: center; }
.video .swiper-container .nth1 .shade { position: absolute; width: 400%; height: 1800px; background: url(../images/swiper_nth1_shade.png) no-repeat center top; -moz-background-size: cover; background-size: cover; -webkit-transition: width .8s ease-in-out .3s; -moz-transition: width .8s ease-in-out .3s; -ms-transition: width .8s ease-in-out .3s; -o-transition: width .8s ease-in-out .3s; transition: width .8s ease-in-out .3s; }
.video .swiper-container .nth1.active .shade { width: 100%; }
.video .swiper-container .nth1 .line { position: relative; margin: 0 auto; top: -91px; width: 602px; height: 413px; z-index: 20; }
.video .swiper-container .nth1 .line u { display: block; width: 0px; height: 0px; text-decoration: none; -moz-opacity: 0; opacity: 0; -webkit-transition: all .8s ease-in .7s; -moz-transition: all .8s ease-in .7s; -ms-transition: all .8s ease-in .7s; -o-transition: all .8s ease-in .7s; transition: all .8s ease-in .7s; }
.video .swiper-container .nth1.active .line u { width: 600px; height: 411px; -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth2 .box { position: absolute; left: -350px; text-align: right; -webkit-transition: left .6s ease-in-out 0s; -moz-transition: left .6s ease-in-out 0s; -ms-transition: left .6s ease-in-out 0s; -o-transition: left .6s ease-in-out 0s; transition: left .6s ease-in-out 0s; z-index: 10; }
.video .swiper-container .nth2 .box span { font-size: 36px; color: White; }
.video .swiper-container .nth2 .box i { display: block; width: 320px; height: 65px; margin: 10px 0px 8px 0px; }
.video .swiper-container .nth2 .box p { margin: 0px; font-size: 16px; line-height: 25px; color: #ccc; }
.video .swiper-container .nth2 .shade { width: 100%; height: 2000px; -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; }
.video .swiper-container .nth2.active .shade { width: 50%; -moz-opacity: 0.75; opacity: 0.75; filter: alpha(opacity=75); }
.video .swiper-container .nth3 { background: url(../images/wp1_3.jpg) 50% center; -moz-background-size: cover; background-size: cover; }
.video .swiper-container .nth2 { background: url(../images/wp1_2.jpg) 50% 25%; -moz-background-size: cover; background-size: cover; padding-top: 50px; }
.video .swiper-container .nth3 .box { position: relative; width: 100%; }
.video .swiper-container .nth3 .box .top { font-size: 80px; color: White; text-align: center; -moz-opacity: 0; opacity: 0; -webkit-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; z-index: 10; }
.video .swiper-container .nth3.active .box .top { font-size: 36px; -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth3 .box .mid { width: 358px; height: 66px; margin: 0 auto; margin-top: 20px; margin-bottom: 10px; -moz-opacity: 0; opacity: 0; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; }
.video .swiper-container .nth3.active .box .mid { -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth3 .box .bottom { width: 100%; color: #ccc; font-size: 28px; line-height: 30px; text-align: center; -moz-opacity: 0; opacity: 0; -webkit-transition: all .6s ease-in-out .3s; -moz-transition: all .6s ease-in-out .3s; -ms-transition: all .6s ease-in-out .3s; -o-transition: all .6s ease-in-out .3s; transition: all .6s ease-in-out .3s; z-index: 10; }
.video .swiper-container .nth3 .box .bottom span { font-size: 36px; }
.video .swiper-container .nth3.active .box .bottom { -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth4 { background: url(../images/wp1_4.jpg) 50% top; -moz-background-size: cover; background-size: cover; }
.video .swiper-container .nth4 .box { position: relative; width: 100%; }
.video .swiper-container .nth4 .box .top { position: relative; top: -100px; width: 100%; text-align: center; -moz-opacity: 0; opacity: 0; -webkit-transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; transition: all .3s linear 0s; z-index: 10; }
.video .swiper-container .nth4.active .box .top { top: 0px; -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth4 .box .top span { font-size: 36px; color: White; }
.video .swiper-container .nth4 .box .top i { display: block; width: 242px; height: 64px; margin: 0 auto; margin-top: 15px; background: url(../images/words.png) no-repeat 0px -147px; }
.video .swiper-container .nth4 .box .bottom { position: relative; top: 100px; width: 100%; margin-top: 15px; font-size: 16px; line-height: 25px; color: #ccc; text-align: center; -moz-opacity: 0; opacity: 0; -webkit-transition: all .5s linear 0s; -moz-transition: all .5s linear 0s; -ms-transition: all .5s linear 0s; -o-transition: all .5s linear 0s; transition: all .5s linear 0s; z-index: 10; }
.video .swiper-container .nth4.active .box .bottom { top: 0px; -moz-opacity: 1; opacity: 1; }
.video .swiper-container .nth4 .box .bottom u { margin: 0 5px; color: #00dfb9; text-decoration: none; }
.video .innerBox { position: absolute; bottom: 40px; width: 100%; z-index: 10; }
.video .innerBox .news { margin: 0 auto; margin-bottom: 30px; width: 400px; }
.video .innerBox .news span { float: left; margin: 1px 15px 0px 0px; color: #00dfb9; font-weight: bold; }
.video .innerBox .news ul { float: left; }
.video .innerBox .news ul li a { color: #ddd; }
.video .innerBox .news a.more { float: right; color: #00dfb9; margin-top: -3px; text-decoration: none; border-bottom: 1px dotted #00dfb9; -webkit-transition: color .3s ease-in-out 0s; -moz-transition: color .3s ease-in-out 0s; -ms-transition: color .3s ease-in-out 0s; -o-transition: color .3s ease-in-out 0s; transition: color .3s ease-in-out 0s; }
.video .innerBox .news a.more:hover { color: White; text-decoration: none; -webkit-transition: color .3s ease-in-out 0s; -moz-transition: color .3s ease-in-out 0s; -ms-transition: color .3s ease-in-out 0s; -o-transition: color .3s ease-in-out 0s; transition: color .3s ease-in-out 0s; }
.video .innerBox .guide { margin: 0 auto; margin-bottom: 80px; width: 150px; }
.video .innerBox .guide a { display: block; float: left; margin: 0 5px; width: 40px; height: 3px; font-size: 3px; background: White; cursor: pointer; }
.video .innerBox .guide a.active { background: #00dfb9; }
.video .innerBox a.movedown { display: block; margin: 0 auto; width: 47px; height: 47px; background: url(../images/icons.png) no-repeat 0px -60px; cursor: pointer; z-index: 99; }
.video .innerBox a.movedown:hover { background: url(../images/icons.png) no-repeat 0px -112px; }
section.business { background: url(../images/conten1-bg.png) 50% bottom; }
.business .box {  -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; width:1000px; margin:0 auto;}
.business .box .caption { width: 100%; text-align: center; -moz-opacity: 0; opacity: 0; -webkit-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; }
.business.active .box .caption { -moz-opacity: 1; opacity: 1; padding-bottom:40px}
.business .box .caption i { display: block; margin: 0 auto; margin-bottom: 20px; width:510px; height: 31px; background: url(../images/words.png) no-repeat 0px -294px; }
.business .box .caption span { font-size: 24px; letter-spacing: 3px; color: #333; font-family: "微软雅黑", "Microsoft Yahei"; font-weight: bold; }
.business .box ul.items li { width: 400px;
    height: 118px;
    margin: 0;
    background: url(../images/bg_green.png) repeat-x 0px 400px;
    overflow: hidden; }
.business .box ul.items li i { display: block; position: relative; margin: 0 auto; margin-top: 43px; height: 56px; }
.business .box ul.items li.pc i {width: 45px;
    top: -22px;
    left: 19px;
    background: url(../images/words.png) no-repeat -202px -373px;
    float: left;}
.business .box ul.items li.mobi i {    width: 45px;
    background: url(../images/words.png) no-repeat -410px -424px;
    float: left;
    left: 26px;
    top: -24px;}
.business .box ul.items li.sys i {    width: 45px;
    background: url(../images/words.png) no-repeat -306px -374px;
    float: left;
        left: 23px;
    top: -24px;}
.business .box ul.items li.app i {width: 45px;
    background: url(../images/words.png) no-repeat -314px -437px;
    float: left;
    left: 23px;
    top: -10px; }
.business .box ul.items li.host i { width: 79px; background: url(../images/words.png) no-repeat -420px -439px; }
.business .box ul.items li u {    display: block;
    position: absolute;
    width: 80px;
    height: 82px;
	margin-top:10px;
    background: url(../images/words.png) no-repeat -30px -389px;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -ms-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s; }
.business .box ul.items li u.cl { clip: rect(0px, 80px, -10px, 80px); }
.business.active .box ul.items li u.cl { clip: rect(0px, 83px, 83px,-30px); }
.business .box ul.items li u.cr { clip: rect(156px, 80px, 80px, 80px); }
.business.active .box ul.items li u.cr { clip: rect(0, 80px, 80px, 0px); }
.business .box ul.items li strong { display: block; display: block;
    margin-top: 13px;
    margin-left: 103px;
    font-size: 14px;
    font-weight: normal;font-size: 14px; font-weight: normal }
.business .box ul.items li p { position: relative; top:10px;color: White; font-family: Arial, "宋体"; width:335px;font-size: 12px; line-height: 20px; left:59px; color:#333;}
.business .box ul.items li:hover { background-position: 0px 0px; -webkit-transition: all .5s ease-in-out .3s; -moz-transition: all .5s ease-in-out .3s; -ms-transition: all .5s ease-in-out .3s; -o-transition: all .5s ease-in-out .3s; transition: all .5s ease-in-out .3s; }
.business .box ul.items li:hover i { -webkit-transition: all .5s ease-in-out .4s; -moz-transition: all .5s ease-in-out .4s; -ms-transition: all .5s ease-in-out .4s; -o-transition: all .5s ease-in-out .4s; transition: all .5s ease-in-out .4s; }
.business .box ul.items li.pc:hover i {     background: url(../images/words.png) no-repeat -158px -374px;; }
.business .box ul.items li.mobi:hover i { background: url(../images/words.png) no-repeat -369px -424px;}
.business .box ul.items li.sys:hover i { background: url(../images/words.png) no-repeat -256px -374px }
.business .box ul.items li.app:hover i { background: url(../images/words.png) no-repeat -264px -439px; }
.business .box ul.items li.host:hover i { background: url(../images/words.png) no-repeat -335px -439px; }
.business .box ul.items li:hover u.cl { clip: rect(0px, 156px, -10px, 78px); }
.business .box ul.items li:hover u.cr { clip: rect(156px, 78px, 156px, 0px); }
.business .box ul.items li:hover strong { color: White; -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -ms-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; }
.business .box ul.items li:hover p { top: 10px; -webkit-transition: all .3s ease-in-out .5s; -moz-transition: all .3s ease-in-out .5s; -ms-transition: all .3s ease-in-out .5s; -o-transition: all .3s ease-in-out .5s; transition: all .3s ease-in-out .5s; color:white }
.business .box label { display: block; margin: 0 auto; margin-top: -40px; width: 297px; height: 21px; background: url(../images/words.png) no-repeat 0px -333px;}