@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-Medium";
    src: url(../../fonts/Futura\ Std\ Medium.otf);
}

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

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

@font-face {
    font-family: "jf-jinxuan-medium";
    src: url(../../fonts/jf-jinxuan-medium.otf);
}

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

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

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* --vw-base: calc(100vw / 768); */
    --vw-base: calc(min(100vw, 500px) / 768);
    /* 防止 iOS 橫屏時字體變大 */
    -webkit-text-size-adjust: none;
    /* 防止某些瀏覽器自動縮放字體 */
    text-size-adjust: none;
    /* background-color: #eef2f3; */
}

body {
    max-width: 500px;
    margin: 0 auto;
}

body,
html {}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

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

button,
input,
textarea,
select,
option {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0;
    -moz-appearance: none;
    appearance: none;
    outline: none;

}

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

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

.pic-txt {
    position: absolute;
    right: calc(14*var(--vw-base));
    bottom: calc(8*var(--vw-base));
    color: #fff;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(16*var(--vw-base));
    line-height: 1.2em;
    letter-spacing: 0.1em;
}

.comma {
    display: inline-block;
    margin: 0 -0.25em;
}

.title-comma {
    display: inline-block;
    margin: 0 -0.4em 0 0;
}


.main-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.side-menu {
    position: fixed;
    left: calc((100vw - min(100vw, 500px)) / 2 + 10*var(--vw-base));
    bottom: calc(123*var(--vw-base));
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: calc(33*var(--vw-base));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-100%);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.side-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.side-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(60*var(--vw-base));
    height: calc(60*var(--vw-base));
    border-radius: calc(10*var(--vw-base));
    background-color: #036976;
}

.side-menu-button img {
    width: calc(40*var(--vw-base));
    height: calc(40*var(--vw-base));
    object-fit: contain;
}

.sw-pic {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
    /* background-color: #000; */
    /* padding-bottom: 13.5vw; */
}

.container p {
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(19*var(--vw-base));
    letter-spacing: 0.05em;
    line-height: calc(35*var(--vw-base));
}

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

.m1 .main-bg {
    overflow: hidden;
}

.m1 .sw-bg {
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}


.m1 .main-bg .swiper-wrapper,
.m1 .main-bg .swiper-slide {
    width: 100%;
    height: 100%;
}

.m1 .box1 {
    position: absolute;
    right: calc(38*var(--vw-base));
    top: calc(67*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: end;
}

.m1 .box1 .cn {
    position: relative;
    color: #fff;
    font-family: "Noto Sans Tc";
    font-weight: 300;
    font-size: calc(22.5*var(--vw-base));
    letter-spacing: 0em;
    line-height: 1.15em;
    text-align: end;
}

.m1 .box1 .en {
    position: relative;
    margin-top: calc(10*var(--vw-base));
    color: #fff;
    font-family: "Futura-Light";
    font-size: calc(19*var(--vw-base));
    letter-spacing: 0.025em;
    line-height: 1.3em;
    text-align: end;
}

.m1 .txt1 {
    position: absolute;
    left: calc(130*var(--vw-base));
    top: calc(220*var(--vw-base));
    width: calc(315*var(--vw-base));
    height: calc(112*var(--vw-base));
}

.m1 .txt2 {
    position: absolute;
    left: calc(316*var(--vw-base));
    top: calc(329*var(--vw-base));
    width: calc(315*var(--vw-base));
    height: calc(168*var(--vw-base));
}

.m1 .txt3 {
    position: absolute;
    left: 50%;
    top: calc(983*var(--vw-base));
    width: calc(367*var(--vw-base));
    height: calc(239*var(--vw-base));
    transform: translateX(-50%);
}

.m1 .txt3 .son {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m1 .txt1 img,
.m1 .txt2 img,
.m1 .txt3 img {
    object-fit: contain;
}

.cloud1 {
    position: absolute;
    left: calc(0*var(--vw-base));
    top: calc(1160*var(--vw-base));
    width: calc(766*var(--vw-base));
    height: calc(342*var(--vw-base));
}

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

.m2 .person {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m2 .person .back-txt,
.m2 .person .shadow,
.m2 .person .main-pic {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m2 .txt1 {
    position: absolute;
    left: calc(135*var(--vw-base));
    top: calc(225*var(--vw-base));
    width: calc(336*var(--vw-base));
    height: calc(92*var(--vw-base));
}

.m2 .txt2 {
    position: absolute;
    left: calc(413*var(--vw-base));
    top: calc(322*var(--vw-base));
    width: calc(261*var(--vw-base));
    height: calc(55*var(--vw-base));
}

.m2 .txt1 img,
.m2 .txt2 img {
    object-fit: contain;
}

.m2 .txt3 {
    position: absolute;
    left: 0;
    top: calc(1017*var(--vw-base));
    width: 100%;
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(32*var(--vw-base));
    letter-spacing: 0.1em;
    line-height: 1.15em;
    text-align: center;
}

.m2 .txt4 {
    position: absolute;
    left: 0;
    top: calc(1142*var(--vw-base));
    width: 100%;
    text-align: center;
}

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

.m3 .title {
    position: absolute;
    left: calc(108*var(--vw-base));
    top: calc(180*var(--vw-base));
    width: calc(558*var(--vw-base));
    height: calc(133*var(--vw-base));
}

.m3 .title .son {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m3 .circle {
    position: absolute;
    left: calc(40*var(--vw-base));
    top: calc(418*var(--vw-base));
    width: calc(704*var(--vw-base));
    height: calc(698*var(--vw-base));
    transform: 0;
    overflow: visible;
}

.m3 .circle .pic,
.m3 .circle .line {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.m3 .circle .pic1 {
    mix-blend-mode: multiply !important;
}

.m3 .circle .circle-title1 {
    position: absolute;
    left: calc(230*var(--vw-base));
    top: calc(53*var(--vw-base));
    width: calc(99*var(--vw-base));
    height: calc(43*var(--vw-base));
}

.m3 .circle .circle-title2 {
    position: absolute;
    left: calc(230*var(--vw-base));
    top: calc(113*var(--vw-base));
    width: calc(205*var(--vw-base));
    height: calc(16*var(--vw-base));
}

.m3 .info {
    position: absolute;
    left: calc(104*var(--vw-base));
    top: calc(1193*var(--vw-base));
    width: calc(560*var(--vw-base));

}

.m3 .info p {
    font-weight: 500;
    text-align: justify;
}

.m3 .walk1 {
    position: absolute;
    left: 0;
    top: calc(1243*var(--vw-base));
    width: 100%;
    height: calc(487*var(--vw-base));
}

.m3 .walk2 {
    position: absolute;
    left: 0;
    top: calc(1700*var(--vw-base));
    width: 100%;
    height: calc(142*var(--vw-base));
}

.m3 .m3-swiper-box {
    position: absolute;
    left: 0;
    top: calc(1869*var(--vw-base));
    width: 100%;
    height: calc(239*var(--vw-base));
}

.m3 .m3-swiper {
    position: relative;
    /*寬356+右邊6再相成2=724*/
    width: calc(724*var(--vw-base));
    height: 100%;
    overflow: hidden;
}

.m3 .m3-swiper .swiper-slide {
    box-sizing: border-box;
    padding-right: calc(6*var(--vw-base));
}

.m3 .sw-next {
    position: absolute;
    right: calc(11*var(--vw-base));
    top: 50%;
    transform: translateY(-50%);
    width: calc(22*var(--vw-base));
    height: calc(51*var(--vw-base));
}

.m4 {
    position: relative;
    width: 100%;
    height: calc(1369*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.m4 .title {
    position: relative;
    margin-top: calc(126*var(--vw-base));
    width: calc(568*var(--vw-base));
    height: calc(139*var(--vw-base));
}

.m4 .title .son {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m4 .better {
    position: absolute;
    left: 0%;
    top: calc(1170*var(--vw-base));
    width: 100%;
    height: calc(93*var(--vw-base));
}

.m4 .better img {
    object-fit: contain;
}

.m4 .air-ball {
    position: absolute;
    left: 0%;
    top: 0;
    width: 100%;
    height: 100%;
}

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


.m5 .title {
    position: absolute;
    left: calc(80*var(--vw-base));
    top: calc(165*var(--vw-base));
    width: calc(492*var(--vw-base));
    height: calc(124*var(--vw-base));
}

.m5 .title .son {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m5 .content {
    position: absolute;
    left: calc(181*var(--vw-base));
    top: calc(354*var(--vw-base));
    width: calc(488*var(--vw-base));
}

.m5 .content .txt1 {
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(32*var(--vw-base));
    letter-spacing: 0.05em;
    line-height: calc(42*var(--vw-base));
}

.m5 .content .txt2 {
    position: relative;
    margin-top: calc(13*var(--vw-base));
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(24*var(--vw-base));
    letter-spacing: 0em;
    line-height: calc(42*var(--vw-base));
    text-align: justify;
}


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


.m6 .title {
    position: absolute;
    left: calc(80*var(--vw-base));
    top: calc(311*var(--vw-base));
    width: calc(540*var(--vw-base));
    height: calc(125*var(--vw-base));
}

.m6 .title .son {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m6 .content {
    position: absolute;
    left: calc(181*var(--vw-base));
    top: calc(488*var(--vw-base));
    width: calc(488*var(--vw-base));
}

.m6 .content .txt1 {
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(32*var(--vw-base));
    letter-spacing: 0.05em;
    line-height: calc(42*var(--vw-base));
}

.m6 .content .txt1 .big {
    position: relative;
    display: inline-block;
    color: #036976;
    font-size: calc(40*var(--vw-base));
}

.m6 .content .txt2 {
    position: relative;
    margin-top: calc(13*var(--vw-base));
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(24*var(--vw-base));
    letter-spacing: 0em;
    line-height: calc(42*var(--vw-base));
    text-align: justify;
}

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


.m7 .title {
    position: absolute;
    left: calc(80*var(--vw-base));
    top: calc(165*var(--vw-base));
    width: calc(414*var(--vw-base));
    height: calc(125*var(--vw-base));
}

.m7 .title .son {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m7 .content {
    position: absolute;
    left: calc(181*var(--vw-base));
    top: calc(354*var(--vw-base));
    width: calc(495*var(--vw-base));
}

.m7 .content .txt1 {
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(32*var(--vw-base));
    letter-spacing: 0em;
    line-height: calc(42*var(--vw-base));
}

.m7 .content .txt2 {
    position: relative;
    margin-top: calc(13*var(--vw-base));
    color: #033339;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(24*var(--vw-base));
    letter-spacing: 0em;
    line-height: calc(42*var(--vw-base));
    text-align: justify;
}

.m8 {
    position: relative;
    width: 100%;
    height: calc(1559*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #057381;
}

.m8 .title {
    position: relative;
    margin-top: calc(331*var(--vw-base));
    width: calc(330*var(--vw-base));
    height: calc(98*var(--vw-base));
}

.m8 .title img,
.m8 .li img {
    object-fit: contain;
}

.m8 .li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m8 .info1 {
    position: relative;
    margin-top: calc(359*var(--vw-base));
    width: calc(321*var(--vw-base));
    height: calc(139*var(--vw-base));
}

.m8 .info2 {
    position: relative;
    margin-top: calc(140*var(--vw-base));
    width: calc(212*var(--vw-base));
    height: calc(162*var(--vw-base));
}

.m8 .info3 {
    position: relative;
    margin-top: calc(60*var(--vw-base));
    width: calc(514*var(--vw-base));
    height: calc(99*var(--vw-base));
}


.m8 .m8-phone {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(240*var(--vw-base));
    height: 100%;
    /* background-color: #3c9fac; */
}

.m8 .m8-address {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(260*var(--vw-base));
    height: 100%;
    /* background-color: #a78763; */
}

.m9 {
    position: relative;
    width: 100%;
    height: calc(1366*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #057381;
}

.form {
    width: calc(580*var(--vw-base));
    height: auto;
    position: relative;
    margin: calc(0*var(--vw-base)) 0 0vw 0;
    z-index: 20;
}

/* ==========================================================================
   表單樣式 (Form Styling) - 主顏色 #193e46 與底線樣式重構
   ========================================================================== */

.form form {
    width: 100%;
}

.form .form-title {
    width: calc(112 * var(--vw-base));
    margin: 0 auto calc(0 * var(--vw-base)) auto;
}

.form-title-word {
    font-family: "jf-jinxuan-medium", sans-serif;
    font-size: calc(38 * var(--vw-base));
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.075em;
    text-align: center;
    margin: calc(30 * var(--vw-base)) 0 calc(60 * var(--vw-base)) 0;
    position: relative;
    z-index: 5;
}

/* 每個表單欄位的外層容器 */
.form-group {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--vw-base));
    margin-bottom: calc(50 * var(--vw-base));
    padding-bottom: calc(8 * var(--vw-base));
    border-bottom: 1px solid #ffffff8c;
    /* 主顏色底線 #193e46 */
}

/* 姓名欄位特化：底線僅加在輸入框下方，右側先生/小姐勾選不含底線 */
.form-group.name-group {
    border-bottom: none;
    padding-bottom: 0;
    gap: calc(30 * var(--vw-base));
}

.form-group.name-group .input-wrap {
    border-bottom: 1px solid #ffffff8c;
    padding-bottom: calc(8 * var(--vw-base));
}

/* 房型需求欄位不需要底線 */
.form-group.room-group {
    border-bottom: none;
    align-items: center;
    margin-bottom: calc(35 * var(--vw-base));
    padding-bottom: 0;
    /* gap: calc(30 * var(--vw-base)); */
}

.room-title {
    font-family: "jf-jinxuan-medium", sans-serif;
    font-size: calc(26 * var(--vw-base));
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.2em;
    flex-shrink: 0;
}

/* 輸入框容器 */
.input-wrap {
    flex: 1;
}

.input-wrap input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: "jf-jinxuan-medium", sans-serif;
    font-size: calc(26 * var(--vw-base));
    color: #ffffff;
    /* 主顏色 #193e46 */
    font-weight: 400;
    letter-spacing: 0.2em;
    outline: none;
    box-sizing: border-box;
    padding: 0;
    height: calc(32 * var(--vw-base));
    line-height: calc(32 * var(--vw-base));
}

/* 聯繫時段下拉選單 */
.contact-time-group .input-wrap {
    position: relative;
}

.form select {
    width: 100%;
    border: none;
    background: transparent;
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(26 * var(--vw-base));
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.2em;
    outline: none;
    box-sizing: border-box;
    padding: 0 calc(40 * var(--vw-base)) 0 0;
    height: calc(32 * var(--vw-base));
    line-height: calc(32 * var(--vw-base));
    cursor: pointer;
}

.form select:valid {
    padding-left: calc(10 * var(--vw-base));
}

.form select option {
    color: #033339;
    background-color: #ffffff;
}

.contact-time-group .input-wrap::after {
    content: "";
    position: absolute;
    right: calc(4 * var(--vw-base));
    top: 50%;
    transform: translateY(-35%);
    border-left: calc(14 * var(--vw-base)) solid transparent;
    border-right: calc(14 * var(--vw-base)) solid transparent;
    border-top: calc(20 * var(--vw-base)) solid #ffffff;
    pointer-events: none;
}

/* 提示文字 (Placeholder) 樣式 */
.form input::placeholder {
    font-family: "jf-jinxuan-medium", sans-serif;
    font-size: calc(26 * var(--vw-base));
    color: #ffffff;
    /* #193e46 透明度 */
    font-weight: 400;
    letter-spacing: 0.2em;
}

/* Chrome/Safari/Opera autofill 修正 */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Checkbox & Radio 群組 */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: calc(30 * var(--vw-base));
    flex-wrap: wrap;
}

.gender-group {
    gap: calc(25 * var(--vw-base));
    flex-shrink: 0;
}

/* 通用自訂 checkbox 樣式 */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(40 * var(--vw-base));
    height: calc(40 * var(--vw-base));
    background: url("../img/check.png") no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    margin: 0;
    margin-right: calc(10 * var(--vw-base));
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked,
.checkbox-label input[type="radio"]:checked {
    background-image: url("../img/checked.png");
}

.checkbox-label span {
    font-family: "jf-jinxuan-medium", sans-serif;
    font-size: calc(26 * var(--vw-base));
    color: #ffffff;
    /* 主顏色 #193e46 */
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
}

.agree-title {
    position: relative;
    text-align: center;
    color: #ffffff;
    font-size: calc(24*var(--vw-base));
    font-family: "jf-jinxuan-medium", sans-serif;
    font-weight: 400;
    letter-spacing: 0.15em;

}

/* 個資聲明容器 */
.agree-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(45 * var(--vw-base));
    margin-bottom: calc(45 * var(--vw-base));
}

.agree-group .checkbox-label span {
    letter-spacing: 0.1em;
}

.agree-group .openTxtBtn {
    font-family: "jf-jinxuan-medium", sans-serif;
    font-size: calc(26 * var(--vw-base));
    color: #ffffff;
    /* 主顏色 #193e46 */
    font-weight: 400;
    letter-spacing: 0.2em;
    text-decoration: underline;
    text-underline-offset: calc(10 * var(--vw-base));
    cursor: pointer;
    margin-left: calc(15 * var(--vw-base));
}

/* 送出按鈕樣式 */
.submit-wrap {
    width: 100%;
    position: relative;
}

.submit-wrap button {
    width: 100%;
    height: calc(60 * var(--vw-base));
    background-color: #ffffff;
    /* 主顏色背景 #193e46 */
    color: #047280;
    border: none;
    font-family: "Butler_Regular", sans-serif;
    font-size: calc(24 * var(--vw-base));
    letter-spacing: 0.15em;
    text-indent: 0.15em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.m9 .info {
    position: absolute;
    left: calc(92 * var(--vw-base));
    top: calc(998 * var(--vw-base));
    font-family: "jf-jinxuan-medium", sans-serif;
    font-size: calc(17 * var(--vw-base));
    color: #ffffff;
    letter-spacing: 0.25em;
    line-height: calc(29*var(--vw-base));
    opacity: 0.8;
}

.m9 .icon-wolf {
    position: absolute;
    right: calc(43*var(--vw-base));
    top: calc(1147*var(--vw-base));
    width: calc(148*var(--vw-base));
    height: calc(87*var(--vw-base));
}













/*同意書照片預覽*/

.black_pc {
    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";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.black_pc .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;
}

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

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

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

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

.black_ph {
    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: "微軟正黑體";
}

.black_ph .closeBtn {
    width: 30px;
    position: absolute;
    right: 3%;
    top: 3%;
}

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

.black_ph .infoWrap ul {
    list-style: none;
    font-size: 3.5vw;
    padding-inline-start: 7vw;
}

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

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

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

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

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

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

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

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

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

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

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

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

.black_ph .infoBox h4 {
    font-size: 3.5vw;
    line-height: 130%;
    margin-bottom: 25px;
}

.black_ph .infoBox h5 {
    font-size: 4vw;
    line-height: 130%;
    margin-bottom: 25px;
}

.black_ph .infoBox p {
    font-size: 3.5vw;
    line-height: 150%;
}