@charset "euc-kr";
/**********************************************
* ½ºÅÄ´Ùµå¹ÝÀÀÇü SD002 ·¹À̾ƿô css
* ¹öÀü : 1.0
* ¸±¸®Áî : 2017-11-04
* º» cssÀÇ ÀúÀÛ±ÇÀº µµÆ®ÇǾƿ¡ ÀÖ½À´Ï´Ù.
**********************************************/
/* »ó´Ü */
#header {position:fixed; top:0; left:0; width:100%; height:80px; z-index:990}
#header:before {position:absolute; top:0; left:0; content:''; width:100%; height:0; background:#000; opacity:0.8; transition:all 0.4s ease}
#header #logo {position:absolute; top:15px; left:50px}
#header #logo a {display:block; width:110px}
#header #logo a img {width:100%}
#header #lnb > .lnb-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:990}
#header #lnb > .lnb {position:fixed; top:0; right:0; width:240px; height:100%; padding-top:160px; background:#131419; box-shadow:-5px 0 16px 3px rgba(0,0,0,0.12); z-index:998; transform:translateX(105%); opacity:0; transition:all 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86)}
#header #lnb > .lnb > li {position:relative; margin-bottom:30px; padding:0 50px; text-align:right}
#header #lnb > .lnb > li > a {position:relative; font-size:14px; font-weight:500; color:#aaa; letter-spacing:0.05em; transition:color 0.35s}
#header #lnb > .lnb > li.on > a, #header #lnb > .lnb > li.open > a {color:#fff}
#header #lnb > .lnb > li.on:after {position:absolute; top:9px; right:0; content:''; display:block; width:15px; height:2px; background:#ff6c00}
#header #lnb > .lnb > li > .subnav {display:none; padding:15px 0}
#header #lnb > .lnb > li > .subnav > li > a {color:#656565; line-height:1.85; transition:color 0.35s}
#header #lnb > .lnb > li > .subnav > li.on > a {color:#ff6c00 !important}
#header #lnb.open > .lnb {opacity:1; transform:translateX(0)}
#header .btnOpenMenu {position:absolute; top:23px; right:50px; width:30px; height:30px; border:none; background:transparent; outline:none; cursor:pointer; z-index:999}
#header .btnOpenMenu span {position:absolute; left:50%; width:20px; height:2px; margin-left:-10px; border-radius:2px; background:#fff; opacity:0.75; transition:all 0.3s ease-in-out}
#header .btnOpenMenu span.bar-top {top:8px}
#header .btnOpenMenu span.bar-mid {top:14px}
#header .btnOpenMenu span.bar-btm {top:20px}
#header .btnOpenMenu.open span {top:14px !important; opacity:1 !important}
#header .btnOpenMenu.open span.bar-top {transform:rotate(45deg)}
#header .btnOpenMenu.open span.bar-mid {opacity:0 !important; left:-20px}
#header .btnOpenMenu.open span.bar-btm {transform:rotate(-45deg)}
#header.fixed:before {height:80px}
/* ·Îµù ¾Ö´Ï¸ÞÀÌ¼Ç */
#page-loader {position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:9999; transition:transform 0.6s cubic-bezier(0.88,0.08,0.29,0.93)}
#page-loader > .spinner {position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px}
#page-loader > .spinner > div {position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:#ffa600; opacity:0.6; -webkit-animation:double-bounce 2s infinite ease-in-out; animation:double-bounce 2s infinite ease-in-out}
#page-loader > .spinner .bounce-circle2 {-webkit-animation-delay:-1s; animation-delay:-1s}
#page-loader.hide {transform:translateY(-100%)}
@-webkit-keyframes double-bounce {
 0%, 100% {-webkit-transform:scale(0.0)}
 50% {-webkit-transform:scale(1.0)}
}
@keyframes double-bounce {
 0%, 100% {
  transform:scale(0.0);
  -webkit-transform:scale(0.0)
 }
 50% {
  transform:scale(1.0);
  -webkit-transform:scale(1.0)
 }
}
/* ÇÏ´Ü */
#btnTop {position:fixed; display:block; bottom:50px; right:-60px; width:50px; height:50px; font-size:16px; color:#fff; text-align:center; line-height:50px; border-radius:50%; background:#ff6c00; opacity:0; z-index:500; transition:all 0.5s}
#btnTop.show {right:50px; opacity:1}
#btnTop:hover {background:#000}
#footer {clear:both; padding:60px 15px; text-align:center; background:#1a1f22}
#footer .copyright {font-family:'Quicksand','Noto Sans KR',sans-serif; font-size:13px; color:#5f6365; letter-spacing:0.05em}

/* ----------------------------------------------------------
 * ¹Ìµð¾î Äõ¸®
---------------------------------------------------------- */
/* PC */
@media screen and (min-width:1025px) {
 /* »ó´Ü */
 #header #lnb > .lnb > li > a:hover {color:#eee}
 #header #lnb > .lnb > li > .subnav > li > a:hover {color:#888}
 #header .btnOpenMenu:hover span {opacity:1}
 #header .btnOpenMenu:hover span.bar-top {top:4px}
 #header .btnOpenMenu:hover span.bar-btm {top:24px}
}
/* ÅÂºí¸´ */
@media screen and (max-width:1024px) {
}
/* ¸ð¹ÙÀÏ */
@media screen and (max-width:768px) {
 /* »ó´Ü */
 #header {height:65px}
 #header #logo {top:8px; left:15px}
 #header #logo a {width:90px}
 #header #lnb > .lnb {padding-top:110px}
 #header .btnOpenMenu {top:17px; right:15px}
 #header.fixed:before {height:65px}
 /* ÇÏ´Ü */
 #btnTop {bottom:25px}
 #btnTop.show {right:15px}
 #footer {padding:50px 15px}
 #footer .copyright {font-size:12px}
}