﻿header .awwwards-label,
header .w3-label,
header .header-menu-wrap,
.age-check-section .bg-block-leaf{ display: none; }
h1,h2,h3,h4,h5,h6{ letter-spacing: 1px;}
html {
  scroll-behavior: smooth; /* 點擊錨點時平滑捲動 */
}

/* ↓ ↓ CHECK Area ================ */
.checkinfoBG{
  /*background-image:url('../images/homepage/age-check-text-bg.jpg');*/
  background: rgba(34,34,34,.85);
  border-radius: 0 30px 0 30px;
}
.age-check-section{ padding-top: 10px; }
.age-check-section .intro-aside-wrap{ bottom: 488px; }
.videoBG{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.videoBG::before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.55);
}
.bg-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 影片鋪滿容器且不變形 */
  z-index: -2;
}
.bgIMG{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
}
.BGMarea{
  position: absolute;
  top: -110px;
  right: -80px;
  display: flex;
  height: 22px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 22px;
  z-index: 1;
  margin-left: 10px;
}
/* 隱藏原始checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* 滑動的按鈕 */
.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 34px;
  top: 0; left: 0; right: 0; bottom: 0;
  transition: 0.4s;
}
/* 滑動按鈕中的圓點滑动按钮中的圆点 */
.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
/* 選中時背景顏色 */
.switch input:checked + .slider {
  background-color: #e1a957;
}
/* 選中時按鈕圓點位置 */
.switch input:checked + .slider::before {
  transform: translateX(26px);
}
#toggleSoundLabel {
  vertical-align: middle;
  color: white;
  font-size: 13px;
  line-height: 22px;
}

/* ↓ ↓ HEADER Area ================ */
header .header-logo-image{ width: 250px; }
header .lang-btn-wrap .lang-btn{ margin-left: 10px; border: 1px solid rgba(255,255,255,0);}
header .lang-btn-wrap .lang-btn.portal{ padding: 8px 20px; }
header .lang-btn-wrap .lang-btn.portal:hover{ color: #FFF; }
header .lang-btn-wrap .lang-btn.portal.in365{ background: #048566; }
header .lang-btn-wrap .lang-btn.portal.in365:hover{ background: #173a31; border: 1px solid #00ffb6;}
header .lang-btn-wrap .lang-btn.portal.inAce{ background: #f9bb22;}
header .lang-btn-wrap .lang-btn.portal.inAce:hover{ background: #7d590f; border: 1px solid #f5d977;}
header .floatCTA{
  position: fixed;
  top: 380px;
  right: 3px;
  width: 20px;
  height: auto;
  z-index: 8;
  transition: right 0.8s;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 7s;
  display: none;
}
@keyframes fadeIn {
  to { opacity: 1;}
}
header .floatCTA a{ width: 12px; height: 12px; border-radius: 12px; display:block; background: #3f3d3d; border: 1px solid #896f4b; margin-bottom:5px;}
header .floatCTA a:hover{ background: #e1a957; border: 1px solid #FFF;}


/* ↓ ↓ MAIN Area ================== */



/* ↓ ↓ FOOTER Area ================ */
footer .footer-col-title{ color: #d5a052;}
.footer-bottom .footer-bottom-image{ width: 156px;}
.footer-bottom .footer-bottom-image-wrap{ width: 200px;}


/* ↓ ↓ MEDIA Area ================= */
@media only screen and (min-width: 1151px) {
  .home-region-section .item-section-title .item-content { width: 65%;}
}
@media only screen and (min-width: 1025px) {
  .intro-aside-wrap { transform: rotate(-270deg);}
  .age-check-section .footer-bottom .footer-bottom-image-wrap a{ width: 10.5vw;}
  header .header-container{ padding-bottom: 20px;}
  .home-intro-section .intro-grape-wrap, .home-intro-section .intro-grape-wrap.summer-item { width: 30vw; }
  .home-intro-section .color-text{ font-size: 3vw;}
  .home-intro-section .small-text{ letter-spacing: 0.2vw;}
  .home-video-section .video-container-item.number{ padding: 0 3.65vw 1.04vw 2.82vw;}
  .home-about-section .about-content{ width: 80%; color:#dedede;} /*About Goddess Festiveal & Blessing*/
  .home-products-section .products-grid-item:first-child .products-grid-text{ max-width: 188px;}
  .home-region-section .glass-image-wrap{ width: 13.5vw; left:37%;}
  .home-region-section .region-grid-wrap{ padding-top:60px;}
  .home-wine-section .recipes-title{ font-size: 1.54vw; }
  .home-wine-section .wine-grid-item.recipes:hover .recipes-container{ background: rgba(34, 34, 34, 0.95); border: 10px solid #E1A957;}
  footer .footer-logo-image.mb-logo{ width:150px;}
}
@media screen and (max-width: 767px) {
  .BGMarea{
    top: -200px;
    left: calc(50% - 60px);
  }
  .recipes-inner-wrap.anim-elem .bg-image{ background-size: 90% 90%;}
  header .header-logo-wrap{ padding-left: 0;}
  header .lang-btn-wrap{ padding-right: 0;}
  header .header-menu-container{ right: -15px;}
  header .lang-btn-wrap .lang-btn.portal{ padding:8px;}
  .age-check-section .text-item{
    width: 85vw;
    margin: 35px auto auto;
  }
  .age-check-section .age-inner{ padding: 60px 0 30px;}
  .age-check-section .age-inner-bottom{ margin-top: 0;}
  .home-intro-section .intro-grape-wrap.summer-item{ top:-33px;}
  .home-intro-section .title-wrap{ background: rgba(14,14,14,.85);}
  .home-video-section .single-grape-image.summer-item{ margin-left: 30px;}
  .home-products-section .products-logo-title{ font-size: 25px;}
  .footer-bottom .footer-left-text{ width: 35%;}
  .footer-bottom .footer-right-text{ width: 65%;}
  footer .footer-logo-wrap{ padding-top: 0; }
  footer .footer-logo-image.mb-logo{ width: 200px; margin-bottom:0;}
  footer .all-rights{ font-size: 15px;}
}