.index_wrap{width: 100%;}

/*============* MAIN VISUAL ============*/
.section1 .mySwiper .swiper-slide .slide_bg { height: 100vh; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } 
.section1 .mySwiper .swiper-slide .visual_wrap { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1600px; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box { color: #fff; } 

.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 { font-size: 8rem; padding-bottom: 2.6rem; font-family: var(--font-Poppins); line-height: 1; font-weight: 600;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 span{font-size: 22px; display: block; font-weight: 400; margin-bottom: 5px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size:3rem; font-weight: 300; line-height: 1.5; margin-bottom: 20px; padding-left: 15px;} 


.index_wrap .slider_1 { background-image: url(../img/main_visual_1.jpg); } 
.index_wrap .slider_2 { background-image: url(../img/main_visual_2.jpg); } 
.index_wrap .slider_3 { background-image: url(../img/main_visual_3.jpg); } 
 
/* Pager */
.mainVisual{position: relative;}
.main_v_auto{ position: absolute; left: 150px; bottom: 10%; z-index: 555;}
.mainVisual .pager{display:flex;justify-content:center;gap:15px}
.mainVisual .pager button{opacity:1;position:relative;display:flex;justify-content:center;align-items:center;width:auto;height:auto;border-radius:50%;color:#fff;cursor:pointer;background:transparent;transition:.2s}
.mainVisual .pager button:after{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:7px;height:7px;border-radius:50%;background-color:rgba(255,255,255,0.5);content:"";transition:all .2s}
.mainVisual .pager button.on:after{opacity:0}
.mainVisual .pager .progress{transform:rotate(-90deg)}
.mainVisual .pager .circle-origin{fill:transparent;stroke:rgb(255, 255, 255);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:all .2s}
.mainVisual .pager button.on .circle-origin{animation:progress 8.5s ease}
@keyframes progress{from{stroke-dashoffset:-38}to{stroke-dashoffset:0}}

.main_v_btn{width: 98%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999999;}
.main_v_btn>div{color: rgba(255,255,255,0.5);}
.main_v_btn>div::after{font-size: 4rem;}



@keyframes zoom_in { 
    0% { transform: scale(1.2); /* background-size: 100% 100%; */ } 
    100% { transform: scale(1) rotate(0.003deg); } 
    }
   
   .index_wrap .mySwiper .swiper-slide.swiper-slide-active .slide_bg {  transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 
   .index_wrap .mySwiper .swiper-slide.swiper-slide-active .title_box, 
   .index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info { overflow:hidden } 
   .index_wrap .mySwiper .swiper-slide.swiper-slide-active .title_box h1 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s; } 
   .index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info p { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.4s; margin-right:4px; } 

   @keyframes text-up { 
    from { transform: translate3d(0, 150%, 0); } 
    to { transform: translate3d(0, 0, 0); } 
    }
   
    /* pagnation */
   .control_wrap { display: flex; position: absolute; bottom: 5%; left: 5%; width: 200px;  align-items: center; justify-content: space-between; flex-direction: row; z-index: 55;} 
   .control_wrap .swiper-pagination { text-align:left; position: relative; width: 90px !important; display: flex;  justify-content: space-around; align-items: center; bottom:50% !important; left: 35% !important; } 
   .control_wrap .swiper-pagination-bullet { width: 11px; height: 11px; background: transparent; border: 1px solid #fff; opacity:1; } 
   .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
   .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: unset; } 
   .control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { position: relative;background-color: #fff; } 
   /* .control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::before { content:''; display:block; position:absolute; width: 20px; height: 20px;  border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%); }  */
   
 /* 정지재생 */
 .slide_btn { cursor: pointer; z-index: 100; position: relative; width: 10%; margin-bottom: 3%; } 
 .slide_btn span { display: none; position: relative; top: 3px; } 
 .slide_btn span.on { display: inline-block; } 
 .slide_btn i { color: #fff; font-size:18px; font-weight: 100; } 
/*시간*/
 .autoplay-progress {position: absolute;left: 0px;bottom: -12px;z-index: 10;width: 55px;height: 55px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 14px;font-family: var(--font-KIMM);}
.autoplay-progress svg { --progress: 0;position: absolute;left: 0;top: 0px;z-index: 10;width: 100%;height: 100%;stroke-width: 1px;stroke: #fff;fill: none;stroke-dashoffset: calc(125.6px * (1 - var(--progress)));stroke-dasharray: 125.6;transform: rotate(-90deg);}

/* mouse */


 /* scroll */
.mouse_wrap { position:absolute; right: 0; bottom:40px; z-index:10; transform:translateX(-50%); width: 10.5rem; height: 11rem; display:flex; align-items:center; justify-content:center; text-align:center; } 
.mouse_wrap .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.mouse_wrap .txt { position:absolute; left:0; top:0; width: 10.5rem; height: 10.5rem; animation:scroll 10s infinite linear; } 
.mouse_wrap .txt img { width:100% } 
@keyframes scroll { 
 0% { transform:rotate(0); } 
100% { transform:rotate(360deg); } 
 }



/*메인공통*/
.main_inner{max-width: 1604px; margin:0 auto; width: 100%;}
.main_s_tit{font-size: 2.6rem; color: var(--main-color); font-weight: 600;}
.main_tit{font-size: 4.8rem; margin-top: 20px; font-weight: 500; color: #333;}
.main_tit.line{margin-top: 100px; position: relative;}
.main_tit.line::before{content: ""; width: 1px; height: 70px; background-color: #333; position: absolute; left: 0; top: -80px;}
.main_top{}
.main_btn{ align-items: center; width: 20%; padding: 10px 20px; border-radius: 25px;justify-content: center;}
.main_btn span{ font-size: 2.2rem;}
.main_btn img{margin-left: 15px; transition: all .3s;}
.main_btn:hover img{transform: translateX(5px);}
.main_btn:hover{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }


 /*main2*/
.main2{margin: 200px 0;}
.main2 ul{align-items: center;}
.main2 ul li{width: calc(100% / 2 - 20px);}
.main2 ul li .main2_txt{}
.main2 ul li .main2_txt p{font-size: 2.4rem; margin-top: 30px; line-height: 1.5;}
.main2 ul li .main2_txt a{margin-top:100px;}
.main2 ul li.main2_img{border-radius: 20px;}
.main2 ul li.main2_img img{width: 100%; border-radius: 20px;}



 /*main3*/
.main3{margin-bottom: 200px;}
.main3_top{align-items: end;}
.main3_top .main_btn{width: auto;}

.main3_list{margin-top: 100px;position: relative;}
.main3_list .main3_product{}
.main3_list .main3_product .main_pro_wrap{background-color: #f5f5f5; border-radius: 20px; }
.main3_list .main3_product .main_pro_wrap a{display: block; padding: 50px 20px 10px 20px;}
.main3_list .main3_product .main_pro_wrap a h3{font-size: 2.2rem;font-weight: 500; }
.main3_list .main3_product .main_pro_wrap a> img{width: 100%;}
.main3_list .main3_product .main_pro_wrap a .main_pro_hov{ display: flex;  justify-content: end; }
.main3_list .main3_product .main_pro_wrap a .main_pro_hov img{ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 50%; padding: 20px; transition: all .3s;}

.main3_list .main3_product .main_pro_wrap:hover{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; transition: all .3s;}
.main3_list .main3_product .main_pro_wrap:hover .main_pro_hov img{border: 1px solid var(--main-color); background-color: #fff;}

.main3_list .main3_pro_btn{position: absolute; width: 104%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999;}
.main3_list .main3_pro_btn>div{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 50%; padding: 30px; background-color: #f5f5f5;}
.main3_list .main3_pro_btn>div.swiper-button-prev{left: 0;}
.main3_list .main3_pro_btn>div.swiper-button-next{right: 0;}
.main3_list .main3_pro_btn>div::after{font-size:2.2rem; color: var(--sub-color);}



/*main5*/
.main5{background: url(../img/main5_bg.jpg) no-repeat; width: 100%; height: 960px; display: flex; align-items: center; background-position: center; background-size: cover; }
.main5 .main_inner{height: 100%;}
.main5_wrap{ display: flex; justify-content: space-between;height: 100%; position: relative;}
.main5_wrap::before{content: ""; width: 1px; height: 100%; background-color:rgba(236, 236, 236, 0.3); position: absolute; left: 50%; top: 0; transform: translateX(-50%);}

.main5_wrap>div{width:calc(100% / 2) ; height: 100%;}
.main5_top{display: flex; flex-direction: column; justify-content: center;}
.main5_top .main_tit{color: #fff; font-size: 7.2rem; margin-top: 0; line-height: 1;}
.main5_top .main_sub_tit{color: #fff; line-height: 1.5; font-size: 2.4rem; margin-top: 30px;}
.main5_info{margin-top: 35px;}
.main5_info h3{font-size: 3.6rem; color: #fff;}
.main5_info h3 span{margin-right: 15px;}
.main5_info h3 span.spacing{letter-spacing: -2px;}

.main5_right{display: flex; position: relative; align-items: center;}
.main5_right::before{content: ""; width: 1px; height: 100%; background-color:rgba(236, 236, 236, 0.3); position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.main5_right>div{width:calc(100% / 2) ; padding: 0 40px;}
.main5_right>div h4{font-size: 7.2rem; color: #fff; font-weight: 500;}
.main5_right>div p{font-size: 2.4rem; color: #fff; margin: 80px 0 40px 0; line-height: 1.5;}
.main5_right>div a{padding: 20px; background-color: #fff; display: flex; align-items: center; justify-content: center; width: 65px;height: 65px; border-radius: 50%;}
.main5_right>div a img{ transition: all .3s;}
.main5_right>div a:hover img{transform: translateX(5px);}









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

    
 }
 @media (max-width: 1580px) {  
 /*공통*/  
  .main_tit{font-size: 4.5rem;}
  .main_btn{width: 30%;}

   /*메인비주얼*/
   .section1 .mySwiper .swiper-slide .visual_wrap{width: 90%;}
   .main_v_auto{left: 80px;}

   
 


}

@media (max-width: 1380px) {
   /*공통*/  
  .main_tit{font-size: 4rem; line-height: 1.5;}
  .main_btn{width: 35%;}
  
   /*메인비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 8rem;}
   
 
  /*메인5*/
  .main5_right>div h4{font-size: 6rem;}
   .main5_info h3{font-size: 3.2rem;}


}

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

  /*메인2*/
  .main2 ul li .main2_txt p{font-size: 2.2rem;}
 
/*메인5*/
    .main5_right>div{padding: 0 20px;}
    .main5_right>div h4{font-size: 5.2rem;}
.main5_top .main_tit{font-size: 5.2rem;}

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

  /*메인비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 6rem;}
  .main_v_auto{left: 60px;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 2.2rem;}

  .index_wrap .slider_1{background-position: 10% 50%;}
  .index_wrap .slider_2{background-position: 10% 50%;}
  .index_wrap .slider_3{background-position: 10% 50%;}

    /*메인2*/
    .main2 ul li .main2_txt p br{display: none;}
    .main_tit.line::before{height: 50px;}

        /*메인3*/
  .main3_list .main3_product .main_pro_wrap a h3{font-size: 2rem;}


     /*메인5*/
    .main5_wrap{flex-direction: column;}
    .main5_wrap>div{width: 100%;}
    .main5_wrap::before{display: none;}
.main5_info h3{font-size: 2.8rem;}
.main5_right>div h4{font-size: 4.2rem;}
.main5_top .main_tit{font-size: 4.2rem;}
.main5_right>div p{font-size: 2.2rem; margin: 40px 0;}
.main5_wrap .main5_top{position: relative;}
.main5_wrap .main5_top::after{content: ""; width: 100%; height: 1px ;background-color: rgba(236, 236, 236, 0.3);position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }


}
@media (max-width: 800px) {  
  /*공통*/  
  .main_tit{font-size: 3rem;}
  .main_btn{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
  .main_btn:hover{box-shadow: none;}
  .main_s_tit{font-size: 2.2rem;}

    .index_wrap .slider_1{background-position: 25% 50%;}
  .index_wrap .slider_2{background-position: 25% 50%;}
  .index_wrap .slider_3{background-position: 25% 50%;}


  /*메인2*/
  .main2{margin: 100px 0;}
  .main2 ul{flex-direction: column;}
  .main2 ul li{width: 100%;}
  .main2 ul li.main2_img{margin-top: 50px;}
  .main_tit.line{margin-top: 50px;}
  .main_tit.line::before{height: 30px; top: -43px;}
  .main2 ul li .main2_txt a{margin-top: 50px;}

   /*메인5*/
    .main5{height: auto; padding: 100px 0;}
    .main5_wrap>div{height: auto;}
    .main5_wrap .main5_top{padding-bottom: 50px;}
    .main5_right>div h4{font-size: 3.2rem;}
    .main5_top .main_tit{font-size: 3.2rem;}
    .main5_info h3{font-size: 2.4rem;}
    .main5_right>div p{font-size: 2rem; margin: 20px 0 40px;}
    .main5_wrap>div{flex-direction: column;}
    .main5_right>div{width: 100%;padding: 50px 0;}
    .main5_right::before{width: 100%; height: 1px;top: 55%;}
   .main5_right>div:last-child{padding-bottom: 0;}
   .main5_top .main_sub_tit{font-size: 2.2rem;}


  
}
@media (max-width: 650px) {  
  /*공통*/  
  .main_tit{font-size: 2.8rem;}
  .main_btn{width: 50%;}
  .main_s_tit{font-size: 2rem;}

    /*메인비주얼*/
  .mouse_wrap{display: none;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 4rem;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 2rem; margin-bottom: 15px; padding-left: 0;}
  .main_v_auto{left: 30px;}
  .index_wrap .slider_1{background-position: 40% 50% !important;}
  .index_wrap .slider_2{background-position: 25% 50% !important;}
  .index_wrap .slider_3{background-position: 40% 50% !important;}

    /*메인2*/
    .main2 ul li .main2_txt p{font-size: 2rem;}
    .main_btn span{font-size: 2rem;}

      /*메인3*/
      .main3{margin-bottom: 100px;}
    .main3_top{flex-direction: column; align-items: start;}
    .main3_top .main_top{width: 100%;}
.main3_top .main_btn{width: 50%; margin: 50px 0;}
  .main3_list .main3_product .main_pro_wrap a h3{font-size: 1.8rem;}
  .main3_list{margin-top: 0;}
  .main3_list .main3_product .main_pro_wrap a{padding: 20px;}


      /*메인5*/
    .main5_right>div h4{font-size: 2.4rem;}
    .main5_top .main_tit{font-size: 2.4rem;}
    .main5_right>div p{font-size: 1.8rem;}
    .main5_info h3{font-size: 2.2rem;}
  .main5_top .main_sub_tit{font-size: 2rem;}
  .main5_right>div{padding: 30px 0;}
  .main5_right>div a{width: 60px; height: 60px;}

}
@media (max-width: 480px) {  
  /*공통*/  
    .main_tit{font-size: 2.2rem;}
    .main_btn span{font-size: 1.8rem;}

    /*메인비주얼*/
    .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 3rem;}
    .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 1.8rem; }
    .main_v_auto{left: 20px;}
    .main_v_btn>div::after{font-size: 3rem;}
    

    /*메인2*/
.main2 ul li .main2_txt p{font-size: 1.8rem;}

   /*메인3*/
  .main3_list .main3_product .main_pro_wrap a h3{font-size: 1.7rem;}

   /*메인5*/
 .main5{padding:50px 0 ;}
.main5_right>div h4{font-size: 2.2rem;}
.main5_top .main_tit{font-size: 2.2rem;}
.main5_right>div p{font-size: 1.6rem;}
  .main5_top .main_sub_tit{font-size: 1.8rem;}


}
@media (max-width: 400px) {  
    /*공통*/  
    .main_tit{font-size: 2rem;}
    
 /*메인비주얼*/
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 2.5rem;}
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 1.6rem; }

  


}