@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");









[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);

    /* 显示全部图片 */

}



@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);

    }

}





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 {

    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;

}



video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    object-position: top center;

}



/*內容*/

.container {

    width: 100%;

    height: auto;

    position: relative;

    /* background-color: #00ff00; */

    background-image: url(../img/main-bg.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

}



.m1 {

    position: relative;

    width: 100%;

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;



}



.m1-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

}



.m1-txt-box {

    position: absolute;

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m1-txt1 {

    position: relative;

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

}



.m1-txt2 {

    position: relative;

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

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

}





.m1-txt3 {

    position: relative;

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

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

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

}



.m1-txt3>div {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-txt img,

.m1-txt3 img,

.m1-pics img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.m1-pics {

    position: absolute;

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

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

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

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

}



.m1-pic-sweep1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    mask-image: url(../img/main-pic1.png);

    mask-size: cover;

    mask-repeat: no-repeat;

    mask-position: center;

    -webkit-mask-image: url(../img/main-pic1.png);

    -webkit-mask-size: cover;

    -webkit-mask-repeat: no-repeat;

    -webkit-mask-position: center;

}



.m1-pic-sweep1::before {

    content: '';

    position: absolute;

    top: 50%;

    left: -30%;

    width: 30%;

    height: 100%;

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0) 100%);

    transform: skewX(-15deg) translateY(-50%);

    opacity: 1;

    /* 初始掃光效果為透明 */

    z-index: 999;

    will-change: transform;

    animation: lightSweep 6s linear infinite 1.5s;

}



.m1-pic-sweep2 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    mask-image: url(../img/main-pic3.png);

    mask-size: cover;

    mask-repeat: no-repeat;

    mask-position: center;

    -webkit-mask-image: url(../img/main-pic3.png);

    -webkit-mask-size: cover;

    -webkit-mask-repeat: no-repeat;

    -webkit-mask-position: center;

    overflow: hidden;

}



.m1-pic-sweep2::before {

    content: '';

    position: absolute;

    top: 50%;

    left: -30%;

    width: 30%;

    height: 100%;

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 100%);

    transform: skewX(-15deg) translateY(-50%);

    opacity: 1;

    /* 初始掃光效果為透明 */

    z-index: 999;

    will-change: transform;

    animation: lightSweep 6s linear infinite 1.5s;

}



/* 掃光動畫的 keyframes */

@keyframes lightSweep {

    0% {

        left: -30%;

        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.64) 30%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0.64) 70%, rgba(255, 255, 255, 0) 100%);

    }



    50% {

        /* background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 100%); */

    }



    100% {

        left: 70%;

        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.64) 30%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0.64) 70%, rgba(255, 255, 255, 0) 100%);

    }

}









.m1-pic {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    user-select: none;

    pointer-events: none;

}



/* 讓 --angle 可被動畫插值（Chrome/Firefox/Safari 15.4+） */

@property --angle {

    syntax: '<angle>';

    inherits: false;

    initial-value: 0deg;

}



/* 可調整：--start 起點角度、--dur 動畫時間 */

.sweep {

    --start: 0deg;

    /* 12 點 = -90deg；西南方改 225deg */

    --dur: 1.6s;

    --delay: 0.4s;

    display: block;

    /* 以圓心從 --start 角度順時針揭露 */

    -webkit-mask-image: conic-gradient(from var(--start),

            #000 0 var(--angle), transparent var(--angle) 1turn);

    mask-image: conic-gradient(from var(--start),

            #000 0 var(--angle), transparent var(--angle) 1turn);

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;

    mask-size: 100% 100%;



    /* 動畫：將 --angle 從 0 轉到 360 度 */

    --angle: 0deg;

    animation: sweep-reveal var(--dur) cubic-bezier(0.45, 0, 0.55, 1) var(--delay) forwards;

}



/* 起點改「西南方」→ 225deg */

.sweep.sw {

    --start: 225deg;

}



@keyframes sweep-reveal {

    from {

        --angle: 0deg;

    }



    to {

        --angle: 360deg;

    }

}



/* 無障礙：使用者偏好減少動效時，直接顯示完整 */

@media (prefers-reduced-motion: reduce) {

    .sweep {

        animation: none;

        --angle: 360deg;

    }

}



.m1-txt4 {

    position: relative;

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

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

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

}



.m1-txt4>div {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-txt4 img {

    object-fit: contain;

}



.form {

    position: relative;

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

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

}



.form-title {

    position: relative;

    width: 100%;

}



.form-bottom {

    position: relative;

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

    width: 100%;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

    letter-spacing: 0.23em;

    word-wrap: nowrap;

    white-space: nowrap;



}



.form-container {

    position: relative;

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

    display: flex;

    flex-direction: column;

    align-self: center;

    width: 100%;

}



.input {

    position: relative;

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

    width: 100%;

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

    box-sizing: border-box;

    display: flex;

    justify-content: space-between;

    align-items: center;

    /* box-sizing: border-box;

    padding: 0 calc(15*var(--vw-base)); */

    background-color: #159a21;

    /* mix-blend-mode: color-dodge; */

}







.input label {

    position: relative;

    flex-shrink: 0;

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

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

    text-align: justify;

    text-align-last: justify;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

    letter-spacing: 0.41em;

    flex-shrink: 0;

    padding-left: calc(40*var(--vw-base));

}



.nosee {

    opacity: 0;

    user-select: none;

}





input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-text-fill-color: #fff;

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

    /*淡淡的白*/

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

    /*透明*/

}



.input input[type="text"],

.input input[type="tel"],

.input input[type="email"] {

    position: relative;

    flex-grow: 1;



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

    border: none;

    background-color: transparent;

    color: #fff;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 400;

    padding-left: calc(23*var(--vw-base));

}



.input select {

    position: relative;

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

    flex-grow: 1;

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

    border: none;

    background-color: transparent;

    color: #fff;

    box-sizing: border-box;

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

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 400;

    padding-left: calc(23*var(--vw-base));

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

    background-position-x: 96%;

    background-position-y: 50%;

    background-repeat: no-repeat;

    background-size: 3%;

}



select option {

    color: #fff;

    background-color: #159a21;

    position: relative;

    width: 100%;

    font-size: inherit;

    /* 继承 select 的字体大小 */

    color: inherit;

}



#submitbtn {

    position: relative;

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

    appearance: none;

    /* 移除預設樣式 */

    -webkit-appearance: none;

    /* 對 Safari 特別設定 */

    border-radius: 0;

    /* 將圓角設為 0 */

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

    width: 100%;

    background-color: transparent;

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: .1em;

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

    border: none;

    background-color: #0d5413;

    cursor: pointer;

    transition: all 0.3s ease;

}



#submitbtn:hover {

    background-color: #0d5413d5;

    color: #ffffffea;

}



.check-item {

    position: relative;

    width: 100%;

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

    display: flex;

    justify-content: center;

    align-items: center;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

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

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

    letter-spacing: 0.1em;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.check-item label input {

    position: relative;

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

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

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

    margin: 0% 5% -2% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background-color: #fff;

    -webkit-mask-image: url(../img/check.png);

    /* 使用 -webkit-mask-image */

    mask-image: url(../img/check.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(30 * var(--vw-base)) calc(30 * var(--vw-base));

    /* 設置大小 */

    mask-size: calc(30 * var(--vw-base)) calc(30 * var(--vw-base));

    border: none;

    cursor: pointer;

}



.check-item label input:checked {

    mask-image: url(../img/checked.png);



}



.check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

}



.check-item-sex label {

    cursor: pointer;

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

    text-align: end;

    word-wrap: nowrap;

    white-space: nowrap;



}



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

    position: relative;

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

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

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

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

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background-color: #fff;

    -webkit-mask-image: url(../img/check.png);

    /* 使用 -webkit-mask-image */

    mask-image: url(../img/check.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(30 * var(--vw-base)) calc(30* var(--vw-base));

    /* 設置大小 */

    mask-size: calc(30 * var(--vw-base)) calc(30 * var(--vw-base));

    cursor: pointer;

}



.check-item-sex label input:checked {

    mask-image: url(../img/checked.png);



}



.openTxtBtn {

    font-family: "Noto Sans TC";

    font-weight: 400;

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

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

    color: #fff;

    cursor: pointer;

    text-decoration: underline;

    text-decoration-thickness: 1px;

    padding-left: calc(5*var(--vw-base));

}









/*同意書照片預覽*/



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

}