html,body{width:100%; height:100%; margin:0; padding:0; overflow:hidden; font-size:14px; background-color:#fff; font-family:Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;}
@media only screen and (max-height:479px){
	body{font-size:12px;}
}
/* portrait */
@media screen and (orientation:portrait) {
	.lock_wrp{display:none!important;}
}
/* landscape */
@media screen and (orientation:landscape) {
	.wrapper{display:none!important;}
}

@keyframes yizi {0% {transform : rotateY(180deg);} 100% {transform: rotateY(0deg);}}
@-webkit-keyframes yizi {0% {-webkit-transform : rotateY(180deg);} 100% {-webkit-transform: rotateY(0deg);}}
@-moz-keyframes yizi {0% {-moz-transform : rotateY(180deg);} 100% {-moz-transform: rotateY(0deg);}}
@-o-keyframes yizi {0% {-o-transform : rotateY(180deg);} 100% {-o-transform: rotateY(0deg);}}
@-ms-keyframes yizi {0% {-ms-transform : rotateY(180deg);} 100% {-ms-transform: rotateY(0deg);}}

@-webkit-keyframes home_breathe{0%{-webkit-transform:scale(1,1); opacity:.1;}80%{-webkit-transform:scale(1.8,1.8); opacity:0}100%{-webkit-transform:scale(1.8,1.8); opacity:0}}
@-moz-keyframes home_breathe{0%{-moz-transform:scale(1,1); opacity:.1;}80%{-moz-transform:scale(1.8,1.8); opacity:0}}
@-o-keyframes home_breathe{0%{-o-transform:scale(1,1); opacity:.1;}80%{-o-transform:scale(1.8,1.8); opacity:0}}
@-ms-keyframes home_breathe{0%{-ms-transform:scale(1,1); opacity:.1;}80%{-ms-transform:scale(1.8,1.8); opacity:0}}
@keyframes home_breathe{0%{transform:scale(1,1); opacity:.1;}80%{transform:scale(1.8,1.8); opacity:0}}
@-webkit-keyframes logo_breathe{0%{opacity:1; -webkit-transform:scale(.6,.6);}60%{opacity:.7; -webkit-transform:scale(1.2,1.2);}80%{opacity:.8; -webkit-transform:scale(.7,.7);}100%{opacity:1; -webkit-transform:scale(1,1);}}
@-moz-keyframes logo_breathe{0%{opacity:1; -moz-transform:scale(.6,.6);}60%{opacity:.7; -moz-transform:scale(1.2,1.2);}80%{opacity:.8; -moz-transform:scale(.7,.7);}100%{opacity:1; -moz-transform:scale(1,1);}}
@-o-keyframes logo_breathe{0%{opacity:1; -o-transform:scale(.6,.6);}60%{opacity:.7; -o-transform:scale(1.2,1.2);}80%{opacity:.8; -o-transform:scale(.7,.7);}100%{opacity:1; -o-transform:scale(1,1);}}
@-ms-keyframes logo_breathe{0%{opacity:1; -ms-transform:scale(.6,.6);}60%{opacity:.7; -ms-transform:scale(1.2,1.2);}80%{opacity:.8; -ms-transform:scale(.7,.7);}100%{opacity:1; -ms-transform:scale(1,1);}}
@keyframes logo_breathe{0%{opacity:1; transform:scale(.6,.6);}60%{opacity:.7; transform:scale(1.2,1.2);}80%{opacity:.8; transform:scale(.7,.7);}100%{opacity:1; transform:scale(1,1);}}
@-webkit-keyframes start{0%{opacity:0; -webkit-transform:translate(0,10px);}50%{opacity:1; -webkit-transform:translate(0,-5px);}100%{opacity:0; -webkit-transform:translate(0,-15px);}}
@-moz-keyframes start{0%{opacity:0; -moz-transform:translate(0,10px);}50%{opacity:1; -moz-transform:translate(0,-5px);}100%{opacity:0; -moz-transform:translate(0,-15px);}}
@-o-keyframes start{0%{opacity:0; -o-transform:translate(0,10px);}50%{opacity:1; -o-transform:translate(0,-5px);}100%{opacity:0; -o-transform:translate(0,-15px);}}
@-ms-keyframes start{0%{opacity:0; -ms-transform:translate(0,10px);}50%{opacity:1; -ms-transform:translate(0,-5px);}100%{opacity:0; -ms-transform:translate(0,-15px);}}
@keyframes start{0%{opacity:0; transform:translate(0,10px);}50%{opacity:1; transform:translate(0,-5px);}100%{opacity:0; transform:translate(0,-15px);}}
/*paipop����*/
@-webkit-keyframes heartbeat{0%{-webkit-transform:scale(0,0); opacity:0;}25%{-webkit-transform:scale(1.3,1.3); opacity:1;}50%{-webkit-transform:scale(.9,.9);}75%{-webkit-transform:scale(1.2,1.2);}100%{-webkit-transform:scale(1,1);}}
@-moz-keyframes heartbeat{0%{-moz-transform:scale(0,0); opacity:0;}25%{-moz-transform:scale(1.3,1.3); opacity:1;}50%{-moz-transform:scale(.9,.9);}75%{-moz-transform:scale(1.2,1.2);}100%{-moz-transform:scale(1,1);}}
@-o-keyframes heartbeat{0%{-o-transform:scale(0,0); opacity:0;}25%{-o-transform:scale(1.3,1.3); opacity:1;}50%{-o-transform:scale(.9,.9);}75%{-o-transform:scale(1.2,1.2);}100%{-o-transform:scale(1,1);}}
@-ms-keyframes heartbeat{0%{-ms-transform:scale(0,0); opacity:0;}25%{-ms-transform:scale(1.3,1.3); opacity:1;}50%{-ms-transform:scale(.9,.9);}75%{-ms-transform:scale(1.2,1.2);}100%{-ms-transform:scale(1,1);}}
@keyframes heartbeat{0%{transform:scale(0,0); opacity:0;}25%{transform:scale(1.3,1.3); opacity:1;}50%{transform:scale(.9,.9);}75%{transform:scale(1.2,1.2);}100%{transform:scale(1,1);}}
@-webkit-keyframes feeling_out{0%{-webkit-transform:translate(100%,0); opacity:.3;}90%{-webkit-transform:translate(-3%,0); opacity:.5;}100%{-webkit-transform:translate(0,0); opacity:1;}}
@-moz-keyframes feeling_out{0%{-moz-transform:translate(100%,0); opacity:.3;}90%{-moz-transform:translate(-3%,0); opacity:.5;}100%{-moz-transform:translate(0,0); opacity:1;}}
@-o-keyframes feeling_out{0%{-o-transform:translate(100%,0); opacity:.3;}90%{-o-transform:translate(-3%,0); opacity:.5;}100%{-o-transform:translate(0,0); opacity:1;}}
@-ms-keyframes feeling_out{0%{-ms-transform:translate(100%,0); opacity:.3;}90%{-ms-transform:translate(-3%,0); opacity:.5;}100%{-ms-transform:translate(0,0); opacity:1;}}
@keyframes feeling_out{0%{transform:translate(100%,0); opacity:.3;}90%{transform:translate(-3%,0); opacity:.5;}100%{transform:translate(0,0); opacity:1;}}
@-webkit-keyframes feeling_down{0%{-webkit-transform:translate(0,-450px) rotate(30deg); opacity:0;}25%{-webkit-transform:translate(0,-450px) rotate(30deg); opacity:0;}50%{-webkit-transform:translate(0,0) rotate(30deg); opacity:1;}55%{-webkit-transform:translate(0,0) rotate(-28deg);}60%{-webkit-transform:translate(0,0) rotate(25deg);}65%{-webkit-transform:translate(0,0) rotate(-22deg);}70%{-webkit-transform:translate(0,0) rotate(20deg);}75%{-webkit-transform:translate(0,0) rotate(-18deg);}80%{-webkit-transform:translate(0,0) rotate(16deg);}85%{-webkit-transform:translate(0,0) rotate(-14deg);}90%{-webkit-transform:translate(0,0) rotate(10deg);}95%{-webkit-transform:translate(0,0) rotate(-6deg);}100%{-webkit-transform:translate(0,0) rotate(0deg);}}
@-moz-keyframes feeling_down{0%{-moz-transform:translate(0,-450px) rotate(30deg); opacity:0;}25%{-moz-transform:translate(0,-450px) rotate(30deg); opacity:0;}50%{-moz-transform:translate(0,0) rotate(30deg); opacity:1;}55%{-moz-transform:rotate(-28deg);}60%{-moz-transform:rotate(25deg);}65%{-moz-transform:rotate(-22deg);}70%{-moz-transform:rotate(20deg);}75%{-moz-transform:rotate(-18deg);}80%{-moz-transform:rotate(16deg);}85%{-moz-transform:rotate(-14deg);}90%{-moz-transform:rotate(10deg);}95%{-moz-transform:rotate(-6deg);}100%{-moz-transform:translate(0,0) rotate(0deg);}}
@-o-keyframes feeling_down{0%{-o-transform:translate(0,-450px) rotate(30deg); opacity:0;}25%{-o-transform:translate(0,-450px) rotate(30deg); opacity:0;}50%{-o-transform:translate(0,0) rotate(30deg); opacity:1;}55%{-o-transform:rotate(-28deg);}60%{-o-transform:rotate(25deg);}65%{-o-transform:rotate(-22deg);}70%{-o-transform:rotate(20deg);}75%{-o-transform:rotate(-18deg);}80%{-o-transform:rotate(16deg);}85%{-o-transform:rotate(-14deg);}90%{-o-transform:rotate(10deg);}95%{-o-transform:rotate(-6deg);}100%{-o-transform:translate(0,0) rotate(0deg);}}
@-ms-keyframes feeling_down{0%{-ms-transform:translate(0,-450px) rotate(30deg); opacity:0;}25%{-ms-transform:translate(0,-450px) rotate(30deg); opacity:0;}50%{-ms-transform:translate(0,0) rotate(30deg); opacity:1;}55%{-ms-transform:rotate(-28deg);}60%{-ms-transform:rotate(25deg);}65%{-ms-transform:rotate(-22deg);}70%{-ms-transform:rotate(20deg);}75%{-ms-transform:rotate(-18deg);}80%{-ms-transform:rotate(16deg);}85%{-ms-transform:rotate(-14deg);}90%{-ms-transform:rotate(10deg);}95%{-ms-transform:rotate(-6deg);}100%{-ms-transform:translate(0,0) rotate(0deg);}}
@keyframes feeling_down{0%{transform:translate(0,-450px) rotate(30deg); opacity:0;}25%{transform:translate(0,-450px) rotate(30deg); opacity:0;}50%{transform:translate(0,0) rotate(30deg); opacity:1;}55%{transform:rotate(-28deg);}60%{transform:rotate(25deg);}65%{transform:rotate(-22deg);}70%{transform:rotate(20deg);}75%{transform:rotate(-18deg);}80%{transform:rotate(16deg);}85%{transform:rotate(-14deg);}90%{transform:rotate(10deg);}95%{transform:rotate(-6deg);}100%{transform:translate(0,0) rotate(0deg);}}
@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@-moz-keyframes loading{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
@-o-keyframes loading{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@-ms-keyframes loading{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}
@keyframes loading{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@-webkit-keyframes iphone{0%{-webkit-transform:rotate(-90deg);}25%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(0deg);}75%{-webkit-transform:rotate(-90deg);}100%{-webkit-transform:rotate(-90deg);}}
@-moz-keyframes iphone{0%{-moz-transform:rotate(-90deg);}25%{-moz-transform:rotate(0deg);}50%{-moz-transform:rotate(0deg);}75%{-moz-transform:rotate(-90deg);}100%{-moz-transform:rotate(-90deg);}}
@-o-keyframes iphone{0%{-o-transform:rotate(-90deg);}25%{-o-transform:rotate(0deg);}50%{-o-transform:rotate(0deg);}75%{-o-transform:rotate(-90deg);}100%{-o-transform:rotate(-90deg);}}
@-ms-keyframes iphone{0%{-ms-transform:rotate(-90deg);}25%{-ms-transform:rotate(0deg);}50%{-ms-transform:rotate(0deg);}75%{-ms-transform:rotate(-90deg);}100%{-ms-transform:rotate(-90deg);}}
@keyframes iphone{0%{transform:rotate(-90deg);}25%{transform:rotate(0deg);}50%{transform:rotate(0deg);}75%{transform:rotate(-90deg);}100%{transform:rotate(-90deg);}}



.loading_bg{position:absolute; width:100%; height:100%; overflow:hidden; background-color:#fff; left:0; top:0; -webkit-transform-style:preserve-3d;}
.loading_wrp{position:absolute; width:100px; height:150px; overflow:hidden; left:50%; top:40%; margin:-50px 0 0 -50px;}
.loading_wrp b{font-weight:normal; position:absolute; display:block; width:100%; font-size:32px; line-height:40px; bottom:0px; color:#000; text-align:center;}
.loading{position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; overflow:hidden; clip:rect(0 30px 60px 0); -webkit-animation:loading 1.2s linear infinite; -moz-animation:loading 1.2s linear infinite; -o-animation:loading 1.2s linear infinite; -ms-animation:loading 1.2s linear infinite; animation:loading 1.2s linear infinite;}
.loading_bar{position:absolute; left:0; top:0; width:60px; height:60px; border-radius:50px; overflow:hidden; background:#fff; background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,1)),to(rgba(255,255,255,0))); background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0)); background:-ms-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0));}
.loading_bar::before{content:''; position:absolute; width:54px; height:54px; overflow:hidden; border-radius:27px; background-color:#008c23; left:3px; top:3px;}	

.lock_wrp{position:absolute; display:none; width:100%; height:100%; overflow:hidden; left:0; top:0; background-color:#000000; color:rgba(255,255,255,.8); z-index:9999;}
.lock{position:absolute; left:50%; top:50%; width:250px; height:150px; margin:-75px 0 0 -125px; text-align:center;}
.lock i{position:relative; display:block; width:74px; height:110px; background:url(../images/iphone.png) 0 0 no-repeat; background-size:100%; margin:0 auto; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); -webkit-animation:iphone 1.6s ease-in infinite; -moz-animation:iphone 1.6s ease-in infinite; -o-animation:iphone 1.6s ease-in infinite; -ms-animation:iphone 1.6s ease-in infinite; animation:iphone 1.6s ease-in infinite;}

.up{position:absolute; display:block; width:20px; height:10px; overflow:hidden; background:url(../images/petals.png?v=20140527) 0 -72px; background-size:70px auto; left:50%; bottom:50px; margin:0 0 0 -10px; -webkit-animation:start 1.5s infinite ease-in-out; -moz-animation:start 1.5s infinite ease-in-out; -o-animation:start 1.5s infinite ease-in-out; -ms-animation:start 1.5s infinite ease-in-out; animation:start 1.5s infinite ease-in-out;}
.keep{-webkit-transition:-webkit-transform .4s linear; -moz-transition:-moz-transform .4s linear; -o-transition:-o-transform .4s linear; -ms-transition:-ms-transform .4s linear; transition:transform .4s linear;}
.h_keep{-webkit-transition:-webkit-transform .2s linear; -moz-transition:-moz-transform .2s linear; -o-transition:-o-transform .2s linear; -ms-transition:-ms-transform .2s linear; transition:transform .2s linear;}
.restore{-webkit-transition:top .2s linear; -moz-transition:top .2s linear; -o-transition:top .2s linear; -ms-transition:top .2s linear; transition:top .2s linear;}
.h_wrp{position:relative; width:100%; height:100%; display:none;}
.wrapper{position:relative; width:100%; height:100%; display:none; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden;-webkit-transform-style:preserve-3d; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
.wrapper .pop{position:relative; left:0; top:0; margin:0 0 15px 0; width:150px; height:40px; background-color:#202d0e; color:#a2c371; font-size:14px; line-height:16px; text-align:center; display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center; display:-moz-box; -moz-box-align:center; -moz-box-pack:center; display:-o-box; -o-box-align:center; -o-box-pack:center; display:-ms-flexbox; -ms-flex-align:center; -ms-flex-pack:center; display:box; box-align:center; box-pack:center; -webkit-transition:all .5s ease-in; -moz-transition:all .5s ease-in; -o-transition:all .5s ease-in; -ms-transition:all .5s ease-in;}
.wrapper .pop::after{content:''; display:block; width:0; height:0; border:10px solid transparent; border-left:10px solid #202d0e; position:absolute; left:0; bottom:-10px;}
.wrapper .sec7 .pop::after{border-left:10px solid #ffffff;}
.wrapper .pop i{font-style:normal; font-size:12px;}
.wrapper section{position:relative; width:100%; height:100%; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden;}
.wrapper section h1{display:none;}
.wrapper .sec0{ position: absolute; top: 0; left: 0; z-index: 1; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; transition: opacity 2s ease-in; background: #09F url(../images/01.png) no-repeat center center; background-size: cover; }
.wrapper .sec1{ background: #66C url(../images/01.png) no-repeat center center; background-size: cover; text-align: center; }
.wrapper .sec2{ background: #F63 url(../images/02.png) no-repeat center center; background-size: 60% auto; }
.wrapper .sec3{ background: #FC3 url(../images/03.png) no-repeat center center; background-size: 60% auto; }
.wrapper .sec4{ background: #FFC url(../images/04.png) no-repeat center center; background-size: 60% auto; }