/* w3cplus 2014-06-30 */
html { height:100%; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; }
body { margin: 0; font-size: 1.4rem; line-height: 1.5; color: #333333; background-color: #000; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
svg:not(:root) { overflow: hidden; }
a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #0088cc; }
a:active { outline: 0; }
a:active { color: #006699; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; vertical-align: middle; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; resize: vertical; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
html, button, input, select, textarea { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; }
ul, ol, li, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none outside none; }
h1, h2, h3 { line-height: 2; font-weight: normal; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #8c8c8c; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #8c8c8c; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #8c8c8c; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html,body { 
    user-select:none; 
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select:none; 
    touch-callout:none;
    -webkit-touch-callout:none;
    -moz-touch-callout:none;
    -ms-touch-callout:none;
}
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.rotate{-webkit-animation-name:rotate;animation-name:rotate;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
.clearfix { *zoom:1; }

.hidden { display:none!important;}

.slow {
    -webkit-animation-duration: 5s;
    -o-animation-duration: 5s;
    animation-duration: 5s;
}
.abs { position:absolute; }
html,body { height:100%; overflow:hidden; font-family:SimHei,Arial; }
#reload { position:absolute; right:0; top:0; width:100px; height:100px; background:rgba(35,178,216,.2); z-index:999; }
#wrap { position:relative; margin:0 auto; width:640px; height:100%; min-height:832px; }
.page { display:none; position:absolute; width:100%; height:100%; overflow:hidden; z-index:5; }
.page.active { z-index:10; }
.page.tmpActive { z-index:15; }

#music { display:none; position:absolute; right:30px; top:30px; width:60px; height:60px; background:url(../img/music.png) no-repeat; z-index:99; }
#music.on { background-position:0 -60px; }

body { background:#000; }
#status { position:absolute; left:0; top:0; width:150px; height:150px; color:#fff; background:rgba(14,120,166,.2); z-index:999; }
.arrow { position:absolute; left:0; bottom:0; width:100%; height:700px; z-index:40; }
.arrow:after { content:' '; position:absolute; left:50%; bottom:70px; margin-left:-25px; width:49px; height:27px; }
.arrow:before { content:'上滑翻页'; position:absolute; left:0; bottom:35px; width:100%; height:30px; font-size:22px; line-height:30px; color:#fff; text-align:center; opacity:1; }

#loading { display:block; background-color:#000; }
#loading>img { position:absolute; left:0; top:50%; margin-top:-180px; width:100%; opacity:0; }
#loading-num { position:absolute; left:50%; top:50%; margin:-70px 0 0 -160px; width:320px; font-size:20px; color:#fff; text-align:center; z-index:15; }
#loading-num>img { width:100%; }
#swiffycontainer { position:absolute; left:0; top:50%; margin-top:-320px; width:100%; height:640px; }

/* video */
#video { position:absolute; left:-100%; top:0; width:100%; height:100%; background:url(../img/video-bg.jpg); z-index:20; }
#WxMomentVideo {  position:absolute; left:0; top:280px; width:640px; height:480px; }
#skip { position:absolute; left:50%; top:820px; margin-left:-80px; -webkit-transform:scale(.75); }


/* btn-box */
#btn-box { background:url(../img/btn-bg.jpg); }
#btn { position:absolute; left:50%; top:380px; margin-left:-85px; width:170px; height:170px; background:url(../img/btn.png) no-repeat; border-radius:50%; overflow:hidden; }
#btn:after { content:' '; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/btn-light.png) 130px -20px no-repeat; -webkit-transition:all 1.4s; transform:scale(2.4) rotate(-9deg); opacity: 0.6; }
#btn.on:after { background-position:-110px -20px; }
#btn:active { -webkit-transform:translateY(2px); }


/* index */
#index { background:url(../img/idx-bg.jpg); }

#light-box { position:absolute; left:0; top:305px; width:1000px; }
.light-item { position:absolute; opacity:0; }
#li1 { left:411px; top:195px; height:106px; }
#li2 { left:418px; top:190px; height:117px; }
#li3 { left:437px; top:184px; height:127px; }
#li4 { left:456px; top:163px; height:160px; }
#li5 { left:473px; top:150px; height:184px; }
#li6 { left:498px; top:137px; height:210px; }
#li7 { left:531px; top:114px; height:251px; }
#li8 { left:577px; top:81px; height:314px; }

#li9 { left:209px; top:190px; height:113px; }
#li10 { left:197px; top:181px; height:129px; }
#li11 { left:183px; top:171px; height:145px; }
#li12 { left:164px; top:165px; height:160px; }
#li13 { left:142px; top:152px; height:184px; }
#li14 { left:111px; top:137px; height:210px; }
#li15 { left:66px; top:117px; height:251px; }
#li16 { left:1px; top:81px; height:314px; }

.idx-word { position:absolute; left:100px; bottom:200px; width:382px; background:url(../img/idx-word.png) no-repeat; opacity:0; }
#idx-word1 { height:140px; }
#idx-word2 { bottom:60px; height:124px; background-position:0 bottom; }

#idx-car { position:absolute; left:50%; top:401px; margin-left:-228px; -webkit-transform:scale(.18); }
#idx-cross { position:absolute; left:50%; top:-800px; margin-left:-157px; }
#idx-boom { display:none; position:absolute; left:50%; top:200px; margin-left:-320px; }
#idx-cross.curr{-webkit-animation:indexLight .6s ease-in-out;animation:indexLight .6s ease-in-out;-webkit-animation-fill-mode:forwards;}
#idx-car.curr { -webkit-transition:all 2s cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:scale(1.4) translate3d(0,60px,0); }
@-webkit-keyframes indexLight{
    0%{-webkit-transform: translate3d(0,0,0);}
    80%{ -webkit-transform: translate3d(0,780px,0);}
    100%{ -webkit-transform: translate3d(0,720px,0);}
}
#water-wave.curr{-webkit-animation:waterLight 1s ease-in-out;animation:waterLight 1s ease-in-out;-webkit-animation-fill-mode:forwards;}
@-webkit-keyframes waterLight{
    0%{opacity: 1; -webkit-transform:scale(3) translate(120px,-20px,0)}
    100%{opacity:0;-webkit-transform:scale(5) translate(160px,0px,0)}
}
/* water */
#water { background:url(../img/water-bg.jpg) no-repeat; }
#water-bg-b { position:absolute; left:0; top:0; width:100%; }
#water-b1 { position:absolute; left:32px; top:495px; }
#water-b2 { position:absolute; right:0px; top:476px; }
.water-word { position:absolute; left:100px; bottom:205px; width:455px; background:url(../img/water-word.png) no-repeat; opacity:0; }
#water-word1 { height:150px; }
#water-word2 { bottom:60px; height:124px; background-position:0 bottom; }
#water-car { position:absolute; left:87px; top:508px; width:500px; height:268px; }
#water-car.curr { -webkit-transition:all 3s cubic-bezier(0.76, 0.315, 0.76, 0.63); -webkit-transform:scale(3) translate3d(840px,180px,0); -webkit-backface-visibility: hidden; }
#water-car>img { position:absolute; left:0; top:0; -webkit-transition:all .5s; -webkit-backface-visibility:hidden; }
#water-car.curr>img:nth-child(2) { opacity:0; }
#water-wave { position:absolute; /*left:-23px;*/ left: -122px; top:498px; opacity:0; -webkit-transform-origin:80% 70%; -webkit-transform:scale(.01); transition:all linear 1s; -webkit-transition:all linear 1s; }

#water-hand { right:43px; bottom:280px; width:302px; height:61px; z-index:20; display: none; }


/* sunny */
#sunny { background:url(../img/sunny-bg.jpg) left bottom no-repeat; }
#sunny-land { position:absolute; left:0px; bottom:0px; width:100%; height:100%; background:url(../img/sunny-bg1.jpg) left bottom ; -webkit-animation:sunny .1s infinite; }
.sunny-wheel { position:absolute; left:336px; bottom:213px; width:40px; height:40px; background:url(../img/wheel.png) no-repeat; -webkit-animation:rotate1 .2s infinite linear; opacity:.1; }
#sunny-wheel2 { left:562px; bottom:262px; -webkit-animation:rotate2 .2s infinite linear; }
#sunny-wheel3 { left:111px; bottom:300px; -webkit-animation:rotate3 .2s infinite linear; }

.road { position:absolute; left:650px; bottom:105px; width:3px; height:300px; background-color:rgba(255,255,255,.1); -webkit-transform:rotate(69deg) translate3d(0,-85px,0); -webkit-animation:road 2s infinite; }
#sunny-road2 { bottom:75px; -webkit-animation-delay:-.5s; }
#sunny-road3 { bottom:95px; -webkit-animation-delay:-1s; }
#sunny-road4 { bottom:-85px; -webkit-animation-delay:-1.5s; }
#sunny-cloud { position:absolute; left:0; top:0; }
#sunny-cloud img { position:absolute; left:700px; top:150px; -webkit-animation:cloud 20s infinite linear; }
#sunny-cloud img:nth-child(2) { left:1150px; top:300px; }
#sunny-halo { position:absolute; right:-50px; top:0; width:800px; -webkit-transform-origin:100% 0; opacity:.4; -webkit-animation:halo 8s linear infinite; }
.sunny-word { position:absolute; left:100px; top:85px; width:310px; background:url(../img/sunny-word.png) no-repeat; opacity:0;}
#sunny-word1 { height:150px; }
#sunny-word2 { top:260px; height:124px; background-position:0 bottom; }

#flag { position:absolute; left:640px; top:-400px; width:1280px; z-index:22; -webkit-backface-visibility: hidden; }

#sunny-white { position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; z-index:25; opacity:0; }


@media (orientation : landscape){
    /*#hor { display:block; }*/
}



/* keyframes */
@-webkit-keyframes tip{
    0%{ opacity:1; }
    30%{ -webkit-transform:translate3d(0,100px,0); opacity:0; }
    100%{ -webkit-transform:translate3d(0,100px,0); opacity:0; }
}
@-webkit-keyframes bar{
    0% { -webkit-transform:scale(.01); }
    60% { -webkit-transform:scale(1.1); }
    80% { -webkit-transform:scale(.9); }
    100% { -webkit-transform:scale(1); }
}

@-webkit-keyframes sunny{
    0% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes rotate1{
    to { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes rotate2{
    from { -webkit-transform:scale(.8) rotate(0); }
    to { -webkit-transform:scale(.8) rotate(360deg); }
}
@-webkit-keyframes rotate3{
    from { -webkit-transform:scale(.7) rotate(0); }
    to { -webkit-transform:scale(.7) rotate(360deg); }
}

@-webkit-keyframes road{
    0% { -webkit-transform:rotate(69deg) translate3d(0,-85px,0) }
    50% { -webkit-transform:rotate(69deg) translate3d(0,1100px,0) }
    100% { -webkit-transform:rotate(69deg) translate3d(0,1100px,0) }
}
@-webkit-keyframes halo{
    0% { -webkit-transform:rotate(0) translate3d(0,0,0); }
    50% { -webkit-transform:rotate(10deg) translate3d(100px,-100px,0); }
    100% { -webkit-transform:rotate(0) translate3d(0,0,0); }
}
@-webkit-keyframes cloud {
    to { -webkit-transform:translate3d(-1500px,-100px,0); }
}




/**/
/*s4*/
.s4-1{width: 100%; height: 100%; background: url("../img/s4-1.jpg") no-repeat 0px bottom; position: absolute; z-index: 1; left: 0; top:0; background-size:1500px 1136px;}
.s4-2{width: 100%; height: 347px; background: url("../img/s4-2.jpg") no-repeat 0px bottom; position: absolute; z-index: 2; left: 0; bottom:0;}
.s4-3{position: absolute; z-index:2;width: 431px; height: 152px; background: url("../img/icon.png") no-repeat; left: 52px; top:52px;opacity: 0 }
.s4-4{position: absolute; z-index:2;width: 431px; height: 128px; background: url("../img/icon.png") 0px bottom no-repeat; left: 52px; top:220px;opacity: 0 }

.s4-7{width: 575px; height: 204px; position: absolute; z-index: 2; background: url("../img/s4-5.png") no-repeat; left: 0; bottom: 248px; -webkit-transform:translate3d(-600px,0,0); }
.s4-7-1{position: absolute; z-index: 3; width: 66px; height: 66px; background: url("../img/s4-7.png") no-repeat center; left: 96px;top:121px; background-size: 96%;}
.s4-7-2{position: absolute; z-index: 3; width: 66px; height: 66px; background: url("../img/s4-7.png") no-repeat center; left: 416px;top:121px; background-size: 96%;}
.s4-8{width: 100%; height: 100%; position: absolute; z-index: 4; left: 0; top:0; background: #fff; opacity: 0;}
.s4-8.curr{-webkit-animation:backgoundColor 2s ease-in-out;animation:backgoundColor 2s ease-in-out;-webkit-animation-fill-mode:forwards;}
.carpage .s4-1{-webkit-animation:backgoundImg 7s linear infinite;animation:backgoundImg 7s linear infinite;}
.carpage .s4-2{-webkit-animation:backgoundImg .5s linear infinite;animation:backgoundImg .5s linear infinite;}
.carpage .s4-7-1,.carpage .s4-7-2{-webkit-animation:carRound .1s linear infinite;animation:carRound .1s linear infinite;}
.carpage .s4-3{-webkit-animation:otitle .6s ease-in;animation:otitle .6s ease-in;-webkit-animation-fill-mode:forwards;}
.carpage .s4-4{-webkit-animation:otitle .6s ease-in;animation:otitle .6s ease-in;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.2s;}
.carpage .s4-5{-webkit-animation:otitle .6s ease-in;animation:otitle .6s ease-in;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.3s;}
.carpage .s4-6{-webkit-animation:otitle .6s ease-in;animation:otitle .6s ease-in;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.3s;}
@-webkit-keyframes backgoundImg{
    from{background-position: 0px bottom;}
    to{background-position: 100% bottom;}
}
@-webkit-keyframes carRound{
    from{-webkit-transform:rotate(0deg)}
    to{-webkit-transform:rotate(720deg)}
}
@-webkit-keyframes otitle{
    from{-webkit-transform:translateX(50px); opacity: 0;}
    to{-webkit-transform:translateX(0);opacity: 1;}
}
@-webkit-keyframes backgoundColor{
    from{opacity: 1}
    to{opacity: 0}
}

/*s5*/
#s5 { -webkit-backface-visibility: hidden; }
.s5-2{width: 100%; height: 100%; background: url("../img/s5-1.jpg") no-repeat -200px -330px; position: absolute; z-index: 1; left: 0; top:0;}
.s5-1{position: absolute; z-index:2;width: 320px; height: 530px; background: url("../img/s5-1.png") no-repeat; left: 200px; bottom:0px;opacity: 1; -webkit-transform:translate3d(-130px,800px,0); overflow:hidden; -webkit-backface-visibility:hidden; }
.s5-1:after { content:' '; position:absolute; left:50px; top:0; width:237px; height:237px; background:url(../img/halo.png); -webkit-backface-visibility:hidden; }
.s5-3{position: absolute; z-index:2;width: 188px; height: 300%; background:url("../img/s5-4.png") repeat-y; left: 224px; bottom:-100px;opacity: 1; transform:rotate(10deg); -webkit-transform:rotate(10deg);}

.s5-4{position: absolute; width: 640px; height: 3200px; right: 0; bottom:1200px; background: url("../img/s5-3.png") no-repeat; background-size: 100%; z-index: 3; }
.s5-4.on { -webkit-animation:leaf 2s 2;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:1s;}
.s5-4-1 { position:absolute; left:0; bottom:1040px; width:640px; height:360px; background:url(../img/s5-3.png) right bottom no-repeat; background-size:100%; -webkit-transition:all 2s 1s; z-index:15; }
.s5-4-2 { position:absolute; left:0; bottom:1040px; width:640px; height:600px; background:url(../img/s5-3.png) 0 0 no-repeat; -webkit-transition:all 2s 2s; z-index:15; background-size:100%; }
.leaf.on { -webkit-transform:translateY(1700px); -webkit-backface-visibility: hidden; }

.carpage .s5-1:after { -webkit-animation:carHalo 1s infinite; }
.carpage .s5-3{-webkit-animation:backgoundImg2 .2s linear infinite;animation:backgoundImg2 .2s linear infinite;-webkit-animation-fill-mode:forwards;/*-webkit-animation-delay:.2s;*/}
.carpage .s5-2{-webkit-animation:backgoundImg3 .1s linear infinite;animation:backgoundImg3 .1s linear infinite;-webkit-animation-fill-mode:forwards;/*-webkit-animation-delay:.2s;*/}

#white-box { position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; opacity:1; z-index:10; }
@-webkit-keyframes carHalo{
    0% { -webkit-transform:translate3d(0,0,0); opacity:0; }
    25% { -webkit-transform:translate3d(-10px,100px,0); opacity:1; }
    50% { -webkit-transform:translate3d(-30px,200px,0); opacity:0; }
    100% { -webkit-transform:translate3d(-30px,200px,0); opacity:0; }
}
@-webkit-keyframes backgoundImg2{
    from{background-position: 0 0;}
    to{background-position: 0px 495px;}
}
@-webkit-keyframes backgoundImg3{
    from{background-position: -200px -330px;}
    to{background-position:-200px -350px;}
}
@-webkit-keyframes leaf{
    0%{ -webkit-transform: translateY(0); }
    50%{-webkit-transform: translateY(4400px); }
    100%{-webkit-transform: translateY(4400px); }
}

/*s6*/
#s6{width: 100%; height: 100%; background: #000;}
.s6-1{width: 100%; height: 100%; background: url("../img/s6-1.jpg") no-repeat #000  left bottom; position: absolute; z-index: 3; left: 0; top:0;-webkit-transition: all 1.2s linear 2s;}
.s6-2{position: absolute; z-index:4;width: 403px; height: 160px; background: url("../img/s6-word.png") 0 0 no-repeat; left: 52px; top:52px;opacity: 0; }
.s6-3{position: absolute; z-index:4;width: 403px; height: 85px; background: url("../img/s6-word.png") 0px bottom no-repeat; left: 52px; top:220px;opacity: 0; }
/*.s6-4{position: absolute; z-index:4;width: 203px; height: 12px; background: url("../img/icon.png") 0px -182px no-repeat; left: 52px; top:224px;opacity: 0; }*/
.s6-7{width: 100%; height: 100%; background: url("../img/s6-5.jpg") no-repeat #000  left bottom; position: absolute; z-index: 1; left: 0; top:0;}
/*.s6-14{width: 100%; height:726px; position: absolute; z-index: 2; left: 0; bottom: 0; background: url("../img/s6-3.jpg") no-repeat; opacity: 0; }*/
.carpage .s6-1{opacity: 0}
/*.carpage .s6-7{-webkit-animation:s6Car 1.6s linear;animation:s6Car 1.6s linear;-webkit-animation-fill-mode:forwards;}*/
.carpage .s6-5{-webkit-animation:s6Car 2s linear;animation:s6Car 2s linear;-webkit-animation-fill-mode:forwards;}
.carpage .s6-6{-webkit-animation:s6Car 1s linear;animation:s6Car 1s linear;-webkit-animation-fill-mode:forwards;}
/*.carpage .s6-14{-webkit-animation:s6Car 1s linear;animation:s6Car 1s linear;-webkit-animation-fill-mode:forwards;}*/
.carpage .s6-2{-webkit-animation:otitle .6s ease-in;animation:otitle .6s ease-in;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.2s;}
.carpage .s6-3{-webkit-animation:otitle .6s ease-in;animation:otitle .6s ease-in;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.3s;}
.carpage .s6-4{-webkit-animation:otitle .6s ease-in;animation:otitle .6s ease-in;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.4s;}
#s6-box { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; -webkit-transition:all .5s linear 1s; }
.carpage #s6-box { opacity:1; }
@-webkit-keyframes s6Car{
    from{opacity: 0;}
    to{opacity: 1;}
}
.s6-yy{width: 245px; height: 67px; position: absolute; z-index: 4; left: 202px; bottom: 96px;}
.s6-8{width:7px; height: 36px; position: absolute; z-index: 4; left: 0; bottom: 7px; background: url("../img/s6-6.png") no-repeat 0px -24px;opacity: 0; }
.s6-9{width:7px; position: absolute; z-index: 4; left: 0px; bottom: 43px; background: url("../img/s6-6.png") no-repeat 0px 0px;height: 0px; }
.s6-10{height: 7px; position: absolute; z-index: 4; left: 9px; bottom: 60px; background: url("../img/s6-6.png") no-repeat 0px 0px; width: 0px;}
.s6-11{width:7px; height: 0px; position: absolute; z-index: 4; right: 0px; top: 0px; background: url("../img/s6-6.png") no-repeat -228px 0px; }
.s6-12{width:0px; height: 7px; position: absolute; z-index: 4; right: 7px; bottom: 0; background: url("../img/s6-6.png") no-repeat 0px -60px; }
.s6-13{width:198px; height:36px; position: absolute; z-index: 4; left: 22px; bottom: 20px; background: url("../img/s6-6.png") no-repeat -18px -10px; overflow: hidden; opacity: 0; }
.s6-yy-curr .s6-13{-webkit-animation:s6Car .4s linear;animation:s6Car .4s linear;-webkit-animation-fill-mode:forwards;}
.s6-yy-curr .s6-8{-webkit-animation:s6Car .4s linear;animation:s6Car .4s linear;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.4s;}
.s6-yy-curr .s6-9{-webkit-animation:lineH .4s linear;animation:lineH .4s linear;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:.8s;}
.s6-yy-curr .s6-11{-webkit-animation:lineH1 .4s linear;animation:lineH1 .4s linear;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:1.6s;}
.s6-yy-curr .s6-10{-webkit-animation:lineW .4s linear;animation:lineW .4s linear;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:1.2s;}
.s6-yy-curr .s6-12{-webkit-animation:lineW1 .4s linear;animation:lineW1 .4s linear;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:2s;}
@-webkit-keyframes lineH{
    from{height: 0px;}
    to{height: 24px;}
}
@keyframes lineH{
    from{height: 0px;}
    to{height: 24px;}
}
@-webkit-keyframes lineW{
    from{width: 0px;}
    to{width: 228px;}
}
@keyframes lineW{
    from{width: 0px;}
    to{width: 228px;}
}
@-webkit-keyframes lineH1{
    from{height: 0px;}
    to{height: 67px;}
}
@keyframes lineH1{
    from{height: 0px;}
    to{height: 67px;}
}
@-webkit-keyframes lineW1{
    from{width: 0px;}
    to{width: 238px;}
}
@keyframes lineW1{
    from{width: 0px;}
    to{width: 238px;}
}

/*form*/
#form{width:100%; height: 100%;; background: #000; overflow: hidden;}
.f1-2{padding-top: 40px; position: relative; background: #000;}
#form-top { display:block; margin:60px auto 0; }
#form-list-btn { position:absolute; left:50%; top:390px; margin-left:-105px; width:200px; height:80px; }
#form-list { margin:0 auto; width:543px; height:0; background:url(../img/f1.png) 0 20px no-repeat; -webkit-transition:all 1s; }
#form-list.on { height:600px; }
#formBox{ position: relative;}
#formBox1{ position: absolute; left:111px;top:122px;}
#formMain{ position: absolute; left:100px;top:50px; background:url("../img/formMain.png") no-repeat; width: 440px; height: 448px;}
select{outline:0; background:transparent; font-size: 20px; border:0; -webkit-appearance:none; -webkit-box-sizing:border-box;  color: #8c8c8c; height: 26px; line-height: 26px;}
#appellation{ position: absolute; left: 80px;top:22px; color: #8c8c8c;  width: 300px;}
#username{ position: absolute; font-size: 20px; left: 80px;top:91px; outline: none; background: none; border: 0;  color: #8c8c8c; width: 341px; height: 40px; line-height: 40px;}
#mobile{ position: absolute; left: 80px;top:172px; font-size: 20px;outline: none; background: none; border: 0;  color: #8c8c8c; width: 341px; height: 40px; line-height: 40px;}
#car{ position: absolute; left: 80px;top:257px; font-size: 20px; color: #8c8c8c;  width: 346px;}
#statement{ position: absolute; left:9px;top:266px;}
#FormBtn{ position: absolute; top:318px;left:151px; width: 136px;height: 61px;}
#law { position:absolute; left:160px; top:262px; width:190px; height:20px; z-index:20; }
#form-close { display:none; position:absolute; right:40px; top:40px; width:60px; height:60px; background:url(../img/form-close.png) center no-repeat; z-index:21; }
#form-tip { position:absolute; left:380px; top:436px; width:21px; height:10px; background:url(../img/form-tip.png) no-repeat; -webkit-transition:all .5s; }
#form-list.on+#form-tip { -webkit-transform:rotate(180deg);}
#qr-btn { position:absolute; left:50%; top:400px; margin-left:-100px; width:200px; height:60px; }
#form-bar.typing { -webkit-transform:translate3d(0,-240px,0); }
#form-bar.deeptyping { -webkit-transform:translate3d(0,-840px,0); }
/* succ */
#succ { background:url(../img/succ.png) center 150px no-repeat,url(../img/share-tip.png) 543px 20px no-repeat,url(../img/qr-box.jpg) center no-repeat rgba(0,0,0,.9); z-index:22; }

/* qr-box */
#qr-box { background:url(../img/qr-box.jpg) rgba(0,0,0,.9) center no-repeat; z-index:22; }
#qr-close,
#succ-close { position:absolute; left:50%; top:50%; margin:-210px 0 0 130px; width:80px; height:80px; background:url(../img/qr-close.png) 45px 15px no-repeat; z-index:26;  }
.qr { position:absolute; left:50%; top:50%; margin:-550px 0 0 -501px; width:1010px; height:1010px; z-index:25; padding:450px; }


@media(max-height: 1007px){
    #video { background-position:0 -40px; }
    #WxMomentVideo { top:220px; }
    #skip { top:730px; }
}