/* 전체 레이아웃 */
body {}
#wrap {}
#header {position:absolute; top:830px; left:0; width:100%; height:80px; z-index:990; background:#fff; border-bottom:1px solid #c8c8c8}
#header.fixed {position:fixed; top:0; left:0; width:100%; height:80px; z-index:990; background:#fff; border-bottom:1px solid #c8c8c8}
/* 상단 영역 */
#header.scroll {position:fixed; top:0 !important}
#header .inner {position:relative; max-width:1400px; height:80px; margin:0 auto; width:100%}
#header .inner:after {clear:both; display:block; content:''}
#header .inner h1 {float:left; width:55; padding:10px 0}
#header .inner h1 img {display:block; width:100%}
#header .inner .login {float:left; width:auto}
#header .inner .login > ul {padding-left:50px}
#header .inner .login ul > li {display:inline-block; vertical-align:top}
#header .inner .login ul > li a {display:block; height:100%; line-height:80px; font-size:12px; font-weight:700; color:#bbbbbb; transition:all 0.3s ease}
#header .inner .login ul > li a:hover {color:#2b2b2b}
#header .inner .login ul > li span {line-height:80px; font-size:12px; font-weight:500; color:#bbbbbb}
#navigation a.gnb_top {display:none}
#gnbClose {display:none}
#gnb {float:right; height:100%}
#gnb > li {position:relative; display:inline-block; vertical-align:top}
#gnb > li > a {display:block; font-size:17px; padding:0 20px; line-height:80px; transition:all .3s ease; font-weight:700; font-family:'NanumSquare'}
#gnb > li:last-child > a {padding-right:0}
#gnb > li.on > a {color:#21bbb1}
/* IE 업데이트 권장 팝업 */
#browserUpdate {position:fixed; display:none; top:150px; left:0; width:100%; height:auto; text-align:center; color:#fff; padding:80px 0; background:#21bbb1; z-index:1000}
#browserUpdate h2 {display:inline-block; font-size:30px; font-weight:400; line-height:1.2; margin-bottom:20px}
#browserUpdate img {display:inline-block; margin-right:10px; vertical-align:-5px}
#browserUpdate p {font-size:14px; line-height:1.7; color:#fff; margin-bottom:50px}
#browserUpdate a {display:inline-block; margin:0 5px; padding:8px 0; width:200px; color:#fff; border:1px solid #fff}
#browserUpdate a.confirm {color:#21bbb1 !important; background:#fff}
/* 공통 전체 메뉴 */
#nav_wrap {position:absolute; top:20%; left:0; width:100%; height:auto; text-align:center}
#gnbOpen {display:none}
#gnb {}
#gnb > li > ul.submnu {display:none; position:absolute; left:50%; width:160px; margin-left:-80px; padding:10px 0; background:#fff; box-shadow:0 2px 2px 0 rgba(0,0,0,.12)}
#gnb > li > a:hover .submnu {display:block}
#gnb > li > ul.submnu > li > a {position:relative; display:block; color:#999; padding:10px 20px; text-align:center; line-height:1.2}
#gnb > li > ul.submnu > li > a:hover {color:#21bbb1}
#gnb > li > ul.submnu > li > a.on {color:#21bbb1}
#snb {display:inline-block; margin:30px auto 0 auto}
#snb ul {text-align:center; padding-top:20px; border-top:1px solid rgba(255,255,255,.4)}
#snb ul li a {position:relative; display:inline-block; font-family:'Monda'; font-size:16px; color:#999; line-height:1.2; padding:10px 0; transition:all .3s ease}
#snb ul li a:hover {color:#21bbb1}
#snb ul li a:before {position:absolute; top:50%; left:0; width:0; height:1px; content:''; background:#21bbb1; transition:all .3s ease}
#snb ul li.on a {color:#21bbb1}
#snb ul li a:hover:before {width:100%}
#nav_wrap .snsList {margin-top:30px}
#nav_wrap .snsList ul li {display:inline-block; margin:0 5px}
#nav_wrap .snsList ul li a img {display:block}
#btnNav {display:none; position:absolute; top:20px; right:50px; width:40px; height:40px; border:none; border-radius:2px; background:transparent; cursor:pointer; z-index:1000}
#btnNav span {position:absolute; display:block; right:0; width:20px; height:2px; background:#000; transition:all .4s ease}
#btnNav span.bar1 {top:12px}
#btnNav span.bar2 {top:18px}
#btnNav span.bar3 {top:24px}
#btnNav.open span {background:#fff}
#btnNav.active span.bar1 {top:18px; transform:rotate(45deg)}
#btnNav.active span.bar2 {display:none}
#btnNav.active span.bar3 {top:18px; transform:rotate(-45deg)}
/* 반응형_미디어쿼리 */
@media screen and (max-width:1024px) {
 /* 상단 영역 */
 #gnb {width:100%}
 #gnb > li > ul.submnu {position:relative; display:block; opacity:1 !important; left:0; top:0; width:100%; margin-left:0; box-shadow:none; background:#f9f9f9; padding:0; display:none; opacity:1;}
 #gnb > li > ul.submnu > li {border-bottom:1px solid #f8f8f8; padding:10px 0}
 #gnb > li > ul.submnu > li:last-child {border-bottom:0}
 /*header*/
 #header {background:transparent; border-bottom:0}
 #header.scroll {background:#fff; border-bottom:0; box-shadow:0px 1px 10px rgba(0,0,0,0.25)}
 #header .inner h1 {float:none; position:fixed; top:10px; left:20px; padding:0}
 #header .inner .login {float:none; width:auto; display:block; padding-top:50px}
 #header .inner .login > ul {padding:0}
 #header #gnb {float:none}
 #header #gnb li {float:none; display:block}
 #header .inner {position:fixed; top:0; right:-260px; width:260px; height:100%; background:#fff; padding:0 30px; z-index:1000; transition:all 0.3s ease}
 #header .inner.open {right:0}
 #header #gnbOpen {display:none; position:absolute; top:25px; right:50px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none; transition:all 0.3s ease; z-index:1010}
 #header #gnbOpen span {position:absolute; display:block; width:24px; height:2px; background:#21bbb1; left:50%; margin-left:-12px; transition:all 0.3s ease}
 #header #gnbOpen span.bar1 {top:12px}
 #header #gnbOpen span.bar2 {top:18px}
 #header #gnbOpen span.bar3 {top:24px}
 #header #gnbClose {display:block; position:fixed; top:25px; right:20px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none; transition:all 0.3s ease; z-index:1000}
 #header #gnbClose span {position:absolute; display:block; width:24px; height:2px; background:#2b2b2b; left:50%; margin-left:-12px; transition:all 0.3s ease}
 #header #gnbClose span.bar1 {top:12px; transform:rotate(0)}
 #header #gnbClose span.bar2 {transform:rotate(0)}
 #header #gnbClose.open span.bar1 {transform:rotate(45deg); top:20px}
 #header #gnbClose.open span.bar2 {transform:rotate(-45deg)}
 #header #nav_mask.open {position:fixed; top:0; left:0; z-index:990; width:100%; height:100%; background:rgba(0,0,0,0.55)}
 /*section1*/
}
@media screen and (max-width:768px) {
 /* 상단 영역 */
/*#header {top:330px; height:50px}
body.main #header {top:330px}
#header .inner {height:50px; padding:10px 50px}
#gnbOpen {display:block; position:absolute; top:18px; right:50px; width:20px; height:20px; cursor:pointer; z-index:50}
#gnbOpen span {position:absolute; display:block; left:0; width:100%; height:2px; background:#fff; transition:all .3s ease}
#gnbOpen span.bar1 {top:0}
#gnbOpen span.bar2 {top:6px}
#gnbOpen span.bar3 {top:12px}
#gnbOpen.open span.bar1 {top:6px; transform:rotate(45deg)}
#gnbOpen.open span.bar2 {display:none}
#gnbOpen.open span.bar3 {top:6px; transform:rotate(-45deg)}
#gnbClose {display:block !important; position:absolute; top:0; right:0; width:65px; height:60px; border:none; background:transparent; cursor:pointer; z-index:100}
#gnbClose span {position:absolute; display:block; width:20px; height:2px; left:50%; margin-left:-10px; background:#fff}
#gnbClose span.bar1 {top:26px; transform:rotate(45deg)}
#gnbClose span.bar2 {top:26px; transform:rotate(-45deg)}
#nav_mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity='60'); z-index:990}
#navigation {position:fixed; top:0; right:-290px; width:280px; height:100%; background:#fff; box-shadow:-2px 0 6px 0 rgba(0,0,0,.3); z-index:1000}
#navigation a.gnb_top {position:relative; display:block !important; padding:0 0 0 25px; height:60px; font-size:16px; color:#fff; line-height:60px; background:#21bbb1}
#navigation a.gnb_top > span.nav-home {display:inline-block; width:17px; height:16px;
margin-right:10px; background:url(../../img/nav_home.png) 0 0 no-repeat; vertical-align:-2px}
#gnb {float:none}
#gnb > li {position:relative; display:block; width:100%; height:auto}
#gnb > li > a {position:relative; height:auto; padding:15px 25px; font-weight:700; color:#444; line-height:inherit; border-bottom:1px solid #dedede}
#gnb > li.dropdown > a:before {position:absolute; display:block; width:2px; height:14px; right:31px; top:50%; margin-top:-7px; content:''; background:#aaa; transition:all .3s ease}
#gnb > li.dropdown > a:after {position:absolute; display:block; width:14px; height:2px; right:25px; top:50%; margin-top:-1px; content:''; background:#aaa}
#gnb > li.open > a:before {transform:rotate(90deg)}
#gnb > li > ul.submnu {position:static; width:100%; margin:0; padding:0; background:#f6f6f6; box-shadow:none}
#gnb > li > ul.submnu li a {font-size:14px; text-align:left; padding:12px 25px; border-bottom:1px solid #dedede}
#gnb > li > ul.submnu li a:before {display:inline-block; width:7px; height:1px; content:''; margin-right:5px; background:#bbb; vertical-align:4px}*/
}
/*푸터*/
#footer {background:#353535}
#footer.sub {margin-top:100px}
#footer .inner {}
#footer .inner ul {padding:30px 0}
#footer .inner ul:after {clear:both; content:''; display:block}
#footer .inner ul li {float:left; width:33.333334%; color:#b2b2b2; font-size:13px}
#footer .inner ul li p {font-size:13px; font-weight:500; color:#b2b2b2}
#footer .inner ul li address {font-size:13px; padding:5px 0}
#footer .inner ul li span {font-size:13px; font-weight:500}
#footer .inner ul li span a {color:#b2b2b2}
#footer .inner ul li span.footer_number {color:#b2b2b2}
#footer .inner ul li span.copyright {color:#ffffff}
#footer .inner ul li p.bank {padding-bottom:10px}
@media screen and (max-width:640px) {
/* 상단 영역 
#header {top:250px}
#header .inner {padding:10px 30px}
#gnbOpen {right:30px} */
/*하단 영역*/
#footer .inner ul li {float:none; width:100%; text-align:center}
} 
@media screen and (max-width:480px) {
 /*상단 영역*/
 /* #header {top:175px} */
}