@charset "utf-8";
@font-face {
  font-family: 'GowunDodum-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}



/* #contents {text-align:center;} */

.mainArea { position:relative; }
/*.mainArea #contents { padding-top:3.5%;}*/

.mainTypo { position: absolute; text-align: right; z-index: 35; left: 50%; top: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); font-family: 'Oleo Script', cursive; font-size:3.07em; color:#000; }
.mainTypo p { display:inline-block; margin:-1em auto 0; text-align:right; font-family: 'Crimson Text', serif; font-size: 7.7em; font-size: 5.25vw; line-height: 0.8em; font-weight:100; color:#4cc1e3; pointer-events: none;}

/*.mainCon { position:relative; background:#f1efef; padding-bottom:30px; margin-top: -9.5%; padding-top: 15%;}*/
.mainCon { position:relative; background:#f1efef; padding-bottom:30px; padding-top: 15%;}
.mainCon:after {content:"";display:block;clear:both;}
.mainLink { position:absolute; width:80%; left:10%; top:50%; margin-top:-26px; z-index:2;}
.mainLink li { float:left; width:33.3%; text-align:center;}
.mainLink li a { position:relative; display:inline-block; padding:0 0.8em 0 0.5em; font-family: 'Playfair Display', serif; font-size:2.5em; line-height:1.6em; font-style:italic; border-bottom:1px solid rgba(255, 255, 255, 0.5); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.mainLink li a .line{ position:absolute; right:0; bottom:0; width:10px; height:1px; background:url(../images/bg/white_50.png); transform: translate(0, -3px) rotate(45deg); -ms-transform: translate(0, -3px) rotate(45deg); -webkit-transform: translate(0, -3px) rotate(45deg); }
.mainLink li a:hover { margin-left:0.5em;}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto; width:100%; max-width:970px;height:0}
#hd_pop h2, .sound_only {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

@media  (max-width: 1480px){
#contents {font-size:0.8em;}
.mainArea { }

}

@media  (max-width: 1024px){
#contents {font-size:0.7em;}
.mainArea { width:100%; left:0;}
.mainLink { margin-top:-3.2vw; }
.mainLink li a {  padding:0 0.8em 0 0.5em; font-size:3.5vw; line-height:1.8em;}
.mainLink li a .line{  width:6px; transform: translate(0, -1.8px) rotate(45deg); -ms-transform: translate(0, -1.8px) rotate(45deg); -webkit-transform: translate(0, -1.8px) rotate(45deg); }
.mainCon { margin-top: -14.5%; padding-top: 20%; padding-bottom:0;}

.mRoom_arrow_inner {width:55%;}

/*.mRoom_arrow_inner a {width:50%; height:50px; font-size:1.8em;}*/
/*.mainArea #contents {padding-top: 15%;}*/
}


@media  (max-width: 768px){
#contents {font-size:0.6em;}
.mainArea {
  margin-top: 77px;
}

  .mainCon { margin-top: -14.5%; }
  .mRoom_title {padding-bottom: 3%;}
  .mainTypo {font-size:2.5em;}

}

@media  (max-width: 560px){
  .mainTypo {font-size:2em;}

}

.main_video_wrap { position:relative; padding-bottom:50%;  }
.main_video, .main_video_wrap iframe {position: absolute;top: 50%; left: 50%; min-width:100%; min-height:100%; width:auto; height: auto; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }







/* 메인 첫 번째 섹션*/
.main-sec01 {
  height: 730px;
  background: var(--main-brown);
  display: flex;
}
.main-sec01 > div {
  width: 50%;
}
.main-sec01 .left img, .main-sec01 .left video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-sec01 .right {
  padding: 60px 80px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.main-sec01 .right img {
  /* height: 420px; */
}

.main-sec01 h2 {
  font-size: 49px;
  letter-spacing: 0.07em;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
}
.main-sec01 .bottom {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.main-sec01 p {
  color: #fff;
  margin-bottom: 30px;
}


@media (max-width:1300px) {
  
  .main-sec01 {
    height: 750px;
  }
  .main-sec01 .right {
    padding: 40px;
  }
  .main-sec01 h2 {
    font-size: 40px;
  }
  .main-sec01 .right img {
    height: 300px;
  }

}

@media (max-width:1024px) {
  .main-sec01 {
    height: auto;
    flex-direction: column;
  }
  .main-sec01 .left {
    /* display: none; */
  }
  .main-sec01 > div {
    width: 100%;
  }
  .main-sec01 .right img {
    height: 47vw;
  }
  
}

@media (max-width:768px) {
  .main-sec01 {
    /* height: 108.25vw;
    min-height: 670px; */
  }
  .main-sec01 h2 {
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 30px;
  }
  .main-sec01 .right {
    padding: 40px 5vw;
  }
  .main-sec01 .bottom {
    margin-top: 40px;
    flex-direction: column;
    word-break: keep-all;
  }
  .main-sec01 .more-btn {
    margin-top: 5px;
    margin-left: auto;
  }
  
}




/* ---------------------- */
/* mid-banner */
.mid-banner {
  position: relative;
  height: 710px;
  background: url(/html/images/main/mid-banner.jpg) no-repeat center center / cover;
}
.mid-banner h2 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  font-family: "Dancing Script", cursive;
  color: #fff;
}

@media (max-width:768px) {
  .mid-banner {
    height: 62.5vw;
    background: url(/html/images/main/m/mid-banner.jpg) no-repeat center center / cover;
  }
  .mid-banner h2 {
    font-size: 30px;
    width: max-content;
  }

}



/* last-banner */
.last-banner {
  position: relative;
  margin: 20px 0 0;
  background: var(--main-brown);
}
.last-banner::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #000000 0%, #3E3E3E00 56%) 0% 0% no-repeat;
    opacity: 0.4;
    z-index: 1;
  }
.last-banner .text {
  position: absolute;
  left: 10%;
  top: 25%;
  z-index: 2;
}
.last-banner h2, .last-banner h3 {
  font-size: 60px;
  letter-spacing: 0.04em;
  color: #fff;
}
.last-banner h3 {
  text-align: right;
}
.last-banner p {
  margin: 20px 0 80px;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #fff;
}

.last-banner .btn-more {
  border: 1px solid #fff;
  color: #fff;
  letter-spacing: 0;
}
.last-banner .btn-more::before {
    background: #fff;
}

.last-banner .btn-more:hover {
    color: var(--main-navy);
}



@media (max-width:1400px) {
  .last-banner .text {
    top: 17%;
  }
  .last-banner h2, .last-banner h3 {
    font-size: 45px;
  }
  .last-banner p {
    font-size: 16px;
    margin: 20px 0 50px;
  }
}

@media (max-width:768px) {
  .last-banner {
    margin: 10px 0 0;
  }
  .last-banner::before {
    background: linear-gradient(89deg, #000000 0%, #3E3E3E00 82%) 0% 0% no-repeat;
    opacity: 0.43;
  }
  .last-banner .text {
    top: 30%;
  }
  .last-banner h2, .last-banner h3 {
    font-size: 40px;
    letter-spacing: 2px;
  }
  .last-banner p {
    font-size: 13px;
    letter-spacing: 0;
    margin: 0 0 30px;
  }
}