.index_wrap{width: 100%;}
/*메인공통*/
.main_inner{max-width: 1608px; margin:0 auto;}


/*============* 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; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1608px; } 
.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: 7.2rem; padding-bottom: 2.6rem;  line-height: 1; font-weight: 700;} 
.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;} 


.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: 25%; 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 5.5s ease}
@keyframes progress{from{stroke-dashoffset:-38}to{stroke-dashoffset:0}}



@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 { animation: zoom_in 5000ms; 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:0; z-index:10;  width: 250px; height: 250px; background: url(../img/main_scroll.png) no-repeat; display: flex; align-items: end; justify-content: end; flex-direction: column;} 
.mouse_wrap .arrow {    transform: translate(-70px, 40px);} 
.btn-motion6 span {position: absolute;top: 0;left: 50%;width: 8px;height: 8px;margin-left: -12px;border-left: 1px solid #fff;border-bottom: 1px solid #fff; transform: rotate(-45deg); animation: btn-motion6 2s infinite;opacity: 0;box-sizing: border-box;}
.btn-motion6 span:nth-of-type(1) {animation-delay: 0s;}
.btn-motion6 span:nth-of-type(2) {top: 10px;animation-delay: .15s;}
.btn-motion6 span:nth-of-type(3) {top: 20px; animation-delay: .3s;}

@keyframes btn-motion6 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.mouse_wrap .txt { color: #fff; font-size: 1.8rem; font-weight: 500; transform: translate(-30%, -60%);} 

@keyframes scroll { 
 0% { transform:rotate(0); } 
100% { transform:rotate(360deg); } 
 }

 .main_tit{ font-size: 2.4rem; color: #1d34be; font-weight: 600;}

 /*메인2*/
 .main2{margin: 200px 0; position: relative;}
 .main2::before{content: ""; width: 1120px; height: 540px;background: url(../img/main2_bg.png) no-repeat;position: absolute; left: 0; bottom: -300px; z-index: -1;}
 .main2_list h3{ font-size: 4.8rem; margin: 35px 0;}
 .main2_list p{font-size: 2.4rem; margin-bottom:100px ; line-height: 1.6;}
.main2_list{ position: relative;}
.main2_list::before{content: "";width: 800px; height: 560px;position: absolute; right: 0;top: 50%; transform: translateY(-50%); background: url(../img/main2_list.jpg) no-repeat; z-index: -1;}

.main_btn{width: 230px; }
.main_btn a{display: block; }
.main_btn a span{font-size: 1.8rem; margin-right: 30px; font-weight: 600;}
.main_btn a img{transition: all .3s;}
.main_btn:hover img{transform: translateX(10px);}
.main_btn:hover span{color: var(--main-color);}



/*메인3*/
.main3{margin: 150px 0;  padding-top: 200px;}
.main3_top{display: flex; flex-direction: column; gap: 60px 0;}
.main3_top_txt{}
.main3_top_txt span{}
.main3_top_txt h3{font-size: 4.8rem; margin-top: 20px; font-weight: 400;}
.main3_top_txt h3 span{font-weight: 700;}
.main3_btn{text-align: right;  display: flex; justify-content: right; position: relative; z-index: 50;}
.main3_btn div{font-family: var(--font-Mont); color: #b4b4b4; cursor: pointer; }
.main3_btn .custom2_prev{position: relative; margin-right: 20px;}
.main3_btn .custom2_prev::after{content: "/"; color:#b4b4b4 ; position: absolute; right: -15px; top: 0;}
.main3_btn div span{font-size: 1.8rem; padding: 0 10px;}
.main3_btn .main3_btn_arrow{}
.main3_btn .main3_btn_arrow i{font-size: 2rem; color: #ccc;}
.main3_btn .swiper-pagination{}
.main3_btn .swiper-pagination-bullet{width: auto; height: auto; border-radius: 0; background-color: transparent; }
.main3_btn .swiper-pagination-bullet-active {background-color: transparent;}
.main3_btn div:hover span{color: #000;}
.main3_btn div:hover i{color: #000;}

.main3_bottom{position: relative; padding-left: 150px; z-index: 20;}
.main3_bottom .main3_view{width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; background-color:var(--main-color); border-radius: 50%; top: -11%; left: 36%; z-index: 2; position: absolute;  transition: all .3s; }
.main3_bottom .main3_view i{color: #fff; font-size: 3rem; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main3_bottom .main3_view img{width: calc(100% - 10px); height: calc(100% - 10px); transition: all .3s;  -webkit-animation: rotate 6s linear infinite;
  animation: rotate 6s linear infinite;}
.main3_bottom .main3_view:hover img{transform: scale(1.1); transition: all .3s;}

.main_pro{max-width: 1920px; width: 100%; margin-top: -8%;}
.main_pro .swiper-wrapper{position: relative;}

.main_pro .swiper-slide{padding: 30% 0 0;transition: all .3s; height: 650px; }

.main_pro .swiper-slide a{display: block; width: 100%; height: 100%;}
/* .main_pro .swiper-slide a::before{content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; opacity: 0; z-index: 1;} */
.main_pro .swiper-slide a .main_pro_img_wrap{    width: 100%; height: 60%; position: absolute; bottom: 0; overflow: hidden; transition: all .3s;}
.main_pro .swiper-slide a .main_pro_img_wrap::before{content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; opacity: 0; z-index: 1;transition: all .3s;}
  .main_pro .swiper-slide a .main_pro_img_wrap img{width: 100%;     min-width: 100%;min-height: 100%;position: absolute;bottom: 0; transition: all .3s;}
.main_pro .swiper-slide a .main_pro_txt{opacity: 0.5; position:absolute; left: 20px; bottom: 20px; z-index: 2; }
.main_pro .swiper-slide a .main_pro_txt p{font-size: 3rem; color: #fff; font-weight: 600;}
.main_pro .swiper-slide.swiper-slide-next .main_pro_img_wrap{height: 100%;}
.main_pro .swiper-slide.swiper-slide-next .main_pro_img_wrap img{height: 100%;}
/* .main_pro .swiper-slide.swiper-slide-next{padding-top: 0;} */
.main_pro .swiper-slide a .main_pro_img_wrap:hover::before{opacity: 1;}
.main_pro .swiper-slide a:hover .main_pro_txt{opacity: 1;}
.main_pro .swiper-slide a .main_pro_img_wrap:hover img{transform: scale(1.1);}

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


/*메인4*/
.main4{margin-bottom: 150px;}
.main4_top{text-align: center;}
.main4_top h3{font-size: 4.8rem; margin: 20px 0;}
.main4_top p{font-size: 2.4rem;}
.main4 .main_btn{margin: 0 auto;}


/*메인5*/
.main5{margin-bottom: 100px;}
.main5 .main_inner{position: relative;}
.main5_tab{display: flex; justify-content: center; margin-top: 50px; align-items: center;}
.main5_tab li{border: 1px solid #d5d5d5; color: #999; text-align: center; font-size: 1.8rem;  cursor: pointer; width: 140px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 5px;}
.main5_tab li.current{background-color: var(--sub-color); color: #fff;}
.main5 .main_btn{position: absolute; right: 0; top: 31.5%;}
.tab-content{display: none;}
.tab-content.current{display: inherit;}
.main5_latest{margin-top: 50px;}
.main_project{position: relative; margin: 70px 0;}



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

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

  
}
@media (max-width: 1380px) {  
    /*메인비주얼*/
    .main_v_auto{left: 70px;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 6rem};
 
  /*메인2*/
  .main2_list::before{width: 700px;}
  .main2_list h3{font-size: 4rem;}

  /*메인3*/
  .main3_top_txt h3{font-size: 4rem;}
  .main3_bottom .main3_view{left: 35%;}
  .main3_bottom{padding-left: 60px;}
  .main_pro .swiper-slide a .main_pro_txt p{font-size: 2.6rem;}

  /*메인4*/
  .main4_top h3{font-size: 4rem;}



  
}
@media (max-width: 1280px) {  
     /*메인비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 5rem;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 2.6rem;}
  
  /*메인2*/
  .main2_list p{font-size: 2.2rem;}
  .main2::before{bottom: -200px;}

  /*메인3*/
  .main3{padding-top: 100px;}
  .main3_top_txt h3{font-size: 3.2rem;}
  .main_pro .swiper-slide a .main_pro_txt p{font-size: 2.4rem;}
  .main3_bottom .main3_view{left: 32%; width: 130px; height: 130px;}
  .main3_bottom .main3_view i{font-size: 2rem;}
  .main_pro .swiper-slide{height: 500px;}


  /*메인4*/
  .main4_top h3{font-size: 3.2rem;}
  .main4_top p{font-size: 2.2rem;}




}
@media (max-width: 1080px) {  
      /*메인비주얼*/
      .mouse_wrap{width: 200px; height: 200px; background-size: cover;}
      .mouse_wrap .txt{font-size: 1.4rem;}
      .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: 2.4rem;}

        /*공통*/
    .main_tit{font-size: 2.2rem;}


  /*메인2*/
  .main2{margin: 100px 0;}
  .main2::before{display: none;}
  .main2_list::before{width: 100%; height: 100%; background-size: cover; background-position: bottom;}
  .main2_list{padding: 80px 0; background-color: rgba(0,0,0,0.2); text-align: center;}
  .main2_list .main_tit{color: #fff;}
  .main2_list h3{color: #fff; font-size: 3.5rem;}
  .main2_list p{color: #fff;}
  .main2_list .main_btn{margin: 0 auto; }
  .main2_list .main_btn a span{color: #fff;}

    /*메인3*/
    .main3_top_txt h3{font-size: 2.8rem;}
    .main3_btn div span{font-size: 1.6rem;}
    .main_pro .swiper-slide{height: 400px;}
    .main_pro .swiper-slide a .main_pro_txt p{font-size: 2.2rem;}
    .main3{margin: 100px 0; padding-top: 0;}

  /*메인4*/
  .main4{margin-bottom: 100px;}
  .main4_top h3{font-size: 3rem;}


  /*메인5*/
  .main5 .main_btn{position: inherit; top: 0; margin: 20px auto 0;}



}
@media (max-width: 1023px) { 
    /*메인3*/
    .main3_bottom{padding-left: 20px;}
    .main3_top_txt h3{font-size: 2.5rem;}
   
    .main3_top{gap: 0; margin-bottom: 100px;}
    .main3_bottom .main3_view{top: -15%; left: 45%;}
    .main_pro .swiper-slide{height: 450px;}
    .main_pro .swiper-slide a .main_pro_txt p{font-size: 2rem;}

}
@media (max-width: 800px) {  
   /*메인비주얼*/
   .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: 2.2rem;}
   .mouse_wrap{width: 150px; height: 150px;}
   .mouse_wrap .arrow{transform: translate(-45px, 40px);}
   .mouse_wrap .txt{transform: translate(-15%, -60%);}

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

     /*메인2*/
     .main2_list h3{font-size: 2.8rem;}
     .main2_list h3 br{display: none;}
     .main2_list p{font-size: 2rem;}

    /*메인4*/
    .main4_top h3{font-size: 2.6rem;}
    .main4_top p{font-size: 2rem;}

  
}
@media (max-width: 650px) {  
    /*메인비주얼*/
    .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 .title_box h1 br{display: none;}
    .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 2rem;}

       /*공통*/
       .main_btn a span{font-size: 1.6rem;}

     /*메인2*/
     .main2_list h3{font-size: 2.2rem;}
     .main2_list p{font-size: 1.8rem; margin-bottom: 50px;}

    /*메인3*/
    .main3_bottom{padding-left: 0; width: 95%; margin: 0 auto;}
    .main3_bottom .main3_view{width: 100px; height: 100px; left: 0; top: -8%;}
    .main_pro .swiper-slide{padding-top: 100%; height: auto;}
    .main_pro .swiper-slide a .main_pro_img_wrap{height: 100%;}
    .main_pro .swiper-slide a .main_pro_img_wrap::before{opacity: 1;}
    .main_pro .swiper-slide a .main_pro_txt{opacity: 1;}
    .main3_top_txt h3{font-size: 2.2rem;}
    .main_pro .swiper-slide a .main_pro_txt p{font-size: 1.8rem;}

    /*메인4*/
    .main4_top h3{font-size: 2.2rem;}
    .main4_top p{font-size: 1.8rem; line-height: 1.5;}
    .main_project{margin: 50px 0;}

  /*메인5*/
    .main5_latest{margin-top: 30px;}
    .main5_tab li{font-size: 1.6rem;}

}
@media (max-width: 480px) {  
 
  /*메인비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 2rem;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 1.6rem;}
  .mouse_wrap{display: none;}

   /*공통*/
   .main_tit{font-size: 1.8rem;}

 /*메인2*/
 .main2_list h3{font-size: 1.8rem;}
 .main2_list p{font-size: 1.6rem; }

  /*메인3*/
  .main3_top{margin-bottom: 80px;}
  .main3_top_txt h3{font-size: 1.8rem; margin-top: 10px;}
  .main3_btn div span{font-size: 1.5rem;}
  .main3_bottom .main3_view{width: 80px; height: 80px;}
  .main_pro .swiper-slide a .main_pro_txt p{font-size: 1.6rem;}

 /*메인4*/
 .main4{display: none;}
 .main4_top h3{font-size: 1.8rem;}
 .main4_top p{font-size: 1.6rem;}
 .main_project{ margin: 30px 0;}
  
}
@media (max-width: 450px) {  
 
 
  
}