.page {
    min-height: 100vh;
    position: relative;
}

.page .page-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -4;
}

.page .page-bg >img {
    width: 100%;
    display: block;
}

/*  */
.page .main-visual {
    --p-t: clamp(20px, calc((160 / 1920) * 100vw), 83px);
    --p-b: clamp(30px, calc((100 / 1920) * 100vw), 100px);
    --p-lr: var(--spacing-40);
    position: relative;
    padding: var(--p-t) var(--p-lr) var(--p-b);
}

.page .main-visual .main-visual__bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: url(../images/visual-bg.jpg) no-repeat center center / cover;
}

.page .main-visual .main-visual__content {
    width: 100%;
    max-width: 980px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.page .main-visual .section-text {
    font-weight: 600;
    text-align: center;
}

.page .main-visual .section-text .desc {
    font-size: var(--font-size-38);
    line-height: calc(57 / 38);
    margin-bottom: 12px;
}

.page .main-visual .section-text .title {
    --font-size: clamp(24px, calc((68 / 1920) * 100vw), 68px);
    font-size: var(--font-size);
    line-height: calc(102 / 68);
}
.page .main-visual .section-text .title span,
.page .main-visual .section-text .desc span {
    /* opacity: -1; */
}

.page .main-visual .visual-img {
    max-width: clamp(540px, calc((972 / 1920) * 100vw), 800px);
    margin: clamp(40px, calc((118 / 1920) * 100vw), 118px) auto 0;
    /* opacity: -1; */
}

.page .main-visual .visual-img img {
    width: 100%;
    display: block;
    margin: auto;
}

/*  */
.page .overview {
    --p-t: clamp(50px, calc((170 / 1920) * 100vw), 170px);
    --m-t: clamp(50px, calc((222 / 1920) * 100vw), 222px);
    padding-top: var(--p-t);
    position: relative;
    margin-top: calc(var(--m-t) * -1);
}

.page .overview .overview-bg {
    width: calc(50% + 50px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary-foreground);
    z-index: 1;
}

.page .overview .overview-content {
    position: relative;
    z-index: 2;
}

.page .overview .overview-content::before {
    content: "";
    width: calc(50% - 450px);
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.page .section-introduction {
    color: #fff;
    padding-left: calc(50% - 450px);
    display: flex;
    position: relative;
}

.page .section-introduction .section-introduction__main {
    width: 420px;
    padding-left: 20px;
    flex: 0 0 auto;
}

.page .section-introduction .title-en {
    font-weight: 600;
    font-size: var(--font-size-24);
    line-height: 1;
}

.page .section-introduction .title-cn {
    font-weight: 600;
    font-size: var(--font-size-38);
    line-height: calc(57 / 38);
}

.page .section-introduction .section-introduction__main .inner-text {
    font-size: var(--font-size-18);
    font-weight: 400;
    width: 100%;
    line-height: calc(30 / 18);
    margin-top: 12px;
}

.page .section-introduction .section-introduction__img {
    max-width: clamp(500px, calc((650 / 1920) * 100vw), 650px);
    position: absolute;
    left: 50%;
}

.page .section-introduction .section-introduction__img img {
    width: 100%;
    display: block;
}

.page .overview .overview-product {
    padding-left: calc(50% - 450px);
    padding-top: clamp(150px, calc((200 / 1920) * 100vw), 200px);
    margin-top: clamp(50px, calc((80 / 1920) * 100vw), 100px);
    position: relative;
}

.page .overview .overview-product .img {
    width: clamp(500px, calc((550 / 1920) * 100vw), 550px);;
    position: absolute;
    top: 0;
    left: calc(50% - 450px);
    /* left: 50%;
    transform: translateX(calc(-90.91% + 50px)); */
}

.page .overview .overview-product img {
    /* max-height: clamp(200px, calc((360 / 1920) * 100vw), 360px); */
    width: 100%;
}
.page .overview .overview-product__content {
    max-width: 1000px;
}
.page .overview .overview-product .inner-text {
    font-size: var(--font-size-24);
    font-weight: 600;
    line-height: calc(40 / 24);
    max-width: 380px;
    padding-right: var(--spacing-40);
    margin-left: auto;
}

/*  */
.page .facility {
    --bg-h: clamp(180px, calc((360 / 1920) * 100vw), 360px);
    margin-top: clamp(120px, calc((400 / 1920) * 100vw), 240px);
    padding-top: calc(var(--bg-h) / 2 - 20px);
    position: relative;
    z-index: 1;
}

.page .facility .section-content::before {
    content: '';
    width: calc(50% - 450px);
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: calc(var(--bg-h) / 2 - 20px);
}

.page .facility .section-bg {
    width: 100%;
    height: clamp(180px, calc((360 / 1920) * 100vw), 360px);
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary-foreground);
    z-index: -1;
}

.page .facility .facility-img {
    max-width: calc(100% - clamp(300px, calc((600 / 1920) * 100vw), 600px));
    width: calc(100% - clamp(50px, calc((150 / 1920) * 100vw), 150px));
    margin: 0 clamp(var(--spacing-40), calc((75 / 1920) * 100vw), 75px) 0 auto;
}

.page .facility .facility-img img {
    width: 100%;
}

/*  */
.page .service {
    position: relative;
    margin-top: calc(clamp(110px, calc((180 / 1920) * 100vw), 180px) * -1);
    z-index: 2;
}

.page .service .section-bg {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #F0F0F0;
    z-index: -1;
}

.page .service .service-content {
    position: relative;
    z-index: 1;
}

.page .service .service-list {
    display: flex;
}

.page .service .service-item {
    width: 100%;
    flex: 0 0 auto;
    position: relative;
    z-index: -1;
    visibility: hidden;
}

.page .service .service-item:nth-of-type(2) {
    position: relative;
    left: -100%;
}

.page .service .service-item:nth-of-type(3) {
    position: relative;
    left: -200%;
}

.page .service .service-item.active {
    visibility: visible;
    z-index: 1;
}

.page .service .service-item .service-item__img {
    max-height: clamp(300px, calc((580 / 1920) * 100vw), 580px);
}

.page .service .service-item .service-item__img img {
    width: 100%;
}

.page .service .service-item:nth-of-type(1) .service-item__img img {
    margin-top: 10%;
    margin-left: 10%;
}

.page .service .service-item:nth-of-type(2) .service-item__img img {
    margin-top: 5%;
    margin-left: 15%;
}

.page .service .service-item:nth-of-type(3) .service-item__img img {
    margin-top: 10%;
    margin-left: 10%;
}

.page .service .service-item__content {
    display: flex;
    justify-content: flex-end;
}

/*  */
.page .seminar {
    position: relative;
    margin-top: clamp(50px, calc((250 / 1920) * 100vw), 250px);
}

.page .seminar .section-bg {
    width: calc(150px + 50%);
    height: calc(100% + 30px);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F0F0F0;
    z-index: -1;
}

.page .seminar .section-content {
    --p-l: clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
    --p-t: clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
    max-width: 1140px;
    margin: auto;
    padding-left: var(--p-l);
    padding-top: var(--p-t);
    display: flex;
    gap: 0 clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
    ;
}

.page .seminar .section-content .inner-text {
    --p-l: clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
    width: clamp(300px, calc((430 / 1920) * 100vw), 430px);
    font-size: var(--font-size-18);
    line-height: calc(30 / 18);
    padding-left: var(--p-l);
    padding-bottom: 20px;
    flex: 0 0 auto;
}

.page .seminar .section-content .inner-text .title {
    font-size: var(--font-size-38);
    font-weight: 600;
    line-height: calc(57 / 38);
}

.page .seminar .section-content .inner-text .desc {
    margin-top: 12px;
}

.page .seminar .section-content .inner-text .code {
    max-width: 50%;
    margin-top: 12px;
}

.page .seminar .section-content .section-img {
    max-width: clamp(400px, calc((550 / 1920) * 100vw), 550px);
    margin-top: calc(clamp(40px, calc((110 / 1920) * 100vw), 110px) * -1);
}

.page .seminar .section-content .section-img img {
    width: 100%;
    display: block;
}

/*  */
.page .sample {
    position: relative;
    margin-top: clamp(70px, calc((170 / 1920) * 100vw), 170px);
}

.page .sample .section-bg {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #F0F0F0;
    z-index: -1;
}

.page .sample .sample-list {
    display: flex;
}

.page .sample .sample-item {
    width: 100%;
    flex: 0 0 auto;
    position: relative;
    z-index: -1;
    visibility: hidden;
}

.page .sample .sample-item.active {
    visibility: visible;
    z-index: 1;
}

.page .sample .sample-item:nth-of-type(2) {
    position: relative;
    left: -100%;
}

.page .sample .sample-item:nth-of-type(3) {
    position: relative;
    left: -200%;
}

.page .sample .sample-item__content {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.page .sample .sample-swiper {
    --swiper-navigation-sides-offset: 0;
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: clamp(12px, calc((20 / 1920) * 100vw), 20px);
    --swiper-pagination-bottom: 0;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: rgba(255,255,255,.5);
    max-width: clamp(400px, calc((550 / 1920) * 100vw), 550px);
    margin-right: calc(clamp(var(--spacing-40), calc((100 / 1920) * 100vw), 100px) * -1);
    margin-top: -20px;
    flex: 0 0 auto;
}

.page .sample .sample-swiper .swiper-button-next,
.page .sample .sample-swiper .swiper-button-prev {
    --w: clamp(30px, calc((40 / 1920) * 100vw), 40px);
    width: var(--w);
    height: var(--w);
    background-color: rgba(0, 0, 0, .5);
    background-image: none;
}

.page .sample .sample-swiper .swiper-pagination {
    max-width: 100%;
    width: max-content;
    height: clamp(20px, calc((30 / 1920) * 100vw), 30px);
    left: 50%;
    transform: translateX(-50%);
}

/* .page .sample .sample-item__img {
    max-width: clamp(400px, calc((550 / 1920) * 100vw), 550px);
    margin-right: calc(clamp(var(--spacing-40), calc((100 / 1920) * 100vw), 100px) * -1);
    margin-top: -20px;
} */

.page .sample .sample-item__img img {
    width: 100%;
    display: block;
}

/*  */
.page .plan {
    position: relative;
    margin-top: clamp(50px, calc((250 / 1920) * 100vw), 250px);
}

.page .plan .section-bg {
    width: calc(150px + 50%);
    height: calc(30px + 100%);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F0F0F0;
    z-index: -1;
}

.page .plan .section-content {
    --p-t: clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
    --p-l: clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
    max-width: 1140px;
    margin: auto;
    padding-left: var(--p-l);
    padding-top: var(--p-t);
    display: flex;
    gap: 0 clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
}

.page .plan .section-content .inner-text {
    --p-l: clamp(var(--spacing-40), calc((80 / 1920) * 100vw), 80px);
    width: 430px;
    font-size: var(--font-size-18);
    line-height: calc(30 / 18);
    padding-left: var(--p-l);
    padding-bottom: 20px;
}

.page .plan .section-content .inner-text .title {
    font-size: var(--font-size-38);
    font-weight: 600;
    line-height: calc(57 / 38);
}

.page .plan .section-content .inner-text .label {
    font-size: var(--font-size-24);
    line-height: 1.5;
    margin-top: 12px;
}

.page .plan .section-content .inner-text .desc {
    margin-top: var(--spacing-40);
}

.page .plan .section-content .section-img {
    max-width: clamp(400px, calc((550 / 1920) * 100vw), 550px);
    margin-top: calc(clamp(40px, calc((110 / 1920) * 100vw), 110px) * -1);
}

.page .plan .section-content .section-img img {
    width: 100%;
}

/*  */
.page .address {
    position: relative;
    margin-top: clamp(80px, calc((180 / 1920) * 100vw), 180px);
}

.page .address .section-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary-foreground);
    z-index: -1;
}

.page .address .section-content {
    display: flex;
}

.page .address .visual-box {
    --p-tb: clamp(var(--spacing-60), calc(80 / 1920 * 100vw), 130px);
    --p-lr: clamp(var(--spacing-40), calc(80 / 1920 * 100vw), 120px);
    max-width: calc(700 / 1920 * 100%);
    width: 100%;
    color: #fff;
    font-size: var(--font-size-20);
    line-height: 1.5;
    padding: var(--p-tb) var(--p-lr);
    flex: 0 0 auto;
}

.page .address .visual-box__item+.visual-box__item {
    margin-top: clamp(var(--spacing-40), calc(66 / 1920 * 100vw), 66px);
}

.page .address .visual-box__item .title {
    font-size: var(--font-size-28);
    font-weight: 600;
    line-height: calc(42 / 28);
}

.page .address .visual-box__item .info {
    font-size: clamp(12px, calc((16 / 1920) * 100vw), 16px);
    margin-top: clamp(var(--spacing-40), calc((54 / 1920) * 100vw), 54px);
    display: flex;
    align-items: flex-start;
    gap: 0 20px;
}

.page .address .visual-box__item .info .icon {
    max-width: var(--font-size-28);
    max-height: clamp(18px, calc((32 / 1920) * 100vw), 32px);
    flex: 0 0 auto;
}

.page .address .address-map__img {
    max-height: clamp(400px, calc((800 / 1920) * 100vw), 800px);
    flex: 1 0 0;
}

.page .address .address-map__img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

@media screen and (max-width: 1100px) {
    /* .page .section-introduction {
        padding-left: 0;
    }

    .page .overview .overview-product {
        padding-left: 0;
    } */
}

@media screen and (max-width: 900px) {
    .page .overview .overview-product .img {
        left: 0;
    }
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 760px) {
    .page .overview .overview-bg {
        max-width: unset;
        width: 100%;
        height: 50%;
    }

    .page .section-introduction {
        flex-wrap: wrap;
    }

    .page .section-introduction .section-introduction__main {
        flex: 0 0 100%;
        padding-right: var(--spacing-40);
    }

    .page .section-introduction .section-introduction__main .inner-text {
        max-width: 100%;
        width: 100%;
    }

    .page .section-introduction .section-introduction__img {
        max-width: 100%;
        flex: 0 0 auto;
        margin-left: 0;
        padding: var(--spacing-40);
        position: static;
    }

    .page .overview .overview-product {
        margin-top: 0;
        padding-top: 0px;
        flex-wrap: wrap;
        display: flex;
        flex-direction: column;
    }

    .page .overview .overview-product .inner-text {
        max-width: unset;
        width: 100%;
        order: 1;
        margin-left: 0;
        padding: var(--spacing-60) var(--spacing-40);
    }

    .page .overview .overview-product .img {
        order: 2;
        max-width: unset;
        width: 100%;
        padding: 0 var(--spacing-40) var(--spacing-40);
        position: static;
    }
}

@media screen and (max-width: 700px) {

    .page .service .section-bg,
    .page .sample .section-bg {
        width: calc(100% - var(--spacing-40));
    }

    .page .service .service-item__content,
    .page .sample .sample-item__content {
        flex-wrap: wrap;
    }

    .page .service .service-item__content .section-wrap,
    .page .sample .sample-item__content .section-wrap {
        order: 1;
        width: 100%;
    }

    .page .service .service-item__content .service-item__img {
        --m-l: clamp(calc(var(--spacing-40) * 2), calc((130 / 1920) * 100vw), 130px);
        order: 2;
        padding: var(--spacing-40) var(--spacing-40) var(--spacing-40) var(--m-l);
    }

    .page .sample .sample-item__content .sample-swiper {
        --m-l: clamp(calc(var(--spacing-40) * 2), calc((130 / 1920) * 100vw), 130px);
        width: 100%;
        max-width: unset;
        order: 2;
        margin-left: 0;
        margin: var(--spacing-40) var(--spacing-40) var(--spacing-40) var(--m-l);
        flex: unset;
    }

    .page .sample .sample-item__content .sample-swiper .swiper-slide {
        
    }

    .page .sample .sample-item__content .sample-item__img {
        width: 100%;
        max-width: unset;
        margin: 0;
    }

    .page .service .service-item .service-item__img img,
    .page .sample .sample-item__content .sample-item__img img {
        max-width: 100%;
        width: unset;
        height: 100%;
        margin: auto !important;
        display: block;
    }

    .page .sample .sample-item__content .sample-item__img img {
        width: 100%;
        margin: 0 !important;
    }

    .page .service .function-btns {
        /* left: clamp(calc(var(--spacing-40) * 2), calc((130 / 1920) * 100vw), 130px); */
        position: relative;
        left: unset;
        transform: unset;
        justify-content: center;
    }
    .page .facility {
        margin-top: var(--spacing-40);
    }

    .page .sample .function-btns {
        position: static;
        justify-content: center;
        margin-top: var(--spacing-40);
    }

    .page .seminar .section-content {
        padding-left: 0;
    }

    .page .seminar .section-bg {
        width: 100%;
        height: 100%;
    }

    .page .seminar .section-content {
        flex-wrap: wrap;
    }

    .page .seminar .section-content .inner-text {
        width: 100%;
    }

    .page .seminar .section-content .inner-text .code {
        max-width: 120px;
    }

    .page .seminar .section-content .section-img {
        width: 100%;
        max-width: unset;
        margin-top: var(--spacing-40);
    }

    .page .plan .section-content {
        padding-left: 0;
    }

    .page .plan .section-bg {
        width: 100%;
        height: 100%;
    }

    .page .plan .section-content {
        flex-wrap: wrap;
    }

    .page .plan .section-content .inner-text {
        width: 100%;
    }

    .page .plan .section-content .inner-text .code {
        max-width: 200px;
    }

    .page .plan .section-content .section-img {
        width: 100%;
        max-width: unset;
        margin-top: var(--spacing-40);
    }

    .page .address .section-content {
        flex-wrap: wrap;
    }

    .page .address .visual-box {
        max-width: unset;
    }

    .page .address .address-map__img {
        flex: 0 0 100%;
    }
    .page .facility .facility-img {
        max-width: unset;
        width: calc(100% - calc(var(--spacing-40) * 2));
    }
}

@media screen and (max-width: 550px) {
    .page .main-visual .section-text .desc {
        --font-size-38: clamp(16px, calc((38 / 1920) * 100vw), 38px);
    }

    .page .facility .facility-img {
        width: 100%;
        margin: 0;
        padding: var(--spacing-40);
    }

    .page .service {
        position: relative;
        margin-top: calc(clamp(70px, calc((180 / 1920) * 100vw), 180px) * -1);
        z-index: 2;
    }
}