@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");

@font-face {
    font-family: "Futura Std Medium";
    src: url(../fonts/Futura-Std-Book.otf);
}

@font-face {
    font-family: "Futura Std Book";
    src: url(../fonts/Futura-Std-Book.otf);
}

.Futura-Std-Medium {
    font-family: "Futura Std Medium";
}

.Futura-Std-Book {
    font-family: "Futura Std Book";
}

/*標點符號*/
.qoo {
    position: relative;
    display: inline;
    margin: 0 -0.3vw;
}

.qoo2 {
    position: relative;
    display: inline;
    margin: 0 -0.2.5vw;
}

.trl {
    position: relative;
    display: inline;
    margin-left: -.5vw;
}

.trr {
    position: relative;
    display: inline;
    margin-right: -.5vw;
}

@keyframes customIn {
    from {
        transform: scale(1.2);
        /* 從 1.5 倍大小開始 */
    }

    to {
        transform: scale(1);
        /* 縮小到原始比例 */
    }
}

@keyframes opacity-height {
    from {
        height: 100;
        width: 100%;
        opacity: 0;

        /* 從 1.5 倍大小開始 */
    }

    to {
        height: 100%;
        width: 100%;
        opacity: 1;
    }
}


[data-aos="custom-in"] {
    opacity: 1;
    transform: scale(1.2);
    /* 与 customIn 的初始状态一致 */
    transition-property: transform, opacity;
}

[data-aos="custom-in"].aos-animate {
    opacity: 1;
    transform: scale(1);

    /* animation: customIn 1.8s ease forwards; */

}

[data-aos="opacity-heightdown"] {
    opacity: 1;
    clip-path: inset(0% 0 100% 0);
    /* 初始状态下完全隐藏 */
    transition: clip-path 3s ease;
}

[data-aos="opacity-heightdown"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 显示全部图片 */
}

[data-aos="opacity-heightup"] {
    opacity: 1;
    clip-path: inset(100% 0 0% 0);
    /* 初始状态下完全隐藏 */
    transition: clip-path 3s ease;
}

[data-aos="opacity-heightup"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 显示全部图片 */
}



.custom-in {
    animation: customIn 2s ease forwards;
    /* 自定義動畫效果 */
}

[data-aos="custom-in"] {
    opacity: 1;
    transform: scale(1.2);
    /* 与 customIn 的初始状态一致 */
    transition-property: transform, opacity;
}

[data-aos="custom-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
    /* 与 customIn 的最终状态一致 */
    animation: customIn 1.8s ease forwards;
    /* 应用自定义动画 */
}

:root {}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    --vw-base: calc(100vw / 1920);
    visibility: hidden;

}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    font-family: "Noto Serif TC";
}


/*圖片介紹字 */
.pic-txt {
    position: absolute;
    right: calc(15* var(--vw-base));
    bottom: calc(15* var(--vw-base));
    color: #fff;
    font-family: 'Noto Serif TC', serif;
    font-size: 0.7vw;
    letter-spacing: 0.1vw;
    font-weight: 500;
    z-index: 999;
    text-shadow: 0 0 1vw rgba(0, 0, 0, 0.8);
}


/*輪播按鈕設定*/
.swiper-button-prev {
    width: 2vw !important;
    height: 4vw !important;
    left: 0 !important;
    top: 46%;
    margin: 0;
    z-index: 990 !important;
    background-image: url(../img/arrow-l.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    transition: all 0.3s ease;
}

.swiper-button-next {
    width: 2vw !important;
    height: 4vw !important;
    right: 0 !important;
    top: 46%;
    margin: 0;
    z-index: 990 !important;
    background-image: url(../img/arrow-r.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    transition: all 0.3s ease;
}

/*同意書照片預覽*/

.black {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 11111;
    font-family: "Noto Sans TC";
}

.closeBtn {
    width: 30px;
    position: absolute;
    right: 5%;
    top: 4%;
    cursor: pointer;
}

.infoWrap {
    width: 100%;
    margin: 0 auto;
    max-width: 65%;
    position: relative;
    height: 100vh;
    overflow: auto;
}

.infoWrap ul {
    list-style: none;
    font-size: 1vw;
    padding-inline-start: 2vw;
}

.infoWrap ul>li>ul {
    list-style: none;
    font-size: 1vw;
    padding-inline-start: 1vw;
}

.li1::before {
    content: "一、";
    position: absolute;
    left: 0vw;
}

.li2::before {
    content: "二、";
    position: absolute;
    left: 0vw;
}

.li3::before {
    content: "三、";
    position: absolute;
    left: 0vw;
}

.li4::before {
    content: "四、";
    position: absolute;
    left: 0vw;
}

.li5::before {
    content: "五、";
    position: absolute;
    left: 0vw;
}

.li1-li::before {
    content: "（１）";
    position: absolute;
    left: 0vw;
}

.li2-li::before {
    content: "（２）";
    position: absolute;
    left: 0vw;
}

.li3-li::before {
    content: "（３）";
    position: absolute;
    left: 0vw;
}

.li4-li::before {
    content: "（４）";
    position: absolute;
    left: 0vw;
}

.infoBox {
    width: 100%;
    height: calc(100% - 20vw);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    color: #fff;
    text-align: left;
}

.infoBox h3 {
    font-size: 1.2vw;
    line-height: 180%;
    margin-bottom: 25px;
    text-align: center;
}

.infoBox h4 {
    font-size: 1vw;
    line-height: 180%;
    margin-bottom: 1vw;
}

.infoBox h5 {
    font-size: 1.2vw;
    line-height: 180%;
    margin-bottom: 1vw;
}

.infoBox p {
    font-size: 1vw;
    line-height: 180%;
}

.sectionspace {
    width: 100%;
    height: calc(110* var(--vw-base));
    background-color: #fff;
}

.main1 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    background-color: #edae99;
}

.main1 .river {
    position: relative;
    margin-left: calc(80* var(--vw-base));
    width: calc(864* var(--vw-base));
    height: 100%;
}

.main1 .water1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.main1 .water2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.main1 .logo {
    position: absolute;
    right: calc(408* var(--vw-base));
    bottom: calc(250* var(--vw-base));
    width: calc(210* var(--vw-base));
    height: auto;
}


.main2 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    background-color: #fff;
}

.main2 .swiper-container,
.main2 .swiper-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.main2 .swiper-slide {
    padding: 0;
    margin: 0;
    position: relative;
    left: 0;
    height: 100%;
    display: inline-block
}

.main2 .sw1 .img {
    position: relative;
    width: calc(1920* var(--vw-base));
    height: 100%;
    overflow: hidden;
}

.main2 .sw1 .logo {
    position: absolute;
    top: calc(125* var(--vw-base));
    left: calc(296* var(--vw-base));
    width: calc(150* var(--vw-base));
    height: auto;
}

.main2 .sw1 .contain {
    position: absolute;
    right: calc(129* var(--vw-base));
    top: calc(400* var(--vw-base));
    z-index: 2;
}

.main2 .sw1 .txt1 {
    position: absolute;
    width: calc(442* var(--vw-base));
    height: auto;
    left: calc(-30* var(--vw-base));
    top: calc(-122* var(--vw-base));

}

.main2 .sw1 .txt2 {
    padding-top: calc(78* var(--vw-base));
    padding-left: calc(29* var(--vw-base));
    position: relative;
    /* width: calc(366* var(--vw-base)); */
    color: #fff;
    font-size: calc(21* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 300;
    line-height: calc(42* var(--vw-base));
    letter-spacing: 0.018em;
    text-align: justify;
}

.main2 .sw1 .txt2::after {
    content: "";
    position: absolute;
    left: 0;
    /* 确保边框靠左 */
    top: 0;
    /* 将边框定位到底部 */
    height: calc(97%);
    /* 设置边框的长度为文本高度的一半或你想要的长度 */
    border-left: #fff solid calc(1* var(--vw-base));
    /* 设置左边框 */
    width: 0;
    /* 边框不需要宽度 */
}

.main2 .sw2 {
    position: relative;
    display: flex;
}

.main2 .sw2 .contain {
    position: relative;
    /* display: inline-block; */
}

.main2 .sw2 .img {
    position: relative;
    width: calc(1350* var(--vw-base));
    height: 100%;
    left: 0;
    overflow: hidden;
}

.main2 .sw2 .txt1 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-right: calc(30* var(--vw-base));
    width: calc(456* var(--vw-base));
    border-bottom: #fff solid calc(1* var(--vw-base));
    height: auto;
    right: calc(0* var(--vw-base));
    bottom: calc(60* var(--vw-base));
}

.main2 .sw2 .contain2 {
    position: relative;
    /* display: inline-block; */
    height: calc(950* var(--vw-base));
}

.main2 .sw2 .txt2 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-left: calc(40* var(--vw-base));
    width: calc(484* var(--vw-base));
    border-bottom: #9fa0a0 solid calc(1* var(--vw-base));
    left: calc(0* var(--vw-base));
    bottom: calc(60* var(--vw-base));
    color: #000000;
    font-size: calc(21* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.018em;
    line-height: calc(42* var(--vw-base));
}

.main3 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    background-color: #fff;
}


.main3 .sw1,
.main3 .sw2,
.main3 .sw3 {
    position: relative;
    display: flex;
    height: calc(950* var(--vw-base));
    flex-direction: row-reverse;
}

.main3 .contain {
    position: relative;
    overflow: hidden;

}

.main3 .img {
    position: relative;
    width: calc(1350* var(--vw-base));
    height: 100%;
    left: 0;
    overflow: hidden;
}

.main3 .txt1 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-left: calc(30* var(--vw-base));
    border-bottom: #fff solid calc(1* var(--vw-base));
    height: auto;
    left: 0;
    bottom: calc(78* var(--vw-base));
    color: #fff;
    font-size: calc(48* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
    line-height: calc(60* var(--vw-base));

}

.main3 .contain2 {
    position: relative;
    height: calc(950* var(--vw-base));
    width: calc(550* var(--vw-base));
    overflow: hidden;
}

.main3 .txt2 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-right: calc(40* var(--vw-base));
    width: calc(480* var(--vw-base));
    border-bottom: #9fa0a0 solid calc(1* var(--vw-base));
    right: calc(0* var(--vw-base));
    bottom: calc(78* var(--vw-base));
    color: #000000;
    font-size: calc(21* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.018em;
    line-height: calc(42* var(--vw-base));

}

/* .main3 .swiper-button-prev{
    top: 22%;
}
.main3 .swiper-button-next{
    top: 22%;
} */


.main4 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    background-color: #fff;
    overflow: hidden;
}

.main4 .swiper-slide {
    position: relative;
    display: flex;
}

.main4 .contain {
    position: relative;
    width: calc(1260* var(--vw-base));

}

.main4 .img {
    position: relative;
    width: calc(1260* var(--vw-base));
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.main4 .contain2 {
    position: relative;
    flex-grow: 1;
    height: calc(950* var(--vw-base));
    overflow: hidden;
    margin-left:calc(54* var(--vw-base)); ;
}

.main4 .simg {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(588* var(--vw-base));
    height: auto;
}

.main4 .txt {
    position: absolute;
    width: 100%;
    bottom: calc(89* var(--vw-base));
    /* left: calc(54* var(--vw-base)); */
    left: 0;
    padding-left: calc(40* var(--vw-base));
    padding-top: calc(255 * var(--vw-base));
    border-left: #9fa0a0 solid calc(1* var(--vw-base));

}

.main4 .txt1 {
    color: #000;
    font-size: calc(48* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
    letter-spacing: 0.05em;
}

.main4 .txt2 {
    margin-top: calc(36* var(--vw-base));
    width: calc(480* var(--vw-base));
    right: calc(0* var(--vw-base));
    bottom: calc(78* var(--vw-base));
    color: #000000;
    font-size: calc(21* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.018em;
}

.main4 .sw2 .txt,
.main4 .sw3 .txt {
    left: calc(54* var(--vw-base));
    padding-top: calc(999* var(--vw-base));
}

.main5 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    background-color: #fff;
    overflow: hidden;
}


.main5 .swiper-slide {
    position: relative;
    display: flex;
    height: calc(950* var(--vw-base));
    flex-direction: row-reverse;
}

.main5 .contain {
    position: relative;

}

.main5 .img {
    position: relative;
    width: calc(1350* var(--vw-base));
    height: 100%;
    left: 0;
    overflow: hidden;
}

.main5 .txt1 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-left: calc(30* var(--vw-base));
    border-bottom: #fff solid calc(1* var(--vw-base));
    height: auto;
    left: 0;
    bottom: calc(78* var(--vw-base));
    color: #fff;
    font-size: calc(48* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
    line-height: calc(60* var(--vw-base));
}

.main5 .smtxt {
    color: #fff;
    font-size: calc(36* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
    letter-spacing: 0.05em;
}

.main5 .contain2 {
    position: relative;
    flex-grow: 1;
    height: calc(950* var(--vw-base));
}

.main5 .txt2 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-right: calc(40* var(--vw-base));
    width: calc(480* var(--vw-base));
    border-bottom: #9fa0a0 solid calc(1* var(--vw-base));
    right: calc(0* var(--vw-base));
    bottom: calc(78* var(--vw-base));
    color: #000000;
    font-size: calc(21* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.018em;
    line-height: calc(42* var(--vw-base));
}

.main6 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    background-color: #fff;
    overflow: hidden;
}

.main6 .swiper-slide {
    position: relative;
    display: flex;
    height: calc(950* var(--vw-base));
}

.main6 .contain {
    position: relative;

}

.main6 .img {
    position: relative;
    width: calc(1340* var(--vw-base));
    height: 100%;
    left: 0;
    overflow: hidden;
}

.main6 .txt1 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-right: calc(30* var(--vw-base));
    border-bottom: #fff solid calc(1* var(--vw-base));
    height: auto;
    right: 0;
    bottom: calc(78* var(--vw-base));
    color: #fff;
    font-size: calc(48* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
}

.main6 .smtxt {
    color: #fff;
    font-size: calc(36* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
    letter-spacing: 0.05em;
}

.main6 .contain2 {
    position: relative;
    flex-grow: 1;
    height: calc(950* var(--vw-base));
}

.main6 .txt2 {
    position: absolute;
    padding-bottom: calc(22* var(--vw-base));
    padding-left: calc(40* var(--vw-base));
    width: calc(480* var(--vw-base));
    border-bottom: #9fa0a0 solid calc(1* var(--vw-base));
    left: calc(0* var(--vw-base));
    bottom: calc(78* var(--vw-base));
    color: #000000;
    font-size: calc(21* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.018em;
    line-height: calc(42* var(--vw-base));
}

.main6 .pic-txt {
    left: calc(15* var(--vw-base));
}

.main6 .encontain {
    position: relative;
    margin-left: calc(132* var(--vw-base));
    margin-top: calc(80* var(--vw-base));
}

.main6 .entxt {
    margin-bottom: calc(15* var(--vw-base));
    color: #000;
    font-size: calc(38* var(--vw-base));
    font-family: "Futura Std Medium";
    letter-spacing: 0.05em;
}

.main6 .chtxt {
    margin-top: calc(10* var(--vw-base));
    margin-bottom: calc(40* var(--vw-base));
    color: #000;
    font-size: calc(21* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0;
}

.main6 .encontain .line {
    width: calc(48* var(--vw-base));
    /* 邊線的寬度，可以調整 */
    height: 1px;
    /* 邊線的高度 */
    background-color: #000;
    /* 邊線的顏色 */
    margin: calc(5* var(--vw-base)) 0 0 0;
    /* 上下間距 */
}

.main6 .sw4 .entxt {
    margin-bottom: calc(0* var(--vw-base));
}

.main6 .sw4 .chtxt {
    margin-top: calc(5* var(--vw-base));
    margin-bottom: calc(20* var(--vw-base));

}

.main6 .bigtxt {
    font-family: "Noto Sans TC";
    font-weight: 200;
}

.main7 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    overflow: hidden;
}

.main7 .swiper-slide {
    position: relative;
}

.main7 .bg {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    overflow: hidden;
}

.main7 .sw1 .contain {
    position: absolute;
    right: calc(80* var(--vw-base));
    top: calc(340* var(--vw-base));
    text-align: center;
}

.main7 .sw1 .contain .txt1 {
    color: #000;
    font-size: calc(60* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
    letter-spacing: 0.075em;
}

.main7 .sw1 .contain .txt2 {
    margin: calc(0* var(--vw-base)) 0 calc(37* var(--vw-base)) 0;
    color: #000;
    font-size: calc(48* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    letter-spacing: 0;
}

.main7 .sw1 .contain .txt3 {
    color: #000;
    font-size: calc(24* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    letter-spacing: 0em;
    line-height: calc(36* var(--vw-base));
}

.main7 .sw1 .txtp,
.main7 .sw1 .peopic {
    position: absolute;
    z-index: 10;
}

.main7 .sw1 .txtp .p1 {
    color: #000;
    font-size: calc(28.855* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.025em;
}

.main7 .sw1 .txtp .p2 {
    color: #000;
    font-size: calc(38.474* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 500;
    letter-spacing: 0;
}

.main7 .sw1 .txtp1 {
    left: calc(140* var(--vw-base));
    bottom: calc(737* var(--vw-base));
}

.main7 .sw1 .txtp2 {
    right: calc(650* var(--vw-base));
    bottom: calc(510* var(--vw-base));
}


.main7 .sw1 .txtp3 {
    left: calc(20* var(--vw-base));
    bottom: calc(290* var(--vw-base));
}


.main7 .sw1 .txtp4 {
    right: calc(600* var(--vw-base));
    bottom: calc(70* var(--vw-base));
}


.main7 .sw1 .peopic {
    left: calc(300* var(--vw-base));
    top: calc(0* var(--vw-base));
    width: calc(600* var(--vw-base));
    height: auto;

}

.main7 .sw1 .pict4 {
    bottom: 0;
    width: calc(600* var(--vw-base));
    height: calc(395* var(--vw-base));
    margin-top: calc(560* var(--vw-base));
}

.main7 .fsw {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    display: flex;
    justify-content: start;
}

.main7 .fsw .pic {
    position: relative;
}

.main7 .fsw .bg {
    position: relative;
    height: 100%;
    width: auto;
}

.main7 .fsw .peo {
    position: absolute;
    left: calc(0* var(--vw-base));
    top: calc(0* var(--vw-base));
    width: calc(1108* var(--vw-base));
    height: auto;
}

.main7 .fsw .txtpng1 {
    bottom: calc(94* var(--vw-base));
    right: calc(-90* var(--vw-base));
    position: absolute;
}

.main7 .fsw .txtpng2 {
    bottom: calc(10* var(--vw-base));
    left: calc(-80* var(--vw-base));
    position: absolute;
}

.main7 .fsw .contain {
    position: relative;
    margin-left: calc(230* var(--vw-base));
    margin-bottom: calc(90* var(--vw-base));
    display: flex;
    flex-direction: column;
    justify-content: end;

}


.main7 .fsw .contain .txt1,
.main7 .fsw .contain .txt2 {
    color: #000;
    font-size: calc(21* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    letter-spacing: 0.018em;
    line-height: calc(42* var(--vw-base));
    vertical-align: bottom;
    width: calc(482* var(--vw-base));
}

.main7 .sw2 .txtpng1 {
    height: calc(827* var(--vw-base));
    width: auto;
}

.main7 .sw2 .txtpng2 {
    height: calc(465* var(--vw-base));
    width: auto;
}

.main7 .fsw .contain .txt2 {
    margin-top: calc(60* var(--vw-base));
}

.main7 .sw3 .txtpng1 {
    height: calc(580* var(--vw-base));
    width: auto;
}

.main7 .sw3 .txtpng2 {
    height: calc(428* var(--vw-base));
    width: auto;
}

.main7 .sw4 .txtpng1 {
    height: calc(750* var(--vw-base));
    width: auto;
}

.main7 .sw4 .txtpng2 {
    height: calc(333* var(--vw-base));
    width: auto;
}

.main7 .sw5 .txtpng1 {
    height: calc(617* var(--vw-base));
    width: auto;
}

.main7 .sw5 .txtpng2 {
    height: calc(329* var(--vw-base));
    width: auto;
}














.main8 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    overflow: hidden;
    /* background-color: #fff; */
}

.main8 .swiper-container,
.main8 .swiper-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.main8 .sw1{
    position: relative; 
}

.main8 .sw1 .txt{
    position: relative;
    padding-top: calc(678* var(--vw-base));
    margin-left: calc(300* var(--vw-base));
    width: calc(453* var(--vw-base));
    height: calc(150* var(--vw-base));
}

.main8 .sw1 .txt img{
object-fit: contain;
}
.main8 .sw1 .box{
    position: absolute;
    bottom:calc(0* var(--vw-base));
    left: calc(-30* var(--vw-base));
    width: calc(153* var(--vw-base));
    height: auto;
    transform: translateX(-100%);
}

.main8 .sw1 .npoint{
    position: absolute;
    bottom:calc(50* var(--vw-base));
    right: calc(-60* var(--vw-base));
    width: calc(38* var(--vw-base));
    height: auto;
}

.main8 .sw1 .pic{
    position: absolute;
    top: calc(197* var(--vw-base));
    right: calc(224* var(--vw-base));
    width: calc(783* var(--vw-base));
    height: calc(653* var(--vw-base));
}

.main8 .sw1 .pic img{
    object-fit: contain;
}

.main8 .sw2{
    position: relative; 
}

.main8 .sw2 .txt{
    position: relative;
    padding-top: calc(678* var(--vw-base));
    margin-left: calc(300* var(--vw-base));
    width: calc(453* var(--vw-base));
    height: calc(150* var(--vw-base));
}

.main8 .sw2 .txt img{
object-fit: contain;
}
.main8 .sw2 .box{
    position: absolute;
    bottom:calc(0* var(--vw-base));
    left: calc(-30* var(--vw-base));
    width: calc(153* var(--vw-base));
    height: auto;
    transform: translateX(-100%);
}

.main8 .sw2 .npoint{
    position: absolute;
    bottom:calc(50* var(--vw-base));
    right: calc(-60* var(--vw-base));
    width: calc(38* var(--vw-base));
    height: auto;
}

.main8 .sw2 .pic{
    position: absolute;
    top: calc(197* var(--vw-base));
    right: calc(160* var(--vw-base));
    width: calc(908* var(--vw-base));
    height: calc(568* var(--vw-base));
}

.main8 .sw2 .pic img{
    object-fit: contain;
}

.main8 .sw3{
    position: relative; 
}

.main8 .sw3 .txt{
    position: relative;
    padding-top: calc(678* var(--vw-base));
    margin-left: calc(300* var(--vw-base));
    width: calc(453* var(--vw-base));
    height: calc(150* var(--vw-base));
}

.main8 .sw3 .txt img{
object-fit: contain;
}
.main8 .sw3 .box{
    position: absolute;
    bottom:calc(0* var(--vw-base));
    left: calc(-30* var(--vw-base));
    width: calc(153* var(--vw-base));
    height: auto;
    transform: translateX(-100%);
}

.main8 .sw3 .npoint{
    position: absolute;
    bottom:calc(50* var(--vw-base));
    right: calc(-60* var(--vw-base));
    width: calc(38* var(--vw-base));
    height: auto;
}

.main8 .sw3 .pic{
    position: absolute;
    top: calc(197* var(--vw-base));
    right: calc(160* var(--vw-base));
    width: calc(908* var(--vw-base));
    height: calc(645* var(--vw-base));
}

.main8 .sw3 .pic img{
    object-fit: contain;
}















.main9 {
    position: relative;
    width: 100%;
    height: calc(1800* var(--vw-base));
    background-color: #edae99;
}

.main9 .top {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: calc(140* var(--vw-base));
    padding-top: calc(135* var(--vw-base));
}

.main9 .map {
    position: relative;
    width: calc(754* var(--vw-base));
    height: calc(605* var(--vw-base));
}

.main9 .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.main9-inf {
    position: relative;
    text-align: center;
}

.main9 .logo {
    margin-left: calc(104* var(--vw-base));
    margin-top: calc(84* var(--vw-base));
    width: calc(224* var(--vw-base));
    height: auto;
}

.main9 .txt1 {
    position: relative;
    font-size: calc(45* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 500;
    letter-spacing: 0.075em;
    margin-top: calc(36* var(--vw-base));
}

.main9 .txt2 {
    position: relative;
    margin-top: calc(30* var(--vw-base));
    font-size: calc(37* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    letter-spacing: 0.025em;

}

.main9 .txt3 {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: calc(15* var(--vw-base));
    font-size: calc(33* var(--vw-base));
    font-family: "Futura Std Book";
    /* width: calc(453* var(--vw-base)); */
    box-sizing: border-box;
    padding: 0 calc(20* var(--vw-base)) 0 calc(20* var(--vw-base));
    letter-spacing: 0em;

}

.main9 .txt3::before,
.main9 .txt3::after {
    content: "";
    position: absolute;
    /* width: calc(1* var(--vw-base)); */
}

.main9 .txt3::before {
    left: 0;
    top: 10%;
    /* 上方缩短 10% */
    bottom: 10%;
    /* 下方缩短 10% */
    border-left: calc(1* var(--vw-base)) solid #000;
}

.main9 .txt3::after {
    right: 0;
    top: 10%;
    /* 上方缩短 10% */
    bottom: 10%;
    /* 下方缩短 10% */
    border-right: calc(1* var(--vw-base)) solid #000;
}

.main9 .txt3 .middle-border {
    width: calc(1* var(--vw-base));
    height: 80%;
    /* 使中间边框长度缩短为 80% */
    /* background-color: #9fa0a0; */
    border-right: calc(1* var(--vw-base)) solid #000;
    position: absolute;
    top: 10%;
    /* 调整位置到中间 */
    bottom: 10%;
    left: 52.5%;
    /* 定位到父容器的中间 */
    transform: translateX(-50%);
    /* 将元素水平居中 */
}

.main9 .bottom {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: calc(220* var(--vw-base));
}

.main9 .txt4 {
    position: relative;
    margin-top: calc(96* var(--vw-base));
    font-size: calc(27* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    margin-left: calc(350* var(--vw-base));

}

.main9 .form {
    position: relative;
    width: calc(556* var(--vw-base));
    height: calc(517* var(--vw-base));
    /* overflow: hidden; */
    margin-right: calc(220* var(--vw-base));
}

form {
    width: 100%;
    box-sizing: border-box;
    padding: 0 calc(30* var(--vw-base)) 0 calc(30* var(--vw-base));
    margin: 0 auto;

}

.input {
    color: #000000;
    position: relative;
    width: 100%;
    border-bottom: #231815 solid calc(1* var(--vw-base));
    padding: calc(20* var(--vw-base)) 0;
}

.select {
    color: #000000;
    position: relative;
    width: 100%;
    border-bottom: #332622 solid calc(1* var(--vw-base));
    padding: calc(20* var(--vw-base)) 0;
}

select {
    position: relative;
    width: 100%;
    background-color: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    font-size: calc(25* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
    outline: none;
    border: none;
    cursor: pointer;
    color: #333333;
    padding-left: calc(150* var(--vw-base));
    background-image: url(../img/select.png);
    background-position-x: 99%;
    background-position-y: 62%;
    background-repeat: no-repeat;
    background-size: 3%;
}

option {
    padding-left: calc(150* var(--vw-base));
    color: #333333;
    font-size: calc(25* var(--vw-base));
    font-family: "noto sans TC";
    font-weight: 400;
}

.input-title {
    position: absolute;
    bottom: 27.5%;
    left: 0;
    font-family: "noto sans TC";
    color: #333333;
    font-size: calc(25* var(--vw-base));
    font-weight: 400;
    letter-spacing: 0.05em;
    box-sizing: border-box;
}

form input[type="text"] {
    width: 100%;
    /* height: calc(52* var(--vw-base)); */
    font-size: calc(25* var(--vw-base));
    border: none;
    background-color: transparent;
    color: #333333;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    -moz-appearance: none;
    outline: none;
    letter-spacing: 0.05em;
    font-family: 'Noto Sans TC';
    font-weight: 400;
    position: relative;
    display: block;
    padding-left: calc(150* var(--vw-base));

}

.check-item {
    height: calc(40* var(--vw-base));
    color: #333333;
    font-size: calc(25* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
}

.check-item label {
    cursor: pointer;
    position: relative;
    left: calc(-8* var(--vw-base));
    display: flex;
    align-items: center;

}

.check-item label input {
    width: 1.35vw;
    height: 1.35vw;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/check.png) no-repeat top center;
    background-size: 1.35vw 1.35vw;
    border: none;
    position: relative;
    top: 0.1vw;
    cursor: pointer;
    margin-left: calc(7* var(--vw-base));
}

.check-item label input:checked {
    background: url("../img/checked.png") no-repeat top center;
    background-size: 1.35vw 1.35vw;
}

.check-item {
    position: relative;
    display: flex;
}

.check-label {
    margin-right: calc(30* var(--vw-base));
}

form .formbtn {
    position: relative;
    width: 100%;
    display: flex;
    text-align: right;
    margin-top: calc(10* var(--vw-base));
}

form input[type="button"] {
    border: none;
    background-color: transparent;
    font-size: calc(22* var(--vw-base));
    font-weight: normal;
    color: #333333;
    ;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    outline: none;
    position: absolute;
    right: calc(0* var(--vw-base));
    font-family: "noto sans TC";
    display: block;
    cursor: pointer;
    background-image: url(../img/main9_btnbg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc(4* var(--vw-base)) calc(20* var(--vw-base));
    letter-spacing: 0.05em;

}

.main9 .agreeBtn {
    cursor: pointer;
}

.main9 .waterl {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
}

.main9 .waterl .wl1 {
    /* display: none; */
    height: 100%;
    width: calc(216* var(--vw-base));
}

.main9 .waterl .wl2 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(216* var(--vw-base));
}

.main9 .waterr {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
}

.main9 .waterr .wr1 {
    /* display: none; */
    height: calc(556* var(--vw-base));
    width: calc(263* var(--vw-base));
}

.main9 .waterr .wr2 {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(556* var(--vw-base));
    width: calc(263* var(--vw-base));
}


.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(60* var(--vw-base));
    display: none;
    z-index: 999;
}

.nav {
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(60* var(--vw-base));
    background-image: url(../img/nav-bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(15* var(--vw-base)) 0 calc(84* var(--vw-base));
    box-sizing: border-box;
}

.nav .logo {
    width: calc(100* var(--vw-base));
    height: auto;
}

.nav .contain {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.nav .contain .li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(233* var(--vw-base));
    height: 100%;
}

.nav .ig {
    position: relative;

    top: calc(3* var(--vw-base));
    width: calc(45* var(--vw-base));
    height: auto;
}

.nav .fb {
    position: relative;

    width: calc(90* var(--vw-base));
    height: auto;
}

.nav .map {
    position: relative;

    width: calc(60* var(--vw-base));
    height: auto;
}

.nav .contain .li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    /* 將分隔線放置在父容器的 50% 高度處 */
    transform: translateY(-50%);
    /* 使分隔線垂直居中 */
    height: calc(30* var(--vw-base));
    /* 分隔線的高度 */
    width: 1px;
    background-color: #000;
    /* 分隔線顏色 */
}



/*以下為崁入廣告*/
.black2 {
    width: 100%;
    position: absolute;
    z-index: 1000;
    display: none;
}
.black2 .index_pop {
    width: 100%;
    position: fixed;
    height: 100vh;
    left: 0px;
    top: 0px;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
}
.black2 .box_close {
    width: calc(40* var(--vw-base));
    height: calc(40* var(--vw-base));
    position: absolute;
    top: 30px;
    right: 30px;
    background-image: url(../img/close.png);
    background-size: contain;
    cursor: pointer;
    transition: ease-in-out 0.4s 0.6s;
}