/* reset-css
---------------------------------------------- */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&family=Noto+Serif+TC:wght@900&display=swap');

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

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display: block;
}

ol,ul {
    list-style: none;
}

blockquote,q {
    quotes: none;
}

blockquote:before,
blockquote:after,

q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html { font-size: 62.5%; }

* {
    /*font-family: inherit;*/
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}

a,
a:visited {
    color: inherit;
    text-decoration: none;
}

img {
    /*max-width: 100%;*/
    width: 100%;
    border: none;
    display: block;
}

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* css
---------------------------------------------- */
body {
    /*font-family: 'Noto Sans TC', 'Roboto', sans-serif;
    background: #F4F4F4;
    color: #4f4f4f;*/
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

.textbox {
    padding: 5.4rem;
    line-height: 2.6rem;
}


.line-center {
    content: '';
    width: 40px;
    height: 2px;
    background: #C80000;
    display: inline-block;
    position: relative;
    margin-top: 3rem;
}

.line-vertical {
    width: 1px;
    height: 100px;
    border-radius: 5px;
    background: #5B9335;
    display: block;
    margin: 4rem auto;
}

.link-red,
.link-red:visited {
    color: #C80000;
    cursor: pointer;
}

.part, .part_reservation_1, .part_reservation_2 {
    width: 76%;
    margin: 0 auto;
    padding: 15rem 0 0 0;
}

.part h1 {
    text-align: center;
    padding: 0 0 4rem 0;
    font-weight: 500;
    font-size: 4.8rem;
    font-family: 'Noto Serif TC'; color: #B15B28;
    letter-spacing: 0.5rem;
}

.part_reservation_1 h1 {
    text-align: center;
    padding: 0;
    font-weight: 500;
    font-size: 4.8rem;
    font-family: 'Noto Serif TC'; color: #B15B28;
    letter-spacing: 0.5rem;
}

.part h2 {
    font-weight: 600;
    font-size: 2.8rem;
    line-height: 4.8rem;
}

.part h3 {
    font-size: 2.4rem;
    line-height: 4rem;
}

.part_reservation_1 h4 {
    text-align: center;
    font-size: 2.8rem;
    padding: 1.8rem 0 8rem 0;
}

.part .part_txt {
    padding-bottom: 3rem;
}

.part .part_txt p, .part .part_txt_1 p {
    line-height: 4rem;
    font-size: 2.1rem;
    font-weight: 300;
    text-align: justify;
}

.part .part_txt_1 p {
    text-align: center;
}

.part img, .part_reservation_1 img {
    padding: 0 0 1rem 0;
}

.part_reservation_2 {
    display: flex;
    flex-direction: row;
}

.part_reservation_2 .form_content, .part_reservation_2 .info_content {
    /*
    float: right;
    */
    width: 50%;
    font-size: 2rem;
}

.part_reservation_2 .form_content {
    padding: 0 4.5rem 0 0;
}

.part_reservation_2 .form_content li {
    width: 100%;
    font-size: 22px;
    text-align: center;
    margin: 0 0 1.5rem 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.part_reservation_2 .form_content li>*:nth-child(2) {
    width: 67%;
    height: 100%;
    max-width: 624px;
}

.part_reservation_2 .form_content li input[type="text"], .part_reservation_2 .form_content li input[type="tel"] {
    background: #F8F4F1;
    outline: none;
    border: none;
    padding: 0 1em;
    color: #000;
    font-size: 20px;
    line-height: 50px;
    height: 50px;
}

.part_reservation_2 .form_content label {
    display: block;
    position: relative;
    text-align: right;
    font-size: 25px;
    padding-right: 1em;
    color: #A3A09F;
    font-family: helvetica, noto sans tc, -apple-system, Arial, Verdana, microsoft jhenghei, sans-serif;
}

.part_reservation_2 .form_content li input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    border: none;
    outline: none;
}

.part_reservation_2 .form_content .demand_check {
    text-align: left;
}

.part_reservation_2 .form_content span, .part_reservation_2 .form_content span a {
    font-size: 15px;
    color: #A3A09F;
    font-family: helvetica, noto sans tc, -apple-system, Arial, Verdana, microsoft jhenghei, sans-serif;
}

.part_reservation_2 .form_content .form_botton {
    text-align: right;
}

.part_reservation_2 .form_content button {
    height: 100%;
    background: #B15B28;
    color: #fff;
    border: none;
    line-height: 5rem;
    font-size: 30px;
    padding: 0.25em 2em;
    cursor: pointer;
    margin-top: 1.5em;
}

.part_map {
    width: 76%;
    margin: 5rem auto 20rem auto;
    clear: both;
    height: 450px;
}


::-webkit-input-placeholder { color: #888;}
:-moz-placeholder { color: #888;}
::-moz-placeholder { color: #888;}
:-ms-input-placeholder { color: #888;}


/*---popup-----*/

.fancybox-content {
    background: #000;
    opacity: 0.9;
}

.fancybox-button {
    border: 1px solid #fff;
    margin: 6vh 5%;
    color: #fff;
}

.fancybox-button svg,
.popupcontent,
.popupcontent h3 { color: #fff;}

.popupcontent {
    width: 80%;
    margin: 6vh auto 0 auto;
}

.popupcontent h3 {
    text-align: center;
    margin-bottom: 4rem;
}

.popupcontent p { margin: 4rem auto;}

/*  layout  */
#kv {
    width: 100%;
    margin: 0 auto;
}
.part-view,
.part-location{
    /*padding-top: 120px;*/
    text-align: center;
}

.part-view h1,
.part-location h1 {
    margin-top: 6rem;
    margin-bottom: 3rem;
    text-align: center;
}

.part-view .line-center,
.part-location .line-center {
    margin-top: 0 !important;
    margin-bottom: 3rem;
}

.part-view .loction_txt,
.part-location .loction_txt
{
    width: 60%;
    margin: 0 auto 6rem auto;
}

.part-location{
    background: #fff;
}

.footer-fix {
    display: none;
    position: fixed;
    /*background: #000;*/
    opacity: 0.9;
    text-align: center;
    width: 100%;
    z-index: 100;
    bottom: 0;
}

.footer-fix ul {
    display: flex;
    margin: 0 auto;
}

.footer-fix li {
    /*float: left;*/
    /*padding: 0.4rem;*/
    /*padding: 0 0.4rem;*/
    width: 25%;
}

.footer-fix li:nth-child(1) {
    padding: 0 0.2rem 0 0;
}

.footer-fix li:nth-child(4) {
    padding: 0 0 0 0.2rem;
}

.footer-fix li:nth-child(2), .footer-fix li:nth-child(3) {
    padding: 0 0.2rem 0 0.2rem;
}

/*
.footer-fix a {
    border: 1px solid #828282;
    padding: 10px;
    color: #F2F2F2;
}
*/

.footer-fix a:hover {
    background: #464646;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.footer-fix a:foucs {
    background: none;
}

.xs-show { display: none;}
.xs-hidden { display: block;}

@media screen and (max-width: 1200px) and (min-width: 769px) {

    body {
        /*min-width: 1200px;*/
        width: 100%;
        overflow: initial;
    }

    #kv-part2 { top: 300px;  margin-left: 18%;}
}

@media screen and (max-width: 768px) {
    .xs-hidden {display: none; }
    .xs-show {display: block;}

    .part h1 {
        font-size: 2.3rem;
        padding: 0 0 2rem 0;
        letter-spacing: 0.3rem;
    }

    .part_reservation_1 h1 {
        font-size: 2.3rem;
        padding: 0;
        letter-spacing: 0.1rem;
    }

    .part h3 {
        font-size: 2.1rem;
        line-height: 2.4rem;
    }

    .part h2 {
        font-size: 1.9rem;
        line-height: 2.8rem;
    }

    .part, .part_reservation_1, .part_reservation_2 {
        padding: 8rem 0 0 0;
    }

	.part_map {
		padding: 0;
	}

    .part .part_txt {
        padding-bottom: 4.5rem;
    }

    .part .part_txt p {
        line-height: 2.5rem;
        font-size: 1.5rem;
    }

    .part_reservation_1 h4 {
        font-size: 1.3rem;
        padding: 1rem 0 3rem 0;
    }


    .part_reservation_2 {
        display: flex;
        flex-direction: column-reverse;
    }

    .part_reservation_2 .form_content, .part_reservation_2 .info_content {
        /*
        display: block;
        position: relative;
        */
        width: 100%;
    }

    .part_reservation_2 .form_content label {
        font-size: 18px
    }

    .part_reservation_2 .form_content li input[type="text"], .part_reservation_2 .form_content li input[type="tel"] {
        font-size: 16px;
        line-height: 35px;
        height: 35px;
    }

    .part_reservation_2 .form_content li input[type="checkbox"] {
        width: 13px;
        height: 13px;
    }

    .part_reservation_2 .form_content span, .part_reservation_2 .form_content span a {
        font-size: 13px;
    }

    .part_reservation_2 .form_content {
        padding: 0;
    }

    .part_reservation_2 .form_content li>*:nth-child(2) {
        width: 70%;
    }

    .part_reservation_2 .form_content .form_botton {
        text-align: center;
    }

    .part, .part_reservation_1, .part_reservation_2 {
        padding: 8rem 0 0 0;
    }

    .part_map {
        margin: 8rem auto 10rem auto;
    }

    #popup {
        left: 0;
        width: 76%;
        width: 100%;
        padding: 10%;
        top: 4vh;
        font-size: 1.2rem;
    }

    #popupclose { padding: 0.5rem; width: 4rem; height: 4rem; }
    .popupcontrols { right: 6%; top: 0;}
    .popupcontent h3 { margin: 0;}
    .popupcontent p { margin: 2rem auto;}
}

@media screen and (max-width: 375px) {
    
}