@charset "UTF-8";
html{height: 100%; overflow: hidden;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}a{color:#000;}a:hover{color:#27afac;text-decoration:none !important;}input,textarea{outline:none;}.hidden{display:none;}#main_box .al{text-align:left;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.clearfix{*zoom:1;}.fl{float:left;}.fr{float:right;}.hide{display:none;}a{text-decoration:none}.show{display:block;}
body{
    font-size: 12px;
    font-family: "Microsoft YaHei";
    height:100%;
    overflow: hidden;
}

.screen_wrap{overflow: hidden;}
.screen_box{transition:all 0.5s linear; -webkit-transition:all 0.5s linear;}
.screen_box>li{overflow: hidden;}
.screen_box img{width:100%;}

.screen{background-size:cover !important; position: relative;}


.light_box{width:100%; height: 100%; position: fixed; left: 0%; top: 0%; background:rgba(0,0,0,.8); z-index: 999999; text-align: center; color: #fff; padding-top: 13.5%; box-sizing:border-box; font-weight: bold; display: none;}
.light_box_close{position: absolute; right: 5px; top: 5px; color:#0397d6; width: 18px; height: 18px; background:url(../images/close.png) no-repeat center center; background-size: 18px 18px; padding: 10px;}

*{-webkit-tap-highlight-color:transparent;}
.screen{position: relative; font-size: 14px;}

.screen1_text1{position: absolute; top: 18%; left: 0; transform:translateY(-300px); -webkit-transform:translateY(-300px);}
.screen1_text2{position: absolute; top: 26%; left: 0; transform:translateX(-300px); -webkit-transform:translateX(-300px);}
#screen1.animate .screen1_text1{transition:all .6s linear; -webkit-transition:all .6s linear; transform:translateY(0px); -webkit-transform:translateY(0px);}
#screen1.animate .screen1_text2{transition:all .6s .8s linear; -webkit-transition:all .6s .8s linear; transform:translateX(0px); -webkit-transform:translateX(0px);}



#screen2 p{position: absolute; opacity: 0;}
.screen2_text1{left: 10%; top: 7%; font-size: 18px; transform:translateX(-80px); -webkit-transform:translateX(-80px);}
.screen2_text2{left: 10%; top: 12%; transform:translateX(80px); -webkit-transform:translateX(80px);}
.screen2_text3{left: 10%; top: 16%; width: 60%; transform:translateX(-80px); -webkit-transform:translateX(-80px);}
.screen2_text4{left: 10%; top: 28%; font-size: 18px; transform:translateX(80px); -webkit-transform:translateX(80px);}
.screen2_text5{left: 10%; top: 33%; transform:translateX(-80px); -webkit-transform:translateX(-80px);}
.screen2_text6{left: 10%; top: 37%; width: 60%; transform:translateX(80px); -webkit-transform:translateX(80px);}

#screen2.animate p{transform:translateX(0px); -webkit-transform:translateX(0px); opacity: 1;}
#screen2.animate .screen2_text1{transition:all 1.2s ease; -webkit-transition:all 1.2s ease;}
#screen2.animate .screen2_text2{transition:all 1.2s .2s ease; -webkit-transition:all 1.2s .2s ease;}
#screen2.animate .screen2_text3{transition:all 1.2s .4s ease; -webkit-transition:all 1.2s .4s ease;}
#screen2.animate .screen2_text4{transition:all 1.2s .6s ease; -webkit-transition:all 1.2s .6s ease;}
#screen2.animate .screen2_text5{transition:all 1.2s .8s ease; -webkit-transition:all 1.2s .8s ease;}
#screen2.animate .screen2_text6{transition:all 1.2s 1s ease; -webkit-transition:all 1.2s 1s ease;}

#screen3 div{background: rgba(255,255,255,.5); width:50%; left: 5%; top: 7%; position: absolute; padding: 10px; opacity: 0; transform:translateX(-200px); -webkit-transform:translateX(-200px);}
#screen3 p{opacity: 0; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform-origin:left bottom; -webkit-transform-origin:left bottom;}
.screen3_text1{font-size: 18px;}
.screen3_text2{padding: 15px 0;}
.screen3_text3{padding-bottom: 20px;}
.screen3_text4{font-size: 18px;}
.screen3_text5{padding: 15px 0;}
#screen3.animate div{opacity: 1; transform:translateX(0); -webkit-transform:translateX(0); transition:all .8s ease; -webkit-transition:all .8s ease;}
#screen3.animate p{transform:rotate(0); -webkit-transform:rotate(0); opacity: 1;}
#screen3.animate .screen3_text1{transition:all 1.2s .6s ease; -webkit-transition:all 1.2s .6s ease;}
#screen3.animate .screen3_text2{transition:all 1.2s .8s ease; -webkit-transition:all 1.2s .8s ease;}
#screen3.animate .screen3_text3{transition:all 1.2s 1s ease; -webkit-transition:all 1.2s 1s ease;}
#screen3.animate .screen3_text4{transition:all 1.2s 1.2s ease; -webkit-transition:all 1.2s 1.2s ease;}
#screen3.animate .screen3_text5{transition:all 1.2s 1.4s ease; -webkit-transition:all 1.2s 1.4s ease;}
#screen3.animate .screen3_text6{transition:all 1.2s 1.6s ease; -webkit-transition:all 1.2s 1.6s ease;}

#screen4 p{color: #000; opacity: 0;}
#screen4 div{background: rgba(255,255,255,.5); width: 60%; left: 5%; bottom: 30%; position: absolute; padding: 10px; opacity: 0;}
.screen4_text1{transform:translateY(300px); -webkit-transform:translateY(300px); font-size: 18px;}
.screen4_text2{transform:translateY(300px); -webkit-transform:translateY(300px);padding-top: 15px;}
.screen4_text3{transform:translateY(300px); -webkit-transform:translateY(300px);padding-bottom: 20px;}
#screen4.animate div{opacity: 1; transition:all 1s ease; -webkit-transition:all 1s ease;}
#screen4.animate p{transform:translateY(0); -webkit-transform:translateY(0); opacity: 1;}
#screen4.animate .screen4_text1{transition:all 1s .6s ease; -webkit-transition:all 1s .6s ease;}
#screen4.animate .screen4_text2{transition:all 1s .8s ease; -webkit-transition:all 1s .8s ease;}
#screen4.animate .screen4_text3{transition:all 1s 1s ease; -webkit-transition:all 1s 1s ease;}


#screen5 div{background: rgba(0,0,0,.5); width:48%; right: 6%; bottom: 23%; position: absolute; padding: 15px 10px; opacity: 0; color: #fff; transform:rotate(1080deg) scale(2.0); -webkit-transform:rotate(1080deg) scale(2.0);}
#screen5 p{opacity: 0; transform:translateY(15px); -webkit-transform:translateY(15px); padding-bottom: 15px;}
#screen5 p:last-child{padding-bottom: 0;}
#screen5.animate div{opacity: 1; transition:all 2s ease; -webkit-transition:all 2s ease; transform:rotate(0deg) scale(1.0); -webkit-transform:rotate(0deg) scale(1.0);}
#screen5.animate p{transform:translateY(0); -webkit-transform:translateY(0); opacity: 1;}
#screen5.animate .screen5_text1{transition:all 1.2s 2.2ease; -webkit-transition:all 1.2s 2.2s ease;}
#screen5.animate .screen5_text2{transition:all 1.2s 2.4s ease; -webkit-transition:all 1.2s 2.4s ease;}
#screen5.animate .screen5_text3{transition:all 1.2s 2.6s ease; -webkit-transition:all 1.2s 2.6s ease;}
#screen5.animate .screen5_text4{transition:all 1.2s 2.8s ease; -webkit-transition:all 1.2s 2.8s ease;}
#screen5.animate .screen5_text5{transition:all 1.2s 3s ease; -webkit-transition:all 1.2s 3s ease;}


#screen6 p{position: absolute; opacity: 0; width: 70%; transform:translateY(10px); -webkit-transform:translateY(10px);}
.screen6_text1{left: 15%; top: 12%;}
.screen6_text2{left: 15%; top: 20%;}

#screen6 div{font-size: 0; padding-bottom: 20px;}
#screen6 span{display: inline-block; width: 20%; font-size: 14px;}
#screen6 input[type="text"],#screen6 input[type="tel"]{width: 80%; height: 30px; line-height: 30px; outline: none; border: none; background: rgba(255,255,255,.5); border-radius: 5px; font-size: 14px; box-sizing:border-box; padding: 0 5px;}
#screen6 form{position: absolute; top: 30%; left: 15%; width: 70%; opacity: 0;}
#screen6 select{display: inline-block; font-size: 14px; height: 30px; line-height: 30px; outline: none;}
#screen6 input[type="submit"]{width:100px; height:30px; display: block; margin:20px auto; border: 1px solid #333; font-size: 14px;}
#screen6.animate p{transform:translateY(0); -webkit-transform:translateY(0); opacity: 1;}
#screen6.animate .screen6_text1{transition:all 1s ease; -webkit-transition:all 1s ease;}
#screen6.animate .screen6_text2{transition:all 1s .2s ease; -webkit-transition:all 1s .2s ease;}
#screen6.animate form{transition:all 1s 1.2s ease; -webkit-transition:all 1s 1.2s ease; opacity: 1;}
.loading{width:100%; height: 100%; background: url(../images/loading.gif) #000 no-repeat center center; position: fixed; left: 0; top: 0; z-index: 999;}
.music{width:28px; height: 28px; position: fixed; right:10px; top: 10px; background: url(../images/music.png) no-repeat 0px 0px; background-size:28px 55px; z-index: 999;}
.off{background: url(../images/music.png) no-repeat 0px -28px; background-size:28px 55px;}
.arrow{
	width:14px; height:24px; background:url(../images/arrow.png) no-repeat center center; position:fixed; left:50%; bottom:0; margin-left:-7px; background-size:cover; transform:rotate(-90deg);
	-webkit-animation-name: "arrow";
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes 'arrow' {
     0% {
        opacity:1;
        -webkit-transform:translateY(0px) rotate(-90deg);
     }
     100% {
        opacity: 0;
        -webkit-transform:translateY(-8px) rotate(-90deg);
     }
}
@media (max-width:330px){
    #screen6 span{width: 26%;}
    #screen6 input[type="text"],#screen6 input[type="tel"]{width: 74%;}
}