/*滑块效果*/
.scroll-type-a::-webkit-scrollbar-thumb:hover {
  border-radius: 3px;
  background-color: #ffffff;
}
.i-block {
  display: inline-block;
}
[flex] {
  display: flex;
}
[flex][flex~="i"] {
  display: inline-flex;
}
[flex][flex~="wrap"] {
  flex-wrap: wrap;
}
[flex][flex~="no-wrap"] {
  flex-wrap: nowrap;
}
[flex][flex~="ja"] {
  justify-content: space-around;
}
[flex][flex~="jb"] {
  justify-content: space-between;
}
[flex][flex~="js"] {
  justify-content: start;
}
[flex][flex~="jfs"] {
  justify-content: flex-start;
}
[flex][flex~="jc"] {
  justify-content: center;
}
[flex][flex~="je"] {
  justify-content: end;
}
[flex][flex~="jfe"] {
  justify-content: flex-end;
}
[flex][flex~="ais"] {
  align-items: flex-start;
}
[flex][flex~="aic"] {
  align-items: center;
}
[flex][flex~="acc"] {
  align-content: center;
}
[flex][flex~="aie"] {
  align-items: flex-end;
}
  
 
.self-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.self-svg svg.icon {
  width: var(--size);
  height: var(--size);
  fill: var(--fill);
}
  
/**轮播切换**/
.swiper-btns .swiper-btn {
  --s: 60px;
  --fill: #ffffff;
  --dc: rgba(var(--main-color-rgb), 0.1);
  --hc: rgba(var(--main-color-rgb), 0.5);
  display: flex;
  position: relative;
}
.swiper-btns .swiper-btn .self-svg {
  --size: 30%;
  position: relative;
  border-radius: 50%;
  width: var(--s);
  height: var(--s);
  background-color: var(--dc);
  transition: background 0.3s;
}
.swiper-btns .swiper-btn .self-svg svg {
  margin-left: 5%;
}
.swiper-btns .swiper-btn:hover .self-svg {
  background-color: var(--hc);
}
.swiper-btns .swiper-btn.prev .self-svg svg {
  margin-left: -5%;
}
.swiper-btns .swiper-btn.prev svg {
  transform: scaleX(-1);
}
@media (max-width: 1600px) {
  .swiper-btns .swiper-btn {
    --s: 50px;
  }
}
@media (max-width: 1200px) {
  .swiper-btns .swiper-btn {
    --s: 0.7rem;
  }
}
.swiper-btns-a .swiper-btn {
  --h: 12px;
  --fill: #ffffff;
  --c: var(--main-next-color);
  --c-h: var(--main-next-hover-color);
  --size: calc(var(--h)*0.4);
  display: flex;
  z-index: 2;
}
.swiper-btns-a .swiper-btn .self-svg {
  width: var(--h);
  height: var(--h);
  background-color: var(--c);
}
.swiper-btns-a .swiper-btn .self-svg svg {
  transition: fill 0.3s;
}
.swiper-btns-a .swiper-btn:hover .self-svg {
  background-color: var(--c-h);
}
.swiper-btns-a .swiper-btn.next svg {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -moz-transform: rotate(180deg);
  /* Firefox */
  -webkit-transform: rotate(180deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(180deg);
}
@media (max-width: 1200px) {
  .swiper-btns-a .swiper-btn {
    --h: 0.6rem;
  }
}
.swiper-btns-c .swiper-btn {
  --h: 52px;
  --fill: #ffffff;
  --c: var(--main-next-color);
  --c-h: var(--main-next-hover-color);
  --size: calc(var(--h)*0.4);
  display: flex;
  z-index: 2;
}
.swiper-btns-c .swiper-btn .self-svg {
  width: var(--h);
  height: var(--h);
  background-color: var(--c);
}
.swiper-btns-c .swiper-btn .self-svg svg {
  transition: fill 0.3s;
}
.swiper-btns-c .swiper-btn:hover .self-svg {
  background-color: var(--c-h);
}
.swiper-btns-c .swiper-btn.next svg {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -moz-transform: rotate(180deg);
  /* Firefox */
  -webkit-transform: rotate(180deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(180deg);
}
@media (max-width: 1200px) {
  .swiper-btns-c .swiper-btn {
    --h: 0.6rem;
  }
}
.swiper-btns-d .swiper-btn {
  --h: 25px;
  --fill: #cccccc;
  --size: var(--h);
  display: flex;
  z-index: 2;
}
.swiper-btns-d .swiper-btn .self-svg {
  width: 100%;
  height: var(--h);
}
.swiper-btns-d .swiper-btn .self-svg svg {
  transition: fill 0.3s;
}
.swiper-btns-d .swiper-btn:hover {
  --fill: #444444;
}
.swiper-btns-d .swiper-btn.prev svg {
  transform: scaleY(-1);
}
@media (max-width: 1200px) {
  .swiper-btns-d .swiper-btn {
    --h: 0.6rem;
  }
}
.swiper-btn-parent {
  position: relative;
}
.swiper-btn-parent .swiper-btns .swiper-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
}
.swiper-btn-parent .swiper-btns .prev {
  left: 0;
  transform: translate(-150%, -50%);
}
.swiper-btn-parent .swiper-btns .next {
  right: 0;
  transform: translate(150%, -50%);
}
.swiper-btn-parent .swiper-btns-a .swiper-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translate(0, -50%);
}
.swiper-btn-parent .swiper-btns-a .prev {
  left: -38px;
}
.swiper-btn-parent .swiper-btns-a .next {
  right: -38px;
}
@media (max-width: 1750px) {
  .swiper-btn-parent .swiper-btns .prev {
    transform: translate(-110%, -50%);
  }
  .swiper-btn-parent .swiper-btns .next {
    transform: translate(110%, -50%);
  }
}
@media (max-width: 1700px) {
  .swiper-btn-parent .swiper-btns .prev {
    transform: translate(-105%, -50%);
  }
  .swiper-btn-parent .swiper-btns .next {
    transform: translate(105%, -50%);
  }
}
@media (max-width: 1600px) {
  .swiper-btn-parent {
    padding: 0 3%;
  }
  .swiper-btn-parent .swiper-btns .prev {
    transform: translate(-15%, -50%);
  }
  .swiper-btn-parent .swiper-btns .next {
    transform: translate(15%, -50%);
  }
}
@media (max-width: 1500px) {
  .swiper-btn-parent {
    padding: 0 5%;
  }
  .swiper-btn-parent .swiper-btns .prev {
    transform: translate(0%, -50%);
  }
  .swiper-btn-parent .swiper-btns .next {
    transform: translate(0%, -50%);
  }
}
@media (max-width: 1200px) {
  .swiper-btn-parent {
    padding: 0 0.3rem;
  }
}
.swiper-btn-parent-a {
  position: relative;
}
.swiper-btn-parent-a .swiper-btns-a .swiper-btn {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.swiper-btn-parent-a .swiper-btns-a .prev {
  left: -82px;
}
.swiper-btn-parent-a .swiper-btns-a .next {
  right: -82px;
}
@media (max-width: 1500px) {
  .swiper-btn-parent-a .swiper-btns-a .prev {
    left: calc(var(--h)*-1.5);
  }
  .swiper-btn-parent-a .swiper-btns-a .next {
    right: calc(var(--h)*-1.5);
  }
}
@media (max-width: 1400px) {
  .swiper-btn-parent-a .swiper-btns-a .prev {
    left: calc(var(--h)*-0.7);
  }
  .swiper-btn-parent-a .swiper-btns-a .next {
    right: calc(var(--h)*-0.7);
  }
}
@media (max-width: 860px) {
  .swiper-btn-parent-a {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  .swiper-btn-parent-a .swiper-btns-a .prev {
    left: -0.3rem;
  }
  .swiper-btn-parent-a .swiper-btns-a .next {
    right: -0.3rem;
  }
}
/**轮播点**/
.swiper-points {
  --background: var(--main-color);
}
.swiper-points span {
  --sw: 18px;
  margin: 0 5px;
  border: 0 none;
  border-radius: 0;
  width: var(--sw);
  height: var(--sw);
  opacity: 1;
  background: transparent;
  cursor: pointer;
}
.swiper-points span .self-svg {
  --size: 100%;
  --fill: #ffffff;
}
.swiper-points span:hover .self-svg,
.swiper-points span.swiper-pagination-bullet-active .self-svg {
  --fill: var(--main-color);
}
@media (max-width: 1200px) {
  .swiper-points span {
    margin: 0 0.05rem;
    --sw: 0.22rem;
  }
}
.swiper-points-a span {
  --c: #e5e5e5;
  --w: 12px;
  margin: 0 4px;
  border: 2px solid var(--c);
  border-radius: 50%;
  width: var(--w);
  height: var(--w);
  opacity: 1;
  background: transparent;
  cursor: pointer;
  transition: border 0.3s;
}
.swiper-points-a span:hover {
  border-color: var(--main-color);
}
.swiper-points-a span.swiper-pagination-bullet-active {
  border-color: var(--main-color);
}
@media (max-width: 1200px) {
  .swiper-points-a span {
    --w: 0.22rem;
    margin: 0 0.1rem;
  }
}