@charset "UTF-8";
/* 공통 변수 */
/* text utilities */
/* https://getbootstrap.com/docs/4.6/utilities/text/ */
/* text color utilities */
/* https://getbootstrap.com/docs/4.6/utilities/colors/ */
/* 영문 css 분기처리 : 변수선언 때문에 맨위에 정의 */
html[lang=en] {
    /* 서브 타이틀 영역 */
    /* pc 호버 메뉴 */
    /* MO LNB 리스트 */
}

    html[lang=en] .header {
        top: 0px;
    }

    html[lang=en] .pc-gnb-btn {
        width: 220px;
    }

        html[lang=en] .pc-gnb-btn > span {
            font-size: 1rem;
        }

@media (max-width: 1200px) {
    html[lang=en] .pc-gnb-btn {
        width: 180px;
    }

        html[lang=en] .pc-gnb-btn span {
            font-size: 0.9rem;
        }
}

html[lang=en] .pc-gnb-expand-item {
    width: 220px;
}

@media (max-width: 1200px) {
    html[lang=en] .pc-gnb-expand-item {
        width: 180px;
    }

        html[lang=en] .pc-gnb-expand-item a {
            font-size: 0.9rem;
        }
}

html[lang=en] .sub-visual-wrap {
    margin-top: 0;
}

html[lang=en] .btn-sub-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 0.9375rem;
}

html[lang=en] .sub-visual-wrap .visual-title {
    text-align: center;
}

html[lang=en] .btn-pc-expand-menu .btn-drop-list {
    height: auto;
    padding: 16.5px 20px;
    line-height: 1.1;
}

html[lang=en] .pc-gnb-expand {
    top: calc(1.25rem + 30px * 2 + 0px + 1px);
}

html[lang=en] .btn-mo-lnb span {
    flex-shrink: 1;
    display: block;
    padding-right: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[lang=en] .mo-lnb-list .drop-list .btn-drop-list {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[lang=en] #section0 .inner-cont .h2 {
    font-size: 2rem;
    line-height: 1.3;
}

    html[lang=en] #section0 .inner-cont .h2 span {
        font-size: 3.2rem;
    }

@media (max-width: 768px) {
    html[lang=en] #section1 .txt01 + .txt {
        line-height: 1.4;
    }

    html[lang=en] #section1 .section01-swiper {
        height: 41%;
        top: 350px;
    }

    html[lang=en] #section1 .section01-swiper-thumb {
        top: 700px;
    }
}

html[lang=en] .table-transparent td {
    padding: 1px 0 2px 15px;
}

/* display */
@media (max-width: 768px) {
    .d-768-block {
        display: block !important;
    }

    .d-768-flex {
        display: flex !important;
    }

    .d-768-none {
        display: none !important;
    }
}

.d-768-block, .d-768-flex {
    display: none;
}

/* width */
.max-w-0 {
    max-width: 0;
}

/* font */
.font-russo {
    font-family: "RussoOneRegular", sans-serif;
}

.h3 {
    font-size: 1.5rem;
}

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

.font-sm {
    font-size: 0.9375rem !important;
}

@media (max-width: 768px) {
    .font-sm {
        font-size: 1rem !important;
    }
}

.font-md {
    font-size: 1.125rem !important;
}

@media (max-width: 768px) {
    .font-md {
        font-size: 1rem !important;
    }
}

.font-weight-500 {
    font-weight: 500 !important;
}

/* border, bg */
.bg-gray {
    background-color: #f6f6f6;
}

.bg-error {
    background-color: #FCE3E5;
}

.bg-confirm {
    background-color: #DFF0FE;
}

.border-gray {
    border: 1px solid #e0e0e0;
}

.border-top-dashed {
    border-top-style: dashed !important;
}

.border-bottom-dashed {
    border-bottom-style: dashed !important;
}

.border-bottom-1 {
    border-bottom-width: 1px !important;
}

.border-bottom-2 {
    border-bottom-width: 2px !important;
}

.more {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial;
}

    .more .xi-arrow-right {
        margin-left: 12px;
    }

/* button */
.btn {
    font-weight: 400;
    padding: 8px 14px;
}

    .btn [class*=xi-angle-right] {
        display: inline-block;
        margin-left: 20px;
    }

    .btn i[class*=xi] {
        transform: translateY(1px);
    }

    .btn.btn-lg {
        min-width: 288px;
        padding: 16px 10px;
        font-size: 1.125rem;
    }

/* pc gnb */
.pc-nav {
    width: 100%;
    max-width: 1730px;
    margin: 0 auto;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .pc-nav {
        display: none;
    }
}

.pc-nav > .right .txt {
    width: 80px;
    font-size: 0.875rem;
    text-align: left;
    color: #727272;
}

.pc-nav .left, .pc-nav .right {
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .pc-nav .left, .pc-nav .right {
        display: none !important;
    }
}

.pc-nav .global {
    z-index: 1;
    position: absolute;
    right: 30px;
    top: 0;
    height: 100%;
}

    .pc-nav .global .btn-global {
        color: #fff;
        transition: color 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .pc-nav .global .xi {
        transition: color 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .pc-nav .global:hover {
        font-weight: normal;
    }

        .pc-nav .global:hover .btn-global {
            color: #333 !important;
        }

        .pc-nav .global:hover .xi {
            color: #00aceb;
        }

.pc-nav.active .btn-global {
    color: #333 !important;
}

    .pc-nav.active .btn-global .xi {
        color: #00aceb;
    }

.fixed .btn-global {
    color: #333 !important;
}

.pc-gnb {
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.pc-gnb-item.active span {
    font-weight: 600;
}

.pc-gnb-btn {
    width: 190px;
    line-height: 1.25rem;
    padding: 30px 18px;
    color: #fff;
}

    .pc-gnb-btn > span {
        position: relative;
        font-size: 1.25rem;
    }

        .pc-gnb-btn > span:after {
            display: block;
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            border-top: 1px solid #00aceb;
            transform: translateX(-50%) translateY(28px);
            /* ie 오류로 수정 */
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

    .pc-gnb-btn:hover span {
        font-weight: 600;
    }

        .pc-gnb-btn:hover span:after {
            width: calc(100% + 18px * 2);
            opacity: 1;
        }

    .pc-gnb-btn.active {
        position: relative;
    }

        .pc-gnb-btn.active:after {
            display: block;
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 100%;
            height: 3px;
            background-color: #40a7f6;
        }

/* mo gnb */
.mo-gnb {
    z-index: 400;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
}

    .mo-gnb.active .mo-gnb-inner {
        transform: translateX(0);
    }

    .mo-gnb .dim {
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0;
        transition: opacity 0.3s;
    }

@media (min-width: 768px) {
    .mo-gnb {
        display: none !important;
    }
}

.mo-gnb .mo-gnb-inner {
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    height: 100vh;
    transform: translateX(calc(100% + 40px));
    transition: transform 0.3s;
    background-color: #fff;
}

.mo-gnb .btn-close {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    transform: translateX(-100%);
    background-color: #535353;
}

    .mo-gnb .btn-close .xi-close-thin {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        color: #fff;
    }

.mo-gnb .logo-title {
    padding: 16px 0 16px 12px;
}

    .mo-gnb .logo-title img {
        width: 102px;
        height: 25px;
    }

    .mo-gnb .logo-title .txt {
        font-size: 15px;
        font-weight: 600;
    }

.mo-gnb .gnb-list > li {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s;
}

    .mo-gnb .gnb-list > li.active {
        background-color: #00aceb;
    }

.mo-gnb .btn-gnb-drop {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 18px;
    font-size: 1.0666666667rem;
    font-weight: 500;
    text-align: left;
    color: #333;
}

    .mo-gnb .btn-gnb-drop .fa-angle-down {
        color: #000;
    }

.mo-gnb .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
}

    .mo-gnb .arrow .xi-angle-down {
        transition: transform 0.3s ease-in-out;
    }

.mo-gnb .gnb-list .active .btn-gnb-drop:not(.solo) {
    font-weight: 600;
    color: #fff;
}

    .mo-gnb .gnb-list .active .btn-gnb-drop:not(.solo) .xi-angle-down {
        transform: rotate(180deg);
        color: #fff;
    }

.mo-gnb .gnb-drop {
    overflow: hidden;
    display: none;
    background-color: #f1f1f1;
}

    .mo-gnb .gnb-drop > li {
        border-bottom: 1px solid #e5e5e5;
    }

        .mo-gnb .gnb-drop > li:last-child {
            border-bottom: 0;
        }

    .mo-gnb .gnb-drop .btn-gnb-drop-link {
        padding: 12px 30px;
        font-size: 1rem;
        color: #666;
    }

        .mo-gnb .gnb-drop .btn-gnb-drop-link.active {
            background-color: #535353;
            color: #fff;
        }

.mo-gnb .btn-wrap {
    padding: 20px;
}

.mo-gnb .gnb-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    letter-spacing: -0.5px;
    opacity: 1;
    color: #00aceb;
}

    .mo-gnb .gnb-link:hover {
        background-color: #00aceb;
        color: #fff;
    }

        .mo-gnb .gnb-link:hover.company:before {
            background-image: url("/Content/images/common/ico_switch_company_on.png");
        }

        .mo-gnb .gnb-link:hover.service:before {
            background-image: url("/Content/images/common/ico_switch_service_on.png");
        }

    .mo-gnb .gnb-link:before {
        display: block;
        content: "";
        width: 24px;
        height: 24px;
        margin-right: 15px;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: 0 0;
    }

    .mo-gnb .gnb-link.company:before {
        background-image: url("/Content/images/common/ico_switch_company_off.png");
    }

    .mo-gnb .gnb-link.service:before {
        background-image: url("/Content/images/common/ico_switch_service_off.png");
    }

    .mo-gnb .gnb-link .flex-grow-1 {
        font-size: 1.0666666667rem;
        text-align: left;
    }

    .mo-gnb .gnb-link .xi-angle-right-min {
        font-size: 1.3333333333rem;
        transform: translate(25%, 1px);
    }

@media (max-width: 425px) {
    .mo-gnb .gnb-link {
        padding: 12px 10px;
    }

        .mo-gnb .gnb-link:before {
            margin-right: 10px;
        }

        .mo-gnb .gnb-link .flex-grow-1 {
            font-size: 1rem;
        }
}

@media (max-width: 370px) {
    .mo-gnb .gnb-link {
        padding: 8px 8px;
    }

        .mo-gnb .gnb-link .flex-grow-1 {
            font-size: 0.7333333333rem;
        }
}

/* 헤더 */
.header {
    z-index: 300;
    position: fixed;
    left: 0;
    top: 45px;
    width: 100%;
    transition: background-color 0.3s ease-in-out, transform 0.3s cubic-bezier(0, 0.55, 0.45, 1), top 0.5s;
    /* header 768 이하 */
}

    .header:hover .btn-global {
        color: #333 !important;
    }

        .header:hover .btn-global .xi {
            color: #00aceb;
        }

    .header .txt {
        display: inline-block;
        margin-top: 7px;
        font-size: 1.4375rem;
        color: #fff;
    }

    .header.fixed {
        top: 0;
    }

    .header.fixed, .header:hover {
        border-bottom: 1px solid #999;
        background-color: #fff;
    }

        .header.fixed:after, .header:hover:after {
            display: none;
        }

        .header.fixed .pc-gnb-btn, .header:hover .pc-gnb-btn {
            color: #000;
        }

        .header.fixed .header-logo .off, .header:hover .header-logo .off {
            display: none;
        }

        .header.fixed .header-logo .on, .header:hover .header-logo .on {
            display: inline-block;
        }

        .header.fixed .header-logo .txt, .header:hover .header-logo .txt {
            color: #000;
        }

    .header.fixed-hide {
        transform: translateY(-100%);
    }

    .header:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: calc(1.25rem + 30px * 2);
        width: 100%;
        border-bottom: 1px solid #fff;
    }

    .header .mo-nav {
        display: none;
    }

@media (max-width: 768px) {
    .header {
        top: 0;
        height: 60px;
        border-bottom: 1px solid #e7e7e7;
    }

        .header .mo-nav {
            display: flex;
            height: 100%;
        }

        .header:after {
            /* pc 하단 흰색 테두리 제거 */
            display: none;
        }

        .header .header-logo {
            padding-left: 15px;
        }

            .header .header-logo img {
                width: 100px;
                height: 25px;
            }

            .header .header-logo .txt {
                font-size: 1rem;
            }
}

/*================== 햄버거 버튼 ==================*/
.btn-menu {
    position: absolute;
    right: 5px;
    top: 6px;
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 14px;
    margin: auto;
    border: none;
    background: none;
    border-radius: 4px;
}

    .btn-menu:active, .btn-menu:focus {
        outline: none;
    }

    .btn-menu .hamburger {
        transition: 0.4s;
    }

        .btn-menu .hamburger, .btn-menu .hamburger .bar {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

            .btn-menu .hamburger .bar {
                width: 20px;
                height: 2px;
                background: #fff;
                transition: 0.2s;
                outline: 1px solid transparent;
            }

            .btn-menu .hamburger .bar-1 {
                transform: rotate(0) translate3d(0, -7px, 0);
            }

            .btn-menu .hamburger .bar-3 {
                transform: rotate(0) translate3d(0, 7px, 0);
            }

.header:hover .btn-menu .hamburger .bar, .fixed .btn-menu .hamburger .bar {
    background-color: #000;
}

.header:hover .header-logo .txt, .fixed .header-logo .txt {
    font-weight: normal;
}

.active .btn-menu .hamburger {
    transform: rotate(180deg);
}

    .active .btn-menu .hamburger .bar-1 {
        transform: rotate(45deg) translate3d(0, 0, 0);
    }

    .active .btn-menu .hamburger .bar-2 {
        opacity: 0;
    }

    .active .btn-menu .hamburger .bar-3 {
        transform: rotate(-45deg) translate3d(0, 0, 0);
    }

/* 공통요소 */
.large-cont {
    /* 1730짜리 */
    position: relative;
    width: 100%;
    max-width: 1730px;
    margin: 0 auto;
}

.inner-cont {
    /* 1200짜리 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.notice-title {
    padding: 31px 0;
    font-size: 1.5rem;
    font-weight: 600;
    border-color: #626262 !important;
}

@media (max-width: 768px) {
    .notice-title {
        padding: 20px 0;
        font-size: 1.3333333333rem;
    }
}

.notice-box {
    padding: 40px 0 40px 18%;
    background-image: url("/Content/images/service/bg_center_speaker.png");
    background-position: left 5.2% center;
    background-size: 102px 86px;
    background-repeat: no-repeat;
}

    .notice-box li {
        word-break: keep-all;
    }

        .notice-box li + li {
            margin-top: 7px;
        }

@media (max-width: 768px) {
    .notice-box {
        padding: 70px 10px 20px;
        background-position: center 20px;
        background-size: 52px 41px;
    }
}

.map_copyright {
    display: none;
}

/* button */
.btn-lg {
    width: 200px;
}

@media (max-width: 768px) {
    .btn-lg {
        font-size: 1.2rem;
    }
}

/* 서브 탭 영역 */
.sub-tab-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(31, 55, 84, 0.8);
}

.txt-box {
    padding: 32px 40px;
    color: #666;
}

    .txt-box p {
        color: inherit;
    }

        .txt-box p + p {
            margin-top: 8px;
        }

.sub-tab-item {
    overflow: hidden;
    position: relative;
    flex: 1;
}

    .sub-tab-item:before {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: calc(100% + 1px);
        height: 100%;
        background: #fff;
        opacity: 0;
        transition: opacity 0.2s ease-out;
    }

    .sub-tab-item.active:before, .sub-tab-item:hover:before {
        opacity: 1;
    }

.btn-sub-tab {
    z-index: 1;
    position: relative;
    padding: 21px 0;
    font-size: 0.84375rem;
    text-align: center;
    color: #f2f2f2;
}

.sub-tab-item + .sub-tab-item .btn-sub-tab:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    background-color: #fff;
    transform: translateY(-50%);
}

.sub-tab-item.active .btn-sub-tab, .sub-tab-item:hover .btn-sub-tab {
    font-weight: 600;
    color: #1f3754;
}

@media (max-width: 1200px) {
    .btn-sub-tab {
        font-size: 0.9rem;
    }
}

/* 서브 타이틀 영역 */
.sub-visual-wrap {
    position: relative;
    height: 505px;
    margin-top: 45px;
    padding: calc(1.25rem + 30px * 2) 0 70px 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

    .sub-visual-wrap .visual-title {
        font-size: 3rem;
        font-weight: 600;
        letter-spacing: -0.5px;
        color: inherit;
    }

    .sub-visual-wrap .visual-txt {
        margin-top: 20px;
        font-size: 1.5rem;
        color: inherit;
    }

@media (max-width: 768px) {
    .sub-visual-wrap {
        margin-top: 0;
        padding: 60px 10px 0;
        height: 290px;
    }

        .sub-visual-wrap .visual-title {
            font-size: 2.4rem;
        }

        .sub-visual-wrap .visual-txt {
            margin-top: 15px;
            padding: 0 15px;
            font-size: 1.0666666667rem;
            text-align: center;
            word-break: keep-all;
            letter-spacing: 0.5px;
        }
}

.sub-title-wrap {
    padding: 80px 0 60px;
    text-align: center;
}

    .sub-title-wrap .sub-title {
        margin-bottom: 20px;
        font-size: 2.5rem;
        font-weight: 600;
    }

    .sub-title-wrap .desc {
        font-size: 1.125rem;
        font-weight: 400;
        word-break: keep-all;
        color: #666;
    }

@media (max-width: 768px) {
    .sub-title-wrap {
        padding: 45px 15px 30px;
    }

        .sub-title-wrap .sub-title {
            margin-bottom: 15px;
            font-size: 1.8666666667rem;
            letter-spacing: -0.5px;
        }

        .sub-title-wrap .desc {
            font-size: 1rem;
        }
}

.list-notice {
    display: flex;
}

    .list-notice .box {
        position: relative;
        width: calc(33.3% - 13.3px);
        background-color: #fff;
        border: 1px solid #fff;
        transition: all 0.5s ease-out;
    }

        .list-notice .box + .box {
            margin-left: 20px;
        }

        .list-notice .box:hover {
            border-color: #00aceb;
            box-shadow: 0 12px 20px 0 rgba(5, 16, 27, 0.36);
        }

        .list-notice .box:before {
            display: block;
            content: "";
            padding-bottom: 100%;
        }

    .list-notice .btn-notice {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 54px 38px;
    }

    .list-notice .title {
        height: 48px;
        line-height: 1.5rem;
        font-size: 1.125rem;
        margin-bottom: 45px;
        color: #16151b;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .list-notice.thumb .title {
        margin-bottom: 16px;
    }

    .list-notice .desc p, .list-notice .date {
        font-size: 1rem;
        color: #888;
    }

    .list-notice.thumb .desc img {
        width: 100%;
        height: 175px;
        object-fit: cover;
        border-radius: 10px;
    }

    .list-notice .desc {
        flex: 1;
    }

        .list-notice .desc p {
            height: 4.5rem;
            line-height: 1.5rem;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

@media (max-width: 1200px) {
    .list-notice.thumb .desc img {
        height: 140px;
    }
}

@media (max-width: 1000px) {
    .list-notice .title {
        height: auto;
        margin-bottom: 27px;
        -webkit-line-clamp: 1;
    }

    .list-notice.thumb .btn-notice {
        height: auto;
    }

    .list-notice.thumb .desc img {
        height: 100px;
    }
}

@media (max-width: 768px) {
    .list-notice {
        display: block;
        padding: 0 15px;
    }

        .list-notice .box {
            width: 100%;
        }

            .list-notice .box + .box {
                margin-left: 0;
                margin-top: 25px;
            }

            .list-notice .box:before {
                padding-bottom: 210px;
            }

        .list-notice .btn-notice {
            padding: 33px 20px;
        }

        .list-notice .desc p {
            height: 3rem;
            line-height: 1.5rem;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .list-notice.thumb .desc img {
            height: 100px;
        }
}

/* 게시판 */
.board-search-wrap {
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 14px 20px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

    .board-search-wrap .right {
        width: 37.5%;
    }

    .board-search-wrap .txt-count {
        flex-shrink: 0;
        font-size: 0.9375rem;
        color: #666;
    }

    .board-search-wrap .text-danger {
        color: #c92a2a;
        font-weight: 600;
    }

    .board-search-wrap .search-select {
        width: 30%;
    }

        .board-search-wrap .search-select .form-control {
            height: 40px;
            font-size: 0.9375rem;
        }

    .board-search-wrap .input-group {
        width: 67%;
    }

        .board-search-wrap .input-group .form-control {
            height: 40px;
            padding: 6px 16px;
            font-size: 0.9375rem;
            border-right: 0;
        }

    .board-search-wrap .input-group-append .input-group-text {
        padding: 0 20px;
        border-left: 0;
        background: #fff;
    }

    .board-search-wrap .input-group-append .xi-search {
        font-size: 1.1875rem;
    }

@media (max-width: 768px) {
    .board-search-wrap .right {
        width: 100%;
    }

    .board-search-wrap .search-select .form-control, .board-search-wrap .input-group .form-control {
        font-size: 1rem;
    }

    .board-search-wrap .input-group-append .input-group-text {
        padding: 0 10px;
    }
}

/* 게시판 리스트 */
.dw-board {
    overflow: hidden;
    table-layout: fixed;
    border-top: 2px solid #666;
    border-bottom: 1px solid #e0e0e0;
}

    .dw-board .number {
        width: 10.5%;
        white-space: pre;
    }

    .dw-board .title {
        width: 64.5%;
    }

    .dw-board .file {
        width: 12.5%;
    }

    .dw-board .date {
        width: 12.5%;
        white-space: pre;
    }

    .dw-board th, .dw-board td {
        text-align: center;
        vertical-align: middle;
    }

    .dw-board thead th {
        padding: 20px 0;
        font-size: 1.125rem;
        border-bottom: none;
        background-color: #f7f7f7;
        font-weight: 600;
    }

    .dw-board td {
        padding: 0;
        border-top: 1px solid #e0e0e0;
        color: #666;
    }

        .dw-board td.title {
            text-align: left;
        }

    .dw-board a {
        display: block;
        padding: 20px 20px 20px 4%;
        color: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dw-board .xi-file-o {
        font-size: 22px;
    }

@media (max-width: 768px) {
    .dw-board .file {
        display: none;
    }

    .dw-board .title {
        width: 40%;
    }

    .dw-board a {
        padding: 15px 5px 15px;
    }

    .dw-board .name, .dw-board .number, .dw-board .title a, .dw-board .date {
        font-size: 1rem;
    }
}

@media (max-width: 425px) {
    .dw-board .title {
        width: 27%;
    }
}

/* 게시판 썸네일 */
.gallery-board .list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 58px 42px;
}

.gallery-board .date {
    color: #666;
}

.gallery-board .list .list-link:hover {
    color: #666;
}

.gallery-board .list-link img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.gallery-board li:hover img {
    transform: scale(1.15);
}

.gallery-board .list-link .img-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    padding-bottom: 61.8%;
    border-radius: 2rem;
}

.gallery-board .info {
    margin-top: 15px;
}

.gallery-board .title {
    margin-top: 18px;
    font-size: 1.125rem;
    line-height: 1.5rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
    .gallery-board .list {
        grid-template-columns: repeat(1, 1fr);
    }

    .gallery-board .list-link {
        padding: 0 15px;
    }
}
/**/
.board-accordion-header .snuphi-watch {
    border-radius: 1rem;
}

/* 게시판 라벨 */
.board-label {
    height: 24px;
    padding: 0 7px;
    font-size: 0.875rem;
    border: 1px solid #0f3355;
    color: #0f3355;
    text-align: center;
}

.pagination {
    margin: 40px 0 105px 0;
}

    .pagination .page-link {
        width: 40px;
        height: 40px;
        line-height: 1.2;
        padding: 10px 0;
        text-align: center;
    }

    .pagination .xi-angle-left-thin + .xi-angle-left-thin {
        margin-left: -10px;
    }

    .pagination .xi-angle-right-thin + .xi-angle-right-thin {
        margin-left: -10px;
    }

@media (max-width: 767px) {
    .dw-board-search .form-control {
        display: inline-block;
        width: auto;
        font-size: 0.8rem;
    }

    .dw-board-search .btn {
        font-size: 0.8rem;
    }
}

/* 게시판 뷰 */
.dw-board-view {
    border-top: 2px solid #666;
}

    .dw-board-view a {
        display: inline-block;
    }

    .dw-board-view .view-item {
        padding: 18px 38px;
        border-bottom: 1px solid #e0e0e0;
        line-height: 1.5;
        font-weight: 400;
    }

        .dw-board-view .view-item.title-wrap {
            padding: 21px 38px;
            background-color: #f9f9f9;
        }

        .dw-board-view .view-item .title {
            padding-right: 5px;
            font-size: 1.125rem;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dw-board-view .view-item .date {
            flex-shrink: 0;
            color: #666;
        }

        .dw-board-view .view-item.file a {
            overflow: hidden;
        }

        .dw-board-view .view-item.file .label {
            margin-right: 17px;
            font-weight: 500;
        }

        .dw-board-view .view-item.file .file-name, .dw-board-view .view-item.file .count {
            color: #666;
        }

        .dw-board-view .view-item.file .file-name {
            display: block;
            padding-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dw-board-view .view-item.file .xi-file-o {
            margin-right: 5px;
        }

    .dw-board-view .view_description {
        display: block;
        overflow-x: auto;
        margin-bottom: 40px;
        padding: 50px 38px;
        border-bottom: 1px solid #e0e0e0;
        line-height: 1.6;
    }

        .dw-board-view .view_description img {
            display: block;
            max-width: 100%;
            margin: 0 auto 1rem;
        }

    .dw-board-view .bi-download {
        margin-left: 0.5rem;
    }

    .dw-board-view .bi-card-list {
        margin-right: 0.5rem;
    }

    .dw-board-view .btn-primary.btn-lg {
        width: 250px;
        margin-bottom: 40px;
        font-size: 1.125rem;
        font-weight: 600;
    }

@media (max-width: 768px) {
    .dw-board-view {
        position: relative;
        padding-bottom: 80px;
    }

        .dw-board-view .view-item {
            position: relative;
            padding: 15px 8px;
        }

            .dw-board-view .view-item .date, .dw-board-view .view-item .label, .dw-board-view .view-item .count, .dw-board-view .view-item .file-name {
                font-size: 1rem;
            }

            .dw-board-view .view-item > .flex-shrink-0 {
                position: absolute;
                right: 8px;
                top: 0;
                transform: translateY(-100%) translateY(-11px);
            }

            .dw-board-view .view-item.file .file-name {
                white-space: normal;
                word-break: break-all;
            }

            .dw-board-view .view-item.title-wrap {
                flex-wrap: wrap;
                padding: 18px 8px 12px;
            }

                .dw-board-view .view-item.title-wrap .title {
                    width: 100%;
                    margin-bottom: 5px;
                    font-size: 1.2rem;
                    white-space: normal;
                }

        .dw-board-view .view_description {
            padding: 30px 8px 40px;
            margin-bottom: 0;
            border-bottom-color: #333;
            font-size: 1rem;
        }

        .dw-board-view .board-other-list {
            margin-bottom: 35px;
            border-top: 0;
        }

        .dw-board-view .view_description + .text-center {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .dw-board-view .btn-primary.btn-lg {
            font-size: 1.2rem;
        }
}

/*  이전글 / 다음글 */
.board-other-list {
    margin-bottom: 80px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

    .board-other-list .item + .item {
        border-top: 1px solid #e0e0e0;
    }

    .board-other-list .item > span {
        position: relative;
        flex-shrink: 0;
        padding: 18px 1.5% 18px 3.2%;
        margin-right: 1.6%;
        white-space: pre;
    }

        .board-other-list .item > span [class*=xi-angle] {
            margin-left: 15px;
            font-size: 1.25rem;
        }

        .board-other-list .item > span:after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            height: 20px;
            width: 1px;
            background-color: #e0e0e0;
            transform: translateY(-50%);
        }

    .board-other-list .item > p {
        padding-right: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

@media (max-width: 768px) {
    .board-other-list .item > span, .board-other-list .item > p {
        font-size: 1rem;
    }

    .board-other-list .item > span {
        padding: 15px 15px 15px 8px;
        margin-right: 15px;
    }

        .board-other-list .item > span [class*=xi-angle] {
            margin-left: 5px;
        }
}

/* 폼요소 정렬 */
.form-liner .form-30 {
    width: 30%;
}

.form-liner .form-40 {
    width: 40%;
}

.form-liner .space {
    width: 40px;
    line-height: 40px;
    text-align: center;
}

@media (max-width: 768px) {
    .form-liner .form-30, .form-liner .form-40 {
        width: 100%;
    }
}

/* 공통 탭 */
.tab-cont {
    display: none;
    margin: 0 auto;
}

.tab-list {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

    .tab-list .item-tab {
        position: relative;
        flex: 1;
    }

    .tab-list .btn-tab {
        width: 100%;
        text-align: center;
        font-weight: 500;
    }

/* tab-style01 */
.tab-style01 .btn-tab {
    position: relative;
    height: 45px;
    border: 1px solid #ced4da;
    white-space: pre;
    color: #666;
    background-color: #fff;
}

.tab-style01 .item-tab + .item-tab .btn-tab {
    border-left: 0;
}

.tab-style01 .item-tab:hover .btn-tab,
.tab-style01 .item-tab.active .btn-tab {
    color: #00aceb;
}

    .tab-style01 .item-tab:hover .btn-tab:after,
    .tab-style01 .item-tab.active .btn-tab:after {
        display: block;
        content: "";
        position: absolute;
        left: -1px;
        top: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        border: 1px solid #00aceb;
    }

@media (max-width: 768px) {
    .tab-style01 .btn-tab {
        height: 40px;
        font-size: 1rem;
    }
}

/* tab-style02 */
.tab-style02 {
    /* 2뎁스 될때가 있어서 직계자신 선택자 씀 */
}

    .tab-style02 > .tab-list {
        border-bottom: 1px solid #e0e0e0;
    }

        .tab-style02 > .tab-list > .item-tab {
            flex: 1;
            position: relative;
        }

            .tab-style02 > .tab-list > .item-tab:after {
                display: block;
                content: "";
                position: absolute;
                left: 50%;
                bottom: -1px;
                width: 0;
                height: 2px;
                background-color: #0f3355;
                transform: translateX(-50%);
                transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
                opacity: 0;
            }

            .tab-style02 > .tab-list > .item-tab .btn-tab {
                color: #333;
            }

            .tab-style02 > .tab-list > .item-tab.active:after, .tab-style02 > .tab-list > .item-tab:hover:after {
                width: 100%;
                opacity: 1;
            }

            .tab-style02 > .tab-list > .item-tab.active .btn-tab, .tab-style02 > .tab-list > .item-tab:hover .btn-tab {
                font-weight: 600;
                color: #0f3355;
            }

        .tab-style02 > .tab-list .btn-tab {
            padding: 26px 0;
            font-size: 1rem;
            font-weight: 500;
            transition: color 0.1s;
        }

@media (max-width: 768px) {
    .tab-style02 > .tab-list {
        flex-wrap: wrap;
        border-bottom: 0;
        border-top: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
    }

        .tab-style02 > .tab-list > .item-tab {
            flex-basis: 33.3%;
            max-width: 33.3%;
            flex-grow: 0;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }

            .tab-style02 > .tab-list > .item-tab .btn-tab {
                padding: 9px 0;
                font-size: 1rem;
            }

            .tab-style02 > .tab-list > .item-tab.active {
                background-color: #0f3355;
            }

                .tab-style02 > .tab-list > .item-tab.active .btn-tab {
                    color: #fff;
                }

                .tab-style02 > .tab-list > .item-tab.active:after, .tab-style02 > .tab-list > .item-tab:hover:after {
                    display: none;
                }
}

/* tab-style03 */
.tab-style03 .tab-list {
    overflow: hidden;
    width: fit-content;
}

    .tab-style03 .tab-list > .item-tab {
        position: relative;
        overflow: hidden;
        flex: none;
    }

        .tab-style03 .tab-list > .item-tab:first-child {
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
        }

            .tab-style03 .tab-list > .item-tab:first-child:after {
                display: none;
            }

        .tab-style03 .tab-list > .item-tab:last-child {
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
        }

        .tab-style03 .tab-list > .item-tab + .item-tab:after {
            display: block;
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 1px;
            height: 24px;
            background-color: #ccc;
            transform: translateY(-50%);
        }

        .tab-style03 .tab-list > .item-tab.active .btn-tab, .tab-style03 .tab-list > .item-tab:hover .btn-tab {
            color: #333;
            font-weight: 600;
        }

.tab-style03 .btn-tab {
    padding: 16px 50px;
    font-weight: 500;
    color: #a5a5a5;
    background-color: #f7f7f7;
    transition: color 0.3s;
}

@media (max-width: 768px) {
    .tab-style03 .tab-list {
        overflow-x: auto;
    }

    .tab-style03 .btn-tab {
        padding: 11px 25px;
    }
}

/* tab-style04 */
.tab-style04 .btn-tab {
    position: relative;
    height: 70px;
    border: 1px solid #aaa;
    font-size: 1.125rem;
    font-weight: 600;
    white-space: pre;
}

.tab-style04 .item-tab + .item-tab .btn-tab {
    border-left-width: 0;
}

.tab-style04 .item-tab:hover .btn-tab,
.tab-style04 .item-tab.active .btn-tab {
    color: #fff;
    background-color: #333;
}

.tab-style04.navy .item-tab:hover .btn-tab, .tab-style04.navy .item-tab.active .btn-tab {
    background-color: #1f3754;
}

@media (max-width: 768px) {
    .tab-style04 .btn-tab {
        height: 50px;
    }
}

/* 테이블 */
.table-bordered .border-bottom-last {
    border-bottom: 1px solid #333;
}

@media (max-width: 768px) {
    .table-bordered thead th {
        font-size: 1.0666666667rem;
    }
}

.table-transparent th {
    font-weight: 500;
    color: #666;
}

.table-transparent td {
    padding: 10px 0 2px 50px;
    /* font-weight 300 때문에 세로 가운데정렬 안되어 패딩으로 조절*/
    word-break: keep-all;
    color: #666;
}

@media (max-width: 768px) {
    .table-transparent th {
        vertical-align: top;
    }

    .table-transparent td {
        padding: 1px 0 2px 50px;
    }
}

.fake-table {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

    .fake-table .td {
        align-self: stretch;
        padding: 0;
        border-bottom: 1px solid #e0e0e0;
    }

        .fake-table .td + .td {
            border-left: 1px solid #e0e0e0;
        }

    .fake-table .th {
        flex-basis: 100%;
        padding: 10px 16px;
        border-top: 2px solid #666;
        border-bottom: 1px solid #e0e0e0;
        text-align: center;
        background-color: #f9f9f9;
    }

    .fake-table .txt-result {
        justify-content: center;
        align-items: center;
        height: 100%;
    }

@media (max-width: 768px) {
    .fake-table .th + .td {
        border-bottom: 0;
    }

    .fake-table .td + .td {
        border-left: 0;
        padding: 0 1.5rem 1.5rem;
    }

    .fake-table .text-secondary {
        font-size: 0.9rem;
    }
}

.table.table-bordered-style02 {
    border-top: 2px solid #666;
    border-bottom: 1px solid #666;
    background-color: #fff;
    /* table-bordered-style02 반응형 공통 */
}

    .table.table-bordered-style02 th, .table.table-bordered-style02 td {
        border-top-color: #e0e0e0;
        border-right: 1px solid #e0e0e0;
    }

    .table.table-bordered-style02 th {
        font-size: 1.125rem;
        vertical-align: middle;
        text-align: center;
        word-break: keep-all;
    }

    .table.table-bordered-style02 td {
        padding: 15px 20px;
        text-align: left;
    }

        .table.table-bordered-style02 th:last-child, .table.table-bordered-style02 td:last-child {
            border-right: 0;
        }

    .table.table-bordered-style02 th, .table.table-bordered-style02 .thead {
        border-bottom-width: 1px;
        background-color: #f9f9f9;
    }

    .table.table-bordered-style02.td-center td {
        text-align: center !important;
    }

    .table.table-bordered-style02.table-small th, .table.table-bordered-style02.table-small td {
        padding: 8px 20px !important;
        word-break: keep-all;
    }

        .table.table-bordered-style02.table-small td, .table.table-bordered-style02.table-small td * {
            font-size: 15px;
        }

    .table.table-bordered-style02 .depth01 {
        padding: 16px 26px;
        line-height: 1.5;
        color: #666;
    }

        .table.table-bordered-style02 .depth01 li {
            line-height: 1.7;
        }

    .table.table-bordered-style02 .bg-gray {
        background-color: #f9f9f9 !important;
    }

    .table.table-bordered-style02.border-right {
        border-right-color: #666 !important;
    }

    .table.table-bordered-style02 .indent-item {
        position: relative;
        padding-left: 26px;
        line-height: 2;
    }

        .table.table-bordered-style02 .indent-item .number-label {
            position: absolute;
            left: 0;
            top: 0;
            display: inline-block;
            margin-right: 7px;
            font-weight: 600;
            color: #BF1A2B;
        }

    .table.table-bordered-style02 .pc-title {
        width: 18%;
    }

    .table.table-bordered-style02 .mo-title {
        display: none;
    }

    .table.table-bordered-style02.mo-responsive th {
        width: 23%;
    }

@media (max-width: 768px) {
    .table.table-bordered-style02 .pc-title {
        display: none;
    }

    .table.table-bordered-style02 .mo-title {
        display: block;
        margin: -15px 0 12px;
        font-size: 1.2rem;
    }

    .table.table-bordered-style02.mo-responsive .mo-title {
        padding: 10px 16px;
        margin: -15px 0 10px;
        border-bottom: 1px solid #dee2e6;
        color: #333;
    }

    .table.table-bordered-style02.mo-responsive th, .table.table-bordered-style02.mo-responsive td {
        padding: 15px 0;
    }

    .table.table-bordered-style02.mo-border-0 + .table.table-bordered-style02.mo-border-0 {
        margin-top: 45px;
    }

    .table.table-bordered-style02.mo-border-0 {
        border: 0;
    }
}

/* 컨텐츠 없음 공백 */
.empty-wrap {
    display: flex;
    min-height: 200px;
}

    .empty-wrap .empty-txt {
        font-size: 1.125rem;
    }

/* 약관 내용 */
.terms {
    padding: 20px 15px 40px 15px;
    line-height: 1.3;
    background-color: #f9f9f9;
}

    .terms .txt01 {
        font-size: 0.9375rem;
        word-break: keep-all;
    }

        .terms .txt01 span {
            font-size: inherit;
        }

        .terms .txt01.title {
            margin: 20px 0;
            color: #333;
        }

            .terms .txt01.title:first-child {
                margin-top: 0;
            }

@media (max-width: 768px) {
    .terms .txt01 {
        font-size: 1rem;
    }
}

/* h1 로고 */
.header-logo img {
    width: 9.875rem;
    height: 2.5rem;
}

.header-logo .on, .header-logo .off {
    vertical-align: top;
}

.header-logo .on {
    display: none;
}

/* 서비스쪽 헤더 */
.header.service .pc-gnb-btn > span {
    font-size: 1.1875rem;
    white-space: pre;
}

/* 사이트 탭 */
.gnb-tab {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 45px;
    opacity: 1;
    background-color: black;
    transition: height 0.3s, opacity 0.3s;
}

@media (max-width: 768px) {
    .gnb-tab {
        display: none !important;
    }
}

.fixed + .gnb-tab {
    opacity: 0;
    height: 0;
}

.gnb-tab .global {
    position: absolute;
    right: 0;
    top: 0;
}

    .gnb-tab .global .btn-gnb-tab {
        width: auto;
        padding: 12px 40px;
        transition: color 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

        .gnb-tab .global .btn-gnb-tab .xi {
            transition: color 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        }

        .gnb-tab .global .btn-gnb-tab:hover {
            font-weight: normal;
        }

            .gnb-tab .global .btn-gnb-tab:hover .xi {
                color: #00aceb;
            }

.btn-gnb-tab {
    width: 235px;
    height: 45px;
    padding: 12px 0;
    font-size: 1.125rem;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background-color: black;
}

.active .btn-gnb-tab {
    background-color: #00aceb;
}

.btn-gnb-tab:hover {
    color: #fff;
    font-weight: 600;
}

/* pc 호버 메뉴 */
.pc-gnb-expand {
    overflow: hidden;
    position: fixed;
    left: 50%;
    top: calc(1.25rem + 30px * 2 + 45px + 1px);
    display: none;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
}

.fixed .pc-gnb-expand {
    top: calc(1.25rem + 30px * 2 + 1px);
}

.pc-gnb-expand > .justify-content-between {
    max-width: 1730px;
    margin: 0 auto;
}

.pc-gnb-expand .left span {
    display: inline-block;
    font-size: 1.4375rem;
    font-weight: 600;
    color: transparent;
}

.pc-gnb-expand .left:before {
    display: block;
    content: "";
    width: 9.875rem;
    height: 2.5rem;
    display: inline-block;
}

.pc-gnb-expand .pc-gnb-expand-btn {
    font-size: 0.9rem;
    color: #666;
}

    .pc-gnb-expand .pc-gnb-expand-btn:hover {
        font-weight: bold;
    }

.pc-gnb-expand .expand-inner-cont {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

    .pc-gnb-expand .expand-inner-cont ul {
        padding: 22px 0 30px 0;
    }

@media (max-width: 1200px) {
    .pc-gnb-expand .left, .pc-gnb-expand .right {
        display: none !important;
    }
}

/* 퀵버튼 */
.service-main .quick-wrap {
    top: 930px;
    opacity: 1;
}

.quick-wrap {
    z-index: 100;
    position: absolute;
    top: 0;
    right: 30px;
    opacity: 0;
    transition: opacity 1s;
}

    .quick-wrap.init {
        opacity: 1;
    }

    .quick-wrap.main {
        top: 930px;
    }

    .quick-wrap.sub {
        bottom: 30px;
    }

    .quick-wrap.fixed {
        position: fixed;
        top: auto;
        bottom: 30px;
        opacity: 1;
    }

@media (max-width: 768px) {
    .quick-wrap {
        position: fixed;
        top: auto !important;
        right: 10px;
        bottom: 30px;
        opacity: 1;
    }
}

.list-quick .txt {
    position: absolute;
    left: 15px;
    top: 50%;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -1px;
    white-space: pre;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.11, 0, 0.5, 0);
}

.list-quick li + li .btn-quick {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .list-quick li + li .btn-quick {
        margin-top: 10px;
    }
}

.btn-quick {
    overflow: hidden;
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 50px;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

    .btn-quick:hover {
        width: 170px;
    }

        .btn-quick:hover .txt {
            opacity: 1;
            visibility: visible;
        }

@media (max-width: 768px) {
    .btn-quick:hover {
        width: 65px;
    }

        .btn-quick:hover .txt {
            opacity: 0;
            visibility: hidden;
        }
}

.btn-quick .icon {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 50%;
    width: 65px;
    height: 65px;
    background-position: right 0;
    background-size: 65px 65px;
    background-repeat: no-repeat;
    transform: translateY(-50%);
}

.btn-quick.inquiry {
    background-color: #1b70c5;
}

    .btn-quick.inquiry .icon {
        background-color: #1b70c5;
        background-image: url("/Content/images/serviceMain/ico_quick01.png");
    }

    .btn-quick.inquiry .txt {
        color: #fff;
    }

.btn-quick.kakao {
    background-color: #f7d500;
    color: #212529;
}

    .btn-quick.kakao .icon {
        background-color: #f7d500;
        background-image: url("/Content/images/serviceMain/ico_quick02.png");
    }

.btn-quick.contact {
    background-color: #cce0f1;
    color: #212529;
}

    .btn-quick.contact .icon {
        background-color: #cce0f1;
        background-image: url("/Content/images/company/ico_quick01.png");
    }

/* PC 햄버거 */
.btn-pc-expand-menu {
    position: relative;
    padding: 0 1rem 0 0;
}

    .btn-pc-expand-menu .btn-burger {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: content-box;
        width: 1.5rem;
        height: 1.25rem;
        padding: 1rem;
        border: none;
        background: none;
        border-radius: 4px;
    }

        .btn-pc-expand-menu .btn-burger:active {
            outline: none;
        }

        .btn-pc-expand-menu .btn-burger:focus {
            outline: none;
        }

        .btn-pc-expand-menu .btn-burger .hamburger {
            transition: 0.4s;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

            .btn-pc-expand-menu .btn-burger .hamburger .bar {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                width: 1.6rem;
                height: 2px;
                background: #727272;
                transition: 0.2s;
                outline: 1px solid transparent;
            }

            .btn-pc-expand-menu .btn-burger .hamburger .bar-1 {
                transform: rotate(0) translate3d(0, -7px, 0);
            }

            .btn-pc-expand-menu .btn-burger .hamburger .bar-3 {
                transform: rotate(0) translate3d(0, 7px, 0);
            }

    .btn-pc-expand-menu.active .hamburger {
        transform: rotate(180deg);
    }

        .btn-pc-expand-menu.active .hamburger .bar-1 {
            transform: rotate(45deg) translate3d(0, 0, 0);
        }

        .btn-pc-expand-menu.active .hamburger .bar-2 {
            opacity: 0;
        }

        .btn-pc-expand-menu.active .hamburger .bar-3 {
            transform: rotate(-45deg) translate3d(0, 0, 0);
        }

.pc-gnb-expand-item {
    width: 190px;
}

.pc-gnb-expand-btn {
    padding: 5px 18px 5px 18px;
    line-height: 1.2;
    color: #7b7b7b;
}

.pc-gnb-expand-item:last-child .pc-gnb-expand-btn {
    padding-bottom: 0;
}

.pc-gnb-expand-btn:hover, .pc-gnb-expand-item.active .pc-gnb-expand-btn {
    font-weight: 600;
}

.wrap-all-menu {
    display: none;
    z-index: 100;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.6);
}

/* footer */
.footer {
    padding: 50px 0 75px 0;
    background-color: #000;
    /* sns */
}

    .footer div, .footer button, .footer a {
        font-size: 0.9375rem;
        color: #fff;
    }

    .footer .top {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .footer .social-icons a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        text-align: center;
        color: #cfcfcf;
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    }

    .footer .social-icons [class*=xi-] {
        font-size: 1.375rem;
    }

    .footer .list-term li + li {
        margin-left: 35px;
    }

    .footer .bar {
        display: inline-block;
        padding: 5px;
    }

    .footer .bottom {
        padding-top: 20px;
        border-top: 1px solid #4d4d4d;
    }

        .footer .bottom .left .d-block {
            padding-bottom: 10px;
        }

        .footer .bottom .info p {
            word-break: keep-all;
        }

    .footer .footer-logo {
        margin-bottom: 15px;
        text-align: center;
    }

        .footer .footer-logo img {
            width: 102px;
            height: 25px;
        }

        .footer .footer-logo .txt {
            display: none;
            font-size: 1rem;
            color: #eee;
        }

@media (max-width: 1300px) {
    .footer {
        padding: 20px 15px;
    }

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

            .footer .bottom .right {
                justify-content: left;
                margin-top: 10px;
            }

            .footer .bottom .left .d-block {
                padding-bottom: 0;
            }
}

@media (max-width: 768px) {
    .footer .top {
        flex-direction: column;
        align-items: center;
    }

    .footer .social-icons {
        margin-top: 10px;
    }

    .footer .list-term {
        justify-content: center;
    }

        .footer .list-term a {
            font-size: 0.9333333333rem;
            color: #c9c9c9;
        }

    .footer .d-block a, .footer .info p {
        font-size: 0.9333333333rem;
        line-height: 1.6rem;
        color: #c9c9c9;
    }

    .footer .bottom .right {
        justify-content: center;
    }

    .footer .dropdown-toggle, .footer .dropdown-item {
        font-size: 0.9333333333rem;
    }
}

.service-main .footer .txt, .center-wrap .footer .txt, .guarantee-wrap .footer .txt, .step-wrap .footer .txt, .inquiry-wrap .footer .txt, .support-wrap .footer .txt {
    display: inline-block;
}

/* 드롭다운 스타일 */
.dropdown.black .btn-black {
    padding: 8px 10px 8px 17px;
    min-width: 210px;
    border-color: #fff;
}

    .dropdown.black .btn-black:hover {
        color: #fff;
    }

    .dropdown.black .btn-black:after {
        display: none;
    }

    .dropdown.black .btn-black .xi-angle-up-min {
        transition: transform 0.2s ease-out;
    }

    .dropdown.black .btn-black[aria-expanded=true] .xi-angle-up-min {
        transform: rotate(180deg);
    }

.dropdown.black .dropdown-menu {
    min-width: 210px;
    background-color: #000;
    border: 1px solid #fff;
    border-bottom: 0;
}

.dropdown.black .dropdown-item {
    background-color: #000;
    color: #fff;
}

    .dropdown.black .dropdown-item:hover {
        background-color: #474747;
    }

/* 모달 */
.modal {
    padding: 0 !important;
}

.modal-dialog {
    position: absolute;
    left: 50%;
    top: 50vh;
    min-width: 330px;
    margin: 0;
    transform: translate(-50%, -50%) !important;
}

.modal.type01 .modal-dialog {
    max-width: 600px;
}

.modal.type01 .modal-content {
    max-width: 600px;
    border: none;
}

.modal.type01 .modal-header {
    padding: 11px 20px;
    background-color: #00aceb;
    color: #fff;
    border-bottom: none;
}

    .modal.type01 .modal-header .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .modal.type01 .modal-header .close {
        opacity: 1;
    }

.modal.type01 .modal-body {
    padding-bottom: 20px;
    word-break: keep-all;
}

.modal.type01 .modal-footer {
    padding: 0 0 20px;
    border-top: none;
}

    .modal.type01 .modal-footer .btn {
        width: 47%;
        max-width: 180px;
        font-size: 1.125rem;
    }

.modal.type02 .modal-dialog {
    max-width: 750px;
}

.modal.type02 .modal-content {
    max-width: 750px;
    border: none;
}

.modal.type02 .modal-header {
    position: relative;
    padding: 11px 20px;
    background-color: #00aceb;
    color: #fff;
    border-bottom: none;
}

    .modal.type02 .modal-header .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .modal.type02 .modal-header .btn-close-modal {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
    }

.modal.type02 .modal-body {
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: 20px;
    word-break: keep-all;
}

.modal.type02 .modal-footer {
    padding: 0 0 20px;
    border-top: none;
}

    .modal.type02 .modal-footer .btn-primary {
        width: 47%;
        max-width: 180px;
        font-size: 1.125rem;
    }

@media (max-width: 768px) {
    .modal.type02 .modal-dialog {
        top: 50%;
        transform: translateY(-50%);
    }

    .modal.type02 .modal-body {
        max-height: none;
    }
}

/* 모달 사이즈 */
@media (max-width: 576px) {
    .modal-fullscreen {
        padding: 0 !important;
    }

        .modal-fullscreen .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 768px) {
    .modal-fullscreen-sm {
        padding: 0 !important;
    }

        .modal-fullscreen-sm .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-sm .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-sm .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 992px) {
    .modal-fullscreen-md {
        padding: 0 !important;
    }

        .modal-fullscreen-md .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-md .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-md .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-lg {
        padding: 0 !important;
    }

        .modal-fullscreen-lg .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-lg .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-lg .modal-body {
            overflow-y: auto;
        }
}

.modal-fullscreen-xl {
    padding: 0 !important;
}

    .modal-fullscreen-xl .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-xl .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-xl .modal-body {
        overflow-y: auto;
    }

/* // 모달 사이즈 */
.center-info .text-danger {
    font-size: 0.9375rem;
}

.center-info .table {
    margin-bottom: 0;
}

    .center-info .table th, .center-info .table td {
        padding: 5px 8px;
        font-size: 0.875rem;
    }

    .center-info .table th {
        width: 90px;
        font-weight: 500;
    }

    .center-info .table td, .center-info .table .tel {
        color: #747474;
    }

    .center-info .table .tel {
        font-size: 0.875rem;
    }

.btn-view-more {
    font-size: 0.75rem;
    transition: color 0.2s;
}

    .btn-view-more:hover {
        color: #00aceb;
    }

    .btn-view-more .xi-caret-up-circle {
        vertical-align: middle;
        margin-left: 7px;
        transform: rotate(90deg);
    }

/* 품질보증 관련 */
.number-list > li {
    position: relative;
    padding-left: 26px;
    line-height: 1.6;
}

    .number-list > li + li {
        margin-top: 5px;
    }

    .number-list > li .number-label {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        font-weight: 600;
        color: #BF1A2B;
    }

.number-list .depth01 {
    text-indent: 5px;
}

td > .depth01 > li {
    position: relative;
    padding-left: 20px;
}

    td > .depth01 > li + li {
        margin-top: 3px;
    }

    td > .depth01 > li .number-label {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        font-weight: 600;
    }

td > .depth01 .depth01 {
    text-indent: 5px;
}

.btn-guarantee {
    border: 1px solid #0f3355;
    font-size: 0.9375rem;
    background-color: #fff;
    color: #0f3355;
    font-weight: 400;
    transition: all 0.2s;
}

    .btn-guarantee:hover {
        border-color: #0f3355;
        background-color: #0f3355;
        color: #fff;
    }

    .btn-guarantee.softwear {
        display: inline-flex;
        align-items: center;
    }

        .btn-guarantee.softwear .left {
            flex-grow: 1;
        }

        .btn-guarantee.softwear .xi-angle-right {
            font-size: 2.5rem;
        }

@media (max-width: 768px) {
    .btn-guarantee {
        font-size: 1rem;
    }
}

/* 길안내 */
.map-wrap {
    width: 100%;
}

.trans-info {
    position: relative;
}

    .trans-info .label {
        display: inline-block;
        height: 22px;
        margin: 0 10px 7px 0;
        line-height: 22px;
        padding: 0 13px;
        font-size: 0.9375rem;
        color: #fff;
        border-radius: 20px;
    }

        .trans-info .label.line01 {
            background-color: #3356b4;
        }

        .trans-info .label.line04 {
            background-color: #09b4ea;
        }

        .trans-info .label.line06 {
            background-color: #bb6d2c;
        }

        .trans-info .label.trunk-line {
            background-color: #386de8;
        }

        .trans-info .label.branch-line {
            background-color: #3cc344;
        }

/* MO lnb */
.mo-lnb-wrap {
    position: relative;
    z-index: 200;
}

    .mo-lnb-wrap .mo-lnb-dim {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .mo-lnb-wrap.active .mo-lnb-dim {
        display: block;
    }

.mo-lnb-list {
    position: relative;
    z-index: 1;
    display: flex;
}

    .mo-lnb-list > li {
        overflow: hidden;
        flex: 1;
    }

        .mo-lnb-list > li:first-child .drop-list {
            width: calc(50% + 1px);
            border-right: 1px solid #e7e7e7;
        }

        .mo-lnb-list > li:first-child:after {
            display: block;
            content: "";
            position: absolute;
            left: 50%;
            top: 1px;
            width: 1px;
            height: calc(100% - 2px);
            background-color: #e7e7e7;
        }

        .mo-lnb-list > li:last-child .drop-list {
            left: auto;
            right: 0;
            border-left: 1px solid #e7e7e7;
        }

    .mo-lnb-list .btn-mo-lnb {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        padding: 0 20px;
        border-top: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
        text-align: left;
        color: #666;
    }

        .mo-lnb-list .btn-mo-lnb .xi-caret-down-circle-o {
            font-size: 18px;
            color: #bfbfbf;
            transition: transform 0.3s ease-in-out;
        }

    .mo-lnb-list .active .btn-mo-lnb .xi-caret-down-circle-o {
        transform: rotate(180deg);
    }

    .mo-lnb-list .drop-list-wrap {
        position: relative;
    }

        .mo-lnb-list .drop-list-wrap .active {
            z-index: 1;
        }

    .mo-lnb-list .drop-list {
        display: none;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 50px;
        width: 50%;
        background-color: #fff;
    }

        .mo-lnb-list .drop-list:after {
            display: block;
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid #ddd;
        }

        .mo-lnb-list .drop-list .btn-drop-list {
            height: 45px;
            padding: 0 10px;
            line-height: 45px;
            font-size: 1rem;
            color: #666;
        }

            .mo-lnb-list .drop-list .btn-drop-list.page-on {
                background-color: #00aceb;
                color: #fff;
            }

.inquiry-table tbody th {
    max-width: 15%;
    padding: 0 30px;
    border-right: 0 !important;
    vertical-align: middle;
    white-space: pre;
    font-weight: 600;
}

    .inquiry-table tbody th label {
        font-weight: 600;
    }

.inquiry-table .textarea {
    height: 250px;
}

.inquiry-table .custom-file-input, .inquiry-table .custom-file-label {
    font-weight: 400;
    color: #747474;
}

.inquiry-table .select-wrapper {
    position: relative;
    width: 100%;
}

@media (max-width: 768px) {
    .inquiry-table {
        margin-bottom: 30px;
    }

        .inquiry-table .thead {
            padding: 12px 5px;
            font-size: 1rem;
            text-align: left;
        }

        .inquiry-table td {
            padding: 12px;
        }

        .inquiry-table .phone .form-liner .form-30 {
            width: 30%;
        }

        .inquiry-table .phone .form-liner .form-40 {
            width: 40%;
        }

        .inquiry-table .phone .form-liner .space {
            width: 15px;
        }

        .inquiry-table .mail .form-liner {
            flex-wrap: wrap;
        }

        .inquiry-table .mail .mail-id {
            width: calc(50% - 14px);
        }

        .inquiry-table .mail .domain {
            width: calc(50% + 14px);
            margin-bottom: 7px;
        }

        .inquiry-table .mail .space {
            width: 28px;
        }

        .inquiry-table .category .form-liner {
            flex-wrap: wrap;
        }

        .inquiry-table .custom-file-input, .inquiry-table .custom-file-label {
            font-size: 1rem;
        }
}

.inquiry-table + .custom-checkbox .custom-control-label, .inquiry-table + .custom-checkbox a {
    color: #666;
}

.inquiry-terms-wrap .terms {
    margin-bottom: 20px;
}

.inquiry-terms-wrap .custom-checkbox {
    margin-bottom: 55px;
}

.inquiry-terms-wrap .custom-control-label {
    color: #666;
}

    .inquiry-terms-wrap .custom-control-label span {
        font-size: inherit;
    }

@media (max-width: 768px) {
    .inquiry-terms-wrap {
        margin-bottom: 38px;
    }

        .inquiry-terms-wrap .h3 {
            margin-bottom: 18px;
        }

        .inquiry-terms-wrap .custom-control-label {
            font-size: 0.9333333333rem;
        }

        .inquiry-terms-wrap .custom-checkbox {
            margin-bottom: 35px;
        }
}
/* 파일첨부 드롭다운 */
.drop-zone {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #ced4da;
    border: 1px dashed #ced4da;
    border-radius: 10px;
}

    .drop-zone .xi-file-image-o, .drop-zone .xi-file-video-o {
        font-size: 2.5rem;
    }

.drop-zone-wrap .head {
    min-height: 25px;
    position: relative;
    padding-bottom: 8px;
}

.drop-zone-wrap .btn-del {
    position: absolute;
    right: 0;
    top: -3px;
    display: none;
}

.drop-zone--over {
    border-style: solid;
}

.drop-zone__input {
    display: none;
}

.drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
}

    .drop-zone__thumb::after {
        overflow: hidden;
        content: attr(data-label);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 5px;
        text-overflow: ellipsis;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.75);
        font-size: 14px;
        text-align: center;
    }

/* 아코디언 테이블 */
.board-accordion-wrap {
    /* width 정의 */
}

    .board-accordion-wrap .cell {
        display: block;
        text-align: center;
    }

    .board-accordion-wrap .product, .board-accordion-wrap .contact, .board-accordion-wrap .step, .board-accordion-wrap .name, .board-accordion-wrap .date {
        flex-basis: 10%;
    }

    .board-accordion-wrap .title {
        flex-basis: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .board-accordion-wrap .board-accordion-header {
        display: flex;
        border-top: 2px solid #666;
    }

        .board-accordion-wrap .board-accordion-header .cell {
            padding: 24px 5px;
            font-weight: 600;
            background-color: #f9f9f9;
        }

    .board-accordion-wrap .board-accordion-list {
        border-top: 1px solid #e0e0e0;
    }

        .board-accordion-wrap .board-accordion-list pre {
            white-space: pre-line;
            word-break: keep-all;
        }

        .board-accordion-wrap .board-accordion-list a {
            display: flex;
            border-top: 1px solid #e0e0e0;
        }

        .board-accordion-wrap .board-accordion-list .card {
            border: 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .board-accordion-wrap .board-accordion-list .card-header {
            padding: 0;
            margin-bottom: 0;
            background-color: #fff;
            border: 0;
        }

        .board-accordion-wrap .board-accordion-list .cell {
            padding: 19px 5px;
            font-weight: 600;
            color: #666;
        }

        .board-accordion-wrap .board-accordion-list .card-header[aria-expanded=false] .cell {
            font-weight: 400;
        }

        .board-accordion-wrap .board-accordion-list .card-body {
            padding: 20px 10px;
            border: 0;
            border-top: 1px solid #e0e0e0;
            background-color: #fafafa;
        }

        .board-accordion-wrap .board-accordion-list .password-cont {
            padding: 14px 0;
        }

        .board-accordion-wrap .board-accordion-list .text-cont {
            padding-left: 10%;
        }

@media (max-width: 768px) {
    .board-accordion-wrap .board-accordion-list .card-header {
        flex-wrap: wrap;
        padding: 5px 0;
    }

        .board-accordion-wrap .board-accordion-list .card-header .cell {
            position: relative;
            padding: 3px 5px;
            text-align: left;
        }

        .board-accordion-wrap .board-accordion-list .card-header .title {
            flex-basis: 100%;
        }

        .board-accordion-wrap .board-accordion-list .card-header .product, .board-accordion-wrap .board-accordion-list .card-header .contact, .board-accordion-wrap .board-accordion-list .card-header .step, .board-accordion-wrap .board-accordion-list .card-header .name, .board-accordion-wrap .board-accordion-list .card-header .date {
            flex-basis: auto;
        }

        .board-accordion-wrap .board-accordion-list .card-header .name, .board-accordion-wrap .board-accordion-list .card-header .date {
            color: #adb5bd;
        }

            .board-accordion-wrap .board-accordion-list .card-header .product:after, .board-accordion-wrap .board-accordion-list .card-header .contact:after, .board-accordion-wrap .board-accordion-list .card-header .name:after {
                display: block;
                content: "";
                position: absolute;
                right: 0;
                top: 50%;
                width: 1px;
                height: 40%;
                transform: translateY(-50%);
                background-color: #e9ecef;
            }

    .board-accordion-wrap .board-accordion-list .text-cont {
        padding-left: 0;
    }
}

/* 카카오톡 고객지원 안내 */
.list-info {
    flex-wrap: wrap;
    gap: 32px 29px;
}

.item-info {
    overflow: hidden;
    position: relative;
    width: calc(25% - 22px);
    max-height: 200px;
    border: 1px solid #eee;
    cursor: pointer;
}

    .item-info.item01 {
        background: url("/Content/images/serviceMain/logo_info01.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item02 {
        background: url("/Content/images/serviceMain/logo_info02.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item03 {
        background: url("/Content/images/serviceMain/logo_info03.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item04 {
        background: url("/Content/images/serviceMain/logo_info04.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item05 {
        background: url("/Content/images/serviceMain/logo_info05.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item06 {
        background: url("/Content/images/serviceMain/logo_info06.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item07 {
        background: url("/Content/images/serviceMain/logo_info07.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item08 {
        background: url("/Content/images/serviceMain/logo_info08.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item09 {
        background: url("/Content/images/serviceMain/logo_info09.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item10 {
        background: url("/Content/images/serviceMain/logo_info10.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item11 {
        background: url("/Content/images/serviceMain/logo_info11.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item12 {
        background: url("/Content/images/serviceMain/logo_info12.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item13 {
        background: url("/Content/images/serviceMain/logo_info13.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item14 {
        background: url("/Content/images/serviceMain/logo_info14.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item15 {
        background: url("/Content/images/serviceMain/logo_info15.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item16 {
        background: url("/Content/images/serviceMain/logo_info16.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item17 {
        background: url("/Content/images/serviceMain/logo_info17.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item18 {
        background: url("/Content/images/serviceMain/logo_info18.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item19 {
        background: url("/Content/images/serviceMain/logo_info19.png") center/366px 192px no-repeat #fff;
    }

    .item-info.item20 {
        background: url("/Content/images/serviceMain/logo_info20.png") center/366px 192px no-repeat #fff;
    }

    .item-info .plus {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #0c59db;
        color: #fff;
        text-align: center;
        transition: opacity 0.2s Ease-out;
    }

    .item-info .area-hover {
        z-index: 1;
        position: relative;
        transform: translateY(2%);
        width: 100%;
        height: 100%;
        padding: 20px 35px;
        background-color: #0f3355;
        opacity: 0;
        transition: all 0.2s ease-in-out;
    }

        .item-info .area-hover:after {
            display: block;
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .item-info .area-hover .title, .item-info .area-hover .head, .item-info .area-hover .txt, .item-info .area-hover a {
            color: #fff;
        }

        .item-info .area-hover .title {
            margin-bottom: 12px;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .item-info .area-hover .contact {
            margin-bottom: 15px;
        }

            .item-info .area-hover .contact td {
                padding-left: 34px;
            }

        .item-info .area-hover .head {
            font-size: 1rem;
            font-weight: 600;
        }

        .item-info .area-hover .txt {
            font-size: 1rem;
        }

        .item-info .area-hover .btn {
            flex-basis: 50%;
            padding: 6px 6px;
            font-size: 1rem;
            font-weight: 600;
            background-color: transparent;
        }

            .item-info .area-hover .btn + .btn {
                margin-left: 15px;
            }

            .item-info .area-hover .btn.kakaotalk {
                border: 1px solid #f7d500;
                color: #f7d500;
            }

                .item-info .area-hover .btn.kakaotalk:hover {
                    color: #000;
                    background-color: #f7d500;
                    border-color: #f7d500;
                }

            .item-info .area-hover .btn.view {
                border: 1px solid #fff;
                color: #fff;
            }

                .item-info .area-hover .btn.view:hover {
                    color: #0f3355;
                    background-color: #fff;
                    border-color: #fff;
                }

    .item-info:hover .plus {
        opacity: 0;
    }

    .item-info:hover .area-hover {
        transform: translateY(0);
        opacity: 1;
    }

        .item-info:hover .area-hover:after {
            display: none;
        }

@media (max-width: 1024px) {
    .item-info {
        width: calc(50% - 5px);
        margin-bottom: 20px;
        margin-left: 0;
    }

        .item-info:nth-child(even) {
            margin-left: 10px;
        }
}

@media (max-width: 600px) {
    .item-info {
        width: 100%;
        margin-left: 0 !important;
    }
}