body { background-color: #F6B3B3; color: #fff; font: 15px/ 1.5 '微软雅黑'; margin:0px; } body>a { display: none } #container { width: 480px; margin: auto; } .page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 480px; margin: auto; } .hide { display: none } #loading { display: block; font-size: 30px; text-align: center; color: #fff } #loading .loading-txt { height: 100px; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 60px; margin: auto } .boyaa_logo { height: 50px; width: 110px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 10px; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); box-shadow: 1px 1px 3px rgba(0, 0, 0, .5) } .boyaa_logo img { max-width: 100%; border-radius: 10px; display: block } .copyright { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 16px } #index h1 { text-align: center; font-size: 30px; padding: 30px 0; text-shadow: 1px 1px 1px #AB3C3C } .btns { text-align: center; position: absolute; bottom: 10px; height: 140px; width: 100%; color: #ddd } .btns .btn2{ height:60px; margin:auto; width:50%; } #room header { position: absolute; top: 0; left: 0; width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #B82828; } #room header .lv { position: absolute; width: 80px; height: 50px; left: 10px; top: 0 } #room header .lv em { font-style: normal } #room header .btn-pause { position: absolute; top: 5px; right: 10px; height: 40px; width: 60px; line-height: 40px; padding: 0; margin: 0; color: #fff } #room header .time { font-size: 20px; font-weight: 700; background-color: #FD9090; color: #FFCACA; padding: 0 10px; border-radius: 10px } #room header .time.danger { color: #FF0505; background-color: #fff } #help { height: 30px; font-size: 16px; color: #FFA1A1; text-align: center } #box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: #ddd; border-radius: 10px; padding: 10px } #boxguess { position: absolute; top: 0; right: 0; bottom: 30%; left: 0; margin: auto; background-color: #BEA6A6; border-radius: 10px; padding: 10px } #boxlist { position: absolute; bottom: 5%; left: 0px; margin: 2%; background-color: #ddd; border-radius: 10px; } .boxguesstext { display: block; float: left; border-radius: 10px; cursor: pointer; border: 5px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 95px; text-align: center; width: 100%; } #boxlist .boxitem { position: relative; display: block; float: left; border-radius: 10px; cursor: pointer; border: 5px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 33%; height: 100%; display: inline-block; font-size: 80px; text-align: center; display: block; } .boxitem img { font-size: 0px; margin; 0 px; padding 0px; } .boxitem p { position: absolute; left: 40%; bottom: 0px; margin: auto; font-size: 10px; color: black; } #boxguess span { width: 100%; height: 100% } #box.lv3 span { width: 33.33%; height: 33.33% } #box.lv4 span { width: 25%; height: 25% } #box.lv5 span { width: 20%; height: 20%; border-width: 3px } #box.lv6 span { width: 16.666%; height: 16.666%; border-width: 3px } #box.lv7 span { width: 14.28%; height: 14.28%; border-width: 3px } #box.lv8 span { width: 12.5%; height: 12.5%; border-width: 3px } #box.lv9 span { width: 11.111%; height: 11.111%; border-width: 3px } #box span img { width: 100% } #dialog .inner { height: 100%; width: 100%; text-align: center; font-size: 20px } #result { position: absolute; top: 40px; width: 90%; margin: auto; text-align: left; left: 20px; color: rgb(184, 117, 117); font-size: 18px; } #dialog .inner .content { padding-top: 30px } #dialog .inner h3 { line-height: 60px; font-size: 40px; margin: 0; color: #321 } #dialog .inner .pause h3 { color: #FFE2C5 } #dialog .inner .btn { margin: 15px auto } #dialog .inner p { margin: 0 } #dialog .inner-content { height: 270px; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto } .btn { border: none; color: inherit; cursor: pointer; display: inline-block; margin: 10px 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: 0; position: relative; background: #FCAD26; border-radius: 7px; box-shadow: 0 5px #DA9622; font-size: 20px; font-family: '微软雅黑'; height: 50px; width: 220px; line-height: 50px; -webkit-tap-highlight-color: transparent } .btn.btn-bottom { position: absolute; width: 300px; padding: 0; bottom: 20px; left: 50%; margin-left: -150px } .boyaa-logo { display: block; height: 50px; width: 100px; margin: 0 auto; -webkit-tap-highlight-color: transparent } .boyaa-logo img { max-width: 100% } .banner { display: none; width: 640px; background-color: #123; max-width: 100%; position: absolute; bottom: 0; left: 0; display: none } .banner img { display: block; max-width: 100% } @media all and (orientation:landscape) { #room header { height: 100%; width: 80px } #room header .lv { left: 0 } #room header .time { display: inline-block; height: 50px; width: 100%; padding: 0; position: absolute; top: 50%; left: 0; margin-top: -25px } #room header .btn-pause { top: auto; bottom: 15px } #box { top: 0; left: 80px } #dialog { padding-top: 0; //padding-left: 80px } #dialog .inner .content { padding-top: 100px } } @media all and (max-width:361px) { #box.lv1 span,#box.lv2 span,#box.lv3 span,#box.lv4 span { border-width: 2px; border-radius: 5px } #box.lv5 span,#box.lv6 span,#box.lv7 span,#box.lv8 span,#box.lv9 span { border-width: 1px; border-radius: 3px } } .btn-boyaa { text-decoration: none } .btn-boyaa img { height: 30px; width: 30px; vertical-align: middle; margin-left: 10px }