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

body {
        max-width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        font-family: 'Noto Sans TC';
        /* background-color: #EDEDED !important; */
        overflow-x: hidden;
}

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

/* 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-9vw {
        padding-right: 9vw;
        padding-left: 9vw;
}

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

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

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

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

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

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

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

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

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

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

.w-53 {
        width: 53%;
}

.w-45 {
        width: 45%;
}

.w-80 {
        width: 80%;
}

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

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

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

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

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





/*-----------------------------------------------------
背景設定
-----------------------------------------------------*/
#section1 {
        /* background-image: url(../img/section1-bk.jpg);
        background-size: cover;
        background-position: left top;

        padding: 4vw 19vh 11vw 7vh; */
        min-height: 100vh !important;
}

#section2 {
        /* background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.00) 100%); */
}

#section3 {
        /* background-image: url(../img/section3-bk.jpg);
        background-size: cover;
        background-position: left center;
        min-height: 113vh !important;
        padding: 5vh 8vw; */
        margin: -1px;
}

#section4 {
        /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 94.54%, rgba(0, 0, 0, 0.50) 99.24%), url(<path-to-image>) lightgray 0px -682.874px / 107.865% 163.744% no-repeat; */
}

#section5 {
        /* background-image: url(../img/section5/section5-bk.jpg);
        background-size: cover;
        background-position: left center;
        min-height: 1350px; */
}

.section5-content {
        /* padding: 150px 17vw; */
}

#section6 {
        /* background-color: white;
        min-height: 100vh;
        padding: 150px 17vw;
        ; */
}

#section8 {
        /* background-image: url(../img/section8/section8-bk.jpg);
        background-size: cover;
        background-position: center top;
        min-height: 2100px;
        padding: 150px 17vw;
        gap: 280px; */
}

#section9 {
        /* background-image: url(../img/section9-bk.jpg);
        background-size: cover;
        background-position: center top;
        min-height: 1590px; */
        background: #F6F6F6;
}

#section10 {
        /* margin-left: 3vw;
        margin-right: 3vw;
        padding-bottom: 29vh; */
}

#section11 {
        padding-left: 13vw;
        padding-right: 13vw;
        padding-top: 25vh;
        padding-bottom: 25vh;
        gap: 28vh;
        background-color: #F5F5F5;
}



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

.color-white {
        color: #fff;
}

.color-gold {
        color: #AE7F55;
}

.color-blue {
        color: #11485C;
}

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

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

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

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

.text-en--lg {
        font-family: "Outfit";

        font-size: 80px;
        font-weight: 300;
        letter-spacing: 1.6px;
        line-height: 130%;
        text-transform: uppercase;
}

.text-chin--sm {
        font-family: "Noto Sans TC";

        font-size: 20px;
        font-weight: 350;
        line-height: 250%;
        letter-spacing: 0.4px;
        /* text-indent: 35px; */
}

.text-chin--md {
        font-family: "Noto Sans TC";

        font-size: 24px;
        font-weight: 300;
        line-height: 120%;
        letter-spacing: 0.48px;
}

.text-chin--lg {
        font-family: "Noto Sans TC";

        font-size: 32px;
        font-weight: 300;
        line-height: 120%;
        /* letter-spacing: 3px; */
}

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

        font-size: 36px;
        font-weight: 300;
        line-height: 120%;
        /* letter-spacing: 2px; */
}

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

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


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

.text-form--lg {
        font-family: "Noto Sans TC";
        font-size: 20px;
        font-weight: 500;
        line-height: 120%;
}

.text-form--sm {
        font-family: "Noto Sans 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: 'Outfit', 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 {
        /* position: absolute;
        right: 20px;
        bottom: 20px;
        text-align: right; */
        /* text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.20); */
        /* background-color: #fff; */
        font-family: "Noto Sans TC";
        font-size: 28px;
        font-weight: 500;
        /* padding: 0 16px; */
}

.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;
        /* width: 100%; */
        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: #AE7F55 !important;
}

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

.owl-img img {
        /* height: 590px; */
        height: 273px;
        object-fit: cover;
}

#section10 .owl-img img {
        /* height: 590px; */
        height: 570px;
        object-fit: cover;
}



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


.owl-item {
        /* margin: 5px 0; */
}

/* #sec11Owl .owl-item {
    width: 100%;
} */

#appearanceImg {
        width: 100vw;
}

#appearanceImg .owl-img img {
        height: 120vh;
}


#tanakaOwl {
        max-width: 500px;
        margin: 0 auto;
}

#tanakaOwl .owl-img img {
        height: 300px;
        /* height: 100%; */
        object-fit: cover;
}

#architecturalOwl {
        max-width: 460px;
        margin: 0;
}

#architecturalOwl .owl-img img {
        height: 680px;
        /* height: 100%; */
        object-fit: cover;
}

#interiorOwlTop,
#interiorOwlDown,
#landscapeOwlTop,
#landscapeOwlDown,
#structuralOwlTop,
#structuralOwlDown {
        width: 460px;
        margin: 0;
}

#interiorOwlTop .owl-img img,
#landscapeOwlTop .owl-img img,
#structuralOwlTop .owl-img img {
        height: 250px;
}

#interiorOwlDown .owl-img img,
#landscapeOwlDown .owl-img img,
#structuralOwlDown .owl-img img {
        height: 450px;
}


/* 解決箭頭和滑動不可同時存在的問題 */

.owl-theme .owl-nav {
        pointer-events: none !important;
        /* 整個導航層不可點擊 */
}

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





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

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


/*-----------------------------------------------------
表單設定
-----------------------------------------------------*/
#section-form {
        background-image: url(../img/sec-form/section-form-bk.png);
        background-size: cover;
        background-position: center bottom;
        padding-top: 17vh;
        padding-bottom: 10vh;
}

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

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

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


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

}

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

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

.form-select:focus,
.form-control:focus {
        color: #000;
        background-color: #fff0;
        border-color: #fff !important;
        box-shadow: unset !important;
}





#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: 100px;
}

.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: 6px;
    top: 2px; */
        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;
}




/*-----------------------------------------------------
置底小圖示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 {
        /* width: 60px;
        padding: 8px;
        box-sizing: border-box;
        transition: all .3s;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none; */
}

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


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

/* ---sec2--- */

#section1 video {
        position: absolute;
        z-index: -1;
        width: 100vw;
        height: 100vh
}

#section2 hr {
        /* width: 1px;
        height: 11px;
        border: 1px solid white;
        margin-top: -22px;
        opacity: 1; */
}

#section2 p,
#section7 p {
        /* text-align: center;
        letter-spacing: 10px;
        margin: 0; */
}

/* ---sec3--- */
/* .img-shadow {
        position: relative;
}

.img-shadow::before {
        content: "";
        position: absolute;
        background-image: linear-gradient(180deg, rgba(34, 34, 34, 0) 60%, rgba(34, 34, 34, 0.8) 100%);
        width: 100%;
        height: 100%;
        pointer-events: none;
}

.line--bottom {
        border-bottom: 1px solid;
        border-image: linear-gradient(312deg, #FBE9B9 -540.04%, #C4B08B -310.43%, #98835F 22.52%, #FBE9B9 332.5%, #98835F 608.04%) 1;
        margin-bottom: 13px;
}

.seciton-title {
        width: 292px;
}

.section-description {
        gap: 110px;
        margin: 5vh 2vw 5vh 0vw;
}

#section6 .section-description {
        margin: 0vh 2vw 0vh 0vw;
}

#section8 .section-description:nth-child(2) {
        margin: 0vh 0vw 0vh 2vw;
}

.section-description p {
        letter-spacing: 3px;
} */

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

/* #section3 .img-block div {
        height: 360px;
} */



/* ---sec4--- */

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

}

figcaption {
        /* left: 1vw;
        bottom: 1vh;
        bottom: 0vh;*/
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        /* background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
        width: 100%;
        height: 100px;  */
}

#section-location {
        padding: 0;
        margin: 0;
        overflow: hidden;
        position: relative;
}

.memo {
        width: 100%;
        position: absolute;
        bottom: 0;
}

.section-landmarks {
        position: relative;
        min-height: 764px;
}


.section-landmarks .wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
}

.section-landmarks .landscape{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 1920px;
        height: 1080px;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
}

#section6 .section-landmarks .wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100vw;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
#section6 .section-landmarks .landscape {
    width: 1920px;
    height: 1080px;
}
#section6 .section-landmarks .landscape video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


#section4 .textCross {
        margin-top: 0vh;
}

/* ---sec5--- */

.img-locationMap {
        /* max-width: 60%; */

}

.img-locationMap>img {
        /* object-fit: contain; */

}

.box-top {
        padding-left: 13vw;
        padding-right: 13vw;
        padding-top: 23vh;
        padding-bottom: 17vh;
}

#section5 .box-down {
        margin-left: 3vw;
        margin-right: 3vw;
        padding-bottom: 29vh;
}





/* ---sec6--- */

#section6 .section-description img {
        aspect-ratio: 1 / 1;
        width: 210px;
        object-fit: cover;
        object-position: center;
}

.section-img img {
        max-height: 730px;

        object-fit: contain;
        object-position: right center;
}

.section-img p {
        text-align: right;
}

#section7 p,
#section10 p {
        /* width: 1030px;
        line-height: 190%; */
}


/* ---sec7--- */


/* ---sec8--- */

#section8 .box-down {
        padding-left: 13vw;
        padding-right: 13vw;
        padding-bottom: 23vh;
        padding-top: 17vh;
}

#section8 .box-down>div {
        height: 630px;
}


#section8 .img-block {
        /* height: 590px; */
}

#section8 .img-block img {
        /* height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: right center; */
}

#section8 .col-12 {
        /* max-width: 57.8%; */
}



/* ---sec10--- */
#section10 .box-down {
        padding-left: 3vw;
        padding-right: 3vw;
        padding-bottom: 29vh;
}


/* ---sec11--- */
#section11 h4 {
        line-height: 150%;
}

#section11 h4 span {
        font-size: 18px;
}

#section11 p {
        text-align: justify;
        line-height: 190%;
}

#section11 .signImg {
        margin-top: 32px;
        margin-bottom: 80px !important;
}

#section11 .text-description {
        font-weight: 300 !important;
}

#architecturalOwl .personImg {
        max-width: 300px;
}

.box-dir {
        flex-direction: row;
}


/* ---sec12--- */
#section12 .textContainer {
        padding-left: 13vw;
        padding-right: 100px;

}

#section12 .textContainer h4 {
        font-weight: 500;
}







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

@media (max-width: 1700px) {
        .box-dir {
                flex-direction: column !important;
                margin-top: 80px
        }

        .box-dir-reverse {
                flex-direction: column-reverse !important;
        }

        .box-dir-reverse>div,
        .box-dir>div {
                width: 100%;
        }

        .box-dir-reverse .text-left {
                text-align: start;
        }

        .box-dir-reverse .justify-content-end {
                justify-content: flex-start !important;
        }

        .personImg {
                width: 100%;
        }

        .personImg img {
                width: 60%;
        }

        #section8 .box-down>div {
                height: auto;
        }

        .descText {
                margin-top: 7vh !important;
        }

        #section2,
        #section9 {
                height: auto;
                margin: 0;
        }

        #section12 {
                gap: 100px;
        }

        #section12 img {
                width: 100%;
        }

        #section12 .textContainer {
                padding-left: 13vw;
                padding-right: 13vw;
        }




}

@media (max-width: 1400px) {
        .personImg img {
                width: 100%;
        }

}




@media (max-width: 1200px) {
        .jquery-back-to-top-status-on {
                display: none !important;
        }



        #section7 .text-center,
        #section10 .text-center {
                text-align: start !important;
        }

        #section7 .textContainer,
        #section10 .textContainer {
                padding-left: 9vw;
                padding-right: 9vw;
        }

        #section7 .textCross,
        #section10 .textCross {
                margin-top: 5vh;
        }

        #section7 p,
        #section10 p {
                width: auto;
        }


        #section-form .form-box {
                padding-left: 13vw;
                padding-right: 13vw;
        }

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

}

@media (max-width: 992px) {

        .text-en--lg {
                font-size: 60px;
        }

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

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



        /*空拍圖大小 */
        .section-landmarks .landscape,
        .section-landmarks2 .landscape {
                width: auto;
                height: 100%;
                object-fit: cover;
                aspect-ratio: 16/9;
        }



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

        #section5 .owl-img img {
                height: 300px;
        }



        .landscapeText {
                position: absolute;
                top: 6vh;
                z-index: 1;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
        }

        .landscapeText h2 {
                font-size: 24px;
        }

        .landscapeText h3 {
                font-size: 24px;
                font-family: "Outfit";
                font-weight: 300;
                letter-spacing: 0.5px;
                line-height: 130%;
                text-transform: uppercase;
        }










        .owl-item {
                width: 100%;
        }


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


        #architecturalOwl .owl-img img {
                height: 100vh;

        }


        #architecturalOwl,
        #tanakaOwl {
                max-width: 100vw;
        }

        #tanakaOwl,
        #architecturalOwl,
        #interiorOwlTop,
        #interiorOwlDown,
        #landscapeOwlTop,
        #landscapeOwlDown,
        #structuralOwlTop,
        #structuralOwlDown {
                width: 100vw;
                margin: 0;
        }


        .mobile-owl {
                width: 100vw;
        }

        .mobile-owl .owl-img img {
                height: 50vh;
        }






        #section11 {
                padding-left: 0;
                padding-right: 0;
                padding-top: 0;
                padding-bottom: 0;
                gap: 0;
        }

        .box-dir {
                margin-top: 0;
        }

        #section11 .textContainer,
        #section12 .textContainer {
                padding-left: 10vw !important;
                padding-right: 10vw !important;
                padding-top: 10vh;
                padding-bottom: 10vh;
        }


        #section11 #tanakaBox .textContainer h4 {
                margin-top: 0vh;
        }

        #section11 .textContainer h4 {
                font-size: 20px;
                margin-top: 3vh;
        }

        #section11 .textContainer span {
                font-size: 18px;
        }

        #section11 .signImg {
                margin-left: 35vw;
                margin-top: 0;
                margin-bottom: 5vh !important;
        }

        .receptionMap {
                width: 100%;
        }

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

        .nav-bar .call_to_action a {
                width: 40px;
                height: 40px;
        }

}




@media (max-width: 576px) {

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

        #section1-subText {
                padding: 0 10vw;
        }







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


        .section-title {
                width: 60vw;
        }


        .section-img>.text-description {
                margin-top: 20vh !important;
                margin-bottom: 5vh !important;
        }

        /* 
        #section6 .section-description img {
                width: 100%;
                aspect-ratio: auto;
        }


        #section5 {
                min-height: 150vh;
        }

        #section2 p,
        #section7 p {
                letter-spacing: 5px;
        }

        #section8 .img-block {
                height: fit-content;
        } */

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

        .text-en--lg {
                font-size: 36px;
        }

        .text-chin--title {
                font-size: 20px;
        }

        .text-chin--sm {
                font-size: 14px;
                letter-spacing: 0.3px;
                line-height: 190%;
                /* text-indent: 14px; */
        }

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

        .text-chin--lg {
                font-size: 24px;
        }

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

        .text-description {
                font-size: 12px;
                /* line-height: 200%;
                letter-spacing: 2px; */
        }

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

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

        #section1 .imgLogo {
                width: 60vw;
        }

        #section1 .gap--48 {
                gap: 28px;
        }

        #section1 .textCross h2 {
                line-height: 190%;
        }

        .textCross h2 {
                line-height: 160%;
        }

        .description-box .text-description {
                font-weight: 400 !important;
        }

        #section2 .textCross {
                margin-top: 4vh;
        }

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

        /* #section5 .textCross,
        #section7 .textCross,
        #section10 .textCross { */
        .textCross {
                margin-top: 4vh;
                margin-bottom: 4vh !important;
        }

        #section5 .owl-img img {
                height: 250px;
        }


        .box-top {
                padding-left: 10vw;
                padding-right: 10vw;
                padding-top: 11vh;
                padding-bottom: 5vh;
        }

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

        #section8 .box-down {
                padding-left: 10vw;
                padding-right: 10vw;
                padding-top: 11vh;
                padding-bottom: 11vh;
        }



        #section5 .box-down {
                margin-left: 10vw;
                margin-right: 10vw;
                padding-bottom: 11vh;

        }

        .textContainer {
                padding-left: 10vw !important;
                padding-right: 10vw !important;
                padding-top: 10vh;
                padding-bottom: 10vh;
        }

        #section11 .textContainer {
                padding-bottom: 5vh;
        }


        #section8 .box-down .descText {
                margin-top: 4vh !important;
                margin-bottom: 2vh !important;
        }

        #section10 .box-down {
                padding-left: 10vw;
                padding-right: 10vw;
                padding-bottom: 10vh;
        }


        .mobile-owl .owl-img img {
                height: 250px;
        }

        #tanakaOwl .owl-img img {
                height: 300px;
        }

        #architecturalOwl .owl-img img {
                height: 680px;
        }


        #section12 {
                gap: 0;
        }

        #section12 .textContainer h4 {
                font-size: 16px;
        }

        .form-control,
        .form-select {
                font-size: 12px !important;
        }



        .text-button {
                font-family: "Noto Sans TC";

                font-size: 16px;
                font-weight: 700;

        }

        .receptionMap {
                width: 80%;
        }

        #section-form .form-box {
                gap: 5vh;
                padding-left: 4px;
                padding-right: 4px;
        }


        #section-form .phoneText h6 {
                font-size: 20px;
                line-height: 140%;
        }

        #section-form .phoneText .text-btn-title {
                font-size: 40px;
                line-height: 160%;
        }

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

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


        .owl-carousel .owl-nav button.owl-next,
        .owl-carousel .owl-nav button.owl-prev {
                margin: 0px 2vw;
                height: 25px !important;
        }

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

        .owl-theme .owl-dots .owl-dot span {
                width: 8px !important;
                height: 8px !important;
        }



}