:root {

    --font-80: 80px;
    --font-70: 70px;
    --font-76: 76px;
    --font-72: 72px;
    --font-64: 64px;
    --font-60: 60px;
    --font-56: 56px;
    --font-50: 50px;
    --font-48: 48px;
    --font-46: 46px;
    --font-42: 42px;
    --font-40: 40px;
    --font-38: 38px;
    --font-36: 36px;
    --font-30: 30px;
    --font-32: 32px;
    --font-28: 28px;
    --font-26: 26px;
    --font-24: 24px;
    --font-22: 22px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 16px;
    --font-14: 14px;

    --component-gap: 120px;
    --gap-175: 175px;
    --gap-100: 100px;
    --gap-90: 90px;
    --gap-80: 80px;
    --gap-72: 72px;
    --gap-70: 70px;
    --gap-60: 60px;
    --gap-50: 50px;
    --gap-40: 40px;
    --gap-30: 30px;
    --gap-25: 25px;
    --gap-24: 24px;
    --gap-22: 22px;
    --gap-20: 20px;
    --gap-14: 14px;
    --gap-12: 12px;
    --gap-10: 10px;

    --page-padding: max(40px, calc((100vw - 1600px) / 2));
}




.container {
  width: min(1600px, calc(100vw - 80px));
  /* max-width: none; */
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.weiyou-public-title {
  margin: 0;
  color: #0A4C7F;
  font-family: var(--font-family);
  font-size: var(--font-64);
  font-weight: 700;
  line-height: 1.2;
}

.weiyou-btn-hover {
  overflow: hidden;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.weiyou-btn-hover .weiyou-btn-text {
  display: block;
  overflow: hidden;
  min-width: 0;
}

.weiyou-btn-hover .weiyou-btn-text-inner {
  position: relative;
  display: block;
  min-width: 0;
  transition: transform .36s ease;
  will-change: transform;
}

.weiyou-btn-hover .weiyou-btn-text-inner::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  content: attr(data-text);
  color: inherit;
  text-align: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
}

.weiyou-btn-hover:hover .weiyou-btn-text-inner {
  transform: translateY(-100%);
}

.weiyou-btn-hover:hover {
  border-color: var(--color-primary, #1DADEC) !important;
  background: var(--color-primary, #1DADEC) !important;
  color: #fff !important;
}

.weiyou-pagination {
  margin-top: var(--gap-60);
}

.weiyou-pagination #pagesize {
  width: 100%;
  margin: 0;
}

.weiyou-pagination #pagesize ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.weiyou-pagination #pagesize ul li {
  display: block;
  margin: 0;
  padding: 0;
}

.weiyou-pagination #pagesize ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: transparent;
  box-shadow: none !important;
  color: #0A4C7F;
  font-family: var(--font-family);
  font-size: var(--font-20);
  font-weight: 600;
  line-height: 34px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color .25s ease, color .25s ease;
}

.weiyou-pagination #pagesize ul li a.active,
.weiyou-pagination #pagesize ul li a:not(.disabled):hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

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

.weiyou-pagination #pagesize ul li a.disabled {
  border: 0 !important;
  background: transparent !important;
  color: #CCCCCC !important;
  pointer-events: none;
}

.weiyou-pagination svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 576px) {
  .weiyou-pagination #pagesize ul li a {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}

@media screen and (max-width: 1600px) {
  :root {
    --page-padding: 32px;
  }

  .container {
    width: min(1600px, calc(100vw - 64px));
  }
}

@media screen and (max-width: 1400px) {
  :root {
    --page-padding: 24px;
  }

  .container {
    width: min(1600px, calc(100vw - 48px));
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --page-padding: 16px;
  }

  .container {
    width: min(1600px, calc(100vw - 32px));
  }
}

@media screen and (max-width: 576px) {
  .container {
    width: min(1600px, calc(100vw - 32px));
  }
}


@media (max-width: 1500px) {


    :root {

        --font-80: 72px;
        --font-76: 68px;
        --font-70: 65px;
        --font-64: 60px;
        --font-60: 56px;
        --font-56: 52px;
        --font-50: 46px;
        --font-48: 44px;
        --font-46: 42px;
        --font-42: 40px;
        --font-40: 38px;
        --font-36: 34px;
        --font-32: 30px;
        --font-30: 28px;
        --font-28: 26px;
        --font-26: 24px;
        --font-24: 22px;
        --font-22: 20px;
        --font-20: 18px;
        --font-18: 18px;
        --font-16: 16px;
        --font-14: 16px;

        --component-gap: 100px;
        --gap-175: 150px;
        --gap-100: 90px;
        --gap-90: 80px;
        --gap-80: 70px;
        --gap-72: 65px;
        --gap-70: 60px;
        --gap-60: 50px;
        --gap-50: 44px;
        --gap-40: 34px;
        --gap-30: 28px;
        --gap-25: 24px;
        --gap-24: 24px;
        --gap-22: 22px;
        --gap-20: 20px;
        --gap-10: 10px;
        --gap-14: 12px;
        --gap-12: 10px;
    }


}

@media (max-width: 1280px) {


    :root {
        --font-80: 70px;
        --font-76: 64px;
        --font-70: 60px;
        --font-64: 56px;
        --font-60: 52px;
        --font-56: 48px;
        --font-50: 44px;
        --font-48: 40px;
        --font-46: 40px;
        --font-42: 38px;
        --font-40: 36px;
        --font-38: 34px;
        --font-36: 26px;
        --font-32: 26px;
        --font-30: 26px;
        --font-28: 24px;
        --font-26: 22px;
        --font-24: 22px;
        --font-22: 20px;
        --font-20: 18px;
        --font-18: 18px;
        --font-16: 16px;
        --font-14: 16px;

        --component-gap: 90px;
        --gap-175: 120px;
        --gap-100: 80px;
        --gap-90: 75px;
        --gap-80: 65px;
        --gap-72: 55px;
        --gap-70: 50px;
        --gap-60: 45px;
        --gap-50: 40px;
        --gap-40: 30px;
        --gap-30: 25px;
        --gap-25: 24px;
        --gap-24: 24px;
        --gap-22: 22px;
        --gap-14: 10px;
        --gap-12: 8px;
    }
}


@media (max-width: 992px) {


    :root {
        --font-80: 60px;
        --font-76: 52px;
        --font-70: 50px;
        --font-64: 48px;
        --font-60: 44px;
        --font-56: 40px;
        --font-50: 36px;
        --font-48: 34px;
        --font-46: 34px;
        --font-42: 32px;
        --font-40: 32px;
        --font-38: 30px;
        --font-36: 26px;
        --font-32: 24px;
        --font-30: 24px;
        --font-28: 22px;
        --font-26: 20px;
        --font-24: 20px;
        --font-22: 18px;
        --font-20: 16px;
        --font-18: 16px;
        --font-16: 16px;
        --font-14: 16px;

        --component-gap: 70px;
        --gap-175: 100px;
        --gap-100: 70px;
        --gap-90: 60px;
        --gap-80: 50px;
        --gap-72: 55px;
        --gap-70: 40px;
        --gap-60: 35px;
        --gap-50: 30px;
        --gap-40: 20px;
        --gap-30: 20px;
        --gap-25: 20px;
        --gap-24: 20px;
        --gap-22: 20px;
        --gap-20: 15px;
        --gap-10: 8px;
        --gap-14: 8px;
        --gap-12: 6px;
    }

}

@media (max-width: 768px) {

    :root {
        --font-80: 50px;
        --font-76: 48px;
        --font-70: 42px;
        --font-64: 40px;
        --font-60: 36px;
        --font-56: 28px;
        --font-50: 28px;
        --font-48: 26px;
        --font-46: 24px;
        --font-42: 22px;
        --font-40: 22px;
        --font-38: 24px;
        --font-36: 20px;
        --font-32: 20px;
        --font-30: 19px;
        --font-28: 18px;
        --font-26: 18px;
        --font-24: 18px;
        --font-22: 16px;
        --font-20: 16px;
        --font-18: 16px;
        --font-16: 16px;
        --font-14: 16px;

        --component-gap: 45px;
        --gap-175: 70px;
        --gap-100: 60px;
        --gap-90: 35px;
        --gap-80: 30px;
        --gap-70: 30px;
        --gap-72: 35px;
        --gap-60: 25px;
        --gap-50: 20px;
        --gap-40: 18px;
        --gap-30: 15px;
        --gap-25: 18px;
        --gap-24: 18px;
        --gap-22: 18px;
        --gap-20: 12px;
        --gap-14: 6px;
        --gap-12: 4px;
    }
}

@media (max-width: 576px) {
    :root {
        --font-80: 40px;
        --font-76: 36px;
        --font-70: 34px;
        --font-64: 32px;
        --font-60: 28px;
        --font-56: 26px;
        --font-50: 24px;
        --font-48: 22px;
        --font-46: 22px;
        --font-42: 20px;
        --font-40: 20px;
        --font-36: 18px;
        --font-30: 17px;
        --font-28: 16px;
        --font-26: 16px;
        --font-24: 16px;
        --font-22: 16px;
        --font-20: 16px;
        --font-18: 16px;
        --font-16: 16px;
        --font-14: 16px;

        --component-gap: 25px;
        --gap-175: 60px;
        --gap-100: 40px;
        --gap-90: 20px;
        --gap-80: 18px;
        --gap-72: 25px;
        --gap-70: 14px;
        --gap-60: 16px;
        --gap-50: 15px;
        --gap-40: 12px;
        --gap-30: 10px;
        --gap-25: 12px;
        --gap-24: 12px;
        --gap-22: 12px;
        --gap-20: 8px;
        --gap-10: 6px;
        --gap-14: 4px;
        --gap-12: 3px;
    }

}

@font-face {
  font-family: 'Inter';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Inter/Inter-Regular.ttf')
    format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Inter/Inter-Medium.ttf')
    format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Inter/Inter-SemiBold.ttf')
    format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Inter/Inter-Bold.ttf')
    format('truetype');
  font-weight: 700;
  font-style: normal;
}