@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: "DIN-Regular";

    src: url(../fonts/DIN-Regular.otf);

}



@font-face {

    font-family: "GenYoGothic2TW-EL";

    src: url(../fonts/GenYoGothic2TW-EL.otf);

}



@font-face {

    font-family: "GenYoGothic2TW-M";

    src: url(../fonts/GenYoGothic2TW-M.otf);

}



@font-face {

    font-family: "Futura-Std-Book";

    src: url(../fonts/FuturaStdBook.otf);

}



.din-r {

    font-family: "DIN-Regular";

    font-weight: lighter;

}



.gy-n {

    font-family: "GenYoGothic2TW-EL";

}



.gy-m {

    font-family: "GenYoGothic2TW-M";

}



.futura-b {

    font-family: "Futura-Std-Book";

}



[data-aos="opacity-up"] {

    opacity: 1;

    clip-path: inset(100% 0 0% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-up"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}



[data-aos="opacity-down"] {

    opacity: 1;

    clip-path: inset(0% 0 100% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-down"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}





[data-aos="opacity-left"] {

    opacity: 1;

    clip-path: inset(0% 100% 0% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-left"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}



[data-aos="opacity-right"] {

    opacity: 1;

    clip-path: inset(0% 0% 0% 100%);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-right"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}



[data-aos="opacity-y"] {

    opacity: 0;

}



[data-aos="opacity-y"].aos-animate {

    animation: opacity-y 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;

    animation-delay: 0s;

}



@keyframes opacity-y {

    0% {

        opacity: 0;

        clip-path: inset(50% 0 50% 0);

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 1;

        clip-path: inset(0 0 0 0);

    }

}



/* 自定義 AOS：Scale Fade (1.05 -> 1.00) */

[data-aos="scale-fade"] {

    opacity: 0;

    transform: scale(1.05);

    transition-property: transform, opacity;

}



[data-aos="scale-fade"].aos-animate {

    opacity: 1;

    transform: scale(1);

}



/* 自定義 AOS：Clip Down (由上往下) */

[data-aos="clip-down"] {

    opacity: 1;

    clip-path: inset(0 0 100% 0);

}



[data-aos="clip-down"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    transition-property: clip-path;

}



body,

html {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    scroll-behavior: smooth;

    --vw-base: calc(100vw / 1920);

}



body>* {}



h1,

h2,

h3,

h4,

h5,

h6,

p {

    margin: 0;

    padding: 0;

}



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 {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.pic-txt {

    position: absolute;

    bottom: calc(8* var(--vw-base));

    right: calc(8* var(--vw-base));

    color: #fff;

    font-size: calc(12* var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

    line-height: calc(20* var(--vw-base));

    z-index: 10;

    text-shadow: #4e484698 1px 1px 1px;

}





.sw-prev {

    position: absolute;

    width: 1vw !important;

    height: 2vw !important;

    left: 0 !important;

    top: calc(50% - 1vw);

    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;

    cursor: pointer;

}



.sw-next {

    position: absolute;

    width: 1vw !important;

    height: 2vw !important;

    right: 0;

    top: calc(50% - 1vw);

    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;

    cursor: pointer;

}



.m6 .sw-next {

    right: 1.315vw;

}



.sw-pic {

    position: relative;

}



/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

}





/*footer-nav*/



.footer-nav {

    width: 2.5vw;

    position: fixed;

    height: auto;

    bottom: 8%;

    right: 2vw;

    z-index: 999;

    box-sizing: border-box;

    display: none;

}



.footer-nav-all {

    width: 100%;

    margin: 0 auto;

}



.footer-nav-li {

    width: 100%;

    height: 2.5vw;

    position: relative;

    display: block;

    margin: 0 0 0.6vw 0;

    transition: all 0.5s linear;

    background: rgba(0, 0, 0, 0.5);

}



.footer-nav-li:hover {

    opacity: 0.7;

}



.footer-fb {

    width: 29%;

    height: auto;

    display: block;

    margin: 0 auto 0 auto;

    padding: 25% 0 0 0;

}



.footer-book {

    width: 47%;

    height: auto;

    display: block;

    margin: 0 auto 0 auto;

    padding: 25% 0 0 0;

}



.footer-map {

    width: 38%;

    height: auto;

    display: block;

    margin: 0 auto 0 auto;

    padding: 26% 0 0 0;

}



.footer-tel {

    width: 47%;

    height: auto;

    display: block;

    margin: 0 auto 0 auto;

    padding: 28% 0 0 0;

}



.m1-box {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

}



.m1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    /* 白色背景開始 */

}



.m1-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-title-bg {

    position: absolute;

    left: calc(820*var(--vw-base));

    top: calc(151*var(--vw-base));

    transform: translate(-50% -50%);

    width: calc(298*var(--vw-base));

    height: calc(500*var(--vw-base));

    mix-blend-mode: multiply;

}



.m1-title {

    position: absolute;

    left: calc(716*var(--vw-base));

    top: calc(392*var(--vw-base));

    transform: translate(-50% -50%);

    width: calc(506*var(--vw-base));

    height: calc(173*var(--vw-base));

}



.m1-title-pic {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-title-pic img {

    object-fit: contain;



}



.m1-txt {

    position: absolute;

    left: 0;

    top: calc(692*var(--vw-base));

    width: 100%;

    color: #fff;

    font-size: calc(35*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    /* font-weight: lighter; */

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

    z-index: 10;

    text-align: center;

}





.m1-txt .num {

    font-family: "DIN-Regular";

    font-weight: lighter;

    font-size: calc(41*var(--vw-base));

}



.m1b {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    /* 白色背景開始 */

}



.m1b-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1b-txt {

    position: absolute;

    left: calc(1106*var(--vw-base));

    top: calc(396*var(--vw-base));

    color: #4a9ed8;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.15em;

    line-height: calc(54*var(--vw-base));

}



.m1b-txt2 {

    margin-top: calc(8*var(--vw-base));

}



.m1b-txt3 {

    margin-top: calc(22*var(--vw-base));

}



.m1b-txt4 {

    margin-top: calc(12*var(--vw-base));

}



.m2 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

}



.m2-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}





.m2-txt {

    position: absolute;

    left: calc(283*var(--vw-base));

    top: calc(458*var(--vw-base));

    display: flex;

    flex-direction: column;

    align-items: start;

}



.m2-txt1 {

    color: #fff;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.15em;

    line-height: calc(54*var(--vw-base));

}





.m2-txt2 {

    margin-top: calc(45*var(--vw-base));

    color: #fff;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.15em;

    line-height: calc(54*var(--vw-base));

}



.m2-txt3 {

    margin-top: calc(36*var(--vw-base));

    color: #fff;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m3 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: calc(100*var(--vw-base));

}



.m3-box {

    position: relative;

    display: flex;

    align-items: start;

    gap: calc(96*var(--vw-base));

}



.m3-txt {

    position: relative;

    width: calc(462*var(--vw-base));



}



.m3-txt h2 {

    color: #615f5f;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

}



.m3-txt h3 {

    margin-top: calc(45*var(--vw-base));

    color: #44403f;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m3-txt .txt-line {

    margin-top: calc(17*var(--vw-base));

    width: 100%;

    height: 1px;

    background-color: #30a1d2;

}



.m3-swiper {

    position: relative;

    width: calc(380*var(--vw-base));

    height: calc(260*var(--vw-base));

}



.sw-title {

    color: #44403f;

    font-size: calc(20*var(--vw-base));

    font-family: "GenYoGothic2TW-L";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.sw-txt-content {

    margin-top: calc(7*var(--vw-base));

    color: #44403f;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-L";

    letter-spacing: 0.05em;

    line-height: calc(30*var(--vw-base));

}



/* 文字切換動畫容器 */

.sw-txt-box {

    margin-top: calc(17*var(--vw-base));

}



.m4 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

    overflow: hidden;

}



.m4-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m4-txt1 {

    position: absolute;

    left: calc(400*var(--vw-base));

    top: calc(175*var(--vw-base));

    color: #fff;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

}



.m4-txt2 {

    position: absolute;

    left: calc(960*var(--vw-base));

    top: calc(186*var(--vw-base));

    color: #fff;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m4-loc-txt {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

}



.m4 .margin-title {

    margin-left: -0.5vw;

}



.m5 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: calc(131*var(--vw-base));

}



.m5-txt {

    width: calc(560*var(--vw-base));



}



.m5-txt h2 {

    color: #615f5f;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

}



.m5-txt h4 {

    margin-top: calc(22*var(--vw-base));

    color: #44403f;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m5-swiper {

    width: calc(619*var(--vw-base));

    height: calc(463*var(--vw-base));

    margin: 0;



}





.m6 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: calc(40*var(--vw-base));

}



.m6-contain {

    /* width: calc(574*var(--vw-base)); */

}



.m6-contain h2 {

    position: relative;

    margin-bottom: calc(60*var(--vw-base));

    color: #615f5f;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

}



.m6-contain h4 {

    position: relative;

    margin-top: calc(22*var(--vw-base));

    color: #44403f;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m6-mrt {

    position: relative;

    width: calc(774*var(--vw-base));

    height: calc(332*var(--vw-base));

}



.m6-mrt img {

    object-fit: contain;

}



.m6-swiper {

    position: relative;

    margin-top: calc(47*var(--vw-base));

    width: calc(594*var(--vw-base));

    height: calc(220*var(--vw-base));

}



.m6-swiper .swiper-slide {

    box-sizing: border-box;

    padding-right: calc(25*var(--vw-base));

}



.m6-swiper-block {

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;

    width: calc(25*var(--vw-base));

    background-color: #fff;

    z-index: 99;

}



.m6-shadow {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: calc(98*var(--vw-base));

    mix-blend-mode: multiply;

}



.m7 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

    box-sizing: border-box;

    padding: calc(189*var(--vw-base)) 0 0 calc(277*var(--vw-base));

}



.m7-title {

    position: relative;

    color: #615f5f;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

}



.m7-cards {

    position: relative;

    margin-top: calc(114*var(--vw-base));

    display: grid;

    grid-template-columns: repeat(2, auto);

    /* grid-template-rows: repeat(2, auto); */

    gap: calc(65*var(--vw-base));

    width: fit-content;

}





.m7-card {

    width: calc(662*var(--vw-base));

    height: calc(220*var(--vw-base));

    display: flex;

    justify-content: space-between;

}



.m7-txt {

    width: calc(323*var(--vw-base));

    /* height: calc(168*var(--vw-base)); */

}



.m7-txt h2 {

    color: #615f5f;

    font-size: calc(20*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

}



.m7-txt h4 {

    margin-top: calc(30*var(--vw-base));

    color: #44403f;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.01em;

    line-height: calc(22.8*var(--vw-base));

    text-align: justify;

}



.m7-swiper {

    margin: 0;

    width: calc(300*var(--vw-base));

    height: 100%;

}



.m7 .sw-shadow {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: calc(88*var(--vw-base));

    mix-blend-mode: multiply;

}





.m8 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

    box-sizing: border-box;

    padding: calc(212*var(--vw-base)) 0 0 calc(316*var(--vw-base));

}





.m8-title {

    position: relative;

    color: #615f5f;

    font-size: calc(22*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

    display: flex;

    flex-direction: column;

    gap: calc(20*var(--vw-base));

}



.m8-cards {

    position: relative;

    margin-top: calc(50*var(--vw-base));

    display: flex;

    gap: calc(70*var(--vw-base));



}



.m8-card {

    width: calc(380*var(--vw-base));

    display: flex;

    flex-direction: column;

    align-items: start;

}



.m8-swiper {

    width: 100%;

    height: calc(240*var(--vw-base));

}



.m8-card-txt {

    display: flex;

    flex-direction: column;



}



.m8-cate {

    margin-top: calc(15*var(--vw-base));

    color: #44403f;

    font-size: calc(14*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m8-zh-name {

    margin-top: calc(10*var(--vw-base));

    color: #44403f;

    font-size: calc(25*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(26*var(--vw-base));

}



.m8-en-name {

    margin-top: calc(0*var(--vw-base));

    color: #44403f;

    font-size: calc(14.5*var(--vw-base));

    font-family: "DIN-Regular";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}





.m8-txt {

    margin-top: calc(15*var(--vw-base));

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m8-project {

    margin-top: calc(15*var(--vw-base));

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.m8 .swiper-slide .sw-pic {

    width: 100%;

    height: 100%;



}



.m9 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

    box-sizing: border-box;



}



.m9-title {

    position: absolute;

    left: 2vw;

    top: 2vw;

    color: #fff;

    font-size: calc(20*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22*var(--vw-base));

    z-index: 10;

}



.m9-swiper {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m9-swiper .sw-pic {

    width: 100%;

    height: 100%;

    scale: 1.08;

    transition: all 5s ease-in-out;

}



.m9-swiper .swiper-slide {

    overflow: hidden;

}



.m9-swiper .swiper-slide-active .sw-pic {

    scale: 1;

}



.m9-swiper .swiper-slide-active .sw-pic {

    object-fit: cover;

}





.m10 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    /* 白色背景開始 */

    box-sizing: border-box;



}



.m10-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}





.m10-title {

    position: absolute;

    left: calc(260*var(--vw-base));

    top: calc(396*var(--vw-base));

    width: calc(141*var(--vw-base));

    height: calc(236*var(--vw-base));

}



.m10-title .t1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m10-title .shine {



    /* background-color: #fff; */



}



[data-aos="shine"] {

    opacity: 1;

    animation-delay: 2s;



}



[data-aos="shine"].aos-animate {

    animation: shine 2.5s ease-in-out infinite alternate;



}



@keyframes shine {

    0% {

        opacity: 0.7;

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 0.2;

    }

}



.m10-contain {

    position: absolute;

    left: calc(468*var(--vw-base));

    top: calc(300*var(--vw-base));

    display: flex;

    width: calc(724*var(--vw-base));

    justify-content: space-between;

}



.m10-contain ul {

    /* width: calc(356*var(--vw-base)); */

    display: flex;

    flex-direction: column;

    gap: calc(30*var(--vw-base));

}



.m10-contain ul li {

    display: flex;

    align-items: start;



}



.m10-contain ul li.num-margin-l {

    margin-left: calc(-16*var(--vw-base));

}



.m10-contain li .num {

    color: #fff;

    font-family: "DIN-Regular";

    font-size: calc(25*var(--vw-base));

    letter-spacing: 0.05em;

    line-height: calc(25*var(--vw-base));

}



.m10-contain li .line {

    margin: 0 calc(8*var(--vw-base));

    width: 1px;

    height: calc(24*var(--vw-base));

    background-color: #fff;

}



.m10-contain li .txt {

    display: flex;

    flex-direction: column;



}



.m10-contain li .txt h2 {

    color: #fff;

    font-size: calc(25*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(25*var(--vw-base));

}



.m10-contain li .txt h4 {

    margin-top: calc(10*var(--vw-base));

    color: #fff;

    font-size: calc(14.5*var(--vw-base));

    font-family: "GenYoGothic2TW-EL";

    letter-spacing: 0.05em;

    line-height: calc(22.8*var(--vw-base));

}



.center-line {

    position: absolute;

    top: 0;

    left: 50%;

    width: 1px;

    height: 100%;

    background-color: #8cd1ee;

}



.m11 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    display: flex;

    align-items: center;

    justify-content: center;

    gap: calc(60*var(--vw-base));

}



.m11-map {

    position: relative;

    width: calc(870*var(--vw-base));

    height: calc(870*var(--vw-base));

}



.m11-map iframe {

    width: 100%;

    height: 100%;

    border: none;

}



.m11-contain {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: start;

    width: 27vw;

}



.m11-info li {

    font-family: "GenYoGothic2TW-EL";

    font-size: calc(16*var(--vw-base));

    letter-spacing: 0.05em;

    line-height: calc(24*var(--vw-base));

}



.m11-contain .line {

    margin: calc(20*var(--vw-base)) 0;

    position: relative;

    width: 100%;

    height: 1px;

    background-color: #c6d9c0;

}



.form {

    width: 100%;

    height: auto;

    position: relative;



    font-family: 'Noto Sans TC', sans-serif;

    color: #4c4948;

    z-index: 2;

}



.form-title {

    width: 100%;

    margin: 0 0 1.2vw 0;

    font-family: 'Noto Sans TC', sans-serif;

    color: #168dcd;

}



.form-title h4 {

    font-weight: normal;

    font-size: 1.2vw;

    letter-spacing: 0.1vw;

    margin: 0;

}



.input {

    width: 100%;

    position: relative;

    height: 2.7vw;

    line-height: 2.7vw;

    margin-bottom: 0.3vw;

    font-weight: 600;

    border: 0.5px solid #c6d9c0;

}



.input-li {

    width: 40%;

    position: absolute;

    height: 2.7vw;

    line-height: 2.7vw;

    left: 57%;

    top: 0;

}



.input-li2 {

    width: 50%;

    left: 0vw;

}



.input-li3 {

    width: 50%;

    left: 47%;

}



.check-item-sex {

    position: absolute;

    right: 0.3vw;

    top: 50%;

    transform: translateY(-50%);

    height: 2.7vw;

    line-height: 2.7vw;

    font-size: 1vw;

    letter-spacing: 0.2vw;

    font-family: 'Noto Sans TC', sans-serif;

    display: block;

    color: #4c4948;

    z-index: 1;

    font-weight: lighter;

}



.check-item-sex label {

    width: 4.5vw;

    height: 2.7vw;

    line-height: 2.7vw;

    cursor: pointer;

    display: block;

    float: left;

}



.check-item-sex label input[type="radio"] {

    width: 1vw;

    height: 1vw;

    margin: 0% 7% -0.8% 0;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background: url(../img/check.png) no-repeat top center;

    background-size: 1vw 1vw;

    border: none;

    cursor: pointer;

}



.check-item-sex label input:checked {

    background: url("../img/checked.png") no-repeat top center;

    background-size: 1vw 1vw;

}



.input-title {

    position: absolute;

    left: 1vw;

    top: 50%;

    transform: translateY(-50%);

    height: 2.7vw;

    line-height: 2.7vw;

    font-size: 1vw;

    letter-spacing: 0.1vw;

    font-family: 'Noto Sans TC', sans-serif;

    font-weight: lighter;

    z-index: 1;

    color: #4c4948;

}



.form input[type="text"],

.form input[type="date"],

.form input[type="time"],

.form select {

    width: 84.5%;

    margin: 0 0 0 20.5%;

    height: 2.7vw;

    line-height: 2.7vw;

    font-size: 1vw;

    letter-spacing: 0.1vw;

    border: none;

    background-color: transparent;

    color: #4c4948;

    box-sizing: border-box;

    border-radius: 3px;

    outline: none;

    font-family: 'Noto Sans TC', sans-serif;

    padding: 0 0 0 1vw;

    position: relative;

    box-sizing: border-box;

    display: block;

    font-weight: lighter;

}



/* .form .input input[type="date"], */

.form .input select {

    width: 75%;

    background-image: url(../img/select.svg);

    background-position-x: 100%;

    background-position-y: 50%;

    background-repeat: no-repeat;

    background-size: 0.8vw;

}



.form .input input[type="date"] {

    width: 75.7%;

}



.input-li input[type="text"],

.input-li input[type="date"],

.input-li input[type="time"],

.input-li select {

    width: 48%;

    margin: 0 0 0 53%;

}



.input-li2 input[type="text"],

.input-li2 input[type="date"],

.input-li2 input[type="time"] {

    width: 51%;

    margin: 0 0 0 43%;

}



.input-li3 input[type="text"],

.input-li3 input[type="date"],

.input-li3 input[type="time"] {

    width: 57%;

    margin: 0 0 0 43%;

}



.form input::placeholder {

    color: #4c4948 !important;

}



.check-item {

    width: 61%;

    height: 2.7vw;

    line-height: 2.7vw;

    font-size: 1vw;

    letter-spacing: 0.1vw;

    color: #4c4948;

    margin: 0vw auto 0 auto;

    vertical-align: middle;

    font-weight: normal;

    position: relative;

    text-align: center;

}



.check-item::after {

    content: "";

    clear: both;

    display: block;

}



.check-item a:link,

.check-item a:visited,

.check-item a:hover,

.check-item a:active {

    color: #4c4948;

}



.check-label {

    width: 36%;

    height: 3vw;

    line-height: 3vw;

    float: left;

}



.check-item label {

    height: 2.7vw;

    line-height: 2.7vw;

    cursor: pointer;

}



.check-item label input {

    width: 1vw;

    height: 1vw;

    margin: 0% 1% -2.5% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background: url(../img/check.png) no-repeat top center;

    background-size: 1vw 1vw;

    border: none;

}



.check-item label input:checked {

    background: url("../img/checked.png") no-repeat top center;

    background-size: 1vw 1vw;

}



.agreeBtn {

    height: 2.7vw;

    float: left;

}



.openTxtBtn {

    display: inline-block;

    height: 2.3vw;

    line-height: 3vw !important;

    border-bottom: 1px solid #4c4948;

    cursor: pointer;

}



.form input[type="submit"],

.form input[type="button"] {

    width: 100%;

    height: 2.7vw;

    letter-spacing: 0.2vw;

    border: none;

    background-color: #168dcd;

    font-size: 1vw;

    font-weight: normal;

    color: #fff;

    box-sizing: border-box;

    -webkit-appearance: none;

    border-radius: 0;

    outline: none;

    font-family: 'Noto Sans TC', sans-serif;

    display: block;

    padding: 0;

    margin: 0.5vw 0 0 0;

    cursor: pointer;

    border-radius: 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

}



.remind {

    font-family: 'Noto Sans TC', sans-serif;

    font-size: 0.7vw;

    letter-spacing: 0vw;

    text-indent: 0.3vw;

    text-align: center;

    width: 100%;

    position: relative;

    margin: 0.6vw 0 0 0;

    color: #5f5f5e;

}



input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-text-fill-color: #4c4948;

    -webkit-box-shadow: 0 0 0px 1000px transparent inset;

    /*淡淡的白*/

    transition: background-color 5000s ease-in-out 0s;

    /*透明*/

}















































/*同意書照片預覽*/



.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%;

}