@font-face {
  font-family: "Onest";
  src: url("./fonts/Onest-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Bai Jamjuree";
  src: url("./fonts/BaiJamjuree-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Bai Jamjuree";
  src: url("./fonts/BaiJamjuree-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Bai Jamjuree";
  src: url("./fonts/BaiJamjuree-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Bai Jamjuree";
  src: url("./fonts/BaiJamjuree-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

body {
  background: var(--bg-color);
}

body * {
  font-family: var(--font-family);
}

body :is(h1, h2, h3, h4, h5, h6, button) {
  font-family: var(--title-font-family);
}

:root {

  /* * 1920px窗口下对应数值
   * --title-size: 48px
   * --banner-size: 80px
   * --text-size-xl: 32px
   * --text-size: 24px
   * --text-size-lg: 22px
   * --text-size-md: 17px
   * --text-size-sm: 14px
  */
  --font-family: "Onest";
  --title-font-family: "Bai Jamjuree";
  --title-size: clamp(32px, 2.5vw, 48px);
  --banner-size: clamp(48px, 4.167vw, 80px);
  --text-size-xl: clamp(20px, 1.67vw, 32px);
  --text-size: clamp(18px, 1.25vw, 24px);
  --text-size-lg: clamp(16px, 1.146vw, 22px);
  --text-size-md: clamp(14px, 0.885vw, 17px);
  --text-size-sm: clamp(12px, 0.729vw, 14px);

  /* 文本间距系列
   * 1920px窗口下对应数值：
   * --text-gap-xl: 38px
   * --text-gap: 27px
   * --text-gap-lg: 24px
   * --text-gap-md: 20px
   * --text-gap-sm: 18px
   * --text-gap-xs: 10px
  */
  --text-gap-xl: clamp(20px, 2.083vw, 40px);;
  --text-gap: clamp(18px, 1.406vw, 27px);
  --text-gap-lg: clamp(16px, 1.25vw, 24px);
  --text-gap-md: clamp(14px, 1.042vw, 20px);
  --text-gap-sm: clamp(12px, 0.938vw, 18px);
  --text-gap-xs: clamp(8px, 0.521vw, 10px);


  /* 模块区块间距
   * 1920px窗口下对应数值：
   * --component-gap: 120px
   * --component-gap-lg: 100px
   * --component-gap-md: 60px
   * --component-gap-sm: 50px
   * --component-gap-xs: 30px
  */
  --component-gap: clamp(60px, 6.25vw, 120px);
  --component-gap-lg: clamp(50px, 5.208vw, 100px);
  --component-gap-md: clamp(36px, 3.125vw, 60px);
  --component-gap-sm: clamp(30px, 2.604vw, 50px);
  --component-gap-xs: clamp(20px, 1.563vw, 30px);
  --page-padding: max(20px, calc((100vw - 1440px) / 2));

  --radius: clamp(6px, 0.521vw, 10px);
}



.is-uppercase {
  text-transform: uppercase;
}

.yibo-outline-btn {
  background: transparent;
  cursor: pointer;
  font-size: var(--text-size-md);
  font-family: var(--title-font-family);
  color: var(--title-text-color);
  border: 1px solid var(--title-text-color);
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  display: inline-block;
  padding: clamp(10px, 0.729vw, 14px) clamp(20px, 1.667vw, 32px);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.yibo-outline-btn span {
  display: block;
  transition: transform .4s cubic-bezier(.2, 1, .8, 1);
  position: relative;
  z-index: 1;
}

.yibo-outline-btn:hover span {
  transform: translate3d(-10px, 0, 0);
}


/* .yibo-outline-btn::after, */
.yibo-outline-btn {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.yibo-outline-btn::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  /* background: #C9610C; */
  background-color: transparent;
  content: '';
  position: absolute;
  z-index: -1;
}

.yibo-outline-btn.disabled {
  background: #C8C8C8;
  border-color: #C8C8C8;
  color: var(--color-second);
  cursor: not-allowed;
}


.yibo-outline-btn:hover {
  color: var(--color-second);
  border-color: #c9610c;
}

.yibo-outline-btn:hover::after {
  width: 100%;
  background: #c9610c;
}

.yibo-outline-btn:focus {
  color: var(--color-second);
  border-color: var(--color-primary);
}

.yibo-outline-btn:focus::after {
  background: var(--color-primary);
}


.yibo-outline-btn.secondary {
  color: var(--color-second);
  border-color: var(--color-second);
  background: transparent;
}



.yibo-outline-btn.disabled.secondary {
  color: var(--color-second);
  border-color: #C8C8C8;
  background: #C8C8C8;
}



.yibo-outline-btn.secondary:hover {
  color: var(--title-text-color);
  border-color: #EFEADE;
}

.yibo-outline-btn.secondary:hover::after {
  background: #EFEADE;
}

.yibo-outline-btn.secondary:focus {
  color: var(--title-text-color);
  border-color: #FFFAF4;
}

.yibo-outline-btn.secondary:focus::after {
  background: #FFFAF4;
}

.yibo-primary-btn {
  background: var(--color-primary);
  cursor: pointer;
  font-size: var(--text-size-md);
  font-family: var(--title-font-family);
  color: #FFFAF4;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  display: inline-block;
  padding: clamp(10px, 0.729vw, 14px) clamp(20px, 1.667vw, 32px);
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.yibo-primary-btn:hover {
  color: var(--color-second);
  border-color: #C9610C;
  background: #C9610C;
}

.yibo-primary-btn:active {
  background:#934100;
  border-color: #934100;
  color: var(--color-second);
}

.yibo-nav-btn,
.yibo-nav-btn.is-prev {
  width: clamp(20px, 1.458vw, 28px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  font-family: 'iconfont';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  font-size: var(--text-size-sm);
  cursor: pointer;
}

.yibo-nav-btn::before,
.yibo-nav-btn.is-prev::before {
  content: "\e69e";
  color: inherit;
  font-size: inherit;
}

.yibo-nav-btn.is-next::before {
  content: "\e69c";
}

.yibo-nav-btn:hover {
  background: var(--color-primary);
  color: var(--color-second);
  border-color: var(--color-primary);
}


.yibo-player-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.4375rem;
  height: 4.4375rem;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb),0.3);
}


.yibo-player-btn::after {
  content: '';
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  background: var(--color-second);
  clip-path: polygon(22% 10%, 22% 90%, 88% 50%);
  transform: translateX(0.1875rem);
}

.yibo-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--component-gap-lg);
  max-width: 100%;
  overflow: hidden;
}

.yibo-pagination:empty {
  display: none;
}

.yibo-pagination #pagesize {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--text-gap-sm);
  width: auto;
  /* max-width: 100%; */
  padding-bottom: var(--text-gap-md);
}

.yibo-pagination #pagesize::before,
.yibo-pagination #pagesize::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: clamp(3px, 0.221vw, 5px);
}

.yibo-pagination #pagesize::before {
  width: 100%;
  background: var(--color-second);
}

.yibo-pagination #pagesize::after {
  width: var(--yibo-pagination-progress, 0%);
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.yibo-pagination #pagesize ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--text-gap-xs);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yibo-pagination #pagesize li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.yibo-pagination #pagesize li:last-child {
  padding-left: var(--component-gap-md);
}
.yibo-pagination #pagesize li:first-child {
  padding-right: var(--component-gap-md);
}


.yibo-pagination #pagesize a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a09d9d;
  font-family: var(--font-family);
  font-size: var(--text-size-md);
  font-weight: 500;
  line-height: 1.4118;
  text-decoration: none;
  transition: all 0.25s ease;
  background: transparent;
  border: none;
}

.yibo-pagination #pagesize a.active,
.yibo-pagination #pagesize a:hover {
  color: var(--color-primary) !important;
  background: transparent;
  border: none;
  box-shadow: none;

}

.yibo-pagination #pagesize li:first-child a,
.yibo-pagination #pagesize li:last-child a {
  min-width: clamp(24px, 2.15vw, 42px);
  aspect-ratio: 1;
  border: 1px solid var(--title-text-color);
  border-radius: 50%;
  color: var(--title-text-color);
  font-family: "iconfont";
  font-size: var(--text-size-sm);
  background: #FFFAF4;
  border: none;
}

.yibo-pagination #pagesize li:first-child a:hover,
.yibo-pagination #pagesize li:last-child a:hover {
  background: var(--color-primary);
  color: #FFFAF4 !important;
}

.yibo-pagination #pagesize a.disabled {
  opacity: 0.35;
  pointer-events: none;
}


/* 针对类名 .yibo-xScrollbar 的横向滚动条 - 暖米色主题适配 */

/* 1. 设置横向滚动条高度 */
.yibo-xScrollbar::-webkit-scrollbar {
  height: 8px; 
}

/* 2. 设置轨道（背景） */
/* 使用 #e6e0d4，比主题色 #efeade 稍深，形成自然的层次 */
.yibo-xScrollbar::-webkit-scrollbar-track {
  background: #e6e0d4;
  border-radius: 4px;
}

/* 3. 设置滑块（可拖动部分） */
/* 使用 #a8a29e，一种温暖的灰褐色，与米色背景完美融合 */
.yibo-xScrollbar::-webkit-scrollbar-thumb {
  background: #a8a29e;
  border-radius: 4px;
  border: 2px solid #f1f1f1; /* 保持内边距与轨道同色，增加立体感 */
}

/* 4. 鼠标悬停在滑块上 */
/* 使用 #8c857b，稍微加深，保持暖色调 */
.yibo-xScrollbar::-webkit-scrollbar-thumb:hover {
  /* background: #8c857b;  */
  background: transparent;
}

/* 5. 鼠标点击/拖动滑块时 */
/* 使用 #78716c，进一步加深，提供明确的操作感 */
.yibo-xScrollbar::-webkit-scrollbar-thumb:active {
  background: #78716c; 
}

/* --- Firefox 兼容性支持 --- */
.yibo-xScrollbar {
  scrollbar-width: thin;
  /* 滑块 #a8a29e, 轨道 #e6e0d4 */
  scrollbar-color: #ccc #f1f1f1;
  overflow-y: hidden;
  overflow-x: auto;
}



@media screen and (min-width: 576px) {
  :root {
    --page-padding: max(20px, calc((100vw - 540px) / 2));
  }
}

@media screen and (min-width: 768px) {
  :root {
    --page-padding: max(20px, calc((100vw - 720px) / 2));
  }
}

@media screen and (min-width: 992px) {
  :root {
    --page-padding: max(20px, calc((100vw - 960px) / 2));
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --page-padding: max(20px, calc((100vw - 1140px) / 2));
  }
}


@media screen and (min-width: 1280px) {
  :root {
    --page-padding: max(20px, calc((100vw - 1200px) / 2));
  }
}

@media screen and (min-width: 1500px) {
  :root {
    --page-padding: max(20px, calc((100vw - 1400px) / 2));
  }
  .container {
    max-width: 1400px;
  }
}