@charset "UTF-8";
:root {
  --rem-base: 1rem;
  --vw-base: calc(375px / 100);
  --use-vw: 0;
  --home-section-height-desktop: calc((1 - var(--use-vw)) * calc(734 / 16 * var(--rem-base)) + var(--use-vw) * calc(734 / 375 * 100vw));
  --home-section-height-mobile: calc((1 - var(--use-vw)) * calc(560 / 16 * var(--rem-base)) + var(--use-vw) * calc(560 / 375 * 100vw));
  --home-section-spacing-bottom: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  --trend-card-width-default: calc((1 - var(--use-vw)) * calc(195 / 16 * var(--rem-base)) + var(--use-vw) * calc(195 / 375 * 100vw));
  --trend-card-width-active: calc((1 - var(--use-vw)) * calc(415 / 16 * var(--rem-base)) + var(--use-vw) * calc(415 / 375 * 100vw));
  --trend-card-width-mobile: calc((1 - var(--use-vw)) * calc(312 / 16 * var(--rem-base)) + var(--use-vw) * calc(312 / 375 * 100vw));
}

@media (max-width: 376px) {
  :root {
    --use-vw: 1;
  }
}

.highlight,
.trend,
.interview {
  height: var(--home-section-height-desktop);
  max-height: var(--home-section-height-desktop);
}

@media (max-width: 768px) {
  .highlight,
  .trend,
  .interview {
    height: var(--home-section-height-mobile);
    max-height: var(--home-section-height-mobile);
  }
}
.topic {
  padding-top: calc((1 - var(--use-vw)) * calc(22 / 16 * var(--rem-base)) + var(--use-vw) * calc(22 / 375 * 100vw));
  padding-bottom: calc((1 - var(--use-vw)) * calc(22 / 16 * var(--rem-base)) + var(--use-vw) * calc(22 / 375 * 100vw));
}
.topic__container {
  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;
}
@media (max-width: 960px) {
  .topic__container {
    width: 100%;
    padding-right: 0;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.topic__title {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-weight: 900;
  font-size: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  line-height: calc((1 - var(--use-vw)) * calc(24 / 16 * var(--rem-base)) + var(--use-vw) * calc(24 / 375 * 100vw));
  color: #ad8b10;
}
.topic__content {
  overflow-x: auto;
}
.topic__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc((1 - var(--use-vw)) * calc(30 / 16 * var(--rem-base)) + var(--use-vw) * calc(30 / 375 * 100vw));
}
@media (max-width: 960px) {
  .topic__list {
    gap: calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw));
  }
}
.topic__item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.topic__link {
  display: inline-block;
  font-weight: 300;
  font-size: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  line-height: calc((1 - var(--use-vw)) * calc(24 / 16 * var(--rem-base)) + var(--use-vw) * calc(24 / 375 * 100vw));
  color: #fff;
  background-color: #ad8b10;
  padding: calc((1 - var(--use-vw)) * calc(12 / 16 * var(--rem-base)) + var(--use-vw) * calc(12 / 375 * 100vw)) calc((1 - var(--use-vw)) * calc(18 / 16 * var(--rem-base)) + var(--use-vw) * calc(18 / 375 * 100vw));
  border-radius: calc((1 - var(--use-vw)) * calc(50 / 16 * var(--rem-base)) + var(--use-vw) * calc(50 / 375 * 100vw));
}
@media (max-width: 960px) {
  .topic__link {
    font-size: calc((1 - var(--use-vw)) * calc(14 / 16 * var(--rem-base)) + var(--use-vw) * calc(14 / 375 * 100vw));
  }
}

.interview {
  padding-top: calc((1 - var(--use-vw)) * calc(50 / 16 * var(--rem-base)) + var(--use-vw) * calc(50 / 375 * 100vw));
  padding-bottom: calc((1 - var(--use-vw)) * calc(80 / 16 * var(--rem-base)) + var(--use-vw) * calc(80 / 375 * 100vw));
}
@media (max-width: 768px) {
  .interview {
    padding-top: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
    padding-bottom: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  }
}
.interview .main-title {
  color: #1e5125;
}
.interview  .main-title::before {
    background-color: #1e5125;
  }
.interview__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
  gap: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  overflow-x: auto;
}
@media (min-width: 769px) {
  .interview__list-item {
     flex: 1;
  }
}
@media (max-width: 768px) {
  .interview__list-item {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: calc((1 - var(--use-vw)) * calc(312 / 16 * var(--rem-base)) + var(--use-vw) * calc(312 / 375 * 100vw));
  }
}
.interview__list-link {
  display: block;
}
.interview__list-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc((1 - var(--use-vw)) * calc(8 / 16 * var(--rem-base)) + var(--use-vw) * calc(8 / 375 * 100vw));
  overflow: hidden;
  margin-bottom: calc((1 - var(--use-vw)) * calc(12 / 16 * var(--rem-base)) + var(--use-vw) * calc(12 / 375 * 100vw));
}
.interview__list-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.interview__list-image:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
}
.interview__list-title {
  margin-bottom: calc((1 - var(--use-vw)) * calc(8 / 16 * var(--rem-base)) + var(--use-vw) * calc(8 / 375 * 100vw));
  font-size: calc((1 - var(--use-vw)) * calc(24 / 16 * var(--rem-base)) + var(--use-vw) * calc(24 / 375 * 100vw));
  line-height: 1.2;
  font-weight: 700;
  color: #2f1004;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 768px) {
  .interview__list-title {
    font-size: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  }
}
.interview__list-text {
  font-weight: 300;
  font-size: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  line-height: 1.5;
  color: #4b4b4e;
}
@media (max-width: 768px) {
  .interview__list-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

.highlight {
  padding-top: calc((1 - var(--use-vw)) * calc(30 / 16 * var(--rem-base)) + var(--use-vw) * calc(30 / 375 * 100vw));
  padding-bottom: calc((1 - var(--use-vw)) * calc(60 / 16 * var(--rem-base)) + var(--use-vw) * calc(60 / 375 * 100vw));
  background-color: #eec944;
  background-image: url("../../images/star-bg.png");
  overflow: hidden;
}
@media (max-width: 768px) {
  .highlight {
    padding-top: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
    padding-bottom: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  }
}
.highlight__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr;
  grid-template-columns: repeat(12, 1fr);
  gap: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.highlight__image {
  -ms-grid-column-span: 8;
  grid-column: span 8;
  border-radius: calc((1 - var(--use-vw)) * calc(8 / 16 * var(--rem-base)) + var(--use-vw) * calc(8 / 375 * 100vw));
  overflow: hidden;
  aspect-ratio: 860 / 480;
}
@media (max-width: 536px) {
  .highlight__image {
    -ms-grid-column-span: 12;
    grid-column: span 12;
  }
}
.highlight__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.highlight__content {
  -ms-grid-column-span: 4;
  grid-column: span 4;
}
@media (max-width: 768px) {
  .highlight__content {
    -ms-grid-column-span: 12;
    grid-column: span 12;
  }
}
.highlight__content-title {
  padding-bottom: calc((1 - var(--use-vw)) * calc(12 / 16 * var(--rem-base)) + var(--use-vw) * calc(12 / 375 * 100vw));
  font-weight: 600;
  font-size: calc((1 - var(--use-vw)) * calc(32 / 16 * var(--rem-base)) + var(--use-vw) * calc(32 / 375 * 100vw));
  line-height: 1.2;
  color: #171302;
}
@media (max-width: 768px) {
  .highlight__content-title {
    font-size: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  }
}
.highlight__content-text {
  font-weight: 300;
  font-size: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  line-height: 1.5;
  color: #4b4b4e;
}

.learn {
  padding-top: calc((1 - var(--use-vw)) * calc(30 / 16 * var(--rem-base)) + var(--use-vw) * calc(30 / 375 * 100vw));
  padding-bottom: calc((1 - var(--use-vw)) * calc(60 / 16 * var(--rem-base)) + var(--use-vw) * calc(60 / 375 * 100vw));
  background-color: #1e5125;
}
@media (max-width: 768px) {
  .learn {
    padding-top: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
    padding-bottom: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  }
}
.learn__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
}
@media (max-width: 768px) {
  .learn__grid {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
.learn__link {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw)) 1fr;
  grid-template-columns: repeat(12, 1fr);
  gap: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  border-radius: calc((1 - var(--use-vw)) * calc(8 / 16 * var(--rem-base)) + var(--use-vw) * calc(8 / 375 * 100vw));
  overflow: hidden;
}
.learn__link:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
}
.learn__image {
  -ms-grid-column-span: 4;
  grid-column: span 4;
  height: 100%;
  overflow: hidden;
}
.learn__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc((1 - var(--use-vw)) * calc(150 / 16 * var(--rem-base)) + var(--use-vw) * calc(150 / 375 * 100vw));
  -o-object-fit: cover;
     object-fit: cover;
}
.learn__content {
  padding-right: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  -ms-grid-column-span: 8;
  grid-column: span 8;
}
@media (max-width: 768px) {
  .learn__content {
    padding: calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw)) calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw)) calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw)) 0;
  }
}
.learn__content-title {
  padding-bottom: calc((1 - var(--use-vw)) * calc(12 / 16 * var(--rem-base)) + var(--use-vw) * calc(12 / 375 * 100vw));
  font-weight: 700;
  font-size: calc((1 - var(--use-vw)) * calc(24 / 16 * var(--rem-base)) + var(--use-vw) * calc(24 / 375 * 100vw));
  line-height: 1.2;
  color: #1a1a1a;
}
@media (max-width: 1180px) {
  .learn__content-title {
    font-size: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  }
}
.learn__content-text {
  font-weight: 300;
  font-size: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  line-height: 1.5;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .learn__content-text {
    font-size: calc((1 - var(--use-vw)) * calc(14 / 16 * var(--rem-base)) + var(--use-vw) * calc(14 / 375 * 100vw));
  }
}

.banner {
  padding-top: calc((1 - var(--use-vw)) * calc(25 / 16 * var(--rem-base)) + var(--use-vw) * calc(25 / 375 * 100vw));
  margin-bottom: calc((1 - var(--use-vw)) * calc(70 / 16 * var(--rem-base)) + var(--use-vw) * calc(70 / 375 * 100vw));
  /* 中心圖片樣式 */
  /* 左側圖片樣式 */
  /* 右側圖片樣式 */
  /* 隱藏的圖片 */
  /* 導航按鈕 */
  /* 指示器 */
}
@media (max-width: 960px) {
  .banner {
    padding-top: 0;
    margin-bottom: 0;
  }
}
@media (min-width: 1281px) {
  .banner__mobile {
    display: none;
  }
}
.banner__container {
  position: relative;
  max-width: calc((1 - var(--use-vw)) * calc(896 / 16 * var(--rem-base)) + var(--use-vw) * calc(896 / 375 * 100vw));
}
@media (max-width: 960px) {
  .banner__container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
}
.banner__pagination {
  position: relative;
  height: calc((1 - var(--use-vw)) * calc(50 / 16 * var(--rem-base)) + var(--use-vw) * calc(50 / 375 * 100vw));
}
.banner__content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: calc((1 - var(--use-vw)) * calc(15 / 16 * var(--rem-base)) + var(--use-vw) * calc(15 / 375 * 100vw));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  width: 100%;
}
.banner .swiper-slide-active .banner__title, .banner .swiper-slide-active .banner__text {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.banner .swiper-slide-active .banner__title {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.banner .swiper-slide-active .banner__text {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.banner__title {
  margin-bottom: calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw));
  font-size: calc((1 - var(--use-vw)) * calc(24 / 16 * var(--rem-base)) + var(--use-vw) * calc(24 / 375 * 100vw));
  line-height: 1.2;
  color: #fff;
  -webkit-transform: translateY(calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw)));
          transform: translateY(calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw)));
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.banner__text {
  font-size: calc((1 - var(--use-vw)) * calc(14 / 16 * var(--rem-base)) + var(--use-vw) * calc(14 / 375 * 100vw));
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  opacity: 0.7;
  -webkit-transform: translateY(calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw)));
          transform: translateY(calc((1 - var(--use-vw)) * calc(10 / 16 * var(--rem-base)) + var(--use-vw) * calc(10 / 375 * 100vw)));
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.banner__item {
  position: relative;
}
.banner__image {
  width: 100%;
  height: calc((1 - var(--use-vw)) * calc(300 / 16 * var(--rem-base)) + var(--use-vw) * calc(300 / 375 * 100vw));
  overflow: hidden;
}
.banner__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.banner .carousel-container {
  width: 100%;
  max-width: calc((1 - var(--use-vw)) * calc(896 / 16 * var(--rem-base)) + var(--use-vw) * calc(896 / 375 * 100vw));
  height: calc((1 - var(--use-vw)) * calc(500 / 16 * var(--rem-base)) + var(--use-vw) * calc(500 / 375 * 100vw));
  position: relative;
  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;
  -webkit-perspective: 1200px;
          perspective: 1200px;
}
@media (max-width: 1280px) {
  .banner .carousel-container {
    display: none;
  }
}
.banner .carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  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;
}
.banner .carousel-item {
  position: absolute;
  border-radius: calc((1 - var(--use-vw)) * calc(8 / 16 * var(--rem-base)) + var(--use-vw) * calc(8 / 375 * 100vw));
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.banner .carousel-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-filter 0.8s ease;
  transition: -webkit-filter 0.8s ease;
  transition: filter 0.8s ease;
  transition: filter 0.8s ease, -webkit-filter 0.8s ease;
}
.banner .carousel-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.8)));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 30px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.banner .carousel-item .overlay h3 {
  margin-bottom: calc((1 - var(--use-vw)) * calc(7 / 16 * var(--rem-base)) + var(--use-vw) * calc(7 / 375 * 100vw));
  font-weight: 700;
  font-size: calc((1 - var(--use-vw)) * calc(36 / 16 * var(--rem-base)) + var(--use-vw) * calc(36 / 375 * 100vw));
  line-height: 1.2;
}
.banner .carousel-item .overlay p {
  font-weight: 300;
  font-size: calc((1 - var(--use-vw)) * calc(14 / 16 * var(--rem-base)) + var(--use-vw) * calc(14 / 375 * 100vw));
  line-height: 1.2;
  color: #fff;
  opacity: 0.8;
}
.banner .carousel-item.center {
  width: 850px;
  height: 500px;
  z-index: 3;
  -webkit-transform: translateX(0) scale(1) rotateY(0deg);
          transform: translateX(0) scale(1) rotateY(0deg);
  -webkit-box-shadow: 0 calc((1 - var(--use-vw)) * calc(4 / 16 * var(--rem-base)) + var(--use-vw) * calc(4 / 375 * 100vw)) calc((1 - var(--use-vw)) * calc(4 / 16 * var(--rem-base)) + var(--use-vw) * calc(4 / 375 * 100vw)) rgba(0, 0, 0, 0.2509803922);
          box-shadow: 0 calc((1 - var(--use-vw)) * calc(4 / 16 * var(--rem-base)) + var(--use-vw) * calc(4 / 375 * 100vw)) calc((1 - var(--use-vw)) * calc(4 / 16 * var(--rem-base)) + var(--use-vw) * calc(4 / 375 * 100vw)) rgba(0, 0, 0, 0.2509803922);
}
.banner .carousel-item.center img {
  -webkit-filter: blur(0px) brightness(1);
          filter: blur(0px) brightness(1);
}
.banner .carousel-item.left {
  width: calc((1 - var(--use-vw)) * calc(230 / 16 * var(--rem-base)) + var(--use-vw) * calc(230 / 375 * 100vw));
  height: calc((1 - var(--use-vw)) * calc(360 / 16 * var(--rem-base)) + var(--use-vw) * calc(360 / 375 * 100vw));
  z-index: 2;
  -webkit-transform: translateX(calc((1 - var(--use-vw)) * calc(-555 / 16 * var(--rem-base)) + var(--use-vw) * calc(-555 / 375 * 100vw))) scale(1) rotateY(25deg);
          transform: translateX(calc((1 - var(--use-vw)) * calc(-555 / 16 * var(--rem-base)) + var(--use-vw) * calc(-555 / 375 * 100vw))) scale(1) rotateY(25deg);
  opacity: 0.7;
}
.banner .carousel-item.left img {
  -webkit-filter: blur(2px) brightness(0.7);
          filter: blur(2px) brightness(0.7);
}
.banner .carousel-item.left .overlay {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.banner .carousel-item.right {
  width: calc((1 - var(--use-vw)) * calc(230 / 16 * var(--rem-base)) + var(--use-vw) * calc(230 / 375 * 100vw));
  height: calc((1 - var(--use-vw)) * calc(360 / 16 * var(--rem-base)) + var(--use-vw) * calc(360 / 375 * 100vw));
  z-index: 2;
  -webkit-transform: translateX(calc((1 - var(--use-vw)) * calc(555 / 16 * var(--rem-base)) + var(--use-vw) * calc(555 / 375 * 100vw))) scale(1) rotateY(-25deg);
          transform: translateX(calc((1 - var(--use-vw)) * calc(555 / 16 * var(--rem-base)) + var(--use-vw) * calc(555 / 375 * 100vw))) scale(1) rotateY(-25deg);
  opacity: 0.7;
}
.banner .carousel-item.right img {
  -webkit-filter: blur(2px) brightness(0.7);
          filter: blur(2px) brightness(0.7);
}
.banner .carousel-item.right .overlay {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.banner .carousel-item.hidden {
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  z-index: 1;
}
.banner .nav-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: calc((1 - var(--use-vw)) * calc(48 / 16 * var(--rem-base)) + var(--use-vw) * calc(48 / 375 * 100vw));
  height: calc((1 - var(--use-vw)) * calc(48 / 16 * var(--rem-base)) + var(--use-vw) * calc(48 / 375 * 100vw));
  background-color: #f2f2f3;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  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: 24px;
  color: #333;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.banner .nav-btn:hover {
  background: rgb(255, 255, 255);
  -webkit-transform: translateY(-50%) scale(1.1);
          transform: translateY(-50%) scale(1.1);
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.banner .nav-btn.prev {
  left: calc((1 - var(--use-vw)) * calc(-160 / 16 * var(--rem-base)) + var(--use-vw) * calc(-160 / 375 * 100vw));
}
.banner .nav-btn.next {
  right: calc((1 - var(--use-vw)) * calc(-160 / 16 * var(--rem-base)) + var(--use-vw) * calc(-160 / 375 * 100vw));
}
.banner .indicators {
  position: absolute;
  bottom: calc((1 - var(--use-vw)) * calc(-65 / 16 * var(--rem-base)) + var(--use-vw) * calc(-65 / 375 * 100vw));
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  z-index: 10;
}
.banner .indicator {
  width: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  height: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  border-radius: 50%;
  border: calc((1 - var(--use-vw)) * calc(1 / 16 * var(--rem-base)) + var(--use-vw) * calc(1 / 375 * 100vw)) solid #cbcbcd;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.banner .indicator.active {
  background-color: #1e5125;
  border-color: #1e5125;
}

.trend {
  padding-top: calc((1 - var(--use-vw)) * calc(30 / 16 * var(--rem-base)) + var(--use-vw) * calc(30 / 375 * 100vw));
  padding-bottom: calc((1 - var(--use-vw)) * calc(70 / 16 * var(--rem-base)) + var(--use-vw) * calc(70 / 375 * 100vw));
}
@media (max-width: 768px) {
  .trend {
  }
}
.trend__container {
  position: relative;
}
@media (min-width: 961px) {
  .trend__container {
    min-height: calc((1 - var(--use-vw)) * calc(595 / 16 * var(--rem-base)) + var(--use-vw) * calc(595 / 375 * 100vw));
  }
}
.trend__slider {
  width: 100%;
}
@media (min-width: 1281px) {
  .trend__slider {
    max-width: calc((1 - var(--use-vw)) * calc(415 / 16 * var(--rem-base)) + var(--use-vw) * calc(415 / 375 * 100vw));
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: translateX(calc((1 - var(--use-vw)) * calc(95 / 16 * var(--rem-base)) + var(--use-vw) * calc(95 / 375 * 100vw))) rotateY(180deg);
            transform: translateX(calc((1 - var(--use-vw)) * calc(95 / 16 * var(--rem-base)) + var(--use-vw) * calc(95 / 375 * 100vw))) rotateY(180deg);
  }
}
@media (min-width: 1281px) {
  .trend__slider .swiper {
    height: calc((1 - var(--use-vw)) * calc(600 / 16 * var(--rem-base)) + var(--use-vw) * calc(600 / 375 * 100vw));
    overflow: visible;
  }
}
@media (min-width: 1281px) {
  .trend__slider .swiper-wrapper {
    height: 100%;
    gap: calc((1 - var(--use-vw)) * calc(15 / 16 * var(--rem-base)) + var(--use-vw) * calc(15 / 375 * 100vw));
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }
}
@media (max-width: 1280px) {
  .trend__slider .swiper-wrapper {
    width: 100%;
    overflow-x: auto;
  }
}
@media (min-width: 1281px) {
  .trend__image, .trend__content {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
.trend .swiper-slide {
  position: relative;
}
@media (min-width: 1281px) {
  .trend .swiper-slide {
    width: calc((1 - var(--use-vw)) * calc(195 / 16 * var(--rem-base)) + var(--use-vw) * calc(195 / 375 * 100vw));
    height: calc((1 - var(--use-vw)) * calc(480 / 16 * var(--rem-base)) + var(--use-vw) * calc(480 / 375 * 100vw));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
@media (max-width: 1280px) {
  .trend .swiper-slide {
    width: calc((1 - var(--use-vw)) * calc(312 / 16 * var(--rem-base)) + var(--use-vw) * calc(312 / 375 * 100vw));
    margin-right: calc((1 - var(--use-vw)) * calc(15 / 16 * var(--rem-base)) + var(--use-vw) * calc(15 / 375 * 100vw));
  }
}
.trend .swiper-slide-active {
  width: calc((1 - var(--use-vw)) * calc(415 / 16 * var(--rem-base)) + var(--use-vw) * calc(415 / 375 * 100vw));
  padding-top: 0;
}
@media (min-width: 1280px) {
  .trend .swiper-slide-active .trend__image {
    width: var(--trend-card-width-active);
    height: calc((1 - var(--use-vw)) * calc(478 / 16 * var(--rem-base)) + var(--use-vw) * calc(478 / 375 * 100vw));
  }
  .trend .swiper-slide-active .trend__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.trend .swiper-slide-active .trend__content {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 1281px) {
  .trend .swiper-slide-active .trend__content {
    width: var(--trend-card-width-active);
  }
}
.trend__image {
  border-radius: calc((1 - var(--use-vw)) * calc(8 / 16 * var(--rem-base)) + var(--use-vw) * calc(8 / 375 * 100vw));
  overflow: hidden;
  width: var(--trend-card-width-default);
  height: calc((1 - var(--use-vw)) * calc(130 / 16 * var(--rem-base)) + var(--use-vw) * calc(130 / 375 * 100vw));
}
.trend__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1280px) {
  .trend__image {
    width: var(--trend-card-width-mobile);
    height: var(--trend-card-width-mobile);
    margin-bottom: calc((1 - var(--use-vw)) * calc(15 / 16 * var(--rem-base)) + var(--use-vw) * calc(15 / 375 * 100vw));
  }
}

.trend__content {
  box-sizing: border-box;
  width: var(--trend-card-width-default);
}
@media (min-width: 1281px) {
  .trend__content {
    position: absolute;
    right: 100%;
    top: 0;
    padding-left: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
    padding-top: calc((1 - var(--use-vw)) * calc(50 / 16 * var(--rem-base)) + var(--use-vw) * calc(50 / 375 * 100vw));
    opacity: 0;
    pointer-events: none;
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
  }
}
@media (max-width: 1280px) {
  .trend__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: var(--trend-card-width-mobile);
  }
}
.trend__content-title {
  margin-bottom: calc((1 - var(--use-vw)) * calc(12 / 16 * var(--rem-base)) + var(--use-vw) * calc(12 / 375 * 100vw));
  font-size: calc((1 - var(--use-vw)) * calc(32 / 16 * var(--rem-base)) + var(--use-vw) * calc(32 / 375 * 100vw));
  line-height: 1.2;
  color: #2f1004;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .trend__content-title {
    font-size: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
  }
}
.trend__content-text {
  font-weight: 300;
  font-size: calc((1 - var(--use-vw)) * calc(16 / 16 * var(--rem-base)) + var(--use-vw) * calc(16 / 375 * 100vw));
  line-height: 1.5;
  color: #4b4b4e;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.trend__nav {
  position: absolute;
  right: 0;
  bottom: -50px;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc((1 - var(--use-vw)) * calc(20 / 16 * var(--rem-base)) + var(--use-vw) * calc(20 / 375 * 100vw));
}
@media (max-width: 1280px) {
  .trend__nav {
    display: none;
  }
}
.trend__nav-btn {
  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;
  width: calc((1 - var(--use-vw)) * calc(48 / 16 * var(--rem-base)) + var(--use-vw) * calc(48 / 375 * 100vw));
  height: calc((1 - var(--use-vw)) * calc(48 / 16 * var(--rem-base)) + var(--use-vw) * calc(48 / 375 * 100vw));
  background-color: #ad8b10;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.trend-no-recalc .swiper-slide.swiper-slide-transition {
  pointer-events: none;
}
.trend-no-recalc .swiper.swiper-transitioning .swiper-wrapper {
  pointer-events: none;
}