@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: #fff; }
body {min-height: 100dvh; display: flex; flex-direction: column;}
body.notice-bgc { background-color: #A5BEB6; }

/* $共用
--------------------------------------------------------------------------------------*/
/* 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: 1240px; padding: 0 20px; margin: 0 auto; position: relative; }

.slick-dots { position: relative; bottom: 0; margin: 10px 0 60px 0; }
.slick-dots li button:before { font-size: 15px; color: #D0C8C9; opacity: 1;}
.slick-dots li.slick-active button:before { color: #00A475; opacity: 1;}
.slick-slider .slick-track, .slick-slider .slick-list { border-radius: 0px; }
.slick-slide img { width: 100%; }

section.kv { margin-top: 61px; }
section.news { background: #EAE2D9; }
section.inside-pages { margin: 120px 0 0; display: flex; flex: 1; }
.kv { width: calc(100%); height: auto; background-size: 50%; margin:0 auto; border-radius: 0px; }
.kv img { width: 100%; border-radius: 0px; }

ul.news-tag { display:flex; gap: 10px; justify-content: center; margin: 40px 0 30px; flex-wrap: wrap; }
ul.news-tag a { font-size: 1.8rem; border: 1px solid #5F5F5F; color: #5F5F5F; border-radius: 30px; padding: 8px 20px; transition: .5s; }
ul.news-tag a:hover,
ul.news-tag a.active,
ul.news-tag a:focus { border: 1px solid #fff; color: #5F5F5F; background: #fff; transition: .5s; }

.news-list { width: 100%; display: flex; flex-wrap: wrap; gap: 32px; }
.news-list .news-box { width: calc(100%); line-height: 0; transition: .5s; }
.news-list .news-box:hover { transform: translateY(-10px); transition: .5s; } 
.news-list .news-box .img-box,
.article .img-box { box-shadow: 0px 3px 6px rgba(0, 0, 0, .2); border-radius:20px;}
.news-list .news-box .img-box img,
.article .img-box img { width: 100%; line-height: 0; border-radius: 20px 20px 0 0; margin: 0 0 -1px 0; }
.news-list .news-box .tag-box,
.article .tag-box { width: 100%; height: 40px; font-size: 18px; padding: 0 20px; color: #fff; position: relative; display: flex; justify-content: start; align-items: center; border-radius: 0 0 20px 20px; }
.tag-box.tag-citytea {background:#22B087; }
.tag-box.tag-citypearl {background:#231512; }
.tag-box.tag-sweets {background:#A75254; }
.tag-box.tag-notice {background:#454545; }
.news-list .news-box .txt-box { line-height: 1.5; padding: 15px 0; font-size: 18px; color: #2C2C2C; }

h2 { font-size: 6rem; font-weight: 400; display:flex; flex-direction:column; width: fit-content; color:#EAE2D9; position: relative; top: -1.05em; margin: 0 0 -1.3em;}
h2 span { font-size: 2rem; color:#00A475; text-align: end; margin: -15px 10px 0 0;}

.article { width: 100%; display: flex; flex-wrap: wrap; gap: 30px; margin: 50px 0 30px; flex: 1; }
.article .img-box,
section.notice .article.article-pic .img-box { max-width: 450px; height: fit-content; }
.article .txt-box,
section.notice .article.article-pic .txt-box { max-width: 700px; font-size: clamp(1.6rem, 1.5vw, 1.8rem); line-height: 1.8; }
.article .txt-box h3 { font-size: clamp(2rem, 1.5vw, 2.4rem); line-height: 1.8; font-weight: bold; color:#00A475 ; margin-bottom: 20px; }
.article .txt-box a { color: #00A475; text-decoration: underline; }
section.notice .article .txt-box { max-width: 1200px; }
section.notice .article .divider { width: 100%; border-bottom: 1px solid #fff; margin-bottom: 40px; padding-top: 40px; }
section.notice h2 { font-size: 5.5rem; font-weight: bold;}

.features{ display: flex; justify-content: center; padding-bottom: 30px; }
.features img{ width: 50%; height: 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:1px solid #b5d5d4; font-size:14px; overflow:hidden; padding: 10px 20px; vertical-align: middle; }
table.menu td{ background:#ffffff; }
table.menu th{ background:#164240; color:#ffffff; text-align:center; vertical-align:center; font-size: clamp(1.6rem, 1.5vw, 1.8rem); }
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"; width: 50px; height:30px; background:#b11e42 ; color:#fff;display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1.2rem, 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: 20%; text-align:center; font-size: clamp(1.6rem, 1.5vw, 2rem); color: #b11e42; font-weight: bold;}
table.menu .menu-temp {  text-align: center; font-size: clamp(1.6rem, 1.5vw, 2rem); font-weight: bold; }

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

.link { width: 100%; padding:40px 0 80px;  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.link a { font-size: clamp(1.6rem, 1.5vw, 1.8rem); color:#5F5F5F; background: #FFFFFF; border-radius:50px; padding: 15px; display: flex; align-items: center; transition: .5s; }
.link a:hover { background: #DEF5EE; transition: .5s;  }
.link a span { margin: 0 0 0 5px; }
.link a span:before { color: #00A475; }
.link a img { margin-left: 5px; }

footer { width: 100%; font-size: 14px; background: #797774; padding: 25px 20px; color: #fff; display: inline-block; text-align: center; margin-top: auto; }
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: 50px; background: #fff; color: #164240; 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: 200px; 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
========================= */

/* =========================
   右下fix-ad 外層定位 預設展開
========================= */
.fix-ad{
  position: fixed;
  right: 0;
  bottom: 120px;
  z-index: 999;
}
.fix-ad > div{
  position: relative;
  width: 300px;
  height: 266px;
  overflow: hidden;
  transform-origin: right bottom;
  transition:
    width 420ms cubic-bezier(.2,.8,.2,1),
    height 420ms cubic-bezier(.2,.8,.2,1);
  will-change: width, height;
}
.fix-ad.is-collapsed > div{
  width: 60px; height: 220px;
}

/* =========================
   左側圓形按鈕（button）
========================= */
.fix-ad > button{
  position: absolute;
  left: -60px;
  top: 25px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  text-decoration: none;
  z-index: 5;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.fix-ad > button .icon-Path-106:before{
  display: inline-block;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

/* 收合按鈕icon水平翻轉 */
.fix-ad.is-collapsed > button .icon-Path-106{
  transform: scaleX(-1);
}

/* =========================
   右側面板（第二個 <div> 裡的 <a>）
========================= */
.fix-ad > div > a{
  width: 100%;
  max-height: 266px;
  display: block;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
  background: #839385;
  text-decoration: none;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
  -webkit-tap-highlight-color: transparent;
}

/* 圖片：展開顯示、收合隱藏 */
.fix-ad img{
  display: block;
  width: 100%;
  height: 206px;
  object-fit: cover;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 260ms cubic-bezier(.2,.8,.2,1),
    transform 420ms cubic-bezier(.2,.8,.2,1),
    height 420ms cubic-bezier(.2,.8,.2,1);
}

.fix-ad.is-collapsed img{
  opacity: 0;
  max-height: 0;
}

/* =========================  
   CTA 文字條（<p>）
========================= */
.fix-ad p{
  margin: 0;
  background: #839385;
  color: #fff;
  font-size: 18px;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 16px;
  line-height: 1.1;
  border-radius: 0 0 0 20px;
  transition: width 420ms cubic-bezier(.2,.8,.2,1);
}

.fix-ad p .icon-arrow-right:before{
  color: #fff;
}

/* 收合後：只留 p，並變成垂直閱讀 */
.fix-ad.is-collapsed p{
  width: 60px;
  max-height: 266px;
  margin-left: auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 15px 10px;
  border-radius: 20px 0 0 20px;
}

/* =========================
   mobile
========================= */
@media (max-width: 767.98px){
  .fix-ad{
    bottom: 100px;
    max-width: 250px;
  }

  .fix-ad > button{
    left: -45px;
    width: 40px;
    height: 40px;
  }

  .fix-ad > div{
    width: 250px;
  }

  .fix-ad.is-collapsed > div{
    width: 40px;
  }

  .fix-ad > button .icon-Path-106:before{
    font-size: 16px;
  }

  .fix-ad p{
    font-size: 16px;
    padding: 10px 5px;
  }

  .fix-ad.is-collapsed p{
    width: 40px;
  }

  .fix-ad p .icon-arrow-right:before{
    font-size: 16px;
  }
}
/* =========================
   右下fix-ad end
========================= */




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

    html,body{ min-width: 100%; }
    
    section.inside-pages { margin: 140px 0 0; }
    .kv { width: calc(100% - 70px); height: auto; background-size: 50%; margin:0 auto; border-radius: 20px; }
    .kv img { width: 100%; border-radius: 20px; }
    .slick-slider .slick-track, .slick-slider .slick-list { border-radius: 20px; }

    h2 { font-size: 8rem;}
    ul.news-tag { display:flex; gap: 15px; justify-content: right; margin: 0 0 40px; }
    ul.news-tag a { font-size: 1.8rem; border: 1px solid #5F5F5F; color: #5F5F5F; border-radius: 30px; padding: 8px 25px; transition: .5s; }
    ul.news-tag a:hover,
    ul.news-tag a:active,
    ul.news-tag a:focus { border: 1px solid #fff; color: #5F5F5F; background: #fff; transition: .5s; }

    .news-list .news-box { width: calc(100% / 4 - 24px);}

    .article { width: 100%; display: flex; flex-wrap: wrap; gap: 50px; margin: 50px 0 30px; flex: 1; }
    .article .img-box,
    section.notice .article-pic .img-box { max-width: 450px; height: fit-content; }
    .article .txt-box,
    section.notice .article-pic .txt-box { max-width: 700px; font-size: clamp(1.6rem, 1.5vw, 1.8rem); line-height: 1.8; }
    .article .txt-box h3 { font-size: clamp(2rem, 1.5vw, 2.4rem); line-height: 1.8; font-weight: bold; color:#00A475 ; margin-bottom: 20px; }
    .article .txt-box a { color: #00A475; text-decoration: underline; }
    section.notice .article .txt-box { max-width: 1200px; }
    section.notice .article .divider { width: 100%; border-bottom: 1px solid #fff; margin-bottom: 40px; padding-top: 40px; }

    a.gototop { width: 60px; height: 60px; border-radius: 30px; position: fixed; right: 20px; bottom: 40px; 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: 40px; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 100; }
    .news-list .news-box { width: calc(100% / 4 - 24px);}
    .kv { width: calc(100% - 70px); height: auto; background-size: 50%; margin:0 auto; border-radius: 20px; }
    .kv img { width: 100%; border-radius: 20px; }
    .slick-slider .slick-track, .slick-slider .slick-list { border-radius: 20px; }

}


/* ----------------
$Pad
---------------- */
@media screen and (min-width:768px) and (max-width:1023.98px){
    html,body{ min-width: 100%; }
    .news-list .news-box { width: calc(100% / 3 - 24px);}
    .kv { width: calc(100% - 70px); height: auto; background-size: 50%; margin:0 auto; border-radius: 20px; }
    .kv img { width: 100%; border-radius: 20px; }
    .slick-slider .slick-track, .slick-slider .slick-list { border-radius: 20px; }

}


/* ----------------
$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%; }

}


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


}


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


}