@charset "utf-8";body{max-width: 750px; margin: 0 auto; font-size: .3rem; color: #5f5f5f}.fl{float: left}.fr{float: right}.clearfix:after,.row:after,dl:after,ol:after,ul:after{content: "\200B"; display: block; height: 0; clear: both}.hidden{display: none}.text-center{text-align: center}.text-right{text-align: right}.container{padding-left: .35rem; padding-right: .35rem}.img-response{display: block; width: 100%}.title-first{text-align: center}.title-first img{display: block; margin: 0 auto}.title-section{margin-bottom: .2rem; text-align: center}.title-section h3{position: relative; display: inline-block; padding: 0 .18rem; font-size: .42rem; line-height: .34rem; color: rgb(129, 0, 208);}.title-section h3::after,.title-section h3::before{content: ''; display: block; position: absolute; top: .16rem; width: 6px; height: 1px; background-color: #ad412e}.title-section h3::before{left: 0}.title-section h3::after{right: 0}.header{position: fixed; top: 0; left: 0; z-index: 100; width: 100%; max-width: 750px; padding: .15rem .35rem; font-size: 0; line-height: 0; /* background: url(../images/bg_header.png) repeat-y; background-size: 100% auto */ background: linear-gradient(#e66465, #9127c9);}.header .logo{height: .86rem}.header .logo img{height: 100%}.header .btn{position: absolute; top: .31rem; right: .35rem; height: .54rem; -webkit-animation: breathe 1s infinite linear; animation: breathe 1s infinite linear}.header .btn img{height: 100%}.header.bottom{top: auto; bottom: 0}@media (min-width:750px){.header{left: 50%; margin-left: -375px}}.main{margin: 0 0 1.16rem; padding-bottom: 1px; background: url(../images/bg_main.png) no-repeat center top/100% 100%}.type-container{margin: .2rem 0 .3rem; padding: 0 .5rem}.type-container>.content{position: relative; padding-bottom: .58rem}.type-container>.content::before{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: .58rem; background: url(../images/type_title.png) no-repeat center/cover}.list-type{position: relative; display: flex; justify-content: space-between; text-align: center}.list-type .thumbnail{width: 1.18rem; height: 1.7rem; background-color: #fff; border-radius: .1rem; box-shadow: 0 0 .07rem rgba(174, 174, 174, .29); overflow: hidden}.list-type .thumbnail .content{width: 1.18rem; height: 1.7rem; background-repeat: no-repeat; background-size: cover}.list-live{padding: 0 .18rem}.list-live li{position: relative; float: left; width: 48%; height: 2.6rem; margin-left: 4%; margin-bottom: .2rem; background-color: white; border-radius: .1rem; overflow: hidden}.list-live li:nth-child(odd){margin-left: 0}.list-live li.block{width: 100%; height: 2.75rem}.list-live .avatar,.list-live .thumbnail{width: 100%; height: 100%}.list-live .thumbnail{background-repeat: no-repeat; background-size: cover; background-position: center top; min-height: 4.8rem}@-webkit-keyframes breathe{from{transform: scale(.85)} 50%{transform: scale(1)} to{transform: scale(.85)}}@keyframes breathe{from{transform: scale(.85)} 50%{transform: scale(1)} to{transform: scale(.85)}}@-webkit-keyframes twinkling{0%{opacity: .5; transform: scale(1)} 100%{opacity: 1; transform: scale(.8)}}@keyframes twinkling{0%{opacity: .5; transform: scale(1)} 100%{opacity: 1; transform: scale(.8)}}.videobox video{width: 100%; height: 100%; position: relative; z-index: 10; background: #000 url(../images/loading.gif) no-repeat center center; object-fit: fill;} .online{width:.20rem;height:.20rem;background:rgb(207, 47, 19);border-radius:50%;opacity: 1;} .topText{color: white; font-size: 20px; align-self: center;} #Foo{color: rgb(204, 24, 11); font-size: 12px;} #Foo1{color: rgb(204, 24, 11); font-size: 12px;} #Foo2{color: rgb(204, 24, 11); font-size: 12px;} #Foo3{color: rgb(204, 24, 11); font-size: 12px;} #Foo4{color: rgb(204, 24, 11); font-size: 12px;} #Foo5{color: rgb(204, 24, 11); text-align: center; font-size: 18px;} .wrapper{position: relative} .wrapper .content{position: relative; z-index: 100;} .wrapper div{position: absolute; display: block; z-index: 150; /* left: 10px; top: 5px; */}