@charset "euc-kr";
/* ºê¶ó¿ìÀú ¾÷µ¥ÀÌÆ® ±ÇÀå Æ˾÷ */
#browserUpdate {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#111; z-index:9999}
#browserUpdate .inner {position:absolute; top:50%; left:50%; width:800px; margin:-275px 0 0 -400px; padding:100px 70px; text-align:center; background:#fff}
#browserUpdate .inner h2 {font-size:42px; margin-bottom:30px}
#browserUpdate .inner p {color:#777; line-height:1.8; margin-bottom:40px}
#browserUpdate .inner ul {text-align:justify}
#browserUpdate .inner ul:after {display:inline-block; width:100%; content:''}
#browserUpdate .inner ul li {display:inline-block; width:24%; padding:20px; border:1px solid #e8e8e8; vertical-align:top}
#browserUpdate .inner ul li:hover {background:#fafafa}
#browserUpdate .inner ul li .icon {width:48px; height:48px; margin:0 auto 25px auto}
#browserUpdate .inner ul li .icon img {display:block; width:100%}
#browserUpdate .inner ul li a {display:block; height:35px; font-family:'µ¸¿ò','Dotum'; font-size:12px; color:#444; text-align:center; line-height:31px; border:1px solid #dedede; border-bottom:3px solid #dadada; background:#f9f9f9}
#browserUpdate .inner ul li a:hover {background:#fff}
#browserUpdate .inner ul li a:active {border-top:1px solid #dadada; border-bottom:1px solid #dedede; background:#f4f4f4}
/* Çì´õ */
#header {position:fixed; top:0; left:0; width:100%; height:110px; -webkit-transition:height, background .3s; -moz-transition:height, background .3s; -o-transition:height, background .3s; transition:height, background .3s; z-index:900}
#header > .inner {position:relative; max-width:1200px; margin:auto}
#header #logo {float:left; padding-top:30px; transition:all .2s}
#lnb {float:right}
#lnb > li {position:relative; display:inline-block; vertical-align:top}
#lnb > li.home {display:none}
#lnb > li > a {display:block; padding:43px 25px; font-size:16px; font-weight:700; color:#222; transition:all .3s; text-decoration:none;}
#lnb > li > a:hover, #header #lnb > li.on > a {color:#ff9900}
#header.fixed {height:100px}
#header.fixed #logo {padding-top:20px}
#header.fixed #lnb > li > a {padding:38px 25px}
#header #lnbOpener {display:none}
/* ·Î±×ÀÎ */
.login_area {position:absolute;right:15px;top:5px;z-index:9999;}
.login_area li {display:inline-block;padding:0px 10px;}
.login_area li a {font-size:11px;}
/* ǪÅÍ */
#footer {clear:both; position:relative; padding:40px 0 50px; background:#2b2b2b; z-index:10}
#footer > .inner {max-width:1200px; margin:auto; font-size:12px}
#footer > .inner .linkList {margin-bottom:10px}
#footer > .inner .linkList > li {display:inline-block; margin-right:2px}
#footer > .inner .linkList > li:before {display:inline-block; margin:0 10px; color:#777; content:'/'}
#footer > .inner .linkList > li:first-child:before {display:none}
#footer > .inner .linkList > li a {display:inline-block; font-size:12px; color:#ddd; padding-bottom:3px}
#footer > .inner .linkList > li a:hover {color:#efefef; margin-bottom:-1px; border-bottom:1px dotted #efefef}
#footer > .inner .infoList {margin-bottom:5px}
#footer > .inner .infoList > li {display:inline-block; color:#ddd}
#footer > .inner .infoList > li:before {display:inline-block; width:1px; height:10px; margin:0 12px; content:''; background:#555; vertical-align:-1px}
#footer > .inner .infoList > li:first-child:before {display:none}
#footer > .inner .copyright {font-size:11px; color:#ddd}
/* ½ºÅ©·Ñ ¹öÆ° */
#scrollTop {position:fixed; bottom:-40px; right:40px; z-index:100; opacity:0; transition:all .3s ease-in-out}
#scrollTop.active {bottom:40px; opacity:1}
#scrollTop > a {display:block; width:50px; height:50px; font-size:22px; color:#fff; text-align:center; line-height:52px; border-radius:50%; background:#ff9900; box-shadow:0 0 0 0 #ff9900; transition:background .25s ease-in-out}
#scrollTop > a:hover {background:#139088; box-shadow:0 0 0 10px rgba(78,196,188,0); transition:all .25s ease-in-out}
/* ·Îµù ¾Ö´Ï¸ÞÀÌ¼Ç */
#page-loader {position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:2000}
#page-loader .spinner {position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:100%; background:#ff9900; -webkit-animation:sk-scaleout 1.0s infinite ease-in-out; animation:sk-scaleout 1.0s infinite ease-in-out}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
/* ¹Ìµð¾î Äõ¸® */
@media screen and (min-width:1025px) {
 /* Çì´õ */
 #header.hover, #header.fixed {background:#fff}
 #header:before {position:absolute; top:0; left:0; width:100%; height:4px; content:''; background:transparent; transition:all .3s}
 #header.hover:before, #header.fixed:before {background:#ff9900}
 #lnb > li > ul {position:absolute; display:block !important; top:110px; left:0; width:200px; overflow:hidden; z-index:5}
 #lnb > li:hover > ul:before {position:absolute; display:block; top:-12px; left:30px; content:''; border-style:solid; border-width:6px; border-color:transparent transparent #333 transparent}
 #lnb > li > ul > li {height:0; background:#333; transition:all .3s}
 #lnb > li > ul > li > a {display:block; width:100%; padding:0 15px; font-size:14px; color:#fff; line-height:45px; opacity:0; transition:all .3s}
 #lnb > li:hover > ul {border-bottom:4px solid #fff; overflow:visible; z-index:10}
 #lnb > li:hover > ul > li {height:45px; border-top:1px solid rgba(255, 255, 255, .15)}
 #lnb > li:hover > ul > li > a {opacity:1}
 #lnb > li:hover > ul > li > a:hover {padding-left:30px}
 #lnb > li > ul > li:first-child {border-top:none}
}
@media screen and (max-width:1280px) {
 /* Çì´õ */
 #header > .inner {padding:0 50px}
 /* ǪÅÍ */
 #footer > .inner {padding:0 50px}
}
@media screen and (max-width:1024px) {
 /* Çì´õ */
 #header {height:70px !important}
 #header #logo {padding:0 !important}
 #header #logo a {display:block; width:100px; padding-top:33px; transition:padding .3s}
 #header #logo a img {display:block; width:100%}
 #header #lnbOpener {display:block; position:absolute; top:25px; right:50px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none; transition:top .3s; z-index:1000}
 #header #lnbOpener span {position:absolute; display:block; left:50%; width:24px; height:2px; margin-left:-12px; background:#2b2b2b; transition:all .3s}
 #header #lnbOpener span.line1 {top:16px}
 #header #lnbOpener span.line2 {top:22px}
 #header #lnbOpener.open span.line1 {top:19px; transform:rotate(-135deg)}
 #header #lnbOpener.open span.line2 {top:19px; transform:rotate(135deg)}
 #header.fixed {background:rgba(255, 255, 255, .9); box-shadow:0 2px 4px rgba(0, 0, 0, .15)}
 #header.fixed #logo a {padding-top:20px}
 #header.fixed #lnbOpener {top:15px}

 #lnbWrapper {}
 #lnbWrapper > .inner {position:fixed; top:0; right:-260px; width:260px; height:100%; background:#fff; z-index:990}
 #lnbWrapper > .lnb-mask {position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; z-index:900}
 #lnb {float:none !important; padding-top:60px}
 #lnb > li {display:block !important}
 #lnb > li.open > a {color:#ff9900}
 #lnb > li.home {display:block}
 #lnb > li > a {display:block; width:100%; padding:15px 20px !important}
 #lnb > li > ul {display:none; border-top:1px solid #dedede}
 #lnb > li > ul > li > a {display:block; width:100%; padding:10px 20px; border-bottom:1px solid #e5e5e5; background:#f4f4f4}
 #lnb > li > ul > li.on > a {font-weight:500; color:#fff; border-color:#ff9900; background:#ff9900}
}
@media screen and (max-width:768px) {
 /* Çì´õ */
 #header > .inner {padding:0 30px}
 #header #lnbOpener {right:30px}
 /* ǪÅÍ */
 #footer > .inner {padding:0 30px}
 #footer > .inner .linkList {text-align:center}
 #footer > .inner .linkList > li > a {font-size:11px}
 #footer > .inner .infoList {text-align:center; margin-bottom:10px}
 #footer > .inner .infoList > li {margin:0 5px; font-size:11px; line-height:1.6}
 #footer > .inner .infoList > li a {font-size:11px; color:#888; line-height:1.6}
 #footer > .inner .infoList > li:before {display:none}
 #footer > .inner .copyright {text-align:center}
}