/*
    variable
********************/
:root {

      /* contents point colors */
      --premium-box-color: #afbf67;
      --premium-tit-color: #000;
      --premium-status-bar: #011142;
      --premium-btn-hover-color: #24a544;

}

@import url("font.css");


/*
      MAIN
*******************/
.main_wrap {
      position: relative;
      height: 100%;
      /* overflow: hidden; */
}

.pc-only {
      display: block;
}

.m-only {
      display: none;
}

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

      .m-only {
            display: block;
      }
}

.main_container {
      overflow: hidden;
}

.main_visual {
      position: relative;
      width: 100%;
      height: 100vh;
}

@media screen and (max-width:1024px) {
      .main_visual {
            height: 92vh;
      }
}

.main_visual .inner {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      z-index: 20;
      background-color: rgb(240, 240, 240);
}

.gradient_overlay_top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
      pointer-events: none;
      z-index: 10;
}
.gradient_overlay_bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 150px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      pointer-events: none;
      z-index: 10;
}

.main_visual .inner .main_visual_slide {
      width: 100%;
      height: 100%;
}

.main_visual .inner .main_visual_slide .swiper-slide .bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 0;
      opacity: 0;
      transform: scale(1); /* 초기 확대 제거 */
}

/* 각 슬라이드별 배경 이미지 지정 */
.main_slide_1 .bg {
      background-image: url('/resources/img/main/main_visual_1.jpg');
      background-position: center;
}
.main_slide_2 .bg {
      background-image: url('/resources/img/main/main_visual_2.jpg');
      background-position: center;
}
.main_slide_3 .bg {
      background-image: url('/resources/img/main/main_visual_3.jpg');
      background-position: bottom;
      filter: brightness(2);
}
.main_visual .inner .main_visual_slide .main_slide_3.swiper-slide-active .bg {
      filter: brightness(1);
      transition-delay: 3s;
      transition: all 2s ease-in-out;
}

/* 애니메이션 키프레임 (공통으로 하나만 사용해도 충분) */
@keyframes zoomFadeInOnce1 {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}







.main_slide_3 .main_visual_txt_motion {
      position: absolute;
      display: block;
      top: 25%;
      left: 15%;
      /* width: 10%; */
      height: 32px;
      z-index: 1;
}

.main_visual_txt_motion h3{
      font-size: 2.5rem;
      color: #28313A;
      font-weight: 500;
      line-height: 1.2;
}
.main_slide_3 .main_visual_txt_motion h3 b {
      font-weight: 700;
      font-size: 4.5rem;
      font-family: 'Nanum Myeongjo';
      opacity: 0;
}
/* .main_slide_3 .main_visual_txt_motion h3 .main_visual_txt_motionb {
      font-size: 4.5rem;
      opacity: 0;
      animation: fontGrow 2s ease forwards;
      animation-delay: 2s;
      font-family: 'Nanum Myeongjo'
} */
.main_slide_3.swiper-slide-active .main_visual_txt_motion h3 .main_visual_txt_motionb {
      font-size: 4.5rem;
      opacity: 0;
      animation: fontGrow 2s ease forwards;
      animation-delay: 2s;
      font-family: 'Nanum Myeongjo'
}

@keyframes fontGrow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
      }
}

.main_slide_3 .main_visual_txt_motion h3 span{
      font-size: 2.3rem;
      color: #28313A;
      font-weight: 600;
      line-height: 1.2;
      opacity: 0;
}
.main_slide_3.swiper-slide-active .main_visual_txt_motion h3 span{
      font-size: 2.3rem;
      color: #28313A;
      font-weight: 600;
      line-height: 1.2;
      opacity: 0;
      animation: fontGrow1 2s ease forwards;
      animation-delay: 4s;
}
@keyframes fontGrow1 {
      from {
            opacity: 0;
            transform: translateY(-30px);
      }
      to {
      opacity: 1;
      transform: translateY(0);
      }
}

.main_slide_3.swiper-slide-active .main_visual_txt_motion h3 .main_visual_txt_motionbb {
      font-size: 4.5rem;
      opacity: 0;
      animation: fontGrow2 2s ease forwards;
      animation-delay: 6s;
      margin-bottom: 10px;
      font-family: 'Nanum Myeongjo'
}

@keyframes fontGrow2 {
      from {
            opacity: 0;
      }
      to {
            opacity: 1;
      }
}

.main_slide_3.swiper-slide-active .main_visual_txt_motion .main_visual_txt_motion_line {
      width: 1px;
      background-color: #808283;
      height: 0;
      animation: fontGrow3 2s ease forwards;
      animation-delay: 8s;
      display: block;
}

@keyframes fontGrow3 {
      from {
            height: 0;
      }
      to {
            height: 80px;
      }
}

.main_slide_3 .main_visual_txt_motion .main_visual_motion_img {
      top:50%;
      left: 0;
      opacity: 0;
      position: relative;
      width: 100%;
}
.main_slide_3.swiper-slide-active .main_visual_txt_motion .main_visual_motion_img {
      animation: imgGrow 2s ease forwards;
      animation-delay: 10s;
}
@keyframes imgGrow {
      from {
            opacity: 0;
      }
      to {
            opacity: 1;
      }
}



@media screen and (max-width:1600px) {
      

.main_slide_3 .main_visual_txt_motion {
      position: absolute;
      display: block;
      top: 25%;
      left: 15%;
      /* width: 10%; */
      height: 32px;
      z-index: 1;
}

.main_visual_txt_motion h3{
      font-size: 2rem;
      color: #28313A;
      font-weight: 500;
      line-height: 1.2;
}
.main_slide_3 .main_visual_txt_motion h3 b {
      font-weight: 700;
      font-size: 3rem;
      font-family: 'Nanum Myeongjo';
      opacity: 0;
}
.main_slide_3.swiper-slide-active .main_visual_txt_motion h3 .main_visual_txt_motionb {
      font-size: 3rem;
      opacity: 0;
      animation: fontGrow 2s ease forwards;
      animation-delay: 2s;
}

@keyframes fontGrow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
      }
}

.main_slide_3  .main_visual_txt_motion h3 span{
      font-size: 1.5rem;
      color: #28313A;
      font-weight: 500;
      line-height: 1.2;
      opacity: 0;
}
.main_slide_3.swiper-slide-active .main_visual_txt_motion h3 span{
      font-size: 1.5rem;
      color: #28313A;
      font-weight: 500;
      line-height: 1.2;
      opacity: 0;
      animation: fontGrow1 2s ease forwards;
      animation-delay: 4s;
}
@keyframes fontGrow1 {
    from {
        opacity: 0;
      transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
      }
}

.main_slide_3.swiper-slide-active .main_visual_txt_motion h3 .main_visual_txt_motionbb {
      font-size: 3rem;
      opacity: 0;
      animation: fontGrow2 2s ease forwards;
      animation-delay: 6s;
      margin-bottom: 10px;
}

@keyframes fontGrow2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
      }
}

.main_slide_3.swiper-slide-active .main_visual_txt_motion .main_visual_txt_motion_line {
      width: 1px;
      background-color: #808283;
      height: 0;
      animation: fontGrow3 2s ease forwards;
      animation-delay: 8s;
      display: block;
}

@keyframes fontGrow3 {
    from {
        height: 0;
    }
    to {
        height: 50px;
      }
}

.main_slide_3 .main_visual_txt_motion .main_visual_motion_img {
      left: 0;
      opacity: 0;
      position: relative;
      width: 60%;
}
.main_slide_3.swiper-slide-active .main_visual_txt_motion .main_visual_motion_img {
      animation: imgGrow 2s ease forwards;
      animation-delay: 10s;
}
@keyframes imgGrow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


}
/* .main_visual .inner .main_visual_slide .main_slide_1 .main_visual_txt {
      width: 40%;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      position: relative;
      display: block;
      opacity: 0;
      transition: all 1s ease-in-out;
      transition-delay: 0s;
      z-index: 10;
}
.main_visual .inner .main_visual_slide .main_slide_1.swiper-slide-active .main_visual_txt {
      opacity: 1;
      top: 5%;
      transition-delay: 0.8s;
} 







.main_visual .inner .main_visual_slide .main_slide_2 .main_visual_txt {
      width: 40%;
      top: 5%;
      left: 50%;
      transform: translateX(-50%);
      position: relative;
      display: block;
      opacity: 0;
      transition: all 1s ease-in-out;
      transition-delay: 0s;
      z-index: 10;
}

.main_visual .inner .main_visual_slide .main_slide_2.swiper-slide-active .main_visual_txt {
      opacity: 1;
      top: 0%;
      transition-delay: 0.8s;
}





.main_visual .inner .main_visual_slide .main_slide_3 .main_visual_txt {
      width: 15%;
      top: 22%;
      left: 50%;
      transform: translateX(-50%);
      position: relative;
      display: block;
      opacity: 0;
      transition: all 1s ease-in-out;
      transition-delay: 0s;
      z-index: 10;
}

.main_visual .inner .main_visual_slide .main_slide_3.swiper-slide-active .main_visual_txt {
      opacity: 1;
      top: 16%;
      transition-delay: 0.8s;
}*/






@media screen and (max-width: 1024px) {
.main_slide_1 .bg {
      background-image: url('/resources/img/main/main_visual_1m.jpg');
      background-position: center;
}
.main_slide_2 .bg {
      background-image: url('/resources/img/main/main_visual_2m.jpg');
      background-position: center;
}
.main_slide_3 .bg {
      background-image: url('/resources/img/main/main_visual_3m.jpg');
      background-position: bottom;
}
      .main_visual .inner .main_visual_slide .main_slide_1 .main_visual_txt {
            width: 90%;
      }
      .main_visual .inner .main_visual_slide .main_slide_2 .main_visual_txt {
            width: 90%;
      }
      .main_visual .inner .main_visual_slide .main_slide_2 .main_visual_txt {
      top: 0%;
      }
      .main_visual .inner .main_visual_slide .main_slide_2.swiper-slide-active .main_visual_txt {
      top: -7%;
      }
      .main_visual .inner .main_visual_slide .main_slide_3 .main_visual_txt {
            width: 50%;
      }
      .gradient_overlay_top {display: none;}




      .main_slide_3 .main_visual_txt_motion {
      top: 7%;

}
.main_slide_3 .main_visual_txt_motion .main_visual_motion_img {
      width: 70%;
}
}
@media screen and (max-width: 720px) {
      .main_visual .inner .main_visual_slide .main_slide_1 .main_visual_txt {
            width: 100%;
      }
      .main_visual .inner .main_visual_slide .main_slide_2 .main_visual_txt {
            width: 120%;
      }
      .main_visual .inner .main_visual_slide .main_slide_3 .main_visual_txt {
            width: 50%;
      }
}
@media screen and (max-width: 400px) {
      .main_visual .inner .main_visual_slide .main_slide_1 .main_visual_txt {
            width: 130%;
      }
      .main_visual .inner .main_visual_slide .main_slide_2 .main_visual_txt {
            width: 150%;
      }
      .main_visual .inner .main_visual_slide .main_slide_3 .main_visual_txt {
            width: 70%;
      }
}




.main_swiper_btn {
      width: 90%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 999;
      position: relative;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      max-width: 1720px;
}

.main_swiper_btn .page_num {
      width: 19%;
      color: #fff;
      font-family: "Montserrat";
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.main_swiper_btn .page_num .strong {
      font-weight: 500;
      font-size: 14px;
      color: #fff;
      opacity: 1;
}

.main_swiper_btn .page_num span {
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      opacity: 0.4;
}

.main_swiper_btn .page_num .progress_bar {
      width: 15%;
      height: 1px;
      margin: 0 auto;
      position: absolute;
      left: 2%;
      border-radius: 2px;
      overflow: hidden;
}

.main_swiper_btn .page_num .progress_bar::after {
      content: "";
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: #fff;
      opacity: 0.4;
}

.main_swiper_btn .page_num .progress_bar span {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 2px;
      display: block;
      z-index: 999;
      border-radius: 2px;
      transition: all 0.5s;
      background: #fff;
      opacity: 1;
}




/* 메인비주얼3개 */
/* .main_swiper_btn .page_num .progress_bar .span1 {
      width: 0%;
      transition: all 0.5s;
      animation: progressBarAnimation 0.5s forwards;
}

@keyframes progressBarAnimation {
      from {
            width: 0%;
      }

      to {
            width: 33%;
      }
}

.main_swiper_btn .page_num .progress_bar .span2 {
      width: 33%;
      transition: all 0.5s;
      animation: progressBarAnimation1 0.5s forwards;
}

@keyframes progressBarAnimation1 {
      from {
            width: 33%;
      }

      to {
            width: 66%;
      }
}

.main_swiper_btn .page_num .progress_bar .span3 {
      width: 66%;
      transition: all 0.5s;
      animation: progressBarAnimation2 0.5s forwards;
}

@keyframes progressBarAnimation2 {
      from {
            width: 66%;
      }

      to {
            width: 100%;
      }
} */



/* 메인비주얼2개 */
.main_swiper_btn .page_num .progress_bar .span1 {
      width: 0%;
      transition: all 0.5s;
      animation: progressBarAnimation 0.5s forwards;
}

@keyframes progressBarAnimation {
      from {
            width: 0%;
      }

      to {
            width: 50%;
      }
}

.main_swiper_btn .page_num .progress_bar .span2 {
      width: 50%;
      transition: all 0.5s;
      animation: progressBarAnimation1 0.5s forwards;
}

@keyframes progressBarAnimation1 {
      from {
            width: 50%;
      }

      to {
            width: 100%;
      }
}




.autoplay-toggle {
      position: absolute;
      bottom: 30%;
      left: 20%;
      z-index: 20;
      color: white;
      border: none;
      cursor: pointer;
      background-color: transparent;
}

.main_swiper_btn .main_swiper_np {
      width: 7%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
}

.swiper-button-prev::after,
.swiper-button-next::after {
      display: none !important;
}

.main_swiper_btn .main_swiper_np .swiper-button-next {
      background-image: url('../img/main/swiper_next.png');
      width: 50px;
      height: 50px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      margin-top: 0;
      top: 50%;
      right: 1%;
      transform: translateY(-50%);
}

.main_swiper_btn .main_swiper_np .swiper-button-prev {
      background-image: url('../img/main/swiper_prev.png');
      width: 50px;
      height: 50px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      margin-top: 0;
      left: 0;
      top: 50%;
      margin-right: 10%;
      transform: translateY(-50%);
}




/* shorts */

.shorts .main_swiper_btn {
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
}

.shorts .main_swiper_btn .main_swiper_np { 
      justify-content: center;
      width: 100%;
}

@media screen and (max-width:1024px) {
      .main_swiper_btn {
            width: 100%;
            bottom: 9vh;
            padding: 0 5%;
            z-index: 999;
            /* background-color: rgb(80, 80, 80); */
      }

      .main_swiper_btn .page_num {
            width: 62%;
      }
      .main_swiper_btn .page_num .progress_bar {
            left: 10%;
            width: 46%;
      }
      .autoplay-toggle {
            left: 62%;
      }
      .main_swiper_btn .main_swiper_np {
            width: 25%;
      }

      .shorts .main_swiper_btn {
            pointer-events: unset;
            opacity: 1;
            visibility: initial;
      }
      .main_short .con {
            transform: translateY(-30px);
      }
      .main_short .video-swiper {
            
      }
}



/********************************************
      메인 > 숏츠
********************************************/

.main_short .tit .button {
      display: none !important;
}

@media screen and (min-width: 1024px) {
      .main_short {
            position: relative;
            width: 100%;
            /* aspect-ratio: 1920/1080; */
            height: 100vh;
            display: flex;
            justify-content: center;
            background: url("/resources/img/main/main_short_bg_right.jpg") no-repeat;
            background-size: cover;
            background-position: center;
      }

      .main_short .tit {
            /* width: min(calc(650/1920 * 100%), 650px) !important; */
            width: 48%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 8%;
            /* padding: 0 0 0 min(calc(100/1920 * 100%), 100px); */
      }

      .main_short .tit::after {
            content: "";
            display: block;
      }

      .main_short .tit .text {
            width: min(calc(424/1920 * 100vw), 424px);
            aspect-ratio: 424/200;
            background: url("/resources/img/main/main_short_text.png") no-repeat 0 0;
            background-size: 80% auto;
      }

      .main_short .tit .button {
            width: 424px;
            display: flex;
      }

      .main_short .tit .button a {
            display: block;
            width: 46px;
            height: 46px;
            border-radius: 61px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s;
            margin: 0 15px 0 0;
            background: url("/resources/img/main/swiper_next_b.png") no-repeat 0 0;
            background-size: contain;
      }

      .main_short .tit .button a.prev-btn {
            background: url("/resources/img/main/swiper_prev_b.png") no-repeat 0 0;
            background-size: contain;
      }

      .main_short .tit .button a.next-btn {
            background: url("/resources/img/main/swiper_next_b.png") no-repeat 0 0;
            background-size: contain;
      }

      .main_short .tit .button a span {
            display: none;
      }


      /* 메인 > 숏츠 > 컨텐츠 */
      .main_short .con {
            position: relative;
            width: 52%;
            height: 100%;
            z-index: 99;
      }

      .shorts .swiper-container {
            position: absolute;
            right: 20%;
            top: 0px;
            width: 100%;
            height: 100%;
      }

      .shorts .video-container {
            overflow: hidden;
            border-radius: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            height: 100%;
      }

      .shorts .swiper-container .swiper-wrapper {
            width: auto;
            transform: translate3d(0, 0, 0) !important;
            display: flex;
            align-items: center;
            justify-content: flex-end;
      }

      .section.interior {
            background: url(/resources/img/main/bg_interior.jpg) 50% / cover no-repeat;
      }

      .shorts .swiper-container .swiper-slide {
            width: 24% !important;
            height: 25.5vw;
            transition: all 0.3s;
            margin: 0 25px 0 0;
      }

      .shorts .swiper-container .swiper-slide:hover {
            width: 28% !important;
            height: 30vw;
      }

      /* .shorts .swiper-container .swiper-slide.swiper-slide-active {
            width: 28% !important;
            height: 30vw;
      } */

      .shorts .swiper-container .swiper-slide.shorts_slide_2 {
            margin-top: 15%;
      }

      .shorts .swiper-container .swiper-slide.shorts_slide_3 {
            margin-top: -15%;
      }
      /* .shorts .swiper-container .swiper-slide.shorts_slide_3 {
            margin-top: -15%;
            background-image: url('/resources/img/main/shorts_ready.png');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
      } */

      .shorts .fp-tableCell {
            vertical-align: top;
      }

      .shorts .swiper-button-prev {
            width: 169px;
            height: 12px;
            background: url(/resources/img/main/video_prev.png) no-repeat;
            left: 14.0625vw;
            top: auto;
            margin: 0;
            bottom: 5vh;
      }

      .shorts .swiper-button-next {
            width: 169px;
            height: 12px;
            background: url(/resources/img/main/video_next.png) no-repeat;
            right: 14.0625vw;
            top: auto;
            margin: 0;
            bottom: 5vh;
      }

      .shorts .swiper-pagination-fraction {
            bottom: 5vh;
            font-family: "Montserrat";
            font-size: 18px;
            letter-spacing: 0.1em;
            width: 40%;
            left: 30%;
            font-weight: 400;
      }

      .shorts .swiper-pagination-current {
            font-size: 24px;
            font-weight: 700;
            color: #161f3f;
      }

      .shorts .swiper-pagination-current::before {
            content: "0";
      }

      .shorts .swiper-pagination-total::before {
            content: "0";
      }
}

@media screen and (max-width: 1024px) {
      .main_short {
            position: relative;
            width: 100%;
            /* aspect-ratio: 1920/1080; */
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: url("/resources/img/main/main_short_bg_right_m.jpg") no-repeat;
            background-size: cover;
            background-position: center;
      }
      .main_short .tit {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 99;
            /* background: url("/resources/img/main/main_short_bg_left.jpg") no-repeat 0 0;
            background-size: cover; */
      }

      .main_short .tit .text {
            margin: 0 auto;
            width: min(calc(550/720 * 100vw), 550px);
            aspect-ratio: 550/480;
            background: url("/resources/img/main/main_short_text_m.png") no-repeat 0 0;
            background-size: 90% auto;
            background-position: center;
      }

      .main_short .tit .button {
            display: none;
      }
            /* .main_short .tit .button {
            margin: 0 auto;
            width: min(calc(550/720 * 100vw), 550px);
            display: flex;
      } */

      .main_short .tit .button a {
            display: block;
            width: min(calc(61/720 * 100vw), 61px);
            height: min(calc(61/720 * 100vw), 61px);
            border-radius: min(calc(61/720 * 100vw), 61px);
            position: relative;
            overflow: hidden;
            transition: all 0.5s;
            margin: 0 min(calc(20/720 * 100vw), 20px) 0 0;
            background: url("/resources/img/main/swiper_prev_b.png") no-repeat 0 0;
            background-size: contain;
      }

      /* .main_short .tit .button a.prev-btn:hover { 
            background: url("/resources/img/main/btn_left_active.png") no-repeat 0 0;
            background-size: contain;      
      } */
      .main_short .tit .button a.next-btn {
            background: url("/resources/img/main/swiper_next_b.png") no-repeat 0 0;
            background-size: contain;
      }

      .main_short .tit .button a::after {
            content: "";
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: var(--gradient_bg);
            background: var(--gradient_bg2);
            transition: all 0.5s;
            z-index: -1;
      }

      .main_short .tit .button a span {
            display: none;
      }

      .main_short .con {
            position: relative;
            width: 100%;
            aspect-ratio: 720/1064;
            height: 100%;
            z-index: 99;
      }

      /* 메인 > 숏츠 > 컨텐츠 */
      .shorts .swiper-container {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0 0 0 0;
      }

      .shorts .video-container {
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.45);
            -webkit-box-shadow: 1px 0px 12px 3px rgba(0, 0, 0, 0.45);
            -moz-box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.45);
            background: url(/resources/img/sub/comingsoon.jpg) 50% / contain no-repeat;
      }

      /* .section.interior {
            background: url(/resources/img/main/bg_interior.jpg) 50% / cover no-repeat;
      } */
      .shorts .swiper-container .swiper-slide {
            display: flex;
            align-items: center;
            width: min(calc(560/840 * 100vw), 460) !important;
            aspect-ratio: 560/840;
            transition: all 0.3s;
            /* margin: 0 0 0 -30px; */
      }

      .shorts .swiper-container .swiper-slide .video-container {
            margin: 0 auto;
            width: min(calc(460/720 * 100vw), 460px) !important;
            aspect-ratio: 390/720;
            transition: all 0.3s;
      }

      .shorts .swiper-container .swiper-slide.swiper-slide-active .video-container {
            margin: 0 auto;
            width: min(calc(460/720 * 100vw), 560px) !important;
            aspect-ratio: 460/850;
            transition: all 0.3s;
      }

      .shorts .fp-tableCell {
            vertical-align: top;
      }

      .shorts .swiper-button-prev {
            width: 169px;
            height: 12px;
            background: url(/resources/img/main/video_prev.png) no-repeat;
            left: 14.0625vw;
            top: auto;
            margin: 0;
            bottom: 5vh;
      }

      .shorts .swiper-button-next {
            width: 169px;
            height: 12px;
            background: url(/resources/img/main/video_next.png) no-repeat;
            right: 14.0625vw;
            top: auto;
            margin: 0;
            bottom: 5vh;
      }

      .shorts .swiper-pagination-fraction {
            bottom: 5vh;
            font-family: "Montserrat";
            font-size: 18px;
            letter-spacing: 0.1em;
            width: 40%;
            left: 30%;
            font-weight: 400;
      }

      .shorts .swiper-pagination-current {
            font-size: 24px;
            font-weight: 700;
            color: #161f3f;
      }

      .shorts .swiper-pagination-current::before {
            content: "0";
      }

      .shorts .swiper-pagination-total::before {
            content: "0";
      }

      .shorts .swiper-container .swiper-slide { 
            width: 60% !important; 
            margin-left: 20px;
            margin-right: 20px;
      }
      .shorts .swiper-container .swiper-slide.swiper-slide-active .video-container {
            width: 100% !important;
      }
}




/* showroom */
.showroom_wrap {
      position: relative;
      height: 100vh;
      padding-top: 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: background-image 0.5s ease;
}


.showroom_wrap.bg_1 {
      background-image: url('/resources/img/main/showroom_bg_1.jpg') !important;
}

.showroom_wrap.bg_2 {
      background-image: url('/resources/img/main/showroom_bg_2.jpg') !important;
}

.showroom_wrap.bg_3 {
      background-image: url('/resources/img/main/showroom_bg_3.jpg') !important;
}

.showroom_con {
      width: 35%;
      height: 100%;
      border-top-left-radius: 600px;
      border-top-right-radius: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background-color: rgb(255, 255, 255);
      overflow: hidden;
}

.showroom_tit {
      padding-top: 12%;
      width: 20%;
      display: flex;
      justify-content: center;
}

.showroom_tit img {
      width: 100%;
      height: 100%;
      min-width: 100px;
}

.showroom_swiper {
      width: 100%;
}

.showroom_swiper .swiper-wrapper .swiper-slide {
      width: 100%;
      /* background-color: rgba(255, 99, 71, 0.575); */
      padding-top: 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
}

.showroom_swiper .swiper-wrapper .swiper-slide img {
      width: 65%;
      padding-bottom: 3%;
      height: auto;
}


.showroom_slide_btn {
      width: 100%;
      padding: 0 20%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
}

.showroom_slide_btn h4 {
      color: #000;
      font-size: 30px;
      font-weight: 600;
      font-family: 'Montserrat', sans-serif
}

.showroom_slide_btn h4 span {
      color: #000;
      font-size: 20px;
      font-weight: 300;
}

.showroom_slide_btn_bar {
      width: 35%;
      height: 1px;
      background-color: #ccc;
      display: block;
}


.showroom_slide_btn a {
      background-color: #2E3C47;
      padding: 2% 10% 2.5% 5%;
      color: #fff;
      font-size: 18px;
      border-radius: 30px;
}

.showroom_slide_btn a:after {
      display: block;
      content: "";
      width: 20px;
      height: 20px;
      background: url(../img/main/ic_plus.png) center no-repeat;
      position: absolute;
      right: 22%;
      bottom: 2.7%;
      transition: all 0.3s;
}

.showroom_slide_btn a:hover:after {
      transform: rotate(90deg);
}


.showroom_swiper_scroll {
      width: 100% !important;
      height: 1px !important;
      background-color: #ABB1B5;
      position: relative !important;
      margin: 6% 0;
      left: 0 !important;
}

.showroom_indicator {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 2% 0 6%;
}

.showroom_indicator .indicator {
      cursor: pointer;
      text-align: center;
      opacity: 0.5;
      transition: opacity 0.3s ease;
      width: 29%;
}

.showroom_indicator .indicator.active {
      opacity: 1;
      font-weight: bold;
}

.showroom_indicator .indicator img {
      width: 100%;
      height: auto;
}

.showroom_indicator .indicator h4 {
      font-size: 18px;
      font-weight: 600;
}

.showroom_indicator .indicator h4 span {
      font-size: 15px;
      font-weight: 400;
}


.showroom_ori {
      position: absolute;
      left: 4%;
      bottom: 4%;
      font-size: 14px;
      color: #fff;
}

@media screen and (max-width: 1600px) {
      .showroom_wrap {
            height: 115vh;
      }
      .showroom_slide_btn {
            padding: 0 12%;
      }
      .showroom_slide_btn a:after {
            right: 14%;
            bottom: 3.7%;
      }
      .showroom_indicator {
            margin: 0 0 6%;
      }
      .showroom_ori {
            font-size: 8px;
      }
}

@media screen and (max-width: 1530px) {
      .showroom_con {
            width: 40%;
      }
}
@media screen and (max-width: 1024px) {
      .showroom_wrap {
            padding-top: 35%;
            height: 100%;
      }
      .showroom_con {
            width: 90%;
      }

      .showroom_indicator {
            width: 60%;
            margin: 2% 0 15%;
      }
      .showroom_slide_btn h4 {
      font-size: 5vw;
      }
      .showroom_slide_btn h4 span {
            font-size: 4vw;
      }
      .showroom_slide_btn_bar {
            width: 23%;
      }
      .showroom_slide_btn a {
            padding: 2% 10% 2.5% 5%;
            font-size: 4vw;
      }
      .showroom_slide_btn a:after {
      width: 4%;
      height: 8%;
      }
      .showroom_ori {
      position: absolute;
      left: 50%;
      bottom: 2%;
      font-size: 14px;
      transform: translateX(-50%);
      color: #000;
      width: 90%;
      text-align: center;
      }
}
@media screen and (max-width: 640px) {
      .showroom_slide_btn h4 {
      font-size: 4vw;
      }
      .showroom_slide_btn h4 span {
            font-size: 3vw;
      }
      .showroom_slide_btn a {
            padding: 2% 10% 2.5% 5%;
            font-size: 3vw;
      }
      .showroom_ori {
      font-size: 2.5vw;
      bottom: 3%;
      }
}






/* sec04 */
.sec04 {
      background-color: #66A8C1;
}


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

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

.main_slide_con .part_s {
      height: 100vh;
      overflow: hidden;
      display: flex;
}

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

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

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

.main_slide_con .part_in.dw .abs {
      padding-top: 22vh;
}

.main_slide_con2 .part_in .abs {
      padding-top: 54vh !important;
}

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

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

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

.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_slide_con .part_w>img {
      opacity: 0;
      visibility: hidden;
      width: 100%;
}

.main_slide_con .part_in:hover a {
      opacity: 1;
}

.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_slide_con .part_in1:hover .part1 {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

.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_slide_con .part2:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

.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_slide_con .part3:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

.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_slide_con .part4:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

.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_slide_con .part5:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

.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_slide_con .part6:hover {
      filter: grayscale(0%);
      background-size: 105% 105%;
}

/* .main_slide_con .part_in {
    margin-top: -100vh;
  }
  .main_slide_con .part_in.dw {
    margin-top: 100vh;
  }
  .sec04.fp-completely .main_slide_con .part_in {  
    margin-top: 0;
  }
  .main_slide_con.swiper-slide-prev .part_in {  
    margin-top: 0;
  } */

.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_slide_con .part_in .abs p {
            font-size: 1.4rem;
            line-height: 1.8rem;
            margin: 1.3rem 0;
      }

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

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

@media screen and (max-width: 989px) {
      .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;
      }
}




/* photo_wrap */
.photo_wrap {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-image: url('../img/main/photo_wrap_bg.jpg');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
}
.photo_txt {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      text-align: center;
}
.photo_txt p {
      font-size: 2.2rem;
      color: #6DC7E9;
      font-weight: 600;
      letter-spacing: -1px;
}
.photo_txt h3 {
      font-size: 3rem;
      color: #fff;
      font-weight: 800;
      letter-spacing: -1px;
}
.photo_txt span {
      font-size: 1.6rem;
      color: #fff;
      font-weight: 300;
      letter-spacing: -1px;
      line-height: 1.4;
      margin-top: 5%;
}
.photo_txt span b {
      font-weight: 700;
}

@media screen and (max-width: 1600px) {
      .photo_txt p {
            font-size: 1.5rem;
      }
      .photo_txt h3 {
            font-size: 2rem;
      }
      .photo_txt span {
            font-size: 1rem;
      }
}
@media screen and (max-width: 1024px) {
      .photo_wrap {padding: 0 10%;}
}
@media screen and (max-width: 720px) {
      .photo_txt p {font-size: 4vw;}
      .photo_txt h3 {font-size: 6vw;}
      .photo_txt span {font-size: 2.5vw;}
}
@media screen and (max-width: 640px) {
      .photo_wrap {padding: 0 5%;}
      .photo_txt p {font-size: 5vw;}
      .photo_txt h3 {font-size: 7vw;}
      .photo_txt span {font-size: 3.5vw;}
}




/* location */
.location {background:url('../img/main/location_bg.jpg') center center no-repeat; background-size:cover; height: 100vh; display: flex; align-items: center; justify-content: center;}
.location .header_wrap {margin-bottom:43px; text-align:center;}
.location .header_wrap p {font-size: 27px; color: #66A8C1; font-weight: 600;}
.location .header_wrap h3 {font-size: 47px; color: #26323B; font-weight: 800;}

.location .content_wrap {display: flex; justify-content: center; align-items: flex-start; text-align:center;}
.location .content_wrap .item ~ .item {margin-left: 48px;}
.location .content_wrap .thumb {font-size:0;;}
.location .content_wrap .info {display: inline-block; min-height: 56px;; margin-top: 25px;;}
/* .location .content_wrap .info::after {content: ''; display: block; clear:both;} */
.location .content_wrap .info .tit {float:left; font-size:20px; font-weight: 600; padding-right:22px; position:relative; margin-right: 21px;;}
.location .content_wrap .info .tit::after {content: ''; position:absolute; right:0; top:50%; width:1px; height:16px; margin-top: -8px; background:#8D867D;}
.location .content_wrap .info .ct {float:left; overflow: hidden; color:#6C6C6C; font-size:20px;; text-align:left;}
.location .content_wrap .map {margin-top: 22px;}
.location .content_wrap .map .btn {display:inline-flex; vertical-align:middle; height: 36px; line-height:36px; font-size:16px; color:#26323B; position:relative; padding-left: 50px;;}
.location .content_wrap .map .btn ~ .btn {margin-left: 38px;}
.location .content_wrap .map .btn::before {content: ''; position:absolute; left: 0; top: 50%; width:36px; height:36px; margin-top: -18px; background:0 0 no-repeat;}
.location .content_wrap .map .btn.naver::before {background-image:url('../img/main/map_naver.png');}
.location .content_wrap .map .btn.kakao::before {background-image:url('../img/main/map_kakao.png');}


@media screen and (max-width: 1600px) {
      .location {height: 120vh;}
      .location .header_wrap p {font-size: 22px;}
      .location .header_wrap h3 {font-size: 35px;}
      .location .content_wrap .info {min-height: 33px;}
      .location .content_wrap .map {margin-top: 15px;}
}

@media screen and (max-width: 1024px) {
      .location {background-image:url('../img/main/location_bg_m.jpg'); height: 100%; padding: 0 15%;}
      .location .section_inner {padding:90px 0 102px;}
      .location .content_wrap {display: block;}
      .location .content_wrap .item ~ .item {margin: 10vw 0 0;}
      .location .content_wrap .thumb img {width:100%;}
      .location .content_wrap .info {min-height:auto; margin-top: 4vw; display: flex; justify-content: center; align-items: center;}
      .location .content_wrap .info .tit {font-size: 3vw; padding-right:20px; margin-right: 19px;;}
      .location .content_wrap .info .tit::after {height:12px; margin-top: -6px;}
      .location .content_wrap .info .ct { font-size: 3vw;}
      .location .content_wrap .map {margin-top: 25px;}
      .location .content_wrap .map .btn {height: 18px; line-height:18px; font-size: 3vw; padding-left:32px; font-weight: 400;}
      .location .content_wrap .map .btn ~ .btn {margin-left: 18px;}
      .location .content_wrap .map .btn::before {width:25px; height:25px; margin-top: -10px; background-size:100% 100%;;}
}


@media screen and (max-width: 640px) {
      .location .header_wrap p {font-size: 5vw;}
      .location .header_wrap h3 {font-size: 9vw;}
}


@media screen and (max-width: 460px) {
      .location .content_wrap .info {padding: 0; align-items: flex-start;}
      .location .content_wrap .info .tit {font-size: 3.5vw; padding-right:20px; margin-right: 19px; white-space: nowrap;}
      .location .content_wrap .info .ct { font-size: 3.5vw;}
      .location .content_wrap .map .btn {height: 18px; line-height:18px; font-size: 4vw; padding-left:32px; font-weight: 400;}
      .location .content_wrap .map .btn ~ .btn {margin-left: 18px;}
      .location .content_wrap .map .btn::before {width:25px; height:25px; margin-top: -11px; background-size:100% 100%;;}
}


.video-container { 
      position: relative;
      overflow: hidden;
}

.bg-button-thumb {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
}
.bg-button-thumb.bg-button-thumb0 {
      background-image: url('/resources/img/main/yt-thumb0.jpg');
}
.bg-button-thumb.bg-button-thumb1 {
      background-image: url('/resources/img/main/yt-thumb1.jpg');
}
.bg-button-thumb.bg-button-thumb2 {
      background-image: url('/resources/img/main/yt-thumb2.jpg');
}

.bg-button-active {
      cursor: pointer;
}

.bg-button-active.active {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
}