:root {
    --spacing: 0.125rem;
}

/* 에디터 기본 스타일 */
.ck-content :is(h1, h2, h3, h4, h5, h6, ul, ol, li, a, strong, b) {
    all: revert;
}
.ck-content * {
    max-width: 100%;
}

.title-leading {
    line-height: 1.2;
}

.custom-container {
    width: var(--container-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.yeseva-one-regular {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.translate-item {
    width: max-content;
}
.leading-none {
    line-height: 1;
}

#popParent {
    display: none;
}
.pop-parent {
    z-index: 9999;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    background-color: rgba(0, 0, 0, 0.35);
}
.pop-parent .pop {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
}
.pop-parent .m-ratioBox-wrap {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}
.pop-parent .m-ratioBox-wrap .m-ratioBox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--sub_color01);
}
.pop-parent .m-ratioBox-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}
.pop-parent .m-ratioBox-wrap iframe {
    width: 105%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}
.pop-parent .pop .btn-toggle {
    width: 40px;
    height: 40px;
    position: relative;
    background-color: black;
    cursor: pointer;
}
.pop-parent .pop .btn-toggle img {
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transition: all 0.3s;
}
.pop-parent .pop-btns {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    background-color: #3c3c3c;
}
.pop-parent .pop-btns a {
    color: #fff;
    padding: 7px 14px;
}
.pop-parent .pop-btns #oneday_check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.pop-parent .pop-btns #oneday_check + label {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}
.pop-parent .pop-btns #oneday_check + label:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    border: 1px solid #fff;
}
.pop-parent .pop .swiper-btn-control {
    width: 8px;
    height: 11px;
    margin-left: 16px;
    position: relative;
    top: 2px;
}
.pop-parent .popupSwiper {
    background-color: #fff;
}
.pop-parent .swiper-pagination {
    pointer-events: none;
    top: 21px;
    left: auto;
    right: 20px;
    width: fit-content;
}
.pop-parent .swiper-pagination-bullet {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 0;
    border: 1px solid white;
    opacity: 0.5;
    background-color: transparent;
}
.pop-parent .swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1;
}
.pop-parent .active {
    right: -400px;
}
.pop-parent .active .btn-toggle {
    transform: rotate(180deg);
}
.pop-parent .pop .btn-close {
    width: 40px;
    height: 40px;
    background-color: black;
}
.pop-parent .pop .btn-close > i {
    color: #fff;
}

/* 헤더 */
.header-overlay {
    display: none;
}
.header.on + .header-overlay {
    content: "";
    display: block;
    clear: both;
    cursor: pointer;
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.floating-btns-wrap {
    z-index: 99;
    position: fixed;
    bottom: 48px;
    right: 48px;
    opacity: 0;
    width: 48px;
    transition: 0.3s;
}

.floating-btns-wrap.active {
    opacity: 1;
}
.btn-scroll-top {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 100%;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.btn-scroll-top i {
    font-size: 24px;
    color: #464646;
    z-index: 2;
}

.btn-scroll-top .progress_bar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.btn-scroll-top .progress_bar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background-color: #fff;
    border-radius: 100%;
}
.btn-menu {
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-gray-2);
}
.btn-menu .icon-open {
    display: block;
}
.btn-menu.on .icon-open {
    display: none;
}
.btn-menu .icon-close {
    display: none;
}
.btn-menu.on .icon-close {
    display: block;
}
.menu-items-wrap {
    display: none;
}
.btn-menu.on + .menu-items-wrap {
    display: flex;
}

.page-nav .nav-item {
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 6px;
}
.page-nav .nav-item.on {
    color: var(--color-blue-main);
}
.page-nav .nav-item:not(:last-of-type)::after {
    content: "";
    display: block;
    clear: both;
    width: 8px;
    height: 8px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
}

/* 인사말과 비전 */
.greeting-and-vision {
    .vision-item:not(:last-of-type) {
        border-bottom: 1px solid var(--color-gray-de);
        padding-bottom: 50px;
    }
}
.greeting-and-vision {
    [aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .history-swiper {
        .swiper-slide {
            width: unset;
        }
    }
    .history-item {
        position: relative;
        border-top: 1px solid var(--color-blue-7a);
        padding-top: 40px;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            border-radius: 50%;
            background-color: var(--color-yellow-main);
        }
    }
}

/* 메인 메뉴 */
.menu-box > nav > ul > li > ul > li > a {
    position: relative;

    &:hover:after {
        content: ">";
        position: absolute;
        top: -1px;
        right: -25px;
        display: block;
        color: var(--color-yellow-main);
    }
}

/* 섹션 페이드 업 슬라이드 효과 */
.fade_slide_up {
    will-change: transform, opacity;
}

/* 검색창 */
.search {
    max-width: 445px;
    width: calc(100vw - 30px);
    height: 60px;
    border: 1px solid var(--color-gray-de);
    border-radius: 60px;
    background-color: rgba(255, 255, 255, 0.3);

    &.type-2 {
        max-width: 600px;
        background-color: rgba(222, 222, 222, 0.3);
    }

    &.type-3 {
        max-width: 600px;
        width: calc(100vw - 60px);
        background-color: rgba(222, 222, 222, 0.3);
    }

    form {
        width: 100%;
        height: 100%;
        padding: 15px 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search-txt {
            width: 100%;
            font-size: 20px;
            font-weight: 400;
            color: #fff;
        }
        .search-txt.type-2 {
            color: var(--color-gray-7f);
        }
        .search-btn {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
                font-size: 36px;
                color: #fff;
            }
            &.type-2 > i {
                color: #000;
            }
        }
    }
}
@media screen and (max-width: 1400px) {
    .search {
        max-width: 330px;
        height: 40px;

        form {
            padding: 10px 15px;

            .search-txt {
                font-size: 14px;
            }
            .search-btn {
                width: 24px;
                height: 24px;

                i {
                    font-size: 24px;
                }
            }
        }
    }
}

/* 메뉴 포인트 디자인 */
.subpage-nav * {
    color: var(--color-gray-7f);
}
.all-menu-point {
    position: relative;

    &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0px;
        bottom: -4px;
        clear: both;
        width: 100%;
        height: 4px;
        background-color: var(--color-yellow-main);
    }
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: -6px;
        right: -12px;

        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: var(--color-yellow-main);
    }
}

/* 배경 */
.main-bg-01 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        url(../images/main_bg_01.png);
}
.main-bg-02 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        url(../images/main_bg_02.jpg);
}
.main-bg-03 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        url(../images/main_bg_03.jpg);
}
.main-bg-05 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        url(../images/main_bg_05.jpg);
}
.main-bg-06 {
    background: #001e69;
    position: relative;
}
.main-bg-07 {
    background: #555d70;
    position: relative;
}
.main-bg-01,
.main-bg-02,
.main-bg-03,
.main-bg-05 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.main-bg-04,
.main-bg-08 {
    position: relative;
    overflow: hidden;
}
.main-bg-04 video,
.main-bg-08 video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 0;
    object-fit: cover;
}
.main-bg-04 .content,
.main-bg-08 .content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}
.bg_point01 {
    left: -220px;
    width: 680px;
    aspect-ratio: 674 / 843;
    background: url(../images/bg_point01.png) no-repeat center center;
}
.bg_point02 {
    right: -120px;
    width: 680px;
    aspect-ratio: 680 / 812;
    background: url(../images/bg_point02.png) no-repeat center center;
}
.bg_point01,
.bg_point02 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
}
@media screen and (max-width: 1400px) {
    .bg_point01,
    .bg_point02 {
        width: 60vw;
        min-width: 400px;
    }
    .bg_point01 {
        top: 30%;
        left: -20%;
    }
    .bg_point02 {
        top: 35%;
        right: -45%;
    }
}
.youtube_bg {
    background: url(/images/youtube_bg.png) no-repeat 100% 100%;
    background-size: 100% 100%;
}
@media screen and (max-width: 1400px) {
    .youtube_bg {
        background: url(/images/youtube_bg_mb.png) no-repeat 100% 100%;
        background-size: 100% 100%;
        margin-top: 46px;
    }
}

/* 프로필 이미지 배경 */
.profile-gradient {
    background: radial-gradient(50% 50% at 50% 50%, #efeeed 49%, #c6c4c4 100%);
}
.detail-gradient {
    background: linear-gradient(104deg, #001e69 13.2%, #0027c4 93.23%);
}
.detail-bg-img {
    background: url(/images/bg_point03.png) no-repeat center center;
    background-size: auto 65%;
}

/* 스크롤바 숨김 */
.scrollbar-hide {
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* 구성원 게시글 박스 스타일 */
.case-box {
    position: relative;
    background: #fff;
    border: 5px solid var(--color-sky-bg);

    /* 오른쪽 하단 삼각형 효과 */
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 18px),
        calc(100% - 24px) 100%,
        0 100%
    );
}

/* 온라인질문 목록 스타일 */
.online_list {
    margin: 0 auto 48px;
    background-color: white;

    li {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        font-weight: 500;
    }

    .online_list_h {
        padding: 20px;
        font-size: 16px;

        .list_no {
            width: 90px;
            min-width: 90px;
            text-align: center;
            color: var(--color-gray-7f);
        }

        p {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;

            span {
                color: var(--color-gray-7f);
                padding: 0 20px;
            }

            .list_title {
                width: 100%;
                min-width: 864px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
            .list_name,
            .list_state {
                width: 120px;
                min-width: 120px;
            }
            .list_date {
                width: 140px;
                min-width: 140px;
            }
        }
    }

    .online_list_b {
        font-size: 18px;

        button {
            width: 100%;
            height: 100%;
            padding: 40px 20px;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;

            .list_no {
                width: 90px;
                min-width: 90px;
                text-align: center;
                color: var(--color-yellow-main);
            }

            > div {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;

                span {
                    padding: 0 20px;
                }

                .list_title {
                    width: 890px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    text-align: left;
                    font-size: 24px;
                    font-weight: 600;
                }

                .list_name {
                    width: 120px;
                    min-width: 120px;
                    color: var(--color-gray-7f);
                }

                .list_state {
                    display: block;
                    width: 80px;
                    min-width: 80px;
                    margin: 0 20px;
                    padding: 10px 0;
                    border-radius: 10px;
                }
                .state_off {
                    color: var(--color-yellow-main);
                    background-color: rgba(255, 190, 14, 0.15);
                }
                .state_on {
                    color: var(--color-blue-main);
                    background-color: var(--color-sky-bg);
                }

                .list_date {
                    width: 140px;
                    min-width: 140px;
                    color: var(--color-gray-7f);
                }

                .list_btn {
                    display: none;
                }
            }

            @media screen and (min-width: 1400px) {
                &:hover {
                    background-color: var(--color-sky-box);

                    > div {
                        .list_title {
                            width: 785px;
                        }
                        .list_btn {
                            display: block;

                            i {
                                font-size: 24px;
                                color: white;
                                background: #000;
                                padding: 4px;
                                border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1400px) {
    .online_list {
        margin-bottom: 20px;

        .online_list_h {
            display: none;
        }

        .online_list_b {
            font-size: 12px;

            button {
                padding: 18px 20px;
                display: flex;
                flex-wrap: nowrap;
                align-items: start;

                .list_no {
                    width: 30px;
                    min-width: 30px;
                    text-align: left;
                    color: var(--color-yellow-main);
                }

                > div {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    gap: 6px;

                    span {
                        padding: 0;
                    }

                    .list_title {
                        width: 100%;
                        min-height: 48px;
                        text-overflow: ellipsis;
                        white-space: normal;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        text-align: left;
                        font-size: 16px;
                        font-weight: 600;
                    }

                    .list_name {
                        width: fit-content;
                        min-width: fit-content;
                    }

                    .list_state {
                        display: block;
                        width: 45px;
                        min-width: 45px;
                        margin: 0;
                        padding: 6px 0;
                        border-radius: 10px;
                    }

                    .list_date {
                        width: fit-content;
                        min-width: fit-content;
                    }

                    .list_btn {
                        display: none;
                    }
                }
            }
        }
    }
}

/* 법률정보 카테고리 스타일 */
button.active {
    color: white;
    background-color: var(--color-blue-bg);
}
.all.active {
    color: black;
    font-weight: 600;
    background: var(--color-gray-bg);
}
.dropdown.show .dropdown-content {
    display: grid;
}
.tag {
    display: inline-block;
    padding: 8px 10px;
    width: 100%;
    border: 1px solid var(--color-gray-de);
    border-radius: 8px;
    background: #f3f3f3;
    color: var(--color-gray-6);
    font-size: 13px;
}

/* 빠른 메뉴 */
#quick-menu {
    background-color: var(--color-gray-bg);
}

/* 고운 소식 */
.goun-news .news-item .hover-item {
    opacity: 0;
}
.goun-news .news-item:hover .hover-item {
    opacity: 1;
}

/* 사회공헌 활동 */
.result-item:not(:hover) .mask-rounded-image,
.result-item:not(:hover) .hover-item {
    display: none;
}

/* 사무소 안내 */
.office-info-list .result-item:hover {
    .text-box {
        background-color: var(--color-blue-bg);
        * {
            color: white;
        }
    }
}

/* 상세 업무 */
.practice-areas .practice-area-list-wrap > .practice-area-list {
    border: 5px solid var(--color-sky-bg);
    width: 240px;
    min-width: 240px;
    padding: 30px 24px;
    background-color: white;
}
.btn-show-practice-area-list {
    display: none;
}

/* 1279px 이하 */
@media screen and (max-width: 1279px) {
    .pop-parent .pop {
        width: 310px;
    }
    .pop-parent.active {
        right: -310px;
    }
    .page-nav .nav-item:not(:last-of-type)::after {
        width: 6px;
        height: 6px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
    }
    .all-menu-point {
        &:after {
            top: -4px;
            right: -9px;
            width: 6px;
            height: 6px;
        }
    }

    /* 고운 소개 */
    .goun-news .news-item .hover-item {
        display: none;
    }
    .greeting-and-vision {
        .history-item {
            padding-top: 20px;
            &::before {
                width: 15px;
                height: 15px;
            }
        }
    }
    .social-contribution .result-item .hover-item {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .floating-btns-wrap {
        bottom: 16px;
        right: 16px;
    }

    .btn-show-practice-area-list {
        display: flex;
    }

    /* 메인 */
    .main-bg-01 {
        background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
            url(../images/mb_main_bg_01.png);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
    }

    .practice-areas .practice-area-list-wrap.on {
        z-index: 99;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .practice-areas .practice-area-list-wrap > .practice-area-list {
        display: none;
        padding: 14px;
    }

    .practice-areas .practice-area-list-wrap.on > .practice-area-list {
        z-index: 999;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: calc(100% - 72px);
        height: auto;
        background-color: white;
    }
}

@media screen and (max-width: 767px) {
    .pop-parent {
        top: 50%;
        right: unset;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .pop-parent .pop-btns {
        width: 100%;
        justify-content: space-between;
    }
    .pop-parent .pop .btn-toggle {
        display: none;
    }
    .pop-parent .pop .btn-close {
        display: block;
    }
}