/************************************************
Text
*************************************************/
/* Text Background */
.bg-white{background:#fff}
.bg-main{background:var(--color-main)}
.bg-red{background:var(--color-red)}
.bg-orange{background:var(--color-orange)}
.bg-green{background:var(--color-green)}
.bg-blue{background:var(--color-blue)}
.bg-brown{background:var(--color-brown)}
.bg-grey{background:var(--color-grey)}
.bg-light-grey{background:var(--color-light-grey)}
.bg-black{background:var(--color-black)}

/* Text Color */
.tx-white{color:#fff}
.tx-main{color:var(--color-main)}
.tx-red{color:var(--color-red)}
.tx-orange{color:var(--color-orange)}
.tx-green{color:var(--color-green)}
.tx-blue{color:var(--color-blue)}
.tx-brown{color:var(--color-brown)}
.tx-grey{color:var(--color-grey)}
.tx-light-grey{color:var(--color-light-grey)}
.tx-black{color:var(--color-black)}

/* Text Style */
.tx-left{text-align:left}
.tx-center{text-align:center}
.tx-right{text-align:right}
.tx-underline{text-decoration:underline}
.fw400{font-weight:400}
.fw500{font-weight:500}
.fw600{font-weight:600}

/* Text size */
.tx70{font-size:70px; line-height:1.5; letter-spacing:-0.5px}
.tx60{font-size:46px; line-height:1.5; letter-spacing:-0.5px}
.tx50{font-size:36px; line-height:1.5; letter-spacing:-0.5px}
.tx45{font-size:33px; line-height:1.5; letter-spacing:-0.4px}
.tx40{font-size:30px; line-height:1.5; letter-spacing:-0.4px}
.tx35{font-size:27px; line-height:1.5; letter-spacing:-0.3px}
.tx30{font-size:24px; line-height:1.5; letter-spacing:-0.3px}
.tx25{font-size:21px; line-height:1.5; letter-spacing:-0.2px}
.tx20{font-size:18px; line-height:1.5; letter-spacing:-0.2px}
.tx18{font-size:16px; line-height:1.5; letter-spacing:-0.1px}
.tx15{font-size:15px; line-height:1.5; letter-spacing:-0.1px}

@media (min-width:768px) {
    .tx50{font-size:50px}
    .tx45{font-size:45px}
    .tx40{font-size:40px}
    .tx35{font-size:35px}
    .tx30{font-size:30px}
    .tx25{font-size:25px}
    .tx20{font-size:20px}
    .tx18{font-size:17px}
    .tx15{font-size:15px}
}

/************************************************
Padding
*************************************************/
.part-t-05{padding-top:20px !important}
.part-t{padding-top:30px !important}
.part-t-2x{padding-top:40px !important}
.part-t-3x{padding-top:50px !important}
.part-t-4x{padding-top:60px !important}
.part-t-5x{padding-top:80px !important;}

.part-b-05{padding-bottom:20px !important}
.part-b{padding-bottom:30px !important}
.part-b-2x{padding-bottom:40px !important}
.part-b-3x{padding-bottom:50px !important}
.part-b-4x{padding-bottom:60px !important}
.part-b-5x{padding-bottom:80px !important;}

.part-tb-05{padding-top:20px !important; padding-bottom:20px !important}
.part-tb{padding-top:30px !important; padding-bottom:30px !important}
.part-tb-2x{padding-top:40px !important; padding-bottom:40px !important}
.part-tb-3x{padding-top:50px !important; padding-bottom:50px !important}
.part-tb-4x{padding-top:60px !important; padding-bottom:60px !important}
.part-tb-5x{padding-top:80px !important; padding-bottom:80px !important}

.part-l-05{padding-left:20px !important}
.part-l{padding-left:30px !important}
.part-l-2x{padding-left:40px !important}
.part-l-3x{padding-left:50px !important}
.part-l-4x{padding-left:60px !important}
.part-l-5x{padding-left:80px !important}

.part-r-05{padding-right:20px !important}
.part-r{padding-right:30px !important}
.part-r-2x{padding-right:40px !important}
.part-r-3x{padding-right:50px !important}
.part-r-4x{padding-right:60px !important}
.part-r-5x{padding-right:80px !important}

.part-lr-05{padding-left:20px !important; padding-right:20px !important}
.part-lr{padding-left:30px !important; padding-right:30px !important}
.part-lr-2x{padding-left:40px !important; padding-right:40px !important}
.part-lr-3x{padding-left:50px !important; padding-right:50px !important}
.part-lr-4x{padding-left:60px !important; padding-right:60px !important}
.part-lr-5x{padding-left:80px !important; padding-right:80px !important}

@media (min-width:768px) {
    .part-t-05{padding-top:30px !important}
    .part-t{padding-top:40px !important}
    .part-t-2x{padding-top:50px !important}
    .part-t-3x{padding-top:60px !important}
    .part-t-4x{padding-top:70px !important}
    .part-t-5x{padding-top:100px !important}

    .part-b-05{padding-bottom:30px !important}
    .part-b{padding-bottom:40px !important}
    .part-b-2x{padding-bottom:50px !important}
    .part-b-3x{padding-bottom:60px !important}
    .part-b-4x{padding-bottom:70px !important}
    .part-b-5x{padding-bottom:100px !important}

    .part-tb-05{padding-top:30px !important; padding-bottom:30px !important}
    .part-tb{padding-top:40px !important; padding-bottom:40px !important}
    .part-tb-2x{padding-top:50px !important; padding-bottom:50px !important}
    .part-tb-3x{padding-top:60px !important; padding-bottom:60px !important}
    .part-tb-4x{padding-top:70px !important; padding-bottom:70px !important}
    .part-tb-5x{padding-top:100px !important; padding-bottom:100px !important}

    .part-l-05{padding-left:30px !important}
    .part-l{padding-left:40px !important}
    .part-l-2x{padding-left:50px !important}
    .part-l-3x{padding-left:60px !important}
    .part-l-4x{padding-left:70px !important}
    .part-l-5x{padding-left:100px !important}

    .part-r-05{padding-right:30px !important}
    .part-r{padding-right:40px !important}
    .part-r-2x{padding-right:50px !important}
    .part-r-3x{padding-right:60px !important}
    .part-r-4x{padding-right:70px !important}
    .part-l-5x{padding-right:100px !important}

    .part-lr-05{padding-left:30px !important; padding-right:30px !important}
    .part-lr{padding-left:40px !important; padding-right:40px !important}
    .part-lr-2x{padding-left:50px !important; padding-right:50px !important}
    .part-lr-3x{padding-left:60px !important; padding-right:60px !important}
    .part-lr-4x{padding-left:70px !important; padding-right:70px !important}
    .part-lr-5x{padding-left:100px !important; padding-right:100px !important}
}

/************************************************
Margin
*************************************************/
.part-m-t-05{margin-top:20px !important}
.part-m-t{margin-top:30px !important}
.part-m-t-2x{margin-top:40px !important}
.part-m-t-3x{margin-top:50px !important}
.part-m-t-4x{margin-top:60px !important}

.part-m-b-05{margin-bottom:20px !important}
.part-m-b{margin-bottom:30px !important}
.part-m-b-2x{margin-bottom:40px !important}
.part-m-b-3x{margin-bottom:50px !important}
.part-m-b-4x{margin-bottom:60px !important}

.part-m-tb-05{margin-top:20px !important; margin-bottom:20px !important}
.part-m-tb{margin-top:30px !important; margin-bottom:30px !important}
.part-m-tb-2x{margin-top:40px !important; margin-bottom:40px !important}
.part-m-tb-3x{margin-top:50px !important; margin-bottom:50px !important}
.part-m-tb-4x{margin-top:60px !important; margin-bottom:60px !important}

.part-m-l-05{margin-left:20px !important}
.part-m-l{margin-left:30px !important}
.part-m-l-2x{margin-left:40px !important}
.part-m-l-3x{margin-left:50px !important}
.part-m-l-4x{margin-left:60px !important}

.part-m-r-05{margin-right:20px !important}
.part-m-r{margin-right:30px !important}
.part-m-r-2x{margin-right:40px !important}
.part-m-r-3x{margin-right:50pxm- !important}
.part-m-r-4x{margin-right:60px !important}

.part-m-lr-05{margin-left:20px !important; margin-right:20px !important}
.part-m-lr{margin-left:30px !important; margin-right:30px !important}
.part-m-lr-2x{margin-left:40px !important; margin-right:40px !important}
.part-m-lr-3x{margin-left:50px !important; margin-right:50px !important}
.part-m-lr-4x{margin-left:60px !important; margin-right:60px !important}

@media (min-width:768px) {
    .part-m-t-05{margin-top:30px !important}
    .part-m-t{margin-top:40px !important}
    .part-m-t-2x{margin-top:50px !important}
    .part-m-t-3x{margin-top:60px !important}
    .part-m-t-4x{margin-top:70px !important}
    
    .part-m-b-05{margin-bottom:30px !important}
    .part-m-b{margin-bottom:40px !important}
    .part-m-b-2x{margin-bottom:50px !important}
    .part-m-b-3x{margin-bottom:60px !important}
    .part-m-b-4x{margin-bottom:70px !important}

    .part-m-tb-05{margin-top:30px !important; margin-bottom:30px !important}
    .part-m-tb{margin-top:40px !important; margin-bottom:40px !important}
    .part-m-tb-2x{margin-top:50px !important; margin-bottom:50px !important}
    .part-m-tb-3x{margin-top:60px !important; margin-bottom:60px !important}
    .part-m-tb-4x{margin-top:70px !important; margin-bottom:70px !important}

    .part-m-l-05{margin-left:30px !important}
    .part-m-l{margin-left:40px !important}
    .part-m-l-2x{margin-left:50px !important}
    .part-m-l-3x{margin-left:60px !important}
    .part-m-l-4x{margin-left:70px !important}

    .part-m-r-05{margin-right:30px !important}
    .part-m-r{margin-right:40px !important}
    .part-m-r-2x{margin-right:50px !important}
    .part-m-r-3x{margin-right:60px !important}
    .part-m-r-4x{margin-right:70px !important}

    .part-m-lr-05{margin-left:30px !important; margin-right:30px !important}
    .part-m-lr{margin-left:40px !important; margin-right:40px !important}
    .part-m-lr-2x{margin-left:50px !important; margin-right:50px !important}
    .part-m-lr-3x{margin-left:60px !important; margin-right:60px !important}
    .part-m-lr-4x{margin-left:70px !important; margin-right:70px !important}
}

/************************************************
Flex, Grid
*************************************************/
.flex{display:flex; flex-direction: column;}
.flex-wrap{display:flex; flex-wrap:wrap}

.grid{display:grid; grid-template-columns:100%}
.grid-gap{row-gap:10px; column-gap:10px}
.grid-gap-2x{row-gap:20px; column-gap:20px}
.grid-gap-3x{row-gap:30px; column-gap:30px}

.layout-start{justify-content:flex-start; align-items:center}
.layout-center{justify-content:center; align-items:center}
.layout-end{justify-content:flex-end; align-items:center}
.layout-between{justify-content:space-between; align-items:center}

@media (min-width: 576px) {
    .grid-4{grid-template-columns:repeat(2, 1fr)}
    .grid-6{grid-template-columns:repeat(2, 1fr)}
}

@media (min-width:768px) {
    .flex{display:flex; flex-direction: row;}

    .grid-2{grid-template-columns:repeat(2, 1fr)}
    .grid-3{grid-template-columns:repeat(3, 1fr)}
    .grid-6{grid-template-columns:repeat(3, 1fr)}
}

@media (min-width:992px) {
    .flex{display:flex; flex-direction: row;}
    .grid-4{grid-template-columns:repeat(4, 1fr)}
    .grid-6{grid-template-columns:repeat(6, 1fr)}
}

/************************************************
Input, Button
*************************************************/
/* Input */
input{background:#fff; height:40px; padding:8px; border:1px solid var(--color-main)}
input:read-only, textarea:read-only {background-color:var(--color-grey)}
input.input-s{width:200px; min-width:120px}
label{margin-right:20px; font-weight:normal !important; font-size:15px; color:#333}
label input[type="checkbox"] + span,
label input[type="radio"] + span{color:#000}
label input[type="checkbox"]:checked + span,
label input[type="radio"]:checked + span{color:var(--color-main)}
input[type="checkbox"],
input[type="radio"]{position:relative; border:1px solid var(--color-grey); background:#fff; clear:none; cursor:pointer; display:inline-block; line-height:0; height:20px; margin:-3px 2px 0px 0px; border-radius:0; outline:0; padding:0 !important; text-align:center; vertical-align:middle; width:20px; min-width:20px; transition:0.05s border-color ease-in-out; min-height:20px}
input[type="checkbox"]:checked{border-color:var(--color-main)}
input[type="checkbox"]:checked:before{content:""; position:absolute; top:4px; left:3px; width:10px; height:4px; border:2px solid var(--color-main); border-top:none; border-right:none; transform:rotate(-45deg)}
input[type="radio"]{border:0 !important; border-radius:20px}
input[type="radio"]:checked{background:#fff; border-color:var(--color-main)}
input[type="radio"]:checked:before{content:""; position:absolute; top:4px; left:4px; background:var(--color-main); width:10px; height:10px; border-radius:10px}

/* Button */
.btn{padding:14px 24px; min-width:100px; text-align:center; display:inline-block; transition:0.6s; background:#fff; border-radius: 5px;}
.btn-main{border:1px solid var(--color-main); color:var(--color-main)}
.btn-main:hover{background:var(--color-main); color:#fff}
.btn-blue{border:1px solid var(--color-main); background:var(--color-main); color:#fff}
.btn-blue:hover{border:1px solid var(--color-main); background:#fff; color:var(--color-main)}
.btn-border{border:1px solid var(--color-main); background:transparent; color:var(--color-main)}
.btn-border:hover{border:1px solid var(--color-main); background:var(--color-main); color:#fff}
.btn-border-black{border:1px solid #333; background:transparent; color:#333}
.btn-border-black:hover{border:1px solid var(--color-main); background:var(--color-main); color:#fff}
.btn-grey{border:1px solid var(--color-grey); color:var(--color-grey)}
.btn-trans{background:transparent;border: 1px solid #fff;color: #fff;}
.btn-trans:hover{background:var(--color-main); border:1px solid var(--color-main)}

/* Top Button */
.top-btn{position:fixed; bottom:20px; right:25px; width:50px; height:50px; border-radius:50%; background:rgba(224, 223, 233, 0.7); visibility:hidden; cursor:pointer; transition:all .2s ease; z-index:999}
.top-btn::after{content:""; position:absolute; top:50%; left:0; right:0; margin:-4px auto; width:12px; height:12px; border-top:2px solid #555; border-right:2px solid #555; transform:rotate(-45deg)}
.top-btn:hover{background:var(--color-main)}
.top-btn:hover::after{border-color:#fff}

/************************************************
Container
*************************************************/
.container{margin:0 5%}
.container-fluid{height:100%}
.container-post,
.prevnext-wrap{margin:0 auto; max-width:620px}
.container-page{margin:0 auto; max-width:90%}

@media (min-width:1400px) {
    .container{margin:0 auto; width: 80%;}
    .container-fluid{width:100%; height:100%}
    .container-page{margin:0 auto; max-width:50%}
}

/************************************************
Etc
*************************************************/
figcaption{color:var(--color-grey); font-size:14px; margin-top:5px; text-align:center;}
h1.blind{position:absolute; overflow:hidden; margin:-1px; width:1px; height:1px; clip:rect(0 0 0 0)}
article{margin-top:15px;}
.hide,
caption,
legend{line-height:0; font-size:0; overflow:hidden}
#breadcrumb span{font-size:14px; color:var(--color-grey)}
@media (min-width:1400px) {
    article{margin-top:80px;}
}

/************************************************
Header
*************************************************/
header{width:100%; position:fixed; top:0; transition:top 0.2s ease-in-out; z-index:999; background:#fff}
header.nav-up{top:-80px}
header.nav-down {background:#fff}

/* PC */
header nav{width: 75%;height:80px;display:flex;justify-content:space-between;align-items:center;margin:0 auto}
header nav .header-logo img{height:38px}
header nav .menu-ul{display:flex; list-style:none; padding-left:0}
header nav .menu-ul li{position:relative}
header nav .menu-ul > li > a{font-size: 15px;font-weight: 600;text-transform: uppercase;color: #000;padding: 30px 14px;height: 100%;display: inline-block;}
header nav .menu-ul > li.active a,
header nav .menu-ul > li.current-menu-parent a{color:var(--color-main)}
header nav .menu-ul > li.menu-item-has-children::after{content:'';background:url(../images/icon/icon-down.svg) no-repeat center center / 100%; width: 8px;height:8px;display:inline-block;margin-right:10px;background-size: contain;background-position: inherit;}
header nav .menu-ul > li.menu-item-has-children > a{padding-right:5px !important;}
header nav .menu-ul > li:hover a{color:var(--color-main)}
header nav .menu-ul li .sub-menu{display:none}
header nav .menu-ul li .sub-menu > li a{display:block;font-size:14px;color:#fff;padding: 15px;text-transform:uppercase}
header nav .menu-ul li .sub-menu > li a:hover{color:var(--color-main)}
header nav .menu-ul li:hover .sub-menu{display:block;position:absolute;left:0;top: 80px;background:var(--color-black);min-width:200px;z-index:50}
header nav .btn-wrap .search-btn img{cursor:pointer}
header nav .btn-wrap .flag{height:20px; margin-left:10px}
header nav .btn-wrap .menu-btn{display:none}

.search{padding-top:80px}
.searchform-wrap .search-ui{display:none; width:80%; margin:0 auto}
.searchform-wrap .search-ui.active{display:block}
.searchform-wrap .search-ui .search-input{width:20%;margin:15px 0;border-radius: 5px;border: 1px solid #ccc;}
.searchform-wrap .search-ui button{border:1px solid #333;background: #fff;padding: 9px 22px;border-radius: 5px;}

/* Mobile */
/* @media screen and (max-width: 1399px) {
    header nav{width: 90%;height:60px}
    header nav .menu-primary-menu-container{width: 90%;background:var(--color-black);position: absolute;z-index: 9999;top: 60px;}
    header nav .menu-ul{display:none;width: 100%;flex-direction:column;align-items:center}
    header nav .menu-ul.active{display: flex;}
    header nav .menu-ul li{width:100%;}
    header nav .menu-ul li a{color:#fff}
    header nav .menu-ul li > a{padding: 10px;display:block;}
    header nav .menu-ul > li.menu-item-has-children::after{display:none}
    header nav .menu-ul li:hover .sub-menu{position: inherit;left: inherit;top: inherit;}
    header nav .menu-ul li .sub-menu{display: block;}
    header nav .menu-ul li .sub-menu > li a{font-size:14px;padding: 10px 25px;}
    header nav .btn-wrap .flag{display:none;}
    header nav .btn-wrap .menu-btn{display:initial;}
    .searchform-wrap .search-ui{width:90%}
    .searchform-wrap .search-ui .search-input{width:50%}
}

@media (min-width:280px) {
    header nav .btn-wrap .search-btn{padding-right: 10px;}
} */

/* Mobile */
@media screen and (max-width: 1399px) { /* 기존 작업자가 쓰던 1399px 범위 유지 혹은 767px로 조정 가능 */
    
    /* 1. 헤더 전체에 기준점 강제 부여 */
    header {
        position: fixed !important; /* relative에서 fixed로 변경 */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }

    body {
        padding-top: 60px !important; 
    }

    header nav {
        width:90%
    }

    /* 2. 기존 감싸는 컨테이너의 영향력을 완전히 무력화 시킵니다 */
    header nav .menu-primary-menu-container {
        position: static !important;
        display: block !important;
        width: auto !important;
    }

    /* 3. [핵심] 갇혀있던 menu-ul 자체를 화면 전체(100%) 기준으로 배치합니다 */
    header nav .menu-ul {
        display: none !important; 
        position: fixed !important; /* absolute에서 fixed로 변경 (화면 기준 고정) */
        top: 60px !important;       
        left: 0 !important;         
        width: 100vw !important;    
        
        /* [핵심 추가] 카테고리가 너무 많아져서 폰 화면을 넘어갈 때 
        메뉴 내부에서만 부드럽게 스크롤이 되도록 제한합니다. */
        max-height: calc(100vh - 60px) !important; 
        overflow-y: auto !important; 

        /* 아래는 기존 작성자님 디자인 유지 */
        background-color: #0d0d0d !important; 
        flex-direction: column !important;
        align-items: flex-start !important; 
        margin: 0 !important;
        padding: 15px 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6) !important;
    }

    /* 4. JS 활성화 되었을 때 드롭다운 표시 */
    header nav .menu-ul.active {
        display: flex !important;
    }

    /* 5. 메뉴 구성 (부모 li 요소에 기준점을 명확히 부여합니다) */
    header nav .menu-ul li {
        position: relative !important; /* [핵심] 하위 메뉴가 이 li 안에 갇히도록 기준점 부여 */
        display: block !important;
        width: 100% !important;
        list-style: none !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #1f1f1f !important; 
    }

    header nav .menu-ul li a {
        color: #ffffff !important; 
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 25px !important; 
        font-size: 16px !important;
        font-weight: 700 !important;   
        text-align: left !important;
        text-decoration: none !important;
        
        text-shadow: none !important; 
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        opacity: 1 !important;
    }

    /* 6. 서브메뉴(하위 카테고리) - 붕 뜨지 않고 부모 밑에 꽉 붙도록 강제 제어 */
    header nav .menu-ul li .sub-menu {
        display: block !important; /* 항상 공간을 차지하게 만듦 */
        position: relative !important; /* absolute로 붕 뜨는 테마 기능을 무력화하고 줄바꿈 형태로 배치 */
        top: 0 !important; /* 엉뚱한 곳으로 튀지 않도록 상단 마진 제로 */
        left: 0 !important;
        width: 100% !important;
        height: auto !important; /* 자식 콘텐츠 두께만큼 자연스럽게 늘어나게 */
        background: #161616 !important; 
        padding: 5px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        float: none !important; /* 혹시 모를 float 흐트러짐 방지 */
    }
    
    header nav .menu-ul li .sub-menu > li {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        border-bottom: none !important;
    }

    header nav .menu-ul li .sub-menu > li a {
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #b8b8b8 !important; 
        padding: 12px 45px !important; /* 안쪽 들여쓰기 */
        box-sizing: border-box !important;
    }

    /* 6. 서브메뉴(하위 카테고리) 스타일 정돈 */
    header nav .menu-ul li .sub-menu {
        /* 기존의 position: relative !important; 가 아래 대메뉴들을 밀거나 겹치게 만들었습니다. */
        display: none; /* 평소에는 숨김 처리가 기본 (워드프레스 토글 기능과 연동) */
        position: relative !important;
        width: 100% !important;
        height: auto !important; /* 높이를 유동적으로 변경 */
        background: #161616 !important; 
        padding: 5px 0 !important; /* 위아래 약간의 여백 생성 */
        box-sizing: border-box !important;
        
        /* 중요: 자식 메뉴가 열릴 때 부모 li 요소도 함께 늘어나도록 overflow 제어 */
        overflow: hidden !important; 
    }

    /* 워드프레스나 테마 스크립트에 의해 하위 메뉴가 열릴 때(보통 .toggled-on 또는 display: block 처리됨) */
    header nav .menu-ul li.toggled-on .sub-menu,
    header nav .menu-ul li:focus-within .sub-menu {
        display: block !important;
    }

    header nav .menu-ul li .sub-menu > li {
        width: 100% !important;
        border-bottom: none !important;
        position: relative !important;
        display: block !important;
    }

    header nav .menu-ul li .sub-menu > li a {
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #b8b8b8 !important; 
        padding: 14px 45px !important; /* 클릭하기 편하도록 상하 패딩을 살짝 늘림 */
        box-sizing: border-box !important;
    }
    /* 7. 기타 아이콘 제어 */
    header nav .btn-wrap .flag { display: none !important; }
    header nav .btn-wrap .menu-btn { display: inline-block !important; cursor: pointer; }
    header nav .menu-ul > li.menu-item-has-children::after { display: none !important; }
}

/************************************************
Footer
*************************************************/
footer{padding:60px 0}
footer .footer-logo img{width:auto; height:52px}
footer .footer-wrap{display:block; padding:initial;}
footer .footer-wrap p{font-size:14px;color:#969696;font-weight:600;padding-bottom: 10px;padding-top: 30px;}
footer ul{font-size:13px; color:#969696; margin-right:30px; padding-right:30px;}
footer ul{border-right:0}
footer ul li{padding-top: 5px;}
footer ul.family-site li{cursor:pointer; display:flex}

@media (min-width:768px) {
    footer .footer-wrap{display:flex}
    footer ul{border-right: 1px solid #F0F0F0}
    footer ul.copyright{border-right:0}
}

/************************************************
List
*************************************************/
.thumb-box{width:100%;height:auto;padding: 37%;background-size: cover;background-position: center;}

.horizontal-list{padding:80px 0 50px; display:grid; column-gap:20px; row-gap:20px}
.horizontal-list a{padding-bottom:30px}

.vertical-list .post-box{margin-bottom: 30px;display:grid;column-gap:20px;row-gap:20px;align-items:center; transition:all .2s ease-out;}
.vertical-list .post-box > div{padding:12px;}
.vertical-list .post-box:hover{box-shadow:0 15px 30px -7px rgba(0,0,0,0.3)}
.nodata-wrap{text-align:center; font-size:16px; box-shadow:0 1px 5px rgb(0 0 0 / 10%); padding:30px; background:var(--color-main); border-radius:10px}

@media (min-width:768px) {
    .horizontal-list{grid-template-columns:repeat(2, 1fr)}
    .vertical-list .post-box{grid-template-columns:1fr 2fr;}
}

.tag-wrap{margin-top:15px}
.tag-wrap a{font-size:14px;background:#fff;border:1px solid var(--color-grey);padding:3px 5px;display:inline-block;margin:3px 2px;border-radius:10px;min-width:35px; transition:all .1s ease-out; color:#000 !important}
.tag-wrap a::before{content:'#'}
.tag-wrap a:hover{color:#fff !important; background:var(--color-main); border:1px solid var(--color-main); text-decoration: none !important;}

/************************************************
Post
*************************************************/
.container-post,
.prevnext-wrap{margin:0 auto; width:90%; height:100%}
.container-post h1{font-size:32px; font-weight:600; line-height:1.6}
.container-post h2{font-size:26px; font-weight:600; line-height:1.6; padding:16px 0 5px}
.container-post h3{font-size:24px; font-weight:600; line-height:1.6; padding:8px 0 5px}
.container-post h4{font-size:22px; font-weight:600; line-height:1.6; padding:8px 0 5px}
.container-post h5{font-size:20px; font-weight:600; line-height:1.6; padding:8px 0 5px}
.container-post h6{font-size:18px; font-weight:600; line-height:1.6; padding:8px 0 5px}
.container-post p{font-size:18px; line-height:1.6; padding:15px 0 20px; word-break:break-word}
.container-post a{color:var(--color-blue)}
.container-post a:hover{text-decoration:underline;}
.container-post #breadcrumb a{color:var(--color-grey)}
.container-post blockquote{border-left:3px solid var(--color-brown); padding-left:25px; margin-top:20px; margin-bottom:20px}
.container-post blockquote p,
.container-post blockquote i{font-weight:500; color:var(--color-brown)}
.container-post blockquote cite{font-size:14px; color:var(--color-brown); margin-top:10px; font-weight:400}
.container-post img{width:100%; height:100%; text-align:center; padding:15px 0}
.container-post ul {padding:0 0 0 40px; font-size:18px; line-height:1.6;}
.container-post ul li {display:list-item; list-style: disc; font-size:18px; line-height:1.6;}
.prevnext-wrap {display:block; border-top:1px solid #eaeaea}
.prevnext-wrap div {padding-top:15px}
.prevnext-wrap {display:block; border-top:1px solid #eaeaea}
.cate-wrap{display:inline-block; margin:50px 0 10px 0}
ul.post-categories {display:inline-flex}
ul.post-categories li{margin-right:10px}
ul.post-categories li a{font-size:14px;}
ul.post-categories li::after{content:''; background:url(../images/icon/next@2x.png) no-repeat center center / 100%; width:10px; height:10px; display:inline-block; margin-left:10px;}
ul.post-categories li:last-child::after{background:none}
.thumb img {flex-direction:column; width:100%; height:100%}
.post-thum img{width:100%; height:auto}
@media (min-width:768px) {
    .prevnext-wrap {display:flex; justify-content:space-between}
    .prevnext-wrap .prev-wrap{width:50%; margin-right:10px}
    .prevnext-wrap .next-wrap{width:50%; margin-left:10px}
    .prevnext-wrap .prev-wrap p,
    .prevnext-wrap .next-wrap p{padding-bottom:15px;}

    .prevnext-wrap {display:flex; justify-content:space-between}
    .thumb img {max-width:none}
}
@media (min-width:860px) {
    .post-thum img{width:768px}
}

/************************************************
Embed Youtube
*************************************************/
.container-embed{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%}
.container-embed iframe, 
.container-embed object,
.container-embed embed{position:absolute; top:0; left:0; width:100%; height:100%}

/************************************************
Paging
*************************************************/
.pagination{text-align:center; display:block; padding:30px 0}
.pagination li{display:inline; height:100%}
.pagination .page-numbers{font-size:16px; text-align:center; border:1px solid #e7e7e7; cursor:pointer; box-sizing:border-box; padding:8px 16px; display:inline-block}
.pagination .page-numbers:hover{background:var(--color-light-grey)}
.pagination li .current{font-weight:600;color:var(--color-dark-green)}
a.prev, a.next{position:relative}
a.prev::before,
a.next::before{content:''; display:inline-block; width:12px; height:12px; background-position:center; background-repeat:no-repeat; background-size:100%}
a.prev::before{background-image:url(../images/icon/prev@2x.png)}
a.next::before{background-image:url(../images/icon/next@2x.png)}