header {
    width: 100%;
    height: auto;
    position: relative;
}

.header-bg {
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: .8;
}

.header-page {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.header-content {
    position: absolute;
    width: 100%;
    height: 2.02rem;
    top: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .16rem;
}

.header-content h1 {
    font-family: Reem Kufi Fun;
    font-weight: 700;
    font-size: .34rem;
    line-height: 130%;
    letter-spacing: 0%;
    text-transform: uppercase;
    background: linear-gradient(90deg, #E8E6E2 -0.28%, #D9D7D4 5.72%, #B4B0B1 18.72%, #999498 25.72%, #F8F8F8 51.72%, #E9E9E9 58.72%, #C5C2C3 70.72%, #8D878A 87.72%, #B4B4B5 99.72%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.header-content p {
    font-family: LINE Seed Sans;
    font-weight: 400;
    font-size: .16rem;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: bottom;
    color: #fff;
    opacity: .8;
}

.sec-1-time-select {
    width: 5.58rem;
    height: .53rem;
    gap: .8rem;
    border-radius: 999px;
    padding: .1rem;
    border: .01rem solid #FFFFFF33;
    margin: auto;
    display: flex;
    margin-top: 0.48rem;
}

.sec-1-time-select li {
    width: 1.26rem;
    height: .33rem;
    font-family: LINE Seed Sans;
    font-weight: 700;
    font-size: .18rem;
    line-height: .33rem;
    text-align: center;
    border-radius: 999px;
    cursor: pointer;
}

.sec-1-time-select li span {
    background: linear-gradient(90deg, #E8E6E2 -0.28%, #D9D7D4 5.72%, #B4B0B1 18.72%, #999498 25.72%, #F8F8F8 51.72%, #E9E9E9 58.72%, #C5C2C3 70.72%, #8D878A 87.72%, #B4B4B5 99.72%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sec-1-time-select li.active {
    background: linear-gradient(44.75deg, rgba(10, 109, 255, 0.3) 0%, rgba(10, 109, 255, 0.3) 67.74%);
    border: 1px solid #0A6DFF;
    letter-spacing: 0%;
}

.sec-1-time-select li.active span {
    background: #0A6DFF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sec-1-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .18rem;
    margin-top: 0.24rem;
}

.sec-1-list li {
    position: relative;
    font-size: 0;
}

.sec-1-swiper-img {
    width: 100%;
    border-radius: .12rem;
    height: 2.5rem;
    object-fit: cover;
    object-position: right;
}

.sec-1-linear {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* height: 1.2rem; */
    height: .8rem;
    background: linear-gradient(0deg, #111216 58.33%, rgba(17, 18, 22, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.2rem;
    box-sizing: border-box;
    justify-content: space-between;
    padding-bottom: .2rem;
}

.sec-1-liner-title {
    font-family: LINE Seed Sans;
    font-weight: 700;
    /* font-size: .2rem; */
    font-size: 0.12rem;
    line-height: 120%;
    background: linear-gradient(90deg, #E8E6E2 -0.28%, #D9D7D4 5.72%, #B4B0B1 18.72%, #999498 25.72%, #F8F8F8 51.72%, #E9E9E9 58.72%, #C5C2C3 70.72%, #8D878A 87.72%, #B4B4B5 99.72%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: center;
}

.sec-1-liner-box {
    display: flex;
    align-items: center;
    gap: .16rem;
    transform: scale(.7);
}

.sec-1-liner-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .06rem;
    font-family: LINE Seed Sans;
    font-weight: 400;
    font-size: .14rem;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    opacity: .6;
}

.sec-1-liner-time img {
    width: 0.16rem;
    height: 0.16rem;
}

@media(max-width: 1600px) {
    .header-content {
        top: 2.8rem;
    }
}

@media(max-width: 799px) {
    .pc {
        display: none !important;
    }

    .mobile {
        display: block !important;
    }


    header {
        overflow: hidden;
        /* padding-bottom: .6rem; */
    }

    .header-bg {
        width: 180%;
        margin-left: -54%;
        margin-top: .6rem;
    }


    .header-content {
        width: 3.1rem;
        height: 1.2rem;
        top: 2.9rem;
        left: .32rem;
        align-items: self-start;
    }

    .header-content h1 {
        font-size: 0.24rem;
    }

    .header-content img {
        width: 0.9rem;
        height: auto;
    }

    .header-content p {
        text-align: left;
        font-size: 0.14rem;
    }

    .header-content p br {
        display: none;
    }

    .sec-1 {
        margin-top: 0.32rem;
    }

    .sec-1-time-select {
        width: 3.11rem;
        height: 0.42rem;
        gap: .2rem;
        padding: 0 .1rem;
        align-items: center;
    }

    .sec-1-time-select li {
        width: 0.84rem;
        height: 0.26rem;
        font-size: 0.14rem;
        line-height: 0.26rem;
    }


    .sec-1-list {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 .24rem;
        gap: .08rem;
    }

    .sec-1-swiper-img {
        border-radius: .08rem;
        height: 1.56rem;
        object-position: right;
    }

    .sec-1-linear {
        background: linear-gradient(0.73deg, #111216 13.98%, rgba(17, 18, 22, 0) 99.37%);
        height: .9rem;
        padding-top: 0.24rem;
    }

    .sec-1-liner-title {
        font-size: 0.1rem;
    }

    .sec-1-liner-box {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.05rem;
    }

    .sec-1-liner-time {
        font-size: 0.1rem;
    }

    .sec-1-liner-time:first-child {
        flex: none;
        width: 100%;
    }

    .sec-1-liner-time img {
        width: 0.12rem;
        height: 0.12rem;
    }
}