.effect_banner {position: relative;}
.effect_banner .tle .p1 {color: #2b3053;}
.effect_banner .tle .p2 {color: #8c96ac;}
.effect_banner .text {width: 43%; text-align: justify; margin-top: 2.5rem; color: #7c8599; line-height: 1.8;}

.effect_nav {border-bottom: 1px solid #eaeaea;}
.effect_nav ul {display: flex; justify-content: space-between;}
.effect_nav ul li {text-align: center; flex: 1; position: relative;}
.effect_nav ul li a::after {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: .188rem; background: #7d33ff; transition: .5s;}
.effect_nav ul li a {display: inline-block; padding: 2.5rem 0; color: #3d3d3d; font-size: var(--font24); position: relative; transition: .5s;}
.effect_nav ul li.on a {color: #7d33ff;}
.effect_nav ul li.on a::after {width: 100%;}
@media (any-hover: hover) {
  .effect_nav ul li:hover a {color: #7d33ff;}
  .effect_nav ul li:hover a::after {width: 100%;}
}

.effect_nav_wap {padding: 3rem 0; padding-left: 4%; overflow: hidden; position: relative; padding-bottom: 1rem;}
.effect_nav_wap .swiper {position: static;}
.effect_nav_wap .swiper-slide {background: #f2f2f2; border-radius: .625rem;}
.effect_nav_wap .swiper-slide a {display: block; padding: .625rem;}
.effect_nav_wap .swiper-slide span {font-size: var(--font16); color: #333;}
.effect_nav_wap .swiper-slide .imgBox {height: 6.25rem; margin-top: 1.25rem;}
.effect_nav_wap .swiper-slide .imgBox img {width: 100%; height: 100%; object-fit: contain;}

.effect_nav_wap .pagtion {top: auto; width: 90%; left: 4%; bottom: 0;}
.effect_nav_wap .pagtion .swiper-pagination-progressbar-fill {background: #7d33ff;}




.effect_one {padding: 5rem 0;}

.effect_two {background: url(../../images/products/effect/effect_two-bj.jpg) no-repeat center; background-size: cover; padding: 7.5rem 0; min-height: 43.75rem;}
.effect_two .box {margin-top: 6.25rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 3.125rem; }
.effect_two .item { background: #fff; padding: 2.5rem; display: flex; align-items: flex-start;}
.effect_two .item .icBox {margin-right: 1.25rem; width: 3.5rem;flex-shrink: 0; margin-top: .625rem;}
.effect_two .item:nth-child(3) .icBox,.effect_two .item:nth-child(4) .icBox{width:3.2rem}
.effect_two .item .icBox img , .effect_two .item .icBox svg {min-width: 80%; max-width: 100%; object-fit: contain;}
.effect_two .item .icBox svg {width: 100%; height: 100%;}
.effect_two .item .p1 {color: #333; font-size: var(--font30); font-weight: 700;}
.effect_two .item .p2 {color: #666; line-height: 1.6; font-size: var(--font18);}

.effect_two2 .box {grid-template-columns: repeat(3,1fr); gap: 1.75rem;}
.effect_two2 .item {display: block; text-align: center;}
.effect_two2 .item .icBox {margin: auto;}
.effect_two2 .con {width: 100%;}
.effect_two2 .item .p1 {font-size: var(--font24); margin-top: 1.25rem;}
.effect_two2 .item .p2 {margin-top: .625rem;}


.effect_thre {padding: 5.625rem 0;}
.effect_thre .box {margin-top: 2.5rem; display: flex; justify-content: space-between;}
.effect_thre .dlBox {width: 40%;}
.effect_thre .dlBox dd {padding: 1rem 0; border-bottom: 1px solid #eaeaea;}
.effect_thre .dlBox dd:last-child {border: none;}
.effect_thre .dlBox .p1 {opacity: .8;}
.effect_thre .dlBox .p2 {font-size: var(--font24); font-weight: 700;}
.effect_thre .imgBox {width: 43%;}
.effect_thre .imgBox img {width: 100%;}

.effect_four {background: url(../../images/products/effect/effect_four-bj.jpg) no-repeat center; background-size: cover; padding: 7.5rem 0; min-height: 41.25rem;}
.effect_four .box {display: flex; justify-content: space-between; flex-wrap: wrap;}
.effect_four .item {width: 40%; text-align: center; margin-top: 5rem;}
.effect_four .item .icBox {height: 3.5rem; display: flex; justify-content: center; align-items: center;    height: 3.5rem;
    width: 3.5rem;margin:0 auto}
.effect_four .item .icBox img , .effect_four .item .icBox svg {max-height: 100%; min-height: 60%; object-fit: contain;}
.effect_four .item .icBox svg {width: 100%; height: 100%;}
.effect_four .item .p1 {font-size: var(--font30); font-weight: 700; margin-top: 1rem;}
.effect_four .item .p2 {color: #666666; font-size: var(--font18); line-height: 1.8; margin-top: .625rem;}

.effect_five {padding: 6.25rem 0;}
.effect_five .list {margin-top: 3.75rem;}
.effect_five .list ul {display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;}
.effect_five .list li {position: relative;}
.effect_five .list li .imgBox {position: relative; overflow: hidden;}
.effect_five .list li .imgBox img {width: 100%; transition: .5s;}
.effect_five .list li:hover .imgBox img {transform: scale(1.1);}
.effect_five .list li .tit {position: absolute; padding: 1.25rem .625rem; bottom: 0; width: 100%; text-align: center; font-size: var(--font18); color: #fff; z-index: 2;}

@media (max-width: 1366px) {
  .w1300 {padding: 0 10.78125%;}
}

@media screen and (max-width: 767px) {
  .w1300 {padding: 0 4%;}

  #EndEffectors {position: relative; top: -6rem;}

  .effect_banner {padding-top: 3.75rem;}
  .effect_banner .box {/* position: relative; transform: none; left: 0; top: 0; padding: 3rem 4%; */top: 29%;        text-align: center;}
  .effect_banner .p1 {color: #333; font-size: var(--font30);}
  .effect_banner .p2 {color: #333;font-size: var(--font20);}
  .effect_banner .text {color: #333; width: 100%; margin-top: 1rem; font-size: var(--font16);        text-align: center;}

  .effect_nav ul {gap: 1rem; overflow-x: auto; justify-content: flex-start;}
  .effect_nav ul li a {font-size: var(--font16); white-space: nowrap; padding: 1rem 0;}

  .effect_one {padding: 3rem 0;}
  .effect_one .tle .t1 {font-size: var(--font26);}
  .effect_one .tle .t2 {font-size: var(--font18);}

  .effect_two {min-height: initial; padding: 3rem 0;}
  .effect_two .box {grid-template-columns: 1fr; gap: 1rem; margin-top:1.5rem;}
  .effect_two .item .icBox {width: 2.5rem !important; height: 2.5rem !important;}
  .effect_two .item .p1 {font-size: var(--font24);}
  .effect_two .item .p2 {font-size: var(--font16);}
  .effect_thre {padding: 3rem 0;}
  .effect_thre .tit {text-align: center;}
  .effect_thre .box {flex-wrap: wrap;}
  .effect_thre .dlBox {width: 100%; margin-top: 2rem;}
  .effect_thre .imgBox {width: 60%; margin: auto; order: -1;}
  .effect_thre .dlBox dd {padding: .625rem 0;}
  .effect_thre .dlBox .p2 {font-size: var(--font18);}
  .effect_four {padding: 3rem 0;}
  .effect_four .box {flex-wrap: wrap;}
  .effect_four .item {width: 100%; margin-top: 3rem;}
  .effect_four .item .icBox {height: 3rem;}
  .effect_four .item .p1 {font-size: var(--font24);}
  .effect_four .item .p2 {font-size: var(--font16);}
  .effect_five {padding: 3rem 0;}
  .effect_five .list ul {grid-template-columns: repeat(2,1fr); gap: 1rem;}
  .effect_five .list li .tit {font-size: var(--font16);}


}