/*
* @Descripttion: 描述
* @Author: mcclcm
* @Date:   2024-11-21 14:52:59
* @Last Modified by:   lcm
* @Last Modified time: 2024-11-25 15:20:33
*/
:root {
  --mobile-width-unit: calc(100vw / 1125);
  --pc-width-unit: calc(100vw / 1920);
}

* {
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei, Microsoft YaHei;
}
html,div,p,ul,li,ol,dd,dt{ margin:0; padding:0;  font-family: Microsoft YaHei, Microsoft YaHei;
}
a{ border:0 none; outline:0 none; text-decoration:none;}
img{ border:0 none; outline:0 none; vertical-align:top; max-width: none !important;}
area:focus{ border:0 none; outline:0 none;}
input:focus{ outline:0 none;}
.clearfix:after{ display:block; content:"."; visibility:hidden; height:0; clear:both;}
div,p,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none;}
.maintenance-section {
  width: 100%;
  font-family: Microsoft YaHei, Microsoft YaHei;
  position: relative;
  /*padding:var(--pc-width-unit)*107*/
}

.top-img{
  width: 100%;
  padding:0 calc(var(--pc-width-unit)*107);
  position: relative;
  box-sizing: border-box;

}
.top-img img{
  width: 100%;
  height:calc(var(--pc-width-unit)*366);
  margin-top: calc(var(--pc-width-unit)*20);
}
.top-img div{
  position: absolute;
  left: calc(var(--pc-width-unit)*179);
  top:  calc(var(--pc-width-unit)*160);
  font-weight: bold;
  font-size: calc(var(--pc-width-unit)*59);
  color: #FFFFFF;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.title{
  font-weight: bold;
  font-size: calc(var(--pc-width-unit)*45);
  color: #333333;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: calc(var(--pc-width-unit)*80);
  margin-bottom: calc(var(--pc-width-unit)*40);
}
.desc-text{
  margin:0 calc(var(--pc-width-unit)*107) calc(var(--pc-width-unit)*20) calc(var(--pc-width-unit)*107);
  font-size: calc(var(--pc-width-unit)*21);
}
.group-list{
  margin:0 calc(var(--pc-width-unit)*107);
  display: flex;
  gap:calc(var(--pc-width-unit)*20);
  overflow-x: auto; /* 开启水平滚动 */
  scroll-behavior: smooth; /* 滑动效果更顺滑 */
  white-space: nowrap; /* 强制子元素不换行 */
  -webkit-overflow-scrolling: touch; /* 在移动设备上支持惯性滚动 */
}
.group-list::-webkit-scrollbar {
  height: 6px; /* 滚动条高度 */

}

.group-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5); /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滑块圆角 */
}

.group-list::-webkit-scrollbar-track {
  background: transparent; /* 滚动条背景透明 */
}

.group-item{
  position: relative;
  width: calc(var(--pc-width-unit)*404);
  height: calc(var(--pc-width-unit)*616);
  flex: 0 0 auto; /* 保持固定宽度，不让子项缩小 */
}
.group-item a {

}
.group-item-img{
  width: 100%;
  height: 100%;
}
.group-item-div{
  position: absolute;
  bottom: calc(var(--pc-width-unit)*40);
  left: calc(var(--pc-width-unit)*27);
  color: #FFFFFF;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.group-item-title{
  font-weight: bold;
  font-size: calc(var(--pc-width-unit)*40);
}
.group-item div p{
  font-size: calc(var(--pc-width-unit)*19);
  margin-top: 10px;
  white-space:normal;
}
.group-item-icon{
   width: calc(var(--pc-width-unit)*64);
  height: calc(var(--pc-width-unit)*64);
}
.bottom-group{
  margin: calc(var(--pc-width-unit)*80) calc(var(--pc-width-unit)*107);
  background: #F7F8FA;
  border-radius: calc(var(--pc-width-unit)*40);
  padding: calc(var(--pc-width-unit)*80) calc(var(--pc-width-unit)*73);
  box-sizing: border-box;
}
.group-title{
  font-weight: bold;
  font-size: calc(var(--pc-width-unit)*45);
  color: #333333;
  text-align: center;
}

.bottom-group-list{
  margin-top: calc(var(--pc-width-unit)*55);
  display: flex;
  gap:calc(var(--pc-width-unit)*35);
  flex-wrap: wrap;
}

.bottom-group-item{
  width: calc(var(--pc-width-unit)*350);
  height: calc(var(--pc-width-unit)*228);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bottom-group-item a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-img{
  width:100% ;
  height: calc(var(--pc-width-unit)*228);
  border-radius: calc(var(--pc-width-unit)*21);
}
#wmap img {
  max-width: none !important;
}
/*.useful{ width:100%; padding:0 0 calc(var(--pc-width-unit)*20) 0; border-bottom:1px solid #DCDCDC; text-align:center; font-size:calc(var(--pc-width-unit)*20); color:#3D3D3D;}*/
/*.useful a{ color:#17acff; text-decoration:underline;}*/
/*.useful span{ padding:0 calc(var(--pc-width-unit)*6);color:#17acff;}*/