:root {
  --plr: 12%;
}

@media (max-width: 768px) {
  :root {
    --plr: 5%;
  }
}

/* 背景 */
.bg-primary { background-color: #007bff; }
.bg-success { background-color: #28a745; }
.bg-warning { background-color: #ffc107; }
.bg-danger  { background-color: #dc3545; }
.bg-info    { background-color: #EAEAEA; }
.bg-white   { background-color: #fff; }
.bg-light   { background: #EBF3D8; }
.bg-black   { background: #333; }
.bg-page	{ background: #F8F8F8; }
.bg-green   { background-color: #A7E130; }

/* 文字 */
.text-primary   { color: #007bff; }
.text-success   { color: #28a745; }
.text-warning   { color: #ffc107; }
.text-danger    { color: #dc3545; }
.text-info      { color: #596155; }
.text-white     { color: #fff; }
.text-light     { color: #F4F4F4; }
.text-black     { color: #3d3d3d; }
.text-page	    { color: #F8F8F8; }
.text-muted     { color: #6c757d; }
.text-hide      { color: transparent; }
.text-invisible { visibility: hidden; }
.text-underline     { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-none      { text-decoration: none; }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-justify   { text-align: justify; }  
.text-nowrap    { white-space: nowrap; }
.text-break     { word-break: break-word; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize{ text-transform: capitalize; }
.text-shadow    { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.text-no-shadow { text-shadow: none; }
.text-italic    { font-style: italic; }
.text-bold      { font-weight: bold; }
.text-green     { color: #A7E130; }

.fw-4           { font-weight: 400; }
.fw-5           { font-weight: 500; }
.fw-6           { font-weight: 600; }
.fw-7           { font-weight: 700; }
.fw-8           { font-weight: 800; }
.fw-9           { font-weight: 900; }

/* 布局 */
.flex, .flex-col, .flex-start, .flex-end, .flex-center, .flex-between, .flex-around, .flex-evenly, .flex-stretch      { display: flex; }
.items-center, .flex-start, .flex-end, .flex-center, .flex-between, .flex-around    { align-items: center; }
.item-stretch, .flex-stretch	{ align-items: stretch; }
.justify-center, .flex-center  	{ justify-content: center; }
.justify-between, .flex-between { justify-content: space-between; }
.justify-around, .flex-around   { justify-content: space-around; }
.justify-evenly, .flex-evenly   { justify-content: space-evenly; }
.justify-end, .flex-end  { justify-content: flex-end; }
.flex-row       { flex-direction: row; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.item-end       { align-items: flex-end; }
.item-start     { align-items: flex-start; }
.self-start     { align-self: self-start; }
.self-center    { align-self: center; }
.self-end 	    { align-self: self-end; }
.flex-1         { flex: 1; }
.block		    { display: block; }
.inline-block   { display: inline-block; }

.relative	    { position: relative; }
.absolute	    { position: absolute; }
.fixed		    { position: fixed; }

/* 宽高 */
.w-100      { width: 100%; }
.w-75       { width: 75%; }
.w-70       { width: 70%; }
.w-60       { width: 60%; }
.w-55       { width: 55%; }
.w-50       { width: 50%; }
.w-45       { width: 45%; }
.w-40       { width: 40%; }
.w-35       { width: 35%; }
.w-30       { width: 30%; }
.w-25       { width: 25%; }
.w-20       { width: 20%; }
.h-100      { height: 100%; }
.h-75       { height: 75%; }
.h-50       { height: 50%; }
.h-25       { height: 25%; }
.min-w-100  { min-width: 100%; }
.min-h-100  { min-height: 100%; }
.max-w-100  { max-width: 100%; }
.max-h-100  { max-height: 100%; }
.mx-auto    { margin-left: auto; margin-right: auto; }
.my-auto    { margin-top: auto; margin-bottom: auto; }
.p-0        { padding: 0 !important; }
.m-0        { margin: 0 !important; }
.min-h-100vh    { min-height: 100vh; }

/* 其他 */
.ellipsis       { overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.full           { position: absolute;top: 0;left: 0;width: 100%;height: 100%;box-sizing: border-box; }
.scroll-y       { overflow-y: scroll; }
.scroll-x       { overflow-x: scroll; }
.border-box     { box-sizing: border-box; }
.border-0       { border: 0 !important; }
.border-1       { border: 1px solid #CDCDCD; }
.border-danger  { border: 1px solid #FB6B37; }
.border-bottom  { border-bottom: 1px solid #D8D8D8; }
.list_box>*:not(:last-child) { border-bottom: 1px solid #F5F5F5; }
.underline      { text-decoration: underline; text-underline-offset: 3px; }
.line-1        { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-2        { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis; }
.line-3        { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-4        { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.line-5        { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.line-6        { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* 角 */
.rounded        { border-radius: 8px; }
.rounded-circle { border-radius: 50%; }
.rounded-x      { border-radius: 999px; }

/* 行高 */
.lh-10   { line-height: 1; }
.lh-12   { line-height: 1.2; }
.lh-15   { line-height: 1.5; }
.lh-20   { line-height: 2; }
.lh-25   { line-height: 2.5; }
.lh-30   { line-height: 3; }

/* ========== 字号（rem 版，从10px到50px） ========== */
/* 1rem = 16px，方便全局缩放（修改 html {font-size} 即可整体调整） */
.fs-10 { font-size: 0.625rem; }   /* 10px */
.fs-12 { font-size: 0.75rem; }    /* 12px */
.fs-14 { font-size: 0.875rem; }   /* 14px */
.fs-16 { font-size: 1rem; }       /* 16px */
.fs-18 { font-size: 1.125rem; }   /* 18px */
.fs-20 { font-size: 1.25rem; }    /* 20px */
.fs-22 { font-size: 1.375rem; }   /* 22px */
.fs-24 { font-size: 1.5rem; }     /* 24px */
.fs-26 { font-size: 1.625rem; }   /* 26px */
.fs-28 { font-size: 1.75rem; }    /* 28px */
.fs-30 { font-size: 1.875rem; }   /* 30px */
.fs-32 { font-size: 2rem; }       /* 32px */
.fs-34 { font-size: 2.125rem; }   /* 34px */
.fs-36 { font-size: 2.25rem; }    /* 36px */
.fs-38 { font-size: 2.375rem; }   /* 38px */
.fs-40 { font-size: 2.5rem; }     /* 40px */
.fs-42 { font-size: 2.625rem; }   /* 42px */
.fs-44 { font-size: 2.75rem; }    /* 44px */
.fs-46 { font-size: 2.875rem; }   /* 46px */
.fs-48 { font-size: 3rem; }       /* 48px */
.fs-50 { font-size: 3.125rem; }   /* 50px */
.fs-52 { font-size: 3.25rem; }    /* 52px */
.fs-54 { font-size: 3.375rem; }   /* 54px */
.fs-56 { font-size: 3.5rem; }     /* 56px */
.fs-58 { font-size: 3.625rem; }   /* 58px */
.fs-60 { font-size: 3.75rem; }    /* 60px */
.fs-62 { font-size: 3.875rem; }   /* 62px */
.fs-64 { font-size: 4rem; }       /* 64px */
.fs-66 { font-size: 4.125rem; }   /* 66px */
.fs-68 { font-size: 4.25rem; }    /* 68px */
.fs-70 { font-size: 4.375rem; }   /* 70px */
.fs-72 { font-size: 4.5rem; }     /* 72px */
.fs-74 { font-size: 4.625rem; }   /* 74px */
.fs-76 { font-size: 4.75rem; }    /* 76px */
.fs-78 { font-size: 4.875rem; }   /* 78px */
.fs-80 { font-size: 5rem; }       /* 80px */


/* 可选：给所有字号加上平滑动画 */
[class^="fs-"] {
  transition: font-size 0.3s ease;
}

/* ========== 内边距上边（rem 版，从0px到200px） ========== */
.pt-0    { padding-top: 0rem; }        /* 0px */
.pt-5    { padding-top: 0.3125rem; }   /* 5px */
.pt-10   { padding-top: 0.625rem; }    /* 10px */
.pt-15   { padding-top: 0.9375rem; }   /* 15px */
.pt-20   { padding-top: 1.25rem; }     /* 20px */
.pt-25   { padding-top: 1.5625rem; }   /* 25px */
.pt-30   { padding-top: 1.875rem; }    /* 30px */
.pt-35   { padding-top: 2.1875rem; }   /* 35px */
.pt-40   { padding-top: 2.5rem; }      /* 40px */
.pt-45   { padding-top: 2.8125rem; }   /* 45px */
.pt-50   { padding-top: 3.125rem; }    /* 50px */
.pt-55   { padding-top: 3.4375rem; }   /* 55px */
.pt-60   { padding-top: 3.75rem; }     /* 60px */
.pt-65   { padding-top: 4.0625rem; }   /* 65px */
.pt-70   { padding-top: 4.375rem; }    /* 70px */
.pt-75   { padding-top: 4.6875rem; }   /* 75px */
.pt-80   { padding-top: 5rem; }        /* 80px */
.pt-85   { padding-top: 5.3125rem; }   /* 85px */
.pt-90   { padding-top: 5.625rem; }    /* 90px */
.pt-95   { padding-top: 5.9375rem; }   /* 95px */
.pt-100  { padding-top: 6.25rem; }     /* 100px */
.pt-105  { padding-top: 6.5625rem; }   /* 105px */
.pt-110  { padding-top: 6.875rem; }    /* 110px */
.pt-115  { padding-top: 7.1875rem; }   /* 115px */
.pt-120  { padding-top: 7.5rem; }      /* 120px */
.pt-125  { padding-top: 7.8125rem; }   /* 125px */
.pt-130  { padding-top: 8.125rem; }    /* 130px */
.pt-135  { padding-top: 8.4375rem; }   /* 135px */
.pt-140  { padding-top: 8.75rem; }     /* 140px */
.pt-145  { padding-top: 9.0625rem; }   /* 145px */
.pt-150  { padding-top: 9.375rem; }    /* 150px */
.pt-155  { padding-top: 9.6875rem; }   /* 155px */
.pt-160  { padding-top: 10rem; }       /* 160px */
.pt-165  { padding-top: 10.3125rem; }  /* 165px */
.pt-170  { padding-top: 10.625rem; }   /* 170px */
.pt-175  { padding-top: 10.9375rem; }  /* 175px */
.pt-180  { padding-top: 11.25rem; }    /* 180px */
.pt-185  { padding-top: 11.5625rem; }  /* 185px */
.pt-190  { padding-top: 11.875rem; }   /* 190px */
.pt-195  { padding-top: 12.1875rem; }  /* 195px */
.pt-200  { padding-top: 12.5rem; }     /* 200px */

/* ========== 外边距（rem 版，从0px到100px） ========== */
.mt-0    { margin-top: 0rem; }        /* 0px */
.mt-5    { margin-top: 0.3125rem; }   /* 5px */
.mt-10   { margin-top: 0.625rem; }    /* 10px */
.mt-15   { margin-top: 0.9375rem; }   /* 15px */
.mt-20   { margin-top: 1.25rem; }     /* 20px */
.mt-25   { margin-top: 1.5625rem; }   /* 25px */
.mt-30   { margin-top: 1.875rem; }    /* 30px */
.mt-35   { margin-top: 2.1875rem; }   /* 35px */
.mt-40   { margin-top: 2.5rem; }      /* 40px */
.mt-45   { margin-top: 2.8125rem; }   /* 45px */
.mt-50   { margin-top: 3.125rem; }    /* 50px */
.mt-55   { margin-top: 3.4375rem; }   /* 55px */
.mt-60   { margin-top: 3.75rem; }     /* 60px */
.mt-65   { margin-top: 4.0625rem; }   /* 65px */
.mt-70   { margin-top: 4.375rem; }    /* 70px */
.mt-75   { margin-top: 4.6875rem; }   /* 75px */
.mt-80   { margin-top: 5rem; }        /* 80px */
.mt-85   { margin-top: 5.3125rem; }   /* 85px */
.mt-90   { margin-top: 5.625rem; }    /* 90px */
.mt-95   { margin-top: 5.9375rem; }   /* 95px */
.mt-100  { margin-top: 6.25rem; }     /* 100px */
.mt-105  { margin-top: 6.5625rem; }   /* 105px */
.mt-110  { margin-top: 6.875rem; }    /* 110px */
.mt-115  { margin-top: 7.1875rem; }   /* 115px */
.mt-120  { margin-top: 7.5rem; }      /* 120px */
.mt-125  { margin-top: 7.8125rem; }   /* 125px */
.mt-130  { margin-top: 8.125rem; }    /* 130px */
.mt-135  { margin-top: 8.4375rem; }   /* 135px */
.mt-140  { margin-top: 8.75rem; }     /* 140px */
.mt-145  { margin-top: 9.0625rem; }   /* 145px */
.mt-150  { margin-top: 9.375rem; }    /* 150px */
.mt-155  { margin-top: 9.6875rem; }   /* 155px */
.mt-160  { margin-top: 10rem; }       /* 160px */
.mt-165  { margin-top: 10.3125rem; }  /* 165px */
.mt-170  { margin-top: 10.625rem; }   /* 170px */
.mt-175  { margin-top: 10.9375rem; }  /* 175px */
.mt-180  { margin-top: 11.25rem; }    /* 180px */
.mt-185  { margin-top: 11.5625rem; }  /* 185px */
.mt-190  { margin-top: 11.875rem; }   /* 190px */
.mt-195  { margin-top: 12.1875rem; }  /* 195px */
.mt-200  { margin-top: 12.5rem; }     /* 200px */

/* ml 工具类 */
.ml-5   { margin-left: 0.3125rem; }  /* 5px */
.ml-10  { margin-left: 0.625rem; }   /* 10px */
.ml-15  { margin-left: 0.9375rem; }  /* 15px */
.ml-20  { margin-left: 1.25rem; }    /* 20px */
.ml-25  { margin-left: 1.5625rem; }  /* 25px */
.ml-30  { margin-left: 1.875rem; }   /* 30px */
.ml-35  { margin-left: 2.1875rem; }  /* 35px */
.ml-40  { margin-left: 2.5rem; }     /* 40px */
.ml-45  { margin-left: 2.8125rem; }  /* 45px */
.ml-50  { margin-left: 3.125rem; }   /* 50px */
.ml-55  { margin-left: 3.4375rem; }  /* 55px */
.ml-60  { margin-left: 3.75rem; }    /* 60px */
.ml-65  { margin-left: 4.0625rem; }  /* 65px */
.ml-70  { margin-left: 4.375rem; }   /* 70px */
.ml-75  { margin-left: 4.6875rem; }  /* 75px */
.ml-80  { margin-left: 5rem; }       /* 80px */
.ml-85  { margin-left: 5.3125rem; }  /* 85px */
.ml-90  { margin-left: 5.625rem; }   /* 90px */
.ml-95  { margin-left: 5.9375rem; }  /* 95px */
.ml-100 { margin-left: 6.25rem; }    /* 100px */

.p-0     { padding: 0 !important; }
.p-3     { padding: 3%; }
.p-5     { padding: 5%; }
.pt-1p   { padding-top: 1%; }
.pt-2p   { padding-top: 2%; }
.pt-3p   { padding-top: 3%; }
.pt-5p   { padding-top: 5%; }
.pt-7p   { padding-top: 7%; }
.pb-2p   { padding-bottom: 2%; }
.pb-3p   { padding-bottom: 3%; }
.pb-5p   { padding-bottom: 5%; }
.pl-3p  { padding-left: 3%; }
.pl-5p  { padding-left: 5%; }
.pl-10p  { padding-left: 10%; }
.ptb-3p  { padding-top: 3%;padding-bottom: 3%; }
.ptb-5p  { padding-top: 5%;padding-bottom: 5%; }
.ptb-7p  { padding-top: 5%;padding-bottom: 7%; }
.plr-3p  { padding-left: 3%;padding-right: 3%; }
.plr-5p  { padding-left: 5%;padding-right: 5%; }
.plr-10p  { padding-left: 10%;padding-right: 10%; }
.plr-15p  { padding-left: 15%;padding-right: 15%; }
.plr-20p  { padding-left: 20%;padding-right: 20%; }

/* ========== 外边距（百分比版） ========== */
.m-3     { margin: 3%; }
.m-5     { margin: 5%; }
.mt-2p   { margin-top: 2%; }
.mt-3p   { margin-top: 3%; }
.mt-5p   { margin-top: 5%; }
.mt-7p   { margin-top: 7%; }
.mb-2p   { margin-bottom: 2%; }
.mb-3p   { margin-bottom: 3%; }
.mb-5p   { margin-bottom: 5%; }
.ml-2p   { margin-left: 2%; }
.ml-3p   { margin-left: 3%; }
.ml-5p   { margin-left: 5%; }
.mr-2p   { margin-right: 2%; }
.mr-3p   { margin-right: 3%; }
.mr-5p   { margin-right: 5%; }
.mtb-5p  { margin-top: 5%; margin-bottom: 5%; }
.mlr-5p  { margin-left: 5%; margin-right: 5%; }

.gap-2   { gap: 2%; }
.gap-3   { gap: 3%; }
.gap-5   { gap: 5%; }
.gap-10   { gap: 10%; }
.gap-15   { gap: 15%; }
.gap-20   { gap: 20%; }

.arrow-right {
  position: relative;
  padding-right: 20px;       /* 给箭头留空间 */
  line-height: 1;            /* 保证垂直居中 */
  cursor: pointer;
}

.arrow-right::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;    /* 垂直居中 */
  margin-top: -2px;      /* 微调位置 */
  margin-left: 4px;
}

.padding-0 { padding: 0 !important; }

.anime { transition: all 0.3s ease; }

/* 全局样式 */ 
html { 
  font-size: clamp(14px, 1vw + 12px, 18px);
  scroll-behavior: smooth;
} 
body { 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, 
              "Segoe UI", 
              Roboto, 
              "Helvetica Neue", 
              Arial, 
              sans-serif
              ;
  font-size: 0.875rem;
  color: #3d3d3d;
  background-color: #F8F8F8; 
}
div     { box-sizing: border-box; }
button  { border: none;cursor: pointer; }
a       { text-decoration: none; }
.page-plr { padding-left: var(--plr);padding-right: var(--plr); }

/* 导航栏 */
.navbar { 
    box-shadow: 0px 4px 16px 0px rgba(157, 162, 168, 0.3); 
    /* height: 60px;  */
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 9px var(--plr);
}
.navbar .logo { width: 124px; }
.navbar a { font-size: 18px;color: #666666; }
.navbar .active { font-weight: 700;color: #51C219; }
.navbar .left>*:not(:last-child) { margin-right: 5%; }
.navbar .phone { padding: 8px 19px;}
.navbar .phone_icon { width: 25px;height: 25px;margin-right: 14px; }
.navbar .phone_text { font-size: 18px;color: #3E4C21; }

/* 底部 */
.footer {
    background-color: #2F3234;
    color: #BCBBBB;
    padding: 40px var(--plr);
    font-size: 14px;
    margin-top: 90px;
}
.footer .title { font-size: 18px;color: #FFFFFF;font-weight: 700; }
.footer .qrcode { width: 92px;height: 92px; }
.footer .logo   { width: 192px;height: 71px; }
.footer .col   { margin-left: 10%; }
.footer a { color: #BCBBBB; }
.footer a:hover { color: #fff; }
.beian_logo { width: 20px;height: 20px;transform: translateY(25%); }
.footer .icon_box { width: 49px;height: 49px;margin-right: 2%;position: relative; }
.footer .icon { width: 100%;height: 100%; }
.footer .icon_qr { width: 92px;height: 92px;position: absolute;top: 0;left: 50%;transform: translate(-50%,-100%);display: none;z-index: 10;transition: all 0.3s ease; }
.footer .icon_box:hover .icon_qr { display: block;}

.right_btns {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 7%;
  z-index: 200;
}

.right_btn {
  width: 100%;
}

.right_btn:first-child { height: 40%; }

.right_btns > * { cursor: pointer; }

.web { display: block; }
.h5 { display: none; }

.btn_apple, .btn_android { cursor: pointer; }

.title {
    font-size: 2.25rem;
    font-weight: 700;
}
.sub {
    font-size: 1.5rem;
    font-weight: 700;
    color: #BBBBBB;
}

.cs-container {
  padding: 0 var(--plr);
}
.current-page {
    margin-top: 30px;
}
@media (max-width: 768px) {
  body          { padding-top: 50px; }
  .web          { display: none; }
  .h5           { display: block; }
  .navbar       { position: fixed;top: 0;left: 0;width: 100%;z-index: 100;height: 50px; }
  .navbar .logo { width: 25%; }
  .navbar .icon_phone { width: 26px; }
  .navbar .icon_more { width: 31px; }
  .navlist      { display: none;position: absolute;bottom: 0;left: 0;width: 100%;transform: translateY(99%);background: rgba(255, 255, 255, 0.95);z-index: 100;}
  .navlist a    { display: block;font-size: 16px;padding: 3%; }
  .right_btns   { width: 18%; }
  .footer       { padding: 5%;margin: 0; }
  .footer .title{ font-size: 14px; }
  .footer-top   { height: 80px; }
  .title        { font-size: 18px;display: block; }
  .sub          { font-size: 12px;display: block;margin: 5px 0 0; }
  .arrow-right  { padding-right: 0; }
  .current-page { margin-top: 10px;padding: 10px 0; }
}