@charset "utf-8";

/* main_visual */
.main_visual{padding: 110px 0; background-color: #d9eeff;}
.main_visual .main_visual_title{font-weight: bold;font-size: 40px;}
.main_visual .main-swiper{padding-top: 120px;}
.main_visual .main-swiper .swiper-slide{display: flex;}
.main_visual .img-box{width: 60%;opacity: 0;transform: translate3d(-50px, 0, 0);transition: 1s 0.2s;}
.main_visual .img-box img{margin: 0 auto; width: 100%; max-width: 600px;}
.main_visual .txt-box {box-sizing: border-box;padding: 0 2.0rem;z-index: 10;width: 40%;}
.main_visual .txt-box > h3 {color: #000;font-size: 3.5rem;line-height: 1.1;word-break: keep-all;transform: translateY(20px);opacity: 0;transition: 1s 0.2s;}
.main_visual .txt-box .top-txt{font-size: 20px;}
.main_visual .txt-box .bot-txt{font-size: 18px;line-height: 1.7;}
.main_visual .swiper-slide-active .txt-box > h3,.main_visual .swiper-slide-active .txt-box .a_to_top {transform: translateY(0);opacity: 1;}
.main_visual .swiper-slide-active .img-box{opacity: 1;transform: translate3d(0, 0, 0);}
.main_visual .all-box {position: absolute;display: inline-flex;height: 50px;top: 5%;right: 5%;box-sizing: border-box;padding: 0 20px;z-index: 20;}
.main_visual .progress-box {position: relative;width: 170px;height: 50px;z-index: 11;top: 15px;}
.main_visual .progress-box span{color: #000;}
.main_visual .progress-box .autoplay-progress {position: absolute;left: 30px;top: 10px;z-index: 10;width: 100px;height: 3px;background-color: #dcdcdc;}
.main_visual .progress-box .autoplay-progress svg {--progress: 0;position: absolute;left: 0;top: 0;z-index: 10;width: 100%;stroke-width: 4px;stroke: #000;fill: none;stroke-dashoffset: calc(100 * (1 - var(--progress)));stroke-dasharray: 100;}
.main_visual .swiper-pagination {display: flex;color: #fff;justify-content: space-between;position: static;text-align: left;}
.main_visual .arrow-box {position: relative;width: 80px;height: 50px;}
.main_visual .swiper-button-next::after,.main_visual .swiper-button-prev::after {font-size: 0;}

/* main_section1 */
.main_section1{padding: 100px 0; background-color: #f5f5f5;}


/* main_section2 */
.main_section2{background-color: #fff; padding: 100px 0;}
.main_section2 .sub-title{margin-bottom: 80px;}
.main_section2 .flex-item{flex: 1 1 33.3%;text-align: center; padding: 25px; border-radius: 15px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); position: relative;}
.main_section2 .flex-item:hover{transition:0.5s;transform:scale(1.08);}
.main_section2 .flex-item img{margin: 0 auto;}
.main_section2 .flex-item h3{font-size: 36px; font-weight: bold; margin-top: 20px;}
.main_section2 .flex-item ul{margin-top: 20px;}
.main_section2 .flex-item ul li{color: #300; font-weight: 600; margin-bottom: 10px;}
.main_section2 .flex-item:nth-child(1){background-color: rgb(187, 228, 246);}
.main_section2 .flex-item:nth-child(1) h3{color: #ef4444;}
.main_section2 .flex-item:nth-child(2){margin: 0 50px; background-color: rgb(175, 189, 255);}
.main_section2 .flex-item:nth-child(2) h3{color: #3b82f6;}
.main_section2 .flex-item:nth-child(2) img{height: 125px;}
.main_section2 .flex-item:nth-child(3){background-color: rgb(226, 211, 250);}
.main_section2 .flex-item:nth-child(3) h3{color: #14b8a6;}

/* main_section3 */
.main_section3{background-color: #d9eeff; padding: 100px 0;}
.main_section3 .sec-title{margin: 20px 0 40px;}
.main_section3 .inner > img{margin: 0 auto; width: 130px;}
.main_section3 .sub-tit{font-size: 24px; margin-bottom: 50px;}
.main_section3 .sub-tit .value{font-weight: bold; color: #4338ca;}
.main_section3 .contents-tit{font-size: 16px;}

/* main_section4 */
.main_section4{background-color: #fff; padding: 170px 0;}
.main_section4 .flex-container{display: flex;  flex-wrap: wrap;margin-top: 100px;}
.main_section4 .flex-container .flex-item{flex: 1 1 35%;margin: 40px;max-width: 660px;}
.main_section4 .flex-container span{font-size: 30px;font-weight: bold;letter-spacing: -.01em;line-height: 2.1rem;margin-bottom: 1.25rem;}
.main_section4 .flex-container h4{font-weight: bold; margin-bottom: 0.625rem;font-size: 22px;}
.main_section4 .flex-container p{font-size: 18px;font-weight: 400;letter-spacing: normal;line-height: 1.625rem;color: #000;}
.main_section4 .bg-img {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(0);transform-origin: 50% 50%;animation: rotateBgimg 50s linear infinite}

.support .swiper-container{width: 100%;height: 100px;overflow: hidden;}
.support .swiper-container .swiper-wrapper{transition-timing-function: linear;}


@keyframes rotateBgimg {
  0% {
      transform: translate(-50%,-50%) rotate(0)
  }

  to {
      transform: translate(-50%,-50%) rotate(360deg)
  }
}