@charset "UTF-8";
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* box__info */
.box__info {
    padding: var(--section-vside) 0  var(--section-vside) 0;
}

.box__info .box__container {
    padding: 0 var(--extra-side);
}

.box__info .box__container .box__body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.box__info .box__container .box__body .body__con {
    flex: 1;
    position: relative;
    color: #fff;
}

.box__info .box__container .box__body .body__con .con__subtitle {
    position: relative;
    margin-top: calc(var(--fsize) * 1);
    position: relative;
    z-index: 1;
}

.box__info .box__container .box__body .body__con .con__detail {
    margin-top: calc(var(--fsize) * 1);
    position: relative;
    z-index: 1;
}

.box__info .box__container .box__body .body__pic {
    position: relative;
    width: 48%;
    
    margin-left: 5.5%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.box__info .box__container .box__body .body__pic .swiper {
    overflow: hidden;
    border-radius: var(--border-radius-m2);
}

.box__info .body__pic .swiper-button-next, .swiper-button-prev {
    --swiper-theme-color: #fff;
}

.box__info .box__container .box__body .body__pic .swiper.swiper-gallery0 .swiper-slide .slide-photo > img {
    aspect-ratio: 690 / 419;
}

/* box__recommend */
.box__recommend .box__container {
    padding: 0 var(--extra-side);
}

.box__recommend .box__container .box__body {
    /* background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
    width: 100%;
    /* aspect-ratio: 1440 / 775; */
    /* aspect-ratio: 16 / 9; */

    /* border-radius: var(--border-radius-m2); */
    /* overflow: hidden; */

    display: flex;
    /* flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start; */

    color: #fff;
}

.box__recommend .box__container .box__body .swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-m2);
}

.box__recommend .box__container .box__body .swiper .slide-body {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

/* .box__recommend .box__container .box__body .swiper .slide-body > img {
    
} */

.box__recommend .box__container .box__body .swiper .slide-body .body__img {
    position: absolute;
}

.box__recommend .box__container .box__body .swiper .slide-body .body__label {
    background-color: var(--color-purple);
    position: absolute;
    top: 0;
    display: flex;
    padding: 0.6% 1.2%;

    border-radius: 0 0 var(--border-radius-m2) 0;
    overflow: hidden;

    box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, 0.2);;
}

.box__recommend .box__container .box__body .swiper .slide-body .body__con {
    position: relative;
    padding: 0% 4% 5% 4%;
}

.box__recommend .box__container .box__body .swiper .slide-body .body__con .con__from {
    margin-top: calc(var(--fsize) * 1.5);
}

.box__recommend .box__container .box__body .swiper .slide-body .body__con .con__title {
    margin-top: calc(var(--fsize) * 0.25);
}

.box__recommend .box__container .box__body .swiper .slide-body .body__con .con__text {
    margin-top: calc(var(--fsize) * 1);
    position: relative;
    width: 73%;

    font-weight: 400;
}


/* box__other */
.box__other {
    padding: var(--section-vside) 0 calc(var(--section-vside) * 2) 0;
}

.box__other .box__container {
    padding: 0 var(--extra-side);
}

.box__other .box__container .box__body .body__tips {
    color: #fff;
    margin-bottom: calc(var(--fsize) * 6);
}

.box__other .box__container .box__body .body__list {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(5, minmax(16%, 100%));
    grid-auto-rows: auto;
    grid-gap: 4.5%;
    /* 15 - 30 */
    /* grid-column-gap: clamp(4.063rem, 3.813rem + 1.25vw, 5.313rem); */
    /* 20 - 80 */
    /* grid-row-gap: clamp(1.25rem, 0.5rem + 3.75vw, 5rem); */
}

.box__other .box__container .box__body .body__list .list__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box__other .box__container .box__body .body__list .list__item .item__icon {
    aspect-ratio: 1 / 1;
    padding: 5%;
}

.box__other .box__container .box__body .body__list .list__item .item__en {
    margin-top: calc(var(--fsize) * 1.2);
}

.box__other .box__container .box__body .body__list .list__item .item__ch {
    margin-top: calc(var(--fsize) * 0.3);
}

/* box__cast */
.box__cast.is-main .list__item[data-status='podcast'] .item__pic .pic__img {
    /* aspect-ratio: 460 / 450; */
    aspect-ratio: 1 / 1;
}


@media screen and (min-width:320px) {
    :root {
        /* .box__cast .box__container .box__body .body__list .list__item { 對應 --side: 20px;} */
        --main-side: 20px;
    }

    .box__info {
        padding: 0 0  var(--section-vside) 0;
    }

    .box__info .box__container {
        padding: 0 0;
    }

    .box__info .box__container .box__body {
        flex-direction: column-reverse;
        justify-content: initial;
        align-items: initial;
    }

    .box__info .box__container .box__body .body__pic {
        width: 100%;
        margin-left: 0;
        margin-bottom: 12%;
    }

    .box__info .box__container .box__body .body__pic .swiper {
        border-radius: 0;
    }

    .box__info .box__container .box__body .body__con {
        padding: 0 var(--main-padding-side);
    }

    /* box__recommend */
    .box__recommend .box__container {
        padding: 0 0;
    }

    .box__recommend .box__container .box__body .swiper {
        border-radius: 0;
    }

    .box__recommend .box__container .box__body .swiper .slide-body {
        aspect-ratio: initial;
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__img {
        aspect-ratio: 16 / 9;
        position: relative;
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__label {
        padding: 1% 2.5%;
        border-radius: 0 0 var(--border-radius-m) 0;
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__con {
        padding: 0% var(--main-padding-side) 0 var(--main-padding-side);
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__con .con__text {
        width: 100%;
    }

    /* box__other */
    .box__other {
        padding: var(--section-vside) 0 calc(var(--section-vside) * 4) 0;
    }

    .box__other .box__container {
        padding: 0 calc(var(--main-padding-side) * 2);
    }

    .box__other .box__container .box__body .body__list {
        grid-template-columns: repeat(2, minmax(40%, 100%));
        grid-column-gap: 15%;
        grid-row-gap: 40px;
    }
}
@media screen and (min-width:360px) {}
@media screen and (min-width:390px) {}
@media screen and (min-width:414px) {}
@media screen and (min-width:500px) {}
@media screen and (min-width:600px) {

}
@media screen and (min-width:1024px) {
    .box__info {
        padding: var(--section-vside) 0  var(--section-vside) 0;
    }

    .box__info .box__container {
        padding: 0 var(--extra-side);
    }

    .box__info .box__container .box__body {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .box__info .box__container .box__body .body__pic {
        width: 48%;
        margin-left: 5.5%;
        margin-bottom: 0%;
    }

    .box__info .box__container .box__body .body__pic .swiper {
        border-radius: var(--border-radius-m2);
    }

    .box__info .box__container .box__body .body__con {
        padding: 0 0;
    }

    /* box__recommend */
    .box__recommend .box__container {
        padding: 0 var(--extra-side);
    }

    .box__recommend .box__container .box__body .swiper {
        border-radius: var(--border-radius-m2);
    }

    .box__recommend .box__container .box__body .swiper .slide-body {
        aspect-ratio: 16/9;
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__img {
        position: absolute;
        width: 100%;
        /* aspect-ratio: initial; */
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__label {
        padding:calc(var(--fsize) * 0.35) calc(var(--fsize));
        border-radius: 0 0 var(--border-radius-m2) 0;
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__con {
        padding: 0% 4% 5% 4%;
    }

    .box__recommend .box__container .box__body .swiper .slide-body .body__con .con__text {
        width: 73%;
    }

    /* box__other */
    .box__other {
        padding: var(--section-vside) 0 calc(var(--section-vside) * 3) 0;
    }

    .box__other .box__container {
        padding: 0 var(--extra-side);
    }

    .box__other .box__container .box__body .body__list {
        grid-template-columns: repeat(5, minmax(10%, 100%));
        grid-column-gap: 3%;
        grid-row-gap: 0px;
    }
}
@media screen and (min-width:1280px) {}
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1680px) {}
@media screen and (min-width: 1920px) {}
@media screen and (min-width: 2560px) {}