@charset "utf-8";
/* CSS Document */
body,p,input,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form{margin:0;padding:0;list-style:none;vertical-align:middle;line-height:1;}
body,html{width:750px;height:100%;position:relative;font-family:Helvetica;background-color:#fff;margin:0 auto;overflow: hidden;}
header,section,footer,img,button{display:block;margin:0;padding:0;border:none;}
.clearfix:after {
    content:"";
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    zoom:1;
}
.bg{ width:100%; height:100%; position:relative; display:none; z-index:1111;}
.logoImg{ position:absolute; right:25px; top:17px; width:156px;}
.btn_items{ position:absolute; left:0; bottom:55px; width:100%;}
.btn_order{ width:335px; height:104px; position:relative; margin:0 auto;}
.btn_order a{ width:335px; height:104px; display:block; background:url(http://wl.laohu.com/_s/yuyue/btn_order.png?v=1) no-repeat;}
.btn_order .hand{ background:url(http://wl.laohu.com/_s/yuyue/hand.png) no-repeat; width:102px; height:150px; position:absolute; top:10px; right:-25px;-webkit-animation: handscale 1s .5s infinite both;}
.btn_item{ text-align:center; padding:25px 0 10px;}
.btn_item a{ width:270px; height:84px; display:inline-block; margin:0 20px;}
.btn_item .btn_again{ background:url(http://wl.laohu.com/_s/yuyue/btn_again.png) no-repeat;}
.btn_item .btn_share{ background:url(http://wl.laohu.com/_s/yuyue/btn_share.png) no-repeat;}

.btn_index{ text-align:center;}
.btn_index a{ color:rgba(255,255,255,0.5); font-size:22px; text-decoration:underline;}
@keyframes handscale {
	0% {transform: scale(0.8)}
	50% {transform: scale(.75)}
	100% {transform: scale(0.8)}
}
@-webkit-keyframes handscale {
	0% {-webkit-transform:scale(0.8)}
	50% {-webkit-transform: scale(.75)}
	100% {-webkit-transform:scale(0.8)}
}
#video{
	background-color: #000;position: absolute;
	width:110%; height:110%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	z-index:111;
}
a#music{ position:absolute; width:62px; height:60px; left:20px; top:20px; z-index:111111;}
a#music span{ position: absolute; width: 2.8px; left:0; bottom:0px; background-color:#b6b597;}
a#music span:nth-child(1){ left:0; height:30px;}
a#music span:nth-child(2){ left:15px; height:42px;}
a#music span:nth-child(3){ left:30px; height:24px;}
a#music span:nth-child(4){ left:45px; height:16px;}
a#music.active span{
	-webkit-animation: musicShort .4s linear infinite both alternate;
	animation: musicShort .4s linear infinite both alternate;
}
a#music.active span:nth-child(1){}
a#music.active span:nth-child(2){
    -webkit-animation-name: musicLong;
    animation-name: musicLong;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}
a#music.active span:nth-child(3){
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
a#music.active span:nth-child(4){
    -webkit-animation-name: musicLong;
    animation-name: musicLong;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}
a#music.pause .audio-anim span{
    -webkit-animation: none;
    animation: none;
}
@-webkit-keyframes musicShort {
    0% {height: 0;}
    100% {height: 22px;}
}
@keyframes musicShort {
    0% {height: 0;}
    100% { height: 22px;}
}

@-webkit-keyframes musicLong {
    0% {height: 0;}
    100% {height: 50px;}
}
@keyframes musicLong {
    0% {height: 0;}
    100% {height: 50px;}
}
.shareImg{ position:fixed; top:0; left:0; width:100%; z-index:11111; display:none;}


.videoPlay{width:100%;height:100%;display:none;position:absolute;left:0;top:0; background-size:100% auto;}
#video{/*width: 100%; height: 110%; position: absolute; left:50%; top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);*/
}


.pageAnimate{width: 100%; height: 101%; display: none; position: absolute; left: 0; top: 0; background:url(http://wl.laohu.com/_s/yuyue/page1Bg.jpg) no-repeat #000; background-size: 100% auto;}
.pageAnimate img.page1Imgs{filter:alpha(opacity=0);-moz-opacity:0; opacity:0; display: block; width: 100%; position: absolute; left: 0; top: 0;}
.pageAnimate img.page1_ren{z-index: 1;}
.pageAnimate img.page1_deng{top: 407px; z-index: 2;}
.pageAnimate img.page1_deng1{top: 256px; z-index: 3;}
.pageAnimate img.page1_deng2{top: 336px; z-index: 4;}
.pageScale{
    -webkit-animation: pageAnimate 1s ease-in-out both;
    -moz-animation: pageAnimate 1s ease-in-out both;
    -ms-animation: pageAnimate 1s ease-in-out both;
    -o-animation: pageAnimate 1s ease-in-out both;
    animation: pageAnimate 1s ease-in-out both;
}
.pageScale img.page1_ren_move{
    -webkit-animation: pageAniOpacity 1s both;
    -moz-animation: pageAniOpacity 1s both;
    -ms-animation: pageAniOpacity 1s both;
    -o-animation: pageAniOpacity 1s both;
    animation: pageAniOpacity 1s both;
}
.pageScale img.page1_deng_move{
    -webkit-animation: pageAniMove 1s linear alternate infinite;
    -moz-animation: pageAniMove 1s linear alternate infinite;
    -ms-animation: pageAniMove 1s linear alternate infinite;
    -o-animation: pageAniMove 1s linear alternate infinite;
    animation: pageAniMove 1s linear alternate infinite;
}
.pageScale img.page1_deng1_move{
    -webkit-animation: pageAniMove2 1s -0.1s linear alternate infinite;
    -moz-animation: pageAniMove2 1s -0.1s linear alternate infinite;
    -ms-animation: pageAniMove2 1s -0.1s linear alternate infinite;
    -o-animation: pageAniMove2 1s -0.1s linear alternate infinite;
    animation: pageAniMove2 1s -0.1s linear alternate infinite;
}
.pageScale img.page1_deng2_move{
    -webkit-animation: pageAniMove2 1s -0.3s linear alternate infinite;
    -moz-animation: pageAniMove2 1s -0.3s linear alternate infinite;
    -ms-animation: pageAniMove2 1s -0.3s linear alternate infinite;
    -o-animation: pageAniMove2 1s -0.3s linear alternate infinite;
    animation: pageAniMove2 1s -0.3s linear alternate infinite;
}
.dengBox{filter:alpha(opacity=0);-moz-opacity:0; opacity:0; -webkit-animation: pageAniOpacity 1.5s both; -moz-animation: pageAniOpacity 1.5s both; -ms-animation: pageAniOpacity 1.5s both; -o-animation: pageAniOpacity 1.5s both; animation: pageAniOpacity 1.5s both;}

.page1title{width:100%; height:435px; position: absolute; left: 0; top:40px; z-index: 5;}
.page1title img{transition: all 0.5s;}
.page1title img.pt_1{display: block; width: 100%; position: absolute; left:0; top:0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.page1title img.pt_2{display: block; width: 100%; position: absolute; left:0; top:0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.page1title img.pt_3{display: block; width: 100%; position: absolute; left:0; bottom:0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.page1title img.pt_4{display: block; width: 100%; position: absolute; left:0; top:0; filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
.page1title img.pt_5{display: block; width: 100%; position: absolute; left:0; top:0; filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
.page1title img.pt_big{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.page1title img.pt_opac{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}


@-webkit-keyframes pageAnimate{
    0%{-webkit-transform:scale(4);}
    100%{-webkit-transform:(1);}
}
@-moz-keyframes pageAnimate{
    0%{-moz-transform:scale(4);}
    100%{-moz-transform:(1);}
}
@-ms-keyframes pageAnimate{
    0%{-ms-transform:scale(4);}
    100%{-ms-transform:(1);}
}
@-o-keyframes pageAnimate{
    0%{-o-transform:scale(4);}
    100%{-o-transform:(1);}
}
@keyframes pageAnimate{
    0%{transform:scale(4);}
    100%{transform:(1);}
}

@-webkit-keyframes pageAniOpacity{
    0%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
}
@-moz-keyframes pageAniOpacity{
    0%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
}
@-ms-keyframes pageAniOpacity{
    0%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
}
@-o-keyframes pageAniOpacity{
    0%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
}
@keyframes pageAniOpacity{
    0%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
}

@-webkit-keyframes pageAniMove{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -webkit-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -webkit-transform: translate3d(0,-20px,0);}
}
@-moz-keyframes pageAniMove{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -moz-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -moz-transform: translate3d(0,-20px,0);}
}
@-ms-keyframes pageAniMove{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -ms-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -ms-transform: translate3d(0,-20px,0);}
}
@-o-keyframes pageAniMove{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -o-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -o-transform: translate3d(0,-20px,0);}
}
@keyframes pageAniMove{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; transform: translate3d(0,-20px,0);}
}



@-webkit-keyframes pageAniMove2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -webkit-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -webkit-transform: translate3d(0,-20px,0);}
}
@-moz-keyframes pageAniMove2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -moz-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -moz-transform: translate3d(0,-20px,0);}
}
@-ms-keyframes pageAniMove2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -ms-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -ms-transform: translate3d(0,-20px,0);}
}
@-o-keyframes pageAniMove2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -o-transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; -o-transform: translate3d(0,-20px,0);}
}
@keyframes pageAniMove2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; transform: translate3d(0,0,0);}
    100%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; transform: translate3d(0,-20px,0);}
}

@-webkit-keyframes pageAniOpacity2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
    100%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
}
@-moz-keyframes pageAniOpacity2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
    100%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
}
@-ms-keyframes pageAniOpacity2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
    100%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
}
@-o-keyframes pageAniOpacity2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
    100%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
}
@keyframes pageAniOpacity2{
    0%{filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
    100%{filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
}

.video_move{
    -webkit-animation: pageAniOpacity2 2s both;
    -moz-animation: pageAniOpacity2 2s both;
    -ms-animation: pageAniOpacity2 2s both;
    -o-animation: pageAniOpacity2 2s both;
    animation: pageAniOpacity2 2s both;
}
.yybtnBox{width: 100%; position: absolute; left: 0; bottom: 6%; z-index: 9999; display: none;}
.yybtnBox a{cursor: default;}
.yybtnBox img{display: block; margin: 0 auto; width: 428px;}

.bigVideo{display: none;}


.weixinMask{ background-color:rgba(0,0,0,0.8); width:100%; height:100%; color:#fff; font-size:30px; position:fixed; left:0; top:0; z-index:1000001;display: flex;align-items: center; justify-content: center; display:none;}