/* ==========================================================================
   v3/layout.css — Header + Footer + Sidebar + Float Bar + Keyframes
   (Popup rules 已拆至 page/popup.css)
   ========================================================================== */


.v3-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  display: none;
}
.v3-popup-overlay.active { display: block; }
.header__logo_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.header__brand_name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 1px;
  white-space: nowrap;
}
.header__top_menu .btn__style2:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* --- Header icons (全站共用，不可放 page/*.css) --- */
.btn__style2.contact:before {
  content:'';
  width:26px;
  height:22px;
  background-image:url(../../images/icon/contact.png)
}
.btn__style2.contact:hover:before,.btn__style2.contact.active:before {
  background-image:url(../../images/icon/contact2.png)
}
.btn__style2.qa:before {
  content:'';
  width:14px;
  height:20px;
  background-image:url(../../images/icon/q.png)
}
.btn__style2.qa:hover:before,.btn__style2.qa.active:before {
  background-image:url(../../images/icon/q2.png)
}
.btn__style2.member:hover:before,.btn__style2.member.active:before {
  background-image:url(../../images/icon/user2.png)
}
.btn__style2.cart:before {
  content:'';
  width:24px;
  height:26px;
  background-image:url(../../images/icon/shop.png)
}
.btn__style2.cart:hover:before,.btn__style2.cart.active:before {
  background-image:url(../../images/icon/shop2.png)
}
.header__top_menu .btn__style2.login font {
  font-weight: 600;
}
.mega-menu-v3.Popup-categoryAll {
  background: #fff !important;
  color: #333;
}
.mega-menu-v3 .pop-container.mega-menu-v3__container {
  background: #fff;
  color: #333;
}
.mega-menu-v3__close {
  color: transparent !important;
  font-size: 24px;
  z-index: 10;
}
.mega-menu-v3__close:hover { color: #333 !important; }
.mega-menu-v3__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
  padding-right: 40px;
}
.mega-menu-v3__search {
  max-width: 260px;
}
.mega-menu-v3__tab {
  padding: 9px 20px;
  font-size: 18px;
  font-weight:500;
  color: var(--color-cta-dark, #825723);
  background: #fff;
  border: 1px solid var(--color-cta-dark, #825723);
  border-radius: 5px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.mega-menu-v3__tab:hover {
  background: var(--color-cta-dark, #825723);
  color: #fff;
  border-color: var(--color-cta-dark, #825723);
}
.mega-menu-v3__tab.active {
  background: var(--color-cta-dark, #825723);
  color: #fff;
  border-color: var(--color-cta-dark, #825723);
  font-weight: 500;
}
.mega-menu-v3__panel { display: none; }
.mega-menu-v3__panel.active { display: block; }

.mega-menu-v3__search .search_box input::placeholder {
  color: #999;
}
.mega-menu-v3 .pop_cate_linktext {
  color: #333 !important;
}
.mega-menu-v3 .pop_cate_linkbox a:hover .pop_cate_linktext {
  color: var(--color-primary, #5a8f3c) !important;
}
.header__bottom .sub_nav1 .swiper-slide {
  text-align: center;
}
.search_box input[type=text]{
  font-size: 16px;
}
.mega-menu-v3__search .search_box input[type=text] {
  width: 230px;
  height: 40px;
}

/* -- Member Sidebar v3 (Sprint 1 #7) ------------------------------------- */

/* -- Sidebar v3 Overrides (Sprint 1 #6) ---------------------------------- */

.side__link_box > a.side__link_all {
  display: none !important;
}
.side__link_box > a.side__link_quote {
  display: flex !important;
  flex-direction: column;
}
/* Cart: 強制顯示（覆蓋 @media max-width:1650px 的 display:none）#30 */
.side__link_box > a.side__link_cart {
  display: flex !important;
  flex-direction: column;
}
.side__link_box > a.side__link_cart:hover:after {
  background: var(--color-primary-dark) !important;
}
/* Service: 強制顯示 #30 */
.side__link_box > a.side__link_service {
  display: flex !important;
  flex-direction: column;
}
.side__link_box > a.side__link_service:after {
  background: var(--color-primary) !important;
}
.side__link_box > a.side__link_service:hover:after {
  background: var(--color-primary-dark) !important;
}
/* TOP: 強制顯示 #30 */
.side__link_box > a.side__link_gotop {
  display: flex !important;
  flex-direction: column;
}
.side__link_box > a.side__link_gotop:hover:after {
  background: #825723 !important;
}
@media (max-width: 1297px){
  .side__link_box > a.side__link_quote {
    display: none !important;
  }
  .side__link_box > a.side__link_cart {
    display: none !important;
  }
  .side__link_box > a.side__link_service {
    display: none !important;
  }
  .mega-menu-v3__search{
    max-width: 100%;
    flex: 1;
  }
}



/* main 與 footer 間距 */

footer .footer__copyright h4 {
  font-size: var(--fs-label);
  color: var(--color-text-muted);
  text-align: center;
}
footer .footer__maplinkul .head > a {
  font-weight: 600;
  color: var(--color-text);
}
footer .footer__submaplinkul li a {
  color: var(--color-text-secondary);
  transition: var(--transition);
}
footer .footer__submaplinkul li a:hover {
  color: var(--color-primary);
}

/* Breadcrumb override */
.v3-breadcrumb {
  font-size: var(--fs-breadcrumb);
  color: var(--color-text-muted);
}
.v3-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.v3-breadcrumb a:hover { color: var(--color-primary); }
.v3-breadcrumb .active { color: var(--color-text); }
footer .footer__info .footer__infolist li:nth-child(1) span.icon:before { background-image: url(../../images/icon/clock.png); background-size: 17px; }
footer .footer__info .footer__infolist li:nth-child(2) span.icon:before { background-image: url(../../images/icon/phone.png); background-size: 13px; }
footer .footer__info .footer__infolist li:nth-child(3) span.icon:before { background-image: url(../../images/icon/tax.png); background-size: 16px; }
footer .footer__info .footer__infolist li:nth-child(4) span.icon:before { background-image: url(../../images/icon/mail.png); background-size: 16px; }
footer .footer__info .footer__infolist li:nth-child(5) span.icon:before { background-image: url(../../images/icon/map.png); background-size: 12px; }
footer .footer__infolist li span.icon:has(img):before { display: none !important; }
footer .footer__infolist li span.icon img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
}
footer .footer__info .footer__infolist li span.words {
  gap: 10px; flex: 1;
}
footer .footer__info .footer__infolist li span.words > span:first-child {
  min-width: 66px; flex-shrink: 0;
}
footer .footer__info .footer__infolist li span.words > span:last-child {
  color: #575757; min-width: auto;
}
footer .footer__right {
  flex: 0 0 380px;
}
/* mobile: footer__info 下所有 li 都顯示（取代舊的 .footer_info_hours 規則） */

/* -- Side Links (購物車圖示覆蓋) --------- */
.side__link_box .side__link_cart .side__link_imgbox {
  background-image: url(../../images/icon/shop2.png);
}
.side__link_service .side__link_imgbox{
  background-image: url(../../images/icon/online2.png);
}
/* --- 3.0 Header Rules --- */
.hamburger:hover {
  opacity:.7
}

.hamburger.is-active:hover {
  opacity:.7
}

.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::before,.hamburger.is-active .hamburger-inner::after {
  background-color:#3D9738
}

.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after {
  width:20px;
  height:2px;
  background-color:#3D9738;
  border-radius:1px;
  position:absolute;
  transition-property:transform;
  transition-duration:0.15s;
  transition-timing-function:ease
}

.hamburger-inner::before,.hamburger-inner::after {
  content:"";
  display:block
}

.hamburger-inner::before {
  top:-6px
}

.hamburger-inner::after {
  bottom:-6px
}

.hamburger--3dx .hamburger-inner::before,.hamburger--3dx .hamburger-inner::after {
  transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx.is-active .hamburger-inner::before {
  transform:translate3d(0, 6px, 0) rotate(45deg)
}

.hamburger--3dx.is-active .hamburger-inner::after {
  transform:translate3d(0, -6px, 0) rotate(-45deg)
}

.hamburger--3dx-r .hamburger-inner::before,.hamburger--3dx-r .hamburger-inner::after {
  transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx-r.is-active .hamburger-inner::before {
  transform:translate3d(0, 6px, 0) rotate(45deg)
}

.hamburger--3dx-r.is-active .hamburger-inner::after {
  transform:translate3d(0, -6px, 0) rotate(-45deg)
}

.hamburger--3dy .hamburger-inner::before,.hamburger--3dy .hamburger-inner::after {
  transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy.is-active .hamburger-inner::before {
  transform:translate3d(0, 6px, 0) rotate(45deg)
}

.hamburger--3dy.is-active .hamburger-inner::after {
  transform:translate3d(0, -6px, 0) rotate(-45deg)
}

.hamburger--3dy-r .hamburger-inner::before,.hamburger--3dy-r .hamburger-inner::after {
  transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy-r.is-active .hamburger-inner::before {
  transform:translate3d(0, 6px, 0) rotate(45deg)
}

.hamburger--3dy-r.is-active .hamburger-inner::after {
  transform:translate3d(0, -6px, 0) rotate(-45deg)
}

.hamburger--3dxy .hamburger-inner::before,.hamburger--3dxy .hamburger-inner::after {
  transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy.is-active .hamburger-inner::before {
  transform:translate3d(0, 6px, 0) rotate(45deg)
}

.hamburger--3dxy.is-active .hamburger-inner::after {
  transform:translate3d(0, -6px, 0) rotate(-45deg)
}

.hamburger--3dxy-r .hamburger-inner::before,.hamburger--3dxy-r .hamburger-inner::after {
  transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy-r.is-active .hamburger-inner::before {
  transform:translate3d(0, 6px, 0) rotate(45deg)
}

.hamburger--3dxy-r.is-active .hamburger-inner::after {
  transform:translate3d(0, -6px, 0) rotate(-45deg)
}

.hamburger--arrow.is-active .hamburger-inner::before {
  transform:translate3d(-4px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrow.is-active .hamburger-inner::after {
  transform:translate3d(-4px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform:translate3d(4px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform:translate3d(4px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowalt .hamburger-inner::before {
  transition:top 0.1s 0.1s ease,transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt .hamburger-inner::after {
  transition:bottom 0.1s 0.1s ease,transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
  top:0;
  transform:translate3d(-4px, -5px, 0) rotate(-45deg) scale(0.7, 1);
  transition:top 0.1s ease,transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom:0;
  transform:translate3d(-4px, 5px, 0) rotate(45deg) scale(0.7, 1);
  transition:bottom 0.1s ease,transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt-r .hamburger-inner::before {
  transition:top 0.1s 0.1s ease,transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt-r .hamburger-inner::after {
  transition:bottom 0.1s 0.1s ease,transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
  top:0;
  transform:translate3d(4px, -5px, 0) rotate(45deg) scale(0.7, 1);
  transition:top 0.1s ease,transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
  bottom:0;
  transform:translate3d(4px, 5px, 0) rotate(-45deg) scale(0.7, 1);
  transition:bottom 0.1s ease,transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
  transform:translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
  transform:translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
  transform:translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
  transform:translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--boring .hamburger-inner,.hamburger--boring .hamburger-inner::before,.hamburger--boring .hamburger-inner::after {
  transition-property:none
}

.hamburger--boring.is-active .hamburger-inner::before {
  top:0;
  opacity:0
}

.hamburger--boring.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(-90deg)
}

.hamburger--collapse .hamburger-inner::after {
  top:-12px;
  transition:top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),opacity 0.1s linear
}

.hamburger--collapse .hamburger-inner::before {
  transition:top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top:0;
  opacity:0;
  transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),opacity 0.1s 0.22s linear
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top:0;
  transform:rotate(-90deg);
  transition:top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--collapse-r .hamburger-inner::after {
  top:-12px;
  transition:top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),opacity 0.1s linear
}

.hamburger--collapse-r .hamburger-inner::before {
  transition:top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
  top:0;
  opacity:0;
  transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),opacity 0.1s 0.22s linear
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
  top:0;
  transform:rotate(90deg);
  transition:top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--elastic .hamburger-inner::before {
  top:6px;
  transition:opacity 0.125s 0.275s ease
}

.hamburger--elastic .hamburger-inner::after {
  top:12px;
  transition:transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic.is-active .hamburger-inner::before {
  transition-delay:0s;
  opacity:0
}

.hamburger--elastic.is-active .hamburger-inner::after {
  transform:translate3d(0, -12px, 0) rotate(-270deg);
  transition-delay:0.075s
}

.hamburger--elastic-r .hamburger-inner::before {
  top:6px;
  transition:opacity 0.125s 0.275s ease
}

.hamburger--elastic-r .hamburger-inner::after {
  top:12px;
  transition:transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic-r.is-active .hamburger-inner::before {
  transition-delay:0s;
  opacity:0
}

.hamburger--elastic-r.is-active .hamburger-inner::after {
  transform:translate3d(0, -12px, 0) rotate(270deg);
  transition-delay:0.075s
}

.hamburger--emphatic .hamburger-inner::before {
  left:0;
  transition:transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),top 0.05s 0.125s linear,left 0.125s 0.175s ease-in
}

.hamburger--emphatic .hamburger-inner::after {
  top:6px;
  right:0;
  transition:transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),top 0.05s 0.125s linear,right 0.125s 0.175s ease-in
}

.hamburger--emphatic.is-active .hamburger-inner::before {
  left:-40px;
  top:-40px;
  transform:translate3d(40px, 40px, 0) rotate(45deg);
  transition:left 0.125s ease-out,top 0.05s 0.125s linear,transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic.is-active .hamburger-inner::after {
  right:-40px;
  top:-40px;
  transform:translate3d(-40px, 40px, 0) rotate(-45deg);
  transition:right 0.125s ease-out,top 0.05s 0.125s linear,transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic-r .hamburger-inner::before {
  left:0;
  transition:transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),top 0.05s 0.125s linear,left 0.125s 0.175s ease-in
}

.hamburger--emphatic-r .hamburger-inner::after {
  top:6px;
  right:0;
  transition:transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),top 0.05s 0.125s linear,right 0.125s 0.175s ease-in
}

.hamburger--emphatic-r.is-active .hamburger-inner::before {
  left:-40px;
  top:40px;
  transform:translate3d(40px, -40px, 0) rotate(-45deg);
  transition:left 0.125s ease-out,top 0.05s 0.125s linear,transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic-r.is-active .hamburger-inner::after {
  right:-40px;
  top:40px;
  transform:translate3d(-40px, -40px, 0) rotate(45deg);
  transition:right 0.125s ease-out,top 0.05s 0.125s linear,transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--minus .hamburger-inner::before,.hamburger--minus .hamburger-inner::after {
  transition:bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear
}

.hamburger--minus.is-active .hamburger-inner::before,.hamburger--minus.is-active .hamburger-inner::after {
  opacity:0;
  transition:bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear
}

.hamburger--minus.is-active .hamburger-inner::before {
  top:0
}

.hamburger--minus.is-active .hamburger-inner::after {
  bottom:0
}

.hamburger--slider .hamburger-inner::before {
  top:6px;
  transition-property:transform, opacity;
  transition-timing-function:ease;
  transition-duration:0.15s
}

.hamburger--slider .hamburger-inner::after {
  top:12px
}

.hamburger--slider.is-active .hamburger-inner::before {
  transform:rotate(-45deg) translate3d(-2.85714px, -4px, 0);
  opacity:0
}

.hamburger--slider.is-active .hamburger-inner::after {
  transform:translate3d(0, -12px, 0) rotate(-90deg)
}

.hamburger--slider-r .hamburger-inner::before {
  top:6px;
  transition-property:transform, opacity;
  transition-timing-function:ease;
  transition-duration:0.15s
}

.hamburger--slider-r .hamburger-inner::after {
  top:12px
}

.hamburger--slider-r.is-active .hamburger-inner::before {
  transform:rotate(45deg) translate3d(2.85714px, -4px, 0);
  opacity:0
}

.hamburger--slider-r.is-active .hamburger-inner::after {
  transform:translate3d(0, -12px, 0) rotate(90deg)
}

.hamburger--spin .hamburger-inner::before {
  transition:top 0.1s 0.25s ease-in, opacity 0.1s ease-in
}

.hamburger--spin .hamburger-inner::after {
  transition:bottom 0.1s 0.25s ease-in,transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin.is-active .hamburger-inner::before {
  top:0;
  opacity:0;
  transition:top 0.1s ease-out, opacity 0.1s 0.12s ease-out
}

.hamburger--spin.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(-90deg);
  transition:bottom 0.1s ease-out,transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spin-r .hamburger-inner::before {
  transition:top 0.1s 0.25s ease-in, opacity 0.1s ease-in
}

.hamburger--spin-r .hamburger-inner::after {
  transition:bottom 0.1s 0.25s ease-in,transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin-r.is-active .hamburger-inner::before {
  top:0;
  opacity:0;
  transition:top 0.1s ease-out, opacity 0.1s 0.12s ease-out
}

.hamburger--spin-r.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(90deg);
  transition:bottom 0.1s ease-out,transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spring .hamburger-inner::before {
  top:6px;
  transition:top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring .hamburger-inner::after {
  top:12px;
  transition:top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring.is-active .hamburger-inner::before {
  top:0;
  transition:top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform:translate3d(0, 6px, 0) rotate(45deg)
}

.hamburger--spring.is-active .hamburger-inner::after {
  top:0;
  transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform:translate3d(0, 6px, 0) rotate(-45deg)
}

.hamburger--spring-r .hamburger-inner::after {
  top:-12px;
  transition:top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),opacity 0s linear
}

.hamburger--spring-r .hamburger-inner::before {
  transition:top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring-r.is-active .hamburger-inner::after {
  top:0;
  opacity:0;
  transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),opacity 0s 0.22s linear
}

.hamburger--spring-r.is-active .hamburger-inner::before {
  top:0;
  transform:rotate(90deg);
  transition:top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand .hamburger-inner::before {
  transition:top 0.075s 0.075s ease-in,transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand .hamburger-inner::after {
  transition:bottom 0.075s 0.075s ease-in,transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand.is-active .hamburger-inner::before {
  top:0;
  transform:rotate(-45deg);
  transition:top 0.075s 0.1s ease-out,transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(45deg);
  transition:bottom 0.075s 0.1s ease-out,transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand-r .hamburger-inner::before {
  transition:top 0.075s 0.075s ease-in,transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand-r .hamburger-inner::after {
  transition:bottom 0.075s 0.075s ease-in,transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand-r.is-active .hamburger-inner::before {
  top:0;
  transform:rotate(-45deg);
  transition:top 0.075s 0.1s ease-out,transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand-r.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(45deg);
  transition:bottom 0.075s 0.1s ease-out,transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--squeeze .hamburger-inner::before {
  transition:top 0.075s 0.12s ease, opacity 0.075s ease
}

.hamburger--squeeze .hamburger-inner::after {
  transition:bottom 0.075s 0.12s ease,transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--squeeze.is-active .hamburger-inner::before {
  top:0;
  opacity:0;
  transition:top 0.075s ease, opacity 0.075s 0.12s ease
}

.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(-90deg);
  transition:bottom 0.075s ease,transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--vortex .hamburger-inner::before,.hamburger--vortex .hamburger-inner::after {
  transition-duration:0s;
  transition-delay:0.1s;
  transition-timing-function:linear
}

.hamburger--vortex .hamburger-inner::before {
  transition-property:top, opacity
}

.hamburger--vortex .hamburger-inner::after {
  transition-property:bottom, transform
}

.hamburger--vortex.is-active .hamburger-inner::before,.hamburger--vortex.is-active .hamburger-inner::after {
  transition-delay:0s
}

.hamburger--vortex.is-active .hamburger-inner::before {
  top:0;
  opacity:0
}

.hamburger--vortex.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(90deg)
}

.hamburger--vortex-r .hamburger-inner::before,.hamburger--vortex-r .hamburger-inner::after {
  transition-duration:0s;
  transition-delay:0.1s;
  transition-timing-function:linear
}

.hamburger--vortex-r .hamburger-inner::before {
  transition-property:top, opacity
}

.hamburger--vortex-r .hamburger-inner::after {
  transition-property:bottom, transform
}

.hamburger--vortex-r.is-active .hamburger-inner::before,.hamburger--vortex-r.is-active .hamburger-inner::after {
  transition-delay:0s
}

.hamburger--vortex-r.is-active .hamburger-inner::before {
  top:0;
  opacity:0
}

.hamburger--vortex-r.is-active .hamburger-inner::after {
  bottom:0;
  transform:rotate(-90deg)
}

.fa-hamburger:before {
  content:"\f805"
}

.btn__style1.green .hamburger-inner,.btn__style1.green .hamburger-inner::before,.btn__style1.green .hamburger-inner::after {
  background-color:#3D9738
}

.btn__style1.black .hamburger-inner,.btn__style1.black .hamburger-inner::before,.btn__style1.black .hamburger-inner::after {
  background-color:#1F1F1F
}

header .header__top .header__top_menu>a:first-child {
  margin:0
}

header .header__top .header__top_menu_mobile>a.btn__style2.qa:before {
  width:13px;
  height:18px
}

header .header__top .header__top_menu_mobile>a.btn__style2.search:before {
  width:17px;
  height:18px
}

header .header__top .header__top_menu_mobile>a.btn__style2:before {
  margin-right:0
}

header .header__bottom:after {
  content:"";
  position:absolute;
  height:1px;
  width:100%;
  top:0;
  left:0;
  right:0;
  z-index:-1;
  background-color:#3D9738;
  background-image:linear-gradient(90deg, #3d9738 25%,#d1aa6e 100%)
}

header .header__bottom .sub_nav2>li:before {
  position:absolute;
  content:"";
  left:-3px;
  top:0;
  bottom:0;
  width:5px;
  height:35px;
  margin:auto;
  background-color:#F7F0E6
}

header .header__bottom .sub_nav2>li>a:hover {
  transform:translate(0px, -5px)
}

.menu__bottombox_mobile .menu_bottom_category .menu__bottombox_imgbox .hamburger-inner,.menu__bottombox_mobile .menu_bottom_category .menu__bottombox_imgbox .hamburger-inner::before,.menu__bottombox_mobile .menu_bottom_category .menu__bottombox_imgbox .hamburger-inner::after {
  background-color:#ffffff
}

.menu__bottombox_mobile .hamburger-inner:before {
  width:17px;
  top:-6px
}

.menu__bottombox_mobile .hamburger-inner:after {
  top:-12px;
  width:17px
}

.header__top_search_mobile:after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:-1;
  background-color:#095341;
  background-image:linear-gradient(90deg, #095341 25%,#825723 100%);
  opacity:.95
}

.header__top_search_mobile .input_textbox input[type=text]:-ms-input-placeholder {
  color:#ffffff
}

.header__top_search_mobile .input_textbox input[type=text]::placeholder {
  color:#ffffff
}
/* --- 3.0 Footer Rules --- */
.Popup-box.Popup-quote_service .footer__medialinkbox {
  width:100%;
  -ms-flex-pack:distribute;
  justify-content:space-around
}

.Popup-box.Popup-quote_service .footer__medialinkbox>a {
  margin:0;
  position:relative
}
footer .footer__container .footer__center .footer__maplinklist{
  gap: 40px;;
}
footer .footer__container .footer__center .footer__maplinklist:before,footer .footer__container .footer__center .footer__maplinklist:after {
  content:'';
  display:block
}

footer .footer__container .footer__center .footer__maplinklist .footer__submaplinkul li a:hover {
  color:#66AA2D
}

footer .footer__infolist li span.words>span:first-child {
  padding-right:10px
}

footer .footer__infolist li span.icon:before {
  content:"";
  width:30px;
  height:30px;
  display:block;
  border-radius:50%;
  background-color:#64AC60;
  background-position:center;
  background-repeat:no-repeat
}

footer .footer__infolist li.footer_info_hours span.icon:before {
  background-image:url(../../images/icon/clock.png);
  background-size:17px
}

footer .footer__infolist li.footer_info_email span.icon:before {
  background-image:url(../../images/icon/mail.png);
  background-size:16px
}

footer .footer__infolist li.footer_info_phone span.icon:before {
  background-image:url(../../images/icon/phone.png);
  background-size:13px
}

footer .footer__infolist li.footer_info_fax span.icon:before {
  background-image:url(../../images/icon/tax.png);
  background-size:16px
}

footer .footer__infolist li.footer_info_map span.icon:before {
  background-image:url(../../images/icon/map.png);
  background-size:12px
}

.footer__medialinkbox>a:after {
  content:"";
  position:relative;
  width:100%;
  padding-bottom:100%;
  display:block
}

footer .footer__container .footer__center .footer__maplinklist .footer__maplinkul li.head>a[data-issubmenu="true"]>span.arrow:after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background:url(../../images/icon/footer-arrow.png) no-repeat center center;
  background-size:10px;
  left:0;
  top:0;
  z-index:1;
  transition:all 0.6s cubic-bezier(0.13, 0.46, 0.03, 0.87)
}

footer .footer__container .footer__center .footer__maplinklist .footer__maplinkul li.head>a[data-issubmenu="true"]>span.arrow:before {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background:url(../../images/icon/footer-arrow.png) no-repeat center center;
  background-size:10px;
  left:0;
  top:0;
  z-index:1;
  transform:rotateZ(180deg) translateY(10px);
  opacity:0;
  transition:all 0.6s cubic-bezier(0.13, 0.46, 0.03, 0.87)
}

footer .footer__container .footer__center .footer__maplinklist .footer__maplinkul li.active.head>a[data-issubmenu="true"]>span.arrow:after {
  transform:translateY(10px);
  opacity:0
}

footer .footer__container .footer__center .footer__maplinklist .footer__maplinkul li.active.head>a[data-issubmenu="true"]>span.arrow:before {
  transform:rotateZ(180deg) translateY(0px);
  opacity:1
}

footer .footer__info>ul>li.footer_info_hours>.words span:first-child {
  padding:0;
  font-size:15px;
  font-weight:500;
  color:#66AA2D
}
/* Footer 左下標誌 1~3 */
.footer__sublogobox {
  gap: 15px;
  margin-bottom: 15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: center;
    justify-content: center;
  
}
.footer__sublogo {
  display: block;
  width: 44px;
  height: 44px;
}

.footer__sublogo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover; 
  object-position: center;
}

/* --- 3.0 Float Bar / Side Links --- */
.menufloat {
  opacity:0;
  position:fixed
}

.menufloat.active {
  opacity:1;
  animation-fill-mode:forwards;
  animation-duration:1.3s;
  animation-iteration-count:1;
  animation-timing-function:cubic-bezier(0.15, 0.38, 0, 0.86)
}

.menufloat.active.fbf-top {
  animation-name:floatshow_top
}

.menufloat.active.fbf-right {
  animation-name:floatshow_right
}

.menufloat.active.fbf-bottom {
  animation-name:floatshow_bottom
}

.menufloat.active.fbf-left {
  animation-name:floatshow_left
}

.menufloat.inactive {
  opacity:0;
  animation-fill-mode:forwards;
  animation-duration:1.3s;
  animation-iteration-count:1;
  animation-timing-function:cubic-bezier(0.15, 0.38, 0, 0.86)
}

.menufloat.inactive.fbf-top {
  animation-name:floathide_top
}

.menufloat.inactive.fbf-right {
  animation-name:floathide_right
}

.menufloat.inactive.fbf-bottom {
  animation-name:floathide_bottom
}

.menufloat.inactive.fbf-left {
  animation-name:floathide_left
}

body.float-bar-fixed .menufloat {
  position:fixed;
  margin:auto;
  height:0;
  z-index:2
}

body.float-bar-fixed .menufloat.fbf-top {
  top:0;
  left:0;
  right:0;
  transform:translate(0, -100%)
}

body.float-bar-fixed .menufloat.fbf-right {
  bottom:0;
  top:0;
  right:0;
  transform:translate(100%, 0%)
}

body.float-bar-fixed .menufloat.fbf-right>div {
  transform:translate(0%, -70%)
}

body.float-bar-fixed .menufloat.fbf-bottom {
  bottom:0;
  left:0;
  right:0;
  transform:translate(0%, 100%)
}

body.float-bar-fixed .menufloat.fbf-bottom>div {
  margin-top:-100%
}

body.float-bar-fixed .menufloat.fbf-left {
  bottom:0;
  top:0;
  left:0;
  transform:translate(-100%, 0%)
}

body.float-bar-fixed .menufloat.fbf-left>div {
  transform:translate(0%, -50%)
}

/* screen.prefixer.css 的方向性 keyframes 因 @keyframes 解析異常被瀏覽器吞掉，這裡補回 */
@keyframes floatshow_right {
  0% { opacity:0; transform:translate(100%, -50%) }
  100% { opacity:1; transform:translate(0%, -50%) }
}
@keyframes floathide_right {
  0% { opacity:1; transform:translate(0%, -50%) }
  100% { opacity:0; transform:translate(100%, -50%) }
}
@keyframes floatshow_top {
  0% { opacity:0; transform:translate(0, -100%) }
  100% { opacity:1; transform:translate(0, 0) }
}
@keyframes floathide_top {
  0% { opacity:1; transform:translate(0, 0) }
  100% { opacity:0; transform:translate(0, -100%) }
}
@keyframes floatshow_bottom {
  0% { opacity:0; transform:translate(0%, 100%) }
  100% { opacity:1; transform:translate(0%, 0%) }
}
@keyframes floathide_bottom {
  0% { opacity:1; transform:translate(0, 0) }
  100% { opacity:0; transform:translate(0%, 100%) }
}
@keyframes floatshow_left {
  0% { opacity:0; transform:translate(-100%, 0%) }
  100% { opacity:1; transform:translate(0, 0) }
}
@keyframes floathide_left {
  0% { opacity:1; transform:translate(0, 0) }
  100% { opacity:0; transform:translate(-100%, 0%) }
}

.menu__bottombox_mobile:before {
  background-color:#3D9738;
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  opacity:0.9;
  z-index:-1
}

.menu__bottombox_mobile>div>a:hover,.menu__bottombox_mobile>div>a.is-active {
  background-color:#D1AA6D
}

.side__link_box>a:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  transform:scale(1);
  bottom:0;
  border-radius:50%;
  z-index:0;
  opacity:0;
  transition:all 0.3s cubic-bezier(0.17, 0.7, 0.47, 0.96)
}

.side__link_box>a:after {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:-1;
}

.side__link_box>a:hover:before {
  transform:scale(0.95);
  opacity:1
}

.side__link_box .side__link_gotop:after {
  background:rgba(130,87,35,0.95);
}

.side__link_box .side__link_all .side__link_imgbox>div:after {
  content:"";
  display:block;
  padding-bottom:100%
}

footer .footer__maplinklist > div:not(.footer__maplink_infolist) {
  flex: 1;
}

footer .footer__right {
  flex: 0 0 340px; 
  max-width: 340px;
  width: 340px;
}
@media (max-width: 1024px){
  footer .footer__right {
    max-width: 100%;
  }
  footer .footer__info .footer__infolist li span.words > span:last-child br{
    display: none;
  }
  footer .footer__container .footer__center .footer__maplinklist{
    gap: 0;
  }
}