﻿main.index section.products .item ul li>div .rule-box{ max-height: unset;}
main.index section.about-us,main.index section.products .title{display:none}
.indprosw{padding-bottom:30px}
.indprosw .title{text-align: center;margin-bottom: 20px;}
.indprosw .img{width: auto!important;height:auto!important;}
.indprosw .img img{max-height: 100%;max-width: 100%}
main.index section.products .indprosw .title{display: none;}
.indprosw-pagination{justify-content: center;justify-content: center;display: flex;}
.indprosw-pagination .swiper-pagination-bullet-active{background:var(--color1)}
.index-swiper .swiper-slide{overflow:hidden;position:relative;height:auto;}
.index-swiper .swiper-slide>a{display:block;height:100%;width:100%;}
.index-swiper .swiper-slide>a img{display:block;height:100%}
.banner-animate{width:30%;background:rgba(59,137,198,0.8);position:absolute;top:0;height:100%;color:#fff;padding:1.5% 1.5vw;display:flex;flex-direction:column;justify-content:center;opacity:0}
.banner-animate div{width:100%;margin-bottom:1.5vw;font-size:1.6vw}
.banner-animate p{width:100%;font-size:1.4vw;line-height:1.5;}
.banner-animate.bannertxt1,.banner-animate.bannertxt3{text-align:right;}
.index-swiper .swiper-slide-active .bannertxt1,.index-swiper .swiper-slide-active .bannertxt3{animation:bannerani1 .4s forwards;animation-delay:.6s}
.index-swiper .swiper-slide-active .bannertxt2{animation:bannerani2 .4s forwards;animation-delay:.6s}
@keyframes bannerani1{0%{left:-30%}
100%{opacity:1;left:0}}
@keyframes bannerani2{0%{right:-30%}
100%{opacity:1;right:0}}
@media (max-width:768px){.banner-animate{width:45%;padding:10px;}
.banner-animate div{margin-bottom:6px;font-size:14px}
.banner-animate p{font-size:12px;transform:scale(.85);transform-origin:right center;width:120%;position:relative;right:20%}
.banner-animate.bannertxt1 div{display:none}
.banner-animate.bannertxt2 p{transform-origin:left center;right:auto;}
.banner-animate:not(.bannertxt1) p br{display:none}}
.banner-animate{ background: #b7b7b7; }


.home-services{position:relative;padding:4% 0;width:100%}
.home-services .l-wrap {width: 100%;max-width: 1600px;padding: 0px 70px;margin: 0px auto;}
.home-services .home-title {font-size: 30px;font-weight: 600;text-align: center;text-transform: capitalize;line-height: 1.4;}
.home-services .home-des {font-size: var(--fontsize16);color: #565656;text-align: center;max-width: 1000px;margin: 10px auto 0px;}
.home-services #serviceswiper{margin-top:40px;padding-bottom: 50px;}
.home-services #serviceswiper .swiper-slide{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden}
.home-services #serviceswiper .swiper-slide img{width:100%;height:100%;object-fit:cover}
.home-services #serviceswiper .swiper-slide .opacity{position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#FFFFFF;transition:all .2s linear;padding:20px;}
.home-services #serviceswiper .swiper-slide .opacity .p1{font-size:var(--fontsize20);position:relative;padding-bottom:10px;margin-bottom:10px}
.home-services #serviceswiper .swiper-slide .opacity .p1::after{content:"";position:absolute;left:0px;bottom:0px;width:60px;height:4px;background:var(--color)}
.home-services #serviceswiper .serviceswiper-pagination{text-align:center;margin-top:20px}
.home-services #serviceswiper .serviceswiper-pagination .swiper-pagination-bullet{background:#111111;opacity:1}
.home-services #serviceswiper .serviceswiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:var(--color1)}
.home-services #serviceswiper .serviceswiper-next,.home-services #serviceswiper .serviceswiper-prev{position:absolute;top:calc(50% - 50px);transform:translateY(-50%);z-index:9;display:flex;align-items:center;justify-content:center;border-radius:50%;width:45px;height:45px;cursor:pointer;transition:all .2s linear;background:rgba(255,255,255,.2)}
.home-services #serviceswiper .serviceswiper-next em,.home-services #serviceswiper .serviceswiper-prev em{font-size:var(--fontsize24);color:#FFFFFF;font-style: initial;}
.home-services #serviceswiper .serviceswiper-prev{left:10px}
.home-services #serviceswiper .serviceswiper-next{right:10px}
@media (max-width:768px){.home-services #serviceswiper .serviceswiper-next,#serviceswiper .serviceswiper-prev{display:none}
.home-services #serviceswiper{margin-top:20px}}
.home-services #serviceswiper .swiper-slide:hover .opacity{background:#0000}
