﻿#client { padding: 0px; background: url("../images/ditu1.png") center center / cover no-repeat; }
#client .index_container { position: relative; padding-bottom: 50px; }
#client .index_container .swiper-pagination-bullet-active { height: 8px; width: 26px !important; border-radius: 10px !important; }
#client .title { justify-content: center; }
#client .title h1, #client .title p { text-align: center; }
.hb_next, .hb_prev { transform: translateY(-50%); background-image: url("") !important; }
.hb_next i, .hb_prev i { display: inline-block; font-size: 40px; color: rgb(45, 121, 205); line-height: 1; }
.hb_prev.swiper-button-disabled i, .hb_next.swiper-button-disabled i { color: rgb(204, 204, 204); }
.hb_next i { transform: rotate(180deg); }
.history_next, .history_prev { top: 85%; height: 27px; z-index: 999; }
.honner { background: url("../images/rybg.png") center center / cover no-repeat; padding: 80px 0px; }
.honner .swiper-container { padding-bottom: 60px; }
.honner .swiper-container-horizontal > .swiper-scrollbar { left: inherit; width: 90%; height: 2px; bottom: 12px; }
.honner .case_next, .honner .case_prev { bottom: 6px; }
.honner h1.block { display: flex; align-items: center; justify-content: space-between; padding: 0px !important; }
.honner h1.block .tab a { color: rgb(153, 153, 153); font-size: 14px; border-radius: 40px; border: 1px solid rgb(204, 204, 204); padding: 10px 30px; }
.honner h1.block .tab a:nth-child(1) { margin-right: 20px; }
.honner h1.block .tab a:hover, .honner h1.block .tab a.on { background-color: var(--themeColor); color: rgb(255, 255, 255); border: 2px solid var(--themeColor); }
.honner .index_case:nth-of-type(3) { display: none; }
.honner .swiper-slide a { display: block; width: 100%; }
.honner .swiper-slide { width: auto; }
.honner .swiper-slide a img {width: auto;height: 300px;}
.honner .swiper-slide a p { margin: 10px auto 20px; text-align: center; font-size: 14px; }
.indexnews { display: none; }
.indexnews.active { display: block; }
.indexnews .swiper-container { padding-bottom: 60px; }
.indexnews .swiper-pagination-bullet-active { width: 26px; border-radius: 20px; }
.indexnews .iconfont { font-size: 40px; color: rgb(255, 255, 255); }
.indexnews .iconfont:hover { color: var(--themeColor); }
.indexnews .prevnew { position: absolute; top: 50%; left: 10%; transform: translate(-10%, -50%); z-index: 99; }
.indexnews .nextnew { z-index: 99; position: absolute; top: 50%; right: 10%; transform: translate(-10%, -50%) rotate(180deg); }
.history { background: url("../images/history.png") center center / cover no-repeat; }
.history .h1 { margin-bottom: 50px; }
.thismain { display: flex; justify-content: space-between; }
.historyimgs { width: 25%; }
.historyswiper { width: 70%; }
.historyswiper .on h3 { color: var(--themeColor); }
.historyswiper .on .des { color: rgb(51, 51, 51); }
.historyimgs img { width: 100%; border-radius: 5px; }
.historyswiper .swiper-container { overflow: hidden; }
.historyswiper .img { display: none; }
.historyswiper h3 { font-size: 26px; color: rgb(153, 153, 153); padding-bottom: 10px; margin-bottom: 20px; border-bottom: 2px solid rgb(223, 223, 223); }
.historyswiper .des { font-size: 14px; color: rgb(153, 153, 153); }
.history_year { width: 80%; margin: 0px auto 50px; position: relative; }
.history_year::after { position: absolute; top: 75%; left: 0px; transform: translateY(-75%); content: ""; display: block; width: 100%; height: 1px; background-color: rgb(223, 223, 223); }
.history_year .swiper-slide { cursor: pointer; position: relative; text-align: center; }
.history_year .swiper-slide:hover p { color: var(--themeColor); }
.history_year .swiper-slide:hover .img img:nth-child(1) { display: none; }
.history_year .swiper-slide:hover .img img:nth-child(2) { display: inline-block !important; }
.history_year .swiper-slide p { margin-bottom: 10px; font-size: 14px; text-align: center; }
.history_year .swiper-slide .img { width: 100%; }
.history_year .swiper-slide .img img { display: none; }
.history_year .swiper-slide .img img:nth-child(1) { display: inline-block; }
.history_year .swiper-slide:nth-child(5n) .img { position: relative; }
.history_year .swiper-slide:nth-child(5n) .img::after { position: absolute; top: 50%; right: 0px; transform: translateY(-2px); z-index: -1; content: ""; display: block; width: 50%; height: 10px; background: rgb(255, 255, 255); }
.history_year .swiper-slide.swiper-slide-active p { color: var(--themeColor); }
.history_year .swiper-slide.swiper-slide-active .img { position: relative; }
.history_year .swiper-slide.swiper-slide-active .img img:nth-child(1) { display: none; }
.history_year .swiper-slide.swiper-slide-active .img img:nth-child(2) { display: inline-block; }
.history_year .swiper-slide:nth-child(5n-4) .img { position: relative; }
.history_year .swiper-slide:nth-child(5n-4) .img::after { position: absolute; top: 50%; left: 0px; transform: translateY(-2px); z-index: -1; content: ""; display: block; width: 50%; height: 5px; background: rgb(255, 255, 255); }
#news .content { display: flex; align-items: center; justify-content: space-between; }
#news .content .btn_list { width: auto; display: flex; align-items: center; justify-content: space-between; }
#news .content .btn_list .btn_item { cursor: pointer; border: 1px solid rgb(102, 102, 102); color: rgb(102, 102, 102); border-radius: 20px; padding: 5px 20px; font-size: 14px; }
#news .content .btn_list .btn_item:nth-child(1) { margin-right: 20px; }
#news .content .btn_list .btn_item:hover, #news .content .btn_list .btn_item.active { color: rgb(255, 255, 255); border: 1px solid var(--themeColor); background-color: var(--themeColor); }
.swiper_video .swiper-slide { position: relative; border-radius: 20px; overflow: hidden; background-color: transparent; width: 50% !important; }
.swiper_video .swiper-slide::after { content: ""; display: block; background-color: rgba(255, 255, 255, 0.7); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.swiper_video .swiper-slide .stop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.swiper_video .swiper-slide .txt { display: none; position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0, 0, 0, 0.2); }
.swiper_video .swiper-slide .txt p, .swiper_video .swiper-slide .txt h4 { width: 90%; text-align: left; color: rgb(255, 255, 255); font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.swiper_video .swiper-slide .txt h4 { font-size: 16px; text-align: left; margin-bottom: 0px; }
.swiper_video .swiper-slide video, .swiper_video .swiper-slide img { border-radius: 10px; width: 100% !important; }
.swiper_video .swiper-slide-active::after { display: none !important; }
.swiper_video .swiper-slide-active .txt { display: block; }
.title { text-align: center; margin: 0px auto 50px; position: relative; }
.title p { text-align: center; }
.title .bar { position: absolute; width: 60px; height: 3px; border-radius: 2px; background-color: rgb(51, 51, 51); bottom: -10px; left: 50%; transform: translateX(-50%); }
#js { background-size: cover; background-repeat: no-repeat; }
#js .warp { position: relative; display: flex; margin-bottom: 140px; }
#js .warp .demo { position: absolute; bottom: -75px; left: 0px; z-index: 999; width: 60%; display: flex; justify-content: space-around; background-color: rgb(255, 255, 255); box-shadow: rgb(221, 221, 221) 0px 0px 10px; padding: 35px 0px; border-radius: 10px; }
#js .warp .demo a { position: relative; text-align: center; display: block; }
#js .warp .demo a::after { position: absolute; top: 50%; right: -120%; transform: translate(120%, -50%); content: ""; display: block; width: 1px; height: 62%; background: rgb(204, 204, 204); }
#js .warp .demo a:last-child::after { display: none; }
#js .warp .demo h5 { font-size: 14px; }
#js .warp .demo p { position: relative; text-align: center; height: auto; font-size: 12px; color: var(--themeColor); }
#js .warp .demo p span { font-size: 24px; }
#js .warp .demo p i { position: absolute; top: 0px; right: -16px; }
#js .warp .js_left { padding-bottom: 70px; flex: 1 1 0%; margin-right: 70px; display: flex; flex-direction: column; justify-content: space-between; }
#js .warp .js_left .ti { font-size: 30px; }
#js .warp .js_left .name { color: var(--themeColor); margin-top: 15px; font-size: 22px; }
#js .warp .js_left p { margin: 10px 0px 30px; padding-right: 10px; overflow-y: scroll; }
#js .warp .js_left p::-webkit-scrollbar { width: 3px; height: 1px; }
#js .warp .js_left p::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px inset; background: rgb(6, 95, 218); }
#js .warp .js_left p::-webkit-scrollbar-track { box-shadow: transparent 0px 0px 5px inset; border-radius: 10px; background: transparent; }
#js .warp .js_right { width: 50%; position: relative; }
#js .warp .js_right img:nth-child(1) { z-index: -1; position: absolute; top: -35px; right: 0px; width: 80%; height: auto; }
#js .warp .js_right img:nth-child(2) { width: 90%; height: auto; transform: translateY(18%); object-position: center center; border-radius: 15px; }
#wh {background-image: url(../images/185.png);background-size: cover;background-position: center center;background-repeat: no-repeat;}
#wh .title { color: rgb(255, 255, 255); }
#wh .title p { color: rgb(255, 255, 255); }
#wh ul { display: flex; justify-content: space-between; }
#wh ul li { width: 20%; background-color: rgba(255, 255, 255, 0.4); border-radius: 10px; display: flex; flex-direction: column; align-items: center; padding: 30px 10px; position: relative; transition: all 0.3s ease 0s; cursor: pointer; }
#wh ul li .iconfont { font-size: 31px; color: var(--themeColor); background-color: rgba(255, 255, 255, 0.933); width: 55px; height: 55px; line-height: 55px; text-align: center; border-radius: 50%; position: absolute; top: -30px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 7px; }
#wh ul li div { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; position: relative; }
#wh ul li div h5 { font-size: 18px; margin: 20px auto 10px; position: relative; font-family: Regular; }
#wh ul li div p { width: 100%; color: rgb(136, 136, 136); text-align: center; }
#wh ul li::after { content: ""; width: 100%; height: 0px; background-color: var(--themeColor); position: absolute; left: 0px; bottom: 0px; border-radius: 0px 0px 10px 10px; transition: all 0.1s ease 0s; }
#wh ul li:hover { background-color: rgb(255, 255, 255); }
#wh ul li:hover .iconfont { background-color: rgb(255, 255, 255); }
#wh ul li:hover::after { height: 5px; }
#wh ul li:hover span { opacity: 0; }
#wh ul li:hover p { bottom: 50%; opacity: 1; }
#td ul { display: flex; justify-content: space-evenly; }
#td ul li { width: 20%; }
#td ul li p { color: rgb(136, 136, 136); }
#td ul li .bar { display: flex; justify-content: space-between; align-items: center; }
#td ul li .bar::before { content: ""; width: 20px; height: 20px; background-color: var(--themeColor); border-radius: 50%; }
#td ul li .bar::after { content: ""; width: 85%; height: 1px; border-top: 1px dashed var(--themeColor); }
#td ul li .ti { margin: 20px 0px 10px; font-size: 18px; }
.honner .swiper-slide .img { height: 480px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 1500px) {
  #js .warp .demo a::after { right: -100%; transform: translate(100%, -50%); }
}
@media (max-width: 1400px) {
  #js .warp .demo a::after { right: -78%; transform: translate(78%, -50%); }
}
@media (max-width: 1080px) {
  #js .warp .demo a::after { right: -56%; transform: translate(56%, -50%); }
}
@media (max-width: 810px) {
  #js .warp .js_right img:nth-child(1) { display: none; }
  #js .warp .js_right img:nth-child(2) { width: 100%; transform: translateY(0%); }
  #js .warp { display: block; }
  #js .warp .js_left { padding-bottom: 0px; margin-right: 0px; }
  #js .warp .js_right { width: 100%; }
  #js .warp .js_right > div { display: none; }
  #wh ul { flex-wrap: wrap; }
  #wh ul li { width: 45%; }
  #wh ul li:nth-child(n+3) { margin-top: 50px; }
}
@media (max-width: 540px) {
  #js .warp .demo a::after, .indexnews .prevnew, .indexnews .nextnew { display: none; }
  .thismain { flex-wrap: wrap; }
  .history_year .swiper-slide:nth-child(5n) .img::after { display: none; }
  .history_year .swiper-slide:nth-child(3n) .img::after { position: absolute; top: 50%; right: 0px; transform: translateY(-2px); z-index: -1; content: ""; display: block; width: 50%; height: 35px; background: rgb(255, 255, 255); }
  .historyimgs { margin-bottom: 10px; width: 100%; }
  .historyswiper { width: 100%; }
  .history_year { width: 90%; }
  .indexnews .prevnew, .indexnews .nextnew { top: 45%; }
  .honner .swiper-slide .img {height: 100%;overflow: hidden;}
  .honner h1.block .tab a { padding: 5px 20px; }
  #client .title { margin-bottom: 20px; }
  #js .warp .js_left .name { font-size: 20px; }
  #js .warp .js_left .name { margin-top: 15px; }
  #js .warp .js_right img:nth-child(1) { display: none; }
  #js .warp .js_right img:nth-child(2) { width: 100%; transform: translateY(0%); }
  .honner h1.block { flex-wrap: wrap; }
  .honner h1.block .tab { margin-top: 10px; width: 100%; }
  .history { }
  .swiper_video .swiper-slide { width: 100% !important; }
  .swiper_video .swiper-slide .txt p { }
  .indexnews .swiper-slide .txt { padding: 10px 20px; }
  #wh ul li div h5 { margin: 10px auto 0px; font-size: 16px; }
  #js .block { padding-bottom: 40px; }
  #js .warp .js_left { margin-bottom: 20px; padding-bottom: 0px; }
  #js .warp .demo { position: unset; width: 100%; padding: 20px 0px; }
  #js .warp .demo p span { font-size: 16px; }
  #js .warp .demo h5 { font-size: 12px; }
  #js .warp { margin-bottom: 0px; }
  #js .warp .demo p i { top: -3px; right: -8px; }
  .title { margin: 0px auto 50px; }
  #wh ul li { width: 100%; }
  #wh ul li:nth-child(n+2) { margin-top: 50px; }
  #wh ul li div p { position: static; transform: none; opacity: 1; margin-top: 10px; }
  .honner { padding: 30px 0px; }
  #wh ul li:hover h5, #wh ul li:hover span { opacity: 1; }
  #td ul { flex-wrap: wrap; }
  #td ul li { width: 45%; }
  #td ul li .ti { margin: 5px 0px; }
  #td ul li:nth-child(n+3) { margin-top: 20px; }
}
