.cus_img_box03 {
    width: 115px; /* 박스 크기 줄이기 */
    margin-bottom: 12px; /* 마진 줄이기 */
    padding: 10px; /* 패딩 줄이기 */
    border: 1px solid #eaeaea;
    border-radius: 8px; /* 라운드 크기 줄이기 */
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 줄이기 */
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    overflow: hidden;
}

/* 호버 시 박스 효과 */
.cus_img_box03:hover {
    transform: translateY(-4px); /* 호버 시 이동 효과 줄이기 */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* 그림자 효과 줄이기 */
}

/* 썸네일 스타일 */
.cus_img_box03 .thumb img {
    width: 100%;
    height: auto;
    border-radius: 6px; /* 라운드 크기 줄이기 */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* 썸네일 호버 시 효과 */
.cus_img_box03:hover .thumb img {
    transform: scale(1.05); /* 호버 시 이미지 크기 조금만 늘리기 */
    filter: brightness(1.1);
}

/* 정보 영역 스타일 */
.cus_img_box03 .info_area {
    padding-top: 6px; /* 텍스트 상단 여백 줄이기 */
    font-size: 11px; /* 글씨 크기 줄이기 */
    color: #333;
    text-align: left;
}

/* 정보 영역의 텍스트 스타일 */
.cus_img_box03 .info_area p {
    margin: 0;
    margin-bottom: 4px; /* 텍스트 간 간격 줄이기 */
    color: #333;
    font-size: 11px; /* 글씨 크기 줄이기 */
    line-height: 1.3;
}

/* 아이콘 스타일 */
.cus_img_box03 .info_area p i {
    margin-right: 0px; /* 아이콘 간격 줄이기 */
    color: #17a2b8;
}

/* 텍스트 호버 시 색상 변화 */
.cus_img_box03 .info_area p:hover {
    color: #17a2b8;
}

/* 반응형 디자인 */
@media (max-width: 600px) {
    .cus_img_box03 {
        width: 100%;
        padding: 8px; /* 작은 화면에서 패딩 더 줄이기 */
    }

    .cus_img_box03 .info_area p {
        font-size: 10px; /* 글씨 크기 더 줄이기 */
    }
}

.cus_img_box03 .top_area .rect {
    width: 94px;
}

.cus_img_box03 .top_area .rect .inner {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25); /* 배경색 투명도 줄이기 */
    border-radius: 8px; /* 라운드 크기 줄이기 */
    transition: background-color 0.3s ease;
}


/**
==========================================================================================
**/
.cus_play_box02 {
    position: relative;
    margin-bottom: 15px; /* 마진 줄이기 */
    padding: 12px; /* 패딩 줄이기 */
    border: 1px solid #eaeaea;
    border-radius: 12px; /* 테두리 라운드 줄이기 */
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: inline-block;
    width: auto;
    text-align: center;
    overflow: hidden;
}

/* 박스 호버 효과 */
.cus_play_box02:hover {
    transform: translateY(-5px); /* 호버 시 약간의 이동 효과 줄이기 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 그림자 효과도 살짝 줄이기 */
}

/* 닫기 버튼 스타일 */
.cus_play_box02 .close {
    position: absolute;
    top: 5px; /* 닫기 버튼 위치 조정 */
    right: 5px; /* 닫기 버튼 위치 조정 */
    font-size: 20px; /* 버튼 글씨 크기 줄이기 */
    color: #dc3545;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 4px; /* 버튼 크기 줄이기 */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.cus_play_box02 .close:hover {
    background-color: #dc3545;
    color: #ffffff;
    transform: rotate(45deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* 썸네일 영역 */
.cus_play_box02 .thumb {
    margin-bottom: 10px; /* 썸네일 마진 줄이기 */
    width: 100%;
    height: auto;
}

.cus_play_box02 .thumb .inner {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25); /* 배경색 투명도 조정 */
    border-radius: 10px; /* 테두리 라운드 줄이기 */
    transition: background-color 0.3s ease;
}

.cus_play_box02:hover .thumb .inner {
    background-color: #17a2b8;
}


.edit_main {
    width: 100%; /* 부모 크기에 맞게 설정 */
    height: 100%; /* 필요한 경우 고정 크기 설정 */
    position: relative;
    overflow: hidden; /* 확대 시 영역 밖으로 나가지 않도록 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit_main .editor {
    background: #fafafa;
}

/**
========
**/
/* 기본 박스 스타일 */
.cus_img_box_ksb {
    width: calc(33.33% - 15px); /* 한 줄에 3개가 나오도록 크기 설정 */
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 12px; /* 글씨 크기를 작게 설정 */
    position: relative;
    text-align: left;
    overflow: hidden;
}

/* 호버 시 박스 효과 */
.cus_img_box_ksb:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 새 아이콘 스타일 */
.cus_img_box_ksb .icon_new {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 썸네일 스타일 */
.cus_img_box_ksb .thumb img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* 썸네일 호버 시 효과 */
.cus_img_box_ksb:hover .thumb img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* 정보 영역 스타일 */
.cus_img_box_ksb .info_area {
    margin-top: 8px;
    font-size: 12px; /* 글씨 크기를 작게 설정 */
    color: #444;
    word-wrap: break-word; /* 텍스트가 잘리지 않도록 설정 */
}

/* 정보 리스트 스타일 */
.cus_img_box_ksb .info_area .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px; /* 간격을 좀 더 넓게 */
    word-wrap: break-word; /* 텍스트가 잘리지 않도록 설정 */
}

/* 정보 항목 타이틀 스타일 */
.cus_img_box_ksb .info_area .info .title {
    font-weight: 600;
    color: #777;
    max-width: 40%;
    text-align: left;
    font-size: 11px; /* 타이틀 글씨 크기 조금 더 작게 */
}

/* 정보 항목 설명 스타일 */
.cus_img_box_ksb .info_area .info .desc {
    font-weight: 400;
    color: #333;
    max-width: 55%;
    text-align: left;
    overflow-wrap: break-word; /* 텍스트가 잘리지 않도록 설정 */
    font-size: 11px; /* 설명 글씨 크기 작게 설정 */
}

/* 타입 정보 스타일 */
.cus_img_box_ksb .info_area .info .desc span {
    font-weight: 600;
}

/* 타입별 색상 */
.cus_img_box_ksb .info_area .info .desc .text-success {
    color: #28a745;
}

.cus_img_box_ksb .info_area .info .desc .text-primary {
    color: #007bff;
}

.cus_img_box_ksb .info_area .info .desc .text-info {
    color: #17a2b8;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .cus_img_box_ksb {
        width: calc(50% - 10px); /* 화면 크기가 작을 때 2개로 줄어듬 */
    }
}

@media (max-width: 480px) {
    .cus_img_box_ksb {
        width: 100%; /* 모바일에서 한 줄에 하나씩 표시 */
    }
}

/* 부모 컨테이너 스타일 */
.cus_img_box_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 항목 간의 간격을 동일하게 */
    gap: 20px; /* 항목 간의 간격 */
}

/* 각 이미지 박스 */
.cus_img_box03 {
    width: calc(50% - 10px); /* 2개의 항목을 한 줄에 배치, 간격을 고려하여 너비 설정 */
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    background: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden; /* 자식 요소가 박스를 넘지 않도록 */
    position: relative; /* 호버 효과를 위한 위치 설정 */
}

/* Hover 효과 */
.cus_img_box03:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* 이미지 크기 및 애니메이션 */
.cus_img_box03 .thumb img {
    width: 100%; /* 이미지를 박스 크기에 맞게 확장 */
    height: auto;
    transition: transform 0.3s ease;
}

/* Hover 시 이미지 확대 */
.cus_img_box03:hover .thumb img {
    transform: scale(1.05);
}

/* 정보 텍스트 */
.cus_img_box03 .info_area p {
    margin: 0;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px; /* 텍스트 크기 조정 */
    line-height: 1.5; /* 줄 간격 조정 */
}

/* 아이콘 마진 */
.cus_img_box03 .info_area p i {
    margin-right: 5px; /* 아이콘과 텍스트 간 간격 */
}

/* 반응형 레이아웃 */
@media (max-width: 768px) {
    .cus_img_box03 {
        width: calc(100% - 10px); /* 작은 화면에서는 한 줄에 1개씩 보이도록 */
    }
}


/**
===========================================================================
**/
.cus_play_box01 {
    position: relative;
    width: 150px; /* 박스 크기 설정 */
    padding: 15px;
    padding-bottom: 12px;
    border-radius: 12px;
    background-color: #f8f9fa;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin: 10px;
}

.cus_play_box01:hover {
    transform: translateY(-8px); /* 호버 시 이동 효과 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* 그림자 효과 강조 */
    transition: all 0.3s ease-in-out;
}

/* 닫기 버튼 스타일 */
.cus_play_box01 .close {
    z-index: 2;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
    color: #dc3545;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cus_play_box01 .close:hover {
    background-color: #dc3545;
    color: #ffffff;
    transform: rotate(45deg); /* 닫기 버튼 회전 */
}

.cus_play_box01 .thumb {
    width: 125px;
}

/* 썸네일 이미지 스타일 */
.cus_play_box01 .thumb img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cus_play_box01:hover .thumb img {
    transform: scale(1.1); /* 이미지 확대 효과 */
    filter: brightness(1.2); /* 이미지 밝기 증가 */
}

/* 텍스트 스타일 */
.cus_play_box01 .txt {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.cus_play_box01 .txt:hover {
    color: #007bff; /* 호버 시 색상 변경 */
}

/* 번호 스타일 */
.cus_play_box01 .number {
    z-index: 2;
    position: absolute;
    top: -5px;
    left: 5px;
    background-color: #007bff;
    color: #ffffff;
    font-size: 16px;
    width: 30px; /* 원 크기 설정 */
    height: 30px; /* 원 크기 설정 */
    line-height: 30px; /* 글자가 세로로 중앙 정렬되도록 설정 */
    border-radius: 50%; /* 원 모양 */
    text-align: center; /* 글자가 가로로 중앙 정렬되도록 설정 */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 반응형 디자인 */
@media (max-width: 600px) {
    .cus_play_box01 {
        width: 100%;
        padding: 10px;
    }

    .cus_play_box01 .txt {
        font-size: 12px;
    }

    .cus_play_box01 .number {
        font-size: 14px;
    }
}

.cus_img_box_kiosk {
    width: 112px; /* 박스 크기 줄이기 */
    margin-bottom: 12px; /* 마진 줄이기 */
    padding: 10px; /* 패딩 줄이기 */
    border: 1px solid #eaeaea;
    border-radius: 8px; /* 라운드 크기 줄이기 */
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 줄이기 */
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    overflow: hidden;
}

/* 호버 시 박스 효과 */
.cus_img_box_kiosk:hover {
    transform: translateY(-4px); /* 호버 시 이동 효과 줄이기 */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* 그림자 효과 줄이기 */
}

/* 썸네일 스타일 */
.cus_img_box_kiosk .thumb img {
    width: 100%;
    height: auto;
    border-radius: 6px; /* 라운드 크기 줄이기 */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* 썸네일 호버 시 효과 */
.cus_img_box_kiosk:hover .thumb img {
    transform: scale(1.05); /* 호버 시 이미지 크기 조금만 늘리기 */
    filter: brightness(1.1);
}

/* 정보 영역 스타일 */
.cus_img_box_kiosk .info_area {
    padding-top: 0px; /* 텍스트 상단 여백 줄이기 */
    font-size: 11px; /* 글씨 크기 줄이기 */
    color: #333;
}

/* 정보 영역의 텍스트 스타일 */
.cus_img_box_kiosk .info_area p {
    margin: 0;
    margin-bottom: 4px; /* 텍스트 간 간격 줄이기 */
    color: #333;
    font-size: 11px; /* 글씨 크기 줄이기 */
    line-height: 1.3;
}

/* 아이콘 스타일 */
.cus_img_box_kiosk .info_area p i {
    margin-right: 4px; /* 아이콘 간격 줄이기 */
    color: #17a2b8;
}

/* 텍스트 호버 시 색상 변화 */
.cus_img_box_kiosk .info_area p:hover {
    color: #17a2b8;
}

/* 반응형 디자인 */
@media (max-width: 600px) {
    .cus_img_box_kiosk {
        width: 100%;
        padding: 8px; /* 작은 화면에서 패딩 더 줄이기 */
    }

    .cus_img_box_kiosk .info_area p {
        font-size: 10px; /* 글씨 크기 더 줄이기 */
    }
}

.cus_img_box_kiosk .top_area .rect {
    width: 94px;
}

.cus_img_box_kiosk .top_area .rect .inner {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25); /* 배경색 투명도 줄이기 */
    border-radius: 8px; /* 라운드 크기 줄이기 */
    transition: background-color 0.3s ease;
}


/**
==========================================================================================
**/
.cus_play_box02 {
    position: relative;
    margin-bottom: 15px; /* 마진 줄이기 */
    padding: 12px; /* 패딩 줄이기 */
    padding-right: 30px;
    border: 1px solid #eaeaea;
    border-radius: 12px; /* 테두리 라운드 줄이기 */
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: inline-block;
    width: auto;
    text-align: left;
    overflow: hidden;
}

/* 박스 호버 효과 */
.cus_play_box02:hover {
    transform: translateY(-5px); /* 호버 시 약간의 이동 효과 줄이기 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 그림자 효과도 살짝 줄이기 */
}

/* 닫기 버튼 스타일 */
.cus_play_box02 .close {
    position: absolute;
    top: 8px; /* 닫기 버튼 위치 조정 */
    right: 5px; /* 닫기 버튼 위치 조정 */
    font-size: 20px; /* 버튼 글씨 크기 줄이기 */
    color: #dc3545;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 4px; /* 버튼 크기 줄이기 */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.cus_play_box02 .close:hover {
    background-color: #dc3545;
    color: #ffffff;
    transform: rotate(45deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* 썸네일 영역 */
.cus_play_box02 .thumb {
    margin-bottom: 10px; /* 썸네일 마진 줄이기 */
    width: 100%;
    height: auto;
}

.cus_play_box02 .thumb .inner {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25); /* 배경색 투명도 조정 */
    border-radius: 10px; /* 테두리 라운드 줄이기 */
    transition: background-color 0.3s ease;
}

.cus_play_box02:hover .thumb .inner {
    background-color: #17a2b8;
}

/* 텍스트 스타일 */
.cus_play_box02 .txt {
    font-size: 14px; /* 텍스트 크기 줄이기 */
    font-weight: 500; /* 글씨 두께 줄이기 */
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px; /* 간격 조금 줄이기 */
    transition: color 0.3s ease;
}

.cus_play_box02 .txt:hover {
    color: #17a2b8;
}

/* 반응형: 작은 화면에서 스타일 적용 */
@media (max-width: 600px) {
    .cus_play_box02 {
        width: 100%;
        padding: 12px; /* 작은 화면에서 패딩 줄이기 */
    }

    .cus_play_box02 .txt {
        font-size: 14px; /* 글씨 크기 더 줄이기 */
    }
}

.cus_img_box01 {
    position: relative;
    margin-bottom: 15px; /* 마진 줄이기 */
    padding: 5px; /* 패딩 줄이기 */
    border: 1px solid #eaeaea;
    border-radius: 12px; /* 테두리 라운드 줄이기 */
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: inline-block;
    /*width: auto;*/
    width: 220px;
    text-align: left;
    overflow: hidden;
}

.cus_img_box01 .top_area .thumb {
    width: 165px;
}

/* 박스 호버 효과 */
.cus_img_box01:hover {
    transform: translateY(-5px); /* 호버 시 약간의 이동 효과 줄이기 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 그림자 효과도 살짝 줄이기 */
}

.cus_img_box_ksb .top_area .thumb img {
    width: 120px;
}

.cus_img_box_ksb .top_area .thumb .icon_new {
    width: 50px;
    z-index: 2;
}


.cus_img_box03 .top_area .thumb .icon_new {
    position: absolute;
    width: 32px;
    z-index: 2;
}


.cus_img_box03 .icon_new {
    position: absolute;
    top: 8px;
    left: 8px;
    /* background-color: rgba(255, 255, 255, 0.8); */
    border-radius: 50%;
    padding: 1px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.app-brand-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0px 20px 0px;
}

.menu-vertical, .menu-vertical .menu-block, .menu-vertical .menu-inner > .menu-item, .menu-vertical .menu-inner > .menu-header {
    width: 13.25rem;
}

.cus_img_box01 .info_area .info .title {
    width: 93px;
}