/*swiper css*/
.swiper-container {
     overflow: auto !important;
}
/*.latest-box-left{padding: 2px}*/
.swiper {width: 1300px; height: auto;margin: 0 auto;max-width: 100% }
.swiper-wrapper{padding-bottom: 85px}
.latest-box{filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.1));border-radius: 30px;display: flex;background: #fff;overflow: hidden;position: relative;height: auto !important;}
.latest-box > div{width: 50%}
.latest-box-right{padding: 30px 40px 30px 30px;position: relative;z-index: 3}
.latest-category{background: linear-gradient(0deg, #2571F0, #2571F0), #FFFFFF; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05); border-radius: 5px;font-family: 'Montserrat'; font-weight: 500; font-size: 15px; line-height: 18px;width: max-content;padding: 5px 10px;color: #fff;}
.latest-box-right p{font-family: 'Montserrat'; font-weight: 600; font-size: 25px; line-height: 30px; color: #323232;margin: 30px 0 15px}
.latest-box-right a{position:relative; font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 22px; color: #2571F0;padding-bottom: 8px;opacity: 0}
.latest-box-right a .visible-text{ border-bottom: 1px solid #2571F0; }
.core-service-wrap .swiper-scrollbar{bottom: 9px !important;height: 2px !important;background: #8EABDC;cursor: pointer;}
.core-service-wrap .swiper-button-next{top: auto; z-index: 9999; bottom: -12px; right: 3px;}
.core-service-wrap .swiper-button-next:after{font-size: 18px;color: #8EABDC}
.core-service-wrap .swiper-button-next, .core-service-wrap .swiper-button-prev{top: auto; z-index: 9999; bottom: -12px; right: 3px;}
.core-service-wrap .swiper-button-prev{left: 3px;}
.core-service-wrap .swiper-button-next:after, .core-service-wrap .swiper-button-prev:after{font-size: 22px;color: #8EABDC}
.core-service-wrap .swiper-scrollbar-drag{height: 6px;background: #2571F0;top: -2px}
.core-service-wrap .swiper-pagination{bottom: 15px; left: 30px; width: auto;}
.swiper-pagination-current, .swiper-pagination-total{font-family: 'Montserrat';font-weight: 400; font-size: 15px; line-height: 18px; color: #2571F0;}
.swiper-pagination-total{color: #A1A1A1}
.swiper-pagination{color: #2571F0}
/*border-bottom: 1px solid #2571F0;*/
@keyframes open {
    0% {
        width: 0;
        height: 0;
    }
    50% {
        width: 50%;
        height: 0;
    }
    100% {
        width: 50%;
        height: 100%;
    }
}

@keyframes openB {
    0% {
        width: 0px;
    }
    100% {
        width: 50%;
    }
}

.hoverBtn {width: 100% !important; height: 100%; position: absolute; /* top: -1px;*/
    z-index: 1
}
.hoverBtn-bottom {width: 100% !important; height: 100%; position: absolute; z-index: 1 }
.hoverBtn:before {position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px #2571F0; border-left: solid 2px #2571F0; -webkit-border-top-left-radius: 30px; -moz-border-top-left-radius: 30px; border-top-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-bottom-left-radius: 30px; border-bottom-left-radius: 30px; right: 50%;
}
.latest-box:hover .hoverBtn:before, .latest-box:hover .hoverBtn:after {opacity: 1; -webkit-animation: open 0.4s;height: 100%; animation: open 0.4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-direction: normal; }
.hoverBtn:after {position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px #2571F0; border-right: solid 2px #2571F0; -webkit-border-top-right-radius: 30px; -moz-border-top-right-radius: 30px; border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-bottom-right-radius: 30px; border-bottom-right-radius: 30px; left: 50%;
}
.hoverBtn-bottom:before {position: absolute; content: ""; height: 100%; width: 0; display: block; opacity: 0; height: 100%; border-bottom: solid 2px #2571F0; -webkit-border-top-right-radius: 30px; -moz-border-top-right-radius: 30px; border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-bottom-right-radius: 30px; border-bottom-right-radius: 30px; right: 0;
}
.hoverBtn-bottom:after {position: absolute; content: ""; height: 100%; width: 0; display: block; opacity: 0; height: 100%; border-bottom: solid 2px #2571F0; -webkit-border-top-left-radius: 30px; -moz-border-top-left-radius: 30px; border-top-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-bottom-left-radius: 30px; border-bottom-left-radius: 30px; left: 0;
}
.latest-box:hover .hoverBtn-bottom:before, .latest-box:hover .hoverBtn-bottom:after {opacity: 1; -webkit-animation: openB 0.4s; animation: openB 0.4s; animation-delay: 0.4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-direction: normal; }
.latest-box:hover .latest-box-right a{/*color: #000;border-bottom: 1px solid #000;*/opacity: 1}



@media screen and (max-width: 1536px){
  .swiper-wrapper{padding-bottom: 70px}
}
@media screen and (max-width: 1366px){
  .swiper{padding: 0 20px !important;}
}

@media screen and (max-width: 1245px) and (min-width: 1025px) {
  .core-service-wrap .swiper-scrollbar{width: 97% !important}
  .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{left: 1.5% !important;}
}

@media screen and (max-width: 1024px){
    .swiper-wrapper{padding-bottom: 50px}
    .latest-box-left img{width: 100%}
    .core-service-wrap .swiper-scrollbar{width: 96% !important}
    .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{left: 2% !important;}
} 
@media screen and (max-width: 600px){
  .latest-box{flex-direction: column;}
  .latest-box > div{width: 100%}
  .core-service-wrap .swiper-scrollbar{width: 95% !important}
  .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{left: 2.5% !important;}
}
@media screen and (max-width: 550px){
  .core-service-wrap .swiper-scrollbar{width: 94.59% !important}
}
@media screen and (max-width: 465px){
  .core-service-wrap .swiper-scrollbar{width: 93% !important}
  .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{left: 3.5% !important;}
}