/* Àüü ·¹À̾ƿô */ 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} #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)} /*ǪÅÍ*/ #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:1366px) { #header .inner {padding:0 50px;} #footer .inner {padding:0 50px;} #sub_wrap > .inner {padding:0 50px;} } @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:; 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 .inner.open h1 {display:none;} #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:20px; 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-height:800px) { #header .inner.open {overflow-y:scroll;z-index:9999;} } @media screen and (max-width:768px) { #footer .inner ul li {float:none; width:100%; text-align:center;} /* »ó´Ü ¿µ¿ª */ /*#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}*/ } @media screen and (max-width:640px) { /* »ó´Ü ¿µ¿ª #header {top:250px} #header .inner {padding:10px 30px} #gnbOpen {right:30px} */ /*ÇÏ´Ü ¿µ¿ª*/ #footer .inner ul {padding:30px 23px;} #footer .inner ul li {float:none; width:100%; text-align:center} } @media screen and (max-width:480px) { /*»ó´Ü ¿µ¿ª*/ /* #header {top:175px} */ }