.page_hero {
    padding-top: var(--head)
}

.page_hero .banner {
    position: relative
}

.page_hero .banner img {
    display: block;
    width: 100%;
    height: 24.0625vw;
    object-fit: cover
}

.page_hero .banner .text {
    position: absolute;
    left: 6.09375vw;
    width: 37.5vw;
    top: 50%;
    transform: translateY(-50%);
    color: #fff
}

.page_hero .banner .text .en {
    line-height: 1.33;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .20833vw
}

.page_hero .banner .text .pt {
    margin-bottom: 1.66667vw;
    line-height: 1.5
}

.page_hero .banner .text .des {
    line-height: 1.5;
    letter-spacing: .05208vw
}

.page_hero .main {
    background: #F3EEE7;
    padding: 3.33333vw 8.33333vw 6.25vw
}

.page_hero .main .intro {
    width: 62.5vw;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .05208vw;
    text-align: center
}

.page_hero .main .swiper_box {
    position: relative;
    margin-top: 6.66667vw
}

.page_hero .main .swiper_box .swiper {
    width: 100%;
    overflow: hidden
}

.page_hero .main .swiper_box .swiper .item {
    overflow: hidden;
    position: relative;
    background: red
}

.page_hero .main .swiper_box .swiper .item img,
.page_hero .main .swiper_box .swiper .item video {
    width: 100%;
    display: block;
    height: 46.875vw;
    object-fit: cover;
    transition: all 600ms
}

.page_hero .main .swiper_box .swiper .item .poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity .6s ease
}

.page_hero .main .swiper_box .swiper .item.playing .poster {
    opacity: 0
}

.page_hero .main .swiper_box .text_hero {
    position: absolute;
    left: 6.25vw;
    bottom: 7.91667vw;
    z-index: 5;
    color: #fff
}

.page_hero .main .swiper_box .text_hero .text {
    display: none
}

.page_hero .main .swiper_box .text_hero .text.on {
    display: block
}

.page_hero .main .swiper_box .text_hero .text .t1 {
    line-height: 2
}

.page_hero .main .swiper_box .text_hero .text .t1 span {
    font-weight: 300;
    letter-spacing: .05208vw
}

.page_hero .main .swiper_box .text_hero .text .t2 {
    margin: 1.66667vw 0;
    color: #C6B9A6;
    letter-spacing: .05208vw
}

.page_hero .main .swiper_box .text_hero .text a {
    padding: .83333vw 2.08333vw;
    display: inline-block;
    position: relative;
    border: 1px solid #fff;
    letter-spacing: .05208vw;
    line-height: 0.93;
    color: #FAF9F6;
    overflow: hidden;
    z-index: 5;
    transition: all 600ms
}

.page_hero .main .swiper_box .text_hero .text a::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -1;
    width: 0.729vw;
    height: 0.729vw;
    border-radius: 50%;
    transform: translate(-50%, 50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff
}

.page_hero .main .swiper_box .text_hero .text a:hover {
    color: #000
}

.page_hero .main .swiper_box .text_hero .text a:hover::after {
    transform: translate(-50%, 50%) scale(20)
}

.page_hero .main .swiper_box .prev {
    position: absolute;
    left: 2.08333vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5
}

.page_hero .main .swiper_box .prev svg {
    display: block;
    width: 2.5vw;
    height: auto
}

.page_hero .main .swiper_box .next {
    position: absolute;
    right: 2.08333vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5
}

.page_hero .main .swiper_box .next svg {
    display: block;
    width: 2.5vw;
    height: auto
}

.page_hero .main .swiper_box .swiper-pagination {
    position: absolute;
    left: 50%;
    display: flex;
    gap: .83333vw;
    bottom: 3.48958vw;
    transform: translateX(-50%)
}

.page_hero .main .swiper_box .swiper-pagination .swiper-pagination-bullet {
    width: 4.166vw;
    height: 0.052vw;
    --swiper-pagination-bullet-horizontal-gap: 0.416vw;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    position: relative
}

.page_hero .main .swiper_box .swiper-pagination .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #fff;
    transform: scale(0.99);
    transform-origin: left
}

.page_hero .main .swiper_box .swiper-pagination .swiper-pagination-bullet-active::after {
    width: 100%;
    transition: all linear 6s
}

.page_hero .common_sec {
    position: relative;
    padding: 3.33333vw 0;
    background: url(/images/reviews/cbg.png) no-repeat;
    background-size: cover
}

.page_hero .common_sec .info {
    text-align: center;
    color: #fff
}

.page_hero .common_sec .info .p1 {
    line-height: 1.5;
    margin-bottom: 2.08333vw
}

.page_hero .common_sec .info a {
    display: inline-flex;
    border: 1.033px solid #FAF9F6;
    padding: .83333vw 2.08333vw;
    gap: .83333vw;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 5
}

.page_hero .common_sec .info a p,
.page_hero .common_sec .info a img {
    transition: all 600ms
}

.page_hero .common_sec .info a::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -1;
    width: 0.729vw;
    height: 0.729vw;
    border-radius: 50%;
    transform: translate(-50%, 50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff
}

.page_hero .common_sec .info a img {
    display: block;
    width: 1.25vw
}

.page_hero .common_sec .info a:hover::after {
    transform: translate(-50%, 50%) scale(20)
}

.page_hero .common_sec .info a:hover p {
    color: #000
}

.page_hero .common_sec .info a:hover img {
    filter: invert(1)
}

@media screen and (max-width: 768px) {
    .page_hero {
        padding-top: 60px
    }

    .page_hero .banner img {
        height: 200px
    }

    .page_hero .banner .text {
        left: 5%;
        width: 90%;
        top: 50%;
        transform: translateY(-50%)
    }

    .page_hero .banner .text .en {
        font-size: 14px;
        letter-spacing: 2px
    }

    .page_hero .banner .text .pt {
        margin-bottom: 16px;
        font-size: 18px
    }

    .page_hero .banner .text .des {
        font-size: 14px
    }

    .page_hero .main {
        padding: 30px 5% 40px
    }

    .page_hero .main .intro {
        width: 100%;
        font-size: 18px;
        line-height: 1.6
    }

    .page_hero .main .swiper_box {
        margin-top: 30px
    }

    .page_hero .main .swiper_box .swiper .item img,
    .page_hero .main .swiper_box .swiper .item video {
        height: 400px
    }

    .page_hero .main .swiper_box .swiper .item video {
        object-fit: contain
    }

    .page_hero .main .swiper_box .swiper-pagination {
        bottom: 18px
    }

    .page_hero .main .swiper_box .swiper-pagination .swiper-pagination-bullet {
        width: 28px;
        height: 1px;
        --swiper-pagination-bullet-horizontal-gap: 3px
    }

    .page_hero .main .swiper_box .text_hero {
        left: 5%;
        bottom: 40px;
        width: 90%
    }

    .page_hero .main .swiper_box .text_hero .text .t1 {
        font-size: 16px
    }

    .page_hero .main .swiper_box .text_hero .text .t1 span {
        letter-spacing: 1px
    }

    .page_hero .main .swiper_box .text_hero .text .t2 {
        margin: 10px 0;
        font-size: 14px
    }

    .page_hero .main .swiper_box .text_hero .text a {
        padding: 10px 24px;
        font-size: 14px
    }

    .page_hero .main .swiper_box .text_hero .text a::after {
        width: 30px;
        height: 30px
    }

    .page_hero .main .swiper_box .prev,
    .page_hero .main .swiper_box .next {
        top: 45%
    }

    .page_hero .main .swiper_box .prev svg,
    .page_hero .main .swiper_box .next svg {
        width: 24px
    }

    .page_hero .main .swiper_box .prev {
        left: 10px
    }

    .page_hero .main .swiper_box .next {
        right: 10px
    }

    .page_hero .common_sec {
        padding: 30px 0
    }

    .page_hero .common_sec .info .p1 {
        font-size: 14px;
        margin-bottom: 20px;
        padding: 0 5%
    }

    .page_hero .common_sec .info a {
        padding: 10px 24px;
        font-size: 14px;
        gap: 10px
    }

    .page_hero .common_sec .info a::after {
        width: 30px;
        height: 30px
    }

    .page_hero .common_sec .info a img {
        width: 18px
    }
}