.modal-23-contauner-fluid {
    background-color: rgba(0, 0, 0, 0.40);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10021;
}

.modal-23-wrap {
    width: 800px;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
}

.modal-23-header {
    display: flex;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: url('/data/images/detail/2023/modal/bg-modal-header.png') no-repeat top center;
    background-size: 25%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-23-header h2 {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    /* 25.6px */
    padding-left: 25px;
}

.modal-23-header .modal-23-close>a {
    padding: 25px;
    display: block;
}

.modal-23-tab {
    height: auto;
    background-color: #F2F2F5;
}

.modal-23-body {
    width: 100%;
    height: 600px;
    overflow-y: scroll;
}

.modal-23-body-nofooter {
    width: 100%;
    height: 680px;
    overflow-y: scroll;
    position: relative;
}

.modal-23-footer {
    display: flex;
    height: 80px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    gap: 60px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 추가구성 옵션 모달 */
.modal-option-tab-wrap {
    padding: 5px;
}

.modal-option-tab {
    display: flex;
    flex-wrap: wrap;
}

ul.modal-option-tab li {
    border-radius: 999px;
    padding: 6px 14px;
    margin: 3px;
    background-color: #FFF;
    color: #232323;
    cursor: pointer;
    font-size: 14px;
    text-wrap: nowrap;
    white-space: nowrap;
}

ul.modal-option-tab li.current {
    background-color: #232323;
    color: #FFF;
}

.modal-option {
    padding: 40px;
    background-color: #FAFAFC;
    margin: 0 10px 30px 10px;
}

.modal-option h3 {
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

.modal-option h4 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

.modal-option p {
    color: #777;
    margin-bottom: 30px;
}

.modal-option-img {
    margin-bottom: 10px;
}

.modal-option-img img {
    margin-bottom: 10px;
    object-fit: cover;
}

.modal-option-notice {
    background-color: #F0F0F0;
    color: #777 !important;
    border-radius: 12px;
    font-size: 14px;
    padding: 20px 14px;
}

.modal-option-notice>h4 {
    font-weight: 600;
    margin-bottom: 10px;
}

.modal-option-notice li {
    color: #777 !important;
}

.modal-option-list {
    color: #777 !important;
    font-size: 14px;
    margin-bottom: 30px;
}

.modal-option-list>p {
    margin-bottom: 5px;
}

.modal-option-list li {
    color: #777 !important;
}

.modal-option-table table {
    margin: 0 0 20px 0;
    padding: 0;
    width: 100%;
}

.modal-option-table table th,
.modal-option-table table td {
    border: 1px solid #E5E5E5;
    padding: 10px;
    font-size: 13px;
    color: #777;
    text-align: center;
}

.modal-option-table table th {
    font-weight: 700;
    background-color: #F0F0F0;
}

.modal-option-table table td {
    background-color: #FFF;
}

/* 갤러리 리스트 */
.modal-23-gallery {
    padding: 0 20px;
}

.modal-23-gallery-list {
    display: flex;
    height: 600px;
    align-items: flex-start;
    align-content: flex-start;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.modal-23-gallery-list-item {
    width: 18.9%;
    flex-shrink: 0;
    aspect-ratio: auto 1/1;
    border: 4px solid transparent;
}

.modal-23-gallery-list-item:hover,
.modal-23-gallery-list-item.current {
    border: 4px solid #FBCA17;
}

.modal-23-gallery-list-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 갤러리 보기 */
.modal-23-gallery-view {
    position: relative;
    background-color: #000;
}

.modal-23-gallery-view>a {
    display: block;
    padding: 20px 30px;
    background-color: rgba(0, 0, 0, 0.40);
    position: absolute;
    left: 0;
    top: calc(50% - 43px);
}

.modal-23-gallery-view>.gallery-view-right {
    left: auto;
    right: 0;
}

.modal-23-gallery-view>.gallery-view-image {
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: auto 1/1;
}

.view-thumbnail {
    border-radius: 5px;
    overflow: hidden;
}

.modal-23-gallery-view>.gallery-view-image img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
}

.i-icon {
    display: inline-block;
}

.i-icon-no {
    display: none !important;
}

.i-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23fm-close)'%3E%3Cpath d='M23.7282 0.27189C23.3688 -0.0874875 22.7837 -0.0874875 22.4243 0.27189L11.9978 10.6985L1.57118 0.27189C1.2118 -0.092095 0.631268 -0.092095 0.27189 0.27189C-0.092095 0.631268 -0.092095 1.2118 0.27189 1.57118L10.6985 11.9977L0.27189 22.4243C-0.0874876 22.7837 -0.0874876 23.3688 0.27189 23.7282C0.631268 24.0876 1.21641 24.0876 1.57579 23.7282L12.0024 13.3016L22.4289 23.7282C22.7883 24.0876 23.3734 24.0876 23.7328 23.7282C24.0922 23.3688 24.0922 22.7837 23.7328 22.4243L13.3063 11.9977L23.7282 1.57118C24.0876 1.2118 24.0876 0.626661 23.7282 0.267283V0.27189Z' fill='black'/%3E%3C/g%3E%3C/svg%3E");
}

.i-arrow-left {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 42" fill="none"><path d="M23.5915 1.30054C23.3526 1.08474 23.0289 0.961426 22.6821 0.961426C22.343 0.961426 22.0116 1.07703 21.7726 1.30054L0.377649 20.183C0.131021 20.3911 0 20.684 0 20.9845C0 21.2851 0.138728 21.578 0.377649 21.7861L21.7726 40.6763C22.0116 40.8998 22.343 41.0308 22.6898 41.0308C23.0366 41.0308 23.3757 40.9152 23.6224 40.6994C23.869 40.4836 24 40.183 24 39.8824C24 39.5741 23.8459 39.2813 23.5915 39.0732L3.10597 20.9845L23.5915 2.90362C23.8382 2.69553 23.9692 2.40266 23.9692 2.10208C23.9692 1.8015 23.8382 1.51634 23.5915 1.30054Z" fill="white"/></svg>');
    width: 24px;
    height: 42px;
}

.i-arrow-right {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 42" fill="none"><path d="M0.408478 40.6994C0.647399 40.9152 0.971098 41.0308 1.31792 41.0385C1.65703 41.0385 1.98844 40.9229 2.22736 40.6994L23.6224 21.8092C23.869 21.6011 24 21.3082 24 21.0077C24 20.7071 23.8613 20.4142 23.6224 20.2061L2.21965 1.32366C1.98073 1.09245 1.65703 0.961426 1.31021 0.961426C0.963391 0.961426 0.624277 1.07703 0.377649 1.29283C0.131021 1.50863 0 1.80921 0 2.10979C0 2.41807 0.154143 2.71094 0.408478 2.91904L20.894 21.0077L0.408478 39.0963C0.16185 39.3044 0.0308285 39.5973 0.0308285 39.8978C0.0308285 40.1984 0.16185 40.4836 0.408478 40.6994Z" fill="white"/></svg>');
    width: 24px;
    height: 42px;
}

.i-thumbnail-all {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'%3E%3Cg clip-path='url(%23all-thumbnail)'%3E%3Cpath d='M16.1 9.44H12.34C11.02 9.44 9.94 10.52 9.94 11.84V15.6C9.94 16.92 11.02 18 12.34 18H16.1C17.42 18 18.5 16.92 18.5 15.6V11.84C18.5 10.52 17.42 9.44 16.1 9.44ZM16.1 0H12.34C11.02 0 9.94 1.08 9.94 2.4V6.16C9.94 7.48 11.02 8.56 12.34 8.56H16.1C17.42 8.56 18.5 7.48 18.5 6.16V2.4C18.5 1.08 17.42 0 16.1 0ZM6.66 9.44H2.9C1.58 9.44 0.5 10.52 0.5 11.84V15.6C0.5 16.92 1.58 18 2.9 18H6.66C7.98 18 9.06 16.92 9.06 15.6V11.84C9.06 10.52 7.96 9.44 6.66 9.44ZM9.06 2.4V6.16C9.06 7.48 7.98 8.56 6.66 8.56H2.9C1.58 8.56 0.5 7.48 0.5 6.16V2.4C0.5 1.08 1.58 0 2.9 0H6.66C7.96 0 9.06 1.08 9.06 2.4Z' fill='%23323232'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='all-thumbnail'%3E%3Crect width='18' height='18' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* detail-2023.css 중복 추가 */
/* 텍스트 리스트 */
.d3-list {
    margin-left: 15px;
}

.d3-list li {
    list-style-type: disc;
    color: #000;
    font-weight: 400;
    line-height: 160%;
}

/* 구분라인 */
.division {
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.division-box {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.division-line {
    width: 40px;
    height: 2px;
}

.division-line:nth-child(1) {
    background-color: #FBCA17;
}

.division-line:nth-child(2) {
    background-color: #52B1E4;
}

.division-line:nth-child(3) {
    background-color: #70A100;
}

@media (min-width: 768px) {
    .modal-23-gallery-list {
        overflow: auto;
    }

    .modal-23-gallery-list-item {
        height: 160px;
    }
}

@media (max-width: 768px) {
    .modal-23-contauner-fluid {
        padding: 10px;
    }

    .modal-23-wrap {
        width: 100%;
        height: 80vh;
    }

    .modal-23-body {
        height: calc(100% - 160px);
        overflow-y: scroll;
    }

    .modal-23-body-nofooter {
        height: calc(100% - 90px - 50px);
        overflow-y: scroll;
    }

    .modal-23-gallery-view {
        position: relative;
        height: calc(100%);
    }

    .modal-23-gallery-view>.gallery-view-image {
        width: 100%;
        height: 100%;
    }

    .modal-23-gallery-view>.gallery-view-image img {
        width: 80vw;
        max-height: 55vh;
    }

    .modal-23-gallery-view>a {
        background-color: rgba(0, 0, 0, 0.50);
        zoom: 0.6;
    }

    .modal-23-gallery {
        padding: 0 10px;
    }

    .modal-23-gallery-list-item {
        width: 30.8%;
    }

    .modal-option-tab-wrap {
        overflow-x: auto;
        padding: auto 20px;
    }

    .modal-option-tab {
        flex-wrap: nowrap;
    }

    .modal-option {
        padding: 20px;
    }
}