﻿@charset "utf-8";
*{margin: 0; padding: 0;}
body{font: 16px/1.8 "Microsoft Yahei",verdana;}
a:hover{ color:#33af6f;}


/*head*/
.inner { position: relative; width: 1100px; margin: 0 auto;}
.dowebok-hd { position: fixed; z-index: 1000; width: 100%; height: 110px;  background:#fff; }
.dowebok-hd h1 { float: left; width: 254px; height: 78px; margin-top:16px;}
.dowebok-hd h1 a { display: block; width: 280px; height: 53px; text-indent: -9999px; background-image:url(../img/logo.jpg);}
.dowebok-hd .nav { float: right; list-style-type: none;}
.dowebok-hd .nav li { float: left; margin-left: 5px;}
.dowebok-hd .nav a { float: left; padding: 0 35px; line-height: 110px; color: #333; text-decoration: none; font-weight:bold; font-family:"微软雅黑"; font-size:15px;}
.dowebok-hd .nav a:hover { height: 107px; border-bottom: 3px solid #009b4d;}
.dowebok-hd .nav a.on{ height: 107px; border-bottom: 3px solid #009b4d;}

#superContainer{height: 100%; position: relative;}
.section{position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.slide{float: left;}
.slide, .slidesContainer{height: 100%; display: block;}
.slides{height: 100%; overflow: hidden; position: relative; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.section.table, .slide.table{display: table; width: 100%;}
.tableCell{display: table-cell; vertical-align: middle; width: 100%; height: 100%;}
.slidesContainer{float: left; position: relative;}
.controlArrow{position: absolute; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px;}
.controlArrow.prev{left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent;}
.controlArrow.next{right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff;}
.scrollable{overflow: scroll;}
.easing{-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out;}
#fullPage-nav{position: fixed; z-index: 100; top: 60% ;right:0 ; opacity: 1 ;}
#fullPage-nav.right{right: 0px;}
#fullPage-nav.left{left: 17px;}
.fullPage-slidesNav{position: absolute; z-index: 4; left: 50%; opacity: 1;}
.fullPage-slidesNav.bottom{bottom: 17px;}
.fullPage-slidesNav.top{top: 17px;}
#fullPage-nav ul,
.fullPage-slidesNav ul{margin: 0; padding: 0;}
#fullPage-nav li,
.fullPage-slidesNav li{display: block; width: 14px; height: 13px; margin: 7px; position:relative;}
.fullPage-slidesNav li{display: inline-block;}
#fullPage-nav li a,
.fullPage-slidesNav li a{display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none;}
#fullPage-nav li .active span,
.fullPage-slidesNav .active span{background: #333;}
#fullPage-nav span,
.fullPage-slidesNav span{top: 2px; left: 2px; width: 8px; height: 8px; border: 1px solid #000; background: rgba(0, 0, 0, 0); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 1;}
.fullPage-tooltip{position: absolute; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; top: -2px;}
.fullPage-tooltip.right{right: 20px;}
.fullPage-tooltip.left{left: 20px;}
/* 圆点导航 */
#fullPage-nav{_display: none;font-size: 12px;width: 43px;height: 280px;}
#fullPage-nav li{width: 40px;height: 21px;margin: 10px 0 0;vertical-align: middle;}
#fullPage-nav li a{float: right;width: 21px;height: 21px;color: #8F9DA4;text-decoration: none;text-align: right;background:url(../img/dot.png) 0px -18px no-repeat;}
#fullPage-nav li .active{background-position: 0 6px;}
#fullPage-nav span{display: none;}
.fullPage-tooltip{float: left;top: 0;margin-right: 5px;font: 12px "Microsoft Yahei";color: #8F9DA4;line-height: 21px;}
/* 圆点导航 */
.section{position: relative; overflow: hidden;padding-top:84px;}
.section .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.section .bg img{display: block; width: 100%; height: 100%;}


/*第一屏*/
.bg09{position: absolute;z-index:2; right:50% ; top:50%; width: 1348px; height: 607px ;background:url(../img/bg1_right_pen.png) no-repeat; transition: all 1s; opacity: 0; margin-right:-624px;}
.bg10{position: absolute; left: 50%; top:0%; width:865px; height:100px ; margin-left:-433px;background:url(../img/bg1_main_title.png) no-repeat;background-size:contain; transition: all 1s;}
.bg11{position: absolute; bottom: -80px; left:50% ; width:750px; margin: 0 0 0 -413px; height: 80px;background: url(../img/bg1_main_title1.png) no-repeat; opacity: 0; transition: all 1.7s; bottom: 90px\0;}
.bg12{position: absolute; bottom: -100px; left:50% ; opacity: 0; transition: all 1.7s; bottom: 90px\0; z-index: 25;}
.bg12 a{background:url(../img/bg1_button.png) 0 -60px no-repeat; width:216px; margin: 0 0 0 -108px; height:60px; display:block}
.bg12 a:hover{background:url(../img/bg1_button.png) 0 0px no-repeat;}
.bg13{position: absolute; top: 50%; margin-top:303px; left:50% ; width: 1348px; margin:0px; height:607px; margin-left:-624px;background: url(../img/bg1_left_pen.png) no-repeat; opacity: 0; transition: all 1s; bottom: 90px\0;}

/*第二屏*/
.bg2_04{position: absolute; width: 491px; height: 106px; left: 50%; top:35%; margin: -102px 0 0 -255px; text-indent: -9999px; background:url(../img/little.png) no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 0.7s; z-index:6;}
.bg2_06{position: absolute; z-index:2; left: 50%; top:65%; width: 1100px; height: 422px; margin-top:-202px; transition: all 1s; opacity: 0; margin-left: -503px;z-index:7}
.bg2_06 ul li{float:left; width:275px; height:210px; overflow:hidden; background:#06F;}
.bg2_06 ul li img{width:275px; height:211px; overflow:hidden;}
.bg2_06 ul li a:hover img{opacity:0.9;}

/*第三屏*/
.bg16{position: absolute; left: 50%; top: 50%; width: 1100px; height:44px ; margin: 15px 0 0 -550px; font-size: 14px; color: #fff; opacity: 0; transition: all 0.1s;}
.bg16 ul li{float:left; margin-right:1px;}
.bg16 ul li img{ width:365px; height:269px; overflow:hidden;}
.bg16 ul li a:hover img{ opacity:0.7;}
.bg18{position: absolute; bottom: -100px; left:50% ; width: 480px; margin-left:-250px; height:93px; top:50%;margin-top:-260px;background:url(../img/bg3_01.png) no-repeat; opacity: 0; transition: all 1.7s; bottom: 90px\0;}
.bg19{position: absolute; bottom: 0px ; left:50% ; width:500px; margin-left:-250px; height: 71px; top:50%;margin-top:-185px;background: url(../img/bg3_02.png) no-repeat; opacity: 0; transition: all 1.7s; bottom: 90px\0;}

/*第四屏*/
.bg02{position: absolute; bottom: 0; width: 1028px; height:547px; left:55%; margin:-278px 0 0 -514px; background:url(../img/bg4_people.png) no-repeat; transition: all 1s;}
.bg044{position: absolute; width: 329px; height:102px; left: 50%; top:55%; margin: -298px 0 0 -160px; opacity: 0;background:url(../img/bg4_01.png) no-repeat; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s; text-align:center;}
.bg03{position: absolute; left: 50%; top:50%; width: 1100px; height:400px ; margin-left: -550px;background:#fff; transition: all 1s;}
.bg03 ul li{ width:340px; float:left; margin-left:20px; overflow:hidden; text-align:center; margin-top:25px;}
.bg03 ul li img{ width:340px; height:198px; overflow:hidden;}
.bg03 ul li span a{ font-size:16px; font-weight:bold; line-height:38px; height:38px; color:#666666;}
.bg03 ul li p a{ margin-top:3px; line-height:22px; font-size:14px; color:#666; padding:0px 20px;}
.bg03 ul li p a:hover{ color:#33af6f;}

/*第五屏*/
.bg5_19{position: absolute; bottom: 0px ; left:50% ; width:359px; margin-left:-200px; height: 73px;background: url(../img/bg5_01.png) no-repeat; opacity: 0; transition: all 1.7s; bottom: 90px\0;}
.bg5_01{position: absolute; bottom: 0px; left:50% ; width: 1038px; margin-left:-519px; height:500px;background:url(../img/bg5_people.png) no-repeat; opacity: 0; transition: all 1.7s; bottom: 90px\0;}
.section h3{position: absolute; left: 50%; top:50%; z-index: 0; width:1038px; height:500px; margin-left:-519px; margin-top:-250px; text-indent: -9999px; background-repeat: no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s ;}
.section5 h3{background:url(../img/bg5_dashed.png) no-repeat ;}
.bg5_06{position: absolute; z-index:2; left: 50%; top:50%;width: 1100px;height: 250px;margin-top:-150px;transition: all 1s;opacity: 0;z-index:5; border-bottom:1px #dadada solid;}
.bg5_06 ul li{ float:left;}
.bg5_08{position: absolute;z-index:2; left: 50%; bottom:0%; width: 927px; height: 157px; margin-left:-470px;background:url(../img/bg5_txt.png) top center no-repeat; transition: all 1s ;}

/* CSS3过度及动画 */
.active strong, .active h3{opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .bg01{bottom:42% ; margin-bottom:-278px ; opacity: 1; transition-delay: 1.2s;}
.active .bg02{bottom:50% ; margin-bottom:-278px ; opacity: 1; transition-delay: 0.7s;}
.active .bg6_02{bottom:50% ; margin-bottom:-260px ; opacity: 1; transition-delay: 0.7s;}
.active .bg04{opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .bg2_04{opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .bg2_05{opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .bg2_06{opacity: 1; margin-left: -550px; transition-delay: 1.2s;}
.active .bg2_07{margin-left: -483px; opacity: 1; transition-delay: 1.2s;}
.active .bg06_4{opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .bg044{opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .bg6_04{opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .bg03{top: 55%; margin-top: -130px; transition-delay: 0.7s;}
.active .bg033{top:59% ; margin-top:-278px ; transition-delay: 1.2s;}
.active .bg05{opacity: 1; transition-duration: 1s; transition-delay: 2s;}
.active .bg5_06{opacity: 1; margin-left: -560px; transition-delay: 0.7s;}
.active .bg5_07{margin-left: -519px; opacity: 1; transition-delay: 0.7s;}
.active .bg5_08{bottom:50% ; margin-bottom:-370px ; transition-delay: 0.7s;}
.active .bg09{top:50% ;margin-top:-303px; opacity: 1; transition-delay: 0.7s;}
.active .bg10{top:50% ; margin-top:-150px ; transition-delay: 0.7s;}
.active .bg11{bottom:50% ; margin-bottom:-70px ; opacity: 1; transition-delay: 0.3s;}
.active .bg12{bottom:40% ; margin-bottom:-80px ; opacity: 1; transition-delay: 0.5s;}
.active .bg13{top:50% ; margin-top:-253px ; opacity: 1; transition-delay: 0.3s;}
.active .bg7_10{top:40% ; margin-top:-100px ; transition-delay: 0.7s;}
.active .bg7_11{bottom:42% ; margin-bottom:-150px ; opacity: 1; transition-delay: 0.3s;}
.active .bg7_12{bottom:42% ; margin-bottom:-150px ; opacity: 1; transition-delay: 0.5s;}
.active .bg14{bottom:50% ; margin-bottom:100px ; opacity: 1; transition-delay: 0.7s;}
.active .bg15{bottom:50% ; margin-bottom:25px ; opacity: 1; transition-delay: 0.3s;}
.active .bg16{opacity: 1; transition-duration: 1s; transition-delay: 1s;}
.active .bg17{bottom:50% ; margin-bottom:-268px ; opacity: 1; transition-delay: 0.7s;}
.active .bg5_01{bottom:50% ; margin-bottom:-250px ; opacity: 1; transition-delay: 0.7s;}
.active .bg18{bottom:50% ; margin-bottom:-268px ; opacity: 1; transition-delay: 0.7s;}
.active .bg19{bottom:50% ; margin-bottom:-268px ; opacity: 1; transition-delay: 0.3s;}
.active .bg5_19{bottom:50% ; margin-bottom:200px ; opacity: 1; transition-delay: 0.3s;}
/* for lt ie 10*/
.ltie10 strong, .ltie10 h3{opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .bg01{bottom:42% ; margin-bottom:-278px ; transition-delay: 1.2s;}
.ltie10 .bg02{bottom:50% ; margin-bottom:-278px ; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg6_02{bottom:50% ; margin-bottom:-260px ; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg04{opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .bg2_04{opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .bg2_05{opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .bg2_06{opacity: 1; margin-left: -483px; transition-delay: 1.2s ;}
.ltie10 .bg2_07{margin-left: -483px; opacity: 1; transition-delay: 1.2s;}
.ltie10 .bg06_4{opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .bg6_04{opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .bg044{opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .bg03{top:55% ; margin-top:-278px ; transition-delay: 0.7s;}
.ltie10 .bg033{top:59% ; margin-top:-278px ; transition-delay: 1.2s;}
.ltie10 .bg05{opacity: 1; transition-duration: 1s; transition-delay: 2s;}
.ltie10 .bg5_06{opacity: 1; margin-left: -519px; transition-delay: 0.7s ;}
.ltie10 .bg5_07{margin-left: -519px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg5_08{bottom:50% ;/* margin-bottom:-200px ;*/ transition-delay: 0.7s;}
.ltie10 .bg09{bottom:50% ;margin-bottom:-303px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg10{top:50% ; margin-top:-100px ; transition-delay: 0.7s;}
.ltie10 .bg11{bottom:50% ; margin-bottom:-10px ; transition-delay: 0.3s;}
.ltie10 .bg12{bottom:40% ; margin-bottom:-80px ; transition-delay: 0.5s;}
.ltie10 .bg13{bottom:50% ; margin-bottom:-253px ; transition-delay: 0.7s;}
.ltie10 .bg7_10{top:40% ; margin-top:-100px ; transition-delay: 0.7s;}
.ltie10 .bg7_11{bottom:42% ; margin-bottom:-150px ; transition-delay: 0.3s;}
.ltie10 .bg7_12{bottom:42% ; margin-bottom:-150px ; transition-delay: 0.5s;}
.ltie10 .bg14{bottom:50% ; margin-bottom:100px ; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg15{bottom:50% ; margin-bottom:25px ; transition-delay: 0.3s;}
.ltie10 .bg16{opacity: 1; transition-duration: 1s; transition-delay: 2s;}
.ltie10 .bg17{bottom:50% ; margin-bottom:-268px ; transition-delay: 0.7s;}
.ltie10 .bg5_01{bottom:50% ; margin-bottom:-250px ; transition-delay: 0.7s;}
.ltie10 .bg18{bottom:50% ; margin-top:-268px ; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg19{bottom:50% ; margin-bottom:-268px ; transition-delay: 0.3s;}
.ltie10 .bg5_19{bottom:50% ; /*margin-bottom:-251px ;*/ transition-delay: 0.3s;}

