@charset "utf-8";
@font-face { font-family: 'GyeonggiTitleM'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GyeonggiTitleM.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'GyeonggiBatang'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GyeonggiBatang.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'YiSunShinDotumM'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/YiSunShinDotumM.woff') format('woff'); font-weight: normal; font-style: normal; }

/*메인용 헤더색상 투명을 위해서 한번 더 사용한다. 원래 layout.css에서 사용한다.*/
#header {position:fixed; top:0; left:0; width:100%; z-index:100;    background-color: rgba(166, 118, 0, 0)}
#header .inner .teltext a {font-family: 'S-CoreDream-3Light'; color: #fff; font-size: 18px;}
#logoRight {width: 700px; position: relative; left: 470px; bottom: 65px;}
#header h1 {position:absolute; left:400px; top:35px; z-index:100; transition:all 0.3s}
.moblie_viwe {display: none;}
/*모바일에서는 메인 로고를 왼쪽 안드로메다로 보내기 */
	@media screen and (max-width:760px) and (min-width: 100px) {
		#header .inner .teltext {position: relative;left: 32%; top: -27px;}
		#header .inner .teltext span {font-family: 'S-CoreDream-3Light'; color: #fff; font-size: 18px;}
		#header .inner .teltext a {font-family: 'S-CoreDream-3Light'; color: #fff; font-size: 18px;}
		#header h1 {left:-110px; top:22px}
		
		#callNav { top: 22px;}
	}
@media screen and (max-width:768px) and (min-width:100px) {
	#callNav {top:22px;}
	#header.scroll #callNav {top:22px; background:rgba(187,145,42,1.00)}
}

/* 메인 커버 */
#mainCover {position:absolute; top:0; left:0; width:100%; height:100%; min-height:100vh; overflow:hidden}
#mainCover .mask {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.3; filter:alpha(opacity='30'); z-index:30}
#mainCover .video {position:relative; width:100%; height:100%; background:url(../img/main_video.jpg) center top no-repeat; background-size:cover; z-index:20}
#mainCover .video video {display:block; width:auto; height:130%; object-fit:cover}
#mainCover .video iframe {width: 100vw;height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */min-height: 100vh;min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.vimeo-wrapper {
   position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;pointer-events: none;overflow: hidden;}
.vimeo-wrapper iframe {width: 100vw;height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */min-height: 100vh;min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}



#mainContainer {position:absolute; top:120px; left:0; bottom:0; width:100%; min-height:630px; z-index:30; overflow:hidden}
#mainContainer .coverLeft, #mainContainer .coverRight {height:100%; }
#mainContainer .coverLeft {position:relative; float:left; width:50%; border-right:1px solid rgba(255,255,255,0.3)}
#mainContainer .coverRight {margin-left:50%}

#mainContainer .coverLeft .grid .img {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; filter:alpha(opacity='0'); z-index:30; transition:all 1s ease}
#mainContainer .coverLeft .grid .img img {display:block; width:100%; height:100%}
#mainContainer .coverLeft .grid:hover .img {opacity:1; filter:alpha(opacity='100')}


#mainContainer .coverLeft .tit_box {position:absolute; bottom:4%; left:21%; width:70%; color:#fff;}

@media screen and (max-height : 800px) {
    #mainContainer .coverLeft .tit_box {position:absolute; bottom:4%; left:11%; width:100%; color:#fff;}
    #mainContainer .coverLeft .tit_box > h2 > img {width: 50%;}
    
}


#mainContainer .coverLeft .tit_box h2 {font-size:38px; font-weight:800; margin-bottom:0px; font-family: 'YiSunShinDotumM';}
#mainContainer .coverLeft .tit_box h3 {font-size:34px; font-weight:700; line-height:1.5; font-family: 'YiSunShinDotumM';}
#mainContainer .coverLeft .tit_box h4 {font-size:22px; font-weight:300; line-height:1.4; font-family: 'GyeonggiTitleM';}
#mainContainer .coverLeft .tit_box h3 ol {position: relative; left:30px;     list-style-type: decimal; }

#mainContainer .coverLeft .grid > a > span.line1 {top:0; left:0; width:0; height:1px; background:#fff}
#mainContainer .coverLeft .grid > a > span.line2 {top:0; right:0; width:1px; height:0; background:#fff}
#mainContainer .coverLeft .grid > a > span.line3 {bottom:0; right:0; width:0; height:1px; background:#fff}
#mainContainer .coverLeft .grid > a > span.line4 {bottom:0; left:0; width:1px; height:0; background:#fff}
#mainContainer .coverLeft .grid:hover > a > span {opacity:1; filter:alpha(opacity='100')}
#mainContainer .coverLeft .grid:hover > a > span.line1, #mainContainer .coverLeft .grid:hover > a > span.line3 {width:100%}
#mainContainer .coverLeft .grid:hover > a > span.line2, #mainContainer .coverLeft .grid:hover > a > span.line4 {height:100%}
#mainContainer .coverLeft .grid:hover .img {opacity:1; filter:alpha(opacity='100')}
/*#mainContainer .coverLeft .grid:hover .tit_box {bottom:50%}*/
#mainContainer .coverLeft .grid:hover .tit_box h3 {color:#534f4d}
#mainContainer .coverLeft .grid:hover .tit_box p {color:#534f4d; font-weight: 100}
#mainContainer .coverLeft .grid .tit_box span {display:inline-block; padding:2px 12px; margin-top:30px; border:1px solid rgba(255,255,255,0.5)}
#mainContainer .coverLeft .grid:hover .tit_box span {display:none;}



/*#mainContainer .row {height:33.33%; border-top:1px solid rgba(255,255,255,0.3)}*/
#mainContainer .row {height:50%; border-top:1px solid rgba(255,255,255,0.3)}
#mainContainer .row:first-child {border-top:none}
#mainContainer .coverRight .grid {position:relative; float:left; width:50%; height:100%; border-left:1px solid rgba(255,255,255,0.3); overflow:hidden}
#mainContainer .coverRight .grid:first-child {border-left:none}
#mainContainer .coverRight .grid-2x {float:none !important; width:100% !important; border-right:none}
#mainContainer .coverRight .grid .tit_box {width: 100%; height: 20%; background: rgba(255,255,255,0.0); position:absolute; bottom:9%; left:0px; color:#534f4d; z-index:40; transition:all .8s ease}
#mainContainer .coverRight .grid .tit_box span {padding-right: 20px; color: #afafaf; font-family: 'GyeonggiTitleM'; }
#mainContainer .coverRight .grid .tit_box span {padding-right: 20px; color: #afafaf; font-family: 'GyeonggiTitleM'; }




/*#mainContainer .coverRight .grid .tit_box {width: 100%; height: 20%; background: rgba(255,255,255,0.0); position:absolute; bottom:9%; left:0px; color:#fff; z-index:40; transition:all .8s ease}*/


#mainContainer .coverRight .grid .tit_box h3 {padding-left: 30px;  font-size:32px; font-weight:500; line-height:1.2; margin-bottom:3px; transition:all 0.5s ease; font-family: 'GyeonggiTitleM'; color: #fff;}

#mainContainer .coverRight .grid .tit_box p {padding-left: 30px; font-size:22px; font-weight:300; color:#f3d067; width:100%; font-family: 'GyeonggiTitleM' }

#mainContainer .coverRight .grid .img {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; filter:alpha(opacity='0'); z-index:30; transition:all 1s ease}
#mainContainer .coverRight .grid .img img {display:block; width:100%; height:100%}
#mainContainer .coverRight .grid > a > span {position:absolute; display:block; opacity:0; filter:alpha(opacity='0'); z-index:50; transition:all 0.8s ease}
#mainContainer .coverRight .grid > a > span.line1 {top:0; left:0; width:0; height:1px; background:#fff}
#mainContainer .coverRight .grid > a > span.line2 {top:0; right:0; width:1px; height:0; background:#fff}
#mainContainer .coverRight .grid > a > span.line3 {bottom:0; right:0; width:0; height:1px; background:#fff}
#mainContainer .coverRight .grid > a > span.line4 {bottom:0; left:0; width:1px; height:0; background:#fff}
#mainContainer .coverRight .grid:hover > {background: rgba(255,255,255,0.31)}
#mainContainer .coverRight .grid:hover > a > span {opacity:1; filter:alpha(opacity='100')}
#mainContainer .coverRight .grid:hover > a > span.line1, #mainContainer .coverRight .grid:hover > a > span.line3 {width:100%}
#mainContainer .coverRight .grid:hover > a > span.line2, #mainContainer .coverRight .grid:hover > a > span.line4 {height:100%}
#mainContainer .coverRight .grid:hover .img {opacity:1; filter:alpha(opacity='100')}
#mainContainer .coverRight .grid:hover .tit_box {bottom:60%; height: 40%;padding-top: 10%; background: rgba(255,255,255,0.66); }
#mainContainer .coverRight .grid .tit_box_4 { 
/*	background: rgba(255,255,255,0.5); */
}
#mainContainer .coverRight .grid:hover .tit_box_4 {background: rgba(255,255,255,0.95); }

/*#mainContainer .coverRight .grid:hover .tit_box {top:20%}*/
#mainContainer .coverRight .grid:hover .tit_box h3 {color:#534f4d}
#mainContainer .coverRight .grid:hover .tit_box p {color:#534f4d; font-weight: 100; width: 100%}
#mainContainer .coverRight .grid .tit_box span {color: #fff; display:inline-block; padding:2px 12px 0 32px; margin-top:3px; border:0px solid rgba(255,255,255,0.5)}

#mainContainer .coverRight .grid .tit_box span i {padding-left: 10px;}


#mainContainer .coverRight .grid:hover .tit_box span {
/*    display:none;*/
    color: #3e3e3e;
}

/* 미디어 쿼리 */
@media screen and (max-width:1024px) and (min-width: 100px) {
 body.main #header {height:inherit; border-bottom:none}
 #mainContainer {position:relative; top:0; margin-top:120px }
 #mainContainer .coverLeft {float:none; width:100% !important; height:220px !important; border-right:none; border-bottom:1px solid rgba(255,255,255,0.3)}
 #mainContainer .coverLeft .tit_box {bottom:50px; left:50px}
 #mainContainer .coverLeft .tit_box h2 {font-size:36px}
 #mainContainer .coverLeft .tit_box h3 {font-size:18px}
 #mainContainer .coverRight {margin-left:0}
 #mainContainer .coverRight .row {height:250px; border-top:none}
 #mainContainer .coverRight .grid {border-left:none}
 #mainContainer .coverRight .grid .tit_box {left:50px; top:50px}
 #mainContainer .coverRight .grid .tit_box p {font-size:13px; line-height:1.4; padding-left:7px; color:#666;letter-spacing: -1.8px} 
 #mainContainer .coverRight .grid .img {opacity:1; filter:alpha(opacity=1)}
 #mainContainer .coverRight .grid .img img {height:100%}
}
@media screen and (max-width:768px) and (min-width: 100px) {
 #mainCover {display:none}
 #mainContainer {margin-top:0 !important}
 /* #mainContainer .coverLeft {background:url(../img/m_visual.jpg) center top no-repeat; border-bottom:none; background-size:cover} */
 #mainContainer {min-height:480px;}	

 /* mobile 영상 */
 .mobile_view{
	display: block;
 }
}

/* 반응형 중간기기 768사이즈 이하 */
@media screen and (max-width: 768px) {			

	#tubu {display: none}


}

@media screen and (max-width:640px) and (min-width: 100px) {
 #mainContainer .coverLeft {height:350px}
 #mainContainer .coverLeft .tit_box {bottom:30px; left:30px; width:85%}
 #mainContainer .coverLeft .tit_box img {display: none;}
 #mainContainer .coverLeft .tit_box h2 {font-size:24px; line-height:1.1}
 #mainContainer .coverLeft .tit_box h3 {font-size:13px}
 #mainContainer .coverRight .row {height:200px}
 #mainContainer .coverRight .grid .tit_box {left:30px; top:30px}
 #mainContainer .coverRight .grid .tit_box h3 {font-size:16px; color:#666; padding-left:7px;}
 <!-- #mainContainer .coverRight .grid .tit_box p {display:none}-->
  #mainContainer .coverRight .grid .tit_box p {display: inherit; color:#666; padding-left:10px;}
 #mainContainer .coverRight .grid .tit_box span {
/*     display:none;*/
     color: #767676;
}
#mainContainer .coverRight .grid .tit_box span {display:inline-block; padding:2px 10px; margin-top:3px; border:0px solid rgba(255,255,255,0.5)}
 
 #mainContainer .coverRight .grid:hover .tit_box {bottom:70%; height: 40%;padding-top: 10%; background: rgba(255,255,255,0.66); }
 #mainContainer .coverRight .grid .tit_box { padding-top:10px; width: 100%; height: 70%; background: rgba(255,255,255,0.6); position:absolute; bottom:9%; left:0px; color:#fff; z-index:40; transition:all .8s ease}
}
@media screen and (max-width:480px) and (min-width: 100px) {
 #mainContainer .coverLeft .tit_box {left:20px}
 #mainContainer .coverRight .row {height:130px}
 #mainContainer .coverRight .grid .tit_box {top:0px; left:0px}
}



.youtube {position: relative;width: 100%; padding-bottom: 56.25%;}
.youtube iframe {position: absolute;width: 100%;height: 100%;}