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

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

}



@font-face {

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

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

}

@font-face {

    font-family: "jf-jinxuan-medium";

    src: url(../fonts/jf-jinxuan-medium.otf);

}

.jf-jinxuan-medium {

    font-family: "jf-jinxuan-medium";

}

.Futura-Std-Light {

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

}



.Futura-Std-Heavy {

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

}



.Futura-Std-Medium {

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

}



.Futura-Std-Book {

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

}



.noto-sans-300 {

    font-family: "Noto Sans TC";

    font-weight: 300;

}





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

    }

}



[data-aos="brightness"] {

    filter: brightness(0.7);

}



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

    animation: brightness-out 1.2s ease-in-out 0s forwards;

}



@keyframes brightness-out {

    0% {

        filter: brightness(0.7);

    }



    100% {

        filter: brightness(1);

    }

}





body,

html {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

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

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

    scroll-behavior: smooth;

    display: flex;

    flex-direction: column;

}

/* ✅ 只隱藏捲軸外觀，不影響滾動與動畫 */



/* Chrome / Safari / Edge */

html::-webkit-scrollbar {

    width: 0;

    height: 0;

}



/* Firefox */

html {

    scrollbar-width: none;

}



/* IE / 舊 Edge */

html {

    -ms-overflow-style: none;

}



/* loading 時才真的禁止滾動（你的原本需求） */

body.no-scroll {

    overflow: hidden !important;

    position: fixed;

    width: 100%;

    height: 100vh;

}

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;

}



.pic-txt {

    position: absolute;

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

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

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

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

    z-index: 999;

    /* text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); */

}



.pic-txt.dark {

    color: #000000;

    text-shadow: none;

}



.chg-pic {

    overflow: hidden;

}



.chg-pic img {

    opacity: 1;

    transform: scale(1.15);

    transition: transform 5s ease, opacity 5s ease;

}



/* 播放時縮回原比例 */

.chg-pic img.active-bg {

    opacity: 1;

    transform: scale(1) !important;

}



/* 離開後回到初始狀態才能再次播放 */

.chg-pic img.reset {

    opacity: 1;

    transform: scale(1.15);

}







.sw-prev {

    position: absolute;

    width: 2vw;

    height: 2vw;

    left: 0.6vw;

    top: 49%;

    margin: 0;

    z-index: 998;

    background-image: url(../imgs/arrow-l.png);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: contain;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.sw-next {

    position: absolute;

    width: 2vw;

    height: 2vw;

    right: 0.6vw;

    top: 49%;

    margin: 0;

    z-index: 998;

    background-image: url(../imgs/arrow-r.png);

    background-repeat: no-repeat;

    background-position: right center;

    background-size: contain;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.container {

    width: 100%;

    height: auto;

    position: relative;

}



.container h3 {

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

}



.container h4 {

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

}





.sw-txt {

    position: relative;

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.sw-txt h3 {

    position: relative;

    font-family: "jf-jinxuan-medium";

    font-weight: 500;

    letter-spacing: 0.2em;

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

    color: #a98667;

}

.sw-txt h4 {

    position: relative;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.025em;

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

    color: #231815;

    text-align: center;

}







/*m1*/

.m1 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #fff;

}

.m1-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 5;

}

.m1-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.m1-bg img {

    transform: scale(1.1);

    transition: all 5s ease-in-out;

}

.m1-txt0 {

    width: 27.5vw;

    position: absolute;

    right: 3vw;

    top: 8.5vw;

    z-index: 10;

    text-align: justify;

    text-align-last: justify;

    text-justify: inter-ideograph;

}

.m1-txt0 h3{

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.05em;

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

    color: #7e5c45;

}

.m1-txt0 h3.bold{

    font-weight: 500;

    letter-spacing: 0.05em;

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

}

.m1-txt1 {

    position: absolute;

    right: 8.5vw;

    top: 28vw;

    width: calc(318*var(--vw-base-old));

    height: calc(205*var(--vw-base-old));

    z-index: 10;

}

.m1-txt2 {

    position: absolute;

    right: 8.5vw;

    top: 40vw;

    width: calc(315*var(--vw-base-old));

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

    z-index: 10;

}

.m1-txt3 {

    position: absolute;

    right: 11.4vw;

    top: 45vw;

    width: calc(208*var(--vw-base-old));

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

    z-index: 10;

}

.m1-txt img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    position: absolute;

    left: 0;

    top: 0;

}





/*M2*/

.m2 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #000;

}

.m2-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.m2-bg img {

    object-position: 0 0;

}

.m2-mask{

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: calc(284*var(--vw-base-old));

    mix-blend-mode: multiply;

    z-index: 2;

}

.m2-mask img {

    object-fit: cover;

    width: 100%;

    height: 100%;

}

.m2-bg.shine {

    animation: m2bg-shine 1s infinite alternate;

    transition-timing-function: linear;

}



@keyframes m2bg-shine {

    0% {

        opacity: 0;

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 0;

    }

}

.m2-txt {

    width: 70vw;

    position: absolute;

    left: 15vw;

    bottom: 3vw;

    z-index: 10;

}

.m2-txt h3 {

    color: #fff;

}

.m2-txt h4 {

    color: #fff;

}

.m2-site1 {

    position: absolute;

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

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

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

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

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

    z-index: 10;

}

.m2-site2 {

    position: absolute;

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

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

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

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

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

    z-index: 10;

}



.m2-site3 {

    position: absolute;

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

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

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

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

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

    z-index: 10;

}



.m2-site3 .site-txt {

    animation: m2float 1.4s infinite ease;

}



@keyframes m2float {

    0% {

        transform: translate(0, 0vw);

    }



    50% {

        transform: translate(0, -1vw);

    }



    100% {

        transform: translate(0, 0);

    }



}



.site-txt,

.site-line {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.site-txt img,

.site-line img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}











/*M3*/

.m3 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #fff;

}

.m3-pics {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    overflow: clip;

    display: flex;

    overflow: hidden;

}

.m3-pics>div {

    position: relative;

    flex: 1;

    /* 各佔 1/3 */

    height: 100%;

    /* transform: translateX(50%); */

    opacity: 0;

    /* transition: transform 0.8s ease 0.2s, opacity 0.4s ease; */

}

.m3-pics>div .m3-block {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

}



.m3-pics .m3-pic1 {

    transition: opacity 1s ease 0.4s;

}



.m3-pics .m3-pic2 {

    transition: opacity 1s ease 0.4s;

}



.m3-pics .m3-pic1 .m3-block {



    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.4s;

}



.m3-pics .m3-pic2 .m3-block {



    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.4s;

}

.m3.start .m3-pics>div {

    opacity: 1;

}



.m3.start .m3-pics .m3-pic1 .m3-block {

    transform: translateX(100%);

}

.m3.start .m3-pics .m3-pic2 .m3-block {

    transform: translateX(-100%);

}

.m3 .sw-txt {

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

}







/*M4*/

.m4 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #fff;

}



.m4-pics {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    overflow: clip;

    display: flex;

    overflow: hidden;

}

.m4-pics>div {

    position: relative;

    flex: 1;

    /* 各佔 1/3 */

    height: 100%;

    opacity: 0;

    /* transition: transform 0.8s ease 0.2s, opacity 0.4s ease; */

    overflow: hidden;

}

.m4-pics>div .m4-block {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    overflow: hidden;

}

.m4-pics .m4-pic1 {

    transition: opacity 1s ease 0.8s;

}

.m4-pics .m4-pic2 {



    transition: opacity 1s ease 0.6s;

}

.m4-pics .m4-pic3 {



    transition: opacity 1s ease 0.4s;

}

.m4-pics .m4-pic1 .m4-block {

    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.8s;

}

.m4-pics .m4-pic2 .m4-block {



    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.6s;

}

.m4-pics .m4-pic3 .m4-block {

    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.4s;

}

.m4 .sw-txt {

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

}

.m4.start .m4-pics>div {

    opacity: 1;

}

.m4.start .m4-pics>div .m4-block {

    transform: translateX(-100%);

}





/*M5*/

.m5 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #fff;

}

.m5-pics {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    overflow: clip;

    display: flex;

    overflow: hidden;

}

.m5-pics>div {

    position: relative;

    flex: 1;

    /* 各佔 1/3 */

    height: 100%;

    /* transform: translateX(50%); */

    /* transition: transform 0.8s ease 0.2s, opacity 0.4s ease; */

}

.m5-pics img.abs{

    width: 92.5%;

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

    position: absolute;

    left: 0;

    top: 0;

}

.m5-pics .m5-pic1 {

    position: relative;

    flex: 0.55;

    height: 100%;

    padding-right: 2.8vw;

}

.m5 .sw-txt {

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

}



.m5 .pic-txt1{ left: calc(8 * var(--vw-base));bottom: calc(123 * var(--vw-base));filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));}

.m5 .pic-txt2{ left: calc(101 * var(--vw-base));bottom: calc(123 * var(--vw-base));filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5)); }

.m5 .pic-txt3{  left: calc(8 * var(--vw-base));bottom: calc(5 * var(--vw-base));filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));}

.m5 .pic-txt4{  left: calc(101 * var(--vw-base));bottom: calc(5 * var(--vw-base));filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));}













/*M6*/

.m6 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #fff;

}

.m6-pics {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    overflow: clip;

    display: flex;

    overflow: hidden;

}

.m6-pics-sign {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    overflow: hidden;

}

.m6-pics>div {

    position: relative;

    flex: 1;

    /* 各佔 1/3 */

    height: 100%;

    /* transform: translateX(50%); */

    opacity: 0;

    /* transition: transform 0.8s ease 0.2s, opacity 0.4s ease; */

}

.m6-pics>div .m6-block {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

}

.m6-pics .m6-pic1 {

    transition: opacity 1s ease 0.4s;

}

.m6-pics .m6-pic2 {

    transition: opacity 1s ease 0.6s;

}

.m6-pics .m6-pic3 {

    transition: opacity 1s ease 0.8s;

}

.m6-pics .m6-pic1 .m6-block {

    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.4s;

}

.m6-pics .m6-pic2 .m6-block {



    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.6s;

}

.m6-pics .m6-pic3 .m6-block {

    transition: transform 1.4s cubic-bezier(0.5, 1, 0.89, 1) 0.8s;

}

.m6 .sw-txt {

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

}

.m6.start .m6-pics>div {

    opacity: 1;

}

.m6.start .m6-pics>div .m6-block {

    transform: translateY(100%);

}







.swiper-scale {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

}



.swiper-scale .sw-pic {

    position: relative;

    width: 100%;

    height: 100%;

}



.swiper-scale .sw-pic {

    position: relative;

    overflow: hidden;

}



.swiper-scale .sw-pic img {

    transition: transform 5s ease 0.2s, opacity 0.4s ease;

    opacity: 0.2;

}



.swiper-scale .swiper-slide-active .sw-pic img {

    opacity: 1;

}









/*M7-M8-M9*/

.m7 , .m8 , .m9{

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #000;

    margin-top: 5vw;

}

.m7-swiper.swiper-scale , .m8-swiper.swiper-scale , .m9-swiper.swiper-scale {

    height: 100%;

}







/*M10*/

.m10 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #f3f6f7;

}

.m10-title {

    position: absolute;

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

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

}

.m10-title h3 {

    position: relative;

    font-family: "jf-jinxuan-medium";

    font-weight: 500;

    letter-spacing: 0.3em;

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

    color: #a98667;

}

.m10-title h4 {

    position: relative;

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

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.025em;

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

    color: #231815;

    text-align: justify;

    text-align-last: start;

}

.m10-pic {

    position: absolute;

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

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

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

    height: calc(241.6*var(--vw-base))s;

}

.m10-pic .pic-txt {

    position: absolute;

    left: auto;

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

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

    color: #000000;

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0;

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

}

.m10-arrow {

    position: absolute;

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

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

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

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

}

.m10-arrow img {

    animation: m10arrow 1s infinite;

}

@keyframes m10arrow {

    0% {

        transform: translateX(0);

    }



    50% {

        transform: translateX(1vw);

    }



    100% {

        transform: translateX(0);

    }

}





/*M11*/

.m11 {

    position: relative;

    width: 100%;

    height: calc(1390 *var(--vw-base-old));

    background: #fff;

    overflow: hidden;

}



.m11-swiper-box {

    position: absolute;

    left: 5.8vw;

    bottom: 2vw;

    width: 90vw;

    height: calc(1090 * var(--vw-base-old));

}

.m11-swiper-box .swiper-slide-box {

    width: calc(335 * var(--vw-base-old));

    height: calc(545 * var(--vw-base-old));

    overflow: hidden;

    display: inline-block;

    margin: 0 0.3% 0 0;

    padding: 0;

}

.m11-swiper-box .swiper-slide-box.right {

    margin: 0vw;

}

.m11-swiper-box .swiper-slide-box .sw-pic {

    position: relative;

    width: calc(335*var(--vw-base-old));

    height: calc(433*var(--vw-base-old));

    overflow: hidden;

}

.m11-swiper-box .swiper-slide-box .sw-pic img {

    position: relative;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.m11-swiper-box .swiper-slide-box .pic-title{

    position: relative;

    font-family: "jf-jinxuan-medium";

    font-weight: 500;

    letter-spacing: 0.05em;

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

    color: #a98667;

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

    text-align: center;

    margin-top: 0.45vw;

}

.m11-swiper-box .swiper-slide-box .pic-title.long{

    letter-spacing: 0em;

}

.m11-swiper-box .swiper-slide-box .pic-line{

    width: 14vw;

    position: relative;

    margin: 0 auto;

    height: 1px;

    background-color: #231815;

    opacity: 0.3;

}

.m11-swiper-box .swiper-slide-box .pic-line.long{

    width: 18vw;

}

.m11-swiper-box .swiper-slide-box .pic-line.line1{width: 11vw;}

.m11-swiper-box .swiper-slide-box .pic-cent {

    position: relative;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0em;

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

    color: #231815;

    text-align: center;

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

}









/*M12*/

.m12 {

    position: relative;

    width: 100%;

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

    background: #fff;

    overflow: hidden;

}

.m12-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

.m12-flower{

    margin: 0 auto;

    padding: 5vw 0 2vw 0;

    position: relative;

    width: calc(90 * var(--vw-base-old));

    height: calc(90 * var(--vw-base-old));

}

.m12-flower img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.m12-slogan {

    margin: 0 auto;

    position: relative;

    width: calc(630*var(--vw-base-old));

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

}

.m12-slogan img {

    object-fit: cover;

    position: absolute;

    left: 0;

    top: 0;

}

.m12-txt1 {

    margin: 0 auto;

    position: relative;

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

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

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

    z-index: 10;

}

.m12-txt1 img {

    object-fit: cover;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.m12-txt2 {

    margin: 0 auto;

    position: relative;

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

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

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

}

.m12-txt3 {

    margin: 0 auto;

    position: relative;

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

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

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

}







/*M13*/

.m13 {

    position: relative;

    width: 100%;

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

    background: #fff;

    overflow: hidden;

}



.m13-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.m13-map {

    position: absolute;

    top: 0;

    left: 0;

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

    height: auto;

}



.m13-contain {

    position: absolute;

    right: 11vw;

    top: 0;

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m13-txt img {

    object-fit: contain;

}



.m13-txt1 {

    position: relative;

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

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

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

}



.m13-address {

    position: absolute;

    left: 0;

    top: 0vw;

    width: 100%;

    height: 3.5vw;

}



.m13-phone {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 3.5vw;

}



.m13-fb {

    position: relative;

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

    width: calc(28 * var(--vw-base-old));

    height: calc(55 * var(--vw-base-old));

}



.m13-txt2 {

    position: relative;

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

    width: calc(455 * var(--vw-base-old));

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

}



.m13-txt3 {

    position: relative;

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

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

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.03em;

    color: #000;

}



.m13-info {

    position: absolute;

    left: 0%;

    bottom: 3vw;

    width: 100%;

    height: calc(2.7 * var(--vw-base))

}



.m13-info img {

    position: relative;

    margin: 0 auto;

    height: 100%;

    width: auto;

}



.form1 {

    position: relative;

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

    width: calc(550*var(--vw-base-old));

    display: flex;

    flex-direction: column;

    align-items: center;

}



.input {

    position: relative;

    width: 100%;

    height: calc(48*var(--vw-base-old));

    box-sizing: border-box;

    display: flex;

    justify-content: space-between;

    align-items: center;

    /* box-sizing: border-box;

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

}



.input::before {

    content: '';

    position: absolute;

    bottom: 0;

    /* 偽元素位於 .input 下方 */

    left: 0;

    width: 100%;

    /* 偽元素寬度填滿 */

    height: 1px;

    /* 偽元素高度，可調整為間隔需求 */

    background-color: #000;

    /* 視覺樣式 */

}





.input>label {

    position: relative;

    flex-shrink: 0;

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

    width: calc(90 * var(--vw-base-old));

    text-align: left;

    text-align-last: left;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #000;

    letter-spacing: 0.05em;

}





input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

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

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

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

    flex-grow: 1;

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

    border: none;

    background-color: transparent;

    color: #000;

    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(15*var(--vw-base-old)); */

}





.input select {

    position: relative;

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

    flex-grow: 1;

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

    border: none;

    background-color: transparent;

    color: #000000;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

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

    font-weight: 400;

    letter-spacing: 0.05em;

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

    background-position-x: 99%;

    background-position-y: 60%;

    background-repeat: no-repeat;

    background-size: 3.5%;

}



select option {

    color: #000000;

    background-color: #fcf4e8;

    position: relative;

    width: calc(550*var(--vw-base-old));

    font-size: inherit;

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

    color: inherit;

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

}





form button,

#submitbtn {

    position: relative;

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

    appearance: none;

    -webkit-appearance: none;

    border-radius: 0;

    border: none;

    outline: none;

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

    width: calc(480 * var(--vw-base-old));

    background-color: transparent;

    background-image: url(../imgs/submit.svg);

    background-size: 100% 100%;

    background-repeat: no-repeat;

    cursor: pointer;

}





.check-item {

    position: relative;

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

    display: flex;

    align-items: center;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #000;

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

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

    letter-spacing: 0em;

    cursor: pointer;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.check-item label input {

    position: relative;

    top: calc(3 * var(--vw-base-old));

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

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

    margin: 0% 5% -2.5% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background-color: #000;

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

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

    mask-image: url(../imgs/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-old)) calc(20 * var(--vw-base-old));

    /* 設置大小 */

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

    border: none;

    cursor: pointer;

}



.check-item label input:checked {

    mask-image: url(../imgs/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-old)) calc(20 * var(--vw-base-old));

    /* 設置大小 */

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

}



.check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

    font-family: "Noto Sans TC";

    font-weight: 400;

}





.check-item-sex label {

    cursor: pointer;

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

    text-align-last: end;

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



}



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

    position: relative;

    margin-right: 0.5vw;

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

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

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

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background-color: #000;

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

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

    mask-image: url(../imgs/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-old)) calc(20* var(--vw-base-old));

    /* 設置大小 */

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

    cursor: pointer;

}



.check-item-sex label input:checked {

    mask-image: url(../imgs/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-old)) calc(20 * var(--vw-base-old));

    /* 設置大小 */

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

}



.openTxtBtn {

    position: relative;

    font-family: "Noto Sans TC";

    font-weight: 400;

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

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

    cursor: pointer;

}



.openTxtBtn::before {

    position: absolute;

    content: "";

    width: 100%;

    height: 1px;

    left: 0px;

    bottom: 0px;

    background-color: #000;

}



.music {

    width: 100%;

    height: 0;

}



.voice {

    width: 2vw;

    z-index: 15;

    color: #fff;

    position: fixed;

    left: 2vw;

    bottom: 2vw;

    cursor: pointer;

}



.haveVoice,

.noVoice {

    width: 100%;

    position: relative;

}





.nav {

    position: fixed;

    right: 2vw;

    bottom: 2vw;

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

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

    cursor: pointer;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    gap: 0.8vw;

}



.nav-li {

    position: relative;

    width: 100%;

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

    background-size: 100% 100%;

    background-repeat: no-repeat;

}



.nav-li.city {

    background-image: url(../imgs/nav-city-pc.svg);

}



.nav-li.chair {



    background-image: url(../imgs/nav-chair.svg);



}





.nav-li.book {

    background-image: url(../imgs/nav-pen.svg);

}



.nav-li.add {

    background-image: url(../imgs/nav-line.svg);

}



.nav-li.map {

    background-image: url(../imgs/nav-map.svg);

}



.nav-li.tel {

    background-image: url(../imgs/nav-phone.svg);

}













/*同意書照片預覽*/

.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% - 18vw);

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

}