@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;}

#wrapper {position:relative; min-height:910px;}
#sub #wrapper {min-width:1280px; background:url('../images/sub/sub_bg.jpg') 1450px 0 no-repeat; background-attachment:fixed;}

.contain {*zoom:1; width:1200px; margin:0 auto;}
.contain:after {content:""; display:block; clear:both;}

/* header */
#header {position:absolute; top:0; left:0; width:220px; height:100%; z-index:100;}
.sitelogo {padding:25px;}
#gnb > ul {position:relative;}
#gnb > ul > li {height:59px; padding-left:30px; text-align:left; font-size:19px; line-height:59px; font-weight:500; letter-spacing:-0.03em; border-top:1px solid #eee;}
#gnb > ul > li > a {display:block; position:relative; text-decoration:none; color:#000;}
#gnb > ul > li.active > a {color:#20409a;}
#gnb > ul > li:hover > a:after {content:""; width:7px; height:13px; position:absolute; top:50%; right:0; transform:translate(0 ,-50%); background:url('../images/main/arrow.png') 0 0 no-repeat;}
#gnb .submenu {display:none; position:absolute; left:220px; z-index:2;}
#gnb .submenu ul {width:140px;}
#gnb .submenu ul li {color:#fff; text-align:left; margin-left:20px; font-size:15px; line-height:1.3em; padding:13px 0; font-weight:400; letter-spacing:-.03em;}
#gnb .submenu ul li a {display:block; text-decoration:none;}
#gnb .submenu ul li a:hover,
#gnb .submenu ul li.on a {color:#56e5db;}
#gnb .submenu .last-menu {display:none; margin-left:-20px;}
#gnb .submenu > ul > li.on .last-menu {display:block;}
#gnb .submenu .last-menu ul li {padding:5px 0;}
#gnb .submenu .last-menu ul li:first-child {padding-top:15px;}
#gnb .submenu .last-menu ul li:last-child {padding-bottom:0;}
#gnb .submenu .last-menu ul li.over a {color:#99ff00;}
#gnb .submenu .last-menu ul li a {color:#fff;}
#gnb .m1 .submenu {top:8px;}
#gnb .m2 .submenu {top:68px;}
#gnb .m3 .submenu {top:128px;}
#gnb .m4 .submenu {top:185px;}

.submenu-bg {display:none; position:absolute; top:0; left:220px; width:140px; height:100%; background:url('../images/main/sub_bg.jpg') 0 0 repeat-y; z-index:2;}

#sub #gnb li.active .submenu {display:block !important;/*  width:140px !important; height:100% !important; overflow:hidden; min-height:100vh !important; */}
#sub .submenu-bg {width:140px !important; display:block !important;}
#sub .submenu > ul > li.active {display:block !important;}
#sub #gnb > ul > li.active > a:after {content:""; width:7px; height:13px; position:absolute; top:50%; right:0; transform:translate(0 ,-50%); background:url('../images/main/arrow.png') 0 0 no-repeat;}

.partner {padding:18px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.partner ul li img {margin:0 auto;}

.copyright {position:absolute; left:0; bottom:0; width:220px;}
.copyright dl {padding:18px 30px;}
.copyright dl dd {margin-bottom:12px; font-size:13px; line-height:20px; font-weight:300; color:#666; letter-spacing:-.03em;}
.copyright dl dd:last-child {margin-bottom:0;}
.copyright dl dd h2 {font-size:15px; line-height:24px; font-weight:500; color:#333;}
.copyright dl dd strong {font-weight:500; color:#333;}
.copyright dl dd .mail_ico {display:inline-block; width:12px; height:9px; margin-right:10px; background:url('../images/main/mail_ico.png') 0 0 no-repeat;}

.quick {position:absolute; top:0; right:0; height:100%; min-height:100vh;}
.quick .btn-quick {position:absolute; top:0; left:-45px; width:45px; height:45px; overflow:hidden; text-indent:-999em; background:url('../images/common/close.jpg') 0 0 no-repeat; transition:none;}
.quick.closed .reference-room {display:none;}
.quick.closed .btn-quick {background-image:url("../images/common/open.png")}

.reference-room {position:relative; width:120px; height:100%; background:#00a99d;}
.reference-room ul li {text-align:center; padding-top:36px;}
.reference-room ul li a {text-decoration:none; color:#fff; line-height:1.4em;}
.reference-room ul li a p {padding-top:8px;}

/* main */
.main-visual {position:absolute; top:0; left:220px; right:0; height:100%; min-height:100vh; overflow:hidden;}
.main-visual .inner {width:1700px; height:950px;}

/* sub page */
.sub-visual {position:relative; width:100%; min-width:1200px; height:280px; overflow:hidden;}
.sub-visual img {position:absolute; top:0; left:50%; margin-left:-960px; width:1920px; height:280px; max-width:1920px;}

#container {min-height:950px;}
#contArea {margin-left:420px; padding:100px 0; overflow:hidden; width:980px; min-height:100vh; background:#fff;}

.sub-title {position:relative; margin-bottom:65px; text-align:left;}
.sub-title h2 {position:relative; display:inline-block; vertical-align:top; color:#2c2c2c; font-size:30px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.sub-title h2:after {content:""; position:absolute; bottom:-21px; left:0; right:0; height:1px; background:#00a99d;}
.sub-title .path {position:absolute; bottom:24px; right:0; font-size:14px; font-weight:300; color:#666; letter-spacing:-.01em;}
.sub-title .path img {vertical-align:baseline;}
.sub-title .path strong {font-weight:300; color:#333;}
.sub-title .arrow {padding:0 8px; display:inline-block; text-indent:-9999px; overflow:hidden; background:url('../images/sub/path_arrow.png') 7px 13px no-repeat;}
.sub-title.underline {padding-bottom:20px; border-bottom:1px solid #dfdfdf; margin-bottom:70px;}
.real-cont {min-height:610px; _height:610px;}