@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


:root {
    --c1-color: #5cb046;
    --c2-color: #60a1d7;
    --c3-color: #f7966f;
    --c4-color: #7abadd;
    --c1-bg-color: #f2fdf0;
    --c2-bg-color: #dff0ff;
    --c3-bg-color: #ffede6;
    --c4-bg-color: #dcf3ff;
}


#sec01 {
    background: url(../images/main_bg.png);
    background-position: center center;
    background-size: cover;
}

#sec03 {
    background: url(../images/s3_bg.png);
    background-position: left center;
    background-size: cover;
}


/* c1 */
.c1-color {
    color: var(--c1-color) !important;
}

.c1-bg-color {
    background-color: var(--c1-bg-color) !important;
}

.c1-bg-color02 {
    background-color: var(--c1-color) !important;
}

.c2-color {
    color: var(--c2-color) !important;
}

.c2-bg-color {
    background-color: var(--c2-bg-color) !important;
}

.c2-bg-color02 {
    background-color: var(--c2-color) !important;
}

.c3-color {
    color: var(--c3-color) !important;
}

.c3-bg-color {
    background-color: var(--c3-bg-color) !important;
}

.c3-bg-color02 {
    background-color: var(--c3-color) !important;
}

/* 헤더 + 나브 */
#headers .h-inner .gnb li a.menu01::before {
    background-color: var(--c1-color) !important;
}

#headers .h-inner .gnb li a.menu01::after {
    background-color: var(--c1-color) !important;
}

#headers .h-inner .gnb li a.menu02::before {
    background-color: var(--c2-color) !important;
}

#headers .h-inner .gnb li a.menu02::after {
    background-color: var(--c2-color) !important;
}

#headers .h-inner .gnb li a.menu03::before {
    background-color: var(--c3-color) !important;
}

#headers .h-inner .gnb li a.menu03::after {
    background-color: var(--c3-color) !important;
}

#headers .h-inner .gnb li a.menu04::before {
    background-color: var(--c4-color) !important;
}

#headers .h-inner .gnb li a.menu04::after {
    background-color: var(--c4-color) !important;
}

#nav .nav-inner .right .menu.menu01 h3::before {
    background-color: var(--c1-color) !important;
}

#nav .nav-inner .right .menu.menu01 h3::after {
    background-color: var(--c1-color) !important;
}

#nav .nav-inner .right .menu.menu02 h3::before {
    background-color: var(--c2-color) !important;
}

#nav .nav-inner .right .menu.menu02 h3::after {
    background-color: var(--c2-color) !important;
}

#nav .nav-inner .right .menu.menu03 h3::before {
    background-color: var(--c3-color) !important;
}

#nav .nav-inner .right .menu.menu03 h3::after {
    background-color: var(--c3-color) !important;
}

#nav .nav-inner .right .menu.menu04 h3::before {
    background-color: var(--c4-color) !important;
}

#nav .nav-inner .right .menu.menu04 h3::after {
    background-color: var(--c4-color) !important;
}

#nav .nav-inner .right .menu.menu01 .menu-list ul li a::after {
    border-bottom: solid 2px var(--c1-color);
}

#nav .nav-inner .right .menu.menu01 .menu-list ul li a:hover h6 {
    color: var(--c1-color);
}

#nav .nav-inner .right .menu.menu02 .menu-list ul li a::after {
    border-bottom: solid 2px var(--c2-color);
}

#nav .nav-inner .right .menu.menu02 .menu-list ul li a:hover h6 {
    color: var(--c2-color);
}

#nav .nav-inner .right .menu.menu03 .menu-list ul li a::after {
    border-bottom: solid 2px var(--c3-color);
}

#nav .nav-inner .right .menu.menu03 .menu-list ul li a:hover h6 {
    color: var(--c3-color);
}

#nav .nav-inner .right .menu.menu04 .menu-list ul li a::after {
    border-bottom: solid 2px var(--c4-color);
}

#nav .nav-inner .right .menu.menu04 .menu-list ul li a:hover h6 {
    color: var(--c4-color);
}

/* 서브 */
/* 카테고리01 */
.sub .container .sec-inner .txt-bx .acc.c1 h3 {
    color: var(--c1-color);
}

.sub .container .sec-inner .txt-bx .acc.c1>li .acc-top .num-wrap h2 {
    color: var(--c1-color);
}

.sub .container .sec-inner .txt-bx .acc.c1>li .acc-top .num-wrap .num {
    background-color: var(--c1-color);
}

.sub .container .sec-inner .txt-bx .acc.c1>li .acc-top.on .ico img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(46%) saturate(566%) hue-rotate(62deg) brightness(109%) contrast(87%);
}

.sub .container .sec-inner .txt-bx .c1 .list-wrap02 li>span:first-child {
    color: var(--c1-color);
}

.sub .container .sec-inner .txt-bx .acc.c1 .table table thead {
    background-color: var(--c1-color);
}


/* 카테고리02 */
.sub .container .sec-inner .txt-bx .acc.c2 h3 {
    color: var(--c2-color);
}

.sub .container .sec-inner .txt-bx .acc.c2>li .acc-top .num-wrap h2 {
    color: var(--c2-color);
}

.sub .container .sec-inner .txt-bx .acc.c2>li .acc-top .num-wrap .num {
    background-color: var(--c2-color);
}

.sub .container .sec-inner .txt-bx .acc.c2>li .acc-top.on .ico img {
    filter: invert(71%) sepia(6%) saturate(5896%) hue-rotate(179deg) brightness(90%) contrast(85%);

}

.sub .container .sec-inner .txt-bx .acc.c2 .table table thead {
    background-color: var(--c2-color);
}

.sub .container .sec-inner .txt-bx .c2 sup {
    color: var(--c2-color);
}

.sub .container .sec-inner .txt-bx .c2 .list-wrap02 li>span:first-child {
    color: var(--c2-color);
}

/* 카테고리03 */
.sub .container .sec-inner .txt-bx .c3-highlight {
    display: inline;
    box-shadow: inset 0 -10px 0 #fce3cb;
}

.sub .container .sec-inner .txt-bx .acc.c3>li .acc-top .num-wrap h2 {
    color: var(--c3-color);
}

.sub .container .sec-inner .txt-bx .acc.c3 h3 {
    color: var(--c3-color);
}

.sub .container .sec-inner .txt-bx .acc.c3>li .acc-top .num-wrap .num {
    background-color: var(--c3-color);
}

.sub .container .sec-inner .txt-bx .acc.c3>li .acc-top.on .ico img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(79%) saturate(1324%) hue-rotate(312deg) brightness(100%) contrast(94%);
}

/* 카테고리04 */

/* 서비스 페이지 */
.contents_top {
    margin-top: 100px;
}

.bookList {
    margin-top: 200px;
}

#sub .contents_top .title_wrapper .info-list {
    margin-bottom: 50px;
}

#sub .contents_top .title_wrapper .info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

#sub .contents_top .title_wrapper .info-list li p {
    font-weight: 600;
}

#sub .contents_top .title_wrapper .tag01 {
    width: fit-content;
    padding: 8px 15px;
    box-sizing: border-box;
    color: #fff;
    background-color: #7abadd;
}


@media screen and (max-width: 576px) {
    .bookList {
        margin-top: 100px;
    }
}

.old_form #headers .h-inner .gnb li a {
    color: #424242;
    font-size: 20px;
    font-family: "TheJamsil5Bold";
    height: 100%;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    letter-spacing: -1px;
    font-weight: 700;
}