.index_wrap{width: 100%;}
/*메인공통*/
.main_inner{max-width: 1604px; 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; bottom: 12%; 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: 10rem; 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:2.4rem; 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: 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 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: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_tit{font-family: var(--font-Poppins); font-size: 6rem; font-weight: 600;}


/*메인2*/
.main2{background: url(../img/main2_bg.jpg) no-repeat; width: 100%; height:690px; background-position:bottom right; }
.main2_list{margin: 270px 0; }
.main2_list h2{}
.main2_list .main2_txt{margin: 7rem 0;}
.main2_list .main2_txt p{font-size: 3.2rem; line-height: 1.5; }
.main2_list .main2_txt p b{color: var(--main-color);}
.main2_list .main2_txt h4{font-size: 2rem; color: #808080; margin-top: 2rem;line-height: 1.5; font-weight: 400;}
.main_btn{position: relative; transition: all 0.2s ease;  padding: 12px 18px 12px 20px; display: flex; justify-content: space-between; align-items: center; width: 200px;}
.main_btn::before{content: "";position: absolute;top: 0;left: 0;display: block;border-radius: 50px;background: #e6f2ff;width: 56px;height: 56px; transition: all 0.3s ease; }
.main_btn span{font-size: 1.8rem; position: relative; z-index: 10; font-family: var(--font-Poppins);}
.main_btn .white_arrow{display: none;}
.main_btn img{margin-left: 30px; position: relative; z-index: 10;}
.main_btn:hover::before{width: 100%; background-color: var(--main-color);}
.main_btn:hover .white_arrow{display: inline-block;}
.main_btn:hover .black_arrow{display: none;}
.main_btn:hover span{color: #fff;}



/*메인3*/
.main3{background: url(../img/main3_bg.png) no-repeat; width: 100%; height: 100%; margin: 270px 0; position: relative;}
.main3 .main_tit{font-size: 9rem;}
.main3_list{display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1100px; margin-left: 450px;}
.main3_list li{width:480px; }
/* .main3_list li:nth-child(1), .main3_list li:nth-child(2){margin-bottom: 100px;} */
.main3_list li:nth-child(1), .main3_list li:nth-child(3){margin-top: 160px;}
.main3_list li a{display: block; width: 100%; height: 100%;}
.main3_list li .main3_img{position: relative;}
.main3_list li .main3_img::before{content: ""; background-color: var(--main-color); width: 100%; height: 100%; opacity: 0; display: block; position: absolute; left: 0; top: 0; transition: all .3s;     mix-blend-mode: multiply;}
.main3_list li .main3_img .m3_hover{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7rem; color: #fff; opacity: 0; transition: all .3s;}
.main3_list li .main3_img img{width: 100%;}
.main3_list li .main3_img span{transform: rotate(-90deg); position: absolute;  font-size:3.2rem; font-weight: 600; top: 80px;}
.main3_list li .pro1 span{left: -76px; }
.main3_list li .pro2 span{left: -69px; }
.main3_list li .pro3 span{left: -77px; }
.main3_list li .pro4 span{left: -104px; top: 110px;}

.main3_list li p{font-size: 2.4rem; margin-top: 20px;}
.main3_list li h3{font-size: 3.6rem;}
.main3_list li:hover  .main3_img::before{opacity: 1;}
.main3_list li:hover  .m3_hover{opacity: 1;}
.main3_list li:hover p span{border-bottom: 1px solid #111;}
.main3_list li:hover h3 span{border-bottom: 3px solid #111;}

.section-title{ margin: 0;
  font-size: 200px;width: 100%;text-align: center;position: absolute;top: 50%;right: -30%;transform: translateY(-50%);z-index: -1;white-space: nowrap;}
.paralax-title{font-family: var(--font-Poppins); font-size: 20rem; color: #0981fd; opacity: 0.05; font-weight: 600; line-height: 1;}


/*메인4*/
.main4{background: url(../img/main4_bg.jpg) no-repeat; width: 100%; height:970px; background-size: cover;}
.main4 .main_inner{height: 100%;}
.main4 .main4_wrap{display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center;}
.main4 .main4_wrap .main_tit{color: #fff;}
.main4 .main4_wrap .main4_txt{font-size: 3.2rem; margin: 50px 0; text-align: center; color: #fff; line-height: 1.5;}
.main4 .main4_wrap .main4_txt b{display: block;}
.main_btn2 {margin: 0 auto;}
.main_btn2 span{color: #fff;}
.main_btn2 .black_arrow{display: none;}
.main_btn2 .white_arrow{display: inline-block;}
.main_btn2:hover .white_arrow{display: inline-block;}
.main_btn2::before{background: rgba(9, 129,253,0.1);}
.main_btn2:hover::before{background-color: var(--main-color);}



/*메인5*/
.main5{margin: 200px 0; position: relative;}
.main5 .section-title{top: inherit; top: 100%;right: -80%; }
.main5 .section-title .paralax-title{color: transparent;    -webkit-text-stroke: 1px #0981fd; opacity: 0.2; font-size: 15rem;}
.main5_list{display: flex; justify-content: space-between;}
.main5_list li{width: calc(100% / 2 - 70px); position: relative;}
.main5_list li h3{font-family: var(--font-Gowun); font-size: 3.6rem; transform: rotate(90deg); position: absolute; top: 250px; right: -43%; color: #e3ecf5; font-weight: 500;}
.main5_list li .main5_txt{margin: 70px 0;font-size: 3.2rem; }
.main5_list li .main5_txt span{color: var(--main-color); font-weight: 600;}
.main5_list li:nth-child(2){padding-top: 80px;}


/*메인6*/
.main6{margin: 200px 0; position: relative;}
.main6_top{display: flex; justify-content: space-between; margin: 50px 0 30px;}
.main6_top h3{font-size: 3.2rem; font-weight: 500;}

/*메인7*/
.main7{background: url(../img/main7_bg3.png) no-repeat; width: 100%; height: 608px; text-align: center; max-width: 1920px; margin: 0 auto; background-size: cover;}
.main7 .main_tit{color: #fff; padding-top: 100px;}
.main7 p{font-size: 3.2rem; margin: 50px 0; color: #fff;}
.main7 .main_btn2::before{background-color: rgba(255,255,255,0.2);}
.main7 .main_btn2:hover::before{background-color:#ec6c02;}




 /*******************************반응형*************************************/
 @media (max-width: 1770px) {  
  
   /*메인5*/
  .main5_list li >div img{width: 100%;}
    
 }
 @media (max-width: 1580px) {  
  /*공통*/
  .main_inner{width: 90%;}

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

   /*메인3*/
   .main3_list{margin-left: 300px;}

   /*메인5*/
   .main5_list li h3{font-size: 3rem; top: 205px; right: -45%;}


}

@media (max-width: 1380px) {
  /*공통*/  
  .main_tit{font-size: 5rem;}
   /*메인비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 8rem;}
   
  /*메인2*/
  .main2{height: auto; padding: 50px 0;}
  .main2_list .main2_txt p{font-size: 2.8rem;}
  .main2_list{margin: 230px 0;}

 /*메인3*/
 .main3{background-position: 50% -20%; margin: 230px 0;}
   .main3_list{margin-left: 200px;}
   .main3 .main_tit{font-size: 7rem;}
   .main3_list li{width:calc(100% / 2 - 50px); }
   .main3_list li .main3_img span{font-size: 2.8rem;}
   .main3_list li .pro1 span{left: -67px;}
   .main3_list li .pro2 span{left: -60px;}
   .main3_list li .pro3 span{left: -67px;}
   .main3_list li .pro4 span{left: -90px;}
   .main3_list li h3{font-size: 2.8rem;}
   .paralax-title{font-size: 15rem;}

  /*메인5*/
  .main5_list li{width:calc(100% / 2 - 50px) ;}
  .main5_list li .main5_txt{font-size: 2.8rem;}

   /*메인7*/
   .main7 p{font-size: 3rem;}

}

@media (max-width: 1280px) {  
   /*공통*/  
  .main_tit{font-size: 4.2rem;}
   
  /*메인2*/
  .main2_list .main2_txt p{font-size: 2.5rem;}

   /*메인3*/
   .main3 .main_tit{font-size: 6rem;}
   .main3_list{margin-left: 100px;}
   .main3_list li h3{font-size: 2.6rem;}

   /*메인4*/
   .main4 .main4_wrap .main4_txt{font-size: 3rem;}

  /*메인5*/
  .main5_list li h3{font-size: 2.5rem; top: 178px; right: -40%;}
  .main5 .section-title .paralax-title{font-size: 10rem;}
  /*메인6*/
  .main6_top h3{font-size: 2.8rem;}


}
@media (max-width: 1080px) {  
    /*공통*/  
  .main_tit{font-size: 3.8rem;}
  /*메인비주얼*/
  .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;}
  .section1 .mySwiper .swiper-slide .slide_bg{background-position: center;}

   /*메인3*/
   .main3 .main_tit{font-size: 5rem;}
   .main3_list{margin-left: 0;}
   .main3_list li p{font-size: 2.2rem;}
   .main3_list li h3{font-size: 2.4rem;}

    /*메인4*/
    .main4{height: auto; padding: 150px 0;}

    /*메인5*/
    .main5_list li{width: calc(100% / 2 - 30px);}
    .main5_list li h3{font-size: 2rem; top: 137px; right: -37%;}
    .main5_list li .main5_txt{margin: 50px 0; font-size: 2.4rem;}
    .main5 .section-title .paralax-title{font-size: 8rem;}

  /*메인6*/
  .main6_top{margin: 30px 0;}
  .main6_top h3{font-size: 2.4rem;}

  /*메인7*/
  .main7{background: none; background-color: #0981fd; height: auto; padding: 100px 0;}
  .main7 .main_tit{padding-top: 0;}
  .main7 p{font-size: 2.6rem;}



}
@media (max-width: 800px) {  
  /*공통*/  
  .main_tit{font-size: 3.2rem;}
  /*메인2*/
  .main2{background-position: 30% 50%;}
  .main2_list .main2_txt p{font-size: 2.2rem;}
  .main2_list .main2_txt h4{font-size: 1.8rem;}
  .main2_list .main2_txt h4 br{display: none;}
  .main_btn{width: 250px;}
  .main2_list .main2_txt{margin: 5rem 0;}
  .main2_list{margin: 100px 0;}
  
   /*메인3*/
   .main3{margin: 150px 0;}
   .paralax-title{font-size: 10rem;}
   .main3 .main_tit{font-size: 4rem;}
   .main3_list li{width:calc(100% / 2 - 30px) ;}
   .main3_list li .main3_img span{font-size: 2.2rem; top: 60px;}
   .main3_list li .pro1 span{left: -53px;}
   .main3_list li .pro2 span{left: -48px;}
   .main3_list li .pro3 span{left: -53px;}
   .main3_list li .pro4 span{left: -72px; top: 80px;}
   .main3_list li h3{font-size: 2.2rem;}

  /*메인4*/
  .main4 .main4_wrap .main4_txt{font-size: 2.5rem;}

  /*메인5*/
  .main5{margin: 150px 0;}
  .main5_list{flex-direction: column;}
  .main5_list li{width: 80%; margin: 0 auto;}
  .main5_list li:nth-child(1){order: 2; }
  .main5_list li:nth-child(2){padding-top: 0; margin-bottom: 50px;}
  .main5_list li .main5_txt{margin: 30px 0;}
  .main5_list li .main5_txt br{display: none;}

  /*메인6*/
  .main6{margin: 150px 0;}
  .main6_top{align-items: center;}

  /*메인7*/
  .main7 p{font-size: 2.2rem;}
  
}
@media (max-width: 650px) {  
  /*공통*/  
  .main_tit{font-size: 3rem;}
    /*메인비주얼*/
  .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;}
  .main_v_auto{left: 30px;}

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

   /*메인3*/
   .main3 .main_tit{font-size: 3rem;}
   .main3_list li p{font-size: 2rem;}
   .main3_list li h3{font-size: 2rem;}
   .main3_list li .main3_img .m3_hover{font-size: 5rem;}

  /*메인4*/
  .main4{padding: 100px 0;}
  .main4 .main4_wrap .main4_txt{font-size: 2.2rem;}

  /*메인5*/
  .main5_list li{width: 100%; }
  .main5_list li .main5_txt{font-size: 2.2rem;}
  .main5_list li h3{display: none;}

  /*메인6*/
  .main6{margin: 100px 0;}
  .main6_top{align-items: start; flex-direction: column;}
  .main6_top h3{font-size: 2.2rem; margin-bottom: 20px;}
  /*메인7*/
  .main7 p{font-size: 2rem;}
}
@media (max-width: 480px) {  
  /*공통*/  
    .main_tit{font-size: 2.4rem;}
    .main_btn span{font-size: 1.6rem;}
    /*메인비주얼*/
    .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;}
    .section1 .mySwiper .swiper-slide .slide_bg{background-position: 80% 50%;}

   /*메인2*/
   .main2_list .main2_txt p{font-size: 1.8rem;}
   .main2_list .main2_txt h4{font-size: 1.6rem;}
   .main2_list .main2_txt{margin: 3rem 0;}

    /*메인3*/
    .main3{background: none; margin: 100px 0;}
    .main3 .main_tit{font-size: 2.4rem;}
    .main3_list{flex-direction: column; margin-top: 50px;}
    .main3_list li:nth-child(1), .main3_list li:nth-child(3){margin-top: 0;}
    .main3_list li{width: 100%; margin: 20px 0;}
    .main3_list li p{font-size: 1.8rem;}
    .main3_list li h3{font-size: 1.8rem;}
    .section-title{display: none;}
    .main3_list li .main3_img span{font-size: 1.8rem;}
    .main3_list li .pro1 span{left: -43px;}
    .main3_list li .pro2 span{left: -39px;}
    .main3_list li .pro3 span{left: -43px;}
    .main3_list li .pro4 span{left: -58px; top: 70px;}

    /*메인4*/
    .main4 .main4_wrap .main4_txt{font-size: 2rem;}
  /*메인5*/
    .main5_list li .main5_txt{font-size: 1.8rem;}

      /*메인7*/
  .main7 p{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; }
 .section1 .mySwiper .swiper-slide .slide_bg{background-position: 75% 50%;}
  
  /*메인4*/
  .main4 .main4_wrap .main4_txt{font-size:1.8rem;}

   /*메인5*/
   .main5_list li .main5_txt{font-size: 1.6rem;}

}