@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');



@font-face {

    font-family: "GenRyuMin2TW-M";

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

}

@font-face {

    font-family: "GenRyuMin2TW-R";

    src: url(../fonts/GenRyuMin2TW-R.otf);

}

@font-face {

    font-family: "Iowan Old Style";

    src: url(../fonts/Iowan Old Style.ttc);

}

@font-face {

    font-family: "Pr6N-M";

    src: url(../fonts/小塚明朝\ Pr6N\ M.otf);

}

@font-face {

    font-family: "Pr6N-R";

    src: url(../fonts/Kozuka-Mincho-Pr6N-Light.otf);

}

.Pr6N-M {

    font-family: "Pr6N-M";

}

.Pr6N-R {

    font-family: "Pr6N-R";

}

.GenRyuMin2TW-M {

    font-family: "GenRyuMin2TW-M";

}

.GenRyuMin2TW-R {

    font-family: "GenRyuMin2TW-R";

}

.Iowan-Old-Style{

    font-family: "Iowan Old Style";

}





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

    opacity: 1;

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

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

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



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

    opacity: 1;

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

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

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



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

    opacity: 1;

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

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

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



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

    opacity: 1;

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

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

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



.opacity {

    animation: opacity 2s ease 0s forwards;



}



@keyframes opacity-left {



    from {

        opacity: 0;

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

    }



    to {

        opacity: 1;

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

    }

}



.opacity-left {

    animation: opacity-left 2s ease 0s forwards;

    animation-delay: 1s;

}



:root {}



body,

html {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

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

    display: flex;

    flex-direction: column;

}



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;

}







/*nav*/

.nav {

    position: fixed;

    bottom: 6vw;

    right: 0vw;

    width: 3.5vw;

    height: 12vw;

    border-radius: 0px;

    z-index: 9999;

    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);

    background-color: #fff;

    opacity: 0;

}

.show {

    display: block;

    opacity: 1;

    transform: translateY(0);

    z-index: 9999;

}

.nav-item {

    position: relative;

    display: block;

    justify-content: center;

    align-items: center;

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

    color: #595758;

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

    letter-spacing: 0.075em;

    transition: all 0.3s ease;

    padding: 1vw;

}



.nav-item::after {

    content: "";

    background-color: #040000;

    width: 2.3vw;

    height: 1px;

    position: absolute;

    left: 0.8vw;

    bottom: 0;

}

.nav-item:nth-child(3)::after {

    content: "";

    background-color: transparent;

    width: 2.5vw;

    height: 1px;

    position: absolute;

    left: 0.5vw;

    bottom: 0;

}

.nav-icon {

    position: relative;

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

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

    background-color: #040000;

    mask-size: contain;

    -webkit-mask-size: contain;

    mask-repeat: no-repeat;

    -webkit-mask-repeat: no-repeat;

    mask-position: center;

    -webkit-mask-position: center;

    transition: all 0.3s ease;

    padding-bottom: 0vw;

    margin-left: 0vw;

}

.nav-pen {

    mask-image: url(../img/nav-pen.svg);

    -webkit-mask-image: url(../img/nav-pen.svg);

}

.nav-fb {

    mask-image: url(../img/nav-fb.svg);

    -webkit-mask-image: url(../img/nav-fb.svg);

    height: 2vw;

}

.nav-map {

    mask-image: url(../../img/nav-map.svg);

    -webkit-mask-image: url(../img/nav-map.svg);

}

.nav-icon img {

    object-fit: contain;

}

.nav-icon.active {

    background-color: #fff;

}

.nav-item.active{

    color: #fff;

}





.pic-txt {

    position: absolute;

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

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

    color: #fff;

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

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

    letter-spacing: 0.1em;

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

    z-index: 10;

    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 1));

}



.sw-prev {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

}





.sw-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

}



.sw-next img,

.sw-prev img {

    object-fit: contain;

}



.container {

    width: 100%;

    height: auto;

    position: relative;

}



.main1 {

    margin: 0 auto;

    position: relative;

    width: 100%;

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

    display: block;

    background-color: #ffffff;

    text-align: center;

    overflow: hidden;

}



.main1-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

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

}

.main1-bg .f1{

    position: absolute;

    top: -33.5vw;

    left: -30.5vw;

    width: 60vw;

    height: 54vw;

    mix-blend-mode: screen;

}

.main1-bg .f1.show{

    transform-origin: center top;

    animation: flower1 3s ease 1s infinite;

}

@keyframes flower1 {

    0%,

    100% {

        transform: skew(0deg) scaleY(1);

    }

    50% {

        transform: skew(0.5deg, 0deg) scaleY(1);

    }

}







.main1-bg .f2{

    position: absolute;

    top: -38.5vw;

    right: 33vw;

    width: 37vw;

    height: 45vw;

    mix-blend-mode: screen

}

.main1-bg .f2.show{

    transform-origin: center top;

    animation: flower2 3s ease 1s infinite;

}

@keyframes flower2 {

    0%,

    100% {

        transform: skew(0deg) scaleY(1);

    }

    50% {

        transform: skew(-0.5deg, 0deg) scaleY(1);

    }

}





.main1-bg .f3{

    position: absolute;

    bottom: -61vw;

    left: -8vw;

    width: 43.5vw;

    height: 87vw;

}



.main1-bg .f3.show{

    transform-origin: center bottom;

    animation: flower3 3s ease 1s infinite;

}

@keyframes flower3 {

    0%,

    100% {

        transform: skew(0deg) scaleY(1);

    }

    50% {

        transform: skew(0.5deg, 0deg) scaleY(1);

    }

}

.main1-bg .f4{

    position: absolute;

    bottom: -35vw;

    right: -18.2vw;

    width: 48vw;

    height: 53vw;

    mix-blend-mode: screen



}



.main1-bg .f4.show{

    transform-origin: center bottom;

    animation: flower4 3s ease 1s infinite;

}

@keyframes flower4 {

    0%,

    100% {

        transform: skew(0deg) scaleY(1);

    }

    50% {

        transform: skew(-0.5deg, 0deg) scaleY(1);

    }

}





.main1-bg img {

    width: 100%;

    object-fit: cover;

}









.main1-logo {

    position: absolute;

    top: 20.5vw;

    left: 18vw;

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

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

}



.main1-logo-st {

    position: absolute;

    top: 28.2vw;

    left: 18vw;

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

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

}

.main1-logo img , .main1-logo-st img {

    width: 100%;

    object-fit: contain;

}



.main1-box{

    position: absolute;

    left: 46.8vw;

    top: 22vw;

    width: 6vw;

    height: 6vw;

}

.main1-txt1{

    position: absolute;

    left: 57.8vw;

    top: 23vw;

    width: 27vw;

}

.main1-txt2{

    position: absolute;

    left: 57.8vw;

    top: 25.5vw;

    width: 27vw;

}

.main1-txt1 img , .main1-txt2 img{

    width: 100%;

    object-fit: cover;

}

.main1-box img{

    width: 100%;

    object-fit: contain;

}















.main2 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

    background-color: #fff;

}

.main2-bg {

    position: relative;

    width: 100%;

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

}

.bg-contain {

    position: relative;

    width: 100%;

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

    left: 0;

    top: 0;

    z-index: 8;

}

.bg-light {

    position: absolute;

    width: 100%;

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

    left: 0;

    top: 0;

    z-index: 9;

    animation: m2-light 1s ease 0.5s infinite;

}

@keyframes m2-light {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

.bg-tag {

    position: absolute;

    width: 100%;

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

    left: 0;

    top: 0;

    z-index: 10;

}

.main2-bg img {

    object-fit: cover;

    width: 100%;

}





.m2-pic-txt {

    position: absolute;

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

    left: 1vw;

    width: 100%;

    color: #fff;

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

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

    letter-spacing: 0.02em;

    text-align: left;

    z-index: 15;

    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 1));

}



.main2-scroll {

    position: absolute;

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

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

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

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

    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 1));

    z-index: 15;

}



.main2-scroll>div {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    animation: m2-light 5s ease 0.5s infinite;

}



.main2-scroll .s1 img {

    --move: -10px;

}



@keyframes scroll-arrow {

    0% {

        transform: translateX(0);

    }



    35% {

        transform: translateX(calc(var(--move) * 1));

    }



    70% {

        transform: translateX(0);

    }

}



.main2-scroll .s3 img {

    --move: 10px;

}



.main2-scroll .s1 img,

.main2-scroll .s3 img {

    animation: scroll-arrow 2s ease infinite;

}





.main2-scroll img {

    object-fit: contain;

}





.main {

    position: relative;

    width: 100%;

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

    background-color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    /*filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));*/

    padding: 0;

    margin: 0;

    

}

.main5{

    width: 100%;

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

    overflow-x: hidden;

}



.main12 ,.main13 , .main14 , .main15{

    margin-top: -1px;

}



.contain {

    width: 30.5vw;

    position: relative;

    float: left;

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

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

}

.contain.main13-txt , .contain.main14-txt , .contain.main15-txt {

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

}

.contain.main13-txt , .contain.main15-txt {

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

    width: 30.5vw;

    position: absolute;

    top: 15vw;

    right: 8vw;

    left: auto;

    padding: 0;

    margin: 0;

}

.contain.main14-txt{

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

    width: 30.5vw;

    position: absolute;

    top: 15vw;

    left: 8vw;

    right: auto;

    padding: 0;

    margin: 0;

}





.contain .cht {

    color: #fff;

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

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

    font-weight: 400;

    letter-spacing: 0.05em;

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

    transition: transform 0.3s ease-in-out;

}

.contain .en {

    color: #fff;

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

    font-family: "Iowan Old Style";

    font-weight: 100;

    letter-spacing: 0.2em;

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

    transition: transform 0.3s ease-in-out;

}

.contain h1 {

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

    color: #fff;

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

    font-weight: lighter;

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

    font-weight: 400;

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

    letter-spacing: 0.075em;

}

.contain h2 {

    width: 100%;

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

    color: #fff;

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

    text-align: justify;

    font-family: "GenRyuMin2TW-R";

    font-weight: 100;

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

    letter-spacing: 0.05em;

}

.contain h1.brown {

    color: #be9e7f;

}

.contain h2.bla {

    color: #231815;

}

.main-img{

    width: 54vw;

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

}

.swiper {

    width: 54vw;

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

}

.pic-m {

    width: 100%;

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

    position: absolute;

    left: 0;

    top: 0;

}

.pic-m img{

    object-fit: cover;

    width: 100%;

    height: 100%;

}

.sw-pic img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 7s linear;

}



.chg-pic {

    width: 60vw;

    overflow: hidden;

    float: right;

}



.chg-pic img {

    filter: brightness(0.7);

    transform: scale(1.2);

    transition: all 5s ease;

}



.active-bg {

    opacity: 1;

    transform: scale(1) !important;

    filter: brightness(1) !important;

}

.main-mid-pic{

    width: 54vw;

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

}

.main-bt-pic{

    width: 54vw;

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

    position: absolute;

    right: 0;

    top: 0;

}

.main11 .main-bt-pic{

    width: 54vw;

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

    position: absolute;

    left: 0;

    right: auto;

    top: 0;

}

.main13 .main-bt-pic , .main15 .main-bt-pic{

    width: 54vw;

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

    position: absolute;

    left: 0;

    top: 0;

    right: auto;

}



.main3 .main3-txt.tp {

    width: 30vw;

    position: absolute;

    top: 10vw;

    left: 7vw;

    padding: 0;

    margin: 0;

}

.main7 .main7-txt.tp , .main9 .main9-txt.tp , .main11 .main11-txt.tp{

    width: 30vw;

    position: absolute;

    top: 10vw;

    right: 8vw;

    left: auto;

    padding: 0;

    margin: 0;

}

.main3 .main3-txt.tp .line , .main7 .main7-txt.tp .line    , .main9 .main9-txt.tp .line   , .main11 .main11-txt.tp .line  {

    width: 4vw;

    height: 1px;

    background-color: #fff;

    position: absolute;

    bottom: -1.25vw;

    left: -0.5vw;

    padding: 0;

    margin: 0;

}





.main3 .main3-txt.bt {

    width: 30vw;

    position: absolute;

    bottom: 9vw;

    left: 7vw;

    padding: 0;

    margin: 0;

}

.main7 .main7-txt.bt , .main9 .main9-txt.bt , .main11 .main11-txt.bt {

    width: 30vw;

    position: absolute;

    bottom: 7vw;

    right: 8vw;

    left: auto;

    padding: 0;

    margin: 0;

}

.main11 .main11-txt.bt h1{

    width: 100%;

    position: absolute;

    bottom: 17.5vw;

    left: 0vw;

}

.main11 .main11-txt.bt h2.fist{

    width: 110%;

    position: absolute;

    bottom: 11vw;

    left: 0vw;

}

.main11 .main11-txt.bt h2.secd{

    width: 100%;

    position: absolute;

    bottom: 0vw;

    left: 0vw;

}

.main3-pic {

    position: absolute;

    right: 0;

    top: 0;

}

.main7-pic {

    position: absolute;

    right: auto;

    top: 0;

    left: 0;

}

.main9-pic , .main11-pic{

    position: absolute;

    left: 0;

    top: 0;

}





.main4-pic , .main6-pic {

    position: absolute;

    right: 0;

    bottom: 0vw;

}









.main3-bg ,.main5-bg ,.main7-bg ,.main9-bg ,.main11-bg{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.main5 .bg5-light {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    animation: m5-light 1.5s ease 0.5s infinite;

}

@keyframes m5-light {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

.main5 .main5-tag{

    position: absolute;

    left: 0vw;

    top: 0vw;

    width: 100%;

    height: 100%;

}

.main5 .main5-icon{

    position: absolute;

    left: 28vw;

    top: 5.8vw;

    height: 5vw;

    width: 16vw;

}

.main5 .bg5-bg img .main5 .bg5-light img , .main5 .main5-tag img{

    object-fit: cover;

    width: 100%;

}

.main5 .main5-icon img{

    object-fit: contain;

    width: 100%;

}

.main5 .main5-txt {

    width: 70vw;

    position: absolute;

    top: 3vw;

    left: 10vw;

    padding: 0;

    margin: 0;

}

.main5 .main5-txt h1{

    letter-spacing: 0;

}





.main12 .awards{

    position: absolute;

    left: 24.5vw;

    top: 35vw;

    height: 11vw;

    width: 14vw;

}

.main12 .awards img{

    object-fit: contain;

    width: 100%;

}







.main16 {

    position: relative;

    width: 100%;

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

    background-color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

}

.main16-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

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

}



.main16-bg .f2{

    position: absolute;

    top: -33.5vw;

    right: -7vw;

    width: 37vw;

    height: 45vw;

    mix-blend-mode: screen;

}

.main16-bg .f2.show{

    transform-origin: center top;

    animation: flower16-2 3s ease 1s infinite;

}

@keyframes flower16-2 {

    0%,

    100% {

        transform: skew(0deg) scaleY(1);

    }

    50% {

        transform: skew(-0.5deg, 0deg) scaleY(1);

    }

}





.main16-bg .f3{

    position: absolute;

    bottom: -56vw;

    left: -8vw;

    width: 43.5vw;

    height: 87vw;

}



.main16-bg .f3.show{

    transform-origin: center bottom;

    animation: flower16-3 3s ease 1s infinite;

}

@keyframes flower16-3 {

    0%,

    100% {

        transform: skew(0deg) scaleY(1);

    }

    50% {

        transform: skew(0.5deg, 0deg) scaleY(1);

    }

}



.main16-bg .f4{

    position: absolute;

    bottom: -31.5vw;

    right: -13.2vw;

    width: 50vw;

    height: 53vw;

    mix-blend-mode: screen;

}

.main16-bg .f4.show{

    transform-origin: center bottom;

    animation: flower16-4 3s ease 1s infinite;

}

@keyframes flower16-4 {

    0%,

    100% {

        transform: skew(0deg) scaleY(1);

    }

    50% {

        transform: skew(-0.5deg, 0deg) scaleY(1);

    }

}





.main16-logo {

    position: absolute;

    left: 42vw;

    top: 14.5vw;

    width: 16vw;

}

.main16-logo img  {

    width: 100%;

    object-fit: cover;

}

.main16-box{

    position: absolute;

    left: 47.15vw;

    top: 22.6vw;

    width: 5vw;

    height: 5vw;

}

.main16-txt1{

    position: absolute;

    left: 38.5vw;

    bottom: 17.5vw;

    width: 23vw;

}

.main16-txt2{

    position: absolute;

    left: 38.4vw;

    bottom: 14.5vw;

    width: 23vw;

}

.main16-txt3{

    position: absolute;

    left: 38.75vw;

    bottom: 12vw;

    width: 22.5vw;

}

.main16-st{

    position: absolute;

    left: 27.5vw;

    bottom: 1vw;

    width: 45vw;

}

.main16-box img , .main16-txt1 img , .main16-txt2 img , .main16-txt3 img  , .main16-st img{

    width: 100%;

    object-fit: cover;

}





















.main17 {

    position: relative;

    width: 50%;

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

    float: left;

    background-color: #fff;

}

.main17-map {

    width: 100%;

    height: 100%;

}









.main18 {

    width: 48%;

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

    position: relative;

    float: right;

    padding: 0vw;

    background-color: #fff;

}

.form {

    width: 30vw;

    position: absolute;

    left: 10vw;

    top: 13vw;

    letter-spacing: 0.1vw;

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

    color: #231815;

}



.form-title {

    width: 100%;

    margin: 7vw 0 2vw 0;

    font-size: 1.55vw;

    letter-spacing: 0vw;

    color: #231815;

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

    text-align: center;

}





.input {

    width: 100%;

    position: relative;

    height: 3vw;

    line-height: 3vw;

    margin-bottom: 1.5vw;

    background-color: #fff;

    border: 1px solid #7d7d7d;

}



.input-title {

    position: absolute;

    left: 1vw;

    top: 0;

    height: 3vw;

    line-height: 3vw;

    letter-spacing: 0.1vw;

    font-size: 1.1vw;

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

    font-weight: 300;

    z-index: 1;

    color: #7d7d7d;

}



.form input[type="text"] {

    width: 100%;

    height: 3vw;

    line-height: 3vw;

    letter-spacing: 0.1vw;

    font-size: 1.2vw;

    border: none;

    background-color: transparent;

    color: #000;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    outline: none;

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

    padding: 0 0 0 7vw;

    position: relative;

    box-sizing: border-box;

    display: block;

    font-weight: 300;

}



.form input::placeholder {

    color: #7d7d7d !important;

    font-weight: 300;

}



.form select {

    width: 100%;

    box-sizing: border-box;

    height: 3vw;

    line-height: 3vw;

    letter-spacing: 0.2vw;

    font-size: 1.2vw;

    color: #000;

    padding: 0 0 0 7vw;

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

    font-weight: lighter;

    background-color: transparent;

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    -webkit-tap-highlight-color: transparent;

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

    background-position-x: 97%;

    background-position-y: 54%;

    background-repeat: no-repeat;

    background-size: 0.8vw;

    outline: none;

    border: none;

    cursor: pointer;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    position: relative;

    display: block;

}



.select {

    width: 100%;

    position: relative;

    height: 3vw;

    line-height: 3vw;

    margin-bottom: 1.5vw;

    background-color: #fff;

    border: 1px solid #7d7d7d;

}



.check-item {

    width: 100%; 

    height: 3vw;

    line-height: 3vw;

    letter-spacing: 0.1vw;

    font-size: 1vw;

    color: #7d7d7d;

    margin: 0 auto;

    vertical-align: middle;

    font-weight: 300;

    overflow: hidden;

    margin: 1.5vw 0;

    padding-left: 5vw;



}



.check-item::after {

    content: "";

    clear: both;

    display: block;

}



.check-item a:link,

.check-item a:visited,

.check-item a:hover,

.check-item a:active {

    color: #000;

}



.check-label {

    width: 50%;

    height: 3vw;

    line-height: 3vw;

    float: left;

    text-align: left;

    font-weight: lighter;

}



.check-item label {

    height: 3vw;

    line-height: 3vw;

    cursor: pointer;

    font-weight: 300;

}



.check-item label input {

    width: 1.8vw;

    height: 1.8vw;

    margin: 0% 1% -3% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

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

    background-size: 1.8vw 1.8vw;

    border: none;

}

.check-item label input:checked {

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

    background-size: 1.8vw 1.8vw;

}



.agreeBtn {

    height: 4vw;

    float: left;

}



.openTxtBtn {

    display: inline-block;

    height: 3vw;

    line-height: 3vw !important;

    cursor: pointer;

}



.form input[type="submit"],

.form input[type="button"] {

    width: 100%;

    height: 3vw;

    background-color: #7d7d7d;

    letter-spacing: 0.1vw;

    font-size: 1.2vw;

    color: #fff;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    outline: none;

    position: relative;

    margin: 0;

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

    display: block;

    font-weight: 300;

    border: none;

    cursor: pointer;

}



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;

    /*透明*/

}









/*同意書照片預覽*/

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

}



.loading {

    width: 100%;

    height: 100%;

    position: fixed;

    left: 0;

    top: 0;

    z-index: 99999;

    background-color: #fff;

}



.spinner {

    /* width: 5vw;

    height: 5vw;

    position: absolute;

    left: 47.5%;

    top: 47.5%;

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

    background-color: #353535;

    border-radius: 100%;

    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;

    animation: sk-scaleout 1.0s infinite ease-in-out; */

}



@-webkit-keyframes sk-scaleout {

    0% {

        -webkit-transform: scale(0)

    }

    100% {

        -webkit-transform: scale(1.0);

        opacity: 0;

    }

}