
.effect_banner {position: relative;}
.effect_banner .tle .p1 {color: #2b3053; text-transform: uppercase; font-size: var(--font50);}
.effect_banner .tle .p2 {color: #8c96ac; font-size: var(--font24);}
.effect_banner .text {width: 43%;  margin-top: 2.5rem; color: #7c8599;}

.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(--font18); 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; height: auto;}
.effect_nav_wap .swiper-slide a {display: flex;padding: .625rem;height: 100%;flex-direction: column;justify-content: space-between;}
.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_one .tle .t1 {font-size: var(--font40);}
.effect_one .tle .t2 {font-size: var(--font20);}

.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; height: 3.5rem; flex-shrink: 0; margin-top: .625rem;}
.effect_two .item .icBox img {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(--font26); font-weight: 700;}
.effect_two .item .p2 {color: #666; line-height: 1.6; font-size: var(--font16);}

.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; margin-right: auto !important;}
.effect_two2 .con {width: 100%;}
.effect_two2 .item .p1 {font-size: var(--font20); 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: 4rem; width: 4rem; margin: auto; display: flex; justify-content: center; align-items: center;}
.effect_four .item .icBox img {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;}



/* 修改图标大小 */
.lxHand_Two .list li .icBox {width: 3.3rem; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.lxHand_Two .list li:nth-child(5) .icBox{width: 3rem;}
.lxHand_Two .list li:nth-child(6) .icBox{width: 3.5rem;}
.lxHand_Two .list li .p1{font-size:var(--font20);}
.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_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 .p1,.effect_two .item .p1{font-size:var(--font24);}
.effect_four .item .p2{font-size:var(--font16);line-height: 1.6rem;}

@media screen and (max-width: 767px) {
  #EndEffectors {position: relative; top: -6rem;}

  .effect_banner {padding-top: 3.75rem;}
  .effect_banner .box {top: 32%;text-align: center;}
  .effect_banner .tle .p1 {color: #333; font-size: var(--font24);}
  .effect_banner .tle .p2 {font-size: var(--font16);}
  .effect_banner .text {color: #333; width: 100%; margin-top: 1rem; font-size: var(--font14);}


  .effect_nav {border: 0; margin-top: 2rem;}
  .effect_nav ul {justify-content: flex-start; flex-wrap: wrap; gap: .625rem;}
  .effect_nav ul li {width: 48%; flex: none; border: 1px solid #eee;}
  .effect_nav ul li a {font-size: var(--font14);  padding: 1rem .625rem; height: 100%; display: block;}

  .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: 3rem;}
  .effect_two .item .p1 {font-size: var(--font18);}
  .effect_two .item .p2 {font-size: var(--font14);}
  .effect_two .item .icBox {width: 2.5rem; height: 2.5rem;}

  .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; min-height: initial;}
  .effect_four .box {flex-wrap: wrap;}
  .effect_four .item {width: 100%; margin-top: 3rem;}
  .effect_four .item .icBox {height: 2.5rem; width: 2.5rem;}
  .effect_four .item .p1 {font-size: var(--font18);}
  .effect_four .item .p2 {font-size: var(--font14); margin-top: .625rem; line-height: 1.5;}
  .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(--font14);}
}
