html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,input{margin:0;padding:0;border:none;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font-family:arial,sans-serif;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix:after{clear:both;content:"";display:block;height:0;visibility:hidden;}
.clearfix{*zoom:1;}
.hide{display:none;}

.wrapper{font-family:Microsoft Yahei,simhei,arial,sans;margin:auto;position:relative;overflow:hidden;}
a:link, a:visited {text-decoration:none;color:#b5b5b5;}
a:hover { color:#48a0f8;}
img{width:100%;vertical-align:middle;}

.wrap {position: relative;width: 100%;height: 100vh;min-height:calc(100vw * 1700 / 900);overflow:hidden;/* max-width: 750px; */margin: auto;}
.header {position:absolute;top: 1.1rem;left: 1.5rem;z-index: 9;}
.header .logo {width:calc(100vw * 250 / 900);}

.sections {position: absolute;top:0;left: -100%;width:100%;height:auto;}
.sections * { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
.sections.active { left:0; z-index: 2;}

.section1 .num {position:absolute;top: 71.6%;left: 33%;font-size:calc(100vw * 48 / 900);color:#feb840;width: 19.2vw;text-align: center;font-weight: 700;overflow: visible;letter-spacing: 1px;/* transform: rotate(0.6deg); */}
.section1 .btn {position:absolute;top: 77%;left: 23%;width: 52%;height: calc(100vw * 195 / 900);}
.section1 .btn a:link, .section1 .btn a:visited { position:absolute; top:0; left:0; width:100%; height:100%;text-indent: -9999px;overflow: hidden;outline: none;}

.section2 .questions {position:absolute;z-index: 5;}
.section2 .questions.q1 {top: 34.4%;left: 32%;width: calc(100vw * 513 / 900);}
.section2 .questions.q2 {top: 44.8%;left: 9.8%;width: calc(100vw * 584 / 900);}
.section2 .questions.q2.b2 { width: calc(100vw * 619 / 900);}

.section2 .questions.q3 {top: 53.3%;left: 32%;width: calc(100vw * 530 / 900);}
.section2 .questions.q4 {top: 62.9%;left: 10.1%; width: calc(100vw * 669 / 900);}
.section2 .questions span { position:absolute; top:0; left:0; width:100%; display:none;}
.section2 .questions .good, .section2 .questions .bad {opacity:0; filter:Alpha(opacity:0);}
.section2 .questions span.on { display:block;opacity:1; filter:Alpha(opacity:100);}

.section2 .btn {position:absolute;top: 68%;left: 23%;width: calc(100vw * 470 / 900);height: calc(100vw * 249 / 900);/* background: url(../img/btn.png) center bottom no-repeat; */background-size: cover;z-index: 4;}
.section2 .btn a:link, .section2 .btn a:visited {position:absolute;bottom: 3%;left:0;width:100%;height: 70%;text-indent: -9999px;overflow: hidden;outline: none;}
.section2 .btn span { position:absolute; width:100%; bottom:0; left:0;}
.section2 .btn span .b2 { display:none;}
.section2 .btn.disabled .b1 { display:block;}
.section2 .btn.disabled .b2 { display:none;}


.media_mp3 { position:absolute; top:-9999px; left:0; width:1px; height:1px; overflow: hidden;}

.section3 .btn {position:absolute;top: 72%;left: 23%;width: 52%;height: calc(100vw * 195 / 900);}
.section3 .btn a:link, .section3 .btn a:visited { position:absolute; top:0; left:0; width:100%; height:100%;text-indent: -9999px;overflow: hidden;outline: none;}


.section4 {display:none;position:absolute;top: 0;left: 0;width: 100%;height: 100%;background:rgba(0,0,0,1);z-index: 11;}
.section4 .pic {position:absolute;top: 0;left: 0;width: 100%;height: calc(100vw * 1957 / 900);}

@media (orientation: landscape) {
    .wrap {/* overflow-x: hidden; *//* overflow-y: auto; *//* min-height: auto; *//* height: 100%; */}
    .container {/* position:relative; *//* width:100%; *//* height: 100%; */}
}