@font-face {
	font-family: 'Pretendard';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('/public/font/PretendardVariable.woff2') format('woff2-variations');
}

*{
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', sans-serif;
    letter-spacing: -0.5px;
    line-height: 1.2;
    font-display: swap;
}

button{padding:0; color: #1a1a1a;}
html, body{  margin:0; padding:0; background: #1a1a1a;}
html {
    overflow-x: hidden;
    overscroll-behavior: none;
}
/* 기본 스타일 */

body {
    overflow-x: hidden;
    margin:0;
    padding:0;
    width: 100%;  
    min-height: 100dvh;
    font-size: 14px;
    line-height: 1;
    flex: 1;
    background:#1a1a1a;
    color: #333;
    scroll-behavior: smooth;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
}
body::-webkit-scrollbar{
    display: none;
}
body.no-scroll{
    overflow:hidden;
    position: fixed;
    touch-action: none;
}
body.pc .media-type-pc,
body.mobile .media-type-mobile,
body.tablet .media-type-tablet{
    display: flex;
}
body.pc .media-type-mobile,
body.pc .media-type-tablet,
body.mobile .media-type-pc,
body.mobile .media-type-tablet,
body.tablet .media-type-pc,
body.tablet .media-type-mobile{
    display: none;
}
form{padding:0; margin:0;}
/* 기본 링크 스타일 */
a {
    color: inherit;
    text-decoration: none;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
select{
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
p{
    margin: 0;
}
/* 버튼 리셋 */
button {
    border: none;
    background: none;
    cursor: pointer;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
/* input, textarea 기본 글꼴 적용 */
input, textarea {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: transparent;
    color: #333;
}
input:focus, textarea:focus {
    outline: none;
    box-shadow: none;
    border: none;
}
ul, ol{list-style: none; padding:0; margin: 0;}


main{
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 0;
    background: #fff;
    width: 100%;
    margin-top: 70px;
    
}
main > section.wrap{
    min-height: 50svh;
    display: flex;
    flex-direction: column;
    padding-bottom: 100px;
}
.text{
    white-space: normal;
    word-break: keep-all;
    line-height: 1.2;
}
.text.quill p{
    font-size: 20px;
}
/* 테두리 스타일 (FILL 0) */
.icon-thin         { font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24; }
.icon-light        { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; }
.icon-regular      { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-medium       { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.icon-bold         { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24; }

/* 채워진 스타일 (FILL 1) */
.icon-thin-filled   { font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 24; }
.icon-light-filled  { font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24; }
.icon-regular-filled{ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-medium-filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.icon-bold-filled   { font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24; }

/* 
.text.subject-title-large{
    font-size: clamp(34px, 3.2dvw, 40px);
    font-weight: 700;
    line-height: 1.2;
}


.text.subject-title-middle{
    font-size: clamp(30px, 3.2dvw, 34px);
    font-weight: 600;
    line-height: 1.2;
}
.text.subject-title-small{
    font-size: clamp(18px, 3.2dvw, 28px);
    font-weight: 600;
    line-height: 1.2;
}

.text.size-extra-large{
    font-size: clamp(30px, 3.2dvw, 60px);
    line-height: 1.2;
}


 .text.size-large{
    font-size: clamp(24px, 6dvw, 40px);
    line-height: 1.2;
}

.text.size-middle{
    font-size: clamp(18px, 3.2dvw, 24px);
    line-height: 1.2;
}

.text.size-small{
    font-size: clamp(14px, 1.8dvw, 18px);
    line-height: 1.2;
}
.text.size-small-22px{
    font-size: clamp(14px, 1.8dvw, 22px);
    line-height: 1.2;
}
.text.size-extra-small{
    font-size: clamp(13px, 1.8dvw, 16px);
    line-height: 1.2;
} */



/* S : 랜딩페이지 폰트 사이즈 */


/* E : 랜딩페이지 폰트 사이즈 */


/* S : 공통 폰트 사이즈 */



/* 태블릿 768px ~ 1199px */










.text.size-14px { font-size: 14px; font-weight: 400; }
.text.size-16px { font-size: 16px; font-weight: 400; }
.text.size-18px { font-size: 18px; font-weight: 400; }
.text.size-20px { font-size: 20px; font-weight: 400; }
.text.size-22px { font-size: 22px; font-weight: 400; }
.text.size-24px { font-size: 24px; font-weight: 400; }

.text.size-26px { font-size: 26px; font-weight: 500; }
.text.size-28px { font-size: 28px; font-weight: 500; }
.text.size-30px { font-size: 30px; font-weight: 500; }
.text.size-32px { font-size: 32px; font-weight: 500; }
.text.size-34px { font-size: 34px; font-weight: 600; }
.text.size-36px { font-size: 36px; font-weight: 600; }
.text.size-38px { font-size: 38px; font-weight: 600; }
.text.size-40px { font-size: 40px; font-weight: 600; }
.text.size-42px { font-size: 42px; font-weight: 600; }
.text.size-44px { font-size: 44px; font-weight: 600; }
.text.size-46px { font-size: 46px; font-weight: 600; }
.text.size-48px { font-size: 48px; font-weight: 700; }
.text.size-50px { font-size: 50px; font-weight: 700; }
.text.size-52px { font-size: 52px; font-weight: 700; }
.text.size-54px { font-size: 54px; font-weight: 700; }
.text.size-56px { font-size: 56px; font-weight: 700; }
.text.size-58px { font-size: 58px; font-weight: 700; }
.text.size-60px { font-size: 60px; font-weight: 700; }


/* 기본: PC 기준 (≥1024px) */
.text.size-hero-title       { font-size: 48px; font-weight: 700; }
.text.size-page-title       { font-size: 32px; font-weight: 600; }
.text.size-section-title    { font-size: 24px; font-weight: 600; }
.text.size-sub-title        { font-size: 20px; font-weight: 500; }

.text.size-post-title       { font-size: 20px; font-weight: 600; }
.text.size-post-title-lg    { font-size: 28px; font-weight: 600; }
.text.size-post-summary     { font-size: 16px; font-weight: 400; }

.text.size-body             { font-size: 16px; font-weight: 400; }
.text.size-body-strong      { font-size: 18px; font-weight: 500; }
.text.size-body-small       { font-size: 14px; font-weight: 400; }

.text.size-meta             { font-size: 14px; font-weight: 400; }
.text.size-badge            { font-size: 13px; font-weight: 500; }
.text.size-price            { font-size: 24px; font-weight: 700; }

.text.size-button           { font-size: 16px; font-weight: 500; }
.text.size-button-cta       { font-size: 18px; font-weight: 600; }
.text.size-placeholder      { font-size: 14px; font-weight: 400; }
.text.size-form-label       { font-size: 14px; font-weight: 500; }
.text.size-form-message     { font-size: 13px; font-weight: 400; }

.text.size-gnb              { font-size: 16px; font-weight: 500; }
.text.size-tab              { font-size: 14px; font-weight: 500; }
.text.size-table-header     { font-size: 14px; font-weight: 600; }
.text.size-table-cell       { font-size: 14px; font-weight: 400; }
.text.size-tooltip          { font-size: 13px; font-weight: 400; }
.text.size-toast            { font-size: 14px; font-weight: 500; }

.text.size-modal-title      { font-size: 24px; font-weight: 600; }
.text.size-modal-content    { font-size: 16px; font-weight: 400; }
.text.size-error-title      { font-size: 36px; font-weight: 700; }
.text.size-error-desc       { font-size: 18px; font-weight: 400; }
.text.size-faq-question     { font-size: 18px; font-weight: 600; }
.text.size-faq-answer       { font-size: 14px; font-weight: 400; }

/* 태블릿 대응: 768px ~ 1023px */
@media (max-width: 1199px) {
  .text.size-hero-title       { font-size: 40px; }
  .text.size-page-title       { font-size: 28px; }
  .text.size-section-title    { font-size: 22px; }
  .text.size-sub-title        { font-size: 18px; }

  .text.size-post-title       { font-size: 18px; }
  .text.size-post-title-lg    { font-size: 24px; }
  .text.size-body             { font-size: 15px; }
  .text.size-body-strong      { font-size: 17px; }
  .text.size-body-small       { font-size: 14px; }

  .text.size-button           { font-size: 15px; }
  .text.size-button-cta       { font-size: 17px; }
  .text.size-price            { font-size: 22px; }
  .text.size-error-title      { font-size: 30px; }
}

/* 모바일 대응: ≤767px */
@media (max-width: 768px) {
  .text.size-hero-title       { font-size: 32px; }
  .text.size-page-title       { font-size: 24px; }
  .text.size-section-title    { font-size: 20px; }
  .text.size-sub-title        { font-size: 16px; }

  .text.size-post-title       { font-size: 16px; }
  .text.size-post-title-lg    { font-size: 20px; }
  .text.size-post-summary     { font-size: 14px; }

  .text.size-body             { font-size: 14px; }
  .text.size-body-strong      { font-size: 15px; }
  .text.size-body-small       { font-size: 13px; }

  .text.size-button           { font-size: 14px; }
  .text.size-button-cta       { font-size: 16px; }
  .text.size-price            { font-size: 20px; }
  .text.size-error-title      { font-size: 26px; }
  .text.size-error-desc       { font-size: 16px; }
}






.text.size-test{
    border: 1px solid red;
    margin-bottom: 30px;
}

/* E : 공통 폰트 사이즈 */



/* .text.size-16px{
    font-size: clamp(14px, 1.8dvw, 16px);
    line-height: 1.4;
}
.text.size-18px{
    font-size: clamp(14px, 1.8dvw, 18px);
    line-height: 1.4;
}
.text.size-22px{
    font-size: clamp(14px, 1.8dvw, 22px);
    line-height: 1.4;
}
.text.size-24px{
    font-size: clamp(16px, 1.8dvw, 24px);
    line-height: 1.4;
}
.text.size-30px{
    font-size: clamp(21px, 3dvw, 30px);
    line-height: 1.4;
}
.text.size-35px{
    font-size: clamp(24px, 3dvw, 35px);
    line-height: 1.4;
}
.text.size-36px{
    font-size: clamp(24px, 3dvw, 36px);
    line-height: 1.4;
}
.text.size-60px{
    font-size: clamp(35px, 4dvw, 60px);
    line-height: 1.4;
} */

.margin-rl-8px{margin-right: 8px; margin-left: 8px; }
.margin-rl-6px{margin-right: 6px; margin-left: 6px; }
.margin-rl-4px{margin-right: 4px; margin-left: 4px; }
.font-weight-700{font-weight: 700!important;}
.font-weight-600{font-weight: 600!important;}
.font-weight-500{font-weight: 500!important;}
.text.color-red{color: red!important;}

/* 헤더 스타일 */
header {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 20;    
    transition: top 0.3s ease, height 0.3s ease, background 0.3s ease;
    overflow: hidden;
}

header.active{
    transition: top 0.3s ease, height 0.3s ease, background 0.3s ease;
    background: #000000d9;
    /* backdrop-filter: blur(10px); */
    /* box-shadow: 0 0 10px 1px #00000070; */
}
header.mobile-nav-open{
    height: 100dvh;
}
header > .wrapper{
    width: 100dvw;
    background: #1a1a1a;
}

.color-red{color: red!important;}
.color-main-black{color: #333;}
.color-main-white{color: #fafafa;}
.color-main-highlight{color: #00d4c5;}
.color-main-highlight-gradient-text{
    background: linear-gradient(90deg, #0096ff, #00d4c5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 푸터 스타일 */
footer {
    margin-top: auto;
    min-height: 520px;
    background: #1a1a1a;
    position: relative;
    z-index: 0;
    flex: 1;
    display: flex;
    color: #fafafa;
}

footer .wrapper{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    max-width: 1200px;
    flex: 1;
    margin: auto;
 
}


footer .wrapper .footer-logo{
    width: 200px;
    height: 45px;
    cursor: pointer;
    margin-bottom: 50px;
}
footer .wrapper .footer-logo .img-footer-logo{
    width: 100%;
    height: 100%;
    filter: brightness(0.8);
}
footer .wrapper .container{
    width: 100%;
    padding: 0;
}


footer .wrapper .container.company-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 10px;
}
footer .wrapper .container.company-info .box{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

footer .wrapper .container.company-info .box .row{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%;
    min-height: 18px;
}



footer .wrapper .container.company-info .box .row .text{
    display: flex;
    align-items: start;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}
footer .wrapper .container.company-info .box .row .t1{
    min-width: 140px;
    font-weight: 600;
}
footer .wrapper .container.company-info .box .row .t2{
    width: 100%;
    font-weight: 400;
}
footer .wrapper .container.bottom{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
footer .wrapper .container.bottom .social-info{
    min-width: fit-content;
    height: 62px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
footer .wrapper .container.bottom .social-info .social-link{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 62px;
}
footer .wrapper .container.bottom .social-info .social-link:hover{
    transition: all 0.3s ease;
}
footer .wrapper .container.bottom .social-info .social-link.l1:hover{
    border-color: #17D5FF;
    background:#17D5FF;
}
footer .wrapper .container.bottom .social-info .social-link.l2:hover{
    border-color: #FF0000;
    background:#FF0000;
}
footer .wrapper .container.bottom .social-info .social-link.l3:hover{
    border-color: #03C75A;
    background:#03C75A;
}



footer .wrapper .container.bottom .copyright{
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: row;
    font-weight: 600;
}
footer .wrapper .container.bottom .copyright .text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
footer .wrapper .container.bottom .copyright .text.t1{
    margin-right: 0.4em;
}
/* 에러 페이지 스타일 */
.error-template {
    padding: 40px 15px;
}

.invisible, .hide{
    display: none;
}


body .btn-move-top{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00000090;
    position: fixed;
    bottom: 20px;
    right: 20px;

    font-size: 40px;
    color: #fff;
    z-index: 10;
}

.page-wrapper::-webkit-scrollbar{
    display: none;
}

.container{
    width: 100%;
    max-width: 1200px;
    display:flex;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    padding: 0 25px;

}

.container .box{
    display: flex;
    flex-direction: column;
    
}




/* S : 공통 - 페이지 상단 제목 */

#ctn_subject .text.t1{
    margin-bottom: 4px;
}
#ctn_subject{
    margin-bottom: 140px;
    min-height: 300px;
    max-height: 300px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: relative;
}
#ctn_subject .gradient{
    background: #1a1a1a;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6;
}
#ctn_subject > .img-background{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}
#ctn_subject .text{
    position: relative;
    text-shadow: 2px 2.2px 3px rgba(0, 0, 0, 0.84);
    z-index: 1;
    text-align: center;
}
#ctn_subject > .box{
    margin-left: auto;
    margin-right: auto;
    margin-top: 110px;
    align-items: center;
    justify-content: center;
}
#ctn_subject > .box .text{
    color: #fafafa;
}

/* E : 공통 - 페이지 상단 제목 */

/* S : 공통 - 페이지 상단 제목(검색 유형) */

#ctn_subject_search .text.t1{
    margin-bottom: 4px;
}
#ctn_subject_search{
    margin-bottom: 45px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: relative;
    
}
#ctn_subject_search .gradient{
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6;
}
#ctn_subject_search > .img-background{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}
#ctn_subject_search .text{
    position: relative;
    z-index: 1;
    text-align: center;
}
#ctn_subject_search > .box{
    margin-left: auto;
    margin-right: auto;
    margin-top: 110px;
    align-items: center;
    justify-content: center;
}
#ctn_subject_search > .box .text{
    color: #333;
}

#ctn_subject_search > .search-box {
    margin-top: 40px;
    max-width: 380px;
    width: 100%;
    height: 50px;
    border: 1px solid #aaa;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#ctn_subject_search > .search-box .input-search{
    width: 100%;
    height: 100%;
    font-weight: 500;
    padding: 0 12px;
}
#ctn_subject_search > .search-box .img-search{
    height: 30px;
    width: 30px;
    margin: 0 12px;
    object-fit: contain;
}

#ctn_subject_search > .search-box .form-search{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
/* E : 공통 - 페이지 상단 제목(검색 유형) */





.nav-bar{
    width: 100%;
    max-width: 1200px;
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 0;
    margin:auto;
    background: #1a1a1a;
}




.nav-bar .logo {
    cursor: pointer;
    max-width: 140px;
    min-width: 140px;
    height: 40px;
    transition: all 0.3s ease;
}
.nav-bar .img-logo{
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all 0.3s ease;
}
.nav-bar .img-logo.hide{
    opacity: 0;
    transition: all 0.3s ease;
}
.nav-bar .btn-hamburger{
    display: none;
    font-size: 40px;
    min-width: 35px;
    max-width: 35px;
    color: #fafafa;
    margin-left: auto;

    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;

}








/* S : PC 네비 메뉴 */
.gnb {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 80px;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 80px;

}

.gnb > li.menu {
    position: relative;

    cursor: pointer;
    min-width: 120px;
    height: 40px;
    line-height: 35px;

}

.gnb > li.menu > .menu-name {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fafafa;
    font-weight: 600;
    width: 100%;
    height: 100%;
    line-height: 35px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}
.gnb > li.menu > .menu-name.active{
    font-weight: 700;
}

.gnb > li.menu .sub-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    padding: 27px 0 0 0;
    margin: 0;
    width: 140px;
    z-index: 100;
    gap: 5px;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;

}
.gnb > li.menu .sub-menu.active{
    max-height: 500px;

    
}

.gnb > li.menu .sub-menu > li.menu{
    background: #1a1a1a;   
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.gnb > li.menu .sub-menu > li.menu .menu-name {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #fafafa;
    background: transparent;
    font-size: 16px;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
  
.gnb > li.menu .sub-menu > li.menu:hover {
    background: #ffffff10;
    cursor: pointer;
}





.gnb .menu.m5{height: 35px; min-width: fit-content;}
.gnb .menu.m5 .menu-name{
    font-size: 14px;
    padding: 0 20px; 
    background: #0025e8;
    border-radius: 30px;
    color: #fff;
    text-shadow: unset;
    font-weight: 600;
    transition: all 0.3s ease;
}
.gnb .menu.m5 .menu-name:hover{
    /* background: #003b8a; */
    mask-mode: alpha;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;  
    background: linear-gradient(
        60deg,
        #0025e8,
        #0025e8,
        #0025e8,
        #0025e8, 
        #001a99,
        #000000,
        #000000,
        #000000,
        #000000,
        #001a99,
        #0025e8,
        #0025e8,
        #0025e8,
        #0025e8
        
  
        

    );
    
    background-size: 800% 800%; /* 애니메이션 영역 확장 */
    animation: subtleWave 2s ease-in-out infinite;
}
@keyframes subtleWave {
    0% {
        background-position: 0% 0%; /* 시작 위치 */
    }
    100% { /* 애니메이션이 진행되는 주요 구간 */
        background-position: 100% 100%;
    }
}
header .pc-sub-menu-container{
    width: 100%;
    height: 0;
    display: flex;
    overflow: hidden;
    transition: height 0.3s ease;
    
}
header .pc-sub-menu-container.active{
    height: 270px;
    transition: height 0.3s ease;
}

header .pc-sub-menu-container .wrapper{
    width: 100%;
    height: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    padding: 0;
    margin:auto;

 
}
header .pc-sub-menu-container .wrapper .sub-menu-box{
    padding: 0 252px 0 257px;
    width: 100%;
    
}
header .pc-sub-menu-container .wrapper .pc-sub-menu{
    padding: 10px 0;

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: 80px;
   
}
header .pc-sub-menu-container.active .wrapper .pc-sub-menu{
    border-top: unset;
}
header .pc-sub-menu-container .wrapper .pc-sub-menu > li.menu{
    position: relative;

    
    min-width: 120px;
    height: 100%;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
header .pc-sub-menu-container .wrapper .pc-sub-menu > li.menu .sub-menu{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
header .pc-sub-menu-container .wrapper .pc-sub-menu > li.menu .sub-menu > .menu {
    width: 100%;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
}
header .pc-sub-menu-container .wrapper .pc-sub-menu > li.menu .sub-menu > .menu:hover{
    background: #ffffff20;
    border-radius: 10px;
}
header .pc-sub-menu-container .wrapper .pc-sub-menu > li.menu .sub-menu > .menu:hover a{
    font-weight: 600;
}
header .pc-sub-menu-container .wrapper .pc-sub-menu > li.menu .menu-name{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fafafa;
    font-weight: 400;
    width: 100%;
    height: 100%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}

/* E : PC 네비 메뉴 */

/* S : 모바일 네비 메뉴 */
.drawer-menu{
    width: 90%;
    max-width: 330px;
    height: 100dvh;
    position: fixed;
    right:0;
    top:0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    color: #333;
    background: #1a1a1a;
    z-index: 20;
    display: flex;
    flex-direction: column;
}
.drawer-menu.active {
    transform: translateX(0);
}

.mobile-drawer-menu-bg{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: #00000099;
    backdrop-filter: blur(5px);
    z-index: 9;
}
.mobile-drawer-menu-bg.active{
    display: flex;
}

.drawer-menu .wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.drawer-menu .wrapper .head{
    height: 70px;
    min-height: 70px;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #1a1a1a;
    z-index: 11;
    border-bottom: 1px solid #333;
}
.drawer-menu .wrapper .head .btn-drawer-close{
    font-size: 45px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    color: #fafafa;

}
.drawer-menu .wrapper .head .img-logo{
    height: 30px;
    
}
.drawer-menu .wrapper .content{
    width: 100%;
    height: 100%;
    overflow: hidden;    
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mobile-gnb{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: 100%;
    padding: 10px 0;
    gap: 20px;
    flex: 1;
}
.mobile-gnb::-webkit-scrollbar{
    display: none;
}

.mobile-gnb > .menu{
    padding: 0 20px;
    width: 100%; 
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
}
.mobile-gnb > .menu .menu-name-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}
.mobile-gnb > .menu .menu-name-wrapper .menu-name{
    font-size: 20px;
    font-weight: 700;
}
.mobile-gnb > .menu .menu-name-wrapper .icon{
    font-weight: 600;
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    line-height: 30px;
    text-align: center;
    transition: transform 0.3s ease;
    font-weight: 600;
}
.mobile-gnb > .menu .menu-name-wrapper .icon.collapse{
    font-size: 30px;
}
.mobile-gnb > .menu .menu-name-wrapper .icon.link{
    font-size: 22px;
    transform: rotate(90deg);
}

.mobile-gnb > .menu .sub-menu-wrapper{
    
    width: 100%;
    height: 0;
    max-height:0;
    transition: max-height 0.3s ease, height 0.3s ease;
    overflow: hidden;
    position: relative;
}
.mobile-gnb > .menu .sub-menu{
    background: #f7f7f7;
    border-radius: 20px;
    display: grid;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
    color: #333;
    grid-template-columns: 1fr 1fr;
    padding: 30px;
    top: 10px;
    left: 0;
    position: absolute;
    width: 100%;
}
.mobile-gnb > .menu.active .sub-menu-wrapper{
    transition: max-height 0.3s ease, height 0.3s ease;

}
.mobile-gnb > .menu.active .menu-name-wrapper .icon.collapse{
    transform: rotate(-180deg);
    transition: transform 0.3s ease;
}
/* .mobile-gnb > .menu.m1.active .sub-menu-wrapper{
    height: 185px;
    max-height: 185px;
}
.mobile-gnb > .menu.m2.active .sub-menu-wrapper{
    height: 140px;
    max-height: 140px;
}
.mobile-gnb > .menu.m3.active .sub-menu-wrapper{
    height: 95px;
    max-height: 95px;
}
.mobile-gnb > .menu.m4.active .sub-menu-wrapper{
    height: 95px;
    max-height: 95px;
} */
.mobile-gnb > .menu .sub-menu > .menu{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    cursor: pointer;
}
.mobile-gnb > .menu .sub-menu > .menu .menu-name{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    font-weight: 400;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}

.mobile-gnb > .menu.m5 > .menu-name{
    font-size: 14px;
    padding: 0 20px;
    background: #0025e8;
    border-radius: 30px;
    color: #fff;
    text-shadow: unset;
    font-weight: 600;
    line-height: 35px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px auto auto;
}
/* E : 모바일 네비 메뉴 */




.list-shadow{
    position: absolute;
    z-index: 3;
}

.list-shadow.top{
    width: 100%;
    height: 40px;
    top:0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}
.list-shadow.bottom{
    width: 100%;
    height: 40px;
    bottom:0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}
.list-shadow.left{
    width: 40px;
    height: 100%;
    left:0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}
.list-shadow.right{
    width: 40px;
    height: 100%;
    right:0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}

.menu-name.main{font-size: 18px;}
.menu-name.sub{font-size: 16px;}


.text.size-extra-small {
    font-size: 13px;
}
.text.size-small {
    font-size: 14px;
}
.text.size-base {
    font-size: 16px;
}
.text.size-medium {
    font-size: 20px;
}
.text.size-regular {
    font-size: 22px;
}
.text.size-semi {
    font-size: 24px;
}
.text.size-normal {
    font-size: 26px;
}
.text.size-large {
    font-size: 28px;
}
.text.size-xlarge {
    font-size: 30px;
}


.text.size-page-subject-title {
    font-size: clamp(30px, calc(12.354px + 4.90196vw), 60px);
}
.text.size-page-subject-sub-title {
    font-size: clamp(16px, calc(2.18px + 2.32vw), 30px);
}

.text-group{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
}



/** S : 해상도 분기 - 1 :: 기기의 가로 기준 해상도 */

/* 모바일 + 태블릿 */
@media (max-width: 1199px){
  

}

/* 모바일 - 저해상도, 구형 스마트폰 */
@media (max-width: 359px){
    footer .wrapper .container.bottom .copyright{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    footer .wrapper .container.bottom .copyright .text.t1{
        margin-right: 0;
    }
}

/* 모바일 - 일반 (기본 베이스) */
@media (min-width: 360px) and (max-width: 767px){
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1199px){

    
    
}


/* PC - 일반 (기본 베이스) */
@media (min-width: 1200px) {


    

}

/* PC - 2k (qhd 기준 2560px * 1440px) */
@media (min-width: 2400px) {
}

/* PC - 4k (uhd 기준 3840px * 2160px)*/
@media (min-width: 3000px) {
}

/** E : 해상도 분기 - 1 :: 기기의 가로 기준 해상도 */


/** S : 해상도 분기 - 2 :: 기기의 가로/세로 해상도, 화면 방향 기준 */

/* 모바일 + 태블릿 */
@media (max-width: 1199px), (orientation: portrait), (min-width: 3841px), (min-height: 2161px) { 

    footer{
        min-height:fit-content;
    }
    footer .wrapper{
        padding: 50px 20px;
    }
    footer .text{
        line-height: 1.4;
    }
    footer .wrapper .footer-logo {
        width: 130px;
        height: 30px;
    }

    footer .wrapper .container.company-info{
        margin-bottom: 40px;
    }

    footer .wrapper .container.company-info .box{
        gap: 1em;   
    }
    footer .wrapper .container.company-info .box .row{
        flex-direction: column;
    }
    footer .wrapper .container.bottom{
        flex-direction: column;
        gap: 40px;
    }
    footer .wrapper .container.bottom .copyright{
        align-items: center;
        justify-content: center;
    }

 
    main > .wrap{
        padding-bottom: 50px;
    }


    .nav-bar{padding: 0 20px; max-width: 100%; height: 70px;}
    
    .nav-bar .btn-hamburger{
        display: flex;
    }
    .nav-bar .gnb{
        display: none;
    }
    
    .container{ 
        padding: 0; 
        padding-right: 25px; 
        padding-left: 25px;
        max-width: 100%;
        margin: 0;
        margin-right: auto;
        margin-left: auto;
        flex-direction: column;
        align-items: start;
        height: fit-content;
        flex: 0;
        
    }
    .container .box{
        margin: 0;
        margin-right: auto;
        margin-left: auto;
        flex-direction: column;
        align-items: start;
    }


    .nav-bar .logo{
        max-width: 130px;
        min-width: 130px; 
        height: 30px;
    }



 
    body .btn-move-top{
        right: 10px;
        bottom: 10px;
        
    }
    #ctn_subject > .box, #ctn_subject_search > .box{
        margin-left: auto;
        margin-right: auto;
    }
    #ctn_subject_search > .search-box .img-search{
        height: 25px;
        width: 25px;
        margin: 0 12px;
        object-fit: contain;
    }



}

/* 모바일 - 일반 (기본 베이스) */
@media (min-width: 1px) and (max-width: 767px) {
    #ctn_subject {
        margin-bottom: 30px;
        min-height: 200px;
        max-height: 200px;
    }
    #ctn_subject_search{
        min-height: 200px;
        max-height: 200px;
        margin-bottom: 30px;
    }
    #ctn_subject_search > .search-box {
        max-width: 320px;
        height: 40px;
        margin-top: 30px;
    }

    #ctn_subject > .box, #ctn_subject_search > .box{
        margin-top: 85px;
    }
    

}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1199px), (min-width: 768px) and (orientation: portrait), (min-width: 3841px), (min-height: 2161px) { 

    .text.size-common-subject-title{
        font-size: 60px;
        font-weight: 700;
    }



    #ctn_subject{
        margin-bottom: 80px;
        min-height: 300px;
        max-height: 300px;
    }
    #ctn_subject_search{
        margin-bottom: 35px;
    }
    
    #ctn_subject > .box, #ctn_subject_search > .box{
        margin-top: 128px;
    }

    #ctn_subject_search > .search-box {
        max-width: 320px;
        height: 40px;
        margin-top: 25px;
    }




    

    
}



/* PC - 일반 (기본 베이스) */
@media (min-width: 1200px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {

    .nav-bar .btn-hamburger{
        display: none;
    }

}

/* PC - 2k (qhd 기준 2560px * 1440px) */
@media (min-width: 2400px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {
}

/* PC - 4k (uhd 기준 3840px * 2160px)*/
@media (min-width: 3000px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {
}

/** E : 해상도 분기 - 2 :: 기기의 가로/세로 해상도, 화면 방향 기준 */

/* Quill 에디터 사이즈 클래스 */
.ql-size-small {
    font-size: 14px !important;
}

.ql-size-normal {
    font-size: 20px !important;
}

.ql-size-large {
    font-size: 26px !important;
}

.ql-size-huge {
    font-size: 32px !important;
}
.ql-align-center{
    text-align: center !important;
}