/*初始化*/
*{margin: 0; padding: 0; outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-box-sizing: border-box;}
html{height: 100%; font-size: 100%; -webkit-text-size-adjust: 100%;}
body{margin:0; padding:0; width: 100%; height: 100%;  font-family: "microsoft yahei", Arial, SimSun;  font-size: 12px;position: relative; word-break:break-all;}
a{text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);}
img{-ms-interpolation-mode: bicubic; vertical-align: middle;}
img:not([src*="/"]){display: none;}
table{border-collapse: collapse; border-spacing: 0;}
th, td, caption{vertical-align: middle;}
textarea{resize: none;}
input, button, select, textarea{outline: none; border-radius: 0; font-family: inherit; font-size: inherit;}
ul,ol,li{list-style: none;}

.section { position: relative; overflow: hidden;}
.section .bg,.section2 .slide .bg{ width:100%; height:100%; position:absolute; top:0; left:0;}
.section1 .bg{ background:url(../images/bg1.jpg) center no-repeat; background-size:100% 100%;}
.section img{ width:100%;}
.section2 .slide{ position:relative;}
.section2 .slide1 .bg{ background:#f0c55c;}
.section2 .slide2 .bg{ background:#177db0;}
.section2 .slide3 .bg{ background:#65cb78;}
.section2 .slide4 .bg{ background:#ffd36a;}
.section2 .slide5 .bg{ background:#fe6868;}
.section2 .slide6 .bg{ background:#4d9cd7;}
.section2 .slide7 .bg{ background:#fa895d;}
.section2 .slide8 .bg{ background:#65cb78;}
.section2 .slide9 .bg{ background:#54c6ea;}
.section2 .slide10 .bg{ background:#f3bf2e;}
.section2 .slide11 .bg{ background:#5c86c2;}
.section2 .slide12 .bg{ background:#ff6f6f;}
.section2 .slide13 .bg{ background:#3881ba;}
.section2 .slide14 .bg{ background:#d44267;}
.section2 .slide15 .bg{ background:#009966;}
.section2 .slide16 .bg{ background:#fa895d;}
.section2 .slide16 .bg{ background:#fec042;}
.section2 .slide17 .bg{ background:#f15236;}
.section3 .bg{ background:#ee9b35;}
.section4 .bg{ background:#a2c371;}
.section5 .bg{ background:#326aa2;}
.section6 .bg{ background:#a2c371;}
.section7 .bg{ background:#24424d;}

/*slide部分*/
.controlArrow{ width:27px;  height:49px; border:none; background:url(../images/s.png);}
.controlArrow.prev{ width:27px; background-position:-72px 0px;}
.controlArrow.next{ background-position:-102px 0px;}
.section2 .slide .content p{ margin-bottom:10px;}
.fp-slidesNav ul li.bottom{ bottom:7px; left:45%;} 
.fp-slidesNav ul li{ margin:0;}

/*背景*/
.bg11{ width:80%; position:absolute; bottom:0px; right:50%; margin-right:-100%; /*margin-right:-40%;*/ transition:all 0.7s;}
.bg12{ width:50%; position:absolute; bottom:80px; left:50%; margin-left:-100%; /*margin-left:-35%;*/ transition:all 0.7s;}
.s2bg{ width:70%; position:absolute; bottom:30px; left:50%; margin-left:-35%; transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); transition:all 0.7s;}
.sbg15_01{ width:100%; }
.sbg15_02{ width:30%; position:absolute; top:0; left:25%; animation: 2s linear 0s normal none infinite scale; -webkit-animation: 2s linear 0s normal none infinite scale; }
.sbg15_03{ width:25%; position:absolute; top:75px; right:0; animation: 2s linear 0s normal none infinite scale; -webkit-animation: 2s linear 0s normal none infinite scale; }
.sbg31{ width:280px; height:285px; position:absolute; bottom:10px; left:50%; margin-left:-140px; background:url(../images/GearBg.png) center no-repeat; background-size:142px 145px;  -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.sbg31 .contain{ width:100%; height:100%; position:relative;}
.sbg31 .contain img{ position:absolute; top:0; z-index:13;}
.sbg31 .contain .bg17Grace3{ width:86px; height:85px; position:absolute; top:101px; left:101px; z-index:12; background:url(../images/Gear3.png) center no-repeat; background-size:100% 100%; animation: 15s linear 0s normal none infinite rotate; -webkit-animation: 15s linear 0s normal none infinite rotate;}
.sbg31 .contain .bg17Grace2{ width:63px; height:63px; position:absolute; z-index:11; background:url(../images/Gear2.png) center no-repeat; background-size:100% 100%; animation: 15s linear 0s normal none infinite rotate2; -webkit-animation: 15s linear 0s normal none infinite rotate2;}
.sbg31 .contain .bg17Grace{ width:62px; height:60px; position:absolute; z-index:10; background:url(../images/Gear.png) center no-repeat; background-size:100% 100%; animation: 15s linear 0s normal none infinite rotate; -webkit-animation: 15s linear 0s normal none infinite rotate;}
.sbg31 .contain .bg17Grace_01{ top:49px; left:37px;}
.sbg31 .contain .bg17Grace_02{top:20px; left:153px;}
.sbg31 .contain .bg17Grace_03{top:168px; left:24px;}
.sbg31 .contain .bg17Grace_04{bottom:5px; left:140px;}
.sbg31 .contain .bg17Grace_05{top:122px; right:0;}
.sbg31 .contain .bg17Grace2_01{top:53px; left:97px;}
.sbg31 .contain .bg17Grace2_02{top:111px; left:45px;}
.sbg31 .contain .bg17Grace2_03{bottom:45px; left:92px;}
.sbg31 .contain .bg17Grace2_04{bottom:59px; right:44px;}
.sbg31 .contain .bg17Grace2_05{top:76px; right:43px;}
.cases,.demos{ width:100%; position:absolute; top:100px; left:0;}
.caseL{ width:90px; position:absolute; left:50%; margin-left:-200px; /*margin-left:-95px;*/}
.caseR{ width:90px; position:absolute; right:50%; margin-right:-200px; /*margin-right:-95px;*/}
.caseL1{ top:0; transition:all 0.7s;}
.caseL2{ top:60px; transition:all 1s;}
.caseL3{ top:120px; transition:all 1.3s;}
.caseL4{ top:180px; transition:all 1.6s;}
.caseL5{ top:240px; transition:all 1.9s;}
.caseL6{ top:300px; transition:all 2.2s;}
.caseR1{ top:0; transition:all 0.7s;}
.caseR2{ top:60px; transition:all 1s;}
.caseR3{ top:120px; transition:all 1.3s;}
.caseR4{ top:180px; transition:all 1.6s;}
.caseR5{ top:240px; transition:all 1.9s;}
.caseR6{ top:300px; transition:all 2.2s;}
.demoL{ width:95px; position:absolute; left:50%; margin-left:-200px; /*margin-left:-100px;*/}
.demoR{ width:95px; position:absolute; right:50%; margin-right:-200px; /*margin-right:-100px;*/}
.demoL1{ top:0; transition:all 0.7s;}
.demoL2{ top:115px; transition:all 1s;}
.demoL3{ top:230px; transition:all 1.3s;}
.demoR1{ top:0; transition:all 0.7s;}
.demoR2{ top:115px; transition:all 1s;}
.demoR3{ top:230px; transition:all 1.3s;}
.bg71{ width:60%; position:absolute; top:-200px; left:50%; margin-left:-30%; transition:all 1s;}
.bg72{ width:100%; position:absolute; top:220px; left:0; font-size:45px; text-align:center; color:#fff; transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); transition:all 1s;}
.bg73{ width:100%; height:80px; text-align:center; position:absolute; left:0; bottom:80px; transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); transition:all 1s; }
.bg73 a{ display:block; width:150px; height:40px; font-size:24px; color:#fff; line-height:40px; text-align:center; background:#d94b4b; margin:0 auto; border-radius:4px; -webkit-border-radius:4px;}
.bg73 p.tel{ color:#fff; font-size:16px; margin-top:10px;}

.backhome{ position:fixed; width:100%; top:8px;}
.backhome a img{ display:block; margin-left:8px; width:40px;}
.goTop{ position:fixed; bottom:20px; right:10px;}
.goTop img{ width:30px;}
/*.firstpage,.lastpage{ width:35px; height:35px; position:fixed; right:10px;}
.firstpage img,.lastpage img{ width:100%;}
.firstpage{ bottom:90px;}
.lastpage{ bottom:45px;}*/

.title{ width:100%; position:absolute; top:-100px; left:0; font-size:18px; font-weight:bold; text-align:center; color:#fff; transition:all 0.7s;}
.title img{ width:30px; vertical-align:middle; margin-left:10px; animation: 2s linear 0s normal none infinite scale; -webkit-animation: 2s linear 0s normal none infinite scale; }
.content{width:250px; position:absolute; top:50px; left:50%; margin-left:-125px; line-height:20px; font-size:12px; text-align:left; color:#fff; transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); transition:all 1s;}
.content p.font16{ font-size:16px; margin-bottom:5px;}


.Bt{ position:absolute; bottom:150px; left:50%; margin-left:-80px;}
.Bt a img{ width:160px;}


.goTop{ position:fixed; bottom:20px; right:10px;}
.goTop img{ width:30px;}
.arrow_v{position: fixed; bottom: 30px; left:50%; z-index:115; width: 50px; height: 50px; margin-left: -25px; /*background: rgba(160,160,160,0.6); border-radius: 50%;*/}
.arrow_v p{position: absolute; top: 50%; left: 50%; margin: -14px 0 0 -25px; width: 50px; height: 28px; background:url(../images/s.png) 0 -50px no-repeat;}
.arrow_v p.move{-webkit-animation: arrowUp 1.5s infinite ease-in-out;}


/*动画*/
.active .title{ top:20px; opacity:1; transition-delay:0.7s;}
.active .content,.active .s2bg,.active .bg72,.active .bg73{ opacity:1; transform:scale(1,1); -webkit-transform:scale(1,1); transition-delay:0.7s;}
.active .bg11{ margin-right:-40%; opacity:1; transition-delay:0.7s;}
.active .bg12{ margin-left:-35%; opacity:1; transition-delay:0.7s;}
.active .caseL{ margin-left:-95px; transition-delay:0.7;}
.active .caseR{ margin-right:-95px; transition-delay:0.7;}
.active .demoL{ margin-left:-100px; transition-delay:0.7;}
.active .demoR{ margin-right:-100px; transition-delay:0.7;}
.active .bg71{ top:20px; opacity:1; transition-delay:1s;}

@keyframes arrowUp {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}


@-webkit-keyframes arrowUp {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}

.music_wrap{position: fixed; top:20px; right:15px; z-index: 20; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;}
.music_wrap .text{width: 57px; margin-right: 10px; color: #fff; font-size: 24px; opacity: 1;}
.music_wrap .move{transition: opacity 0.5s;}
.music_wrap .hide{opacity: 0;}
.btn_music, .btn_music1{display: block; width: 44px; height: 44px; background-position: 0 0;}
.btn_music.on{-webkit-animation: reverseRotataZ 1.2s linear infinite;}
@-webkit-keyframes reverseRotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(-360deg);}
}

.btn_music1{position: relative; overflow: hidden; width: 40px; height: 33px; background: rgba(0, 0, 0, 0);}
.btn_music1 span{position: absolute; bottom: 0; width: 4px; height: 33px; background-color: #fff; border-radius: 2px 2px 0 0;}
.btn_music1 .line1{left: 0; height: 14px;}
.btn_music1 .line2{left: 8px; height: 28px;}
.btn_music1 .line3{left: 16px; height: 20px;}
.btn_music1 .line4{left: 24px; height: 6px;}
.btn_music1.on .line1{-webkit-animation : case1 1.75s infinite;}
.btn_music1.on .line2{-webkit-animation : case2 1.5s infinite;}
.btn_music1.on .line3{-webkit-animation : case3 1.25s infinite;}
.btn_music1.on .line4{-webkit-animation : case3 2s infinite;}

@-webkit-keyframes case1 {
  0% {height : 0}
  50% {height : 23px;}
  100% {height : 0}
}

@-webkit-keyframes case2 {
  0% {height : 0}
  50% {height : 28px;}
  100% {height : 0}
}

@-webkit-keyframes case3 {
  0% {height : 0}
  50% {height : 25px;}
  100% {height : 0}
}
@keyframes scale{
	from{ transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5);}
	to{ transform:scale(1,1); -webkit-transform:scale(1,1);}
	}
@-webkit-keyframes scale{
	from{ transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5);}
	to{ transform:scale(1,1); -webkit-transform:scale(1,1);}
	}


@-webkit-keyframes rotate{
	from{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(360deg)}
	}
@-moz-keyframes rotate{
	from{-moz-transform:rotate(0deg)}
	to{-moz-transform:rotate(360deg)}
	}
@-ms-keyframes rotate{
	from{-ms-transform:rotate(0deg)}
	to{-ms-transform:rotate(360deg)}
	}
@-o-keyframes rotate{
	from{-o-transform:rotate(0deg)}
	to{-o-transform:rotate(360deg)}
	}
	
@-webkit-keyframes rotate2{
	from{-webkit-transform:rotate(360deg)}
	to{-webkit-transform:rotate(0deg)}
	}
@-moz-keyframes rotate2{
	from{-moz-transform:rotate(360deg)}
	to{-moz-transform:rotate(0deg)}
	}
@-ms-keyframes rotate2{
	from{-ms-transform:rotate(360deg)}
	to{-ms-transform:rotate(0deg)}
	}
@-o-keyframes rotate2{
	from{-o-transform:rotate(360deg)}
	to{-o-transform:rotate(0deg)}
	}

@media only screen and ( min-width:370px ){
	
.bg72{ top:290px;}


}
@media only screen and ( min-width:768px ){
	
.bg12{ bottom:200px; }
.bg72{ top:550px;}
.bg73{ bottom:200px;}
}