@charset "utf-8";

.pc-only {
      display: block;
}

.m-only {
      display: none;
}

@media screen and (max-width: 1024px) {
      .pc-only {
            display: none;
      }

      .m-only {
            display: block;
      }
}

/* Intro */

.main_skip_wrap { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9999999980; display: none; }
.main_skip_bt { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; }
.main_skip_bt p { display: none; }



.main_wrap { width: 100%; height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: #000; }
.main_wrap::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #000; opacity: 0; z-index: 11; transition: 1.2s; }

.main_box { width: 100%; height: 100vh; position: relative; }
.main_box::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 6; background: url('../img/main/main_bg.png') center no-repeat; background-size: cover; opacity: 0; }


.main_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4; background: url('../img/main/mainVisual.jpg') right top no-repeat; background-size: cover; opacity: 1; transition: all, 1.0s 0s, background 13s 0s; }
.main_img::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #000; opacity: 0; transition: 0.8s 0s; }

.main_txt_box { width: 41%; height: 100%; position: absolute; z-index: 10; display: flex; justify-content: center; align-items: center; text-align: left; }
.main_txt_box>div { transform: translateY(-7.5rem); }
.main_txt_box h2 { font-size: 2.2rem; line-height: 140%; color: #207463; opacity: 0; transform: translateY(-3rem); transition: 0.8s 0s; }
.main_txt_box h2 span {  serif; font-size: 2.5rem; color: #163a36; font-weight: 700; transform: translateY(0.125rem); display: inline-block; }
.main_txt_box p { font-size: 1.3rem; line-height: 166%; margin-top: 1.625rem; font-weight: 500; opacity: 0; transform: translateY(3rem); transition: 0.8s 0s; }

.main_txt { position: absolute; right: 6.25rem; bottom: 4rem; z-index: 9; color: #fff; text-align: left; font-family: 'antro'; opacity: 0; transform: translateX(7rem); transition: 0.8s; }
.main_txt h2 { font-size: 3.125rem; line-height: 154%; transform: rotate(-4deg); }
.main_txt h2 span { display: inline-block; font-size: 5.75rem; margin-left: 14.5rem; }


.line_box { width: 100%; height: calc(100% - 9.5rem); position: absolute; left: 0; bottom: 0; z-index: 5; display: flex; justify-content: center; align-items: flex-start; }
.line_box>div { width: 100%; height: 50%; position: relative; }
.line_box>div>div { position: relative; position: absolute; }
.line_box>div>div>span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.line_box>div>div>span::after { content: ''; width: 100%; height: 100%; opacity: 0.3; background-color: #2d3d47; position: absolute; top: 0; left: 0; }
.line01 { width: 28%; height: 2px; left: 0; bottom: 0; }
.line02 { width: 35%; height: 2px; transform: rotate(35deg); transform-origin: right bottom; left: -7%; bottom: 0; }
.line02>span:first-child { width: 12%; right: 0px; top: 0; left: revert; }
.line02>span:last-child { width: 20%; }
.line03 { width: 67.5%; height: 2px; right: 0; bottom: 0; }
.line04 { width: 2px; height: 100%; right: 62%; bottom: 0; }
.line04>span:first-child { height: 3.3vw; }
.line04>span:last-child { height: 2.8vw; top: revert; bottom: 2px; }

.line01>span::after { width: 0 !important; }
.line02>span:first-child::after { width: 0; left: revert; right: 0; }
.line02>span:last-child::after { width: 0; }
.line03>span::after { width: 0 !important; }
.line04>span:first-child::after { height: 0; }
.line04>span:last-child::after { height: 0; top: revert; bottom: 0; }

.main_wrap .line_box { left: -11%; }
.main_wrap .line03 { width: 78.5%; right: -11%; }




.main_wrap.intro .main_img { background: url('../img/main/mainVisual.jpg') center bottom 0.1% no-repeat; background-size: cover;  }


.main_wrap.on .main_img,
.main_wrap.on2 .main_img { background: url('../img/main/mainVisual.jpg') center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }
.main_wrap.on .main_box::before { opacity: 1; transition: 2.0s 0.4s; }
.main_wrap.on .main_txt_box h2 { transform: translate(0); opacity: 1; transition: 1.5s 0.4s; }
.main_wrap.on .main_txt_box p { transform: translate(0); opacity: 0.8; transition: 1.5s 1.0s; }
.main_wrap.on .main_txt { transform: translate(0); opacity: 1; transition: 1.8s 1.0s; }

.main_wrap.on .line01>span::after { width: 100% !important; height: 100% !important; transition: 1.2s 0s linear; }
.main_wrap.on .line02>span:first-child::after { width: 100% !important; height: 100% !important; transition: 1.2s 1.2s ease; }
.main_wrap.on .line02>span:last-child::after { width: 100% !important; height: 100% !important; transition: 1.2s 1.2s ease; }
.main_wrap.on .line03>span::after { width: 100% !important; height: 100% !important; transition: 2.5s 1.2s ease; }
.main_wrap.on .line04>span:first-child::after { width: 100% !important; height: 100% !important; transition: 1.2s 1.2s ease; }
.main_wrap.on .line04>span:last-child::after { width: 100% !important; height: 100% !important; transition: 1.2s 1.2s ease; }

.main_wrap.skip .main_img { background: url(../img/main.jpg) center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }
.main_wrap.skip .main_box::before { opacity: 1; transition: 2.0s 3.0s; }
.main_wrap.skip .main_txt_box h2 { transform: translate(0); opacity: 1; transition: 1.5s 3.0s; }
.main_wrap.skip .main_txt_box p { transform: translate(0); opacity: 0.8; transition: 1.5s 3.6s; }
.main_wrap.skip .main_txt { transform: translate(0); opacity: 1; transition: 1.8s 3.6s; }


@media all and (max-width: 1400px) { 
	    
    .main_wrap { width: 100%; height: auto; display: block; }
    .main_wrap::before { display: none; }

    .main_box { height: 100dvh; }
            
    .main_txt_box { width: 100%; height: 100%; text-align: center; }
    .main_txt_box>div { transform: translateY(-11.5rem); }
    .main_txt_box h2 { font-size: 1.9375rem; transition: 0s; }
    .main_txt_box h2 span { font-size: 2.375rem; transform: translateY(0.125rem); }
    .main_txt_box p { font-size: 0.9375rem; margin-top: 1.5rem; transition: 0s; }

    .main_txt { right: 5%; bottom: 5rem; transition: 0s; }
    .main_txt h2 { font-size: 2.75rem; }
    .main_txt h2 span { font-size: 5rem; margin-left: 12.5rem; }

    .line_box { height: calc(100% - 6.25rem); }

    .main_wrap .line_box { display: none; }

    .main_img { background: url(../img/main/main_pad_Visual.jpg) center top no-repeat; background-size: cover; }



    .main_wrap.intro .main_img { background: url(../img/main/main_pad_Visual.jpg) center bottom 0.1% no-repeat; background-size: cover; }
    
    
    .main_wrap.on2 .main_img,
    .main_wrap.on .main_img { background: url(../img/main/main_pad_Visual.jpg) center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }
    
    .main_wrap.skip .main_img { background: url(../img/main/main_pad_Visual.jpg) center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }
        

    @media all and (max-width: 1000px) { 

        .main_img { transform: scale(1.4); transform-origin: center bottom; }

        .main_txt { display: none; }
        .main_txt_box>div { transform: translateY(-10rem); }


        .main_sum>div { max-width: 640px; }
        .main_sum>div>h1 { font-size: 3rem; transition: 0s; }
        .main_sum ul>li { width: calc(25% - 0.625rem); }
        .main_sum ul>li:nth-child(n+5) { width: calc(50% - 0.375rem); padding: 2.25rem 0; }
        .main_wrap.on .main_box::before { opacity: 0.5; }
    }
}



@media all and (max-width: 767px) { 
	
    .main_box { height: calc(100dvh - 0px); }

    .main_img { background: url(../img/main/main_m_Visual.jpg) center top no-repeat; background-size: cover; transform: scale(1); }

    .main_txt_box>div { transform: translateY(-9rem); }
    .main_txt_box h2 { font-size: 2rem; }
    .main_txt_box h2 span { font-size: 2.375rem; transform: translateY(0.125rem); }
    .main_txt_box p { font-size: 1rem; margin-top: 1.5rem; }


    .main_wrap.intro .main_img { background: url(../img/main/main_m_Visual.jpg) center bottom 0.1% no-repeat; background-size: cover; }
        
    .main_wrap.on2 .main_img,
    .main_wrap.on .main_img { background: url(../img/main/main_m_Visual.jpg) center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }
    
    .main_wrap.skip .main_img { background: url(../img/main/main_m_Visual.jpg) center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }

    @media screen and (min-width: 500px) and (max-width: 766px) {
        
        .main_img { background: url(../img/main/main_pad_Visual.jpg) center top no-repeat; background-size: cover; transform: scale(1.3); transform-origin: center bottom; }
            
        .main_txt_box>div { transform: translateY(-12rem); }

        .main_wrap.intro .main_img { background: url(../img/main/main_pad_Visual.jpg) center bottom 0.1% no-repeat; background-size: cover; }
            
        .main_wrap.on2 .main_img,
        .main_wrap.on .main_img { background: url(../img/main/main_pad_Visual.jpg) center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }
        
        .main_wrap.skip .main_img { background: url(../img/main/main_pad_Visual.jpg) center bottom 0.11% no-repeat; background-size: cover; transition: all, 1.0s 0s, background 5s 0s !important; }
        
    }
}

/* mainVisual : End */



/* Premium : Start */

#main-section-premium .main_con { height: 980px; overflow: hidden; position: relative; z-index:5; }
#main-section-premium .main_con:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0;
  width: 41.6666%;
  height: 100%;
  background: #341e66 url("../img/main/premium_bg.jpg") 100% 50%;
  background-size: auto 100%;
  z-index: 1;
}
#main-section-premium .main_con .premium_text_swiper { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-765px, -50%); width: 640px; height: 720px; background: #fff; z-index: 999; overflow: hidden; }
#main-section-premium .main_con .premium_text_swiper .premium_tit { position: absolute; left: 50%; top: 100px; width: 460px; transform: translateX(-50%); }
#main-section-premium .main_con .premium_text_swiper .swiper-slide .text { position: absolute; left: 50%; top: 315px; width: 460px; height: 400px; padding: 30px 0 0 0; transform: translateX(-50%); /*background-image:url("../img/main/main_premium_icon1.png"); */ background-repeat:no-repeat; background-color:#fff; background-position:0 5px; }
/*
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="1"] .text { background-image: url("../img/main/main_premium_icon1.png"); }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="2"] .text { background-image: url("../img/main/main_premium_icon2.png"); }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="3"] .text { background-image: url("../img/main/main_premium_icon3.png"); }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="4"] .text { background-image: url("../img/main/main_premium_icon4.png"); }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="5"] .text { background-image: url("../img/main/main_premium_icon5.png"); }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="6"] .text { background-image: url("../img/main/main_premium_icon6.png"); }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="7"] .text { background-image: url("../img/main/main_premium_icon7.png"); }
*/
#main-section-premium .main_con .premium_text_swiper .swiper-slide .text::before { content: "PREMIUM 1"; display: block; position: absolute; top: 0px; left: 0; width: px; height: px; font-family: "Montserrat"; font-size: 16px; color: #207463; font-weight: 600; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="1"] .text::before { content: "PREMIUM 1"; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="2"] .text::before { content: "PREMIUM 2"; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="3"] .text::before { content: "PREMIUM 3"; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="4"] .text::before { content: "PREMIUM 4"; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="5"] .text::before { content: "PREMIUM 5"; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="6"] .text::before { content: "PREMIUM 6"; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide[data-slide="7"] .text::before { content: "PREMIUM 7"; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide .text dt { font-size: 35px; letter-spacing: -1px; word-spacing: 2px; font-weight: 600; color: #0c5148; }
#main-section-premium .main_con .premium_text_swiper .swiper-slide .text dd { font-size: 18px; color: #575756; padding: 26px 0 0; }
#main-section-premium .main_con .premium_text_swiper .premium_btn {
  position: absolute;
  bottom: 100px;
  z-index: 999;
  left: 100px;
}


#img_premium_swiper1 { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-130px, -50%);
  width: 1080px;
  height: 720px; 
  overflow: hidden;
  z-index: 2;
}
#img_premium_swiper2 { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-1845px, -50%);
  width: 1080px;
  height: 720px; 
  overflow: hidden;  
  z-index: 2;
}

#main-section-premium .main_con .premium_img_swiper .swiper-slide .bg { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-position:top center; background-size:cover; background-repeat:no-repeat; }


#main-section-premium .main_con .control_area { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-150px, -50%);
  width: 1080px;
  height: 70px; 
  overflow: hidden;
  z-index: 2;
  margin: 385px 0 0;
}
#main-section-premium .main_con .control_area .status_bar { display: flex; align-items: center; width: 120px; height: 2px; position: absolute; right: 520px; bottom: 8px; }
#main-section-premium .main_con .control_area .status_bar span {width: 100%; display: block; height: 2px; background: #4e5585; position: relative;}
#main-section-premium .main_con .control_area .status_bar i {position: absolute; left: 0; width: 0; background:#fff; height: 2px;}

#main-section-premium .main_con .control_area .current { position: absolute; right: 660px; bottom: 0; font-family: "Montserrat"; font-size: 18px; font-weight: 600; color: #fff; line-height: 1;}
#main-section-premium .main_con .control_area .total { position: absolute; right: 480px; bottom: 0; font-family: "Montserrat"; font-size: 18px; font-weight: 600; color: #9195b3; line-height: 1;}

#main-section-premium .main_con .control_area .button-prev { position: absolute; right: 700px; bottom: 0; width: 20px; height: 16px; }
#main-section-premium .main_con .control_area .button-prev::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 600; background: url("../img/icon/visual_prev.png") no-repeat 50% 50%;}
#main-section-premium .main_con .control_area .button-next { position: absolute; right: 435px; bottom: 0; width: 20px; height: 16px; }
#main-section-premium .main_con .control_area .button-next::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 600; background: url("../img/icon/visual_next.png") no-repeat 50% 50%;}

#main-section-premium .main_con .control_area .copy {
  width: 300px;
  color: #9597ad;
  position: absolute;
  right: 6.5rem;
  bottom: 0;
  line-height: 1;
}
#main-section-premium .main_con .control_area .copy span {
  font-size: 15px;
}
#main-section-premium .main_con .control_area .copy strong {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 600;
}

/* 메인 더보기 */
#main-section-premium .btn_view_more {
  display: inline-block;
  width: 240px;
  height: 53px;
  overflow: hidden;
  text-indent: -20000px;
  background-image: url("../img/main/btn_view_more.jpg");
  background-repeat:no-repeat;  
  background-size:cover;
  -webkit-transition: background-image 1s;
  transition: background-image 1s;  
}
#main-section-premium .btn_view_more:hover {
  background-image: url("../img/main/btn_view_more_hover.jpg");
  background-repeat:no-repeat;
  background-size:cover;  
  -webkit-transition: background-image 1s;
  transition: background-image 1s;
}


@media(max-width:1600px){
	#main-section-premium .main_con .premium_text_swiper { left:0; transform: translate(0, -50%); width: 600px;  }
	
	#img_premium_swiper2 {  display:none; }
	
}

@media(max-width:1120px){
	#main-section-premium .main_con { height:auto; }	
	#main-section-premium .main_con .premium_text_swiper { position:relative; top:0; left:auto; transform: translate(0, 0); width:100%; height:auto; padding:50px 10px 100px; }
	#main-section-premium .main_con .premium_text_swiper .premium_tit { position: relative; left:0; top:0; width:350px; transform: translateX(0); margin:0 auto; }
	#main-section-premium .main_con .premium_text_swiper .premium_tit  img { width:100%; height:auto; }
	#main-section-premium .main_con .premium_text_swiper .swiper-slide { position:relative; }
	#main-section-premium .main_con .premium_text_swiper .swiper-slide .text { position:relative; left:0; top:0; margin:30px auto; width: 460px; height:auto; transform: translateX(0); }
	
	#img_premium_swiper1 { 
	  position: relative;
	  top: 0;
	  left: 0;
	  transform: translate(0, 0);
	  width: 100%;
	  height:500px; 
	}
	#main-section-premium .main_con .premium_img_swiper .swiper-slide .bg { background-position:top center; background-size:cover; }
	#main-section-premium .main_con .control_area { display:none; }
	#main-section-premium .main_con .premium_btn {  bottom:0; left:50% !important; text-align:center; transform: translate(-50%, 50px); }
	#main-section-premium .main_con .premium_btn a { display:inline-block; }
	#main-section-premium .btn_view_more {  }
}

@media(max-width:680px){
	#main-section-premium .main_con .premium_text_swiper { padding:30px 10px 80px; }
	#main-section-premium .main_con .premium_text_swiper .premium_tit { width:250px; }
	#main-section-premium .main_con .premium_text_swiper .swiper-slide .text { width: 300px; background-size:50px 50px; padding: 30px 0 0 60px; }
	#main-section-premium .main_con .premium_text_swiper .swiper-slide .text dt { font-size:22px; }
	#main-section-premium .main_con .premium_text_swiper .swiper-slide .text dd { font-size:14px; }
	
	#main-section-premium .main_con .premium_text_swiper .swiper-slide .text::before { left: 65px; }
	#main-section-premium .main_con .premium_btn {  transform: translate(-50%, 60px); }
	#main-section-premium .btn_view_more { width:180px; height:40px; background-size:180px 40px; }
	#img_premium_swiper1 { 
	  height:300px; 
	}
}

/* Premium : End */

/* Traffic : Start */

#main-section-traffic {
      background-color: #66A8C1;
}


#main-section-traffic .main_slide_con1 {
      background-color: #66A8C1;
      z-index: 24;
      position: relative;
}

#main-section-traffic .main_slide_con2 {
      background-color: #66A8C1;
      z-index: 25;
      position: relative;
}

#main-section-traffic .main_slide_con .part_s {
      height: 100vh;
      overflow: hidden;
      display: flex;
}

#main-section-traffic .main_slide_con .part_in {
      position: relative;
      height: 100%;
      transition: 1.5s;
      transition-delay: 0s;
      flex: 1;
}

#main-section-traffic .main_slide_con .part_w {
      transition: .5s ease-in-out;
      height: 100%;
}

#main-section-traffic .main_slide_con .part_in .abs {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding-left: 11%;
      padding-top: 60vh;
}

#main-section-traffic .main_slide_con .part_in.dw .abs {
      padding-top: 22vh;
}

#main-section-traffic .main_slide_con2 .part_in .abs {
      padding-top: 54vh !important;
}

#main-section-traffic .main_slide_con2 .part_in.dw .abs {
      padding-top: 33vh !important;
}

#main-section-traffic .main_slide_con .part_in .abs a {
      display: inline-block;
      margin-top: 2rem;
      opacity: 0;
      transition: .4s ease-in-out;
      width: 18.8rem;
}

#main-section-traffic .main_slide_con .part_in .abs span {
      display: block;
      font-size: 1rem;
      line-height: 1.6rem;
      color: #fff;
      font-weight: 300;
}

#main-section-traffic .main_slide_con .part_in .abs p {
      display: block;
      font-size: 2rem;
      margin: 2rem 0;
      color: #fff;
      font-weight: bold;
      line-height: 2.5rem;
}

#main-section-traffic .main_slide_con .part_w>img {
      opacity: 0;
      visibility: hidden;
      width: 100%;
}

#main-section-traffic .main_slide_con .part_in:hover a {
      opacity: 1;
}

#main-section-traffic .main_slide_con .part1 {
      background: url('../img/main/main_s_01.jpg') no-repeat center;
      background-size: 100% 100%;
      filter: grayscale(100%);
      transition: filter 0.5s ease, background-size 0.5s ease;
}

#main-section-traffic .main_slide_con .part_in1:hover .part1 {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

#main-section-traffic .main_slide_con .part2 {
      background: url('../img/main/main_s_02.jpg') no-repeat center;
      background-size: 100% 100%;
      filter: grayscale(100%);
      transition: filter 0.5s ease, background-size 0.5s ease;
}

#main-section-traffic .main_slide_con .part2:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

#main-section-traffic .main_slide_con .part3 {
      background: url('../img/main/main_s_03.jpg') no-repeat center;
      background-size: 100% 100%;
      filter: grayscale(100%);
      transition: filter 0.5s ease, background-size 0.5s ease;
}

#main-section-traffic .main_slide_con .part3:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

#main-section-traffic .main_slide_con .part4 {
      background: url('../img/main/main_s_04.jpg') no-repeat center;
      background-size: 100% 100%;
      filter: grayscale(100%);
      transition: filter 0.5s ease, background-size 0.5s ease;
}

#main-section-traffic .main_slide_con .part4:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

#main-section-traffic .main_slide_con .part5 {
      background: url('../img/main/main_s_05.jpg') no-repeat center;
      background-size: 100% 100%;
      filter: grayscale(100%);
      transition: filter 0.5s ease, background-size 0.5s ease;
}

#main-section-traffic .main_slide_con .part5:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

#main-section-traffic .main_slide_con .part6 {
      background: url('../img/main/main_s_06.jpg') no-repeat center;
      background-size: 100% 100%;
      filter: grayscale(100%);
      transition: filter 0.5s ease, background-size 0.5s ease;
}

#main-section-traffic .main_slide_con .part6:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

.main_mo {
      position: relative;
}

.main_mo .n_sec img {
      width: 100%;
}

.main_mo .n_sec {
      width: 100%;
}
.main_mo .n_sec img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
}

.main_mo .n_sec_in {
      position: relative;
      display: block;
}

.main_mo .n_sec .n_sec_in>div {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding-left: 4rem;
      padding-top: 6.5rem;
      padding-bottom: 6.5rem;
}

.main_mo .n_sec span {
      display: block;
      font-size: 14px;
      letter-spacing: -1.2px;
      line-height: 1.6;
      color: #fff;
      font-weight: normal;
}

.main_mo .n_sec p {
      display: block;
      font-size: 25px;
      letter-spacing: -1.7px;
      margin-bottom: 25px;
      color: #fff;
      font-weight: bold;
      /* font-family: "Nanum Myeongjo", serif; */
      line-height: 1.2;
}

.m_section2_more {
      width: 50% !important;
      height: auto !important;
      position: absolute;
      right: 10%;
      bottom: 10%;
      max-width: 200px !important;
}

@media screen and (max-width: 1600px) {
      #main-section-traffic .main_slide_con .part_in .abs p {
            font-size: 1.4rem;
            line-height: 1.8rem;
            margin: 1.3rem 0;
      }

      #main-section-traffic .main_slide_con .part_in .abs span {
            font-size: 0.9rem;
            line-height: 1.4rem;
      }
}

@media screen and (max-width: 1280px) {
      #main-section-traffic .main_slide_con .part_in .abs p {
            font-size: 1.4rem;
            line-height: 2rem;
      }
      #main-section-traffic .main_slide_con .part_in .abs span {
            font-size: 0.8rem;
            line-height: 1.2rem;
      }
}

@media screen and (max-width: 989px) {
      #main-section-traffic .main_slide_con .part_s {
            height: auto;
      }

      .slidecont .main_mo.m-only {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
      }
}

@media screen and (max-width: 767px) {
      .slidecont .main_mo.m-only {
            grid-template-columns: 1fr;
      }
      .m_section2_more {
            width: 30% !important;
      }
}
@media screen and (max-width: 400px) {
      .main_mo .n_sec .n_sec_in>div {
            padding-left: 4rem;
            padding-top: 4rem;
            padding-bottom: 6.5rem;
      }
}

#main-section-traffic { position:relative; height:100vh; }
#main-section-traffic ul {
  display: flex;
  height: 100%;
  flex-wrap:wrap;
}

#main-section-traffic ul li {
  position: relative;
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  background-color: #f2eee8;
}

#main-section-traffic ul li:last-child {
  border-right: none;
}

#main-section-traffic ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  transition: 0.3s;
  opacity: 0;
}

#main-section-traffic ul li::after {
  content: "";
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 40px;
  background: url('../img/main/sec-03-imgcut.png') no-repeat right bottom/contain;
}

#main-section-traffic ul li:nth-child(1)::before {
  background-image: url('../img/main/sec-03-bg01.jpg');
}

#main-section-traffic ul li:nth-child(2)::before {
  background-image: url('../img/main/sec-03-bg02.jpg');
}

#main-section-traffic ul li:nth-child(3)::before {
  background-image: url('../img/main/sec-03-bg03.jpg');
}

#main-section-traffic ul li:nth-child(4)::before {
  background-image: url('../img/main/sec-03-bg04.jpg');
}

#main-section-traffic ul li p,
#main-section-traffic ul li img {
  position: relative;
  transition: 0.3s;
}

#main-section-traffic ul li .category {
  margin-top: 40px;
  color: #c6953d;
  font-size: 28px;
  font-weight: 500;
}

#main-section-traffic ul li .tit {
  font-size: 16px;
  font-weight: 500;
  color: #4c3429;
  line-height:1.5;
  margin-top: 25px;
  word-break:keep-all;
}

#main-section-traffic ul li .desc {
  color: #89877a;
  font-weight:300;
  line-height: 26px;
  font-size: 16px;
  margin-top: 40px;
}

#main-section-traffic ul li:hover p {
  color: #fff;
}

#main-section-traffic ul li:hover::before {
  opacity: 1;
}

#main-section-traffic ul li:hover::after {
  opacity: 1;
}

#main-section-traffic.active ul li > div {
  animation: slideUp 1.2s forwards;
  animation-delay: 0.3s;
}

@media(min-width:1401px){
	#main-section-traffic { padding-right:6.275rem; }
}


@media(max-width:1400px){
	#main-section-traffic { height:auto; }
	
	#main-section-traffic ul li {
	  width: 50%;
	  height:500px;
	  border-bottom: 1px solid #ccc;
	}
}


@media(max-width:680px){
	
	#main-section-traffic ul li {
		justify-content: start;
		padding:50px 10px 0;
		height:360px;
	}
	
	#main-section-traffic ul li img { width:80px; height:auto; }
	
	#main-section-traffic ul li .category {
	  margin-top:20px;
	  font-size: 22px;
	}

	#main-section-traffic ul li .tit {
	  font-size: 12px;
	}
}

/* Traffic : End */

/* UNIT : Start */

/* =========================
   #main-section-unit - 반응형 고정 사이즈 & 슬라이더 레이아웃 (Swiper 4 기준)
   ========================= */

/* 섹션 */
#main-section-unit{
  position: relative;
  overflow: hidden;
  background: #eae6e2; /* 우측 영역 톤 */
}

/* 좌측 50% 전체 배경 (이미지 경로 교체) */
#main-section-unit .unit__bg-left{
  position: absolute; top:0; left:0; bottom:0; width:50%;
  background: #ddd url("../img/main/unit_left_bg.jpg") 50% 50% / cover no-repeat;
  z-index: 0; pointer-events: none;
}

/* 레이아웃 래퍼: 기본은 1열(모바일 퍼스트) */
#main-section-unit .unit__wrap{
  position: relative; z-index: 1;
  max-width: 1400px; margin: 0 auto;
  padding: clamp(24px,4vw,48px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr;     /* 모바일 기본 한 열 */
  gap: clamp(20px,3.6vw,48px);
  align-items:center;
}

/* 모바일/태블릿에서 상단 풀폭 배경을 확보 */
#main-section-unit .unit__bg-left{
  width: 100%;
  height: clamp(260px, 42vh, 480px);
  top: 0; left: 0; right: 0; bottom: auto;
}
#main-section-unit .unit__wrap{
  padding-top: clamp(260px, 42vh, 480px); /* 배경 높이만큼 공간 */
}

/* 좌측 텍스트 */
#main-section-unit .unit__left h3{ margin:0 0 8px; font-size: clamp(14px,1.8vw,18px); font-weight:600; color:#666; letter-spacing:.02em; }
#main-section-unit .unit__left h2{ margin:0 0 12px; font-size: clamp(28px,5.4vw,46px); letter-spacing:.03em; font-weight:800; }
#main-section-unit .unit__left p { margin:0 0 18px; color:#666; line-height:1.7; font-size: clamp(14px,2.2vw,16px); }
#main-section-unit .unit__nav{ display:flex; gap:10px; }
#main-section-unit .unit__btn{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid #cfc7bb; background:#fff;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
#main-section-unit .unit__btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
#main-section-unit .unit__btn svg{ width:16px; height:16px; }

/* 우측 슬라이더 뷰포트 */
#main-section-unit .unit__slider{
  width: 100%;
  overflow: hidden;          /* 좌측은 클리핑, 우측만 부분 노출 */
  justify-self: stretch;
  position: relative; z-index: 2;
}

/* Swiper 4 컨테이너 */
#main-section-unit .unit__slider .swiper-container{ width:100%; overflow: visible; }
#main-section-unit .unit__slider .swiper-container .swiper-wrapper{
  display: flex; align-items: stretch;
}

/* ── 고정 폭: 모바일 기본(≤480px) 슬라이드 280px ── */
#main-section-unit .unit__slider .swiper-container .swiper-wrapper .swiper-slide{
  box-sizing: border-box;
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 280px !important;
  height: auto;
}

/* 카드(통이미지 + 하단 more 바) */
#main-section-unit .unit-card{
  position: relative; height: 100%;
  background:#fff; border:1px solid #e6e1d7; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
#main-section-unit .unit-card:hover{ transform: translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.10); border-color:#cfc7bb; }

#main-section-unit .unit-card__img{
  width: 100%;
  margin: 0 12px 12px;
  border-radius: 10px 10px 0 0;
  overflow: hidden; background:#f5f3ef;
  transform: none; /* 모바일 기본 걸침 없음 */
}
#main-section-unit .unit-card__img img{
  width: 100%; height: auto; display:block;
  transition: transform .5s ease;
}
#main-section-unit .unit-card:hover .unit-card__img img{ transform: scale(1.03); }

#main-section-unit .unit-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: rgba(13,43,102,0); transition: background .25s ease;
}
#main-section-unit .unit-card__cta{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 16px; font-size:14px; font-weight:600; letter-spacing:.02em;
  background:#bdae91; border-top:1px solid #b3a487; color:#fff;
  transition: background .25s ease, border-color .25s ease;
  text-decoration:none;
}
#main-section-unit .unit-card__cta svg{ width:16px; height:16px; transition: transform .25s ease; }
#main-section-unit .unit-card:hover .unit-card__cta{ background:#0d2b66; border-color:#0d2b66; }
#main-section-unit .unit-card:hover .unit-card__cta svg{ transform: translateX(2px); }
/*
#main-section-unit .swiper-slide.swiper-slide-active .unit-card__cta,
#main-section-unit .swiper-slide.swiper-slide-duplicate-active .unit-card__cta{ background:#0d2b66; border-color:#0d2b66; }
*/
#main-section-unit .swiper-slide.swiper-slide-active .unit-card::after,
#main-section-unit .swiper-slide.swiper-slide-duplicate-active .unit-card::after{ background: rgba(13,43,102,.04); }
#main-section-unit .unit-card:focus-within{ outline:2px solid #0d2b66; outline-offset:2px }

/* ───────── ≥481px: 슬라이드 300px ───────── */
@media (min-width: 481px){
  #main-section-unit .unit__slider .swiper-container .swiper-wrapper .swiper-slide{
    flex-basis: 300px !important; width:300px !important; max-width:300px !important;
  }
}

/* ───────── ≥768px: 슬라이드 320px ───────── */
@media (min-width: 768px){
  #main-section-unit .unit__slider .swiper-container .swiper-wrapper .swiper-slide{
    flex-basis: 320px !important; width:320px !important; max-width:320px !important;
  }
}

/* ───────── ≥1025px: 데스크톱 시작 ─────────
   - 레이아웃: 좌 min 350px / 우 뷰포트 900px
   - 슬라이드: 360px
   - 통이미지 살짝 좌측 걸침 */
@media (min-width: 1025px){
  #main-section-unit .unit__bg-left{
    position:absolute; top:0; left:0; bottom:0; width:50%; height:auto;
  }
  #main-section-unit .unit__wrap{
    grid-template-columns: minmax(350px,1fr) 900px !important;
    min-height: 800px;
    padding-top: clamp(24px,4vw,48px); /* 모바일용 상단 여백 해제 */
  }
  #main-section-unit .unit__slider{ justify-self: end; }

  #main-section-unit .unit__slider .swiper-container .swiper-wrapper .swiper-slide{
    flex-basis: 360px !important; width:360px !important; max-width:360px !important;
  }
  #main-section-unit .unit-card__img{ transform: translateX(-10px); }
}

/* ───────── ≥1281px: 우측 뷰포트 1000px / 슬라이드 400px ───────── */
@media (min-width: 1281px){
  #main-section-unit .unit__wrap{
    grid-template-columns: minmax(450px,1fr) 700px !important;
  }
  #main-section-unit .unit__slider .swiper-container .swiper-wrapper .swiper-slide{
    flex-basis: 400px !important; width:400px !important; max-width:400px !important;
  }
  #main-section-unit .unit-card__img{ transform: translateX(-14px); }
}


/* === 세로형(≤1024px)에서 상단 배경을 화면 높이로 '풀' 채우기 === */
@media (max-width: 1024px){
  /* 섹션 자체도 최소 한 화면 */
  #main-section-unit{ min-height: 100vh; }

  /* 배경: 가로 100%, 세로 한 화면 꽉 (모바일 뷰포트 유닛 보강) */
  #main-section-unit .unit__bg-left{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100%;
    /* Fallback → modern 순서 */
    height: 100vh;                      /* 기본 */
    height: 100svh;                     /* 작은 뷰포트 */
    height: min(100dvh, 100svh);        /* 주소창 변동 대응 */
    background-size: cover;
    background-position: 50% 50%;
  }

  /* 배경 높이만큼 콘텐츠를 아래로 밀어내기 */
  #main-section-unit .unit__wrap{
    grid-template-columns: 1fr;
    min-height: unset;
	padding-top:80px; /* 모바일용 상단 여백 해제 */
  }

  /* 슬라이더/카드 쪽 기본은 그대로 */
  #main-section-unit .unit__slider{
    width: 100%;
    overflow: hidden;
    justify-self: stretch;
  }
  #main-section-unit .unit-card__img{
    transform: none;  /* 작은 화면에선 좌측 걸침 해제 */
  }
}


/* UNIT : End */

/* 브랜드 : Start */

#main-section-brand {
  background-image: url('../img/main/brand_pattern.png');
  background-color: #272759;
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box;
  overflow: hidden;
}

#main-section-brand .brand-inner {
  position: relative;
  display:flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 53px 190px 100px 260px;
  overflow: hidden;
  box-sizing: border-box;
}

#main-section-brand .brand-inner .brand-left {
  width: 43vw;
}

#main-section-brand .brand-inner .brand-right {
  width: 29vw;
}

#main-section-brand .brand-inner .brand-right .brand-text-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 100px;
  color: #fff;
}

#main-section-brand .brand-inner .brand-right .brand-text-area p {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 200;
}

#main-section-brand .brand-inner .brand-right .brand-text-area .brand-text-img {
  padding: 20px 0 30px;
}
#main-section-brand .brand-inner .brand-right .brand-text-area .brand-list {
}
#main-section-brand .brand-inner .brand-right .brand-text-area .brand-list td:first-child {
  padding-right: 10px;
  letter-spacing: -0.05em;
  font-weight: 500;
}
#main-section-brand .brand-header {
  text-align: center;
  color: #fff;
}
#main-section-brand .brand-header p {
  font-size: 70px;
  line-height: 1;
  font-weight: 500;
  font-family: "Pretendard Variable", "Pretendard", AppleSDGothicNeo, -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: capitalize;
}
#main-section-brand .brand-header span {
  display: block;
  font-size: 26px;
  padding: 106px 50px 10px;
}
#main-section-brand .brand-inner .brand-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #fff;
}
#main-section-brand .brand-inner .brand-box p {
  padding: 10px 0 15px;
}
#main-section-brand .brand-inner .brand-box-center {
  width: 100%;
}
#main-section-brand .brand-inner .brand-box-left {
  width: 58%;
}
#main-section-brand .brand-inner .brand-box-right {
  width: 40%;
}
#main-section-brand .brand-inner .brand_img {
  width: 100%;
  height: 234px;
  background-image: url('../img/main/brand_img1.png');
  background-position:center center;
  background-size:cover;
}
#main-section-brand .brand-inner .brand_img.brand_img2 {
  height: 327px;
  background-image: url('../img/main/brand_img2.png');
}
#main-section-brand .brand-inner .brand_img.brand_img3 {
  height: 327px;
  background-image: url('../img/main/brand_img3.png');
}
#main-section-brand .brand-box .brand-box_btn {
  display: block;
  padding-bottom: 5px;
}


@media(max-width:1680px){
	#main-section-brand .brand-inner {
		padding-left: 50px;
	}
}

@media(max-width:1400px){
	#main-section-brand .brand-inner {
		padding: 53px 50px 100px;
	}
	
	#main-section-brand .brand-inner .brand-left {
	  width:53vw;
	}

	#main-section-brand .brand-inner .brand-right {
	  width: 32vw;
	}
}

@media(max-width:1080px){
	#main-section-brand .brand-inner {
		display:block;
		padding: 53px 50px 100px;
	}
	
	
	#main-section-brand .brand-inner .brand-left,
	#main-section-brand .brand-inner .brand-right {
	  width:100%;
	}
}

@media(max-width:980px){
	#main-section-brand .brand-inner {
		display:block;
		padding: 53px 50px 100px;
	}
	
	
	#main-section-brand .brand-inner .brand-left,
	#main-section-brand .brand-inner .brand-right {
	  width:100%;
	}
}

@media(max-width:680px){

	#main-section-brand .brand-header p {
	  font-size: 40px;
	}
	#main-section-brand .brand-inner {
		display:block;
		padding: 35px 10px 50px;
	}
	
	#main-section-brand .brand-inner .brand_img.brand_img2,
	#main-section-brand .brand-inner .brand_img.brand_img3 {
		height: 234px;
	}
		
	#main-section-brand .brand-inner .brand-right .brand-text-area {
	  padding-top:30px;
	}

	#main-section-brand .brand-inner .brand-box { display:block; }
	#main-section-brand .brand-inner .brand-box-left,
	#main-section-brand .brand-inner .brand-box-right {
	  width: 100%;
	}
}
/* 브랜드 : End */


/* 찾아오시는길 */

.directions{
  background: #163a36; /* 크림톤 배경 */
}

/* PC: 50/50 2열 + 높이 100vh */
.directions__wrap{
  width: 100%;
  min-height: 100vh;                 /* 화면 높이 꽉 */
  display: grid;
  grid-template-columns: 1fr 1fr;    /* 정확히 50% / 50% */
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
  padding:0;
  box-sizing: border-box;
}

/* ===== Left (content) ===== */
.directions__content{ display:flex; align-items:center; }
.directions__inner{ width:100%; max-width: 540px; margin:0 auto; }

.directions__title{
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: .02em;
  margin: 0 0 30px;
  font-weight: 700;
}

.map-card{ border:1px solid #d8d2c4; border-radius: 6px; background:#fff; overflow: hidden; }
.map-card img{ width:100%; height:auto; display:block; }

.info{ position:relative;  margin-top: clamp(18px, 3vw, 28px); display:grid; gap: 10px; }
.info__row{ font-size: clamp(14px, 1.9vw, 16px); line-height: 1.65; color: #fff; }
.info__row strong{ color: #f5f5f5; font-weight: 700; margin-right: 6px; }

.cta{ position:absolute; right:0; bottom:0; }
.directions_btn{
  display:inline-flex; align-items:center; gap: 12px;
  padding: 12px 20px; border-radius: 8px;
  border: 1px solid #bdb7a6; background:#bdb7a6; color:#fff;
  font-size: 15px; text-decoration:none; line-height:1;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.directions_btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.directions_btn svg{ width:16px; height:16px; flex:0 0 16px; transition: transform .25s ease; }
.directions_btn:hover svg{ transform: translateX(2px); }

/* ===== Right (visual) ===== */
.directions__visual{
  position: relative;     /* 그리드 셀 높이(=100vh)에 맞춰 늘어남 */
  height: 100%;
  min-height: auto;
}

.visual-img{
  position:absolute; inset:0;
  background: #ddd url("../img/main/directions_bg.png") 50% 50% / cover no-repeat; /* 이미지 경로 교체 */
  /* 배경 흔들림 방지: 전환/이동 없음 */
  transition: none;
  will-change: auto;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .directions__wrap{
    grid-template-columns: 1fr;   /* 1열 */
    min-height: unset;
  }
  .directions__inner{ padding:30px; }
  .directions__visual{
    order: -1;                     /* 비주얼을 위로 */
    width: 100%;
    min-height: clamp(320px, 45vh, 560px);  /* 모바일: 적당한 세로 높이 */
  }
  .visual-img{
    position:absolute; inset:0;
    background-position: 50% 50%;
    background-size: cover;
  }
  
  .cta{ position:relative; left:0; margin-top:30px; }
}

@media (max-width: 480px){
  .btn{ width: 100%; justify-content: center; }
}