/* CSS Document */
/* ==============================================
   全局CSS变量配置（匹配设计稿色值）
   ============================================== */
:root {
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-34: 34px;
  --font-size-36: 36px;
  --font-size-38: 38px;
  --font-size-40: 40px;
  --font-size-42: 42px;
  --font-size-45: 45px;
  --font-size-47: 47px;
  --font-size-54: 54px;

  --green-lightest: #E6F7F6;
  --green-lighter:  #B3EAE7;
  --green:          #00ACA1;
  --green-darker:   #007A72;
  --green-darkest:  #005853;

  --blue-lightest:  #F0F5FB;
  --blue-lighter:   #C9D8F0;
  --blue:           #2E5AA5;
  --blue-darkest:   #153A6E;

  --yellow-lightest: #FFF8E5;
  --yellow:          #FFC107;
  --yellow-darkest:  #FFA000;

  --title-dark:    #23232F;
  --body-reg:      #51516C;
  --body-light:    #999999;
  --body-tiny:     #B2B2B2;

  --link-normal:   #007A72;
  --link-hover:    #005853;

  --body-bg:       #FFFFFF;
  --body-dark:     #343A40;

  --orange:        #FF7A00;
  --alert:         #E63946;
  --gradient:      #00ACA1;

  --border-default: #CCCCCC;
  --shadow-default: 0 2px 6px rgba(0,0,0,0.1);

}
.font-10 { font-size: var(--font-size-10) !important; }
.font-12 { font-size: var(--font-size-12) !important; }
.font-13 { font-size: var(--font-size-13) !important; }
.font-14 { font-size: var(--font-size-14) !important; }
.font-15 { font-size: var(--font-size-15) !important; }
.font-16 { font-size: var(--font-size-16) !important; }
.font-18 { font-size: var(--font-size-18) !important; }
.font-20 { font-size: var(--font-size-20) !important; }
.font-24 { font-size: var(--font-size-24) !important; }
.font-30 { font-size: var(--font-size-30) !important; }
.font-32 { font-size: var(--font-size-32) !important; }
.font-36 { font-size: var(--font-size-36) !important; }
.font-40 { font-size: var(--font-size-40) !important; }
/* ==============================================
   1. 自定义字体引入
   ============================================== */
@font-face {
    font-family: 'Kanit-SemiBold';
    src: local('Kanit-SemiBold'),
         url('https://cdn.biocytogen.com/web/frontend/Public/webfonts/Kanit-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    font-size-adjust: 0.5;
    font-weight: 600;
}
@font-face {
    font-family: 'Kanit-Medium';
    src: local('Kanit-Medium'),
         url('https://cdn.biocytogen.com/web/frontend/Public/webfonts/Kanit-Medium.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    font-size-adjust: 0.5;
    font-weight: 500;
}
@font-face {
    font-family: 'Kanit-Light';
    src: local('Kanit-Light'),
         url('https://cdn.biocytogen.com/web/frontend/Public/webfonts/Kanit-Light.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    font-size-adjust: 0.5;
    font-weight: 300;
}
@font-face {
    font-family: 'Kanit-Regular';
    src: local('Kanit-Regular'),
         url('https://cdn.biocytogen.com/web/frontend/Public/webfonts/Kanit-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    font-size-adjust: 0.5;
    font-weight: 400;
}
@font-face {
    font-family: 'PlusJakartaSans-Medium';
    src: local('PlusJakartaSans-Medium'),
         url('https://cdn.biocytogen.com/web/frontend/Public/webfonts/PlusJakartaSans-Medium.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    font-size-adjust: 0.5;
    font-weight: 500;
}
@font-face {
    font-family: 'PlusJakartaSans-Regular';
    src: local('PlusJakartaSans-Regular'),
         url('https://cdn.biocytogen.com/web/frontend/Public/webfonts/PlusJakartaSans-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    font-size-adjust: 0.5;
    font-weight: 400;
}
@font-face {
    font-family: 'PlusJakartaSans-SemiBold';
    src: local('PlusJakartaSans-SemiBold'),
         url('https://cdn.biocytogen.com/web/frontend/Public/webfonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    font-size-adjust: 0.5;
    font-weight: 600;
}

/* ==============================================
   2. 全局基础重置
   ============================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 基础元素重置 */
html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--body-bg);
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'PlusJakartaSans-Regular', sans-serif;
  font-weight: 400;
  font-size: var(--font-size-16);
  line-height: 1.5;
  color: var(--body-reg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container-fluid{
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.container-fluidTiny {
  width: 100%;
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* 列表/表格/图片重置 */
ul, ol, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* 表单元素重置 */
button, input, select, textarea {
  outline: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* 链接重置 */
a {
  color: var(--body-reg);
  text-decoration: none;
  outline: 0;
  transition: color 0.2s ease;
}
a:active, a:hover, a:link, a:visited {
  text-decoration: none;
  outline: 0;
}
a:hover {
  color: var(--link-hover);
}

/* ==============================================
   3. 通用文本样式（统一层级，优化语义）
   ============================================== */
/* 标题样式 */
.h1, h1 {
  font-family: 'Kanit-SemiBold', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--title-dark);
  font-size: 40px;
}

.h2, h2 {
  font-family: 'Kanit-SemiBold', sans-serif;
  font-weight: 500;
  line-height: 1.3;
  color: var(--title-dark);
  font-size: 48px;
}

.h3, h3 {
  font-family: 'Kanit-SemiBold', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--title-dark);
  font-size: 40px;
}

.h4, h4 {
  font-family: 'Kanit-SemiBold', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--title-dark);
  font-size: 36px;
}

.h5, h5 {
  font-family: 'Kanit-Medium', sans-serif;
  font-weight: 500;
  line-height: 1.3;
  color: var(--title-dark);
  font-size: 24px;
}

.h6, h6 {
  font-family: 'Kanit-Medium', sans-serif;
  font-weight: 500;
  line-height: 1.3;
  color: var(--title-dark);
  font-size: 18px;
}

/* 自定义文本样式 */
.title-widget {
  font-family: 'Kanit-Medium', sans-serif;
  font-weight: 500;
  color: var(--title-dark);
  font-size: var(--font-size-16);
}

.texttitle-large {
  font-family: 'Kanit-Medium', sans-serif;
  font-weight: 500;
  color: var(--title-dark);
  font-size: var(--font-size-20);
}

.all-caps {
  font-family: 'Kanit-Light', sans-serif;
  font-weight: 300;
  color: var(--title-dark);
  font-size: var(--font-size-14);
}

.textBody-large {
  font-family: 'PlusJakartaSans-Medium', sans-serif;
  font-weight: 500;
  color: var(--body-reg);
  font-size: var(--font-size-20);
}

.textBody-reg {
  font-family: 'PlusJakartaSans-Regular', sans-serif;
  font-weight: 400;
  color: var(--body-reg);
  font-size: var(--font-size-16);
}

.textBody-small {
  font-family: 'PlusJakartaSans-Regular', sans-serif;
  font-weight: 400;
  color: var(--body-reg);
  font-size: var(--font-size-14);
}

.textBody-tiny {
  font-family: 'PlusJakartaSans-Regular', sans-serif;
  font-weight: 400;
  color: var(--body-reg);
  font-size: var(--font-size-13);
}

.textLink {
  font-family: 'PlusJakartaSans-SemiBold', sans-serif;
  font-weight: 600;
  color: var(--link-normal);
  font-size: var(--font-size-16);
  text-decoration: underline !important;
}

/* 段落样式 */
p {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ==============================================
   4. 通用组件样式（按钮/表单/图标）
   ============================================== */
/* 按钮样式（完善交互状态） */
.btn {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn::-moz-focus-inner {
  border-color: transparent;
}

.btn-biocytogen {
  background-color: var(--green-darker);
  color: #fff !important;
  border: 1px solid var(--green-darker);
  padding: 8px 16px;
}
.btn-biocytogen:hover {
  background-color: var(--green-darkest);
  border-color: var(--green-darkest);
}
.btn-biocytogen:active,
.btn-biocytogen:focus {
  background-color: var(--green-darkest);
  border-color: var(--green-darkest);
}

/* 表单样式 */
form code {
  background: transparent;
}
textarea.form-control {
  height: auto;
  resize: vertical;
}
form.required-validate .help-block {
  margin-bottom: 0 !important;
}

/* 自定义图标样式 */
.icon-remove {
  display: inline-block !important;
  width: 12px;
  height: 12px;
  position: relative;
}
.icon-remove::before,
.icon-remove::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.2px;
  background-color: var(--body-reg);
  transform: translateY(-50%);
}
.icon-remove::before {
  transform: translateY(-50%) rotate(45deg);
}
.icon-remove::after {
  transform: translateY(-50%) rotate(-45deg);
}

[class*=" icon-"], 
[class^=icon-] {
  margin-right: 4px;
  vertical-align: middle;
}
i.icon-search{position: relative;top: -1px;}
/* 特殊链接样式 */
a.blue, 
a.blue:link, 
a.blue:visited {
  color: var(--blue);
  text-decoration: underline;
}
a.blue:hover {
  color: var(--blue-darkest);
}

a.green, 
a.green:link, 
a.green:visited {
  color: var(--link-normal);
  text-decoration: underline;
}
a.green:hover {
  color: var(--link-hover);
}

/* ==============================================
   5. 加载/动画样式（优化兼容性，简化代码）
   ============================================== */
/* 页面预加载器 */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--body-bg);
  background: rgba(255, 255, 255, .8);
  z-index: 10000;
  line-height: 100%;
}
#preloader .preloader-center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
#preloader .loading-logo {
  text-align: center;
  margin: 0 auto 5px;
}
#preloader .load-spinner {
  margin: 0 auto;
  width: 250px;
  text-align: center;
}
.load-spinner > div {
  width: 20px;
  height: 20px;
  background-color: var(--green);
  border-radius: 100%;
  display: inline-block;
  animation: bouncedelay 1.4s infinite ease-in-out both;
}
.load-spinner .bounce1 { animation-delay: -.64s; }
.load-spinner .bounce2 { animation-delay: -.48s; }
.load-spinner .bounce3 { animation-delay: -.32s; }
.load-spinner .bounce4 { animation-delay: -.16s; }

/* 通用加载样式 */
#contentLoader {
  text-align: center;
  padding: 30px;
  font-size: 20px;
  color: var(--body-light);
}
#maskLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  z-index: 100;
}
#loading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: var(--body-light);
  z-index: 1000;
  padding: 70px 20px 20px;
}
.icon-spinner.icon-spin {
  font-size: 28px;
  animation: spin 1s linear infinite;
}

/* 动画定义 */
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

/* 导航遮罩 */
.nav-overlay {
  background: var(--body-dark);
  opacity: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: none;
}

/* 返回顶部按钮 */
#back-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  padding: 0;
  margin: 0;
  z-index: 999999999;
  box-shadow: var(--shadow-default);
  border-radius: 5px;
  transition: opacity 0.3s ease;
  opacity: 1;
}
#back-top.hidden {
  opacity: 0;
  pointer-events: none;
}
#back-top a {
  text-decoration: none;
  width: 38px;
  height: 38px;
  display: block;
  background-color: var(--body-reg);
  color: #FFF;
  font-size: 30px;
  line-height: 100%;
  text-align: center;
  transition: all .3s ease;
  border-radius: 5px;
}
#back-top a:hover {
  background-color: var(--link-normal);
  color: #fff;
}

/* ==============================================
   6. 工具类样式（统一命名规范，补充语义）
   ============================================== */
/* 最小高度 */
.minhigh-150 { min-height: 150px; }
.minhigh-250 { min-height: 250px; }
.minhigh-350 { min-height: 350px; }

/* 文本样式 */
.nowrapText { white-space: nowrap; }
.ct-text-uppercase { text-transform: uppercase; }

/* 间距工具类 */
.ct-ml-5 { margin-left: 5px; }
.ct-ml-10 { margin-left: 10px; }
.ct-ml-15 { margin-left: 15px; }
.ct-ml-20 { margin-left: 20px; }
.ct-ml-30 { margin-left: 30px; }

.ct-mr-5 { margin-right: 5px; }
.ct-mr-10 { margin-right: 10px; }
.ct-mr-15 { margin-right: 15px; }
.ct-mr-20 { margin-right: 20px; }
.ct-mr-30 { margin-right: 30px; }

.ct-mt-5 { margin-top: 5px; }
.ct-mt-10 { margin-top: 10px; }
.ct-mt-15 { margin-top: 15px; }
.ct-mt-20 { margin-top: 20px; }
.ct-mt-24 { margin-top: 24px; }
.ct-mt-30 { margin-top: 30px; }
.ct-mt-32 { margin-top: 32px; }
.ct-mt-48 { margin-top: 48px; }

.ct-mb-5 { margin-bottom: 5px; }
.ct-mb-10 { margin-bottom: 10px; }
.ct-mb-15 { margin-bottom: 15px; }
.ct-mb-20 { margin-bottom: 20px; }
.ct-mb-24 { margin-bottom: 24px; }
.ct-mb-30 { margin-bottom: 30px; }
.ct-mb-32 { margin-bottom: 32px; }
.ct-mb-48 { margin-bottom: 48px; }

.ct-pl-10 { padding-left: 10px; }

.zm-uppercase{text-transform: uppercase;}
/* 表格样式（统一padding，优化可读性） */
.tab-content li {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 5px;
}

table.pth-center thead tr td { text-align: center; }
table.ptd-8-10 tbody tr td { padding: 8px 10px; }
table.ptd-8-15 tbody tr td { padding: 8px 15px; }
table.ptd-10-10 tbody tr td,
table.pth-10-15 thead tr td { padding: 10px; }
table.ptd-10-15 tbody tr td,
table.pth-10-15 thead tr td { padding: 10px 15px; }
table.ptd-15-15 tbody tr td,
table.pth-15-15 thead tr td { padding: 15px; }

/* 表单样式（通用） */
.commonForm .form-group { margin: 0; }
.commonForm .input-group {
  background-color: rgb(255 255 255 / 80%);
  padding: 3px 10px;
  border-radius: 30px;
  border: 1px solid var(--border-default);
}
.commonForm .input-group input {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.commonForm .input-group button {
  border-radius: 50% !important;
  padding: 0;
  height: 28px;
  width: 28px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.commonForm .input-group button i { margin: 0; }

/* ==============================================
   7. 响应式样式（整合所有响应式，按屏幕尺寸排序）
   ============================================== */
.vrs-grid{display: grid;grid-template-columns: 25.6% 68.6%;column-gap: 65px;}
/* 中屏PC/平板横屏（≤1199px） */
@media screen and (max-width: 1199px) {
  .vrs-grid { column-gap: 55px; }
}

/* 平板竖屏/小屏PC（≤991px） */
@media screen and (max-width: 991px) {
  .vrs-grid {
    grid-template-columns: 100%;
    gap: 30px;
  }
  .vrs-grid .vrs-md-4.left-block .leftitem-box {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
}