@charset "utf-8";

/*-------------------------------------------------
Title       : Sub
-------------------------------------------------*/

/* --- Root --- */
:root{
    --heading-md: 3.2rem;
    --color-form-border: var(--color-gray-30);

    --box-shadow-legend: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    --color-org: #1f78b4; /* 양성기관 */
    --color-kindy: #ff7f00; /* 유아숲체험원 */
    --color-center: #33a02c; /* 산림교육센터 */
    --color-forest: #485cb5; /* 숲체원 */
    --color-huyang: #4F8C8A; /* 자연휴양림 */
    --color-healing: #d1665e; /* 치유의숲 */
    --color-arb: #3f9be0; /* 수목원 */
    --color-prov: #6a3d9a; /* 전문업 */
    /* --color-wood: #7a563c; 목재문화체험장 */

    --color-cert: #2C6B2F; /* 산림청 인증 프로그램 */
    --color-neulbom: #dd2f4f; /* 늘봄 프로그램 */
    --color-school: #003e8a; /* 학교연계 프로그램 */
    --color-normal: #5D4037; /* 일반 프로그램 */

    --color-light-org: #E9F4FB; /* 양성기관 */
    --color-light-kindy: #FFF2E6; /* 유아숲체험원 */
    --color-light-center: #ECFAEB; /* 산림교육센터 */
    --color-light-forest: #EDEFF8; /* 숲체원 */
    --color-light-huyang: #EFF6F6; /* 자연휴양림 */
    --color-light-healing: #F9ECEB; /* 치유의숲 */
    --color-light-arb: #E9F3FB; /* 수목원 */
    --color-light-prov: #F2EDF8; /* 전문업 */

    --color-light-cert: #EDF8ED; /* 산림청 인증 프로그램 */
    --color-light-neulbom: #FBE9EC; /* 늘봄 프로그램 */
    --color-light-school: #E6F1FF; /* 학교연계 프로그램 */
    --color-light-normal: #F6F0EF; /* 일반 프로그램 */
    
    /* datepicker */
    --duet-color-primary: #005fcc;
    --duet-color-text: #222422;
    --duet-color-text-active: #fff;
    --duet-color-placeholder: #666;
    --duet-color-button: #f5f5f5;
    --duet-color-surface: #fff;
    --duet-color-overlay: rgba(0, 0, 0, 0.8);
    --duet-color-border: var(--color-gray-30);

    --duet-font: 'Pretendard GOV', sans-serif;
    --duet-font-normal: 400;
    --duet-font-bold: 700;

    --duet-radius: 1.2rem;
    --duet-z-index: 99999;
}

@media screen and (max-width: 1023px) {
    :root{
        --heading-md: 2.4rem;
    }
}

/* --- Layout --- */
/* #container {
    overflow: hidden;
} */

.indent {
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.div-line {
    border-top: 0.1rem solid var(--color-gray-50);
    margin: 3.2rem 0;
}

.div-line + .cont-tit-wrap {
    margin-top: -2.8rem;
}

.new-link {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--color-information-50);
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .indent {
        margin-left: 0;
    }
}


/* --- Button --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 4.8rem;
    padding: 0 1.6rem;
    border-radius: 0.6rem;
    font-size: 1.7rem;
    transition: var(--transition-base);
}

.btn.primary {
    background: var(--color-primary-50);
    color: #fff;
}

.btn.primary:hover, 
.btn.primary:focus,
.btn.primary:active {
    background: var(--color-primary-60);
}

.btn.tertiary {
    background: #fff;
    color: var(--color-gray-90);
    border: 0.1rem solid var(--color-gray-60);
}

.btn.tertiary:hover, 
.btn.tertiary:focus,
.btn.tertiary:active {
    background: var(--color-gray-10);
}

.btn.secondary {
    background: var(--color-gray-70);
    color: #fff;
}

.btn.secondary:hover, 
.btn.secondary:focus,
.btn.secondary:active {
    background: var(--color-gray-80);
}

.btn.line-white {
    background: transparent;
    color: #fff;
    border: 0.1rem solid #fff;
}

.btn:disabled {
    opacity: 0.7;
    cursor: default;
}

.btn.xsmall {
    gap: 0.2rem;
    height: 3.2rem;
    padding: 0 1rem;
    border-radius: 0.4rem;
    font-size: 1.5rem;
}

.btn.small {
    gap: 0.2rem;
    height: 4rem;
    padding: 0 1.2rem;
    font-size: 1.5rem;
}

.btn.large {
    height: 5.6rem;
    padding: 0 2rem;
    border-radius: 0.8rem;
    font-size: 1.9rem;
}

.btn.xlarge {
    height: 6.4rem;
    padding: 0 2.4rem;
    border-radius: 0.8rem;
    font-size: 1.9rem;
}

.btn.text {
    height: auto;
    padding: 0 0.2rem;
}

button i {
    display: block !important;
}

.btn-wrap {
    display: flex;
    gap: 0.8rem;
}

.btn-wrap.center {
    justify-content: center;
}

.btn-page-wrap {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
}

.btn-page-wrap.center {
    justify-content: center;
}

@media screen and (max-width: 424px) {
    .btn-page-wrap {
        flex-direction: column;
    }

    .btn-page-wrap .btn {
       width: 100%;
    }
}



/* --- Tag --- */
.tag-wrap {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.2rem;
    padding: 0.8rem 1rem;
    border-radius: 3.2rem;
    font-size: 1.5rem;
    line-height: 1;
    background: #fff;
    border: 0.1rem solid var(--color-border);
    min-width: 4rem;
}

.tag.large {
    height: 4rem;
    padding: 0.8rem 1.2rem;
    border-radius: 4rem;
    font-size: 1.7rem;
}

.tag.small {
    height: 2.4rem;
    padding: 0.8rem;
    border-radius: 2.4rem;
    font-size: 1.3rem;
}

/* --- Badge --- */
.badge-wrap {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    line-height: 2.4rem;
    font-size: 1.5rem;
    padding: 0 0.8rem;
    border-radius: 0.4rem;
    gap: 0.4rem;
    white-space: nowrap;
}

.badge.outline-primary {
    background: #fff;
    border: 0.1rem solid var(--color-primary-50);
    color: var(--color-primary-60);
}

.badge.outline-secondary {
    background: #fff;
    border: 0.1rem solid var(--color-secondary-50);
    color: var(--color-secondary-60);
}

.badge.outline-gray {
    background: #fff;
    border: 0.1rem solid var(--color-gray-60);
    color: var(--color-gray-70);
}

.badge.outline-point {
    background: #fff;
    border: 0.1rem solid var(--color-point-50);
    color: var(--color-point-60);
}

.badge.outline-danger {
    background: #fff;
    border: 0.1rem solid var(--color-danger-50);
    color: var(--color-danger-60);
}

.badge.outline-warning {
    background: #fff;
    border: 0.1rem solid var(--color-warning-50);
    color: var(--color-warning-60);
}

.badge.outline-success {
    background: #fff;
    border: 0.1rem solid var(--color-success-50);
    color: var(--color-success-60);
}

.badge.outline-information {
    background: #fff;
    border: 0.1rem solid var(--color-information-50);
    color: var(--color-information-60);
}

.badge.outline-disabled {
    background: #fff;
    border: 0.1rem solid var(--color-gray-50);
    color: var(--color-gray-60);
}

.badge.bg-primary {
    background: var(--color-primary-50);
    color: #fff;
}

.badge.bg-secondary {
    background: var(--color-secondary-50);
    color: #fff;
}

.badge.bg-gray {
    background: var(--color-gray-50);
    color: #fff;
}

.badge.bg-point {
    background: var(--color-point-50);
    color: #fff;
}

.badge.bg-danger {
    background: var(--color-danger-50);
    color: #fff;
}

.badge.bg-warning {
    background: var(--color-warning-50);
    color: #fff;
}

.badge.bg-success {
    background: var(--color-success-50);
    color: #fff;
}

.badge.bg-information {
    background: var(--color-information-50);
    color: #fff;
}

.badge.bg-disabled {
    background: var(--color-gray-40);
    color: #fff;
}

.badge.bg-light-primary {
    background: var(--color-primary-5);
    color: var(--color-primary-60);
}

.badge.bg-light-secondary {
    background: var(--color-secondary-5);
    color: var(--color-secondary-60);
}

.badge.bg-light-gray {
    background: var(--color-gray-10);
    color: var(--color-gray-70);
}

.badge.bg-light-point {
    background: var(--color-point-5);
    color: var(--color-point-60);
}

.badge.bg-light-danger {
    background: var(--color-danger-5);
    color: var(--color-danger-60);
}

.badge.bg-light-warning {
    background: var(--color-warning-5);
    color: var(--color-warning-60);
}

.badge.bg-light-success {
    background: var(--color-success-5);
    color: var(--color-success-60);
}

.badge.bg-light-information {
    background: var(--color-information-5);
    color: var(--color-information-60);
}

.badge.bg-light-disabled {
    background: var(--color-gray-20);
    color: var(--color-gray-60);
}

.badge.bg-org {
    background: var(--color-org);
    color: #fff;
}

.badge.bg-kindy {
    background: var(--color-kindy);
    color: #fff;
}

.badge.bg-center {
    background: var(--color-center);
    color: #fff;
}

.badge.bg-forest {
    background: var(--color-forest);
    color: #fff;
}

.badge.bg-huyang {
    background: var(--color-huyang);
    color: #fff;
}

.badge.bg-healing {
    background: var(--color-healing);
    color: #fff;
}

.badge.bg-arb {
    background: var(--color-arb);
    color: #fff;
}

.badge.bg-prov {
    background: var(--color-prov);
    color: #fff;
}

.badge.bg-cert {
    background: var(--color-cert);
    color: #fff;
}

.badge.bg-neulbom {
    background: var(--color-neulbom);
    color: #fff;
}

.badge.bg-school {
    background: var(--color-school);
    color: #fff;
}

.badge.bg-normal {
    background: var(--color-normal);
    color: #fff;
}

.badge.small {
    height: 2rem;
    font-size: 1.4rem;
}

.badge.large {
    height: 3.2rem;
    font-size: 1.7rem;
}

.badge.round {
    border-radius: 30rem;
    padding: 0 1.2rem;
}

.badge img {
    height: 60%;
}


/* --- Select --- */
.form-select {
    position: relative;
    width: 100%;
    height: 4.8rem;
    background: #fff url(/images/common/ico_angle.svg) no-repeat;
    background-position: top 50% right 1.6rem;
    background-size: 2rem;
    border-radius: 0.6rem;
    padding: 0 4.4rem 0 1.6rem;
    border: 1px solid var(--color-form-border);
    font-size: 1.7rem;
}

.form-select:disabled {
    background: var(--color-gray-5) url(/images/common/ico_angle_disabled.svg) no-repeat;
    background-position: top 50% right 16px;
    background-size: 2rem;
    border-color: var(--color-gray-30);
    color: var(--color-gray-80);
    opacity: 1;
}

.form-select.large {
    height: 5.6rem;
    padding: 0 4.8rem 0 1.6rem;
    background-size: 2.4rem;
    font-size: 1.9rem;
}

.form-select.small {
    height: 4rem;
    padding: 0 4rem 0 1.6rem;
    background-size: 1.6rem;
    font-size: 1.5rem;
}

.form-select.small {
    height: 4rem;
    padding: 0 4rem 0 1.6rem;
    background-size: 1.6rem;
    font-size: 1.5rem;
}

.form-select.xsmall {
    height: 3.2rem;
    padding: 0 2.8rem 0 1rem;
    border-radius: 0.4rem;
    background-size: 1.2rem;
    font-size: 1.5rem;
    background-position: top 50% right 0.8rem;
}


/* --- Textarea --- */
.textarea-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

textarea.input {
    height: 14.4rem;
    padding: 0.8rem 1.6rem;
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
}

textarea.input.small {
    font-size: 1.5rem;
}

.textarea-info {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    color: var(--color-text-disabled);
}

.textarea-count {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

.textarea-count .count-now {
    color: var(--color-information-50)
}


/* --- Input --- */
.form-input {
    width: 100%;
    height: 4.8rem;
    background: #fff;
    border-radius: 0.6rem;
    padding: 0 1.6rem;
    border: 1px solid var(--color-form-border);
    font-size: 1.7rem;
}

.form-input:read-only {
    background: var(--color-gray-5);
    border-color: var(--color-gray-30);
    color: var(--color-gray-80);
}

.form-input:disabled {
    background: var(--color-gray-10);
    border-color: var(--color-gray-30);
    color: var(--color-gray-60);
}

.form-input.large {
    height: 5.6rem;
    font-size: 1.9rem;
}

.form-input.small {
    height: 4rem;
    font-size: 1.5rem;
}

.form-input.xsmall {
    height: 3.2rem;
    padding: 0 1rem;
    border-radius: 0.4rem;
    font-size: 1.5rem;
}


/* --- Datepicker --- */
.duet-date {
    /* max-width: 30rem; */
}

.duet-date__input {
    border-radius: 0.6rem;
    height: 4rem;
    font-size: 1.5rem;
    padding: 0 1.6rem;
}

.duet-date__input:focus {
    border: 1px solid var(--duet-color-border, var(--duet-color-text));
    outline: 0.2rem solid #fff;
    outline-offset: 0;
	box-shadow: 0 0 0 0.4rem var(--color-gray-50);
}

.duet-date__toggle {
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    width: 4rem;
}

.duet-date__toggle:focus {
    outline: 0.2rem solid #fff;
    outline-offset: 0;
	box-shadow: 0 0 0 0.4rem var(--color-gray-50);
}

.duet-date__table-header {
    font-size: 1.5rem;
}

.duet-date__select select {
    font-size: 1.5rem;
}

.duet-date__select-label {
    font-size: 1.9rem;
}

.duet-date__day {
    font-size: 1.5rem;
}

.duet-date__toggle-icon svg {
    width: 2rem;
}


/* --- Radio Checkbox --- */
.check-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
}

.check-area.flex-column {
    flex-direction: column;
}

input[type=radio],
input[type=checkbox] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-check input[type=radio] ~ label,
.form-check input[type=checkbox] ~ label {
    position: relative;
    display: inline-flex;
    gap: 0.8rem;
    cursor: pointer;
}

.form-check input[type=radio]:focus ~ label,
.form-check input[type=checkbox]:focus ~ label {
    outline: 0.2rem solid #fff;
    outline-offset: 0;
	box-shadow: 0 0 0 0.4rem var(--color-gray-50);
}

.form-check input[type=radio] ~ label::before,
.form-check input[type=checkbox] ~ label::before {
    content: '';
    display: flex;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-top: 0.3rem;
    background: #fff;
    border: 0.1rem solid var(--color-border);
    transition: var(--transition-base);
}

.form-check input[type=checkbox] ~ label::before {
    border-radius: 0.4rem;
}

.form-check input[type=radio] ~ label::before {
    border-radius: 50%;
}

.form-check input[type=checkbox]:checked ~ label::before {
    background: var(--color-primary-50);
    border-color: var(--color-primary-50);
}

.form-check input[type=radio]:checked ~ label::before {
    border-color: var(--color-primary-50);
}

.form-check input[type=checkbox]:checked ~ label::after {
    content: '';
    display: inline-flex;
    width: 1.2rem;
    height: 1.2rem;
    mask-image: url(/images/common/ico_checkbox_checked.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #fff;
    position: absolute;
    top: 0.7rem;
    left: 0.4rem;
}

.form-check input[type=radio] ~ label::after {
    content: '';
    display: inline-flex;
    position: absolute;
    top: 0.8rem;
    left: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.form-check input[type=radio]:checked ~ label::after {
    background-color: var(--color-primary-50);
}

.form-check.large > input[type=radio] ~ label,
.form-check.large > input[type=checkbox] ~ label {
    gap: 0.8rem;
    font-size: 1.9rem;
    font-weight: 500;
}

.form-check.large > input[type=radio] ~ label:before,
.form-check.large > input[type=checkbox] ~ label:before {
    width: 2.4rem;
    height: 2.4rem;
    margin-top: 0.3rem;
}

.form-check.large > input[type=checkbox] ~ label:before {
    border-radius: 0.4rem;
}

.form-check.large > input[type=radio] ~ label::after {
    top: 0.85rem;
    left: 0.55rem;
    width: 1.3rem;
    height: 1.3rem;
}

.form-check.large > input[type=checkbox] ~ label::after {
    top: 0.8rem;
    left: 0.4rem;
    width: 1.6rem;
    height: 1.6rem;
}

.form-check input:disabled ~ label {
    cursor: default;
}


/* --- Chip --- */
.chip-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
} 

.chip-area.flex-column {
    flex-direction: column;
}

.form-chip input[type=radio] ~ label,
.form-chip input[type=checkbox] ~ label {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.4rem;
    height: 4.8rem;
    padding: 0 1.2rem;
    background: #fff;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.form-chip input[type=radio]:checked ~ label,
.form-chip input[type=checkbox]:checked ~ label {
    background-color: var(--color-primary-5);
    border-color: var(--color-primary-50);
    color: var(--color-primary-70);
    font-weight: 500;
}

.form-chip input[type=radio] ~ label::before,
.form-chip input[type=checkbox] ~ label::before {
    content: '';
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    mask-image: url(/images/common/ico_checkbox.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: var(--color-gray-40);
}

.form-chip input[type=radio]:checked ~ label::before,
.form-chip input[type=checkbox]:checked ~ label::before {
    background-color: var(--color-primary-50);
}

.form-chip.simple input[type=radio] ~ label::before,
.form-chip.simple input[type=checkbox] ~ label::before {
    content: '';
    display: none;
}

.form-chip.simple input[type=radio]:checked ~ label,
.form-chip.simple input[type=checkbox]:checked ~ label {
    background-color: #fff;
    border-color: #000;
    color: #000;
    font-weight: 500;
    text-decoration: underline;
}

.form-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 0.1rem solid var(--color-border);
}

.form-chip-btn::before {
    content: '';
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(/images/common/ico_checkbox.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.form-chip-btn.active {
    background: #ecf2fe;
    border-color: #256ef4;
    color: #0b50d0;
}

.form-chip-btn.active::before {
    background-image: url(/images/common/ico_checkbox_checked.svg);
}

.form-chip-btn.small {
    padding: 0 1.6rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 8rem;
    font-size: 1.5rem;
}

.form-chip-btn.small::before {
    width: 1.2rem;
    height: 1.2rem;
}


/* --- Input Range --- */
.slider-wrap {
    display: flex;
}

.slider-container {
    width: 100%;
    margin: 0 1.2rem;
}

.slider-container .range-value {
    font-size: 1.5rem;
    color: var(--color-text-subtle);
    margin-bottom: 0.8rem;
    margin-left: -1.2rem;
}

/* .ui-slider-handle .value {
    position: absolute;
    top: -2.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    font-weight: 500;
    white-space: nowrap;
} */


/* --- Form --- */
.form-tit {
    font-weight: 700;
}

.form-group {
    display: flex;
    gap: 0.4rem 0.8rem;
    width: 100%;
    align-items: center;
}

.form-group.phone {
    max-width: 30rem;
    flex-wrap: nowrap;
}

.form-group.mail {
    max-width: 64rem;
}

.form-group select {
    width: auto;
}

.form-group.nowrap {
    flex-wrap: nowrap;
}

.form-group-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.form-group-tit {
    font-weight: 500;
}

.form-group .btn {
    flex-shrink: 0;
}

.form-group .form-check + .form-check {
    margin-left: 1.6rem;
}

@media screen and (max-width: 1023px) {
    .form-group.mail {
        max-width: none;
    }
}

@media screen and (max-width: 767px) {
    .form-group {
        flex-wrap: wrap;
    }

    .form-group.phone {
        max-width: none;
    }

    .form-group.mail .form-input {
        width: calc(50% - 1.6rem);
    }

    .form-group select {
        width: 100%;
    }

    .form-group duet-date-picker {
        width: 100%;
    }

    .form-group .duet-date {
        max-width: none;
    }

    .form-group-tit {
        width: 100% !important;
    }
}

.form-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.form-list > li {
    display: flex;
    gap: 0.8rem;
    border-bottom: 0.1rem dashed var(--color-border);
    padding-bottom: 0.6rem;
}

.form-list > li:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.form-list > li .btn-del {
    opacity: 0.5;
}

.form-list > li .btn-del:hover {
    opacity: 0.7;
}


/* --- Box --- */
[class^="box-"].padding-wide {
    padding: 4.8rem 2.4rem;
}

[class^="box-"].padding-narrow {
    padding: 1.6rem;
}

@media screen and (max-width: 767px) {
    [class^="box-"].padding-wide {
        padding: 2.4rem;
    }
}

.box-gray {
    width: 100%;
    background: var(--color-gray-5);
    padding: 2.4rem;
    border-radius: 1.2rem;
}

.box-gray > .title {
    font-size: 2.4rem;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .box-gray {
        padding: 1.6rem;
    }

    .box-gray > .title {
        font-size: 2.2rem;
    }
}

.box-notice {
    padding: 2rem;
    border-radius: 1.2rem;
    display: flex;
    gap: 0.4rem 2rem;
    margin-top: 1.6rem;
    border: 0.1rem solid var(--color-secondary-10);
    background: var(--color-secondary-5);
}

.box-notice .title {
    display: flex;
    gap: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.box-notice .title i {
    color: var(--color-secondary-50);
}

@media screen and (max-width: 767px) {
    .box-notice {
        flex-direction: column;
    }
}

.box-img {
    position: relative;
    aspect-ratio: 2 / 1;
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    overflow: hidden;
	min-height: 30rem;
	width: 100%;
}

.box-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-cont {
    border: 0.3rem solid var(--color-secondary-10);
    border-radius: 1.2rem;
    padding: 2.4rem 3.2rem;
    position: relative;
    margin-bottom: 1.6rem;
    background: var(--color-secondary-5);
}

.box-cont::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    mask-image: url(/images/sub/box_cont_bg.svg);
    mask-repeat: no-repeat;
    mask-position: center right;
    mask-size: auto 12rem;
    background-color: var(--color-gray-10);
    z-index: -1;
}

.box-cont.icon::after {
    display: none;
}

.box-cont .box-top {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.box-cont .text-wrap .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2.4rem;
    margin-bottom: 0.8rem;
    color: var(--color-primary-70);
    border-bottom: 0.1rem dotted var(--color-border);
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    flex-wrap: wrap;
}

.box-cont .text-wrap .title p {
    font-weight: 700;
}

.box-cont .icon-wrap {
    width: 10rem;
    height: 10rem;
    background-color: var(--color-primary-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.box-cont .text-wrap {
    width: 100%;
}

@media screen and (max-width: 1023px) {
	.box-cont {
        padding: 1.6rem;
    }
	
	.box-cont .text-wrap .title {
		font-size: 2rem;
	}
}

@media screen and (max-width: 424px) {
    .box-cont .box-top {
    	flex-direction: column;
    	gap: 0.8rem;
    }
}

.box-txt {
    display: flex;
    gap: 1.6rem;
}

.box-txt > li {
    border-radius: 1.2rem;
    padding: 1.6rem 1.2rem;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box-txt > li .title {
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.box-txt > li .text {
    font-size: 1.5rem;
}

.box-txt.bg-secondary  > li {
    background: var(--color-secondary-5);
}

.box-txt2-wrap {
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.box-txt2 {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    overflow: hidden;
}

.box-txt2 > .title {
    border-bottom: 0.1rem solid var(--color-border);
    padding: 1.2rem 1.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-information-70);
}

.box-txt2 > .text {
    padding: 1.6rem;
    background: var(--color-gray-5);
}

.box-txt3 {
    border-top: 0.1rem solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
}

.box-txt3 > li {
    width: 50%;
    display: flex;
    align-items: flex-start;
    padding: 1.6rem;
    gap: 1.6rem;
    border-bottom: 0.1rem solid var(--color-border);
}

.box-txt3 > li .icon {
    width: 8rem;
    height: 8rem;
    border-radius: 1rem;
    background: var(--color-gray-10);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.box-txt3 > li .icon::after {
    content: '';
    display: block;
    width: 5rem;
    height: 5rem;
    background: url(/images/sub/box-txt3.png) no-repeat center;
    background-size: 100%;
}

.box-txt3 > li .icon01::after {
    background-position: 0 0;
}

.box-txt3 > li .icon02::after {
    background-position: 0 -5rem;
}

.box-txt3 > li .icon03::after {
    background-position: 0 -10rem;
}

.box-txt3 > li .icon04::after {
    background-position: 0 -15rem;
}

.box-txt3 > li .icon05::after {
    background-position: 0 -20rem;
}

.box-txt3 > li .text-wrap .title {
    font-weight: 700;
    margin-bottom: 0.4rem;
}

@media screen and (max-width: 1023px) {
	.box-txt {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 767px) {
	.box-txt {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}
	
	.box-txt br {
		display: none;
	}
	
	.box-txt3 > li {
		width: 100%;
	}
}

.box-border {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    padding: 1.6rem;
    text-align: center;
}

.box-between {
    background: var(--color-information-5);
    border-radius: 1.2rem;
    padding: 2.4rem;
    display: flex;
    gap: 4rem;
    align-items: center;
}

.box-between .text-box {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
}

.box-between .text-box .title {
    font-size: 2.4rem;
    font-weight: 700;
    border-bottom: 0.1rem dotted var(--color-border);
    padding-bottom: 0.8rem;
    color: var(--color-information-70);
}

.box-between .img-box {
    width: 40rem;
    background: #fff;
    aspect-ratio: 4 / 3;
    position: relative;
    border-radius: 1.2rem;
}

.box-between .img-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

.box-intro {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    border: 0.1rem solid var(--color-information-10);
    border-radius: 1.2rem;
    padding: 2rem 4rem;
    background: var(--color-information-5);
}

.box-intro .text-box {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
    margin-bottom: 6rem;
}

.box-intro .text-box .title {
    color: var(--color-information-70);
    font-size: 2.4rem;
    font-weight: 700;
    border-bottom: 0.1rem dotted var(--color-border);
    padding-bottom: 0.8rem;
}

.box-intro .text-box .text {
    font-size: 1.9rem;
}

.box-intro .img-box {
    width: 80rem;
}

@media screen and (max-width: 767px) {
    .box-intro {
        flex-direction: column;
        gap: 0.8rem;
    }

    .box-intro .text-box {
        margin-bottom: 4rem;
    }

    .box-intro .text-box .title {
        font-size: 2.2rem;
        text-align: center;
    }

    .box-intro .img-box {
        width: 100%;
        order: -1;
        text-align: center;
    }

    .box-intro .text-box .text {
        font-size: 1.7rem;
    }

    .box-intro .btn-wrap .btn {
        width: 100%;
    }
}

.box-file {
    margin-top: 0.8rem;
}

.box-file a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.1rem solid var(--color-border);
    padding: 1.2rem 2rem;
    border-radius: 0.8rem;
}

.box-file a .text-box {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 500;
}

.box-file a .text-box .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-primary-50);
    color: #fff;
}

.box-file a .btn {
    color: var(--color-primary-50);
    border: 0.1rem solid var(--color-primary-50);
    border-radius: 10rem;
    padding: 0 2.4rem;
}

.box-file a:hover {
    border: 0.1rem solid var(--color-primary-50);
    box-shadow: var(--box-shadow-base);
}

.box-file a:hover .btn {
    background: var(--color-primary-50);
    color: #fff;
}

.box-nodata {
    padding: 4rem 0;
    text-align: center;
    background-image: url(/images/sub/box_nodata_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    border-radius: 1.2rem;
    border: 0.1rem solid var(--color-border);
}

.box-nodata .tit {
    font-size: 2.8rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 0 0.8rem;
    z-index: 1;
}

.box-nodata .tit::before {
    content: '';
    display: block;
    width: 100%;
    height: 2rem;
    background: var(--color-information-10);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.box-nodata .tit strong {
    color: var(--color-information-70);
}

.box-nodata .txt {
    margin-top: 1.2rem;
}

.top-box {
    display: flex;
    gap: 2.4rem;
    padding: 2.4rem;
    border: 0.1rem solid var(--color-gray-90);
    border-radius: 1.2rem;
    margin-bottom: 1.6rem;
    position: relative;
    background: #fff;
}

.top-box::before {
    content: '';
    display: block;
    width: 16rem;
    height: 10rem;
    border-radius: 1.2rem;
    background: var(--color-primary-50);
    position: absolute;
    top: -0.6rem;
    left: -0.6rem;
    z-index: -1;
}

.top-box .icon {
    width: 6rem;
    height: 6rem;
    flex-shrink: 0;
}

.top-box .icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(/images/sub/icon_topbox.png);
    background-size: 6rem 6rem;
}

.top-box .icon.icon01 {
    background-position: 0 0;
}

.top-box .info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.top-box .info .title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-primary-70);
}

.top-box2 {
    padding: 2.4rem;
    border: 0.1rem solid var(--color-border);
    outline: 0.6rem solid var(--color-secondary-10);
    outline-offset: -0.6rem;
    border-radius: 1.2rem;
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.top-box2 .title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-secondary-70);
}

@media screen and (max-width: 767px) {
    .top-box {
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        text-align: center;
        padding: 1.6rem;
    }
}

.box-done-wrap {
    display: flex;
    justify-content: center;
}

.box-done {
    border: 0.3rem solid var(--color-gray-10);
    padding: 4rem;
    border-radius: 1.2rem;
    text-align: center;
    width: 80rem;
    background: var(--color-gray-5);
}

.done-top {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.done-top .done-tit {
    font-size: 3.2rem;
    font-weight: 700;
}

.done-body {
    margin-top: 2rem;
    padding: 2rem;
    background: #fff;
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    display: flex;
    justify-content: center;
}

.done-body .done-info {
    font-size: 1.9rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    
}

.done-body .done-info > li {
    display: flex;
    gap: 2rem;
    border-bottom: 0.1rem dashed var(--color-border);
    padding: 0.4rem 0.8rem;
}

.done-body .done-info > li:last-of-type {
    border-bottom: 0;
}

.done-body .done-info > li .tit {
    color: var(--color-text-disabled);
    min-width: 12rem;
}

.done-body .done-info > li .txt {
    color: #000;
}

@media screen and (max-width: 767px) {
    .box-done {
        padding: 2rem;
    }

    .box-done .done-icon img {
        width: 6rem;
    }

    .done-top .done-tit {
        font-size: 2.4rem;
    }
}


/* --- List --- */
.list-dot {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.list-dot > li {
    position: relative;
    padding-left: 2.8rem;
}

.list-dot > li::before {
    content: '';
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.6rem;
    background: var(--color-secondary-50);
    position: absolute;
    top: 1rem;
    left: 0.8rem;
}

.list-dot > li .title {
    font-weight: 700;
}

.list-dot.text-small {
    gap: 0;
}

.list-dot.text-small > li {
    padding-left: 2rem;
}

.list-dot.text-small > li::before {
    width: 0.4rem;
    height: 0.4rem;
    top: 0.8rem;
    left: 0.4rem;
}

.list-dash {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.list-dash > li {
    position: relative;
    padding-left: 2rem;
}

.list-dash > li::before {
    content: '';
    display: block;
    width: 0.8rem;
    height: 0.1rem;
    background: var(--color-gray-70);
    position: absolute;
    top: 1.2rem;
    left: 0.4rem;
}

.list-dash > li {
    display: flex;
    gap: 0.8rem;
}

.list-dash > li .title {
    font-weight: 700;
    color: var(--color-information-90);
    flex-shrink: 0;
}

.list-etc {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.list-etc > li {
    position: relative;
    padding-left: 2.4rem;
}

.list-etc > li > .etc {
    position: absolute;
    top: 0;
    left: 0;
}

.list-etc > li > .list-etc {
    margin-top: 0.4rem;
}

.card-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.4rem;
} 

.card-list > li {
    padding: 3.2rem;
    box-shadow: var(--box-shadow-base);
    border-radius: 1.2rem;
} 

.card-list > li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 0.6rem;
    background: var(--color-primary-5);
    color: var(--color-primary-70);
    margin-bottom: 2.4rem;
} 

.card-list > li .tit {
    color: var(--color-primary-70);
    font-weight: 700;
}

.card-list > li .txt {
    font-size: 3.2rem;
    font-weight: 500;
} 

.inst-info-list {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 3.2rem;
    box-shadow: var(--box-shadow-base);
    border-radius: 1.2rem;
    background: var(--color-gray-5);
} 

.inst-info-list > li {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border-bottom: 0.1rem dotted var(--color-border);
    padding: 1.6rem 0;
} 

.inst-info-list > li:last-of-type {
    border-bottom: 0;
} 

.inst-info-list > li .title {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.inst-info-list > li .title .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.inst-info-list > li .title .icon.bg-org {
    background: var(--color-org);
}

.inst-info-list > li .title .icon.bg-kindy {
    background: var(--color-kindy);
}

.inst-info-list > li .title .icon.bg-center {
    background: var(--color-center);
}

.inst-info-list > li .title .icon.bg-prov {
    background: var(--color-prov);
}

.inst-info-list > li .title .icon img {
    width: 60%;
}

.inst-info-list > li .title p {
    font-size: 1.9rem;
    font-weight: 700;
}

.inst-info-list > li .title .btn {
    color: var(--color-gray-70);
}

.inst-info-list > li .text {
    color: var(--color-text-subtle);
}

@media screen and (max-width: 767px) {
    .inst-info-list {
        padding: 0 1.6rem;
    }
}

.img-list {
    display: grid;
    gap: 2.4rem;
}

.img-list.col2 {
    grid-template-columns: 1fr 1fr;
}

.img-list.col3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.img-list > li {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    overflow: hidden;
}

.img-list > li .img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-gray-10);
} 

.img-list > li .img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

.img-list > li p {
    font-weight: 500;
    text-align: center;
    padding: 0.8rem;
} 


.img-list.text > li {
    border: 0;
} 

.img-list.text > li .img {
    border: 0.1rem solid var(--color-border);
    aspect-ratio: 4 / 3;
    border-radius: 1.2rem;
    background: var(--color-gray-10);
    overflow: hidden;
} 

.img-list.text > li p {
    padding: 0;
    margin-top: 0.4rem;
} 

.icon-list {
    display: flex;
    flex-direction: column;
}
.icon-list > li  {
    display: flex;
    gap: 3.6rem;
    border-bottom: 0.1rem dashed var(--color-border);
    padding: 2.4rem 0;
}

.icon-list > li:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.icon-list > li .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    height: 12rem;
    border-radius: 10rem;
    background: var(--color-gray-5);
    border: 0.1rem solid var(--color-gray-10);
    flex-shrink: 0;
} 

.icon-list > li .icon img {
    width: 60%;
}

.icon-list > li .title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-secondary-70);
    margin-bottom: 1.2rem;
} 


@media screen and (max-width: 767px) {
    .img-list {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.6rem;
    }

    .icon-list > li {
        flex-direction: column;
        gap: 1.6rem;
    }
    
    .img-list > li p {
    	padding: 0.4rem 0.8rem;
    	font-size: 1.5rem;
    }
}

@media screen and (max-width: 359px) {
    .img-list {
        grid-template-columns: 1fr !important;
    }
}


/* --- Process --- */
.ui-process {
    display: flex;
    gap: 2.4rem;
}

.ui-process > li {
    width: 100%;
    border: 0.1rem solid var(--color-border);
    padding: 1.6rem;
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    position: relative;;
}

.ui-process > li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 2.4rem;
    height: 1px;
    background-color: var(--color-border);
    transform: translateY(-50%);
}

.ui-process > li::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid var(--color-border);
    transform: translateY(-50%);
}

.ui-process > li:last-of-type::before {
    display: none;
}

.ui-process > li:first-of-type::after {
    display: none;
}

.ui-process > li .title {
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

.ui-process > li .icon {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.ui-process > li:nth-of-type(1) .icon {
    background: #2e7d71;
}

.ui-process > li:nth-of-type(2) .icon {
    background: #2e8b57;
}

.ui-process > li:nth-of-type(3) .icon {
    background: #388e3c;
}

.ui-process > li:nth-of-type(4) .icon {
    background: #00838f;
}

.ui-process > li:nth-of-type(5) .icon {
    background: #0277bd;
}

.ui-process > li:nth-of-type(6) .icon {
    background: #01579b;
}

.ui-process > li .icon::after {
    content: '';
    display: block;
    width: 4rem;
    height: 4rem;
    background: url(/images/sub/ui-process.png) no-repeat center;
    background-size: 100%;
}

.ui-process > li .icon01::after {
    background-position: 0 0;
}

.ui-process > li .icon02::after {
    background-position: 0 -4rem;
}

.ui-process > li .icon03::after {
    background-position: 0 -8rem;
}

.ui-process > li .icon04::after {
    background-position: 0 -12rem;
}

.ui-process > li .icon05::after {
    background-position: 0 -16rem;
}

.ui-process > li .icon06::after {
    background-position: 0 -20rem;
}

.ui-process > li .icon07::after {
    background-position: 0 -24rem;
}

.ui-process > li .text {
    border-top: 0.1rem solid var(--color-border);
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
    color: var(--color-gray-70);
    padding-top: 0.8rem;
}

@media screen and (max-width: 1023px) {
	.ui-process {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1.6rem;
	}
	
	.ui-process > li::before {
		display: none;
	}
	
	.ui-process > li::after {
		right: calc(100% + 0.4rem);
	}
	
	.ui-process > li:nth-of-type(3n+1)::after {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.ui-process {
		display: flex;
		flex-direction: column;
		gap: 2.4rem;
	}
	
	.ui-process > li {
		padding: 1.2rem 0 0.4rem;
		gap: 0.4rem;
	}
	
	.ui-process > li::before {
		display: block;
		width: 0.1rem;
		height: 2.4rem;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.ui-process > li::after {
		display: block !important;
		top: calc(100% + 1.6rem);
		left: 50%;
		right: auto;
		transform: translateX(-50%) rotate(90deg);
	}
	
	.ui-process > li:last-of-type::after {
		display: none !important;
	}
	
	.ui-process > li .icon {
		transform: scale(0.8);
	}
}


/* --- Layout --- */
#container .in-between {
    display: flex;
    gap: 3.2rem;
    align-items: flex-start;
}

#container .prg-layout {
	position: relative;	
}

#container .contents {
    width: 100%;
    padding-bottom: 10rem;
}

#container .in-between .contents {
    width: calc(100% - 24rem - 3.2rem);
    padding-bottom: 10em;
}

@media screen and (max-width: 1023px) {
	#container .prg-layout {
		flex-direction: column;
	}
	
	#container .prg-layout .page-title-wrap {
		width: calc(100% - 3.2rem);
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
    #container .in-between .contents {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    #container .contents {
        width: 100%;
        padding-bottom: 4rem;
    }
}

/* --- Side Menu --- */
.side-navigation {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 24rem;
    padding: 3.2rem 0;
    position: sticky;
    top: 5rem;
}

.side-navigation .lnb-tit {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 700;
    padding: 2.4rem 1.6rem;
    border-bottom: 0.1rem solid var(--color-border);
    background: #539242;
    background: linear-gradient(90deg,rgba(83, 146, 66, 1) 0%, rgba(0, 142, 133, 1) 100%);
    border-radius: 1rem;
    color: #fff;
    position: relative;
    margin-bottom: 1.6rem;
}

.side-navigation .lnb-tit::after {
    content: '';
    display: block;
    width: 15rem;
    height: 12rem;
    background-image: url(/images/sub/lnb_bg.svg);
    background-repeat: no-repeat;
    opacity: 0.1;
    position: absolute;
    top: 50%;
    left: -2rem;
    transform: translateY(-50%);
}

.side-navigation .lnb-list .lnb-item {
    margin-bottom: 0.8rem;
}

.side-navigation .lnb-list .lnb-item .lnb-btn {
    display: flex;
    gap: 0.8rem;
    width: 100%;
    padding: 1.2rem;
    font-size: 1.7rem;
    font-weight: 700;
    border-radius: 0.8rem;
    border: 0.1rem solid var(--color-border);
    position: relative;
}

.side-navigation .lnb-list .lnb-item > .lnb-btn.selected {
    background: #006e6b;
    color: #fff;
    text-decoration: underline;
    text-underline-position: under;
    border: 0.1rem solid #006e6b;
}

/* .side-navigation .lnb-list .lnb-item > .lnb-btn.selected::before {
    content: '';
    display: block;
    width: 100%;
    height: 0.3rem;
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    background: var(--color-secondary-70);
} */

.side-navigation .lnb-list .lnb-item [class*=lnb-toggle]::after {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(/images/icon/ico_angle.svg) no-repeat center;
    background-size: contain;
    margin-left: auto;
    transition: var(--transition-base);
}

.side-navigation .lnb-list .lnb-item [class*=lnb-toggle][aria-expanded=true]::after {
    transform: rotate(180deg);
}

.side-navigation .lnb-list .lnb-item .lnb-submenu {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: var(--transition-base);
}

.side-navigation .lnb-list .lnb-item.active .lnb-submenu {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.4rem;
}

.side-navigation .lnb-list .lnb-item .lnb-submenu > ul {
    padding-bottom: 0.4rem;
    overflow: hidden;
}

.side-navigation .lnb-list .lnb-item .lnb-submenu .lnb-btn {
    padding: 0.8rem 1.6rem;
    font-weight: 400;
}

.side-navigation .lnb-list .lnb-item .lnb-submenu .lnb-btn.selected {
    background: var(--color-gray-5);
    font-weight: 700;
}

.side-navigation .lnb-list .lnb-item .lnb-submenu .lnb-btn::before {
    content: '•';
}

@media screen and (max-width: 1023px) {
     .side-navigation {
        display: none;
    }

}


/* --- Breadcrumb --- */
.breadcrumb-wrap {
    padding: 0.8rem;
    background: #106277;
}

.breadcrumb-wrap .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breadcrumb-wrap .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.5rem;
    color: #fff;
}

.breadcrumb-wrap .breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumb-wrap .breadcrumb li:not(:last-of-type)::after {
    content: '';
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    mask-image: url(/images/common/ico_angle.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform: rotate(-90deg);
    background-color: #fff;
}

.breadcrumb-wrap .breadcrumb li a {
    text-decoration: underline;
    text-underline-position: under;
}

.breadcrumb-wrap .breadcrumb .home a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumb-wrap .font-util {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
    .breadcrumb-wrap .breadcrumb li:not(.home):not(:last-of-type) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-of-type(2)):last-of-type::before {
        content: '';
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        mask: url(/images/common/ico_ellipsis.svg) no-repeat center;
        mask-size: contain;
        background: #fff;
    }

    .breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-of-type(2)):last-of-type::after {
        content: '';
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        mask: url(/images/common/ico_angle.svg) no-repeat center;
        mask-size: contain;
        transform: rotate(-90deg);
        background: #fff;
    }

    .breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-of-type(2)):last-of-type a,
    .breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-of-type(2)):last-of-type .text {
        order: 3;
    }

    .breadcrumb-wrap .font-util {
        display: none;
    }
}


/* --- Title --- */
.page-title-wrap {
    padding-bottom: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2.4rem 0;
    border-bottom: 0.1rem solid var(--color-border);
}

.h-tit {
    font-size: var(--heading-md);
}

.h-util {
    display: flex;
    color: var(--color-gray-70);
    gap: 0.8rem;
}

.h-util button {
    width: 4rem;
    height: 4rem;
    border: 0.1rem solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
}

.sec-tit {
    font-size: 2.8rem;
    margin-bottom: 1.6rem;
}

.cont-tit-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.cont-tit-wrap.left {
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1.6rem;
}

.cont-tit-wrap.toggle {
    flex-wrap: nowrap;
    gap: 1.2rem;
}

.cont-tit-wrap .toggle-btn {
    border: 0.1rem solid var(--color-border);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.2rem;
    flex-shrink: 0;
}

.cont-tit-h3 {
    font-size: 2.2rem;
    margin: 2.4rem 0 1.2rem;
    position: relative;
    padding-left: 3.6rem;
}

.cont-tit-h3::before {
    content: '';
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    mask-image: url(/images/sub/title_cont_h3.svg);
    mask-repeat: no-repeat;
    background-image: linear-gradient(90deg,rgba(110, 187, 87, 1) 0%, rgba(0, 162, 152, 1) 100%);
    position: absolute;
    top: 0;
    left: 0;
}

.cont-tit-h4 {
    font-size: 1.9rem;
    color: var(--color-information-70);
    position: relative;
    padding-left: 2.8rem;
    margin: 1.6rem 0 0.4rem;
}

.cont-tit-h4::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    mask-image: url(/images/sub/page-right-solid.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color-information-50);
    position: absolute;
    top: 0.3rem;
    left: 0;
}

.cont-tit-h5 {
    font-size: 1.8rem;
    color: var(--color-success-70);
    position: relative;
    padding-left: 2.8rem;
}

.cont-tit-h5::before {
    content: '';
    display: block;
    width: 2rem;
    height: 1.2rem;
    background: url(/images/sub/bullet_h5.svg) no-repeat center;
    position: absolute;
    top: 0.7rem;
    left: 0;
}

.cont-tit-wrap .cont-tit-h3 + p {
    margin-top: 2.4rem;
}

.cont-tit-wrap .cont-tit-h3 + .btn.small {
    margin-top: 1.2rem;
}

.cont-tit-wrap .cont-tit-h4 + p {
    margin-top: 1.2rem;
}

.cont-tit-wrap .cont-tit-h4 + .form-check {
    margin-bottom: 0.2rem;
}

.strong-tit {
    text-align: center;
    border-top: 0.2rem solid var(--color-gray-90);
    border-bottom: 0.2rem solid var(--color-gray-90);
    padding: 1.6rem;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem 0.8rem;
    flex-wrap: wrap;
}

.strong-tit p {
    font-size: 2.4rem;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .cont-tit-wrap:not(.toggle) {
        flex-direction: column;
        align-items: flex-start;
    }

    .cont-tit-wrap.left {
        flex-direction: row;
    }

    .cont-tit-wrap .cont-tit-h3 + p {
        margin-top: 0;
        margin-bottom: 0.4rem;
    }

    .cont-tit-wrap .btn-wrap {
        margin-bottom: 0.8rem;
    }

    .h-util button {
        width: 3.2rem;
        height: 3.2rem;
    }
	
	.h-util button.btn-print {
		display: none;
	}

    .h-util button i {
        font-size: 2rem !important;
    }

    .sec-tit {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }
}


/* --- Accordion --- */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.accordion-item {
    border-radius: 0.8rem;
    border: 0.1rem solid var(--color-border);
    background: var(--color-gray-5);
}

.accordion-header .btn-accordion {
    font-size: 1.8rem;
    font-weight: 700;
    width: 100%;
    padding: 1.2rem 3.6rem 1.2rem 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.8rem;
    position: relative;
    z-index: 1;
}

.accordion-header .btn-accordion .text {
    width: 100%;
    border-right: 0.1rem solid var(--color-border);
    text-align: left;
    margin-right: 0.8rem;
}

.accordion-header .btn-accordion::after {
    content: '';
    display: block;
    width: 3rem;
    height: 2.4rem;
    background: url(/images/common/ico_angle.svg) no-repeat center;
    background-size: 1.8rem;
    flex-shrink: 0;
    position: absolute;
    top: 1.2rem;
    right: 0.8rem;
    flex-shrink: 0;
}

.accordion-header .btn-accordion.open::after {
	transform: rotate(180deg);
}

.accordion-header .btn-accordion:hover {
	text-decoration: underline;
}

.accordion-collapse {
    display: none;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}

.accordion-body {
    border-top: 0.1rem solid var(--color-border);
    padding: 1.6rem;
    background: #fff;
    border-radius: 0.8rem;
}


/* --- Table --- */
.layout-fixed {
    table-layout: fixed;
}

.tbl-wrap {
    border-top: 0.2rem solid var(--color-gray-95);
    overflow-x: auto !important;
}

.tbl-wrap th {
    background: var(--color-gray-5);
    color: var(--color-gray-95);
    font-weight: 700;
}

.tbl-wrap .tbl.row tr {
    border-bottom: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.row td {
    text-align: left;
}

.tbl-wrap .tbl.col th {
    text-align: center;
}

.tbl-wrap .tbl.col td {
    border-bottom: 0.1rem solid var(--color-border);
    text-align: center;
    vertical-align: middle;
}

.tbl-wrap .tbl.data th {
    padding: 0.8rem 1.6rem;
    vertical-align: middle;
}

.tbl-wrap .tbl.data td {
    padding: 1.2rem;
    vertical-align: middle;
}

.tbl-wrap .tbl.border th {
    font-size: 1.7rem;
    border-left: 0.1rem solid var(--color-border);
    border-right: 0;
    border-top: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.border td {
    border-left: 0.1rem solid var(--color-border);
    border-top: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.border td[rowspan] {
    border-right: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.border th:first-of-type {
    border-left: 0;
}

.tbl-wrap .tbl.border td:first-of-type {
    border-left: 0;
}

.tbl-wrap .tbl.border tbody {
    border-bottom: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.border tbody th {
    border-right: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.narrow th,
.tbl-wrap .tbl.narrow td {
    padding: 0.6rem;
}

td.bg-yellow {
    background: var(--color-warning-5);
}

@media screen and (max-width: 767px) {
    .tbl-wrap .tbl.row colgroup {
        display: none;
    }

    .tbl-wrap .tbl.row tr {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 0;
    }
    .tbl-wrap .tbl.row th {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10rem;
        border-bottom: 0.1rem solid var(--color-border);
        word-break: break-all;
    }

    .tbl-wrap .tbl.row td {
        display: block;
        width: calc(100% - 10rem);
        border-bottom: 0.1rem solid var(--color-border);
        word-break: break-all;
    }

    .tbl-wrap .tbl.col {
        min-width: 50rem;
    }
}

.tbl-wrap .tbl-notice tr {
    border-bottom: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl-notice th,
.tbl-wrap .tbl-notice td {
    padding: 1.2rem 1.6rem;
    text-align: center;
}

.tbl-wrap .tbl-notice .num .notice {
    background: var(--color-information-50);
    color: #fff;
    font-size: 1.5rem;
    padding: 0.4rem 1.2rem;
    border-radius: 10rem;
}

.tbl-wrap .tbl-notice .subject {
    text-align: left;
    font-weight: 500;
}

.tbl-wrap .tbl-notice .subject a:hover {
    text-decoration: underline;
    text-underline-position: under;
    color: var(--color-information-70);
}

.tbl-wrap .tbl-notice .file i {
    vertical-align: middle;
}

.tbl-wrap .tbl-notice .notice-tr .subject {
    font-weight: 700;
}

.tbl-in-tbl {
    overflow-x: auto;
}

.tbl-in-tbl .tbl {
    border-top: 0.1rem solid var(--color-border);
    border-bottom: 0.1rem solid var(--color-border);
    border-left: 0.1rem solid var(--color-border);
    font-size: 1.6rem;
}

.tbl-in-tbl .tbl th {
    background: var(--color-information-5);
    color: var(--color-gray-95);
    font-weight: 500;
    border-right: 0.1rem solid var(--color-border);
    text-align: center;
}

.tbl-in-tbl .tbl td {
    border-right: 0.1rem solid var(--color-border);
}

.tbl-in-tbl .tbl.form th {
    padding: 1rem 1.6rem;
    vertical-align: middle;
}

.tbl-in-tbl .tbl.form td {
    padding: 0.6rem 0.8rem;
    vertical-align: middle;
    border-bottom: 0.1rem solid var(--color-border);
    text-align: center;
}

.tbl .file-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.4rem;
}

.tbl.file-list > li a {
	word-break: break-all;	
}

.tbl .file-list > li a:hover {
	text-decoration: underline;
	text-underline-position: under;
}

.tbl .file-list > li a i {
	vertical-align: middle;
	color: var(--color-gray-50);
}


/* --- Search Filter --- */
.search-filter-wrap {
	margin-bottom: 2.4rem;	
}

.search-filter-wrap fieldset {
    display: flex;
    flex-direction: column;
    padding: 2rem 4rem;
    background: var(--color-gray-5);
    border-radius: 1.2rem;
}

.search-filter-wrap .filter-floor {
    width: 100%;
    display: none;
    gap: 4.2rem;
    padding: 1.2rem 0;
    border-bottom: 0.1rem solid var(--color-gray-10);
}

.search-filter-wrap .filter-floor.filter-main {
    display: flex;
}

.search-filter-wrap.open .filter-floor:not(.filter-main) {
    display: flex;
}

.search-filter-wrap .filter-floor:first-of-type {
    padding-top: 0;
}

.search-filter-wrap .filter-floor:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.search-filter-wrap .form-item {
    width: 100%;
    display: inline-flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.search-filter-wrap .form-item.half {
    width: 50%;
    padding-right: 2.1rem;
}

.search-filter-wrap .form-item .form-tit {
    display: flex;
    gap: 0.4rem;
    min-width: 10rem;
    font-size: 1.6rem;
    height: 4rem;
    line-height: 4rem;
    flex-shrink: 0;
}

.search-filter-wrap .form-item .form-conts {
    display: flex;
    width: 100%;
}

.search-filter-wrap .form-item .form-conts .fold-btn {
    color: #fff;
    background: var(--color-gray-50);
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    top: 0.4rem;
}

.search-filter-wrap .form-item .form-conts.fold-btn:hover {
    background: var(--color-gray-90);
}

.search-filter-wrap .form-item .form-select {
    height: 4rem;
    padding: 0 4rem 0 1.6rem;
    background-size: 1.6rem;
    font-size: 1.6rem;
}

.search-filter-wrap .form-item .form-input {
    height: 4rem;
    font-size: 1.6rem;
}

.search-filter-wrap .form-item .check-area {
    position: relative;
    top: 0.6rem;
}

.search-filter-wrap .form-item .check-area.fold-area {
   height: 3rem;
   overflow: hidden;
   transition: var(--transition-base);
}

.search-filter-wrap .form-item .check-area.fold-area.open {
   height: auto;
}


.search-filter-wrap .btn-search-fold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.6rem;
}

.search-filter-wrap .btn-wrap {
    justify-content: center;
    margin-top: 1.6rem;
}

@media screen and (max-width: 767px) {
    .search-filter-wrap fieldset {
        gap: 1.6rem;
        padding: 2rem 1.6rem;
    }

    .search-filter-wrap .filter-floor {
        flex-wrap: wrap;
        gap: 1.6rem;
        border-bottom: 0;
        padding: 0;
    }

    .search-filter-wrap .filter-floor.filter-main {
        order: 0;
    }
    
    .search-filter-wrap .form-item {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .search-filter-wrap .form-item.half {
        width: 100%;
        padding-right: 0;
    }

    .search-filter-wrap .btn-search-fold {
        margin-top: 0;
    }

}

/* --- List Top --- */
.search-list-top {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0 1.6rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.search-list-top .sch-side {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.search-list-top .sch-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.9rem;
    font-weight: 500;
    gap: 0.8rem;
}

.search-list-top .sch-info .point {
    color: var(--color-primary-50);
    font-weight: 700;
}

.search-list-top .sch-sort {
    display: flex;
    align-items: center;
    gap: 0.8em;
}

.search-list-top .sch-sort > li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.search-list-top .sch-sort > li .sort-label {
    margin-right: 0.8rem;
}

.search-list-top .sch-sort > li .btn.text.active {
    text-decoration: underline;
    text-underline-position: under;
}

.search-list-top .sch-sort .form-chip-btn::before {
    display: none;
}

.search-list-top .sch-sort .form-chip-btn.favorites.active {
    border: 0.1rem solid #ffb114;
    background: rgba(255, 177, 20, 0.1);
    color: var(--color-gray-90);
    font-weight: 500;
}

.search-list-top .sch-sort .form-chip-btn.favorites.active i {
    color: #ffb114;
}

.search-list-top .btn-wrap {
    flex-wrap: wrap;
}

.select-view,
.gallery-select-view {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
}

.select-view .selected,
.gallery-select-view .selected {
    padding: 0 3.2rem 0 1.6rem;
    border: 0.1rem solid var(--color-border);
    height: 4rem;
    line-height: 4rem;
    border-radius: 4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #fff;
    background-image: url(/images/common/ico_angle.svg);
    background-size: 2rem;
    background-position: center right 0.8rem;
    background-repeat: no-repeat;
}
  
.select-view .options,
.gallery-select-view .options {
    position: absolute;
    margin-top: 0.1rem;
    width: 100%;
    background: #fff;
    max-height: 0;
    overflow: hidden;
    z-index: 10;
    border-radius: 1rem;
    border: 0;
}

.select-view .options li,
.gallery-select-view .options li {
    padding: 0 3.2rem 0 1.6rem;
    height: 4rem;
    line-height: 4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 0.1rem solid var(--color-border);
}

.select-view .options li:last-of-type,
.gallery-select-view .options li:last-of-type {
    border-bottom: 0;
}

.select-view .options li:hover,
.gallery-select-view .options li:hover {
    background-color: var(--color-gray-10);
}

.select-view.open .options,
.gallery-select-view.open .options {
    max-height: 1000px;
    border: 0.1rem solid var(--color-border);
}

@media screen and (max-width: 767px) {
    .select-view {
        display: none;
    }
}


/* --- List Board --- */
.tbl-wrap .tbl.board th,
.tbl-wrap .tbl.board td {
	padding: 0.8rem 1.6rem;
	vertical-align: middle;
    text-align: center;
}

.tbl-wrap .tbl.board td.subject {
	text-align: left;
}

.tbl-wrap .tbl.board td.subject a {
	word-break: break-all;
	text-decoration: underline;
	text-underline-position: under;
	color: var(--color-information-70);
}

.tbl-wrap .tbl.board td.subject a:hover {
	color: var(--color-information-90);
}

.tbl-wrap .tbl.board td .label-notice {
	font-size: 1.5rem;
	background: var(--color-danger-50);
	color: #fff;
	padding: 0.4rem 1.2rem;
	border-radius: 10rem;
}

.tbl-wrap .tbl.board td i {
	vertical-align: middle;
}

.tbl-wrap .tbl.board tbody tr {
	border-bottom: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.board tbody tr.tr-notice td.subject a {
	font-weight: 700;
}

.tbl-wrap .tbl.board tbody tr.nodata td {
	padding: 2rem 0;
}

@media screen and (max-width: 767px) {
	.tbl-wrap .tbl.board {
		display: block;
	}
	
    .tbl-wrap .tbl.board thead {
    	display: none;
    }
    
    .tbl-wrap .tbl.board tbody {
    	display: block;
    }
    
    .tbl-wrap .tbl.board tr {
    	display: block;
    	padding: 0.8rem 0;
    }
    
    .tbl-wrap .tbl.board tr:nth-of-type(even) {
    	background: var(--color-gray-5);
    }
    
    .tbl-wrap .tbl.board td {
    	display: flex;
    	text-align: left;
    	padding: 0.2rem 0.8rem;
    	font-size: 1.5rem;
    }
    
    .tbl-wrap .tbl.board td::before {
    	content: attr(aria-label);
    	display: inline-block;
    	margin-right: 0.8rem;
    	font-weight: 700;
        flex-shrink: 0;
    }
    
    .tbl-wrap .tbl.board td i {
		font-size: 1.6rem;
	}
	
	.tbl-wrap .tbl.board td .label-notice {
		font-size: 1.3rem;
	}

    .tbl-wrap .tbl.board td .tag {
        height: auto;
        padding: 0.4rem 1rem;
        font-size: 1.4rem;
    }
}


/* --- Recurit Board --- */
.tbl-wrap .tbl.recruit tr {
    border-bottom: 0.1rem solid var(--color-border);
}

.tbl-wrap .tbl.recruit th,
.tbl-wrap .tbl.recruit td {
	vertical-align: middle;
    text-align: center;
}

.tbl-wrap .tbl.recruit th {
    padding: 0.8rem 1.6rem;
}

.tbl-wrap .tbl.recruit td {
    padding: 1.6rem;
}

.tbl-wrap .tbl.recruit .badge-wrap {
    margin-bottom: 0.6rem;
}

.tbl-wrap .tbl.recruit .title {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    display: inline-block;
    word-break: break-all;
}

.tbl-wrap .tbl.recruit .title:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.tbl-wrap .tbl.recruit .info-wrap {
    display: flex;
    gap: 0 2rem;
    flex-wrap: wrap;
}

.tbl-wrap .tbl.recruit .info-wrap .label {
    color: var(--color-gray-50);
}

.tbl-wrap .tbl.recruit .info-wrap .value {
    color: var(--color-gray-70);
}

.tbl-wrap .tbl.recruit .d-day {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-information-50);
}

.tbl-wrap .tbl.recruit .mb-show {
    display: none;
}

@media screen and (max-width: 767px) {
    .tbl-wrap .tbl.recruit .mb-hidden {
        display: none;
    }

    .tbl-wrap .tbl.recruit {
        display: block;
    }

    .tbl-wrap .tbl.recruit .date {
        font-weight: 500;
        color: var(--color-gray-70);
    }

    .tbl-wrap .tbl.recruit .mb-show {
        display: inline-block;
    }

     .tbl-wrap .tbl.recruit .date .mb-show {
        font-weight: 500;
        color: var(--color-gray-50);
    }

    .tbl-wrap .tbl.recruit > thead {
        display: none;
    }

    .tbl-wrap .tbl.recruit > tbody {
        display: block;
    }

    .tbl-wrap .tbl.recruit > tbody > tr {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 1.6rem 0;
        gap: 0.8rem;
    }

    .tbl-wrap .tbl.recruit > tbody > tr > td {
        text-align: left;
        padding: 0 1.6rem;
    }
}


/* --- Gallery Board --- */
.gallery-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.6rem;
}

.gallery-list li > a {
    display: block;
    height: 100%;
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
} 

.gallery-list li .thumb {
    border-top-right-radius: 1.2rem;
    border-top-left-radius: 1.2rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-bottom: 0.1rem solid var(--color-border);
    position: relative;
    background: var(--color-gray-5);
}

.gallery-list li .thumb:not(.noimg)::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    background-image: url(/images/sub/video_play.png);
    background-repeat: no-repeat;
    background-size: 6rem;
    background-position: center;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0.8;
}

.gallery-list li .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base);
}

.gallery-list li .info {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gallery-list li .info .badge-wrap {
    margin-bottom: 0.4rem;
}

.gallery-list li .info .title {
    font-weight: 700;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 5rem;
}

.gallery-list li .info .tag-wrap {
    margin-top: 0.4rem;
}

.gallery-list li .info .text-wrap {
    display: flex;
    gap: 0.8rem;
    border-top: 0.1rem dotted var(--color-border);
    padding-top: 0.8rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
}

.gallery-list li .info .text {
    font-size: 1.5rem;
    color: var(--color-text-subtle);
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.gallery-list li .info .text i {
    color: var(--color-text-disabled);
}

.gallery-list li > a:hover .thumb img {
    transform: scale(1.1);
} 

@media screen and (max-width: 1439px) {
    .gallery-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 1023px) {
    .gallery-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 599px) {
    .gallery-list {
        grid-template-columns: 1fr;
    }
}


/* --- View Board --- */
.board-view {
	border-top: 0.2rem solid var(--color-gray-95);
}

.board-view .view-head {
	padding: 1.6rem;
	border-bottom: 0.1rem dotted var(--color-border);
}

.board-view .view-head .tit {
	font-size: 1.9rem;
	font-weight: 700;
	margin-bottom: 0.8rem;
}

.board-view .view-head .view-info {
	display: flex;
	gap: 0 0.8rem;
	font-size: 1.5rem;
	flex-wrap: wrap;
}

.board-view .view-head .view-info > li::after {
	content: '';
	display: inline-block;
	width: 0.1rem;
	height: 1rem;
	background: var(--color-border);
	margin-left: 0.8rem;
}

.board-view .view-head .view-info > li:last-of-type::after{
	display: none;
}

.board-view .view-head .view-info > li b {
	margin-right: 0.8rem;
	color: var(--color-gray-50);
}

.board-view .view-body .view-file {
	background: var(--color-gray-5);
	padding: 1.6rem;
	display: flex;
	gap: 1.6rem;
	border-bottom: 0.1rem solid var(--color-border);
	font-size: 1.5rem;
}

.board-view .view-body .view-file .tit {
	font-weight: 500;
	flex-shrink: 0;
}

.board-view .view-body .view-file .file-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.4rem;
}

.board-view .view-body .view-file .file-list > li a {
	word-break: break-all;	
}

.board-view .view-body .view-file .file-list > li a:hover {
	text-decoration: underline;
	text-underline-position: under;
}

.board-view .view-body .view-file .file-list > li a i {
	vertical-align: middle;
	color: var(--color-gray-50);
}

.board-view .view-body .view-file .nodata {
	color: var(--color-gray-50);
}

.board-view .view-body .view-txt {
	padding: 2.4rem 1.6rem;
    min-height: 42rem;
}

.board-view .view-foot {
	border-top: 0.1rem solid var(--color-gray-95);
}

.board-view .view-foot .view-prev,
.board-view .view-foot .view-next {
	border-bottom: 0.1rem solid var(--color-border);
	padding: 1.6rem;
	display: flex;
	gap: 1.6rem;
}

.board-view .view-foot > div b {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--color-gray-50);
}

.board-view .view-foot > div a {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.board-view .view-foot > div a.nodata {
	cursor: default;
	color: var(--color-gray-50);
}

.board-view .view-foot > div a:not(.nodata):hover {
	text-decoration: underline;
	text-underline-position: under;
}

@media screen and (max-width: 767px) {
	.board-view .view-head {
		padding: 1.2rem;
	}
	
	.board-view .view-body .view-file {
		padding: 1.2rem;
	}
	
	.board-view .view-body .view-txt {
		padding: 1.2rem;
        min-height: auto;
	}
	
	.board-view .view-foot .view-prev,
	.board-view .view-foot .view-next {
		padding: 1.2rem;
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 424px) {
	.board-view .view-body .view-file {
		flex-direction: column;
		gap: 0.4rem;
	}
}


/* --- Recurit Board --- */
.incurit-view {
	border-top: 0.2rem solid var(--color-gray-95);
}

.incurit-view .incurit-tit {
    padding: 1.6rem;
    border-bottom: 0.1rem dotted var(--color-border);
    background: var(--color-secondary-5);
}

.incurit-view .incurit-tit > p {
    font-size: 2rem;
	font-weight: 700;
}

.incurit-view .incurit-info {
    padding: 1.6rem;
    border-bottom: 0.1rem dotted var(--color-border);
}

.incurit-view .incurit-info > ul {
    display: flex;
	gap: 0.4rem 4rem;
    flex-wrap: wrap;
}

.incurit-view .incurit-info > ul > li {
    display: flex;
    gap: 0.8rem;
    position: relative;
    padding-left: 1.2rem;
}

.incurit-view .incurit-info > ul > li::before {
	content: '';
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
    border-radius: 50%;
	background: var(--color-secondary-50);
    position: absolute;
    top: 0.8rem;
    left: 0;
}

.incurit-view .incurit-info > ul > li b {
	color: var(--color-gray-50);
}

.incurit-view .incurit-file {
	background: var(--color-gray-5);
	padding: 1.6rem;
	display: flex;
	gap: 1.6rem;
	border-bottom: 0.1rem solid var(--color-border);
}

.incurit-view .incurit-file .tit {
	font-weight: 500;
	flex-shrink: 0;
}

.incurit-view .incurit-file .file-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.4rem;
}

.incurit-view .incurit-file .file-list > li > a {
	word-break: break-all;	
}

.incurit-view .incurit-file .file-list > li > a:hover {
	text-decoration: underline;
	text-underline-position: under;
}

.incurit-view .incurit-file .file-list > li > a i {
	vertical-align: middle;
	color: var(--color-gray-50);
}

.incurit-view .incurit-file .file-list .nodata {
	color: var(--color-gray-50);
}

.incurit-view .incurit-txt {
    border: 0.1rem solid var(--color-border);
    margin: 2rem 0;
    border-radius: 1.2rem;
    padding: 2.4rem;
}

@media screen and (max-width: 767px) {
	.incurit-view .incurit-tit {
		padding: 1.2rem;
	}
	
	.incurit-view .incurit-info {
		padding: 1.2rem;
	}
	
    .incurit-view .incurit-file {
        padding: 1.2rem;
    }

    .incurit-view .incurit-txt {
        padding: 1.2rem;
    }

	.board-view .view-foot .view-prev,
	.board-view .view-foot .view-next {
		padding: 1.2rem;
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 424px) {
	 .incurit-view .incurit-file {
		flex-direction: column;
		gap: 0.4rem;
	}
}


/* --- Apply List --- */
.apply-list-wrap > ul {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.apply-list-wrap > ul > li {
    border: 0.1rem solid var(--color-border);
    padding: 1.6rem 2rem;
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.apply-list-wrap .apply-status {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.apply-list-wrap .apply-status .date {
    font-size: 1.5rem;
    color: var(--color-gray-70);
    flex-shrink: 0;
}

.apply-list-wrap .apply-tit {
    font-size: 1.9rem;
    font-weight: 700;
}

.apply-list-wrap .apply-tit > a {
    display: inline-block;
}

.apply-list-wrap .apply-tit > a:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.apply-list-wrap .apply-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.1rem dotted var(--color-border);
    padding-top: 1.2rem;
}

.apply-list-wrap .apply-info > ul {
    display: flex;
    gap: 0.4rem 4rem;
    flex-wrap: wrap;
}

.apply-list-wrap .apply-info > ul > li {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.apply-list-wrap .apply-info > ul > li .label {
    background: var(--color-gray-10);
    padding: 0.4rem 1.2rem;
    border-radius: 3rem;
    font-weight: 500;
    font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
    .apply-list-wrap > ul > li {
        padding: 1.6rem
    }

    .apply-list-wrap .apply-status {
        flex-direction: column;
    }

    .apply-list-wrap .apply-status .badge-wrap {
        order: 2;
    }

    .apply-list-wrap .apply-status .date {
        order: 1;
    }

    .apply-list-wrap .apply-info {
        flex-direction: column;
        gap: 1.2rem;
        align-items: flex-start;
    }

    .apply-list-wrap .apply-info .btn-wrap {
        width: 100%;
        justify-content: center;
    }

    .apply-list-wrap .apply-info .btn-wrap .btn {
        width: 100%;
    }
}


/* --- List Common --- */
.structured-list:not(.swiper-wrapper) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.6rem;
}

.structured-list.nodata {
	border-top: 0.2rem solid var(--color-gray-70);
	border-bottom: 0.1rem solid var(--color-border);
	display: block;
    text-align: center;
    padding: 4rem 0;
    font-size: 1.5rem;
    color: var(--color-text-subtle);
}

.structured-list.nodata::before {
    content: '';
    display: inline-block;
    width: 12rem;
    height: 6.9rem;
    background: url(/images/sub/nodata.png) no-repeat;
    background-size: cover;
    opacity: 0.5;
    margin-bottom: 1.6rem;
}

.structured-list > li {
    position: relative;
    width: 100%;
}

.structured-list > li > a {
    height: 100%;
}

.structured-item {
    position: relative;
    background: #fff;
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    min-width: 0;
}

.structured-item .card-body .c-tit {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.modal .structured-list:not(.swiper-wrapper) {
    grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 1023px) {
    .structured-list:not(.swiper-wrapper) {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .structured-list:not(.swiper-wrapper) {
        grid-template-columns: 1fr;
    }
}

/* --- List Program --- */
.structured-list[data-role='program'] > li > a {
    display: block;
    border-radius: 1.2rem;
    
}

.structured-list[data-role='program'] > li > a:focus,
.structured-list[data-role='program'] > li > a:active {
    top: 0;
    outline-offset: -0.4rem;
    box-shadow: inset 0 0 0 0.4rem var(--color-gray-50);
    
}

.structured-list[data-role='program'] > li > a:hover .card-thumbnail > img {
    transform: scale(1.1);
}

.structured-list[data-role='program'] .card-thumbnail {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
    background-color: var(--color-gray-10);
}

.structured-list[data-role='program'] .card-thumbnail .badge-wrap {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
}

.structured-list[data-role='program'] .card-thumbnail > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base);
}

/* .structured-list[data-role='program'] .card-thumbnail > .cert-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4rem;
    left: 1.2rem;
    background: #fff;
    height: 2.4rem;
    padding: 0 0.6rem;
    border-radius: 0.4rem;
    box-shadow: var(--box-shadow-base);
}

.structured-list[data-role='program'] .card-thumbnail > .cert-logo > img {
    height: 60%;
} */

/* .structured-list[data-role='program'] .card-thumbnail > .hashtag  {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 1.5rem;
} */

.structured-list[data-role='program'] .card-thumbnail .thumb-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.structured-list[data-role='program'] .card-thumbnail .thumb-bottom .cert-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    height: 2.4rem;
    padding: 0 0.6rem;
    border-radius: 0.4rem;
    box-shadow: var(--box-shadow-base);
    margin-right: 1.2rem;
    margin-bottom: 1.2rem;
}

.structured-list[data-role='program'] .card-thumbnail .thumb-bottom .cert-logo > img {
    height: 60%;
}

.structured-list[data-role='program'] .card-thumbnail .thumb-bottom .hashtag {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 1.5rem;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.structured-list[data-role='program'] .card-body {
    padding: 1.6rem;
}

.structured-list[data-role='program'] .card-body .type {
    display: flex;
    gap: 0.8rem;
    font-size: 1.5rem;
    color: var(--color-text-subtle);
}

.structured-list[data-role='program'] .card-body .type span {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.structured-list[data-role='program'] .card-body .type span:not(:last-of-type)::after {
    content: '';
    display: block;
    width: 0.1rem;
    height: 1.4rem;
    background: var(--color-gray-20);
}

.structured-list[data-role='program'] .card-body .c-subtit {
    font-size: 1.5rem;
    color: var(--color-text-subtle);
}

.structured-list[data-role='program'] .card-body .c-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.structured-list[data-role='program'] .card-body .c-info > ul {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    gap: 0.4rem;
}

.structured-list[data-role='program'] .card-body .c-info > ul > li {
    display: flex;
    gap: 0.4rem 0.8rem;
    align-items: flex-start;
}

.structured-list[data-role='program'] .card-body .c-info > ul > li .title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    width: 7.2rem;
}

.structured-list[data-role='program'] .card-body .c-info > ul > li .title i {
    color: var(--color-information-50);
}

.structured-list[data-role='program'] .card-body .c-info .institution {
    font-size: 1.5rem;
    color: var(--color-text-subtle);
}

.structured-list[data-role='program'] .card-body .c-info .price {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-information-50);
}

.structured-list[data-role='program'] .card-btm {
    padding-top: 1.2rem;
    margin-top: 1.2rem;
    border-top: 0.1rem solid var(--color-gray-10);
}

.structured-list[data-role='program'] .btn-like {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3.2rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.structured-list[data-role='program'] .btn-like i {
    display: block;
}

.structured-list[data-role='program'] .btn-like.active {
    color: #ffb114;
}

.structured-list[data-role='program'] .card-cover {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 4rem 1.6rem;
    border-radius: 1.2rem;    
    color: #fff;
}

.structured-list[data-role='program'] .card-cover .c-cover-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.structured-list[data-role='program'] .card-cover .c-cover-list > li {
    display: flex;
    gap: 1.6rem;
}

.structured-list[data-role='program'] .card-cover .c-cover-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 4.8rem;
    background: var(--color-secondary-50);
    flex-shrink: 0;
}

.structured-list[data-role='program'] .card-cover .c-cover-info .c-cover-tit {
    font-size: 1.7rem;
    font-weight: 700;
}

.structured-list[data-role='program'] .card-cover .c-cover-info .c-cover-txt {
    font-size: 1.5rem;
}

.structured-list[data-role='program'].list-row {
    grid-template-columns: 1fr;
}

.structured-list[data-role='program'].list-row > li > a {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.structured-list[data-role='program'].list-row .card-thumbnail {
    width: 30rem;
    flex-shrink: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 1.2rem;
}

.structured-list[data-role='program'].list-row .card-body {
    width: 100%;
    padding: 1.6rem 0.8rem;
}

.structured-list[data-role='program'].list-row .card-body .c-info > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    width: 100%;
}

@media screen and (max-width: 1439px) {
    .structured-list:not(.swiper-wrapper) {
    	grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 1023px) {
    .structured-list[data-role='program']:not(.swiper-wrapper) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .structured-list[data-role='program'].list-row {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 767px) {
    .structured-list[data-role='program']:not(.swiper-wrapper) {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 599px) {
    .structured-list[data-role='program']:not(.swiper-wrapper) {
        grid-template-columns: 1fr;
    }
}


/* --- List Institute --- */
.structured-list[data-role='institute'] > li > a {
    display: block;
    border-radius: 1.2rem;
    padding: 0.8rem 0.8rem 0 0.8rem;
}

.structured-list[data-role='institute'] .card-thumbnail {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 1.2rem;
    border: 0.1rem solid var(--color-border);
    background-color: var(--color-gray-10);
}

.structured-list[data-role='institute'] .card-thumbnail::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -1.5rem;
    background-color: rgba(0, 0, 0, 0.7);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 2.8rem;
    transform: scale(1);
    transition: var(--transition-base);
    z-index: 1;
}

.structured-list[data-role='institute'] .card-thumbnail::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(0);
    background-color: #fff;
    background-image: url(/images/sub/ico_plus.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 4rem;
    height: 4rem;
    margin-top: -2rem;
    margin-left: -2rem;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    transition: var(--transition-base);
}

/* .structured-list[data-role='institute'] > li > a:hover .card-thumbnail::before {
    transform: scale(20);
}

.structured-list[data-role='institute'] > li > a:hover .card-thumbnail::after {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
} */

.structured-list[data-role='institute'] .card-thumbnail .badge-wrap {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.structured-list[data-role='institute'] .card-thumbnail .badge {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 1.6rem;
    border-radius: 0;
    border-bottom-left-radius: 0.4rem;
    font-weight: 500;
}

.structured-list[data-role='institute'] .card-thumbnail > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: var(--transition-base);
}

.structured-list[data-role='institute'] > li > a:hover .card-thumbnail img {
    transform: scale(1.1);
}

.structured-list[data-role='institute'] .card-body {
    position: relative;
    padding: 2.4rem 0.8rem 1.6rem;
}

.structured-list[data-role='institute'] .card-body .c-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -2.4rem;
    right: 1.6rem;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 0.6rem;
    box-shadow: var(--box-shadow-legend);
    z-index: 1;
    background: #fff;
}

.structured-list[data-role='institute'] .card-body .c-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 3.6rem;
}

.structured-list[data-role='institute'] .card-body .c-icon span.bg-org {
    background: var(--color-org);
}

.structured-list[data-role='institute'] .card-body .c-icon span.bg-kindy {
    background: var(--color-kindy);
}

.structured-list[data-role='institute'] .card-body .c-icon span.bg-center {
    background: var(--color-center);
}

.structured-list[data-role='institute'] .card-body .c-icon span.bg-prov {
    background: var(--color-prov);
}

.structured-list[data-role='institute'] .card-body .c-icon span img {
    width: 60%;
}

.structured-list[data-role='institute'] .card-body .c-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-size: 1.5rem;
    color: var(--color-text-subtle);
}

.structured-list[data-role='institute'] .card-body .c-info > div {
    display: flex;
    gap: 0.8rem;
}

.structured-list[data-role='institute'] .card-body .icon {
    color: var(--color-text-disabled);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.structured-list[data-role='institute'] .btn-like {
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3.2rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.structured-list[data-role='institute'] .btn-like i {
    display: block;
}

.structured-list[data-role='institute'] .btn-like.active {
    color: #ffb114;
}

.structured-list[data-role='institute'].list-row {
    grid-template-columns: 1fr;
}

.structured-list[data-role='institute'].list-row > li > a {
    display: flex;
    padding: 0.8rem;
    gap: 3.2rem;
}

.structured-list[data-role='institute'].list-row .card-thumbnail {
    width: 24rem;
    flex-shrink: 0;
}

.structured-list[data-role='institute'].list-row .card-body {
    width: 100%;
    padding: 2rem 1.6rem 2em 0;
}

.structured-list[data-role='institute'].list-row .card-body .c-icon {
    top: 0.8rem;
    right: 0.8rem;
}

.structured-list[data-role='institute'].list-row .structured-item .card-body .c-tit {
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 0.1rem dashed var(--color-border);
}


/* --- Structured Card List --- */
.structured-card-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.6rem;
}

.structured-card-list > li {
    position: relative;
}

.structured-card-list > li > a {
    background: var(--color-secondary-5);
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: 100%;
}

.structured-card-list > li > a:hover {
    box-shadow: var(--box-shadow-base);
    border: 0.1rem solid var(--color-secondary-50);
}

.structured-card-list .logo {
    aspect-ratio: 4 / 1;
    padding: 1rem;
    overflow: hidden;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.8rem;
    background: #fff;
}

.structured-card-list .logo.noimg {
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    opacity: 0.8;
    background: radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#efefef 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #efefef 2px, #ffffff 2px) -1px 0;
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
    text-align: center;
    line-height: 1;
}

.structured-card-list .logo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.structured-card-list .card-body .c-subtit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.structured-card-list .card-body .c-subtit {
    font-size: 1.5rem;
    color: var(--color-text-subtle);
    margin-bottom: 0.2rem;
}

.structured-card-list .card-body .c-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    flex-shrink: 0;
}

.structured-card-list .card-body .c-icon.bg-org {
    background: var(--color-org);
}

.structured-card-list .card-body .c-icon.bg-kindy {
    background: var(--color-kindy);
}

.structured-card-list .card-body .c-icon.bg-center {
    background: var(--color-center);
}

.structured-card-list .card-body .c-icon.bg-forest {
    background: var(--color-forest);
}

.structured-card-list .card-body .c-icon.bg-huyang {
    background: var(--color-huyang);
}

.structured-card-list .card-body .c-icon.bg-healing {
    background: var(--color-healing);
}

.structured-card-list .card-body .c-icon.bg-arb {
    background: var(--color-arb);
}

.structured-card-list .card-body .c-icon.bg-prov {
    background: var(--color-prov);
}

.structured-card-list .card-body .c-icon.bg-wood {
    background: var(--color-wood);
}

.structured-card-list .card-body .c-icon img {
    width: 60%;
}

.structured-card-list .card-body .c-tit {
    font-size: 1.9rem;
    font-weight: 700;
}

.structured-card-list .card-body .c-info {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 0.1rem dashed var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 1.5rem;
    color: var(--color-text-subtle);
}

.structured-card-list .card-body .c-info .item {
    display: flex;
    gap: 0.8rem;
}

.structured-card-list .card-body .c-info .title {
    width: 6rem;
    display: flex;
    gap: 0.4rem;
    color: var(--color-gray-90);
    flex-shrink: 0;
    font-weight: 500;
}

.structured-card-list .card-body .c-info .title i {
    margin-top: 0.2rem;
    color: var(--color-text-disabled);
}

.structured-card-list .card-bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.structured-card-list .card-bottom .btn-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1.6rem;
}

.structured-card-list .sns-btn {
    display: flex;
    gap: 0.8rem;
}

.structured-card-list .sns-btn a {
    width: 3rem;
    height: 3rem;
    border-radius: 0.4rem;
    border: 0.1rem solid var(--color-border);
    flex-shrink: 0;
    overflow: hidden;
}

@media screen and (max-width: 1439px) {
    .structured-card-list {
    	grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 1023px) {
    .structured-card-list {
    	grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 599px) {
    .structured-card-list {
    	grid-template-columns: 1fr;
    }
}


/* --- List Legend --- */
.list-legend-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.6rem;
    font-size: 1.5rem;
    border: 0.1rem solid var(--color-border);
    padding: 1.6rem;
    border-radius: 0.8rem;
    font-weight: 500;
    margin: 1.6rem 0;
    background: #fff;
}

.list-legend-wrap > li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.list-legend-wrap > li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
}

.list-legend-wrap > li .icon.bg-org {
    background: var(--color-org);
}

.list-legend-wrap > li .icon.bg-kindy {
    background: var(--color-kindy);
}

.list-legend-wrap > li .icon.bg-center {
    background: var(--color-center);
}

.list-legend-wrap > li .icon.bg-forest {
    background: var(--color-forest);
}

.list-legend-wrap > li .icon.bg-huyang {
    background: var(--color-huyang);
}

.list-legend-wrap > li .icon.bg-healing {
    background: var(--color-healing);
}

.list-legend-wrap > li .icon.bg-prov {
    background: var(--color-prov);
}

.list-legend-wrap > li .icon.bg-arb {
    background: var(--color-arb);
}

.list-legend-wrap > li .icon.bg-wood {
    background: var(--color-wood);
}

.list-legend-wrap > li .icon.bg-cert {
    background: var(--color-cert);
}

.list-legend-wrap > li .icon.bg-school {
    background: var(--color-school);
}

.list-legend-wrap > li .icon.bg-normal {
    background: var(--color-normal);
}

.list-legend-wrap > li .icon.bg-neulbom {
    background: var(--color-neulbom);
}

.list-legend-wrap > li .icon img {
    width: 60%;
}

.list-legend-wrap > li > a {
    text-decoration: underline;
    text-underline-position: under;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.list-legend-top {
    text-align: right;
}

.list-legend-top + .list-legend-wrap {
    margin-top: 0;
}

.legend-select-list {
    border: 0.1rem solid var(--color-border);
    padding: 1.6rem;
    border-radius: 0.8rem;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.legend-select-list > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    gap: 0.4rem;
    font-weight: 500;
}

.legend-select-list > li > a:hover {
    text-decoration: underline;
}

.legend-select-list .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 6rem;
}

.legend-select-list .title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-select-list .icon.bg-org {
    background: var(--color-org);
}

.legend-select-list .icon.bg-kindy {
    background: var(--color-kindy);
}

.legend-select-list .icon.bg-center {
    background: var(--color-center);
}

.legend-select-list .icon.bg-forest {
    background: var(--color-forest);
}

.legend-select-list .icon.bg-huyang {
    background: var(--color-huyang);
}

.legend-select-list .icon.bg-healing {
    background: var(--color-healing);
}

.legend-select-list .icon.bg-arb {
    background: var(--color-arb);
}

.legend-select-list .icon.bg-prov {
    background: var(--color-prov);
}

.legend-select-list .icon img {
    width: 60%;
}


/* --- Slide Program --- */
[class^="program-slide"] {
    position: relative;
}

[class^="program-slide"] .swiper-slide {
    height: auto;
}

[class^="program-slide"] .swiper-button-next {
    right: -4.8rem;
    color: var(--color-text-subtle);
}

[class^="program-slide"] .swiper-button-prev {
    left: -4.8rem;
    color: var(--color-text-subtle);
}

.box-floor-side [class^="program-slide"] .swiper-button-next,
.box-floor-side [class^="program-slide"] .swiper-button-prev{
    top: -4rem;
}

.box-floor-side [class^="program-slide"] .swiper-button-next {
    right: 0;
}

.box-floor-side [class^="program-slide"] .swiper-button-prev {
    left: auto;
    right: 4rem;
}

.box-floor-side [class^="program-slide"] .swiper-button-next:after,
.box-floor-side [class^="program-slide"] .swiper-button-prev:after {
    font-size: 2rem;
}

@media screen and (max-width: 1320px) {
    [class^="program-slide"] .swiper-button-next
    [class^="program-slide"] .swiper-button-prev {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    [class^="program-slide"] .swiper-slide {
        width: 28rem;
    }
}


/* --- Slide Institute --- */
.institute-slide {
    position: relative;
}

.institute-slide .swiper-button-next {
    right: -4.8rem;
    color: var(--color-text-subtle);
}

.institute-slide .swiper-button-prev {
    left: -4.8rem;
    color: var(--color-text-subtle);
}

@media screen and (max-width: 1320px) {
    .institute-slide .swiper-button-next,
    .institute-slide .swiper-button-prev {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .institute-slide {
        margin: 0 -2.4rem;
    }

    .institute-slide .swiper {
        padding-left: 2.4rem !important;
    }

    .institute-slide .swiper-slide {
        margin-right: 1.6rem !important;
        max-width: 30%;
    }
}

@media screen and (max-width: 767px) {
    .institute-slide .swiper-slide {
        max-width: 45%;
    }
}

@media screen and (max-width: 424px) {
    .institute-slide .swiper-slide {
        max-width: 85%;
    }
}


/* --- Slide Intro --- */
.intro-swiper {
    position: relative;
}

.intro-swiper .swiper-util {
    position: absolute;
    left: 0;
    bottom: 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.intro-swiper .swiper-pagination {
    width: auto !important;
    position: static;
}

.intro-swiper .swiper-button-next,
.intro-swiper .swiper-button-prev {
    position: static;
    color: var(--color-gray-50);
    width: auto;
    height: auto;
    margin-top: 0;
}

.intro-swiper .swiper-button-next::after,
.intro-swiper .swiper-button-prev::after {
    display: none;
}

@media screen and (max-width: 767px) {
    .intro-swiper .swiper-util {
        justify-content: center;
        bottom: 0;
    }
}


/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 4rem;
    color: var(--color-text-subtle);
}

.pagination .page-navi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-navi.disabled {
    color: var(--color-text-disabled);
    cursor: default;
}

/* .pagination .page-navi.prev {
    padding: 0 0.8rem 0 0.4rem;
} */

/* .pagination .page-navi.prev::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    mask: url(/images/common/ico_angle.svg) no-repeat center;
    mask-size: contain;
    transform: rotate(90deg);
    background: var(--color-text-disabled);
} */

/* .pagination .page-navi.next {
    padding: 0 0.4rem 0 0.8rem;
} */

/* .pagination .page-navi.next::after {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    mask: url(/images/common/ico_angle.svg) no-repeat center;
    mask-size: contain;
    transform: rotate(-90deg);
    background: var(--color-text-disabled);
} */

.pagination .page-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.pagination .page-links .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.6rem;
    transition: var(--transition-base);
}

.pagination .page-links .page-link.active {
    background: var(--color-secondary-70);
    font-weight: 700;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .pagination {
        margin-top: 2.4rem;
    }
}

/* --- View Program --- */
.program-summary-box {
    border-radius: 1.2rem;
    padding: 2rem 2.4rem 2.4rem 2.4rem;
    margin-bottom: 4rem;
    /* background: var(--color-secondary-5); */
    border: 0.1rem solid var(--color-border);
    position: relative;
}

.program-summary-box .box-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border-bottom: 0.2rem solid var(--color-gray-90);
    padding-bottom: 1.6rem;
}

.program-summary-box .box-top .title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 2.4rem;
    font-weight: 700;
}

.program-summary-box .box-top .b-details {
    display: flex;
    gap: 1.6rem;
    font-weight: 500;
}

.program-summary-box .box-top .b-details b {
    color: var(--color-text-subtle);
    font-weight: 400;
}

.program-summary-box .box-body .thumbnail {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    background-color: #fff;
    border: 0.1rem solid var(--color-border);
}

.program-summary-box .box-body .thumbnail .swiper-slide {
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: var(--color-gray-10);
}

.program-summary-box .box-body .thumbnail .swiper-slide > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.program-summary-box .box-body .thumbnail .swiper-button {
    width: 5rem;
    height: 5rem;
    background: rgba(0, 0, 0, 0.5);
    border: #000;
    transition: var(--transition-base);
}

.program-summary-box .box-body .thumbnail .swiper-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.program-summary-box .box-body .thumbnail .swiper-button::after {
    transform: scale(0.5);
    color: #fff;
}

.program-summary-box .box-body .thumbnail .swiper-button-prev {
    left: 0;
}

.program-summary-box .box-body .thumbnail .swiper-button-next {
    right: 0;
}

.program-summary-box .box-body .thumbnail .swiper-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    position: absolute;
    width: auto;
    font-size: 1.5rem;
    padding: 0.4rem 1.2rem;
    border-radius: 1.5rem;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
}

.program-summary-box .box-body {
    display: flex;
    gap: 4rem;
    padding-top: 2.8rem;
}

.program-summary-box .box-body > .left {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 45%;
    flex-shrink: 0;
}

.program-summary-box .box-body .left .schedule-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.program-summary-box .box-body .left .schedule-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.program-summary-box .box-body .left .schedule-top .title {
    display: flex;
    align-items: center;
    font-size: 1.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.program-summary-box .box-body .left .month-info {
    border: 0.1rem solid var(--color-border);
    font-size: 1.5rem;
    border-radius: 1.2rem;
    overflow: hidden;
}

.program-summary-box .box-body .left .month-info table {
    table-layout: fixed;
}

.program-summary-box .box-body .left .month-info th,
.program-summary-box .box-body .left .month-info td {
    padding: 0.4rem;
    text-align: center;
    border-right: 0.1rem solid var(--color-border);
}

.program-summary-box .box-body .left .month-info th:last-of-type,
.program-summary-box .box-body .left .month-info td:last-of-type {
    border-right: 0;
}

.program-summary-box .box-body .left .month-info th {
    background: var(--color-secondary-5);
    font-weight: 500;
}

.program-summary-box .box-body .program-icon-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem;
    background: var(--color-secondary-5);
    border-radius: 1.2rem;
    padding: 0.8rem;
}

.program-summary-box .box-body .program-icon-info li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

.program-summary-box .box-body .program-icon-info li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 4.4rem;
    background: var(--color-secondary-50);
    font-size: 2.4rem;
    color: #fff;
}

.program-summary-box .box-body .program-icon-info li .text {
    display: flex;
    flex-direction: column;
    font-weight: 700;
}

.program-summary-box .box-body .program-icon-info li .text b {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text-subtle);
}

.program-summary-box .box-body .right {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
}

.program-summary-box .box-body .program-info tr {
    border-bottom: 0.1rem solid var(--color-border);
}

.program-summary-box .box-body .program-info tr:last-of-type {
    border-bottom: 0;
}

.program-summary-box .box-body .program-info th,
.program-summary-box .box-body .program-info td {
    padding: 1.6rem;
    text-align: left;
}

.program-summary-box .box-body .program-info th {
    padding-left: 0;
    vertical-align: middle;
    font-weight: 700;
}

.program-summary-box .box-body .program-info th .title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.program-summary-box .box-body .program-info th .title i {
    color: var(--color-information-50);
}

.program-summary-box .box-body .program-info td {
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
    word-break: break-all;
}

.program-summary-box .box-body .btn-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

.program-summary-box .box-body .btn-wrap .btn {
    width: 100%;
}

.program-summary-box .box-body .btn-wrap .btn-quick {
    display: none;
}

.program-summary-box .box-body .btn-util {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    top: 1.6rem;
    right: 1.6rem;
}

.program-summary-box .box-body .btn-util button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 4rem;
    background: #fff;
    border: 0.11rem solid var(--color-border);
    color: var(--color-text-subtle);
}

@media screen and (max-width: 1439px) {
    .program-summary-box .box-body .btn-wrap {
        flex-wrap: wrap;
    }

    .program-summary-box .box-body .btn-wrap .btn-quick {
        display: flex;
    }
}

@media screen and (max-width: 1023px) {
    .program-summary-box .box-top {
        padding-bottom: 0.8rem;
    }

    .program-summary-box .box-body {
        flex-direction: column;
        gap: 1.6rem;
        padding-top: 1.6rem;
    }

    .program-summary-box .box-body .left {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .program-summary-box {
        padding: 1.6rem;
        margin-bottom: 4rem;
    }

    .program-summary-box .box-top .title {
        flex-direction: column;
        align-items: flex-start
    }

	.program-summary-box .box-body .right {
		gap: 0.8rem;
	}
	
	.program-summary-box .box-body .program-info tr {
		display: block;
		padding: 0.4rem 0;
	}
	
	.program-summary-box .box-body .program-info th,
	.program-summary-box .box-body .program-info td {
		padding: 0.2rem 0;
	}
	
	.program-summary-box .box-body .program-info td {
		margin-left: 2.8rem;
	}

    .program-summary-box .box-body .btn-wrap .btn-quick {
        width: 100%;
    }

    .program-summary-box .box-body .btn-util button {
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 3.4rem;
    }

    .program-summary-box .box-body .btn-util button i {
        font-size: 1.7rem;
    }
}

/* --- View Institute --- */
.institute-summary-box {
    position: relative;
    background: var(--color-secondary-5);
    border-radius: 1.2rem;
    padding: 2.4rem;
    margin-bottom: 3.2rem;
}

.institute-summary-box .box-body {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.institute-summary-box .box-body .left {
    flex-shrink: 0;
    width: 45%;
}

.institute-summary-box .box-body .thumbnail {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    background-color: #fff;
    border: 0.1rem solid var(--color-border);
}

.institute-summary-box .box-body .thumbnail .swiper-slide {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-gray-10);
}

.institute-summary-box .box-body .thumbnail .swiper-slide > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.institute-summary-box .box-body .thumbnail .swiper-slide > p {
    position: absolute;
    color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.8rem;
    text-align: center;
}

.institute-summary-box .box-body .thumbnail .swiper-button {
    width: 4rem;
    height: 4rem;
    background: rgba(0, 0, 0, 0.5);
    border: #000;
    transition: var(--transition-base);
}

.institute-summary-box .box-body .thumbnail .swiper-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.institute-summary-box .box-body .thumbnail .swiper-button::after {
    transform: scale(0.5);
    color: #fff;
}

.institute-summary-box .box-body .thumbnail .swiper-button-prev {
    left: 0;
}

.institute-summary-box .box-body .thumbnail .swiper-button-next {
    right: 0;
}

.institute-summary-box .box-body .thumbnail .swiper-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    position: absolute;
    width: auto;
    font-size: 1.3rem;
    padding: 0.4rem 1.2rem;
    border-radius: 1.5rem;
    top: 1.2rem;
    bottom: auto;
    left: auto;
    right: 1.2rem;
}

.institute-summary-box .box-body .thumbnail .badge-wrap {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 1;
}

.institute-summary-box .box-body .right {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
    width: 55%;
}

.institute-summary-box .box-body .right > .title {
    display: flex;
    align-items: center;
    gap: 0 0.4rem;
    width: 100%;
    font-size: 2.4rem;
    font-weight: 700;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 6rem
}

.institute-summary-box .box-body .right > .title .sub-title {
    font-size: 1.7rem;
    font-weight: 400;
}

.institute-summary-box .box-body .right > .text {
    color: var(--color-text-subtle);
}

.institute-summary-box .box-body .institute-info {
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 1.2rem;
    padding: 0.4rem 1.6rem;
}

.institute-summary-box .box-body .institute-info > li {
    display: flex;
    gap: 2.4rem;
    padding: 0.4rem;
    border-bottom: 0.1rem dotted var(--color-border);
    align-items: center;
}

.institute-summary-box .box-body .institute-info > li:last-of-type {
    border-bottom: 0;
}

.institute-summary-box .box-body .institute-info > li .title {
    display: flex;
    gap: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    /* min-width: 12rem; */
}

.institute-summary-box .box-body .institute-info > li .title .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary-80);
}

.institute-summary-box .box-body .institute-info > li .text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 3.2rem;
}

.institute-summary-box .box-body .institute-info > li .text .sns-btn {
    display: flex;
    gap: 0.8rem;
}

.institute-summary-box .box-body .institute-info > li .text .sns-btn a {
    width: 3.2rem;
    border-radius: 04rem;
    border: 0.1rem solid var(--color-border);
    overflow: hidden;
}

.btn-wrap-quick {
    position: fixed;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.btn-wrap-quick > li > a {
    background: #fff;
    width: 10rem;
    height: 10rem;
    border-radius: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    gap: 0.8rem;
    text-align: center;
    line-height: 1;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    font-weight: 500;
}

.btn-wrap-quick > li > a > i {
    color: var(--color-secondary-70);
}

.btn-wrap-quick > li > a:hover {
    background: var(--color-secondary-70);
    color: #fff;
}

.btn-wrap-quick > li > a:hover > i {
    color: #fff;
}

.btn-wrap-quick > li > a:focus {
    outline-offset: -0.4rem;
    box-shadow: inset 0 0 0 0.4rem var(--color-gray-50);
}

.institute-summary-box .box-body .btn-wrap {
    width: 100%;
    display: flex;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.institute-summary-box .box-body .btn-wrap a {
    width: 100%;
}


.institute-summary-box .box-body .btn-wrap .btn-quick {
    display: none;
}

.institute-summary-box .box-body .btn-util {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    top: 0;
    right: 0;
}

.institute-summary-box .box-body .btn-util button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #fff;
    border: 0.11rem solid var(--color-border);
    color: var(--color-text-subtle);
}

@media screen and (max-width: 1439px) {
    .btn-wrap-quick {
        display: none;
    }
    
    .institute-summary-box .box-body .btn-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .institute-summary-box .box-body .btn-wrap .btn-quick {
        display: flex;
    }
}

@media screen and (max-width: 1023px) {
    .institute-summary-box {
        padding: 2.4rem;
    }

    .institute-summary-box .box-body {
        gap: 2.4rem;
    }

    .institute-summary-box .box-body {
        flex-direction: column;
    }

    .institute-summary-box .box-body .left {
        width: 100%;
    }

    .institute-summary-box .box-body .right {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .institute-summary-box {
        padding: 1.6rem;
    }

    .institute-summary-box .box-body {
        gap: 1.6rem;
    }

    .institute-summary-box .box-body .institute-info > li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}


/* --- Content Side Box --- */
.cont-side-box {
    border-top: 0.1rem solid var(--color-border);
    margin-top: 3.2rem;
    padding: 3.2rem 0;
}

.cont-side-box .box-floor {
    width: 100%;
    display: flex;
    gap: 2.4rem;
    border-top: 0.1rem dashed var(--color-border);
    padding: 3.2rem 0;
}

.cont-side-box .box-floor:last-of-type {
    padding-bottom: 0;    
}

.cont-side-box .box-floor:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.cont-side-box .title-box {
    width: 16rem;
    flex-shrink: 0;
}

.cont-side-box .text-box {
    width: calc(100% - 16rem);
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    flex: 0 0 auto;
}

.cont-side-box .text-box .box-text {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.cont-side-box .text-box .box-text .sub-tit {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-point-70);
}

@media screen and (max-width: 1023px) {
    .cont-side-box .box-floor {
        flex-direction: column;
        gap: 0;
    }

    .cont-side-box .title-box {
        width: 100%;
    }
    
    .cont-side-box .title-box br {
        display: none;
    }

    .cont-side-box .text-box {
        width: 100%;
    } 
}    


/* --- Tab --- */
.tab {
    position: relative;
    margin-bottom: 3.2rem;
}

.tab > ul {
    display: flex;
    gap: 1.6rem;
}

.tab .btn-tab {
    width: 100%;
    font-weight: 700;
    color: var(--color-text-subtle);
    height: 4.8rem;
}

.tab .btn-tab:focus {
    outline-offset: -0.4rem;
    box-shadow: inset 0 0 0 0.4rem var(--color-gray-50);
}
    
.tab.full > ul > li {
    width: 100%;
}

.tab.full .btn-tab {
    height: 5.6rem;
}

.tab.fill > ul {
    gap: 0;
}

.tab.fill .active .btn-tab {
    background: var(--color-secondary-70);
    border: 0.1rem solid var(--color-secondary-70);
    color: #fff;
}

.tab.fill.full .btn-tab {
    border: 0.1rem solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tab.fill.full > ul > li:first-of-type .btn-tab {
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
}

.tab.fill.full > ul > li:last-of-type .btn-tab {
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}

.tab.fill.full > ul > li + li .btn-tab {
    border-left: 0;
}

.tab.line {
    border-bottom: 0.1rem solid var(--color-border);
}

.tab.line .btn-tab {
    position: relative;
    padding: 0 0.4rem;
    min-width: 6.4rem;
}

.tab.line .btn-tab::before {
    content: '';
    position: absolute;
    bottom: -0.2rem;
    left: 50%;
    width: 0;
    height: 0.4rem;
    background: var(--color-secondary-80);
    transition: var(--transition-base);
    transform: translateX(-50%);
}

.tab.line .active .btn-tab {
    color: 0.2rem solid var(--color-secondary-80);
}

.tab.line .active .btn-tab::before {
    width: 100%;
}

.tab.slide {
    text-align: center;
}

.tab.slide > ul {
    display: inline-flex;
    background: var(--color-gray-10);
    border-radius: 12rem;
    overflow: hidden;
    gap: 0;
}

.tab.slide .btn-tab {
    padding: 0.8rem 2.4rem;
    border-radius: 12rem;
    color: var(--color-text-disabled);
    height: auto;
}

.tab.slide .active .btn-tab {
    background: var(--color-secondary-70);
    color: #fff;
}

.tab.box {
    border: 0.1rem solid var(--color-border);
    border-bottom: 0.1rem solid var(--color-secondary-70);
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
    margin-bottom: 0;
}

.tab.box > ul {
    background: var(--color-gray-5);
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
    padding-top: 0.8rem;
    gap: 0;
}

.tab.box > ul > li {
    width: 100%;
    padding: 0 0.8rem;
}

.tab.box .btn-tab {
    padding: 0 1.6rem;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
}

.tab.box .btn-tab:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.tab.box .active .btn-tab {
    color: var(--color-secondary-70);
    background-color: #fff;
    border: 0.1rem solid var(--color-secondary-70);
    border-bottom: 0;
    position: relative;
}

.tab.box .active .btn-tab::after {
    content: '';
    display: block;
    width: calc(100% + 0.1rem);
    height: 0.2rem;
    background: #fff;
    position: absolute;
    bottom: -0.2rem;
    left: 50%;
    transform: translateX(-50%);
}

.tab-area.simple {
    background: var(--color-information-5);
    border: 0.1rem solid var(--color-information-10);
    border-radius: 1.2rem;
    padding: 2rem 4rem;
}

.tab.simple {
    margin-bottom: 1.2rem;
}

.tab.simple > ul {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tab.simple .btn-tab {
    border: 0.1rem solid var(--color-gray-50);
    padding: 0 1.6rem;
    border-radius: 3rem;
    font-weight: 500;
    color: var(--color-gray-50);
    background: #fff;
}

.tab.simple .active .btn-tab {
    background: var(--color-information-70);
    border-color: var(--color-information-70);
    color: #fff;
    text-decoration: underline;
    text-underline-position: under;
}

.tab-area.simple .box-intro {
    padding: 0;
    border: 0;
    margin-top: 0.4rem;
}

.tab-conts {
    display: none;
}

.tab-conts.active {
    display: block;
}

.tab-conts-wrap.box .tab-conts {
    border: 0.1rem solid var(--color-border);
    border-top: 0;
    padding: 2.4rem;
    border-bottom-left-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
}

@media screen and (max-width: 767px) {
    .tab-area.simple {
        padding: 1.6rem;    
    }

    .tab-row {
        flex-direction: column;
    }

    .tab.fill.full::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 8rem;
        height: 100%;
        background:
            url('/images/sub/ico_data-transfer-both.svg') no-repeat center right/2.4rem,
            linear-gradient(to right, transparent 0, #fff 70%);
    }

    .tab.fill.full > ul {
        gap: 0.4rem;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
    }

    .tab.fill.full > ul::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }

    .tab.fill.full > ul > li {
        width: auto;
        white-space: nowrap;
    }

    .tab.fill.full > ul > li:last-of-type {
        padding-right: 6rem;
    }

    .tab.fill.full .btn-tab {
        padding: 0 0.8rem;
        border: 0;
        border-radius: 0.6rem;
        font-size: 1.7rem;
    }

    .tab.line {
        font-size: 1.5rem;
    }

    .tab.slide .btn-tab {
        padding: 0.8rem 1.6rem;
    }

    .tab.simple .btn-tab {
        height: auto;
        padding: 0.4rem 1.6rem;
    }

    .tab-conts-wrap.box .tab-conts {
        padding: 1.6rem;
    }
}

/* --- Tab Link --- */
.tab-link-wrap {
    display: flex;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.8rem;
}

.tab-link-wrap .tab-item {
    position: relative;
}

.tab-link-wrap .tab-item.active {
    color: var(--color-gray-90);  
    font-weight: 700;
}

.tab-link-wrap .tab-item button {
    display: block;
    padding: 1.6rem 2.4rem;
}

.tab-link-wrap .tab-item.active span {
    position: relative;
}

.tab-link-wrap .tab-item.active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    height: 0.3rem;
    background: var(--color-gray-70);
}


/* --- Map --- */
.map-conts {
    display: flex;
    width: 100vw;
    height: calc(100vh - 10rem);
    min-height: 900px;
    border-top: 0.1rem solid var(--color-border);
}

.map-conts .map-list-wrap {
    width: 45rem;
    height: 100%;
    padding: 2.4rem;
    box-shadow: 5px 0 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 7;
    flex-shrink: 0;
}

.map-conts .map-list-wrap .btn-list {
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    z-index: 1;
}

.map-conts .map-list-wrap .tab {
    margin-bottom: 1.6rem;
    text-align: center;
}

.map-conts .search-wrap {
    margin-bottom: 1.6rem;
}

.map-conts .search-wrap fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.map-conts .search-wrap .form-floor {
    display: flex;
    gap: 0.8rem;
}

.map-conts .search-wrap .form-floor .btn {
    flex-shrink: 0;
}

.map-conts .search-result {
    border-bottom: 0.2rem solid var(--color-gray-70);
    padding-bottom: 0.8rem;
}

.map-conts .search-list-wrap {
    overflow-y: auto;
    max-height: calc(100vh - 35rem);
}

.map-conts .search-list-wrap::-webkit-scrollbar {
    width: 0.6rem;
}
  
.map-conts .search-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.map-conts .search-list-wrap::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-30);
    border-radius: 0.3rem;
}

/* Firefox 대응 */
.map-conts .search-list-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-30) transparent;
}

.map-conts .search-list-wrap .pagination {
	margin-top: 2rem;
}

.map-conts .search-list {
    padding: 0 1.6rem 0 0.4rem;
}

.map-conts .search-list .nodata {
    text-align: center;
    padding: 4rem 0;
    font-size: 1.5rem;
    color: var(--color-text-subtle);
}

.map-conts .search-list .nodata::before {
    content: '';
    display: inline-block;
    width: 12rem;
    height: 6.9rem;
    background: url(/images/sub/nodata.png) no-repeat;
    background-size: cover;
    opacity: 0.5;
    margin-bottom: 1.6rem;
}

.map-conts .search-list > li {
    position: relative;
    padding: 1.2rem 0;
    border-bottom: 0.1rem solid var(--color-border);
}

.map-conts .search-list > li > a {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.map-conts .search-list > li > a:hover .title {
    text-decoration: underline;
    text-underline-position: under;
}

.map-conts .search-list .thumbnail {
    width: 10rem;
    height: 10rem;
    border-radius: 1.2rem;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-gray-10);
    border: 0.1rem solid var(--color-border);
}

.map-conts .search-list .thumbnail > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-conts .search-list .info-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: calc(100% - 11.6rem);
}

.map-conts .search-list .title {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.map-conts .search-list .title .legend {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.map-conts .search-list .title .legend.bg-kindy {
    background: var(--color-kindy);
}

.map-conts .search-list .title .legend.bg-org {
    background: var(--color-org);
}

.map-conts .search-list .title .legend.bg-center {
    background: var(--color-center);
}

.map-conts .search-list .title .legend.bg-forest {
    background: var(--color-forest);
}

.map-conts .search-list .title .legend.bg-huyang {
    background: var(--color-huyang);
}

.map-conts .search-list .title .legend.bg-healing {
    background: var(--color-healing);
}

.map-conts .search-list .title .legend.bg-arb {
    background: var(--color-arb);
}

.map-conts .search-list .title .legend img {
    width: 60%;
}

.map-conts .search-list .info {
    font-size: 1.4rem;
    color: var(--color-text-subtle);
}

.map-conts .search-list .info .item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.map-conts .search-list .info .item .icon {
    color: var(--color-text-disabled);
}

.map-conts .search-list .info .item .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-conts .search-list .btn-like {
    position: absolute;
    top: 1.2rem;
    right: 0;
    color: var(--color-text-disabled);
}

.map-conts .search-list .btn-like.active {
    color: #ffb114;
}

.map-conts .search-list .btn-like i {
    display: block;
}

.info-detail-wrap {
    position: relative;
    width: 50rem;
    border-right: 0.1rem solid var(--color-border);
    border-bottom: 0.1rem solid var(--color-border);
    display: none;
    flex-shrink: 0;
    z-index: 6;
}

.info-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem;
    background: var(--color-gray-10);
}

.info-detail-header .title {
    font-weight: 700;
    font-size: 1.9rem;
}

.info-detail-header .btn-close i {
    display: block;
}

.info-detail-body {
   overflow-y: auto;
   height: 100%;
   background: #fff;
}

.info-detail-body::-webkit-scrollbar {
    width: 0.6rem;
}
  
.info-detail-body::-webkit-scrollbar-track {
    background: transparent;
}

.info-detail-body::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-30);
    border-radius: 0.3rem;
}

/* Firefox 대응 */
.info-detail-body {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-30) transparent;
}

.info-detail-outline {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.info-detail-outline .thumbnail {
    aspect-ratio: 16 / 9;
    border: 0.1rem solid var(--color-border);
    background-color: var(--color-gray-10);
    border-radius: 1.2rem;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.info-detail-outline .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-detail-outline > .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-detail-outline > .title p {
    font-size: 2.2rem;
    font-weight: 700;
}

.info-detail-outline .title .btn-util {
    display: flex;
    gap: 0.8rem;
}

.info-detail-outline .title .btn-util i {
    display: block;
    color: var(--color-text-subtle);
}

.info-detail-outline .info {
    display: flex;
    flex-direction: column;
    background: var(--color-gray-5);
    padding: 0.8rem 1.6rem;
    border-radius: 1.2rem;
}

.info-detail-outline .info .item {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5rem;
    padding: 0.8rem 0;
    border-top: 0.1rem dotted var(--color-border);
}

.info-detail-outline .info .item:first-of-type{
    border-top: 0;
}

.info-detail-outline .info .item .title {
    display: flex;
    gap: 0.8rem;
    font-weight: bold;
    width: 10rem;
    align-items: center;
}

.info-detail-outline .info .item .title i {
    color: var(--color-text-disabled);
}

.info-detail-outline .info .item .text {
    padding-left: 0.4rem;
}

.info-detail-outline .info .item .text .sns-btn {
    display: flex;
    gap: 0.8rem;
}

.info-detail-outline .info .item .text .sns-btn a {
    width: 3.2rem;
    border-radius: 3.2rem;
    border: 0.1rem solid var(--color-border);
    overflow: hidden;
}

.info-detail-outline > .text {
    font-size: 1.5rem;
    word-break: break-all;
    margin-top: 0.8rem;
}

.info-detail-outline .btn-wrap {
    display: flex;
    gap: 0.4rem;
}

.info-detail-outline .btn-wrap .btn {
    width: 100%;
}

.info-detail-tab {
    border-top: 0.5rem solid var(--color-border);
    padding-bottom: 0.8rem;
}

.info-detail-tab .tab {
    padding: 0 1.6rem;
    margin-bottom: 0;
    border-bottom: 0.2rem solid var(--color-gray-30);
}

.info-detail-tab .tab .btn-tab {
    font-size: 1.7rem;
}

.info-detail-tab .tab-conts-wrap {
    padding: 1.6rem;
}

.info-detail-tab .img-list {
    gap: 0.8rem;
}

.info-detail-tab .structured-list {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem
}

.info-detail-tab .structured-list .card-body {
    padding: 1.2rem;
}

.info-detail-tab .structured-item .card-body .c-tit {
    font-size: 1.5rem;
    white-space: normal;
    word-break: break-all;
}

.info-detail-tab .structured-item .card-body .c-info .price {
    font-size: 1.5rem;
}

.info-detail-tab .structured-item .card-body .c-info > ul > li .title {
    width: auto;
}

.info-detail-tab .program-info tr {
    border-bottom: 0.1rem solid var(--color-border);
}

.info-detail-tab .program-info tr:last-of-type {
    border-bottom: 0;
}

.info-detail-tab .program-info th,
.info-detail-tab .program-info td {
    padding: 1.2rem;
    text-align: left;
}

.info-detail-tab .program-info th {
    padding-left: 0;
    vertical-align: top;
    font-weight: 700;
}

.info-detail-tab .program-info th .title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.info-detail-tab .program-info th .title i {
    color: var(--color-information-50);
}

.info-detail-tab .program-info td {
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
    word-break: break-all;
}

.info-detail-tab .institute-info {
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.info-detail-tab .institute-info > li {
    display: flex;
    padding: 0.8rem;
    gap: 0.8rem 0;
    border-top: 0.1rem dotted var(--color-border);
    align-items: center;
    flex-wrap: wrap;
}

.info-detail-tab .institute-info > li:first-of-type {
    border-top: 0;
}

.info-detail-tab .institute-info > li .title {
    display: flex;
    gap: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    width: 14rem;
}

.info-detail-tab .institute-info > li .title .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary-80);
}

.info-detail-tab .institute-info > li .text {
    width: calc(100% - 14rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 3.2rem;
}

.info-detail-tab .institute-info > li .text .sns-btn {
    display: flex;
    gap: 0.8rem;
}

.info-detail-tab .institute-info > li .text .sns-btn a {
    width: 4rem;
    border-radius: 4rem;
    border: 0.1rem solid var(--color-border);
}

.info-detail-tab .nodata {
	text-align: center;
	padding: 4rem 0;
}

.info-detail-tab .nodata i {
	font-size: 6rem;
	color: var(--color-gray-10);
	margin-bottom: 0.8rem;
}

.info-detail-wrap .btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.8rem;
    left: 100%;
    width: 4rem;
    height: 4.4rem;
    background: var(--color-gray-70);
    color: #fff;
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    border: 0.1rem solid var(--color-border);
    box-shadow: 5px 0 3px rgba(0, 0, 0, 0.1)
}

.map-area-wrap {
    width: 100%;
    position: relative;
    min-height: 80vh;
}

.map-area-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-text-info {
    position: absolute;
    top: 1.6rem;
    right: 3.2rem;
    padding: 1.2rem 1.6rem;
    background: #fff;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 41rem;
}

.map-text-info .list-legend-wrap {
    display: flex;
    padding: 0;
    border: 0;
    margin: 0;
    flex-wrap: wrap;
    max-width: 36rem;
    justify-content: center;
}

.map-text-info .list-legend-wrap > li > .icon {
    width: 2.8rem;
    height: 2.8rem;
}

.map-text-info > p {
    font-size: 1.3rem;
    text-align: right;
    font-weight: 500;
}

.map-marker {
	font-size: 1.7rem;
	font-weight: 500;
	color: #fff;
}

.map-marker > a {
	position: relative;
	width: 100%;
	padding: 0.8rem 1.2rem 0.8rem 1.6rem;
	border-radius: 10rem;
	background: #fff;
	border: 0.1rem solid var(--color-gray-50);
	color: var(--color-gray-90);
}

.map-marker > a::after {
	content: '';
	display: block;
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    border-top: 1rem solid #fff;
}

.map-marker > a::before {
	content: '';
	display: block;
    position: absolute;
    left: 50%;
    top: calc(100% + 0.1rem);
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    border-top: 1rem solid var(--color-gray-50);
}

.map-marker.bg-kindy > a {
	background: var(--color-kindy);
}

.map-marker.bg-kindy > a::after {
	border-top: 1rem solid var(--color-kindy);
}

.map-marker.bg-center > a {
	background: var(--color-center);
}

.map-marker.bg-center > a::after {
	border-top: 1rem solid var(--color-center);
}

.map-marker.bg-forest > a {
	background: var(--color-forest);
}

.map-marker.bg-forest > a::after {
	border-top: 1rem solid var(--color-forest);
}

.map-marker.bg-huyang > a::after {
	border-top: 1rem solid var(--color-huyang);
}

.map-marker.bg-huyang > a {
	background: var(--color-huyang);
}

.map-marker.bg-healing > a::after {
	border-top: 1rem solid var(--color-healing);
}

.map-marker.bg-healing > a {
	background: var(--color-healing);
}

.map-marker.bg-arb > a {
	background: var(--color-arb);
}

.map-marker.bg-arb > a::after {
	border-top: 1rem solid var(--color-arb);
}

.map-marker > a img {
	width: 2rem;
	margin-right: 0.2rem;
	vertical-align: middle;
}

.map-marker > a img {
	width: 2rem;
	margin-right: 0.4rem;
}

.map-marker > a i {
	vertical-align: middle;
	margin-top: -0.2rem;
}

.map-marker .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
}

.map-marker .icon.bg-org {
    background: var(--color-org);
}

.map-marker .icon.bg-kindy {
    background: var(--color-kindy);
}

.map-marker .icon.bg-center {
    background: var(--color-center);
}

.map-marker .icon.bg-forest {
    background: var(--color-forest);
}

.map-marker .icon.bg-huyang {
    background: var(--color-huyang);
}

.map-marker .icon.bg-healing {
    background: var(--color-healing);
}

.map-marker .icon.bg-prov {
    background: var(--color-prov);
}

.map-marker .icon.bg-arb {
    background: var(--color-arb);
}

.map-marker .icon.bg-wood {
    background: var(--color-wood);
}

.map-marker .icon.bg-cert {
    background: var(--color-cert);
}

.map-marker .icon > img {
	display: block;
	width: 60%;
	margin-right: 0;
}

@media screen and (max-width: 1023px) {
    .map-conts {
        flex-direction: column;
        height: auto;
    }  

    .map-conts .search-list {
        max-height: none;
    }

    .map-conts .map-list-wrap {
        width: 100%;
    }

    .info-detail-wrap {
        width: 100%;
        height: 100vh;
        border-right: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999 !important;
    }

    .map-area-wrap {
        order: -1;
        aspect-ratio: 5 / 3;
    }
    
    .info-detail-wrap .btn-close {
    	position: fixed;
    	top: 1.6rem;
    	left: auto;
    	right: 1.6rem;
    	border-radius: 50%;
    	width: 4rem;
    	height: 4rem;
    }
}

@media screen and (max-width: 767px) {
    .map-conts .map-list-wrap {
        padding: 1.6rem;
    }

    .map-conts .map-list-wrap .btn-list {
        top: 1.6rem;
        right: 1.6rem;
    }

    .map-conts .search-wrap .form-floor {
        flex-wrap: wrap;
    }
    
    .map-conts .search-wrap .form-floor .btn {
        width: 100%;
    }

    .map-conts .search-list > li > a {
        gap: 0.8rem;
    }
    
    .map-text-info {
    	min-width: auto;
    	max-width: 24rem;
    	right: 1.6rem;
    }

    .map-text-info .list-legend-wrap {
        font-size: 1.5rem;
        gap: 0.4rem 0.8rem;
    }
    
    .map-text-info .list-legend-wrap > li {
        font-size: 1.3rem;
    }
    
    .map-text-info .list-legend-wrap > li > .icon {
        width: 2rem;
        height: 2rem;
    }
    
    .info-detail-outline .btn-wrap {
        flex-wrap: wrap;
    }

    .map-area-wrap .btn-wrap .btn {
        display: none;
    }
    
}

@media screen and (max-width: 424px) {
    .map-conts .search-list .thumbnail {
        display: none;
    }

    .map-conts .search-list .info-wrap {
        width: 100%;
    }
}


/* --- Institute Banner --- */
.institute-banner {
    padding: 2.4rem 3.2rem;
    border-radius: 1.2rem;
    background: #eee;
    display: flex;
    gap: 0.8rem;
    background-color: var(--color-primary-5);
    gap: 4rem;
    align-items: center;
}

.institute-banner .info {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.institute-banner .title {
    font-size: 2.4rem;
    font-weight: 700;
}

.institute-banner .title strong {
    color: var(--color-primary-50);
}

.institute-banner .text {
    font-size: 1.9rem;
    font-weight: 500;
}

.institute-banner.kindy .btn-wrap {
    margin-top: 1.6rem;
}

.institute-banner .img {
    width: 24rem;
    overflow: hidden;
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    .institute-banner {
        padding: 1.6rem;
        flex-direction: column;
    }

    .institute-banner .text {
        font-size: 1.7rem;
    }

    .institute-banner .btn-wrap .btn {
        margin-top: 0;
    }

    .institute-banner .btn-wrap .btn {
        width: 100%;
    }

    .institute-banner .img {
        display: none;
    }
}


/* --- Institute Intro
.inst-info-wrap {
    background-color: var(--color-information-5);
    background-image: url(/images/sub/inst_intro.png);
    background-repeat: no-repeat;
    background-size: 28rem;
    background-position: 4rem 1.6rem;
    border-radius: 1.2rem;
    padding: 4rem;
}

.inst-info-wrap > .title {
    margin-bottom: 3.2rem;
    padding-left: 28rem;
}
.inst-info-wrap > .title p {
    font-size: 2.4rem;
    font-weight: 500;
}

.inst-info-wrap .title strong {
    color: var(--color-information-70);
}

.inst-info-wrap .text .link-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.inst-info-wrap .text .link-btn-wrap > li {
    display: block;
    background: #fff;
    padding: 2.4rem;
    border-radius: 1.2rem;
    text-align: center;
    outline: 0.2rem solid var(--color-information-10);
    outline-offset: -1rem;
}

.inst-info-wrap .text .link-btn-wrap > li:nth-child(1),
.inst-info-wrap .text .link-btn-wrap > li:nth-child(2) {
    width: calc(50% - 0.8rem);
}

.inst-info-wrap .text .link-btn-wrap > li:nth-child(3),
.inst-info-wrap .text .link-btn-wrap > li:nth-child(4),
.inst-info-wrap .text .link-btn-wrap > li:nth-child(5) {
    width: calc(33.3333333% - 1.1rem);
}

.inst-info-wrap .text .link-btn-wrap > li .title {
    font-weight: 500;
    background: var(--color-information-70);
    border-radius: 10rem;
    color: #fff;
    display: inline-block;
    padding: 0.4rem 2.4rem
}

.inst-info-wrap .text .link-btn-wrap > li .sub-title {
    font-size: 1.5rem;
    color: var(--color-gray-700);
    margin-top: 0.8rem;
}

.inst-info-wrap .text .link-btn-wrap > li .btn {
    margin-top: 0.8rem;
} --- */


/* --- Institute Intro --- */
.inst-info-wrap {
    background-color: var(--color-gray-5);
    border-radius: 1.2rem;
    padding: 4rem 3rem;
    border: 0.1rem solid var(--color-border);
}

.inst-info-wrap > .title {
    margin-bottom: 2.8rem;
    text-align: center;
}
.inst-info-wrap > .title p {
    font-size: 2.4rem;
    font-weight: 500;
}

.inst-info-wrap .title strong {
    color: var(--color-information-70);
}

.inst-info-wrap .text .link-btn-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1.6rem;
}

.inst-info-wrap .text .link-btn-wrap > a {
    display: flex;
    padding: 0 2.4rem;
    border-radius: 1.2rem;
    text-align: center;
    width: 100%;
    height: 12rem;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-size: 100% 100%;
    background-position: center;
    background-color: var(--color-information-70);
    transition: all 0.2s;
}

.inst-info-wrap .text .link-btn-wrap > a::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% 100%;
    background-position: center;
    opacity: 1;
    transition: all 0.2s;
    background-size: cover;
    background-repeat: no-repeat;
}

.inst-info-wrap .text .link-btn-wrap > a.kindy::before {
    background-image: url(/images/sub/inst_intro_kindy_bg.jpg);
}

.inst-info-wrap .text .link-btn-wrap > a.center::before {
    background-image: url(/images/sub/inst_intro_center_bg.jpg);
}

.inst-info-wrap .text .link-btn-wrap > a.forest::before {
    background-image: url(/images/sub/inst_intro_forest_bg.jpg);
}

.inst-info-wrap .text .link-btn-wrap > a.huyang::before {
    background-image: url(/images/sub/inst_intro_huyang_bg.jpg);
}

.inst-info-wrap .text .link-btn-wrap > a.healing::before {
    background-image: url(/images/sub/inst_intro_healing_bg.jpg);
}

.inst-info-wrap .text .link-btn-wrap > a.arb::before {
    background-image: url(/images/sub/inst_intro_arb_bg.jpg);
}

.inst-info-wrap .text .link-btn-wrap > a::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--transition-base);
}

.inst-info-wrap .text .link-btn-wrap > a .cont {
    position: relative;
    z-index: 1;
    transition: all 0.2s;
}

.inst-info-wrap .text .link-btn-wrap > a .title {
    font-weight: 500;
    color: #fff;
    font-size: 2.4rem;
}

.inst-info-wrap .text .link-btn-wrap > a:hover::after {
    background: rgba(0, 0, 0, 0.7);
}

@media screen and (max-width: 1023px) {
	.inst-info-wrap {
		padding: 3rem;
	}
	
	.inst-info-wrap > .title p {
		font-size: 2rem;
	}
	
	.inst-info-wrap .text .link-btn-wrap {
		gap: 1.2rem;
	}

	.inst-info-wrap .text .link-btn-wrap > a .title {
		font-size: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.inst-info-wrap {
		padding: 2rem;
	}
	
	.inst-info-wrap > .title {
		margin-bottom: 2rem;
	}
	
	.inst-info-wrap .text .link-btn-wrap {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 424px) {
	.inst-info-wrap .text .link-btn-wrap {
		grid-template-columns: 1fr;
	}
	
	.inst-info-wrap .text .link-btn-wrap > a {
		height: 8rem;
		border-radius: 1rem;
	}
}


/* --- Comment --- */
.comment-btm-wrap {
    font-size: 1.5rem;
    color: var(--color-gray-60);
    text-align: right;
    margin: 4rem 0 -8rem;
}

@media screen and (max-width: 767px) {
    .comment-btm-wrap {
        margin: 2rem 0 0;
    }
}


/* --- FAQ --- */
.faq-list {
	border-top: 0.2rem solid var(--color-gray-70);
}

.faq-list .nodata {
	text-align: center;
	padding: 4rem 0;	
	border-bottom: 0.1rem solid var(--color-border);
}

.faq-q {
	display: flex;
	align-items: center;
	padding: 1.6rem 2rem;
	border-bottom: 0.1rem solid var(--color-border);
	width: 100%;
	text-align: left;
}

.faq-q:focus {
	outline-offset: -0.4rem;
    box-shadow: inset 0 0 0 0.4rem var(--color-gray-50);
}

.faq-q::before {
	content: 'Q';
	display: block;
	width: 3.6rem;
	height: 3.6rem;
	line-height: 3.6rem;
	border-radius: 50%;
	background: var(--color-gray-70);
	text-align: center;
	font-size: 2.4rem;
	color: #fff;
	margin-right: 1.6rem;
	flex-shrink: 0;
}

.faq-q > i {
	margin-left: auto;
	color: var(--color-gray-50);
	transition: var(--transition-base);
}

.faq-q.on > i {
	transform: rotate(-180deg);
}

.faq-a {
	background: var(--color-gray-5);
	border-bottom: 0.1rem solid var(--color-border);
	padding: 0 2rem 0 7.2rem;
	position: relative;
}

.faq-a::before {
	content: 'A';
	display: block;
	width: 3.6rem;
	height: 3.6rem;
	line-height: 3.6rem;
	border-radius: 50%;
	background: var(--color-secondary-70);
	text-align: center;
	font-size: 2.4rem;
	color: #fff;
	margin-right: 1.6rem;
	position: absolute;
	top: 1.6rem;
	left: 2rem;
}

.faq-a .text {
	padding: 2rem 0;
}

.faq-a .file {
	border-top: 0.1rem dotted var(--color-border);
	padding: 1.6rem 0;
}

.faq-a .file > li a {
	text-decoration: underline;
	text-underline-position: under;
	font-size: 1.5rem;
}

.faq-a .file > li a:hover {
	color: var(--color-information-70);
}

.faq-a .file > li a i {
	vertical-align: middle;
	color: var(--color-gray-70);
	margin-right: 0.4rem;
}

@media screen and (max-width: 767px) {
    .faq-q {
    	padding: 1.6rem;
    }
    
    .faq-a {
    	padding: 0 1.6rem 0 6.8rem;
    }
    
    .faq-a::before {
    	left: 1.6rem;
    }
    
    .faq-a .text {
    	padding: 1.6rem 0;
    }
}


/* --- Side Search --- */
.side-search-wrap {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 24rem;
    padding: 3.2rem 0;
    position: sticky;
    top: 0;
    z-index: 99;
}

.side-search-header {
    margin-bottom: 0.8rem;
}

.side-search-header .title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.side-search-header .title i {
    color: var(--color-text-disabled);
}

.side-search-header .btn {
    width: 100%;
}

.side-search-btn {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.side-search-btn .btn {
    width: 100%;
}

.side-search-list-wrap {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    padding: 0.4rem 0;
}

.side-search-list {
    padding: 0 1.6rem;
    max-height: calc(100vh - 20rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.side-search-list::-webkit-scrollbar {
    width: 0.6rem;  /* 스크롤바의 너비 */
}

.side-search-list::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: var(--color-gray-20); /* 스크롤바의 색상 */
    border-radius: 1rem;
}

.side-search-list::-webkit-scrollbar-track {
    background: transparent;  /*스크롤바 뒷 배경 색상*/
}

.side-search-item {
    border-bottom: 0.1rem dashed var(--color-border);
    padding: 1.2rem 0 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.side-search-item:last-of-type {
    border-bottom: 0;
}

.side-search-item .item-header {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.4rem;
}

.side-search-item .item-header .title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.side-search-item .item-header .title span {
    font-size: 1.5rem;
    font-weight: 700;
}

.side-search-item .item-header .title i {
    color: var(--color-text-disabled);
    transition: var(--transition-base);
}

.side-search-item .item-header .title:hover i {
    color: #000;
}

.side-search-item .item-body.fold {
    display: none;    
}

.side-search-wrap .search-input {
    display: flex;
}

.side-search-wrap .search-input input {
    display: flex;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.side-search-wrap .search-input button {
    background: var(--color-gray-70);
    color: #fff;
    padding: 0 0.8rem;
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.side-search-wrap .form-input,
.side-search-wrap .form-select {
    font-size: 1.5rem;
    height: 3.6rem;
    padding: 0 1.2rem;
    width: 100%;
}

.side-search-wrap .form-select {
    background-size: 1.6rem;
    background-position: top 50% right 1.2rem;
}

.side-search-wrap .form-chip input[type=radio] ~ label,
.side-search-wrap .form-chip input[type=checkbox] ~ label {
    font-size: 1.5rem;
    height: 3.6rem;
    padding: 0 1.2rem;
}

.side-search-wrap .form-chip input[type=radio] ~ label::before,
.side-search-wrap .form-chip input[type=checkbox] ~ label::before {
    width: 1.2rem;
    height: 1.2rem;
}

.side-search-wrap .form-check {
    font-size: 1.5rem;
}

.side-search-wrap .form-check input[type=radio] ~ label::before,
.side-search-wrap .form-check input[type=checkbox] ~ label::before {
    margin-top: 0.1rem;
}

.side-search-wrap .form-check input[type=radio] ~ label::after,
.side-search-wrap .form-check input[type=checkbox] ~ label::after {
    top: 0.5rem;
}

.side-search-wrap .form-group {
    flex-direction: column;
}

@media screen and (max-width: 1023px) {
    .side-search-wrap {
    	width: 100%;
    	position: relative;
    	margin-top: 6rem;
    	padding-bottom: 6rem;
    }
    
    .side-search-btn {
    	width: 100%;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    }
}


/* --- Filter Result --- */
.filter-result-wrap {
    background: var(--color-gray-5);
    padding: 1.6rem;
    font-size: 1.5rem;
    color: var(--color-text-subtle);
    display: flex;
    justify-content: space-between;
}

.filter-result-wrap > button {
	flex-shrink: 0;	
}

.filter-result-list {
    display: flex;
    gap: 0.4rem 1.6rem;
    flex-wrap: wrap;
}

.filter-result-list > li.nodata {
	display: flex;
    align-items: center;
}

.filter-result-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #000;
}

.filter-result-item i {
    color: var(--color-text-disabled);
    transition: var(--transition-base);
}

.filter-result-item i:hover {
    color: #000;
}

@media screen and (max-width: 767px) {
	.filter-result-wrap {
		flex-direction: column;
		gap: 0.8rem;
	}
	
	.filter-result-list > li.nodata {
		display: block;
		width: 100%;
		text-align: center;
	}
}


/* --- Modal --- */
.blocker {
    overflow: hidden !important;
    padding: 1.6rem !important;
}

.modal {
    overflow: visible !important;
    width: 100% !important;
}

.modal-header {
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
}

.modal.fix-height .modal-body {
    height: 80vh;
    overflow-y: auto;
}

.modal .cont-side-box .title-box {
    width: 12rem;
}

.modal .search-filter-wrap {
    margin-bottom: 0;
}

.modal .search-list-top {
    margin: 0 0 0.8rem;
}

.modal .tab {
	margin-bottom: 2rem;
}

.modal .btn-page-wrap {
    margin-top: 2rem;
}

.modal-header .dropdown-wrap {
    position: absolute;
    top: 1rem;
    right: 6.4rem;
}

.modal-tab {
    position: absolute;
    top: 6.1rem;
    left: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.modal-tab li a {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0.6rem;
    background: #fff;
    border-top-right-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
    opacity: 0.7;
}

.modal-tab li a:hover {
    opacity: 1;
}

.modal-tab li.active a {
    opacity: 1;
}

.modal-tab .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 3rem;
}

.modal-tab .icon.bg-org {
    background: var(--color-org);
}

.modal-tab .icon.bg-kindy {
    background: var(--color-kindy);
}

.modal-tab .icon.bg-center {
    background: var(--color-center);
}

.modal-tab .icon.bg-forest {
    background: var(--color-forest);
}

.modal-tab .icon.bg-huyang {
    background: var(--color-huyang);
}

.modal-tab .icon.bg-healing {
    background: var(--color-healing);
}

.modal-tab .icon.bg-arb {
    background: var(--color-arb);
}

.modal-tab .icon.bg-prov {
    background: var(--color-prov);
}

.modal-tab .icon img {
    width: 60%;
}

@media screen and (max-width: 1023px) {
	.modal-header .dropdown-wrap {
        top: 0.6rem;
        right: 5.4rem;
    }
}

@media screen and (max-width: 767px) {
    .modal .btn-page-wrap {
        flex-direction: column;
    }

    .modal.has-modal-tab {
        margin-top: 6rem;
    }

     .modal.has-modal-tab .modal-body {
        height: calc(80vh - 4rem);
    }

	.modal-header .dropdown-wrap {
        position: static;
    }

    .modal-tab {
        flex-direction: row;
        position: fixed;
        top: 2rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .modal-tab li a {
        border-radius: 0.8rem;
    }

    .modal-tab + .modal-header {
        position: relative;
        top: 2rem;
    }
 
}


/* --- 양성기관 등록현황 --- */
.org-search-wrap {
    display: flex;
    margin-bottom: 2rem;
}

.org-search-wrap .map-wrap {
    width: 100%;
    background: #e8f4de;
    border-radius: 1.2rem;
    padding: 2.4rem 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
}

.org-search-wrap .map-wrap .map-cont {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 4rem;
    max-width: 110rem;
}

.org-search-wrap .map-img {
    position: relative;
    text-align: center;
    width: 40rem;
    transform: scale(1.1);
    flex-shrink: 0;
}

.org-search-wrap .map-img .map-marker a {
    position: absolute;
    display: block;
    width: 6rem;
    height: 6rem;
    line-height: 6rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: var(--color-text-subtle);
    box-shadow: var(--box-shadow-base);
    text-align: center;
    padding: 0;
    font-weight: 700;
}

.org-search-wrap .map-img .map-marker a.active {
    background: rgba(8, 86, 145, 0.9);
    color: #fff;
}

.org-search-wrap .map-img .map-marker a::after {
    display: none;
}

.org-search-wrap .map-img .map-marker a:not(.active):hover {
    background: rgba(8, 86, 145, 0.9);
    color: #fff;
}

.org-search-wrap .map-search-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
}

.org-search-wrap .map-search-item {
    background: #fff;
    padding: 1.6rem;
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.org-search-wrap .map-btn-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem;
}

.org-search-wrap .map-btn-list > li button {
    padding: 0.8rem;
    background: var(--color-gray-5);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.6rem;
    border: 0.1rem solid var(--color-border);
    font-size: 1.5rem;
}

.org-search-wrap .map-btn-list > li button:hover {
    background: var(--color-information-70);
    color: #fff;
    border: 0.1rem solid var(--color-information-70);
}

.org-search-wrap .map-btn-list > li button:hover .data {
    color: #fff;
}

.org-search-wrap .map-btn-list > li button .title {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.org-search-wrap .map-btn-list > li button .title i {
    display: none !important;
}

.org-search-wrap .map-btn-list > li button .data {
    font-weight: 500;
    color: var(--color-danger-50);
}

.org-search-wrap .map-btn-list > li button.active {
    background: var(--color-information-70);
    color: #fff;
    border: 0.1rem solid var(--color-information-70);
}

.org-search-wrap .map-btn-list > li button.active i {
    display: block !important;
}

.org-search-wrap .map-btn-list > li button.active .data {
    color: #fff;
}

.org-search-wrap .chip-area {
    display: flex;
    flex-wrap: nowrap;
}

.org-search-wrap .chip-area .form-chip {
    width: 100%;
}

.org-search-wrap .chip-area .form-chip:hover input[type=radio] ~ label,
.org-search-wrap .chip-area .form-chip:hover input[type=checkbox] ~ label {
	background-color: var(--color-information-70);
    border-color: var(--color-information-70);
    color: #fff
}

.org-search-wrap .form-chip input[type=radio]:checked ~ label,
.org-search-wrap .form-chip input[type=checkbox]:checked ~ label {
    background-color: var(--color-information-70);
    border-color: var(--color-information-70);
    color: #fff
}

.org-search-wrap .form-chip input[type=radio]:checked ~ label::before,
.org-search-wrap .form-chip input[type=checkbox]:checked ~ label::before {
    background-color: #fff;
}

.org-search-wrap .chip-area .form-chip:hover input[type=radio] ~ label::before,
.org-search-wrap .chip-area .form-chip:hover input[type=checkbox] ~ label::before {
	background-color: #fff;
}

.org-search-wrap .search-input {
    display: flex;
}

.org-search-wrap .search-input input {
    display: flex;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.org-search-wrap .search-input button {
    background: var(--color-gray-70);
    color: #fff;
    padding: 0 1.6rem;
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex-shrink: 0;
}

@media screen and (max-width: 1023px) {
	.org-search-wrap .map-wrap {
		padding: 2.4rem 3rem;
	}
	
    .org-search-wrap .map-wrap .map-cont {
    	flex-direction: column;
    }
    
    .org-search-wrap .map-img {
    	margin: 4rem 0;
    }
}

@media screen and (max-width: 767px) {
	.org-search-wrap .map-wrap {
		padding: 1.6rem;
	}
	
	.org-search-wrap .map-img {
		transform: none;
		margin: 0;
	}
	
	.org-search-wrap .chip-area {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 499px) {
	.org-search-wrap .map-wrap .map-cont {
		gap: 2rem;
	}
	
	.org-search-wrap .map-img {
		transform: scale(0.8);
		margin: -4rem 0;
	}
	
	.org-search-wrap .map-btn-list {
		grid-template-columns: 1fr 1fr;
	}
}


/*--- Spy Scroll ---*/
.scroll-spy-nav {
    position: fixed;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: var(--box-shadow-base);
    padding: 0.8rem;
}

.scroll-spy-nav a {
    display: block;
    padding: 0.4rem 0.8rem;
    border-radius: 0.6rem;
    font-size: 1.5rem;
}

.scroll-spy-nav a.active {
    background-color: var(--color-secondary-70);
    color: #fff;
    font-weight: 500;
}

@media screen and (max-width: 1023px) {
    .scroll-spy-nav {
    	display: none !important;
    }
}

.pop-scroll-spy-nav {
    justify-content: center;
    width: 100%;
    gap: 0.8rem;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
    padding: 0.4rem;
    background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.pop-scroll-spy-nav a {
    padding: 0.8rem 2rem;
    border: 0.3rem solid var(--color-gray-10);
    border-radius: 3rem;
    color: var(--color-gray-60);
    flex-shrink: 0;
    background: #fff;
    display: inline-block;
    margin: 0.2rem;
}

.pop-scroll-spy-nav a.active {
    border: 0.3rem solid var(--color-secondary-50);
    color: var(--color-secondary-60);
    font-weight: 700;
    text-decoration: underline;
    text-underline-position: under;
}

@media screen and (max-width: 767px) {
    .pop-scroll-spy-nav {
        display: none !important;
    }
}


/*--- Step Indicator ---*/
.step-wrap {
    display: flex;
    margin: 4rem 0;
}

.step-wrap > li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-wrap > li::before {
    content: '';
    display: block;
    width: 100%;
    height: 0.5rem;
    position: absolute;
    top: calc((5rem / 2) - (0.5rem / 2));
    left: 50%;
    background: var(--color-gray-10);
    z-index: -1;
}

.step-wrap > li:last-of-type:before {
    display: none;
}

.step-wrap > li .icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--color-gray-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 0.8rem;
    outline: 1rem solid #fff;
}

.step-wrap > li .icon i {
    display: none;
}

.step-wrap > li .step {
    font-size: 1.5rem;
    color: var(--color-gray-70);
}

.step-wrap > li .step-tit {
    font-weight: 700;
    text-align: center;
}

.step-wrap > li.done .icon {
    background: var(--color-secondary-70);
}

.step-wrap > li.done .icon i {
    color: #fff;
    display: block;
}

.step-wrap > li.done .icon .num {
    display: none;
}

.step-wrap > li.active .icon {
    border: 0.4rem solid var(--color-secondary-70);
    background: #fff;
    color: var(--color-secondary-70);
    font-weight: 700;
}

.step-wrap > li.active .step-tit {
    color: var(--color-secondary-70);
}


/* --- Terms Agree --- */
.terms-agree-all {
    border: 0.1rem solid var(--color-border);
    background: var(--color-gray-5);
    padding: 2.4rem;
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 3rem;
}

.terms-agree-all.row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.terms-agree-ul {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.terms-agree-ul .agree-tit {
    font-size: 1.9rem;
    margin-bottom: 0.8rem;
    padding-right: 4rem;
}

.terms-agree-ul .agree-box {
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 1.6rem 2.4rem;
    overflow-y: auto;
    height: auto;
    max-height: 40rem;
    border-radius: 1.2rem;
}

.terms-agree-ul .agree-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-gray-10);
    border-radius: 0.8rem;
    margin-top: 1.2rem;
    padding: 1.6rem 2.4rem;
}

.terms-agree-ul .agree-check .txt {
    font-weight: 500;
}

.terms-agree-ul > li {
    position: relative;
}

.terms-agree-ul > li .toggle-btn {
    position: absolute;
    top: -0.2rem;
    right: 0;
    border: 0.1rem solid var(--color-border);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Agree Box --- */
.agree-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.agree-tit {
    font-size: 1.9rem;
    margin-bottom: 0.8rem;
}

.agree-box {
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 1.6rem 2.4rem;
    overflow-y: auto;
    height: 16rem;
    border-radius: 1.2rem;
}

.agree-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-gray-10);
    padding: 1.6rem 2.4rem;
}

.agree-check p {
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .agree-box {
        padding: 0.8rem 1.6rem;
    }

    .agree-check {
        padding: 0.8rem 1.6rem;
        gap: 0.8rem;
        flex-wrap: wrap;
    }
}


/* --- Table Form --- */
.tbl-form {
    margin-top: 0.4rem;
    table-layout: fixed;
}

.tbl-form > .tbl {
    border-top: 0.1rem solid var(--color-border);
    table-layout: fixed;
}

.tbl-form > .tbl > tbody > tr {
    border-bottom: 0.1rem solid var(--color-border);
}

.tbl-form > .tbl > tbody > tr > th,
.tbl-form > .tbl > tbody > tr > td {
    padding: 0.8rem 1.2rem;
    vertical-align: middle;
    height: 55px;
}

.tbl-form > .tbl > tbody > tr > th {
    background: var(--color-gray-5);
    font-weight: 500;
    gap: 0.4rem;
}

.tbl-form > .tbl > tbody > tr > td {
    text-align: left;
}

.tbl-form.column-form > .tbl > thead > tr > th {
    background: var(--color-gray-5);
    font-weight: 500;
    vertical-align: middle;
    height: 45px;
    border-right: 0.1rem solid var(--color-border);
    border-bottom: 0.1rem solid var(--color-border)
}

.tbl-form.column-form > .tbl > thead > tr > th:last-of-type {
    border-right: 0;
}

.tbl-form.column-form > .tbl > tbody > tr > td {
    border-right: 0.1rem solid var(--color-border);
    height: 45px;
}

.tbl-form.column-form > .tbl > tbody > tr > td:last-of-type {
    border-right: 0;
}

.essential {
    display: inline-block;
}

.essential::after {
    content: '*';
    display: block;
    left: 0;
    color: var(--color-danger-50);
    font-weight: 700;
    position: relative;
    top: -0.4rem;
}

/* --- Table Form Bak --- */
.form-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin-bottom: 4rem;
}

.form-box-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.form-box-top .title {
    font-size: 2.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.form-box-top .text-exp {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.form-box-body {
    border-top: 0.1rem solid var(--color-gray-90);
    margin-top: 0.8rem;
}

.form-hint {
    display: flex;
    gap: 0.4rem;
    color: var(--color-point-50);
    margin-top: 0.4rem;
    font-size: 1.4rem;
}

.form-hint::before {
    content: '';
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--color-point-50);
    mask-image: url(/images/sub/ico_information.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    position: relative;
    top: 0.2rem;
}

@media screen and (max-width: 1023px) {
    .tbl-form:not(.column-form) > .tbl {
        display: block;
    }

    .tbl-form:not(.column-form) > .tbl > tbody {
        display: block;
    }

    .tbl-form:not(.column-form) > .tbl > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 0;
    }

    .tbl-form > .tbl > tbody > tr > th {
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 0.1rem solid var(--color-border);
    }

    .tbl-form > .tbl > tbody > tr > th[rowspan] {
        width: 100%;
    }

    .tbl-form:not(.column-form) > .tbl > tbody > tr > th {
        height: auto;
    }

    .tbl-form:not(.column-form) > .tbl > tbody > tr > td {
        display: flex;
        align-items: center;
        height: auto;
        flex-wrap: wrap;
        min-height: 55px;
    }

    .tbl-form > .tbl > tbody > tr > th > label {
        word-break: break-all;
    }

    .tbl-form > .tbl > tbody > tr > td {
        width: calc(100% - 180px);
        border-bottom: 0.1rem solid var(--color-border);
    }
}

@media screen and (max-width: 767px) {
    .tbl-form > .tbl {
        display: block;
    }

    .tbl-form > .tbl > tbody {
        display: block;
    }

    .tbl-form > .tbl > tbody > tr {
        display: flex;
        flex-direction: column;
    }

    .tbl-form > .tbl > tbody > tr > th,
    .tbl-form > .tbl > tbody > tr > td {
        width: 100%;
        height: auto !important;
    }

    .tbl-form > .tbl > tbody > tr > td {
        min-height: 4.2rem;
        border-bottom: 0.1rem solid var(--color-border);
    }

    .tbl-form [class*="max-w"] {
        max-width: none !important;
    }

    .tbl-form.column-form thead {
        display: none;
    }
    
    .tbl-form.column-form tr {
        border-bottom: 0 !important;
    }

    .tbl-form.column-form td {
        display: flex;
        align-items: center;
        border-right: 0 !important;
    }

    .tbl-form.column-form td::before {
        content: attr(data-label);
        font-weight: 700;
        margin-right: 8px;
        flex-shrink: 0;
        min-width: 6rem;
        margin-right: 1.6rem;
        text-align: left;
    }

    .tbl-form.column-form td.no-data-label::before {
        display: none;
    }

    .form-box-top .text-exp {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 424px) {
    .tbl-form > tbody > tr > th,
    .tbl-form > tbody > tr > td {
        width: 100%;
        padding: 0;
    }

    .tbl-form > tbody > tr > th {
        background: transparent;
        border: 0;
        margin-top: 0.8rem;
        justify-content: flex-start;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .tbl-form > tbody > tr > td {
        padding: 0.4rem 0 0.8rem;
    }
}


/* --- File Uploader --- */
.upload-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.upload-list > li {
    border: 0.1rem solid var(--color-border);
    font-size: 1.5rem;
    padding: 0.8rem 1.2rem;
    display: flex;
    border-radius: 0.6rem;
    justify-content: space-between;
    gap: 0.4rem;
}

.upload-list > li .file-name {
    word-break: break-all;
}

.upload-list > li .btn-wrap button {
    opacity: 0.5;
}

.upload-list > li .btn-wrap button:hover {
    opacity: 0.7;
}

.file-attach-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.file-attach-list > li {
    border: 0.1rem solid var(--color-border);
    padding: 1.6rem 2rem;
    border-radius: 1.2rem;
    background: var(--color-gray-5);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.file-attach-list > li .file-attach-base {
    display: flex;
    align-items: center;
}

.file-attach-list > li .file-left {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: calc(100% - 20rem);
}

.file-attach-list > li .file-right {
    width: 20rem;
    border-left: 0.1rem solid var(--color-border);
    text-align: center;
    padding-left: 2rem;
}

.file-attach-list > li .file-label {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.file-attach-list > li .file-hint {
    font-size: 1.5rem;
}

.file-attach-list > li .file-name {
    font-size: 1.5rem;
    text-align: left;
}

.file-attach-list .file-attached {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.file-attach-list .file-attached > li {
    background: #fff;
    display: flex;
    font-size: 1.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 0.4rem;
    border: 0.1rem solid var(--color-border);
    gap: 1.2rem;
    align-items: center;
}

.file-attach-list .file-attached > li.nodata {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-gray-50);
}

.file-attach-list .file-attached > li .tit a:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.file-attach-list .file-attached > li button {
    display: block;
    color: var(--color-gray-50);
}

.file-attach-list .file-attached > li button:hover {
    color: #000;
}

@media screen and (max-width: 767px) {
    .file-attach-list > li {
        gap: 1.2rem;
        padding: 1.2rem 1.6rem;
    }

    .file-attach-list > li .file-left {
        width: 100%;
    }   

    .file-attach-list > li .file-label {
        flex-wrap: wrap;
    }

    .file-attach-list > li .file-attach-base {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .file-attach-list > li .file-right {
        padding-left: 0;
        width: 100%;
        text-align: left;
        border-left: 0;
    }

    .file-attach-list .file-attached {
        border-top: 0.1rem dotted var(--color-border);
        padding-top: 1.2rem;
    }
}

.img-attach-list {
    display: flex;
    margin-top: 0.8rem;
    gap: 1.2rem;
}

.img-attach-list > li {
    width: 24rem;
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    overflow: hidden;
}

.img-attach-list > li .thumbnail {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-gray-5);
    border-bottom: 0.1rem solid var(--color-border);
    position: relative;
}

.img-attach-list > li .thumbnail > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-attach-list > li .thumbnail .btn-util {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
}

.img-attach-list > li .thumbnail .btn-del {
    width: 2.4rem;
    height: 2.4rem;
    background: #fff;
    border: 0.1rem solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    color: var(--color-gray-50);
}

.img-attach-list > li .thumbnail .btn-del:hover {
    color: #000;
    border: 0.1rem solid #000;
}

.img-attach-list > li .img-info {
    padding: 0.8rem 1.2rem;
}

.img-attach-list > li .img-info .name {
    font-weight: 700;
    font-size: 1.5rem;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.img-attach-list > li .img-info .name > a {
    display: block;
}

.img-attach-list > li .img-info .name > a:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.img-attach-list > li .img-info .name > a:focus {
    box-shadow: inset 0 0 0 0.4rem var(--color-gray-50);
}

.img-attach-list > li .img-info .ext {
    color: var(--color-text-subtle);
    font-size: 1.3rem;
}


/* --- Survey --- */
#survey-wrap {
    background: #f7f7f7;
    padding: 1.6rem 1.6rem 4rem;
}

#survey-wrap .logo {
    width: 20rem;
    height: 5.8rem;
    background: url(/images/layout/logo.svg) no-repeat left center;
    background-size: contain;
    margin: 0 auto 1.2rem;
}

.survey-page-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 120rem;
    margin: auto;
    position: relative;
}

.survey-info-wrap {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    overflow: hidden;
}

.survey-info-wrap .tit-wrap {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.6rem;
    flex-wrap: wrap;
    background-color: var(--color-gray-70);
    text-align: center;
}

.survey-info-wrap .tit-wrap .tit {
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    word-break: keep-all;
}

.survey-info-wrap .tit-wrap .tit {
    font-size: 2.2rem;
    font-weight: 700;
}

.survey-info-wrap .tit-wrap .target {
    background: #fff;
    padding: 0.2rem 1rem;
    font-size: 1.5rem;
    border-radius: 10rem;
    font-weight: 700;
}

.survey-info-wrap .txt-wrap {
    padding: 1.6rem;
    background: #fff;
}

.survey-info-wrap .txt-wrap .txt strong {
    font-weight: 700;
    text-decoration: underline;
    text-underline-position: under;
}

.survey-input-wrap {
    border: 0.1rem solid var(--color-border);
    padding: 1.6rem;
    border-radius: 1.2rem;
    display: flex;
    gap: 1.6rem;
    background: #fff;
    transition: all var(--transition-base);
}

.survey-input-wrap:hover {
    border: 0.1rem solid #000;
}

.survey-input-wrap .input-item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

.survey-input-wrap .input-item label {
    font-weight: 500;
}

.survey-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.survey-list-wrap > li {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    overflow: hidden;
    transition: all var(--transition-base);
    background: #fff;
}

.survey-list-wrap > li > .question {
    display: flex;
    gap: 0.8rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 0.1rem solid var(--color-border);
    align-items: flex-start;
    transition: all var(--transition-base);
    background: #f3f3f3;
}

.survey-list-wrap > li:hover {
    border: 0.1rem solid #000;
}

.survey-list-wrap > li > .question .num {
    background: var(--color-gray-70);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.survey-list-wrap > li > .question .txt {
   font-weight: 700;
}

.survey-list-wrap > li > .answer {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.survey-list-wrap .question-sub {
    display: flex;
    flex-direction: column;
}

.survey-list-wrap .question-sub > li {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    border-bottom: 0.1rem dashed var(--color-border);
    padding: 1.6rem 0;
}

.survey-list-wrap .question-sub > li:first-of-type {
    padding-top: 0;
}

.survey-list-wrap .question-sub > li:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.survey-list-wrap .question-sub > li .txt {
    font-weight: 700;
}

.survey-page-wrap .step-wrap {
    margin: 1.6rem 0 0 0;
    position: relative;
    z-index: 1;
} 

.survey-page-wrap .step-wrap > li::before {
    background: var(--color-gray-20);
}
.survey-page-wrap .step-wrap > li .icon {
    outline: #f7f7f7;
    background: var(--color-gray-20);
}

.survey-page-wrap .step-wrap > li.active .icon {
    background: #fff;
}

#survey-wrap.neulbom .survey-info-wrap .tit-wrap {
    background: var(--color-neulbom);
}

#survey-wrap.org .survey-info-wrap .tit-wrap {
    background: var(--color-org);
}

@media screen and (max-width: 767px) {
    .survey-input-wrap {
        flex-wrap: wrap;
    }

    .survey-list-wrap .check-area {
        gap: 1.2rem 2rem;
    }

    .survey-list-wrap .check-area .form-check {
        width: 100%;
    }
}


/* --- Dropdown --- */
.dropdown-wrap {
    display: inline-block;
    position: relative;
}

.dropdown-list {
    background: #fff;
    border-radius: 0.6rem;
    display: none;
    position: absolute;
    z-index: 9999;
    border: 0.1rem solid var(--color-border);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 100%;
    top: calc(100% + 0.4rem);
    left: 0;
}

.dropdown-list > li {
    border-bottom: 0.1rem solid var(--color-border);
}

.dropdown-list > li:last-of-type {
    border-bottom: 0;
}

.dropdown-list > li > a {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--color-gray-90);
    padding: 0.8rem 1.2rem;
    font-size: 1.5rem;
}

.dropdown-list > li > a:hover {
    text-decoration: underline;
    text-underline-position: under;
}


/* --- Tooltip --- */
.tooltip {
    position: relative;
}

.tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 10;
    padding: 0.6rem 1rem;
    font-size: 1.5rem;
    white-space: nowrap;
    background: var(--color-gray-90);
    color: #fff;
    border-radius: 0.6rem;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

.tooltip .tooltip-text.white {
	background: #fff;
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-cert {
	background: var(--color-light-cert);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-neulbom {
	background: var(--color-light-neulbom);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-school {
	background: var(--color-light-school);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-normal {
	background: var(--color-light-normal);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-kindy {
	background: var(--color-light-kindy);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-center {
	background: var(--color-light-center);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-huyang {
	background: var(--color-light-huyang);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-healing {
	background: var(--color-light-healing);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.bg-light-arb {
	background: var(--color-light-arb);
	color: var(--color-gray-90);
	border: 0.1rem solid var(--color-border);
}

.tooltip .tooltip-text.wrap {
    white-space: wrap;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 아래쪽 */
.tooltip-bottom .tooltip-text {
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-bottom .tooltip-text::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--color-gray-90) transparent;
}

.tooltip-bottom .tooltip-text.white::after {
    border-color: transparent transparent white transparent;
}

.tooltip-bottom .tooltip-text.bg-light-cert::after {
    border-color: transparent transparent var(--color-light-cert) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-neulbom::after {
    border-color: transparent transparent var(--color-light-neulbom) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-school::after {
    border-color: transparent transparent var(--color-light-school) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-normal::after {
    border-color: transparent transparent var(--color-light-normal) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-kindy::after {
    border-color: transparent transparent var(--color-light-kindy) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-center::after {
    border-color: transparent transparent var(--color-light-center) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-huyang::after {
    border-color: transparent transparent var(--color-light-huyang) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-healing::after {
    border-color: transparent transparent var(--color-light-healing) transparent;
}

.tooltip-bottom .tooltip-text.bg-light-arb::after {
    border-color: transparent transparent var(--color-light-arb) transparent;
}

.tooltip-bottom .tooltip-text::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 0.1rem);
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--color-border) transparent;
}

/* 위쪽 */
.tooltip-top .tooltip-text {
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-top .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-gray-90) transparent transparent transparent;
}

.tooltip-top .tooltip-text.white::after {
    border-color: #fff transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-cert::after {
	border-color: var(--color-light-cert) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-neulbom::after {
	border-color: var(--color-light-neulbom) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-school::after {
	border-color: var(--color-light-school) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-normal::after {
	border-color: var(--color-light-normal) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-kindy::after {
	border-color: var(--color-light-kindy) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-center::after {
	border-color: var(--color-light-center) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-huyang::after {
	border-color: var(--color-light-huyang) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-healing::after {
	border-color: var(--color-light-healing) transparent transparent transparent;
}

.tooltip-top .tooltip-text.bg-light-arb::after {
	border-color: var(--color-light-arb) transparent transparent transparent;
}

.tooltip-top .tooltip-text::before {
    content: '';
    position: absolute;
    top: calc(100% + 0.1rem);
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-border) transparent transparent transparent;
}

/* 좌측 */
.tooltip-left .tooltip-text {
    top: 50%;
    right: 120%;
    transform: translateY(-50%);
}

.tooltip-left .tooltip-text::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-gray-90);
}

.tooltip-left .tooltip-text.white::after {
    border-color: transparent transparent transparent #fff;
}

.tooltip-left .tooltip-text.bg-light-cert::after {
	border-color: transparent transparent transparent var(--color-light-cert);
}

.tooltip-left .tooltip-text.bg-light-neulbom::after {
	border-color: transparent transparent transparent var(--color-light-neulbom);
}

.tooltip-left .tooltip-text.bg-light-school::after {
	border-color: transparent transparent transparent var(--color-light-school);
}

.tooltip-left .tooltip-text.bg-light-normal::after {
	border-color: transparent transparent transparent var(--color-light-normal);
}

.tooltip-left .tooltip-text.bg-light-kindy::after {
	border-color: transparent transparent transparent var(--color-light-kindy);
}

.tooltip-left .tooltip-text.bg-light-center::after {
	border-color: transparent transparent transparent var(--color-light-center);
}

.tooltip-left .tooltip-text.bg-light-huyang::after {
	border-color: transparent transparent transparent var(--color-light-huyang);
}

.tooltip-left .tooltip-text.bg-light-healing::after {
	border-color: transparent transparent transparent var(--color-light-healing);
}

.tooltip-left .tooltip-text.bg-light-arb::after {
	border-color: transparent transparent transparent var(--color-light-arb);
}

.tooltip-left .tooltip-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 0.1rem);
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-border);
}

/* 우측 */
.tooltip-right .tooltip-text {
    top: 50%;
    left: 120%;
    transform: translateY(-50%);
}

.tooltip-right .tooltip-text::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--color-gray-90) transparent transparent;
}

.tooltip-right .tooltip-text.white::after {
    border-color: transparent #fff transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-cert::after {
	border-color: transparent var(--color-light-cert) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-neulbom::after {
	border-color: transparent var(--color-light-neulbom) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-school::after {
	border-color: transparent var(--color-light-school) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-normal::after {
	border-color: transparent var(--color-light-normal) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-kindy::after {
	border-color: transparent var(--color-light-kindy) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-center::after {
	border-color: transparent var(--color-light-center) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-huyang::after {
	border-color: transparent var(--color-light-huyang) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-healing::after {
	border-color: transparent var(--color-light-healing) transparent transparent;
}

.tooltip-right .tooltip-text.bg-light-arb::after {
	border-color: transparent var(--color-light-arb) transparent transparent;
}

.tooltip-right .tooltip-text::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(100% + 0.1rem);
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--color-border) transparent transparent;
}

@media screen and (max-width: 1023px) {
    .tooltip .tooltip-text {
    	position: fixed;
    	top: calc(100vh - 6.8rem);
        left: 50%;
        transform: translate(-50%, -100%);
        z-index: 9999;
        width: calc(100vw - 3.2rem) !important;
        padding: 2rem 1.6rem;
    }

    .tooltip .tooltip-text::after {
        display: none;
    }
    
    .tooltip .tooltip-text::before {
        display: none;
    }
}


/* --- AnyId --- */
.anyid-img-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

.anyid-img-wrap img {
    width: 3rem;
    height: 3rem;
    border-radius: 0.4rem;
}


/* --- Search ID/PW --- */
.search-member {
    display: flex;
    gap: 2.4rem;
}

.search-member > li {
    width: 100%;
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    overflow: hidden;
}

.search-member > li .title {
    font-size: 2.4rem;
    text-align: center;
    font-weight: 500;
    padding: 1.2rem;
    border-bottom: 0.1rem solid var(--color-border);
    background: var(--color-gray-5);
}

.search-member > li .text {
    padding: 3rem 4rem;
    text-align: center;
    font-size: 1.9rem;
    display: flex;  
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.search-member > li .icon {
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: var(--color-gray-10);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid var(--color-border);
}

.search-member > li .icon img {
    width: 50%;
}

@media screen and (max-width: 1023px) {
    .search-member > li .title {
        font-size: 1.9rem;
    }

    .search-member > li .text {
        padding: 2rem;
        font-size: 1.7rem;
    }
}

@media screen and (max-width: 767px) {
    .search-member {
        flex-direction: column;
    }
}


/* --- Recurit List --- */
.recurit-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.6rem;
}

.recurit-item {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    padding: 4.8rem 2rem 2.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.recurit-item .recurit-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: 0 2rem;
}

.recurit-item .recurit-badge .badge-left {
    display: flex;
    gap: 0.4rem;
}

.recurit-item .recurit-badge .badge-left span {
    display: block;
    padding: 0.6rem 1.2rem;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    font-weight: 500;
    font-size: 1.5rem;
}

.recurit-item .recurit-badge .badge-left .type {
    color: #fff;
}

.recurit-item .recurit-badge .badge-left .type01 {
    background: var(--color-primary-10);
    color: var(--color-primary-70);
}

.recurit-item .recurit-badge .badge-left .type02 {
    background: var(--color-secondary-10);
    color: var(--color-secondary-70);
}

.recurit-item .recurit-badge .badge-left .type03 {
    background: var(--color-point-10);
    color: var(--color-point-70);
}

.recurit-item .recurit-badge .badge-left .area {
    background: var(--color-gray-10);
    color: var(--color-gray-70);
}

.recurit-item .recurit-badge .badge-right .state {
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.2rem;
    font-weight: 500;
    border-radius: 3rem;
}

.recurit-item .recurit-badge .badge-right .state.bg-blue {
    background: var(--color-information-50);
    color: #fff;
}

.recurit-item .recurit-badge .badge-right .state.bg-green {
    background: var(--color-success-50);
    color: #fff;
}

.recurit-item .recurit-badge .badge-right .state.bg-gray {
    background: var(--color-gray-50);
    color: #fff;
}

.recurit-item .recurit-tit > .title {
    font-size: 1.9rem;
    font-weight: 700;
    display: block;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2.85rem;
    height: 5.7rem;
}

.recurit-item .recurit-tit > .title:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.recurit-item .recurit-info {
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 0.1rem dotted var(--color-border);
    padding-top: 1.6rem;
}

.recurit-item .recurit-info > li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.recurit-item .recurit-info > li > .info-tit {
    font-weight: 500;
    border: 0.1rem solid var(--color-gray-30);
    color: var(--color-gray-50);
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    border-radius: 0.4rem;
    background: #fff;
    flex-shrink: 0;
}

@media screen and (max-width: 1439px) {
    .recurit-wrap {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 1023px) {
    .recurit-wrap {
    	grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 599px) {
    .recurit-wrap {
    	grid-template-columns: 1fr;
    }

    .recurit-item .recurit-tit > .title {
        height: auto;
    }
}


/* --- Recurit View --- */
.recurit-view {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    background: var(--color-gray-5);
}

.recurit-view .recurit-header {
    border-bottom: 0.1rem solid var(--color-border);
    padding-bottom: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 1.2rem;
    padding: 2rem;
    flex-wrap: wrap;
}

.recurit-view .recurit-header .title {
    font-size: 2.4rem;
    font-weight: 700;
}

.recurit-view .recurit-header .info-list {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.recurit-view .recurit-header .info-list > li {
    font-size: 1.5rem;
    margin-right: 1.2rem;
}

.recurit-view .recurit-header .info-list > li::after {
	content: '';
	display: inline-block;
	width: 0.1rem;
	height: 1rem;
	background: var(--color-border);
	margin-left: 0.8rem;
}

.recurit-view .recurit-header .info-list > li:last-of-type::after {
	display: none;
}

.recurit-view .recurit-header .info-list > li b {
	margin-right: 0.8rem;
	color: var(--color-gray-50);
}

.recurit-view .recurit-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.recurit-view .recurit-body .item .title {
    margin-bottom: 0.8rem;
}

.recurit-view .recurit-body .item .title > p {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    padding-left: 2.8rem;
}

.recurit-view .recurit-body .item .title > p::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    mask-image: url(/images/sub/page-right-solid.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color-gray-70);
    position: absolute;
    top: 0.3rem;
    left: 0;
}

.recurit-view .recurit-body .recurit-txt {
    border: 0.1rem solid var(--color-border);
    border-radius: 1.2rem;
    padding: 2.4rem;
    background: #fff;
    min-height: 40rem;
}

.recurit-view .tbl-wrap .tbl.data th {
    background: var(--color-gray-10);
}

.recurit-view .tbl-wrap .tbl.data td {
    background: #fff;
}

.recurit-view .tbl-wrap .tbl.data td .address {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    .recurit-view .recurit-header {
        padding: 1.6rem;
    }

    .recurit-view .recurit-body {
        padding: 1.6rem;
    }

    .recurit-view .recurit-body .recurit-txt {
        min-height: auto;
    }
}


/* --- Video View --- */
.video-view {
	border-top: 0.2rem solid var(--color-gray-95);
    border-bottom: 0.1rem solid var(--color-border);
}

.video-view .video-tit {
    padding: 1.6rem;
    border-bottom: 0.1rem dotted var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.video-view .video-tit > p {
    font-size: 2rem;
	font-weight: 700;
}

.video-view .video-info {
	display: flex;
	gap: 0 0.8rem;
	font-size: 1.5rem;
	flex-wrap: wrap;
    padding: 1.6rem;
}

.video-view .video-info > li::after {
	content: '';
	display: inline-block;
	width: 0.1rem;
	height: 1rem;
	background: var(--color-border);
	margin-left: 0.8rem;
}

.video-view .video-info > li:last-of-type::after{
	display: none;
}

.video-view .video-info > li b {
	margin-right: 0.8rem;
	color: var(--color-gray-50);
}

.video-view .video-hastag {
    background: var(--color-gray-5);
    padding: 1.6rem;
    display: flex;
}

.video-view .video-wrap {
    display: flex;
    margin: 4rem 0;
    gap: 2rem;
}

.video-view .video-wrap .video {
    width: 100%; /* 16:9 비율 */
    padding-top: 56.25%;
    position: relative;
}

.video-view .video-wrap iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.video-view .video-wrap .subtitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 56.3rem;
}

.video-view .video-wrap .subtitle .tit {
    background: var(--color-gray-70);
    height: 4rem;
    line-height: 4rem;
    color: #fff;
    display: inline-flex;
    padding: 0 1.6rem;
    align-items: center;
    gap: 0.8rem;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
} 

.video-view .video-wrap .subtitle .txt {
    padding: 2rem;
    overflow: auto;
    border: 0.1rem solid var(--color-border);
    width: 100%;
    height: calc(100% - 4rem);
    white-space: wrap;
}

.video-view .video-text {
    margin: 4rem 0;
}

@media screen and (max-width: 1439px) {
	.video-view .video-wrap .video {
        width: 70rem;
        height: 39.4rem;
    }

    .video-view .video-wrap .subtitle {
        height: 39.4rem;
    }
}

@media screen and (max-width: 1023px) {
	.video-view .video-wrap {
        flex-wrap: wrap;
    }

    .video-view .video-wrap .video {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }

    .video-view .video-wrap .subtitle {
        height: 30rem;
    }

    .video-view .video-wrap .subtitle .txt {
        padding: 1.6rem;
    }
}

@media screen and (max-width: 767px) {
	.video-view .video-tit {
        padding: 1.2rem;
    }

    .video-view .video-info {
        padding: 1.2rem;
    }

    .video-view .video-hastag {
        padding: 1.2rem;
    }

    .video-view .video-wrap {
        margin: 2rem 0;
    }

    .video-view .video-wrap .subtitle .txt {
        font-size: 1.5rem;
        padding: 1.2rem;
    }
}


/* --- Privacy --- */
.privacy-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.privacy-wrap .privacy-tit {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--color-secondary-90);
}

/* --- 인증 프로그램 신청 안내 --- */
.ico_file {
    width: 2rem;
    height: 2rem;
    background: url(/images/sub/ico_file.svg) no-repeat center / contain;
}
.education-cont {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
.education-cont > ul {
    display: flex;
    justify-content: center;
    gap: 4rem;
}
.education-cont > ul > li {
    width: 16rem;
    height: 16rem;
    border-radius: 100rem;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.education-cont-arrow {
    width: 3.2rem;
    height: 3.2rem;
    background: url(/images/sub/ico_arrow_stroke.svg) no-repeat center / contain ;
    margin: 0 auto;
}
.education-cont-txt {
    display: inline-block;
    text-align: center;
    padding: 2rem 6rem;
    border: 0.2rem solid var(--color-primary-40);
    border-radius: 100rem;
    margin: 0 auto;
}
.bg-gradient-green {
  background: linear-gradient(180deg, #D0EFC9 0%, #78C66F 100%);
}
.bg-gradient-gray {
background: linear-gradient(180deg, #E9EBE9 0%, #D1D4D1 100%);
}

.section-criteria {
    display: flex;
    gap: 2.4rem;
}
.section-criteria > li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border: 0.1rem solid var(--color-border);
    padding: 2.4rem 1.2rem;
    text-align: center;
    border-radius: 1.2rem;
}
.section-criteria > li > .criteria-num {
    width: 3.2rem;
    height: 3.2rem;
    color: #fff;
    background-color: var(--color-secondary-50);
    border-radius: 100rem;
    text-align: center;
    line-height: 3.1rem;
    font-weight: 700;
}
.section-criteria .title {
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
.section-criteria .text{
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
    color: var(--color-gray-70);
}

.section-criteria > li > .icon {
    width: 8rem;
    height: 8rem;
    background: #fff;
}
.section-criteria > li > .icon01 {
    background: url(/images/sub/img_structure-criteria01.svg) no-repeat center / contain;
}
.section-criteria > li > .icon02 {
    background: url(/images/sub/img_structure-criteria02.svg) no-repeat center / contain;
}
.section-criteria > li > .icon03 {
    background: url(/images/sub/img_structure-criteria03.svg) no-repeat center / contain;
}
.section-criteria > li > .icon04 {
    background: url(/images/sub/img_structure-criteria04.svg) no-repeat center / contain;
}
.section-criteria > li > .icon05 {
    background: url(/images/sub/img_structure-criteria05.svg) no-repeat center / contain;
}

.ui-process.cert-process > li::before,
.ui-process.cert-process > li::after {
  content: none;
  border: 0;
}
.ui-process.cert-process > li {
  position: relative;
}
.ui-process.cert-process > li::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -2rem;
  width: 2.4rem;
  height: 2.4rem;
  transform:translate(50%,-50%);
  background-color: var(--color-secondary-50);
  rotate: -90deg;
  -webkit-mask: url('/images/sub/ico_arrow_stroke.svg') no-repeat center / contain;
  mask: url('/images/sub/ico_arrow_stroke.svg') no-repeat center / contain;
}
.process-step {
    font-size: 1.7rem;
    font-weight: 700;
    background-color: var(--color-secondary-50);
    color: #fff;
    border-radius: 100rem;
    padding: 0.4rem 1.6rem;
}
.cert-process {
    gap: 4rem;
}
.cert-process > li {
    border: none;
    background-color: var(--color-secondary-5);
    gap: 1.2rem;
}
.cert-process > li .icon {
    background: #fff !important;
    width: 8rem;
    height: 8rem;
}
.cert-process > li .icon::after {
    content: '';
    display: block;
    width: 4rem;
    height: 4rem;
    background-size: 100%;
}
.cert-process > li .icon01::after {
    background: url(/images/sub/img_application.svg) no-repeat center;
}
.cert-process > li .icon02::after {
    background: url(/images/sub/img_submission.svg) no-repeat center;
}
.cert-process > li .icon03::after {
    background: url(/images/sub/img_document_review.svg) no-repeat center;
}
.cert-process > li .icon04::after {
    background: url(/images/sub/img_site_inspection.svg) no-repeat center;
}
.cert-process > li .icon05::after {
    background: url(/images/sub/img_registration_certificate.svg) no-repeat center;
}
.cert-process > li .icon06::after {
    background: url(/images/sub/img_public_notice.svg) no-repeat center;
}

.tbl-wrap2 {
    border-top: 0.5rem solid var(--color-secondary-60);
}
.tbl-wrap2 thead {
    border-bottom: 0.1rem solid var(--color-secondary-60);
}
.tbl-wrap2 .tbl.data th {
    padding: 1.2rem 1.6rem;
}
.tbl-wrap2 .border-lf {
    border-left: 0.1rem solid var(--color-border);
}
.tbl-wrap2 .border-rg {
    border-right: 0.1rem solid var(--color-border);
}

@media screen and (max-width: 1023px) {
   .section-criteria {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.6rem;
   }
   .education-cont {
        gap: 2rem;
   }
    .education-cont > ul {
        flex-wrap: wrap;
        gap: 2rem;
    }
    .education-cont > ul > li {
        width: 12rem;
        height: 12rem;
        padding: 0.8rem;
        font-size: 1.5rem;
    }
    .education-cont-arrow {
        width: 2.8rem;
        height: 2.8rem;
    }
    .education-cont-txt {
        padding: 1.6rem 4rem;
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .ui-process.cert-process > li::after {
        display: block !important;
        top: 100%;
        left: 47.5%;
        transform: translateX(-50%) rotate(90deg);
    }
    .ui-process.cert-process > li:last-child::after {
        display: none !important;
  }
  .ui-process.cert-process .text {
        padding-bottom: 0.8rem;
  }
  .section-criteria > li > .criteria-num {
        width: 2.8rem; 
        height: 2.8rem;
        line-height: 2.7rem;
        font-size: 1.5rem;
  }
    .section-criteria > li > .icon {
        width: 6rem;
        height: 6rem;
    }
    .process-step {
        font-size: 1.5rem;
    }
      #contents {
        width: 100%;
        padding-bottom: 4rem;
    }
}