@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    text-decoration: none;
    list-style: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


html,
body {
    line-height: 1;
    font-family: 'Pretendard', sans-serif;
    font-size: 10px;
    font-weight: 400;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    font-family: 'Pretendard', sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    word-break: keep-all;
    /* color: var(--black); */
}

a {
    color: inherit;
    text-decoration: none;
    transition: .3s;
    cursor: pointer;
}

a:hover {
}

a:focus {
    outline: none;
}

button {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}


/* codenumber4 style guide */
input {
    line-height: 22px;
    padding: 0 12px;
    margin: 5px 0 17px;
    font-size: 16px;
    width: 100%;
    height: 48px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--grey2);
    -webkit-user-select: auto;
    -webkit-appearance: none;
    appearance: none;
    color: var(--black);
}

textarea {
    width: 100%;
    resize: none;
    outline: none;
    -webkit-user-select: auto;
    padding: 10px 12px;
    border: 1px solid var(--grey2);
    border-radius: 8px;
    min-height: 115px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 22px;
}

input,
textarea,
input::placeholder,
textarea::placeholder {
    font-family: 'Pretendard', sans-serif;
}

input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder {
    color: var(--date);
    font-weight: normal;
}

input::-ms-input-placeholder {
    color: var(--date);
}

input::-webkit-input-placeholder {
    color: var(--date);
}

textarea::-ms-input-placeholder {
    color: var(--date);
}

textarea::-webkit-input-placeholder {
    color: var(--date);
}


input:focus {
    outline: none;
    border-color: var(--brand);
}

input:disabled {
    background-color: var(--grey1);
}

input:disabled::placeholder {
    color: var(--grey5);
}


select {
    border: 1px solid #333;
    padding: 0 15px;
    color: #333;
    font-size: 14px;
    background-color: #fff;
    outline: none;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    /*background: url(../image/bg/bg-arrow-down.svg) right 13px center / 8px auto no-repeat;*/
    appearance: none;
    -webkit-appearance: none;
}

select::-ms-expand {
    display: none;
}


.clear-float {
    clear: both;
}

.p_0 {
    padding: 0 !important;
}

.pl_0 {
    padding-left: 0 !important;
}

.pr_0 {
    padding-right: 0 !important;
}

.pb_0 {
    padding-bottom: 0 !important;
}

.m_0 {
    margin: 0 !important;
}

.ml_0 {
    margin-left: 0 !important;
}

.mr_0 {
    margin-right: 0 !important;
}

.mb_0 {
    margin-bottom: 0 !important;
}

.mt_0 {
    margin-top: 0 !important;
}


/*text style*/
.al {
    text-align: left !important;
}

.ac {
    text-align: center !important;
}

.ar {
    text-align: right !important;
}


.cursor {
    cursor: pointer;
}


/* scroll */
.scroll-none {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scroll-none::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
}

/* 스크롤바 전체 기본 꾸미기 */
::-webkit-scrollbar {
    width: 4px;
}

/* 스크롤바 막대 꾸미기 */
::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 8px;
}

/* 스크롤바 트랙 꾸미기 */
::-webkit-scrollbar-track {
    background: #fff;
}

/* button style */
button,
.btn {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border-radius: 50px;
    font-size: 14px;
    transition: .5s;
    background-color: var(--grey2);
    color: var(--black);
    transition: .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}



.none,
.m_none {
    display: none !important;
}

@media all and (min-width: 1024px) {
    .m_none {
        display: block !important;
    }

    .pc_none {
        display: none !important;
    }
}


/* font */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Bold.woff2') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-SemiBold.woff2') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Regular.woff2') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.bold,
b {
    font-weight: 700 !important;
}

.logo,
.list_item .tit, .list_item .cate,
.view_item .tit, .view_item .cate,
.blog_list h3,
.view_item .txt h2, .view_item .txt h3,
.view_item .txt button,
.other_post .tit_area,
.copyright {
    font-weight: 700;
}

.c,
.list_item .txt, .list_item .date,
.view_item .txt, .view_item .date,
.theme_by {
    font-weight: 400;
}

.logo {
    font-size: 20px;
    line-height: 1.2;
}

.c {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.6px;
}

.c2 {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.51px;
}

.list_item .tit {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.6px;
    word-break: normal;
}

.list_item .cate {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--point);
}

.list_item .txt {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--tbody);
}

.list_item .date {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
    color: var(--date);
}

.view_item .tit,
.other_post .tit_area {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.72px;
}

.view_item .cate {
    font-size: 16px;
    line-height: 1.2;
    color: var(--point);
    letter-spacing: -0.48px;
}

.view_item .txt,
.view_item .txt button,
.btn_prev, .btn_next,
.pagenation > *,
.ft_search input {
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: -0.51px;
}

.view_item .txt * {
    font-size: 17px !important;
    line-height: 1.9 !important;
    letter-spacing: -0.51px !important;
    word-break: break-all !important;
}

.view_item .txt {
    color: var(--body) !important;
}

.view_item .date {
    font-size: 14px;
    line-height: 1.2;
    color: var(--date);
    letter-spacing: -0.42px;
}

.view_item .txt h2 {
    font-size: 22px !important;
    line-height: 1.9 !important;
    letter-spacing: -0.66px !important;
}

.blog_list h3,
.view_item .txt h3 {
    font-size: 20px !important;
    line-height: 1.9 !important;
    letter-spacing: -0.6px !important;
}

.view_item .txt p + h2,
.view_item .txt div + h2,
.wp-block-buttons + h2,
figure + h2,
.view_item .txt p + h3,
.view_item .txt div + h3,
.wp-block-buttons + h3,
figure + h3 {
    margin-top: 30px;
}

.view_item .table_all * {
    font-size: 15px !important;
    line-height: 1.9 !important;
    letter-spacing: -0.6px !important;
}

.copyright {
    font-size: 15px;
    letter-spacing: -0.45px;
}

.theme_by {
    font-size: 14px;
    letter-spacing: -0.42px;
}


@media screen and (min-width: 1024px) {

    .c {
        font-size: 17px;
        letter-spacing: -0.51px;
    }

    .c2 {
        font-size: 15px;
        line-height: 1.2;
        letter-spacing: -0.45px;
    }
    
    .list_item .tit {
        font-size: 26px;
        letter-spacing: -0.84px;
    }
    
    .list_item .cate {
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -0.54px;
    }

    .list_item .txt {
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: -0.54px;
    }
    
    .list_item .date {
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.48px;
    }
        
    .view_item .tit,
    .other_post .tit_area {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -1.08px;
    }
    
    .view_item .cate {
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -0.66px;
    }
    
    .view_item .txt,
    .btn_prev, .btn_next,
    .pagenation > *,
    .ft_search input {
        font-size: 18px;
        letter-spacing: -0.54px;
    }

    .view_item .txt * {
        font-size: 18px !important;
        letter-spacing: -0.54px !important;
    }
    
    .view_item .date {
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -0.54px;
    }

    .view_item .txt h2 {
        font-size: 24px !important;
        letter-spacing: -0.72px !important;
    }
    
    .blog_list h3,
    .view_item .txt h3 {
        font-size: 22px !important;
        letter-spacing: -0.66px !important;
    }

    .copyright {
        font-size: 16px;
        letter-spacing: -0.48px;
    }

}

.view_item .txt .has-small-font-size * {
    font-size: 15px !important;
    line-height: 1.9 !important;
}

.view_item .txt strong {
    font-weight: bold !important;
}

.view_item .txt em {
    font-style: italic !important;
}

.view_item .txt ul {
    padding-left: 20px;
    margin-bottom: 24px;
}

.view_item .txt ul li {
    list-style: disc !important;
}

.view_item .txt ol {
    margin-bottom: 24px;
    padding-left: 20px;
}

.view_item .txt ol li {
    list-style: decimal !important;
}


/* color */
:root {
    --black: #181818;
    --tbody: #878787;
    --point: #2BA69A;
    --date: #C7C7C7;
    --body: #383838;
    --bg: #FAFAFA;
    --line: #E7E7E7;
}


.sticky {
    position: sticky;
}


/* flex */
.flex {
    display: flex;
}

.row {
    display: flex;
    flex-direction: row;
}

.col {
    display: flex;
    flex-direction: column;
}

.fc {
    display: flex;
    align-items: center;
    justify-content: center;
}


.flex_2,
.flex_3,
.flex_4 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex_2 > *,
.flex_3 > *,
.flex_4 > * {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .flex_2 > *,
    .flex_4 > * {
        width: 47.5%;
    }
}


@media screen and (min-width: 1024px) {
    .flex_3 > * {
        width: 30%;
    }

    .flex_4 > * {
        width: 25%;
    }
}


/**/
.wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.wrap.col > * {
    flex: 0 0 auto;
}

.inner {
    width: calc(100% - 48px);
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 1024px) {

    .inner {
        max-width: 800px;
    }

}

@media screen and (max-width: 499px) {
    body.notScroll {
        overflow: hidden;
    }
}

/* header */
header {
    background-color: #fff;
    border-bottom: 1px solid #E4E4E4;
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

header .inner {
    display: flex;
    align-items: center;
    max-width: 848px;
    width: 100%;
    padding-left: 24px;
}

.logo img {
    width: auto;
    height: 100%;
    max-height: 24px;
}

nav {
    width: 100vw;
    height: calc(100% - 60px);
    position: fixed;
    top: 60px;
    left: 0;
    padding: 14px 28px;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
}

nav.hd_pc {
    display: none;
}

nav.open {
    visibility: visible;
    opacity: 1;
}

nav span {
    cursor: pointer;
}

nav a,
nav span {
    padding: 14px 0;
    display: block;
}

nav a.on,
nav a:hover,
nav span.on,
nav span:hover {
    color: var(--point);
}

nav a.on,
nav span.on {
    font-weight: bold;
}

.nav a.c2.on {
    font-weight: 500;
}

.submenu {
    position: relative;
}

.submenu > ul {
    display: none;
    margin-bottom: 6px;
}

.submenu li a {
    margin-left: 13px;
    padding: 8px 0;
}

.submenu.click > a {
    padding-bottom: 8px;
}

@media screen and (min-width: 1024px) {
    header .inner {
        padding-left: 0;
    }

    .logo {
        padding: 0 24px;
    }

    nav {
        visibility: visible;
        opacity: 1;
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: 100%;
        background: transparent;
        padding: 0;
        margin-left: auto;
    }

    nav.hd_pc {
        display: block;
    }

    nav.hd_mo {
        display: none;
    }

    nav > ul {
        display: flex;
        align-items: center;
        height: 100%;
    }

    nav > ul > li {
        height: 100%;
    }

    nav a {
        padding: 0 24px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .submenu {
        position: relative;
    }

    .submenu::before {
        content: '';
        position: absolute;
        bottom: -10px;
        width: 100%;
        height: 10px;
        background-color: transparent;
    }

    .submenu > a {
        padding-right: 38px;
        background: url(../img/ic_hd_arrow.svg) center right 24px / 10px auto no-repeat;
        transition: .3s;
    }

    .submenu > a.on,
    .submenu > a:hover {
        background-image: url(../img/ic_hd_arrow_point.svg);
    }

    .submenu > ul {
        position: absolute;
        left: 50%;
        top: 64px;
        transform: translateX(-50%);
        margin-bottom: 0;
        padding: 16px 24px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--line);
    }
    
    .submenu li a {
        margin-left: 0;
        white-space: nowrap;
    }

}

/* 2025-07-17 관리자 페이지 헤더 겹침 해결 */
@media screen and (min-width: 701px) {
    .admin-bar header {
	   top: var(--wp-admin--admin-bar--height);
	}
}

@media screen and (max-width: 1023px) {
    .admin-bar nav {
        top: calc(60px + var(--wp-admin--admin-bar--height));
    }
}


/*menu-trigger*/
.menu-trigger,
.menu-trigger span {
    transition: all .4s;
    box-sizing: border-box;
    z-index: 11;
}

.menu-trigger {
    position: relative;
    width: 65px;
    height: 100%;
    margin-left: auto;
    cursor: pointer;
}

.menu-trigger span {
    position: absolute;
    left: 24px;
    width: 17px;
    height: 2px;
    background-color: var(--black);
    border-radius: 5px;
}

.menu-trigger span:first-child {
    top: 25px;
}

.menu-trigger span:last-child {
    bottom: 25px;
}

.menu-trigger.active span:first-child {
    transform: translateY(3px) rotate(-45deg);
}

.menu-trigger.active span:last-child {
    transform: translateY(-4px) rotate(45deg);
}
/* menuToggle end */


/* footer */
footer {
    margin-top: auto;
}

.ft_search {
    margin-bottom: 24px;
}

.ft_search input {
    display: block;
    width: calc(100% - 48px);
    max-width: 423px;
    margin: 0 auto;
    border: 2px solid var(--black);
    border-radius: 100px;
    padding: 0 19px 0 51px;
    background: url(../img/ic_search.svg) left 19px center / 16px auto no-repeat;
}

.ft_copy {
    width: 100%;
    height: auto;
    padding: 10px 24px 18px;
    background-color: var(--body);
    text-align: center;
}

.ft_copy > div {
    width: 100%;
    padding: 4px 0;
}

.ft_copy * {
    color: var(--tbody);
}

.ft_copy a {
    position: relative;
}

.ft_copy a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--tbody);
}

.copyright span {
    margin-right: 5px;
    font-weight: 400;
}

@media screen and (min-width: 1024px) {
    .ft_search {
        margin-bottom: 40px;
    }
}

#content {
    margin-top: 60px;
    padding-top: 32px;
    padding-bottom: 60px;
}

@media screen and (min-width: 1024px) {
    #content {
        padding-top: 52px;
        padding-bottom: 60px;
    }
}

/* pagenation */
.pagenation {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagenation > * {
    padding: 0 10px;
    color: var(--black);
    height: 30px;
}

.pagenation strong,
.pagenation .current {
    color: var(--point);
    font-weight: bold;
}

.pagenation .direction {
    width: 30px;
    height: 30px;
    display: inline-block;
    background-position: center;
    background-size: 6px auto;
    background-repeat: no-repeat;
    padding: 0;
}

.pagenation .direction.lt {
    background-image: url(../img/ic_page_left.svg);
}

.pagenation .direction.lt.dis {
    background-image: url(../img/ic_page_left_dis.svg);
}

.pagenation .direction.rt {
    background-image: url(../img/ic_page_right.svg);
}

.pagenation .direction.rt.dis {
    background-image: url(../img/ic_page_right_dis.svg);
}

@media screen and (min-width: 1024px) {
    .pagenation {
        margin-top: 60px;
    }
    
    .pagenation .direction {
        background-position: top 10px center;
    }
}



/* blog_list */
.blog_list h3 {
    text-align: center;
    padding: 100px 0;
}

.blog_list .list_item {
    display: block;
}

.blog_list .list_item:not(:first-of-type) {
    margin-top: 40px;
}

.list_item .thumb {
    width: 100%;
    height: 0;
    padding-bottom: 57.1%;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.list_item .thumb .img_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.img_box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: none;
    /* background-color: #D9D9D9; */
}

.list_item .cate {
    margin-top: 12px;
}

.list_item .tit {
    margin-top: 12px;
}

.list_item .txt {
    margin-top: 6px;
    text-align: justify;
    height: 72px;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: none;
}

.list_item .date {
    margin-top: 8px;
}

@media screen and (min-width: 1024px) {
    .blog_list h3 {
        padding: 180px 0;
    }

    .blog_list .list_item {
        display: flex;
    }

    .blog_list .list_item:not(:first-of-type) {
        margin-top: 56px;
    }

    .list_item .thumb {
        width: 300px;
        height: 200px;
        padding-bottom: 0;
        border-radius: 20px;
    }

    .list_item .txt_area {
        width: calc(100% - 300px);
        display: flex;
        flex-direction: column;
        padding-left: 33px;
    }

    .list_item .cate {
        margin-top: 11px;
    }

    .list_item .tit {
        margin-top: 11px;
    }

    .list_item .txt {
        margin-top: 12px;
        height: 54px;
        -webkit-line-clamp: 2;
    }

    .list_item .date {
        margin-top: 12px;
    }
    
}


/* blog_view */
#content.blog_view {
    padding-bottom: 0;
}

.blog_view .inner {
    max-width: auto;
    width: 100%;
}

.view_item > *,
.other_post .inner {
    width: calc(100% - 48px);
    margin: 0 auto;
    max-width: 600px;
}

.view_item .tit_area {
    margin-bottom: 20px;
}

.view_item .cate {
    margin-bottom: 11px;
}

.view_item .date {
    margin-top: 8px;
}

.view_item .txt_area {
    padding-bottom: 60px;
}

.view_item img {
    width: 100%;
    height: auto;
    display: block;
}

.view_item img,
.has-background {
    border-radius: 8px;
    overflow: hidden;
}

.view_item .txt {
    text-align: justify;
    word-break: break-all;
}

.view_item .txt img,
.view_item .txt p {
    margin-bottom: 10px;
}

.view_item .txt h2,
.view_item .txt h3,
.view_item .txt h4,
.view_item .txt h5,
.view_item .txt h6 {
    margin-bottom: 5px;
}


.view_item .txt a {
    word-break: break-all;
    transition: color .25s ease-in;
    background-repeat: no-repeat;
    background-size: 0 100%;
    background-position: 0 100%;
    background-image: linear-gradient(to right, var(--point), var(--point));
    transition: all .25s ease-in;
    color: var(--point);
    border-bottom: 1px solid var(--point);
}

.view_item .txt a:hover {
    background-size: 100% 100%;
    color: #fff;
}

.wp-block-buttons {
    padding: 10px 0;
}

.wp-block-buttons > .wp-block-button {
    display: block !important;
    width: 100%;
}

.view_item .txt button,
.wp-block-buttons > .wp-block-button a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 44px;
    background-color: var(--black);
    background-image: var(--black);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 8px;
    transition: .3s;
    border-bottom: none;
}

.view_item .txt button:hover,
.wp-block-buttons > .wp-block-button a:hover {
    background-color: var(--point);
}


@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

@media screen and (min-width: 1024px) {
    
    .view_item > * {
        width: 100%;
        max-width: 100%;
    }

    .view_item .cate {
        margin-bottom: 12px;
    }
    
    .view_item .date {
        margin-top: 14px;
    }
    
    .view_item .txt_area {
        padding-bottom: 100px;
    }

    .view_item .txt button,
    .wp-block-buttons > .wp-block-button a {
        padding: 12px 48px;
    }
    
}



/* 목차 */
.table_all {
    background-color: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--line);
    margin-bottom: 20px;
}

.collapsible {
    cursor: pointer;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    color: var(--body);
}

.collapsible:after {
    content: '';
    margin-left: 5px;
    width: 6px;
    height: 12px;
    background: url(../img/ic_post_prev.svg) center / contain no-repeat;
    transform: rotate(90deg);
    transition: .3s;
}

.active:after {
    transform: rotate(-90deg);
}

.tb_all_content,
.collapsible + div {
    padding: 0 24px;
    margin-bottom: 15px;
}

.collapsible.active + div {
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.tb_all_content a {
    display: block;
    color: var(--tbody);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb_all_content a.h3 {
    padding-left: 13px;
}

.tb_all_content a:hover {
    color: var(--point);
}



@media screen and (min-width: 1024px) {
    .blog_view .inner {
        width: 100%;
        max-width: 100%;
    }

    .view_item .tit_area {
        padding-left: calc(50% - 300px);
    }

    .view_item .txt_area .txt_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .view_item .tit_area *,
    .view_item .txt_area img,
    .view_item .txt_area .txt,
    .view_item .txt_area .btn_area {
        width: 100%;
        max-width: 600px;
    }

    .view_item .txt_area .txt {
        order: 2;
    }

    .table_all_wrap {
        order: 3;
        width: calc( 50% - 320px );
        /* width: calc(100% - 620px); */
        max-width: 312px;
        position: sticky;
        top: 100px;
        right: 0px;
        align-self: flex-start;
        margin: 0;
        margin-left: 20px;
    }

    .table_all {
        width: 100%;
        height: 100%;
    }
}

@media screen and (min-width: 1400px) {
    .table_all_wrap {
        width: calc(100% - 342px);;
        /* width: calc(100% - 642px); */
        margin-left: 42px;
    }
}



/* 이전글, 다음글 */
.view_item .btn_area {
    padding: 60px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn_prev, .btn_next {
    display: block;
    color: var(--body);
    background-color: transparent;
    border: 1px solid var(--body);
    border-radius: 100px;
    width: 108px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_prev:hover,
.btn_next:hover {
    color: #fff;
    background-color: var(--black);
    border-color: var(--black);
}

.btn_prev.dis,
.btn_next.dis,
.btn_prev.dis:hover,
.btn_next.dis:hover {
    cursor: not-allowed;
    color: var(--date);
    background-color: transparent;
    border: 1px solid var(--date) !important;
}

.btn_prev span,
.btn_next span {
    width: 6px;
    height: 12px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.btn_prev span {
    background-image: url(../img/ic_post_prev.svg);
    margin-right: 10px;
    transition: .3s;
}

.btn_prev:hover span {
    background-image: url(../img/ic_post_prev_hover.svg);
}

.btn_prev.dis span {
    background-image: url(../img/ic_post_prev_dis.svg);
}

.btn_next span {
    background-image: url(../img/ic_post_next.svg);
    margin-left: 10px;
}

.btn_next:hover span {
    background-image: url(../img/ic_post_next_hover.svg);
}

.btn_next.dis span {
    background-image: url(../img/ic_post_next_dis.svg);
}


@media screen and (min-width: 1024px) {
    .view_item .btn_area,
    .ban_post_bt {
        margin-left: calc(50% - 300px);
    }

    .btn_prev, .btn_next {
        width: 115px;
        height: 46px;
    }
    
}





/* other post */
.other_post {
    background-color: var(--bg);
    padding-top: 44px;
    margin-bottom: 60px;
}

.other_post .tit_area {
    text-align: center;
    padding-bottom: 40px;
}


.other_post .list_item .tit {
    margin-top: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other_post .list_item .date {
    margin-top: 6px;
}

.other_post .swiper {
    padding-bottom: 74px;
}

.other_post .swiper-slide {
    width: 100%;
}

.other_post .swiper-pagination {
    bottom: 34px !important;
}

.other_post .swiper-pagination-bullet {
    background-color: #d9d9d9 !important;
    opacity: 1 !important;
}

.other_post .swiper-pagination-bullet-active {
    background: var(--black) !important;
}


@media screen and (min-width: 1024px) {
    .other_post {
        padding-top: 94px;
        margin-bottom: 40px;
    }

    .other_post .inner {
        max-width: 912px;
    }

    .other_post .tit_area {
        padding-bottom: 48px;
    }

    .other_post .swiper {
        padding-bottom: 135px;
    }

    .other_post .swiper-slide {
        width: calc(50% - 16px);
    }
    
    .other_post .swiper-pagination {
        bottom: 76px !important;
    }

    .other_post .list_item .thumb {
        width: 100%;
        height: 0;
        padding-bottom: 66.6%;
    }

    .other_post .list_item .txt_area {
        width: 100%;
        padding-left: 0;
    }
    
    .other_post .list_item .cate {
        margin-top: 29px;
    }

    .other_post .list_item .tit {
        margin-top: 12px;
    }
    
    .other_post .list_item .date {
        margin-top: 13px;
    }
    
}

/* 상단 프로세스 바 */
.progress-container {
    width: 100%;
    /* 프로그래스 배경 색상 */
    background-color: transparent;
    /* 상단에 위치하기 위함 */
    position: relative;
    top: 0;
    z-index: 9999;
}

.progress-bar {
    /* 프로그래스바 높이 */
    height: 2px;
    /* 프로그래스바 색상 */
    background-color: var(--point);
    width: 0;
}


/* 배너(banner) */
.banner > a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ban_hd_top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 999;
}

.ban_hd_top + header {
    top: 30px;
}

.ban_hd_top + header nav {
    top: 90px;
}

.ban_hd_top ~ .progress-container {
    top: 90px;
}

.ban_hd_top ~ #content {
    margin-top: 90px;
}

.ban_hd_bt {
    width: calc(100% - 48px);
    max-width: 800px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.ban_post_bt {
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin-top: 30px;
}

.ban_other {
    width: 100%;
    max-width: 912px;
    height: 100px;
    margin-bottom: 30px;
}

.ban_ft_top {
    width: calc( 100% - 48px );
    max-width: 800px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.banner_lt_wrap {
    display: none;
    width: calc( 50% - 320px );
    max-width: 312px;
    height: 100%;
    margin-right: 20px;
    position: sticky;
    left: 0;
    top: 100px;
}

.ban_lt,
.ban_rt {
    display: none;
    width: 100%;
    height: 300px;
}

.ban_lt {
}

@media screen and (min-width: 1024px) {
    .ban_hd_top + header nav {
        top: 0;
    }

    .ban_hd_top ~ #content .banner_lt_wrap,
    .ban_hd_top ~ #content .table_all_wrap {
        top: 130px;
    }

    .banner_lt_wrap,
    .ban_lt,
    .ban_rt {
        display: flex;
    }

    .ban_lt {
    }
}

@media screen and (min-width: 1400px) {
    .banner_lt_wrap {
        width: calc( 50% - 342px );
        margin-right: 42px;
    }
}