@charset "utf-8";
/* ¸ÞÀÎ Ä¿¹ö */
#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}
#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 .tit_box {position:absolute; bottom:320px; left:140px; width:80%; color:#fff}
#mainContainer .coverLeft .tit_box h2 {font-size:42px; font-weight:600; margin-bottom:10px}
#mainContainer .coverLeft .tit_box h3 {font-size:24px; font-weight:300; line-height:1.5; letter-spacing:-2px;}
#mainContainer .row {height:33.33%; 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 {position:absolute; bottom:-40px; left:30px; color:#fff; z-index:40; transition:all .8s ease}
#mainContainer .coverRight .grid .tit_box h3 {font-size:24px; font-weight:600; line-height:1.2; margin-bottom:10px; transition:all 0.5s ease}
#mainContainer .coverRight .grid .tit_box p {font-size:17px; font-weight:300; color:#fff; width:100%}
#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 > 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:30px}
#mainContainer .coverRight .grid:hover .tit_box h3 {color:##d6c6c2}
#mainContainer .coverRight .grid .tit_box span {display:inline-block; padding:2px 12px; margin-top:30px; border:1px solid rgba(255,255,255,0.5)}

@media screen and (max-height: 750px) {
#mainCover {height:750px;}
}

/* ¹Ìµð¾î Äõ¸® */
@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:300px !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:20px}
 #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}
 #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/seoul/m_visual.jpg) center top no-repeat; border-bottom:none; background-size:cover}
}
@media screen and (max-width:640px) and (min-width: 100px) {
 #mainContainer .coverLeft {height:350px}
 #mainContainer .coverLeft .tit_box {bottom:30px; left:30px; width:73%}
 #mainContainer .coverLeft .tit_box h2 {font-size:32px; line-height:1.1; color:#fff; letter-spacing:-2px;}
 #mainContainer .coverLeft .tit_box h3 {font-size:23px; color:#fff; letter-spacing:-2px;}
 #mainContainer .coverRight .row {height:218px}
 #mainContainer .coverRight .grid .tit_box {left:30px; top:30px}
 #mainContainer .coverRight .grid .tit_box h3 {font-size:24px; font-weight:600; color:#eae7e5; letter-spacing:-2px;}
 #mainContainer .coverRight .grid .tit_box p {margin-top:-8px; color:#fff;}
 #mainContainer .coverRight .grid .tit_box span {display:none}
 #mainContainer .coverRight .grid .img img {height:100%;}
}
@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:20px; left:20px}
}