@charset "UTF-8";
    @font-face {
        font-family: 'SUITE-Regular';
        font-style: normal;
        font-weight: 400;
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 900;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-Black.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 800;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-ExtraBold.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 700;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-Bold.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 600;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-SemiBold.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 500;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-Medium.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 400;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-Regular.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 300;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-Light.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 200;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-ExtraLight.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Pretendard';
        font-weight: 100;
        font-display: swap;
        src: url('https://tistory1.daumcdn.net/tistory/3141006/skin/images/Pretendard-Thin.woff2') format('woff2');
    }

    ::selection {
        background:#000;
        color: #fff;
        text-shadow: none;
    }
    ::-moz-selection {
        background:#000;
        color: #fff;
        text-shadow: none;
    }
    ::-webkit-selection {
        background:#000;
        color: #fff;
        text-shadow: none;
    }

    .clearfix {
        display: table;
        clear: both;
        content: "";
    }
    *, *::before, *::after {
        box-sizing: border-box;
    }

    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, button {
        margin: 0; padding: 0;
        border: 0;
        vertical-align: baseline;
        font-size: inherit;
        color: inherit;
    }

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

    /* size init */
    html {
        overflow-x: hidden;
        height: 100%;
        scroll-behavior: smooth;
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    /* Basic Settings */
    body {
        height: 100%;
        min-height: 100vh;
        color: var(--txt-sec-light);
        font: 16px/1.5 'SUITE Variable', 'Pretendard', -apple-system, 'Noto Sans KR', sans-serif;
    }
    input, select, textarea, pre {
        color: inherit;
        font: 16px/1.5 'SUITE Variable', 'Pretendard', -apple-system, 'Noto Sans KR', sans-serif;
    }

    pre { white-space: pre-wrap; }
    fieldset, img { border: 0; max-width:100%;}
    select,input,img, button {vertical-align:middle; }
    address { font-style: normal; }
    ol, ul, li { list-style: none; }
    li::marker {display: none;}
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    em { font-style: normal; }

    summary::-webkit-details-marker { display: none; } 
    summary { list-style-type: none; }

    button { cursor: pointer; }
    textarea { border:0; width: 100%;background-color:transparent;word-break:keep-all;word-wrap:break-word;-webkit-backface-visibility:hidden;backface-visibility:hidden; }
    button, input { padding: 0; border: 0; background: inherit; font-family: inherit; -webkit-border-radius:0;border-radius:0; }


    h1, h2, h3, h4, h5, h6 {color: var(--txt-pri);}

    .sr-only {
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        white-space: nowrap !important;
    }

    #wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: #fafafa;
    }
    /* header */
    .header {
    border-bottom: 1px solid #15181a;
    position: relative;
    position: fixed; top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    background-color: #fafafa;
    transition: top 0.2s ease-in-out;
    }

    .header .inner-header {
    margin: 0 auto;
    padding: 24px;
    position: relative;
    max-width: 100%;
    }
    .header .inner-header .box-header {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    flex-direction:row;
    }
    .header .logo-wrap {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-direction: row;
    line-height: 1;
    }
    .header .logo-wrap .title-logo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    }

    .header .logo-wrap .link_logo {
    display: block;
    overflow: hidden;
    font-size: 48px;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .header .logo-wrap p {
    font-size: 16px;
    color: #555;
    }

    .header .button-menu {
    display: none;
    padding: 10px;
    border: none;
    position: absolute;
    top: 21px;
    right: 80px;
    background: none;
    cursor: pointer;
    opacity: 1;
    }

    .header .button-menu:hover {
    transition: .2s ease-out;
    opacity: .7;
    }

    .header .area-slogun {
    padding-top: 33px;
    padding-bottom: 36px;
    }

    .header .area-slogun strong {

    display: -webkit-box;
    margin-bottom: 9px;
    overflow: hidden;
    max-height: 82px;
    font-family: Arial;
    font-size: 36px;
    white-space: normal;
    word-break: keep-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }

    .header .area-slogun p {
    margin: 0;
    width: 500px;
    font-size: 13px;
    line-height: 19px;
    color: #999;
    word-break: keep-all;
    }

    .header .area-gnb .topnavnone {
    display: none;
    }
    .header nav {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: row;
    }
    .btn_tool {
        min-width: fit-content;
    padding: 8px 12px;
    background-color: #212121;
    font-size: 14px;
    color: #fff;
    transition: .3s ease-in-out;
    border-radius: 30px;
    }
    .btn_tool:hover {
    background-color: #7ed9e5;
    color: #212121;
    }
    .header .tt_category {
    display: flex;
    flex-direction: row;
    }

    .header .tt_category ul {
    display: flex;
    gap: 20px;
    flex-direction: row;
    }
    .header .tt_category ul li {
    display: flex;
    gap: 20px;
    flex-direction: row;
    }
    .header .tt_category ul li a {
    padding: 0 3px;
    position: relative;
    z-index: 1;
    width: 100%;
    font-size: 14px;
    }
    .header .tt_category ul li a::after {
    border: 3px solid #9bf3ff;
    position: absolute; bottom: 3px;
    left: 0;
    z-index: -1;
    width: 0;
    transition: .3s ease-in-out;
    content: '';
    }
    .header .tt_category ul li a:hover::after {
    width: 100%;
    }
    .header .tt_category li .link_tit,
    .header .tt_category .category_list .link_item img,
    .header .tt_category .category_list .sub_category_list li a img {
    display: none;
    }

    .header .tt_category .category_list .c_cnt {
    display: none;
    }



    .header .topnavmenu>ul {
    margin: 0;
    }

    .header .slogun-use .area-slogun:before, .header .slogun-use nav:before {
    border-top: none !important;
    }
    #footer {
    margin-top: 64px;
    margin-bottom: auto;
    padding: 24px;
    }
    #footer .text-info {
    font-size: 14px;
    color: #aaa;
    text-align: right;
    }
    /* // area-promotion */
    /* container */
    #container {
    flex: 1;
    margin-top: calc(64px + 96px);
    position: relative;
    }

    /* main */
    .main {
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    max-width: 1280px;
}

    /* area-main */
    .area-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
    .article-title-thumbnail {
    display: none;
    }
    .article-type-common {
    display: flex;
    gap: 48px;
    flex-direction: column;
    padding-bottom: 48px;
    border-bottom: 1px solid #eee;
    }
    .article-content {
    display: flex;
    flex-direction: column;
    }
    .article-content .box-meta {
    display: flex;
    gap: 12px;
    flex-direction: row;
    align-items: center;
    font-size: 15px;
    color: #97b7cd;
    
    }
    .article-content .box-meta > a {
    width: fit-content;
        padding: 2px 12px;
        border-radius: 16px;
        background-color: #9bf3ff;
        color: #212121;
    }
    .article-content .box-meta .date,
    .article-type- .thumbnail,
    .article-type-thumbnail .thumbnail,
    .article-content .box-meta .reply {
    display: none;
    }
    .article-content,
    .article-content > a {
    display: flex;
    flex-direction: column;
    }
    .article-content {
    gap: 8px;
    flex-direction: column-reverse;
    }
    .article-content .link-article {
    gap: 4px;
    }
    .article-content .link-article .title {
    padding: 0 3px;
    position: relative;
    z-index: 1;
    width: fit-content;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 0;
    word-break: break-all;
    transition: .3s ease-in-out;
    }
    .article-content .link-article .title::after {
        border-bottom: 10px solid #9bf3ff;
        position: absolute;
        bottom: 7px;
        left: 0;
        z-index: -1;
        width: 0;
        transition: .3s ease-in-out;
        content: '';
    }
    .article-content .link-article:hover .title::after {
        width: 100%;
        max-width: 100%;
    }
    .article-content .title img {
    display: none;
    }
    .article-type- .summary,
    .article-type-thumbnail .summary {
    display: -webkit-box;
    overflow: hidden;
    max-width: 80%;
    max-height: 100px;
    word-break: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: none;
    }

    /* // area-cover */
    /* area-tag */
    .area-tag {
    min-height: 350px;
    }

    .area-tag .title-other {
    margin: 0 0 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    }

    .area-tag .box-tag a {
    display: inline-block;
    margin: 0 12px 9px 0;
    overflow: hidden;
    max-width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.57;
    color: #777;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    /* area-view - 상세 페이지 */
    /* article-header */
    .article-header {
    padding-bottom: 24px;
    border-bottom: 1px solid;
    background: none !important;
    }
    .article-header .inner-header {
    margin: 0 auto;
    max-width: 100%;
    }
    .article-header .box-meta p {
    margin: 0;
    }

    .article-header .box-meta .category {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    }

    .article-header .title-article {
    display: block;
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    font-size: 36px;
    white-space: normal;
    word-break: keep-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }

    .article-header .box-info {
    font-size: 13px;
    line-height: 1.54;
    opacity: .7;
    }

    .article-header .box-info .writer {
    margin-right: 15px;
    }

    .article-header .box-info .date {
    position: relative;
    }

    .article-header .box-info .date:before {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 2px;
    height: 2px;
    background: #fff;
    content: '';
    border-radius: 2px;
    }

    @media screen and (max-width: 1060px) {
    .article-header .box-meta {
        bottom: 36px;
    }

    .article-header .box-meta .category {
        font-size: 12px;
        font-weight: 400;
    }

    .article-header .title-article {
        font-size: 24px;
    }

    .article-header .box-info {
        font-size: 11px;
        font-weight: 400;
    }

    .article-header .box-info .date:before {
        top: 8px;
    }
    }
    .another_category {
    display: none;
    }

    /* // article-header */
    /* article-footer */
    .article-footer .title-footer {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    }

    /* // article-footer */
    /* article-tag - 상세페이지 태그  */
    .article-tag {
    display: flex;
    margin-bottom: 46px;
    padding-bottom: 43px;
    border-bottom: 2px solid #333;
    }

    .article-tag .title-footer {
    margin-right: 30px;
    padding-top: 8px;
    }

    .article-tag .box-tag {
    font-size: 0;
    }

    .article-tag .box-tag a {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    position: relative;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.69;
    color: #777;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 50px;
    text-overflow: ellipsis;
    }

    .article-tag .box-tag a:after {
    position: absolute;
    right: -10px;
    bottom: 6px;
    width: 5px;
    height: 5px;
    background: #fff;
    content: '';
    }

    .article-tag .box-tag a:hover {
    text-decoration: underline;
    }

    /* ----- media query - mobile ----- */
    @media screen and (max-width: 1060px) {
    .article-tag {
        display: block;
        margin-bottom: 38px;
        padding-bottom: 30px;
    }

    .article-tag .title-footer {
        margin: 0 0 10px 0;
    }

    .article-tag .box-tag a {
        margin: 0 8px 9px 0;
        padding: 3px 10px;
        font-size: 12px;
    }

    .article-tag .box-tag a:after {
        right: -7px;
        bottom: 4px;
    }
    }

    /* // article-tag */
    /* article-page - 상세페이지 이전다음글  */
    .article-page {
    margin-bottom: 46px;
    border-bottom: 1px solid #e8e8e8;
    }

    .article-page .title-footer {
    margin-bottom: 15px;
    }

    .article-page ul {
    margin: 0 0 45px 0;
    padding: 0;
    list-style: none;
    }

    .article-page ul li {
    margin-bottom: 7px;
    padding: 0;
    position: relative;
    font-size: 13px;
    line-height: 1.69;
    color: #999;
    }

    .article-page ul li:nth-child(2) {
    color: #333;
    }

    .article-page ul li:nth-child(2):after {
    position: absolute;
    top: 3px;
    left: 45px;
    font-size: 9px;
    content: ':';
    opacity: .7;
    }

    .article-page ul li:last-child {
    margin-bottom: 0;
    }

    .article-page ul li span {
    padding-right: 23px;
    }

    .article-page ul li a {
    color: #999;
    text-decoration: none;
    }

    .article-page ul li a:hover {
    text-decoration: underline;
    }

    .article-page ul li strong {
    font-weight: 400;
    }

    /* ----- media query - mobile ----- */
    @media screen and (max-width: 1060px) {
    .article-page {
        margin-bottom: 39px;
    }

    .article-page .title-footer {
        margin-bottom: 10px;
    }

    .article-page ul {
        margin: 0 0 36px 0;
    }

    .article-page ul li {
        margin-bottom: 5px;
        font-size: 12px;
    }

    .article-page ul li a {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    }

    /* //article-page - 상세페이지 이전다음글  */
    /* article-related - 상세페이지 관련글 */
    .article-footer {
    display: flex;
    gap: 48px;
    flex-direction: column;
    padding: 48px 0 64px;
        /* border-bottom: 1px solid #15181a; */
    }
    .article-related {
    display: flex;
    gap: 24px;
    flex-direction: column;
    }
    .article-related .list-related {
    display: grid;
    gap: 48px 24px;
    padding: 0;
    overflow-x: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
        grid-template-columns: repeat(2, 1fr);
    }
    .article-related .thumnail {
    display: none;
    }
    .article-related .item-related {
    padding: 12px 0 36px;
    border-bottom: 1px solid;
    border-right: 1px solid;
    }
    .article-related .link-related,
    .article-related .link-related .box_content {
    display: flex;
    gap: 4px;
    flex-direction: column;
    }

    .article-related .link-related strong {
    display: -webkit-box;
    padding: 0 3px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: fit-content;
    font-size: 20px;
    font-weight: 500;
    white-space: normal;
    word-break: keep-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    }
    .article-related .link-related strong::after {
        border-bottom: 10px solid #9bf3ff;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 0;
        transition: .3s ease-in-out;
        content: '';
    }
    .article-related .link-related:hover strong::after {
    width: 100%;
    }

    .article-related .date {
    display: block;
    font-size: 14px;
    color: #999;
    }

    /* ----- media query - mobile ----- */
    @media screen and (max-width: 760px) {
    .article-related {
        margin-bottom: 34px;
    }

    .article-related .title-footer {
        margin-bottom: 11px;
    }

    .article-related .item-related {
        min-width: 145px;
    }

    .article-related .link-related {
        margin: 0 5px;
    }

    .article-related .thumnail {
        margin-bottom: 8px;
    }

    .article-related .link-related strong {
        margin-bottom: 0;
        font-size: 13px;
    }
    }

    .article-related .thumnail {
    padding-top: 60%;
    height: auto;
    }

    /* // article-related */
    /* article-reply - 상세페이지 댓글*/
    .article-reply {
    display: flex;
    display: none;
    flex-direction: column;
    padding-top: 48px;
    border-top: 1px solid ;
    }
    .tt-box-total {
    padding: 0;
    border: 0;
    }
    .tt-box-total .tt_txt_g {
    font-size: 24px;
    }
    .tt-box-total .tt_num_g {
    display: none;
    }
    .article-reply ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .article-reply a {
    text-decoration: none;
    }

    .article-reply .box-total {
    margin: 0 0 3px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;
    font-weight: 500;
    }

    .article-reply .box-total a {
    color: #333;
    }

    .article-reply .box-total span {
    color: #ef402f;
    }

    .article-reply .tt_more_preview_comments_wrap {
    margin-top: -14px;
    margin-bottom: 4px;
    border: 1px solid #e8e8e8;
    width: 100%;
    height: 42px;
    background-color: transparent;
    font-size: 13px;
    font-weight: 400;
    line-height: 39px;
    color: #777;
    }

    /* ----- media query - mobile ----- */
    @media screen and (max-width: 1060px) {
    .article-reply .box-meta strong {
        display: block;
    }

    .article-reply .box-total {
        font-size: 13px;
    }

    .article-reply .tt_more_preview_comments_wrap {
        height: 32px;
        font-size: 12px;
        line-height: 30px;
    }
    }

    /* area-reply - 상세페이지 댓글*/
    .area-reply {
    margin-bottom: 60px;
    }


    .area-reply .item-reply {
    display: flex;
    flex-wrap: wrap;
    padding: 25px 0 24px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    width: 100%;
    }

    .area-reply .thumbnail {
    display: block;
    margin-right: 10px;
    width: 48px;
    height: 48px;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 50px;
    }

    .area-reply .box-content {
    width: calc(100% - 64px);
    }

    .area-reply .box-content .box-meta {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.69;
    }

    .area-reply .box-content .box-meta strong a {
    font-weight: 400;
    color: #333;
    }

    .area-reply .box-content .box-meta .date {
    padding-left: 18px;
    position: relative;
    color: #909090;
    }

    .area-reply .box-content .box-meta .date:before {
    position: absolute;
    top: 9px;
    left: 7px;
    width: 2px;
    height: 2px;
    background: #c5c5c5;
    content: '';
    }

    .area-reply .box-content .box-meta .date a {
    padding-left: 18px;
    position: relative;
    color: #909090;
    }

    .area-reply .box-content .box-meta .date a:before {
    position: absolute;
    top: 10px;
    left: 7px;
    width: 2px;
    height: 2px;
    background: #c5c5c5;
    content: '';
    }

    .area-reply .box-content .text {
    margin: 0 100px 9px 0;
    font-size: 14px;
    line-height: 1.43;
    color: #777;
    word-break: break-all;
    }

    .area-reply .list-reply-comment .box-content .text {}

    .area-reply .box-content .link-comment {
    font-size: 13px;
    line-height: 1.69;
    color: #909090;
    }

    .area-reply .box-content .box-modify {
    position: absolute;
    top: 24px;
    right: -9px;
    font-size: 13px;
    }

    .area-reply .box-content .button-modify {
    padding: 10px 0 10px 10px;
    border: none;
    width: 20px;
    height: 20px;
    background: url(./images/icon-modify.svg) no-repeat;
    background-position: 50% 50%;
    background-size: 14px;
    cursor: pointer;
    }

    .area-reply .box-content .list-modify {
    display: none;
    border: 1px solid #e8e8e8;
    position: absolute;
    top: 6px;
    left: -76px;
    width: 80px;
    }

    .area-reply .box-content .list-modify li {
    border-bottom: 1px solid #e8e8e8;
    }

    .area-reply .box-content .list-modify li:last-child {
    border-bottom: none;
    }

    .area-reply .box-content .list-modify a {
    display: block;
    background-color: #fff;
    line-height: 29px;
    color: #333;
    text-align: center;
    }

    .area-reply .list-reply-comment {
    margin: 30px 0 -30px 0;
    padding: 40px 0 28px 60px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    background-color: #fafafa;
    }

    .area-reply .list-reply-comment .item-reply {
    margin-bottom: 28px;
    padding: 0;
    border-bottom: none;
    }

    .area-reply .list-reply-comment .item-reply:last-child {
    margin-bottom: 0;
    }

    .area-reply .list-reply-comment .box-modify {
    top: -4px;
    right: 15px;
    }

    .area-reply .list-reply-other {
    margin-bottom: 20px;
    }

    /* ----- media query - mobile ----- */
    @media screen and (max-width: 1060px) {
    .area-reply {
        margin-bottom: 30px;
    }

    .area-reply .item-reply {
        padding: 25px 0 19px 0;
    }

    .area-reply .thumbnail {
        margin-right: 10px;
        width: 38px;
        height: 38px;
    }

    .area-reply .box-content {
        margin-top: -3px;
    }

    .area-reply .box-content .box-meta {
        line-height: 1.59;
    }

    .area-reply .box-content .box-meta strong a {
        font-size: 12px;
    }

    .area-reply .box-content .box-meta .date {
        padding-left: 0;
        font-size: 12px;
    }

    .area-reply .box-content .box-meta .date:before {
        background: none;
        ;
    }

    .area-reply .box-content .text {
        margin-bottom: 8px;
        width: 100%;
        font-size: 12px;
    }

    .area-reply .box-content .list-modify {
        background: #fff;
    }

    .area-reply .list-reply-comment {
        margin: 20px -20px -20px -20px;
        padding: 20px 20px 13px 68px;
        width: 100vw;
    }

    .area-reply .list-reply-comment .box-modify {
        right: -9px;
    }

    .area-reply .list-reply-comment .box-meta {
        margin-top: 6px;
    }
    }

    /* // area-reply - 상세페이지 댓글*/
    /* area-write - 상세페이지 댓글 입력 부분*/
    .area-write .box-account {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    }

    .area-write .box-account input {
    padding: 11px 20px 12px 20px;
    border: 1px solid #e8e8e8;
    width: calc(50% - 6px);
    font-size: 13px;
    color: #999;
    }

    .area-write .box-account input:hover {
    border-color: #333;
    }

    .area-write .box-homepage {
    margin-bottom: 12px;
    }

    .area-write .box-homepage input {
    padding: 11px 20px 12px 20px;
    border: 1px solid #e8e8e8;
    width: 100%;
    font-size: 13px;
    color: #999;
    }

    .area-write .box-homepage input:hover {
    border-color: #333;
    }

    .area-write .box-textarea {
    margin-bottom: 14px;
    }

    .area-write .box-textarea textarea {
    padding: 21px 70px 19px 19px;
    border: 1px solid #e8e8e8;
    width: 100%;
    height: 122px;
    font-size: 13px;
    color: #999;
    }

    .area-write .box-textarea textarea:hover {
    border-color: #333;
    }

    .area-write .box-write {
    display: flex;
    justify-content: space-between;
    }

    .area-write .box-write .xe-label {
    display: flex;
    margin-top: 5px;
    position: relative;
    min-width: 20px;
    min-height: 20px;
    text-align: left;
    cursor: pointer;
    }

    .area-write .box-write .xe-label input[type="checkbox"] {
    border: 0;
    overflow: hidden;
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    }

    .area-write .box-write .xe-label>input[type="checkbox"]+.xe-input-helper {
    display: block;
    border: 1px solid #BEBFC5;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 2px;
    }

    .area-write .box-write .xe-label>input[type="checkbox"]:checked+.xe-input-helper:after {
    margin-top: -7px;
    margin-left: -3px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 11px;
    content: "";
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    }

    .area-write .box-write .xe-label>input[type="checkbox"]:checked+.xe-input-helper {
    border-color: transparent;
    background-color: #333;
    }

    .area-write .box-write .xe-label .xe-label-text {
    display: block;
    padding: 3px 0 0 27px;
    font-size: 13px;
    color: #333;
    }

    .area-write .box-write .btn_register {
    border: none;
    width: 68px;
    height: 30px;
    background: #000;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
    }

    .area-write .box-write .btn_register:hover {
    background: #ef402f;
    }

    /* ----- media query - mobile ----- */
    @media screen and (max-width: 1060px) {
    .area-write .box-textarea textarea {
        height: 140px;
        font-size: 12px;
    }
    }

    /* // area-write */
    /* area-protected */
    .area-protected {
    margin: 0 auto;
    max-width: 280px;
    text-align: center;
    }

    .area-protected .text-protected {
    margin: 0 0 21px 0;
    padding-top: 112px;
    background: url(./images/icon-exclamation.svg) no-repeat center top;
    font-size: 18px;
    color: #333;
    }

    .area-protected .text-protected span {
    font-size: 14px;
    line-height: 2;
    color: #777;
    }

    .area-protected input {
    margin-bottom: 10px;
    padding-left: 20px;
    border: 1px solid #e8e8e8;
    width: 100%;
    height: 42px;
    font-size: 13px;
    }

    .area-protected input:hover, .area-protected input:focus {
    border: 1px solid #333;
    }

    .area-protected input.active+button {
    background: #333;
    color: #fff;
    cursor: pointer;

    }

    .area-protected button {
    display: block;
    border: none;
    width: 100%;
    height: 42px;
    background: #ddd;
    font-size: 13px;
    }

    .article-header-noimg {
    background: none !important;
    background-size: 50% 50% !important;
    }

    .article-header-protected {
    background: url(./images/icon-exclamation.svg) no-repeat center !important;
    background-size: 50% 50% !important;
    }

    .title-other {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    }

    .article-view {
    margin-bottom: 12px;
    word-break: break-word;
    }


    .article-view h1 {
    font-size: 32px;
    }

    .article-view h2 {
    font-size: 24px;
    }

    .article-view h3 {
    font-size: 20px;
    }

    .article-view h4 {
    font-size: 18px;
    }

    .article-view blockquote {
    margin: 0;
    padding-left: 19px;
    border-left: 1px solid;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.54);
    }

    .article-view ul,
    .article-view ol {
    margin: 0;
    padding: 0 0 0 19px;
    }

    .article-view ul li {
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.87);
    word-break: break-all;
    }

    .article-view ol {
    margin-bottom: 32px;
    }

    .article-view ol li {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.87);
    word-break: break-all;
    }

    .article-view table {
    border-collapse: collapse;
    }

    .article-view table thead tr {
    background: rgba(0, 0, 0, 0.05);
    font-size: 16px;
    color: #000;
    }

    .article-view table tr th,
    .article-view table tr td {
    padding: 7px;
    }

    .article-view pre {
    padding: 24px;
    border: solid 1px #6ed3d8;
    border: solid 1px #7ed9e5;
    white-space: pre-wrap;
    border-radius: 0;
    }
    #article-view pre code.hljs {
    border: 0;
    font-family: consolas, 'SUITE Variable', 'Pretendard', -apple-system, 'Noto Sans KR', sans-serif;
    font-size: 14px;
    background-color: transparent;
    }
    .article-view .cap1 {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.54);
    }
    .article-view .moreless_fold span,
    .article-view .moreless_top span {
    font-size: 16px;
    line-height: 2.5;
    }

    .article-view .moreless_content {
    padding-top: 40px;
    }

    .article-view .moreless_top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }

    .article-view .moreless_bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    }

    .article-view .moreless_bottom span {
    display: none;
    }

    .article-view .footnote a {
    color: #4167d9 !important;
    text-decoration: none;
    }

    .article-view .footnotes li {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.38);
    }

    .article-view .table-overflow {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    }

    .article-view .table-overflow {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    }

    .article-view img {
    max-width: 100%;
    }

    /* area_view - 유튜브 사이즈 제어 */
    @media screen and (max-width: 743px) {
    .article-view iframe {
        width: 100%;
        height: 56vw;
        -ms-height: 56vmax;
    }
    }

    /* media query - only mobile */
    @media screen and (max-width: 768px) {
    .article-view {
        margin-top: 0px;
    }
    }


    #article-view .container_postbtn {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: auto;
    margin-left: auto;
    padding: 0 !important;
    }
    #article-view .container_postbtn .postbtn_like {
    display: flex;
    }
    #article-view .container_postbtn .postbtn_ccl {
    display: flex;
    padding-top: 0;
    position: initial;
    float: initial !important;
    }
    #article-view .container_postbtn .postbtn_ccl a:hover::after {
    width: 0;
    }
    .article-title-crop,
    .article-title-resize,
    .article-title-poster {
    margin-bottom: 0px;
    border-bottom: none;

    }


    /* 검색 결과 없을때 */
    .box-no-search {
    display: none;
    margin-bottom: 40px;
    font-size: 14px;

    color: rgba(51, 51, 51, 0.5);
    }

    .box-no-search span {
    display: block;
    padding-left: 7px;
    position: relative;
    vertical-align: middle;
    line-height: 2;
    }

    .box-no-search span:before {
    position: absolute;
    top: 15px;
    left: 0;
    width: 2px;
    height: 2px;
    background: rgba(0, 0, 0, 0.2);
    content: '';
    border-radius: 2px;
    }

    #tt-body-search .type-search {
    display: block;
    }

    #tt-body-search .title-search .search {
    display: inline !important;
    }

    #tt-body-category .type-category {
    display: block;
    }

    #tt-body-tag .type-tag {
    display: block;
    }

    #tt-body-tag .title-search .tag {
    display: inline !important;
    }

    #tt-body-archive .type-archive {
    display: block;
    }

    #tt-body-archive .title-search .search {
    display: inline !important;
    }


    /* additional style */
    #tt-body-archive .archives:before {
    content: "'";
    }

    #tt-body-archive .archives:after {
    content: "'에 등록된 글";
    }

    #tt-body-tag .archives:before {
    content: "#";
    }

    #tt-body-search .archives:before {
    content: "'";
    }

    #tt-body-search .archives:after {
    content: "'의 검색결과";
    }


    /* Search box */
    .util {
    position: absolute;
    top: 0;
    right: 0;
    }

    .util .search {
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #fff;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
    box-sizing: border-box;
    }

    .util .search input {
    padding-bottom: 7px;
    border: none;
    border-bottom: 2px solid #333;
    width: 100%;
    background: url(./images/icon-search.svg) no-repeat 98% 0;
    font-size: 14px;
    color: #999;
    }

    .util .search input::placeholder {
    color: #969696;
    }

    .util .search button {
    border: 1px solid #eee;
    outline: none;
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 20;
    width: 30px;
    height: 30px;
    vertical-align: top;
    background: #fff url(./images/ico_package.png) no-repeat -1px -1px;
    text-indent: -999em;
    cursor: pointer;
    border-radius: 50%;
    }



    /**-----------------------------
    *           SearchBox
    *-----------------------------*/

    .util.use-sidebar {
    margin: 0 auto;
    margin: 24px auto;
    position: initial;
    float: none;
    }

    .util.use-sidebar .search {
    float: none;
    }

    .util.use-top {
    margin-top: -6px;
    width: 222px;
    }

    .util.use-top .search {
    width: 100%;
    }

    /* ----- media query - pc ----- */
    @media screen and (min-width: 1061px) {
    .util:not(.use-top) {
        display: none
    }

    .wrap-drawer .util.use-sidebar {
        display: block
    }

    .wrap-drawer .util.use-top {
        display: none
    }

    .article-type-poster:nth-of-type(3n) {
        margin-right: 0;
    }
    }

    /* ----- media query - tablet ----- */
    @media screen and (max-width: 1060px) {
    .util:not(.use-sidebar) {
        display: none
    }

    .wrap-drawer .util.use-sidebar {
        display: block
    }

    .wrap-drawer .util.use-top {
        display: none
    }
    }

    /* ----- media query - mobile ----- */
    @media screen and (max-width: 1060px) {
    .util:not(.use-sidebar) {
        display: none
    }

    .wrap-drawer .util.use-sidebar {
        display: block
    }

    .wrap-drawer .util.use-top {
        display: none
    }

    .util.use-sidebar .searchInput {
        font-size: 11px
    }
    }



    /* ----- 404 페이지 ----- */
    .absent_post {
    display: none;
    }

    .notfoundpage .absent_post {
    display: block;
    }

    .notfoundpage#tt-body-page.notfoundpage .main {
    padding-top: 39px;
    }

    .notfoundpage .absent_post:before {
    display: block;
    margin-bottom: 25px;
    padding-top: 122px;
    height: 90px;
    background: url(./images/icon-no-img.svg) no-repeat center !important;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.285714285714286;
    color: #555;
    white-space: pre;
    content: "혹시 다른 글이지 않을까요?";
    }

    .notfoundpage .absent_post {
    padding: 0px 0px 98px 0 !important;
    background: none !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.75;
    color: #999 !important;
    }



    /* -- 슬로건 섹션, 메뉴, 배너 노출 위치 -- */
    /* 공통 */
    #tt-body-category.headerslogundisplayon .area-slogun,
    #tt-body-search.headerslogundisplayon .area-slogun,
    #tt-body-archive.headerslogundisplayon .area-slogun,
    #tt-body-tag.headerslogundisplayon .area-slogun,
    #tt-body-media.headerslogundisplayon .area-slogun,
    #tt-body-location.headerslogundisplayon .area-slogun,
    #tt-body-guestbook.headerslogundisplayon .area-slogun,
    #tt-body-page.headerslogundisplayon .area-slogun {
    display: none;
    }

    #tt-body-category.headerbannerdisplayon .area-promotion,
    #tt-body-search.headerbannerdisplayon .area-promotion,
    #tt-body-archive.headerbannerdisplayon .area-promotion,
    #tt-body-tag.headerbannerdisplayon .area-promotion,
    #tt-body-media.headerbannerdisplayon .area-promotion,
    #tt-body-location.headerbannerdisplayon .area-promotion,
    #tt-body-guestbook.headerbannerdisplayon .area-promotion,
    #tt-body-page.headerbannerdisplayon .area-promotion {
    display: none;
    }





    /* -- spinner -- */
    .area-paging-more {
    position: relative;
    }

    @keyframes spinner {
    to {
        transform: rotate(360deg);
    }
    }

    .paging-more-loading {
    color: #fff;
    pointer-events: none;
    }

    .paging-more-loading:before {
    margin-top: -10px;
    margin-left: -15px;
    border: 1px solid #ccc;
    border-top-color: #07d;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    animation: spinner .6s linear infinite;
    content: '';
    box-sizing: border-box;
    border-radius: 50%;
    }


    /* -- init display none */
    .display-none {
    display: none;
    }

    /* -- category style -- */
    .use-category-banner .category-banner-wrp {
    display: block;
    }

    .use-category-banner .category-banner:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(58, 58, 58, 0.3);
    content: '';
    }


    #tt-body-category.use-category-banner #container {
    margin-top: 400px;
    }

    .use-category-banner .category-banner-wrp {
    display: block;
    position: absolute;
    top: -400px;
    left: 0px;
    width: 100%;
    height: 400px;
    }

    .use-category-banner .category-banner {
    position: relative;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    }

    .use-category-banner .category-banner .category-banner-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    max-width: 1020px;
    height: 100%;
    }

    .use-category-banner .category-banner .category-description-box {
    margin-top: -4px;
    }

    .use-category-banner .category-banner .category-description-box strong {
    display: -webkit-box;
    overflow: hidden;
    width: 760px;
    font-family: Arial;
    font-size: 48px;
    font-weight: bolder;
    line-height: 1.10;
    color: #fff;
    white-space: normal;
    word-break: keep-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }


    /* 1단형 카테고리*/
    .use-category-banner .wrap-drawer .category-banner .category-banner-inner {
    max-width: 780px;
    }



    /* ----- media query - pc ----- */
    @media screen and (min-width: 1061px) {
    .use-category-banner .wrap-drawer .category-banner-wrp {
        top: -456px;
    }

    #tt-body-category.use-category-banner .wrap-drawer #container {
        margin-top: 456px;
    }

    #tt-body-category.use-slogan-wrp.headerslogundisplayoff.use-category-banner .wrap-drawer #container {
        margin-top: 512px;
    }
    }


    /* ----- media query - mobile ----- */
    @media screen and (max-width: 1061px) {
    #tt-body-category.use-category-banner #container {
        margin-top: 386px;
    }

    .use-category-banner .category-banner-wrp {
        top: -386px;
        height: 350px;
    }

    .use-category-banner .category-banner .category-description-box {
        position: absolute;
        bottom: 40px;
    }

    .use-category-banner .category-banner .category-banner-inner {
        padding: 0 20px;
        position: relative;
    }

    .use-category-banner .category-banner .category-description-box strong {
        margin-bottom: 22px;
        width: 270px;
        font-size: 30px;
        line-height: 30px;
        -webkit-line-clamp: 3;
    }

    .border-none {
        border: none;
    }
    }

    /* --- 공지 --- */
    #tt-body-index.notice-index .area-view .notice-title:first-child {
    display: block;
    }


    /* --- no-image --- */
    .article-type-common.article-type- .thumbnail:not([has-thumbnail]),
    .article-type-common.article-type-thumbnail .thumbnail:not([has-thumbnail]) {
    display: none;
    }


    /* --- 방명록 Header --- */
    #tt-body-guestbook .title-search {
    border-bottom: 1px solid #e8e8e8;
    }

    /* --- Cover Title --- */
    .area-cover .title-cover {
    min-height: 32px;
    }

    .area-cover .title-cover:empty {
    padding-bottom: 0px;
    min-height: auto;
    }


    @media screen and (min-width: 1061px) {
    .wrap-right .area-cover:first-child .title-cover:empty {
        min-height: 32px;
    }
    }


    @media screen and (max-width: 760px) {
    .area-cover .box-cover-poster {
        margin-bottom: 0px;
    }

    .area-cover .article-type-poster {
        margin-bottom: 0px;

    }
    }


    #tt-body-guestbook .area-reply form {
    padding-top: 20px;
    }


    #tt-body-guestbook .area-reply .list-reply+form {
    padding-top: 0;
    }

    .revenue_unit_wrap.position_list {
    margin: 30px auto;
    max-width: 1020px
    }

    .my_edit .ico_more {
    fill: #fff !important;
    }

    /* 전체 공통 */
    #article-view {
    display: flex;
    gap: 48px;
    flex-direction: column;
    margin: 0;
    padding-bottom: 48px;
    border-bottom: 1px solid #15181a;
    min-height: fit-content;
    letter-spacing: 0;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    #article-view:has(h1, h2, h3, h4, h5, h6, p, b, span, i, img, blockquote),
    #article-view:has(h1, h2, h3, h4, h5, h6, p, b, span, i, img, blockquote) * {
    background-color: transparent !important;
    }
    #article-view > div {
    padding: 48px 0 64px;
    }
    .contents_style {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-direction: column;
    }

    /* 텍스트 관련 */
    #article-view h2[data-ke-size] {
    font-size: 24px;
    }

    #article-view h3[data-ke-size] {
    font-size: 1.44em;
    }

    #article-view h4[data-ke-size] {
    font-size: 1.25em;
    }

    #article-view h2,
    #article-view h3,
    #article-view h4 {
    font-weight: 700 !important; 
    }

    #article-view div[data-ke-type='moreLess'] {
    margin: 20px 0;
    padding: 20px 20px 22px;
    border: 1px dashed #dddddd;
    background-color: #fafafa;
    color: #333333;
    caret-color: auto;
    }

    #article-view a {
    display: inline-flex;
    position: relative;
    z-index: 1;
    color: #3e5a5c;
    transition: .3s ease-in-out;
    }
    #article-view a::after {
    border-bottom: 8px solid #6ed3d8;
    position: absolute; bottom: 5px;
    left: 0;
    z-index: -1;
    width: 0;
    transition: .3s ease-in-out;
    content: '';
    }
    #article-view a:hover::after {
    width: 100%;
    }

    #article-view figure[data-ke-type='contentSearch'] a {
    text-decoration: none;
    }

    /* 인용문 */
    #article-view blockquote[data-ke-style='style1'] {
    padding: 34px 0 0 0;
    border: 0 none;
    background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;
    font-family: "Noto Serif KR";
    font-size: 1.12em;
    line-height: 1.67;
    text-align: center;
    margin: 0;
    }

    #article-view blockquote[data-ke-style='style2'] {
    padding: 1px 0 0 12px;
    border-style: solid;
    border-color: #7ed9e5;
    font-size: 1em;
    line-height: 1.75;
    text-align: left;
    border-width: 0 0 0 4px;
    margin: 0;
    }

    #article-view blockquote[data-ke-style='style3'] {
    padding: 24px;
    border: 1px solid #7ed9e5;
    background-color: #fcfcfc;
    font-size: 1em;
    line-height: 1.75;
    text-align: left;
    margin: 0;
    }

    #article-view blockquote {
    display: block;
    letter-spacing: 0px;
    margin: 0;
    }

    /* 첨부: 공통 */

    /* 이미지 클릭 관련 - lightbox */
    #article-view span[data-lightbox] {
    cursor: pointer;
    }

    /* 첨부: 파일 */
    #article-view figure.fileblock {
    margin-top: 20px;
    margin-bottom: 0px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 7%);
    position: relative;
    width: 470px;
    height: 73px;
    box-sizing: border-box;
    border-radius: 1px;
    }

    #article-view figure.fileblock a {
    display: block;
    }

    #article-view figure.fileblock .image {
    margin: 22px 17px 21px 22px;
    width: 30px;
    height: 30px;
    float: left;
    background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
    background-position: 0 0;
    }

    #article-view figure.fileblock .desc {
    position: absolute;
    top: 4px;
    right: 60px;
    bottom: 0;
    left: 70px;
    }

    #article-view figure.fileblock .filename {
    margin: 16px 0 0;
    width: 100%;
    height: 20px;
    font-size: 14px;
    text-overflow: ellipsis;
    }

    #article-view figure.fileblock .size {
    height: 16px;
    font-size: 12px;
    }

    #article-view figure[data-ke-align=alignCenter].fileblock {
    margin-right: auto;
    margin-left: auto;
    }

    #article-view figure[data-ke-align=alignRight].fileblock {
    margin-left: auto;
    }

    #article-view figure.fileblock .name {
    display: block;
    overflow: hidden;
    max-width: 272px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    #article-view figure.fileblock a::after {
    position: absolute;
    top: 19px;
    right: 24px;
    width: 30px;
    height: 30px;
    background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
    background-position: -40px 0;
    content: '';
    }

    /* 첨부: 이미지 */
    #article-view figure.imageblock {
    display: table;
    position: relative;
    }

    #article-view figure.imageblock.alignLeft {
    text-align: left;
    }

    #article-view figure.imageblock.alignCenter {
    margin: 20px auto 0;
    text-align: center;
    }

    #article-view figure.imageblock.alignRight {
    margin-left: auto;
    text-align: right;
    }

    #article-view figure.imageblock.floatLeft {
    margin-right: 20px;
    float: left;
    }

    #article-view figure.imageblock.floatRight {
    margin-left: 20px;
    float: right;
    }

    #article-view figure.imageblock.widthContent {
    display: block;
    }

    #article-view figure.imageblock.widthContent img {
    width: 100%;
    }

    #article-view figure.imageblock.floatLeft figcaption,
    #article-view figure.imageblock.floatRight figcaption {
    text-align: left;
    }

    #article-view figure.imageblock img {
        display: inline-block;
        margin: 0;
        padding: 4px;
        border: solid 1px #7ed9e5;
        /* width: 100%; */
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        box-shadow: 0 0 7px 0 #7ed9e5;
    }

    #article-view iframe,
    #article-view figure img,
    #article-view figure iframe {
    max-width: 100%;
    }

    #article-view figure img:not([width]),
    #article-view figure iframe:not([width]) {
    width: 100%;
    }

    #article-view figure {
    max-width: 100%;
    clear: both;
    }

    #article-view figure img {
    display: inline-block;
    }

    #article-view figure.imagegridblock+figure.imagegridblock,
    #article-view figure.imagegridblock+figure.imageblock,
    #article-view figure.imageblock+figure.imagegridblock {
    margin-top: 10px;
    }

    /* 캡션 텍스트 */
    #article-view figure figcaption {
    padding-top: 10px;
    width: 100%;
    min-height: 20px;
    font-size: 15px;
    color: #777;
    text-align: center;
    word-break: break-word;
    caption-side: bottom;
    caret-color: auto;
    box-sizing: content-box;
    }

    /* 첨부: 이미지 그리드 */
    #article-view figure.imagegridblock {
    margin: 20px 0 0 0;
    position: relative;
    width: 100%;
    height: auto;
    background-color: transparent;
    caret-color: transparent;
    }

    #article-view figure.imagegridblock .image-container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    #article-view figure.imagegridblock .image-container>span {
    margin-top: 2px;
    margin-right: 0;
    }

    #article-view figure.imagegridblock img {
    margin: 0;
    height: inherit;
    }

    #article-view figure.imagegridblock span img {
    width: 100%;
    }

    hr[data-ke-style],
    #article-view hr[data-ke-style] {
    margin: 20px auto;
    border: none;
    background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/divider-line.svg);
    background-size: 200px 420px;
    font-size: 0;
    line-height: 0;
    cursor: default !important;
    }

    hr[data-ke-style='style1'],
    #article-view hr[data-ke-style='style1'] {
    padding: 20px;
    width: 64px;
    height: 4px;
    background-position: center 0;
    }

    hr[data-ke-style='style2'],
    #article-view hr[data-ke-style='style2'] {
    padding: 20px;
    width: 64px;
    height: 3px;
    background-position: center -48px;
    }

    hr[data-ke-style='style3'],
    #article-view hr[data-ke-style='style3'] {
    padding: 18px 20px;
    width: 64px;
    height: 8px;
    background-position: center -96px;
    }

    hr[data-ke-style='style4'],
    #article-view hr[data-ke-style='style4'] {
    padding: 0 51px;
    width: 2px;
    height: 60px;
    background-position: center -144px;

    }

    hr[data-ke-style='style4']+hr[data-ke-style='style4'],
    #article-view hr[data-ke-style='style4']+hr[data-ke-style='style4'] {
    margin-top: 0;
    }

    hr[data-ke-style='style5'],
    #article-view hr[data-ke-style='style5'] {
    padding: 21px 0;
    height: 2px;
    background-repeat: repeat-x;
    background-position: center -208px;
    }

    hr[data-ke-style='style6'],
    #article-view hr[data-ke-style='style6'] {
        width: 100%;
    padding: 21px 0;
    height: 2px;
    background-repeat: repeat-x;
    background-position: center -256px;
    }

    hr[data-ke-style='style7'],
    #article-view hr[data-ke-style='style7'] {
    padding: 18px 20px 17px 20px;
    width: 200px;
    height: 19px;
    background-position: center -304px;
    }

    hr[data-ke-style='style8'],
    #article-view hr[data-ke-style='style8'] {
    padding: 18px 20px 17px 20px;
    width: 200px;
    height: 19px;
    background-position: center -362px;
    }

    /* 테이블 */
    #article-view table[data-ke-style] {
    margin-bottom: 0px;
    }

    #article-view table {
    margin-bottom: 0px;
    }

    #article-view table tbody tr {
    box-sizing: content-box;
    border-bottom: 1px solid #cacaca;
    }
    #article-view table tbody tr:last-child {
        border-bottom: 0;
    }

    #article-view table td {
    padding: 8px 12px;
    word-break: break-word;
    border-right: 1px solid #cacaca;
    }
    #article-view table td:last-child {
        border-right: 0;
    }

    #article-view table[data-ke-style='style1'] tr:first-child td {
    border-bottom: 1px solid #7ed9e5;
    }

    #article-view table[data-ke-style='style2'] tr:first-child td {
    border-bottom: 1px solid #008300;
    }

    #article-view table[data-ke-style='style3'] tr:first-child td {
    border-bottom: 1px solid #006dbe;
    }

    #article-view table[data-ke-style='style4'] tr:nth-child(2n) td {
    background-color: #f9f9f9;
    }

    #article-view table[data-ke-style='style5'] tr:nth-child(2n) td {
    background-color: #f8fbfb;
    }

    #article-view table[data-ke-style='style6'] tr:nth-child(2n) td {
    background-color: #f5f7f5;
    }

    #article-view table[data-ke-style='style7'] tr:nth-child(2n) td {
    background-color: #f6f8fb;
    }

    #article-view table[data-ke-style='style8'] tr:first-child td {
    border-bottom: 2px solid #797979;
    }

    #article-view table[data-ke-style='style8'] {
    border-right: 0 none;
    border-left: 0 none;
    }

    #article-view table[data-ke-style='style8'] td {
    border-right-color: transparent;
    border-left-color: transparent;
    }

    #article-view table[data-ke-style='style9'] tr:first-child td {
    border-bottom: 2px solid #7ed9e5;
    }

    #article-view table[data-ke-style='style9'] {
    border-right: 0 none;
    border-left: 0 none;
    }

    #article-view table[data-ke-style='style9'] td {
    border-right-color: transparent;
    border-left-color: transparent;
    }

    #article-view table[data-ke-style='style10'] tr:first-child td {
    border-bottom: 2px solid #008300;
    }

    #article-view table[data-ke-style='style10'] {
    border-right: 0 none;
    border-left: 0 none;
    }

    #article-view table[data-ke-style='style10'] td {
    border-right-color: transparent;
    border-left-color: transparent;
    }

    #article-view table[data-ke-style='style11'] tr:first-child td {
    border-bottom: 2px solid #2780d4;
    }

    #article-view table[data-ke-style='style11'] {
    border-right: 0 none;
    border-left: 0 none;
    }

    #article-view table[data-ke-style='style11'] td {
    border-right-color: transparent;
    border-left-color: transparent;
    }

    #article-view table[data-ke-style='style12'] tr:nth-child(odd) td {
    background-color: #f9f9f9;
    }

    #article-view table[data-ke-style='style12'] tr td:first-child {
    background-color: #efefef;
    }

    #article-view table[data-ke-style='style12'] tr:first-child td {
    border: 1px solid #888;
    background-color: #9b9b9b;
    color: #fff;
    }

    #article-view table[data-ke-style='style13'] tr:nth-child(odd) td {
    background-color: #f9f9f9;
    }

    #article-view table[data-ke-style='style13'] tr td:first-child {
    background-color: #efefef;
    }

    #article-view table[data-ke-style='style13'] tr:first-child td {
    border: 1px solid #7ed9e5;
    background-color: #7ed9e5;
    color: #fff;
    }

    #article-view table[data-ke-style='style14'] tr:nth-child(odd) td {
    background-color: #f9f9f9;
    }

    #article-view table[data-ke-style='style14'] tr td:first-child {
    background-color: #efefef;
    }

    #article-view table[data-ke-style='style14'] tr:first-child td {
    border: 1px solid #006d00;
    background-color: #008300;
    color: #fff;
    }

    #article-view table[data-ke-style='style15'] tr:nth-child(odd) td {
    background-color: #f9f9f9;
    }

    #article-view table[data-ke-style='style15'] tr td:first-child {
    background-color: #efefef;
    }

    #article-view table[data-ke-style='style15'] tr:first-child td {
    border: 1px solid #1568b7;
    background-color: #2780d4;
    color: #fff;
    }

    #article-view table[data-ke-style='style16'],
    #article-view table[data-ke-style='style16'] tr,
    #article-view table[data-ke-style='style16'] tr td {
    border-color: transparent;
    }

    /* 오픈 그래프 */
    #article-view figure[data-ke-type='opengraph'] {
    margin: 10px 0;
    }

    #article-view figure[data-ke-type='opengraph'] a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
    width: 100%;
    color: #000;
    text-decoration: none;
    box-sizing: initial;
    }

    #article-view figure[data-ke-type='opengraph'] a:hover {
    opacity: 1;
    }

    #article-view figure[data-ke-type='opengraph'] div.og-image {
    border-right: solid 1px rgba(0, 0, 0, 0.06);
    width: 200px;
    height: 200px;
    background-position: center;
    background-size: cover;
    }

    #article-view figure[data-ke-type='opengraph'] div.og-image button {
    display: none;
    }

    #article-view figure[data-ke-type='opengraph']:hover div.og-image button {
    display: block;
    border: none;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 15px;
    height: 15px;
    background-color: #000;
    cursor: pointer;
    }

    #article-view figure[data-ke-type='opengraph'] p.og-title {
    margin: 0px;
    padding-bottom: 10px;
    overflow: hidden;
    max-width: 467px;
    font-family: Pretendard-Regular;
    font-size: 22px;
    color: #000000;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    #article-view figure[data-ke-type='opengraph'] .og-desc {
    display: -webkit-box;
    margin: 0px;
    overflow: hidden;
    max-width: 467px;
    max-height: 42px;
    font-family: Pretendard-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    color: #909090;
    letter-spacing: normal;
    text-overflow: ellipsis;
    font-stretch: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }

    @media (max-width: 600px) {
    #article-view figure[data-ke-type='opengraph'] a {
        height: 90px;
    }

    #article-view figure[data-ke-type='opengraph'] a::before {
        left: 44px;
    }

    #article-view figure[data-ke-type='opengraph'] div.og-image {
        width: 90px;
        height: 90px;
    }

    #article-view figure[data-ke-type='opengraph'] div.og-text {
        padding: 13px 12px 0 20px;
        height: 90px;
    }

    #article-view figure[data-ke-type='opengraph'] div.og-text p.og-title {
        font-size: 16px;
        -webkit-line-clamp: 1;
    }

    #article-view figure[data-ke-type='opengraph'] div.og-text p.og-desc {
        display: none;
    }

    #article-view figure[data-ke-type='opengraph'] div.og-text p.og-host {
        bottom: 10px;
    }
    }

    /* 비디오 첨부 */
    #article-view figure[data-ke-type='video'] {
    display: block;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 16px;
    line-height: 30px;
    color: #bdbdbd;
    text-align: center;
    table-layout: fixed;
    }

    #article-view figure[data-ke-type='video'][data-ke-style='alignLeft'] {
    text-align: left;
    }

    #article-view figure[data-ke-type='video'][data-ke-style='alignCenter'] {
    margin: 20px auto 0;
    text-align: center;
    }

    #article-view figure[data-ke-type='video'][data-ke-style='alignRight'] {
    margin-left: auto;
    text-align: right;
    }

    #article-view figure[data-ke-type='video'] img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    }

    #article-view figure[data-ke-type='video'][data-video-host] iframe {
    display: block;
    margin: 0px;
    }

    #article-view figure[data-ke-type='video']>iframe[width='0'][height='0'] {
    width: 860px;
    max-width: 100%;
    height: 484px;
    }

    /* 접은 글 */
    #article-view .moreless-content :first-child {
    margin-top: 0;
    margin-bottom: 0;
    }

    #article-view div[data-ke-type='moreLess'] .moreless-content {
    display: none;
    }

    #article-view div[data-ke-type='moreLess'].open .moreless-content {
    display: block;
    }

    #article-view div[data-ke-type='moreLess'] .btn-toggle-moreless {
    font-family: Pretendard-Regular, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #909090;
    text-decoration: none;
    cursor: pointer;
    }

    /* 리스트 */
    #article-view ul li,
    #article-view ol li {
    margin: 0 0 0 22px;
    line-height: 1.7;
    }

    #article-view ul,
    #article-view ol {
    }

    /* 이모티콘 */
    #article-view figure[data-ke-type=emoticon][data-ke-align=alignCenter] {
    text-align: center;
    }

    #article-view figure[data-ke-type=emoticon][data-ke-align=alignLeft] {
    text-align: left;
    }

    #article-view figure[data-ke-type=emoticon][data-ke-align=alignRight] {
    text-align: right;
    }

    /* 지도 */
    #article-view figure[data-ke-type='map'],
    #article-view iframe[data-ke-type='map'] {
    display: block;
    margin: 0 auto;
    }

    /* 첨부: 이미지 슬라이드 */
    #article-view figure.imageslideblock {
    outline: 0 none;
    position: relative;
    clear: both;
    font-size: 0;
    }

    #article-view figure.imageslideblock .btn {
    display: none;
    outline: none;
    }

    #article-view figure.imageslideblock.ready .btn {
    display: inline-block;
    }

    #article-view figure.imageslideblock.ready .mark {
    opacity: 1;
    }

    #article-view figure.imageslideblock div.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    min-width: 480px;
    max-width: 100%;
    min-height: 300px;
    max-height: 860px;
    background-color: #000;
    }

    #article-view figure.imageslideblock div.image-container span.image-wrap {
    display: none;
    }

    #article-view figure.imageslideblock div.image-container span.image-wrap.selected {
    display: inline;
    }

    #article-view figure.imageslideblock div.image-container img {
    max-width: 100%;
    max-height: 100%;
    }

    #article-view figure.imageslideblock div.image-container .btn {
    margin-top: -20px;
    border: 0;
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    background: transparent;
    }

    #article-view figure.imageslideblock div.image-container .btn-prev {
    left: 0;
    }

    #article-view figure.imageslideblock div.image-container .btn-next {
    right: 0;
    }

    #article-view figure.imageslideblock div.image-container:hover .btn span {
    opacity: 0.3;
    }

    #article-view figure.imageslideblock div.image-container .btn span {
    display: inline-block;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
    text-indent: -10000px;
    transition: opacity ease-in-out 0.2s;
    opacity: 0;
    }

    #article-view figure.imageslideblock div.image-container .btn:hover span {
    opacity: 1;
    }

    #article-view figure.imageslideblock div.image-container .btn .ico-prev {
    background-position: -220px 0;
    }

    #article-view figure.imageslideblock div.image-container .btn .ico-next {
    background-position: -260px 0;
    }

    #article-view figure.imageslideblock div.mark {
    display: block;
    height: 44px;
    text-align: center;
    transition: opacity ease-in-out 0.2s;
    opacity: 0;
    }

    #article-view figure.imageslideblock div.mark span {
    display: inline-block;
    margin: 20px 1px;
    overflow: hidden;
    width: 30px;
    height: 4px;
    background-color: #d6d6d6;
    text-indent: -10000px;
    cursor: pointer;
    }

    #article-view figure.imageslideblock div.mark span:first-child {
    margin-left: 0;
    background-color: #000;
    }

    #article-view figure.imageslideblock div.mark span:last-child {
    margin-right: 0;
    }

    #article-view figure.imageslideblock figcaption {
    font-size: 14px;
    color: #666;
    text-align: center;
    }

    #article-view figure.imageslideblock.alignLeft {
    text-align: left;
    }

    #article-view figure.imageslideblock.alignCenter {
    margin: 0 auto 20px;
    text-align: center;
    }

    #article-view figure.imageslideblock.alignRight {
    margin-left: auto;
    text-align: right;
    }

    @media (max-width: 600px) {
    #article-view figure.imageslideblock div.image-container {
        width: 100%;
        min-width: 100%;
        max-height: 100%;
    }

    #article-view figure.imageslideblock div.image-container .btn span {
        opacity: 0.3;
    }
    }

    /* 구 에디터 속성 */
    .btn_more, .btn_less {
    display: block;
    margin: 20px 0;
    border: 0;
    position: relative;
    width: 100%;
    height: 21px;
    background: transparent;
    font-size: 14px;
    line-height: 14px;
    color: #888;
    text-align: left;
    }

    .btn_less::before,
    .btn_more::before {
    display: inline-block;
    padding-right: 5px;
    vertical-align: top;
    font-size: 14px;
    line-height: 6px;
    content: "...";
    }

    .box-timeline-content {
    word-break: break-all;
    }

    .area-aside .box-profile .btn_subscription,
    .btn-g {
    display: inline-block;
    padding: 0 23px;
    border: 1px solid #D0D0D0;
    outline: none;
    min-width: 120px;
    height: 40px;
    vertical-align: middle;
    background-color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 38px;
    color: #222;
    text-align: center;
    -webkit-transition: background-color .1s linear,border-color .1s linear;
    -moz-transition: background-color .1s linear,border-color .1s linear;
    transition: background-color .1s linear,border-color .1s linear;
    cursor: pointer;
    border-radius: 20px;
    box-sizing: border-box;
    }

    .area-aside .box-profile .btn_subscription:hover,
    .btn-g:hover {
    border: 1px solid #f54;
    background-color: #f54;
    color: #fff;
    text-decoration: none;
    }

    .area-aside .box-profile .btn_subscription:active,
    .btn-g:active {
    border: 1px solid #cc4436;
    background-color: #cc4436;
    color: #fff;
    text-decoration: none;
    }

    .area-aside .box-profile .btn_subscription:not(.following),
    .btn-primary {
    border-color: #000;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    }

    .group-btn {
    font-size: 0;
    line-height: 0;
    text-align: center;
    }

    .btn_subscription strong {
    display: none;
    }

    .btn_subscription em {
    font-style: normal;
    font-weight: normal;
    }

    .area-aside .box-profile {
    border-bottom: 1px solid #e8e8e8;
    }

    .area-aside .box-profile .img-profile {
    margin: 40px 0 16px;
    }

    .area-aside .box-profile .tit-g {
    display: block;
    margin: 0 0 10px 0;
    padding: 0 40px;
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
    }

    .area-aside .box-profile .btn_tool + .profile-btn-group.member {
    margin-top: 33px;
    }

    .area-aside .box-profile .profile-btn-group:not(.member) {
    display: none;
    }

    .area-aside .box-profile .btn-g {
    min-width: 125px;
    }

    .area-aside .box-profile .btn_subscription:only-of-type {
    width: calc(100% - 40px);
    }

    .area-aside .box-profile .btn-g + .btn-g {
    margin-left: 10px;
    }

    .area-aside .box-profile .group-btn {
    padding: 33px 0 40px;
    }

    .cont-empty {
    text-align: center;
    }

    .cont-empty .tit-g {
    display: block;
    margin-top: 78px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -1.2px;
    }

    .cont-empty .desc-g {
    margin: 9px 0 0 0;
    font-size: 13px;
    line-height: 1.15;
    color: #777;
    }

    .cont-empty .group-btn {
    margin-top: 30px;
    }
    .area-paging-more,
    .tt_box_namecard,
    .menu_toolbar .btn_tool {
    display: none !important;
    }

    @media screen and (max-width: 768px) {
    .header .inner-header {
        padding: 12px
    }
    .header .logo-wrap p {
        display: none;
    }

    .header .inner-header .box-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    }

    .header .logo-wrap .link_logo {
    font-size: 24px;
    }
    .header nav,
    .header .tt_category {
           width: 100vw;
        overflow-x: scroll;
    }
    .btn_tool {
        margin-right: 24px;
    }
    #container {
        margin-top: calc(48px + 80px);
    }

    .article-type-common {
    padding-bottom: 24px;
    gap: 24px;
    }
    .article-content .link-article .title {
    font-size: 24px;
    }


    .article-related .list-related {
        display: grid;
        gap: 24px;
        padding: 0;
        overflow-x: auto;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: repeat(1, 1fr);
    }
    #footer {
        margin-top: 48px;
    }
    .article-footer {
    padding: 24px 0 48px;
    }
    .article-content .box-meta > a {
    font-size: 12px;
    }



















    }

























.area-paging,
.paging_num {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
}
.paging_num a {
    display: block;
}
.paging_num a span {
    padding: 6px 12px;
}
.paging_num a .selected {
    background-color: #9bf3ff;
    border-radius: 24px;
}