@charset "UTF-8";
/* CSS Document */
/* 宴會系列頁面共用元件 */
/* 由 banquet-shou.css 拆分而來:hero、麵包屑、全寬分區、標題與按鈕、
   場地規格、結尾諮詢等兩頁以上共用的部分集中於此,各頁專屬樣式留在自己的檔案。
   容器 class 為 .banquet-page,各頁在自己的容器上一併掛這個 class。

   搭配使用:
     團餐(歲月手路宴)  banquet-common.css + banquet-shou.css
     宴會總覽          banquet-common.css + banquet-overview.css

   色系與字型一律沿用 master.css / banquet.css：
   金 #f3bd39、金褐 #b08f04、深黑 #121212、深棕 #4e3232、
   米色 #ECEADD / #f5f3ed / #dedbcf、次要文字 #666 */

/**********頁首主視覺**********/
  .banquet-hero{
    position: relative;
    background: #1C1A17;
    overflow: hidden;
  }
  .banquet-hero .hero-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .banquet-hero .hero-bg img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    font-family: "object-fit: cover;";
  }
  .banquet-hero .hero-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(28,26,23,0.95) 0%, rgba(28,26,23,0.90) 48%, rgba(24,22,19,0.72) 100%);
    background: linear-gradient(90deg, rgba(28,26,23,0.95) 0%, rgba(28,26,23,0.90) 48%, rgba(24,22,19,0.72) 100%);
  }
  .banquet-hero .wrap{
    position: relative;
    z-index: 2;
  }
  .banquet-hero .hero-inner{
    max-width: 700px;
    padding: 110px 0 100px;
  }
  .banquet-hero .hero-eyebrow{
    display: block;
    font-family: 'Crimson Text', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-style: italic;
    font-size: 17px;
    letter-spacing: 4px;
    color: #f3bd39;
    margin-bottom: 14px;
  }
  .banquet-hero .hero-kicker{
    display: block;
    font-size: 14px;
    letter-spacing: 5px;
    color: #f3bd39;
    margin-bottom: 26px;
  }
  .banquet-hero .hero-kicker i{
    display: inline-block;
    width: 44px;
    height: 1px;
    background: #f3bd39;
    vertical-align: middle;
    margin-right: 16px;
  }
  .banquet-hero .hero-title{
    margin: 0 0 24px;
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 2px;
    color: #fff;
  }
  .banquet-hero .hero-tags{
    word-break: keep-all;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 2px;
    color: #f3bd39;
  }
  .banquet-hero .hero-desc{
    margin: 0 0 34px;
    max-width: 620px;
    font-size: 17px;
    line-height: 2;
    letter-spacing: 1px;
    color: #ddd6c8;
  }
  .banquet-hero .hero-cta{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
  }

/**********麵包屑條**********/
  .banquet-bread{
    background: #fff;
    border-bottom: 1px solid #dedbcf;
    padding: 14px 0;
  }
  .banquet-bread .bread{
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #666;
  }
  .banquet-bread .bread a{
    color: #666;
  }
  .banquet-bread .bread a:hover{
    color: #b08f04;
  }

/* master.css 的 .mainArea.ins 是 padding:80px 0：
   上方 80px 原本要墊開訂房橫條，本頁上方只有薄麵包屑、且每個分區自帶內距，會疊成 150px；
   下方 80px 原本給主廚區的負 margin 疊入，本頁不放主廚區。兩邊都取消 */
  .mainArea.ins.banquet-reservation-page{
    padding-top: 0;
    padding-bottom: 0;
  }


/**********全寬分區**********/
  .banquet-page .band{
    padding: 70px 0;
    background: #fff;
  }
  .banquet-page .band.tone{
    background: #ECEADD;
  }
  .banquet-page .band.band-tight{
    padding: 70px 0 26px;
  }
  /* 四道手路菜：整段深色，與 hero 同色系（設計稿墨黑 #1C1A17）*/

/**********標題與按鈕**********/
  /* 區段標題改用 h2/h3 後，統一字重為 400，比照 master.css 的 .titleBox */
  .banquet-page h2,
  .banquet-page h3,
  .banquet-page .main-title .title{
    font-weight: 400;
  }

  .banquet-page .eyebrow{
    display: block;
    font-size: 14px;
    letter-spacing: 3px;
    color: #b08f04;
    margin-bottom: 12px;
  }
  .banquet-page .sec-title{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 30px;
    line-height: 1.5;
    color: #121212;
    margin: 0 0 20px;
  }
  .banquet-page p{
    line-height: 2;
  }

  /* 區段標題左對齊變體：沿用 banquet.css 的 .main-title 金褐短線 */
  .banquet-page .main-title.left{
    text-align: left;
    margin: 0 0 36px;
  }
  .banquet-page .main-title.left:after{
    margin: 20px 0 0;
  }
  .banquet-page .main-title.left .title{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
  }

  /* 主要按鈕：沿用 banquet.css 的 .btn-booking 色票 */
  .banquet-page .btn-line,
  .banquet-hero .btn-line{
    display: inline-block;
    background: #f3bd39;
    border: 1px solid #f3bd39;
    color: #4e3232;
    font-size: 17px;
    letter-spacing: 2px;
    padding: 15px 44px;
    transition: background 0.3s, color 0.3s;
    -webkit-transition: background 0.3s, color 0.3s;
  }
  .banquet-page .btn-line:hover,
  .banquet-hero .btn-line:hover{
    background: transparent;
    color: #f3bd39;
  }
  .banquet-page .btn-form,
  .banquet-hero .btn-form{
    display: inline-block;
    margin-left: 24px;
    font-size: 15px;
    color: #666;
    border-bottom: 1px solid #dedbcf;
    padding-bottom: 3px;
  }
  .banquet-page .btn-form:hover,
  .banquet-hero .btn-form:hover{
    color: #b08f04;
    border-bottom-color: #b08f04;
  }
  .banquet-hero .btn-form.light{
    color: #ddd6c8;
    border-bottom-color: rgba(221,214,200,0.45);
  }
  .banquet-hero .btn-form.light:hover{
    color: #f3bd39;
    border-bottom-color: #f3bd39;
  }

/**********場地與規格**********/
  .banquet-page .venue{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    margin-bottom: 46px;
  }
  .banquet-page .venue .venue-body{
    width: 45%;
    padding-right: 46px;
  }
  /* 只作用於內文段落，避免蓋掉 .sec-title 的字級 */
  .banquet-page .venue .venue-body > p:not([class]){
    font-size: 16px;
    color: #333;
  }
  .banquet-page .venue .venue-pic{
    width: 55%;
  }
  .banquet-page .venue .venue-pic img{
    width: 100%;
    display: block;
    margin-bottom: 14px;
  }
  .banquet-page .venue .venue-pic .pair{
    display: -webkit-flex;
    display: flex;
    margin: 0 -7px;
  }
  .banquet-page .venue .venue-pic .pair img{
    width: calc(50% - 14px);
    margin: 0 7px;
  }

  /* 規格數字：沿用 .area-table 的米色框線語彙 */
  .banquet-page .spec{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 1px solid #dedbcf;
    border-left: 1px solid #dedbcf;
    margin-top: 28px;
  }
  .banquet-page .spec li{
    width: 50%;
    border-right: 1px solid #dedbcf;
    border-bottom: 1px solid #dedbcf;
    padding: 18px 20px;
    background: #fff;
  }
  .banquet-page .spec .num{
    display: block;
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 27px;
    color: #121212;
    line-height: 1.3;
  }
  .banquet-page .spec .cap{
    font-size: 14px;
    color: #666;
  }

/**********結尾諮詢**********/
  .banquet-page .band.cta{
    background: #ECEADD;
  }
  .banquet-page .cta-inner{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .banquet-page .cta-inner .cta-body{
    max-width: 620px;
    padding-right: 40px;
  }
  .banquet-page .cta-inner .cta-action{
    text-align: center;
  }
  .banquet-page .cta .cta-title{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 30px;
    line-height: 1.6;
    color: #121212;
    margin: 0 0 16px;
  }
  .banquet-page .cta .cta-desc{
    font-size: 16px;
    color: #4e3232;
    margin: 0;
  }
  .banquet-page .cta .cta-hint{
    display: block;
    font-size: 13px;
    color: #7a7263;
    margin: 12px 0 14px;
  }
  .banquet-page .cta .btn-form{
    display: inline-block;
    margin: 0;
  }
  .banquet-page .cta .tel{
    font-size: 15px;
    color: #666;
    margin: 20px 0 0;
  }
  .banquet-page .cta .tel a{
    color: #b08f04;
  }


/**********平板**********/
  @media (max-width: 1024px){
    .banquet-hero .hero-inner{
      padding: 90px 0 80px;
    }
    .banquet-hero .hero-title{
      font-size: 42px;
    }
    .banquet-page .band{
      padding: 64px 0;
    }
  }

/**********手機**********/
  @media (max-width: 800px){
    .banquet-hero .hero-inner{
      padding: 70px 0 64px;
      max-width: 100%;
    }
    .banquet-hero .hero-mask{
      background: -webkit-linear-gradient(top, rgba(28,26,23,0.62) 0%, rgba(26,24,21,0.84) 46%, rgba(24,22,19,0.92) 100%);
      background: linear-gradient(180deg, rgba(28,26,23,0.62) 0%, rgba(26,24,21,0.84) 46%, rgba(24,22,19,0.92) 100%);
    }
    .banquet-hero .hero-title{
      font-size: 32px;
    }
    .banquet-hero .hero-desc{
      font-size: 15px;
    }
    .banquet-hero .hero-cta{
      display: block;
    }
    .banquet-hero .hero-cta .btn-form{
      display: inline-block;
      margin: 18px 0 0;
    }
    .banquet-page .venue,
    .banquet-page .cta-inner{
      display: block;
    }
    .banquet-page .venue .venue-body,
    .banquet-page .venue .venue-pic,
    .banquet-page .cta-inner .cta-body{
      width: 100%;
      padding: 0;
      max-width: 100%;
    }
    .banquet-page .venue .venue-body{
      margin-bottom: 26px;
    }
    .banquet-page .cta-inner .cta-action{
      margin-top: 28px;
      text-align: left;
    }
    .banquet-page .btn-form,
    .banquet-page .cta .btn-form{
      display: inline-block;
      margin: 18px 0 0;
    }
  }

  @media (max-width: 480px){
    .banquet-hero .hero-title{
      font-size: 27px;
    }
    .banquet-page .sec-title,
    .banquet-page .cta .cta-title{
      font-size: 25px;
    }
    .banquet-page .spec li{
      padding: 15px 16px;
    }
    .banquet-page .btn-line,
    .banquet-hero .btn-line{
      display: block;
      text-align: center;
      padding: 15px 20px;
    }
  }

  @media (max-width: 360px){
    .banquet-page .spec li{
      width: 100%;
    }
  }