page * {
  box-sizing: border-box;
  flex-shrink: 0;
}
html, body {
  height: 100%; /* 确保页面高度为100% */
  margin: 0; /* 去除默认的边距 */
  padding: 0; /* 去除默认的内边距 */
  transform-origin: top left; /* 缩放的原点设置为页面的左上角 */
}
:root{
  --scale:1
}
@media (max-width: 1800px) {
  :root{
    --scale:0.8
  }
  .page {
    transform: scale(0.8); /* 页面缩放 */
    transform-origin: top left; /* 设置缩放的原点 */
  }
  .layui-layer-iframe{
    transform: scale(0.8) !important; /* 页面缩放 */
    transform-origin: center center; /* 设置缩放的原点 */
  }
}
.sliderList8-indicator-container .active{background-color: var(--txtGreen) !important;width: 40px;border-radius: 6px;}
.layui-carousel-ind ul li.layui-this{background-color: var(--txtGreen) !important;width: 40px;border-radius: 6px;}
.layui-carousel-ind ul{background-color: transparent !important;}
.text-row-1{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
textarea,input{
  font-size: 18px !important;
}
.text-row-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制文本为2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;  /* 隐藏超出部分 */
  text-overflow: ellipsis;  /* 显示省略号 */
  max-height: 3em;  /* 可选：根据行高计算最大高度，这里是 2 行高 */
}
.layui-layer-iframe{
  max-height: 100% !important;
  max-width: 100% !important;
  overflow: unset !important;
}
.layui-layer-content{
  overflow: auto !important;
}
@media (max-width: 1279px) {
  :root{
    --scale:0.6666
  }
  .page {
    transform: scale(0.6666); /* 页面缩放 */
    transform-origin: top left; /* 设置缩放的原点 */
  }
  .layui-layer-iframe{
    transform: scale(0.6666) !important; /* 页面缩放 */
    transform-origin: center center; /* 设置缩放的原点 */
  }
}

:root {
  --btn:rgba(138, 59, 59, 1);
  --bgFFF: rgba(255, 255, 255, 1);
  --bg: rgba(252, 248, 247, 1);
  --bgGray: rgb(236, 236, 236);
  --bgDark:  rgba(107, 90, 86, 1);
  --bgBright:  rgba(107, 90, 86,1);
  --font: rgba(242, 93, 90, 1);
  --border: rgb(243, 243, 243);
  --fontBlack:#2B2523;
  --menu:#3F3532;
  --favorites:#FFBD2D;
}


/*//第二版u颜色*/
:root{
  --menuBGStart:#81D8D0;
  --menuBGEnd:#FAEEE3;
  --background:rgba(69,90,93,0.6);
  --txtGreen:#1B9FA2;
  --txtBlack:#3F454A;
  --btn:#1B9FA2;
  --bodyBGStart:#D8FFFB;
  --bodyBGEnd:#FFF1EB;
}


@font-face {
  font-family: 'Merriweather-Bold';  /* 你给字体的命名，用于在 CSS 中引用它 */
  src: url('../Merriweather-Bold-4.ttf') format('truetype');     /* 最后是 ttf  (可选) */
  font-weight: normal;  /* 定义字体粗细 */
  font-style: normal;   /* 定义字体样式，如 normal, italic, oblique */
}
@font-face {
  font-family: 'Merriweather-Black';  /* 你给字体的命名，用于在 CSS 中引用它 */
  src: url('../Merriweather-Black-2.ttf') format('truetype');     /* 最后是 ttf  (可选) */
  font-weight: normal;  /* 定义字体粗细 */
  font-style: normal;   /* 定义字体样式，如 normal, italic, oblique */
}
body {
  font-family: Merriweather-Bold,PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;

    /*全局禁止复制*/
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
html{margin: auto;max-width: 1920px;}
input {
  background-color: transparent;
  border: 0;
  height: 100%;
  width: 100%;
  text-indent: 10px;
  font-size: 18px;
}
*{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
textarea::placeholder {
  font-size: 18px;
  color: #cbcbcb !important;
}
input::placeholder {
  font-size: 18px;
  color: #cbcbcb !important;
}
input::-webkit-input-placeholder{   /* 使用webkit内核的浏览器 */
  color: #cbcbcb;
}
input:-moz-placeholder{    /* Firefox版本4-18 */
  color: #cbcbcb;
}
input::-moz-placeholder{    /* Firefox版本19+ */
  color: #cbcbcb;
}
input:-ms-input-placeholder{   /* IE浏览器 */
  color: #cbcbcb;
}

input:focus {
  outline: none;
  border: 0;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

a {
  text-decoration: none; /* 移除下划线 */
  color: inherit; /* 继承父元素的颜色 */
}
a:visited {
  color: inherit; /* 继承父元素的颜色 */
}
.menu_box_5 {
  /*background-color: var(--bgFFF);*/
  width: 1920px;
  height: 99px;
  /*border: 1px solid rgba(217, 217, 217, 1);*/
}
.menu_image_5 {
  width: 57px;
  height: 57px;
  margin: 0px 32px 0 19px;
}
.menu_text_19 {
  width: 158px;
  height: 30px;
  overflow-wrap: break-word;
  color: var(--bgDark);
  font-size: 24px;
  font-family: Merriweather-Black;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  padding-left: 20px;
  /*margin: 35px 0 0 29px;*/
}
.str2row{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
}
.menu_text_20 {
  /*width: 79px;*/
  /*height: 26px;*/
  overflow-wrap: break-word;
  color: var(--menu);
  font-size: 26px;
  font-family: Merriweather-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  /*line-height: 26px;*/
  margin-left: 20px;
  /*margin: 37px 0 0 944px;*/
}

.menu_text_21 {
  width: 94px;
  height: 26px;
  overflow-wrap: break-word;
  color: var(--bgDark);
  font-size: 26px;
  font-family: Merriweather-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
  margin: 37px 0 0 24px;
}

.menu_text_22 {
  width: 128px;
  height: 26px;
  overflow-wrap: break-word;
  color:  var(--bgDark);
  font-size: 26px;
  font-family: Merriweather-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
  margin: 37px 0 0 24px;
}

.menu_text_23 {
  width: 137px;
  height: 26px;
  overflow-wrap: break-word;
  color:  var(--bgDark);
  font-size: 26px;
  font-family: Merriweather-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
  margin: 37px 0 0 24px;
}
.menu_text_25 {
  width: 7px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(248, 249, 253, 1);
  font-size: 10px;
  font-family: Inter-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 10px;
  margin-left: 4px;
}
.menu_text_24 {
  width: 92px;
  height: 26px;
  overflow-wrap: break-word;
  color:  var(--bgDark);
  font-size: 26px;
  font-family: Merriweather-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
  margin: 37px 0 0 24px;
}
.menu_group_2 {
  background-color: rgba(142, 142, 142, 1);
  border-radius: 50%;
  width: 57px;
  height: 57px;
  margin: 21px 32px 0 19px;
}
.menu_text-wrapper_6 {
  background-color: rgba(242, 93, 90, 1);
  border-radius: 13px;
  height: 13px;
  width: 16px;
  margin-top: -58px;
  margin-left: 28px;
}
.menu_group_1 {
  /*background-color: rgba(26, 26, 27, 1);*/
  height: 36px;
  width: 29px;
  margin: 0px 0 0 26px;
}

button:active {
  opacity: 0.6;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.b{font-weight: bold;}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}
/* ============================================================
   图片样式
   ============================================================ */

img {
  max-width: 100%;  /* 确保图片不会溢出父容器 */
  height: auto;
  border-radius: 5px;  /* 添加圆角 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

img:hover {
  transform: scale(1.05); /*  scale 效果 */
}

.btn{
  transition:
          background-color 0.3s ease-out, /* 背景色过渡 */
          box-shadow 0.3s ease-out,       /* 阴影过渡 */
          transform 0.15s ease-out;       /* 变形过渡 */
}

/* -------------------------------------------
   鼠标悬停 (Hover) 效果：周围阴影
   ------------------------------------------- */
.btn:hover {
  background-color: var(--menuBGEnd) !important; /* 悬停时背景色略微变深 */
  /* box-shadow 属性：
     h-offset: 水平偏移量
     v-offset: 垂直偏移量
     blur-radius: 模糊半径
     spread-radius: 扩张半径
     color: 阴影颜色 (这里用 rgba 创建半透明的黑色阴影)
  */
  color: var(--txtGreen) !important;
  cursor: pointer;
  /*border-radius: 9999px;*/
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 鼠标悬停时出现阴影 */
}
.btn:hover span{color: var(--txtGreen);}
.btn:hover div{color: var(--txtGreen);}
/* -------------------------------------------
   点击 (Active) 效果：下沉动画
   ------------------------------------------- */
.btn:active {
  background-color: var(--bgBright); /* 点击时背景色进一步变深 */
  transform: translateY(2px); /* 按钮向下移动 2px，模拟点击下沉效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 点击时阴影稍微减弱，模拟压力 */
}

/* --- 可选：在焦点状态下也保持一定的阴影，提升可访问性 --- */
.btn:focus {
  outline: none; /* 移除浏览器默认的焦点轮廓 */
  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.5); /* 自定义焦点时的提示，与按钮颜色相关联 */
}

.from-left {
  animation: fromLeftAnimation 1s ease-out forwards;
}
/* 从左到右 */
.from-left {
  animation: fromLeftAnimation 1s ease-out forwards;
}

@keyframes fromLeftAnimation {
  0% {
    opacity: 0;
    transform: translateX(-40%); /* 从屏幕左侧完全移出 */
  }
  80% {
    opacity: 0.8;  /* 动画过程中的半透明，增强视觉效果 */
  }
  100% {
    opacity: 1;
    transform: translateX(0);     /* 移动到指定位置 */
  }
}

/* 从右到左 */
.from-right {
  animation: fromRightAnimation 1s ease-out forwards;
}

@keyframes fromRightAnimation {
  0% {
    opacity: 0;
    transform: translateX(40%); /* 从屏幕右侧完全移出 */
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
    transform: translateX(0);     /* 移动到指定位置 */
  }
}
/* 从中间淡入 */
.from-fade {
  animation: fadeInAnimation 1s ease-out forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;  /* 完全透明 */
  }
  100% {
    opacity: 1;  /* 完全不透明 */
  }
}

/* 从下到上 */
.from-bottom {
  animation: fromBottomAnimation 1s ease-out forwards;
}

@keyframes fromBottomAnimation {
  0% {
    opacity: 0;
    transform: translateY(100%);    /* 从屏幕底部完全移出 */
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
    transform: translateY(0);      /* 移动到指定位置 */
  }
}
/* 从上到下 */
.from-top {
  animation: fromTopAnimation 1s ease-out forwards;
}

@keyframes fromTopAnimation {
  0% {
    opacity: 0;
    transform: translateY(-40%);    /* 从屏幕顶部完全移出 */
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
    transform: translateY(0);      /* 移动到指定位置 */
  }
}

/*  为了让元素在页面可见的时候才开始动画，
    可以使用类 '.active'，  并结合 JavaScript  */
.active {
  animation-play-state: running;  /* 开始运行动画 */
}


/* -------------------------------------------
   可选：通过JavaScript控制动画启动
   ------------------------------------------- */
/* 初始状态可以将动画暂停 */
.animated-element {
  animation-play-state: paused;
}

/* 当元素被添加 'animate' 类时，开始播放动画 */
.animated-element.animate {
  animation-play-state: running;
}





.bodyBG{
  background: linear-gradient( 180deg, var(--bodyBGStart) 0%, var(--bodyBGEnd) 100%) !important;
}
.menu_bg{
  background: linear-gradient( 180deg, var(--menuBGStart) 0%, var(--menuBGStart) 0%, var(--menuBGEnd) 100%) !important;
  border-radius: 0px 0px 0px 0px;
  /*border: 1px solid #D9D9D9;*/
}
.txtGreen{
  color: var(--txtGreen) !important;
}
.txtGreenM{
  color: var(--menuBGStart) !important;
}
.txtBlack{
  color: var(--txtBlack) !important;
}
.btnBG{}
.fullWidth{width: 1920px;}
.layui-carousel button{background-color: var(--txtGreen);}
.layui-carousel-ind ul li{background-color: var(--bodyBGStart) !important;}