﻿@charset "utf-8";

#fp-nav ul li:last-child { display: none;}


.menuBot{ width:30px; position:fixed; top:6%; right:4%;z-index:99999; cursor:pointer;}
.menuBot span{ display:block; width:30px; height:5px; margin-bottom:5px; background-color:#1F0FF7;}



#menu{ position: fixed; right:2%; top: 50%;  z-index: 70; margin-top:-130px;}
#menu li{ margin:9px 0;}
#menu a{ display:block; padding:3px; background:url(Img/Index/navbg1.png) no-repeat center; width:13px; height:13px;  text-decoration: none; position:relative;}
/*#menu a:hover span{ display:block;}*/
#menu a span{ display:block; position:absolute; background:url(Img/Index/navspanbg.png) no-repeat center; width:38px; height:19px; line-height:19px; padding:0 14px; font-size:13px; color:#fff; right:0; top:0; display:none;}
#menu .active a { background:url(Img/Index/navbg2.png) no-repeat center;}
#menu .active a span{ display:block;}
#menu li:last-child{ display:none;}
/*#menu a span.on{ display:block;}*/



.section1{background-size:cover; }
.iban{  position:relative; overflow:hidden;}
.baner{ height:100%; position:absolute; left:0; width:100%;}
.baner .bot{ display:block; position:absolute; width:58px; height:58px; top:50%; margin-top:-29px;}
.baner .bot1{ background:url(Img/Index/babot1.png) no-repeat center; left:5%;}
.baner .bot2{ background:url(Img/Index/babot2.png) no-repeat center; right:5%;}
.banerImg{ background:url(Img/Index/baner.jpg) no-repeat center; height:800px;}
.bg{ background:#08167f; position:absolute; height:100%; width:100%; left:0; top:700px;}
#baner .btn{ position:absolute; z-index:7; bottom:30px; left:50%; margin-left:-95px; padding:0px 6px;}
#baner .btn li{ color:#fff;  background:#333; cursor: pointer;display: inline-block;margin:0 2px;width:25px;height:25px;font-size:14px;line-height:25px;text-align:center;*float:left;}
#baner .btn li.on{ background:#08167f;}

.section2{background:url(Img/Index/bg1.jpg) no-repeat center top; background-size:cover;}
.section3{background:url(Img/Index/bg2.jpg) no-repeat center top; background-size:cover;}
.section4{background:#efefef;}
.section5{background:url(Img/Index/bg4.jpg) no-repeat center top; background-size:cover;}
.section6{background:url(Img/Index/bg5.jpg) no-repeat center top; background-size:cover;}
.section7{background:url(Img/Index/bg6.jpg) no-repeat top center; background-size:cover;}

.pro_bot{ width:270px; height:56px; margin:0 auto; position:relative;}
.pro_bot ul{ overflow:hidden; position:relative; z-index:9;}
.pro_bot li{ float:left; margin:0 20px; text-align:center; font-size:16px; color:#2f2f2f;}
.pro_bot li:hover,.pro_bot li.cur{cursor:pointer;color:#08167f; font-weight:bold; display:block;}
.pro_bot li:hover a,.pro_bot li.cur a{color:#08167f; text-decoration:none; display:block; padding-bottom:5px; border-bottom:2px solid #08167f;}
.pro_bot span{ display:block; width:166px; height:56px; position:absolute; left:0; top:0;}


.tle{ position:relative;}
.tle img{ display:block; margin:0 auto;}


.section2 .container{ position:relative; overflow:hidden;}
.section2 .tle{ margin-bottom:32px; top:-200px; transition: opacity 1s ease-out 0.5s, top 1s ease-out 0.5s; opacity:0;}
.section2 dt{ width:770px; height:429px; margin:0 auto; position:relative; transition:opacity 1s ease-out 1.2s, top 1s ease-out 1.2s; transition-delay:1.5s; opacity:0;}
.section2 dt img{ display:block;}
.section2 dt span{ display:block; position:absolute; background:url(Img/Index/vidioBot.png) no-repeat center; width:99px; height:99px; top:50%; left:50%; margin-left:-50px; margin-top:-50px; cursor:pointer;}
.section2 dd{ text-align:center; margin-top:30px; position:relative; transition: opacity 1s ease-out 0.5s, bottom 1s ease-out 0.5s; bottom:-300px; opacity:0;}
.section2 dd h5{ font-weight:normal; margin-bottom:15px;}
.section2 dd h5 a{ font-size:18px; color:#202020;}
.section2 dd p{ font-size:14px; color:#5f5f5f; line-height:22px; margin:0 65px; margin-bottom:20px;}

.section.active .tle{ opacity:1; top:0;}
.section.active dd{ opacity:1; bottom:0;}
.section.active dt{ opacity:1;}



.section3 .container{ padding-top:50px; padding-bottom:70px; }
.section3 .tle{ transform:scale(0,0); transition:all 1s; opacity:0;}
.section3 .pro_bot{ margin-top:15px; margin-bottom:95px;}
.section3 .proMain{ position:relative; background:url(Img/Index/yinying.jpg) no-repeat left 40px;}
.section3 .proMain ul{ overflow:hidden; width:980px; margin:0 auto; opacity:0; position:relative; top:-100px;
transition: opacity 1s ease-out .5s, top 1s ease-out .5s;}
.bd1 .tempWrap, .bd2 .tempWrap{ margin:0 auto;}
.section3 .proMain li{ float:left; width:205px; margin:0 20px;}
.section3 .proMain li img{ display:block; width:245px; height:182px;}
.section3 .proMain li p{ text-align:center; margin-top:10px; margin-left: 27px;}
.section3 .proMain li p a{ font-size:16px; color:#2f2f2f;}
.section3 .proMain .pbt{ display:block; width:54px; height:54px; top:85px; position:absolute;}
.section3 .proMain .pbt1{ background:url(Img/Index/button1.png) no-repeat center top; left:20px;}
.section3 .proMain .pbt2{ background:url(Img/Index/button2.png) no-repeat center top; right:20px;}
.section3 .proMain .pbt:hover{ background-position:center bottom;}
.section.active .tle{ transform:scale(1,1); opacity:1; transition-delay:0.5s;}
.section.active ul{ opacity:1; top:0; /*transition-delay:1s;*/}



.section4  .fp-tableCell{ position:relative; overflow:hidden;}
.section4 .container{ margin-bottom:175px;}
.section4 .tle{ transform:scale(0,0); transition:all 1s; opacity:0;}
.section4 .modle{ margin-top:80px; width:1245px; height:200px;}
.section4 .modle li{ float:left; width:199px; height:199px; background:url(Img/Index/modleBg1.png) no-repeat center; margin-right:50px; position:relative; top:-150px; transition: opacity 1s ease-out .5s, top 1s ease-out .5s; transition-delay:1s; opacity:0;}
.section4 .modle li.mod1{ transition-delay:1s;}
.section4 .modle li.mod2{ transition-delay:1.2s;}
.section4 .modle li.mod3{ transition-delay:1.4s;}
.section4 .modle li.mod4{ transition-delay:1.6s;}
.section4 .modle li>img{ display:block; margin:0 auto; margin-top:45px;}
.section4 .modle li p{ text-align:center; font-size:18px; color:#fff; margin-top:10px;}
.section4 .modle li span{ display:block; position:absolute; width:30px; height:32px; right:-40px; top:50%; margin-top:-16px; opacity:0; transition:opacity 1s ease-out;}
.section4 .modle li:hover{ background:url(Img/Index/modleBg2.png) no-repeat center;}
.section4 .intr{ text-align:center; margin-top:40px;}
.section4 .intr h4{ font-size:18px; color:#202020; font-weight:normal; margin-bottom:10px;}
.section4 .intr p{ font-size:14px; color:#5f5f5f; line-height:22px;}
.section4 .kp{ position:absolute; bottom:0; left:54%; transform: rotate(-30deg); transition:all 1s ease-out; opacity:0;}
.section4 .kp1{ margin-left:-334px; z-index:6;}
.section4 .kp2{ margin-left:-206px; z-index:5;}
.section4 .kp3{ margin-left:-125px; z-index:4;}
.section4 .kp4{ margin-left:-45px; z-index:3;}
.section4 .kp5{ margin-left:34px; z-index:2;}
.section4 .jiameng{ display:block; position:absolute; background:url(Img/Common/vvvv.png) no-repeat right center; width:225px; height:40px; line-height:40px; text-align:center; font-size:18px; color:#08167f; font-weight:bold; text-decoration:none; bottom:-60px; left:50%; margin-left:-135px; z-index:9; font-weight:bold; opacity:0; transition:opacity 1s ease-out .5s, bottom 1s ease-out .5s;}
.section4 .shuizhu{ position:absolute; left:50%; margin-left:-520px; bottom:300px; z-index:1; transition: opacity 1s ease-out .5s, bottom 1s ease-out .5s; opacity:0;}
.section.active .shuizhu{ opacity:1; bottom:0;}
.section.active .tle{ transform:scale(1,1); opacity:1; transition-delay:0.5s;}
.section.active .modle li{ opacity:1; top:0;}
.section.active .modle li span{ opacity:1; transition-delay:2.5s;}
.section.active .kp{ transform:rotate(0); opacity:1;}
.section.active .jiameng{ opacity:1; transition-delay:2s;}


.section5 .tle{ opacity:0; transform:scale(0,0); transition:all 1s ease-in-out;}
.section5 .vidio{ padding-top:35px; margin-top:85px; position:relative; overflow:hidden;}
.section5 .vidio .vd_left{ width:473px; margin-left:133px; position:relative; left:-100%; opacity:0; transition:left 1s ease-out .5s, opacity 1s ease-out .5s;}
.section5 .vidio .vd_left dt{ position:relative; width:473px; height:323px;}
.section5 .vidio .vd_left dt img{ display:block;}
.section5 .vidio .vd_left dt span{ display:block; background:url(Img/Index/vbot.png) no-repeat center; width:93px; height:93px; position:absolute; left:50%; top:50%; margin-left:-47px; margin-top:-47px; cursor:pointer;}
.section5 .vidio .vd_left dd{ text-align:center; margin-top:20px; font-size:18px;}
.section5 .vidio .vd_left dd a{color:#fff;}
.section5 .vidio .pic{ display:block; position:absolute; transition:all 1s ease-out; opacity:0; transform:scale(0,0); transition-delay:1s;}
.section5 .vidio .pic1{ right:110px; top:110px; z-index:5; transition-delay:1.8s;}
.section5 .vidio .pic2{ right:137px; top:83px; z-index:4; transition-delay:1.6s;}
.section5 .vidio .pic3{ right:170px; top:50px; z-index:3; transition-delay:1.4s;}
.section5 .vidio .pic4{ right:205px; top:24px; z-index:2; transition-delay:1.2s;}
.section5 .vidio .pic5{ right:225px; top:0px; z-index:1;}
.section.active .pic{ transform:scale(1,1); opacity:1;}
.section.active .vd_left{ left:0; opacity:1;} 
.section5.active .tle{ opacity:1; transform:scale(1,1); transition-delay:2.5s;}

.section6 .tle{ transform:scale(0,0); transition:all 1s ease-out; opacity:0;}
.section6 .jmdMain{ padding:0 10px; margin-top:75px;}
.section6 .jmdMain .jm_left{ width:785px; float:left; margin-top:30px; left:-100%; position:relative; opacity:0; transition:left 1s ease-out, opacity 1s ease-out .5s;}
.section6 .jmdMain .jm_right{ float:right; width:317px; position:relative; right:-100%; transition:right 1s ease-out, opacity 1s ease-out .5s;}
.jmdMain .jm_right h5{ height:55px; line-height:55px; font-size:18px; color:#252525; padding:0 15px;}
.jmdMain .jm_right h5 span{ font-weight:normal; margin-left:20px;}
#ggtop{ margin-left:0px;}
.jmdMain .jm_right h5 span.cur{color: #252525; font-weight:bold;}
.jmdMain .jm_right .news{ background:url(Img/Index/yuan.png) no-repeat center; width:352px; overflow:hidden;}
.jmdMain .jm_right .news ul{ overflow:hidden; padding:15px;}
.jmdMain .jm_right .news .bd .tempWrap{padding:15px;}
.jmdMain .jm_right .news li{ padding-left:45px; white-space:nowrap;text-overflow: ellipsis; height:36px; line-height:36px; overflow:hidden;font-size:13px; color:#fff;}
.section.active .jm_left{ left:0; opacity:1;}
.section.active .jm_right{ right:0; opacity:1;}

/*体验店*/
#ImgBox{ overflow:hidden; width:100%; height:350px; position:relative}
#ImgBox span{ cursor:pointer; width:41px; height:49px; position:absolute; top:135px;}
#ImgBox #ImgWindow{ overflow:hidden; width:890px; margin:0 auto; height:350px; position:relative;}
#ImgBox .tu01,#ImgBox .tu03,#ImgBox .tunone{ position:absolute; top:40px; width:360px; height:296px; overflow:hidden; z-index:1; background:url(Img/Index/01.png) repeat-x left 245px;}
#ImgBox .tu01 img,#ImgBox .tu03 img,#ImgBox .tunone img{ display:block; width:360px; padding-bottom:50px; height:246px; margin-bottom:10px;}
#ImgBox .tu01{ left:0;}
#ImgBox .tu03{ right:0;}
#ImgBox .tunone{ left:50%; margin-left:-180px; display:none}
#ImgBox .tu02{ width:460px; height:350px; position:absolute; left:155px; top:0; z-index:3; background:url(Img/Index/01.png) repeat-x left 320px;}
#ImgBox .tu02 img{ display:block; margin-bottom:10px; width:460px; height:321px;}
#ImgBox  p{ font-size:14px; color:#161616; text-align:center; font-weight:bold;}
#ImgBox .tu02 b{ display:none;}

.section7 .tle{ transform:scale(0,0); transition:all 1s ease-out; opacity:0;}
.section7 .pro_bot{ margin-top:15px;}
.section7 .khjz{ height:490px; overflow:hidden;}
.khjz .kh1{ position:relative; height:490px; overflow:hidden;}
.khjz .kh1 dl{ position:absolute; width:547px; height:170px; z-index:3; transition: opacity 1s ease-out .5s, top 1s ease-out .5s;opacity:0;}
.khjz .kh1 dt{ position:relative; width:228px; height:143px; margin-top:10px; }
.khjz .kh1 dt img{ display:block; border:3px solid #fff;}
.khjz .kh1 dt i{ display:block; position:absolute; width:63px; height:19px; top:50%; margin-top:-10px;}
.khjz .kh1 dd h5 a{ font-size:14px; color:#2f2f2f;}
.khjz .kh1 dd p{ font-size:14px; color:#5f5f5f; line-height:26px; height:104px; overflow:hidden; margin:14px 0;}
.khjz .kh1 dd>a{ font-size:14px; color:#303030; font-family:"Georgia";}
.khjz .kh1 .dz{ left:0;}
.khjz .kh1 .dz dt{ float:right;}
.khjz .kh1 .dz dt i{ background:url(Img/Index/line1.png) no-repeat center; right:-63px;}
.khjz .kh1 .dz dd{ margin-right:250px;}
.khjz .kh1 .dy{ right:0;}
.khjz .kh1 .dy dt{ float:left;}
.khjz .kh1 .dy dt i{ background:url(Img/Index/line2.png) no-repeat center; left:-63px;}
.khjz .kh1 .dy dd{ margin-left:250px;}
.khjz .kh1 .jz1{ top:100px;}
.khjz .kh1 .jz2{ top:209px;}
.khjz .kh1 .jz3{ top:308px;}
.khjz .kh1 .jz4{ top:407px}
.khjz .kh1 .line{ height:325px; width:0px; border-left:1px solid #c1c1c1; position:absolute; left:600px; top:73px; z-index:2;}
.section.active .khjz .jz1{ top:0; opacity:1; transition-delay:.5s;}
.section.active .khjz .jz2{ top:109px; opacity:1; transition-delay:.8s;}
.section.active .khjz .jz3{ top:208px; opacity:1; transition-delay:1.1s;}
.section.active .khjz .jz4{ top:307px; opacity:1; transition-delay:1.4s;}



.section8 .newMain{ overflow:hidden;}
.newMain .nlist{ float:left; width:213px;}
.newMain .nlist li{ height:90px; width:213px; margin-bottom:1px; text-align:center;}
.newMain .nlist li a{ display:block; font-size:18px; color:#2f2f2f; text-decoration:none; background:#eaeaea; padding:27px 0 27px 0px;}
.newMain .nlist li a span{ font-size:10px; color:#b2b2b2; display:block; text-transform:uppercase;}
.newMain .nlist li a:hover{ background:#101f4e; color:#fff; font-weight:bold;}
.newMain .nlist li a:hover span{ color:#586383; font-weight:normal;}
.newMain .nlist li a.cur{ background:#101f4e; color:#fff; font-weight:bold;}
.newMain .nlist li a.cur span{ color:#586383; font-weight:normal;}
.newMain .newcont{ float:right; width:960px;}
.newMain .newcont .nc{ width:442px; float:left; position:relative;}
.newMain .newcont .nc dt{ height:249px; overflow:hidden;}
.newMain .newcont .nc dt img{ display:block; transition:all 1s ease-out;}
.newMain .newcont .nc dt img:hover{ transform:scale(1.1,1.1);}
.newMain .newcont .nc dd{ margin-top:25px;}
.newMain .newcont .nc dd h5{ height:16px; line-height:16px; overflow:hidden; margin-bottom:15px;}
.newMain .newcont .nc dd h5 a{ font-size:16px; color:#2f2f2f;}
.newMain .newcont .nc dd p{ font-size:14px; color:#474747; line-height:24px; height:96px; overflow:hidden; width:418px;}
.newMain .newcont .nc dd p a{ font-size:14px; color:#005bac;}
.newMain .newcont .nr{ float:right; height:405px; overflow:hidden; position:relative;}
.newMain .newcont .nr dl{ overflow:hidden; width:463px; padding:11px 20px 11px 13px; background:#eee; margin-bottom:11px;}
.newMain .newcont .nr dt{ float:left; overflow:hidden; height:104px;}
.newMain .newcont .nr dt img{ display:block; transition:all 1s ease-out;}
.newMain .newcont .nr dt img:hover{ transform:scale(1.1,1.1);}
.newMain .newcont .nr dd{ margin-left:121px;}
.newMain .newcont .nr dd h5{ height:16px; line-height:16px; overflow:hidden; padding-top:15px; padding-bottom:8px; font-weight:normal;}
.newMain .newcont .nr dd h5 a{ font-size:16px; color:#2f2f2f;}
.newMain .newcont .nr dd p{ font-size:13px; color:#4e4d4d; line-height:22px; height:44px; overflow:hidden;}
.newMain .newcont .nr dd span{ display:block; text-align:right; color:#aeadad; margin-top:5px;}
.shuiwen{ position:relative;}
.shuiwen img{ display:block; position:absolute; left: 154px; top: -50px;}



.videoBg{position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; background-image:url(/Skins/Default/Img/Index/xiaLaBg.png); display:none;}
.videoBox{position:absolute; left:50%; top:50%; z-index:1001; margin-left:-430px; margin-top:-260px; width:860px; height:520px; background-color:#fff; display:none;}
.videoBox>i{position:absolute; right:-20px; top:-20px; width:40px; height:40px; background:url(/Skins/Default/Img/Index/videoCloes.png) no-repeat center;}
.videoBox>i:hover{opacity:.6;}

.videoBgleft{position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; background-image:url(/Skins/Default/Img/Index/xiaLaBg.png); display:none;}
.videoBoxleft{position:absolute; left:50%; top:50%; z-index:1001; margin-left:-430px; margin-top:-260px; width:860px; height:520px; background-color:#fff; display:none;}
.videoBoxleft>i{position:absolute; right:-20px; top:-20px; width:40px; height:40px; background:url(/Skins/Default/Img/Index/videoCloes.png) no-repeat center;}
.videoBoxleft>i:hover{opacity:.6;}


/*项目导航*/
/*#fp-nav{position:fixed; top:50%; right:15px; z-index:999;}
#fp-nav li a span{display:block; padding:10px; margin-bottom:14px; width:10px; height:10px; background:url(Img/Index/fp-nav-ico.png) no-repeat center; text-indent:-99em;}
#fp-nav li a.active span{background-image:url(Img/Index/fp-nav-icoH.png);}*/

.iibox{ overflow:hidden; width:1200px; height:444px; position:relative; margin:0 auto}
.iibox span{ display:block; width:54px; height:54px; position:absolute; top:195px; cursor:pointer}
.iibox .iileft{ left:0; background:url(Img/Common/left_btn.png) no-repeat center top;}
.iibox .iiright{ right:0; background:url(Img/Common/right_btn.png) no-repeat center top;}
.iibox .iiWin{ overflow:hidden; width:1022px; position:relative; margin:0 auto; height:444px;}
.iibox .iiWin ul{ overflow:hidden; position:absolute}
.iibox .iiWin li{ float:left; margin-right:30px; width:233px; height:4444px; background:url(Img/Common/xxxx.png) no-repeat center top;}
.iibox .iiWin li img{ display:block; margin:0 auto; margin-top:60px;}
.iibox span:hover{ background-position:bottom}





