:root {
  --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Amatic SC", sans-serif;
  --font-secondary: "Inter", sans-serif;
}

/* Colors */
/* 放到variables.css */

/* Smooth scroll behavior */
/* 放到variables.css */

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: var(--font-default);
  color: var(--color-default);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-pink);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
}

    .cart_btn {
      position: fixed;
      top: 2px;
      right: 8px;
      width: 48px;
      height: 48px;
      background-color: #FFFFFF;
      border-color: transparent;
      color: #81cde4;
      outline: none;
      padding: 0 auto;
      margin: 0px;
      cursor: pointer;
    }

    #cart_btn > span > #cart_count {
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      line-height: 13px;
      font-size: 9px;
      padding: 1px;
      color: var(--color-white);
      background: var(--color-pink);
      border-radius: 100%;
      top: 10px;
      right: 42px;
      text-align: center;
      opacity:0.9;
    }

    @media (min-width: 800px) and (max-width: 1366px){
      #cart_btn > span > #cart_count {
        right: 48px;
      }
    }
/*--------------------------------------------------------------
# Sections & Section Header
# Sections的基本設定
--------------------------------------------------------------*/

section {
  overflow: hidden;
  padding: 80px 0;
  scroll-margin-top: 90px;
}

@media screen and (max-width: 768px) {
  section {
    overflow: hidden;
    padding: 0;
    scroll-margin-top: 50px;
  }
}


.section-bg {
  background-color: #eee;
}

.section-header {
  text-align: center;
  padding-bottom: 30px;
}

.section-header h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  color: #7f7f90;
  text-transform: uppercase;
  font-family: var(--font-default);
}

.section-header p {
  margin: 0;
  font-size: 48px;
  font-weight: 400;
  font-family: var(--font-primary);
}

.section-header p span {
  color: var(--color-primary);
}

.grid {
  display: grid;
  grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
  grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
  gap: var(--bs-gap, 1.5rem);
}

.grid>* {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: rgba(255,0,255,0.1);
  border: 1px solid rgba(255,0,255,0.25);
}
.grid .g-col-6 {
  grid-column: auto/span 6;
}

#NavMobileTop #brandPic2{
  content: var(--logoPath3);
  width: 160px;
}

aside #canvasbrandPic{
  content: var(--logoPath3);
  width: 180px;
}

.btn-pink{
  background-color: var(--color-pink);
  color: var(--color-white);
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: rgba(55, 55, 63, 0.05);
  margin-top: 90px;
}

@media (max-width: 575px) {
  .breadcrumbs {
    margin-top: 70px;
  }
}

.breadcrumbs h2 {
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #676775;
  content: "/";
}

@media (max-width: 992px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs h2 {
    margin-bottom: 10px;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Scroll top button(totop)
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: var(--color-primary);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.scroll-top:hover {
  background: var(--color-red);
  color: #fff;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

/*-- preloader動畫設定 --*/
@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
# aos 頁面視覺滾差
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  background: #fff;
  transition: all 0.5s;
  z-index: 997;
  /*height: 70px;*/
  border-bottom: 1px solid #fff;
}

@media (max-width: 575px) {
  .header {
    height: 56px;
  }

  .header .logo{
    display: block;
  }
}

.header.sticked {
  border-color: #fff;
  border-color: #eee;
}

.header .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.header .logo h1 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin: 0;
  font-family: var(--font-secondary);
}

.header .logo h1 span {
  color: var(--color-primary);
}

.header .btn-book-a-table,
.header .btn-book-a-table:focus {
  font-size: 14px;
  color: #fff;
  background: var(--color-primary);
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-book-a-table:hover,
.header .btn-book-a-table:focus:hover {
  color: #fff;
  background: rgba(206, 18, 18, 0.8);
}

/* 移到上層(line45)放一起
section {
  scroll-margin-top: 90px;
}
*/

/*--------------------------------------------------------------
# Desktop Navigation電腦版的Navbar
#有分成 min-width: 1280px / (min-width: 1280px) and (max-width: 1366px) /
--------------------------------------------------------------*/

@media (min-width: 1280px) {
  .navbar {
    padding: 0;
  }

  .sticked {
    border-color: #fff;
    border-color: #eee;
  }

      .navbar ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
      }

      .navbar li {
        position: relative;
      }

      .navbar  ul  li {
        white-space: nowrap;
        padding: 10px 0 10px 28px;
      }

      .navbar a,
      .navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 3px;
        font-family: var(--font-secondary);
        font-size: 16px;
        font-weight: 600;
        color: #7f7f90;
        white-space: nowrap;
        transition: 0.3s;
        position: relative;
      }

      .navbar a i,
      .navbar a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
      }

      .navbar >ul>li>a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -6px;
        left: 0;
        background-color: var(--color-primary);
        visibility: hidden;
        width: 0px;
        transition: all 0.3s ease-in-out 0s;
      }

      .navbar a:hover:before,
      .navbar li:hover>a:before,
      .navbar .active:before {
        visibility: visible;
        width: 100%;
      }

      /*--------------------------*/
      /*---------下面效果線--------*/
      .navbar-nav>li>a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -6px;
        left: 0;
        background-color: var(--color-primary);
        visibility: hidden;
        width: 0px;
        transition: all 0.3s ease-in-out 0s;
      }

      .navbar-nav a:hover:before,
      .navbar-nav li:hover>a:before,
      .navbar-nav .active:before {
        visibility: visible;
        width: 100%;
      }

      /*--------------------------*/

      .navbar a:hover,
      .navbar .active,
      .navbar .active:focus,
      .navbar li:hover>a {
        color: #000;
      }

      .navbar .dropdown ul {
        display: block;
        position: absolute;
        left: 28px;
        top: calc(100% + 30px);
        margin: 0;
        padding: 10px 0;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
        transition: 0.3s;
        border-radius: 4px;
      }

      .navbar .megamenu > #megaDiv {
        display: block;
        position: absolute;
        left: 0px;
        top: calc(100% + 30px);
        margin: 0;
        padding: 10px 0;
        opacity: 0;
        visibility: hidden;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
        transition: 0.3s;
        border-radius: 4px;
      }

      .navbar .dropdown ul li {
        min-width: 200px;
        padding-left: 10px;
      }

      .navbar .dropdown ul a {
        padding: 0px 20px;
        font-size: 15px;
        text-transform: none;
        font-weight: 600;
        
      }

      .navbar .dropdown ul a i {
        font-size: 12px;
      }

      .navbar .dropdown ul a:hover,
      .navbar .dropdown ul .active:hover,
      .navbar .dropdown ul li:hover>a {
        color: var(--color-primary);
      }

      .navbar .dropdown:hover>ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
      }

      .navbar .megamenu:hover> #megaDiv {
        opacity: 1;
        top: 100%;
        visibility: visible;
      }

      .navbar .dropdown .dropdown ul {
        top: 0;
        left: calc(100% - 30px);
        visibility: hidden;
      }

      .navbar .dropdown .dropdown:hover>ul {
        opacity: 1;
        top: 0;
        left: 100%;
        visibility: visible;
      }

      /*自訂megaMenu*/
      .navbar .megamenu {
        position: static;
      }

      .navbar .megamenu > ul {
        left: 0;
        padding: 10px;
        display: flex;
        width: calc(100%);
      }

      .navbar .megamenu ul li {
        flex: 1;
      }

      .navbar .megamenu ul li a,
      .navbar .megamenu ul li:hover>a {
        color: rgba(var(--color-secondary-light), 0.5);
        background: none;
      }

      .navbar .megamenu ul li a:hover,
      .navbar .megamenu ul li .active,
      .navbar .megamenu ul li .active:hover {
        color: var(--color-primary);
        /*background: var(--color-primary);*/
      }  
  /*自訂megaMenu*/

  .mobile-nav-show,
  .mobile-nav-hide {
    display: none;
  }

  #NavMobileTop{
    display: none;
  }

  #NavTop{
    display:block;
  }

}

@media (min-width: 1280px) and (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}


/*--------------------------------------------------------------
# Mobile Navigation 手機版的Navigation (1279以內)都算手機版
--------------------------------------------------------------*/


@media (max-width: 1279px) {

  #NavMobileTop{
    display: block;
  }

  #NavTop{
    display:none;
  }

  /*------------ header -------------*/
    .header .btn-book-a-table{
      display: none;
    }

    .header .logo{
      display: block;
    }

  /*------------ navbar -------------*/
    .navbar a,
    .navbar a:focus {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      font-family: var(--font-secondary);
      border-bottom: 2px solid rgba(255, 255, 255, 0.8);
      font-size: 16px;
      font-weight: 600;
      color: #7f7f90;
      white-space: nowrap;
      transition: 0.3s;
    }

    .navbar a i,
    .navbar a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
    }

    .navbar a:hover,
    .navbar li:hover>a {
      color: #000;
    }

    .navbar .active,
    .navbar .active:focus {
      color: #000;
      border-color: var(--color-primary);
    }

    .navbar .dropdown ul,
    .navbar .dropdown .dropdown ul {
      position: static;
      display: none;
      padding: 10px 0;
      margin: 10px 20px;
      transition: all 0.5s ease-in-out;
      border: 1px solid #eee;
    }

    

    .navbar .dropdown .dropdown ul {
      top: 0;
      left: calc(100% - 30px);
      visibility: hidden;
    }

    .navbar .dropdown>.dropdown-active,
    .navbar .dropdown .dropdown>.dropdown-active {
      display: block;
    }

    /*------------ mobile-nav-show -------------*/
  .mobile-nav-show {
    color: var(--color-secondary);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    z-index: 9999;
    margin: 0 5px 0 5px;
  }

  .mobile-nav-hide {
    color: var(--color-secondary);
    font-size: 22px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 9999;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .navbar {
    left: 0;
  }

  .mobile-nav-active .navbar:before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9996;
  }

}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
    .footer {
      font-size: 14px;
      background-color: var(--color-secondary-light);
      padding: 50px 0;
      color: rgba(255, 255, 255, 0.7);
    }

    .footer .icon {
      margin-right: 15px;
      font-size: 24px;
      line-height: 0;
    }

    .footer h4 {
      font-size: 16px;
      font-weight: bold;
      position: relative;
      padding-bottom: 5px;
      color: #fff;
    }

    .footer .footer-links {
      margin-bottom: 30px;
    }

    .footer .footer-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer .footer-links ul li {
      padding: 10px 0;
      display: flex;
      align-items: center;
    }

    .footer .footer-links ul li:first-child {
      padding-top: 0;
    }

    .footer .footer-links ul a {
      color: rgba(255, 255, 255, 0.6);
      transition: 0.3s;
      display: inline-block;
      line-height: 1;
    }

    .footer .footer-links ul a:hover {
      color: #fff;
    }

    .footer .social-links a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      margin-right: 10px;
      transition: 0.3s;
    }

    .footer .social-links a:hover {
      color: #fff;
      border-color: #fff;
    }

    .footer .copyright {
      text-align: center;
      padding-top: 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer .credits {
      padding-top: 4px;
      text-align: center;
      font-size: 13px;
    }

    .footer .credits a {
      color: #fff;
    }

/*===============navbar-nav『第二層』的相關設定=============================*/
    
    @-webkit-keyframes scale-up-center {
      0% {
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
      }
      100% {
        -webkit-transform: scale(1);
                transform: scale(1);
      }
    }
    @keyframes scale-up-center {
      0% {
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
      }
      100% {
        -webkit-transform: scale(1);
                transform: scale(1);
      }
    }

.navbar-nav>.dropdown-mega:hover > div.dropdown-menu,.navbar-nav>.dropdown-mega:hover > ul.dropdown-menu {
  
  -webkit-animation: scale-up-center 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
  animation: scale-up-center 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;

  position: absolute;
  display: block;
  top: auto;
}

.mega-content{
  background-color:#383838;
}
.mega-content ul {
  display:inline-block;
  list-style:none;
  margin:0;
  padding:0;
}

.mega-content li {
  display:inline-block;
    width: 22%;
}

.mega-content li a{
  text-decoration:none;
  color:#696969;
}

.mega-content li a:hover{
  color:#FF0000;
}


.dropdown-menu li {
  position: relative;
}

.dropdown-menu li a{
  text-decoration: none;
  color: #696969;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate;
}

.dropdown-menu:hover a, a:after, a:before {
  transition: all .3s ease-in-out;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  transition-property: all;
}

.dropdown-mega {
  position: relative;
}

.dropdown-mega .dropdown-menu {
  width: 90%;
  top: auto;
  left: 5%;
}



/* -----slick 的css----- */
.slickslider{
  margin: 2rem 1rem;
  max-width: calc(100%-30px);
  display: flex;
  
}

.slider-for{
  width: 85%;
  list-style: none;
  img{
    width:100%;
    height:auto;
    object-fit: cover;
    object-position:center center;
    
  }
}

.slider-nav{
  width: 15%;
  height:100%;
  margin-right: 1rem;
  list-style: none;
  img{
    margin: 0.2rem;
    width: 100%;
    height:auto;
  }
}

@media (max-width: 575.98px) {
  .slider-nav{
    display: none;
  }
}
/* ---------- */

/*產品營養成份表外框*/
.nutrition_table {  
  padding-top: 1rem;
  padding-bottom: 4.5rem;
  top:90px;
}

.nutrition_table > blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

/*產品名抬頭列*/
.nutrition_title {
  margin-bottom: 2rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgba(29,29,31,var(--tw-text-opacity));
}

.nutrition_title .title {
  font-size: 42px;
  line-height: 50.4px;
}

.nutrition_title .subtitle {
  font-size: 30px;
  line-height: 39px;
  font-weight: 300;
}

/*內容的Container*/
.nutrition_bodyContainer {  
  display: flex;  
}

/*左邊的清單*/


.nutrition_bodyLeftColumn {
  display: block;
  font-size:14px!important;
}

.nutrition_bodyLeftColumn #SpecTable{
  /*border:none;*/
  border: inherit;
}

/*右邊的營養標示
.nutrition_bodyRightColumn {    
  width: 41.666667%;
}
*/
.nutrition_bodyRightColumn {
  -ms-flex: none;
  flex: none;
}

@media(min-width: 1024px){
.nutrient_table {
    margin-top: 0;
}
}
.nutrient_table {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size:1rem;
  border-radius: 0.625rem;
  border: solid 1px #000000;
  
}

.nutrient_table_head, .nutrient_table_summary {
  border-bottom:solid 1px #000000;
  padding: 0.75rem 1rem;
}

.nutrient_table_body {
  display: grid;
  padding-bottom: 0.75rem;
  font-size:0.8rem;
  grid-template-columns: minmax(50%, 1fr) 1fr 1fr;
  /*==== minmax(minimum, maximum)：這個函數會將該列的寬度限制在一個最小值和最大值之間。===== */
  /* ==== repeat(3, 1fr) 會創建三列，每列佔據相同的空間。也就是將可用空間平均分配給三列。==== */
}

/*產品營養成份表外框--end*/