.banner{
    height: 7.2rem;

    position: relative;
    background-image: url(/static/image/banner.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.banner .container{
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding-bottom: 1.86rem;
}
.banner .title{
    width: 5.34rem;
    height: 2.34rem;
}

.block{
    padding: .6rem 0;
}
.block-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.h3{
    line-height: .77rem;
    font-weight: bold;
    font-size: .48rem;
}
.btn-more{
    line-height: .38rem;
    font-size: .2rem;
    border-bottom: 1px solid #333;
}
.btn-more.white{
    color: #fff;
    border-bottom-color: #fff;
}

.days{
    display: flex;
    align-items: flex-end;
    margin-right: -.53rem;
    padding-bottom: .18rem;
}
.days .text{
    line-height: .38rem;
    font-size: .24rem;
    font-weight: bold;
    color: #fff;
}
.days .days-box{
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 .2rem;

    background: linear-gradient( 180deg, #EDEDED 0%, #FFFFFF 33%, #FFFFFF 66%, #EDEDED 100%);
    box-shadow: inset 0 0 .1rem 0 rgba(0,0,0,0.1), inset 0 .03rem 0 0 #FFFFFF, inset 0 -.02rem 0 0 rgba(255,255,255,0.5), 0 .1rem .05rem 0 rgba(0,0,0,0.5);
    border-radius: .16rem;
    position: relative;
}
@font-face {
  font-family: Oswald;
  src: url(/static/css/Oswald-SemiBold.ttf);
}
.days .days-box .number{
    position: absolute;
    top: .13rem;

    line-height: 1;
    font-family: Oswald;
    font-size: 1.4rem;
    font-weight: 600;
    color: #555b68;
}
.days .days-box .number-reduce{
    position: absolute;
    top: .3rem;

    line-height: 1;
    font-family: Oswald;
    font-size: 1rem;
    font-weight: 600;
    color: #555b68;
}
.days .days-box img{
    position: relative;
}


.introduce{
    background-image: url(/static/image/bg-logo.png);
    background-size: 10.2rem auto;
    background-position: center 3.4rem;
    background-repeat: no-repeat;
}
.introduce .stat{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.introduce .stat .item{
    width: 1.6rem;
    height: 100%;
}
.introduce .stat .number{
    line-height: .6rem;
    font-family: Oswald;
    font-size: .6rem;
    font-weight: 600;
}
.introduce .stat .text{
    line-height: .3rem;
    font-size: .16rem;
}

.about{
    display: flex;
    align-items: center;
}
.about .logo{
    width: 3.6rem;
    height: 3.05rem;
}
.about .text{
    width: 5.4rem;
    line-height: .3rem;
    font-size: .16rem;
    font-weight: normal;
    white-space: pre-line;
}
.language-en .about .text{
    width: 5.8rem;
}


.leaders{
    display: flex;
}
.leaders .item{
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.leaders .item + .item{
    margin-left: .4rem;
}
.leaders .item .avatar{
    width: 2.4rem;
    height: 3rem;
    margin-right: .2rem;
}
.leaders .item .name{
    line-height: .38rem;
    font-size: .2rem;
    font-weight: 600;
}
.leaders .item .desc{
    line-height: .3rem;
    font-size: .16rem;
}

.welcome .content{
    white-space: pre-line;
    line-height: .3rem;
    font-size: .16rem;
}

.why{
    background-color: #C0454E;
}
.why .group{
    display: flex;
    justify-content: space-between;

    position: relative;
}
.why .group .pic{
    flex: 0 0 2.4rem;
    width: 2.4rem;
    height: 3.6rem;
}
.why .group .btn-more{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: .6rem;
}

.theme{
    background-image: url(/static/image/bg-logo-l.png);
    background-size: 4.8rem auto;
    background-position: left .5rem;
    background-repeat: no-repeat;
}
.theme .pic{
    max-width: none;
    width: 10.6rem;
}

.guest{
    background-color: #F09A00;
}
.guest .group{
    display: grid;
    grid-template-columns: repeat(4, 2rem);
    row-gap: .4rem;
    column-gap: .73rem;

    text-align: center;
    color: #fff;
}
.guest .group .pic{
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    overflow: hidden;
}
.guest .group .name{
    line-height: .38rem;
    font-weight: bold;
    font-size: .2rem;
}
.guest .group .desc{
    line-height: .3rem;
    font-size: .16rem;
}

.important-details{
    background-image: url(/static/image/bg-logo-r.png);
    background-size: 3.2rem auto;
    background-position: right .3rem;
    background-repeat: no-repeat;
}
.important-details .group{
    display: flex;
    justify-content: space-between;
}
.important-details .group .item{
    width: 2.4rem;
    border-radius: .16rem;
    overflow: hidden;
}
.important-details .group .content{
    display: flex;
    flex-direction: column;
    height: calc(100% - 2.4rem);
    padding: .2rem .2rem .4rem;
}
.important-details .group .item img{
    width: 100%;
}
.important-details .group .name{
    white-space: nowrap;

    line-height: .38rem;
    font-weight: bold;
    font-size: .2rem;
}
.important-details .group .desc{
    line-height: .3rem;
    font-size: .16rem;
    margin-bottom: .2rem;
}

.campfire{
    background-color: #8DC320;
}
.campfire .container{
    display: flex;
}
.campfire .pic{
    flex: 0 0 2.4rem;
    width: 2.4rem;
}
.campfire .content{
    flex: 1;
    min-width: 0;
    margin-right: .4rem;
}
.campfire .h3{
    white-space: nowrap;
    position: relative;
}
.campfire .desc{
    line-height: .3rem;
    font-size: .16rem;
    color: #fff;
}
.campfire .btn-group{
    display: flex;
}
.campfire .btn-more + .btn-more{
    margin-left: .8rem;
}

.sponsors{
    background-image: url(/static/image/bg-logo-l.png);
    background-size: 3.1rem auto;
    background-position: left .3rem;
    background-repeat: no-repeat;
}
.sponsors .group{
    display: grid;
    grid-template-columns: repeat(4, 2rem);
    row-gap: .4rem;
    column-gap: .73rem;

    text-align: center;
}
.sponsors .pic{
    width: 2rem;
    height: 1.5rem;
    border: 1px solid #333;
}
.sponsors .pic img{
    object-fit: contain;
}
.sponsors .name{
    line-height: .3rem;
    font-size: .2rem;
}



@media screen and (max-width: 751px) {
    .block{
        padding: .3rem 0;
    }
    .h3{
        line-height: .48rem;
        font-size: .3rem;
    }

    .banner{
        height: 100vh;
    }
    .banner .container{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 0;
    }
    .banner .title{
        width: 2.67rem;
        height: 1.24rem;
        margin-top: 1.2rem;
        margin-right: auto;
    }
    .days{
        padding-bottom: 0;
        margin-top: .4rem;
        margin-right: 0;
    }
    .days .text{
        line-height: .19rem;
        font-size: .12rem;
    }
    .days .days-box{
        width: .9rem;
        height: .9rem;
        margin: 0 .1rem;

        background: linear-gradient( 180deg, #EDEDED 0%, #FFFFFF 33%, #FFFFFF 66%, #EDEDED 100%);
        box-shadow: inset 0 0 .05rem 0 rgba(0,0,0,0.1), inset 0 .2rem 0 0 #FFFFFF, inset 0 -.1rem 0 0 rgba(255,255,255,0.5), 0 .05rem .03rem 0 rgba(0,0,0,0.5);
        border-radius: .08rem;
    }
    .days .days-box .number{
        top: .07rem;
        font-size: .7rem;
    }

    .days .days-box .number-reduce{
        top: .14rem;
        font-size: .5rem;
    }

    .introduce{
        background-size: contain;
        background-position: center 7rem;
    }
    .introduce .stat{
        flex-direction: column;
        margin-top: .3rem;
    }
    .introduce .stat .item + .item{
        margin-top: .4rem;
    }
    
    .introduce .container{
        background-image: url(/static/image/bg-logo-r.png);
        background-size: 3.2rem auto;
        background-position: right calc(100% - 3.4rem);
        background-repeat: no-repeat;
    }


    .about{
        flex-direction: column;
        margin-top: .6rem;
    }
    .about .text, .language-en .about .text{
        width: 100%;
        margin-top: .4rem;
    }

    .leaders{
        flex-direction: column;
        margin-top: 0;
    }
    .leaders .item{
        margin-top: .6rem;
    }
    .leaders .item + .item{
        margin-top: .4rem;
        margin-left: 0;
    }
    .leaders .item .avatar{
        width: 1.1rem;
        height: 1.5rem;
    }

    .why .group{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: .2rem;
    }
    .why .group .pic{
        margin-top: .2rem;
    }
    .why .group .btn-more{
        position: unset;
        margin-top: .2rem;
        margin-left: 0;
    }

    .theme{
        background-size: 1.9rem auto;
        background-position: left .9rem;
    }
    .theme .pic{
        width: 100vw;
    }

    .guest .group{
        grid-template-columns: repeat(2, 1.6rem);
        row-gap: .42rem;
        column-gap: .15rem;
    }
    .guest .group .pic{
        width: 1.6rem;
        height: 1.6rem;
    }
    .guest .group .name{
        margin-top: .1rem;
    }

    .important-details .group{
        flex-direction: column;
    }
    .important-details .group .item{
        width: 100%;
    }
    .important-details .group .item + .item{
        margin-top: .2rem;
    }
    .campfire .container{
        display: block;
        position: relative;
    }
    .campfire .content{
        margin-right: 0;

        position: relative;
        z-index: 1;
    }
    .campfire .h3{
        margin-right: -20px;
        white-space: unset;
    }
    .campfire .btn-group{
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
    }
    .campfire .btn-more{
        margin-top: .2rem;
    }
    .campfire .btn-more + .btn-more{
        margin-left: 0;
    }
    .campfire .pic{
        position: absolute;
        right: .2rem;
        bottom: 0;
    }
    
    .sponsors .group{
        grid-template-columns: repeat(2, 1.6rem);
        row-gap: .2rem;
        column-gap: .15rem;
    }
    .sponsors .pic{
        width: 1.6rem;
        height: 1.2rem;
    }
    .sponsors .name{
        margin-top: .1rem;
    }

    
    .important-details, .sponsors{
        background: none;
    }
}