body{ margin: 0; padding: 0; background: #000000; }
.innerWidth { max-width: 1024px; margin: 0 auto;  overflow: hidden;}
.innerWidth img { width: 100%; display: block; }

.video {  }
.video video { width: 100%; display: block; }


.commonSlideContainer.slide1 { background: url("./img/main_03_slide1_bg.png"); background-size: 100% 100%; }
.commonSlideContainer.slide2 { background: url("./img/main_03_slide2_bg.png"); background-size: 100% 100%; }
.commonSlideContainer.slide3 { background: url("./img/main_03_slide3_bg.png"); background-size: 100% 100%; margin-top: -1px;}
.commonSlideContainer.slide4 { background: url("./img/main_03_slide4_bg.png"); background-size: 100% 100%;  background-position: 0% 0%; }
.commonSlideContainer { width: 100%; position: relative;   background-position: 0% 0%; position: relative; margin-top: -1.5px;}
.commonSlideContainer .commonslide { width: 220%; position: relative; left: 50%; transform: translate(-50% , 0); padding:25px 0 ;  }
.commonSlideContainer .commonslide > .swiper-wrapper { }
.commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide {  }
.commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide > div { padding: 15px; }
.commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide > div img { transform: scale(1); transition:all .5s; border-radius: 12px; overflow: hidden; transform-origin: center center;  }
.commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide.swiper-slide-active > div {}
.commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide.swiper-slide-active > div img { transform: scale(1.05);
    box-shadow: 0px 3px 15px 5px rgba(0,0,0,0.6); 
}

.commonSlideContainer.black .commonslide { padding: 0; }


.commonSlideContainer .commonslide2 { width: 115%; position: relative; left: 50%; transform: translate(-50% , 0);  }
.commonSlideContainer .commonslide2 > .swiper-wrapper .swiper-slide > div { padding:  0 16px; }

.commonSlideContainer.blue1 { background: linear-gradient(rgba(5,87,242,0) 0%, #0557F2 18% ,  #0444BD 52% , #001F58 88% , rgba(0,31,88,0) 100% ); }
.commonSlideContainer .commonslide3 { width: 130%; position: relative; left: 50%; transform: translate(-50% , 0);  }
.commonSlideContainer .commonslide3 > .swiper-wrapper .swiper-slide > div { padding: 0 30px; }


.commonSlideContainer .commonslide4 { width: 120%; position: relative; left: 50%; transform: translate(-50% , 0);  }
.commonSlideContainer .commonslide4 > .swiper-wrapper .swiper-slide > div { padding: 0 14px; }
.swiper-slide { cursor: pointer; }
.gray {filter: grayscale(1);}



@media screen and (max-width: 1024px) {
    
    .commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide > div { padding: 1.46484375vw; }
    .commonSlideContainer .commonslide2 > .swiper-wrapper .swiper-slide > div { padding: 0 1.56vw; }
    .commonSlideContainer .commonslide3 > .swiper-wrapper .swiper-slide > div { padding: 0 2.9vw; }
    .commonSlideContainer .commonslide4 > .swiper-wrapper .swiper-slide > div { padding: 0 1.46484375vw; }
    .commonSlideContainer .commonslide { padding:2.44140625vw 0 ;  }
    .commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide.swiper-slide-active > div img {
        box-shadow: 0px 0.29296875vw  1.46484375vw 0.48828125vw rgba(0,0,0,0.6); 
    }

    
    .commonSlideContainer .commonslide > .swiper-wrapper .swiper-slide > div img { border-radius: 1.171875vw; }
    
}

.videoWrapper .swiper-slide {  }
.videoWrapper .swiper-slide > div { position: relative; }
.videoWrapper .swiper-slide > div img { position: relative; z-index: 2; }
.videoWrapper .swiper-slide > div video { position: absolute; top:8.2%; left: 6%; width: 88%;  }

.textAnimation { margin-bottom: 64px; }
.textAnimation > div { display: flex; width: 934%; transform: translate(0 , -0%); animation: textani 60s linear infinite ;  }
.textAnimation > div img { width: 50%; }



@keyframes textani {
    0% {
      transform: translate(-50% , 0);
    }
  
    100% {
      transform: translate(-0%, -0%);
    }
  }

  

@media screen and (max-width: 1024px) {
    
.textAnimation { margin-bottom: 6.25vw; }
}