* {
  margin: 0;
  padding: 0;
}

html,
body {
  background: #ffffff !important;
  
}

/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 2px;
  /* 设置滚动条的宽度 */
  background-color: #f9f9f9;
  /* 滚动条的背景色 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f9f9f9;
  /* 轨道的背景色 */
  /* 轨道的圆角 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background-color: #B45739;
  /* 滑块的背景色 */

}


.index_banner {
  width: 100%;
  height: calc(200px + 30rem);

}

.index_banner_img {
  width: 100%;
  height: 100%;
  position: relative;
}

.index_banner .index_banner_pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.banner_text {
  max-width: 1440px;
  height: 100%;
  width: 90%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.banner_text .p1 {
  font-family: D_DIN_PRO_Bold;
  font-weight: bold;
  font-size: calc(12px + 2rem);
  color: #FFFFFF;
  line-height: calc(10px + 4rem);
}

.banner_text .p2 {
  font-family: Roboto_Regular;
  font-weight: 400;
  font-size: calc(4px + 1rem);
  color: #FFFFFF;
  line-height: calc(10px + 1.5rem);
  text-shadow: 0px calc(0px + 0.1rem) calc(0px + 0.1rem) rgba(0, 0, 0, 0.5);
  margin-top: calc(6px + 0.5rem);
}

.banner_more {
  width: calc(86px + 5rem);
  height: calc(11px + 2rem);
  border-radius: calc(20px + 4rem);
  border: 1px solid rgba(255, 255, 255, 0.65);
  margin-top: calc(12px + 3rem);
}
.banner_more img{
  width: calc(5px + 2rem);
}

.banner_more a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(7px + 1rem);
  font-family: Roboto_Regular;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #FFFFFF;
  line-height: calc(1px + 1rem);
}

.index_1_box {
  width: 100%;
  height: calc(167px + 20rem);
  background: url(../images/index_1_bg.png) no-repeat;
  background-size: calc(181px + 50rem);
  background-position: right;
  margin-top: calc(24px + 5rem);
}

.index_1 {
  max-width: 1440px;
  width: 90%;
  margin: auto;
  padding-top: calc(6px + 2rem);
}

.index_1_text {
  width: 81.5972%;
  font-family: Roboto_Regular;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #777777;
  line-height: calc(10px + 1rem);
  margin-top: calc(6px + 1.5rem);
}

.index_1_more {
  margin-top: calc(8px + 2rem);
}

.index_1_more a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(5px + 0.25rem);
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(10px + 0.5rem);
  color: #B45739;
  line-height: calc(4px + 1rem);
}

.index_1_more a img {
  width: calc(2px + 1rem);
}

.index_2_box {
  width: 100%;

}

.index_2 {
  max-width: 1440px;
  width: 90%;
  margin: auto;
}

.index_2_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.index_2_top_pic {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(2px + 1rem);
}

.index_2_top_pic img {
  height: calc(5px + 2rem);
}

.index_2_list {
  margin-top: calc(20px + 2rem);
}

.index_2_list_swiper {
  width: 100%;
}

.index_2_list_item {
  width: 100%;
}

.index_2_item_pic {
  width: 100%;
  height: calc(34px + 15rem);
  background: #F0F0F0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index_2_item_pic img {
  width: calc(80px + 5rem);
}

.index_2_list_item .p1 {
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(10px + 0.5rem);
  color: #3A4046;
  line-height: calc(4px + 1rem);
  text-align: center;
  margin-top: calc(10px + 0.5rem);
}

.index_3_box {
  width: 100%;
  background: url(../images/index_3_bg.png) no-repeat;
  background-size: cover;
  padding: calc(3px + 4rem) 0;
  margin-top: calc(10px + 5rem);
}

.index_3 {
  max-width: 1440px;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.index_3_more {
  width: calc(69px + 5rem);
  height: calc(16px + 2rem);
  background: #FFFFFF;
  border-radius: calc(5px + 0.25rem);
}

.index_3_more a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(3px + 0.25rem);
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(10px + 0.5rem);
  color: #333333;
  line-height: calc(4px + 1rem);
}

.index_3_more a img {
  width: calc(2px + 1rem);
}

.index_4_box {
  width: 100%;
  padding: calc(30px + 5rem) 0;
}

.index_4 {
  max-width: 1440px;
  width: 90%;
  margin: auto;
}

.index_4_list {
  width: 100%;
  display: grid;
  grid-template-columns: 32.2222% 32.2222% 32.2222%;
  gap: calc(4px + 1rem);
  margin-top: calc(20px + 2rem);
}

.index_4_item {
  height: calc(184px + 20rem);
  position: relative;
}

.index_4_item:nth-of-type(2),
.index_4_item:nth-of-type(3) {
  height: calc(80px + 10rem);
}

.index_4_item:nth-of-type(1) {
  grid-row: 1 / span 2;
}

.index_4_item:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.index_4_item:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.index_4_item:nth-of-type(4) {
  grid-column: 3 / 4;
  /* 跨 2 行 */
  grid-row: 1 / span 2;
}

.index_4_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index_4_item .mask {
  width: 100%;
  height: 100%;
  background-color: #00000030;
  position: absolute;
  top: 0;
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(2px + 1rem);
  color: #FFFFFF;
  line-height: calc(6px + 1rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(10px + 1.5rem);
  opacity: 0;
  transition: .3s;
}

.index_4_item:hover .mask {
  opacity: 1;
}

.index_5_box {
  width: 100%;
  background: url(../images/index_5_bg.png) no-repeat;
  background-size: cover;
}

.index_5 {
  max-width: 1693px;
  width: 95%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: calc(37px + 5rem);
}

.index_5_pic {
  width: calc(1px + 15rem);

}

.index_5_pic img {
  width: 100%;
  object-fit: cover;
}

.index_5_text {
  padding: calc(20px + 4rem) 0;
}

.index_5_text .p0 {
  font-family: Roboto_Regular;
  font-weight: 400;
  font-size: calc(10px + 0.5rem);
  color: #666666;
  line-height: calc(4px + 1rem);
  margin-bottom: calc(6px + 0.5rem);
}

.index_5_more {
  width: calc(36px + 5rem);
  height: calc(6px + 2rem);
  background: #B45739;
  margin-top: calc(8px + 2rem);
}

.index_5_more a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(8px + 0.5rem);
  color: #FFFFFF;
  line-height: calc(1px + 1rem);
}

.index_6_box {
  width: 100%;
  padding: calc(30px + 5rem) 0;
}

.index_6 {
  max-width: 1440px;
  width: 90%;
  margin: auto;
}

.index_6_pic {
  width: 100%;
  height: calc(168px + 20rem);
  margin-top: calc(20px + 2rem);
}

.index_6_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index_7_box {
  width: 100%;
  padding: calc(20px + 4rem) 0;
  background: url(../images/index_7_bg.png) no-repeat;
  background-size: cover;
}

.index_7 {
  max-width: 1440px;
  width: 90%;
  margin: auto;
}

.index_7_list {
  margin-top: calc(20px + 2rem);
}

.index_7_list_swiper {
  width: 100%;
}

.index_7_list_item {
  width: 100%;
}

.index_7_item_pic {
  width: 100%;
  height: calc(80px + 10rem);
}

.index_7_item_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index_7_list_item .p1 {
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(10px + 0.5rem);
  color: #333333;
  line-height: calc(4px + 1rem);
  margin-top: calc(4px + 1.5rem);
}

.index_7_list_item .p2 {
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #777777;
  line-height: calc(8px + 1rem);
  margin-top: calc(6px + 0.5rem);
}

.index_7_list_item .p3 {
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #333333;
  line-height: calc(8px + 1rem);
  text-align: left;
  font-style: normal;
  text-decoration: underline;
  margin-top: calc(6px + 1rem);
}

.index_8_box {
  width: 100%;
  padding: calc(30px + 5rem) 0;
}

.index_8 {
  max-width: 1440px;
  width: 90%;
  margin: auto;
}

.index_8 .p1 {
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(6px + 1.5rem);
  color: #333333;
  line-height: calc(2px + 2rem);
  text-align: center;
}

.index_8 .p2 {
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #666666;
  line-height: calc(8px + 1rem);
  text-align: center;
  margin-top: calc(10px + 1.5rem);
}

.index_8_btn_box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2px + 1.5rem);
}

.index_8_btn {
  width: calc(52px + 5rem);
  height: calc(5px + 2rem);
  background: #000000;
  border-radius: calc(20px + 4rem);
  margin-top: calc(16px + 2rem);
}

.index_8_btn a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(8px + 0.5rem);
  color: #FFFFFF;
  line-height: calc(1px + 1rem);
}

.index_8_list {
  display: flex;
  justify-content: space-between;
  margin-top: calc(10px + 3rem);
}

.index_8_item {
  width: 22.9167%;
  height: calc(46px + 5rem);
  border-radius: calc(10px + 0.5rem);
  border: 1px solid #E4E4E4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10px + 0.5rem);
}
 
.index_8_item_text .p1 {
  font-family: DINPro_Bold;
  font-weight: bold;
  font-size: calc(10px + 0.5rem);
  color: #333333;
  line-height: calc(4px + 1rem);
  text-align: left;
}
.index_8_item_text .p2 {
  width: calc(30px + 10rem);
  font-family: Roboto_Regular;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #777777;
  line-height: calc(8px + 1rem);
  margin-top: calc(5px + 0.5rem);
  text-align: left;
}

.index_8_item img{
  width: calc(10px + 1rem);
}

.index_8_item:nth-of-type(3) img{
  width: calc(20px + 1rem);
}
.index_2_list_swiper_m{
  display: none;
}
.index_2_list_swiper{
  display: block;
}
.index_7_list_swiper{
  display: block;
}
.index_7_list_swiper_m{
  display: none;
}

@media screen and (max-width: 1100px){
  body{
    overflow: hidden;
  }
  .banner_text .p1{
    font-size: calc(16px + 1rem);
    line-height: 1.5;
  }
  .banner_text .p2{
    font-size: calc(12px + 1rem);
    line-height: 1.5;
  }
  .banner_more a{
    font-size: calc(10px + 1rem);
    line-height: 1.5;
  }
  .banner_more img {
    width: calc(18px + 2rem);
}


.banner_more {
    width: calc(86px + 5rem);
    height: calc(21px + 2rem);
}
.index_banner {
  width: 100%;
  height: calc(162px + 1rem);
}
.index_1_box{
  height: auto;
}
.index_1_text{
  width: 100%;
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_1_more a{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_2_box{
  padding-top: calc(10px + 5rem);
}
.index_2_top{
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(10px + 1rem);
}
.index_2_top_pic {
  gap: calc(22px + 1rem);
}
.index_2_top_pic img {
  height: calc(5px + 8rem);
}
.index_2_list_swiper{
  display: none;
}
.index_2_list_swiper_m{
  display: block;
}
.index_2_list_item .p1{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index_3{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(10px + 1rem);
}
.index_3_more {
  width: calc(80px + 5rem);
  height: calc(20px + 2rem);
}
.index_3_more a{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_4_list{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.index_4_item{
  height: auto;
}
.index_4_item:nth-of-type(2){
  height: auto;
}
.index_4_item:nth-of-type(3){
  height: auto;
}
.index_5{
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(10px + 1rem);
  padding-top: calc(10px + 2rem);
  
}
.index_5_text .p0{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_5_more a{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_5_more {
  width: calc(65px + 5rem);
  height: calc(20px + 2rem);
}

.index_7_list_swiper_m{
  display: block;
}
.index_7_list_swiper{
  display: none;
}

.index_7_item_pic {
  width: 100%;
  height: calc(80px + 30rem);
}
.index_7_list_item .p1{
  font-size: calc(12px + 1rem);
  line-height: 1.5;
}
.index_7_list_item .p2{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_7_list_item .p3{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_8 .p1{
  font-size: calc(16px + 1rem);
  line-height: 1.5;
}
.index_8 .p2{
  width: 100%;
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_8_list{
  flex-wrap: wrap;
  row-gap: calc(10px + 1rem);
}
.index_8_item {
  width: 100%;
  height: auto;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: calc(10px + 2rem) 0;
}
.index_8_item img {
  width: calc(26px + 1rem);
}
.index_8_item:nth-of-type(3) img {
  width: calc(33px + 1rem);
}
.index_8_btn a{
  font-size: calc(10px + 1rem);
  line-height: 1.5;
}
.index_8_btn {
  width: calc(72px + 5rem);
  height: calc(20px + 2rem);
}
}