/*-------------------------------------------
基本版面設定
-------------------------------------------*/
html {
        height: 100%;
        scroll-behavior: smooth;
}

body {
        max-width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        font-family: 'Noto Serif TC';
        overflow-x: hidden;
        background: url(../src/bk-paper.jpg) white 0% 0% / 600px 600px repeat;
}

video {
        object-fit: cover;
        transition: transform 30ms linear;
        display: block;
}

img,
object,
embed,
video {
        max-width: 100%;
        vertical-align: text-top;
        border: 0px;
}

a,
a:link,
a:hover,
a:active,
a:visited {
        transition: 1s;
        text-decoration: none;
        color: #fff;
}

/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {
        width: 100%;
        border: 0px;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
summary,
table,
time,
tt,
u,
ul,
var,
video {
        margin: 0;
        margin-bottom: 0 !important;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        font: inherit
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
        display: block
}

ol,
ul {
        list-style: none
}

*,
:after,
:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}

/*-----------------------------------------------------
    共用設定
-----------------------------------------------------*/
.main {
        overflow-x: hidden;
}

.container {
        max-width: 86% !important;
}

.px--160 {
        padding-right: 160px;
        padding-left: 160px;
}

.px-4vw {
        padding-right: 4vw;
        padding-left: 4vw;
}

.px-9vw {
        padding-right: 9vw;
        padding-left: 9vw;
}

.py-10vh {
        padding-top: 10vh;
        padding-bottom: 10vh;
}

.pl--160 {
        padding-left: 160px;
}

.pl-4vw {
        padding-left: 4vw;
}

.pl-5vw {
        padding-left: 5vw;
}

.pl-8vw {
        padding-left: 8vw;
}

.pr-5vw {
        padding-right: 5vw;
}

.pr-8vw {
        padding-right: 8vw;
}

.pr--160 {
        padding-right: 160px;
}

.pr-5vw {
        padding-right: 5vw;
}

.pr-9vw {
        padding-right: 9vw;
}

.pt-18vh {
        padding-top: 18vh;
}

.pt-20vh {
        padding-top: 20vh;
}

.pb-13vh {
        padding-bottom: 13vh;
}

.mt-3vh {
        margin-top: 3vh;
}

.mt-5vh {
        margin-top: 5vh;
}

.mt-7vh {
        margin-top: 7vh;
}

.mt-10vh {
        margin-top: 10vh;
}

.mb-3vh {
        margin-bottom: 3vh !important;
}

.mb-5vh {
        margin-bottom: 5vh !important;
}

.mb-7vh {
        margin-bottom: 7vh !important;
}

.mb-10vh {
        margin-bottom: 10vh !important;
}

.mb-20vh {
        margin-bottom: 20vh !important;
}

.ml-4vw {
        margin-left: 4vw;
}

.zindex-999 {
        z-index: 999;
}

.zindex-998 {
        z-index: 998;
}

.h-100vh {
        height: 100vh;
}

.h--240 {
        height: 240px;
}

.w-53 {
        width: 53%;
}

.w-45 {
        width: 45%;
}

.w-80 {
        width: 80%;
}

.w-100vw {
        width: 100vw !important;
}

.gap--48 {
        gap: 48px;
}

.gap--60 {
        gap: 60px;
}

.gap--100 {
        gap: 100px;
}

.gap--160 {
        gap: 160px;
}

.gap--5vw {
        gap: 5vw;
}

.w-22vw {
        width: 22vw;
}

@media (max-width: 992px) {
        .px-lg--8vw {
                padding-left: 8vw;
                padding-right: 8vw;
        }
}

@media (max-width: 576px) {
        .gap-sm--60 {
                gap: 60px;
        }

        .px-sm--40 {
                padding-left: 40px;
                padding-right: 40px;
        }

        .px-sm--20 {
                padding-left: 20px;
                padding-right: 20px;
        }

}





/*-----------------------------------------------------
背景設定
-----------------------------------------------------*/
#section1 {
        min-height: 100vh !important;
        margin-bottom: -1px;
}

#section2 {
        margin-top: -1px;
        min-height: 100vh;

}

#section3 {
        padding-top: 240px;
        padding-bottom: 80px;
        height: fit-content;
        padding-left: 8vw;
        padding-right: 8vw;
}





/*-----------------------------------------------------
顏色設定
-----------------------------------------------------*/
.color-black {
        color: #000;
}

.color-white {
        color: #fff;
}

.color-blue {
        color: #036EAE;
}

/*-----------------------------------------------------
文字設定
-----------------------------------------------------*/
.text-en {
        font-family: "Cormorant";

        text-align: center;
        font-size: 40px;
        font-weight: 400;
        line-height: 80%;
        letter-spacing: 14px;
        text-transform: uppercase;
}

.text-en--sm {
        font-family: "Cormorant";

        font-size: 16px;
        font-weight: 300;
        letter-spacing: 1.6px;
        text-transform: uppercase;
}

.text-en--lg {
        font-family: "Cormorant";
        font-size: 38px;
        font-weight: 600;
        letter-spacing: 3.8px;
        text-transform: uppercase;
}

.text-chin--sm {
        font-family: "Noto Serif TC";
        font-size: 12px;
}

.text-chin--md {
        font-family: "Noto Serif TC";
        white-space: nowrap;

        font-size: 20px;
        font-weight: 400;
        line-height: 250%;
        letter-spacing: 5px;
}

.text-chin--lg {
        font-family: "Noto Serif TC";
        text-indent: 15px;
        font-size: 50px;
        font-weight: 600;
        letter-spacing: 15px;
        white-space: nowrap;
}

.text-chin--title {
        font-family: "Noto Serif TC";

        font-size: 70px;
        font-weight: 600;
        letter-spacing: 18px;
}

.text-description {
        font-family: "Noto Sans TC";
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 1px;
}

.text-description--lg {
        font-family: "Noto Serif TC";
        font-size: 14px;
        font-weight: 300;
        line-height: 163%;
        letter-spacing: 6px;
}


.text-form {
        font-family: "Noto Serif TC";
        font-size: 18px;
        line-height: 160%;
        font-weight: 200;
        letter-spacing: 0.9px;
}

.text-form--lg {
        font-family: "Noto Serif TC";
        font-size: 40px;
        font-weight: 600;
        line-height: 120%;
        letter-spacing: 6px;
}

.text-form--md {
        font-family: "Noto Serif TC";
        font-size: 28px;
        font-weight: 600;
        line-height: 120%;
        letter-spacing: 3px;
}

.text-form--sm {
        font-family: "Noto Serif TC";
        font-size: 12px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0.6px;
}

.text-gold {
        background: linear-gradient(270deg, #FBE9B9 -22.33%, #C4B08B -0.15%, #98835F 32.01%, #FBE9B9 61.95%, #98835F 88.57%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

.text-yellow {
        background: linear-gradient(312deg, #FBE9B9 -540.04%, #C4B08B -310.43%, #98835F 22.52%, #FBE9B9 332.5%, #98835F 608.04%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

.text-btn-title {
        font-size: 80px;
        font-weight: 300;
        line-height: 160%;
        text-transform: capitalize;
        font-family: 'Noto Serif Tc', Sans;

}

.text-shadow {
        text-shadow: 0px 1px 10px rgba(0, 0, 0, 0.75);
}

.text-left {
        text-align: end;
}

.text-right {
        text-align: start;
}

.text-center {
        text-align: center;
}



/*-----------------------------------------------------
輪播設定
-----------------------------------------------------*/
.owl-theme .owl-nav.disabled+.owl-dots {
        margin-top: -35px !important;
        position: inherit !important;
        z-index: 9 !important;
}

.owl-list {
        position: relative;
}

.owl-text {
        font-family: "Noto Serif TC";
        font-size: 28px;
        font-weight: 500;
}

.owl-text>span {
        font-size: 16px;
        font-weight: 350;
}



.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
        margin: 0px 1vw;
        display: flex !important;
        flex-wrap: wrap !important;
        color: #fff !important;
        height: 35px !important;
        align-content: center !important;
        justify-content: center !important;
        cursor: pointer;
        z-index: 10;
}

.owl-carousel .owl-nav button.owl-next img,
.owl-carousel .owl-nav button.owl-prev img {
        height: 35px !important;
}


.owl-theme .owl-nav {
        position: absolute !important;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        z-index: 999 !important;
        margin-top: 0px !important;
}

.owl-theme .owl-dots {
        position: absolute;
        top: 1vh !important;
        right: 1vw !important;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
}


.owl-theme .owl-dots .owl-dot span {
        margin: 5px 3px !important;
        background: #D9D9D9 !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
        background: #036EAE !important;
}

.owl-stage-outer {
        height: 100%;
}





.call_to_action img {
        width: auto;
        padding: 5px;
}

#sec2Carousel {
        max-width: 65vw;
        margin-left: auto;
}

#sec2Carousel .owl-img img {
        height: 920px;
        object-fit: cover;
}

#sec3Carousel {
        max-width: 45vw;
}

#sec3Carousel .owl-img img {
        height: 600px;
        object-fit: cover;
}

#sec4Carousel {
        max-width: 100vw;
        margin: 0 auto;
}

#sec4Carousel .owl-img img {
        height: 400px;
        object-fit: cover;
}


/* 解決箭頭和滑動不可同時存在的問題 */
.owl-theme .owl-nav {
        pointer-events: none !important;
        /* 整個導航層不可點擊 */
}

.owl-theme .owl-nav button {
        pointer-events: auto !important;
        /* 只有按鈕可以點擊 */
}


.description-box {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 80%);
        width: 100%;
        height: 100px;
        right: 0;
        bottom: 0;
        position: absolute !important;
        padding-bottom: 1vh;
        padding-right: 1vw;
}

#section2 .description-box {
        padding-bottom: 2vh;
        padding-right: 2vw;
}







/*-----------------------------------------------------
燈箱控制
-----------------------------------------------------*/
.lightbox {
        display: flex;
        flex-direction: column-reverse;
}

.lb-dataContainer {
        padding-bottom: 10px;
}


/*-----------------------------------------------------
表單設定
-----------------------------------------------------*/
#section-form {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 40%, #036EAE 100%);
        background-size: cover;
        background-position: center bottom;
        padding-top: 35vh;
        padding-bottom: 10vh;
}

input[type=text]::placeholder,
input[type=tel]::placeholder,
select::placeholder,
textarea::placeholder {
        color: #000 !important;
        font-size: 18px !important;
}

.msgPlaceholder {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        color: #000;
        padding: 20px 20px;

        font-family: "Noto Sans TC";
        font-size: 18px;
        font-weight: 350;
        letter-spacing: 1px;
}

input:focus+.msgPlaceholder {
        opacity: 0;
}

input:focus::placeholder {
        opacity: 0;
}

textarea:focus::placeholder {
        opacity: 0;
}

select>option:not(:first-child) {
        color: #212529;
}

input[type=text],
input[type=tel],
select,
textarea {
        padding: 20px 20px !important;
        border-bottom: 1px solid #000;
        background-color: transparent !important;
}


#submit {
        padding: 20px 0;
        justify-content: center;
        align-items: center;
        background-color: #036EAE;
        color: #fff;
        border-radius: 0;
        width: 100%;
        border: 0px solid #000;
        font-weight: bold;
        transition: 0.3s ease-in-out;

}

#submit:hover {
        background-color: #000 !important;
        transition: 0.3s ease-in-out;
}

.form-select,
.form-control {
        color: #000 !important;
        border: 0 !important;
        border: 1px solid #000 !important;
        border-radius: 0 !important;
}

.form-select:focus,
.form-control:focus {
        color: #000;
        background-color: #fff0;
        border: 1px solid #036EAE !important;
        box-shadow: unset !important;
}

.formCheck {
        width: 47vw;
}



#form textarea {
        min-height: 200px;
}

.icon-area a {
        display: block !important;
        text-decoration: none !important;
        color: #fff !important;
}

.icon-area a:hover {
        opacity: 0.6;
}

.font-size16 a:hover {
        opacity: 0.6;
        background-color: unset !important;
        color: #fff !important;
}

.receptionMap {
        width: 60%;
}

#section-form .form-box {
        gap: 160px;
}

.copyright {
        margin-top: 180px;
}


.custom-checkbox {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
        display: none;
}

.custom-checkbox .circle {
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 1px solid #333;
        border-radius: 50%;
        background: transparent;
        position: relative;
        transition: border-color 0.2s;
        margin-right: 0;
        box-sizing: border-box;
        vertical-align: middle;
}

/* 打勾效果 */
.custom-checkbox input[type="checkbox"]:checked+.circle::after {
        content: '';
        position: absolute;
        left: 25%;
        top: 50%;
        width: 7px;
        height: 12px;
        border: 1px solid #000;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg) translate(-50%, -50%);
        border-radius: 1px;
}

/* 點擊時外框顏色變化 */
.custom-checkbox input[type="checkbox"]:focus+.circle {
        border-color: #000;
}

.btn-form {
        background-color: white;
        border-radius: 1000px;
        color: #036EAE;
        font-size: 24px;
        font-weight: 700;
        font-family: "Noto Serif Tc";
        width: fit-content;
        padding: 5px 40px;
        border: 0px;
        letter-spacing: 2.5px;
}

.phoneImg {
        width: 360px;
}

#section-form a,
#section-form a:link,
#section-form a:hover,
#section-form a:active,
#section-form a:visited {
        color: #000;
}




/*-----------------------------------------------------
置底小圖示navbar設定
-----------------------------------------------------*/
.nav-bar {
        position: fixed;
        z-index: 1000;
        bottom: -100px;
        /*一開始先隱藏header*/
        width: 100%;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(0, 0, 0, 0.36);
        background-blend-mode: hard-light;
        backdrop-filter: blur(25px);
        transition: bottom 0.5s ease-in-out;
}



.nav-bar .logo {
        width: 240px;

}

.nav-bar .call_to_action {
        display: flex;
        gap: 10px;
}

.nav-bar .call_to_action a {
        display: flex;
        width: 45px;
        height: 45px;
        padding: 2px;
        border: 1px solid #fff;
        border-radius: 50%;
        transition: all .3s;
        align-content: center;
        justify-content: center;
}

.nav-bar .call_to_action a:hover {
        opacity: .8;
}

.nav-bar .fa {
        font-size: 30px;
}

.call_to_action_m {
        display: none;
}


.jquery-back-to-top {
        background-color: #E9CBA3 !important;
}


/*-----------------------------------------------------
區塊個別設定
-----------------------------------------------------*/

.titleLine {
        width: 35px;
        /* height: 50%; */
        border-top: 1px solid #036EAE;
}


/* ---sec1--- */

#section1 video {
        object-position: center top;
        width: 100vw;
}

#section1 .sec1Logo {
        position: absolute;
        top: 3vmin;
        right: 5vw;
        width: 10vmin;
}


/* ---sec2--- */
#section2 .secTxt {
        width: 33.33%;
}

#section2 .bk-block {
        background-color: #036EAE;
        width: 240px;
        height: 720px;
        opacity: 0.05;
        z-index: -1;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;

}


.img-block {
        position: relative;
}

.img-block img {
        object-fit: cover;
        width: 100%;
        height: 100%;
}

.img-block p {
        position: absolute;
        right: 20px;
        bottom: 20px;
        margin: 0;
}

.img-block div {
        position: relative;
}

/* ---sec3--- */
#section3 .text-chin--lg {
        text-indent: 0px;
}

#section3 .bk-block {
        background-color: #036EAE;
        width: 100vw;
        height: 800px;
        opacity: 0.05;
        z-index: -1;
        position: absolute;
        left: 0;
        top: 140px;
}

#section3 a {
        text-decoration: underline;
}



/* ---sec4--- */

#section4 .bk-block {
        background-color: #036EAE;
        width: 60vw;
        height: 560px;
        opacity: 0.05;
        z-index: -1;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
}





/*-----------------------------------------------------
RWD設定
-----------------------------------------------------*/

@media (max-width: 1600px) {
        #sec2Carousel {
                max-width: 50vw;
        }

        #sec2Carousel .owl-img img {
                height: 60vh;
        }

        #section2 .secTxt {
                width: fit-content;
        }

        #section2 {
                min-height: fit-content;
        }
}


@media (max-width: 1400px) {
        #section1 {
                min-height: 80vh !important;
        }

        #section3 {
                padding-left: 4vw;
                padding-right: 4vw;
        }

        .formCheck {
                width: 70vw;
        }

        #sec3Carousel {
                margin: 0 auto;
        }

        #sec3Carousel .owl-img img {
                height: 40vh;
        }

}


@media (max-width: 1200px) {
        #section1 {
                min-height: 70vh !important;
        }

        #sec2Carousel {
                max-width: 50vw;
        }

        #sec2Carousel .owl-img img {
                height: 50vh;
        }

        #sec3Carousel .owl-img img {
                height: 40vh;

        }

        .owl-theme .owl-dots {
                top: 1vh !important;
                right: 3vw !important;
        }

        .text-chin--md {
                font-size: 16px;
        }

        .text-form--lg {
                font-size: 36px;
                letter-spacing: 4px;
        }

        #section-form .form-box {
                gap: 8vh;
        }

}

@media (max-width: 992px) {
        #section1 {
                min-height: 70vh !important;
        }

        .text-en--lg {
                font-size: 4vmin;
        }

        .text-chin--lg {
                font-size: 6vmin;
        }

        .text-chin--title {
                font-size: 7vmin;
        }

        #section-form .text-chin--lg {
                font-size: 28px;
        }


        #sec2Carousel {
                max-width: 100vw;
        }

        #sec2Carousel .owl-img img {
                height: 50vh;
        }

        #sec3Carousel {
                max-width: 100%;
        }

        #sec3Carousel .owl-img img {
                height: 60vh;
        }

        #section2 {
                height: fit-content;
        }

        #section3 {
                height: fit-content;
                padding-top: 18vh;
                padding-bottom: 0;
                padding-left: 0vw;
                padding-right: 0vw;
        }

        #section3 .bk-block {
                top: 0;
        }

        #section-form {
                padding-left: 4vw;
                padding-right: 4vw;
        }

        .formCheck {
                width: 100%;
        }

        .text-form--lg {
                line-height: 150%;
        }
}




@media (max-width: 576px) {

        p,
        .owl-text {
                font-size: 12px;
        }

        .text-en {
                font-size: 26px;
                letter-spacing: 5px;
                text-indent: 5px;
                margin-bottom: 15px;
        }

        .text-form {
                font-size: 12px;
        }

        .text-form--sm {
                font-size: 10px;
                line-height: 150%;
        }

        .text-btn-title {
                font-size: 30px;
        }

        .section-description {
                gap: 10vh;
        }

        .section-description p {
                letter-spacing: 2px;
        }

        .text-en--sm {
                font-size: 12px;
        }

        .text-en--lg {
                font-size: 20px;
                letter-spacing: 0.7vmin;
        }


        .text-chin--lg {
                font-size: 28px;
                letter-spacing: 10px;
                text-indent: 10px;
        }

        .text-chin--md {
                font-size: 14px;
                letter-spacing: 2.5px;
        }

        .text-chin--sm {
                font-size: 12px;
                letter-spacing: 1px;
        }

        .text-chin--title {
                font-size: 32px;
                letter-spacing: 8px;
        }

        #section-form .text-chin--md {
                font-size: 12px;
                letter-spacing: 2px;
                line-height: 180%;
        }

        .text-form--md {
                font-size: 24px;
        }

        .text-form--lg {
                font-size: 24px;
                line-height: 150%;
                letter-spacing: 0.7vmin;
        }

        .btn-form {
                font-size: 16px;

        }

        .owl-text {
                font-size: 24px;
        }

        .owl-text>span {
                font-size: 16px;
        }


        .description-box .text-description {
                font-size: 12px;
        }



        .description-box {
                padding-right: 3vw;
        }

        #section1 {
                min-height: 100vh !important;
        }

        #section2 .bk-block {
                width: 160px;
                height: 520px;
        }

        #sec3Carousel .owl-img img {
                height: 40vh;
        }

        #section3 .bk-block {
                height: 640px;
                top: 0px;


        }

        #section4 .bk-block {
                width: 70vw;
                height: 600px;
        }

        #section-form {
                padding-top: 15vh;
                padding-bottom: 100px;

        }

        .formCheck {
                width: 100%;
        }


        input[type=text]::placeholder,
        input[type=tel]::placeholder,
        select::placeholder,
        textarea::placeholder {
                font-size: 12px !important;
        }

        .msgPlaceholder {
                font-size: 12px;
        }


        #section-form .form-box {
                gap: 60px;
        }

        .phoneImg {
                width: 240px;
        }

        #form textarea {
                min-height: 50px;
        }


}