
.index_wrap{width: 100%;}
/*메인비주얼*/

.section1 .mySwiper .swiper-wrapper{position: relative;}
.section1 .mySwiper .swiper-slide .slide_bg { height: 100vh; overflow: hidden; background-repeat: no-repeat; background-size: cover;  } 
.section1 .mySwiper .swiper-slide .visual_wrap { position: absolute; top: 62%; left: 50%; transform: translate(-50%, -50%); max-width: 1680px; width: 100%;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box { color: #fff; overflow: hidden; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p{font-size: 28px ;transition: all .3s;font-weight: 600; font-family: var(--font-mont); }
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 55px;  font-weight: 600;  line-height: 1.2; transition: all .3s; margin: 30px 0; font-family: var(--font-Pre);}


.section1 .slider_1 { background-image: url(../img/main_visual_1.jpg); } 
.section1 .slider_2 { background-image: url(../img/main_visual_2.jpg); } 
.section1 .slider_3 { background-image: url(../img/main_visual_3.jpg); } 


@keyframes zoom_in { 
    0% { transform: scale(1.2); /* background-size: 100% 100%; */ } 
    100% { transform: scale(1) rotate(0.003deg); } 
    }

    .section1 .mySwiper .swiper-slide.swiper-slide-active .visual_txt_box p{ animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.4s;}
    .section1 .mySwiper .swiper-slide.swiper-slide-active .visual_txt_box h2{animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.5s; }
    .section1 .mySwiper .swiper-slide.swiper-slide-active .visual_txt_box span{animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.6s; }
   .section1 .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 5000ms; transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 

   
   @keyframes text-up { 
    from { transform: translate3d(0, 200%, 0); } 
    to { transform: translate3d(0, 0, 0); } 
    }
   
   /* 로딩바 애니메이션 */
   @-webkit-keyframes LoadingBar { 
    from { width:0px; } 
    to { width:100%; } 
    }
    @keyframes LoadingBar { 
    from { width:0px; } 
    to { width:100%; } 
    }
    
    /* pagnation */
.control_wrap { display: flex; position: absolute; bottom: 9%; left: 6%; height: 40px; align-items: center; justify-content: space-between; flex-direction: row;z-index: 10; } 
.control_wrap .swiper-pagination { text-align:left; position: relative; display: flex; justify-content: space-between; align-items: center; top: 0; } 
.control_wrap .swiper-pagination-bullet { width: 5.6rem; border-radius: 0; height: 2px; background: unset; border: 1px solid rgba(255, 255,255,0.4); opacity:1; margin-right: 2rem !important; display: block; } 
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2rem; } 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet em { position: absolute; top: -3rem; color: rgba(255, 255,255,0.4); font-style: normal; font-size: 1.8rem; } 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { position: relative; width: 20rem;} 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active em{color: rgba(255, 255,255,1);}
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::before { animation:LoadingBar 5s both; animation-delay: 0.3s; content:''; display:block; position:absolute; width: 100%; height: 100%; border: 1px solid rgba(255, 255,255,1); border-radius: unset; } 


/*공통*/
.main_inner{max-width: 1680px; width: 100%; margin: 0 auto;}
.main_s_tit{font-size: 2.8rem; font-weight: 600;}
.main_btn{display: flex; justify-content: space-between; width: 200px; border-bottom: 1px solid #fff;  padding-bottom: 10px; align-items: center;}
.main_btn span{font-size: 1.8rem; color: #fff;}
.main_btn i{font-size: 2.3rem; color: #fff; transition: all .3s;}
.main_btn:hover i{transform: translateX(5px);}


/*main2*/
.main2{margin: 170px 0; overflow: hidden; }
.main2 .main_inner h2{font-size: 4rem; font-weight: 600;margin: 70px 0;color: #333; }
.main2_img{background: url(../img/main2_img.jpg) no-repeat; width: 100%; height: 100%; background-size: cover; background-position: center; padding:100px 120px; }
.main2_img>div{font-size: 2rem; color: #fff; line-height: 1.5; }
.main2_img .main2_btn{ margin-top: 300px; display: flex; justify-content: end;}
.main2_img .main2_btn li{width: 200px;}
.main2_img .main2_btn li:first-child{margin-right: 50px;}




/*main3*/
.main3{overflow: hidden; }
.main3_top{position: relative;}
.main3_top .paging{width: 190px; position: absolute; right: 0; min-width: 190px; z-index: 50;}
.main3_top .paging .navi{}
.main3_top .paging .navi i{font-size: 2rem; color: #111;}

.review_sect .paging .navi { position: absolute; cursor: pointer; }
.review_sect .paging .navi.navi_prev { left: 0; top: 50%; transform: translate(0, -50%); }
.review_sect .paging .navi.navi_next { right: 0; top: 50%; transform: translate(0, -50%); }
.review_sect .paging .num_wrap { width: 100%; font-size: 1.8rem; text-align: center; }
.review_sect .paging .num_wrap .barSpace { margin: 0 5px; }
.review_sect .paging .num_wrap .swiper-pagination-current { color: var(--sub-color); }

.solu_swiper1 .img_box { width: 55%; margin-right: -1%; } 
.solu_swiper1 .img_box img { height: 100%; object-fit: cover; } 
.letter_img { position: absolute; top: 18%; z-index: 10; left: 35%; width: 45%; } 
.solu_swiper { } 
.solu_sw_wrap { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; margin-left: 6%; position: relative; height: 63vh; align-items: end; margin-top: 60px; justify-content: space-between;} 
.solu_swiper1 { width: 56%; height: 100%; position: relative; } 
.solu1 { overflow: hidden; position: relative; height: 100%; } 
.swiper-wrapper { } 
.swiper-slide { display: flex; align-items: stretch; }

.solu_swiper2 { width: 40%; overflow: hidden; height: 63%;filter: grayscale(1);
    opacity: 0.4 !important; } 
.solu2 { /* overflow: hidden; */ } 

.solu_swiper2 .solu2 { width: 33%; width: 100%; height: 63vh; } 
.solu_swiper2 .solu2 .img_box { } 
.solu_swiper2 .solu2 .img_box img { object-fit: cover; max-width: unset; height: 100%; object-position: right; width: 100%;} 


.solution_slide{display: flex !important; justify-content: space-between; align-items: end;}
.solution_slide .img{width: 48%;}
.solution_slide .img img{width: 100%;}
.solution_slide .txt_box{width: 45%;}
.solu_txt_box{}
.solu_txt_box h2{font-size:3.8rem; margin: 40px 0; color: #333;}
.solu_txt_box p{font-size: 2rem; color: #666; margin-bottom: 100px; line-height: 1.5;}
 .solu_txt_box a{display: flex; justify-content: space-between; width: 200px; border-bottom: 1px solid #111; padding-bottom: 10px;}
.solu_txt_box a span{font-size: 1.8rem;}
.solu_txt_box a i{font-size: 1.8rem; transition: all .3s;}
.solu_txt_box a:hover i{transform: translateX(5px);}








/*main4*/
.main4{margin: 160px 0; overflow: hidden; }
.main4_top{display: flex; justify-content: space-between; margin-bottom: 80px;}
.main4_top span{width: 25%;}
.main4_top p{font-size: 2rem; color: #666; width: 65%; line-height: 1.5;}

.main4_pro{}
.pro_right{}

.product{display: flex; }
.pro_right .product{justify-content: end;}
.product li{width:540px; background-color: #f7f8fc; margin: 10px; height: 540px;}
.product li a{display: block; padding: 50px ; position: relative; width: 100%; height: 100%;}
.product li a .pro_txt{display: flex; justify-content: space-between; align-items: center;}
.product li a .pro_txt h3{font-size: 3.2rem; color: #333; font-weight: 400; letter-spacing: -1px;}
.product li a .pro_txt i{font-size: 2.2rem; border: 1px solid #111; border-radius: 50%; padding: 20px;}
.product li a .pro_img{text-align: right; position: absolute; right: 0; bottom: 60px;}
.product li a .pro_img img{}



/*main5*/
.main5{position: relative; margin-bottom: 200px; overflow: hidden; }
.main5::before{content: "";background: url(../img/main5_bg.png) no-repeat; width: 100%; height: 580px; background-position: center; position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); z-index: -1;}

.main5_top{text-align: center; }
.main5_top span{display: block;}
.main5_top h3{font-size: 5rem; color: #333; margin: 55px 0 120px;}

.partner{overflow: hidden;}
.partner_wrap{display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; overflow: hidden; width: 200%; }
.partner_logo1{margin-bottom: 70px;}
.logo_lolling{margin-right: 30px;}
.partner_logo1 .logo_lolling{    animation: textMainLoop 25s linear infinite; text-wrap: nowrap;}
.partner_logo2 .logo_lolling{    animation: textMainLoop 25s linear  infinite reverse;; text-wrap: nowrap;}
.partner_wrap .logo_lolling img{width: unset;}

@keyframes textMainLoop{
    0%{  -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
     100% {
  -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(-100%, 0, 0);
  }
}


/*main6*/
.main6{margin-bottom: 120px; overflow: hidden; }

.main6_bg{background: url(../img/main6_bg.jpg) no-repeat; width: 100%; height: 100%; padding: 90px; }
.main6_bg h3{font-size: 4rem; color: #fff; margin: 40px 0 80px;}
.main6_bg p{font-size: 2rem; color: #fff; line-height: 1.5 ;}
.main6_bg_bottom{margin-top: 30px ;display: flex; justify-content: end;}



/*******************************반응형*************************************/

@media (max-width: 1770px) {  

  /*비주얼*/
   .section1 .mySwiper .swiper-slide .visual_wrap{width: 95%;}
   /*공통*/
    .main_inner{width: 95%;}

    /*메인3*/
    .solu_swiper2{height: 48%;}
}

@media (max-width: 1540px) {  

    /*비주얼*/
    .control_wrap{left: 3%;}

    /*메인2*/
    .main2 .main_inner h2 br{display: none;}
    .main2 .main_inner h2{font-size: 3.8rem;}
    .main2_img{padding: 100px 65px;}


    /*메인3*/
.solu_sw_wrap{margin-left: 3%;}
.solu_txt_box h2{font-size: 3.5rem;}
.solu_sw_wrap{height: 55vh;}


}

@media (max-width: 1380px) {  

      /*비주얼*/
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 5rem;}
.section1 .mySwiper .swiper-slide .slide_bg{background-position: center;}

    /*메인2*/
    .main2 .main_inner h2{font-size: 3.5rem;}

      /*메인3*/
      .solu_sw_wrap{height: 52vh;}
      .solu_swiper1{width: 65%;}
      .solu_swiper2{width: 30%; height: 35%;}
      .solu_txt_box h2{font-size: 3rem; margin: 20px 0;}
.solution_slide .txt_box .solu_icon img{width: 80px;}

/*메인4*/
.product li a .pro_txt h3{font-size: 3rem;}

/*메인5*/
.main5_top h3{font-size: 4.8rem;}

/*메인6*/
.main6_bg{padding: 90px 30px;}
.main6_bg h3{font-size: 3.5rem;}


}
@media (max-width: 1280px) {  

/*비주얼*/
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 4.5rem;}

    /*메인2*/
    .main2 .main_inner h2{font-size: 3.2rem;}
    .main2_img{padding: 100px 40px;}

      /*메인3*/
    .solu_txt_box h2{font-size: 2.8rem;}

    /*메인4*/
    .product li{height: 450px;}
.product li a .pro_txt h3{font-size: 2.8rem;}
.product li a .pro_img img{width: 300px;}

/*메인5*/
.partner_logo1{margin-bottom: 30px;}
.main5_top h3{margin: 55px 0 80px;}


}
@media (max-width: 1080px) {  

/*비주얼*/
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 4rem;}

    /*메인2*/
    .main2 .main_inner h2{margin: 40px 0 ;font-size: 2.8rem;}
.main2_img{background-position: right;}

  /*메인3*/
  .main3{max-width: 1920px; margin: 0 auto; width: 95%;}
.solu_sw_wrap{flex-direction: column; height: auto; align-items: start; margin-left: 0;}
.solu_swiper1{width: 100%;}
.solu_swiper2{display: none;}
.solution_slide .txt_box{width: 48%;}

/*메인4*/
.product li a .pro_txt h3{font-size: 2.6rem;}
.product li{height: 400px;}
.product li a .pro_img{bottom: 20px;}
.product li a .pro_txt i{padding: 15px;}

/*메인5*/
.main5{margin-bottom: 100px;}
.main5_top h3{font-size: 4rem;}
.partner_wrap .logo_lolling img{height: 6rem;}
.main5::before{height: 520px; bottom: -100px;}

/*메인6*/
.main6_bg{background-position: center;}
.main6_bg h3{font-size: 3.2rem;}



}

@media (max-width: 800px) {  
[data-aos^=fade][data-aos^=fade] {
    opacity: 1;transform: inherit;
  }
 [data-aos^=flip][data-aos^=flip] {
    opacity: 1;transform: inherit;
  }
/*비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p{font-size: 2.4rem;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 3.5rem;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2 br{display: none;}
.section1 .mySwiper .swiper-slide .slide_bg.slider_1{background-position: 80% 50%;}
.section1 .mySwiper .swiper-slide .slide_bg.slider_2{background-position: 80% 50%;}

/*공통*/
.main_s_tit{font-size: 2.6rem;}

/*메인2*/
.main2{margin: 100px 0;}
.main2_img>div br{display: none;}
.main2_img{padding: 60px 40px; background-position: 80% 50%;}


  /*메인3*/
  .main3 .main3_top{width: 100%;}
.solu_txt_box h2{font-size: 2.4rem;}
.solution_slide .txt_box .solu_icon img{width: 60px;}
.solu_txt_box p{font-size: 1.8rem; margin-bottom: 50px;}


/*메인4*/
.main4{margin: 100px 0;}
.main4_top{flex-direction: column; margin-bottom: 50px;}
.main4_top span{width: 100%;}
.main4_top p{width: 100%; margin-top: 15px;}
.product li a{padding: 30px;}
.product li a .pro_txt h3{font-size: 2.4rem;}
.product li a .pro_txt i{padding: 10px;}
.product li a .pro_img img{width: 250px;}
.product li{height: 350px;}

/*메인5*/
.main5_top h3{font-size: 3rem; margin: 50px 0;}
.partner_wrap .logo_lolling img{height: 5rem;}
.main5::before{height: 350px;}

/*메인6*/
.main6_bg h3{margin: 30px 0; font-size: 3rem;}
.main6_bg_bottom{justify-content: start;}



}
@media (max-width: 650px) {  
   /*비주얼*/
   .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p{font-size: 2.2rem;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 2.8rem;}

    /*공통*/
.main_s_tit{font-size: 2.4rem;}

/*메인2*/
.main2 .main_inner h2{font-size: 2.4rem;}
.main2_img .main2_btn{margin-top: 200px;}
.main2_img .main2_btn li{width:calc(100% / 2 - 20px) ;}
.main2_img .main2_btn li:first-child{margin-right: 0;}
.main2_img .main2_btn{justify-content: space-between;}
.main2_img>div{font-size: 1.8rem;}
.main2_img .main2_btn li a{width: 100%;}


  /*메인3*/
  .solution_slide{flex-direction: column;}
.solution_slide .img{width: 100%; }
.solution_slide .txt_box{width: 100%; margin-top: 20px;}
.main3_top .paging{bottom: -45px;}
.main3_top .paging .navi i{font-size: 2.5rem;}

/*메인4*/
.main4_top p{font-size: 1.8rem;}
.product{flex-direction: column;}
.product li{width: 100%; margin: 10px 0;}
.product li a .pro_txt h3{font-size: 2.2rem;}
.product li a .pro_txt h3 br{display: none;}
.product li a .pro_img img{width: 300px;}
.product li a{padding:30px 15px ;}

/*메인5*/
.main5_top h3{font-size: 2.8rem;}
.partner_wrap .logo_lolling img{height: 4rem;}
.main5::before{height: 300px; background-size: cover; bottom: 0;}

/*메인6*/
.main6_bg h3{font-size: 2.8rem;}
.main6_bg p{font-size: 1.8rem;}




}

@media (max-width: 480px) {  

   /*비주얼*/
     .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p{font-size: 2rem;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 2rem; margin: 20px 0;}
/* .control_wrap .swiper-pagination-bullet{width: 3rem;} */
/* .control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 15rem;} */
.control_wrap{width: 90%;}


    /*공통*/
.main_s_tit{font-size: 2rem;}

/*메인2*/
.main2 .main_inner h2{font-size: 1.8rem; margin: 20px 0;}
.main2_img>div{font-size: 1.6rem;}
.main2_img{padding: 60px 20px;}
.solution_slide .txt_box{margin-top: 15px;}
.main2_img .main2_btn li{width:calc(100% / 2 - 10px) ;}
.main_btn span{font-size: 1.6rem;}

  /*메인3*/
  .solu_txt_box h2{font-size: 2rem;}

  /*메인4*/
  .product li a .pro_txt h3{font-size: 2rem;}
.product li a .pro_img img{width: 250px;}

/*메인5*/
.main5_top h3{font-size: 2rem;}
.main5_top h3 br{display: none;}
.partner_wrap .logo_lolling img{height: 3rem;}

/*메인6*/
.main6_bg{padding: 50px 20px;}
.main6_bg h3{font-size: 2.4rem;}
.main6_bg p br{display: none; }
.main6_bg p{font-size: 1.6rem;}


}
@media (max-width: 400px) { 

  /*메인4*/
.product li a .pro_txt i{padding: 7px;}

/*메인5*/
.main5_top h3{font-size: 2.2rem;}

/*메인6*/
.main6_bg h3{font-size: 1.8rem;}


 }
