@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face { font-family: 'Chosunilbo_myungjo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') 
  format('woff'); font-weight: normal; font-style: normal; }
.hd_color {
    color:#666;
}
a, p {
    letter-spacing:-0.6px;
}
.clearfix {
    display:block;
    clear:both;
}
body {
    font-family: 'Chosunilbo_myungjo';
}
#header {
    width:100%;
    position:fixed;
    z-index:999999999999999999999999999999999;
}
#header.on {
    transition-duration:0.6s;
}
#header .top_box {
    height:75px;
    border-bottom:1px solid #fff2;
    background: rgba(51, 51, 51, 0.322);
}
#header.on .top_box {
  border-bottom:1px solid #fff2;
  /* opacity: 0; */
}
#header.on .bottom_box {
  border-bottom:1px solid #fff2;
  /* margin-top:-75px; */
}
#header .top_box .logo {
    line-height: 70px;
    display:block;
    text-align:center;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
}
#header .hd_list {
    position:absolute;
    top:15px;
    left:24%;
    overflow: hidden;
}
#header .hd_list li{
    float:left;
    margin-right:10px;
    text-align:center;
    opacity:0.6;
    cursor:pointer;
}
#header .hd_list li:hover {
    opacity:1;
}
#header .hd_list li:last-child {
    margin-right:0;
}
#header .hd_list li span {
    display:block;
    width:27px;
    height:27px;
    line-height:25px;
    border:1px solid #333;
    box-sizing:border-box;
    border-radius:50%;
    margin:0 auto 5px auto;
}
#header .hd_list li span i {
    font-size:14px;
    color:#fff;
}
#header .hd_list li p {
    font-size:10px;
    font-weight:600;
    color:#fff;
}
#header #info {
    position:absolute;
    top:0;
    right:23%;
    line-height: 75px;
}
#header #info .member li {
    display:inline-block;
    position: relative;
    width:90px;
    height:32px;
    line-height:30px;
    text-align:center;
    border:1px solid #ccc;
    box-sizing:border-box;
    margin-right:10px;
}
#header #info .member li:hover {
    background-color:#D9AB73;
    border:none;
}
#header #info .member li:hover span {
    color:#fff;
}
#header #info .member li a{
    font-size:1em;
    font-weight:400;
    font-size:13px;
    display:inline-block;
    width:100%;
    color:#fff;
}
#header #info .member li span {
    display:inline-block;
    color:#fff;
}
#header #info .member li .icon {
    margin-right:5px;
}

#header .bottom_box {
    height:75px;
    line-height: 75px;
    position:relative;
    cursor: pointer;
    border-bottom:1px solid #fff2;
    background: rgba(51, 51, 51, 0.322);
    transition:all .5s;
}
#header.on .bottom_box {
    background-color:#222;
}
#header #nav {
    width:60%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
}
#header #nav .menu_ul {
    width:100%;
    display:flex;
}
#header #nav .menu_li {
    flex-direction:column;
    width:20%;
    text-align:center;
}
#header #nav .menu_tit {
    flex-direction:column;
    font-size:20px;
    position:relative;
    letter-spacing:-0.1px;
    color:#fff;
}
#header #nav .menu_tit.on {
    color:#D9AB73;
}
#header #nav .menu_li:hover {
    color:#D9AB73;
}
#header.on .sub_menu {
    background-color:#222;
}
#header .sub_menu {
    width:100%;
    background-color:#222;
    padding:20px 0;
    display:none;
}
#header .sub_menu .inner {
  width: 60%;
  position: relative;
  top: 0; left: 0;
  margin: 0 auto !important;
}
#header .sub_menu .gnb_al_ul {
    width:100%;
    display:flex;
}
#header .sub_menu .gnb_al_li {
    flex-direction:column;
    width:20%;
    text-align:center;
}
#header .sub_menu .gnb_al_li a {
    display:block;
    font-size:16px;
    font-weight:500;
    padding:10px 0;
    color:#fff;
}
#header .sub_menu .gnb_al_li a:hover {
    font-weight:600;
    color:#D9AB73;
    padding-left:10px;
    transition-duration:0.6s;
}
#header_mo {
    display:none;
}
/* s:햄버거버튼 */
@media screen and (max-width:1240px) {
    #header_wrap {
        width:100%;
    }
    #header #nav .menu_tit {
        font-size:1.2em;
    }
    #header .sub_menu .inner {
        width:100%;
    }
    #header .sub_menu .gnb_al_li li a {
        font-size:1em;
    }
}
@media screen and (max-width:1450px) {
    #header .hd_list {
        left:15%;
    }
    #header #info {
        right:15%;
    }
    #header #nav {
        width:80%;
    }
    #header .sub_menu .inner {
        width:80%;
    }
}
@media screen and (max-width:1040px) {
    #header {
        display:none;
    }
    #header_mo {
        display:block;
        width:100%;
        padding:0 20px;
        height:70px;
        position:absolute;
        top:0;
        background-color:transparent;
        border-bottom:1px solid #ccc;
    }
    #header_mo .logo {
        line-height:70px;
        text-align:center;
    }
    /* s:햄버거버튼 */
    /* hambergur button */
    .hamburger {
        position:absolute;
        top:24px;
        left:20px;
        cursor: pointer;
        width:40px;
        height:40px;
        z-index:1;
    }
    .hamburger span {
        position:absolute;
        width:35px;
        height:2px;
        background-color:#fff;
        box-shadow:3px 3px 5px rgba(0,0,0,0.2);
        display:block;
        border-radius:6px;
    }
    .hamburger span:nth-child(1) {
        top:0;
        right:0;
    }
    .hamburger span:nth-child(2) {
        top:8px;
        right:0;
    }
    .hamburger span:nth-child(3) {
        top:16px;
        right:0;
    }
    .close_btn {
        position:absolute;
        top:30px;
        right:20px;
        cursor: pointer;
        width:40px;
        height:40px;
        z-index:99999999;
        transition: all 0.5s ease;
    }
    .close_btn span {
        position:absolute;
        width:25px;
        height:3px;
        background-color:#fff;
        box-shadow:3px 3px 5px rgba(0,0,0,0.2);
        display:block;
        border-radius:6px;
    }
    .close_btn span:nth-child(1) {
        top:10px;
        right:0;
        transform: rotate(45deg);
    }
    .close_btn span:nth-child(2) {
        top:10px;
        right:0;
        transform: rotate(-45deg);
    }
    #sidebar {
        width:100%;
        height:100vh;
        position:fixed;
        top:0;
        right:0;
        z-index:9999999999999999;
        transition-duration:0.6s;
        display:block;
        transform:translateX(-100%);
    }
    #sidebar.on {
        transform:translateX(0);
    }
    #sidebar.on .bg {
        width:100%;
        height:100vh;
        position:fixed;
        top:0;
        right:0;
        z-index:9999999999999999;
        transition-duration:0.6s;
        background-color:rgba(0,0,0,0.5);
        z-index:-1;
        transition-delay:0.6s;
    }
    .sidebar-menu {
        width:100%;
        height:100%;
        background-color:#fff;
        position:absolute;
        right:0;
        overflow-y: scroll;
    }
    .sidebar-menu .logo_box {
        width:100%;
        height:10%;
        background:linear-gradient(to right, #D9AB73, #6e3e02);
        position:relative;
    }
    .sidebar-menu .logo_box img {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    .sidebar-menu .sidebar_wrap{
        height:100%;
        position:relative;
        margin:0 auto;
        z-index:2;
    }
    .sidebar-menu .gnb_al_ul {
        width:100%;
        padding-top:80px;
        background-color:#fff;
        position:relative;
        z-index:99999999999;
    }
    .sidebar-menu .gnb_al_ul .title {
        width:90%;
        padding:20px 0;
        display: block;
        margin:0 auto;
        color: #222324;
        font-size:17px;
        font-weight: 500;
        text-transform: capitalize;
        box-sizing:border-box;
        cursor: pointer;
        position:relative;
        border-bottom:1px solid #ccc;
    }
    .sidebar-menu .gnb_al_ul .title::after {
        content: "\f054";
        position:absolute;
        top:50%;
        margin-top:-7px;
        right:0;
        font-family:FontAwesome;
        font-size:0.8em;
        opacity:0.5;
    }
    .sidebar-menu .gnb_al_ul .title::before {
        content:'';
        width:0;
        height:1px;
        background-color:#ccc;
        position:absolute;
        left:0;
        bottom:0;
    }
    .sidebar-menu .gnb_al_ul .title:hover::before {
        width:100%;
        height:2px;
        background:linear-gradient(to right, #D9AB73, #6e3e02);
        transition-duration:0.6s;
    }
    .sidebar-menu .gnb_al_ul .title:hover::after {
        opacity:0.7;
        transform:translateX(5px);
        transition-duration:0.6s;
    }
    .sidebar-menu .gnb_al_ul .title.on::after {
        transform:rotate(90deg);
        opacity:1;
        transition-duration:0.6s;
    }
    .sidebar-menu .menu_ul{
        display:none;
        padding-left:42px;
        transition: all .3s linear;
        cursor: pointer;
    }
    .sidebar-menu .menu_ul.on {
        display:block;
        transition: all .3s linear;
    }
    .sidebar-menu .gnb_list a {
        width:100%;
        display:block;
        padding:20px 0 10px 10px;
        font-size:1.2em;
        font-weight:400;
        color:#333;
    }
    .sidebar-menu .gnb_list a:hover {
        font-weight:600;
        margin-left:10px;
        transition-duration:0.3s;
    }
    .sidebar_info {
        width:100%;
        height:10%;
        padding:0 20px;
        position:absolute;
        bottom:15%;
    }
    .sidebar_info div{
        width:100%;
        height:60px;
        line-height:60px;
        margin:0 auto;
        text-align:center;
    }
    .sidebar_info div a {
        width:100%;
        height:100%;
        display:block;
        font-size:14px;
        font-weight:bold;
    }
    .sidebar_info .user_info {
        display:flex;
    }
    .sidebar_info .user_info .icon {
        display:inline-block;
        padding-right:5px;
    }
    .sidebar_info .mem {
        width:49%;
        margin-right:2%;
        border:1px solid #333;
        box-sizing:border-box;
    }
    .sidebar_info .mem span {
        color:#333;
    }
    .sidebar_info .qna {
        width:49%;
        background:linear-gradient(to right, #D9AB73, #6e3e02);
    }
    .sidebar_info .qna a {
        color:#fff;
    }
    .sidebar_info .hd_list {
        overflow: hidden;
        width:100%;
        padding-bottom:4%;
    }
    .sidebar_info .hd_list li{
        float:left;
        width:24%;
        margin-right:0.75%;
        text-align:center;
        opacity:0.6;
        cursor:pointer;
    }
    .siderbar_info .hd_list li:last-child {
        margin-right:0;
    }
    .sidebar_info .hd_list li:hover {
        opacity:1;
    }
    .sidebar_info .hd_list li:last-child {
        margin-right:0;
    }
    .sidebar_info .hd_list li span {
        display:block;
        width:30px;
        height:30px;
        line-height:30px;
        border:1px solid #333;
        box-sizing:border-box;
        border-radius:50%;
        margin:0 auto 5px auto;
    }
    .sidebar_info .hd_list li span i {
        font-size:16px;
        color:#333;
    }
    .sidebar_info .hd_list li p {
        font-size:12px;
        font-weight:600;
        color:#333;
    }
    /* e:햄버거버튼 */
    
}