@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: #00b1b8;
    --c2-color: #28a46d;
    --c3-color: #ec6d74;
    --c4-color: #7abadd;
    --c1-bg-color: #f0fafd;
    --c2-bg-color: #f1f6f0;
    --c3-bg-color: #ffeeef;
    --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;
}

.sub .container .sec-inner .txt-bx .q-txt {
    display: flex;
    gap: 10px;
}

.sub .container .sec-inner .txt-bx .q-txt .q-tag {
    width: fit-content;
    padding: 5px 15px;
    box-sizing: border-box;
    border-radius: 30px;
    color: #fff;
    height: fit-content;
    white-space: nowrap;
}

.sub .container .sec-inner .txt-bx .q-txt .q-tag.blue {
    background-color: #004f99;
}

.sub .container .sec-inner .txt-bx .q-txt .q-tag.pink {
    background-color: #ec6e74;
}

.sub .container .sec-inner .txt-bx .font-myeongjo {
    font-family: 'Nanum Myeongjo', serif;
    font-style: italic;
}

.sub .container .sec-inner .txt-bx .data-txt {
    gap: 3px;
}

.sub .container .sec-inner .txt-bx table.keep-all td,
.sub .container .sec-inner .txt-bx table.keep-all th {
    word-break: keep-all;
}

.sub .container .sec-inner .txt-bx table td .img-bx {
    width: 100%;
}

.sub .container .sec-inner .txt-bx table td .img-bx img {
    width: 100%;
    display: block;
}

.old_form .crawling-contents-textbox p b {
    font-weight: 600;
}


.sub .container .sec-inner .txt-bx .data-tag::before {
    background-color: #00975b;
}

.sub .container .sec-inner .txt-bx .acc.c1>li .acc-top.on .ico img {
    filter: invert(52%) sepia(41%) saturate(3580%) hue-rotate(147deg) brightness(95%) contrast(101%);
}

.sub .container .sec-inner .txt-bx .acc.c2>li .acc-top.on .ico img {
    filter: invert(49%) sepia(57%) saturate(474%) hue-rotate(101deg) brightness(94%) contrast(96%);
}

.sub .container .sec-inner .txt-bx .acc.c3>li .acc-top.on .ico img {
    filter: invert(55%) sepia(53%) saturate(667%) hue-rotate(308deg) brightness(94%) contrast(97%);
}


.sub .container .sec-inner .txt-bx .txt-border {
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* 메인 */
.main .container #sec02 .sec-inner .cont #s2_swiper .swiper-slide:hover .img-bx {
    border: 1px solid var(--c1-color) !important;
}

.main .container #sec02 .sec-inner .cont #s2_swiper .swiper-slide:hover .txt-bx h6 {
    border: 1px solid var(--c1-color) !important;
    color: var(--c1-color) !important;
}

.main .container #sec02 .sec-inner .cont #s2_swiper .swiper-navi .swiper-progress .progress-bar {
    background-color: var(--c1-color) !important;
}

.main .container #sec02 .sec-inner .cont #s2_swiper .swiper-navi .btn-wrap .swiper-button-prev:hover,
.main .container #sec02 .sec-inner .cont #s2_swiper .swiper-navi .btn-wrap .swiper-button-next:hover {
    background-color: var(--c1-color) !important;
}


.main .container #sec03 .sec-inner .cont #s3_swiper .swiper-slide:hover .txt-bx h6 {
    color: var(--c2-color) !important;
    border: 1px solid var(--c2-color) !important;
    opacity: 1;
}

.main .container #sec03 .sec-inner .cont #s3_swiper .swiper-navi .swiper-progress .progress-bar {
    background-color: var(--c2-color) !important;
}

.main .container #sec03 .sec-inner .cont #s3_swiper .swiper-navi .btn-wrap .swiper-button-prev:hover,
.main .container #sec03 .sec-inner .cont #s3_swiper .swiper-navi .btn-wrap .swiper-button-next:hover {
    background-color: var(--c2-color) !important;
}


.main .container #sec04 .sec-inner .cont #s4_swiper .swiper-slide:hover .txt-bx {
    background-color: var(--c3-color) !important;
}

.main .container #sec04 .sec-inner .cont #s4_swiper .swiper-slide:hover .txt-bx h6 {
    background-color: #a84d52;
}

.main .container #sec04 .sec-inner .cont #s4_swiper .swiper-navi .swiper-progress .progress-bar {
    background-color: var(--c3-color) !important;
}

.main .container #sec04 .sec-inner .cont #s4_swiper .swiper-navi .btn-wrap .swiper-button-prev:hover,
.main .container #sec04 .sec-inner .cont #s4_swiper .swiper-navi .btn-wrap .swiper-button-next:hover {
    background-color: var(--c3-color) !important;
}

.main .container #sec01 .sec-inner .txt-bx h1 span {
    color: #0c4a81;
    /* background: none; */
}

.main .container #sec01 .sec-inner .txt-bx p span {
    color: #0c4a81;
    /* background: none; */
}

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

.data-txt {
    display: flex;
    justify-content: start;
    align-items: flex-start;
}

.data-txt::before {
    content: attr(data-text);
}