@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(/fonts/style.css);


/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Open Sans','Arial','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}


/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Microsoft JhengHei','Apple LiGothic Medium';}


/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; font-size:10px; background: #00B189; }


/* $共用
--------------------------------------------------------------------------------------*/
/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}
* { box-sizing: border-box; }

/* button reset、input reset、select reset */
button, input, select{ font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; border: none; }
button { cursor: pointer; }
p { font-size: 18px; color: #00263E; line-height: 1.4; }
.content { width: 96%; max-width: 1000px; padding: 0 20px; margin: 0 auto; position: relative; }

.slick-dots { position: relative; bottom: 0; margin: 10px 0 0 0; }
.slick-dots li button:before { font-size: 15px; color: #D0C8C9; opacity: 1;}
.slick-dots li.slick-active button:before {  color: #ECAE00; opacity: 1;}
/* .slick-slider .slick-track, .slick-slider .slick-list { box-shadow: 3px 3px 6px rgba(0, 0, 0, .25);} */
.slick-initialized .slick-slide { display: flex; }
.banner-slick {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kv { width: 100%; height: auto; margin: 60px 0 30px 0; }
.kv img { width: 100%; }
.banner img { width: 100%; border: 5px solid #fff; box-shadow: 8px 8px 6px rgba(0, 0, 0, .25); background: #fff; }

.features{ display: flex; justify-content: center; }
.features img{ width: 50%; height: 100%; }
.features.col-1 img{ width: 100%; }
.video{ width: 50%; }
.video-container{ position: relative; padding-bottom: 56.25%; padding-top:0; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed{ position: absolute; top: 0;left: 0; width: 100%; height: 100%; }

table.menu { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse:collapse; border-spacing:0; }
table.menu td,
table.menu th { border-bottom:1px solid #00b189; font-size:14px; overflow:hidden; padding: 12px 20px; vertical-align: middle; }
table.menu td{ background:#ffffff; }
table.menu th{ background:#13221f; color:#ffffff; text-align:center; vertical-align:center; font-size: clamp(1.6rem, 1.5vw, 1.8rem); }
table.menu th span {display: block; padding: 3px 5px; border-radius: 30px; color: #fff; margin-top: 3px; font-size: .9em; font-weight: normal; }
table.menu th span.hot { background:#de6666;}
table.menu th span.ice { background:#64a6e3;}
table.menu .menu-name { display: flex; align-items: center; text-align:left; font-size: clamp(1.8rem, 1.5vw, 2.2rem); font-weight: bold; line-height: 1; }
table.menu .menu-name.new:before { content:"new"; min-width: 40px; height:30px; background:#ee6e03 ; color:#fff;display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1.1rem, 1.5vw, 1.4rem); border-radius: 50px; margin: 0 5px 0 0; }
table.menu .menu-name small { font-size: .7em; color:#787878; }
table.menu .menu-price { width: 10%; text-align:center; font-size: clamp(1.6rem, 1.5vw, 2rem); color: #ee6e03; font-weight: bold;}

.icon_note { width: 200px; margin: 20px auto 0 auto; }
.icon_note a { width: 100%; }

footer { width: 100%; font-size: 14px; background: #000; padding: 25px 20px; margin: 80px 0 0 0; color: #fff; display: inline-block; text-align: center; }
footer a { color: #fff; margin:10px 0 0; text-decoration: underline; transition: .5s; }
footer a:hover { color: #fff; transition: .5s; }

a.gototop { width: 40px; height: 40px; border-radius: 10px 0 0 10px; position: fixed; right: 0; bottom: 90px; background: #fff; color: #00B189; font-size: 18px; display: flex; justify-content: center; align-items: center; z-index: 100; box-shadow: 3px 3px 5px rgba(0, 0, 0, .4); }


/* =========================
   Header / Nav
========================= */
:root{
  --nav-h: 60px;
  --divider: #9BC6BC;
  --text: #5F5F5F;
  --hover: #00A475;
  --accent: #00A475;
  --ease: cubic-bezier(.2,.8,.2,1);
}
.no-scroll{ overflow: hidden; }
.site-header{ position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: #fff; z-index: 1000; overflow: hidden; transition: height 360ms var(--ease); }
.site-header .nav{ width: 100%; height: var(--nav-h); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: relative; }
.site-header .brand{ height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; z-index: 2; }
.site-header .brand img{ max-width: 100%; height: auto; display: block; }
/* 相容 .menu / .top-menu */
.site-header .menu,
.site-header .top-menu{ min-width: 0; }
.site-header .menu a,
.site-header .top-menu a{ color: var(--text); text-decoration: none; font-size: 18px; letter-spacing: .5px; transition: color 220ms var(--ease); }
.site-header .menu a:hover,
.site-header .top-menu a:hover{ color: var(--hover); }
.site-header .social_media{ display: flex; align-items: center; gap: 30px; flex: 0 0 auto; }
.site-header .social_media a{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; }
.site-header .nav-toggle{ border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; align-items: center; justify-content: center; appearance: none; -webkit-appearance: none; }
.site-header .hamburger{ width: 22px; height: 2px; background: var(--accent); display: inline-block; position: relative; transition: background 260ms var(--ease); }
.site-header .hamburger::before,
.site-header .hamburger::after{ content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--accent); transition: top 320ms var(--ease), transform 320ms var(--ease); }
.site-header .hamburger::before{ top: -7px; }
.site-header .hamburger::after{ top: 7px; }
/* =========================
   PC
========================= */
@media (min-width: 768px){
  .site-header .nav{ padding: 0 35px; }
  .site-header .menu,
  .site-header .top-menu{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; }
  .site-header .menu a + a,
  .site-header .top-menu a + a{ position: relative; padding-left: 18px; }
  .site-header .menu a + a::before,
  .site-header .top-menu a + a::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--divider); opacity: 1; }
  .site-header .social_media a{ height: 24px; }
  .site-header .social_media .icon-fb,
  .site-header .social_media .icon-line{ font-size: 24px; line-height: 1; display: inline-block; }
  .site-header .nav-toggle{ display: none; }
}
/* =========================
   Mobile
========================= */
@media (max-width: 767.98px){
  .site-header .nav{ padding: 0 20px; }
  .site-header .menu,
  .site-header .top-menu,
  .site-header .social_media{ display: none; }
  .site-header .brand{ position: fixed; top: 20px; left: 20px; }
  /* 漢堡固定在視窗右上，展開前後同位置 */
  .site-header .nav-toggle{ position: fixed; top: calc((var(--nav-h) - 40px) / 2); right: 20px; width: 40px; height: 40px; display: inline-flex; z-index: 1101; }
  .site-header.is-open{ height: 100vh; }
  .site-header.is-open .nav{ height: 100%; align-items: flex-start; box-sizing: border-box; }
  .site-header.is-open .menu,
  .site-header.is-open .top-menu{ display: flex; flex-direction: column; align-items: center; position: absolute; top: 80px; left: 0; right: 0; width: 100%; gap: 0; padding: 0; }
  .site-header.is-open .menu a,
  .site-header.is-open .top-menu a{ width: min(520px, calc(100% - 48px)); text-align: center; padding: 22px 10px; position: relative; }
  .site-header.is-open .menu a + a::before,
  .site-header.is-open .top-menu a + a::before{ content: none; }
  .site-header.is-open .menu a:not(:last-child)::after,
  .site-header.is-open .top-menu a:not(:last-child)::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--divider); opacity: 1; }
  .site-header.is-open .social_media{ display: flex; position: absolute; left: 0; right: 0; bottom: 60px; justify-content: center; gap: 60px; }
  .site-header .social_media a{ height: 30px; }
  .site-header .social_media .icon-fb,
  .site-header .social_media .icon-line{ font-size: 30px; line-height: 1; display: inline-block; }
  .site-header.is-open .hamburger{ background: transparent; }
  .site-header.is-open .hamburger::before{ top: 0; transform: rotate(45deg); }
  .site-header.is-open .hamburger::after{ top: 0; transform: rotate(-45deg); }
}
/* =========================
   Header / Nav end
========================= */



/* ------------------ 
$pc
------------------ */
@media screen and (min-width: 1200px){

    html,body{ min-width: 100%; }

    a.gototop { width: 60px; height: 60px; border-radius: 30px; position: fixed; right: 20px; bottom: 100px; color: #00B189; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 100; }

}


/* ----------------
$Pad PRO
---------------- */
@media screen and (min-width:1024px) and (max-width:1199.98px){

    a.gototop { width: 60px; height: 60px; border-radius: 30px; position: fixed; right: 20px; bottom: 100px; color: #00B189; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 100; }


}


/* ----------------
$Pad
---------------- */
@media screen and (min-width:768px) and (max-width:1023.98px){
    html,body{ min-width: 100%; }
    .content { width: 100%; max-width: 1200px; padding: 0 40px; margin: 0 auto; position: relative; }


}


/* ----------------
$Mobile
---------------- */
@media screen and (max-width:767.98px){ 

    html,body{ width: 100%; -webkit-text-size-adjust:none; }
    .features{ flex-direction: column; }
    .features img{ width: 100%; }
    .video{ width: 100%; }
    table.menu td,
    table.menu th { padding: 8px 12px; }
    table.menu .menu-name.new:before { min-width: 30px; height:20px; margin: 0 5px 0 0; }

}


/* ----------------
$Mobile small
---------------- */
@media screen and (max-width:320px){ 


}


/* ----------------
$橫的手機版型 
---------------- */
@media screen and (orientation:landscape){ 


}