@charset "utf-8";
:root{--swiper-theme-color:#000000!important;--swiper-navigation-color:#000000!important}
.banner-wrapper{background-color:#444a83}
.sun{position:absolute;top:100px;left:20px;height:80px}
.hb-obj2{position:absolute;top:30%;left:50%;height:80px}
.hb-obj3{position:absolute;bottom:10%;left:0;height:80px;-webkit-animation:tilt 1s linear 0s infinite alternate;animation:tilt 1s linear 0s infinite alternate}
@keyframes tilt{
0%{transform:rotate(0) translate3d(0,0,0)}
100%{transform:rotate(10deg) translate3d(0,0,0)}
}
.spin{animation-name:spin;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear}
@keyframes spin{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.intro-text-warpper{display:flex;align-items:center;justify-content:center;height:630px;color:#fff;padding-top:80px}
.intro-text{width:75%}
.intro-text p{font-size:19px;line-height:27px;text-align:left}
.intro-item{position:relative;max-width:480px;height:391px}
.intro-item::before{position:absolute;content:'';background:url("/Images/home/intro-bg.svg") no-repeat;top:0;left:0;background-size:100%;display:inline-block;width:100%;height:473px}
.intro-item .mask-img{mask-image:url( "/Images/home/intro-masking-bg.svg");-webkit-mask-image:url( "/Images/home/intro-masking-bg.svg");mask-size:91%;-webkit-mask-size:91%;mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.home-item-wapper{margin:30px auto 50px}
.home-items{border-radius:60px;border:10px solid;padding:6px;display:flex;align-items:center;justify-content:center;position:relative;max-width:85%;width:fit-content;margin:0 auto 70px;background-color:#fff}
.home-item-box:nth-of-type(6n+1) .home-items{border-color:#193c6d}
.home-item-box:nth-of-type(6n+2) .home-items{border-color:#da8105}
.home-item-box:nth-of-type(6n+3) .home-items{border-color:#a30c17}
.home-item-box:nth-of-type(6n+4) .home-items{border-color:#d25a12}
.home-item-box:nth-of-type(6n+5) .home-items{border-color:#168f7d}
.home-item-box:nth-of-type(6n+6) .home-items{border-color:#614794}
.home-items:hover .icon{animation:myAnim 2s ease 0s 1 normal forwards;animation-iteration-count:infinite}
@keyframes myAnim{
0%,100%{transform:rotate(0);transform-origin:50% 50%}
10%{transform:rotate(8deg)}
20%,40%,60%{transform:rotate(-10deg)}
30%,50%,70%{transform:rotate(10deg)}
80%{transform:rotate(-8deg)}
90%{transform:rotate(8deg)}
}
.home-item-box:nth-of-type(6n+3) .home-items:hover .icon,.home-item-box:nth-of-type(6n+5) .home-items:hover .icon,.home-item-box:nth-of-type(6n+6) .home-items:hover .icon{animation:bounce 2s infinite}
@keyframes bounce{
0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}
.home-items{overflow:hidden}
.home-item-img img{border-radius:40px;border:6px solid #fff;max-width:100%;transition-duration:4s}
.home-item-img img:hover{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);z-index:0}
.home-item-content{position:absolute;bottom:20px;left:0;right:0;margin:0 auto;text-align:center}
.home-item-content img{width:15%;vertical-align:middle;margin-right:5px}
.home-item-content span{color:#fff;font-size:42px;font-weight:700;vertical-align:-webkit-baseline-middle}
.carousel{position:relative;margin:20px auto;width:96%}
.blogitems .next-slide-button, .blogitems  .prev-slide-button{top:45%;transform:translateY(-45%)}
.carousel .swiper-wrapper{margin:30px auto 50px}
.updateitems{opacity: 0; transition: opacity 0.3s ease;}
.swiper-initialized{opacity: 1;}
.updateitems .swiper-slide {width: 100%; /* or any intended width */ height: auto; /* or fixed height */box-sizing: border-box;}
.update-item{position:relative;display:flex;align-items:center;justify-content:center;width:85%;margin:0 auto}
.updateitems .swiper-slide:nth-child(odd) .update-item::before{background:url("/Images/home/update-red-bg.svg") no-repeat}
.updateitems .swiper-slide:nth-child(2n) .update-item::before{background:url("/Images/home/update-green-bg.svg") no-repeat}
.update-item::before{position:absolute;content:'';top:0;left:0;background-size:100%;display:inline-block;width:100%;height:100%}
.update-item::after{position:absolute;content:'';bottom:calc(15% + 7px);left:0;right:0;margin-left:auto;margin-right:auto;background:url("/Images/home/update-object.svg") no-repeat;display:inline-block;width:40%;height:40%;background-position:bottom center}
.update-item-wrapper{margin-bottom:15px}
a .update-item-wrapper .title{padding:0 2%;line-height:25px;margin-top:-22px;color:var(--secondry-color);font-size:19px;font-weight: 500;}
.mask-img{mask-image:url( "/images/home/mask-img.svg");-webkit-mask-image:url( "/Images/home/mask-img.svg");mask-size:100%;-webkit-mask-size:100%;mask-position:top;-webkit-mask-position:top;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.item-animation{animation:4s qodef-float infinite ease-in-out}
.swiper-slide:nth-child(4n+0) .item-animation{animation-delay:1s}
.swiper-slide:nth-child(4n+1) .item-animation{animation-delay:2s}
.swiper-slide:nth-child(4n+2) .item-animation{animation-delay:3s}
.swiper-slide:nth-child(4n+3) .item-animation{animation-delay:4s}
@keyframes qodef-float{
0%{transform:translateY(0)}
50%{transform:translateY(16px)}
100%{transform:translateY(0)}
}
.box-wrapper{width:90%;margin:0 auto 30px}
a .box-wrapper .title{position:relative;z-index:1;padding:0 2%;line-height:25px;margin-top:-10px;color:var(--secondry-color);font-size:19px;font-weight: 500;}
.box{position:relative;z-index:0;height:auto;margin:0 auto}
.box::after{position:absolute;content:'';bottom:-20px;left:0;background:url("/Images/home/blogitem-bg.svg") no-repeat;display:inline-block;width:113%;height:100%;background-position:left bottom}
.box img{border-radius:60px;height:272px;width:408px;padding:10px;object-fit:cover}
.swiper-slide:nth-child(odd) .box img{border:8px solid #a30c17}
.swiper-slide:nth-child(2n) .box img{border:8px solid #168f7d}
.blogitems{margin-bottom:-100px}
.aex{color:#fff;background:#cc5d57;padding:50px 0;margin-bottom:50px}
.aex .title{text-align:center;margin-bottom:30px}
.aex .title h2{color:#fff}
.aex .title p a{color:#fddd5e;font-size:18px; font-weight:600;}
.aex .title p{font-size:20px;line-height:20px;font-weight:500}
.aex .title span{font-size:18px;font-weight:400}
.aex-items{position:relative;overflow:hidden;height:350px}
.aex-items:hover .aex-items__preWrapper,.aex-items:hover .aex-items__wrapper{animation-play-state:paused}
.aex-items__preWrapper{position:relative;width:100%;height:350px;transform:translateX(0);animation:scroll1 20s linear infinite;animation-delay:1s;animation-direction:alternate;margin-top:30px;will-change:transform}
.aex-items__wrapper{position:absolute;white-space:nowrap;transform:translateX(0) translateZ(0);animation:scroll2 20s linear infinite;animation-delay:1s;animation-direction:alternate;will-change:transform}
.aex-items__wrapper>a,.aex-items__wrapper>img{position:relative;display:inline-block;margin:0 20px;vertical-align:middle}
.aex-items__wrapper>a img{max-width:220px;max-height:300px;border-radius:15px;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);width:220px;height:300px;}
@keyframes scroll1{
0%{transform:translateX(0)}
100%{transform:translateX(100%)}
}
@keyframes scroll2{
0%{transform:translateX(0) translateZ(0)}
100%{transform:translateX(-100%) translateZ(0)}
}
@media only screen and (max-width:1400px){
.banner-wrapper:after{margin-bottom:-25px}
.banner-wrapper{margin-bottom:-40px}
h2{position:relative;z-index:5}
.intro-text-warpper{padding-top:30px}
}
@media only screen and (min-width:769px){
.banner-wrapper{height:630px!important}
}
@media only screen and (max-width:992px){
.intro-item{max-width:350px;height:285px}
.next-slide-button,.prev-slide-button{margin:0!important}
}
@media only screen and (max-width:768px){
.banner-wrapper{height:100vh;display:flex;align-items:center;justify-content:center}
.intro-text-warpper{height:auto}
.home-items{margin-bottom:40px}
}
@media only screen and (max-width:767px){
.intro-text{width:90%;margin:3px auto 40px}
.hb-obj2{left:70%;top:40%;height:60px}
.hb-obj3{height:70px}
.aex .title p{font-size:18px}
.aex .title span{font-size:16px}
.carousel .swiper-wrapper{margin-bottom:0}
.home-items .icon{animation:myAnim 2s ease 0s 1 normal forwards;animation-iteration-count:infinite}
.home-item-box:nth-of-type(6n+3) .home-items .icon,.home-item-box:nth-of-type(6n+5) .home-items .icon,.home-item-box:nth-of-type(6n+6) .home-items .icon{animation:bounce 2s infinite}
.blogitems{margin-bottom:-40px}
.intro-text-warpper{padding-top:0}
}
@media only screen and (max-width:480px){
.home-items{max-width:100%}
.home-item-content span{font-size:35px}
.sun{top:100px}
.hb-obj2,.hb-obj3,.sun{height:50px}
}
@media only screen and (max-width:410px){
.intro-item{max-width:300px;height:244px}
.intro-text{margin-bottom:10px}
}
@media only screen and (max-width:320px){
.banner-wrapper:after{margin-bottom:-30px}
.intro-text p{font-size:17px;line-height:25px}
.intro-item{max-width:250px;height:203px}
}
@media only screen and (min-height:935px) and (max-height:1200px){
.banner-wrapper{height:63vh}
}