@charset "UTF-8";

html,
body {
    height: 100%;
}

body {
    background: var(--krds-color-bg, #fff);
    font-family: "Pretendard GOV", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: var(--krds-color-fg, #1a1a1a);
}

:focus-visible {
    outline: 1px dashed #063a74;
    outline-offset: 0px;
}

.skip-link {
    overflow: hidden;
    position: absolute;
    top: auto;
    left: -9999px;
    width: 1px;
    height: 1px;
}

.skip-link:focus {
    padding: 8px 12px;
    width: auto;
    height: auto;
    background: #000;
    color: #fff;
}

/* Common */
@media (max-width: 900px) {
    .onlyPC {
        display: none;
    }
}

/* Accessibility */
#accessibility {
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 999999;
    width: 100%;
    background-color: #333
}

#accessibility a {
    margin-top: -100px;
    padding: 10px 25px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    line-height: 1;
    text-align: center;
    white-space: nowrap
}

#accessibility a:link {
    color: #333;
}

#accessibility a:focus {
    margin-top: 0;
    color: #fff
}

/* Layout */
.inner {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    max-width: 128rem;
}

.subNavi {
    border-bottom: 1px solid #eeeeee;
    background-color: #f8f9fa;
}

.subInner {
    margin: 0 auto;
    width: 128rem;
    max-width: 90%;
}

.subCont {
    margin-top: 13.3rem;
    margin-bottom: 3rem;
}

.subContetInner {
    margin: 0 auto;
    padding: 4rem 0;
    width: 128rem;
    max-width: 90%;
}

@media (max-width: 1200px) {

    .subCont {
        margin-top: 12.5rem;
    }

    .subContetInner {
        padding: 2.5rem 0;
    }
}

@media (max-width: 1024px) {
    .subCont {
        margin-top: 6.8rem;
        margin-bottom: 3rem;
    }
}

@media all and (max-width: 768px) {
    .subCont {
        margin-top: 5.9rem;
    }
}

@media all and (max-width: 700px) {
    .subCont {
        margin-top: 8rem;
    }
}

/* Header */
#krds-header .header-container .btn-navi.all {
    display: flex;
}

#krds-header .header-container .inner {
    width: 100%;
}

.headerWrap .krds-main-menu .gnb-menu .gnb-main-trigger::before,
.headerWrap .krds-main-menu .gnb-menu .gnb-main-trigger.active::before {
    background-color: #063a74;
}

#krds-header .krds-main-menu .gnb-toggle-wrap .gnb-main-list {
    max-width: 128rem;
}

@media (max-width: 1200px) {
    #krds-header .header-container .inner {
        padding: 1rem;
    }
}

@media (max-width: 767px) {
    #krds-header .header-container .btn-navi {
        padding: 0.5rem 0.7rem;
        font-size: 1.2rem;
    }
}

/* 투명 Header */
.headerWrap #krds-header {
    position: absolute;
    top: 3.1rem;
    width: 100%;
}

#mainHeader #krds-header {
    background: transparent;
}

#mainHeader #krds-header .krds-main-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
}

.osiria #mainHeader #krds-header .header-container .logo a {
    background-image: url(/images/osiria/common/logoW.png);
}

#mainHeader #krds-header .header-container .btn-navi {
    color: #fff;
}

#mainHeader #krds-header .header-container .btn-navi.sch::before,
#mainHeader #krds-header .header-container .btn-navi.lang::before,
#mainHeader #krds-header .header-container .btn-navi.all::before,
#mainHeader #krds-header .header-container .btn-navi.link::before {
    background: #fff;
}

#mainHeader #krds-header .header-container .btn-navi:hover,
#mainHeader #krds-header .header-container .btn-navi:active,
#mainHeader #krds-header .header-container .btn-navi:focus {
    background: rgba(255, 255, 255, 0.2);
}

#mainHeader .krds-main-menu .gnb-menu .gnb-main-trigger {
    color: #fff;
}

#mainHeader .krds-main-menu .gnb-menu .gnb-main-trigger::after {
    background: #fff;
}

/* 통합검색 Modal */
#popTotalSchType1 .modal-dialog .modal-conts,
#popTotalSch .modal-dialog .modal-conts {
    padding: 16rem 0 var(--krds-gap-12);
    max-width: 79.2rem;
}

#popTotalSchType1 .pop-total-serch-wrap .search-tit,
#popTotalSch .pop-total-serch-wrap .search-tit {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    margin-bottom: var(--krds-gap-4);
    font-size: var(--krds-pc-font-size-heading-medium);
    font-weight: var(--krds-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--krds-typo-letter-spacing-1);
}


#popTotalSchType1 .pop-total-serch-wrap .search-total-top,
#popTotalSch .pop-total-serch-wrap .search-total-top {
    padding: 0 0.4rem var(--krds-padding-10);
    border-bottom: 1px solid #d6e0eb;
    position: sticky;
    top: 0;
    background-color: #eef2f7;
}

#popTotalSchType1 .pop-total-serch-wrap .word-lately,
#popTotalSch .pop-total-serch-wrap .word-lately {
    border-left: 1px solid #d6e0eb;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-list,
#popTotalSch .pop-total-serch-wrap .sch-info-list {
    display: flex;
    width: 100%;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .list,
#popTotalSch .pop-total-serch-wrap .sch-info-item .list {
    display: flex;
    gap: var(--krds-gap-5);
    align-items: normal;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .list li,
#popTotalSch .pop-total-serch-wrap .sch-info-item .list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

#popTotalSchType1 .pop-total-serch-wrap .word-popular li,
#popTotalSch .pop-total-serch-wrap .word-popular li {
    gap: var(--krds-gap-3);
    counter-increment: item;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .ranking-state.up,
#popTotalSch .pop-total-serch-wrap .sch-info-item .ranking-state.up {
    color: #A70000;
}

#popTotalSchType1 .pop-total-serch-wrap .word-popular li .ranking-state,
#popTotalSch .pop-total-serch-wrap .word-popular li .ranking-state {
    margin-left: auto;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .ranking-state,
#popTotalSch .pop-total-serch-wrap .sch-info-item .ranking-state {
    display: inline-flex;
    gap: var(--krds-gap-1);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-direction: row;
    width: 4.3rem;
    font-size: var(--krds-pc-font-size-body-small);
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .ranking-state.up::before,
#popTotalSch .pop-total-serch-wrap .sch-info-item .ranking-state.up::before {
    border-bottom: 0.6rem solid #A70000;
    border-right: 0.4rem solid transparent;
    border-left: 0.4rem solid transparent;
    width: 0;
    height: 0;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .ranking-state::before,
#popTotalSch .pop-total-serch-wrap .sch-info-item .ranking-state::before {
    display: inline-flex;
    width: var(--krds-number-7);
    height: var(--krds-number-7);
    content: "";
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .ranking-state.same::before,
#popTotalSch .pop-total-serch-wrap .sch-info-item .ranking-state.same::before {
    width: 0.6rem;
    height: 0.2rem;
    background-color: black;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .ranking-state.down,
#popTotalSch .pop-total-serch-wrap .sch-info-item .ranking-state.down {
    color: #096ab3;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .ranking-state.down::before,
#popTotalSch .pop-total-serch-wrap .sch-info-item .ranking-state.down::before {
    border-top: 0.6rem solid #096ab3;
    border-right: 0.4rem solid transparent;
    border-left: 0.4rem solid transparent;
    width: 0;
    height: 0;
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item,
#popTotalSch .pop-total-serch-wrap .sch-info-item {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    flex-direction: column;
    padding: 0 var(--krds-padding-8);
    width: 50%;
    min-height: 46rem;
}

#popTotalSchType1 .pop-total-serch-wrap .word-lately .krds-btn.text,
#popTotalSch .pop-total-serch-wrap .word-lately .krds-btn.text {
    margin-top: auto;
}

#popTotalSchType1 .pop-total-serch-wrap .search-text,
#popTotalSch .pop-total-serch-wrap .search-text {
    padding-top: var(--krds-padding-10);
}

#popTotalSchType1 .pop-total-serch-wrap .sch-info-item .tit,
#popTotalSch .pop-total-serch-wrap .sch-info-item .tit {
    margin-bottom: var(--krds-gap-7);
    width: 100%;
    font-size: var(--krds-pc-font-size-heading-small);
}

@media (max-width: 767px) {

    #popTotalSchType1 .modal-dialog .btn-close,
    #popTotalSch .modal-dialog .btn-close {
        top: var(--krds-gap-6);
        right: var(--krds-gap-5);
        width: var(--krds-size-height-4);
        height: var(--krds-size-height-4);
    }

    #popTotalSchType1 .modal-dialog .modal-conts,
    #popTotalSch .modal-dialog .modal-conts {
        padding: 0;
    }

    #popTotalSchType1 .pop-total-serch-wrap,
    #popTotalSch .pop-total-serch-wrap {
        padding: 4.4rem 0 0;
    }

    #popTotalSchType1 .pop-total-serch-wrap .search-total-top,
    #popTotalSch .pop-total-serch-wrap .search-total-top {
        padding: var(--krds-padding-8) var(--krds-padding-6);
    }

    #popTotalSchType1 .pop-total-serch-wrap .search-tit,
    #popTotalSch .pop-total-serch-wrap .search-tit {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        font-size: var(--krds-mobile-font-size-heading-medium);
        letter-spacing: var(--krds-typo-letter-spacing-1);
    }

    #popTotalSchType1 .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-input,
    #popTotalSch .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-input {
        padding: 0 5.6rem 0 var(--krds-padding-6);
        height: var(--krds-size-height-9);
    }

    #popTotalSchType1 .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-btn,
    #popTotalSch .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-btn {
        width: var(--krds-size-height-5);
        height: var(--krds-size-height-5);
    }

    #popTotalSchType1 .pop-total-serch-wrap .search-text,
    #popTotalSch .pop-total-serch-wrap .search-text {
        padding: var(--krds-padding-8) var(--krds-padding-6);
    }

    #popTotalSchType1 .pop-total-serch-wrap .search-text .sch-info-list,
    #popTotalSch .pop-total-serch-wrap .search-text .sch-info-list {
        flex-direction: column;
    }

    #popTotalSchType1 .pop-total-serch-wrap .search-text .sch-info-item,
    #popTotalSch .pop-total-serch-wrap .search-text .sch-info-item {
        padding: 0;
        width: 100%;
        min-height: auto;
    }

    #popTotalSchType1 .pop-total-serch-wrap .search-text .word-lately,
    #popTotalSch .pop-total-serch-wrap .search-text .word-lately {
        margin-top: var(--krds-padding-8);
        padding-top: var(--krds-padding-8);
        border: 0;
        position: relative;
    }

    #popTotalSchType1 .pop-total-serch-wrap .search-text .word-lately::after,
    #popTotalSch .pop-total-serch-wrap .search-text .word-lately::after {
        position: absolute;
        top: 0;
        right: 0;
        left: -1.6rem;
        width: calc(100% + var(--krds-gap-8));
        height: var(--krds-light-border-width-variable-regular);
        background-color: var(--krds-light-color-divider-secondary-light);
        content: "";
    }
}

/* Quick Menu */
.quickMenu {
    /* margin-top: -10rem; */
    position: absolute;
    right: 5%;
    bottom: 10%;
    z-index: 51;
    width: 4.5rem;
    text-align: center;
}

.quiListWrap {
    box-shadow: 0 0 0.5rem var(--krds-high-contrast-color-alpha-shadow1);
    overflow: hidden;
    border-radius: var(--krds-number-6);
}

.quickList {
    background: #fff;
}

.quickList>ul>li {
    border-bottom: 1px solid #e5e6e8;
    font-size: 1.4rem;
    font-weight: 600;
}

.quickList>ul>li>a>span {
    display: inline-block;
    line-height: 1.8rem
}

.quickList>ul>li>a {
    display: block;
    padding: 1.0rem 0.2rem;
}

.quickList>ul>li>a:focus,
.pageTop>a:focus {
    outline: 2px dashed #063a74;
    outline-offset: -3px;
}

.quickList>ul>li>a::before {
    display: block;
    margin: 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    content: '';
}

.quickList>ul>li.icon1>a::before {
    background: url("/images/common/quick_icon1.png") no-repeat;
}

.quickList>ul>li.icon2>a::before {
    background: url("/images/common/quick_icon2.png") no-repeat;
}

.quickList>ul>li.icon3>a::before {
    background: url("/images/common/quick_icon3.png") no-repeat;
}

.quickList>ul>li.icon4>a::before {
    background: url("/images/common/quick_icon4.png") no-repeat;
}

.quickList>ul>li.icon5>a::before {
    background: url("/images/common/quick_icon5.png") no-repeat;
}

.pageTop {
    background: #505562;
    color: #fff;
}

.pageTop a {
    display: block;
    padding: 1rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.pageTop a::before {
    display: inline-block;
    margin-right: 0.3rem;
    width: 2rem;
    height: 1.8rem;
    vertical-align: middle;
    background-color: #fff;
    content: '';
    -webkit-mask-image: url(/krds/img/icon/ico_angle.svg);
    mask-image: url(/krds/img/icon/ico_angle.svg);
    mask-repeat: no-repeat;
    mask-position: left center;
    mask-size: contain;
    transform: rotate(180deg);
}

.chatBot {
    margin-top: 2rem;
}

.chatBot a {
    display: block;
}

@media all and (max-width: 1550px) {
    .quickMenu {
        right: 1rem;
    }
}

@media all and (max-width: 1024px) {
    .quickMenu {
        display: none;
    }
}

/* Sub Navi */
.sub_navi {}

.sub_header {
    border-left: 1px solid #eeeeee;
    background: #f8f9fa;
}

.sub_navi .container_inner {
    overflow: initial;
}

.sub_navi_box>ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sub_navi_box>ul>li.home {}

.sub_navi_box>ul>li.home a {
    display: block;
}

.sub_navi_box .depth1 ul {
    display: none;
}

#sub_nav>li {
    border-right: 1px solid #eeeeee;
    position: relative;
    z-index: 1;
    float: left;
}

/* #sub_nav>li::after {
    display: inline-flex;
    position: absolute;
    top: calc(50% - 1rem);
    right: 0;
    width: 0.1rem;
    height: 1.9rem;
    background-color: #d8d8d8;
    content: '';
} */

#sub_nav .trigger {
    min-width: 25rem;
    background: url(/krds/img/icon/ico_angle.svg) no-repeat;
    background-position: center right 2.5rem;
    background-size: 1.2rem;
}

#sub_nav>li a {
    display: block;
    padding: 1.65rem 2rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #424242;
}

/* primary children */
#sub_nav li ul {
    display: none;
    border: 1px solid #e2e2e2;
    position: absolute;
    top: 6rem;
    left: 0;
    width: 100%;
    background-color: #fff;
}

#sub_nav li ul li {
    border-bottom: 1px solid #e2e2e2;
}

#sub_nav li ul li:last-child {
    border-bottom: none;
}

#sub_nav li ul li a:hover {
    color: #13acb2;
}

@media all and (max-width: 1200px) {

    #sub_nav>li a {
        padding: 1.2rem 1.5rem;
        font-size: 1.6rem;
    }

    #sub_nav .trigger {
        min-width: 20rem;
    }
}

@media all and (max-width: 900px) {
    #sub_nav .trigger {
        min-width: 18rem;
    }
}

@media all and (max-width: 700px) {
    .subNavi {
        display: none;
    }
}

/* 브레드크럼 */
.locationWrap {
    margin: 6rem 0 0 0;
    padding-bottom: 8px;
    border-bottom: 0;
    position: relative;
}

.PageNameWrap::after {
    margin: 0 auto;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 128rem;
    max-width: 90%;
    height: 0.3rem;
    background-color: #eeeeee;
    -webkit-background-size: 3rem 3rem;
    background-size: 0.4rem 0.4rem;
    content: "";
}

.locationWrap .krds-breadcrumb-wrap {
    margin-bottom: 0;
    padding-top: 0;
}

.locationWrap .krds-breadcrumb-wrap .breadcrumb li a.txt {
    color: #808080;
    text-decoration: none;
}

.krds-breadcrumb-wrap .breadcrumb li:not(:last-child)::after {
    background-color: #808080;
}

@media all and (max-width: 1200px) {
    .locationWrap {
        margin: 3rem 0 0 0;
    }
}

/* 페이지 타이틀 및 공유, 프린트 */
.PageNameWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.5rem;
}

.pgName {
    font-size: 4rem;
    font-weight: 700;
    color: #333;
}

.pgNamesup {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color3Accent);
}

.shareWrap {
    display: flex;
    position: relative;
    grid-gap: 1rem;
}

.shareWrap .krds-btn.icon.large {
    border: 1px solid #d8d8d8;
    box-shadow: 1px 1px 8px rgb(176 176 176 / 20%);
    width: 5rem;
    height: 5rem;
}

.shareWrap .krds-btn.icon.border.large .svg-icon {
    width: 2.3rem;
    height: 2.3rem;
}

.share {
    display: inline-block;
    position: relative;
}

.share__button {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.share.open .share__button {
    transform: rotate(-180deg);
}

@media all and (max-width:1200px) {
    .pgNamesup {
        font-size: 2rem;
    }
}

@media all and (max-width:1024px) {
    .pgNamesup {
        font-size: 1.8rem;
    }
}

@media all and (max-width:768px) {
    .pgNamesup {
        font-size: 1.6rem;
    }
}

@media all and (max-width:700px) {
    .pgNamesup {
        font-size: 1.2rem;
    }
}

/* 리스트 기본 스타일 */
.shareList {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 기본 숨김: 보이지 않고, 클릭 불가 */
.share .shareList {
    position: absolute;
    top: 0;
    /* 버튼 아래쪽에 위치 */
    left: 0;
    visibility: hidden;
    /* 살짝 위에서 시작 */
    transition: all 0.3s ease;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
}

/* 열릴 때: 보이고, 클릭 가능 */
.share.open .shareList {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.shareList ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shareList li {
    position: absolute;
    /* 아이콘 애니메이션 위치 제어용 */
    top: 0;
    left: 0;
}

/* 아이콘 공통 */
.share__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d8;
    width: 5rem;
    height: 5rem;
    background: #fff;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 5rem;
    transform: translateY(0) rotate(180deg);
}

/* 열렸을 때 아래로 펼쳐짐 */
.share.open .shareList li:nth-child(1) .share__icon {
    transform: translateY(60px) rotate(0);
}

.share.open .shareList li:nth-child(2) .share__icon {
    transform: translateY(120px) rotate(0);
}

.share.open .shareList li:nth-child(3) .share__icon {
    transform: translateY(180px) rotate(0);
}

.share.open .shareList li:nth-child(4) .share__icon {
    transform: translateY(240px) rotate(0);
}

.textUrl {
    font-size: 1.4rem;
    font-weight: 600;
}

@media all and (max-width: 1200px) {
    .PageNameWrap {
        padding-bottom: 0.8rem;
    }

    .pgName {
        font-size: 3.2rem;
    }

    .shareWrap .krds-btn.icon.large {
        width: 4.5rem;
        height: 4.5rem;
    }

    .share__icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .share.open .shareList li:nth-child(1) .share__icon {
        transform: translateY(55px) rotate(0);
    }

    .share.open .shareList li:nth-child(2) .share__icon {
        transform: translateY(110px) rotate(0);
    }

    .share.open .shareList li:nth-child(3) .share__icon {
        transform: translateY(165px) rotate(0);
    }

    .share.open .shareList li:nth-child(4) .share__icon {
        transform: translateY(220px) rotate(0);
    }
}

@media all and (max-width: 900px) {
    .PageNameWrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .pgName {
        font-size: 3rem;
    }
}

@media all and (max-width: 600px) {
    .pgName {
        font-size: 2.6rem;
    }

    .shareWrap {
        grid-gap: 0.7rem;
    }
}

/* Footer */
.scroll-no {
    overflow: hidden;
}

#krds-footer.footer {
    background: #f4f5f6;
}

#krds-footer.footer .f-logo {
    width: 13.7rem;
    height: var(--krds-size-height-7);
    background-image: url(/images/osiria/common/logoF.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.krds-btn.text.medium.bUnderline {
    font-weight: 600;
    color: #063a74;
    text-decoration: underline;
}

#krds-footer.footer .f-btm {
    gap: var(--krds-gap-3);
}

#krds-footer.footer .foot-quick .inner {
    width: 100%;
}

/* 푸터 - 관련 기관 링크 (CSS 변환) */
.footSiteModal .modal-dialog .modal-header {
    padding: 0 0 var(--krds-padding-10);
    line-height: 1;
}

.footSiteModal .modal-dialog .modal-header,
.footSiteModal .modal-dialog .modal-conts {
    max-width: 128rem;
}

.footSiteModal .modal-dialog .btn-close {
    top: var(--krds-gap-12);
    right: var(--krds-gap-12);
}

#krds-footer.footer .krds-modal .modal-dialog .modal-content {
    align-items: center;
    justify-content: center;
}


/* light 모드 기준 변수로 치환 */
.footSiteModal .pop-foot-links {
    /* hover/active 배경 컬러 변수 정의 */
    --pop-foot-link-color-background-hover: var(--krds-light-color-element-secondary-light);
    --pop-foot-link-color-background-active: var(--krds-color-light-secondary-20);
    display: grid;
    gap: var(--krds-gap-3) var(--krds-gap-5);

    padding: 0.4rem;
    grid-template-columns: repeat(4, 1fr);
    /* 최신 문법 */
    /* grid-gap: var(--krds-gap-3) var(--krds-gap-5);  오래된 문법 필요하면 주석 해제 */
}

.footSiteModal .pop-foot-links li a {
    /* @include flex-layout($ai:flex-start) 대체 */
    display: flex;
    gap: var(--krds-gap-2);
    align-items: flex-start;

    padding: var(--krds-padding-5) var(--krds-padding-3);
    word-break: break-all;
    border-radius: var(--krds-radius-medium3);
}

.footSiteModal .pop-foot-links li a::before {
    margin-top: 0.1rem;
    content: "･";
}

.footSiteModal .pop-foot-links li a:hover {
    background-color: var(--pop-foot-link-color-background-hover);
}

.footSiteModal .pop-foot-links li a:active {
    background-color: var(--pop-foot-link-color-background-active);
}

@media all and (max-width: 1280px) {
    #krds-footer.footer .krds-modal .modal-dialog .modal-content>*:not(.btn-close) {
        width: 95%;
    }

    #krds-footer.footer .footSiteModal .pop-foot-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #krds-footer.footer .foot-quick .inner .link {
        padding: 0 var(--krds-padding-8);
    }
}

@media (max-width: 767px) {
    #krds-footer.footer .f-logo {
        width: 15rem;
        height: 4rem;
    }

    #krds-footer.footer .krds-modal:not([data-type=bottom-sheet]) .modal-dialog .modal-header {
        padding-bottom: 1.5rem;
    }

    #krds-footer.footer .krds-modal .modal-dialog .modal-content {
        justify-content: flex-start;
    }

    #krds-footer.footer .krds-btn.medium {
        font-size: var(--krds-button--mobile-font-size-small);
    }

    #krds-footer.footer .footSiteModal .pop-foot-links {
        gap: var(--krds-gap-3) var(--krds-gap-3);
        grid-template-columns: repeat(2, 1fr);
    }

    .footSiteModal .pop-foot-links li a {
        font-size: 1.6rem;
    }
}

/* 담당자 정보(공통) */
.chargeBox {
    margin: 0 auto;
    padding: 3rem;
    border: 5px solid #f4f4f4;
    width: 128rem;
    max-width: 90%;
}

.chargeBox>ul>li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.chargeBox>ul>li:last-child {
    margin-bottom: 0;
}

.partInfo2 {
    display: flex;
    gap: 4.5rem;
}

@media all and (max-width: 900px) {
    .chargeBox>ul>li {
        font-size: 1.6rem;
    }

    .chargeBox {
        padding: 1.8rem;
    }
}

@media all and (max-width: 768px) {
    .chargeBox>ul>li {
        flex-direction: column;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e4e4e4;
        font-size: 1.4rem;
    }

    .chargeBox>ul>li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .partInfo2 {
        display: flex;
        gap: 0;
        flex-direction: column;
    }
}

/* Title */
.secTit {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: 3rem;
    font-size: 2.3rem;
    font-weight: 600;
    color: #1d1d1d;
}

.secTit2 {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: 3rem;
    font-size: 2.3rem;
    font-weight: 700;
    color: #1d1d1d;
}

.secTit3 {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: 3rem;
    font-size: 3rem;
    font-weight: 700;
    color: #222;
}

.hasCmnt {
    margin-bottom: 3rem;
}

.hasCmnt .secTit {
    margin-bottom: .5rem;
}

.secTit::before {
    width: 2.6rem;
    height: 2.5rem;
    background: url("/images/common/title_img.png") no-repeat;
    background-size: 100%;
    content: '';
}

.thirdTit {
    margin-bottom: .5rem;
    padding-left: 3rem;
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
    color: #063a74;
}

.thirdTit::before {
    display: inline-flex;
    position: absolute;
    top: calc(50% - 1.2rem);
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: #063a74;
    content: '';
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/krds/img/icon/ico_expand.svg);
    mask-image: url(/krds/img/icon/ico_expand.svg);
    transform: rotate(360deg);
}

@media all and (max-width:768px) {
    .secTit {
        align-items: normal;
        margin-bottom: 2rem;
        font-size: 2.0rem;
    }

    .secTit2 {
        align-items: normal;
        margin-bottom: 2rem;
        font-size: 2.0rem;
    }

    .secTit3 {
        margin-bottom: 2rem;
        font-size: 2.0rem;
    }

    .secTit::before {
        width: 2.5rem;
        height: 2.5rem;
    }

    .thirdTit {
        padding-left: 2.8rem;
        font-size: 1.7rem;
    }

    .thirdTit::before {
        width: 2.2rem;
        height: 2.2rem;
    }

    .hasCmnt {
        margin-bottom: 1.5rem;
    }

    .secCmnt {
        font-size: 1.6rem;
    }
}

@media all and (max-width:600px) {
    .secTit {
        margin-bottom: 1rem;
        font-size: 1.8rem;
    }

    .secTit2 {
        margin-bottom: 1rem;
        font-size: 1.8rem;
    }

    .secTit3 {
        margin-bottom: 1rem;
        font-size: 1.8rem;
    }


    .secTit::before {
        width: 2.3rem;
        height: 2.3rem;
    }
}

/* Table */
/* Basic Table */
.basicTable {
    border-top: 1px solid #d0d0d0;
    border-collapse: collapse;
}

.basicTable tr {
    border-bottom: 1px solid #d0d0d0;
}

.basicTable th,
.basicTable td {
    display: table-cell;
    padding: 1.5rem;
    border-right: 1px solid #d0d0d0;
    text-align: center;
}

.basicTable th {
    background-color: #f7f7f7;
    font-weight: 700;
    color: #1d1d1d;
    text-align: center;
}

.basicTable th:last-child {
    border-right: none;
}

.basicTable td:last-child {
    border-right: none;
}

.basicTable td {
    border-bottom: 1px solid #d0d2db;
    vertical-align: middle;
    color: #1d1d1d;
}

.basicTable .left,
.colTable .left {
    text-align: left;
}

.basicTable .bdRight {
    border-right: 1px solid #d0d2db !important;
}

@media all and (max-width:1200px) {

    /* Basic Table */
    .basicTable th,
    .basicTable td {
        padding: 1.0rem;
        font-size: 1.5rem;
    }

    /* Table Scroll */
    .tableScroll {
        overflow-x: auto;
        width: 100%;
    }
}

@media all and (max-width:768px) {

    /* Basic Table */
    .basicTable.responsive col {
        width: 100% !important;
    }

    .basicTable.responsive tr {
        border-bottom: none;
    }

    .basicTable.responsive th {
        display: none;
    }

    .basicTable.responsive td {
        display: block;
        overflow: hidden;
        font-size: 1.6rem;
    }

    .basicTable.responsive th,
    .basicTable.responsive td {
        border-right: none;
        text-align: left;
    }

    .basicTable.responsive td:before {
        display: table-cell;
        width: 100%;
        font-weight: bold;
        text-align: left;
        content: attr(data-th);
    }

    .basicTable.responsive th,
    .basicTable.responsive td:before {
        font-weight: bold;
    }

    .basicTable.responsive tr:nth-child(even) {
        background-color: #f7f7f7;
    }

    .basicTable.responsive .center {
        text-align: left;
    }

    .basicTable .mRowspan {
        background: #e5edff;
        color: #00459E;
    }
}

/* colTable */
.colTable {
    border-top: 1px solid #d0d0d0;
    font-size: 1.8rem;
    border-collapse: collapse;
}

.colTable tbody th,
.colTable tbody td {
    padding: 1.5rem;
    border-bottom: 1px solid #d0d0d0;
    vertical-align: middle;
    box-sizing: border-box;
}

.colTable tbody th {
    background: #f7f7f7;
    font-weight: 700;
    color: #1d1d1d;
}

.colTable tbody td {
    border-right: 1px solid #d0d0d0;
    color: #1d1d1d;
}

.colTable tbody td:last-child {
    border-right: none;
}

@media all and (max-width:1200px) {
    .container_inner {
        width: 100%;
    }
}

@media all and (max-width:768px) {

    /* colTable */
    .colTable {
        border-top: none;
        font-size: 1.5rem;
    }

    .colTable.horizontal th,
    .colTable.horizontal td {
        display: block;
        padding: 0.8rem;
        border-top: none;
        border-right: none;
        width: 100%;
    }

    .colTable.horizontal tr:first-child th {
        border-top: 1px solid #ddd;
    }
}

/* List */
.tableBox .krds-info-list>li {
    padding-left: 1.5rem;
}

.krds-info-list.center>li::before {
    position: static;
}

@media all and (max-width:600px) {
    .tableBox .krds-info-list>li {
        font-size: 1.5rem;
    }
}

/* 4Depth Menu */
.depth4Tab {
    margin: 4rem 0 0 0;
}

.depth4Tab>ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.depth4Tab>ul>li {
    flex: 1;
    text-align: center;
}

.depth4Tab>ul>li a {
    display: block;
    margin-left: -.1rem;
    padding: 1.65rem 0;
    border: 1px solid #888888;
    font-size: 2rem;
    font-weight: 500;
    color: #1d1d1d;
}

.depth4Tab>ul>li.active a {
    border: 1px solid #063a74;
    background: #063a74;
    color: #fff;
}

@media all and (max-width:1200px) {
    .depth4Tab {
        margin: 2.5rem 0 0 0;
    }

    .depth4Tab>ul>li a {
        padding: 1.2rem 0;
        font-size: 1.8rem;
    }
}

@media screen and (max-width:768px) {
    .depth4Tab>ul {
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .depth4Tab>ul>li {
        flex: unset;
        width: 50%;
        text-align: center;
    }

    .depth4Tab>ul>li a {
        margin-top: -.1rem;
        padding: 1rem 0;
        font-size: 1.6rem;
    }
}

/* align */
.txtLeft {
    text-align: left !important;
}

.txtRight {
    text-align: right !important;
}

.txtCenter {
    text-align: center !important;
}

/* blank */
.pd0 {
    padding: 0 !important;
}

.ptb40 {
    padding: 4rem 0;
}

.pt0 {
    padding-top: 0 !important;
}

.pt5 {
    padding-top: 0.5rem !important;
}

.pt10 {
    padding-top: 1rem !important;
}

.pt15 {
    padding-top: 1.5rem !important;
}

.pt20 {
    padding-top: 2rem !important;
}

.pt25 {
    padding-top: 2.5rem !important;
}

.pt30 {
    padding-top: 3rem !important;
}

.pt35 {
    padding-top: 3.5rem !important;
}

.pt40 {
    padding-top: 4rem !important;
}

.pt45 {
    padding-top: 4.5rem !important;
}

.pt50 {
    padding-top: 5rem !important;
}

.pr5 {
    padding-right: 0.5rem !important;
}

.pr10 {
    padding-right: 1rem !important;
}

.pr15 {
    padding-right: 1.5rem !important;
}

.pr20 {
    padding-right: 2rem !important;
}

.pr25 {
    padding-right: 2.5rem !important;
}

.pr30 {
    padding-right: 3rem !important;
}

.pr35 {
    padding-right: 3.5rem !important;
}

.pr40 {
    padding-right: 4rem !important;
}

.pr45 {
    padding-right: 4.5rem !important;
}

.pr50 {
    padding-right: 5rem !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb5 {
    padding-bottom: 0.5rem !important;
}

.pb10 {
    padding-bottom: 1rem !important;
}

.pb15 {
    padding-bottom: 1.5rem !important;
}

.pb20 {
    padding-bottom: 2rem !important;
}

.pb25 {
    padding-bottom: 2.5rem !important;
}

.pb30 {
    padding-bottom: 3rem !important;
}

.pb35 {
    padding-bottom: 3.5rem !important;
}

.pb40 {
    padding-bottom: 4rem !important;
}

.pb45 {
    padding-bottom: 4.5rem !important;
}

.pb50 {
    padding-bottom: 5rem !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl5 {
    padding-left: 0.5rem !important;
}

.pl10 {
    padding-left: 1rem !important;
}

.pl15 {
    padding-left: 1.5rem !important;
}

.pl20 {
    padding-left: 2rem !important;
}

.pl25 {
    padding-left: 2.5rem !important;
}

.pl30 {
    padding-left: 3rem !important;
}

.pl35 {
    padding-left: 3.5rem !important;
}

.pl40 {
    padding-left: 4rem !important;
}

.pl45 {
    padding-left: 4.5rem !important;
}

.pl50 {
    padding-left: 5rem !important;
}

.pppp10 {
    padding: 1rem !important;
}

.pppp15 {
    padding: 1.5rem !important;
}

.pppp20 {
    padding: 2rem !important;
}

.pppp30 {
    padding: 3rem 4rem !important;
}

/* margin */
.mt-25 {
    margin-top: -2.5rem !important;
}

.mt-40 {
    margin-top: -4rem !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mt5 {
    margin-top: 0.5rem !important;
}

.mt10 {
    margin-top: 1rem !important;
}

.mt15 {
    margin-top: 1.5rem !important;
}

.mt20 {
    margin-top: 2rem !important;
}

.mt25 {
    margin-top: 2.5rem !important;
}

.mt30 {
    margin-top: 3rem !important;
}

.mt35 {
    margin-top: 3.5rem !important;
}

.mt40 {
    margin-top: 4rem !important;
}

.mt45 {
    margin-top: 4.5rem !important;
}

.mt50 {
    margin-top: 5rem !important;
}

.mt60 {
    margin-top: 6rem !important;
}

.mt100 {
    margin-top: 10rem !important;
}

.mr5 {
    margin-right: 0.5rem !important;
}

.mr8 {
    margin-right: 0.8rem !important;
}

.mr10 {
    margin-right: 1rem !important;
}

.mr15 {
    margin-right: 1.5rem !important;
}

.mr20 {
    margin-right: 2rem !important;
}

.mr25 {
    margin-right: 2.5rem !important;
}

.mr30 {
    margin-right: 3rem !important;
}

.mr35 {
    margin-right: 3.5rem !important;
}

.mr40 {
    margin-right: 4rem !important;
}

.mr45 {
    margin-right: 4.5rem !important;
}

.mr50 {
    margin-right: 5rem !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb5 {
    margin-bottom: 0.5rem !important;
}

.mb10 {
    margin-bottom: 1rem !important;
}

.mb15 {
    margin-bottom: 1.5rem !important;
}

.mb20 {
    margin-bottom: 2rem !important;
}

.mb25 {
    margin-bottom: 2.5rem !important;
}

.mb30 {
    margin-bottom: 3rem !important;
}

.mb35 {
    margin-bottom: 3.5rem !important;
}

.mb40 {
    margin-bottom: 4rem !important;
}

.mb45 {
    margin-bottom: 4.5rem !important;
}

.mb50 {
    margin-bottom: 5rem !important;
}

.mb60 {
    margin-bottom: 6rem !important;
}

.mb70 {
    margin-bottom: 7rem !important;
}

.mb80 {
    margin-bottom: 8rem !important;
}

.mb100 {
    margin-bottom: 10rem !important;
}

.ml-20 {
    margin-left: -2rem !important;
}

.ml-15 {
    margin-left: -1.5rem !important;
}

.ml0 {
    margin-left: 0 !important;
}

.ml5 {
    margin-left: 0.5rem !important;
}

.ml10 {
    margin-left: 1rem !important;
}

.ml15 {
    margin-left: 1.5rem !important;
}

.ml20 {
    margin-left: 2rem !important;
}

.ml25 {
    margin-left: 2.5rem !important;
}

.ml30 {
    margin-left: 3rem !important;
}

.ml35 {
    margin-left: 3.5rem !important;
}

.ml40 {
    margin-left: 4rem !important;
}

.ml45 {
    margin-left: 4.5rem !important;
}

.ml50 {
    margin-left: 5rem !important;
}

.ml70 {
    margin-left: 7rem !important;
}

.ml80 {
    margin-left: 8rem !important;
}

.ml90 {
    margin-left: 9rem !important;
}

.ml100 {
    margin-left: 10rem !important;
}

.ml110 {
    margin-left: 11rem !important;
}

.ml120 {
    margin-left: 12rem !important;
}

.m_center {
    margin: 0 auto;
}

/* Text */
.tGreen {
    font-weight: 700;
    color: #063a74;
}

.tRed {
    color: #d00b0b;
}

/* Content Common */
.noticeWordWrap {
    margin: 1.5rem 0;
}

.subContSection {
    margin-bottom: 8rem;
}

.subContSection .secTit {
    margin-bottom: .5rem;
}

.colRed {
    color: #d00b0b;
}

.btnCenter {
    text-align: center;
}

.btnRight {
    text-align: right;
}

.basicBtn.krds-btn {
    border: 1px solid #063a74;
    background-color: #063a74;
}

.basicBtn.krds-btn:hover {
    background-color: #007589;
    color: #fff;
}

.basicBtn.krds-btn:active,
.basicBtn.krds-btn:focus {
    background-color: #007589;
    color: #fff;
}

.subContSection .krds-info-list {
    gap: .5rem;
}

.subContSection .krds-info-list>li {
    padding-left: 1.8rem !important;
}

@media all and (max-width:768px) {
    .subContSection {
        margin-bottom: 4rem;
    }

    .nwText {
        font-size: 1.4rem;
    }

    .basicBtn.krds-btn {
        height: 5rem;
        font-size: 1.6rem;
    }

    .lineBtn.krds-btn {
        height: 5rem;
        font-size: 1.6rem;
    }

    .sContTxt {
        font-size: 1.6rem;
    }

    .subContSection .krds-info-list>li {
        font-size: 1.6rem;
    }

    .btnM a,
    .btnM button {
        margin-bottom: 0.8rem;
        width: 100%;
    }
}

/* introBox */
.introBox {
    margin-bottom: 4rem;
    padding: 4rem;
    border-left: 8px solid var(--color3Accent);
    background: var(--color3AccentLite);
    border-radius: 1rem;
}

.introTit {
    font-size: 2.3rem;
    font-weight: 600;
    color: #1d1d1d;
}

.introText {
    color: #515151;
}

@media all and (max-width:768px) {
    .introBox {
        margin-bottom: 2.5rem;
        padding: 2rem;
        border-left: 6px solid #063a74;
    }

    .introTit {
        margin-bottom: 0.5rem;
        font-size: 1.8rem;
    }

    .introText {
        font-size: 1.5rem;
    }

}

/* 서브타이틀 */
.title_page {
    padding: 2% 0 5% 0;
    font-size: 4.0rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

@media all and (max-width: 1200px) {
    .title_page {
        font-size: 3.0rem;
    }
}

@media all and (max-width: 900px) {
    .title_page {
        font-size: 2.6rem;
    }
}

@media all and (max-width: 600px) {
    .title_page {
        padding: 0 0 5% 0;
        font-size: 2.0rem;
    }
}

/*** 라이브러리 ****/
/* layout */
.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

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

.space-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

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

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

.gap-5-vw {
    gap: 5vw;
}

.gap-4-vw {
    gap: 4vw;
}

.gap-3-vw {
    gap: 3vw;
}

.gap-2-vw {
    gap: 2vw;
}

.gap-1-vw {
    gap: 1vw;
}

/* 크기 */
.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.max-w-100 {
    max-width: 100% !important;
}

/* subContSectionText */
.subContSectionText_1 {
    font-size: clamp(2.25rem, 1.875vw, 3.6rem);
    font-weight: 700;
    line-height: 130%;
    color: #1d1d1d;
}

.subContSectionText_2 {
    font-size: clamp(1.6rem, 1.25vw, 2.3rem);
    line-height: 150%;
    color: #1d1d1d;
}

.subContSectionText_3 {
    font-size: clamp(1.6rem, 1.25vw, 2.3rem);
    font-weight: 700;
    line-height: 150%;
    color: #1d1d1d;
}

.subContSectionText_4 {
    font-size: clamp(1.2rem, 1vw, 1.6rem);
    line-height: 150%;
    color: #515151;
}

.subContSectionText_5 {
    font-size: clamp(1rem, 0.8vw, 1.4rem);
    line-height: 150%;
    color: #515151;
}

.subContSectionText_6 {
    font-size: 2.0rem;
    color: #1d1d1d;
}

@media (max-width:1200px) {
    .subContSectionText_6 {
        font-size: 1.8rem;
    }
}

@media (max-width:900px) {
    .subContSectionText_6 {
        font-size: 1.6rem;
    }
}

@media (max-width:768px) {
    .subContSectionText_6 {
        font-size: 1.4rem;
    }
}

/* hr-style1 */
.line-bottom {
    display: block;
    border-bottom: 1px solid #e0e0e0;
}

.line-bottom.pt {
    padding-top: clamp(2rem, 4%, 4rem);
}

.line-bottom.pb {
    padding-bottom: clamp(2rem, 4%, 4rem);
}

.line-bottom.mb {
    margin-bottom: clamp(2rem, 4%, 4rem);
}

.line-bottom.mt {
    margin-top: clamp(2rem, 4%, 4rem);
}

/* icon */
.svg-icon.small {
    width: var(--krds-icon--size-small);
    height: var(--krds-icon--size-small);
}

.svg-icon.medium {
    width: var(--krds-icon--size-medium);
    height: var(--krds-icon--size-medium);
}

.svg-icon.large {
    width: var(--krds-icon--size-large);
    height: var(--krds-icon--size-large);
}

.ico-pin {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_pin.svg);
    mask-image: url(/images/osiria/sub/ico_pin.svg);
}

.ico-home {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_home.svg);
    mask-image: url(/images/osiria/sub/ico_home.svg);
}

.ico-won {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_won.svg);
    mask-image: url(/images/osiria/sub/ico_won.svg);
}

.ico-area {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_area.svg);
    mask-image: url(/images/osiria/sub/ico_area.svg);
}

.ico-peple {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_peple.svg);
    mask-image: url(/images/osiria/sub/ico_peple.svg);
}

.ico-building {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_building.svg);
    mask-image: url(/images/osiria/sub/ico_building.svg);
}

.ico-factory {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_factory.svg);
    mask-image: url(/images/osiria/sub/ico_factory.svg);
}

.ico-home_eco {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_home_eco.svg);
    mask-image: url(/images/osiria/sub/ico_home_eco.svg);
}

.ico-house {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_house.svg);
    mask-image: url(/images/osiria/sub/ico_house.svg);
}

.ico-public_building {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_public_building.svg);
    mask-image: url(/images/osiria/sub/ico_public_building.svg);
}

.ico-tool {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_tool.svg);
    mask-image: url(/images/osiria/sub/ico_tool.svg);
}

.ico-map {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/images/osiria/sub/ico_map.svg);
    mask-image: url(/images/osiria/sub/ico_map.svg);
}

/* img svg icon */
.img-icon.w20 {
    width: 20%;
}

.img-icon.color-1 {
    filter: brightness(0) saturate(100%) invert(61%) sepia(86%) saturate(392%) hue-rotate(37deg) brightness(95%) contrast(94%);
}

.img-icon.color-2 {
    filter: brightness(0) saturate(100%) invert(58%) sepia(67%) saturate(7176%) hue-rotate(127deg) brightness(108%) contrast(69%);
}

.img-icon.color-3 {
    filter: brightness(0) saturate(100%) invert(31%) sepia(92%) saturate(1368%) hue-rotate(161deg) brightness(93%) contrast(101%);
}

.img-icon.color-4 {
    filter: brightness(0) saturate(100%) invert(31%) sepia(8%) saturate(7157%) hue-rotate(177deg) brightness(97%) contrast(87%);
}