@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 { padding-top: 80px;}
  .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%); }