@charset "utf-8";

/*
 * Copy Right: Tencent ISUX
 * Project: 黄钻
*/

.none{display:none;}
body{background-color:#fff; color:#313131;}
.act_zone{position:relative;}
.nav{position:fixed; top:65px; right:28px; width:11px; z-index:1; display:none;}
.nav button{width:11px; height:11px; background-color:transparent; border-width:0; overflow:hidden; margin-bottom:6px; display:block;}
.nav button span{display:inline-block; width:5px; height:5px; background-color:#1f1f1f; opacity:0.33; border-radius:3px; overflow:hidden; line-height:99px;}
.nav button.now span{display:inline-block; width:11px; height:11px; background-color:#1f1f1f; opacity:0.8; border-radius:6px; overflow:hidden; line-height:99px;}
.scene{height:959px; position:relative; background-position:center top; background-repeat:no-repeat; background-size:cover; overflow:hidden;}
.scene1 .bg{height:959px; position:relative; background:url("img/013.jpg") center top no-repeat; background-size:cover; width:100%;}
.scene1 h1{position:absolute; top:96px; left:50%; margin-left:-215px; background-image:url("img/slice/txt1.png"); width:430px; height:107px;}
.scene1 .dl-pc{position:absolute; top:262px; left:50%; margin-left:-265px; background-image:url("img/slice/dl-v8-1.png"); width:254px; height:63px;}
.scene1 .mod-btn-a-disabled{position:absolute; top:262px; left:50%; margin-left:-265px; background-image:url("img/slice/dl-v8-1-n.png"); width:254px; height:63px; cursor:default;}
.scene1 .mod-btn-v8info{position:absolute; top:262px; left:50%; margin-left:-265px; background-image:url("img/slice/dl-v8-1-i.png"); width:254px; height:63px;}
.scene1 .dl-phone{position:absolute; top:262px; left:50%; margin-left:13px; background-image:url("img/slice/dl-v4-1.png"); width:254px; height:63px;}
.scene2{background-image:url("img/02.jpg");}
.scene2 h2{position:absolute; top:63px; left:50%; margin-left:-215px; background-image:url("img/slice/txt2.png"); width:430px; height:107px;}
.scene2 .dl-pc{position:absolute; top:192px; left:50%; margin-left:-119px; background-image:url("img/slice/dl-v8-2.png"); width:238px; height:60px;}
.scene2 .bg{position:absolute; top:299px; left:50%; margin-left:-800px; width:1600px; height:660px;}
.scene2 .bg .t1{background:url("img/02-1.jpg") no-repeat 0 0; width:800px; height:330px; float:left;}
.scene2 .bg .t2{background:url("img/02-1.jpg") no-repeat -800px 0; width:800px; height:330px; float:left;}
.scene2 .bg .t3{background:url("img/02-1.jpg") no-repeat 0 -330px; width:800px; height:330px; float:left;}
.scene2 .bg .t4{background:url("img/02-1.jpg") no-repeat -800px -330px; width:800px; height:330px; float:left;}
.scene3{background-image:url("img/03.jpg");}
.scene3 h2{position:absolute; top:63px; left:50%; margin-left:-215px; background-image:url("img/slice/txt3.png"); width:430px; height:107px;}
.scene3 .dl-pc{position:absolute; top:192px; left:50%; margin-left:-119px; background-image:url("img/slice/dl-v8-2.png"); width:238px; height:60px;}
.scene3 .bg{position:absolute; top:284px; left:50%; background:url("img/03-1.png") no-repeat; margin-left:-654px; width:1308px; height:675px;}
.scene7{background-image:url("img/07.jpg");}
.scene7 h2{position:absolute; top:63px; left:50%; margin-left:-215px; background-image:url("img/slice/txt4.png"); width:430px; height:107px; z-index:1;}
.scene7 .dl-pc{position:absolute; top:192px; left:50%; margin-left:-119px; background-image:url("img/slice/dl-v8-2.png"); width:238px; height:60px; z-index:1;}
.scene7 .po1{position:absolute; top:259px; left:50%; margin-left:110px; background-image:url("img/slice/po1.png"); width:363px; height:164px;}
.scene7 .po2{position:absolute; top:431px; left:50%; margin-left:110px; background-image:url("img/slice/po2.png"); width:363px; height:110px;}
.scene7 .po3{position:absolute; top:562px; left:50%; margin-left:-133px; background-image:url("img/slice/po3.png"); width:633px; height:283px;}
.scene7 .cat{position:absolute; top:625px; left:50%; margin-left:-590px; background-image:url("img/slice/cat.png"); width:151px; height:182px;}
.scene7 .phone{position:absolute; top:469px; left:50%; margin-left:-590px; background-image:url("img/slice/phone.png"); width:245px; height:366px;}
.scene4 .bg{height:959px; position:relative; z-index:1;}
.scene4 .bg .bg1{background:url("img/d1.jpg") center top no-repeat; background-size:cover; width:100%; height:959px; position:absolute; top:0; left:0;}
.scene4 .bg .bg2{background:url("img/d2.jpg") center top no-repeat; background-size:cover; width:100%; height:959px; position:absolute; top:0; left:0;}
.scene4 .bg .bg3{background:url("img/d3.jpg") center top no-repeat; background-size:cover; width:100%; height:959px; position:absolute; top:0; left:0;}
.scene4 .bg .bg4{background:url("img/d4.jpg") center top no-repeat; background-size:cover; width:100%; height:959px; position:absolute; top:0; left:0;}
.scene4 .bg .bg5{background:url("img/d5.jpg") center top no-repeat; background-size:cover; width:100%; height:959px; position:absolute; top:0; left:0;}
.scene4 .bg .bg6{background:url("img/d6.jpg") center top no-repeat; background-size:cover; width:100%; height:959px; position:absolute; top:0; left:0;}
.scene4 .bg .bg7{background:url("img/d7.jpg") center top no-repeat; background-size:cover; width:100%; height:959px; position:absolute; top:0; left:0;}
.scene4 h2{position:absolute; top:63px; left:50%; margin-left:-215px; background-image:url("img/slice/txt5.png"); width:430px; height:107px; z-index:3;}
.scene4 .dl-phone{position:absolute; top:192px; left:50%; margin-left:-131px; background-image:url("img/slice/dl-v4-2.png"); width:263px; height:60px; z-index:3;}
.scene4 .day7{position:absolute; top:35%; width:3990px; left:0; z-index:2; -webkit-transform-origin:left top;}
.scene4 .day7 .list{position:absolute; top:0; left:0; width:100%; height:449px; overflow:hidden;}
.scene4 .day7 .list .pics{width:3990px; height:449px; position:relative; left:0;}
.scene4 .day7 .list .pics .pic{float:left; margin-right:5px; width:280px;}
.scene4 .day7 .phone{position:absolute; top:-108px; left:240px; background-image:url("img/phone.png"); width:399px; height:683px; z-index:2;}
.scene5{background-image:url("img/05.jpg");}
.scene5 h2{position:absolute; top:63px; left:50%; margin-left:-215px; background-image:url("img/slice/txt6.png"); width:430px; height:107px;}
.scene5 .dl-phone{position:absolute; top:192px; left:50%; margin-left:-131px; background-image:url("img/slice/dl-v4-2.png"); width:263px; height:60px;}
.scene5 .po1{position:absolute; top:244px; left:50%; margin-left:-546px; background-image:url("img/slice/po4.png"); width:244px; height:244px;}
.scene5 .po2{position:absolute; top:299px; left:50%; margin-left:22px; background-image:url("img/slice/po5.png"); width:586px; height:533px;}
.scene6{background-image:url("img/06.jpg");}
.scene6 h2{position:absolute; top:63px; left:50%; margin-left:-215px; background-image:url("img/slice/txt7.png"); width:430px; height:107px;}
.scene6 .dl-phone{position:absolute; top:192px; left:50%; margin-left:-131px; background-image:url("img/slice/dl-v4-2.png"); width:263px; height:60px;}
.scene6 .bird{position:absolute; top:311px; left:50%; margin-left:-517px; background-image:url("img/slice/bird.png"); width:604px; height:431px;}
.scene6 .hand{position:absolute; top:663px; left:50%; margin-left:-311px; background-image:url("img/slice/hand.png"); width:152px; height:169px;}
.scene2 .mod-btn-a-disabled,
.scene3 .mod-btn-a-disabled,
.scene7 .mod-btn-a-disabled{position:absolute; top:192px; left:50%; margin-left:-119px; background-image:url("img/slice/dl-v8-2-n.png"); width:238px; height:60px; cursor:default;}
.scene2 .mod-btn-v8info,
.scene3 .mod-btn-v8info,
.scene7 .mod-btn-v8info{position:absolute; top:192px; left:50%; margin-left:-119px; background-image:url("img/slice/dl-v8-2-i.png"); width:238px; height:60px;}

.scene8{z-index:2;}
.scene8 h2{position:absolute; top:20%; left:50%; margin-left:-284px; background-image:url("img/slice/txt8.png"); width:568px; height:57px;}
.scene8 .dl-pc{position:absolute; top:40%; left:50%; margin-left:-306px; background-image:url("img/slice/dl-v8-3.png"); width:293px; height:79px;}
.scene8 .txt{position:absolute; top:40%; left:50%; margin-left:-306px; margin-top:90px; width:293px; text-align:center; line-height:22px; font-size:14px; color:#6d6d6d; font-family:'微软雅黑';}
.scene8 .txt a{color:#6d6d6d;}
.scene8 .txt strong{color:#ee6d0e;}
.scene8 .mod-btn-a-disabled{position:absolute; top:40%; left:50%; margin-left:-306px; background-image:url("img/slice/dl-v8-3-n.png"); width:293px; height:79px; cursor:default;}
.scene8 .dl-phone{position:absolute; top:40%; left:50%; margin-left:19px; background-image:url("img/slice/dl-v4-3.png"); width:293px; height:79px;}

.main{position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; -webkit-transform-origin:center top;}

.top{display:none;}
.animation .top{height:72px; background-color:transparent; border-width:0; width:320px; position:absolute; bottom:0; left:50%; margin-left:-160px; z-index:999; outline:0; cursor:pointer; display:block;}
.animation .top:hover{background-color:rgba(0,0,0,0.3); border-radius:10px;}
.animation .top .ico-top{display:inline-block; background-image:url("img/slice/top.png"); width:40px; height:14px;}

.layout-footer{position:absolute; bottom:10px; width:100%; z-index:5;}
.layout-footer,
.layout-footer a{color:#888;}

.active h1,
.active h2{
	-webkit-animation: show1 1500ms ease 100ms 1 normal both;
	animation: show1 1500ms ease 100ms 1 normal both;
}
.active .t1,
.active .t4,
.active .po1,
.active .po4{
	-webkit-animation: show1 300ms ease 1000ms 1 normal both;
	animation: show1 500ms ease 1000ms 1 normal both;
}
.active .t2,
.active .po2,
.active .po5{
	-webkit-animation: show1 200ms ease 1400ms 1 normal both;
	animation: show1 500ms ease 1400ms 1 normal both;
}
.active .t3,
.active .po3{
	-webkit-animation: show1 200ms ease 1200ms 1 normal both;
	animation: show1 500ms ease 1200ms 1 normal both;
}
@-webkit-keyframes show1  {
	0%{opacity: 0; -webkit-transform: scale(0.9);}
	100% {opacity: 1; -webkit-transform: scale(1);}
}
@keyframes show1 {
	0%{opacity: 0; transform: scale(0.9);}
	100% {opacity: 1; transform: scale(1);}
}
.top{
	-webkit-animation: buttom1 1000ms ease 1200ms infinite normal both;
	animation: buttom1 1000ms ease 1200ms infinite normal both;
}
@-webkit-keyframes buttom1  {
	0%, 100%{-webkit-transform: translateY(0);}
	50% {-webkit-transform: translateY(10px);}
}
@keyframes buttom1 {
	0%, 100%{transform: translateY(0);}
	50% {transform: translateY(10px);}
}

/*.scene1.active .bg{*/
	/*-webkit-animation: move1 5000ms ease 0 1 normal both;*/
	/*animation: move1 5000ms ease 0 1 normal both;*/
/*}*/
@-webkit-keyframes move1  {
	0%{-webkit-transform: translateX(0);}
	100% {-webkit-transform: translateX(-75px);}
}
@keyframes move1  {
	0%{transform: translateX(0);}
	100% {transform: translateX(-75px);}
}

.scene3.active .bg{
	-webkit-animation: move2 3000ms ease 0 1 normal both;
	animation: move2 3000ms ease 0 1 normal both;
}
@-webkit-keyframes move2  {
	0%{opacity: 0.3; -webkit-transform: translateY(75px);}
	100% {opacity: 1; -webkit-transform: translateY(0);}
}
@keyframes move2  {
	0%{opacity: 0.3; transform: translateY(75px);}
	100% {opacity: 1; transform: translateY(0);}
}

.active .bird{
	-webkit-animation: move3 150ms ease 0 infinite normal both;
	animation: move3 150ms ease 0 infinite normal both;
}
@-webkit-keyframes move3  {
	0%,100%{-webkit-transform: rotate(-3deg);}
	50% { -webkit-transform: rotate(3deg);}
}
@keyframes move3  {
	0%,100%{transform: rotate(-3deg);}
	50% { transform: rotate(3deg);}
}

.scene7.active .phone{
	-webkit-animation: move4 1000ms ease 1500ms 1 normal both;
	animation: move4 1000ms ease 1500ms 1 normal both;
}
@-webkit-keyframes move4  {
	0%{-webkit-transform: translateX(200px);}
	100% { -webkit-transform: translateX(0);}
}
@keyframes move4  {
	0%{transform: translateX(200px);}
	100% { transform: translateX(0);}
}

.scene7.active .cat{
	-webkit-animation: move5 1000ms ease 1800ms 1 normal both;
	animation: move5 1000ms ease 1800ms 1 normal both;
}
@-webkit-keyframes move5  {
	0%{-webkit-transform: translateX(280px);}
	100% { -webkit-transform: translateX(0);}
}
@keyframes move5  {
	0%{transform: translateX(280px);}
	100% { transform: translateX(0);}
}


.animation body, html.animation {
	margin: 0;
	overflow: hidden;
	-webkit-transition: opacity 400ms;
	-moz-transition: opacity 400ms;
	transition: opacity 400ms;
}

.animation body, .animation .onepage-wrapper, html.animation  {
	display: block;
	position: static;
	padding: 0;
	width: 100%;
	height: 100%;
}

.animation .onepage-wrapper {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	padding: 0;
}

.animation .onepage-wrapper .section {
	width: 100%;
	height: 100%;
}

.animation .onepage-pagination {
	position: absolute;
	right: 10px;
	top: 65px;
	z-index: 5;
	list-style: none;
	margin: 0;
	padding: 0;
}
.animation .onepage-pagination li {
	padding: 0;
	text-align: center;
}
.animation .onepage-pagination li a{
	padding: 6px;
	width: 5px;
	height: 5px;
	display: block;

}
.animation .onepage-pagination li a:before{
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	background: rgba(31,31,31,0.33);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.animation .onepage-pagination li a.active:before{
	width: 10px;
	height: 10px;
	background: rgba(31,31,31,0.8);
	margin: -4px 0 0 -2px;
}