@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');
html, body { font-size: 62.5%; }
:root { --primary: #6f4f94; --primary_l:#f1eef4; --blue:#3e81a6; --blue_l:#edf1f3; --orange:#e9845a;--orange_l:#fdefe7; --white: #FFF; --dark: #323232; --gray:#5d5d5d; --gray_l:#f5f5f5; --yellow: #fcc65a; --yellow_l: #ffd788; --red:#b51717;}
body { font-family:'Noto Sans TC','Microsoft JhengHei', Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 1px; line-height: 1.5; background: #fffbf7; color: var(--dark)}
p{ font-size: 1.6rem;}
a{ font-size: 1.6rem; text-decoration: none; transition: all .35s;}
h1,h2{ font-weight: 700;}
.t-center{ text-align: center;}
.t-left{ text-align: left;}
.t-red{ color: var(--red);}
::selection { background-color: var(--yellow);}
img { max-width: 100%; height: auto;}

/* Btn style */
header .btn{ position: relative;}
header .btn span{ position: relative; z-index: 2; line-height: 60px;}
header .btn:hover:after{ width: 100%; }
header .btn:after{ position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: var(--white); transition: all .35s; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button;}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer;}
.btn { cursor: pointer; padding:1rem 2.5rem; font-size: 1.8rem; transition: .5s;}
.btn-yellow { color: var(--dark); background-color: var(--yellow); border-color: var(--yellow);}
.btn-primary { position: relative; display: inline-block; color: var(--white); background-color: var(--primary); border-color: var(--primary);}
.btn-w { position: relative; display: inline-block; background-color: var(--white); color: var(--primary); box-shadow: 0 0 10px rgb(0 0 0 / 10%);}
.btn-w span,.btn-primary span{ position: relative; z-index: 2;}
.btn-w:after{ position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: var(--yellow); transition: all .35s; }
.btn-w:hover{ color: var(--primary);}
.btn-w:hover:after,.btn-primary:hover:after{ width: 100%; }
.btn-primary:after{ position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: var(--yellow); transition: all .35s; }
.btn-primary:hover{ color: var(--primary);}

/* right-bar */
#consult-bar{ position: fixed; right:43px; bottom: 115px; z-index: 999; }
.consult-icon{ display: block; padding: 9px 10px; box-shadow: 0 0 5px rgb(0 0 0 / 10%); border-radius: 40px;
background: #b168e2; /* Old browsers */ background: -moz-linear-gradient(top,  #b168e2 0%, #6f4f94 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b168e2 0%,#6f4f94 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b168e2 0%,#6f4f94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.consult-icon img{ width: 30px;}
#consult-bar .list{ margin: 0; padding: 0; list-style: none; display: none; text-align: right;}
#consult-bar .list li{ height: 48px;}
#consult-bar .list li img{ width: 24px;}
#consult-bar .list li a{ padding: 12px; box-shadow: 0 0 5px rgb(0 0 0 / 10%);}
#consult-bar .list li:first-child a{ background: #00b900;}
#consult-bar .list li:nth-child(2) a{ background: #016beb;}
#consult-bar .list li:nth-child(3) a{ background: var(--white)}
.consult-icon span{ display: none; width: 0; font-size: 1.3rem; color: var(--white); transition: all .35s; }
.consult-icon span.open{ display: inline-block; vertical-align: middle; width: auto;}
/* Go top */
.back-to-top { position: fixed; display: none; padding: 5px; right: 49px; bottom: 45px; background: rgba(0,0,0,0.55); z-index: 99;}
.back-to-top svg{ width: 30px;}
@media (max-width: 575.98px) {
    #consult-bar { right: 25px;}
    .back-to-top{ right: 31px;}
}
/* Header */
header{ background: rgba(53, 35, 35, 0.7); position: fixed;}
.navbar { max-width: 1200px; margin: 0 auto; position: relative;  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.navbar .container{ display: flex;}
.navbar-nav { display: flex; padding-left: 0;padding: 1.5rem; margin-bottom: 0; flex-direction: column; list-style: none;}
.nav-link { position: relative; display: block; padding: 0.5rem 1rem; color: #06BBCC; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out;}
.navbar-nav .nav-link { padding-right: 0; padding-left: 0;}
.navbar .navbar-nav .nav-link { margin-right: 35px; color: var(--white); font-size: 15px; outline: none;}
.navbar .navbar-nav .nav-link:hover::after,.navbar .navbar-nav .nav-link.active::after { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 2px; background: var(--white);}
.dropdown{ position: relative; margin-right: 30px;}
.dropdown-menu { position: absolute;  z-index: 1000; display: none; min-width: 10rem; padding: 0.5rem 0; margin: 0; background-color: var(--dark); background-clip: padding-box; border: 1px solid rgba(0,0,0,0.15); border-radius: 0px; font-size: 1rem; color: var(--white); text-align: left; list-style: none;}
.dropdown-item { display: block; width: 100%; padding: 0.5rem 1rem; clear: both; background-color: transparent; border: 0; font-size: 1.4rem; color: var(--white); text-align: inherit; white-space: nowrap;}
.dropdown-toggle { display: inline-block; white-space: nowrap;}
.navbar-brand img{ width: 100%; max-width: 320px; height: 65px; vertical-align: middle;}
.navbar .navbar-brand { height: 80px; line-height: 80px;}
.navbar .btn-group .nav-link{ float: left; margin-right: 6px;}
.navbar .btn-group svg{ width: 12px; height: 12px; fill: #fff; vertical-align: sub; }


.sticky-top { position: sticky; top: 0; z-index: 1020;}
header.sticky-top { width: 100%; top: -100px; transition: .5s;}
.navbar-toggler { padding: 0.25rem 0.75rem; background-color: transparent; border: 1px solid transparent; border-radius: 0px; font-size: 1.25rem; line-height: 1; transition: all 0.15s ease-in-out;}
.navbar-toggler svg{ fill:#fff;}
.nav-link svg{ width: 12px; height: 12px; fill:#fff;}
.navbar a:hover{ color:var(--yellow);}
.navbar a.btn:hover{ color:var(--primary);}
.navbar-toggler { position: relative; width: 24px; height: 24px; margin-right: 30px; color: rgba(0,0,0,0.55); transition: .5s ease-in-out;}
.navbar-toggler,.navbar-toggler:focus,.navbar-toggler:active,.navbar-toggler-icon:focus { outline: none; box-shadow: none; border: 0;}
.navbar-toggler span { margin: 0; padding: 0;}
.toggler-icon { display: block; position: absolute; left: 0; height: 2px; width: 100%; background: var(--white); border-radius: 1px; opacity: 1; transform: rotate(0deg); transition: .25s ease-in-out;}
.navbar-toggler .top-bar { margin-top: 0px; transform: rotate(135deg);}
.navbar-toggler .middle-bar { opacity: 0;}
.navbar-toggler .bottom-bar { margin-top: 0px; transform: rotate(-135deg);}
.navbar-toggler.collapsed .top-bar { margin-top: -8px; transform: rotate(0deg);}
.navbar-toggler.collapsed .middle-bar { opacity: 1;}
.navbar-toggler.collapsed .bottom-bar { margin-top: 8px; transform: rotate(0deg);}
.collapse:not(.show) { display: none;}
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center;}
.navbar-nav .dropdown-menu { position: static;}
.dropdown-menu[data-bs-popper] { top: 100%; left: 0; margin-top: 0.125rem;}
.dropdown-menu.show { display: block;}

@media (max-width: 991.98px) {
    .navbar .navbar-nav { text-align: center; border-top: 1px solid #646464;}
    .navbar .navbar-nav .nav-link  { margin-right: 0; padding: 15px 0;}
    .dropdown-menu{ padding: 10px 0; background: none; border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.6); text-align: center;}
    .navbar .btn-group { display: inline-block; width: 100%;}
    .navbar .navbar-nav .nav-link{ display: inline-block; float: none; }
    .navbar .dropdown{ margin: 0;}
    .navbar .navbar-nav .dropdown-toggle-split{ display: inline-block;  width: 24px; height: 24px;}
    .navbar .btn-group svg{ vertical-align: middle;}   
    .navbar-collapse.show{ padding:0 15px 15px; position: absolute; top: 80px; width: 100%;  background: rgba(0,0,0,.85);}
    .navbar-collapse.show .btn-yellow{ display: block; height: auto; padding: 0 15px; margin: 0 auto 0; max-width: 130px; text-align: center;}
    .navbar .navbar-nav .nav-link:hover::after,.navbar .navbar-nav .nav-link.active::after { height: 0;}
    header .btn span { line-height: 45px;}

}
@media (min-width: 992px) {
    .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start;}    
    .navbar-expand-lg .navbar-toggler { display: none;}
    .navbar-expand-lg .navbar-nav { flex-direction: row;}
    .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto;}
    .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute;}
    .navbar .btn-group .dropdown-menu { display: block; margin-top: 0; opacity: 0; visibility: hidden; transition: .5s;}
    .navbar .btn-group:hover .dropdown-menu { top: 100%; transform: rotateX(0deg); visibility: visible; transition: .5s; opacity: 1;}
    .navbar .dropdown-menu.fade-down { top: 100%; transform: rotateX(-75deg); transform-origin: 0% 0%;}
}

.reservation { overflow: hidden; background: url(../img/reservation-bg.jpg) left center no-repeat,#2e2417; background-attachment: fixed; color: var(--white);}
.contact-form{ width: 100%; padding: 40px;}
.reservation  h3{ font-size: 1.8rem; font-weight: 700;}
.reservation form{ max-width: 600px;}
.reservation .form-infor p{ display: inline-block; width: 75%; font-size: 1.5rem;}
.reservation .form-infor div{ float: right;}
.reservation .form-infor div a{ display: inline-block; width: 30px;}
.reservation .form-infor div > svg{ width: 30px; margin-right: 10px;}
.reservation .contact-form{ background: var(--primary);}
.reservation .left-content h4{ position: relative; display: inline-block; width: auto; padding-bottom: 15px; margin-bottom: 10px; font-size: 4.8rem; font-weight: 600; color: var(--white);}
.reservation .left-content h4:after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--white);}
.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%; height: 45px; padding-top: 3px; padding-left: 20px; padding-right: 20px; margin-bottom: 10px;
    outline: none; border-radius: 3px; border: 1px solid #ddd; background-color: var(--white); font-size: 14px; color: var(--dark);
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.contact-form input[type=checkbox] { position: relative; width: 18px; height: 18px; margin-bottom: 0; padding: 5px; background: #eee; vertical-align: bottom;}
.contact-form input[type="checkbox"]:checked:before { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: var(--primary); border-radius: 2px;}
.contact-form input[type=radio] { position: relative; margin-right: 10px;width: 18px; height: 18px; margin-bottom: 0; padding: 5px; background: #eee; vertical-align: bottom;}
.contact-form input[type="radio"]:checked:before { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: var(--primary); border-radius: 2px;}

.reservation .checkbox-area,.reservation .checkbox-area a{ font-size: 1.3rem; color: var(--white); }
.reservation .btn-w{ display: block; margin: 0 auto; border: none;}


/* -- FOOTER ----*/
footer{ padding: 40px 0; clear: both; background: var(--dark); color: var(--white);}
footer a{ color: var(--white);}
footer a:hover{ color: var(--yellow);}
footer ul{ list-style: none; padding: 0;}
.sitemap-list li,.sitemap-list li p{ font-size: 1.8rem;}
.sitemap-list li a{ padding-bottom: 5px; font-size: 1.8rem;}
.sitemap-list ul a{ font-size: 1.4rem; opacity: .8;}
.social-area{ display: flex; height: 100%; justify-content: flex-end;}
.social-links{ display: flex; align-self: flex-end;}
.social-links a{ display: inline-block; margin: 0 8px; opacity: .8;}
.social-links a:hover{ opacity: 1;}
.social-links svg{ width: 36px; height: 36px;}
footer .links { display: flex; opacity: .9;}
footer .links a{ font-size: 1.3rem; color: var(--white);}
.copyright{ font-size: 1.3rem; color: #999;}

@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1200px;}
}
@media (max-width: 1199px){
    .container{ max-width:100%;}
    .reservation form{ max-width: 100%;}
}
@media (max-width: 991.98px) { 
    .reservation { background-size: cover;}
    .reservation .left-content{ margin: 40px 0 30px;}
    .reservation .form-infor div > svg{ display: none;}
}
@media screen and (max-width: 768px){
    .reservation .left-content h4{ font-size: 3.2rem;}
    .navbar-brand img{ max-width: 280px;}
    footer .links,.links li,footer .links a{ display: inline-block;}
}    
@media (max-width: 575.98px) {
    .reservation .left-content p{ font-size: 1.2rem;}
    .social-area { justify-content: flex-start;}
    .reservation { background: url(../img/reservation-bg.jpg) 25% top no-repeat,#3d3d3b;}
}

@media screen and (max-width: 480px){
    .reservation .checkbox-area label{ width: 90%; margin-left: 5px; vertical-align: top; font-size: 1.2rem; text-align: left;}
    .contact-form { padding: 30px;}
    .contact-form input[type=checkbox]{ vertical-align: inherit;}
}
@media screen and (max-width: 414px){
    .reservation .checkbox-area a{ font-size: 1.2rem;}
    .navbar{ max-width: 100%;}
}

@media screen and (max-width: 375px){
    .navbar-brand img { max-width: 210px;}
}

/* sweetalert */
.swal2-popup {
    font-size: 1.4rem!important;
}