@charset "utf-8";

body { overflow:hidden;}

#contents {position:relative; width:100%; zoom:1;}
#contents:after {clear:both;content:"";display:block;}
.mainCon { position:relative;}
#fullpage { z-index:1;}
.section { position:relative;}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto; width:100%; max-width:970px;height:0}
#hd_pop h2 {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: 1280px){
.main .section { height:calc(100vw * 0.7) !important}
#section2 { height:calc(100vw * 0.6) !important}
}
@media  (max-width: 560px){
.main .section { height:calc(100vw * 0.8) !important}
}

.mainLine { position:absolute; width:1px; height:100%; top:0; background:#fff; opacity:0.2; filter: alpha(opacity=20;); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index:3;}
.mainLine_01 {left:20%;}
.mainLine_02 {left:40%;}
.mainLine_03 {left:60%;}
.mainLine_04 {left:80%;}
.mainNav { position:fixed; width:100%; left:0; bottom:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index:10;}
.mainNav_02 { position:absolute;  width:100%; left:0; bottom:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;opacity:0; filter: alpha(opacity=0;); visibility:hidden; z-index:10;}
.mainNav_02.on {opacity:1; filter: alpha(opacity=100;); visibility: visible;}
.mainNav:after {content:"";display:block;clear:both;}
.mainNav li, .mainNav_02 li { position:relative; float:left; width:20%;}
.mainNav li a, .mainNav_02 li a { display:block; text-align:center; padding:10px 0 0; font-family: 'Cormorant Garamond', serif; color:#fff; font-size:2em; line-height:2.5em; opacity:0.5; filter: alpha(opacity=50;); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-text-shadow: 2px 2px rgba(0, 0, 0, 0.2); -moz-text-shadow: 2px 2px rgba(0, 0, 0, 0.2); text-shadow:2px 2px rgba(0, 0, 0, 0.2);}
.mainNav li a:hover, .mainNav_02 li a:hover {opacity:0.6; filter: alpha(opacity=60;); padding:0 0 10px; }
.mainNav li a.on, .mainNav_02 li a.on {opacity:1; filter: alpha(opacity=1;); padding:0 0 10px; }
.fp-viewing-roomPre .mainLine, .fp-viewing-mainCopy .mainLine, .fp-viewing-roomPre .mainNav, .fp-viewing-mainCopy .mainNav { opacity:0; filter: alpha(opacity=0;); visibility:hidden; }
.mainNav li a span, .mainNav_02 li a span { position:absolute; width:1px; height:10px; background:#fff; left:50%; bottom:0; opacity:0; filter: alpha(opacity=0;); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.mainNav li a:hover span, .mainNav li a:focus span, .mainNav li a.on span, .mainNav_02 li a:hover span, .mainNav_02 li a span:focus, .mainNav_02 li a.on span { height:20px; opacity:1; filter: alpha(opacity=100;);}
@media  (max-width: 1280px){
.mainLine, .mainNav { filter: alpha(opacity=0;); visibility:hidden;}
.mainNav li a, .mainNav_02 li a {font-size:1.5em; line-height:2.5em;}
}

#section0 {background:url(../images/main/movie.jpg) center center no-repeat; background-size:cover;  }
.mainTypo_01 { position:absolute; width:60%; left:20%; bottom:75px; text-align:center; color:#fff; z-index:12;}
.mainTypo_01 dt {font-family: 'Cormorant Garamond', serif; font-size:5.2em; line-height:1.2em; margin-bottom:0.3em;}
.mainTypo_01 dt img { max-width:103px; vertical-align:top;}
.mainTypo_01 dd {}
.mainTypo_01 dd p {font-family: 'Cormorant Garamond', serif; font-size:1.2em; line-height:1.2em; margin-bottom:1.3em; opacity:0.8; filter: alpha(opacity=80;);}
.btn_video { display:block; width:100px; margin:0 auto; background:none; border:0; cursor:pointer;}
.main .main_scroll { display:block; width:138px; margin:0 auto;}
.main .main_scroll .text {display:block; margin:6px 0;font-family: 'Playfair Display', serif; font-size:1.1em; line-height:1.5em; color:#fff; font-style:italic; }
.main .main_scroll .line { display:block; width:1px; height:40px; background:#fff; margin:0 auto;}
.mainVideo_area { position:absolute; width:100%; height:100%; overflow:hidden; background:#000; opacity:0; filter: alpha(opacity=0;); z-index:1;}
.mainVideo_area.mobile { background:none;}
.video_frame {position: absolute;top: 50%; left: 50%; min-width:100%; min-height:100%; width:auto; height: auto; transform: translateX(-50%) translateY(-50%); opacity:0; filter: alpha(opacity=0;);z-index:2; }
.mobile_video {position:absolute; top:-500%; left:0; min-width:100%; min-height:100%;width:auto; height: auto; z-index:2;}
@media  (max-width: 1280px){
.mainTypo_01 { width:80%; left:10%; bottom:5px;}
.mainTypo_01 dt { font-size:5.2vw; line-height:1.2em; margin-bottom:0.3em;}
.mainTypo_01 dt img { width:52px;}
.mainTypo_01 dd p { display:none;}
.btn_video {width:60px; margin:0 auto;}
.main .main_scroll { display:block; width:138px; margin:0 auto;}
.main .main_scroll .text {display:block; margin:6px 0;font-family: 'Playfair Display', serif; font-size:1.1em; line-height:1.5em; color:#fff; font-style:italic; }
.main .main_scroll .line {height:10px;}
.main_video { position:absolute; left:50%; top:50%; min-width:100%; min-height:100%; width:auto; height: calc(100vw * 0.7) !important; transform: translateX(-50%) translateY(-50%); z-index:2; }
}

@media  (max-width: 768px){
.main .main_scroll { display:none;}
}
.mainTypo_02 { position:absolute; width:60%; left:20%; top:30%; text-align:center; z-index:5;}
.mainTypo_02 dt {font-family: 'Cormorant Garamond', serif; font-size:5.6em; color:#021e2f; line-height:0.8em; margin-bottom:0.3em; text-transform:uppercase;}
.mainTypo_02 dt .text_num {font-family: 'Crimson Text', serif;}
.mainTypo_02 { font-size:1.3em; line-height:1.5em; color:#021e2f;}
.mainTypo_02 p { font-family:'Noto Sans KR'; font-size:1.3em; line-height:1.5em;}
.structure { position:absolute; width:100%; height:100%; left:0; top:0; z-index:1;}
.structure_nav { position:absolute; width:25%; height:33%; left:6%; top:17%; z-index:5;}
.structure_nav li { float:left; width:33.33%; height:100%;}
.structure_nav li a { display:block; width:100%; height:100%; padding:10px 0 0; text-align:center; font-family: 'Montserrat', sans-serif; font-size:1.1em; line-height:1.5em; color:#000; text-transform:uppercase; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity:0.4; filter: alpha(opacity=40;);}
.structure_nav li a:hover, .structure_nav li a:focus, .structure_nav li a.on { padding:0 0 10px; opacity:1; filter: alpha(opacity=100;);}
.structure_nav li a span { display:block; margin:0 auto; width:1px; height:60px; background:#000;}
.structure_bg { position:absolute; width:100%; height:100%; left:0; top:0; background-position:left top !important; background-repeat:no-repeat !important; background-size:cover !important; background:url(../images/main/structure_bg.jpg); z-index:1;}
.structure_bg div {position:absolute; width:100%; height:100%; left:0; top:0; background-position:left top !important; background-repeat:no-repeat !important; background-size:cover !important;  opacity:0; filter: alpha(opacity=0;); visibility:hidden;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index:2 }
.structure_bg div.on {opacity:1; filter: alpha(opacity=100;); visibility: visible;  z-index:3;}
.structure_bg .structure_02.on { z-index:5;}
div.structure_01 { background:url(../images/main/structure_01.jpg);}
div.structure_02 { background:url(../images/main/structure_02.jpg);}
div.structure_03 { background:url(../images/main/structure_03.jpg);}

.main_scroll02 { position:absolute; left:50%; bottom:75px; margin:0 0 0 -69px !important; text-align:center;  z-index:6;}
.scroll_black .text {color:#000 !important; }
.scroll_black .line {background:#000 !important;}

@media  (max-width: 1280px){
.mainTypo_02 {width:80%; left:10%; top:auto; bottom:70px;}
.mainTypo_02 dt {font-size:5.2vw; margin-bottom:0.3em;}
.mainTypo_02 dt .text_num {font-family: 'Crimson Text', serif;}
.mainTypo_02 { font-size:0.8em; line-height:1.5em; color:#021e2f;}
.mainTypo_02 p { font-family:'Noto Sans KR'; font-size:1.3em; line-height:1.5em;}
.main_scroll02 { bottom:5px;}
.structure_nav { width:30%; top:15%;}
}

@media  (max-width: 1024px){
.structure_nav { width:28%; top:11%;}
.structure_nav li a { font-size:0.8em; line-height:1.5em;}
.structure_bg { background:url(../images/main/m/structure_bg.jpg);}
div.structure_01 { background:url(../images/main/m/structure_01.jpg);}
div.structure_02 { background:url(../images/main/m/structure_02.jpg);}
div.structure_03 { background:url(../images/main/m/structure_03.jpg);}

}
@media  (max-width: 768px){
.mainTypo_01 { bottom:20%;}
.mainTypo_02 { bottom:20px; color:#fff; opacity:0.8; filter: alpha(opacity=80;);}
.mainTypo_02 dt { color:#fff;}

}

@media  (max-width: 768px){
.structure_nav { width:33%; top:10%;}
.structure_nav li a span  { height:30px;}
}

@media  (max-width: 560px){
.structure_nav { width:45%; height:40%; left:8%; top:5%;}
.structure_nav li a span  { height:20px;}
.structure_bg { background:url(../images/main/m/structure_mbg.jpg);}
div.structure_01 { background:url(../images/main/m/structure_m01.jpg);}
div.structure_02 { background:url(../images/main/m/structure_m02.jpg);}
div.structure_03 { background:url(../images/main/m/structure_m03.jpg);}
}

.mainPre { position:absolute; width:100%; height:100%; left:0; top:0; background:#000; z-index:2;}
.mainPre li { position:relative; float:left; width:20%; height:100%;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;  }
.mainPre li.on { width:28%;}
.mainPre li.off { width:18%;}
.mainPre li a { display:block; width:100%; height:100%; opacity:0.6; filter: alpha(opacity=60;);background-position:center center !important; background-size:cover !important; background-repeat:no-repeat; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.mainPre li a:hover, .mainPre li a:focus { opacity:1; filter: alpha(opacity=100);}
/* .mainPre li a.mainPre_01 { background:url(../images/common/mainPre_01.jpg);}
.mainPre li a.mainPre_02 { background:url(../images/common/mainPre_02.jpg);}
.mainPre li a.mainPre_03 { background:url(../images/common/mainPre_03.jpg);}
.mainPre li a.mainPre_04 { background:url(../images/common/mainPre_04.jpg);}
.mainPre li a.mainPre_05 { background:url(../images/common/mainPre_05.jpg);} */
.mainPre li a > span { position:absolute; width:100%; left:0; top:50%; margin-top:-30px; font-family: 'Cormorant Garamond', serif; font-size:3.5em; line-height:1.5em; color:#fff;  text-align:center;}
.mainPre li a span span { display:block; font-size:0.6em; line-height:1.5em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;  opacity:0; filter: alpha(opacity=0;); visibility:hidden; }
.mainPre li a:hover span span, .mainPre li a:focus span span { padding-top:10px;opacity:1; filter: alpha(opacity=100;); visibility: visible;}

.mainPre_img { position:absolute; width:100%; height:100%; left:0; top:0; opacity:0; filter: alpha(opacity=0;); visibility:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index:3;}
.mainPre_img.on {opacity:1; filter: alpha(opacity=100); visibility:visible; }
.mainPre_img div { position:absolute; width:100%; height:100%; left:0; top:0; background-position:center center !important; background-size:cover !important; background-repeat:no-repeat; opacity:0; filter: alpha(opacity=0;); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index:1; }
.mainPre_img div.on { opacity:1; filter: alpha(opacity=100); z-index:2; }
.mainPre_img .mainPre_01 {background:url(../images/common/mainPre_img01.jpg); }
.mainPre_img .mainPre_02 {background:url(../images/common/mainPre_img02.jpg); }
.mainPre_img .mainPre_03 {background:url(../images/common/mainPre_img03.jpg); }
.mainPre_img .mainPre_04 {background:url(../images/common/mainPre_img04.jpg); }
.mainPre_img .mainPre_05 {background:url(../images/common/mainPre_img05.jpg); }

.mainPre_img dl { position:absolute; width:80%; left:10%; top:40%; text-align:center; color:#fff; z-index:1;}
.mainPre_img dl dt { font-family: 'Cormorant Garamond', serif; font-size:14em; line-height:1.2em; margin-bottom:0.1em; }
.mainPre_img dl dd {  }
.mainPre_img dl dd a { display:inline-block; font-family: 'Cormorant Garamond', serif; font-size:4.6em; line-height:1.2em;color:#fff; border-bottom:2px solid #fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.mainPre_img dl dd a:hover, .mainPre_img dl dd a:focus { font-size:5em; padding:0 20px; }

#section2 .mainNav { position:absolute; opacity:0; filter: alpha(opacity=0;); visibility:hidden;}
#section2 .mainNav.on {opacity:1; filter: alpha(opacity=100;); visibility:visible;}

@media  (max-width: 1280px){
#section3 { height:auto !important; padding:3% 0;}
.mainPre li a > span { margin-top:-30px; font-size:1.5em; line-height:1.5em;}
.mainPre li a span span { font-size:0.6em; line-height:1.5em; }
.mainPre_img dl { top:auto; bottom:45%;}
.mainPre_img dl dt { font-size:12vw; line-height:1.2em; margin-bottom:0.1em; }
.mainPre_img dl dd {  }
.mainPre_img dl dd a { font-size:6vw; line-height:1.2em; border-bottom:1px solid #fff; }
.mainPre_img dl dd a:hover, .mainPre_img dl dd a:focus { font-size:3vw; padding:0 20px; }
#section2 .mainNav { opacity:1; filter: alpha(opacity=1;); visibility:visible;}
#section2 .mainNav li {text-align:center; padding:10px 0 0; font-family: 'Cormorant Garamond', serif; color:#fff; font-size:2em; line-height:2.5em; opacity:0.5; filter: alpha(opacity=50;); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-text-shadow: 2px 2px rgba(0, 0, 0, 0.2); -moz-text-shadow: 2px 2px rgba(0, 0, 0, 0.2); text-shadow:2px 2px rgba(0, 0, 0, 0.2);}
.mainNav li:hover {opacity:0.6; filter: alpha(opacity=60;); padding:0 0 10px; }
 #section2 .mainNav li span { position:absolute; width:1px; height:10px; background:#fff; left:50%; bottom:0; opacity:1; filter: alpha(opacity=100;); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#section2 .mainNav li:hover span { height:20px; opacity:1; filter: alpha(opacity=100;);}

}
@media  (max-width: 1024px){
.mainPre_img .mainPre_01 {background:url(../images/common/m/mainPre_img01.jpg); }
.mainPre_img .mainPre_02 {background:url(../images/common/m/mainPre_img02.jpg); }
.mainPre_img .mainPre_03 {background:url(../images/common/m/mainPre_img03.jpg); }
.mainPre_img .mainPre_04 {background:url(../images/common/m/mainPre_img04.jpg); }
.mainPre_img .mainPre_05 {background:url(../images/common/m/mainPre_img05.jpg); }
.mainPre li a > span {display:none}
.mainNav_02 { opacity:1; filter: alpha(opacity=100;); visibility: visible;}

}

#popup_video { display:none; position:fixed; width:calc(100vw * 0.8) !important;  height:calc(100vw * 0.45) !important; left:10%; top:5% !important; /* border:3px solid #000;*/  z-index:50;}
#popup_video .line { position:absolute; background:url(../images/bg/white_20.png); z-index:2;}
#popup_video .line01 { width:calc(100% - 20px); height:1px; left:10px; top:10px;}
#popup_video .line02 { width:1px; height:calc(100% - 22px); right:10px; top:11px;}
#popup_video .line03 { width:calc(100% - 20px); height:1px; left:10px; bottom:10px;}
#popup_video .line04 { width:1px; height:calc(100% - 22px); left:10px; top:11px;}
#popup_video .video_content { position:absolute; width:100%; height:100%; left:0; top:0; z-index:1;}
.b-iframe {position:absolute; width:100%; height:100%; left:0; top:0;}
.b-close { position:absolute; right:11px; top:11px; display:inline-block; color:#fff; font-family: 'Raleway', sans-serif; line-height:1.5em; letter-spacing:0.1em; padding:10px 15px; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.3); transition: all 0.2s ease-in-out; z-index:1000; border-bottom:1px solid  rgba(255, 255, 255, 0.2);  border-left:1px solid rgba(255, 255, 255, 0.2); }
/*.b-close:hover, .b-close:focus {transform:rotate(180deg);-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg);}*/
.b-close:hover, .b-close:focus { padding:10px 25px; background:url(../images/bg/black_30.png);}
.b-close span { display:inline-block; margin-left:5px; transition: all 0.2s ease-in-out;}
.b-close:hover span, .b-close:focus span { margin-left:15px; transform:rotate(180deg);-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg);}}


@media  (max-width: 1720px){

}

@media  (max-width: 1480px){

}

@media  (max-width: 1280px){
}

@media  (max-width: 1024px){

#popup_video { width:calc(100vw * 0.9) !important;  height:calc(100vw * 0.50625) !important; left:5%; top:12% !important; }

}


@media  (max-width: 768px){
	
}

@media  (max-width: 559px){

#popup_video { width:100vw !important;  height:calc(100vw * 0.5625) !important; left:0; top:8% !important; }


}