/*공통*/
.mb{margin-bottom: var(--mb) !important;}
.bmb{margin-bottom: var(--bmb) !important;}
.mb20{margin-bottom:20px;}

.pdinner{max-width: var(--container); margin: 0 auto; padding-left:2rem; padding-right: 2rem;}
.inner{max-width: var(--container); margin: 0 auto;}
.mEnter{display: block;}

@media all and (min-width:768px) {  
  .mEnter{display: inline;}
  .tEnter{display: block;}
}
@media all and (min-width:1200px) {  
 
  .tEnter{display: inline;}
  .pEnter{display: block;}
}



#main{position: relative; overflow:hidden; border-radius: 0 0 50px 0;}
#section1{overflow: hidden;}
.msec1{position: relative;}
.msec1 .swiper-slide{overflow:hidden;}
.msec1 .swiper-slide .slogan{position:absolute; z-index:10; top:40%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); }
.msec1 .swiper-slide .slogan p{color:#fff; position: relative; text-shadow: 0 0 0.5rem rgba(0,0,0,0.1);}
.msec1 .swiper-slide .slogan .text1{top:0; opacity:0; font-size:0.9em; font-family: var(--font-eng2); transition:0.5s 0.5s; font-family: var(--font-eng2); margin-bottom: 10px;}
.msec1 .swiper-slide .slogan .text2{top:10px;opacity:0; font-size: 3em; filter: blur(10px);  transition:0.5s 0.8s ; font-family: var(--font-eng); text-transform: uppercase; font-weight: 800; margin-bottom: 5px;}
.msec1 .swiper-slide .slogan .text2 span:first-child img{display: block; height: 45px;}
.msec1 .swiper-slide .slogan .text2 span:first-child img.pc{display: none;}
.msec1 .swiper-slide .slogan .text2 span:first-child{font-family: var(--font-line); -webkit-text-fill-color:transparent;
  -webkit-text-stroke-width:1.5px;}
.msec1 .swiper-slide .slogan .text3{top:10px;opacity:0; font-size: 1.05em; filter: blur(10px); transition:0.5s 1.1s;}


.msec1 .swiper-slide .bg{transform:scale(1.1);transition:3s; height:100vh; position: relative;}
.msec1 .swiper-slide .bg::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.1); position: absolute; top: 0; left: 0;}
.msec1 .swiper-slide .bg img{width:100%; height: 100%; object-fit: cover;}

.msec1 .swiper-slide-active .bg{transform:scale(1)}
.msec1 .swiper-slide-active .slogan .text1{top:0;opacity:1; letter-spacing:normal;}
.msec1 .swiper-slide-active .slogan .text2{top:0;opacity:1; filter:blur(0)}
.msec1 .swiper-slide-active .slogan .text3{top:0;opacity:1; filter:blur(0)}


@media all and (min-width:768px) {
.msec1 .swiper-slide .slogan .text1{font-size: 1em;}
.msec1 .swiper-slide .slogan .text2{font-size: 4em; display: flex; justify-content: space-between; align-items: center;}
.msec1 .swiper-slide .slogan .text2 span:first-child img{ height: 60px;}
.msec1 .swiper-slide .slogan .text3{font-size: 1.2em;}


}


@media all and (min-width:1200px) {
   #main{border-radius: 0 0 100px 0;}
  .msec1 .swiper-slide .slogan .text1{font-size: 1.2em;}
  .msec1 .swiper-slide .slogan .text2{font-size: 6em; display: flex; justify-content: space-between; align-items: center;}
  .msec1 .swiper-slide .slogan .text2 span:first-child img{ height: 95px;}
  .msec1 .swiper-slide .slogan .text2 span:first-child img.mo{display: none;}
  .msec1 .swiper-slide .slogan .text2 span:first-child img.pc{display: block;}
  .msec1 .swiper-slide .slogan .text3{font-size: 1.4em;}
  }
  



/*swiper*/
.msec1 .swiper-button-prev,
.msec1 .swiper-button-next{width: 5rem; height: 5rem; color:#fff; background: none; bottom:10rem; top:auto; font-size: 5rem; display: flex; justify-content: center; align-items: center;}

.msec1 .swiper-button-prev{left:auto; left: calc(80% - 5rem); }
.msec1 .swiper-button-next{left:auto;  left: 80%; right:0}
.msec1 .swiper-pagination{max-width:var(--container); font-weight: bold; padding:0 2rem; color:#fff; text-align: left; position: absolute; left: 50%; transform: translate(-50%);  bottom: 10rem;}

.msec1 .swiper-progress-bar {position:  absolute; left: 50%; transform: translate(-50%);; width:100%; max-width: var(--container); display: block; z-index: 1; height:.5rem; }
.msec1 .swiper-progress-bar .slide_progress-bar {position: absolute; height: .3rem; background:#fff; width:50rem; clear: both; opacity:1; bottom: 15rem; left: 50%; transform: translateX(-50%); right: 0; }
.msec1 .swiper-progress-bar .slide_progress-bar:after {position: absolute; top: 0; left: 0; background:var(--sub_color); height: 100%; width: 0; content: ""; transition: 0.1s width linear;}
.msec1 .swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
.msec1 .swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear;transition-delay: unset; width: 100%; transition-duration: 5s;}


/* pagenation */

/*.msec1 .swiper-pagination-bullet{opacity: 0.5; width: 15px; height: 15px; background: #fff; box-shadow: 0px 0px 3px #fff; }
.msec1 .swiper-pagination-bullet-active{background:#fff; opacity: 1;}
*/


.msec1 .swiper-pagination-bullet {
    background: transparent; width: 4rem; height: 4rem;
  }
  .msec1 .swiper-pagination-bullet-active .path {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    -webkit-animation: dash linear 120s;
            animation: dash linear 120s;
    -webkit-animation-iteration-count: unset;
            animation-iteration-count: unset;
  }
  .path {
    display: none;
  }
  @-webkit-keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }



/*section*/ 
.main_tit{font-size: 2em; font-weight: 800; font-family: var(--font-eng); color: var(--main_color); text-transform: uppercase; font-size:var(--commTit); text-align: center;}
.main_tit span.gr{color: var(--gr_color);}

.btn_comm a{display: inline-flex; align-items: center; padding: 2rem 4rem; background: var(--main_color); border-radius: 20px 0; transition: .5s; color: #fff; font-weight: 600; font-size: 0.9em; -webkit-box-shadow: 0px 10px 20px 10px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 10px 20px 10px rgba(0,0,0,0.3);
  box-shadow: 0px 10px 20px 10px rgba(0,0,0,0.3); transition:0.3s}
.btn_comm a:hover{transform:translateY(-10px);}
  
.btn_comm a img{margin-left: 2rem; height: 7px;}

.main_info{position: relative; color: #fff;}
.main_info:before{content:''; width: 100%; height: 30%; position: absolute; left: 0; top: 0; right: 0;}
.main_info h3{font-family: var(--font-eng2); margin-bottom: 20px; position: relative;}
.main_info dl {position: relative;}
.main_info dl dt{font-weight: 700; font-family: var(--font-eng); font-size: 1.6em; margin-bottom:10px;}
.main_info dl dt span{font-weight: 400;}
.main_info dl dd{ margin-bottom:var(--mb);}

.com_section{ padding: var(--bmb) 0;}

@media all and (min-width:1200px) {
.main_info dl dt{font-size: 2.3em; letter-spacing: -0.02em;}
}

/* 비지니스 안내 */


.main_business{position: relative;  align-items: center;}
.main_business h2{position: relative; font-size: var(--commTitb) !important; letter-spacing: 0.08em; }


.business_slide{position: relative; overflow: hidden; border-radius: 50px 0 0;}


.business_slide .btn_comm{position: absolute; left: var(--fmg); bottom: var(--fmg);}


.business_slide .swiper-pagination{display: none;}
.business_slide .swiper-slide{ position: relative; background-size: cover; min-height: 550px; padding: var(--fmg); background-size: cover !important;}
.business_slide .swiper-slide.business01{ background:url(../images/main/business01.jpg) no-repeat center center; }
.business_slide .swiper-slide.business02{ background:url(../images/main/business02.jpg) no-repeat center center; }
.business_slide .swiper-slide.business03{ background:url(../images/main/business03.jpg) no-repeat center center; }
.business_slide .swiper-slide.business04{ background:url(../images/main/business04.jpg) no-repeat center center; }
.business_slide .swiper-slide:before{content:''; width: 100%; height: 50%; position: absolute; left: 0; top: 0; right: 0; background:linear-gradient(180deg, rgba(23,33,71,.8) 0%, rgba(23,33,71,.0) 100%);}


@media all and (min-width:768px) {

.business_slide .swiper-slide{padding: 50px;}

.business_slide .swiper-pagination{display: flex; position: relative; bottom: 0; flex-wrap: wrap;}
.business_slide .swiper-pagination-bullet{width: 25%; height: auto; border-radius: 0; opacity: 1; margin: 0 !important; color: #fff; padding: 20px; text-align: left; font-weight: 600;}
.business_slide .swiper-pagination-bullet:nth-child(1){background: var(--main_color);}
.business_slide .swiper-pagination-bullet:nth-child(2){background: var(--gr_color3);}
.business_slide .swiper-pagination-bullet:nth-child(3){background: var(--gr_color2);}
.business_slide .swiper-pagination-bullet:nth-child(4){background: var(--gr_color);}
.business_slide .swiper-pagination-bullet i{border-bottom: 1px solid #fff; margin-bottom: 10px; display: inline-block;}
.business_slide .swiper-pagination-bullet span{display: block;}
.business_slide .swiper-pagination-bullet i,
.business_slide .swiper-pagination-bullet span{opacity: 0.6;}
.business_slide .swiper-pagination-bullet-active{opacity: 1;}
.business_slide .swiper-pagination-bullet-active i,
.business_slide .swiper-pagination-bullet-active span{opacity: 1;}

.business_slide .info dl dt{font-size: 2em;}

}

@media all and (min-width:1200px) {

.business_slide{display: flex;}
.business_slide .info{width: 50%;}
.business_slide .main_info{width: 50%;}
.business_slide .swiper-slide{height: 600px;}
.business_slide .swiper-wrapper{width: 60%;}
.business_slide .swiper-pagination{width: 40%;}
.business_slide .swiper-pagination-bullet{width: 50%; padding: 30px;}
.business_slide .swiper-pagination-bullet span{font-size: 1.1em;}
.main_business .main_tit{text-align: left;}
}






  /* 바로가기 */
.main_quick{background: url(../images/main/section03.jpg) no-repeat center; border-radius: 50px 0 0; overflow: hidden;  }
.main_quick .main_info{margin-bottom: 50px;}

.quick_box ul{display: flex; flex-wrap: wrap;}
.quick_box ul li a{padding: 20px; display: block; position: relative; color: #fff; border-radius: 0 0 20px 0; font-weight: 600; height: 100%; display: flex; justify-content: space-between;}
.quick_box ul li a:after{display: block; font-size: 2em; margin-top: 10px;}
.quick_box ul li:nth-child(1) a:after{font-family: var(--icon); content:'\e532'}
.quick_box ul li:nth-child(2) a:after{font-family: var(--icon); content:'\eb04'}
.quick_box ul li:nth-child(3) a:after{font-family: var(--icon); content:'\ea7d'}
.quick_box ul li{width: 100%; margin-bottom: 20px;}

.quick_box ul li:nth-child(1) a{background: var(--main_color);}
.quick_box ul li:nth-child(2) a{background: var(--gr_color3);}
.quick_box ul li:nth-child(3) a{background: var(--gr_color);}


@media all and (min-width:768px) {
.main_quick .pdinner{display: flex; justify-content: space-between;}
.main_quick .main_info{width: 50%; }
.main_quick .quick_box{width: 40%; }
}

@media all and (min-width:1200px) {
.main_quick .quick_box{width: 60%; }
.quick_box ul {gap: 2%; padding-top: 200px; position: relative;}
.quick_box ul:before{content:''; position: absolute; right: 0; top: 0; width: 750px; height:150px; background: url(../images/main/kh_txt.png) no-repeat center center; background-size: 100% !important;}
.quick_box ul li{width: 32%;}
.quick_box ul li:nth-child(2){transform:translateY(20px);}
.quick_box ul li a{padding: 30px 30px 150px; font-size: 1.1em; transition: .2s;}
.quick_box ul li a:hover{transform:translateY(-20px); box-shadow: 5px 15px 20px 0px rgba(0,0,0,0.3); transition: .2s;}
.quick_box ul li:nth-child(2)a:hover{transform:translateY(0px);}
.quick_box ul li a:after{position:absolute; right: 30px; bottom: 30px;}
}

@keyframes rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0); }
}

  /* 메인 하단 */
  .main_bottom{position: relative;}
  .main_bottom .title_h2{font-weight: 900; font-size: 6rem; margin-bottom: 3rem;}

  .botttom_wrap{display: flex; gap:4rem}

  .main_board{display: flex; gap:4rem; width: 50%;  transition: .5s; }
  .main_board li{flex:1; position: relative;}
  .main_board li a{display: block; border: 1px solid #ccc;  height: 21.3rem;  padding: 3rem; transition: .5s; }
  .main_board li dl dt{font-weight: bold; font-size: 2rem;}
  .main_board li dl dd{position: absolute; left: 3rem; bottom: 3rem; font-size: 1.6rem; font-weight: bold; color:#666}
  .main_board span{opacity: 0; position: absolute; bottom: 3rem; right: 3rem;}

  .main_board li a:hover{border-top: 3px solid #000;}
  .main_board li a:hover span{opacity: 1;}

  .main_banner{display: flex; gap: 4rem; width: 50%;}
  .main_banner li{flex:1;  position: relative; font-size: 2rem;}
  .main_banner li a{display: block; height: 21.3rem; padding:3rem; background: var(--sub_color); color:#fff; transition: .5s;}
  .main_banner li p{position: absolute; top: 3rem; right: 3rem;}
  .main_banner li span{position: absolute; bottom: 3rem; right: 3rem;}
  .main_banner li:last-child a{background: #6C7E85;}
  .main_banner li a:hover{background: var(--main_color);}

  /* 구글맵 */
  .bottom_map{position: relative; }
  .map_tabbutton{position: absolute; top: 5rem; left: 50%; transform: translateX(-50%); display: flex; gap:2rem}
  .map_tabbutton button{border: 1px solid #ccc; padding: 2rem 7rem; text-align: center; background:rgba(255,255,255,0.5);}

  
   .map_tabbutton button:hover,  
   .map_tabbutton button.active {
         background-color: var(--sub_color);
         color:#fff;
         border-color:transparent
  }