@charset "utf-8";
body { height:100%; font-size:100%; font-family:Microsoft Yahei, STHeiti, Droid Sans Fallback, Sans-serif; font-weight:normal; margin:0; padding:0; background:url(../images/bg_body.jpg) repeat;position:relative;}
h1,h2,h3,h4,h5 {margin:0;font-weight:normal;}
div,p,img,ul,ol,li,dl,dt,dd,table,th,td, form {margin:0; padding:0;}
img {border:0; vertical-align:top;}
ul li{list-style:none;}
a{text-decoration:none;}
a:hover {text-decoration:none;}
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear{clear:both; font-size:0; height:0; line-height:0; overflow:hidden;}

.wrapper {width:100%; max-width:480px; background:url(../images/map.png) center center no-repeat; background-size:90% auto; margin:0 auto;}
.page1 {width:100%; height:100%; background:url(../images/bg_cloud.png) right bottom no-repeat; background-size:40% auto;}
.page1 .fans{ height:130px; text-align:left;}
.page1 .fans img{width:160px;}
.page1 .cont {width:100%; margin-top:-30px;}
.page1 .font {width:280px; height:140px; margin:0 auto 25px; line-height:30px; font-size:1em; color:#323a47; text-align:center; white-space:nowrap;}
.page1 .font li span{ padding:1px 12px; border:1px solid #323a47; border-radius:15px;}
.page1 .text { width:280px; margin:0 auto; }
.page1 .t01 {font-size:1.6em; line-height:1.6em; text-align:center; margin-top:10px;}
.page1 .t02 { font-size:1em; line-height:24px; color:#243e59; margin:5px auto 10px;}
.page1 .btn {width:132px; height:42px;line-height:42px; background:url(../images/btn01.png) center center no-repeat; background-size:100% auto; margin:15px auto 0; font-size:1.5em; color:#fff; text-align:center; border-radius:5px; text-indent:-9999px;}
.page1 .goback {width:132px; height:42px;line-height:42px; margin:20px auto 0; text-align:center;}
.page1 .goback img{width:100%;}


.page2 { width:100%; height:100%;}
.page2 .pepole {width:240px; height:170px; padding-top:30px; margin:0 auto;}
.page2 .pepole img{ box-shadow:2px 2px 3px #666;}
.page2 .time {height:30px; line-height:30px; margin:5px 0; font-size:1em; color:#323a47; text-align:center;}
.page2 .time span { padding-right:5px; font-size:1.75em;color:#323a47;}
.page2 .flist {width:270px; padding: 0 0 0 20px; margin:0 auto;}
.page2 .flist li {width:110px; height:41px; line-height:40px; background:url(../images/bg_btn_red.png) center center no-repeat; background-size:100% auto; font-size:22px; font-family:Microsoft Yahei; color:#bd4e40; font-weight:bold; text-align:center; margin:8px 10px; white-space:nowrap; border-radius:5px;float:left;}
.page2 .flist li.cor {background:url(../images/bg_btn_blue.png) center center no-repeat; background-size:100% auto;color:#323a47;}
.page2 .flist li.err { color:#bd4e40;}
.page3 { width:100%; height:100%;}
.page3 .cont {width:100%;}
.page3 .lose .pic {width:200px; height:48px; line-height:50px; margin:0 auto; font-size:56px; color:#bd4e40; text-align:center;}
.page3 .win .pic {width:200px; height:48px; line-height:50px; margin:0 auto; font-size:56px; color:#bd4e40; text-align:center;}
.page3 .text { width:230px; line-height:24px; padding-bottom:6px; font-size:1em; color:#323a47; text-align:center; border-bottom:1px dashed #323a47; margin:0 auto;}
.page3 .text span { padding:0 5px; font-size:1.75em; color:#323a47;}
.page3 .txt {color:#323a47; font-size:1em; line-height:22px; margin-top:8px;}
.page3 .textWrap{width:240px; height:90px; padding:6px 15px; color:#323a47; border-top:3px solid #bd4e40; background:url(../images/bg_exam_result.png) repeat; margin:0 auto 15px;}
.page3 .down, .page2 .down{ padding:10px 15px; height:40px; line-height:20px; background:#323a47; font-size:0.875em; color:#e1c892; position:relative;}
.page3 .down .qr_code, .page2 .down .qr_code{ width:40px; height:40px; position:absolute; top:10px; right:15px;}
.page3 #text_pic{ padding-top:15px;}
.page3 .bcot {width:100%; margin-top:15px; font-size:1.125em;color:#fff;text-align:center;}
.page3 .bcot .btn01 {width:100px; height:37px; line-height:36px; display:inline-block; background:url(../images/btn02.png) center center no-repeat; background-size:100% auto; margin:0 10px; text-indent:-9999px;}
.page3 .bcot .btn02 {width:100px; height:37px; line-height:36px; display:inline-block; background:url(../images/btn03.png) center center no-repeat; background-size:100% auto; margin:0 10px; text-indent:-9999px;}
.page3 .exam02{width:280px; height:34px; margin:20px auto 15px;}
.page3 .exam02 img{ height:100%;}
.page3 .exam03{width:280px; height:33px; margin:0 auto;}
.page3 .exam03 img{ height:100%;}
.page3 .exam04{width:280px; height:34px; margin:15px auto;}
.page3 .exam04 img{ height:100%;}
.share{width:100%; height:100%; background:#000; -webkit-opacity:0.7; opacity:0.7; position:fixed; left:0; top:0; z-index:5; text-align:right;}
.share img{ width:65%; margin:10px 5px 0 0;}
.btn_play{ width:26px; height:26px; background:url(../images/play.png) no-repeat; background-size:100% 100%; position:absolute; top:16px; right:16px; z-index:2; display:none;}
.btn_play.pause{background:url(../images/pause.png) no-repeat; background-size:100% 100%;}
.logo{width:100%; height:16px; line-height:16px; text-align:center; position:absolute; bottom:40px; left:0;}
.logo img{height:100%;}
.footer{width:100%; height:16px; line-height:16px; font-size:0.875em; color:#323a47; text-align:center; white-space:nowrap; position:absolute; bottom:15px; left:0;}
#loading{width:100%; height:100%; background:#000; opacity:0.5; text-align:center; position:fixed; top:0; left:0; z-index:1000;}

@media screen and (max-height:480px){
.page1 .fans{ height:110px;}
.page1 .fans img{width:140px;}
.page1 .cont{ margin-top:-40px;}
.page1 .font { width:250px; height:135px; margin:0 auto; font-size:0.875em;}
.page1 .text{width:250px;}
.page1 .t02{font-size:0.875em;}
.page1 .btn{ width:100px; height:32px; margin:10px auto 0;}
.page1 .goback{ width:100px; height:32px; margin:15px auto 0;}
.page2 .down{display:none;}
.page2 .flist{width:240px;}
.page2 .flist li {width:90px; height:34px; line-height:32px; font-size:18px; margin:6px 8px;}
.page3 #text_pic{ padding-top:0;}
.page3 .lose .pic, .page3 .win .pic { height:40px; font-size:40px;}
.page3 .textWrap{ height:75px; margin:0 auto;}
.page3 .bcot{ margin-top:10px;}
.page3 .bcot .btn01 {width:90px; height:33px;}
.page3 .bcot .btn02 {width:90px; height:33px;}
.page3 .text { line-height:18px; font-size:0.875em;}
.page3 .txt { line-height:18px; font-size:0.875em;}
.page3 .exam02{ height:31px; margin:10px auto;}
.page3 .exam03 { height:29px;}
.page3 .exam04 { height:31px; margin:10px auto;}
}