@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Noto+Sans+TC:wght@300;400;500;700&family=Quicksand:wght@300;400;500;700&display=swap');



body { 
    font-family: 'Quicksand', 'Noto Sans TC', PingFang TC, STHeiti, SimHei, sans-serif;
    font-size: 16px; font-weight: 500; color: #3e3a39; letter-spacing: 0.025em; line-height: 1.2;
}
h1, h2, h3, h4, h5, h6 { 
    font-family: 'Caveat', 'Noto Sans TC', PingFang TC, STHeiti, SimHei, cursive;
    font-weight: 700; letter-spacing: 0; line-height: 1.2; color: #003964;
}
dl, ol, ul { line-height: 1.5; }
p { line-height: 1.5; }
p:last-child { margin-bottom: 0; }
a { color: #f39700; }
a:hover,
a:focus { color: #003964; }
a[href*=mailto],
a[href*=http] { word-break: break-word; }
.nilpadding { padding: 0; }
.relative { position: relative; }
.none { display: none; }
.clearfix.column { float: none !important; }

html.is-reveal-open.zf-has-scroll { overflow-y: hidden; }
html.is-reveal-open body { position: fixed; width: 100%; overflow-y: scroll; }
.reveal-overlay { overflow-y: scroll; }

@media screen and (max-width: 639px) {
    body { font-size: 14px; letter-spacing: 0.035em; }
}

.lightyellow { color: #fde0a5; }
.orange { color: #f39700; }
.blue { color: #003964; }
.lightred { color: #f29b87; }


/*=============================================*/
/*========= CONTENT =========*/
.contenttop-wrap { padding: 4em 15px 4em; margin-top: 9em; }
.scrollfade { opacity: 0; }
/*-------- title --------*/
h3.titlehead { position: relative; margin-bottom: 1em; line-height: 1.3; }
h3.titlehead:before { content: ''; top: 10px; width: 2px; height: 3em; display: inline-block; border-radius: 50%; border-right: 1px solid; opacity: 0.5; }
h3.titlehead span { display: block; }
h3.titlehead span.eng { font-size: 48px; font-weight: 700; }
h3.titlehead span.chi { font-size: 30px; font-weight: 500; }
/*---*/
h3.titlehead.horizontal { padding-top: 0; }
h3.titlehead.horizontal:before { 
    position: absolute; top: 15px;  left: 0;
    -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); 
    -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
/*---*/
.title { display: block; margin-bottom: 5px; font-weight: 700; }
/*-------- dintableone --------*/
.dintableone { display: inline-table; width: 100%; height: 100%; overflow: hidden; }
.dintableone:before { content: ""; display: inline-table; width: 0; height: 100%; }
.dintableone > * { display: inline-table; }

.dintableone.vc { text-align: center; }
.dintableone.vc:before,
.dintableone.vc > * { vertical-align: middle; }
.dintableone.vb:before,
.dintableone.vb > * { vertical-align: bottom; }
/*-------- dtable --------*/
.dtable_wrap { width: 100%; display: table; }
.dtable_wrap > div { display: table-cell; vertical-align: middle; }
.dtable_wrap.vb > div { vertical-align: bottom; }
.dtable_wrap.vt > div { vertical-align: top; }
/*-------- Button --------*/
.btn-solidbg { 
    display: inline-block; max-width: 200px; width: 100%; border: 3px solid transparent; background: #003964; margin-top: 3em; padding: 0.5em 1em; position: relative; z-index: 1; outline: 0;
    font-weight: 700; color: #fff; letter-spacing: 0.05em; text-align: center; line-height: 1.5;
    -webkit-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.btn-solidbg:hover,
.btn-solidbg:focus { border: 3px solid #fde0a5; background: transparent; color: #fde0a5; }
/*-------- Reveal --------*/
.reveal { 
    margin: 0px auto 30px; padding: 4em 1.5em 2.5em; overflow: visible; 
    border: none; border-radius: 10px; outline: 0; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.10); 
}
.reveal .close-btn {
    cursor: pointer;
    font-size: 3em; font-weight: 300; color: #ccc; 
    position: absolute; right: 20px; top: 8px;
    -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    -webkit-transition: 0.3s; transition: 0.3s;
}
.reveal .close-btn:hover { -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); }
/*-------- Form --------*/
form .space { margin-bottom: 10px; }
form .space_submit { margin-top: 5.5em; }
.input-wrap { position: relative; }
/* temp solution way to remove autofill bg color*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
}
/*-----*/
label.label-tag { 
    padding: 20px 0 0px;
    font-size: 14px; font-weight: bold; color: #003964; line-height: 1.4; word-break: break-word;
}
.radio-con { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 15px 0; }
/*-----*/
textarea,
input[type]:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]) {
    font-size: 14px; color: #3e3a39; letter-spacing: 0.05em; line-height: 1.2;
    background-color: transparent; height: auto; margin: 0; padding: 12px 0; 
    box-shadow: none; border: none; border-bottom: 1px solid rgba(0,0,0,0.1); border-radius: 0px;
}
textarea:focus,
input[type]:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):focus { 
    border: none; border-bottom: 1px solid rgba(0,0,0,0.3); box-shadow: none; background-color: transparent; 
}
textarea { height: 10em; }
/*-----*/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #9c9c9c; }
input:-moz-placeholder,
textarea:-moz-placeholder { color: #9c9c9c; opacity:1; }
input::-moz-placeholder,
textarea::-moz-placeholder { color: #9c9c9c; opacity:1; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: #9c9c9c; }
/*-----*/
.radio-wrap { position: relative; display: inline-block; margin-bottom: 5px; }
.radio-wrap label { 
    font-size: 14px; color: #3e3a39; line-height: 1; letter-spacing: 0.05em;
    position: relative; display: inline-block; margin-left: 0; margin-right: 2em; padding-left: 25px; cursor: pointer;
}
.radio-wrap input[type=radio] { position: absolute; left: -9999px; }
.radio-wrap input[type=radio] + label:before {
    content: ""; position: absolute; left: 0; top: 0px;
    width: 1em; height: 1em; border: 1px solid #003964; border-radius: 100%; background: transparent;
}
.radio-wrap input[type=radio] + label:after {
    content: ""; width: 8px; height: 8px; background: #003964; opacity: 0;
    position: absolute; top: 3px; left: 3px; border-radius: 100%;
    -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
    -webkit-transform: scale(0); transform: scale(0);
}
.radio-wrap input[type="radio"]:checked + label:after { opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
/*-----*/
[type="submit"],
input[type="button"] {
    font-weight: 700; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 0.1em;
    background: #003964; max-width: 200px; width: 100%; border: none; margin: 0; padding: 1em 1em; outline:0; border: 5px solid transparent; cursor: pointer;
    -webkit-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
[type="submit"]:hover,
[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus { border: 5px solid #003964; background: transparent; color: #003964; }
/*-----*/
label.error { 
    font-size: 10px; font-weight: 700; color: #555; line-height: 1.2; letter-spacing: 0.05em;
    padding: 5px 10px; background: rgba(242, 155, 135, 0.15);
}
label.error:empty { display: none; }

@media screen and (max-width: 1023px) {
    .contenttop-wrap { padding: 3em 15px 3em; }
}
@media screen and (max-width: 639px) {
    h3.titlehead span.chi { font-size: 22px; }
    h3.titlehead span.eng { font-size: 38px; }
    /*-----*/
    .reveal { width: 85%; max-width: inherit; height: inherit; min-height: inherit; }
    /*-----*/
    [type="submit"], 
    input[type="button"] { max-width: 150px; }
}


/*=============================================*/
/*========= HEADER =========*/
/*.headersticky { position: fixed; width: 100%; z-index: 5; }*/
.headersticky { position: absolute; left: 0; top: 0; width: 100%; z-index: 5; }
header { z-index: 5; position: relative; }
header > div.row { border-bottom: 1px solid rgba(0,0,0,0.2); }
header a { color: #003964; outline: 0; }
/*-------- . . . --------*/
a.logo_vertical { 
    display: inline-block; background: #003964; padding: 0.975em 1.75em 0.75em; font-size: 16px; 
    opacity: 1; visibility: visible; position: absolute; top: 0;
    transition: opacity 0.5s ease, visibility 0s;
}
a.logo_vertical img { max-width: 6em; -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; }
a.logo_vertical:after {
    content: ''; background: #003964; width: 100%; height: 1.75em; 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 54% 100%, 50% 40%, 46% 100%, 0 100%);
    position: absolute; top: 100%; left: 0;
}
/*-----*/
a.logo_horizontal {
    display: inline-block; opacity: 0; visibility: hidden;  
    transition: opacity 0.3s ease, visibility 0s;
}
a.logo_horizontal img { max-width: 10em; -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; }
/*-----*/
header.scrollstick { /*background: rgba(255,255,255,0.95);*/ background: #ffffff;}
.scrollstick .logo-wrap { position: static; }
.scrollstick a.logo_vertical { 
    opacity: 0; visibility: hidden; position: absolute; top: 0;
    transition: opacity 0.3s ease, visibility 0s 0.3s ease;
}
.scrollstick a.logo_horizontal { 
    opacity: 1; visibility: visible; position: relative;
    transition: opacity 0.5s 0.1s ease, visibility 0s;
}
/*-------- Preventing FOUC --------*/
.no-js #responsive-menu { display:none; }

@media screen and (min-width: 1024px) {
    #responsive-menu { display: block; }
    .menuham-wrap { display: none; }
    /*-------- . . . --------*/
    header.scrollstick { 
        -webkit-transform: translateY(-100%); transform: translateY(-100%); 
        transition: 0.3s ease;
    }
    .is-stuck header.scrollstick { -webkit-transform: translateY(0); transform: translateY(0); }

    header > div.row { display: -ms-flexbox; display: flex; padding-left: 50px; }
    .logo-wrap { display: inline-block; float: left; margin: auto 0; }
    .navi-wrap { display: inline-block; float: right; margin: auto 0; margin-left: auto; }
    /*-------- . . . --------*/
    .responsive-menu > .menu { display: table; }
    .responsive-menu > .menu > li:not(.slide_dot) { display: table-cell; vertical-align: top; }
    .responsive-menu > .menu > li > a { 
        max-width: 110px; display: inline-table; position: relative; padding: 25px 12px 20px; z-index: 5;
        text-align: center; text-transform: uppercase; letter-spacing: 0.05em; 
        -webkit-transition: 0.3s; transition: 0.3s;
    }
    .responsive-menu > .menu > li > a span { display: block; }
    .responsive-menu > .menu > li > a span.eng { 
        margin-bottom: 10px; 
        font-size: 12px; font-weight: 700; line-height: 1.2; 
    }
    .responsive-menu > .menu > li > a span.chi { 
        /*display: table-footer-group; */
        font-size: 14px; font-weight: 500; line-height: 1.3;
    }
    .responsive-menu > .menu > li.is-active > a,
    .responsive-menu > .menu > li.active > a { background: none; color: #003964; }
    /*-------- . . . --------*/
    /*.slide_dot { 
        position: absolute; top: 99%;
        transition: all 0.3s ease-out; 
    }
    .slide_dot:before { 
        content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #003964; 
        position: absolute; top: -2px; left: 50%; 
        visibility: hidden; opacity: 0; 
        -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0);
        transition: opacity 0.3s ease, visibility 0s 0.3s ease;
    }

    .responsive-menu > .menu > li:hover ~ .slide_dot:before,
    .responsive-menu > .menu > li.active ~ .slide_dot:before { 
        opacity: 1; visibility: visible; 
        transition: opacity 0.3s ease, visibility 0s;
    }*/

    .responsive-menu > .menu li a:before { 
        content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #003964; 
        position: absolute; bottom: -2px; left: 50%; visibility: hidden; opacity: 0; 
        -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0);
        transition: all 0.3s ease;
    }
    
    .responsive-menu > .menu li > a:hover,
    .responsive-menu > .menu li.active > a,
    .responsive-menu > .menu li > a.is-active { background: none; font-weight: 700; color: #003964; }
    .responsive-menu > .menu li > a:hover::before,
    .responsive-menu > .menu li.active > a:before { visibility: visible; opacity: 1; }

    /*header.scrollstick .responsive-menu > .menu > li > a { max-width: 100px; padding: 20px 12px; }
    header.scrollstick .responsive-menu > .menu > li > a span.eng { margin-bottom: 8px; font-size: 11px; }
    header.scrollstick .responsive-menu > .menu > li > a span.chi { font-size: 13px; }
    header.scrollstick .responsive-menu > .menu li a:before { width: 9px; height: 9px; border: 2px solid #ffffff; bottom: -5px; }*/
    /*-----*/
    .off-canvas.reveal-for-large { position: static; background: none; width: inherit; overflow: inherit; }
}
@media screen and (max-width: 1023px) {
    .sticky { transform: none; }
    .js-off-canvas-overlay { background: rgba(0, 0, 0, 0.25); }
    .navi-wrap.off-canvas { 
        padding: 2.5em; padding-top: 8em; padding-right: 0; background: #fff; 
        -ms-transform: translateX(330px); -webkit-transform: translateX(330px); transform: translateX(330px);
    }
    .navi-wrap.off-canvas.is-open { 
        max-width: 330px; width: 100%;
        box-shadow: 0 0 10px rgba(10, 10, 10, 0.3); 
        -ms-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0);
    }
    .navi-wrap > div { height: 100%; padding-right: 2rem; overflow-y: auto; font-size: 14px; }
    /*-----*/
    a.logo_vertical { font-size: 13px; left: 25px; }
    a.logo_horizontal { padding: 10px 25px; }
    a.logo_horizontal img { max-width: 9em; }
    /*-----*/
    .menuham-wrap { position: fixed; top: 30px; right: 25px; z-index: 15; }
    /*-------- Hamburger --------*/
    .menuham { cursor: pointer; outline: 0; }
    .menuham div {
        display: block; width: 25px; height: 2px; margin-bottom: 4px; background: #3e3a39; border-radius: 2px;
        -ms-transform-origin: 4px 1px; -webkit-transform-origin: 4px 1px; transform-origin: 4px 1px;
        -webkit-transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
        transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
    }
    .menuham div:nth-child(3) { margin: 0; }
    .menuham[aria-expanded="true"] div:first-child { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    .menuham[aria-expanded="true"] div:nth-child(2) { opacity: 0; -ms-transform: rotate(0deg) scale(0.2, 0.2); -webkit-transform:rotate(0deg) scale(0.2, 0.2); transform: rotate(0deg) scale(0.2, 0.2); }
    .menuham[aria-expanded="true"] div:nth-child(3) { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    /*-------- . . . --------*/
    .responsive-menu > .menu li:not(:last-child) { border-bottom: 1px solid #eaeaea; }
    .responsive-menu > .menu li a { position: relative; padding: 12px 12px; text-align: left; }
    .responsive-menu > .menu li a:before { 
        content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #003964; 
        position: absolute; top: 50%; right: 12px; visibility: hidden; opacity: 0; 
        -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); transform: translate(0,-50%);
        transition: all 0.3s ease;
    }
    .responsive-menu > .menu li a > span { display: block; line-height: 1.5; }

    .responsive-menu > .menu li > a:hover,
    .responsive-menu > .menu li.active > a,
    .responsive-menu > .menu li > a.is-active { background: #f3f3f3; font-weight: 700; color: #003964; }
    .responsive-menu > .menu li.active > a:before,
    .responsive-menu > .menu li > a.is-active:before { visibility: visible; opacity: 1;  }
}


/*=============================================*/
/*========= FOOTER =========*/
/*-------- . . . --------*/
footer { 
    font-size: 13px; color: #fff;
    background: url(../images/bg-blue.jpg); padding: 50px 15px;
}
footer ul { margin: 0; list-style: none; }
footer a:hover { color: #fff; }
.footleft { letter-spacing: 0.05em; }
.footmiddle { text-align: center; }
.footright {}
/*-------- . . . --------*/
.footleft .title { font-size: 18px; }
.footleft .hour { font-size: 14px; }
.footleft a.btn-solidbg { 
    background: rgba(255, 255, 255, 0.2); border-radius: 5px; border: none; 
    max-width: inherit;  width: inherit; padding: 1em 2em; margin: 0;
}
.footleft a.btn-solidbg:hover,
.footleft a.btn-solidbg:focus, { background: rgba(255, 255, 255, 0.5); }

.footmiddle img { max-width: 160px; -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; }

.footright h4 { color: #fff; }

.copyright { margin-top: 2em; font-size: 10px; line-height: 1.5;}

footer label.label-tag { 
    position: absolute; top: 0px; left: 0; width: 105px; height: 45px; padding: 15px 0;
    font-size: 13px; font-weight: 500; color: #fff; line-height: 1.1; letter-spacing: 0.05em;
}
/*-----*/
footer textarea,
footer input[type]:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]) {
    font-size: 13px; font-weight: 500; color: #fff; 
    height: 45px; margin:0; padding: 15px 28px; padding-left: 110px;
    box-shadow: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); 
}
footer textarea { height: 5em; }
footer textarea:focus,
footer input[type]:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):focus { 
    border-bottom: 1px solid rgba(255, 255, 255, 1); 
}

footer form .space_submit { margin-top: 2.5em; }
footer [type="submit"], 
footer input[type="button"] { background: #f39700; padding: 0.5em 0.5em; border: none; border-radius: 5px; max-width: 80px; font-size: 16px; }
footer [type="submit"]:hover,
footer [type="submit"]:focus,
footer input[type="button"]:hover,
footer input[type="button"]:focus { background: #c17c09; border: none; color: #fff; }

label.error { color: #f29b87; }
/*-------- . . . --------*/
.float_follow-wrap { 
    position: fixed; right: 15px; bottom: 30px; z-index: 1;
    font-size: 10px; color: #cdaf8a; text-align: center; 
}
.float_follow-wrap .logo-title { max-width: 60px; font-weight: 700; }
.float_follow-wrap .logo-title > div { padding: 10px 15px; }
ul.social_follow { margin: 0; list-style: none; }
ul.social_follow li { margin-bottom: 8px; }
ul.social_follow a { 
    display: inline-block; width: 2em; height: 2em; border: 1px solid #cdaf8a;; border-radius: 50%; transition: 0.3s ease-out;
    font-size: 2em; color: #cdaf8a; line-height: 2;
}
ul.social_follow a:hover { background: #cdaf8a; color: #fff; }


@media screen and (min-width: 1024px) and (max-width: 1311px) {
    footer { padding-right: 80px; }
}
@media screen and (min-width: 1024px) {
    .float_follow-wrap { border-radius: 100px; transition: 0.3s ease-out; }
    .float_follow-wrap:hover { background: #fff; }
}
@media screen and (max-width: 1023px) {
    footer > .row > div:not(:last-child) { margin-bottom: 30px; padding-bottom: 30px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.25); }
    .footmiddle img { max-width: 100px; }
    /*-------- . . . --------*/
    .float_follow-wrap { position: static; }
    .float_follow-wrap .logo-title { max-width: inherit; }
    .float_follow-wrap .logo-title > div { display: inline-block; padding: 7px 5px; }
    .float_follow-wrap .logo-title > img { display: none; }
    ul.social_follow li { display: inline-block; margin: 0 5px; }
}



/*=============================================*/
/*-------- HEROTOP --------*/
.herotop-wrap { position: relative; margin-bottom: -100px; padding: 103px 15px 0; z-index: 1; }
.herotop-wrap .deco {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 50%;
    background: url(../images/bg-gold.jpg);
}
.herotop-wrap .deco:after {
    content: ''; width: 100%; height: 50%;
    position: absolute; bottom: -1px; left: 0;
    background: url(../images/deco-wave_herotop.png) no-repeat;
    background-size: 100%; background-position: bottom center;
}
.herotop-wrap .desc { padding-top: 80px; }
.herotop-wrap .desc h1 { text-shadow: 3px 0 0 white; margin-bottom: 0.5em; }
.herotop-wrap .desc h1 span.eng { font-size: 55px; line-height: 1; }
.herotop-wrap .desc h1 span.chi { font-size: 47px; font-style: italic; line-height: 1.2; }
.herotop-wrap .desc p { padding-right: 30px; }

.herotop-wrap .img { text-align: center; }
/*------*/
.ctaorder-wrap { margin-top: 10px; margin-bottom: 20px; }
.ctaorder-wrap a.btn-solidbg { 
    display: inline-block; margin-top: 5px; margin-right: 10px; border-radius: 5px; max-width: inherit; width: auto; border-width: 2px;
    font-size: 14px; text-align: left; line-height: 1.4; vertical-align: middle; 
}
.ctaorder-wrap a.btn-solidbg span { display: inline-block; }
.ctaorder-wrap a.btn-solidbg:hover,
.ctaorder-wrap a.btn-solidbg:focus { background: none; border: 2px solid #003964; color: #003964; }
/*-------- CONCEPT --------*/
.concept-wrap { 
    background: url(../images/bg-concept.jpg) no-repeat; background-attachment: fixed; background-size: cover; background-position: center;
    position: relative; padding: 100px 25px; color: #fff; text-align: center;
}
.concept-wrap:before {
    content: ''; width: 100%; height: 100%; background: #000; opacity: 0.6;
    position: absolute; left: 0; top: 0;
}
.concept-wrap:after {
    content: ''; width: 100%; height: 8%;
    position: absolute; top: 0; left: 0;
    background: url(../images/deco-wave_herobtm.png) no-repeat;
    background-size: 100%; background-position: top center;
}
.concept-wrap div { position: relative; }
.concept-wrap h3.titlehead { color: #fff; }
.concept-wrap .desc { font-weight: 500; text-align: left; }
.concept-wrap .divright { font-weight: 700; color: #ffb400; }
.concept-wrap .img { margin-bottom: 40px; }
/*-------- SHOP --------*/
.shop-wrap { padding: 20px 0 0; position: relative; }
.shop-wrap ul { margin: 0; list-style: none; }
.shop-wrap .desc {
    position: absolute; top: 53%; left: 0; width: 100%; 
    background: rgba(0,0,0,0.15); padding: 25px;
    -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); transform: translate(0,-50%);
    color: #fff; text-align: center;
}
.shop-wrap .desc .eng { letter-spacing: 0.05em; margin-bottom: 0; }
.shop-wrap .desc .chi { font-weight: 700; letter-spacing: 1em; }
/*-------- MENU --------*/
.product-wrap .titlehead-wrap { position: relative; z-index: 1; }

.menu-wrap { 
    background: url(../images/bg-silver.jpg); /* background-size: cover;*/
    position: relative; padding: 320px 15px 8% 15px; margin-top: -100px;
}
.menu-wrap:before {
    content: url(../images/deco-noodle.png); width: 100%; height: 240px;
    position: absolute; top: 0; left: 0; text-align: center; line-height: 25;
    background: url(../images/deco-wave_menutop.png) no-repeat;
    background-size: cover; background-position: top center;
}
.menu-wrap:after {
    content: ''; width: 100%; height: 10%;
    position: absolute; bottom: -1px; left: 0;
    background: url(../images/deco-wave_menubtm.png) no-repeat;
    background-size: 100%; background-position: bottom center;
}
.menu-wrap ul { margin-bottom: 0; list-style: none; }
.menu-wrap li { margin-bottom: 25px; }
.menu-wrap a { position: relative; top: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;  }
.menu-wrap a:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); top: 3px; }

.decotext { padding: 25px 0; text-align: center; color: #003964; }
.decotext .chi { font-size: 20px; font-weight: 700; letter-spacing: 0.075em; }
.decotext .eng { font-size: 48px; font-weight: 300; text-transform: uppercase; }
/*--*/
.menus-gallery-wrap { margin-bottom: 50px; }
.item_menus_gallery .feat { height: 300px; overflow: hidden; position: relative; cursor: pointer; }
.item_menus_gallery .feat:before {
    content: ''; width: 100%; height: 100%;
    background: #000; opacity: 0; visibility: hidden;
    position: absolute; top: 0; left: 0; transition: all 0.3s ease-out;
}
.item_menus_gallery .feat:after {
    content: '+'; font-family: sans-serif; font-size: 2.5em; font-weight: 100; color: #fff; text-align: center; line-height: 1.3;
    position: absolute; top: 50%; left: 50%;
    border: 1px solid #fff; border-radius: 50%; width: 1.5em; height: 1.5em;
    opacity: 0; visibility: hidden; transition: all 0.3s ease-out;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.item_menus_gallery .feat img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: all 0.3s ease-out; }
.item_menus_gallery .title { font-family: sans-serif; font-size: 20px; font-weight: bold; color: #003964; text-align: center; margin-top: 10px; }

.item_menus_gallery .feat:hover::before { opacity: 0.6; visibility: visible; z-index: 1; }
.item_menus_gallery .feat:hover::after { opacity: 1; visibility: visible; z-index: 1; }
.item_menus_gallery .feat:hover img { transform: scale(1.1); }
/*-------- REVIEW --------*/
.reviewslider { background: #f3f3f3 url(../js/slick/ajax-loader.gif) no-repeat center; position:relative; height: 250px; }
.reviewslider.slick-initialized { background: inherit; height: auto; }
.reviewslider .slick-slide { display: none; outline: 0;}
.reviewslider.slick-initialized .slick-slide { display: block; }

.reviewslider:before {
    content: 'more /更多'; font-size: 14px; color: #3e3a39; line-height: 1.2;
    position: absolute; min-width: 80px;
    right: calc(120% - 130px); bottom: 12%;
}
.reviewslider .slick-arrow { 
    width: auto; height: auto; top: inherit; bottom: 10%; 
    -ms-transform: none; -webkit-transform: none; transform: none;
}
.reviewslider .slick-arrow:before { 
    font-family: fontawesome; font-size: 30px; color: #003964; position: relative; opacity: 1;
    -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; 
}
.reviewslider .slick-next { right: calc(120% - 35px); }
.reviewslider .slick-next:before { content: '\f105'; right: 0; }
.reviewslider .slick-next:not(.slick-disabled):hover::before { right: -5px; }
.reviewslider .slick-next:not(.slick-disabled):active::before { right: -10px; }

.reviewslider .slick-prev { left: inherit; right: 120%; }
.reviewslider .slick-prev:before { content: '\f104'; right: 0; }
.reviewslider .slick-prev:not(.slick-disabled):hover::before { right: 5px; }
.reviewslider .slick-prev:not(.slick-disabled):active::before { right: 10px; }
.reviewslider .slick-disabled { cursor: auto; }
.reviewslider .slick-disabled:before { opacity: 0.5; }

.reviewslider .item { padding: 10px; }
.reviewslider .item > a { 
    display: block; position: relative; top: 0; box-shadow: none; outline: 0;
    -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; 
}
.reviewslider .item > a:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); top: 3px; }
/*------*/
.slidecomment-wrap { padding: 80px 50px 50px; overflow: hidden; }
.slidecomment-wrap .titlehead-wrap { padding-bottom: 45px; }
.slidecomment-wrap .titlehead-wrap img { padding-left: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.slidecomment-wrap h3.titlehead.horizontal { padding-left: 20px; }
/*------*/
.slidekol-wrap { background: #f6f6f6; padding: 50px; overflow: hidden; }
.slidekol-wrap h3.titlehead.horizontal { text-align: right; padding-right: 20px; }
.slidekol-wrap h3.titlehead.horizontal:before { 
    left: inherit; right: 0; top: inherit; bottom: 75%; 
    -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
}

.slidekol-wrap .reviewslider .slick-next { left: calc(120% + 35px); right: inherit; }
.slidekol-wrap .reviewslider .slick-prev { left: 120%; right: inherit; }
/*-------- DELIVERY --------*/
.deliver-wrap { padding: 100px 25px; }
.deliver-wrap .item-wrap .img {  }
.deliver-wrap .item-wrap .desc { padding: 30px; font-size: 14px; }

.deliver-wrap .item-wrap.video-wrap .img { 
    height: 400px; position: relative;
    background-repeat: no-repeat; background-position: center; background-size: cover;
}
.deliver-wrap .item-wrap.video-wrap .img:before {
    content: ''; width: 100%; height: 100%; background: #000; opacity: 0.25;
    position: absolute; left: 0; top: 0;
}
.deliver-wrap .item-wrap.video-wrap .img:after {
    content: '\f04b'; font-family: fontawesome; font-size: 20px; line-height: 3; color: #fff; text-align: center; text-indent: 5px;
    display: inline-block; width: 3em; height: 3em; border-radius: 50%; background: #003964;
    position: absolute; top: 50%; left: 50%;
    -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
/*-------- LOCATION --------*/
.locate-wrap { 
    background: url(../images/bg-location.jpg) no-repeat; background-size: cover; background-position: center;
    position: relative; padding: 100px 25px; 
    font-weight: 500; color: #fff; text-align: center;
}
.locate-wrap:before {
    content: ''; width: 100%; height: 100%; background: #000; opacity: 0.7;
    position: absolute; left: 0; top: 0;
}
.locate-wrap div { position: relative; }
.locate-wrap h3.titlehead { color: #fff; }
.locate-wrap .item-wrap p { padding: 15px; }
/*-------- VIDEO BANNER --------*/
.video_banner-wrap .video-wrap .img { 
    height: 400px; position: relative;
    background-repeat: no-repeat; background-position: top 35% center; background-size: cover;
}
.video_banner-wrap .video-wrap .img:before {
    content: ''; width: 100%; height: 100%; background: #000; opacity: 0.6;
    position: absolute; left: 0; top: 0;
}
.video_banner-wrap .video-wrap .img:after {
    content: '\f04b'; font-family: fontawesome; font-size: 25px; line-height: 3; color: #fff; text-align: center; text-indent: 5px;
    display: inline-block; width: 3em; height: 3em; border-radius: 50%; background: #003964;
    position: absolute; top: 50%; left: 50%;
    -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.video_banner-wrap .row { padding: 0 15px; }
.video_banner-wrap .desc { font-size: 14px; background: rgba(255, 255, 255, 0.9); padding: 30px 20px 20px; }
/*-------- LOCATION & DELiVERY --------*/
.locate_delivery-wrap { padding: 100px 15px 75px; }
.locate_delivery-wrap h3.titlehead { padding: 0 20px; }
.locate_delivery-wrap h3.titlehead span.eng { line-height: 1; margin-bottom: 10px; }
.locate_delivery-wrap .location { margin-bottom: 25px; }
.locate_delivery-wrap .location .desc { padding: 0 20px; }
.locate_delivery-wrap .location .desc .left { float: left; padding-right: 10px; }
.locate_delivery-wrap .location .desc .right { display: block; overflow: hidden; }
.locate_delivery-wrap .location .desc .btn-wrap { margin-top: 40px; }
.locate_delivery-wrap .location .desc .btn-wrap p { margin-bottom: 10px; }
.locate_delivery-wrap .location .desc .btn-wrap p.remark { margin-top: 10px; font-size: 0.8em; color: #555; }
.locate_delivery-wrap .location .desc b { display: block; margin-bottom: 20px; line-height: 1.3; }
.locate_delivery-wrap .location .desc b span { display: inline-block; }
.locate_delivery-wrap .location .desc p { font-size: 14px; line-height: 1.3; }
.locate_delivery-wrap .location .desc a.btn-solidbg { 
    background: #003964; border-radius: 5px; border: 2px solid #003964; max-width: inherit; width: inherit; padding: 0.8em 2em; margin: 0; 
    font-size: 12px; color: #fff; text-transform: uppercase; line-height: 1.3;
}
.locate_delivery-wrap .location .desc a.btn-solidbg:hover { background: none; color: #003964; }
/*-------- BUSINESS --------*/
.business-wrap {
    background: url(../images/bg-business.jpg) no-repeat; background-size: cover; background-position: center;
    position: relative; padding: 100px 15px; font-weight: 500; color: #fff; text-align: center;
}
.business-wrap:after {
    content: ''; width: 100%; height: 8%;
    position: absolute; top: 0; left: 0;
    background: url(../images/deco-wave_herobtm.png) no-repeat;
    background-size: 100%; background-position: top center;
}
.business-wrap:before {
    content: ''; width: 100%; height: 100%; background: #000; opacity: 0.5;
    position: absolute; left: 0; top: 0;
}

.business-wrap div { position: relative; }
.business-wrap h3.titlehead { color: #fff; }

#businessform_pop { font-size: 14px; }
#businessform_pop form { margin-top: 15px; }
/*-------- MEMBERSHIP --------*/
body.membership {
    background-image: url(../images/bg-membership1.png), url(../images/bg-membership2.png);
    background-repeat: no-repeat; background-position: top left, top right;
    background-size: 35%;
}
.btn-membership { background: #4c625a; }
/*---*/
.membership-wrap .img { position: relative; z-index: 1; }
/*---*/
.check_member_point { background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); border: 1px solid #ddd; border-radius: 20px; padding: 1.5em; margin-top: 30px; margin-bottom: 30px; }
.check_member_point form .input-group-label { border-radius: 100px 0 0 100px; border: 1px solid #003964; background: #003964; color: #fff; }
.check_member_point form input[type]:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]) { border-radius: 0 100px 100px 0; border: 1px solid #003964; padding: 12px 15px; }
.check_member_point form .space_submit { margin-top: 2em; }
.check_member_point form [type="submit"] { font-size: 12px; max-width: 100%; border: 2px solid transparent; border-radius: 100px; }
.check_member_point form [type="submit"]:hover, 
.check_member_point form [type="submit"]:focus { border: 2px solid #003964; }
/*---*/
.check_point-result { background: #f3f3f3; margin-top: 2em; padding: 20px; }
.check_point-result .title { padding: 5px 10px; background: #e3e3e3; }
.check_point-result .success .title { color: #47a18d; background: rgba(135, 242, 173, 0.3); }
.check_point-result .failed .title { color: #a14747; background: rgba(242, 155, 135, 0.3); }


/*----------------------------------------------------------------*/
@media screen and (min-width: 1024px) and (max-width: 1311px) {
    /*-------- MEMBERSHIP --------*/
    .membership-wrap { padding-right: 80px; }
}
@media screen and (min-width: 640px) {
    /*-------- CONCEPT --------*/
    .concept-wrap .desc { padding: 0 25px; }
    /*-------- . . . --------*/
}
@media screen and (min-width: 1024px) {
    /*-------- HEROTOP --------*/
    .herotop-wrap .desc { margin-right: -17%; padding-top: 175px; padding-bottom: 90px; position: relative; z-index: 1;  }
    .herotop-wrap .desc h1 { text-align: right; }
    .herotop-wrap .desc h1 span.eng { font-size: 75px; }
    .herotop-wrap .desc h1 span.chi { font-size: 67px; }
    .herotop-wrap .desc p { padding-right: 50px;  text-shadow: 1px 1px 1px #ffffff; }

    .herotop-wrap .img { text-align: right; padding-left: 75px; }
    /*---*/
    .ctaorder-wrap { display: none; }
    /*-------- CONCEPT --------*/
    .concept-wrap { padding: 150px 15px 100px; }
    .concept-wrap:after { height: 15%; }
    .concept-wrap .desc { padding: 0 50px; }
    /*-------- SHOP --------*/
    .shop-wrap { padding: 35px 0 0; }
    .shop-wrap ul li:first-child { padding-left: 0; padding-right: 20px; }
    .shop-wrap ul li:nth-child(2) { padding: 0 10px; }
    .shop-wrap ul li:last-child { padding-right: 0; padding-left: 20px; }
    .shop-wrap .desc { font-size: 24px; }
    /*-------- REVIEW --------*/
    .slidecomment-wrap .titlehead-wrap { padding-left: 100px; }
    .reviewslider:before { right: calc(120% - 130px); bottom: 12%; }
    /*---*/
    .slidekol-wrap .titlehead-wrap { padding-right: 100px; padding-top: 45px; }

    .slidekol-wrap .reviewslider:before { left: calc(120% - 95px); top: 10px; bottom: inherit; right: inherit; }
    .slidekol-wrap .reviewslider .slick-arrow { top: 0; bottom: inherit; }
    /*-------- VIDEO BANNER --------*/
    .video_banner-wrap .desc {
        position: absolute; top: 50%; max-width: 300px; z-index: 1;
        -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); transform: translate(0,-50%);
    }
    /*-------- BUSINESS --------*/
    .business-wrap:after { height: 19%; }
    /*-------- . . . --------*/
}
@media screen and (max-width: 1023px) {
    /*-------- SHOP --------*/
    .shop-wrap ul li:first-child { padding-left: 0; }
    .shop-wrap ul li:nth-child(2) { padding: 0 5px; }
    .shop-wrap ul li:last-child { padding-right: 0; }
    /*-------- REVIEW --------*/
    .slidecomment-wrap .titlehead-wrap img { max-width: 120px; }

    .reviewslider:before { left: 70px; bottom: 102%; }
    .reviewslider .slick-arrow { bottom: 100%; }
    .reviewslider .slick-prev { left: 10px; right: inherit; }
    .reviewslider .slick-next { left: 45px; right: inherit; }

    .slidekol-wrap .reviewslider:before { left: inherit; right: 70px; }
    .slidekol-wrap .reviewslider .slick-prev { left: inherit; right: 45px; }
    .slidekol-wrap .reviewslider .slick-next { left: inherit; right: 10px; }
    /*-------- MEMBERSHIP --------*/
    body.membership { background-size: 50%; }
    .membership-wrap { padding-top: 0; }
    .membership-wrap .img { margin-bottom: 30px; }
    /*-------- . . . --------*/
}
@media screen and (max-width: 639px) {
    /*-------- CONCEPT --------*/
    .concept-wrap { padding: 80px 15px 60px; background-size: cover; background-attachment: inherit; }
    .concept-wrap .desc { margin-bottom: 20px; padding: 0; }
    /*-------- MENU --------*/
    .menu-wrap:before { line-height: 30; }
    .decotext .chi { font-size: 18px; }
    .decotext .eng { font-size: 38px; }
    /*-------- REVIEW --------*/
    .slidecomment-wrap,
    .slidekol-wrap { padding: 50px 15px; }
    /*---*/
    .slidekol-wrap .titlehead-wrap { padding-bottom: 45px; }
    /*-------- DELIVERY --------*/
    .deliver-wrap { padding: 50px 25px; }
    /*-------- LOCATION --------*/
    .locate-wrap { padding: 50px 25px; }
    /*-------- LOCATION & DELiVERY --------*/
    .locate_delivery-wrap { padding: 50px 15px 35px; }
    .locate_delivery-wrap .location .desc { padding: 0 10px; }
    .locate_delivery-wrap .location .desc p { font-size: 12px; }
    /*-------- BUSINESS --------*/
    .business-wrap { padding: 50px 15px; }
    #businessform_pop h2 { font-size: 30px; }
    /*-------- . . . --------*/
}
@media screen and (max-width: 499px) {
    .locate_delivery-wrap .small-up-2 > .column { width: 100%; }
}