@charset "utf-8";

/* site top menu */
#site-header,
#site-header * {font-family:"Noto Sans KR","Malgun Gothic", "Dotum", sans-serif;}
#site-header {height:100px;width:100%;position:absolute;z-index:10;}
#site-header a {text-decoration:none;}
#site-header:after {content:'';display:block;position:absolute;left:0;top:99px;width:100%;height:1px;background:rgba(255, 255, 255, .3);}
#site-header .inner {position:relative;}
#site-header .inner:before {content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;}
#site-header .header-wrap {position:relative;max-width:1300px;margin:0 auto;padding-left:400px;padding-right:80px;overflow:hidden;}
#site-header .nav {max-height:100px;overflow:hidden;position:relative;}
/* site top menu - logo */
#site-header .logo {position:absolute;left:0;top:16px;}
#site-header .logo a {display:inline-block;position:relative;font-size:0;}
#site-header .logo a:after {content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../img/logo_white_on1.png) no-repeat 0 0;opacity:0;}
/* site top menu - open menu in mobile */
#site-header .nav-open {position:absolute;right:0px;top:42px;display:block;}
#site-header .nav-open a {margin-left:10px;display:inline-block;background:no-repeat 0 0;}
#site-header .nav-open a.nav-toggle-search {background-image:url(../img/search_white_on.png);}
#site-header .nav-open a.nav-toggle-menu {background-image:url(../img/menu_white_on.png);display:none;}
#site-header .nav-close {display:none;}
#site-header .nav-close a {display:block;width:100%;height:100%;text-align:right;font-size:0;}
#site-header .mobile-menu {display:none;visibility:hidden;}
/* site top menu - menus */
#site-header .nav > ul {display:table;table-layout:fixed;width:100%;border-spacing:0;padding:0;margin:0;list-style:none;position:relative;z-index:2;}
#site-header .nav > ul > li {display:table-cell;}
#site-header .nav > ul > li > a {display:block;text-align:center;color:#fff;font-size:18px;font-weight:500; letter-spacing:-1px;}
#site-header .nav > ul > li > a span {display:inline-block;height:100px;line-height:100px;white-space:nowrap;position:relative;}
#site-header .nav > ul ul {display:block;padding:20px 0 25px 0;margin:0;list-style:none;}
#site-header .nav > ul ul li a {display:block;font-size:1.03rem;;padding:4px 15px;color:#666; text-align: center;letter-spacing:-1px;}
#site-header .nav > ul ul li a:hover {font-weight:400;color:#3f51b5;}
#site-header .nav > ul > li:hover > a span:after {content:'';position:absolute;left:50%;bottom:-4px;height:10px;width:10px;border-radius:50%;background:#385c36;transform:translateX(-50%);}
/* site top menu - mouse hover and keyboard focus */
#site-header.hover:after,
#site-header:hover:after {background:#ccc;}
#site-header.hover .logo a:after,
#site-header:hover .logo a:after {opacity:1;}
#site-header.hover .nav-open a img,
#site-header:hover .nav-open a img {opacity:0;}
#site-header.hover .nav,
#site-header .header-wrap:hover .nav {max-height:600px;}
#site-header.hover .nav > ul > li > a,
#site-header:hover .nav > ul > li > a {color:#000;}
#site-header:hover .nav > ul > li:hover > a {color:#3f51b5;}
#site-header.hover .inner,
#site-header:hover .inner {background-color:#fff;}
#site-header.hover .inner:before,
#site-header:hover .inner:before {opacity:1;}
/* site top menu - transition */
#site-header .inner,
#site-header .inner:before,
#site-header .logo a:after,
#site-header .nav-open a img,
#site-header .nav,
#site-header .nav > ul > li > a {transition:all .2s;}

#site-header .nav-banner1 {position:absolute;left:20px;top:120px;opacity:0;transition:opacity .2s;width: 350px;height: 85px;background-image: url(/assets/img/top-banner01.png);border-radius:4px;}
#site-header .nav-banner1 a{color: #fff;font-size: 20px;font-weight: 500;letter-spacing: -0.5px;}
#site-header .nav-banner2 {position:absolute;left:20px;top:220px;opacity:0;transition:opacity .2s;width: 350px;height: 85px;background-image: url(/assets/img/top-banner02.png);border-radius:4px;}
#site-header .nav-banner2 a{color: #fff;font-size: 20px;font-weight: 500;letter-spacing: -0.5px;}
#site-header.hover .nav-banner1,
#site-header.hover .nav-banner2,
#site-header .header-wrap:hover .nav-banner1 {opacity:1;}
#site-header .header-wrap:hover .nav-banner2 {opacity:1;}

@media all and (max-width:1300px) {
    #site-header .nav-open {padding-right:10px;}
}

/* less than 1200px */
@media all and (max-width:1200px) {
    #site-header,
    #site-header .inner {height:100px;}
    #site-header:after {top:99px;}
    #site-header .header-wrap {padding-left:0;height:100px;}
    #site-header .logo {left:10px;}
    #site-header .nav-open {display:block;}
    #site-header .nav-open a.nav-toggle-menu {display:inline;}
    #site-header .nav {position:fixed;right:0;top:0;height:100%;width:300px;max-width:80%;background:#fff;z-index:3;overflow-y:auto;transform:translateX(100%);transition:transform .2s;visibility:hidden;}
    #site-header .mobile-menu {display:block;}
    /* site top menu - open mobile menu */
    body.nav-open {overflow:hidden;}
    body.nav-open #site-header .nav {max-height:none !important;transform:translateX(0);box-shadow:#000 0 0 25px -15px;visibility:visible;}
    body.nav-open #site-header .mobile-menu {visibility:visible;}
    body.nav-open #site-header .nav-close {display:block;position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.6;z-index:2;}
    /* site top menu - mobile sub menus */
    #site-header .nav-sub {border-top:solid 1px #dfdfef;overflow:hidden;max-height:1px;transition:all .4s ease-in-out;visibility:hidden;}
    #site-header .expand .nav-sub {max-height:600px;visibility:visible;}
    #site-header .nav > ul,
    #site-header .nav > ul > li {display:block;border-bottom:solid 1px #dfdfef;}
    #site-header .nav > ul > li > a {position:relative;}
    #site-header .nav > ul > li > a:after {content:'';position:absolute;right:0px;top:0px;height:100%;width:40px;background:url(../img/menu_off.png) no-repeat 50% 50%;}
    #site-header .nav > ul > li.expand > a {color:#bb005e;}
    #site-header .nav > ul > li.expand > a:after {background:url(../img/menu_on.png) no-repeat 50% 50%;}
    #site-header .nav > ul > li:first-child > a {border-top:solid 1px #dfdfef;}
    #site-header .nav > ul > li > a {color:#000;text-align:left;padding:10px 0 10px 24px;}
    #site-header .nav > ul > li > a span {height:40px;line-height:40px;display:block;}
    #site-header .nav > ul > li > a span:after {display:none;}
    #site-header .nav > ul ul {padding:10px 0 10px 0px;}
    #site-header .nav .nav-toggle {display:block;padding:16px 0;color:#f00;text-align:center;font-size:32px;font-weight:600;}
    #site-header .nav .mobile-logo {display:block;padding:20px 0;text-align:center;font-size:0;}
}


/* less than 640px */
@media all and (max-width:640px) {
    /* site top menu - change height */
    #site-header,
    #site-header .inner {height:65px;}
    #site-header:after {top:64px;}
    #site-header .logo {left:0;top:5px;}
    #site-header .logo a img {height:40px;}
    #site-header .logo a:after {background-size:contain;}
    #site-header .header-wrap {height:65px;}
    #site-header .nav-open {top:22px;}
    #site-header .nav-open a {margin-left:5px;}
    /* site top menu - mobile sub menus */
    #site-header .nav > ul > li > a {font-size:16px;padding:5px 0 5px 15px;}
    #site-header .nav > ul ul {padding:5px 0 5px 15px;}
    #site-header .nav > ul ul li a {font-size:14px;}
}

/* site footer */
#site-footer {background:#272f3c;color:#bbb;position:relative;z-index:2;margin-top: 10px;}
#site-footer a {color:#bbb;text-decoration:none;}
#site-footer .footer-quick {border-bottom:solid 1px #444;}
#site-footer .inner {max-width:1300px;margin:0 auto;}
#site-footer .footer-quick .inner {display:table;width:100%;border-spacing:0;}
#site-footer .quick-link,
#site-footer .ext-link {display:table-cell;vertical-align:middle;}
#site-footer .quick-link ul {list-style:none;padding:0;margin:0;line-height:65px;float:left;}
#site-footer .quick-link li {display:inline;font-size:1em;}
#site-footer .quick-link li:before {content:'|';color:#9c9c9c;font-size:0.4em;vertical-align:top;margin:0.1em 1.5em 0 0.8em;display:inline-block;}
#site-footer .quick-link li:first-child:before {display:none;}
#site-footer .quick-link .sns {float:right;padding-right:17px;line-height:1;padding-top:17px;}
#site-footer .ext-link {width:240px;position:relative;}
#site-footer .ext-link > a {display:block;position:relative;line-height:65px;border-left:solid 1px #444;border-right:solid 1px #444;padding:0 10px;}
#site-footer .ext-link > a i {float:right;line-height:65px;}
#site-footer #extLink {display:none;min-width:100%;padding:0;margin:0;list-style:none;position:absolute;bottom:100%;right:0;background:#272f3c;border:solid 1px #444;}
#site-footer #extLink li {display:block;border-bottom:solid 1px #444;}
#site-footer #extLink li:last-child {border-bottom:none;}
#site-footer #extLink a {display:block;padding:0 10px;line-height:45px;white-space:nowrap;}
#site-footer #extLink a:hover {background:#333;color:#fff;}
#site-footer .ext-link:hover #extLink {display:block;}
#site-footer .copyright {padding:30px 0 60px 0;line-height:1.8;}
#site-footer .copyright ul {display:block;padding:0;margin:0;list-style:none;}
#site-footer .copyright li {display:inline;}
#site-footer .copyright li:before {content:'|';color:#eee;font-size:0.4em;vertical-align:top;margin:0.7em 1.5em 0 0.8em;display:inline-block;}
#site-footer .copyright li:first-child:before {display:none;}

@media all and (max-width:1340px) {
    #site-footer .quick-link ul,
    #site-footer .copyright {padding-left:10px;}
}

@media all and (max-width:1200px) {
    #site-footer .footer-quick {border-bottom:none;}
    #site-footer .footer-quick .inner,
    #site-footer .quick-link,
    #site-footer .ext-link {display:block;position:relative;}
    #site-footer .quick-link ul,
    #site-footer .quick-link .sns {float:none;padding-left:10px;padding-right:10px;text-align:center;}
    #site-footer .quick-link ul {border-bottom:solid 1px #444;line-height:1;padding:20px 0;}
    #site-footer .quick-link li:before {margin-top:0.4em;}
    #site-footer .quick-link .sns {line-height:42px;text-align:left;}
    #site-footer .ext-link {position:absolute;right:10px;bottom:3px;width:auto;}
    #site-footer .ext-link > a {line-height:42px;border-top:solid 1px #444;border-bottom:solid 1px #444;}
    #site-footer .ext-link > a i {margin-left:10px;line-height:44px;}
    #site-footer .copyright li {display:inline-block;}
}

@media all and (max-width:768px) {
    #site-footer .quick-link li {font-size:0.9em;display:inline-block;padding:0 0.5em;line-height:1.5;}
    #site-footer .quick-link li:before {display:none;}
    #site-footer .ext-link > a {font-size:0.8em;}
    #site-footer #extLink a {font-size:0.7em;}
    #site-footer .copyright {font-size:0.8em;}
    #site-footer .copyright li {display:inline-block;margin-right:1em;}
    #site-footer .copyright li:before {display:none;}
}

#site-search {visibility:hidden;}
#site-search .inner {position:fixed;left:0;top:0;width:100%;height:70%;z-index:65002;background:#fff;transform:translateY(-100%);opacity:0;transition:all .2s;}
#site-search .inner div {margin:80px auto 0 auto;padding:20px;max-width:480px;}
#site-search form {position:relative;padding-right:44px;}
#site-search input {height:44px;padding:4px;line-height:36px;font-size:20px;width:100%;border:solid 1px #888;}
#site-search button {height:44px;line-height:40px;width:44px;border:solid 1px #444;background:#444;color:#fff;position:absolute;right:0;top:0;font-size:28px;cursor:pointer;}
#site-search p {text-align:center;margin-top:1em;}
#site-search .hide-search {position:fixed;top:10px;right:10px;z-index:65003;color:#f00;font-size:36px;opacity:0;transition:opacity .2s;transition-delay:.2s;}
#site-search .hide-search:after {content:'';position:fixed;left:0;top:70%;height:100%;width:100%;background:#000;opacity:0.5;}

.search-open {overflow:hidden;}
.search-open #site-search {visibility:visible;}
.search-open #site-search .inner {transform:none;opacity:1;}
.search-open #site-search .hide-search {opacity:1;}