@charset "utf-8";
/* CSS Document */

.header{ width:100%; background:none; position:fixed; left:0; top:0; z-index:9999;}
.head{ position:relative;}
.head::before{ content:''; display:block; width:200%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:-50%; top:0; z-index:9;}
.header h1.logo{ z-index:10;}
.header a.gosearch,
ul.nav{ background-color:transparent;}
ul.nav li a{ border-bottom-color:transparent;}
ul.nav li p.sub a{ color:#fff; color:#333;}
ul.nav li p.sub a:after{ color:#fff !important; color:#333 !important;}
ul.nav li p.sub a:hover{ color:#00a65c;}
.footer{ width:100%; background:rgba(0,0,0,0.7); position:absolute; left:0; bottom:0; z-index:9999;}

.loading{ background:#000 url(../images/loading.gif) center no-repeat; background-size:36px auto;}
.loading .dowebok-Wrap{ opacity:0;}
.dowebok-Wrap{ -webkit-transition:opacity 1s; -moz-transition:opacity 1s; -o-transition:opacity 1s; transition:opacity 1s;}

.ms-section{ background-position:center; background-repeat:no-repeat; background-size:cover; overflow:hidden;}
.ms-right{ width:0 !important;}

.ms-left{ width:100% !important;}
.ms-left .ms-section{ overflow:hidden;}
.ms-left .ms-section1{ background-image/:url(../images/icons/screen1.jpg);}
.ms-left .ms-section2{ background-image:url(../images/icons/screen2.jpg);}
.ms-left .ms-section3{ background-image:url(../images/icons/screen3.jpg);}
.ms-left .ms-section4{ background-image:url(../images/icons/screen4.jpg);}
.ms-left .ms-section5{ background-image:url(../images/icons/screen5.jpg);}

.ms-left .ms-section .con{ width:1336px; padding:120px 0 50px; padding-bottom:0; margin:0 auto;}
.ms-left .ms-section .con::after{ content:''; display:block; height:0; clear:both;}
.ms-left .ms-section h2.title{ display:block; font-weight:normal; clear:both;}
.ms-left .ms-section h2.title::after{ content:''; display:block; height:0; clear:both;}
.ms-left .ms-section h2.title img{ display:block; clear:both; animation-name:bounceOutLeft;}
.ms-left .ms-section h2.title span{ display:block; line-height:60px; color:#fff; font-size:30px; border-top:2px solid #fff; float:left; margin:26px 0 0; animation-name:bounceOutRight;}

.ms-left .ms-section.active h2.title img{ animation-delay:0.7s; animation-name:bounceInLeft;}
.ms-left .ms-section.active h2.title span{ animation-delay:0.7s; animation-name:bounceInRight;}

.ms-left .ms-section1 .banner{ height:100vh; overflow:hidden; position:relative; z-index:1; margin:0 auto;}
.ms-left .ms-section1 .banner .bd{ position:relative; height:auto; z-index:0;}
.ms-left .ms-section1 .banner .bd ul,
.ms-left .ms-section1 .banner .bd ul li,
.ms-left .ms-section1 .banner .bd ul li a,
.ms-left .ms-section1 .banner .bd ul li a img{ display:block; width:100%; height:100vh;}
.ms-left .ms-section1 .banner .hd{ display:none; width:100%; z-index:1; position:absolute; left:0; bottom:14px;}
.ms-left .ms-section1 .banner .hd ul{ display:block; height:10px; text-align:center;}
.ms-left .ms-section1 .banner .hd ul li{ display:inline-block; *display:inline; *zoom:1; width:10px; height:10px; background:#fff; border-radius:50%; margin:0 8px; vertical-align:top; cursor:pointer;}
.ms-left .ms-section1 .banner .hd ul li.on{ background:#ff8226;}


/*
.ms-left .ms-section1 div{ width:100%; position:absolute; left:0;}
.ms-left .ms-section1 .text1{ height:10.20%; top:25.31%; z-index:5;}
.ms-left .ms-section1 .text2{ height:4.90%; top:41.32%; z-index:4;}
.ms-left .ms-section1 .text3{ height:3.26%; top:50.92%; z-index:3;}
.ms-left .ms-section1 .text4{ height:4.08%; top:81.53%; z-index:2;}
.ms-left .ms-section1 .pic1{ height:4.08%; top:81.53%; z-index:1;}

.ms-left .ms-section1 img{ display:block; height:100%; margin:0 auto;}
.ms-left .ms-section1 .text1 img{ animation-name:bounceOutUp;}
.ms-left .ms-section1 .text2 img{ animation-name:flipOutX;}
.ms-left .ms-section1 .text3 img{ animation-name:bounceOutDown;}
.ms-left .ms-section1 .text4 img{ animation-name:rollOut;}
.ms-left .ms-section1 .pic1 img{ animation-name:zoomOut;}

.ms-left .ms-section1.active img{ animation-delay:0.7s;}
.ms-left .ms-section1.active .text1 img{ animation-name:bounceInDown;}
.ms-left .ms-section1.active .text2 img{ animation-name:flipInX;}
.ms-left .ms-section1.active .text3 img{ animation-name:bounceInUp;}
.ms-left .ms-section1.active .text4 img{ animation-name:rollIn;}
.ms-left .ms-section1.active .pic1 img{ animation-name:zoomIn;}
*/

.ms-left .ms-section2 .con{ position:absolute; left:50%; top:50%; margin:-363px 0 0 -668px; margin-top:-342px; animation-name:zoomOutRight;}
.ms-left .ms-section2 .video{ width:582px; height:400px; overflow:hidden; float:right; margin:-6px 0 0 70px; animation-name:fadeOutRightBig; margin-top:14px;}
.ms-left .ms-section2 .video *{ display:block; width:582px; height:400px;}
.ms-left .ms-section2 .txt{ max-height:216px; max-height:252px; line-height:36px; color:#fff; color:#333; font-size:15px; overflow:hidden; padding:42px 0 0; animation-name:zoomOut; animation-duration:0.6s; animation-delay:0.2s; padding-top:62px; padding-top:26px;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:7;
}
.ms-left .ms-section2 ul{ display:block; overflow:hidden; padding:52px 0 0; animation-name:rotateOutDownLeft;}
.ms-left .ms-section2 ul li{ display:block; float:left; margin-left:64px;}
.ms-left .ms-section2 ul li:first-child{ margin-left:0;}
.ms-left .ms-section2 ul li a{ display:block; width:80px; overflow:hidden;}
.ms-left .ms-section2 ul li a img{ display:block; margin:0 auto;}
.ms-left .ms-section2 ul li a span{ display:block; line-height:28px; color:#fff; color:#005580; font-size:15px; text-align:center; padding:14px 0 0;}
.ms-left .ms-section2 ul li a:hover img{ transition-duration:0.6s; transform:rotateY(180deg);}

.ms-left .ms-section2.active .video{ animation-name:fadeInRightBig; animation-delay:0.7s;}
.ms-left .ms-section2.active .txt{ animation-name:zoomIn; animation-delay:1s;}
.ms-left .ms-section2.active ul{ animation-name:rotateInUpLeft; animation-delay:0.7s;}

.ms-left .ms-section3 .con{ position:absolute; left:50%; top:50%; margin:-359px 0 0 -668px; margin-top:-342px;}
.ms-left .ms-section3 ul.tab{ display:block; overflow:hidden; float:right; clear:both; padding:40px 0 0; padding-top:60px; animation-name:flipOutX;}
.ms-left .ms-section3 ul.tab li{ display:block; line-height:42px; color:#333; font-size:16px; text-align:center; padding:0 28px; background:#fff; border-radius:5px; cursor:pointer; float:left; margin-left:24px;}
.ms-left .ms-section3 ul.tab li.cur{ color:#fff; background:#009b72;}
.ms-left .ms-section3 .tbox{ overflow:hidden; clear:both; padding:60px 0 0; animation-name:zoomOut;}
.ms-left .ms-section3 .tbox ul{ display:none; overflow:hidden; margin:10px -20px 0;}
.ms-left .ms-section3 .tbox ul li{ display:block; width:25%; padding:0 20px; box-sizing:border-box; float:left;}
.ms-left .ms-section3 .tbox ul li a.pic{ display:block; overflow:hidden; position:relative; border:3px solid #e5e5e5;}
.ms-left .ms-section3 .tbox ul li a.pic img{ display:block; width:100%; height:228px; position:relative; z-index:5; transition-duration:0.7s;}
.ms-left .ms-section3 .tbox ul li a.pic em{ display:block; width:100%; height:100%; background:#00a65c; box-sizing:border-box; overflow:hidden; position:absolute; left:0; top:0; z-index:1; opacity:0; transition-duration:0.5s;}
.ms-left .ms-section3 .tbox ul li a.pic em *{
	transition:all 0.5s;
	-moz-transition:all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
}
.ms-left .ms-section3 .tbox ul li a.pic em span.title{ display:block; line-height:70px; color:#fff; font-size:18px; font-weight:bold; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border-bottom:1px solid #fff; margin:8px 28px 0; transform:scale(0);}
.ms-left .ms-section3 .tbox ul li a.pic em .txt{ display:block; height:48px; line-height:24px; color:#fff; font-size:14px; overflow:hidden; margin:10px 32px 0; transform:scale(0);
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.ms-left .ms-section3 .tbox ul li a.pic em span.more{ display:block; width:94px; line-height:30px; color:#fff; font-size:14px; text-align:center; border:1px solid #fff; position:absolute; left:50%; margin-left:-48px; bottom:10%; transform:scale(0);}
.ms-left .ms-section3 .tbox ul li a.pic:hover img{ opacity:0; transform:scale(2);}
.ms-left .ms-section3 .tbox ul li a.pic:hover em{ opacity:1;}
.ms-left .ms-section3 .tbox ul li a.pic:hover em span.title{ transform:scale(1);}
.ms-left .ms-section3 .tbox ul li a.pic:hover em .txt{ transform:scale(1);}
.ms-left .ms-section3 .tbox ul li a.pic:hover em span.more{ transform:scale(1);}

.ms-left .ms-section3.active ul.tab{ animation-name:flipInX; animation-delay:1s;}
.ms-left .ms-section3.active .tbox{ animation-name:zoomIn; animation-duration:0.7s; animation-delay:1s;}

.ms-left .ms-section4 .con{ position:absolute; left:50%; top:50%; margin:-420px 0 0 -668px; margin-top:-342px;}
.ms-left .ms-section4 ul{ display:block; overflow:hidden; margin:0 -34px 0;}
.ms-left .ms-section4 ul li{ display:block; width:33.33%; padding:32px 34px 0; padding-top:24px; box-sizing:border-box; float:left;}
.ms-left .ms-section4 ul li a{ display:block; overflow:hidden; position:relative;}
.ms-left .ms-section4 ul li a img{ display:block; width:100%; height:222px; position:relative; z-index:1; transition-duration:0.5s;}
.ms-left .ms-section4 ul li a p{ display:block; width:100%; text-align:center; background:rgba(0,0,0,0.7); overflow:hidden; position:absolute; left:0; bottom:0; z-index:3; transition-duration:0.5s;}
.ms-left .ms-section4 ul li a p span{ display:block; line-height:54px; color:#fff; font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 24px;}
.ms-left .ms-section4 ul li a p span font{ font-weight:normal; padding-right:2em;}
.ms-left .ms-section4 ul li a em{ display:block; width:100%; height:100%; background:rgba(0,155,114,0.8); overflow:hidden; position:absolute; left:0; top:0; z-index:5; transform:scale(0); opacity:0; transition-duration:0.5s;}
.ms-left .ms-section4 ul li a em span.title{ display:block; line-height:54px; color:#fff; font-size:16px; font-weight:bold; text-align:center; padding:10px 0 2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border-bottom:1px solid #fff; margin:0 24px;}
.ms-left .ms-section4 ul li a em span.title font{ font-weight:normal; padding-right:2em;}
.ms-left .ms-section4 ul li a em .txt{ display:block; height:96px; line-height:24px; color:#fff; font-size:13px; overflow:hidden; margin:16px 26px;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:4;
}
.ms-left .ms-section4 ul li a:hover img{ transform:scale(1.2);}
.ms-left .ms-section4 ul li a:hover p{ transform:translateY(100%);}
.ms-left .ms-section4 ul li a:hover em{ transform:scale(1); opacity:1;}

.ms-left .ms-section5 .con{ position:absolute; left:50%; top:50%; margin:-384px 0 0 -668px; margin-top:-342px;}
.ms-left .ms-section5 dl{ display:block; width:1064px; background:#032069; overflow:hidden; margin:56px auto 0 70px; margin:36px auto 0 70px;}
.ms-left .ms-section5 dl dt{ display:block; width:210px; height:380px; background:#fff; padding:0 14px; float:left;}
.ms-left .ms-section5 dl dt h3{ display:block; line-height:44px; color:#0b459f; font-size:30px; padding:20px 14px;}
.ms-left .ms-section5 dl dt h3 span{ display:block; line-height:34px; font-size:20px; padding:0 2px;}
.ms-left .ms-section5 dl dt p.tel{ display:block; line-height:38px; color:#0b459f; font-size:20px; font-weight:bold; padding:0 12px; overflow:hidden;}
.ms-left .ms-section5 dl dt p.tel img{ display:block; float:left; margin:0 10px 0 0; animation-name:rollIn;}
.ms-left .ms-section5 dl dt p.tel span{ display:block; height:42px; line-height:42px; color:#00b046; font-size:30px; font-family:Impact;}
.ms-left .ms-section5 dl dt img.pic{ display:block; width:100%; height:120px; margin:34px 0 0; animation-name:rollOut;}
.ms-left .ms-section5 dl dd{ display:block; height:380px; padding:0 60px 0 74px; overflow:hidden;}
.ms-left .ms-section5 dl dd h3{ display:block; width:440px; line-height:102px; color:#fff; font-size:30px; border-bottom:2px solid #fff; clear:both; margin:0 0 30px; animation-name:zoomOut; animation-duration:0.6s; animation-delay:0.2s;}
.ms-left .ms-section5 dl dd h3 a{ color:#fff;}
.ms-left .ms-section5 dl dd .txt{ height:200px; line-height:40px; color:#fff; font-size:16px; overflow:hidden; animation-name:zoomOut; animation-duration:0.6s; animation-delay:0.2s;}
.ms-left .ms-section5 dl dd p.code{ display:block; line-height:44px; color:#fff; font-size:18px; text-align:center; float:right; margin:-18px 0 0;}
.ms-left .ms-section5 dl dd p.code img{ display:block; width:164px; height:164px; animation-name:rollOut;}

.ms-left .ms-section5.active dl dt img.pic{ animation-name:rollIn; animation-delay:1s;}
.ms-left .ms-section5.active dl dd h3{ animation-name:zoomIn; animation-delay:1s;}
.ms-left .ms-section5.active dl dd .txt{ animation-name:zoomIn; animation-delay:1s;}
.ms-left .ms-section5.active dl dd p.code img{ animation-name:rollIn; animation-delay:1s;}

.ms-left .ms-section2 .con,
.ms-left .ms-section3 .con,
.ms-left .ms-section4 .con,
.ms-left .ms-section5 .con,
.ms-left .ms-section6 .con{ margin-top:-368px;}

.ms-left .ms-section2 h2.title{ padding-bottom:24px;}
.ms-left .ms-section5 dl{ margin-top:48px;}






















/**/