@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: .22rem;
    line-height: .34rem;
    color: #ad412e
}

.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
}


@media (min-width:750px) {
    .header {
        left: 50%;
        margin-left: -375px
    }
}

.main {
    margin: 0 0 1.16rem;
    padding-bottom: 1px;
    background: 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;
}

.list-type {
    position: relative;
    display: flex;
    justify-content: space-between;
    text-align: center
}

.list-type .thumbnail {
    width: 1.18rem;
    height: 1.17rem;
    background-color: #fff;
    border-radius: .1rem;
    box-shadow: 0 0 .07rem rgba(174, 174, 174, .29);
    overflow: hidden
}

.list-type .thumbnail .content {
    width: 100%;
    height: 100%;
    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: #bbe5a3;
    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
}

@-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)
    }
}

.btn-box {
    width: 7.5rem;
    position: fixed;
    left: 50%;
    margin-left: -3.75rem;
    z-index: 99;
    bottom: 0;
}

.btn-box button {
    width: 2.4rem;
    height: 0.8rem;
    background: center no-repeat;
    background-size: 2.4rem 0.8rem;
    position: absolute;
    right: 0.2rem;
    top: 50%;
    margin-top: -0.6rem;
    -webkit-animation: myfirst 1s infinite;
    animation: myfirst 1s infinite;
}

@keyframes myfirst {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(0.8);
    }

    75% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.btn-box .webs {
    position: absolute;
    left: 3.6rem;
    color: #fff4ce;
    top: 0.9rem;
    font-size: .32rem;
    line-height: .45rem;
    font-weight: 900;
}

.btn-box .webs .webtxt {
    color: #fff000;
}