html, body { margin: 0; padding: 0; font-family:"微软雅黑"; }
#superContainer { height: 100%; position: relative; }
.section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow:hidden; }
.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; }
.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; margin-top: -32px; top: 50%; opacity: 1; }
#fullPage-nav.right { right: 17px; }
#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; }
#menu { position: fixed; left: 20px; width:240px; top: 40%; z-index: 10; list-style-type: none; height:260px; background: url(../images/dot01.png) 2px 200px no-repeat; }
#menu li { width: 90px; height: 27px; margin-top: 7px; overflow: hidden;}
#menu a { display: block; height: 27px; padding-left: 30px; line-height: 27px; background: url(../images/dot.png) left -34px no-repeat; color: #fff; text-align: left; text-decoration: none; overflow: hidden;}
#menu span { display: block; width: 60px; height: 27px; font-size: 12px; text-indent: 200px; opacity: 0.6; filter:alpha(opacity=60); overflow: hidden;}
#menu a:hover span { text-indent: 0;}
#menu .active a { background-position: left 0;}
.section { position: relative; overflow: hidden; width: 100%; height: 100%;}
.section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.middle { position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto;}
.middle img{ width:100%; height:100%;}
.section1 { background: 0 50% repeat-x; }
.bg1-1 { background: url(../images/bg1-1.png) 50% 50% no-repeat;}
.bg1-2 { background: url(../images/bg1-2.png) 50% 50% no-repeat;}
.bg1-3 { opacity: 0;}
/* flexslider */
/* 首页幻灯本例子css */
.indexhdbox1{ width:100%; height:100%; margin:0 auto; padding:0px; overflow:hidden; }
.indexhdbox1 .focusBox1{ margin:0 auto; position:relative; width:100%; height:100%; padding:0px; overflow:hidden; }
.indexhdbox1 .focusBox1 .bd{ width:100% !important; height:100% !important; overflow:hidden; }
.indexhdbox1 .focusBox1 .bd ul{ width:100% !important; height:100% !important;}
.indexhdbox1 .focusBox1 .bd li{ vertical-align:middle; width:100% !important; height:100% !important; overflow:hidden; }
.indexhdbox1 .focusBox1 .bd li img{ width:100% !important; height:100% !important; display:block; overflow:hidden; }
.indexhdbox1 .focusBox1 .hd{ height:4px; position:absolute; z-index:1; bottom:10%; left:45%; margin-right:-50px; overflow:hidden; }
.indexhdbox1 .focusBox1 .hd ul{ float:right; overflow:hidden;}
.indexhdbox1 .focusBox1 .hd li{ width:35px; height:30px; color:#fff; font-size:0; background:#fff; opacity:0.6; float:left; cursor:pointer; margin:0 5px; }
.indexhdbox1 .focusBox1 .hd li.on{ background:#4888db; color:#4888db; }
.indexhdbox1 .focusBox1 .prev,
.indexhdbox1 .focusBox1 .next { width:57px; height:104px; position:absolute; top:46%; z-index:3;}
.indexhdbox1 .focusBox1 .prev { background:url(../images/00.png) no-repeat; left:0; }
.indexhdbox1 .focusBox1 .next { background:url(../images/00.png) no-repeat; right:0; }
/*main_style*/
.section2 { background:url(../images/bj03.jpg) no-repeat; background-size:100% 100%; }
.left2 { position: absolute; left: -200%; top: 0; width: 100%; height:100%; font-family:"微软雅黑"; }
.left2-1 { position: absolute; left: 42%; top: 25%; margin-top:-100px; width: 10%; bopacity: 0; transition: all 1.5s;}
.left2-1 .baioti2{ width:100%; position:relative; }
.left2-1 .baioti2 h1{ display:block; text-align: center; line-height:2em; color:#2674c7; font-weight:normal; font-size:4em; }
.left2-1 .baioti2 span{ display:block; text-align:center; color:#fff; font-size:1.4em;}
.right2-2 { position: absolute; right: -100%; top: 32%; width: 100%; height:45%; margin-top:-0; margin-right:-0; opacity: 0;}
.chanp1{ width:70%; margin:0 auto; height:100%; position:relative; font-family:"微软雅黑"; }
.picMarquee-left{ width:100%; overflow:hidden; }
.picMarquee-left .hd{ overflow:hidden; }
.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block; margin-left:-40px; z-index:999999; -webkit-transform:scale(0.8);
-moz-transform:scale(0.8); -webkit-transition-duration: 0.5s; cursor: pointer;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-o-transform:scale(0.8); width:71px; height:25px; margin-bottom:-80px; bottom:18%; position:absolute; }
.picMarquee-left .hd .prev{ left:56%; background:url(../images/gw066.png) no-repeat; animation:mymove 2s infinite;
-webkit-animation:mymove 2s infinite; /*Safari and Chrome*/ }
.picMarquee-left .hd .next{ left:44%; background:url(../images/gw077.png) no-repeat; animation:mymove1 2s infinite;
-webkit-animation:mymove1 2s infinite; /*Safari and Chrome*/ }
@keyframes mymove
{
from {left:55%;}
to {left:58%;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:55%;}
to {left:58%;}
}
@keyframes mymove1
{
from {left:45%;}
to {left:42%;}
}
@-webkit-keyframes mymove1 /*Safari and Chrome*/
{
from {left:45%;}
to {left:42%;}
}
.picMarquee-left .hd .next:hover{ background:url(../images/gw07.png) no-repeat;}
.picMarquee-left .hd .prev:hover{ background:url(../images/gw06.png) no-repeat;}
.picMarquee-left .bd{ width:100%; margin:0 auto; overflow:hidden; }
.picMarquee-left .bd ul{ overflow:hidden; zoom:1; width:100%; }
.picMarquee-left .bd ul li{ position:relative; float:left; width:35%; height:100%; _display:inline; overflow:hidden; text-align:center; }
.picMarquee-left .bd ul li .img img{ width:100%; height:100%; display:block; }
.picMarquee-left .bd ul li .img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
width:100%; height:100%; overflow:hidden;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.picMarquee-left .bd ul li .img:hover{
-webkit-transform:scale(1);
-webkit-box-shadow:0px 0px 30px #ccc;
-moz-transform:scale(1);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform:scale(1);
-o-box-shadow:0px 0px 30px #ccc;
}
.picMarquee-left .bd ul li .img .mask{
width: 100%;
background-color: rgba(0, 0, 0,0.6);
position: absolute;
height: 100%;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
.picMarquee-left .bd ul li .img .mask p{ color:#fff; text-align:center; line-height:20px; font-size:18px; font-family:"微软雅黑"; margin-top:120px;}
#img-1:hover .mask{
height:0%;
}
#img-1:hover .mask p{ display:none;}
.tip { position: absolute; left: 300%; top: 60%; width: 80px; height: 80px; margin-top: -170px; opacity: 0;}
.hand { position: absolute; left: 300%; top: 62%; width: 331px; height: 194px; margin-top: -170px; background-image: url(../images/hand.png);}
.section6 { background:repeat-x; font-family:"微软雅黑";}
.left6 { position: absolute; left: -200%; top: 50%; width: 67%; height: 100%; margin: 0 -650px 0 0; }
.left6-1 { position: absolute; left: 0; top:5%; width: 40%; opacity: 0;}
.left6-1 .baioti2{ width:100%; position:relative; height:100%; }
.left6-1 .baioti2 h1{ display:block; text-align: center; margin-top:4%; color:#fff; font-weight:normal; font-size:1.4em; }
.left6-1 .baioti2 span{ display:block; text-align:center; color:#fff; font-size:4em;}
.left6-1 .baioti2 p{ font-size:16px; padding:2%; margin-top:10%; height:50%; overflow:hidden; text-indent:2em; line-height:1.6em; color:#fff; }
.left6-1 .baioti2 .genduo{ width:40px; height:40px; border-radius:50%; background:#2674c7; font-size:30px; text-align:center; line-height:40px; margin:10% auto; color:#fff;
transition:all 1.5s;-moz-transition:all 1.5s; -webkit-transition:all 1.5s; }
.left6-1 .baioti2:hover .genduo {-webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg);transform: rotateZ(360deg);background:#d60d24;border-color:rgb(255,255,255);box-shadow:0px 0px 6px rgb(223,60,60);border-radius:50%;}
.left6-2 { position: absolute; left: 60%; bottom: -40%; width: 10%; height: 80%;z-index:999; overflow:hidden; opacity: 0;}
.left6-2 img{width:100%; height:auto; transition:all 1.5s;-moz-transition:all 1.5s; -webkit-transition:all 1.5s;}
.left6-2:hover img { width:98%;-webkit-transform: rotateZ(360deg); border-radius:50%; -moz-transform: rotateZ(360deg);transform: rotateZ(360deg);box-shadow:0px 0px 6px rgb(223,60,60); }
.left6-2 .xian{ margin-top:20%; width:10%; margin:0 auto; height:100%; background: url(../images/gw05.png) repeat;}
.left6-3 { position: absolute; left: 75%; bottom: -50%; width: 12%; height: 100%; opacity: 0;}
.left6-3 img{width:100%; height:auto; transition:all 1.5s;-moz-transition:all 1.5s; -webkit-transition:all 1.5s;}
.left6-3:hover img { width:98%;-webkit-transform: rotateZ(360deg); border-radius:50%; -moz-transform: rotateZ(360deg);transform: rotateZ(360deg);box-shadow:0px 0px 6px rgb(223,60,60); }
.left6-3 .xian{ margin-top:20%; width:10%; margin:0 auto; height:100%; background: url(../images/gw05.png) repeat;}
.left6-4 { position: absolute; left: 90%; bottom: -50%; width: 10%; height: 80%;z-index:999; overflow:hidden; opacity: 0;}
.left6-4 img{width:100%; height:auto; transition:all 1.5s;-moz-transition:all 1.5s; -webkit-transition:all 1.5s;}
.left6-4:hover img { width:98%;-webkit-transform: rotateZ(360deg); border-radius:50%; -moz-transform: rotateZ(360deg);transform: rotateZ(360deg);box-shadow:0px 0px 6px rgb(223,60,60); }
.left6-4 .xian{ margin-top:20%; width:10%; margin:0 auto; height:100%; background: url(../images/gw05.png) repeat;}
.right6 { position: absolute; right: -200%; top: 20%;width: 67%; height: 100%;}
.section7{ background: url(../images/bj01.jpg) no-repeat; background-size:100% 100%;}
.logo2 img{ width: 429px; height: 61px; z-index:99999; display:block;}
.left7 { position: absolute; left: -200%; position: relative; top: 20%; width: 56%; height:58%; }
.box{
overflow:hidden; position:absolute;
perspective: 1000px; width:16%; height:33%;
}
.box .box-img{
transform: rotateY(0); background:rgba(1,119,199,0.6); width:100%; height:100%;
transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-img{
transform: rotateY(-90deg);
}
.box img{
width: 50%; margin:0 auto 0 auto; padding-top:10%; display:block;
height: auto;
}
.box .box-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
background: rgba(92,177,21,0.7);
transform: rotateY(90deg);
transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-content{
transform: rotateY(0);
}
.box .title{
font-size:.9em;
color: #fff; text-align:center;
text-transform: uppercase; margin: 10% auto;
}
.box .title:after{
content: "";
width: 80%;
display: block;
}
.box:nth-of-type(2n) .box-content { background: rgba(92,177,21,0.7);}
.box:nth-of-type(2n) .box-img { background: rgba(0,0,0,0.7);}
.box1{ left:48%;}
.box2{ left:64%;}
.box3{ top:33%;}
.box4{ top:33%; left:16%;}
.box5{ top:33%; left:32%;}
.box6{ top:33%; left:48%;}
.box7{ top:66%; left:16%;}
.box8{ top:66%; left:32%;}
.box9{ top:66%; left:48%; position:absolute; width:32%; height:33%; background:rgba(1,119,199,0.6);}
.box9 a{ width:50%; height:25%; display:block; border:1px solid #dedede; margin:20% 26%; text-align:center; color:#fff; font-size:1em; line-height:4em;}
.box9:hover{ background: rgba(92,177,21,0.7);}
.left7-1 { position: absolute; left: -25%; top:0%; width:39%; opacity: 0; transition: all 1.5s;}
.left7-1 .baioti2{ width:100%; }
.left7-1 .baioti2 img{ width:100%;}
.section3 { width:100%; height:100%; overflow:hidden; }
.left3 { position: absolute; left: -200%; bottom: 0; width:261px; height:128px; background: url(../images/yt12.jpg) no-repeat;}
.right3 { position: absolute; right: -200%; top: 50%; margin-top:-100px ; margin-right:-140px; width:374px; height: 158px; font-family:"微软雅黑";}
.left3-1 { position: absolute; left: -170px; top: -119px; width: 134px; height: 155px; background: url(../images/xh30.png) no-repeat; opacity: 0; transition: all 1.5s; text-align:center; line-height:155px; font-size:16px;}
.left3-2 { position: absolute; left: 170px; top: -119px; width: 134px; height: 155px; background: url(../images/xh30.png) no-repeat; opacity: 0; transition: all 1.5s; text-align:center; line-height:155px; font-size:16px;}
.left3-3 { position: absolute; left: -137px; top: 1px; width: 134px; height: 155px; background: url(../images/xh30.png) no-repeat; opacity: 0; transition: all 1.5s; text-align:center; line-height:155px; font-size:16px;}
.left3-4 { position: absolute; left: -69px; top: 123px; width: 134px; height: 155px; background: url(../images/xh30.png) no-repeat; opacity: 0; transition: all 1.5s; text-align:center; line-height:155px; font-size:16px;}
.left3-1 a{ color:#fff;}
/* 首页幻灯本例子css */
.indexhdbox{ width:100%; height:100%; margin:0 auto; padding:0px; overflow:hidden; }
.indexhdbox .focusBox{ margin:0 auto; position:relative; width:100%; height:100%; padding:0px; overflow:hidden; }
.indexhdbox .focusBox .hd{ height:22px; position:absolute; z-index:1; bottom:150px; right:20%; margin-right:-50px; overflow:hidden; }
.indexhdbox .focusBox .hd ul{ float:right; overflow:hidden;}
.indexhdbox .focusBox .hd li{ width:10px; height:10px; line-height:22px; text-align:center; background:#fff; float:left; line-height:50px; color:#fff;cursor:pointer; margin:0 5px; border-radius:100%;}
.indexhdbox .focusBox .hd li.on{ background:#004da1; color:#999;}
.indexhdbox .focusBox .bd li{ vertical-align:middle; width:100%; height:100% !important; overflow:hidden;}
.indexhdbox .focusBox .bd li img{ width:100% !important; height:100% !important; display:block; overflow:hidden;}
.indexhdbox .focusBox .bd li{ float:left; _display:inline; width:100%; height:100%; overflow:hidden; text-align:center; height:100% !important;}
.indexhdbox .focusBox .bd .pic{ text-align:center; height:100% !important; position:relative;}
.indexhdbox .focusBox .bd .pic img{ width:100%; height:100% !important; display:block; }
.indexhdbox .focusBox .bd .pic .title{ line-height:80px;background-image: url(../images/yt15.png); font-size:18px; color:#fff; position:absolute; bottom:0; margin-left:-250px; left:38%; z-index:999; display:block; width:400px; height:120px; }
.indexhdbox .focusBox .bd .pic .title a{ color:#fff;}
.indexhdbox .focusBox .prev,
.indexhdbox .focusBox .next { width:118px; height:128px; position:absolute; bottom:0%; z-index:3;}
.indexhdbox .focusBox .prev { background:url(../images/yt13.png) no-repeat; right:30%; }
.indexhdbox .focusBox .next { background:url(../images/yt14.png) no-repeat; right:20%; }
.section4 { background:repeat-x;}
.left4 { position: absolute; left: -200%; top: 25%;background:url(../images/gw08.png) 13% 0 no-repeat; z-index:9999999; width:80%; height:51%; font-family:"微软雅黑"; }
.fuwu{ width: 100%;}
.fuwu li{ width:100%; height:200px; margin-top:2%; position:relative; overflow:hidden; float:left; }
.fuwu li .img{ width:170px; height:170px; position:absolute; left:10px; top:10px; border-radius:50%; overflow:hidden; }
.fuwu li .img img{ width:160px; height:160px; display:block; border-radius:50%; }
.fuwu li .txt { float:right; width:70%; }
.fuwu li .txt h1{ width:100%; height:1.8em; font-size:20px; margin-top:1%; font-weight:normal; line-height:1.8em; overflow:hidden;color:#fff;}
.fuwu li .txt span{ width:100%; height:1.4em; margin:2% 0; font-size:15px; font-weight:normal; line-height:1.4em; overflow:hidden;color:#fff;}
.fuwu li .txt p{ width:100%; height:45px; font-size:16px; line-height:1.6em; overflow:hidden; color:#fff;}
.fuwu li .txt .genduo{ width:30%; height:2em; margin:2% 0; line-height:2em; font-size:18px; text-align:center; border:1px solid #fff; color:#fff; display:block;}
.fuwu li:hover .txt .genduo{ background:#2674c7;}
.fuwu li .spinner{width:160px;height:160px; z-index:9999999; border:10px solid #2674c7; float: left;border-right-color:#fff;border-bottom-color:#fff;border-radius:50%;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.fuwu li:hover .spinner{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.right4 { position: absolute; right: -200%; top: 10%; width:38%; height:55%; }
.right4 .baioti2{ width:100%; position:relative; }
.right4 .baioti2 h1{ display:block; text-align: center; line-height:1.5em; color:#7e7e7e; font-weight:normal; font-size:4em; }
.right4 .baioti2 span{ display:block; text-align:center; color:#fff; font-size:1.4em;}
.section5 { background: ;}
.left5 { position: absolute; left: -200%; top: 41%; margin-top:-245px; margin-left:-420px; background:url(../images/gw09.png) no-repeat; width: 840px; height:600px; }
.left5 .lianxi { width:100%; }
.lianxi .lxfs{ width:100%; margin-top:210px; height:80px; }
.lianxi .lxfs p{ text-align: right; padding: 0 25px 0 90px; float:left; line-height:30px; font-size:14px; color:#fff; }
.lianxi .lxfs .bianhua1{ background:url(../images/gw12.png) 40px top no-repeat;}
.lianxi .lxfs .bianhua2{ background:url(../images/gw10.png) 40px top no-repeat;}
.lianxi .lxfs .bianhua3{ background:url(../images/gw11.png) 40px top no-repeat;}
.lianxi .lxfs .bianhua4{ background:url(../images/gw13.png) 40px top no-repeat; margin-left:100px;}
.lianxi .ditu{ width:750px; margin:0 auto; border-radius:10px; }
/*底部*/
.box-dibu2{ width:100%; height:80px; padding:0px; overflow:hidden; }
.box-dibu3{ width:700px; height:40px; margin:0 auto; padding:0px; overflow:hidden; line-height:40px; color:#fff; font-size:12px; text-align:center;}
.box-dibu3 span{margin:0px; padding:0 10px; font-size:12px; text-align:center; line-height:40px; display:block; float:left;}
.box-dibu3 a{ color:#fff;display:block; float:left; margin:0 0 0 10px;}
/* 动画 */
.left { transition: all 1.5s;}
.right { transition: all 1.5s;}
.active .left, .ltie10 .left { left: 0;}
.active .right, .ltie10 .right { right: 0;}
.active .left2{ left: 0; top:0;}
.active .left7 { left: 25%; top:20%;}
.active .right2 { right: -5%; top:70%;}
.active .right3{ right: 65%; top:50%;}
.active .left3{ left: 8%; bottom:0;}
.active .left5{ left:50%; }
.active .right6{ right:20%;}
.active .right1 { right: 0;}
.godown span { -webkit-animation: fade 3s infinite linear; animation: fade 3s infinite linear;}
@-webkit-keyframes fade {
0% { opacity: 1;}
50% { opacity: 0.3;}
100% { opacity: 1;}
}
@keyframes fade {
0% { opacity: 1;}
50% { opacity: 0.3;}
100% { opacity: 1;}
}
/* 第一屏动画 */
.active .bg1-3, .ltie10 .bg1-3 { opacity: 1; -webkit-animation: bg1-3 2s; animation: bg1-3 2s;}
.active .left1 { opacity: 1; transition-delay: 1.5s; right:0;}
@-webkit-keyframes bg1-3 {
0% { opacity: 0;}
50% { opacity: 0;}
100% { opacity: 1;}
}
@keyframes bg1-3 {
0% { opacity: 0;}
50% { opacity: 0;}
100% { opacity: 1;}
}
/* 第二屏动画 */
.active .bg2-3, .ltie10 .bg2-3 { background-position: 50% 0; transition-delay: 0.5s;}
.active .left2-1, .ltie10 .left2-1 { opacity: 1; transition-delay: 1.5s;}
.active .left2-2 { right: 00%; top:20%; opacity: 1; transition: all 1s ease 1s;}
.active .left2-3, .ltie10 .left2-3 { opacity: 1; transition-delay: 2s;}
.active .left2-4, .ltie10 .left2-4 { opacity: 1; transition-delay: 2.5s;}
.active .left2-5, .ltie10 .left2-5 { left: -80px; top: 425px; opacity: 1; transition: all 1s ease 3s;}
.active .right2-2 { right: 0; opacity: 1; transition: all 1s ease 1s;}
.active .a2-1 { opacity: 1; transition-delay: 1.5s;}
.active .tip, .ltie10 .tip { left:40px; opacity: 1; transition: all 0.9s ease 1.4s;}
.active .hand { -webkit-animation: hand 1.5s ease 1.5s; animation:hand 1.5s ease 1.5s;}
@-webkit-keyframes hand {
0% { left: 300%;}
50% { left: 62px;}
70% { left: 62px;}
100% { left: 300%;}
}
@keyframes hand {
0% { left: 300%;}
50% { left: 62px;}
70% { left: 62px;}
100% { left: 300%;}
}
/* 第三屏动画 */
.active .bg3-3, .ltie10 .bg3-3 { background-position: 50% 50%; opacity: 1; transition-delay: 0.7s;}
.active .bg3-4 .bg, .ltie10 .bg3-4 .bg { background-position: 50% 50%; opacity: 1; transition-duration: 1.5s; transition-delay: 1s;}
.active .bg3-4 { -webkit-animation: bg3-4 3s ease infinite 2.5s; animation: bg3-4 3s ease infinite 2.5s;}
@-webkit-keyframes bg3-4 {
0 { opacity: 1;}
50% { opacity: 0.3;}
100 { opacity: 1;}
}
@keyframes bg3-4 {
0 { opacity: 1;}
50% { opacity: 0.3;}
100 { opacity: 1;}
}
.active .left3-1 { left: -69px; opacity: 1; transition: all 1s ease 1.5s;}
.active .left3-2 { left: 69px; opacity: 1; transition: all 1s ease 1.5s;}
.active .left3-3 { opacity: 1; transition-delay: 2s;}
.active .left3-4 { opacity: 1; transition-delay: 2.5s;}
/* 第四屏动画 */
.active .left4{ left: 30%; opacity: 1; transition: all 1s ease 1.5s;}
.active .right4{ right: 30%; opacity: 1; transition: all 1s ease 1.5s;}
.active .left4-1, .ltie10 .left4-1 { left: 55%; opacity: 1; transition: all 1s ease 1.5s;}
.active .left4-2, .ltie10 .left4-2 { left: 62%; opacity: 1; transition: all 1s ease 2.3s;}
.active .left4-5, .ltie10 .left4-5 { opacity: 1; transition: all 1s ease 3s;}
.active .left4-4, .active .left4-3, .ltie10 .left4-4, .ltie10 .left4-3 { opacity: 1; transition: all 1s ease 4s;}
.active .right4-1, .ltie10 .right4-1 { right: 55%; opacity: 1; transition: all 1s ease 1.5s;}
.active .right4-2, .ltie10 .right4-2 { right: 62%; opacity: 1; transition: all 1s ease 2.3s;}
.active .right4-5, .ltie10 .right4-5 { opacity: 1; transition: all 1s ease 3s;}
.active .right4-4, .active .right4-3, .ltie10 .left4-4, .ltie10 .left4-3 { opacity: 1; transition: all 1s ease 4s;}
.active .dian, .ltie10 .dian { opacity: 1; transition: all 1s ease 4.5s; }
.active .dian span { -webkit-animation: dian 2s infinite linear 4.5s; animation: dian 2s infinite linear 4.5s;}
@-webkit-keyframes dian {
0% { -webkit-transform: scale(1, 1);}
100% { -webkit-transform: scale(2, 2);}
}
@keyframes dian {
0% { transform: scale(1, 1);}
100% { transform: scale(2, 2);}
}
/* 第五屏动画 */
.bg5-3 { -webkit-animation: bg5-3 20s linear infinite 0s; animation: bg5-3 20s linear infinite 0s;}
@-webkit-keyframes bg5-3 {
0% { background-position: 50% 0;}
100% { background-position: 50% 100%;}
}
@keyframes bg5-3 {
0% { background-position: 50% 0;}
100% { background-position: 50% 100%;}
}
.active .left5-1 { left: 45%; opacity: 1; transition: all 1s ease 1.5s;}
.active .left5-2 { left:32%; opacity: 1; transition: all 1s ease 1.5s;}
.active .left5-3 { opacity: 1; transition-delay: 2s;}
.active .left5-4 { opacity: 1; transition-delay: 2.5s;}
.active .right5 { right:20%; opacity: 1; transition: all 1s ease 1.5s;}
.active .right5-1 { right: 74%; opacity: 1; transition: all 1s ease 1.5s;}
.active .right5-2 { right:70%; opacity: 1; transition: all 1s ease 1.5s;}
/* 第6屏动画 */
.active .left6-1, .ltie10 .left6-1 { left: 5%; opacity: 1; transition: all 1s ease 1.5s;}
.active .left6-2, .ltie10 .left6-2 { bottom: 0; opacity: 1; transition: all 1s ease 2s;}
.active .left6-3, .ltie10 .left6-3 { opacity: 1; bottom: 0; transition: all 1s ease 1s;}
.active .left6-5, .ltie10 .left6-5 { opacity: 1; transition: all 1s ease 3s;}
.active .left6-4, .ltie10 .left6-4, .ltie10 .left6-3 { opacity: 1; bottom: 0;transition: all 1s ease 3s;}
.active .dian, .ltie10 .dian { opacity: 1; transition: all 1s ease 4.5s; }
.active .dian span { -webkit-animation: dian 2s infinite linear 4.5s; animation: dian 2s infinite linear 4.5s;}
@-webkit-keyframes dian {
0% { -webkit-transform: scale(1, 1);}
100% { -webkit-transform: scale(2, 2);}
}
@keyframes dian {
0% { transform: scale(1, 1);}
100% { transform: scale(2, 2);}
}
/* 第6屏动画 */
/* 第7屏动画 */
.active .left7-1, .ltie10 .left7-1 { opacity: 1; transition-delay: 1.5s; left:5%;}
.active .left7-2, .ltie10 .left7-2 { left: 220px; top: 550px; margin-top:-104px; margin-left:-104px; opacity: 1; transition: all 1s ease 1s;}
.active .left7-3, .ltie10 .left7-3 { opacity: 1; transition-delay: 2s;}
.active .left7-4, .ltie10 .left7-4 { opacity: 1; transition-delay: 2.5s;}
.active .left7-5, .ltie10 .left7-5 { left: -80px; top: 425px; opacity: 1; transition: all 1s ease 3s;}
.active .a2-1 { opacity: 1; transition-delay: 1.5s;}
.active .tip, .ltie10 .tip { left:40px; opacity: 1; transition: all 0.9s ease 1.4s;}
.active .hand { -webkit-animation: hand 1.5s ease 1.5s; animation:hand 1.5s ease 1.5s;}
@-webkit-keyframes hand {
0% { left: 300%;}
50% { left: 62px;}
70% { left: 62px;}
100% { left: 300%;}
}
@keyframes hand {
0% { left: 300%;}
50% { left: 62px;}
70% { left: 62px;}
100% { left: 300%;}
}
.qtcode { position: absolute; right: 20px; bottom: 20px; z-index: 4; width: 361px; height: 69px; background-image: url(../images/qtcode.png);}
.godown { *display: none; position: absolute; left: 50%; bottom: 20px; z-index: 100; width: 50px; height: 53px; margin-left: -25px;}
.godown span { display: block; width: 50px; height: 53px; background-image: url(../images/godown.png);}
.link { position: absolute; height: 78px; text-indent: -9999px; overflow: hidden;}
.a1-1 { width: 202px; left: 45px; bottom: 63px; }
.a2-1 { width: 166px; left: 130px; top: -8px; background: url(xh10.png) no-repeat; }
.a2-2 { width: 188px; left: 220px; top: 85px; background: url(xh11.png) no-repeat;}
.a2-3 { width: 188px; left: 250px; top: 202px; background: url(xh12.png) no-repeat; }
.a2-4 { width: 188px; left: 220px; top: 325px; background: url(xh13.png) no-repeat;}
.a2-5 { width: 188px; left: 130px; top: 415px; background: url(xh14.png) no-repeat; }
.a3-1 { width: 268px; left: 20px; bottom: 10px;}
.a3-2 { width: 270px; right: 22px; bottom: 10px;}
.a4-1 { width: 268px; left: 20px; bottom: 10px;}
.a4-2 { width: 270px; right: 18px; bottom: 10px;}
.a5-1 { width: 268px; left: 20px; bottom: 10px;}
.a5-2 { width: 270px; right: 20px; bottom: 10px;}
.daohang{ width:100%; height:60px; position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:9999; }
.logo1{ float:left; width:30%; margin:0 0 0 5%;}
.logo1 img{ height:60px;}
/* 本例子css */
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;}
.nav{ height:100%; margin-right:8%; float:right; z-index:1; font-family:"微软雅黑"; }
.nav a{ color:#fff; }
.nav .nLi{ float:left;height:100%; position:relative; display:inline; }
.nav .nLi h3{ float:left; font-weight:normal; }
.nav .nLi h3 a{ display:block; margin-top:18px;padding:0 30px; font-size:.9em; }
.nav .sub{ display:none; width:100%; background:rgba(0,0,0,0.6); left:0; top:100%; position:absolute; line-height:3em; text-align:center; }
.nav .sub li{ zoom:1; }
.nav .sub a{ display:block; font-size:1em;}
.nav .sub a:hover{ background:#245285; color:#fff; }
.nav .nLi h3:hover a{background:url(../images/dn02.png) right center no-repeat; color:#007cff; }
/*右侧悬浮菜单*/
.slide{
width: 50px;
height: 250px;
position: fixed;
top: 50%;
margin-top: -126px;
background: #000;
right: 0;
border-radius: 5px 0 0 5px;
z-index: 999999999999;
}
.slide ul{
list-style: none;
}
.slide .icon li{
width: 49px;
height: 50px;
background: url(../images/icon.png) no-repeat;
}
.slide .icon .up{
background-position:-330px -122px ;
}
.slide .icon li.qq{
background-position:-385px -73px ;
}
.slide .icon li.tel{
background-position:-385px -160px ;
}
.slide .icon li.wx{
background-position:-383px -120px ;
}
.slide .icon li.down{
background-position:-330px -162px ;
}
.slide .info{
top: 50%;
height: 147px;
position: absolute;
right: 100%;
background: #000;
width: 0px;
overflow: hidden;
margin-top: -73.5px;
transition:0.5s;
border-radius:4px 0 0 4px ;
}
.slide .info.hover{
width: 145px;
}
.slide .info li{
width: 145px;
color: #CCCCCC;
text-align: center;
}
.slide .info li p{
font-size: 1.1em;
line-height: 2em;
padding: 15px;
text-align: left;
}
.slide .info li.qq p a{
display: block;
margin-top: 12px;
width: 100px;
height: 32px; background:#3223232;
line-height: 32px;
color: #e2e2e2;
font-size: 16px;
text-align: center;
text-decoration: none;
border: 1px solid #e2e2e2;
border-radius: 5px;
}
.slide .info li.qq p a:hover{
color: #FFFFFF;
border: none;
background: #323232;
}
.slide .info li div.img{
height: 100%;
background: #DEFFF9;
margin: 15px;
}
.slide .info li div.img img{
width: 100%;
height: 100%;
}
/*控制菜单的按钮*/
.index_cy{
width: 30px;
height: 30px;
background: url(../images/index_cy.png);
position: fixed;
right: 0;
top: 50%;
margin-top: 140px;
background-position: 62px 0;
cursor: pointer;
}
.index_cy2{
width: 30px;
height: 30px;
background: url(../images/index_cy.png);
position: fixed;
right: 0;
top: 50%;
margin-top: 140px;
background-position: 30px 0;
cursor: pointer;
}
/*自适应 当屏小于1050时隐藏*/
@media screen and (max-width: 1050px) {
.slide{
display: none;
}
#btn{
display: none;
}
}