
 @media screen and (min-width: 1023px) {
 :root {
   --design-width: 1920;
   --design-height: 1080;
   --vw-unit: calc(100vw / var(--design-width));
   --vh-unit: calc(100vh / var(--design-height));
   /* 1px = 1 * --vw-unit */
   --f16: calc(16 * var(--vw-unit));
   --f18: calc(18 * var(--vw-unit));
   --f20: calc(20 * var(--vw-unit));
   --f22: calc(22 * var(--vw-unit));
   --f24: calc(24 * var(--vw-unit));
   --f26: calc(26 * var(--vw-unit));
   --f28: calc(28 * var(--vw-unit));
   --f30: calc(30 * var(--vw-unit));
   --f32: calc(32 * var(--vw-unit));
   --f34: calc(34 * var(--vw-unit));
   --f36: calc(36 * var(--vw-unit));
   --f38: calc(38 * var(--vw-unit));
   --f40: calc(40 * var(--vw-unit));
   --f42: calc(42 * var(--vw-unit));
   --f44: calc(44 * var(--vw-unit));
   --f46: calc(46 * var(--vw-unit));
   --f48: calc(48 * var(--vw-unit));
   --f50: calc(50 * var(--vw-unit));
 }  
 
 body,html{    
   font-family: '思源黑体', Microsoft YaHei, Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial;
   font-size:  var(--f16);
 }
}
@media screen and (max-width: 1023px) {
    html {
        font-size: 70.92857142857143px !important
    }
}

@media screen and (max-width: 1013px) {
    html {
        font-size: 70.21428571428571px !important
    }
}

@media screen and (max-width: 1003px) {
    html {
        font-size: 69.5px !important
    }
}

@media screen and (max-width: 993px) {
    html {
        font-size: 68.78571428571429px !important
    }
}

@media screen and (max-width: 983px) {
    html {
        font-size: 68.07142857142857px !important
    }
}

@media screen and (max-width: 973px) {
    html {
        font-size: 67.35714285714286px !important
    }
}

@media screen and (max-width: 963px) {
    html {
        font-size: 66.64285714285714px !important
    }
}

@media screen and (max-width: 953px) {
    html {
        font-size: 65.92857142857143px !important
    }
}

@media screen and (max-width: 943px) {
    html {
        font-size: 65.21428571428571px !important
    }
}

@media screen and (max-width: 933px) {
    html {
        font-size: 64.5px !important
    }
}

@media screen and (max-width: 923px) {
    html {
        font-size: 63.785714285714285px !important
    }
}

@media screen and (max-width: 913px) {
    html {
        font-size: 63.07142857142857px !important
    }
}

@media screen and (max-width: 903px) {
    html {
        font-size: 62.357142857142854px !important
    }
}

@media screen and (max-width: 893px) {
    html {
        font-size: 61.642857142857146px !important
    }
}

@media screen and (max-width: 883px) {
    html {
        font-size: 60.92857142857143px !important
    }
}

@media screen and (max-width: 873px) {
    html {
        font-size: 60.214285714285715px !important
    }
}

@media screen and (max-width: 863px) {
    html {
        font-size: 59.5px !important
    }
}

@media screen and (max-width: 853px) {
    html {
        font-size: 58.785714285714285px !important
    }
}

@media screen and (max-width: 843px) {
    html {
        font-size: 58.07142857142857px !important
    }
}

@media screen and (max-width: 833px) {
    html {
        font-size: 57.357142857142854px !important
    }
}

@media screen and (max-width: 823px) {
    html {
        font-size: 56.642857142857146px !important
    }
}

@media screen and (max-width: 813px) {
    html {
        font-size: 55.92857142857143px !important
    }
}

@media screen and (max-width: 803px) {
    html {
        font-size: 55.214285714285715px !important
    }
}

@media screen and (max-width: 793px) {
    html {
        font-size: 54.5px !important
    }
}

@media screen and (max-width: 783px) {
    html {
        font-size: 53.785714285714285px !important
    }
}

@media screen and (max-width: 773px) {
    html {
        font-size: 53.07142857142857px !important
    }
}
@media screen and (max-width: 768px) {
    html {
        font-size: 50px !important
    }
}
 @font-face {
   font-family: '思源宋体';
   src: url('sourceHeavy.ttf') format('truetype');
   /* TTF 文件 */
   font-weight: 400;
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: '思源黑体';
   src: url('SOURCEHANSANSCNREGULAR.OTF') format('opentype');
   /* OTF 文件 */
   font-weight: 400;
   font-weight: normal;
   font-style: normal;
 }

 body,
 html {
   width: 100%;
   height: 100%;
   color: #333;
 }

 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
   display: block
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p {
   margin: 0;
   padding: 0;
 }


 *,
 :after,
 :before {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   caret-color: transparent;
   -webkit-tap-highlight-color: transparent;
 }

 a,
 a:focus,
 a:hover {
   color: inherit;
   outline: none;
   text-decoration: none
 }

 div:focus {
   outline: none
 }

 li {
   list-style: none
 }

 img {
   display: block;
 }

img{
  width: 100%;
 }
 .ck-content p > img{
  width: auto !important;
  max-width: 100% !important;
 }
 /* ========== Webkit 内核浏览器（Chrome/Edge/Safari） ========== */
 /* 1. 滚动条整体 */
 ::-webkit-scrollbar {
   width: calc(8 * var(--vw-unit));
   height: calc(8 * var(--vw-unit));
 }

 /* 2. 滚动条轨道（背景） */
 ::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
   border-radius: calc(4 * var(--vw-unit));
 }

 /* 3. 滚动条滑块（拖动块） */
 ::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.1);
   border-radius: calc(4 * var(--vw-unit));
   transition: background 0.2s;
 }

 /* 4. 滑块 hover 效果 */
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.1);
 }

 /* 5. 滚动条角落（横竖滚动条交汇处） */
 ::-webkit-scrollbar-corner {
   background: transparent;
 }

 /* ========== Firefox 浏览器 ========== */
 /* 滚动条宽度 + 轨道背景 */
 * {
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.35) rgba(255, 255, 255, 0.1);
 }

 .container {
   width: 100%;
 }

 .container main .content {
   width: 100%;
   position: relative;
 }

 .container main .content::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('bg.jpg') no-repeat;
   background-size: 100% 100%;
   z-index: -1;
 }

 
@keyframes scaleUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  60% {
    transform: translateY(-10%);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes scaleDown {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  60% {
    transform: translateY(10%);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 关键帧动画：时长5s，与轮播自动播放时长完全匹配 */
@keyframes swiperSlideFadeIn {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  90% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1.08);
  }

}
/* 从右出 */
@keyframes scaleBottom {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  60% {
    transform: translateX(-2%);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 从左出 */
@keyframes scaleLeft {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  60% {
    transform: translateY(-2%);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 缩放+顺时针旋转 */
@keyframes scaleUpRotate {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg);
  }
}
/* 无限旋转关键帧 */
@keyframes rotate360Loop {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 1. 基础：仅水平（X轴）360度旋转 */
@keyframes rotateX360 {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateX(0deg) scale(0.8); /* perspective开启3D透视 */
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateX(360deg) scale(1); /* 绕X轴转360度 */
  }
}
/* 1. 正向：绕Y轴顺时针360度旋转（常用） */
@keyframes rotateY360 {
  0% {
    opacity: 0;
    /* perspective：3D透视，数值越大旋转越平缓；scale：初始缩放隐藏 */
    transform: perspective(800px) rotateY(0deg) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateY(360deg) scale(1);
  }
}