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


.main_tit.s_event{opacity: 0; filter:Alpha(opacity=0);  transition: 0.8s; transform: translateY(50%);}
.main_tit.s_event.move{opacity: 1; filter:Alpha(opacity=1);  transition: 0.8s; transition-delay: 0.1s;  transform: translateY(0%);}

.main_move.s_event{opacity: 0; filter:Alpha(opacity=0); transform: translateY(50%); transition: 0.8s; }
.main_move.s_event.move{opacity: 1; filter:Alpha(opacity=1); transform: translateY(0%); transition: 0.8s; transition-delay: 0.12s;}

/*============* MAIN VISUAL ============*/
.section1 .mySwiper {border-radius: 20px;}
.section1 .mySwiper .swiper-slide .slide_bg { height: 560px; 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: 72px; padding-bottom: 2.6rem; line-height: 1;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size:24px;  line-height: 1.5;} 

/* main */
.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); } 
 

@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 { atransition: 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: 20%; left: 4%; width: 8.5%;  align-items: center;  flex-direction: row; z-index: 55;  } 
    .control_wrap>div{border: 1px solid #fff; border-radius: 50%;padding: 29px;}
    .control_wrap .swiper-button-next::after{font-size: 2rem; color: #fff;}
    .control_wrap .swiper-button-prev::after{font-size: 2rem; color: #fff;}


  /* 정지재생 */
  .slide_btn { cursor: pointer; z-index: 100; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} 
  .slide_btn span { display: none;  } 
  .slide_btn span.on { display: inline-block; } 
  .slide_btn i { color: #fff; font-size:18px; font-weight: 100; } 
 /*시간*/
  .autoplay-progress {z-index: 10;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 14px;position: relative; border: 2px solid #fff;    border-color: rgba(255, 255, 255, 0.2); border-radius: 50%;}
 .autoplay-progress svg { --progress: 0;z-index: 10;width: 100%;height: 100%;stroke-width: 2px;stroke: #fff;fill: none;stroke-dashoffset: calc(125.6px * (1 - var(--progress)));stroke-dasharray: 125.6;transform: rotate(-90deg);}
 
 .autoplay-progress .main_v_navi{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 140px;}
 .autoplay-progress .main_v_navi .swiper-button-next:after{font-size: 1.8rem; color: #fff;}
 .autoplay-progress .main_v_navi .swiper-button-prev:after{font-size: 1.8rem; color: #fff;}

 /* mouse */
    /* mouse wheel */
    .mouse_wrap { position: absolute; bottom: 80px; right: 100px; z-index: 99;  } 
    .mouse_wrap span { display:block; color:#fff; z-index:999; font-weight:400;  font-size:12px;transform: translateX(-30px); margin-bottom: 20px;} 
    .mouse_wheel { display:block; color:#fff; transform:rotate(90deg); } 
    .mouse_wheel:before { content:''; width:90px; height:1px; background:rgba(255,255,255,0.3); position:absolute; right: -42px; } 
    .mouse_wheel:after { content:''; width:35px; height:2px; background:#fff; position:absolute; right: -60px; top: 0; animation: scrollDown 2s linear infinite; } 

    @keyframes scrollDown { 0%,100% { right:20px; } 
    50% { right:-45px; } 
    }
 
/*공통*/
.main_tit{font-size: 6rem;}



/*메인2*/
.main2{position: relative;}
.main2 .main_inner{padding-top:110px ;}
.main2::before{content: ""; width: 100%; height: 962px; background: url(../img/main2_bg.jpg) no-repeat; background-size: cover; position: absolute; left: 0; top: 0; z-index: -1;}
.main2_tit{font-size: 4.8rem; text-align: center; position: relative;}
.main2_tit::after{content: ""; width: 1px; height: 100px; background-color: #111; position: absolute; left: 50%; bottom: -150px; transform: translateX(-50%);}
.main2_txt{margin: 200px 0 70px;}
.main2_txt p{ text-align: center; font-size: 2rem; line-height: 1.8;}
.main2_btn{display: flex; justify-content: center; align-items: center; width: 100px;height: 100px;margin: 0 auto; background-image: linear-gradient(450deg, #fc9d4b, #f25e2c); position: relative; border-radius: 50%;}
.main2_btn i{font-size: 4rem; color: #fff;    transition: all .5s;}
.main2_btn .main2_btn_wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main2_btn .main2_btn_bg{ position: relative;display: flex; align-items: center;justify-content: center;}
.main2_btn_bg::before, .main2_btn_bg::after {position: absolute;content: "";height: 8em; width: 8em;border: 1em solid var(--main-color);border-radius: 50%;animation: main2_btn_bg 2s linear infinite;}
.main2_btn_bg::after {opacity: 0;animation-delay: 1s;}
@keyframes main2_btn_bg {
        0% {
          border: 1px solid var(--main-color);
          transform: scale(1);
          opacity: 1;
        }
      
        100% {
          border: 0 solid var(--main-color);
          transform: scale(1.5);
          opacity: 0;
        }
}
.main2_btn:hover i{transform: rotate(360deg);}


/*메인3*/
.main3{background: url(../img/main3_bg.jpg) no-repeat; width: 100%;height: 100%;background-size: cover; margin-top: 200px ; background-position: center;}
.main3 .main_inner{padding-bottom:60px ;}
.main3_top{background-image: linear-gradient(450deg, #f67e3b, #f2612d); position: relative; padding:100px 70px; color: #fff; overflow: hidden; width: 720px; height: 470px; border-radius: 20px; transform: translateY(-70px);}
.main3_top::before{content: ""; background: url(../img/main3_top_bg.png) no-repeat; width: 500px;height: 500px; position: absolute; right: -15px; bottom: -70px;}
.main3_top >span{font-size: 2.4rem;color: #fff; margin-bottom: 15px; display: block;}
.main3_top h2{}
.main3_top a{ display: flex; align-items: center; margin-top: 100px; }
.main3_top a span{font-size: 1.8rem; color: #fff}
.main3_top a i{color: #fff;font-size: 3rem;margin-left: 10px; transition: all .3s;}
.main3_top a:hover i{margin-left: 20px;}
.main3_bot{text-align: right;  color: #fff;}
.main3_bot p{font-size: 3.6rem; line-height: 1.5;}


/*메인4*/
.main4{  position: relative; padding: 135px 0;}
.main4::before{content: ""; background: url(../img/main4_bg.jpg) no-repeat; width: 960px; height: 680px; position: absolute; top: 0; left: 0; z-index: -1;}
.main4_list{display: flex;justify-content: space-between; align-items: center;}
.main4_list li{}
.main4_list .main4_left{ padding-left: 150px; width: 30%;}
.main4_list .main4_left span{ font-size: 2.4rem;}
.main4_list .main4_left h2{margin: 20px 0 40px;}
.main4_list .main4_left p{font-size: 1.8rem; line-height: 1.5;}
.main4_list .main4_left .main4_btn{display: flex; width: 185px; height: 55px;  background-image: linear-gradient(450deg, #f88a41, #f15c2b); padding: 0 20px; justify-content: space-between; align-items: center; border-radius: 27px; margin-top: 40px; }
.main4_list .main4_left .main4_btn span{color: #fff; font-size: 1.8rem;}
.main4_list .main4_left .main4_btn i{color: #fff; font-size: 2.5rem; transition: all .3s;}
.main4_list .main4_left .main4_btn:hover i{transform: translateX(10px);}
.main4_right{width: 61%;}
.main4_right .certificate{ }
.main4_right .certificate .cert_img{border: 1px solid #e5e5e5; background-color: #fff; width: 28%; text-align: center; padding: 20px 35px;}
.main4_right .certificate .cert_img img{border: 1px solid #e5e5e5; width: 100%;}



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

@media(max-width: 1770px ){
  .main_inner{width: 95%;}
  /*비주얼*/
  .index_wrap{width: 95%;}
  .control_wrap{width: 9%; left: 2%;}

  /*메인4*/
  .main4::before{width: 50%; height: 100%;}


}
@media(max-width: 1540px ){
  /*비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap{width: 95%;}
  .control_wrap{width: 11%;}

  /*메인2*/
  .main2::before{height: 895px;}


}
@media(max-width: 1380px ){
    /*비주얼*/
    .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 6rem;}
    .control_wrap{width: 12%;}
    
    /*공통*/
    .main_tit{font-size: 5rem;}

   /*메인2*/
    .main2_tit{font-size: 4rem;}

    /*메인4*/
    .main4_list .main4_left{padding-left: 100px;}

    


}
@media(max-width: 1280px ){
   /*비주얼*/
   .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 5rem;}
   .control_wrap{width: 160px;}

   /*메인2*/
   .main2_tit{font-size: 3.5rem;}

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

  /*메인4*/
  .main4_right .certificate .cert_img{width: 35%;}

  

}
@media(max-width: 1080px ){
     /*비주얼*/
     .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.2rem;}
     .main_tit{font-size: 4rem;}

   /*메인2*/
   .main2_tit{font-size: 3rem;}
   .main2_txt p{font-size: 1.8rem;}
   .main2::before{height: 860px;}

     /*메인4*/
     .main4::before{background-position: right; background-size: cover;}
     .main4_list .main4_left span{font-size: 2.2rem;}
     .main4_list .main4_left{padding-left: 50px;}


}
@media(max-width: 800px ){
   /*비주얼*/
   .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 3.5rem;}
   .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 2rem;}
   .main_tit{font-size: 3rem;}


    /*메인2*/
   .main2_tit{font-size: 2.8rem;}
   .main2_tit::after{height: 50px; bottom: -70px;}
   .main2_txt{margin: 100px 0 70px;}
   .main2::before{height: 760px;}

    /*메인3*/
    .main3_top{width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; padding: 50px 0;}
    .main3_bot p{font-size: 2.5rem;}
    .main3_bot{text-align: center;}
    .main3_bot p br{display: none;}
    .main3_top >span{font-size: 2rem;}

    /*메인4*/
    .main4_list{flex-direction: column; width: 95%; margin: 0 auto;}
    .main4_list .main4_left{padding-left: 0; width: 100%; text-align: center; margin-bottom: 50px;}
    .main4_right{width: 100%;}
    .main4_list .main4_left .main4_btn{margin: 40px auto 0; width: 50%;}


}
@media(max-width: 650px ){
/*비주얼*/
.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_tit{font-size: 2.5rem;}
.index_wrap{padding-top: 70px;}


  /*메인2*/
  .main2_tit{font-size: 2.4rem;}
  .main2_txt p{font-size: 1.6rem;}
  .main2_txt p br{display: none;}
  .main2::before{height: 725px;}

  /*메인3*/
  .main3_top >span{font-size: 1.8rem;}
  .main3_bot p{font-size: 2rem;}

  /*메인4*/
  .main4_list .main4_left span{font-size: 2rem;}
  .main4_list .main4_left h2{margin: 20px 0;}
  .main4_right .certificate .cert_img{width: 48%;}


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

  /*비주얼*/
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1{font-size: 2.8rem;}
  .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p{font-size: 1.6rem;}

    /*메인3*/
  .main3_top a span{font-size: 1.6rem;}
    .main3_top a i{font-size: 2.5rem;}

    /*메인4*/
  .main4_right .certificate .cert_img{width: 100%;}
  .main4_list .main4_left .main4_btn{width: 80%;}


}