@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: "TrajanPro-Bold";

    src: url(../fonts/TrajanPro-Bold.otf);

}

@font-face {

    font-family: "TrajanPro-Regular";

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

}

@font-face {

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

    src: url(../fonts/Futura\ Std\ Light.otf);

}

@font-face {

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

    src: url(../fonts/Futura\ Std\ Book.otf);

}

@font-face {

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

    src: url(../fonts/Futura\ Std\ Medium.otf);

}

.Futura-Std-Medium {

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

}

.Futura-Std-Light {

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

}

.Futura-Std-Book {

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

}



body,

html {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    /* scroll-behavior: smooth; */

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

    -ms-overflow-style: none;

    scrollbar-width: none;

}



html::-webkit-scrollbar {

    /* display: none; */

}

html,body{

  scroll-behavior: auto !important;

}



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;

}



video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.OKBlack {

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100vw;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

    display: none;

    z-index: 99999;

}



.OKContainer {

    width: 20vw;

    position: absolute;

    top: 50%;

    left: 0px;

    right: 0px;

    margin: 0px auto;

    transform: translateY(-50%);

    cursor: pointer;

}



.OKContainer img {

    width: 100%;

}



.visibility {

    visibility: visible !important;

}



.all {

    width: 100%;

    height: auto;

    overflow: hidden;

}



.opacity {

    opacity: 0;

    transition: all 0.3s linear;

}



.opacity1 {

    opacity: 1;

    transition: all 0.3s linear;

}



.voice {

    width: 2vw;

    color: #fff;

    position: fixed;

    right: 2vw;

    bottom: 3vw;

    cursor: pointer;

    z-index: 1;

}



.haveVoice,

.noVoice {

    width: 100%;

    position: relative;

}





.pic-txt {

    position: absolute;

    bottom: 2vw;

    left: 2vw;

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

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

    z-index: 10;

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

}



.nav-icon img {

    object-fit: contain;

}





/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

}



.simpleParallax {

    overflow: visible !important;

}



.bg-fallback {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition: opacity .6s ease;

    z-index:2;

}



.bg-ready .bg-fallback {

    opacity:0;

    pointer-events:none;

    transition: opacity .6s ease;

}



/*第1頁*/

.m1 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #000;

}

/* =======================

   M1 層級修正

======================= */

.m1-bg {

  position: absolute;

  inset: 0;

}



.m1-bg video {

  position: absolute;

  inset: 0;

  width:100%;

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

  object-fit: cover;

  z-index: 1;

}



.m1-bg img.bg-fallback {

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  z-index:0;

  transition:opacity .5s ease;

  opacity:1;

}



/* 影片 ready → 淡出 fallback */

.m1-bg.bg-ready img.bg-fallback {

  opacity:0;

}



/* PIC absolute over video */

.m1-pic {

  position:absolute;

  inset:0;

  z-index:2;

  opacity:0;

  pointer-events:none;

}



/* 顯示時啟用 */

.m1-pic.show {

  opacity:1;

  pointer-events:none;

  transition:opacity 0.5s ease;

}



.m1-pic {

    opacity:0;

    pointer-events:none;

}



.m1-pic.show {

    opacity:1;

    pointer-events:auto;

}





/*第1-PART*/

.startT{

    position: absolute;

    left: 51vw;

    top: 56vw;

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

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

    z-index: 10;

}

.startT img{

    width: 100%;

    position: absolute;

    left: 0;

    top: 0;

    object-fit: contain;

}

/*第1-PART-LINE*/

.startline{

    position: absolute;

    left: 50vw;

    top: 62.3vw;

    width: 1px;

    height: 33.5vw;

    background-color: rgba(255, 255, 255, 0.2);

    z-index: 10;

}

.startT img{

    opacity:0;

    transform:translateY(40px);

}

/* 線初始化：收起來 */

.startline{

    height:0;

}







/*第2頁*/

.m2 {

    position: relative;

    width: 100%;

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

    overflow: visible;

}

.m2-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}

/*第2-PART1*/

.startT2{

    position: absolute;

    left: 49.75vw;

    top: 20vw;

    width: 0.5vw;

    height: 17vw;

    z-index: 10;

}





/*第2-PART2*/

.startT3{

    position: absolute;

    left: 39vw;

    top: 40vw;

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

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

    z-index: 10;

}

.startT3 img{

    width: 100%;

    position: absolute;

    left: 0;

    top: 0;

    object-fit: contain;

}





.no-scroll {

  overflow: hidden !important;

  position: fixed;

  width: 100%;

  height: 100%;

}





/*第3頁*/

.m3 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}

.m3-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}

.form-info {

    width: 27vw;

    position: relative;

    display: block;

    margin: 0 auto;

    padding-top: 18.5vw;

    z-index: 10;

}



.form-slogan{

    position: absolute;

    left: 5.7vw;

    top: 11.5vw;

    width: 16vw;

}





.form-title{

    position: relative;

    width: 100%;

    box-sizing: border-box;

    text-align-last: justify;

    line-height: 5vw;

    font-size: 1.6vw;

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0em;

    color: #fff;

    margin-bottom: 0vw;

}



.form-container {

    position: relative;

    width: 100%;

    box-sizing: border-box;

}

.input {

    position: relative;

    width: 100%;

    height: 3.2vw;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    margin-bottom: 1vw;

}

.input label {

    width: 7vw;

    position: relative;

    text-align-last: justify;

    line-height: 3.2vw;

    font-size: 1.45vw;

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0em;

    color: #fff;

    padding-right: 1vw;

}

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"] {

    width: 20vw;

    position: relative;

    font-size: 1.45vw;

    border: none;

    background-color: rgba(255, 255, 255, 0.3);

    color: #fff;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: 3.2vw;

    box-sizing: border-box;

    padding: 0 1vw;

}



form button,

    #submitbtn {

    position: relative;

    appearance: none;

    -webkit-appearance: none;

    border-radius: 3px;

    width: 12vw;

    height: 3.2vw;

    border: none;

    outline: none;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;

    background-color: #a57865;

    color: #fff;

    letter-spacing: 0vw;

    font-weight: 300;

    font-size: 1.45vw;

    font-family: 'Noto Sans TC';

    line-height: 3.3vw;

    text-align-last: justify;

    padding: 0 3vw;

    margin-left: -1vw;

}

.form-btn {

    position: relative;

    width: 100%;

    margin: 2vw auto;

      text-align: center;

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      align-items:center;

      justify-content:center;

}





.check-item {

    position: relative;

    display: flex;

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

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.2em;

    color: #fff;

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

    cursor: pointer;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.openTxtBtn {

    position: relative;

    display: inline-block;

    letter-spacing: 0.2em;

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

}



.openTxtBtn::before {

    content: '';

    position: absolute;

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

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

    width: 100%;

    height: 1px;

    background-color: #fff;

}



.check-item label input {

    position: relative;

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

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

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

    margin: 0% 5% -2.5% 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(20 * var(--vw-base)) calc(20 * var(--vw-base));

    /* 設置大小 */

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

    border: none;

    cursor: pointer;

}



.check-item label input:checked {

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

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

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

    /* 設置大小 */

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

}



.m9 .input .check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

}



.m9 .input .check-item-sex label {

    cursor: pointer;

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

    text-align: end;

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

}



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

    position: relative;

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

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

    height: calc(20 * 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(20 * var(--vw-base)) calc(20 * var(--vw-base));

    /* 設置大小 */

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

    cursor: pointer;

}



.check-item-sex label input:checked {

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

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

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

    /* 設置大小 */

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

}



.pin-radios {

    position: relative;

    flex-grow: 1;

    box-sizing: border-box;

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

}



.pin-radios>label {

    position: relative;

    display: inline-block;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

    letter-spacing: 0em;

}



.pin-radios label input[type="radio"] {

    position: relative;

    margin: 0 0.3vw 0 0.4vw;

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

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

    height: calc(20* 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(20 * var(--vw-base)) calc(20* var(--vw-base));

    /* 設置大小 */

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

    cursor: pointer;

}



.pin-radios label input:checked {

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

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

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

    /* 設置大小 */

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

}





.nav {

    position: fixed;

    left: 0;

    bottom: 0;

    width: 100%;

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

    z-index: 999;

    opacity: 0;

    transform: translateY(100%);

    transition: all 0.6s ease;

    background-color: #40220f;

}



.nav.show {

    opacity: 1;

    transform: translateY(0);

}



.nav-contain {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}







.nav-items {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

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

    height: 100%;

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

}



.nav-items::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    width: 1px;

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

    opacity: 0.4;

    background-color: #c9a063;

}



.nav-items:last-child::after {

    display: none;

}



.nav-items img {

    object-fit: contain;

}



.nav-icon {

    position: relative;

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

    /* filter: contrast(130%) brightness(80%); */

}



.nav-icon.fb {

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

}





.nav-txt {

    position: relative;

    color: #fff;

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

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

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

    letter-spacing: 0.1em;

}





.form-end {

    position: relative;

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

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

    margin: 5vw auto;

}

.form-end img{

    width: 100%;

    object-fit: contain;

}



/*同意書照片預覽*/



.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", serif;

}



.closeBtn {

    width: 30px;

    position: absolute;

    right: 5%;

    top: 4%;

}



.infoWrap {

    width: 100%;

    margin: 0 auto;

    max-width: 80%;

    position: relative;

    height: 100vh;

    overflow: auto;

}



.infoWrap ul {

    list-style: none;

    font-size: 3.2vw;

    padding-inline-start: 7vw;

}



.infoWrap ul>li>ul {

    list-style: none;

    font-size: 3.2vw;

    padding-inline-start: 4vw;

}



.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% - 150px);

    position: absolute;

    left: 50%;

    top: 50%;

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

    overflow-y: auto;

    color: #fff;

    text-align: left;

}



.infoBox h3 {

    font-size: 5vw;

    line-height: 130%;

    margin-bottom: 25px;

    text-align: center;

}



.infoBox h4 {

    font-size: 3.2vw;

    line-height: 130%;

    margin-bottom: 25px;

}



.infoBox h5 {

    font-size: 4vw;

    line-height: 130%;

    margin-bottom: 25px;

}



.infoBox p {

    font-size: 3.2vw;

    line-height: 150%;

}