html, body { margin: 0; padding: 0; }
#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; 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; right: 20px; top: 40%; z-index: 10; list-style-type: none; }
#menu li { width: 90px; height: 27px; margin-top: 7px; overflow: hidden;}
#menu a { display: block; height: 27px; padding-right: 30px; line-height: 27px; background: url(../images/dot.png) right -34px no-repeat; color: #fff; text-align: right; text-shadow: 1px 1px 0px #333; 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: right 0;}

.section { position: relative; overflow: hidden;}
.section .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.middle { position: relative; width: 1000px; height: 100%; margin-left: auto; margin-right: auto;}

.section1 { background: url(../img/pink.png) 0 50% repeat-x; }
.bg1-3 { opacity: 0; background: url(../images/bg1-3.png) 50% 50% no-repeat;}
.left1 { position: absolute;
	position: absolute;
	left: -200%;
	top: 50%;
	width: 570px;
	height: 420px;
	margin: -210px 0 0 -100px;
}
.right1 {
	position: absolute;
	left: 200%; top: 50%;
	width: 570px;
	height: 420px;
	margin: -210px 0 0 -10px;
}

.section2 {
	background: url(../img/page2.png) 0 50% no-repeat;
}
.logo2 { position: absolute; left: 50%; top: 30px; z-index: 20; width: 326px; height: 82px; margin-left: -163px; text-indent: -9999px; background: url(../images/logo.png) 0 -99px; overflow: hidden;}
.bg2-3 {
	background: url(../img/perRight.png) 50% -300% no-repeat; transition: all 1s;
}
.left2 { position: absolute; left: -200%; top: 50%; width: 830px; height: 558px; margin: -253px 0 0 -80px; background: url(../images/l2.png) 0 0 no-repeat;}
.left2-1 { position: absolute; left: 0; top: 53px; width: 487px; height: 366px; background-image: url(../images/l2-1.png); opacity: 0; transition: all 1.5s;}
.left2-2 { position: absolute; left: -10px; top: 75px; width: 510px; height: 396px; background-image: url(../images/l2-2.png); opacity: 0;}
.right2 { position: absolute; left: 200%; top: 50%; width: 593px; height: 518px; margin-top: -269px; background-image: url(../images/r2.png);}
.tip { position: absolute; left: 300%; top: 50%; width: 331px; height: 194px; margin-top: -170px; background-image: url(../images/tip.png); opacity: 0;}
.hand {
	position: absolute; left: 300%; top: 50%; width: 331px; height: 194px; margin-top: -170px; background-image: url(../images/hand.png);}

.section3 {

}
.logo3 { position: absolute; left: 50%; top: 30px; width: 257px; height: 65px; margin-left: -149px; text-indent: -9999px; background: url(../images/logo.png) 0 -199px; overflow: hidden;}
.bg3-3 {
	background: url(../img/top.png) 50% 10% no-repeat;
	opacity: 0;
	transition: all 1s;
	z-index: 1;
}
.bg3-4 .bg { background: url(../img/more.png) 50% 10% no-repeat; opacity: 0; transition: all 1s;}
.left3 {
	position: absolute;
	left: -200%;
	top: 58%;
	width: 380px;
	border-radius: 10px;
	height: 600px;
	margin: -300px 0 0 118px;
	background: url(../img/phone.png) 50% 50% no-repeat;
	z-index: 0;
}
.right3 {
	position: absolute;
	left: 200%; top: 50%;
	width: 564px;
	height: 630px;
	margin: -162px 0 0 50px;
	z-index: 2;
}

.left4 {
	position: absolute;
	left:50% !important;
	top: -100%;
	width: 698px;
	height: 302px;
	margin: -150px 0 0 -394px;
	background: url(../img/zph3.png) no-repeat;
}
.active  .left4{
	top: 50%;
	left:50% !important;
}
.left4-1 {
	position: absolute;
	left:100%;
	top: 50%;
	width: 690px;
	height: 294px;
	margin: -60px 0 0 200px;
	background: url(../img/zph2.png) 50% 50% no-repeat;
	opacity: 0;
}
.active .left4-1{
	left:100px !important;
}
.left4-2 {
	position: absolute;
	left: -100%;
	top: 50%;
	width: 670px;
	height: 274px;
	margin: -100px 0 0 81px;
	background: url(../img/zph1.png) 50% 50% no-repeat;
	opacity: 0;
}
.active .left4-2{
	left:-120px !important;
}

.dian { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -193px 0 0 -58px; opacity: 0;}
.dian span { display: block; width: 40px; height: 40px; background-image: url(../images/s4-l4.png);}
.left4-4 { position: absolute; left: 50%; top: 50%; width: 710px; height: 372px; margin: -165px 0 0 -610px; background: url(../images/l4-4.png) 137px 23px no-repeat; opacity: 0;}
.left4-5 { position: absolute; left: 50%; top: 50%; width: 152px; height: 360px; margin: -20px 0 0 -290px; background: url(../images/l4-5.png) 0 0 no-repeat; opacity: 0;}
.right4 { position: absolute; left: 200%; top: 50%; width: 595px; height: 341px; margin: -175px 0 0 10px; background-image: url(../images/r4.png);}
.logo5 { position: absolute; left: 50%; top: 30px; width: 259px; height: 66px; margin-left: -129px; text-indent: -9999px; background: url(../images/logo.png) 0 -371px; overflow: hidden;}
.left5 {
	position: absolute;
	left: -200%;
	top: 60%;
	width: 463px;
	height: 604px;
	margin: -302px 0 0 -80px;
	background: url(../img/video1.jpg) 50% 90% no-repeat;}
.right5 {
	position: absolute;
	left: 200%;
	top: 60%;
	width: 463px;
	height: 604px;
	margin-top: -302px;
	background: url(../img/video2.jpg) 50% 70% no-repeat;
}

/* 鍔ㄧ敾 */
.left { transition: all 1.5s;}
.right { transition: all 1.5s;}
.active .left, .ltie10 .left { left: 0;}
.active .right, .ltie10 .right { left: 50%;}
.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 3s; animation: bg1-3 3s;}
@-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% 50%;
	transition-delay: 0.5s;
}
.active .left2-1, .ltie10 .left2-1 { opacity: 1; transition-delay: 1.5s;}
.active .left2-2,  .ltie10 .left2-2 { left: 38px; top: 0; opacity: 1; transition: all 1s ease 2.5s;}
.active .tip, .ltie10 .tip { left: 62px; opacity: 1; transition: all 1s ease 3s;}
.active .hand { -webkit-animation: hand 2s ease 3s; animation: hand 2s ease 3s;}
@-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% 70%;
	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 .left4-1,
.ltie10 .left4-1 {
	opacity: 1;
	transition: all 1s ease 1s;
}
.active .left4-2, .ltie10 .left4-2 { left: 0; opacity: 1; transition: all 1s ease 1.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 .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%;}
}


.link { position: absolute; height: 52px; text-indent: -9999px; overflow: hidden;}

.backHome{
	position: absolute;
	top:0;
	right: 5%;
	z-index: 10;
}
.tabBar{
	width: 600px;
	height: 50px;
	line-height: 50px;
	border-radius: 25px;
	background:#FEFEFF;
	font-size: 20px;
	color: #666;
}
.tabBarItem{
	cursor: pointer;
}
.tabBar .tabBarItem.selectCode{
	background: #F77958;
	color:#fff;
}
.tabBar .tabBarItem:first-child{
	 border-bottom-left-radius: 25px;
	 border-top-left-radius: 25px;
 }
.tabBar .tabBarItem:last-child{
	border-bottom-right-radius: 25px;
	border-top-right-radius: 25px;
}
.tabItem{
	height:200px;
	position: relative;
	display: block !important;
}
.w33{
	width: 33%;
}
.w34{
	width: 34%;
}
.panel{
	padding:30px 46px 0 46px;
	transform: scale(0);
	opacity: 0;
	position: absolute;
	top:0;
	width: 100%;
	box-sizing: border-box;
	background:none !important;
}
.panel.selectCode{
	opacity: 1;
	transform: scale(1);
	transition: all 1s;
}
.smCode{
	padding:10px;
	background: #fff;
}
.smCode img{
	width:204px;
	height: 188px;
}
.perLeft{
	top:100%;
}
.active .perLeft{
	top:70%;
	transition: all 1s;
}
.section .bg2-3.bg{
	width: 189px;
	left:700px;
}
.perLeft{
	background: url(../img/perLeft.jpg) 50% -200% no-repeat;
	transition: all 1s;
	width: 570px;
	height: 100%;
}
.active .perLeft{
	background-position: 50% 80%;
	transition-delay: 0.5s;
}
.phone-title{
	transition-delay: 1s;
}
.phone-title{
position: absolute;
color: #fff;
width: 100%;
text-align: center;
	opacity: 0;
	top:7%;
}
.phone-title p{
	font-size: 50px;
}
.phone-title span{
font-size: 24px;
}
.active .phone-title{
	opacity: 1;
}
.phone-web-title {
	width: 100%;
	position: absolute;
	top:8%;
}
.phone-web-title p{
	font-size: 36px;
	text-align: center;
}
.phone-web-title span{
	font-size:20px ;
	color:#666;
	text-align: center;
}
.phone-web-title{
	opacity: 0;
	transition: all 1s;
}
.active .phone-web-title{
	opacity: 1;
	transition-delay: .5s;
}
.bg-bottom{
	width: 100%;
	height: 100%;
	background-image: url(../img/bottombg.jpg);
	background-repeat: no-repeat;
	background-position: 50% -200%;
	transition: all .5s;
}
.active .bg-bottom{
	transition-delay: .5s;
	background-position: 50% 90%;
}
.bottomTip{
	opacity: 0;
	color:#fff;
	position: absolute;
	z-index: 1;
	bottom: 5%;
	font-size: 18px;
}
.active .bottomTip{
	opacity: 1;
	transition-delay: 1s;
}
.bottomOther.trans{
	left: -200%;
	position: absolute;
	margin-left:-525px;
	bottom:15%;
}
.active .bottomOther.trans{
	left: 50%;
	transition-delay: 1s;
}
.totop {
    position: fixed;
    right: 10px;
    z-index: 1111111;
    bottom: 10px;
    cursor: pointer;
    background: url(../img/totop.png) center center no-repeat;
    background-size: 100% 100%;
    width: 80px;
    height: 100px;
    display: none;
}