@import url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);

body, h1, h2, h3, h4, h5, h6 {
    font-family: '나눔바른고딕', NanumBarunGothic, 'Nanum Barun Gothic', '돋움', Dotum;
}

body {
    font-size: 1.3em;
}

header {
    height: auto;
    line-height: normal;
    width: 100%;
    background-color: transparent;
    z-index: 100;
    margin: 0 auto 15px auto;
    padding-bottom: 39px;
}

header > .global-bar {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #fbfbfb;
    border-bottom: 1px solid #dfdfdf;
}

header > .global-bar a {
    color: #777;
    font-size: 12px;
}

header > .global-bar .notice {
    float: left;
    height: 30px;
}

header > .global-bar .list-inline {
    float: right;
    height: 30px;
}

header > .inner-bar {
    height: 65px;
    margin: 30px auto 20px auto;
}

header > .inner-bar > div {
    display: inline-block;
    vertical-align: top;
}

header > .inner-bar > .left {
    width: 240px;
    text-align: center;
    margin-top: 10px;
}

header > .inner-bar > .right {
    width: 240px;
    text-align: left;
}

header > .inner-bar > .center > .keywords {
    margin-top: 5px;
    text-align: left;
}

header > .inner-bar > .center > .keywords a, header > .inner-bar > .center > .keywords i {
    color: #888888;
}

header > .inner-bar > .center > .keywords i {
    vertical-align: -25%;
    margin-right: 10px;
}

header > .inner-bar > .center > .keywords > .list-inline {
    display: inline;
}

.nav-bar {
    background-color: #181818;
    position: absolute;
    margin: auto;
    width: 100%;
    z-index: 100;
}

.nav-bar.sticky {
    position: fixed;
    top: 0;
}

.nav-bar a {
    color: #fff;
}

.nav-bar .nav.left {
    float: left;
}

.nav-bar .nav.right {
    float: right;
}

.nav-bar .nav > li {
    display: inline-block;
}

.nav-bar .nav > li.active > a {
    color: #b7b7b7;
}

.nav-bar .nav > li > a {
    font-size: 16px;
}

.nav-bar .nav > li > a:hover,
.nav-bar .nav > li > a:focus {
    text-decoration: none;
    background-color: #181818;
    color: #b7b7b7;
}

/* FOOTER */
#footer {
    margin: 25px auto;
    background-color: #fff;
}

#footer > nav {
    width: 100%;
    background-color: #F5F5F5;
    border-top: 1px solid #9E9E9E;
}

#footer > nav > .footer-links {
    width: 980px;
    margin: 0 auto 10px auto;
    padding: 10px 0;
    text-align: center;
}

#footer .footer-links li {
    padding-left: 0;
}

#footer .footer-links li:before {
    content: '';
    border-left: 1px solid #E0E0E0;
    padding-left: 7px;
    font-size: 0.8em;
}

#footer .footer-links li:first-child:before {
    content: '';
    border-left: none;
    padding-left: 0;
}

#footer .footer-info {
    width: 980px;
    margin: 0 auto;
    text-align: center;
}

#footer .footer-info p {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px
}

#footer .footer-info p span {
    margin: 0 10px
}

#footer .footer-info > ul {
    margin-bottom: 2px;
}

#scroll-to-top {
    position: fixed;
    z-index: 3;
    right: 30px;
    bottom: 70px;
    display: none;
    padding: 10px 15px;
    border: 1px solid #000;
    background-color: #fff;
    color: #333
}

/* 하단 고정 */
body.footer-fixed {
    margin-bottom: 189px;
}

body.footer-fixed #footer {
    position: fixed;
    bottom: 0;
    height: 174px;
    width: 100%;
}

/* 플래시 메시지 */
.flash-message-container {
    position: fixed;
    top: 70px;
    width: 100%;
    text-align: center;
    z-index: 9999;
}

/* 알림수 */
#notification-link .label {
    top: 12px;
}

/* 모바일 하단 고정 버튼 */
.fixed-buttons {
    position: relative;
    bottom: auto;
    margin-bottom: -15px;
}

/* 컨텐츠 레이아웃 */
#content-container {
    width: 980px;
    margin: 0 auto;
}

#content-main {
    /*width: 785px;*/
    width: 980px;
    min-height: 300px;
    float: left;
}

#content-main.sidebar-menu-hide {
    width: 100%;
}

#sidebar-menu {
    width: 180px;
    float: left;
    margin-left: 15px;
}

/* 본문 가로 최대폭 제한 */
#contents, .layout-full, #content-full {
    max-width: 580px;
    margin: 0 auto;
}

.page-width {
    width: 980px;
    margin: 0 auto;
}

/* 로그인 박스 */
#login-box {
    border: 1px solid #d7d7d7;
    padding: 0px;
    margin-bottom: 0px;
}

#login-box .input {
    width: 110px;
    float: left;
}

#login-box .submit {
    width: 48px;
    float: right;
}

#login-box input, #login-box .submit > button {
    border-radius: 0;
    border: 1px solid #bababa;
}

#login-box .submit > button {
    width: 100%;
    height: 60px;
    padding: 0;
    border-left: 0;
}

#login-box input[name=username] {
    border-bottom: 0;
}

#login-box input[type=checkbox] + label:before {
    font-size: 18px;
}

#login-box label {
    font-size: 11px;
    font-weight: normal;
    cursor: pointer;
}

#login-box .links {
    font-size: 11px;
}

#login-box .links > a:first-child {
    margin-right: 10px;
}

#login-after > div {
    text-align: center;
    margin-bottom: 2px;
}

#login-after > div:last-child {
    margin-bottom: 0;
}

#login-after > .user-name {
    line-height: 1.7;
}

#login-after > .user-type {
    line-height: 1.7;
}

#login-after > .user-name > .label, #login-after > .user-type > .label {
    font-weight: normal;
}

/* 우측 메뉴 */
#side-nav {
    border: 1px solid #d7d7d7;
}

#side-nav > .nav > li > a {
    font-size: 15px;
    background-color: #fdfdfd;
    color: #000;
    padding: 5px 10px;
    border-top: 1px solid #d7d7d7;
    border-left: none;
    border-right: none;
}

#side-nav > .nav > li.active > a {
    border-left: 3px solid #9c9c9c;
}

#side-nav > .nav > li:first-child > a {
    border-top: none;
}

#side-nav .nav.second > li > a:before {
    content: "- ";
    font-size: 6px;
}

#side-nav .nav.second > li > a {
    padding: 5px 0 5px 15px;
}

#side-nav .nav.second > li.active > a {
    border-left: 3px solid #9c9c9c;
    padding-left: 12px;
}

.p-auth-register .featured-item > ul {
    min-height: 235px;
}

.home-banner1 {
    width: 165px;
    margin-right: 15px;
    float: left;
}

.home-box {
    width: 605px;
    float: left;
}

/* 가로 크기가 큰 화면은 기본 980px 보다 넓은 1180px 로 보여주기 */
/*@media (min-width: 1200px) {
    #content-container {
        width: 1180px;
    }

    .page-width {
        width: 1180px;
    }

!*    #footer > nav > .footer-links {
        width: 1180px;
    }

    #footer .footer-info {
        width: 1180px;
    }*!

    #content-main {
        width: 985px;
    }

    .home-box {
        width: 805px;
    }

    header > .inner-bar > .left, header > .inner-bar > .right {
        width: 340px;
    }
}*/

/* 현재 메뉴명 표시에서 배경 이미지 사용 */
header {
    margin-bottom: 0;
}

.title-box {
    margin-bottom: 15px;
}

.title-box > h1.title {
    font-size: 18px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 20px;
}

.title-box > h1.title > a {
    padding-left: 7px;
    border-left: 5px solid #d7d7d7;

}

.title-box > h1 > i {
    font-size: 24px;
    vertical-align: -22%;
    color: #d7d7d7;
}

.title-box > .title-bg {
    position: absolute;
    width: 100%;
    height: 200px;
    filter: brightness(70%);
    z-index: -1;
    background-position: center;
}

.title-box > h1.title {
    width: 960px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}

.title-box > h1.title > a {
    line-height: 200px;
    border-left: none;
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.55);
    z-index: 1;
}