@charset "utf-8";
/* banner */
.banner {position: relative;width: 100%;overflow: hidden;}
.banDemo {background: #333; position: relative;height:100%;}
.banDemo .swiper-pagination {z-index: 99;display: flex;justify-content: center; align-items: center; padding: 10px 0;}
.banDemo .swiper-pagination-bullet{position: relative; width: 45px; height: 45px; margin: 5px 0; background: #FFFFFF; box-shadow: 0 0 30px rgba(255, 255, 255, .9); border-radius: 45px;transition: .5s;}
.banDemo .swiper-pagination-bullet-active {width: 60px; height: 60px;}
.banDemo .swiper-pagination-bullet img {position: absolute;width: 100%; height: 100%;object-fit: cover; padding: 2px; border-radius: 45px;transition: .5s;}

/*
.banDemo .swiper-pagination-bullet {position: relative;width: 60px;height: 2px;cursor: pointer;border-radius: 0;background: rgba(255, 255, 255, 0.38);}
.banDemo .swiper-pagination-bullet::before {content: "";position: absolute;top: 0;left: 0;width: 0;height: 100%;background: #fff;z-index: 11;}
.banDemo .swiper-pagination-bullet-active.swiper-pagination-bullet::before {animation: banAnimate 6s;}
.banDemo .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active::before {animation: banAnimate 8s;}*/
@keyframes banAnimate {0% {width: 0;} 100% {width: 100%;}}
.banDemo .swiper-button-prev,
.banDemo .swiper-button-next {opacity:1;right:200px;left: auto;top: auto;bottom:0px; width:100px;height: 80px;color: #999; border:0px solid rgba(255, 255, 255, 0.8);}
.banDemo .swiper-button-next {right:80px;border-left: 0;}
.banDemo .swiper-wrapper,.banDemo .swiper-container {height: 100vh;}
.banDemo .swiper-slide {overflow: hidden;height: 100%;}
.banDemo .swiper-button-next:after, .banDemo .swiper-button-prev:after{content:'';}

.banDemo .swiper-slide {position: relative;}
.banDemo .swiper-slide video{width: 100%;height: 100%; object-fit: cover;}
.banDemo .swiper-slide > img {width: 100%; object-fit: cover;height: 100%;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;}
.banDemo .swiper-slide .phone {display: none;}
.banDemo .swiper-slide .main {position: absolute;z-index: 100;width: 100%;height: 100%;display: flex;align-items: center;top: 0;left: 0;}

.banDemo .swiper-slide .main .box {text-align: left;position: relative;z-index: 1;}
.banDemo .swiper-slide .main .box .text{position: relative;z-index: 1;}
.banDemo .swiper-slide .main::before {content: "";display: inline-block;width: calc(100% + 0px); height: calc(100% + 0px);
  background: linear-gradient(to right, rgba(10, 10, 10, 0.9), rgba(255, 255, 255, 0)); position: absolute; right:50%; z-index: 1;}

.banDemo .swiper-slide .main .box .text1 {font-size: 24px;color: #fff;font-weight: 300;}
.banDemo .swiper-slide .main .box .text2 {font-size: 50px; color: #fff; font-weight:700; margin-top: 0.5rem;}
.banDemo .swiper-slide .main .box .text3 {font-size: 32px; color: #fff;margin-top: 1rem;}
.banDemo .swiper-slide .main .box .text4 {margin-top: 2rem;po}
.banDemo .swiper-slide .main .box .text4 a {font-size:1.1875rem;text-align: center;}


.banDemo-a-btn {color: #fff;background:#FF6B00; border-radius: 0.2rem; padding: 7px 20px; transition: .5s; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);  display: inline-block;position: relative; vertical-align: middle; transform: perspective(1px) translateZ(0); transition-property: color; transition-duration: 0.5s; text-transform:capitalize;letter-spacing: .5px;}
.banDemo-a-btn:before {content: "";position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.2rem; background: #06b6d4;color: #fff;transform: scaleX(0); transform-origin: 0 50%; transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-out;}
.banDemo-a-btn:hover, 
.banDemo-a-btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.banDemo .swiper-slide-active > img {animation: banImgAnimate 6s infinite;-webkit-animation: banImgAnimate 6s infinite;animation-delay:3s;}
.banDemo .swiper-controls{position: absolute; right: 0; bottom: 0; background:rgba(255,255,255,.0);z-index: 1;}

.slickNums{position: absolute; bottom:26px;left:auto;right:142px; top:auto;color: #999;z-index: 850;font-weight:bold;font-size: 18px;height: auto;font-family: 'Nunito';}
.slickNums .num{color: #06b6d4;}
.slickNums .num,.slickNums .total{margin: 0 10px;}

@keyframes animationSlide {
0% {
    background-position: 0 0;
}
100% {
    background-position: 100% 0;
}}
@keyframes banImgAnimate {
    0% {
        transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1)
    }
    50% {
        transform: scale(1.06);
        -ms-transform: scale(1.06);
        -moz-transform: scale(1.06);
        -webkit-transform: scale(1.06);
        -o-transform: scale(1.06)
    }

    100% {
        transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1)
    }
}

.slider-bg01 {background: linear-gradient(to bottom, rgba(0, 88, 255, 0.8) 0%, rgba(82, 63, 255, 0.8) 100%), url("../images/slider-bg01.jpg");background-size:cover;}
.slider-bg02 {background: linear-gradient(30deg, rgba(41, 42, 145,0.8) 45%,rgba(117, 14, 213,0.8) 100%), url("../images/slider-bg02.jpg");background-size:cover;}
.slider-bg03 {background: linear-gradient(180deg, #261675 0.42%, #000b22 102.71%), url("");background-size:cover;}
.slider-bg03:before {content: ""; position: absolute; background-image: url(../images/slider-bg03.png); width: 100%; height: 100%;left: 0; right: 0; background-size: 100% 100%;}
.slider-bg01 .box img,.slider-bg02 .box img,.slider-bg03 .box img, .slider-newsbg .box img{animation:up_down 10s infinite;animation-delay:3s;}
@keyframes up_down {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
    25% {
        -webkit-transform: translateY(-30px) translateX(0);
        transform: translateY(-30px) translateX(0)
    }
    75% {
        -webkit-transform: translateY(30px) translateX(0);
        transform: translateY(30px) translateX(0)
    }
}
.slider-newsbg{background: linear-gradient(to bottom, rgba(0, 88, 255, 0.8) 0%, rgba(82, 63, 255, 0.8) 100%), url("../images/newsbg.jpg");background-size:contain}
.slider-aboutbg{background: linear-gradient(to bottom, rgba(0, 88, 255, 0.8) 0%, rgba(82, 63, 255, 0.8) 100%), url("../images/aicompany.jpg");background-size:cover}
.slider-brandbg{background: linear-gradient(30deg, rgba(41, 42, 145,0.8) 45%,rgba(117, 14, 213,0.8) 100%), url("../images/44oAY.jpg");background-size:cover;background-position:right;}
.slider-guidebg{background: linear-gradient(30deg, rgba(41, 42, 145,0.8) 5%,rgba(36, 198, 226, 0.795) 100%), url("../images/website-design-guide.jpg");background-size:cover;background-position:right;}

.services .swiper-pagination{bottom: -10px;}
.services .swiper-pagination-bullet {position: relative;width: 30px;height: 3px;cursor: pointer;border-radius: 0;background: rgba(104, 59, 242, 0.88);}
.services .swiper-pagination-bullet::before {content: "";position: absolute;top: 0;left: 0;width: 0;height: 100%;background: #ddd;z-index: 11;}
.services .swiper-pagination-bullet-active.swiper-pagination-bullet::before {animation: banAnimate 6s;}
.services .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active::before {animation: banAnimate 8s;}