.main{
  overflow: hidden;
}

/*=============== HOME ===============*/

.home{
  padding-block: 170px 0;
}

.home__swiper {
  /*aspect-ratio: 610/177;*/
  --swiper-pagination-color: #F53F3F;
}


.home__swiper .home_article{
  height:354px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home__swiper .home_article a{
  display: block;
  height: 100%;
}

/* 红色分页器 */
.splide__pagination__page.is-active  {
  background: #F53F3F !important; /* 激活状态红色 */
  transform: scale(1.2);
}

.splide__pagination__page {
  background: rgba(255, 255, 255, 0.5); /* 非激活半透明 */
  transition: 0.3s;
}

@media screen and (min-width: 1440px) {
  .home__swiper .home_article {
    /*width: auto;*/
    height:400px;
    /*aspect-ratio: 610/177;*/
    --swiper-pagination-color: #F53F3F;
  }

}
@media screen and (min-width: 1600px) {
  .home__swiper .home_article {
    /*width: auto;*/
    height:460px;
    /*aspect-ratio: 610/177;*/
    --swiper-pagination-color: #F53F3F;
  }

}

.home__swiper .swiper-button-prev{
  opacity: 0.8;
  color: #fff;
}
.home__swiper .swiper-button-next{
  opacity: 0.8;
  color: #fff;
}

/*=============== NOTIFICATION ===============*/
.notification{
 margin-block:8px;
}
.notification__container{
  position: relative;
  padding-left: 80px;
  background: #eeeeee;
  overflow: hidden;
}
.notification__icon{
  background: #F53F3F;
  width: 200px;
  padding: 4px 0 4px 0;
  color: #fff;
  text-align: center;
  font-size: 20px;
  position: absolute;
  transform: rotate(-45deg);
  top: 7px;
  left: -71px;
}

.notification__swiper{
  width: 100%;
  height: 56px;
  line-height: 56px;

}


.notification_article a:hover{
  color: #F53F3F;
}


/*=============== NEWS ===============*/
.news{
  margin-block: 8px;
}
.news__container{
  display: flex;
  justify-content: space-between;
}
.pic-news-wrapper{
  width: 600px;
  height: 450px;
  position: relative;
}

.pic-news-swiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.pic-news-swiper .swiper-slide img {
  display: block;
  /*width: 550px;*/
  height: 450px;
  object-fit: cover;
}

.pic-news-swiper {
  margin-left: auto;
  margin-right: auto;
  --swiper-navigation-size: 30px
}

.pic-news-swiper .swiper-button-prev{
  opacity: 0.6;
  color: #fff;
}
.pic-news-swiper .swiper-button-next{
  opacity: 0.6;
  color: #fff;
}
.pic-news-swiper .news-title{
  width:100%;
  padding: 10px 40px 10px 0;
  position: absolute;
  bottom: 0;
  font-size: 16px;
  color: #fff;
  background: #000;
  opacity: 0.5;
  text-align: left;
  text-indent: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news .news-cate-wrapper{
  width: 612px;
  height: 450px;
  background: #fff;
}
.news .news-cate-container{
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.15) 0 1.95px 2.6px;
}
.news .news-cate-container ul{
  display: flex;
}
.news-cate-container .news-cate-content{
  position: absolute;
  top:50px;
  left: 0;
  display: none;
  height: 355px;
}

.news-cate-item-title{
  height: 50px;
  display: block;
  text-align: center;
  width: 150px;
  line-height: 50px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  /*box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 1.6px;*/
}

.news-cate-item-active{
  background: #F53F3F;
  color: white;
}

.news-cate-content{
  /*border: 1px solid red;*/
  padding:8px 10px 0 6px;
}
.news-cate-content-item{
  position: relative;
}
.news-cate-content-item:before{
  width: 6px;
  height: 14px;
  border-radius: 4px;
  content: " ";
  background: #F53F3F;
  color: #F53F3F;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  left: 5px;
}
.news-cate-content-item:first-child{
  display: block;
  height: 140px;
}
.news-cate-content-item:first-child:before{
  display: none;
}
.news-cate-content-item .news-cate-content-title-first{
  width: 400px;
  height: 42px;
  margin: 0 auto;
  text-align: center;
  line-height: 42px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-cate-content-item:hover .news-cate-content-title-first{
  color: #F53F3F;
}
.news-cate-content-item .news-cate-content-first-p{
  text-align: justify;
  line-height: 30px;
  text-indent: 2em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.news-cate-content-item{
  display: flex;
  justify-content: space-between;
  line-height: 49px;
  font-size: 16px;
  border-bottom: 1px solid #eeeeee;
}
.news-cate-content-item:hover .news-cate-content-title{
  color: #F53F3F;
}
.news-cate-content-title{
  width: 448px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 2em;
}

.news-cate-content-time{
  color: #a9aeb8;
  font-size: 14px;
}


/*=============== VIDEO AND PIC TOWING ===============*/

.video-pic-towing{

  margin: 20px 0 10px;
}

.video-pic-towing-container{
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  height: 288px;
}

.video-pic-towing-list{
  height: 45px;
  line-height: 45px;
  color:#F53F3F;
  background: #f3f3f3;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  display: flex;
  margin-block-end: 10px;
}

.video-pic-towing-item-title{
  display: block;
  text-align: center;
  width: 140px;
  font-size: 20px;
  font-weight: 500;

  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.video-pic-towing-item-active{
  background: #F53F3F;
  color: #fff;
}

.video-pic-towing-item-content{
  position: absolute;
  height: 180px;
  top:50px;
  left: 0;
  display: none;
  width: 100%;
  z-index: 99;
}

.video-towing-slider{
  margin-block: 10px;
}

.video-towing-slider a{
  display: block;
}

.video-towing-slider a:hover p{
  color: #F53F3F;
}

.video-towing-slider_list p{
  text-align: center;
  padding-inline: 20px;
  line-height: 47px;
}

.video-towing-slider_list img{
  display: block;
  width: 288px;
  height: 178px;
}

.video-towing-slider-item {
  position: relative;
}

.video-towing-slider-item .video-mask{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 63px;
  left: 121px;
}





.pic-towing-slider{
  margin-block: 10px;
}

.pic-towing-slider a{
  display: block;
}

.pic-towing-slider a:hover p{
  color: #F53F3F;
}

.pic-towing-slider_list p{
  text-align: center;
  padding-inline: 20px;
  line-height: 47px;
}

.pic-towing-slider_list img{
  display: block;
  width: 288px;
  height: 177px;
}



/*=============== PAGE BLOCK 6 ===============*/



/*=============== BANNER TOWING ===============*/

.banner-towing{
  margin-bottom: 8px;
}

.banner-towing__container img{
  width: 100%;
  height: 120px;
  object-fit: cover;
}


/*=============== PAGE BLOCK 6 ===============*/

.page-block6{
  margin-bottom: 8px;
}
.page-block6-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.page-block6-left{
  height: 385px;
  background: #ffffff;
}
.page-block6-left-title-wrapper {
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  color: #F53F3F;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  background: #f3f3f3;
  margin-block-end: 10px;
  /*padding: 10px 1em 0 1em;*/
}
.page-block6-left-title-wrapper h2{
  width: 140px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: #F53F3F;
  transition: 0.2s ease;
}

.page-block6-left-title-wrapper:hover h2{
  font-weight: bold;
}

.page-block6-left-title-wrapper .ri-arrow-right-double-fill{
  transition: 0.2s ease;
}
.page-block6-left-title-wrapper:hover .ri-arrow-right-double-fill{
  font-weight: bold;
}
.page-block6-left-title-wrapper .page-block6-left-more:hover{
  color: #F53F3F;
}

.page-block6-left-content-wrapper{
  margin-top: 4px;
}
.page-block6-left-content {
  display: flex;
  justify-content: space-between;
  line-height: 48px;
  font-size: 16px;
  text-indent: 2em;
  position: relative;
  padding-right: 12px;
  border-bottom: 1px solid #eeeeee;
}

.page-block6-left-content:before {
  width: 6px;
  height: 14px;
  border-radius: 4px;
  content: " ";
  background: #F53F3F;
  color: #F53F3F;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  left: 12px;
}

.page-block6-left-content-link {
  width: 450px;
}
.page-block6-left-content-link:hover{
  color: #F53F3F;
}

.page-block6-left-more{
  color: #a9aeb8;
}

.page-block6-left-content-time{
  color: #a9aeb8;
  font-size: 14px;
}


.page-block6-right{
  height: 385px;
  background: #ffffff;
}
.page-block6-right-title-wrapper {
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  color: #F53F3F;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  background: #f3f3f3;
  margin-block-end: 10px;
}
.page-block6-right-title-wrapper h2{
  width: 140px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: #F53F3F;
  transition: 0.2s ease;
}
.page-block6-right-title-wrapper:hover h2{
  font-weight: bold;
}

.page-block6-right-title-wrapper .ri-arrow-right-double-fill{
  transition: 0.2s ease;
}
.page-block6-right-title-wrapper:hover .ri-arrow-right-double-fill{
  font-weight: bold;
}
.page-block6-right-title-wrapper .page-block6-right-more:hover{
  color: #F53F3F;
}

.page-block6-right-content-wrapper{
  margin-top: 4px;
}
.page-block6-right-content {
  display: flex;
  justify-content: space-between;
  line-height: 48px;
  font-size: 16px;
  text-indent: 2em;
  position: relative;
  padding-right: 12px;
  border-bottom: 1px solid #eeeeee;
}

.page-block6-right-content:before {
  width: 6px;
  height: 14px;
  border-radius: 4px;
  content: " ";
  background: #F53F3F;
  color: #F53F3F;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  left: 12px;
}

.page-block6-right-content-link {
  width: 450px;
}
.page-block6-right-content-link:hover{
  color: #F53F3F;
}
.page-block6-right-more{
  color: #a9aeb8;
}

.page-block6-right-content-time{
  color: #a9aeb8;
  font-size: 14px;
}




/*=============== PAGE BLOCK 7 ===============*/

.page-block7{
  margin-bottom: 8px;
}
.page-block7-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.page-block7-left{
  height: 385px;
  background: #ffffff;
}
.page-block7-left-title-wrapper {
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  color: #F53F3F;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  background: #f3f3f3;
  margin-block-end: 10px;
  /*padding: 10px 1em 0 1em;*/
}
.page-block7-left-title-wrapper h2{
  width: 140px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: #F53F3F;
  transition: 0.2s ease;
}

.page-block7-left-title-wrapper:hover h2{
  font-weight: bold;
}

.page-block7-left-title-wrapper .ri-arrow-right-double-fill{
  transition: 0.2s ease;
}
.page-block7-left-title-wrapper:hover .ri-arrow-right-double-fill{
  font-weight: bold;
}
.page-block7-left-title-wrapper .page-block7-left-more:hover{
  color: #F53F3F;
}

.page-block7-left-content-wrapper{
  margin-top: 4px;
}
.page-block7-left-content {
  display: flex;
  justify-content: space-between;
  line-height: 48px;
  font-size: 16px;
  text-indent: 2em;
  position: relative;
  padding-right: 12px;
  border-bottom: 1px solid #eeeeee;
}

.page-block7-left-content:before {
  width: 6px;
  height: 14px;
  border-radius: 4px;
  content: " ";
  background: #F53F3F;
  color: #F53F3F;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  left: 12px;
}

.page-block7-left-content-link {
  width: 450px;
}
.page-block7-left-content-link:hover{
  color: #F53F3F;
}

.page-block7-left-more{
  color: #a9aeb8;
}

.page-block7-left-content-time{
  color: #a9aeb8;
  font-size: 14px;
}


.page-block7-right{
  height: 385px;
  background: #ffffff;
}
.page-block7-right-title-wrapper {
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  color: #F53F3F;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  background: #f3f3f3;
  margin-block-end: 10px;
  /*padding: 10px 1em 0 1em;*/
}
.page-block7-right-title-wrapper h2{
  width: 140px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: #F53F3F;
  transition: 0.2s ease;
}

.page-block7-right-title-wrapper:hover h2{
  font-weight: bold;
}

.page-block7-right-title-wrapper .ri-arrow-right-double-fill{
  transition: 0.2s ease;
}
.page-block7-right-title-wrapper:hover .ri-arrow-right-double-fill{
  font-weight: bold;
}
.page-block7-right-title-wrapper .page-block7-right-more:hover{
  color: #F53F3F;
}

.page-block7-right-content-wrapper{
  margin-top: 4px;
}
.page-block7-right-content {
  display: flex;
  justify-content: space-between;
  line-height: 48px;
  font-size: 16px;
  text-indent: 2em;
  position: relative;
  padding-right: 12px;
  border-bottom: 1px solid #eeeeee;
}

.page-block7-right-content:before {
  width: 6px;
  height: 14px;
  border-radius: 4px;
  content: " ";
  background: #F53F3F;
  color: #F53F3F;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  left: 12px;
}

.page-block7-right-content-link {
  width: 450px;
}
.page-block7-right-content-link:hover{
  color: #F53F3F;
}

.page-block7-right-more{
  color: #a9aeb8;
}

.page-block7-right-content-time{
  color: #a9aeb8;
  font-size: 14px;
}

/*=============== PAGE BLOCK 8 ===============*/

.page-block8{
  margin-bottom: 8px;
}

.page-block8-title-wrapper{
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  color: #F53F3F;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  background: #f3f3f3;
  margin-block-end: 10px;
}

.page-block8-title-wrapper .page-block8-title{
  width: 140px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: #F53F3F;
  transition: 0.2s ease;
}

.page-block8-title-wrapper:hover .page-block8-title{
  font-weight: bold;
}

.page-block8-title-wrapper .ri-arrow-right-double-fill{
  transition: 0.2s ease;
}
.page-block8-title-wrapper:hover .ri-arrow-right-double-fill{
  font-weight: bold;
}
.page-block8-title-wrapper .page-block8-more:hover{
  color: #F53F3F;
}

.page-block8-slider{
  margin-block: 10px;
}

.page-block8-slider_list img{
  background-color: #fff;
  height: 90px;
}

/*=============== PAGE BLOCK 9 ===============*/

.page-block9{
  margin-bottom: 8px;
}

.page-block9-title-wrapper{
  height: 40px;
  line-height: 40px;
  color: #F53F3F;
  box-shadow: rgba(0, 0, 0, 0.15) 0 2.95px 2.6px;
  background: #f3f3f3;
  margin-block-end: 10px;
}

.page-block9-title-wrapper .page-block9-title{
  width: 140px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: #F53F3F;
  transition: 0.2s ease;
}

.page-block9-title-wrapper:hover .page-block9-title{
  font-weight: bold;
}

.page-block9-title-wrapper .ri-arrow-right-double-fill{
  transition: 0.2s ease;
}
.page-block9-title-wrapper:hover .ri-arrow-right-double-fill{
  font-weight: bold;
}

.page-block9-content-wrapper{
  margin-top: 10px;
  padding-left: 10px;
  background: #ffffff;
}


.page-block9-content-wrapper ul {
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.page-block9-content-wrapper li{
  height: 45px;
  line-height: 45px;
}

.page-block9-content-wrapper a{
  transition: 0.2s ease;
}
.page-block9-content-wrapper a:hover{
  color: #F53F3F;
}

/*=============== FOOTER ===============*/

.footer {
  background: #57586d;
  color:white;
  font-size: 14px;
}
.footer-container{
  display: flex;
  justify-content: space-between;
}
.footer-l {
  margin: 28px 0 8px;
  padding-left: 10px;
}
.footer-r {
  margin: 28px 100px 0 0;
}
.footer-con {

  height: 198px;
  margin: 0 auto;
}
.footer-p1{
  margin-bottom: 8px;
}
.footer-p2 {
  margin-bottom: 46px;
}
.footer-p3 a{
  color: #fff;
}
.footer-p3 .wanganbei{
  padding-left:22px ;
  background: url("../images/wangan.png") no-repeat center left;
  background-size: 18px;
}

.footer-r img {
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
  width: .6rem;
  border-radius: .5rem;
  background-color: hsl(230,16%,85%);
}

::-webkit-scrollbar-thumb {
  border-radius: .5rem;
  background-color: hsl(230,16%,65%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(230,16%,55%);
}

/*=============== SCROLL UP ===============*/



.scrollup {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 20px;
  width: 50px;
  height: 50px;
  opacity: 0.8;
  background-color: #F53F3F;
  border-radius: 50%;
  box-shadow: 0 2px 8px hsla(0, 0%, 0%, .1);
  font-size: 1.25rem;
  color: #fafafa;
  z-index: 100;
  transition: bottom .4s, transform .4s, background-color .4s;
}

.scrollup:hover {
  transform:translateY(-.5rem);
}

/* Show Scroll Up */
.show-scroll {
  bottom: 6rem;
}