@charset "UTF-8";
.stores-list .stores-list-group .item .list li .link:hover .title, .stores-list .stores-list-group .item .list li .title, .products-list .block-links-style-4 .item:hover .btn, .products-list .block-links-style-4 .item:hover .info, .products-list .block-links-style-4 .item .btn, .products-list .block-links-style-4 .item .info, .products-list .block-links-style-4 .item .image::before, .search-wrapper .tags-group .btn:hover, .search-wrapper .tags-group .btn, .btn-gotop.style-2::before {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.dropdown-style-1 .item-dropdown {
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------------------*/
/*------------------------------- 全站通用樣式 -------------------------------*/
/*----- 基礎設定 -----*/
body {
  font-size: 18px;
  background: #F5F5F3;
  color: #1C1C1C;
  font-family: Arial, Microsoft JhengHei, sans-serif;
}
@media (max-width: 1199px) {
  body {
    font-size: 16px;
  }
}

a, a:hover {
  color: #1C1C1C;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

:focus {
  outline: none;
}

ul.list {
  padding-left: 0;
}
ul.list li {
  list-style: none;
  padding-left: 0;
}

@media (min-width: 1921px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1540px;
    /* 兩邊預設 220px */
  }
}
@media (max-width: 1920px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: calc(63.54168vw + 60px);
  }
}
@media (max-width: 1440px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 86vw;
  }
}
@media (max-width: 768px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 100%;
  }
}
/*----- GoTop -----*/
.btn-gotop.style-1 {
  color: white;
  position: absolute;
  top: auto;
  bottom: 8rem;
  left: auto;
  right: 3rem;
  z-index: 4;
  animation: icon-scroll 0.8s infinite alternate;
  -moz-animation: icon-scroll 0.8s infinite alternate;
  -webkit-animation: icon-scroll 0.8s infinite alternate;
}
.btn-gotop.style-1:hover {
  opacity: 0.8;
}
.btn-gotop.style-1::before {
  content: "";
  width: 37px;
  height: 1px;
  background: white;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.btn-gotop.style-1.left {
  padding-left: 65px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.btn-gotop.style-1.left::before {
  left: 12px;
}
.btn-gotop.style-1.right {
  padding-right: 65px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.btn-gotop.style-1.right::before {
  right: 12px;
}
.btn-gotop.style-1:hover {
  color: white;
}
.btn-gotop.style-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn-gotop.style-2::before {
  content: "\f106";
  font-family: fontello;
  width: 45px;
  height: 45px;
  background: #777777;
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 15px;
}

@-webkit-keyframes icon-scroll {
  0% {
    -webkit-transform: translateY(0) rotate(90deg);
            transform: translateY(0) rotate(90deg);
  }
  100% {
    -webkit-transform: translateY(-15px) rotate(90deg);
            transform: translateY(-15px) rotate(90deg);
  }
}

@keyframes icon-scroll {
  0% {
    -webkit-transform: translateY(0) rotate(90deg);
            transform: translateY(0) rotate(90deg);
  }
  100% {
    -webkit-transform: translateY(-15px) rotate(90deg);
            transform: translateY(-15px) rotate(90deg);
  }
}
/*----- 社群分享 or 連結 -----*/
.social-medias {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 0;
  padding-left: 0;
}
.social-medias li {
  list-style: none;
  padding-left: 0;
  padding-left: 5px;
  padding-right: 5px;
}
.social-medias .item {
  font-size: 1rem;
}
.social-medias.circle .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #EB2627;
  color: white;
  font-size: 80%;
}
.social-medias.circle .item img {
  width: 80%;
}
.social-medias.circle .item:hover {
  opacity: 0.8;
}
.social-medias.circle.light .item {
  background: white;
  color: #EB2627;
}
.social-medias.circle.dark .item a {
  background: #777777;
  color: #EB2627;
}
.social-medias.circle.dark .item a:hover {
  background: #EB2627;
  color: white;
}

/*----- 內頁分類連結樣式 -----*/
.nav_sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  margin-left: -1.822916666vw;
  margin-right: -1.822916666vw;
}
.nav_sub .item {
  list-style: none;
  padding: 0;
  padding-left: 1.822916666vw;
  padding-right: 1.822916666vw;
}
.nav_sub .item a {
  color: #bababa;
}
.nav_sub .item:hover a {
  color: #EB2627;
}
.nav_sub .item.active a {
  color: #EB2627;
}

/*----- 搜尋列樣式 -----*/
.searchbar-wrapper {
  position: relative;
}
.searchbar-wrapper .searchbar {
  padding: 10px clamp(20px, 2.60416vw, 50px) 10px clamp(15px, 1.5625vw, 30px);
  border: 1px solid #bababa;
  color: #bababa;
  border-radius: 100px;
  min-width: 20vw;
}
.searchbar-wrapper .search {
  position: absolute;
  top: 50%;
  right: clamp(15px, 1.0416vw, 20px);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
  background: transparent;
}
.searchbar-wrapper .search .material-symbols-outlined {
  font-size: 20px;
  color: #bababa;
}
.searchbar-wrapper .search:hover .material-symbols-outlined {
  color: #EB2627;
}

/*----- Google icons -----*/
.material-symbols-outlined {
  font-size: inherit;
}

/*----- logo 大小 -----*/
/* 電腦版 Header */
.desktop .logo img {
  width: clamp(180px, 14.583vw, 280px);
  height: clamp(37px, 2.34375vw, 58px);
}

/* 電腦版 Footer */
.footer .logo img {
  width: clamp(180px, 14.583vw, 280px);
  height: clamp(37px, 2.34375vw, 58px);
}
@media (max-width: 767px) {
  .footer .logo img {
    width: 220px;
    height: 46px;
  }
}

/*--------------------------------------------------------------------------*/
/*------------------------------ Header 樣式 --------------------------------*/
/*----- 語系樣式 -----*/
.lan .dropdown-menu {
  padding: 10px 0;
}
.lan .dropdown-item button {
  padding: 5px 15px;
  font-size: 14px;
}
.lan .dropdown-item button:hover {
  color: #EB2627;
}

/*----- 下拉樣式 -----*/
.dropdown-style-1 .nav-item.dropdown {
  position: revert !important;
}
.dropdown-style-1 .item-dropdown {
  width: 60vw;
  position: absolute;
  right: clamp(35px, 3.64583vw, 70px);
  left: auto;
  top: calc(5.468743vw + 2px);
  background: white;
  padding: 2.60416vw;
  z-index: 5;
}
.dropdown-style-1 .item-dropdown .img-hover-larger {
  background: #ebebeb;
}
.dropdown-style-1 .item-dropdown .title-main {
  margin-bottom: 20px;
  font-weight: 700;
  color: #EB2627;
}
.dropdown-style-1 .item-dropdown .title {
  text-align: center;
  margin-top: 15px;
  color: #1C1C1C;
}
.dropdown-style-2 .nav-item.dropdown {
  position: revert !important;
}
.dropdown-style-2 .item-dropdown {
  padding: clamp(35px, 3.64583vw, 70px);
  background: #EB2627;
  color: white;
  left: 0;
  width: 100%;
}
.dropdown-style-3 .nav-item.dropdown {
  position: revert !important;
}
.dropdown-style-3 .nav-item.dropdown:hover > a::before {
  display: none !important;
}
.dropdown-style-3 .item-dropdown {
  left: 50% !important;
  -webkit-transform: translate(-50%, 0) !important;
          transform: translate(-50%, 0) !important;
}
@media (min-width: 1921px) {
  .dropdown-style-3 .item-dropdown {
    width: 1540px;
  }
}
@media (max-width: 1920px) {
  .dropdown-style-3 .item-dropdown {
    width: calc(63.54168vw + 60px);
  }
}
@media (max-width: 1440px) {
  .dropdown-style-3 .item-dropdown {
    width: 86vw;
  }
}
@media (max-width: 768px) {
  .dropdown-style-3 .item-dropdown {
    width: 100%;
  }
}
.dropdown-style-3 .item-dropdown .wrapper {
  background: white;
  padding: clamp(20px, 2.60416vw, 50px) clamp(35px, 3.64583vw, 70px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.dropdown-style-3 .item-dropdown .title-main {
  font-weight: 700;
  color: #EB2627;
  margin-bottom: 20px;
}
.dropdown-style-3 .item-dropdown .list {
  margin-bottom: 0;
  border-left: 1px solid #bababa;
  padding-left: clamp(20px, 1.5625vw, 30px);
  margin-left: clamp(20px, 1.5625vw, 30px);
  height: 100%;
}
.dropdown-style-3 .item-dropdown .list .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #777777;
  margin-bottom: clamp(15px, 1.0416vw, 20px);
  height: 100%;
}
.dropdown-style-3 .item-dropdown .list .material-symbols-outlined {
  color: #EB2627;
  margin-right: 5px;
}

/*----- Header 樣式 -----*/
.header {
  background: white;
}
.header-style-1 .lan {
  font-weight: 700;
  padding: clamp(15px, 1.0416vw, 20px) 0 clamp(20px, 1.822916vw, 35px);
  margin-left: 0;
}
.header-style-1 .lan .dropdown-toggle {
  background: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #707070;
}
.header-style-1 .lan .dropdown-toggle .material-symbols-outlined {
  margin-right: 5px;
}
.header-style-1 .lan .dropdown-toggle::after {
  display: none;
}
.header-style-1 .top-bar {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #EB2627;
  color: white;
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}
.header-style-1 .top-bar .icon {
  margin-right: 10px;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}
.header-style-1 .top-bar .icon img {
  width: clamp(15px, 1.0416vw, 20px);
  height: clamp(15px, 1.0416vw, 20px);
}
.header-style-1 .nav-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: clamp(20px, 1.822916vw, 35px);
}
.header-style-1 .nav {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: clamp(-20px, -1.0416vw, -10px);
  margin-right: clamp(-20px, -1.0416vw, -10px);
}
.header-style-1 .nav > .nav-item {
  padding-left: clamp(10px, 1.0416vw, 20px);
  padding-right: clamp(10px, 1.0416vw, 20px);
}
.header-style-1 .nav > .nav-item > a {
  padding: clamp(15px, 1.0416vw, 20px) 0 clamp(20px, 1.822916vw, 35px);
  font-weight: 700;
  color: #707070;
}
.header-style-1 .nav > .nav-item:hover a, .header-style-1 .nav > .nav-item.active a {
  color: #EB2627;
}
.header-style-1 .desktop {
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.header-style-1 .desktop .left, .header-style-1 .desktop .right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-style-1 .mobile .logo {
  padding: 15px 25px 15px;
}
.header-style-1 .mobile .logo a img {
  width: 220px;
  height: 46px;
}
/*--------------------------------------------------------------------------*/
/*-------------------------------- Footer ----------------------------------*/
.footer {
  background: white;
}
.footer .logo-wrapper .title {
  font-weight: 700;
  margin-top: clamp(20px, 1.5625vw, 30px);
  line-height: 1.35;
}
.footer .figure .list-style-1 li {
  margin-bottom: 10px;
  font-size: 1rem;
}
.footer .figure .list-style-1 li:last-child {
  margin-bottom: 0;
}
.footer .figure .list-style-1.disc li {
  list-style: disc;
  margin-left: 25px;
}
.footer .figure .list-style-2 li {
  margin-bottom: clamp(15px, 1.5625vw, 30px);
}
.footer .figure .list-style-2 li a {
  font-weight: 700;
  display: block;
  color: white;
}
.footer .figure .list-style-2 li a:hover {
  color: #EB2627;
}
.footer .figure .list-style-2 li:last-child {
  margin-bottom: 0;
}
.footer.dark {
  background: #1C1C1C;
  color: rgba(255, 255, 255, 0.8);
}
.footer.dark a {
  color: rgba(255, 255, 255, 0.8);
}
.footer.dark a:hover {
  color: #EB2627;
}
.footer-style-2 {
  padding: clamp(30px, 5.2083vw, 100px) 0;
}
.footer-style-2 .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -2vw;
  margin-right: -2vw;
}
.footer-style-2 [class^=company-info-style-], .footer-style-2 [class*=company-info-style-] {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 991px) {
  .footer-style-2 [class^=company-info-style-], .footer-style-2 [class*=company-info-style-] {
    text-align: center;
  }
}
.footer-style-2 .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: clamp(20px, 1.822916vw, 35px);
  width: 100%;
}
.footer-style-2 .figure {
  padding-left: 2vw;
  padding-right: 2vw;
  max-width: 25%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}
.footer-style-2 .figure .title {
  font-size: clamp(18px, 1.0416vw, 20px);
  margin-bottom: clamp(15px, 1.5625vw, 30px);
}
.footer-style-2 .figure .title a {
  font-weight: 700;
  color: white;
}
.footer-style-2 .figure .title a:hover {
  color: #EB2627;
}
@media (max-width: 991px) {
  .footer-style-2 .figure.logo-wrapper {
    text-align: center;
  }
  .footer-style-2 .figure.links {
    display: none;
  }
}
.footer-style-2 .list-style-2 {
  font-size: clamp(18px, 1.0416vw, 20px);
}
.footer-style-2 .social-medias {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 15px;
}
.footer-style-2 .social-medias .item {
  width: clamp(20px, 1.822916vw, 35px);
  height: clamp(20px, 1.822916vw, 35px);
  font-size: 100%;
}
.footer-style-2 .btn-gotop {
  position: fixed;
  right: clamp(30px, 2.60416vw, 50px);
  bottom: clamp(30px, 2.60416vw, 50px);
}
.footer-style-2 .bottom {
  padding-top: clamp(15px, 1.0416vw, 20px);
  margin-top: clamp(35px, 2.60416vw, 50px);
  font-size: 0.875rem;
  border-top: 1px solid #bababa;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 991px) {
  .footer-style-2 .bottom {
    margin-top: 0;
  }
}
.footer-style-2 .copyright {
  text-align: center;
}
.footer-style-2 .copyright a {
  opacity: 0.8;
}
.footer-style-2 .copyright a:hover {
  opacity: 1;
}
.footer-style-2.dark {
  background: #1C1C1C;
}
.footer-style-2.dark .company .title {
  color: #f5f5f5;
}

/*--------------------------------------------------------------------------*/
/*-------------------------------- Index -----------------------------------*/
.search-wrapper {
  background: url(../images/bg-search.jpg) center center no-repeat;
  background-attachment: fixed;
  padding: clamp(65px, 6.77083vw, 130px) 0;
  position: relative;
  color: white;
}
@media (max-width: 767px) {
  .search-wrapper {
    background-attachment: unset;
    background-size: cover;
  }
}
.search-wrapper::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(41, 41, 41, 0.4);
  z-index: 0;
}
.search-wrapper > * {
  position: relative;
  z-index: 2;
}
.search-wrapper .title {
  letter-spacing: 10px;
  text-indent: 10px;
}
@media (max-width: 550px) {
  .search-wrapper .title {
    letter-spacing: 0;
    text-indent: 0px;
  }
}
.search-wrapper .search-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.search-wrapper .search-bar .input {
  width: clamp(100% - 40px, 100% - 3.385416vw, 100% - 65px);
  height: clamp(50px, 3.385416vw, 65px);
  padding: 10px 15px;
  border: none;
}
.search-wrapper .search-bar .btn {
  width: clamp(50px, 3.385416vw, 65px);
  height: clamp(50px, 3.385416vw, 65px);
  background: #EB2627;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 200%;
}
.search-wrapper .tags-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 0;
}
.search-wrapper .tags-group li {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 5px;
}
.search-wrapper .tags-group .btn {
  border-radius: 30px;
  padding: 5px 25px;
  border: 1px solid white;
  color: white;
  text-align: center;
  background: transparent;
  line-height: 1;
}
.search-wrapper .tags-group .btn:hover {
  border-color: #EB2627;
  background: #EB2627;
}

.block-links {
  padding: 0;
}

.products-list .block-links-style-4 .item {
  border-radius: 10px;
}
.products-list .block-links-style-4 .item .image {
  position: relative;
}
.products-list .block-links-style-4 .item .image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1C1C1C;
  opacity: 0.4;
  z-index: 1;
  opacity: 0.45;
}
.products-list .block-links-style-4 .item .info {
  height: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 50%;
  top: 86%;
  -webkit-transform: translate(-50%, -86%);
          transform: translate(-50%, -86%);
  min-height: auto;
  z-index: 2;
}
.products-list .block-links-style-4 .item .info::before {
  display: none;
}
.products-list .block-links-style-4 .item .title {
  font-size: clamp(24px, 1.875vw, 36px);
  line-height: 1.2;
}
.products-list .block-links-style-4 .item .btn {
  opacity: 0;
  width: 150px;
  height: 0px;
  background: #EB2627;
  color: white;
  text-align: center;
  padding: 1px 5px;
  border-radius: 35px;
  font-size: clamp(18px, 1.14583vw, 22px);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.products-list .block-links-style-4 .item:hover .image::before {
  background-color: #000;
  opacity: 0.3;
}
.products-list .block-links-style-4 .item:hover .info {
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.products-list .block-links-style-4 .item:hover .btn {
  opacity: 1;
  height: 50px;
}
@media (max-width: 767px) {
  .products-list {
    display: none;
  }
}

.news-list .block-links-style-1 {
  position: relative;
}
.news-list .block-links-style-1 .des {
  margin-top: 0;
  margin-bottom: 10px;
}
.news-list .block-links-style-1 .title {
  font-size: clamp(22px, 1.35416vw, 26px);
  -webkit-line-clamp: 3;
}
.news-list .block-links-style-1 .item {
  border-radius: 10px;
}
.news-list .block-links-style-1 .item .info {
  padding: clamp(30px, 3.125vw, 60px) clamp(15px, 1.0416vw, 20px);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%);
}
.news-list .block-links-style-1 .owl-nav {
  width: auto;
  left: auto;
  z-index: 1;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
.news-list .block-links-style-1 .owl-nav .owl-prev, .news-list .block-links-style-1 .owl-nav .owl-next {
  width: clamp(35px, 2.34375vw, 45px);
  height: clamp(35px, 2.34375vw, 45px);
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100%;
  position: absolute;
  z-index: 2;
}
.news-list .block-links-style-1 .owl-nav .owl-prev {
  left: clamp(15px, 1.0416vw, 20px);
}
.news-list .block-links-style-1 .owl-nav .owl-next {
  right: clamp(15px, 1.0416vw, 20px);
}

.stores-list {
  background: url("../images/bg-stores.jpg") center center no-repeat;
  background-attachment: fixed;
  position: relative;
  color: white;
}
.stores-list::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #212121;
  opacity: 0.7;
  z-index: 0;
}
.stores-list > * {
  position: relative;
  z-index: 1;
}
.stores-list .stores-list-group .item {
  padding: clamp(20px, 2.083vw, 40px) clamp(10px, 1.302083vw, 25px);
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.stores-list .stores-list-group .item .list {
  margin-top: clamp(15px, 1.5625vw, 30px);
  margin-bottom: clamp(15px, 1.0416vw, 20px);
  width: 100%;
}
.stores-list .stores-list-group .item .list li {
  list-style: none;
  margin-bottom: 15px;
}
.stores-list .stores-list-group .item .list li .location {
  width: 95px;
  height: 38px;
  border-radius: 30px;
  border: 1px solid white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.stores-list .stores-list-group .item .list li .title {
  width: calc(100% - 95px);
  padding-left: 15px;
  margin-top: 10px;
}
.stores-list .stores-list-group .item .list li .link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  color: white;
}
.stores-list .stores-list-group .item .list li .link:hover .title {
  padding-left: 18px;
}
.stores-list .stores-list-group .item .btn {
  width: 100%;
  background: white;
  -webkit-box-shadow: 0 3px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 22px rgba(0, 0, 0, 0.16);
  height: clamp(50px, 3.64583vw, 70px);
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  border-radius: 10px;
}
.stores-list .stores-list-group .item .btn:hover {
  -webkit-box-shadow: 0 3px 22px rgba(0, 0, 0, 0.5);
          box-shadow: 0 3px 22px rgba(0, 0, 0, 0.5);
}
.stores-list .stores-list-group .col:nth-child(1n) .item {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(160, 23, 24)), to(rgba(160, 23, 24, 0.65)));
  background: linear-gradient(to bottom, rgb(160, 23, 24) 0%, rgba(160, 23, 24, 0.65) 100%);
}
.stores-list .stores-list-group .col:nth-child(1n) .item .btn {
  color: rgb(160, 23, 24);
}
.stores-list .stores-list-group .col:nth-child(2n) .item {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(196, 30, 31)), to(rgba(235, 38, 39, 0.65)));
  background: linear-gradient(to bottom, rgb(235, 38, 39) 0%, rgba(235, 38, 39, 0.65) 100%);
}
.stores-list .stores-list-group .col:nth-child(2n) .item .btn {
  color: rgb(196, 30, 31);
}
.stores-list .stores-list-group .col:nth-child(3n) .item {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(235, 38, 39)), to(rgba(235, 38, 39, 0.65)));
  background: linear-gradient(to bottom, rgb(235, 38, 39) 0%, rgba(235, 38, 39, 0.65) 100%);
}
.stores-list .stores-list-group .col:nth-child(3n) .item .btn {
  color: rgb(235, 38, 39);
}
@media (max-width: 767px) {
  .stores-list {
    background-attachment: unset;
    background-size: cover;
  }
}

.video-list .block-links-style-1 .item {
  border-radius: 10px;
}
.video-list .block-links-style-1 .item .image {
  position: relative;
}
.video-list .block-links-style-1 .item .image::before {
  content: "";
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.video-list .block-links-style-1 .item .info {
  padding: clamp(30px, 3.125vw, 60px) clamp(15px, 1.0416vw, 20px) 0;
  background: transparent;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: auto;
  z-index: 2;
}
.video-list .block-links-style-1 .item .info .icon {
  width: clamp(40px, 3.64583vw, 70px);
  height: clamp(40px, 3.64583vw, 70px);
}
.video-list .block-links-style-1 .item .info .text {
  width: clamp(100% - 70px, 100% - 3.64583vw, 100% - 40px);
  padding-left: clamp(15px, 1.0416vw, 20px);
}
.video-list .block-links-style-1 .item .info .text .des {
  margin-top: 5px;
}
.video-list .block-links-style-1 .owl-nav {
  width: auto;
  left: auto;
  z-index: 1;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
.video-list .block-links-style-1 .owl-nav .owl-prev, .video-list .block-links-style-1 .owl-nav .owl-next {
  width: clamp(35px, 2.34375vw, 45px);
  height: clamp(35px, 2.34375vw, 45px);
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100%;
  position: absolute;
  z-index: 2;
}
.video-list .block-links-style-1 .owl-nav .owl-prev {
  left: clamp(15px, 1.0416vw, 20px);
}
.video-list .block-links-style-1 .owl-nav .owl-next {
  right: clamp(15px, 1.0416vw, 20px);
}

.other-list-group .item .title {
  padding-left: clamp(20px, 1.5625vw, 30px);
  position: relative;
  font-weight: 700;
}
.other-list-group .item .title::before {
  content: "";
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #EB2627;
}
.other-list-group .item .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: clamp(30px, 0.5625vw + 10px, 40px);
}
.other-list-group .item .list li {
  padding-right: clamp(10px, 1.0416vw, 20px);
  margin-right: clamp(10px, 1.0416vw, 20px);
  margin-bottom: 15px;
  position: relative;
}
.other-list-group .item .list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5%;
  right: 0;
  width: 1px;
  height: 90%;
  background: #333333;
  opacity: 0.3;
}
.other-list-group .item .list li .link {
  display: block;
  color: #555555;
}
.other-list-group .item .list li .link:hover {
  color: #EB2627;
}
.other-list-group .item .list-main li {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.other-list-group .item .list-main li .title-sec {
  width: 170px;
  font-weight: 700;
}
.other-list-group .item .list-main li .list {
  padding-left: 0;
  width: calc(100% - 170px);
}

@media (max-width: 767px) {
  .other-list {
    display: none;
  }
}

.cta-style-2 {
  background-attachment: fixed;
}
@media (max-width: 767px) {
  .cta-style-2 {
    background-attachment: unset;
    background-size: cover;
  }
}
.cta-style-2 .title {
  font-size: clamp(40px, 3.3vw, 64px);
}
.cta-style-2 .btn {
  width: clamp(100px, 31.25vw, 600px);
  height: clamp(40px, 5.2083vw, 100px);
  background: #EB2627;
  color: white;
  text-align: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: clamp(18px, 1.5625vw, 30px);
  border-radius: clamp(10px, 1.302083vw, 25px);
  margin-top: clamp(30px, 3.125vw, 60px);
}

/*--------------------------------------------------------------------------*/
/*----------------------------- 尋找品牌 Brands -----------------------------*/
.brands-inner {
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
}

.letter-space {
  letter-spacing: clamp(4px, 0.520833vw, 10px);
  text-indent: clamp(4px, 0.520833vw, 10px);
}
@media (max-width: 550px) {
  .letter-space {
    letter-spacing: 0;
    text-indent: 0;
  }
}

.page-banner-brands {
  padding: 0;
}
.page-banner-brands .image-wrapper {
  min-height: clamp(220px, 20.833vw, 400px);
}
.page-banner-brands .image-wrapper::after {
  background: rgba(0, 0, 0, 0.4);
}
/* 底圖偏亮、白色標題壓上去會糊的頁面加這個 class（RS Audio、Esatto）。
   沒有直接把上面那條調深，是因為多數 banner 本來就很暗
   （bg-brands-logos 中央亮度 30、bg-brand-i 43），
   一律加深會讓那些圖變成一片全黑。 */
.page-banner-brands.mask-strong .image-wrapper::after {
  background: rgba(0, 0, 0, 0.62);
}
.page-banner-brands .page-title {
  max-width: 100%;
}
.page-banner-brands .page-title .title {
  font-size: clamp(30px, 3.33vw, 64px);
  margin-bottom: 0;
}
.page-banner-brands .breadcrumb {
  margin: clamp(10px, 1.0416vw, 20px) 0 0;
}
.page-banner-brands .breadcrumb ol {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page-banner-brands .breadcrumb ol li {
  margin-bottom: 0;
}
.page-banner-brands .breadcrumb ol li:not(:last-child) {
  margin-right: 20px;
}
.page-banner-brands .breadcrumb ol li:not(:last-child)::after {
  content: "/";
  right: -13px;
}
.page-banner-brands .breadcrumb .item {
  font-size: clamp(14px, 0.9375vw, 18px);
}

.brands-filter-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.brands-filter-bar .col {
  padding-left: 8px;
  padding-right: 8px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.brands-filter-bar .col.submit {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 clamp(120px, 9.583vw, 192px);
          flex: 0 0 clamp(120px, 9.583vw, 192px);
  max-width: clamp(120px, 9.583vw, 192px);
}
.brands-filter-bar .select, .brands-filter-bar .btn {
  width: 100%;
  height: clamp(50px, 3.958vw, 76px);
  border-radius: 8px;
  font-size: clamp(16px, 0.9375vw, 18px);
}
.brands-filter-bar .select {
  background: white;
  border: 1px solid #bababa;
  color: #1C1C1C;
  padding: 0 clamp(15px, 1.5625vw, 30px);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.brands-filter-bar .select:hover, .brands-filter-bar .select:focus {
  border-color: #EB2627;
  transition: all 0.25s ease-in-out;
}
.brands-filter-bar .btn {
  background: #EB2627;
  color: white;
  text-align: center;
  transition: all 0.25s ease-in-out;
}
.brands-filter-bar .btn:hover {
  background: #C41E1F;
  transition: all 0.25s ease-in-out;
}
@media (max-width: 767px) {
  .brands-filter-bar .col, .brands-filter-bar .col.submit {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 10px;
  }
}

.brands-list-group .col {
  margin-bottom: clamp(25px, 2.34375vw, 45px);
}
@media (max-width: 576px) {
  .brands-list-group.group.item4 .col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
}
.brands-list-group .item {
  display: block;
}
.brands-list-group .item .image {
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 0;
  transition: all 0.25s ease-in-out;
}
.brands-list-group .item .image img {
  width: 100%;
  display: block;
  transition: all 0.25s ease-in-out;
}
.brands-list-group .item .info {
  text-align: center;
  margin-top: clamp(10px, 1.0416vw, 20px);
}
.brands-list-group .item .flag {
  line-height: 1;
  margin-bottom: clamp(5px, 0.520833vw, 10px);
}
.brands-list-group .item .flag img {
  width: clamp(22px, 1.458vw, 28px);
  height: auto;
}
.brands-list-group .item .title {
  margin-bottom: 0;
  line-height: 1.35;
  transition: all 0.25s ease-in-out;
}
.brands-list-group .item:hover .image {
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease-in-out;
}
.brands-list-group .item:hover .image img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  transition: all 0.25s ease-in-out;
}
.brands-list-group .item:hover .title {
  color: #EB2627;
  transition: all 0.25s ease-in-out;
}

/*--------------------------------------------------------------------------*/
/*--------------------------- 品牌內頁 Brand Info ---------------------------*/
.brand-intro-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.brand-intro .side {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 25%;
}
.brand-intro .content {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 58%;
          flex: 0 0 58%;
  max-width: 58%;
}
.brand-intro .content .des {
  line-height: 1.9;
  margin-bottom: 0;
}
.brand-intro .content .title {
  margin-top: clamp(20px, 1.822916vw, 35px);
  margin-bottom: clamp(10px, 1.0416vw, 20px);
  line-height: 1.4;
}
.brand-intro .logo {
  margin-bottom: 0;
}
.brand-intro .logo img {
  width: clamp(180px, 13.02vw, 250px);
  height: auto;
}
.brand-intro .social-medias.circle .item {
  width: clamp(40px, 2.604166vw, 50px);
  height: clamp(40px, 2.604166vw, 50px);
  font-size: clamp(18px, 1.14583vw, 22px);
}
.brand-intro .social-medias.circle .item.web {
  width: auto;
  min-width: clamp(65px, 4.270833vw, 82px);
  padding: 0 clamp(10px, 1.0416vw, 20px);
  border-radius: 100px;
  font-size: clamp(15px, 0.9375vw, 18px);
}
@media (max-width: 767px) {
  .brand-intro .side, .brand-intro .content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  .brand-intro .content {
    margin-top: 25px;
  }
  .brand-intro .social-medias {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.brand-gallery .owl-carousel .item .image {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0;
}
.brand-gallery .owl-carousel .item .image img {
  width: 100%;
  display: block;
}
.brand-gallery .owl-carousel .item .info {
  text-align: center;
  margin-top: clamp(15px, 1.5625vw, 30px);
}
.brand-gallery .owl-carousel .item .info .title {
  margin-bottom: 0;
  line-height: 1.4;
}
.brand-gallery .owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  width: 100%;
  z-index: 1;
}
.brand-gallery .owl-carousel .owl-nav .owl-prev, .brand-gallery .owl-carousel .owl-nav .owl-next {
  width: clamp(35px, 2.34375vw, 45px);
  height: clamp(35px, 2.34375vw, 45px);
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100%;
  position: absolute;
  z-index: 2;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.brand-gallery .owl-carousel .owl-nav .owl-prev {
  left: clamp(15px, 1.0416vw, 20px);
}
.brand-gallery .owl-carousel .owl-nav .owl-next {
  right: clamp(15px, 1.0416vw, 20px);
}

.brand-visual .image {
  margin-bottom: 0;
}
.brand-visual .image img {
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .brand-products {
    display: block;
  }
}

.partners-wall .partners-group .item, .guide-wrapper .topic-tags .btn, .cases-list .cases-group .item .info .title, .cases-list .cases-group .item .image img, .cases-list .cases-group .item, .events-list-group .action .btn, .events-list-group .item, .plans-list-group .item .btn, .plans-list-group .item, .area-bar .area-tabs .btn, .hero-banner .owl-carousel .info .btn {
  transition: all 0.25s ease-in-out;
}

/*----------------------- 首頁改版區塊 A1 / H1 - H10 ------------------------*/
/*----- A1 公告條：多則輪播 + 關閉 -----*/
.top-bar {
  position: relative;
}
.top-bar .notice {
  max-width: 60vw;
}
.top-bar .notice .item {
  color: white;
  display: block;
  text-align: center;
}
.top-bar .notice .item:hover {
  opacity: 0.85;
}
.top-bar .notice .owl-stage-outer {
  overflow: hidden;
}
.top-bar .btn-close {
  position: absolute;
  right: clamp(15px, 1.5625vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: white;
  font-size: 20px;
  line-height: 1;
  opacity: 0.7;
}
.top-bar .btn-close:hover {
  opacity: 1;
}
.top-bar.is-hidden {
  display: none;
}

/*----- H1 首屏：需求引導列（深色底上的白框） -----*/
.demand-bar .select, .demand-bar .btn {
  height: clamp(50px, 3.385416vw, 65px);
  border-radius: 0;
}
.demand-bar .col.submit {
  flex: 0 0 clamp(110px, 9.375vw, 180px);
  max-width: clamp(110px, 9.375vw, 180px);
}
.demand-bar .select {
  border-color: transparent;
}
.demand-bar .btn {
  font-weight: 700;
}

/*----- H2 改裝目的：借用產品卡樣式，但手機要留著 -----*/
@media (max-width: 767px) {
  .purpose-list {
    display: block;
  }
}

/*----- H3 付費品牌主視覺 -----*/
.hero-banner .owl-carousel .item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: clamp(320px, 26.04166vw, 500px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}
.hero-banner .owl-carousel .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0) 100%);
}
.hero-banner .owl-carousel .label {
  position: absolute;
  top: clamp(15px, 1.0416vw, 20px);
  right: clamp(15px, 1.0416vw, 20px);
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  color: #1C1C1C;
  font-size: 14px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 3px;
}
.hero-banner .owl-carousel .info {
  position: relative;
  z-index: 2;
  color: white;
  padding: clamp(25px, 3.125vw, 60px);
  max-width: 60%;
}
.hero-banner .owl-carousel .info .brand {
  color: white;
  opacity: 0.85;
  margin-bottom: 10px;
}
.hero-banner .owl-carousel .info .title {
  color: white;
  margin-bottom: 10px;
  line-height: 1.25;
}
.hero-banner .owl-carousel .info .des {
  margin-bottom: clamp(15px, 1.5625vw, 30px);
  opacity: 0.9;
}
.hero-banner .owl-carousel .info .btn {
  background: #EB2627;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(45px, 3.125vw, 60px);
  padding: 0 clamp(25px, 2.083vw, 40px);
  border-radius: 5px;
  font-size: clamp(16px, 1.0416vw, 20px);
}
.hero-banner .owl-carousel .info .btn:hover {
  background: #C41E1F;
  color: white;
}
@media (max-width: 767px) {
  .hero-banner .owl-carousel .info {
    max-width: 100%;
  }
}
.hero-banner .owl-carousel .owl-dots {
  position: absolute;
  bottom: clamp(15px, 1.0416vw, 20px);
  right: clamp(20px, 2.083vw, 40px);
  display: flex;
  z-index: 3;
}
.hero-banner .owl-carousel .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.45);
  margin-left: 8px;
}
.hero-banner .owl-carousel .owl-dots .owl-dot.active {
  background: white;
}

/*----- H4 附近授權店：地區切換與授權標記 -----*/
.area-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.area-bar .btn.locate {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 30px;
  background: white;
  color: #1C1C1C;
  font-size: clamp(16px, 0.9375vw, 18px);
}
.area-bar .btn.locate .material-symbols-outlined {
  font-size: 20px;
  margin-right: 6px;
  color: #EB2627;
}
.area-bar .btn.locate:hover {
  background: #EB2627;
  color: white;
}
.area-bar .btn.locate:hover .material-symbols-outlined {
  color: white;
}
.area-bar .area-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  gap: 5px;
}
.area-bar .area-tabs .btn {
  height: 44px;
  padding: 0 clamp(15px, 1.302083vw, 25px);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: white;
}
.area-bar .area-tabs .btn:hover, .area-bar .area-tabs .btn.active {
  background: white;
  color: #1C1C1C;
  border-color: white;
}

.stores-list .stores-list-group .item .list li .title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.stores-list .stores-list-group .item .list li .badge {
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  color: #1C1C1C;
  font-weight: 700;
}
.stores-list .stores-list-group .item .list li .distance {
  font-size: 14px;
  opacity: 0.8;
}

/*----- H5 精選方案 -----*/
.plans-list-group .item {
  position: relative;
  height: 100%;
  background: white;
  border-radius: 10px;
  padding: clamp(25px, 2.60416vw, 50px) clamp(20px, 2.083vw, 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}
.plans-list-group .item .price {
  display: inline-flex;
  align-self: flex-start;
  background: #f5f5f5;
  color: #777777;
  padding: 4px 14px;
  border-radius: 30px;
  margin-bottom: 15px;
}
.plans-list-group .item .title {
  margin-bottom: 10px;
}
.plans-list-group .item .des {
  color: #777777;
  line-height: 1.8;
  margin-bottom: clamp(15px, 1.5625vw, 25px);
}
.plans-list-group .item .spec {
  margin-bottom: clamp(20px, 2.083vw, 35px);
}
.plans-list-group .item .spec li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.plans-list-group .item .spec li::before {
  content: "\e812";
  font-family: fontello;
  position: absolute;
  left: 0;
  top: 0;
  color: #EB2627;
  font-size: 14px;
}
.plans-list-group .item .spec li:last-child {
  margin-bottom: 0;
}
.plans-list-group .item .btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(50px, 3.385416vw, 65px);
  border-radius: 5px;
  border: 1px solid #EB2627;
  color: #EB2627;
  font-size: clamp(16px, 1.0416vw, 20px);
}
.plans-list-group .item .btn:hover {
  background: #EB2627;
  color: white;
}
.plans-list-group .item.recommend {
  border: 2px solid #EB2627;
}
.plans-list-group .item.recommend .btn {
  background: #EB2627;
  color: white;
}
.plans-list-group .item.recommend .btn:hover {
  background: #C41E1F;
}
.plans-list-group .item .tag {
  position: absolute;
  top: 0;
  right: clamp(20px, 2.083vw, 40px);
  transform: translateY(-50%);
  background: #EB2627;
  color: white;
  font-size: 14px;
  line-height: 1;
  padding: 7px 16px;
  border-radius: 30px;
}
.plans-list-group .item:hover {
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.12);
}
.plans-list-group .col {
  margin-bottom: 20px;
  display: flex;
}

/*----- H6 熱門品牌與產品：小標與手機顯示 -----*/
@media (max-width: 767px) {
  .home-products {
    display: block;
  }
}
.home-products .sub-title {
  padding-left: clamp(15px, 1.0416vw, 20px);
  border-left: 6px solid #EB2627;
  line-height: 1.3;
}

/*----- H7 賽事與活動 -----*/
.events-list-group {
  margin-bottom: 0;
}
.events-list-group li {
  margin-bottom: 15px;
}
.events-list-group li:last-child {
  margin-bottom: 0;
}
.events-list-group .item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: white;
  border-radius: 10px;
  padding: clamp(15px, 1.5625vw, 30px) clamp(20px, 2.083vw, 40px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}
.events-list-group .item:hover {
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.12);
}
.events-list-group .item:hover .action .btn {
  background: #EB2627;
  color: white;
}
.events-list-group .date {
  flex: 0 0 clamp(70px, 5.2083vw, 100px);
  max-width: clamp(70px, 5.2083vw, 100px);
  text-align: center;
  line-height: 1;
  border-right: 1px solid #ebebeb;
  padding-right: clamp(15px, 1.302083vw, 25px);
  margin-right: clamp(15px, 1.302083vw, 25px);
}
.events-list-group .date .month {
  display: block;
  font-size: clamp(14px, 0.9375vw, 18px);
  color: #777777;
  margin-bottom: 5px;
}
.events-list-group .date .day {
  display: block;
  font-size: clamp(28px, 2.34375vw, 45px);
  font-weight: 700;
  color: #EB2627;
}
.events-list-group .info {
  flex: 1;
}
.events-list-group .info .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: clamp(14px, 0.9375vw, 18px);
}
.events-list-group .info .status {
  line-height: 1;
  padding: 5px 12px;
  border-radius: 30px;
  font-size: 14px;
}
.events-list-group .info .status.open {
  background: rgba(235, 38, 39, 0.2);
  color: #EB2627;
}
.events-list-group .info .status.soon {
  background: #ebebeb;
  color: #777777;
}
.events-list-group .info .host {
  color: #777777;
}
.events-list-group .info .title {
  margin-bottom: 8px;
  line-height: 1.35;
}
.events-list-group .info .place {
  display: flex;
  align-items: center;
  color: #777777;
  font-size: clamp(15px, 0.9375vw, 18px);
}
.events-list-group .info .place .material-symbols-outlined {
  font-size: 20px;
  margin-right: 5px;
  color: #EB2627;
}
.events-list-group .action {
  margin-left: clamp(15px, 1.302083vw, 25px);
}
.events-list-group .action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(45px, 3.125vw, 60px);
  padding: 0 clamp(20px, 1.822916vw, 35px);
  border-radius: 5px;
  border: 1px solid #EB2627;
  color: #EB2627;
  font-size: clamp(16px, 1.0416vw, 20px);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .events-list-group .item {
    flex-direction: column;
    align-items: flex-start;
  }
  .events-list-group .date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid #ebebeb;
    padding: 0 0 12px;
    margin: 0 0 12px;
  }
  .events-list-group .date .month, .events-list-group .date .day {
    display: inline-block;
    margin-bottom: 0;
  }
  .events-list-group .action {
    margin: 15px 0 0;
    width: 100%;
  }
  .events-list-group .action .btn {
    width: 100%;
  }
}

/*----- H8 安裝案例 -----*/
.cases-list .cases-group .item {
  display: block;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}
.cases-list .cases-group .item .image {
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}
.cases-list .cases-group .item .image img {
  width: 100%;
  display: block;
}
.cases-list .cases-group .item .image .car {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 14px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 3px;
}
.cases-list .cases-group .item .info {
  padding: clamp(15px, 1.302083vw, 25px);
}
.cases-list .cases-group .item .info .title {
  margin-bottom: 12px;
  line-height: 1.4;
}
.cases-list .cases-group .item .spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cases-list .cases-group .item .spec li {
  font-size: 14px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 3px;
  background: #f5f5f5;
  color: #777777;
}
.cases-list .cases-group .item .store {
  display: flex;
  align-items: center;
  color: #777777;
  font-size: clamp(15px, 0.9375vw, 18px);
}
.cases-list .cases-group .item .store .material-symbols-outlined {
  font-size: 20px;
  margin-right: 5px;
  color: #EB2627;
}
.cases-list .cases-group .item:hover {
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.12);
}
.cases-list .cases-group .item:hover .image img {
  transform: scale(1.05);
}
.cases-list .cases-group .item:hover .info .title {
  color: #EB2627;
}
.cases-list .cases-group .owl-nav {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  z-index: 1;
}
.cases-list .cases-group .owl-nav .owl-prev, .cases-list .cases-group .owl-nav .owl-next {
  width: clamp(35px, 2.34375vw, 45px);
  height: clamp(35px, 2.34375vw, 45px);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  position: absolute;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.cases-list .cases-group .owl-nav .owl-prev {
  left: clamp(15px, 1.0416vw, 20px);
}
.cases-list .cases-group .owl-nav .owl-next {
  right: clamp(15px, 1.0416vw, 20px);
}

/*----- H9 知識專題與新手指南 -----*/
.guide-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.guide-wrapper .guide {
  flex: 0 0 30%;
  max-width: 30%;
  background: #1C1C1C;
  color: white;
  border-radius: 10px;
  padding: clamp(25px, 2.60416vw, 50px) clamp(20px, 2.083vw, 40px);
}
.guide-wrapper .guide .label {
  color: #EB2627;
  margin-bottom: 12px;
}
.guide-wrapper .guide .title {
  color: white;
  line-height: 1.35;
  margin-bottom: clamp(20px, 1.822916vw, 35px);
}
.guide-wrapper .guide .steps {
  counter-reset: step;
  padding-left: 0;
  margin-bottom: 0;
}
.guide-wrapper .guide .steps li {
  counter-increment: step;
  list-style: none;
  position: relative;
  padding-left: 38px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.guide-wrapper .guide .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: #EB2627;
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-wrapper .guide .steps li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.guide-wrapper .guide .steps li a {
  color: white;
}
.guide-wrapper .guide .steps li a:hover {
  color: #EB2627;
}
.guide-wrapper .topics {
  flex: 0 0 66%;
  max-width: 66%;
}
.guide-wrapper .topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}
.guide-wrapper .topic-tags .btn {
  height: 42px;
  padding: 0 clamp(15px, 1.302083vw, 25px);
  border-radius: 30px;
  border: 1px solid #bababa;
  background: white;
  color: #777777;
}
.guide-wrapper .topic-tags .btn:hover, .guide-wrapper .topic-tags .btn.active {
  background: #EB2627;
  border-color: #EB2627;
  color: white;
}
@media (max-width: 991px) {
  .guide-wrapper .guide, .guide-wrapper .topics {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .guide-wrapper .topics {
    margin-top: 25px;
  }
}

/*----- H10 合作 Logo 牆 -----*/
.partners-wall .partners-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
  gap: clamp(10px, 1.0416vw, 20px);
}
.partners-wall .partners-group li {
  flex: 0 0 calc(12.5% - clamp(10px, 1.0416vw, 20px));
  max-width: calc(12.5% - clamp(10px, 1.0416vw, 20px));
}
.partners-wall .partners-group .item {
  display: block;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  overflow: hidden;
  filter: grayscale(1);
  opacity: 0.55;
}
.partners-wall .partners-group .item img {
  width: 100%;
  display: block;
}
.partners-wall .partners-group .item:hover {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 991px) {
  .partners-wall .partners-group li {
    flex: 0 0 calc(25% - clamp(10px, 1.0416vw, 20px));
    max-width: calc(25% - clamp(10px, 1.0416vw, 20px));
  }
}
@media (max-width: 576px) {
  .partners-wall .partners-group li {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

/*----- Footer 社群改為白底（對齊設計稿） -----*/
.footer .social-medias.circle.light .item {
  background: white;
  color: #1C1C1C;
}
.footer .social-medias.circle.light .item:hover {
  background: #EB2627;
  color: white;
}

/*----- H2 / H6 圖卡標題：4 欄卡較窄，字級要縮小並取消兩行裁切 -----*/
.purpose-list .block-links-style-4 .item .title,
.home-products .block-links-style-4 .item .title {
  font-size: clamp(18px, 1.5625vw, 30px);
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/*----- H8 案例圖：素材是直式，固定比例裁切避免卡片過長 -----*/
.cases-list .cases-group .item .image {
  height: clamp(180px, 15.625vw, 300px);
}
.cases-list .cases-group .item .image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*----- H4 店家三欄等高 -----*/
.stores-list .stores-list-group .col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.stores-list .stores-list-group .item {
  width: 100%;
}

.header.sticky.fixed .desktop .logo img {
  transition: all 0.25s ease-in-out;
}

/*------------------- 新版 Logo 尺寸與捲動固定的 Header ---------------------*/
/*----- 新 logo 是 2149x732（約 2.94:1），改以高度為基準，寬度自動 -----*/
.desktop .logo img {
  width: auto;
  height: clamp(42px, 3.125vw, 60px);
}

.footer .logo img {
  width: auto;
  height: clamp(42px, 3.125vw, 60px);
}
@media (max-width: 767px) {
  .footer .logo img {
    width: auto;
    height: 48px;
  }
}

.header-style-1 .mobile .logo a img {
  width: auto;
  height: 44px;
}

/*----- 捲動後固定在頂端，同時把高度收起來 -----*/
.header.sticky.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.header.sticky.fixed .top-bar {
  display: none;
}
.header.sticky.fixed .desktop .nav-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
}
.header.sticky.fixed .desktop .logo img {
  height: clamp(34px, 2.34375vw, 45px);
}
.header.sticky.fixed .desktop .nav {
  margin-left: auto;
}
.header.sticky.fixed .desktop .nav > .nav-item > a {
  padding: clamp(12px, 1.0416vw, 20px) 0;
}
.header.sticky.fixed .desktop .lan {
  padding: clamp(12px, 1.0416vw, 20px) 0;
}
.header.sticky.fixed .mobile .logo {
  padding: 8px 25px;
}
.header.sticky.fixed .mobile .logo a img {
  height: 36px;
}

.search-section .search-panel .tags-group .btn, .search-section .search-panel .search-bar .btn, .hero-main .owl-carousel .item .info .btn {
  transition: all 0.25s ease-in-out;
}

/*----------------- HERO 主視覺輪播與獨立的搜尋 BAR 區塊 --------------------*/
/*----- HERO：滿版大圖 + 標題 + 副標 + 按鈕 -----*/
.hero-main .owl-carousel .item {
  min-height: clamp(380px, 26.04166vw, 500px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
}
.hero-main .owl-carousel .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.15) 100%);
}
.hero-main .owl-carousel .item .container {
  position: relative;
  z-index: 2;
}
.hero-main .owl-carousel .item .info {
  max-width: 55%;
  color: white;
}
.hero-main .owl-carousel .item .info .title {
  color: white;
  margin-bottom: 15px;
  line-height: 1.25;
}
.hero-main .owl-carousel .item .info .des {
  margin-bottom: clamp(20px, 2.083vw, 40px);
  opacity: 0.9;
}
.hero-main .owl-carousel .item .info .btn {
  background: #EB2627;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(48px, 3.385416vw, 65px);
  padding: 0 clamp(25px, 2.60416vw, 50px);
  border-radius: 5px;
  font-size: clamp(16px, 1.14583vw, 22px);
}
.hero-main .owl-carousel .item .info .btn:hover {
  background: #C41E1F;
  color: white;
}
@media (max-width: 767px) {
  .hero-main .owl-carousel .item .info {
    max-width: 100%;
    text-align: center;
  }
}
.hero-main .owl-carousel .owl-dots {
  position: absolute;
  bottom: clamp(15px, 1.5625vw, 30px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 3;
}
.hero-main .owl-carousel .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.45);
  margin: 0 5px;
}
.hero-main .owl-carousel .owl-dots .owl-dot.active {
  background: white;
}

/*----- 搜尋 BAR：獨立成一張白色面板 -----*/
.search-section .search-panel {
  background: white;
  border-radius: 10px;
  padding: clamp(20px, 2.083vw, 40px);
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.06);
}
.search-section .search-panel .search-bar {
  display: flex;
}
.search-section .search-panel .search-bar .input {
  width: calc(100% - clamp(50px, 3.385416vw, 65px));
  height: clamp(50px, 3.385416vw, 65px);
  padding: 10px clamp(15px, 1.5625vw, 30px);
  border: 1px solid #bababa;
  border-right: 0;
  border-radius: 5px 0 0 5px;
}
.search-section .search-panel .search-bar .input:focus {
  border-color: #EB2627;
}
.search-section .search-panel .search-bar .btn {
  width: clamp(50px, 3.385416vw, 65px);
  height: clamp(50px, 3.385416vw, 65px);
  background: #EB2627;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 180%;
  border-radius: 0 5px 5px 0;
}
.search-section .search-panel .search-bar .btn:hover {
  background: #C41E1F;
}
.search-section .search-panel .brands-filter-bar .select {
  border-color: #bababa;
  border-radius: 5px;
}
.search-section .search-panel .brands-filter-bar .btn {
  border-radius: 5px;
}
.search-section .search-panel .tags-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.search-section .search-panel .tags-group .label {
  color: #777777;
  margin-right: 5px;
}
.search-section .search-panel .tags-group .btn {
  border-radius: 30px;
  padding: 6px 18px;
  border: 1px solid #bababa;
  color: #777777;
  background: transparent;
  line-height: 1.4;
}
.search-section .search-panel .tags-group .btn:hover {
  border-color: #EB2627;
  background: #EB2627;
  color: white;
}

/*--------------------------- 微調（第二輪回饋） ----------------------------*/
/*----- Logo 放大：新 logo 是橫式，原本高度基準下佔比太小 -----*/
.desktop .logo img {
  height: clamp(52px, 4.427vw, 85px);
}

.footer .logo img {
  height: clamp(52px, 4.427vw, 85px);
}
@media (max-width: 767px) {
  .footer .logo img {
    height: 62px;
  }
}

.header-style-1 .mobile .logo a img {
  height: 52px;
}

.header.sticky.fixed .desktop .logo img {
  height: clamp(40px, 3.125vw, 60px);
}
.header.sticky.fixed .mobile .logo a img {
  height: 42px;
}

/*----- 文章輪播的左右鍵移到卡片外側，不要壓在文字上 -----*/
.news-list .block-links-style-1 .owl-nav .owl-prev {
  left: clamp(-48px, -2.5vw, -20px);
}
.news-list .block-links-style-1 .owl-nav .owl-next {
  right: clamp(-48px, -2.5vw, -20px);
}
@media (max-width: 991px) {
  .news-list .block-links-style-1 .owl-nav .owl-prev {
    left: 10px;
  }
  .news-list .block-links-style-1 .owl-nav .owl-next {
    right: 10px;
  }
}

/*----------------------- 深色 Header（搭配金色 Logo） ----------------------*/
.header.dark {
  background: #1C1C1C;
}
.header.dark .desktop {
  background: #1C1C1C;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header.dark .nav > .nav-item > a {
  color: rgba(255, 255, 255, 0.85);
}
.header.dark .nav > .nav-item:hover a, .header.dark .nav > .nav-item.active a {
  color: #EB2627;
}
.header.dark .lan .dropdown-toggle {
  color: rgba(255, 255, 255, 0.85);
}
.header.dark .lan .dropdown-toggle:hover {
  color: white;
}
.header.dark .lan .dropdown-menu {
  background: #1C1C1C;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.header.dark .lan .dropdown-menu .dropdown-item button {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
}
.header.dark .lan .dropdown-menu .dropdown-item button:hover {
  color: #EB2627;
}
.header.dark .mobile {
  background: #1C1C1C;
}
.header.dark .mobile .btn {
  color: white;
}
.header.dark .mobile-nav {
  background: white;
}
.header.dark .mobile-nav .btn {
  color: #1C1C1C;
}

/*--------------------- 比例與 RWD 檢查後的修正（v7） -----------------------*/
/*----- HERO 拉高一點，才撐得起主視覺的份量 -----*/
.hero-main .owl-carousel .item {
  min-height: clamp(420px, 31.25vw, 600px);
}

/*----- Footer 社群 icon 原本 35px 在頁尾太小 -----*/
.footer .social-medias .item {
  width: clamp(38px, 2.60416vw, 50px);
  height: clamp(38px, 2.60416vw, 50px);
  font-size: clamp(16px, 1.14583vw, 22px);
}
.footer .social-medias.circle .item {
  font-size: clamp(16px, 1.14583vw, 22px);
}

/*----- 平板（768–991）：這些區塊原本只在 767 以下才收合，中間尺寸會擠爆 -----*/
@media (max-width: 991px) {
  .brands-filter-bar .col, .brands-filter-bar .col.submit {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 10px;
  }
  .brands-filter-bar .col:last-child {
    margin-bottom: 0;
  }
  .stores-list .stores-list-group.group.item3 .col {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .events-list-group .item {
    flex-direction: column;
    align-items: flex-start;
  }
  .events-list-group .date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid #ebebeb;
    padding: 0 0 12px;
    margin: 0 0 12px;
  }
  .events-list-group .date .month, .events-list-group .date .day {
    display: inline-block;
    margin-bottom: 0;
  }
  .events-list-group .action {
    margin: 15px 0 0;
    width: 100%;
  }
  .events-list-group .action .btn {
    width: 100%;
  }
}
/*----- 店名不要斷在詞中間 -----*/
.stores-list .stores-list-group .item .list li .title {
  word-break: keep-all;
  line-break: strict;
}

/*----- 手機：HERO 副標字級降一級，避免「一站完成」被拆行 -----*/
@media (max-width: 576px) {
  .hero-main .owl-carousel .item .info .des {
    font-size: 16px;
    line-height: 1.6;
  }
  .hero-main .owl-carousel .item .info .title {
    line-height: 1.35;
  }
}

/*----- Footer 連結欄原本在 991 以下整組隱藏，改成兩欄顯示 -----*/
@media (max-width: 991px) {
  .footer-style-2 .figure.links {
    display: block;
    max-width: 50%;
    flex: 0 0 50%;
    margin-bottom: 25px;
  }
  .footer-style-2 .content {
    margin-top: clamp(20px, 1.822916vw, 35px);
  }
}
@media (max-width: 575px) {
  .footer-style-2 .figure.links .list-style-2 li {
    margin-bottom: 12px;
  }
  .footer-style-2 .figure.links .list-style-1 li {
    margin-bottom: 8px;
  }
}

/*----- Footer 連結在平板／手機統一靠左兩欄，不要一半置中一半靠左 -----*/
@media (max-width: 991px) {
  .footer-style-2 .content {
    text-align: left;
  }
  .footer-style-2 .figure.links {
    text-align: left;
  }
  .footer-style-2 .figure.links .title {
    text-align: left;
  }
}

/*------------------- CAA 品牌配色：金底／金字的對比修正 --------------------*/
/* 主金 #EB2627 明度高，白字在上面只有 1.9:1，一律改用品牌黑；
   淺底上的金色文字則改用深金 #C41E1F，才讀得清楚。 */
/*----- 金色底的元件：文字改品牌黑 -----*/
.top-bar,
.top-bar .notice .item,
.top-bar .btn-close,
.btn.more,
.btn.more:hover,
.hero-main .owl-carousel .info .btn,
.hero-main .owl-carousel .info .btn:hover,
.hero-banner .owl-carousel .info .btn,
.hero-banner .owl-carousel .info .btn:hover,
.brands-filter-bar .btn,
.brands-filter-bar .btn:hover,
.search-section .search-panel .search-bar .btn,
.search-section .search-panel .search-bar .btn:hover,
.search-section .search-panel .tags-group .btn:hover,
.plans-list-group .item.recommend .btn,
.plans-list-group .item .btn:hover,
.cta-style-2 .btn,
.social-medias.circle .item,
.products-list .block-links-style-4 .item .btn,
.guide-wrapper .topic-tags .btn:hover,
.guide-wrapper .topic-tags .btn.active,
.area-bar .btn.locate:hover,
.events-list-group .item:hover .action .btn,
.footer .social-medias.circle.light .item:hover {
  color: white;
}

.top-bar .icon img {
  filter: brightness(0);
}

.stores-list .stores-list-group .col .item .btn {
  color: #080808;
}

/*----- 淺色底上的金色文字：改用深金 -----*/
.brands-list-group .item:hover .title,
.cases-list .cases-group .item:hover .info .title,
.other-list-group .item .list li .link:hover,
.plans-list-group .item .btn,
.events-list-group .action .btn,
.events-list-group .info .status.open,
.search-section .search-panel .search-bar .input:focus {
  color: #C41E1F;
}

.plans-list-group .item .spec li::before {
  color: #C41E1F;
}

.events-list-group .info .place .material-symbols-outlined {
  color: #C41E1F;
}

.cases-list .cases-group .item .store .material-symbols-outlined {
  color: #C41E1F;
}

/*----- 北中南三色卡改金色階後，白字對比不足，改用品牌黑 -----*/
.stores-list .stores-list-group .item {
  color: white;
}
.stores-list .stores-list-group .item .list li .location {
  border-color: rgba(255, 255, 255, 0.45);
  color: white;
}
.stores-list .stores-list-group .item .list li .link {
  color: white;
}
.stores-list .stores-list-group .item .list li .distance {
  opacity: 0.7;
}

/*----- 賽事日期數字：主金在白底只有 2:1，改深金 -----*/
.events-list-group .date .day {
  color: #C41E1F;
}

/*------------------ 滿版化調整：搜尋區／贊助輪播／品牌列表 -----------------*/
/*----- 搜尋區塊改滿版白底，面板改淺灰才有層次 -----*/
.search-section .search-panel {
  background: #f5f5f5;
  box-shadow: none;
  border: 1px solid #ebebeb;
}

/*----- 贊助品牌輪播改滿版 -----*/
.hero-banner .owl-carousel .item {
  border-radius: 0;
  min-height: clamp(300px, 23.4375vw, 450px);
  align-items: center;
}
.hero-banner .owl-carousel .item .container {
  position: relative;
  z-index: 2;
}
.hero-banner .owl-carousel .item .info {
  padding: 0;
  max-width: 50%;
}
@media (max-width: 767px) {
  .hero-banner .owl-carousel .item .info {
    max-width: 100%;
  }
}
.hero-banner .owl-carousel .item .label {
  top: clamp(15px, 2.083vw, 40px);
  right: clamp(15px, 3.64583vw, 70px);
}
.hero-banner .owl-carousel .owl-dots {
  right: clamp(20px, 3.64583vw, 70px);
}

/*----- 品牌列表：6 欄滿版，logo 縮小、國旗移到品牌名左側 -----*/
.brands-list-group .item .image {
  padding: clamp(12px, 1.302083vw, 25px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brands-list-group .item .image img {
  width: 100%;
  height: auto;
}
.brands-list-group .item .info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.brands-list-group .item .info .flag {
  margin-bottom: 0;
  line-height: 0;
}
.brands-list-group .item .info .flag img {
  width: clamp(20px, 1.302083vw, 25px);
}
.brands-list-group .item .info .title {
  line-height: 1.3;
}

/*----- 6 欄下的收尾：產品卡標題再小一級（長分類名會被裁掉）、品牌名長短不一時底部仍對齊 -----*/
.home-products .block-links-style-4 .item .title {
  font-size: clamp(15px, 1.0416vw, 20px);
}

.brands-list-group .item .info {
  min-height: clamp(44px, 3.125vw, 60px);
}

/*----- 語系下拉：字級與主選單一致（原本寫死 14px 偏小） -----*/
.header .lan .dropdown-menu {
  min-width: clamp(90px, 6.25vw, 120px);
  padding: 8px 0;
}
.header .lan .dropdown-item button {
  font-size: inherit;
  font-weight: 700;
  padding: 8px clamp(15px, 1.0416vw, 20px);
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

/*----------------------- 手機版調整（選單／欄數／店家） ---------------------*/
/*----- 手機選單面板：實心深底，語系一列排開 -----*/
.header.dark .mobile-nav {
  background: #1C1C1C;
}
.header.dark .mobile-nav .list.main .item .title {
  color: white;
}
.header.dark .mobile-nav .list.main .item .title:hover {
  color: #EB2627;
}
.header.dark .mobile-nav .list.language {
  display: flex;
  flex-wrap: wrap;
  padding: 0 25px;
}
.header.dark .mobile-nav .list.language .item {
  flex: 0 0 20%;
  max-width: 20%;
  text-align: center;
}
.header.dark .mobile-nav .list.language .item button {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 0;
  width: 100%;
}
.header.dark .mobile-nav .list.language .item button:hover {
  color: #EB2627;
}
.header.dark .mobile-nav .btn {
  color: white;
}

/*----- 手機：品牌與產品分類維持兩欄，不要變成一欄大卡 -----*/
@media (max-width: 576px) {
  .brands-list-group.group.item6 .col,
  .home-products .block-links-style-4.group.item6 .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .brands-list-group .item .info .title {
    font-size: 15px;
  }
  .brands-list-group .item .info .flag img {
    width: 18px;
  }
}
/*----- 授權安裝店：手機改成 tab 切換，一次只顯示一區 -----*/
.stores-list .stores-list-group .col[data-area=east] {
  display: none;
}
.stores-list .stores-list-group .item.east {
  background: linear-gradient(to bottom, rgba(28, 28, 28, 0.85) 0%, rgba(28, 28, 28, 0.6) 100%);
  color: white;
  justify-content: flex-start;
}
.stores-list .stores-list-group .item.east .empty {
  line-height: 1.8;
  text-align: center;
  padding: clamp(20px, 2.083vw, 40px) 0;
}
.stores-list .stores-list-group .item.east .btn {
  color: white;
}
@media (max-width: 991px) {
  .stores-list .stores-list-group .col {
    display: none;
  }
  .stores-list .stores-list-group .col.is-active {
    display: flex;
  }
}

/*----- Footer 手機／平板：兩欄靠左、內距收斂、字級降一級 -----*/
@media (max-width: 991px) {
  .footer.footer-style-2 .wrapper {
    margin-left: 0;
    margin-right: 0;
  }
  .footer.footer-style-2 .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
    row-gap: 30px;
    margin-top: clamp(20px, 2.083vw, 35px);
    padding: 0 15px;
  }
  .footer.footer-style-2 .figure.links {
    display: block;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
    max-width: 100%;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    text-align: left;
  }
  .footer.footer-style-2 .figure.logo-wrapper {
    text-align: center;
  }
  .footer.footer-style-2 .bottom {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 575px) {
  .footer.footer-style-2 .figure.links {
    margin-bottom: 25px;
  }
  .footer.footer-style-2 .figure.links .title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  .footer.footer-style-2 .figure.links .list-style-2 {
    font-size: 16px;
  }
  .footer.footer-style-2 .figure.links .list-style-2 li {
    margin-bottom: 10px;
  }
  .footer.footer-style-2 .figure.links .list-style-2 li a {
    line-height: 1.5;
  }
  .footer.footer-style-2 .figure.links .list-style-1 li {
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.6;
  }
  .footer.footer-style-2 .copyright {
    font-size: 12px;
    line-height: 1.6;
  }
}

/*----- 手機選單面板：實心深底，logo 區塊拿掉樣板留下的深藍底 -----*/
.header .mobile .mobile-nav {
  background: #1C1C1C;
  opacity: 1;
}
.header .mobile .mobile-nav .logo {
  background: transparent;
  padding: 15px 25px;
}
.header .mobile .mobile-nav .logo img {
  height: 48px;
  width: auto;
}
.header .mobile .mobile-nav .main .item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header .mobile .mobile-nav .main .item .title {
  color: white;
  padding: 15px 25px;
  display: block;
}
.header .mobile .mobile-nav .main .item .title:hover {
  color: #EB2627;
}

/*----- 手機選單面板底色：用比樣板更高的權重蓋過 base.css 的淺灰 -----*/
.header.dark .mobile .mobile-nav {
  background: #1C1C1C;
}
.header.dark .mobile .mobile-nav .logo {
  background: transparent;
}
.header.dark .mobile .mobile-nav .list.main, .header.dark .mobile .mobile-nav .list.language {
  background: transparent;
}

/*----- 手機選單：樣板在多層都塞了底色，這裡一次覆蓋乾淨 -----*/
.header.dark .mobile .mobile-nav {
  background: #1C1C1C !important;
}
.header.dark .mobile .mobile-nav .logo, .header.dark .mobile .mobile-nav .main, .header.dark .mobile .mobile-nav .language, .header.dark .mobile .mobile-nav .list, .header.dark .mobile .mobile-nav .item {
  background: transparent !important;
}
.header.dark .mobile .mobile-nav .main .item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header.dark .mobile .mobile-nav .main .item .title {
  background: transparent !important;
  color: white !important;
}
.header.dark .mobile .mobile-nav .main .item .title:hover {
  color: #EB2627 !important;
}
.header.dark .mobile .mobile-nav .language .item {
  border-bottom: 0;
}
.header.dark .mobile .mobile-nav .language button {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.header.dark .mobile .mobile-nav .language button:hover {
  color: #EB2627 !important;
}

/*----- 店家卡：行政區標記與各區家數 -----*/
.stores-list .stores-list-group .item .list li .district {
  font-size: 14px;
  opacity: 0.7;
}
.stores-list .stores-list-group .item .count {
  font-size: clamp(14px, 0.9375vw, 18px);
  opacity: 0.75;
  margin-left: 10px;
  font-weight: normal;
}

/*----- 手機兩欄卡片要有間距（樣板在 576 以下把 gap 歸零了） -----*/
@media (max-width: 576px) {
  .brands-list-group.group.item6,
  .home-products .block-links-style-4.group.item6 {
    margin-left: -6px;
    margin-right: -6px;
  }
  .brands-list-group.group.item6 .col,
  .home-products .block-links-style-4.group.item6 .col {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
  }
}
/*----- 錨點捲動時不要被固定的 header 蓋住 -----*/
section[id] {
  scroll-margin-top: clamp(100px, 9.375vw, 180px);
}

.alpha-nav a {
  transition: all 0.25s ease-in-out;
}

/*--------------------- 品牌頁：A-Z 字母索引與分區列表 ----------------------*/
/*----- 字母索引列（品牌多了之後靠這個跳） -----*/
.alpha-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0;
}
.alpha-nav li {
  margin: 0;
}
.alpha-nav a, .alpha-nav .disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(32px, 2.083vw, 40px);
  height: clamp(32px, 2.083vw, 40px);
  border-radius: 5px;
  font-weight: 700;
  line-height: 1;
}
.alpha-nav a {
  background: white;
  border: 1px solid #ebebeb;
  color: #1C1C1C;
}
.alpha-nav a:hover {
  background: #EB2627;
  border-color: #EB2627;
  color: white;
}
.alpha-nav .disabled {
  border: 1px solid transparent;
  color: #bababa;
  opacity: 0.45;
  cursor: default;
}

/*----- 每個字母一個分區 -----*/
.brands-alpha {
  scroll-margin-top: clamp(100px, 9.375vw, 180px);
  margin-top: clamp(30px, 3.125vw, 60px);
}
.brands-alpha .alpha-title {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #1C1C1C;
  line-height: 1;
}
.brands-alpha .alpha-title .num {
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: normal;
  color: #777777;
  margin-left: 10px;
}

/*----- 沒有國旗素材的產地，改用文字標記 -----*/
.brands-list-group .item .info .flag .flag-text {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 3px;
  background: #ebebeb;
  color: #777777;
  white-space: nowrap;
}

/*----- 手機兩欄間距（品牌頁是 item4，先前只補到首頁的 item6） -----*/
@media (max-width: 576px) {
  .brands-list-group.group.item4 {
    margin-left: -6px;
    margin-right: -6px;
  }
  .brands-list-group.group.item4 .col {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
  }
  .alpha-nav {
    gap: 4px;
  }
  .alpha-nav a, .alpha-nav .disabled {
    min-width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

/*----- 國旗改用 flag-icons 的 SVG（4:3 扁平樣式），加細框才不會跟白底融在一起 -----*/
.brands-list-group .item .info .flag img {
  width: clamp(20px, 1.302083vw, 24px);
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  display: block;
}

/*--------------------------------------------------------------------------*/
/*-------------------- H7-2 音響價值計算機（深色 CTA 帶） --------------------*/
/*----- 上下都是淺底的卡片區，中間夾一條深色才不會整頁糊成一片 -----*/
.value-calc {
  background: #141414;
  color: white;
}
.value-calc .calc-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(30px, 3.90625vw, 75px);
}
.value-calc .info {
  flex: 1;
  min-width: 0;
}
.value-calc .info .label {
  display: inline-block;
  line-height: 1;
  padding: 7px 16px;
  border-radius: 30px;
  background: rgba(235, 38, 39, 0.18);
  color: #EB2627;
  margin-bottom: 20px;
}
.value-calc .info .title {
  line-height: 1.3;
}
.value-calc .info .des {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: 0;
}
.value-calc .info .steps {
  margin-bottom: 0;
}
.value-calc .info .steps li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.value-calc .info .steps li:last-child {
  margin-bottom: 0;
}
.value-calc .info .steps li .num {
  flex: 0 0 30px;
  max-width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #EB2627;
  color: #EB2627;
  font-size: 16px;
  line-height: 1;
  margin-right: 12px;
}
.value-calc .info .action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 20px;
}
.value-calc .info .action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(50px, 3.385416vw, 65px);
  padding: 0 clamp(25px, 2.083vw, 40px);
  border-radius: 5px;
  background: #EB2627;
  color: white;
  font-size: clamp(16px, 1.0416vw, 20px);
  transition: all 0.25s ease-in-out;
}
.value-calc .info .action .btn:hover {
  background: white;
}
.value-calc .info .action .note {
  color: rgba(255, 255, 255, 0.55);
}
.value-calc .visual {
  flex: 0 0 clamp(320px, 25vw, 480px);
  max-width: clamp(320px, 25vw, 480px);
}
.value-calc .calc-card {
  background: white;
  color: #080808;
  border-radius: 10px;
  padding: clamp(20px, 1.822916vw, 35px);
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.25);
}
.value-calc .calc-card .card-head {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebebeb;
  font-weight: 700;
}
.value-calc .calc-card .card-head .tag {
  margin-left: 10px;
  line-height: 1;
  padding: 5px 12px;
  border-radius: 30px;
  background: #f5f5f5;
  color: #777777;
  font-size: 14px;
  font-weight: 400;
}
.value-calc .calc-card .rows {
  margin: 15px 0 0;
}
.value-calc .calc-card .rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}
.value-calc .calc-card .rows li:last-child {
  margin-bottom: 0;
}
.value-calc .calc-card .rows li .name {
  color: #777777;
}
.value-calc .calc-card .rows li .value {
  white-space: nowrap;
}
.value-calc .calc-card .card-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebebeb;
}
.value-calc .calc-card .card-total .sum {
  color: #C41E1F;
}
@media (max-width: 767px) {
  .value-calc .calc-panel {
    display: block;
  }
  .value-calc .visual {
    max-width: 100%;
    margin-top: 30px;
  }
}

/*--------------------------------------------------------------------------*/
/*------------- H3 贊助版位改左右兩欄（左固定一則＋右輪播） ------------------*/
/*----- 收進 container 的兩張卡：原本滿版通欄那組樣式掛在
        .hero-banner .owl-carousel 底下，左欄不在輪播裡吃不到，
        所以改用 .sponsor-split 重寫一組給兩欄共用。
        選擇器要多包一層 .sponsor-group .item，權重才蓋得過
        舊的 .hero-banner .owl-carousel .item .info（4 個 class）。 -----*/
.hero-banner.sponsor-split .sponsor-group {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(15px, 1.5625vw, 30px);
}
.hero-banner.sponsor-split .sponsor-group > .col {
  flex: 1 1 0;
  min-width: 0;
}
.hero-banner.sponsor-split .sponsor-group .item {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 10px;
  overflow: hidden;
  min-height: clamp(280px, 20.833vw, 400px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-banner.sponsor-split .sponsor-group .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 兩欄變窄後文字改壓在底部，漸層跟著轉成由下往上 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
}
.hero-banner.sponsor-split .sponsor-group .item .label {
  position: absolute;
  top: clamp(15px, 1.0416vw, 20px);
  right: clamp(15px, 1.0416vw, 20px);
  z-index: 3;
  background: rgba(255, 255, 255, 0.85);
  color: #1C1C1C;
  font-size: 14px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 3px;
}
.hero-banner.sponsor-split .sponsor-group .item .info {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  color: white;
  padding: clamp(20px, 2.083vw, 40px);
}
.hero-banner.sponsor-split .sponsor-group .item .info .brand {
  color: white;
  opacity: 0.85;
  margin-bottom: 8px;
}
.hero-banner.sponsor-split .sponsor-group .item .info .title {
  color: white;
  margin-bottom: 8px;
  line-height: 1.3;
}
.hero-banner.sponsor-split .sponsor-group .item .info .des {
  margin-bottom: clamp(15px, 1.302083vw, 25px);
  opacity: 0.9;
}
.hero-banner.sponsor-split .sponsor-group .item .info .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(45px, 2.864583vw, 55px);
  padding: 0 clamp(20px, 1.822916vw, 35px);
  border-radius: 5px;
  background: #EB2627;
  color: white;
  font-size: clamp(16px, 1.0416vw, 20px);
  transition: all 0.25s ease-in-out;
}
.hero-banner.sponsor-split .sponsor-group .item .info .btn:hover {
  background: white;
  color: #080808;
}
/* dots 放右下角，跟左下的按鈕錯開 */
.hero-banner.sponsor-split .sponsor-group .owl-dots {
  position: absolute;
  bottom: clamp(20px, 2.083vw, 40px);
  right: clamp(20px, 2.083vw, 40px);
  display: flex;
  z-index: 3;
}
.hero-banner.sponsor-split .sponsor-group .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.45);
  margin-left: 8px;
}
.hero-banner.sponsor-split .sponsor-group .owl-dots .owl-dot.active {
  background: white;
}
@media (max-width: 767px) {
  .hero-banner.sponsor-split .sponsor-group {
    display: block;
  }
  .hero-banner.sponsor-split .sponsor-group > .col + .col {
    margin-top: 15px;
  }
}


/*--------------------------------------------------------------------------*/
/*------------- 品牌內頁相關產品：一列三欄輪播（IROAD 實際產品） -------------*/
/*----- .products-list 那組卡是為情境照設計的：圖上蓋 45% 暗色遮罩、
        白字絕對定位置中、MORE 藏起來 hover 才出現。
        IROAD 的素材是白底去背的產品圖，套那套會整張糊掉，
        所以這一區改成一般的產品卡：圖在上、文字在下、深色字。
        對方那組 hover 規則帶 :hover（權重 5），要蓋掉得同樣寫 :hover。 -----*/
@media (max-width: 767px) {
  .brand-products.products-list {
    display: block;
  }
}
.brand-products .brand-products-group .item {
  display: block;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 0;
  transition: all 0.25s ease-in-out;
}
.brand-products .brand-products-group .item .image {
  margin-bottom: 0;
  height: clamp(180px, 14.583333vw, 280px);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(15px, 1.302083vw, 25px);
}
/* 情境照用的暗色遮罩，白底產品圖不需要 */
.brand-products .brand-products-group .item .image::before {
  display: none;
}
.brand-products .brand-products-group .item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-products .brand-products-group .item .info,
.brand-products .brand-products-group .item:hover .info {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  color: #080808;
  text-align: center;
  padding: clamp(12px, 1.0416vw, 20px) 15px clamp(15px, 1.302083vw, 25px);
  border-top: 1px solid #ebebeb;
  align-items: center;
}
.brand-products .brand-products-group .item .title {
  font-size: clamp(14px, 0.9375vw, 17px);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.brand-products .brand-products-group .item .btn,
.brand-products .brand-products-group .item:hover .btn {
  opacity: 1;
  width: auto;
  height: clamp(32px, 2.083vw, 40px);
  margin-top: 10px;
  padding: 0 clamp(16px, 1.302083vw, 25px);
  background: transparent;
  border: 1px solid #EB2627;
  color: #C41E1F;
  border-radius: 30px;
  font-size: clamp(13px, 0.833333vw, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease-in-out;
}
.brand-products .brand-products-group .item:hover {
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.12);
}
.brand-products .brand-products-group .item:hover .btn {
  background: #EB2627;
  color: white;
}

/*--------------------------------------------------------------------------*/
/*------------- 品牌內頁相關文章：拿掉輪播改三欄（IROAD 部落格） -------------*/
/*----- 原本的卡是為直式情境照設計的：資訊區留 30–60px 內距、標題吃三行。
        IROAD 的文章封面是 2:1 的橫圖，卡片變矮，照舊設定文字會爆出卡外，
        底部漸層也壓不到標題位置。這一區收內距、標題改兩行、漸層加重。 -----*/
/* 只有一列，桌機不需要下邊距（會跟區塊的 padding 疊起來）；
   手機直排時才需要卡片之間的間隔 */
.news-list .block-links-style-1.news-static .col {
  display: flex;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .news-list .block-links-style-1.news-static .col {
    margin-bottom: 20px;
  }
  .news-list .block-links-style-1.news-static .col:last-child {
    margin-bottom: 0;
  }
}
.news-list .block-links-style-1.news-static .item {
  width: 100%;
  margin-bottom: 0;
}
.news-list .block-links-style-1.news-static .item .image {
  margin-bottom: 0;
}
.news-list .block-links-style-1.news-static .item .image img {
  width: 100%;
  height: auto;
  display: block;
}
.news-list .block-links-style-1.news-static .item .info {
  padding: clamp(15px, 1.302083vw, 25px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.92) 100%);
}
.news-list .block-links-style-1.news-static .item .des {
  font-size: clamp(13px, 0.833333vw, 16px);
  margin-bottom: 6px;
  opacity: 0.9;
}
.news-list .block-links-style-1.news-static .item .title {
  font-size: clamp(16px, 1.0416vw, 20px);
  line-height: 1.4;
  -webkit-line-clamp: 2;
}

/*--------------------------------------------------------------------------*/
/*---------------- H10 合作協會與代理商：三張深色底板的 logo ----------------*/
/*----- 合作對象的官網只提供反白版 logo（給深色 header 用），直接放白底
        區塊會看不見，所以每個 logo 各自坐在一張深色底板上，素材完全不動。
        三個 logo 比例差很多（277x50 長條、近正方、約 16:9），
        底板給固定高度並置中，圖片用 max-width/max-height 收進去。 -----*/
.partners-wall .partners-group.partners-plate {
  gap: clamp(12px, 1.302083vw, 25px);
}
.partners-wall .partners-group.partners-plate li {
  flex: 0 0 calc(33.333% - clamp(12px, 1.302083vw, 25px));
  max-width: clamp(200px, 18.75vw, 360px);
}
.partners-wall .partners-group.partners-plate .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(120px, 10.416vw, 200px);
  padding: clamp(18px, 1.5625vw, 28px);
  /* 用全站標準黑（header 與 footer 同色），跟其他深色區塊一致 */
  background: #1C1C1C;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  /* 只有三個合作對象，不像原本那排 8 個要壓成灰階，直接給原色 */
  filter: none;
  opacity: 1;
}
.partners-wall .partners-group.partners-plate .item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.partners-wall .partners-group.partners-plate .item:hover {
  background: #000;
  border-color: #EB2627;
}
@media (max-width: 767px) {
  .partners-wall .partners-group.partners-plate li {
    flex: 0 0 100%;
    max-width: 280px;
  }
}

/*--------------------------------------------------------------------------*/
/*--------------- H7 賽事卡：已結束狀態與報名期限兩行 -----------------------*/
/*----- 原本只有 .open（報名中）與 .soon（即將開放）兩種狀態。
        已結束的場次不該跟開放中的搶注意力，整張卡降低對比、
        日期數字轉灰、按鈕改成不可點的樣子（markup 也不掛連結）。 -----*/
.events-list-group .info .status.ended {
  background: #ebebeb;
  color: #777777;
}
/* 同一張卡放兩行資訊（日期、時間）時的間距 */
.events-list-group .info .place + .place {
  margin-top: 4px;
}
/* 報名期限：早鳥與截止各一行，標籤靠左對齊 */
.events-list-group .info .signup {
  margin: 8px 0 0;
  font-size: clamp(14px, 0.9375vw, 17px);
  color: #777777;
}
.events-list-group .info .signup li {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.events-list-group .info .signup li:last-child {
  margin-bottom: 0;
}
.events-list-group .info .signup .tag {
  flex: 0 0 auto;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 13px;
  margin-right: 8px;
}
.events-list-group .info .signup .tag.early {
  background: rgba(235, 38, 39, 0.18);
  color: #C41E1F;
}
.events-list-group .info .signup .tag.close {
  background: #f5f5f5;
  color: #777777;
}
.events-list-group .item.is-ended {
  cursor: default;
}
.events-list-group .item.is-ended .date .day {
  color: #777777;
}
.events-list-group .item.is-ended .info .title {
  color: #777777;
}
.events-list-group .item.is-ended .action .btn {
  border-color: #ebebeb;
  color: #777777;
}
.events-list-group .item.is-ended:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}
.events-list-group .item.is-ended:hover .action .btn {
  background: transparent;
  border-color: #ebebeb;
  color: #777777;
}

/*--------------------------------------------------------------------------*/
/*------------------ HERO 大標：字級跟著容器連續縮放 ------------------------*/
/* 2026-08-21：拿掉 white-space: nowrap。原本靠「7.6cqw × 12 個中文字 ≈ 91%
   容器寬」壓住不斷行，但那是照當時最長的一句校準的 —— 標題改長、或換成
   拉丁語系（en / vi / id 一句 40～57 個字元）就會爆出容器，再被輪播的
   .owl-stage-outer overflow:hidden 從中間切掉。實測線上 vi 在 390 寬時
   文字實寬 664px、容器只有 360px，字斷在半個單字上。改成允許換行：
   12 個中文字以內的短句 91% < 100% 仍是一行，行為不變；長句折兩行不再被裁。 */
/*----- 原本字級是固定階梯（64/48/40/30），但 .info 是 max-width:55%、
        寬度隨視窗連續變化，兩者對不上就會出現「字級沒降、容器卻縮了」
        的破口 —— 實測 1920、1600、1024、768、390、320 都會斷行。
        改用容器查詢單位 cqw：字級直接以 .info 的實際寬度為基準，
        每個寬度都自動吻合，不必再逐一開斷點修補。
        最長的一句是 12 個中文字，7.6cqw × 12 ≈ 91% 容器寬，留了餘裕。 -----*/
.hero-main .owl-carousel .item .info {
  container-type: inline-size;
}
.hero-main .owl-carousel .item .info .title {
  font-size: clamp(20px, 7.6cqw, 64px);
  text-wrap: balance;
}


/*--------------------------------------------------------------------------*/
/*--------------- H6 品牌卡：曝光範圍標籤（原廠／代理） ---------------------*/
/*----- 第一版把標籤放在品牌名下方、前面加小圓點，滿版 12 張看起來很雜。
        改成比照贊助版位的 .label：小方標直接貼在 logo 圖右上角，
        不佔文字行、也不影響品牌名的置中對齊。
        兩種份量：原廠＝金底黑字（實心，跟站上的金色按鈕同一套），
        代理＝白底深灰字＋細框（低調，比照贊助標示的半透明白）。 -----*/
.brands-list-group .item .image {
  position: relative;
}
.brands-list-group .item .scope {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 3px;
  font-size: clamp(11px, 0.729166vw, 13px);
  font-weight: 700;
}
.brands-list-group .item .scope.global {
  background: #EB2627;
  color: white;
}
.brands-list-group .item .scope.local {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ebebeb;
  color: #777777;
  font-weight: 400;
}

/*--------------------------------------------------------------------------*/
/*--------------- 年度贊助品牌：51 家的緊湊 logo 牆 -------------------------*/
/*----- 原本 6 欄、每張卡 213px 高，51 家排下來 2261px，頁面被拉得很長。
        真正的問題不是欄數，是「圖片本身有 8 成是留白」——
        277x244 的圖，logo 內容只佔 y96~151 那一小條，卡片高度全浪費在空白上。
        素材已逐張裁到各自的內容邊界（寬型 logo 從 244px 高變成 43~60px），
        這裡再把圖框壓扁、欄數加到 8，logo 反而比原本更大。 -----*/
.group.item8 > .col {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
@media (max-width: 1199px) {
  .group.item8 > .col {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }
}
@media (max-width: 767px) {
  .group.item8 > .col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
.brands-list-group.sponsor-wall .item .image {
  height: clamp(56px, 5.72916vw, 88px);
  padding: clamp(8px, 0.833333vw, 16px);
}
.brands-list-group.sponsor-wall .item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brands-list-group.sponsor-wall .item .info {
  margin-top: clamp(6px, 0.625vw, 12px);
  min-height: 0;
}
.brands-list-group.sponsor-wall .item .title {
  font-size: clamp(12px, 0.833333vw, 16px);
  line-height: 1.3;
}

/*--------------------------------------------------------------------------*/
/*--------------- Header 固定後仍保留公告條 ---------------------------------*/
/*----- header 改成一律用收合樣式後，原本「捲動時把公告條收起來省空間」
        的規則等於讓公告條永遠不顯示。這裡把它開回來，
        並縮小高度與字級，讓整條 header 不會又長回去。 -----*/
.header.sticky.fixed .top-bar {
  display: flex;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: clamp(13px, 0.9375vw, 17px);
}
.header.sticky.fixed .top-bar .notice .item {
  padding-top: 0;
  padding-bottom: 0;
}

/*----- 固定 header 的呼吸空間 -----*/
/* 收合樣式原本是為「捲動時盡量不擋內容」設計的，padding-top 直接歸零、
   logo 上下幾乎貼齊選單列。現在它是常駐狀態，太緊會顯得侷促，
   補回上下內距並把 logo 放大一階。 */
.header.sticky.fixed .desktop .nav-wrapper {
  padding-top: clamp(14px, 1.30208vw, 25px);
  padding-bottom: clamp(14px, 1.30208vw, 25px);
}
.header.sticky.fixed .desktop .logo img {
  height: clamp(40px, 2.86458vw, 55px);
}

/*--------------------------------------------------------------------------*/
/*--------------- 頁尾改為精簡版（footer-slim） -----------------------------*/
/*----- 原本 footer-style-2 是四欄連結牆的架構，內容砍到只剩三個連結後
        整塊空得很不成比例。改成兩列：上列 logo／導覽／社群一橫排，
        下列細線分隔的版權與贊助資訊。 -----*/
.footer.footer-slim {
  background: #1C1C1C;
  color: rgba(255, 255, 255, 0.8);
  padding-top: clamp(30px, 3.125vw, 60px);
}
.footer.footer-slim .slim-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 2.083vw, 40px);
}
.footer.footer-slim .logo img {
  height: clamp(40px, 2.86458vw, 55px);
  width: auto;
  display: block;
}
.footer.footer-slim .slim-nav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  gap: clamp(16px, 1.822916vw, 35px);
}
.footer.footer-slim .slim-nav li {
  margin-bottom: 0;
}
.footer.footer-slim .slim-nav a {
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.25s ease-in-out;
}
.footer.footer-slim .slim-nav a:hover {
  color: #EB2627;
}
.footer.footer-slim .slim-social {
  display: flex;
  margin-bottom: 0;
  gap: 10px;
}
.footer.footer-slim .slim-social li {
  margin-bottom: 0;
}
.footer.footer-slim .slim-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 2.34375vw, 44px);
  height: clamp(36px, 2.34375vw, 44px);
  border-radius: 50%;
  background: white;
  color: #1C1C1C;
  font-size: clamp(15px, 1.0416vw, 18px);
  transition: all 0.25s ease-in-out;
}
.footer.footer-slim .slim-social a:hover {
  background: #EB2627;
  color: white;
}
.footer.footer-slim .slim-bottom {
  margin-top: clamp(20px, 2.083vw, 40px);
  padding: clamp(14px, 1.302083vw, 24px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px clamp(16px, 2.083vw, 40px);
  font-size: clamp(13px, 0.9375vw, 16px);
  color: rgba(255, 255, 255, 0.6);
}
.footer.footer-slim .slim-bottom a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all 0.25s ease-in-out;
}
.footer.footer-slim .slim-bottom a:hover {
  color: #EB2627;
}
@media (max-width: 767px) {
  .footer.footer-slim .slim-top {
    flex-direction: column;
    text-align: center;
  }
  .footer.footer-slim .slim-nav {
    justify-content: center;
  }
  .footer.footer-slim .slim-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/*----- 語系下拉：補回定位基準 -----*/
/* .dropdown-menu 是 position:absolute，但 .dropdown.lan 一直是 static，
   整條祖先鏈都沒有定位基準，選單會掉到視窗左上角（實測開在 x 0–111，
   而觸發器在 x 1213）。補上 relative，並改成靠右對齊 ——
   語系切換現在是選單最後一項，靠左展開在窄螢幕會超出右邊界。 */
.header .dropdown.lan {
  position: relative;
}
.header .dropdown.lan .dropdown-menu {
  left: auto;
  right: 0;
}

/*--------------------------------------------------------------------------*/
/*--------------- 器材價值計算頁 calculator.php -----------------------------*/
/*----- 參賽者用來算出車上器材總值、截圖給裁判。使用者知道自己的型號，
        所以入口是搜尋框而不是 610 項的品牌下拉；加入與改數量都走
        localStorage，不重新載入頁面（calc 那邊每加一件要 3 次整頁載入）。 -----*/
.calc-tool-inner {
  max-width: 780px;
}
.calc-search {
  position: relative;
}
.calc-search .input {
  width: 100%;
  height: clamp(56px, 4.16666vw, 76px);
  padding: 0 clamp(50px, 3.64583vw, 66px) 0 clamp(18px, 1.5625vw, 28px);
  border: 1px solid #ebebeb;
  border-radius: 5px;
  background: white;
  color: #1C1C1C;
}
.calc-search .input:focus {
  outline: 2px solid #EB2627;
  outline-offset: 2px;
}
.calc-search .icon {
  position: absolute;
  top: 50%;
  right: clamp(18px, 1.302083vw, 24px);
  transform: translateY(-50%);
  color: #777777;
  pointer-events: none;
}
/* 搜尋結果：直接顯示價格，不用點進去才知道 */
.calc-results {
  margin-top: 10px;
}
.calc-results .res-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.0416vw, 20px);
  width: 100%;
  padding: clamp(12px, 1.0416vw, 18px) clamp(14px, 1.302083vw, 22px);
  border: 1px solid #ebebeb;
  border-bottom: 0;
  background: white;
  text-align: left;
  transition: all 0.25s ease-in-out;
}
.calc-results .res-item:last-child {
  border-bottom: 1px solid #ebebeb;
}
.calc-results .res-item:hover {
  background: rgba(235, 38, 39, 0.06);
  border-color: #EB2627;
}
.calc-results .res-item .brand {
  flex: 0 0 auto;
  color: #777777;
  font-size: clamp(13px, 0.9375vw, 16px);
}
.calc-results .res-item .name {
  flex: 1;
  min-width: 0;
  color: #1C1C1C;
  font-size: clamp(15px, 1.0416vw, 19px);
}
.calc-results .res-item .value {
  flex: 0 0 auto;
  font-weight: 700;
  color: #C41E1F;
}
.calc-results .no-result {
  padding: 16px;
  color: #777777;
  text-align: center;
}
/* 清單 */
.calc-list-wrap {
  margin-top: clamp(24px, 2.604166vw, 50px);
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  padding: clamp(18px, 1.822916vw, 35px);
}
.calc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebebeb;
  font-weight: 700;
}
.calc-list-head .btn-clear {
  background: transparent;
  border: 0;
  color: #777777;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.calc-list-head .btn-clear:hover {
  color: #C41E1F;
}
.calc-list {
  margin: 0;
  padding: 0;
}
.calc-list li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.0416vw, 18px);
  padding: clamp(12px, 1.0416vw, 18px) 0;
  border-bottom: 1px solid #f5f5f5;
}
.calc-list .info {
  flex: 1;
  min-width: 0;
}
.calc-list .info .brand {
  display: block;
  color: #777777;
  font-size: clamp(12px, 0.833333vw, 15px);
}
.calc-list .info .name {
  display: block;
  color: #1C1C1C;
  font-size: clamp(14px, 1.0416vw, 18px);
  line-height: 1.4;
}
/* 數量用 +／− 按鈕，手機不用切換數字鍵盤 */
.calc-list .qty {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.calc-list .qty button {
  width: clamp(30px, 2.083vw, 36px);
  height: clamp(30px, 2.083vw, 36px);
  border: 1px solid #ebebeb;
  border-radius: 50%;
  background: white;
  color: #1C1C1C;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.calc-list .qty button:hover {
  border-color: #EB2627;
  color: #EB2627;
}
.calc-list .qty .num {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
}
.calc-list .sub {
  flex: 0 0 auto;
  min-width: clamp(64px, 5.2083vw, 100px);
  text-align: right;
  font-weight: 700;
  color: #1C1C1C;
}
.calc-list .del {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #bababa;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.calc-list .del:hover {
  color: #EB2627;
}
.calc-empty {
  padding: clamp(24px, 2.604166vw, 50px) 0;
  color: #777777;
  text-align: center;
}
.calc-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: clamp(14px, 1.302083vw, 24px);
  padding-top: clamp(14px, 1.302083vw, 24px);
  border-top: 2px solid #1C1C1C;
}
.calc-total .sum {
  color: #C41E1F;
  line-height: 1;
}
@media (max-width: 575px) {
  .calc-list li {
    flex-wrap: wrap;
  }
  .calc-list .info {
    flex: 0 0 100%;
  }
  .calc-list .sub {
    flex: 1;
    text-align: left;
  }
}

/*----- 兩段式：品牌列表 → 型號列表 -----*/
/* 先搜品牌再列型號，比直接搜型號準得多 ——
   打「RS」原本會撈出 Alpine RSE-M680、Amega QW6RS 這類雜訊。 */
.calc-results .brand-item .name {
  flex: 1;
  color: #1C1C1C;
  font-size: clamp(15px, 1.0416vw, 19px);
}
.calc-results .brand-item .go {
  flex: 0 0 auto;
  color: #bababa;
  font-size: 20px;
  line-height: 1;
}
.calc-models {
  margin-top: 10px;
  border: 1px solid #ebebeb;
  background: white;
}
.calc-models .models-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.0416vw, 16px) clamp(14px, 1.302083vw, 22px);
  border-bottom: 1px solid #ebebeb;
  background: #f5f5f5;
  font-weight: 700;
}
.calc-models .btn-back {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #C41E1F;
  font-weight: 400;
  cursor: pointer;
}
.calc-models .btn-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.calc-models .res-item {
  border-left: 0;
  border-right: 0;
}
.calc-models .res-item:first-child {
  border-top: 0;
}

/* 型號列沒有品牌欄佔位，.name 要自己撐開才不會跟價格黏在一起 */
.calc-models .res-item .name {
  flex: 1;
  min-width: 0;
  color: #1C1C1C;
  font-size: clamp(15px, 1.0416vw, 19px);
  padding-right: 12px;
}

/*----- 型號列表：補上 flex 並限制高度 -----*/
/* .res-item 的 flex 版面原本只掛在 .calc-results 底下，型號列在 .calc-models
   裡吃不到，269 個型號會變成行內流動擠成一團。這裡讓兩個容器共用同一組。
   另外像 Focal 有 269 個型號，一次全倒出來頁面會爆掉，改成固定高度內捲動。 */
.calc-models .res-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.0416vw, 20px);
  width: 100%;
  padding: clamp(12px, 1.0416vw, 18px) clamp(14px, 1.302083vw, 22px);
  border-top: 1px solid #ebebeb;
  background: white;
  text-align: left;
  transition: all 0.25s ease-in-out;
}
.calc-models .res-item:hover {
  background: rgba(235, 38, 39, 0.06);
}
#calc-model-list {
  max-height: clamp(280px, 31.25vw, 440px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*----- 總值常駐列與加入回饋 -----*/
/* 清單區在頁面下方（桌機實測在 y=976，視窗才 900），點了型號畫面毫無變化，
   使用者會以為壞掉。所以把總值固定在畫面下緣，並在按鈕本身給即時回饋。 */
.calc-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #1C1C1C;
  box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.18);
}
.calc-bar .bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.302083vw, 24px);
  padding: clamp(10px, 1.0416vw, 18px) 0;
}
.calc-bar .count {
  color: rgba(255, 255, 255, 0.7);
}
.calc-bar .sum {
  color: white;
  line-height: 1;
}
.calc-bar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(40px, 2.864583vw, 52px);
  padding: 0 clamp(18px, 1.5625vw, 30px);
  border: 0;
  border-radius: 5px;
  background: #EB2627;
  color: white;
  font-size: clamp(15px, 1.0416vw, 18px);
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.calc-bar .btn:hover {
  background: #C41E1F;
}
/* 常駐列會蓋住頁尾，補一段空間 */
.calc-tool {
  padding-bottom: clamp(120px, 9.375vw, 180px) !important;
}
/* 加入成功：按鈕整列閃一下 */
.calc-models .res-item.added {
  background: rgba(235, 38, 39, 0.14);
}
@media (max-width: 575px) {
  .calc-bar .bar-inner {
    justify-content: space-between;
    gap: 8px;
  }
  .calc-bar .count {
    flex: 0 0 auto;
  }
}

/*----- 手機版清單改回單行 -----*/
/* 原本 575 以下讓品名獨佔一行、數量與金額換到第二行，
   但這樣每筆佔兩倍高度，加了五六件就要一直捲。改回單行，
   代價是控制項要縮小：數量鈕 28px、金額欄改用 ch 單位貼齊數字寬度，
   品名允許斷成兩行（clamp 到 2 行，不會把列撐得太高）。 */
@media (max-width: 575px) {
  .calc-list li {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .calc-list .info {
    flex: 1;
    min-width: 0;
  }
  .calc-list .info .brand {
    font-size: 11px;
  }
  .calc-list .info .name {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .calc-list .qty {
    gap: 2px;
  }
  .calc-list .qty button {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
  .calc-list .qty .num {
    min-width: 20px;
    font-size: 14px;
  }
  .calc-list .sub {
    flex: 0 0 auto;
    min-width: 0;
    width: 7ch;
    text-align: right;
    font-size: 14px;
  }
  .calc-list .del {
    width: 22px;
    height: 22px;
    font-size: 17px;
  }
}

/* ── 一鍵存成圖片 ───────────────────────────────────────────────
   手機一屏截不到全部器材，改成把清單畫成 PNG 讓選手直接存檔。
   modal 用 flex 置中，圖片本身可捲動以應付項目多的長圖。 */
.calc-actions { margin-top: clamp(16px, 1.25vw, 24px); text-align: right; }
.calc-actions .btn { padding: 10px 26px; }
.calc-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.calc-modal[hidden] { display: none; }
.calc-modal .modal-inner { position: relative; background: #fff; border-radius: 4px;
  max-width: 520px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; }
.calc-modal .modal-close { position: absolute; top: -38px; right: 0; width: 32px; height: 32px;
  background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
/* 圖片本身不能捲動，捲動要交給外面這層；min-height:0 是讓 flex 子項真的縮得下去 */
.calc-modal .modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.calc-modal #calc-img { display: block; width: 100%; height: auto; }
.calc-modal .modal-foot { flex: 0 0 auto; padding: 14px 18px; border-top: 1px solid #ebebeb;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.calc-modal .modal-foot .hint { color: #777; }
@media (max-width: 575px) {
  .calc-actions { text-align: stretch; }
  .calc-actions .btn { display: block; width: 100%; }
}

/* ── 品牌代表入口 ───────────────────────────────────────────────
   價格資料由品牌方送件，這行是舊版 calc add 頁的入口。 */
/* 這一區的底色是淺灰 #F5F5F3，不是深底，文字要用跟標題同一組的深色 */
.calc-owner { margin-top: clamp(30px, 2.6vw, 50px); color: #1C1C1C; }
.calc-owner .link-owner { color: #EB2627; text-decoration: none; white-space: nowrap; }
/* hover 用深一階的紅（對比 5.4:1），不要用白色 —— 淺底上會整個看不見 */
.calc-owner .link-owner:hover { color: #C41E1F; text-decoration: none; }

/* ── 品牌代表申請頁 owner.php ──────────────────────────────────
   內容原本在 calc/add.html，搬進主站後套用 layout 的字級與配色。 */
.owner-page .owner-inner { max-width: 780px; margin: 0 auto; }
.owner-page .title { color: #1C1C1C; }
.owner-page .owner-body { color: #1C1C1C; line-height: 1.8; }
.owner-page .owner-body p { margin: 0 0 clamp(18px, 1.5vw, 28px); }
.owner-page .owner-list { margin: 0 0 clamp(18px, 1.5vw, 28px); padding-left: 1.4em; list-style: disc; }
.owner-page .owner-list li { list-style: disc; margin-bottom: 6px; }
.owner-page .color-red { color: #EB2627; }
.owner-page .owner-actions { margin: clamp(24px, 2vw, 36px) 0; text-align: center; }
.owner-page .owner-actions .btn { padding: 12px 40px; }
.owner-page .owner-note { color: #777; }
.owner-page .owner-back { margin-top: clamp(30px, 2.6vw, 50px); }
.owner-page .owner-back a { color: #EB2627; text-decoration: none; }
.owner-page .owner-back a:hover { color: #C41E1F; }

/* ── 通用紅色按鈕 ───────────────────────────────────────────────
   佈景的 .btn 本身沒有外觀，要靠情境樣式。原本只有常駐列那顆有寫，
   結果存成圖片／下載圖片／寄出信件三顆都長得像純文字。 */
.owner-actions .btn,
.calc-actions .btn,
.calc-modal .modal-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(42px, 3.125vw, 56px);
  padding: 0 clamp(24px, 2.08vw, 40px);
  border: 0;
  border-radius: 5px;
  background: #EB2627;
  color: #fff;
  font-size: clamp(15px, 1.0416vw, 18px);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.owner-actions .btn:hover,
.calc-actions .btn:hover,
.calc-modal .modal-foot .btn:hover {
  background: #C41E1F;
  color: #fff;
  text-decoration: none;
}

/* 預設清單有 50 筆，沒有上限會把整頁撐開 */
#calc-results {
  max-height: clamp(280px, 31.25vw, 440px);
  overflow-y: auto;
}

/*--------------------------------------------------------------------------*/
/*--------------- 底部通欄橫幅（fbt） ---------------------------------------*/
/* 參考 MacroMicro 的 #mm-fbt：釘在畫面下緣的整排廣告，右側一顆關閉鈕。
   預設是隱藏＋往下推 100%，js/fbt.js 判斷今天沒關過才補上 .open 滑上來。
   刻意不用 display:none 起手 —— 那樣沒有過場，而且改成 block 的瞬間會閃一下。
   z-index 88 壓在計算機的 .calc-bar（90）與明細 modal（9999）底下，
   兩個都是使用者正在操作的東西，廣告不該蓋過去。 */
.fbt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 88;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.35s ease-in-out, visibility 0.35s;
  transition: -webkit-transform 0.35s ease-in-out, visibility 0.35s;
  -o-transition: transform 0.35s ease-in-out, visibility 0.35s;
  transition: transform 0.35s ease-in-out, visibility 0.35s;
  transition: transform 0.35s ease-in-out, visibility 0.35s, -webkit-transform 0.35s ease-in-out;
}
.fbt.open {
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.fbt .fbt-content {
  position: relative;
  max-width: 1840px;
  margin: 0 auto;
  /* 圖是深色底，下方再墊一層同色避免 iPhone 安全區露出白邊 */
  background: #1C1C1C;
  -webkit-box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.25);
          box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.25);
  padding-bottom: env(safe-area-inset-bottom);
}
.fbt .fbt-link {
  display: block;
  line-height: 0;
}
.fbt .fbt-link img {
  width: 100%;
  height: auto;
  display: block;
}
/* 關閉鈕壓在橫幅右上角。桌機橫幅只有 180px 高，按鈕再往內縮會壓到文案，
   所以貼著右上角外緣放，手機同理。 */
.fbt .fbt-close {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(30px, 2.083vw, 40px);
  height: clamp(30px, 2.083vw, 40px);
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: clamp(20px, 1.5625vw, 28px);
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: background 0.25s ease-in-out;
  -o-transition: background 0.25s ease-in-out;
  transition: background 0.25s ease-in-out;
}
.fbt .fbt-close:hover {
  background: #EB2627;
}

/*--------------------------------------------------------------------------*/
/*--------------- H7 賽事卡：尚未開放報名的場次 -----------------------------*/
/* 這兩張卡原本是 <a class="item" href="">，空字串的 href 會指回目前這一頁 ——
   點下去整頁重新整理，看起來像壞掉。既然還沒有報名連結可以去，就不該是連結，
   HTML 改成 <div class="item is-soon">，按鈕也一併改成灰色的靜態樣式。
   卡片本身也拿掉 hover 的浮起效果，不要暗示它可以點。 */
.events-list-group .item.is-soon {
  cursor: default;
}
.events-list-group .item.is-soon:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}
.events-list-group .item.is-soon .action .btn,
.events-list-group .item.is-soon:hover .action .btn {
  background: transparent;
  border-color: #d5d5d5;
  color: #999999;
}