
.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: 58%; left: 50%; transform: translate(-50%, -50%); max-width: 1680px; width: 100%;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box { color: #fff; overflow: hidden; text-align: center;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p{font-size: 24px ;transition: all .3s;font-weight: 600;  }
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 60px;  font-weight: bold;  line-height: 1.2; transition: all .3s; margin: 30px 0;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box span{font-size: 24px; font-weight: 600; line-height: 1.5; display: block;}

.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box.main_v4{text-align: left;}

/* .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); } 
.section1 .slider_4 { background-image: url(../img/main_visual_4.jpg); } 
.section1 .slider_5 { background-image: url(../img/main_visual_5.jpg); } 
.section1 .slider_6 { background-image: url(../img/main_visual_6.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 {  position: absolute; bottom: 3%; left:50%; transform: translateX(-50%) ; max-width: 600px;  width: 100%; z-index: 100; } 
    .control_wrap .swiper-pagination {  position: relative; display: flex; justify-content: space-between; align-items: center;} 
    .control_wrap .swiper-pagination-bullet { transition: all 1s; position: relative; width: 85px; height:5px; background: #ffffff8f; margin: 0 5px; border-radius: unset; opacity: 1; } 
   .control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; margin: 0 5px; background: #ffffff8f; } 
   .control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; } 
   .control_wrap .swiper-pagination-bullet::before { content:""; display: block; width:0; height: 5px; background-color: #fff; left: 0; top: 0; position: absolute; } 
   .control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::before { animation:LoadingBar 6s both; animation-delay: 0.3s; left: 0; top: 0; height: 5px; background: #fff; position: absolute; opacity:1; z-index: 6; } 

/*공통*/
.main_inner{max-width: 1280px; width: 100%; margin: 0 auto;}
.main_btn{}
.main_btn span{font-size: 1.8rem; font-weight: 700;}
.main_btn img{margin-left:25px; transition: all .3s;}
.main_btn:hover img{transform: translateX(10px);}
.main_tit{font-size: 3.8rem; font-weight: 700;}

/*main2*/
.main2{margin-top: 170px; overflow: hidden;}
.main2_top{margin-bottom: 70px; display: flex;}
.main2_top img{width: 190px;}
.main2_top h3{font-size: 3.8rem; margin-left: 90px; line-height: 1.4;}
.main2_bot{display: flex; justify-content: end;}
.main2_bot .main2_txt{width: 65%;}
.main2_bot .main2_txt p{color: #666; font-size: 2rem; line-height: 1.6; font-weight: 300; margin-bottom: 80px;}



/*main3*/
.main3{margin-top: 160px; overflow: hidden;}
.main3_list{}
.main3_list li{display: flex; justify-content: space-between; align-items: end; margin-bottom: 150px;}
.main3_list li:last-child{margin-bottom: 0;}
.main3_list li .main3_img{width: 50%; }
.main3_list li .main3_img a{display: block; width: 100%; height: 100%;}
.main3_list li .main3_img img{width: 100%; border-radius: 15px;}
.main3_list li .main3_txt{width:46% }
.main3_list li .main3_txt h3{margin-bottom: 20px;}
.main3_list li .main3_txt p{font-size: 1.8rem; color: #666;line-height: 1.6; font-weight: 300;}
.main3_list li .main3_txt p.mar{ margin-top: 10px  ; }
.main3_list li .main3_txt p b{font-weight: 700;}
.main_technology{}
.main_product .main3_img{order: 2;}
.main3_list li .main3_txt a{margin-top: 20px; display: inline-block;}
.main3_list .main_product{margin-bottom: 210px;}
.main_technology p.mar{margin-bottom: 10px;}
.main_esg p.mar{margin-bottom: 10px;}




/*******************************반응형*************************************/
@media (max-width: 1770px) {  
    /*공통*/
    .main_inner{width: 95%;}
 
   
}
@media (max-width: 1540px) {  

  .section1 .mySwiper .swiper-slide .slide_bg{background-position: 50% 50%;}
      .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box.main_v4{width: 90%; margin: 0 auto;}
    /*메인3*/
 .main3_list li .main3_img{width: 55%;}
 .main3_list li .main3_txt{width: 42%;}
 .main3_list .main_product{margin-bottom: 150px;}
.main3_list li .main3_txt p br{display: none;}

   
}
@media (max-width: 1380px) {  
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 5.5rem;}
    /*공통*/
    .main_tit{font-size: 3.5rem;}

    /*메인2*/
    .main2_bot .main2_txt{width: 65%;}
    .main2_top h3{font-size: 3.5rem;}

    /*메인3*/
    .main3_list li .main3_txt p.mar{margin-top: 15px;}


   
}
@media (max-width: 1280px) {  
    /*비주얼*/
    .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 5.2rem;}
   .section1 .mySwiper .swiper-slide .slide_bg{height: 100vh; background-position: 50% 50%;}

    /*메인2*/
    .main2_top h3{font-size: 3.2rem;}
    .main2_top img{width: 150px;}

  /*메인3*/
  .main3_list li .main3_img{width: 55%;}
  .main3_list li .main3_txt{width: 40%;}



}
@media (max-width: 1080px) {  
        /*공통*/
    .main_tit{font-size: 3.2rem;}


    /*비주얼*/
    .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2{font-size: 5rem;}
    .section1 .slider_2{background: url(../img/main_visual_2_m.jpg) ;}
.section1 .slider_4{background-position: 65% 50% !important; background: url(../img/main_visual_4_m.jpg) ;}

    /*메인2*/
    .main2{margin-top: 100px;}
    .main2_top h3{font-size: 3rem; line-height: 1.6;}
    .main2_top{margin-bottom: 50px;}
    .main2_bot .main2_txt{width: 75%;}
    .main2_top{align-items: center;}

      /*메인3*/
    .main3{margin-top: 100px;}
    .main3_list li{flex-direction: column; margin-bottom: 80px;}
    .main3_list li .main3_img{width: 100%; margin-bottom: 20px;}
    .main3_list li .main3_txt{width: 100%;}
    .main_product  .main3_img{order: 1;}
    .main_product  .main3_txt{order: 2;}
    .main3_list li .main3_txt p br{display: none;}
    .main3_list .main_product{margin-bottom: 80px;}
    .main3_list li .main3_txt p.mar{margin: 15px 0;}
    .main3_list li .main3_txt a{margin-top: 30px;}


}
@media (max-width: 800px) {  
       /*공통*/
    .main_tit{font-size: 2.8rem;}

[data-aos^=fade][data-aos^=fade] {
    opacity: 1;transform: none;
  }
 [data-aos^=flip][data-aos^=flip] {
    opacity: 1;transform: none;
  }

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

   .section1 .mySwiper .swiper-slide .visual_wrap{width: 90%;}
   .section1 .mySwiper .swiper-slide .slide_bg{background-position: center; position: relative;}
   .section1 .mySwiper .swiper-slide .slide_bg::before{content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; }
   .section1 .mySwiper .swiper-slide .visual_wrap{z-index: 10;}
.section1 .slider_2::before{display: none;}
.section1 .slider_4{background-position: 85% 50% !important;}

    /*메인2*/
    .main2_top img{width: 150px;}
    .main2_top h3{font-size: 2.8rem;}
    .main2_top h3 br{display: none;}
    .main2_bot .main2_txt{width: 100%;}
    .main2_bot .main2_txt p:nth-child(2){margin-top: 20px;}

      /*메인3*/
    .main3_list li .main3_txt p b{font-weight: 600;}

}
@media (max-width: 650px) {  
     /*공통*/
    .main_tit{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 span{font-size: 2.2rem;}
    .control_wrap{width: 90%;}
    .control_wrap .swiper-pagination-bullet{width: calc(100% / 6 - 10px);}
 

      /*메인2*/
    .main2_top img{width: 130px;}
    .main2_top h3{font-size: 2.4rem; margin-left: 0; margin-top: 20px;}
    .main2_bot .main2_txt p{font-size: 1.8rem; margin-bottom: 30px;}
    .main2_top{flex-direction: column; align-items: start;margin-bottom: 20px;}

    /*메인3*/
    .main3_list li .main3_txt p{font-size: 1.8rem;}
    .main3_list li .main3_txt p.mar{margin: 10px 0;}


}
@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: 2.8rem; margin: 20px 0;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box span{font-size: 1.8rem; line-height: 1.2;}
       .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2 br{display: none;}

  .main_btn span{font-size: 1.6rem;}
    /*메인2*/
    .main2{margin-top: 50px;}
  .main2_top img{width: 80px;}
  .main2_top h3{font-size: 2rem; }
  .main2_top h3 br{display: none;}

  /*메인3*/
  .main3{margin-top: 80px;}
  .main3_list li .main3_txt p{font-size: 1.6rem;}
  .main3_list li .main3_txt a{margin-top: 10px; margin-top: 20px;}
.main3_list li{margin-bottom: 50px;}
.main3_list .main_product{margin-bottom: 50px;}

}

@media (max-width: 400px) {  

  .section1 .slider_4{background-position: 80% 50% !important;}

}