@charset "utf-8";

/* base */

body,ol,ul,h1,h2,h3,h4,h5,h6,p,div,th,td,dl,dd,form,fieldset,legend,input,textarea,select{ margin:0px; padding:0px; box-sizing: content-box;}
body{font:14px/20px "Helvetica Neue", Helvetica, STHeiTi, sans-serif, arial;-webkit-text-size-adjust:100%; 
background:#009a3d;
color:#000;max-width:640px;margin: 0 auto;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
  margin:0px; padding:0px; box-sizing: content-box;
}
h1,h2,h3,h4,h5,h6,i,samp,strong,span,a,li{font-size:normal; font-weight:normal;}
address,cite,code,em,th,i{font-weight:normal; font-style: normal;} 
a{color:#2d374b;text-decoration:none;}
a:hover{text-decoration:none;}
li{list-style:none}
img{border:0;vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word;}
textarea{resize:none;}
fieldset {border: none;}
label,a,button,input,textarea{
	font:14px/22px Microsoft YaHei,helvetica,arial;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	border:none;
	outline:none;
	-webkit-appearance: none;
    -webkit-box-sizing: content-box;
}
/**/

.bg{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:url(../images/bg2.jpg) no-repeat top center;
	background-size: 100%;
	overflow:hidden;
	}
.bg1{
	background:url(../images/bg1.jpg) no-repeat top center;
	background-size: 100%;
	}	
.bg3{
	background:url(../images/bg3.jpg) no-repeat top center;
	background-size: 100%;
	}
.bg4{
	background:url(../images/bg4.jpg) no-repeat top center;
	background-size: 100%;
	}
.bg5{
	background:url(../images/bg5.jpg) no-repeat top center;
	background-size: 100%;
	}
.bg6{
	background:url(../images/bg6.jpg) no-repeat top center;
	background-size: 100%;
	}
.bg7{
	background:url(../images/bg7.jpg) no-repeat top center;
	background-size: 100%;
	}
.apply{
	background:url(../images/bg8.jpg) no-repeat top center;
	background-size: 100%;
	display:none;
	z-index:10;
	}		
.img-wrap{
	position:relative;
	}	
.img-wrap2{
	background:url(../images/img2-0.gif) no-repeat top center;
	background-size: 100% auto;
	}		
.img-wrap img{
	width:100%;
	}
.img{
	position:absolute;
	top:0;
	left:0;
	}
.figure{
	position: absolute;
	top:22%;
	width:100%;
	height:293px;	
	}		
.figure img{
	position:absolute;
	top:0;
	left:0;
	width:auto;
	height:100%;
	transform-origin: 50% 100% 0px;
	-webkit-animation-name:figure;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-fill-mode:both; 
	}
.figure img.img2-2{
	left:70%;
	/*-webkit-animation:figure 2s .2s linear both infinite;*/
	-webkit-animation-delay: .2s;
	}
.figure img.img2-3{
	left:51%;
	-webkit-animation-delay: .4;
	}
.figure img.img2-4{
	left:33%;
	-webkit-animation-delay: .6s;
	}
.figure img.img2-5{
	left:8%;
	-webkit-animation-delay: .8s;
	}
.figure img.img2-6{
	left:3%;
	-webkit-animation-delay: 1s;
	}
.img2-1,.img2-1-1{
	top:auto;
	bottom:4%;
	}
/*bottle*/
.bottle{
	width:290px;
	height:290px;
	position: absolute;
	bottom:4%;
	left:50%;
	margin-left:-145px;
	background:url(../images/img1-2-1.png) no-repeat top center;
	background-size: 100%;
	}
.img-wrap img.bottle-cap{
	margin:83px 0 0 8px;
	width:100px;
}
.img1-0,.img4-7{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	}		
.bottle-cap-animation{
	-webkit-animation:bottle-cap .8s .2s ease-out both;
	}
.cap-click{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:10;
	}
.cap-click img{
	width:100%;
	}
/*bg7*/
.img7-2-animation{
	transform-origin: 50% 100% 0px;
	-webkit-animation:figure .8s .2s linear both infinite;	
	}
.apply-btn{
	position:absolute;
	bottom:22%;
	left:0;
	}
.video-wrap{
	position:absolute;
	top:30%;
	left:20%;
	width:60%;
	overflow:hidden;
	}
#video{
	position: absolute;
	top:0;
	left:0%;
	background:url(../images/img8-4.png) no-repeat center center #000;
	background-size:100%;
	width:100%;
	height:100%;
	}					
/*img-wrap3*/
.img3-2-animation{
	-webkit-animation:img3top .8s .2s ease-out both;
	}
.img5-5top-animation{
	-webkit-animation:img5-5top 60s .2s ease-out both;
	}	
.img5-4-animation{
	-webkit-animation:img5-4-Flash .8s .2s linear both infinite;
	}	
.img5-1-animation{
	-webkit-animation:img5-1top .8s .2s ease-out both;
	}
.img7-bottle-animation{
	-webkit-animation:img7-bottle .5s .2s ease-out both;
	}		
.img6-3-animation{
	-webkit-animation:img6-3top .8s .2s ease-out both infinite;
	}	
.img3-2-animation-infinite{
	-webkit-animation:img3topinfinite .8s .2s linear both infinite;
	}
.img3-3{
	position:absolute;
    top:62%;
	left:0;
	}
.img6-4{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	}		
.bounceInLeft img{
	-webkit-animation-name:opacity;
	-webkit-animation-duration:1.2s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode:both;
	-webkit-animation-delay: .2s;
	/*-webkit-animation-iteration-count: infinite; */
	/*-webkit-animation:bounceInLeft .8s .2s ease-out both;*/
	}
.bounceInLeft img:nth-child(2){
	-webkit-animation-delay: 1.2s;
}
.bounceInLeft img:nth-child(3){
	-webkit-animation-delay: 2.2s;
}
.bounceInLeft img:nth-child(4){
	-webkit-animation-delay: 3.2s;
}
.bounceInLeft img:nth-child(5){
	-webkit-animation-delay: 4.2s;
}
.img-wrap4-animation .img4-2{
	-webkit-animation:bounceInLeft .8s .2s ease-out both;
	}
.img-wrap4-animation .img4-3{
	-webkit-animation:bounceInRight .8s .6s ease-out both;
	}
.img-wrap4-animation .img4-4{
	-webkit-animation:bounceInLeft .8s 1s ease-out both;
	}
.img-wrap4-animation .img4-5{
	-webkit-animation:bounceInRight .8s 1.4s ease-out both;
	}			
.bounceInRight{
	-webkit-animation:bounceInRight .8s 1.8s ease-out both;
	}
.opacity{
	-webkit-animation:opacity 1.2s .2s ease both;
	}	
.next{
	-webkit-animation:next 1.2s .2s linear both infinite;
	}
.next-2{
	-webkit-animation:next 1.6s .2s linear both infinite;
	}		
.img3-2,.img-wrap3 img,.img2-1,.img-wrap4 img,.img5-1,.img5-3,.img1-5,.img7-bottle,.img7-2-2,.img7-0,.img7-1,.img2-1-1,.img1-5 img,.img5-2 img{
	opacity:0;
	}
.tada{
-webkit-animation:tada 1s .2s ease both;
}
.img5-2{
	background:url(../images/img5-2.png) no-repeat top center;
	background-size:100%;
	}
.banner1 img{
	width:100%;
	-webkit-animation-name:opacity;
	-webkit-animation-duration: 3.5s;
	-webkit-animation-timing-function:ease;
	-webkit-animation-fill-mode:both;
	/*-webkit-animation-iteration-count: infinite; */	
	/*-webkit-animation:blur 3s .2s ease both infinite;*/
	}
.banner1 img:nth-child(1){
	-webkit-animation-delay:.8s;
	}
.banner1 img:nth-child(2){
	-webkit-animation-delay:1.6s;
	}
.banner1 img:nth-child(3){
	-webkit-animation-delay:2.2s;
	}
.banner1 img:nth-child(4){
	-webkit-animation-delay:3s;
	}
.banner1 img:nth-child(5){
	-webkit-animation-delay:3.8s;
	}
.banner1 img:nth-child(6){
	-webkit-animation-delay:4.6s;
	}
.banner1 img:nth-child(7){
	-webkit-animation-delay:5.4s;
	}
.banner1 img:nth-child(8){
	-webkit-animation-delay:6.2s;
	}		
.banner{
	background:url(../images/img1-5-3.png) no-repeat top center;
	background-size:100%;
	}
.banner img{
	width:100%;
	-webkit-animation-name:opacity;
	-webkit-animation-duration: 3.5s;
	-webkit-animation-timing-function:ease;
	-webkit-animation-fill-mode:both;
	/*-webkit-animation-iteration-count: infinite; */	
	/*-webkit-animation:blur 3s .2s ease both infinite;*/
	}
.banner img:nth-child(1){
	-webkit-animation-delay:.4s;
	}
.banner img:nth-child(2){
	-webkit-animation-delay:.8s;
	}
.banner img:nth-child(3){
	-webkit-animation-delay:1.2s;
	}
@-webkit-keyframes blur {
	0%{
		/*-webkit-filter: blur(10px);
		filter: blur(10px);	*/	
		opacity:0;
	}
	45% {
		/*-webkit-filter: blur(0px);
		filter: blur(0px);*/
		opacity:1;
	}
	55% {
		/*-webkit-filter: blur(0px);
		filter: blur(0px);*/
		opacity:1;
	}
	100%{
		/*-webkit-filter: blur(10px);
		filter: blur(10px);*/
		opacity:0;
	}	
}
@keyframes blur {
	0%{
		/*-webkit-filter: blur(10px);
		filter: blur(10px);	*/	
		opacity:0;
	}
	45% {
		/*-webkit-filter: blur(0px);
		filter: blur(0px);*/
		opacity:1;
	}
	55% {
		/*-webkit-filter: blur(0px);
		filter: blur(0px);*/
		opacity:1;
	}
	100%{
		/*-webkit-filter: blur(10px);
		filter: blur(10px);*/
		opacity:0;
	}	
} 	
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0)}
}												
@-webkit-keyframes figure{
	0%{
		transform: rotate(0deg);
		}
	25%{
		transform: rotate(-3deg);
		}
	50%{
		transform: rotate(0deg);
		}
	75%{
		transform: rotate(3deg);
		}		
	100%{
		transform: rotate(0deg);
		}		
	}	
@-webkit-keyframes bottle-cap{
	0%{
		transform: rotate(0deg);
		}			
	100%{
		transform: rotate(-125deg);
		}		
	}	
@-webkit-keyframes opacity{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
	}
@-webkit-keyframes img3top{
	0%{
		transform: translateX(200px) translateY(226px);
		opacity:0;
	}
	100%{
		transform: translateX(0) translateY(0);
		opacity:1;
	}
	}
@-webkit-keyframes img6-3top{
	0%{
		transform: translateX(0) translateY(0);
		opacity:1;
	}
	50%{
		transform: translateX(4px) translateY(-4px);
		opacity:1;
	}
	100%{
		transform: translateX(0) translateY(0);
		opacity:1;
	}
	}	
@-webkit-keyframes img5-1top{
	0%{
		transform: translateY(226px);
		opacity:0;
	}
	100%{
		transform: translateY(0);
		opacity:1;
	}
	}
@-webkit-keyframes img5-5top{
	0%{
		transform: translateY(0);
		opacity:1;
	}
	100%{
		transform: translateY(1000px);
		opacity:0;
	}
	}	
@-webkit-keyframes img7-bottle{
	0%{
		transform: translateY(80px);
		opacity:0;
	}
	100%{
		transform: translateY(0);
		opacity:1;
	}
	}	
@-webkit-keyframes img5-4-Flash{
	0%{
		-webkit-transform:scale(0.98);
		opacity:0;
	}
	50%{
		-webkit-transform:scale(1);
		opacity:1;
	}
	100%{
		-webkit-transform:scale(0.98);
		opacity:0;
	}
	}	
@-webkit-keyframes next{
	0%{
		transform: translateY(5px);
	}
	50%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(5px);
	}
	}
			
@-webkit-keyframes img3topinfinite{
	0%{
		transform: translateX(0px) translateY(0px);
		opacity:1;
	}
	50%{
		transform: translateX(4px) translateY(4px);
	}
	100%{
		transform: translateX(0) translateY(0);
		opacity:1;
	}
	}
@-webkit-keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
		opacity: 1;
    }
}
@-webkit-keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
		opacity: 1;
    }
}						
.container{
	background:url(../mythimages/bg.jpg) no-repeat center top #eeebd8;
	background-size:100%;
	width:100%;
	overflow:hidden;
	}
/*音乐*/
@-webkit-keyframes ani-music {
	0% {
		-webkit-transform: translate(0,0);
		opacity: 0
	}

	30% {
		-webkit-transform: translate(-20px,-20px);
		opacity: 1
	}

	100% {
		-webkit-transform: translate(-30px,-30px);
		opacity: 0
	}
}

@-moz-keyframes ani-arrow {
	0% {
		-moz-transform: translate(0,0);
		opacity: 0
	}

	30% {
		-moz-transform: translate(-20px,-20px);
		opacity: 1
	}

	100% {
		-moz-transform: translate(-30px,-30px);
		opacity: 0
	}
}

@keyframes ani-music {
	0% {
		transform: translate(0,0);
		opacity: 0
	}

	30% {
		transform: translate(-20px,-20px);
		opacity: 1
	}

	100% {
		transform: translate(-30px,-30px);
		opacity: 0
	}
}

.music{
	background-image: url(../images/icon_music_off.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	position: absolute;
	right:6%;
	top:3%;
	z-index: 999
}
.music-play{
	background-image: url(../images/icon_music_on.png);
}
.music-play .music1,.music-play .music2,.music-play .music3,.music-play s {
	display: block
}

.music-play s {
	width: 16px;
	height: 16px;
	position: absolute;
	background: url(../images/icon_music.png)no-repeat;
	background-size: 100% 100%;
	-webkit-animation: ani-music 2s ease-out infinite;
	animation: ani-music 2s ease-out infinite;
	opacity: 0
}

.music-play .music1 s,.music-play .music2 s {
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s
}

.audio,.audio2,.audio3,.map,.map1,.map2,.map3,.video,.video1,.video2,.video3 {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 48px;
	width: 48px
}

.music-play .music1,.music-play .music2,.music-play .music3 {
	position: relative
}

.close-mask,.copyright,.video-mask {
	position: absolute
}

.music-play .music1 {
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-o-transform: rotate(0)
}

.music-play .music2 {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg)
}

.music-play .music3 {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg)
}

.music-play .music1 s {
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-duration: 2s;
	-o-animation-delay: .3s
}

.music-play .music2 s {
	-webkit-animation-delay: .9s;
	-moz-animation-delay: .9s;
	-o-animation-duration: 2s;
	-o-animation-delay: .9s
}

.music-play .music3 s {
	-webkit-animation-duration: 2s;
	-webkit-animation-delay: 1.9s;
	-moz-animation-duration: 2s;
	-moz-animation-delay: 1.9s;
	-o-animation-duration: 2s;
	-o-animation-delay: 1.9s
}