@charset "utf-8";
/* Info
 ========================================================================== */
/**
    * 1. Writer: Ajin Lee. (Weaverloft Corp.)
    * 2. Production Date: 2025-06
    * 3. Client: W PromptHub
 */

/*========== Common ==========*/
body { overflow-x: auto; } 
main { position: relative; min-height: calc(100vh - 80px); } 
#main {position: relative;padding: 88px 0 0;zoom: 90%;min-height: calc(100vh - 80px);}
#main::after {content: '';display: block;position: fixed;left: 0;top: 0;z-index: -1;width: 100%;height: 100%; background: radial-gradient(ellipse 160% 120% at 0% 20%, rgba(219, 238, 255, 1) 0%, rgba(247, 249, 252, 1) 30%, rgba(247, 249, 252, 1) 100%);pointer-events: none;}

.inner {max-width: 1600px;margin: 0 auto;box-sizing: border-box;}
.sub-inner {max-width: 1600px;margin: 0 auto;box-sizing: border-box;}
.main-sec .inner.main-cont-inner {max-width: 1600px;}
.section {overflow: hidden;width: 100%;}

.sub-top {overflow: hidden;}
.sub-top-txt {margin: 10px 0 0; font-size: 1.50rem;font-weight: 200; font-variation-settings: 'wght' 200;text-align: center;}
.sub-middle {margin: 120px 0;padding: 60px 0;background-color: #E9F4FF;}
.search-area .label-wrap {justify-content: center; margin: 20px auto 0; gap: 14px; margin: 20px auto 0;}
.sub-top-main-tit {text-align: center;}
.sub-top-title {width: 207px; aspect-ratio: 207 / 40;margin: 0 auto;}

.sub-top + .search-section .search-area  {margin: 40px 0 50px;}
.section-content + .section-content {margin-top: 100px;}

.side-sticky-wrap { position: relative; overflow: hidden; align-items: stretch; width: 14.38em;}
.side-sticky-wrap .init-line.vertical { transition: height 6s ease-out; transition-delay: 0.5s; -webkit-transition: height 6s ease-out; -moz-transition: height 6s ease-out; -ms-transition: height 6s ease-out; -o-transition: height 6s ease-out; }
.side-sticky { position: sticky; width: 14.38em;top: 0;}
.sticky-lnb-wrap {width: 100%; padding: 5em 0; }
.sticky-lnb-link {margin: 0 0 18px;padding: 0 0 16px 20px; border-bottom: 1px solid var(--line-basic-color); font-size: 1.25rem;font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-txt-color);}
.sticky-lnb-dep2-list + .sticky-lnb-dep2-list {margin: 20px 0 0;}
.sticky-lnb-dep2-link {position: relative;padding-left: 20px; font-size: 1.125rem;font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-light-gray-color);transition: color 400ms;}
.sticky-lnb-dep2-list.on .sticky-lnb-dep2-link {font-weight: 600; font-variation-settings: 'wght' 600; color: var(--text-dark-color);}
.sticky-lnb-dep2-list .sticky-lnb-dep2-link:focus-visible {outline: none;}
.sticky-lnb-dep2-list .sticky-lnb-dep2-link:focus-visible span {outline: none; outline: 2px dashed #111;}
.sticky-lnb-dep2-link::before {content: '';position: absolute;top:50%;left: 2px;width: 2px;height: 0;background-color: var(--text-dark-color);transform: translate(-50%, -50%); transform-origin: center;}
.sticky-lnb-dep2-list.on .sticky-lnb-dep2-link::before {height: 16px;transition: height 400ms;}
.side-sticky.fixed { position: fixed; z-index: 10; will-change: transform; transition: transform 0.3s ease, top 0.3s ease;}

.prmp-tit.main-title {margin: 0 0 20px; font-size: 1.88rem;font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-txt-color);}
.prmp-tit span{position: relative; padding-left: 24px;}
.prmp-tit span::before { content: ''; position: absolute; top:50%; left: 0; width: 20px; height: 20px;   transform: translate(0, -50%);background-image: url("../images/common/icon-prmpt.svg"); background-repeat: no-repeat; background-position: center; background-size: 100% auto; }
.prmp-tit.main-title span {padding-left: 36px;}
.prmp-tit.main-title span::before {width: 30px;height: 30px;}

@media (hover: hover) {
    .sticky-lnb-dep2-link:hover {color: var(--text-gray-color);}
}
@media screen and (max-width: 1520px) {
    .inner {margin: 0 40px;}
    .sub-inner {margin: 0 40px;}
}
@media screen and (max-width: 1440px) {
    .main-sec .main-cont-inner.main-cont-area {margin: 0 40px;}
    .main-sec .main-cont-inner.grid-box-area {margin: 0 40px;}
    .main-sec .main-cont-area .inner {margin: 0;}
    .main-sec .grid-box-area .inner {margin: 0;}
}
@media screen and (max-width: 1024px) {
    .inner {margin: 0 30px;}
    .main-sec .inner {margin: 0 30px;}
    .prmp-tit.main-title {font-size: 22px;}
    .prmp-tit.main-title span {padding-left: 28px;}
    .prmp-tit.main-title span::before {width: 24px;height: 24px;}
}
@media screen and (max-width: 768px) {
    .inner {margin: 0 20px;}
    .sub-inner {margin: 0 20px;}
    #main {padding: 60px 0 0;}
    .main-sec .inner {margin: 0 20px;}
    .sub-top-title {width: 180px;}
    .sub-middle .sub-top-title-wrap {margin: 0 20px;}
    .main-sec .main-cont-inner.main-cont-area {margin: 0 20px;}
    .main-sec .main-cont-inner.grid-box-area {margin: 0 20px;}
    .search-area .label-wrap {margin: 20px 20px 0;}
}

/*========== Lnb ==========*/
#lnb {margin: 50px 0 20px;}
#lnb ul { display: flex; align-items: center; } 
#lnb ul li { font-size: 13px; font-weight: 600;font-variation-settings: 'wght' 600; line-height: 1; color: #7B91AD; } 
#lnb ul li a { font-size: 13px; font-weight: 600;font-variation-settings: 'wght' 600; text-transform: uppercase; line-height: 1; color: #7B91AD; } 
#lnb ul li a span { display: block; position: relative; transition: opacity 300ms; } 
#lnb ul li.home a span { position: relative; padding: 0 0 0 28px; } 
#lnb ul li.home a span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 20px; height: 20px; background-image: url("../images/common/icon-home.svg"); background-position: center; background-size: 100% auto; background-repeat: no-repeat; }
#lnb ul li.arrow { margin: 0 4px;margin-top: -2px; width: 20px; height: 20px; background-image: url("../images/common/icon-lnb-arrow.svg"); background-position: center center; background-size: 100% auto; background-repeat: no-repeat; } 
#lnb ul li a:hover span { opacity: 0.6; } 

/*========== Key Visual Section ==========*/
.key-visual-section {max-width: 1600px; width: 100%; height: 450px; margin: 0 auto; box-sizing: border-box;}
.key-visual-section.top {max-width: none;}
.key-visual-section.full {max-width: none;}
.key-visual-section a {width: 100%; height: 100%;}
.key-visual-section figure {display: flex; justify-content: center; width: 100%; height: 100%;}

@media screen and (max-width: 1520px) {
    .key-visual-section {width: auto; margin: 0 40px;}
    .key-visual-section.top {margin: 0;}
    .key-visual-section.full {margin: 0;}
}
@media screen and (max-width: 1024px) {
    .key-visual-section {height: 320px;}
}
@media screen and (max-width: 768px) {
    .key-visual-section {height: 260px;margin: 0 20px;}
    .key-visual-section.top {margin: 0;}
    .key-visual-section.full {margin: 0;}
}

/*========== Banner Section ==========*/
.banner-section {position: relative; max-width: 1600px; width: 100%; height: 250px; margin: 0 auto; box-sizing: border-box;}
.banner-section::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.43));}
.banner-section.color-bg::after {display: none;}
.banner-section.full {max-width: none;}
.banner-section.top {max-width: none;}
.banner-section a {position: relative;z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.banner-section .banner-tit-wrap {display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; transform: translate(-50%, 0); z-index: 1; width: 100%; max-width: 1600px; height: 100%; }
.banner-section .banner-tit-wrap .inner {margin: 0;}
.banner-section.full .banner-tit-wrap .inner {margin: 0;}
.banner-section .banner-title { max-width: 760px; width: 100%; font-size: 1.88rem;font-weight: 600;font-variation-settings: 'wght' 600; color: #fff; word-break: keep-all; text-align: center;}
.banner-section.full .banner-title { margin-left: 0;}
.banner-section figure {overflow: hidden;display: flex;justify-content: center;width: 100%; height: 100%; background-color: #f9f9f9;}
.banner-section figure img {width: 100%;height: 100%;object-fit: cover; object-position: center center; }

@media screen and (max-width: 1520px) {
    .banner-section {width: auto; margin: 0 40px;}
    .banner-section.top {margin: 0;}
    .banner-section.full {margin: 0;}
    .banner-section .banner-tit-wrap {padding: 0 40px;}
    .banner-section.top .banner-tit-wrap .inner {margin: 0 40px;}
    .banner-section.full .banner-tit-wrap .inner {margin: 0 40px;}
}
@media screen and (max-width: 1024px) {
    .banner-section .banner-title { font-size: 22px;}
}
@media screen and (max-width: 768px) {
    .banner-section {height: 180px;margin: 0 20px;}
    .banner-section.top {margin: 0;}
    .banner-section.full {margin: 0;}
    .banner-section .banner-tit-wrap {padding: 0 20px;}
    .banner-section.top .banner-tit-wrap .inner {margin: 0 20px;}
    .banner-section.full .banner-tit-wrap .inner {margin: 0 20px;}
}

/*========== 섹션 여백 ==========*/
.section + .section {margin-top: 100px;}
.sub-top + .section:not(.search-section) {margin-top: 100px;}
.sub-top + .search-section + .section {margin: 0;}
@media screen and (max-width: 768px) {
    .section + .section {margin-top: 60px;}
    .sub-top + .section:not(.search-section) {margin-top: 60px;}
}

/*========== Search Section ==========*/
#sub .sub-top .category-btn {gap: 15px;margin: 30px 0 0;}
#sub .sub-top + .search-section.left {margin: 40px 0 50px;}
#sub .sub-top + .search-section.right {margin: 40px 0 50px;}
.search-section.left .inner {display: flex; justify-content: flex-start;}
.search-section.right .inner {display: flex; justify-content: flex-end;}
.search-section.left .common-sch-box .input-box input.common-search {min-width: 400px;}
.search-section.right .common-sch-box .input-box input.common-search {min-width: 400px;}
.search-section.result-search-section + .section {margin-top: 50px;}
@media screen and (max-width: 1024px) {
    #sub .sub-top .category-btn {flex-wrap: wrap;}
}
@media screen and (max-width: 768px) {
    .search-section.left .common-sch-box .input-box input.common-search {min-width: auto;}
    .search-section.right .common-sch-box .input-box input.common-search {min-width: auto;}
}

/*========== 검색 결과 ==========*/
.no-result-sec {display: none; justify-content: center; align-items: center; padding: 3.75em 0; }
.no-result .no-result-sec {display: flex;}
.no-result-sec p {padding: 5.13em 0 0;background-image: url("../images/common/icon-info.svg"); background-repeat: no-repeat; background-position: top center; background-size: 4em auto; font-size: 1rem;font-weight: 500; font-variation-settings: 'wght' 500;text-align: center;line-height: 1.5; color: var(--text-gray-color);}
@media screen and (max-width: 1024px) {
    .no-result-sec {padding: 4.29em 0;}
    .no-result-sec p {padding: clamp(3.25em,8.008vw,5.13em) 0 0;background-size: clamp(2.5em, 6.25vw, 4em) auto;}
}

/*========== Header ==========*/
.header-dim{display: none; visibility:hidden;opacity:0;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;transform:none;z-index:205;width:100%;height:100vh;height:100dvh;background-color:rgba(0,0,0,0.5);transition:opacity 300ms,visibility 300ms;}
.header{ position:fixed; top:0; left:0; z-index:320; width:100%; height:80px;border-bottom: 1px solid transparent;background-color:#fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);transition: border 250ms;}
.header .gnb{display:flex;justify-content:space-between;position:relative;z-index:320;width:100%;height:100%; max-width: 1600px; margin: 0 auto; transition:border 400ms;background-color:#fff;}
.gnb .header-logo{ display: flex; align-items: center; width:130px;}
.gnb .header-logo a{position:relative;}
.gnb .nav-wrap{display:flex;gap:0 2.19em;}
.nav-area .nav-dep1{display:flex;flex-flow:row nowrap;align-items:center;height:100%;}
.nav-area .nav-dep1 .nav-dep1-list{position: relative; height:100%;}
.nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link{ display:flex; justify-content:center; align-items:center; width: 100%; height:100%; padding:0 clamp(15px, 1.04vw, 25px); font-size: 1rem; font-weight:500; font-variation-settings:'wght' 500; line-height:1.35; transition:all 400ms; }
.nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link:focus-visible{outline:none;}
.nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link:focus-visible > span {outline:2px dashed #111;}
.nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link > span { position: relative; line-height: 1; word-break: keep-all; text-align: center;}
.nav-area .nav-dep1 .nav-dep1-list.important .nav-dep1-link span { padding: 8px 20px 7px; border-radius: 17px; border: 1px solid #D4D8DD; transition: border 400ms;}
.nav-area .nav-dep1 .nav-dep1-list.important:hover .nav-dep1-link span { border-color: var(--main-color); }
.header .nav-direct-link-btn {display: none;}

.header .nav-area .nav-dep2 { overflow: hidden; opacity: 0; visibility: visible; display: block; position: absolute; top: 80px; left: 50%; transform: translate(-50%, 0); min-width: 200px; border: 1px solid #E1E3E6; border-top: none; background-color: #fff; max-height: 0; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: max-height, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.header .nav-area .nav-dep2 .nav-dep2-list {padding: 0 27px;}
.header .nav-area .nav-dep2 .nav-dep2-list:first-child {padding-top: 30px;}
.header .nav-area .nav-dep2 .nav-dep2-list:last-child {padding-bottom: 30px;}
.header .nav-area .nav-dep2 .nav-dep2-link:focus-visible {outline:2px dashed #111;}
.header .nav-area .nav-dep2 .nav-dep2-list + .nav-dep2-list {margin: 20px 0 0;}
.header .nav-area .nav-dep2 .nav-dep2-link {width: 100%; font-size: 1rem;font-weight:400;font-variation-settings:'wght' 400;transition:all 400ms; text-align: center;}
.header .nav-area .nav-dep2 .nav-dep2-link span {width: max-content; word-break: keep-all;}
.nav-area .nav-dep1 .nav-dep1-list.active .nav-dep2{max-height: 80vh;opacity: 1;}
.nav-area .nav-dep1 .nav-dep1-list.on .nav-dep2{ opacity:1; visibility:visible; transition: opacity 600ms; width: max-content; }
.nav-area .nav-dep1 .nav-dep1-list.active .nav-dep1-link{color:var(--main-color);}
.nav-area .nav-dep1 .nav-dep1-list:not(.active) .nav-dep2 { max-height: 0;opacity: 0;}
.nav-area .nav-dep1 .nav-dep1-list.on .nav-dep1-link{color:var(--main-color);}
.nav-side-wrap{display:flex;gap:15px;align-items: center;}
.nav-side-wrap.left {gap: 30px;}
.nav-side{display:flex;gap:10px;align-items: center;}
.nav-side .icon-btn{ width:2.19em; height:2.19em; background-repeat:no-repeat; background-position:center center; background-size:25px auto; border:none; cursor:pointer; transition:opacity 300ms;}
.header-search-btn {background-image: url("../images/common/icon-search.svg");}
.nav-side .icon-btn.header-notice-btn {position: relative; background-image: url("../images/common/icon-news.svg"); background-size: contain;}
.header-notice-btn.on::after {content: '';position: absolute;top: 2px;right: 2px;width: 8px;height: 8px;background-color: #FF3A21;border-radius: 50%;}
.header-my-btn {background-image: url("../images/common/icon-user.svg");transition:transform 300ms;}
.nav-side-wrap .icon-btn.header-site-btn {display: none; position: relative; z-index: 350; width: 26px; height: 26px; background-image: url("../images/common/icon-menu.svg"); border-radius: 0;transform-origin: center;transform: rotate(180deg);}
#sitemap-close-btn { background-image: url("../images/common/icon-menu-close.svg");}
#sitemap-btn{display:none;}

/* header open */
.header.on {border-bottom-color:var(--line-basic-color);}

.nav-area .nav-dep1 .nav-dep1-list:hover .nav-dep1-link{color:#2C7BE5;}
.nav-area .nav-dep1 .nav-dep1-list:hover .nav-dep1-link > span::after{width:110%;}
.nav-area .nav-dep2-list .nav-dep2-link:hover{color:#2C7BE5;}
.nav-side .icon-btn:hover{ opacity: 0.6;}
.nav-side .header-my-btn:hover{opacity: 0.6;}

/*========== 성능 최적화 ==========*/
/* GPU 가속을 위한 transform 적용 */
.nav-dep2, .nav-dep2 .nav-dep2-list {transform: translateZ(0);}

/* 애니메이션 중 텍스트 깜빡임 방지 */
.nav-dep2 * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

/* 리페인트 최소화 */
.nav-area .nav-dep1 .nav-dep1-list {contain: layout style;}

/*========== 접근성 개선 ==========*/

/* 키보드 네비게이션 개선 */
.nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link:focus + .nav-dep2, .nav-area .nav-dep1 .nav-dep1-list:focus-within .nav-dep2 {max-height: 300px;opacity: 1;}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .nav-dep2 {border: 2px solid;}
}

/* 애니메이션 줄임 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .nav-dep2,.nav-dep2 .nav-dep2-list {transition: none;}
    .nav-area .nav-dep1 .nav-dep1-list.active .nav-dep2,.nav-area .nav-dep1 .nav-dep1-list.on .nav-dep2 {max-height: none;opacity: 1;}
}

@media screen and (max-width:1640px){
    .header .gnb {max-width: 100%; padding: 0 40px;}
}
@media screen and (max-width:1480px){
    .nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link {padding: 0 12px;}
    .nav-side .icon-btn{ width: 26px; height: 26px; background-size: 20px auto; }
    .nav-side .header-my-btn{ width: 26px; height: 26px; }
}
@media screen and (max-width:1400px) {
    .header-dim{display: block;}
    .header-dim.on{visibility:visible;opacity:1;}
    #sitemap-btn {display: block;}
    .header.on #sitemap-btn {display: none;}
    .header.on #sitemap-close-btn {display: block;}
    .head-area:has(.header.on) .header-dim { opacity: 1; visibility: visible;}

    .gnb .nav-wrap { position: absolute;top: 80px;left: -620px;z-index: 319; width: 620px; height: 100vh;height: calc(var(--vh, 1vh) * 100);height: 100dvh;background-color: #fff;transition: left 0.3s ease-in-out;}
    .header.on .gnb .nav-wrap { max-width: 100%; left: 0; transition: left 0.3s ease-in-out;  }
    .nav-area {width: 100%;}
    .nav-area .nav-dep1 {height: auto; flex-direction: column;align-items: flex-start;padding: 20px 0;}
    .nav-area .nav-dep1 .nav-dep1-list { width: 100%; }
    .nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link {position: relative; padding: 20px 30px;justify-content: flex-start;}
    .nav-area .nav-dep1 .nav-dep1-list:has(.nav-dep2) .nav-dep1-link::before {content: "";position: absolute;top: 50%;right: 20px;width: 36px;height: 36px;background-image: url('../images/common/icon-select-arrow-down.svg');background-repeat: no-repeat;background-position: center;background-size: contain;transform: translate(0, -50%);}
    .nav-area .nav-dep1 .nav-dep1-list.on .nav-dep1-link::before { background-image: url('../images/common/icon-select-arrow-up.svg'); }
    .nav-area .nav-dep1 .nav-dep1-list.important .nav-dep1-link::before {display: none;}
    .nav-area .nav-dep1 .nav-dep1-list.important .nav-dep1-link span { padding: 0; border-radius: 0; border: none; transition: border 400ms; }
    .nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link > span { width: max-content; max-width: 74%; word-break: keep-all; line-height: 1.35;}
    .nav-area .nav-dep1 .nav-dep1-list.important:hover .nav-dep1-link span { border: none; }
    .nav-area .nav-dep1 .nav-dep1-list .nav-dep2 { opacity: 0; position: static; transform: translate(0,0); width: 100%; border: none; width: 100%; background-color: #F5F5F5;}
    .nav-area .nav-dep1 .nav-dep1-list.on .nav-dep2-list {padding: 0 27px;}
    .nav-area .nav-dep1 .nav-dep1-list.on .nav-dep2-list:first-child {padding-top: 20px;}
    .nav-area .nav-dep1 .nav-dep1-list.on .nav-dep2-list:last-child {padding-bottom: 20px;}
    .nav-area .nav-dep1 .nav-dep1-list.on .nav-dep2 {opacity: 1; width: 100%; height: auto; padding: 0; }
    .nav-area .nav-dep1 .nav-dep1-list:not(.on) .nav-dep2 { opacity: 0; height: 0; }
    .header .nav-area .nav-dep2 { padding: 0; }
    .header .nav-area .nav-dep2 .nav-dep2-link {padding: 10px 20px;text-align: left;}
    .header .nav-area .nav-dep2 .nav-dep2-list + .nav-dep2-list {margin: 5px 0 0;}
    
    .header .nav-direct-link-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: -12px; transform: translate(100%, -50%); z-index: 340; width: max-content;padding: 6px 12px;border-radius: 28px; background-color: #E1E3E6; font-size: 13px; color: var(--text-gray-color); transition: background-color 400ms; font-weight: 500; font-variation-settings: 'wght' 500;}
    .header .nav-direct-link-btn:hover {background-color: #D4D8DD; }
    .header .nav-direct-link-btn.icon i { display: inline-block;width: 16px; height: 16px; margin-left: 4px; background-image: url("../images/common/icon-arrow-diagonal-gray.svg"); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
}
@media screen and (max-width:768px){
    .header {height: 60px;}
    .header .gnb { padding: 0 20px;}
    .gnb .nav-wrap {top: 60px;}
    .gnb .nav-wrap {width: 100%;left: -100%;}
    .header.on .gnb .nav-wrap {left: 0;}
    .nav-side-wrap .icon-btn.header-site-btn { width: 24px; height: 24px; }
    .nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link {padding: 15px 30px;font-size: 14px;}
    .header .nav-area .nav-dep2 .nav-dep2-link {padding: 10px; font-size: 13px;}
    .nav-area .nav-dep1 .nav-dep1-list .nav-dep1-link > span {max-width: 68%;}
    .gnb .header-logo {width: 104px;}
    .nav-side-wrap.left {gap: 12px;}
}
@media screen and (max-width:440px){
    .header .basic-btn.reg { min-width: 92px;padding: 10px;font-size: 11px;}
    .nav-side {gap: 4px;}
    .nav-side-wrap {gap: 8px;}
    .header .nav-direct-link-btn {padding: 6px; font-size: 12px; text-indent: -9999px;}
    .header .nav-direct-link-btn.icon i {margin: 0;height: 15px;}
}
@media screen and (max-width: 375px){
    .nav-side-wrap {gap: 10px;}
    .header .basic-btn.reg { min-width: auto;padding: 8px;}
    .header .basic-btn.reg span {padding-right: 12px;text-indent: -9999px;}
}

/*========== Grid ==========*/
/* Masonry Grid 컨테이너 */
.main-cont-area { position: relative; } 
.grid-sizer { width: calc(20% - 25px); } 
.grid-item { overflow: hidden; position: relative; width: calc(20% - 25px); margin-bottom: 25px; border-radius: 15px; background-color:#fff; box-shadow: inset 0.5px 1px 0px rgba(255, 255, 255, 0.16), 0px 2px 5px rgba(0, 0, 0, 0.08); cursor: pointer; } 
.main-cont-area .grid-item { display: inline-block; vertical-align: top; margin-right: 25px; } 
.main-cont-area .grid-item:nth-of-type(5n) {margin-right: 0;}
.main-cont-area[data-masonry] .grid-item { display: block; margin-right: 0; } 
.grid-item.new-item { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease forwards; } 
.grid-content .btn-wrap {margin-top: 40px;}
.grid-box-content {width: 100%;}
.grid-box-content .btn-wrap {margin-top: 50px;}
.grid-item .profile {margin: 10px 0 20px;}
@keyframes fadeInUp { 
    to { opacity: 1; transform: translateY(0); } 
}
.grid-item .grid-cont-inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 28px 30px 18px; } 
.grid-item .grid-cont-inner .item-content { display: flex; flex-direction: column;  } 

.item-category { margin-bottom: 10px; font-size: 12px; font-weight:300; font-variation-settings:'wght' 300; } 
.item-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; font-size: 18px; line-height: 1.2; font-weight:600; font-variation-settings:'wght' 600; } 
.item-description { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; font-weight:400; font-variation-settings:'wght' 400; color: var(--text-gray-color); line-height: 1.333; } 
.item-icon-box { display: flex; justify-content:space-between; align-items: center; margin-top: auto;} 

@media screen and (max-width: 768px) {
    .grid-item .grid-cont-inner { padding: 24px; } 
    .item-title {font-size: 16px;}
    .item-description {font-size: 14px;}
}

/* Grid - 이미지 */
.grid-item { position: relative; } 
.grid-item .grid-bg { overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; width: 102%; height: 100%; } 
.grid-item.img-item:not(.skeleton)::before { opacity: 0; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(transparent 0%, rgba(0,0,0,0.64)); transition: opacity 400ms ease-in-out; z-index: 5; } 
.grid-item.img-item:not(.skeleton):hover::before { opacity: 1; }
.grid-item.img-item.skeleton .grid-bg img { opacity: 1; }
.grid-box-area.template-1-area .grid-item.skeleton .grid-bg img { opacity: 1; }
.grid-box-area.template-2-area .grid-item.template-mid.skeleton .grid-bg img { opacity: 1; }
.grid-box-area.template-3-area .grid-item.img-item.skeleton .grid-bg img { opacity: 1; } 
.grid-item .grid-bg img { width: 100%; max-width: none; transition: transform 400ms ease-in-out; transform: scale(1); } 
.masonry-container .grid-item .grid-bg img {width: 100%;}
.grid-box-area .grid-item .grid-bg img {width: 100%; background-color: transparent;}
.grid-item:hover img { transform: scale(1.03);} 
.grid-item.img-item .grid-cont-inner { opacity: 0; justify-content: end; z-index: 10; position: absolute; bottom: 0; left: 0; width: 100%; max-height: 60%; min-height: 170px; transform: translateY(10px); transition: transform 400ms, opacity 400ms; } 
.grid-item.img-item.short .grid-cont-inner {max-height: 170px;}
.grid-item.img-item.mid .grid-cont-inner{max-height: 170px;}
.grid-item.img-item.long .grid-cont-inner{max-height: 170px;}
.grid-item.img-item.longest .grid-cont-inner{max-height: 170px;}
.grid-item.img-item:hover .badge-wrap.fixed {opacity: 0; visibility: hidden;}
.grid-item.img-item:hover .grid-cont-inner { opacity: 1; transform: translateY(0); } 
.grid-item.img-item .item-category { color: #fff; } 
.grid-item.img-item .item-title { color: #fff; } 
.grid-item.img-item .profile { color: #fff; } 
.grid-item.img-item .item-icon-lsit li { color: #fff; } 
.grid-item.img-item .item-icon-lsit li a { color: #fff; } 
.grid-item.img-item.short { aspect-ratio: 300 / 267; min-height: 267px;} 
.grid-item.img-item.mid { aspect-ratio: 300 / 347; min-height: 347px;} 
.grid-item.img-item.long { aspect-ratio: 300 / 370;min-height: 370px; } 
.grid-item.img-item.longest { aspect-ratio: 300 / 400; min-height: 400px;} 
.grid-item.img-item .item-title { margin: 0; } 
.grid-item.img-item.short .item-title { line-clamp: 1; -webkit-line-clamp: 1; } 
.grid-item.img-item.mid .item-title { line-clamp: 2; -webkit-line-clamp: 2; } 
.grid-item.img-item.long .item-title { line-clamp: 3; -webkit-line-clamp: 3; } 
.grid-item.img-item .grid-cont-inner .badge-wrap { margin: 0 0 10px; } 
.grid-item.img-item .grid-cont-inner .badge-wrap:has(.badge-status) {justify-content: flex-start;}

/* Grid - 텍스트 */
.grid-item.cont-item { display: flex; flex-direction: column; justify-content: space-between; } 
.grid-item.cont-item .grid-cont-inner .badge-wrap { justify-content: flex-end; margin-bottom: auto; } 
.grid-item.cont-item .grid-cont-inner .item-content { margin: 0; } 
.grid-item.cont-item .item-title strong {overflow: hidden;text-overflow: ellipsis;line-clamp: 2; -webkit-line-clamp: 2;-webkit-box-orient: vertical;background-image: linear-gradient(transparent calc(100% - 1px), #333 1px);background-repeat: no-repeat;background-size: 0% 100%;transition: background-size 500ms ease-in-out;color: inherit; font-size: inherit;font-weight:600; font-variation-settings:'wght' 600;word-break: keep-all;}
.grid-item.cont-item:hover .item-title strong {background-size: 100% 100%; }

.grid-item.cont-item.short { aspect-ratio: 300 / 267; min-height: 267px; } 
.grid-item.cont-item.mid { aspect-ratio: 300 / 347; min-height: 347px;} 
.grid-item.cont-item.long { aspect-ratio: 300 / 370; min-height: 370px;} 
.grid-item.cont-item.longest { aspect-ratio: 300 / 400; min-height: 400px;} 
.grid-item.cont-item.short .item-title { line-clamp: 2; -webkit-line-clamp: 2; } 
.grid-item.cont-item.short:not(:has(.item-description)) .item-title { line-clamp: 2; -webkit-line-clamp: 2; } 
.grid-item.cont-item.mid .item-title { line-clamp: 2; -webkit-line-clamp: 2; } 
.grid-item.cont-item.long .item-title { line-clamp: 3; -webkit-line-clamp: 3; } 
.grid-item.cont-item.short .item-title strong{ line-clamp: 2; -webkit-line-clamp: 2; } 
.grid-item.cont-item.mid .item-title strong{ line-clamp: 2; -webkit-line-clamp: 2; } 
.grid-item.cont-item.long .item-title strong{ line-clamp: 3; -webkit-line-clamp: 3; } 
.grid-item.cont-item.short .item-description { line-clamp: 2; -webkit-line-clamp: 2; } 
.grid-item.cont-item.mid .item-description { line-clamp: 4; -webkit-line-clamp: 4; } 
.grid-item.cont-item.long .item-description { line-clamp: 6; -webkit-line-clamp: 6; } 
.grid-item.cont-item.dark .item-title strong {background-image: linear-gradient(transparent calc(100% - 1px), #fff 1px);}

.loading-indicator { display: none; text-align: center; padding: 40px; color: #888; } 
.loading-indicator.show { display: block; } 
.loading-indicator::after { content: ''; display: inline-block; width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin-left: 10px; } 
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}
@media (max-width: 1480px){
    .grid-sizer, .main-cont-area .grid-item { width: calc(25% - 20px); } 
    .main-cont-area .grid-item {margin-right: 20px; margin-bottom: 20px;}
}
@media (max-width: 1240px){
    .grid-sizer, .main-cont-area .grid-item { width: calc(33.33% - 20px); } 
}
@media (max-width: 980px){
    .grid-sizer, .main-cont-area .grid-item { width: calc(50% - 20px); } 
}
@media (max-width: 640px){
    .grid-item.cont-item .item-icon-box {flex-direction: column;align-items: flex-start;gap: 4px;}
    .grid-item.cont-item .item-icon-list {align-self: flex-end;}
}
@media (max-width: 620px){
    .grid-sizer, .main-cont-area .grid-item { width: calc(100% - 20px); } 
}

/* 일반 list 타입 - 반응형 그리드 */
.grid-box-area {display: flex;flex-wrap: wrap;gap: 25px 25px; padding: 10px 0;}
.inner.main-cont-inner.grid-box-area {display: block;}
.grid-box-area .grid-item { width: calc(20% - 20px); margin: 0;flex: 0 0 calc(20% - 20px);} 

@media (max-width: 1480px){
    .grid-box-area {gap: 20px 20px;}
    .grid-box-area .grid-item { width: calc(25% - 15px);flex: 0 0 calc(25% - 15px);} 
}
@media (max-width: 1240px){
    .grid-box-area {gap: 20px 20px;}
    .grid-box-area .grid-item { width: calc(33.333% - 14px);flex: 0 0 calc(33.333% - 14px);margin-bottom: 0;} 
}
@media (max-width: 980px){
    .grid-box-area {gap: 20px 20px;}
    .grid-box-area .grid-item { width: calc(50% - 10px);flex: 0 0 calc(50% - 10px);} 
}
@media (max-width: 620px){
    .grid-box-area {gap: 20px 0;}
    .grid-box-area .grid-item { width: 100%;flex: 0 0 100%;} 
}

/* 템플릿 유형1 */
.grid-box-area + .grid-box-area {margin-top: 25px;}
.grid-box-area.template-1-area { display: flex; gap: 25px; align-items: stretch; max-height: 745px; height: 745px;}
.grid-item.template-big { position: relative; flex: 1; aspect-ratio: 746 / 745; max-width: 746px; }
.grid-item.template-big.img-item .grid-cont-inner {max-height: 260px;}
.grid-item.template-big .grid-cont-inner .item-title {line-clamp: 2;-webkit-line-clamp: 2;}
.grid-box-area.template-1-area .template-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; flex: 1; height: 100%; }
.grid-box-area.template-1-area .template-inner .grid-item { width: 100%; aspect-ratio: 1; margin: 0; }
.grid-box-area.template-1-area .template-inner .grid-item.img-item .grid-cont-inner {max-height: 170px;}
.grid-box-area.template-1-area .grid-item.template-big { position: relative; height: 100%; margin: 0; }
.grid-box-area.template-1-area .grid-item.template-big.cont-item .item-title {line-clamp: 5;-webkit-line-clamp: 5;}
.grid-box-area.template-1-area .grid-item.template-big.cont-item .item-description {line-clamp: 10;-webkit-line-clamp: 10;}
.grid-box-area.template-1-area .grid-item { position: relative; align-self: stretch; margin: 0; }
.grid-box-area.template-1-area .grid-item.img-item:not(.skeleton)::before { opacity: 0; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(transparent 0%, rgba(0,0,0,0.64)); transition: opacity 400ms ease-in-out; z-index: 5; } 
.grid-box-area.template-1-area .grid-item.img-item:not(.skeleton):hover::before {opacity: 1;}

@media (max-width: 1480px) {
    .grid-box-area + .grid-box-area {margin-top: 20px;}
    .grid-box-area.template-1-area .template-1-area { gap: 20px; }
    .grid-box-area.template-1-area .template-inner {gap: 20px;}
}
@media (max-width: 1280px) {
    .grid-box-area.template-1-area { max-height: 580px; height: 580px;}
    .grid-box-area.template-1-area .template-inner .grid-item {min-height: auto;}
    .grid-box-area.template-1-area .grid-item.template-big {width: 44%; flex: initial;}
    .grid-box-area.template-1-area .grid-item.cont-item.mid .item-description { line-clamp: 2; -webkit-line-clamp: 2; } 
    .grid-box-area.template-1-area .grid-item.cont-item.mid .item-title { line-clamp: 1; -webkit-line-clamp: 1; } 
    .grid-box-area.template-1-area .grid-item.cont-item.mid .item-title strong { line-clamp: 1; -webkit-line-clamp: 1; } 
    .grid-box-area.template-1-area .template-inner .grid-item.img-item .item-description { line-clamp: 2; -webkit-line-clamp: 2; } 
    .grid-box-area.template-1-area .template-inner .grid-item.img-item .item-title { line-clamp: 1; -webkit-line-clamp: 1; } 
    .grid-box-area.template-1-area .template-inner .grid-item.img-item .item-title strong { line-clamp: 1; -webkit-line-clamp: 1; } 
}
@media (max-width: 1024px) { 
    .grid-box-area.template-1-area { flex-direction: column; max-height: none; height: auto;} 
    .grid-item.img-item.template-big {max-width: 100%;}
    .grid-box-area.template-1-area .grid-item.img-item.template-big {min-height: 347px;max-height: 610px; height: auto; aspect-ratio: 1 / 1.2;}
    .grid-box-area.template-1-area .template-inner {display: flex; flex-wrap: wrap;}
    .grid-box-area.template-1-area .template-inner .grid-item {flex: auto; aspect-ratio: 1; width: calc(50% - 10px); min-height: 347px;}
    .grid-box-area.template-1-area .grid-item.template-big {width: 100%; max-width: none;}
}
@media (max-width: 768px) { 
    .grid-box-area.template-1-area .template-inner .template-inner { grid-template-columns: 1fr; } 
}
@media (max-width: 620px) { 
    .grid-box-area.template-1-area .template-inner { grid-template-columns: auto;} 
    .grid-box-area.template-1-area .template-inner .grid-item {width: 100%;}
}

/* 템플릿 유형2 */
.grid-box-area.template-2-area { display: flex; align-items: stretch; gap: 25px; max-height: 745px; height: 745px;}
.grid-box-area.template-2-area .grid-item.template-mid { position: relative; flex: 1; align-self: stretch;width: calc(100%/3); max-height: 100%; margin: 0; }
.grid-box-area.template-2-area .grid-item.img-item.template-mid:not(.skeleton)::before { opacity: 0; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(transparent 0%, rgba(0,0,0,0.64)); transition: opacity 400ms ease-in-out; z-index: 5; } 
.grid-box-area.template-2-area .grid-item.img-item.template-mid:not(.skeleton):hover::before {opacity: 1;}
.grid-box-area.template-2-area .grid-item.img-item.template-mid .grid-cont-inner {max-height: 260px;}
.grid-box-area.template-2-area .grid-item.img-item .grid-cont-inner {max-height: 260px;}
.grid-box-area.template-2-area .grid-item.template-mid.img-item .grid-cont-inner .item-title {line-clamp: 2;-webkit-line-clamp: 2;}
.grid-box-area.template-2-area .grid-item.template-mid.cont-item .grid-cont-inner .item-title {line-clamp: 5;-webkit-line-clamp: 5;}
.grid-box-area.template-2-area .template-inner { display: flex; flex-direction: column; gap: 20px; flex: 1; width: calc(100%/3); height: 100%; }
.grid-box-area.template-2-area .template-inner .grid-item.img-item .grid-cont-inner {max-height: 170px;}
.grid-box-area.template-2-area .template-inner .grid-item { flex: 1; width: 100%; margin: 0; }
.grid-box-area.template-2-area .grid-item.template-mid.cont-item .item-description {line-clamp: 10;-webkit-line-clamp: 10;}
.grid-box-area.template-2-area .grid-item.img-item.mid .item-description {display: none;color: #fff;}
@media (max-width: 1480px) {
    .grid-box-area.template-2-area { gap: 20px; }
}
@media (max-width: 1280px) {
    .grid-box-area.template-2-area { max-height: 580px; height: 580px;}
    .grid-box-area.template-2-area .grid-item.template-mid {min-height: auto;}
    .grid-box-area.template-2-area .grid-item.cont-item.mid {min-height: auto;}
    .grid-box-area.template-2-area .template-inner .grid-item {min-height: auto;}
    .grid-box-area.template-2-area .grid-item.template-mid.cont-item .grid-cont-inner .item-title {line-clamp: 3;-webkit-line-clamp: 3;}
    .grid-box-area.template-2-area .grid-item.template-mid.cont-item .item-description {line-clamp: 8;-webkit-line-clamp: 8;}
    .grid-box-area.template-2-area .grid-item.cont-item.mid .item-description {line-clamp: 2;-webkit-line-clamp: 2;}
    .grid-box-area.template-2-area .grid-item.cont-item.mid .item-title {line-clamp: 1;-webkit-line-clamp: 1;}
    .grid-box-area.template-2-area .grid-item.img-item.mid .item-title {line-clamp: 1;-webkit-line-clamp: 1;}
}
@media (max-width: 1024px) { 
    .grid-box-area.template-2-area { flex-wrap: wrap; max-height: none; height: auto;} 
    .grid-box-area.template-2-area .template-inner { flex: auto; width: 100%;} 
    .grid-box-area.template-2-area .template-inner { flex-direction: row;flex: auto; width: 100%;} 
    .grid-box-area.template-2-area .grid-item.template-mid {flex: initial; width: calc(50% - 10px); aspect-ratio: 1 / 1; min-height: 347px;}
    .grid-box-area.template-2-area .grid-item.cont-item.mid {aspect-ratio: 1 / 1; min-height: 347px;}
    .grid-box-area.template-2-area .template-inner .grid-item {aspect-ratio: 1 / 1; min-height: 347px;}
    .grid-box-area.template-2-area .grid-item.template-mid.cont-item .grid-cont-inner .item-title {line-clamp: 2;-webkit-line-clamp: 2;}
    .grid-box-area.template-2-area .grid-item.template-mid.cont-item .item-description {line-clamp: 4;-webkit-line-clamp: 4;}
    .grid-box-area.template-2-area .grid-item.cont-item.mid .item-description {line-clamp: 4;-webkit-line-clamp: 4;}
    .grid-box-area.template-2-area .grid-item.cont-item.mid .item-title {line-clamp: 2;-webkit-line-clamp: 2;}
}
@media (max-width: 620px) { 
    .grid-box-area.template-2-area .grid-item.template-mid {flex: auto;width: 100%;}
    .grid-box-area.template-2-area .template-inner {flex-direction: column;}
}

/* 템플릿 유형3 */
.grid-box-area.template-3-area {display: flex;gap: 25px;}
.grid-box-area.template-3-area .grid-item {position: relative;flex: 1;aspect-ratio: 1;width: auto;margin: 0;}
.grid-box-area.template-3-area .grid-item.img-item:not(.skeleton)::before { opacity: 0; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(transparent 0%, rgba(0,0,0,0.64)); transition: opacity 400ms ease-in-out; z-index: 5; } 
.grid-box-area.template-3-area .grid-item.img-item:not(.skeleton):hover::before {opacity: 1;}
.grid-box-area.template-3-area .grid-item.cont-item {margin: 0;}
.grid-box-area.template-3-area .grid-item.img-item .grid-cont-inner {max-height: 260px;}
.grid-box-area.template-3-area .grid-item .item-title {overflow: hidden;text-overflow: ellipsis;line-clamp: 2;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.grid-box-area.template-3-area .grid-item .item-title strong {overflow: hidden;text-overflow: ellipsis;line-clamp: 2;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.grid-box-area.template-3-area .grid-item .item-title { line-clamp: 3; -webkit-line-clamp: 3; } 
.grid-box-area.template-3-area .grid-item .item-title strong{ line-clamp: 3; -webkit-line-clamp: 3; } 
.grid-box-area.template-3-area .grid-item.cont-item .item-title strong{ line-clamp: 3; -webkit-line-clamp: 3; } 
.grid-box-area.template-3-area .grid-item.cont-item .item-description { line-clamp: 6; -webkit-line-clamp: 6; } 

@media (max-width: 1480px) {
    .grid-box-area.template-3-area {gap: 20px;}
}
@media (max-width: 1280px) {
    .grid-box-area.template-3-area .grid-item .item-title { line-clamp: 2; -webkit-line-clamp: 2; } 
    .grid-box-area.template-3-area .grid-item .item-title strong{ line-clamp: 2; -webkit-line-clamp: 2; } 
    .grid-box-area.template-3-area .grid-item.cont-item .item-title strong{ line-clamp: 2; -webkit-line-clamp: 2; } 
    .grid-box-area.template-3-area .grid-item.cont-item .item-description { line-clamp: 4; -webkit-line-clamp: 4; } 
}
@media (max-width: 1024px) { 
}
@media (max-width: 920px) { 
    .grid-box-area.template-3-area { flex-wrap: wrap;} 
    .grid-box-area.template-3-area .grid-item {width: 100%; aspect-ratio: 1600 / 782;} 
}
@media (max-width: 820px) { 
    .grid-box-area.template-3-area .grid-item {flex: auto; width: 100%; aspect-ratio: 1 / 1; min-height: 347px;max-height: 610px;}
    .grid-box-area.template-3-area .grid-item.cont-item { margin-bottom: 20px; }
}

/* 템플릿 유형4 */
.grid-box-area.template-4-area {display: block;}
.grid-box-area.template-4-area .template-banner {position: relative; margin: 0;}
.grid-box-area.template-4-area .template-banner::after { opacity: 1; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(145deg, rgba(0,0,0,0), rgba(0,0,0,0.64)); transition: opacity 400ms ease-in-out; } 
.grid-box-area.template-4-area .grid-item {display: block; width: 100%; height: 720px;}
.grid-box-area.template-4-area .grid-cont-inner {opacity: 1;transform: translateY(0);padding: 60px;justify-content: end;z-index: 10;position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;transition: transform 400ms, opacity 400ms;}
.grid-box-area.template-4-area .item-content {flex: initial;justify-content: flex-end; max-width: 436px;}
.grid-box-area.template-4-area .grid-item.img-item .grid-cont-inner .badge-wrap {margin: 0 0 10px;}
.grid-box-area.template-4-area .grid-item.cont-item .grid-cont-inner .badge-wrap {justify-content: flex-start;margin-bottom: 10px;}
.grid-box-area.template-4-area .grid-item .item-title strong {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;line-clamp: 2; -webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 24px;font-weight:600; font-variation-settings:'wght' 600; color: #fff;}
.grid-box-area.template-4-area .grid-item .item-category {font-size: 16px;font-weight:300; font-variation-settings:'wght' 300;color: #fff;}
.grid-box-area.template-4-area .grid-item .item-description {margin: 25px 0 0; font-size: 18px;font-weight:300; font-variation-settings:'wght' 300;color: #fff;}
.grid-box-area.template-4-area .grid-item .item-icon-box {margin-top: 20px;}
.grid-box-area.template-4-area .grid-item figure.grid-bg {display: flex; justify-content: center; align-items: center; width: 100%;}
.grid-box-area.template-4-area .grid-item .profile {color: #fff;}
.grid-box-area.template-4-area .grid-item .item-icon-list li {color: #fff;}
.grid-box-area.template-4-area .grid-item .item-icon-list li a {color: #fff;}

@media (max-width: 1480px) {

}
@media (max-width: 1280px) {
    .grid-box-area.template-4-area .grid-item {height: 580px;}
}
@media (max-width: 1024px) { 
    .grid-box-area.template-4-area .grid-item {height: auto;min-height: 386px; aspect-ratio: 1600 / 782;}
    .grid-box-area.template-4-area .item-content {max-width: 580px;}
    .grid-box-area.template-4-area .grid-cont-inner {padding: 20px;}
    .grid-box-area.template-4-area .grid-item .item-title {line-clamp: 1; -webkit-line-clamp: 1;}
    .grid-box-area.template-4-area .grid-item .item-title strong {line-clamp: 1; -webkit-line-clamp: 1;}
}
@media (max-width: 920px) { 

}
@media (max-width: 820px) { 

}

/* Masonry Grid CSS - 기존 layout.css에 추가 */
.masonry-grid { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -25px; width: auto; }
.masonry-grid-column { gap: 0 !important; padding-left: 25px; background-clip: padding-box; }
.masonry-grid .grid-item { margin-bottom: 25px; display: block; width: 100% !important; }
.masonry-grid .grid-item.new-item { opacity: 0; transform: translateY(20px); animation: masonryFadeInUp 0.6s ease forwards; }
@keyframes masonryFadeInUp { to { opacity: 1; transform: translateY(0); } }

/* 반응형 */
@media (max-width: 1480px) { .masonry-grid { margin-left: -20px; } .masonry-grid-column { padding-left: 20px; } .masonry-grid .grid-item { margin-bottom: 20px; } }
@media (max-width: 1240px) { .masonry-grid { margin-left: -20px; } .masonry-grid-column { padding-left: 20px; } .masonry-grid .grid-item { margin-bottom: 20px; } }
@media (max-width: 980px) { .masonry-grid { margin-left: -20px; } .masonry-grid-column { padding-left: 20px; } .masonry-grid .grid-item { margin-bottom: 20px; } }
@media (max-width: 520px) { .masonry-grid { margin-left: -20px; } .masonry-grid-column { padding-left: 20px; } .masonry-grid .grid-item { margin-bottom: 20px; } }

/* 스켈레톤 & 에러 상태 */
.masonry-grid .grid-item.skeleton { pointer-events: none; }
.masonry-grid .grid-item.skeleton .grid-cont-inner { opacity: 0.6; }
.masonry-grid .grid-item.skeleton .grid-bg img { background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%); background-size: 400% 100%; animation: skeletonLoading 1.5s ease-in-out infinite; }
@keyframes skeletonLoading { 0% { background-position: 100% 50%; } 100% { background-position: -100% 50%; } }
.error-message { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; text-align: center; }
.error-message p { margin-bottom: 20px; font-size: 16px; color: #666; font-weight: 400; font-variation-settings: 'wght' 400; }
.image-error {display: flex; justify-content: center; align-items: center; height: 450px; font-size: 16px; color: #666; font-weight: 400; font-variation-settings: 'wght' 400; }
.btn-wrap .basic-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-wrap .basic-btn .loading-button { display: inline-flex; align-items: center; gap: 8px; }

/* 접근성 & 다크모드 */
.masonry-grid .grid-item:focus { outline: 2px dashed var(--main-color, #2C96FF); outline-offset: 2px; border-radius: 15px; }
.masonry-grid .grid-item:focus-visible { outline: 2px dashed var(--main-color, #2C96FF); outline-offset: 2px; border-radius: 15px; }
@media (prefers-color-scheme: dark) { .masonry-grid .grid-item.skeleton .grid-bg img { background: linear-gradient(90deg, #333 25%, transparent 37%, #333 63%); } .error-message p { color: #ccc; } }

/*========== Custom Design - Form Layout ==========*/
.form-area { padding: 40px 30px 60px; border-radius: 10px; background-color: #fff;}
.form-list-wrap {display: flex; flex-direction: column; gap: 50px;}
.form-list-wrap .form-list {display: flex;gap: 10px;}
.form-list-wrap .form-list .form-tits {display: flex; width: clamp(140px, 9.38vw,180px);}
.form-list-wrap .form-list.one .form-tits {display: flex; align-items: center; height: 44px;}
.form-list-wrap .form-list .form-tits .form-tit {font-size: 1rem;font-weight: 500; font-variation-settings: 'wght' 500;}
.form-list-wrap .form-list .form-conts {flex: 1; width: 100%;}
.form-list-wrap .form-list .form-conts.col2-15 {display: flex; flex-wrap: wrap; gap: 16px 15px;}
.form-list-wrap .form-list .form-conts .col2-15 {display: flex; flex-wrap: wrap; gap: 16px 15px;}
.form-list-wrap .form-list .form-conts.col20 {display: flex; flex-direction: column; gap: 20px;}
.form-list-wrap .form-list .form-conts.tag-reg-area {display: flex;flex-direction: column;}
.form-list-wrap .form-list .form-conts .form-cont-group {display: flex; align-items: center;}
.form-list-wrap .form-list .form-conts .form-conts-wrap {width: 100%; padding: 30px 30px 0; background-color: #F5F6F7;}
.form-list-wrap .form-list .form-conts .form-conts-wrap:not(:has(.upload-files)){padding-bottom: 30px;}
.form-list-wrap .form-list .form-conts .form-conts-wrap .textarea-box {height: 152px; border: none;}
.form-list-wrap .form-list .form-conts .form-conts-wrap .upload-files-wrap .upload-files:first-child { margin-top: 20px;}
.form-list-wrap .form-list .form-conts .form-conts-wrap .upload-files-wrap .upload-files:last-child { padding-bottom: 20px;}
.form-list-wrap .form-list .form-conts.manual-file-upload  .form-conts-wrap:not(:has(.upload-files)) {padding: 0;}
.upload-files-wrap {display: flex; flex-direction: column; gap: 4px;}
.upload-files-wrap .upload-files {display: flex; align-items: center; width: fit-content; width: max-content;}
.upload-files-wrap .upload-files a {display: flex; align-items: center;padding-left: 28px; background-image:url('../images/common/icon-download-gray.svg'); background-size: 18px auto; background-position: left center; background-repeat: no-repeat; transition: all 400ms; }
.upload-files-wrap .upload-files .upload-readonly {display: flex;align-items: center;cursor: pointer;}
.upload-files-wrap .upload-files:hover a {background-image:url('../images/common/icon-download-dark.svg');}
.upload-files-wrap .upload-files .icon {display: inline-block;width: 20px; height: 20px;margin-right: 8px;background-image:url('../images/common/icon-basic-file.svg'); background-size: contain; background-position: left center; background-repeat: no-repeat;}
.upload-files-wrap .upload-files .file-name { font-size: 1rem; color: var(--text-gray-color); font-weight: 400; font-variation-settings: 'wght' 400; transition: color 400ms; -webkit-transition: color 400ms; -moz-transition: color 400ms; -ms-transition: color 400ms; -o-transition: color 400ms; }
.upload-files-wrap .upload-files:hover .file-name {color: var(--main-txt-color); }
.upload-files-wrap .upload-files .size {margin-left: 10px; font-size: 0.875rem; color: #797979; font-weight: 400; font-variation-settings: 'wght' 400;transition: color 400ms;}
.upload-files-wrap .upload-files:hover .size {color: var(--main-txt-color); }
.upload-files-wrap .upload-files.doc .icon {background-image:url('../images/common/icon-doc.svg');}
.upload-files-wrap .upload-files.excel .icon {background-image:url('../images/common/icon-excel.svg');}
.upload-files-wrap .upload-files.ppt .icon {background-image:url('../images/common/icon-ppt.svg');}
.upload-files-wrap .upload-files.pdf .icon {background-image:url('../images/common/icon-pdf.svg');}
.upload-files-wrap .upload-files.img .icon {background-image:url('../images/common/icon-image-file.svg');}
.upload-files-wrap .upload-files.zip .icon {background-image:url('../images/common/icon-zip.svg');}
.upload-files-wrap .upload-files.video .icon {background-image:url('../images/common/icon-video.svg');}
.upload-files-wrap .upload-files .remove-btn {margin-left: 2px; width: 20px;height: 20px;background-image: url('../images/common/icon-close.svg');background-repeat: no-repeat;background-size: contain;background-position: center;cursor: pointer;transition: all 400ms ease;}
.upload-files-wrap .upload-files:hover .remove-btn {background-image: url('../images/common/icon-close-gray.svg');}
.form-list-wrap .form-list .form-conts .btn-wrap.left {margin-top: 20px;}
.tag-wrap {display: flex; align-items: center; gap: 12px;}
.tag-tit {font-size: 1rem;font-weight: 400; font-variation-settings: 'wght' 400;color: var(--text-gray-color);word-break: keep-all;}
.essential-mark {display: inline-block;position: relative;}
.essential-mark::before {content: '*';position: absolute;top: 50%;left: -12px;transform: translate(0, -45%);color: #f00;}
.form-area .form-btn-wrap {margin-top: 50px; padding-top: 50px;border-top: 1px solid #D4D8DD;}

.form-list-wrap .form-list.essential {align-items: flex-start;}

/* Input Button */
.input-btn-wrap {display: flex; gap: 6px;width: 100%; max-width: 382px;}
.input-box-wrap {width: 100%;}
.input-btn-wrap .input-box-wrap .input-box {display: flex; align-items: center; gap: 20px;}
.input-btn-wrap .input-box-wrap .input-box input {height: 32px;padding: 4px 14px;}
.input-btn-wrap .input-box-wrap .input-box.white input { padding: 13px 14px; height: 44px; border-radius: 0; background-color: #fff; border-color: #ccc; }
.input-btn-wrap .input-box-wrap .input-box .input-label {margin: 0;}
.input-btn-wrap.white .input-box-wrap .input-box input { height: 44px; padding: 13px 10px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; }
.input-btn-wrap.white .basic-btn.line-only {width: 117px;}
.input-btn-wrap .btn-wrap {gap: 4px;}

/* input-form */
.input-form-wrap {display: flex; flex-direction: column; gap: 30px;}
.input-form-list.col {display: flex; justify-content: space-between;gap: 10px;}
.form-tit {font-size: 1rem;font-weight: 500; font-variation-settings: 'wght' 500;}
.input-form-inner.flex {display: flex;align-items: center; gap: 10px;}
.input-form-cont {display: flex;flex-direction: column; gap: 10px;}
.input-form-img {display: flex;align-items: center; gap: 10px;}
.input-form-img .img-box {display: flex; align-items: center; justify-content: center; overflow: hidden;width: 60px; aspect-ratio: 1/1; border-radius: 5px; background-color: #eee; }
.input-form-img-txt {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;line-clamp: 2; -webkit-line-clamp: 2; width: calc(100% - 70px); font-size: 0.938rem;line-height: 1.533;font-weight: 400;font-variation-settings: 'wght' 400; color: var(--text-dark-color);}

@media (max-width: 1180px){
    .form-list-wrap .form-list { flex-direction: column; } 
    .form-list-wrap .form-list.one .form-tits {height: auto;}
    .form-list-wrap .form-list .form-conts .form-cont-group {flex-wrap: wrap;gap: 10px 0;}
}
@media (max-width: 1024px){
    .form-area {padding: 30px 30px 50px;}
    .form-area .form-btn-wrap {margin-top: 30px; padding-top: 30px;}
}
@media (max-width: 768px){
    .form-area {padding: 20px 20px 50px;}
    .reg-section .form-area {padding-left: 30px;}
    .form-list-wrap {gap: 30px;}
    .form-list-wrap .form-list .form-conts .form-conts-wrap {padding: 20px 20px 0;}
    .tag-wrap {flex-wrap: wrap;}
}
@media (max-width: 360px){
    .upload-files-wrap .upload-files .file-name {overflow: hidden;text-overflow: ellipsis;width: 50%;}
    .form-area .form-btn-wrap {flex-wrap: wrap;}
    .form-area .form-btn-wrap .basic-btn{width: 100%;}
}

/*========== Comment ==========*/ 
.comment-title {margin-bottom: 16px;font-size: 1.250rem;font-weight: 600; font-variation-settings: 'wght' 600;}
.comment-title .num {margin-left: 6px; font-size: 1rem; color: var(--main-color);}
.comment-wrap {border-bottom: 1px solid #D4D8DD;}
.comment-wrap .comment-box { display: flex; flex-direction: column; width: 100%; height: 100%; } 
.comment-wrap .comment-list { display: flex; flex-direction: column; } 
.comment-wrap .comment-list .comment-tree-inner { display: flex; flex-direction: column; gap:12px; } 
.comment-wrap .comment-list .comment-tree-inner.add-comment {display: none; position: relative; margin-top: 16px; padding-left: 18px;}
.comment-wrap .comment-list .comment-tree-inner.add-comment.on {display: block;}
.comment-wrap .comment-list .comment-tree-inner.add-comment::before {content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 22px; background-image: url("../images/common/icon-comment.svg"); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.comment-wrap .comment-list .comment-tree { padding: 20px;border-top: 1px solid #D4D8DD; background-color: #fff;} 
.comment-wrap .comment-list .comment-tree.tree-child { padding-left: 24px; background-color: #FCFDFF;} 
.comment-wrap .comment-list .comment-tree.tree-child .comment-tree-inner:not(.add-comment) {position: relative; padding-left: 30px;}
.comment-wrap .comment-list .comment-tree.tree-child .comment-tree-inner:not(.add-comment)::before {content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 22px; background-image: url("../images/common/icon-comment.svg"); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.comment-wrap .comment-list .comment-tree.tree-child .comment-tree-inner.add-comment {margin-left: 30px;}

.comment-wrap .comment-list .profile { display: flex; gap: 8px;} 
.comment-wrap .comment-list .profile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
.comment-wrap .comment-list .profile .profile-id {font-size: 1rem;font-weight: 600; font-variation-settings: 'wght' 600;}
.comment-wrap .comment-list .content-area { flex-grow: 1; } 
.comment-wrap .comment-list .content-area .comment-content-wrap { position: relative; padding-right: 1.667em; } 
.comment-wrap .comment-list .content-area .user { margin-bottom: 0.6667em; line-height: 1.167; font-weight: 500; font-variation-settings: 'wght' 500; color: #111; } 
.comment-wrap .comment-list .content-area .comment-txt { margin-bottom: 14px; } 
.comment-wrap .comment-list .content-area .comment-txt > p { font-size: 0.875rem; font-weight: 300; font-variation-settings: 'wght' 300; color: var(--text-dark-color); word-break:keep-all; } 
.comment-wrap .comment-list .content-area .comment-txt .reply-user {margin-right: 5px; font-weight: 600; font-variation-settings: 'wght' 600;color: #7B91AD;}
.comment-wrap .comment-list .bottom-info-wrap {display: flex;align-items: center;}
.comment-wrap .comment-list .bottom-info-wrap .bottom-info {font-weight: 600; font-variation-settings: 'wght' 600;font-size: 0.750rem; color: var(--text-light-gray-color); line-height: 1;}
.comment-wrap .comment-list .content-area .reply-btn { position: relative; padding-left: 8px; margin-left: 8px; font-weight: 500; font-variation-settings: 'wght' 500; color: #888; transition: color 300ms; } 
.comment-wrap .comment-list .content-area .reply-btn::before {content: ''; position: absolute; top: 2px; left: 0; width: 1px; height: 8px; background-color: #D4D8DD;}
.comment-wrap .comment-list.comment-tree2 { margin-top: 1.5em; } 
.comment-wrap .comment-list.comment-tree2 .profile-area { width: 2em; } 
.comment-wrap .no-comment-case { flex-grow: 1; display: flex; justify-content: center; align-items: center; width: 100%; } 
.comment-wrap .no-comment-case p { font-size: 0.875rem; line-height: 1.42; color: #888; font-weight: 500; font-variation-settings: 'wght' 500; word-break:keep-all; } 
.comment-wrap:has(.comment-list) .no-comment-case { display: none; } 

/*========== Keyword ==========*/ 
.keyword-area {display: flex;}
.keyword-wrap {width: 100%; margin-right: 20px;}
.keyword-wrap + .keyword-wrap {padding-left: 30px; border-left: 1px solid #CCCCCC;}
.keyword-list {margin: 20px 0 0;}
.keyword-list .keyword {display: flex; align-items: center;}
.keyword-list .keyword + .keyword {margin: 12px 0 0;}
.keyword-list .keyword a {font-size: 0.813rem;font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-dark-color); transition: all 200ms;}
.keyword-list .keyword a:hover {font-weight: 600; font-variation-settings: 'wght' 600;}
.keyword-list .keyword.top a {font-weight: 600; font-variation-settings: 'wght' 600;}
.keyword-list .keyword .num {margin-right: 10px; font-size: 0.813rem;font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-dark-color);}
.keyword-list .keyword.top .num {font-weight: 600; font-variation-settings: 'wght' 600;color: var(--main-color);}

/*========== Keyword ==========*/ 
.search-list-area + .btn-wrap {margin-top: 60px;}
.search-list-area .search-list-wrap {display: flex; flex-direction: column;gap: 25px;}
.search-list-area .search-list-wrap .search-list {padding: 30px 50px;border-radius: 14px; background-color: #fff;}
.search-list-area #lnb {margin: 0 0 25px;}
.search-result-tit strong {overflow: hidden;background-image: linear-gradient(transparent calc(100% - 1px), #333 1px);background-repeat: no-repeat;background-size: 0% 100%; transition: background-size 500ms ease-in-out;font-size: 1.250rem;font-weight: 600; font-variation-settings: 'wght' 600;color: var(--main-txt-color);}
.search-result-desc a:hover strong {background-size: 100% 100%;}

.search-result-txt {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; line-clamp: 3;-webkit-line-clamp: 3; margin: 20px 0 0; font-size: 1rem;font-weight: 400; font-variation-settings: 'wght' 400;color: var(--text-gray-color);line-height: 1.5;}
.search-result-btm .date {margin: 35px 0 0; font-size: 1rem;font-weight: 500; font-variation-settings: 'wght' 500;color: #7B91AD;line-height: 1;}

/*========== Footer ==========*/
#footer {position: relative;background-color: var(--main-bg-color);}
.footer-inner * { color: #fff;}
.footer-inner *:focus-visible {outline: 2px dashed var(--main-color);}
.footer-inner {display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; padding: 50px 0;}
.footer-logo { width:130px;}
.copyright {margin: 20px 0 0; font-size: 12px; font-weight:300;font-variation-settings:'wght' 300; color: #E8E8E8;}

@media screen and (max-width:1680px){
    .footer-inner {padding: 50px clamp(20px, 2.38vw, 40px);}
}
@media screen and (max-width:768px){
    .footer-inner {align-items: flex-start;flex-direction: column-reverse;gap: 15px;}
    .footer-right {margin-left: auto;}
    .footer-logo{ width:114px;}
    .copyright {margin: 20px 0 0;}
}

/*========== Float Button ==========*/
#float { opacity: 0; position: fixed; right: 40px; bottom: 40px; width: 50px; height: 50px; z-index: 100; transition: bottom 200ms, opacity 200ms; } 
#float.show { opacity: 1; } 
#float.on { opacity: 1; position: absolute; bottom: 40px;} 
.top-btn { overflow: hidden; opacity: 0; position: fixed; right: 40px; bottom: 40px; width: 50px; height: 50px; z-index: 100; transition: bottom 200ms, opacity 200ms; display: block; border-radius: 50%; background-color: #fff; border: 1px solid #CBCBCB; background-image: url("../images/common/icon-top-btn.svg"); background-repeat: no-repeat; background-position: center center; background-size: 30px auto; transition: all 300ms; font-size: inherit;} 
.top-btn.on { opacity: 1; position: absolute; bottom: 40px;} 
.top-btn a { width: 100%; height: 100%; border-radius: 50%;}
.top-btn a:focus-visible {outline: 3px dashed var(--main-color);}
.add-btn { width: 100%; height: 50px; background-color: #fff; border-radius: 50%; background-image: url('../images/common/icon-add-btn.svg'); background-repeat: no-repeat; background-position: center center; background-size: 30px auto; transition: all 400ms ease; }
.add-btn a { overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius:30px; border: 1px solid var(--main-point-color); box-sizing: border-box;transition: all 400ms ease;} 
.add-btn a span { display: none; transform: translateX(20%); min-width: 107px; font-size: 0.875rem; font-weight:700; font-variation-settings:'wght' 700; color: var(--main-point-color); transition: all 400ms ease; transition-delay: 0.15s; } 
.add-btn:hover { background-image: none; }
.add-btn:hover a { width: 160px; border: 1px solid var(--main-point-color); background-color: #fff; margin-left: -110px; }
.add-btn:hover a span { opacity: 1; display: block; transform: translateX(0); transition-delay: 0; }

@media (hover: hover) {
    #top-btn a:hover { background-color: var(--sub-bg-color); } 
}
@media screen and (max-width: 1024px){
    #float { right: 20px !important; bottom: 20px !important; width: 40px; height: 40px; }  
    #float.on { bottom: 20px;} 
    .top-btn { width: 40px; height: 40px; background-size: 24px auto; } 
}

/*========== Empty Contents ==========*/
.empty-search-message {display: flex;flex-direction: column;align-items: center;gap: 8px;margin: 80px 0;padding-top: 3.89em;background-image: url('../images/common/icon-info.svg');background-repeat: no-repeat;background-size: 32px auto;background-position: top center;font-size: 1.125rem !important;color: var(--text-light-gray-color);line-height: 1.1;}
.empty-message {display: flex;flex-direction: column;align-items: center;gap: 8px;margin: 80px 0;padding-top: 3.89em;background-image: url('../images/common/icon-info.svg');background-repeat: no-repeat;background-size: 32px auto;background-position: top center;font-size: 1.125rem !important;color: var(--text-light-gray-color);line-height: 1.1;}
.empty-results {display: flex;flex-direction: column;align-items: center;gap: 8px;margin: 80px 0;padding-top: 3.89em;background-image: url('../images/common/icon-info.svg');background-repeat: no-repeat;background-size: 32px auto;background-position: top center;font-size: 1.125rem !important;color: var(--text-light-gray-color);line-height: 1.1;}
.empty-state .empty-content {display: flex;flex-direction: column;align-items: center;gap: 8px;margin: 80px 0;padding-top: 3.89em;background-image: url('../images/common/icon-info.svg');background-repeat: no-repeat;background-size: 32px auto;background-position: top center;font-size: 1.125rem;color: var(--text-light-gray-color);line-height: 1.1;}
.con-td.empty-message p {font-size: 1.125rem;color: var(--text-light-gray-color);line-height: 1.1;}
.empty-description + div:has(.basic-btn) {margin-top: 40px;}
.masonry-grid-column {display: flex;flex-direction: column;gap: 16px;}
.grid-content:not(:has(.masonry-grid div)) .btn-wrap {display: none;}