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

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

}



@font-face {

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

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

}



@font-face {

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

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

}



@font-face {

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

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

}





.Futura-Std-Light {

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

}



.Futura-Std-Medium {

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

}







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

    }

}





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;

    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;

}



.sw-prev {

    position: absolute;

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

    top: 50%;

    transform: translateY(-50%);

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

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

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    z-index: 10;

    opacity: 0.7;

    cursor: pointer;

}



.sw-next {

    position: absolute;

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

    top: 50%;

    transform: translateY(-50%);

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

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

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    z-index: 10;

    opacity: 0.7;

    cursor: pointer;

}





.pic-txt {

    position: absolute;

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

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

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

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

    text-shadow: #000000 0px 0px 2px;

}



.container h2 {

    position: relative;

    display: inline-block;

    color: #ffffff;

    font-family: "Noto Sans TC", serif;

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

    letter-spacing: 0.1em;

    line-height: 1.2em;

    font-weight: 500;

}



.container h3 {

    position: relative;

    display: inline-block;

    color: #ffffff;

    font-family: "Futura-Std-Light-Italic", serif;

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

    letter-spacing: 0em;

    line-height: 1.2em;

}



.main-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

}





.gsap-char {

    display: inline-block;

    white-space: pre;

    will-change: transform, opacity;

}



.container p {

    position: relative;

    display: inline-block;

    color: #ffffff;

    font-family: "Noto Sans TC", serif;

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

    letter-spacing: 0.1em;

    line-height: 1.5em;

    font-weight: 300;

    text-align: center;

}



/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

    background-color: #040000;

}



.main1 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.main1 .logo {

    position: absolute;

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

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

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

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

}





.main1 .m1-txt-box {

    position: absolute;

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

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

    /* width: 100%; */

    height: auto;

}



.main1 .m1-txt-box .zh-title {

    position: relative;

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

    color: #ffffff;

    font-family: "Noto Sans TC", serif;

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

    letter-spacing: 0.1em;

    line-height: 1.15em;

    font-weight: 300;

}



.main1 h3 {

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

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

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

    letter-spacing: 0em;

    line-height: 1.18em;

}



.main1 p {

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

    text-align: start;

}



.m1-flower {

    position: absolute;

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

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

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

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

    transform-origin: 100% 18%;

    animation: m1-flower-sway 5.5s ease-in-out 0s infinite;

    animation-fill-mode: both;

    animation-play-state: paused;

    will-change: transform;

}



@keyframes m1-flower-sway {



    0%,

    100% {

        transform: rotate(-3deg) skewX(-1.5deg) scaleX(0.995);

    }



    50% {

        transform: rotate(3deg) skewX(3deg) scaleX(1.005);

    }

}



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

    .m1-flower {

        animation: none;

    }

}





.sw-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    transform-origin: center center;

    will-change: transform;

}



.swiper-slide {

    overflow: hidden;

}



.main2 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m2-swiper {

    position: relative;

    width: 100%;

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



}



.main2 .title {

    position: absolute;

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

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

    display: flex;

    flex-direction: column;

    align-items: start;

    z-index: 10;

}



.main2 .title h2 {

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

}



.main2 .title p {

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

}



.main2 .build-info {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.main2 .sw1 .build-info {

    position: absolute;

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

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

    color: #514f4e;

}



.main2 .sw2 .build-info {

    position: absolute;

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

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

    color: #ffffff;

}





.main2 .sw3 .build-info {

    position: absolute;

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

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

    color: #ffffff;

}



.main2 .build-info .year {

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

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

    letter-spacing: 0em;

}



.main2 .build-info .name {

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

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.1em;

}





.main3 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m3-swiper {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m3-swiper .sw1 .sw-bg img {

    object-position: 0 0;

}



.m3-swiper .sw1 .road1 {

    position: absolute;

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

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

    color: #017344;

    font-family: "Noto Sans TC";

    font-weight: 600;

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

    letter-spacing: 0.15em;

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

    writing-mode: vertical-rl;

}



.m3-swiper .sw1 .road1 span {

    display: block;

    transform-origin: center center;

    animation: main3-road1-float 3s ease-in-out infinite;

    animation-fill-mode: both;

    animation-play-state: paused;

    will-change: transform;

}



.m3-swiper .sw1 .road2 {

    position: absolute;

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

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

    color: #fff;

    font-family: "Noto Sans TC";

    font-weight: 600;

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

    letter-spacing: 0.15em;

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

    writing-mode: vertical-rl;

}



.main3.road-motion-active .sw1 .road1 span {

    animation-play-state: running;

}



@keyframes main3-road1-float {



    0%,

    100% {

        transform: translate3d(0, 0, 0) rotate(0deg);

    }



    50% {

        transform: translate3d(calc(0*var(--vw-base)), calc(-15*var(--vw-base)), 0) rotate(1deg);

    }

}



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

    .m3-swiper .sw1 .road1 span {

        animation: none;

    }

}



.main3 .title {

    position: relative;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 10;

}



.main3 .title {

    padding-top: calc(83*var(--vw-base));

}









.main3 .title h2 {

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

}



.main3 .title p {

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

}





.main4 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m4-swiper {

    position: relative;

    width: 100%;

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



}



.main4 .title {

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.main4 .sw1 .title {

    padding-top: calc(100*var(--vw-base));

}



.main4 .sw2 .title {

    padding-top: calc(170*var(--vw-base));

}



.main4 .sw3 .title {

    padding-top: calc(450*var(--vw-base));

}



.main4 .title p {

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

}



.main5 {

    position: relative;

    width: 100%;

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

    background-color: #9ba597;

    overflow: hidden;

}



.main5 .main-bg img {

    transform-origin: center center;

    will-change: transform;

}



.main5 .title {

    position: absolute;

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.main5 .title h2 {

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

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: 1.2em;

    text-align-last: justify;

}



.main5 .title h4 {

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

    color: #fff;

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    line-height: 1.15em;

    letter-spacing: 0.1em;

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

    text-align-last: justify;

}



.main5 .title h4 .Futura-Std-Light {

    letter-spacing: 0;

}



.main5 .title p {

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

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

    font-weight: 300;

    letter-spacing: 0.1em;

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

    text-align: center;

    /* text-align-last: justify; */

}





.main6 {

    position: relative;

    width: 100%;

    min-height: calc(1260*var(--vw-base));

    background-color: #9ba597;

    overflow: hidden;

}



.main6 .m6-info {

    position: absolute;

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

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

    margin: 0 auto;

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.main6 .logo {

    position: relative;

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

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

    height: auto;

}



.main6 h2 {

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

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

    letter-spacing: 0.1em;

    font-weight: 300;

}



.main6 .coming-soon {

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.main6 .coming-soon .cn {

    color: #ffffff;

    font-family: "Noto Sans TC";

    font-weight: 500;

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

    letter-spacing: 0.08em;

}



.main6 .coming-soon .en {

    color: #ffffff;

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

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

    letter-spacing: 0.13em;

}



.main6 .m6-icons {

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

    display: flex;

    align-items: center;

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

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

}



.main6 .address,

.main6 .phone {

    display: flex;

    flex-direction: column;

    align-items: center;

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

    justify-content: space-between;

}





.main6 .address .icon {

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

    height: auto;

}



.main6 .phone .icon {

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

    height: auto;

}



.main6 .address p {

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

    color: #ffffff;

    font-family: "Noto Sans TC";

    font-weight: 500;

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

    letter-spacing: 0.08em;

    line-height: 1em;

    vertical-align: bottom;

}





.main6 .phone p {

    position: relative;

    top: 0.15em;

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

    color: #ffffff;

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

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

    letter-spacing: 0em;

    line-height: 1em;

    vertical-align: bottom;

}



.form-container {

    position: absolute;

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

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

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

}



.form-title {

    position: relative;

    font-family: "Noto Sans TC";

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

    font-weight: 400;

    color: #fff;

    letter-spacing: 0.15em;

    line-height: 1.8em;

    text-align: center;

    padding-bottom: calc(20*var(--vw-base));

}



.input {

    position: relative;

    background: transparent;

}



.input::before {

    content: "";

    position: absolute;

    inset: 0;

    background-color: #7b8378;

    /* mix-blend-mode: multiply; */

    z-index: 0;



    /* 👇 關鍵：強制 GPU 合成層 */

    /* transform: translateZ(0);

    will-change: opacity, transform; */

}



.input * {

    position: relative;

    z-index: 1;

    /* 確保文字與input在上層 */

}



.input {

    position: relative;

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

    width: 100%;

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

    box-sizing: border-box;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.input label {

    position: relative;

    flex-shrink: 0;

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

    text-align: justify;

    text-align-last: justify;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

    letter-spacing: 0.1em;

    flex-shrink: 0;

    padding-left: calc(20 * 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(22* 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: 100;

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

    letter-spacing: 0.2em;

    line-height: 1em;

    font-weight: 400;

}



.input input[type="tel"] {

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

}



.input select {

    position: relative;

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

    flex-grow: 1;

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

    border: none;

    background-color: transparent;

    color: #fff;

    letter-spacing: 0.1em;

    box-sizing: border-box;

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

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

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

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

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

    background-position-x: 92%;

    background-position-y: 50%;

    background-repeat: no-repeat;

    background-size: 6%;

}



select option {

    color: #3e3a39;

    background-color: #9ba597;

    position: relative;

    width: 100%;

    font-size: inherit;

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

}



form button,

#submitbtn {

    position: relative;

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

    appearance: none;

    /* 移除預設樣式 */

    -webkit-appearance: none;

    /* 對 Safari 特別設定 */

    border-radius: 0;

    /* 將圓角設為 0 */

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

    width: 100%;

    background-color: transparent;

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: .1em;

    line-height: 1.15em;

    border: none;

    background: transparent;

    transition: all 0.3s ease;

    background-color: #7b8378;

    cursor: pointer;

}





form button,

#submitbtn::after {

    content: "";

    position: absolute;

    inset: 0;

    background-color: #7b8378;

    mix-blend-mode: multiply;

    z-index: -1;

}



form button,

#submitbtn * {

    position: relative;

    z-index: 1;

    /* 確保文字與input在上層 */

}











.check-txt {

    position: relative;

    width: 100%;

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

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

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

    line-height: 1.6em;

    letter-spacing: 0.05em;

    text-align: center;

}



.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(22*var(--vw-base));

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

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

    /* 設置大小 */

    mask-size: calc(24 * var(--vw-base)) calc(24 * 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(22*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(24* var(--vw-base));

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

    /* 設置大小 */

    mask-size: calc(24 * var(--vw-base)) calc(24 * 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: 500;

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

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

    color: #fff;

    cursor: pointer;

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

    border-bottom: #fff solid 1px;

}



.info-bottom {

    position: absolute;

    left: 0;

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

    width: 100%;

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

    height: auto;

    box-sizing: border-box;

}



.info-bottom-text {

    width: 100%;

}



.info-bottom-text>div {

    white-space: nowrap;

    color: #ffffff;

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

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

    letter-spacing: 0.1em;

    line-height: 1.9em;

    font-weight: 400;

    text-align: center;

}



.m6-flower-1 {

    position: absolute;

    left: 0;

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

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

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

}



.m6-flower-2 {

    position: absolute;

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

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

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

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

}



.m6-flower-1 .f1,

.m6-flower-1 .f2,

.m6-flower-2 .f1,

.m6-flower-2 .f2 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m6-flower-1 .f1,

.m6-flower-1 .f2,

.m6-flower-2 .f1,

.m6-flower-2 .f2 {

    will-change: transform;

}



.m6-flower-1 .f1 {

    transform-origin: 12% 56%;

    animation: m6-flower-1-f1-sway 5s ease-in-out -1.2s infinite;

}



.m6-flower-1 .f2 {

    transform-origin: 12% 53%;

    animation: m6-flower-1-f2-sway 6.6s ease-in-out -3.1s infinite;

}



.m6-flower-2 .f1 {

    transform-origin: 92% 59%;

    animation: m6-flower-2-f1-sway 4.5s ease-in-out -2s infinite;

}



.m6-flower-2 .f2 {

    transform-origin: 92% 72%;

    animation: m6-flower-2-f2-sway 7.4s ease-in-out -0.8s infinite;

}



.m6-flower-1 .f1,

.m6-flower-1 .f2,

.m6-flower-2 .f1,

.m6-flower-2 .f2 {

    animation-play-state: paused;

}



.main1.flower-motion-active .m1-flower,

.main6.flower-motion-active .m6-flower-1 .f1,

.main6.flower-motion-active .m6-flower-1 .f2,

.main6.flower-motion-active .m6-flower-2 .f1,

.main6.flower-motion-active .m6-flower-2 .f2 {

    animation-play-state: running;

}



@keyframes m6-flower-1-f1-sway {



    0%,

    100% {

        transform: rotate(-2.8deg) skewX(-1.2deg) scaleX(0.992);

    }



    50% {

        transform: rotate(3.1deg) skewX(1.2deg) scaleX(1.008);

    }

}



@keyframes m6-flower-1-f2-sway {



    0%,

    100% {

        transform: rotate(2.9deg) skewX(1.7deg) scaleX(0.996);

    }



    50% {

        transform: rotate(-3.1deg) skewX(-1.3deg) scaleX(1.004);

    }

}



@keyframes m6-flower-2-f1-sway {



    0%,

    100% {

        transform: rotate(5deg) skewX(0.2deg) scaleX(1.008);

    }



    50% {

        transform: rotate(-3deg) skewX(-1deg) scaleX(0.992);

    }

}



@keyframes m6-flower-2-f2-sway {



    0%,

    100% {

        transform: rotate(-3deg) skewX(-0.35deg) scaleX(0.997);

    }



    50% {

        transform: rotate(4deg) skewX(2deg) scaleX(1.003);

    }

}



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



    .m6-flower-1 .f1,

    .m6-flower-1 .f2,

    .m6-flower-2 .f1,

    .m6-flower-2 .f2 {

        animation: none;

    }

}





























































































/*同意書照片預覽*/



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

}