.detail .contents-wrapper {
    max-width: 1280px;
    width: 90%;
    margin: auto;
}

.detail .contents-wrapper .content {
    padding-bottom: 3.75rem;
    border-bottom: solid 1px #F0F0F0;
}

.detail .contents-wrapper .content:last-child {
    padding-bottom: 140px;
}

.detail .contents-wrapper .content.title {
    padding: 40px 0 1.25rem 0;
}

.detail .contents-wrapper .content p {
    font-size: 1rem;
}

.detail .contents-wrapper .content li {
    font-size: 1rem;
}

.detail .content.title .tag {
    display: flex;
    align-items: center;
    margin-top: 40px;
    gap:10px;
    flex-wrap: wrap;
}

.detail .content.title .tag a {
    display: block;
    padding: 10px 1.25rem;
    line-height: 90%;
    color: #00225D;
    border: solid 1px #00225D;
    border-radius: 50px;
    font-size: 1rem;
}

.detail .contents-wrapper .breadcrumb {
    color:#AEAEAE;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: right;
    margin-top: 40px;
}

.detail .contents-wrapper .breadcrumb .current {
    color:#777;
    font-weight: 700;
}

.detail .contents-wrapper .content .title-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.detail .contents-wrapper .content .title-container h2 {
    margin:0;
}

.detail .contents-wrapper .content .title-container > span {
    color:#777;
}

.detail .contents-wrapper .content .title-container h5 {
    color:#00225D;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    flex-grow: 1;
    width: 100%;
    margin-bottom: 10px;
}

.detail .contents-wrapper .content h1 {
    font-size: 1.825rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.detail .contents-wrapper .content h1 span {
    background-color: #f4f4f4;
    border-radius: 50px;
    padding:8px 14px;
    color:#222;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 1.25rem;
}

.detail .contents-wrapper .content .title-container ul {
    display: flex;
    gap:10px;
}

.detail .contents-wrapper .content .title-container ul li button {
    display: block;
    width: 55px;
    height: 55px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    border:solid 1px #e8e8e8;
    text-indent: -9999px;
}

.detail .contents-wrapper .content .title-container ul li button:hover {
    background-color: #e8e8e8;
}

.detail .contents-wrapper .content .title-container ul li button.url {
    background-image: url(../images/ic_url.svg);
}

.detail .contents-wrapper .content .title-container ul li button.bookmark {
    background-image: url(../images/ic_bookmark.svg);
}

.detail .contents-wrapper .content .title-container ul li button.add {
    background-image: url(../images/ic_add.svg);
}


.detail .contents-wrapper .content .pagination {
    display: flex;
    margin:auto;
    margin-top: 62px;
    justify-content: center;
    gap:1.25rem;
    align-items: center;
}

.detail .contents-wrapper .content .pagination a {
    display: block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color:#AEAEAE;
}

.detail .contents-wrapper .content .pagination a.active {
    color:#00225D;
    font-weight: 700;
}

.detail .contents-wrapper .content .pagination .top {
    text-indent: -9999px;
    background-image: url(../images/ic_page_top.svg);
}

.detail .contents-wrapper .content .pagination .prev {
    text-indent: -9999px;
    background-image: url(../images/ic_page_prev.svg);
}

.detail .contents-wrapper .content .pagination .next {
    text-indent: -9999px;
    background-image: url(../images/ic_page_next.svg);
}

.detail .contents-wrapper .content .pagination .end {
    text-indent: -9999px;
    background-image: url(../images/ic_page_end.svg);
}

.detail .contents-search {
    padding: 1.25rem 9.3%;
    display: grid;
    grid-template-columns: 1fr 134px;
    gap:1.25rem;
    height: 6.25rem;
    background-color: #F5F6F9;
    border-radius: 15px;
    margin-top: 3.75rem;
}

.detail .contents-search:has(> .select:nth-child(1)):not(:has(> .select:nth-child(2))) {
    grid-template-columns: 170px 1fr 134px;
}

.detail .contents-search:has(> .select:nth-child(2)):not(:has(> .select:nth-child(3))) {
    grid-template-columns: 170px 170px 1fr 134px;
}

.detail .contents-search:has(> .select:nth-child(5)):not(:has(> .select:nth-child(6))) {
    grid-template-columns: 150px 105px 105px 105px 105px 1fr 134px;
}


.detail .contents-search input {
    border: none;
    background-color: #fff;
    padding: 0 1.25rem;
    border-radius: 65px;
    font-size: 1rem;
}
.detail .contents-search button {
    background-color: #000;
    color:#fff;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    border-radius: 50px;
}

.detail .contents-search .select {
    position: relative;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
  }
  
/* 실제 select 박스 */
.detail .contents-search .select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border-radius: 999px;          /* 알약 모양 */
    background-color: #fff;
    border:none;
    font-size: 1rem;
    font-weight: 700;
    color: #222;

    width: 100%;
    padding: 0 38px 0 1.25rem;        /* 오른쪽은 화살표 자리 */
    line-height: 3.75rem;

    padding-right: 52px !important;
    cursor: pointer;
}

/* 포커스 스타일 (선택 사항) */
.detail .contents-search .select select:focus {
    outline: none;
}

/* 기본 브라우저 화살표 숨기기 (IE 포함) */
.detail .contents-search .select select::-ms-expand {
    display: none;
}

/* 커스텀 화살표 */
.detail .contents-search .select::after {
    content: "";
    position: absolute;
    right: calc(13% + 14px);
    top: calc(50% - 3px);
    width: 14px;
    height: 7px;
    background: url(../images/ic_arrow_down.svg) no-repeat white center;
    pointer-events: none;   /* 클릭이 select로 전달되도록 */
}

.detail .contents-search .select:has(select[disabled="disabled"])::after {
    transform: rotate(-90deg);
}


/* DataTable Filter */
.detail .dataTables_filter div,
.detail .dataTables_filter:not(:has( > div)) {
    padding: 1.25rem 9.3%;
    display: grid;
    grid-template-columns: 1fr 134px;
    gap:1.25rem;
    height: 6.25rem;
    background-color: #F5F6F9;
    border-radius: 15px;
    margin-top: 3.75rem;
}

.detail .dataTables_filter:has(> select:nth-child(1)):not(:has(> select:nth-child(2))) {
    grid-template-columns: 170px 1fr 134px;
}

.detail .dataTables_filter:has(> select:nth-child(2)):not(:has(> select:nth-child(3))) {
    grid-template-columns: 170px 170px 1fr 134px;
}

.detail .dataTables_filter div:has(> select:nth-child(1)):not(:has(> select:nth-child(2))) {
    grid-template-columns: 170px 1fr 134px;
}

.detail .dataTables_filter div:has(> select:nth-child(2)):not(:has(> select:nth-child(3))) {
    grid-template-columns: 170px 170px 1fr 134px;
}

.detail .dataTables_filter input {
    border: none;
    background-color: #fff;
    padding: 0 1.25rem;
    border-radius: 65px;
    font-size: 1rem;
    height: 100%;
    width: 100%;
}
.detail .dataTables_filter button {
    background-color: #000;
    color:#fff;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    border-radius: 50px;
}

.detail .dataTables_filter .select {
    position: relative;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
  }
  
/* 실제 select 박스 */
.detail .dataTables_filter select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border-radius: 999px;          /* 알약 모양 */
    background-color: #fff;
    border:none;
    font-size: 1rem;
    font-weight: 700;
    color: #222;

    width: 100%;
    padding: 0 38px 0 1.25rem;        /* 오른쪽은 화살표 자리 */
    line-height: 3.75rem;

    padding-right: 52px !important;
    cursor: pointer;
    background: url(../images/ic_arrow_down.svg) no-repeat white right 14px center;
}

/* 포커스 스타일 (선택 사항) */
.detail .dataTables_filter select:focus {
    outline: none;
}

/* 기본 브라우저 화살표 숨기기 (IE 포함) */
.detail .dataTables_filter select::-ms-expand {
    display: none;
}



.detail .category {
    display: flex;
    background-color: #F9F9F9;
    border-radius: 15px;
    padding: 10px;
    margin-top: 40px;
}

.detail .category li {
    flex-grow: 1;
}

.detail .category li a {
    display: block;
    width: 100%;
    color: #777;
    padding: 10px 0;
    text-align: center;
    background: url(../images/splitter.png) no-repeat transparent center right;
}

.detail .category li:last-child a {
    background: none;
}

.detail .category li a:hover {
    color: #000;
    font-weight: 700;
}
.detail .category li a.active {
    color: #fff;
    background-color: #000;
    border-radius: 15px;
    font-weight: 700;
    background-image:none;
}

.detail .sub-category {
    display: flex;
    gap:10px;
    justify-content: center;
    margin-top: 40px;
}

.detail .sub-category li {
    display: flex;
    align-items: center;
    gap:10px;
}

.detail .sub-category li::after {
    display: block;
    content:"·";
    font-size: 1rem;
    color:#AEAEAE;
    width: 10px;
    text-align: center;
}

.detail .sub-category li:last-child::after {
    display: none;
}

.detail .sub-category a {
    color:#AEAEAE;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: underline;
}

.detail .sub-category a:hover {
    color:#222;
}

.detail .sub-category a.active {
    color:#000;
}

.detail .stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}
.detail .stat li {
    color:#777;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* 래퍼 */
.detail .stat .select {
    position: relative;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
  }
  
/* 실제 select 박스 */
.detail .stat .select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;

    font-size: var(--fontsize-body4, 16px);
    color: #777;

    width: 100%;
    cursor: pointer;
    text-align: center;
}

/* 포커스 스타일 (선택 사항) */
.detail .stat .select select:focus {
    outline: none;
    border-color: #999;
}

/* 기본 브라우저 화살표 숨기기 (IE 포함) */
.detail .stat .select select::-ms-expand {
    display: none;
}

/* 커스텀 화살표 */
.detail .stat .select::after {
    content: "";
    position: absolute;
    right: 6px;
    top: calc(50% - 5px);
    width: 14px;
    height: 8px;
    background: url(../images/ic_arrow_down_sm.svg) no-repeat transparent center;
    pointer-events: none;   /* 클릭이 select로 전달되도록 */
}


.detail .result {
    margin-top: 1.25rem;
}

.detail .result:has(.card) {
    display: grid;
    column-gap: 10px;
    row-gap: 1.25rem;
    grid-template-columns: repeat(4, 1fr);
}

.detail .card {
    border-radius: 15px;
    border: solid 1px #e8e8e8;
    display: grid;
    grid-template-rows: auto 1fr auto;
    cursor: pointer;
}

.detail .list.lrg .card {
    border:none;
}

.detail .card .img-container {
    overflow: hidden;
    background: url(../images/ic_blank_img.svg) no-repeat #F9F9F9 center;
    aspect-ratio: 1;
    border-radius: 15px 15px 0 0;
}

.detail .card .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail .list.lrg .card .img-container  {
    aspect-ratio: auto;
    ;
}
.detail .list.lrg .card .img-container img {
    width: 100%;
    aspect-ratio: auto;
}

.detail .card:not(:has(.text-container)) .img-container {
    border-radius: 15px;
}

.detail .card .text-container {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.detail .card .text-container dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    row-gap: 10px;
    margin-top: 1.25rem;
}

.detail .card .text-container dl dt {
    color:#777;
    line-height: 100%;
}

.detail .card .text-container dl dd{
    line-height: 100%;
}

.detail .card span {
    font-size: 0.875rem;
    font-weight: 700;
    color: #00225D;
}

.detail .video .card h3 span {
    font-size: 1rem;
    color:#777;
    font-weight: 400;
}

.detail .card h3 {
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 187.5% */
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;  
    flex-grow: 1;
}

.detail .card .text-container:has(p) h3 {
    height: 3.75rem;
    -webkit-line-clamp: 2;
}

.detail  .card p {
    color:#777;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
    margin-top: 10px;
}

.detail  .card ul {
    list-style: disc;
    list-style-position: inside;
}

.detail  .card ul li {
    line-height: 120%;
}

.detail .audio .card {
    border:none;
    display: grid;
    grid-template-columns: 312px 1fr 160px;
    column-gap: 40px;
    align-items: center;
}

.detail .audio .card > div:nth-child(3) {
    display: flex;
    flex-direction: column;
    gap:1.25rem;
}


.detail .audio .card img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    position: relative;
    border-radius: 15px;
}

.detail .audio .card img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:url(../images/ic_blank_img.svg) no-repeat #F9F9F9 center;
    border-radius: 15px;
}

.detail .audio .card .text-container h3 {
    font-size:1.5rem;
}

.detail .audio .card .text-container dl {
    grid-template-columns: auto 1fr auto 1fr;
    column-gap: 1.25rem;
} 
.detail .audio .card .text-container dl dt {
    color:#222;
    font-weight: 700;
}

.detail .audio .card .text-container dl.addtional {
    background-color: #F9F9F9;
    padding: 1.25rem;
    border-radius: 15px;
}

.detail .list.overlay .card {
    position: relative;   
    overflow: hidden;
}

.detail .list.overlay .card .text-container {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    border-radius: 15px;
    transform: translateY(101%);
    transition: all 0.3s ease;
    cursor: pointer;
}

.detail .list.overlay .card:hover .text-container {
    transform: translateY(0);
}

.detail .list.overlay .card .text-container * {
    color:#fff;
}

.detail .list.overlay .card .text-container h3 {
    text-overflow: clip;
    display: block;
    font-size: 1.25rem;
}

.detail .result:has(.not-found) {
    display: grid;
    column-gap: 10px;
    row-gap: 1.25rem;
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: 62px;
    padding-bottom: 140px;
}

.detail .result .not-found {
    text-align: center;
}
.detail .result .not-found h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-top: 50px;
}

.detail .result .not-found p {
    margin-top: 32px;
    color:#777;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 30px; /* 150% */
}

.detail .result .list .item {
    border-bottom:solid 1px #F0F0F0;
    padding-bottom: 3.75rem;
    margin-top: 3.75rem;
}

.detail .result .list .item:first-child {
    margin-top: 0;
}

.detail .result .list .item h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.detail .result .list .item dl {
    margin-top: 10px;
}
.detail .result .list .item dl.flexy {
    display: grid;
    grid-template-columns: 3.75rem 3.75rem  3.75rem 3.75rem;
    gap:1.25rem;
    margin-top: 1.25rem;
}

.detail .result .list .item dl dt {
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; 
}

.detail .result .list .item dl dd {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; 
}

.detail .result a.more {
    display: inline-block;
    color:#AEAEAE;
    font-size:1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
    text-decoration: underline;
    margin-top: 1.25rem;
    background: url(../images/ic_arrow_down_sm_gray.svg) no-repeat transparent center right;
    background-size: 12px 12px;
    padding-right: 22px;
}

.detail .result a.less {
    display: inline-block;
    color:#AEAEAE;
    font-size:1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
    text-decoration: underline;
    margin-top: 1.25rem;
    background: url(../images/ic_arrow_up_sm_gray.svg) no-repeat transparent center right;
    background-size: 12px 12px;
    padding-right: 22px;
}

.detail .result a.fold {
    display: inline-block;
    color:#AEAEAE;
    font-size:1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
    text-decoration: underline;
    margin-top: 1.25rem;
    background: url(../images/ic_arrow_up_sm_gray.svg) no-repeat transparent center right;
    background-size: 12px 12px;
    padding-right: 22px;
}


.detail h3.title {
    font-size: 1.25rem;
    font-weight: 700;
}

.detail .gusool-container {
    border:solid 1px #E8E8E8;
    border-radius: 15px;
    padding: 30px;
}

.detail .gusool-container h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.detail .gusool-container dl {
    padding-top: 30px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.25rem;
}

.detail .gusool-container dl dt {
    color:#777;    
}

.detail .gusool-container dl.table {
    border:none;
    display: grid;
    grid-template-columns: 1fr ;
    column-gap:30px;
    row-gap: 8px;
    padding-top: 3.75rem;
    border-top: solid 1px #e8e8e8;
}

.detail .gusool-container dl.table dt {
    font-size: 1rem;
    font-weight: 700;
    color:#222;
}

.detail .gusool-container dl.table dd a {
    color:#1D74FF;
}

.detail .gusool-container dl a.lock {
    color:#777;
    background: url(../images/ic_lock_sm.svg) no-repeat transparent left center;
    padding-left: 22px;
    background-size: 18px 18px;
}

.detail .gusool-container dl dd:has(.lock) {
    color:#777;
}

.detail .gallery > h3 {
    margin-top: 3.75rem;
    font-size: 1.25rem;
}

.detail .gallery .title-container {
    margin-top: 3.75rem;
}

.detail .gallery .title-container a.more {
    color:#777;
    padding: 10px 1.25rem;
    border:solid 1px #777;
    border-radius: 40px;
    line-height: 100%;
    display: flex;
    align-items: center;
    gap:4px;
    font-size: 1rem;
}

.detail .gallery .title-container a.more::after {
    content: "";
    display: block;
    width:1rem;
    height:1rem;
    background: url(../images/ic_more_777.svg) no-repeat transparent center top -2px;
    background-size:1rem 16px;
}

.detail .gallery .sub-filter ul {
    display: flex;
    gap:10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.detail .gallery .sub-filter ul li::after {
    content: "·"; 
    font-size: 1rem;
    display: inline-block;
    color: #AEAEAE;
    margin-left: 10px;
}

.detail .gallery .sub-filter ul li:last-child:after {
    content: "";
}

.detail .gallery .sub-filter ul li a {
    font-size: 1rem;
    color: #AEAEAE;
    font-weight: 700;
    text-decoration: underline;
}

.detail .gallery .sub-filter ul li a.active {
    color:#222;
}

.detail .gallery .list  {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
    margin-top: 10px;
    font-size: 1rem;
}

.detail .gallery .list.lrg {
    grid-template-columns: repeat(3, 1fr);
}

.detail .gallery .list.text-list  {
    grid-template-columns: repeat(3, 1fr);
}

.detail .gallery .list.audio {
    grid-template-columns: 1fr;
    row-gap: 3.75rem;
}

.detail .gallery .list.folkpaint .card {
    position: relative;
}

.detail .gallery .list.folkpaint .card .img-container {
    aspect-ratio: 1;
}

.detail .gallery .list.folkpaint .card .img-container img {
    width: 100%;
    object-fit: contain;
}

.detail .gallery .list.folkpaint .card .download {
    position: absolute;
    top:1.25rem;
    right: 1.25rem;
    background-color: #fff;

}

.detail .gallery .card .img-container {
    position: relative;
    overflow: hidden;
}
.detail .gallery .card .img-container img {
    object-fit: contain;
    aspect-ratio: 1;
    width: 100%;
    position: relative;
}

.detail .gallery .video .card .img-container img {
    object-fit: cover;
}

.detail .gallery .card .img-container img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:url(../images/ic_blank_img.svg) no-repeat #F9F9F9 center;
    border-radius: 15px;
}

.detail .gallery .card .img-container.pic::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url(../images/ic_pic.svg) no-repeat #00225D center;
    position: absolute;
    z-index: 99;
    top:8px;
    right: 8px;
    border-radius: 10px;
}

.detail .gallery .card .img-container.mov::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url(../images/ic_mov.svg) no-repeat #00225D center;
    position: absolute;
    z-index: 99;
    top:8px;
    right: 8px;
    border-radius: 10px;
}

.detail .gallery .card .img-container.doc::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url(../images/ic_doc.svg) no-repeat #00225D center;
    position: absolute;
    z-index: 99;
    top:8px;
    right: 8px;
    border-radius: 10px;
}

.detail .gallery .card .img-container.music::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url(../images/ic_music.svg) no-repeat #00225D center;
    position: absolute;
    z-index: 99;
    top:8px;
    right: 8px;
    border-radius: 10px;
}

.detail .gallery .card .img-container.lock::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/ic_lock.svg) no-repeat #F9F9F9 center;
    position: absolute;
    z-index: 99;
    top:0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: 15px 15px 0 0;
}

.detail .gallery .video .card .img-container span {
    position: absolute;
    bottom:16px;
    right:1rem;
    border-radius: 5px;
    background-color: #00225D;
    color:#fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    display: flex;
    padding: 5px 9px;
    align-items: center;
    justify-content: center;
}

.detail .gallery .card .img-container:hover .hover {
    transform: translateY(0);
}

.detail .gallery .card .img-container .hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);

    font-size: 1.5rem;
    font-weight: 700;
    color:#fff;
    position: absolute;
    z-index: 99;
    top:0;
    left: 0px;
    right: 0px;
    border-radius: 15px 15px 0 0;
    white-space: pre;
    transform: translateY(101%);
    transition: all 0.3s ease;
    padding: 0 1.25rem;
}

.detail .gallery .card .img-container .hover h4 {
    font-size:1.5rem;
    color:#fff;
    width: 100%;
    word-break: break-all;
    text-align: center;
    white-space: break-spaces;
}

.detail .gallery .card .img-container .hover p {
    font-size: 1rem;
    color:#fff;
    width: 100%;
    word-break: break-all;
    text-align: center;
    white-space: break-spaces;
}

.detail .gallery .card .img-container .hover li {
    font-size:1rem;
    color:#fff;
    line-height: 100%;
}



.detail .gallery .card .img-container.img-container.lock div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.6;
    font-size: 1.5rem;
    font-weight: 700;
    color:#fff;
    position: absolute;
    z-index: 99;
    top:0;
    left: 0px;
    right: 0px;
    line-height: 145%;
    border-radius: 15px 15px 0 0;
    transform: translateY(101%);
    transition: all 0.3s ease;
}

.detail .gallery .card .img-container.lock:hover div {
    transform: translateY(0);
}


.detail .gallery .card .button-container {
    display: flex;
    gap:10px;
    padding: 1.25rem;
    padding-top: 0;
}

.detail .gallery .card .button-container a {
    padding: 14px 25px;
    border: solid 1px #222;
    border-radius: 50px;
    flex-grow: 1;
    text-align: center;
    font-size: 1.125rem;
}

.detail .gallery .card .button-container a.lock {
    padding-left: 36px;
    background: url(../images/ic_lock_sm.svg) no-repeat transparent left 8px center;
    color:#777
}




.detail .gallery .list.text-list .title-container {
    margin: 0;
}

.detail .gallery .list.text-list dl {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    column-gap:1.25rem;
    row-gap: 10px;
    margin-top: 10px;
}

.detail .gallery .list.text-list dl dt {
    font-size: 1rem;
    color:#777;
    height: 1.25rem;
}
.detail .gallery .list.text-list dl dd {
    height: 1.25rem;
}

.detail .gallery .list.text-list.two-part {
    grid-template-columns: 1fr 1fr;
}

.detail .gallery .list.text-list.two-part .text-container {
    padding: 30px;
}

.detail .gallery .list.text-list.two-part dl {
    display: grid;
    grid-template-columns: 3.75rem 1fr 3.75rem 1fr;
    column-gap:1.25rem;
    row-gap: 10px;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}


.detail .summary {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr minmax(240px, 414px);
    justify-content: space-between;
    gap:40px;
}

.detail .summary.one-table {
    align-items: flex-start;
}

.detail .summary img {
    border-radius: 15px;
    position: relative;
    width: 100%;
    object-fit: contain;
    max-height: 320px;
    min-height: 200px;
}

.detail .summary img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0; /* 배경색으로 아이콘을 가림 */
    border-radius: 15px;
}

.detail .summary .overlay {
    overflow: hidden;
    position: relative;
}

.detail .summary .overlay .hover {
    content:attr(data);

    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9;

    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(101%);
    transition: all 0.3s ease;
}

.detail .summary .overlay .hover h3 {
    color:#fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.detail .summary .overlay:hover .hover {
    transform: translateY(0);
}

.detail .summary .summary-content dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    column-gap:1.25rem;
    row-gap: 10px;
    margin-top: 30px;
}

.detail .summary .summary-content dl.single-line {
    grid-template-columns: 1fr;
}

.detail .summary .summary-content dl dt {
    font-size: 1rem;
    font-weight: 700;
    line-height: 30px
}

.detail .summary .summary-content dl dd {
    font-size: 1rem;
}

.detail .summary .summary-content dl dt.refer {
    color:#AEAEAE;
    font-size: 0.875rem;
}
.detail .summary .summary-content dl dt.refer + dd {
    color:#AEAEAE;
    font-size: 0.875rem;
}

.detail .summary .summary-content dl a {
    color:#1D74FF;
    text-decoration: underline;
}


.detail .summary .summary-content dl a.lock {
    color:#777;
    background: url(../images/ic_lock_sm.svg) no-repeat transparent left center;
    padding-left: 22px;
    background-size: 18px 18px;
}

a.popup {
    position: relative;
}

.popup:hover::before {
    content: attr(data-text);
    border-radius: 8px;
    padding:1rem;
    background-color: #222;
    color:#fff;
    font-size: 0.875rem;
    text-decoration: none;
    white-space:pre;
    line-height: 70%;
    text-align: center;
    position: absolute;
    top:0;
    left: 0;
    transform: translateY(-110%);
}

.popup:hover::after {
    content: "";
    position: absolute;
    left: 50%;
    top:-7px;
    transform: translateX(-50%);
    
    /* CSS 삼각형 트릭 */
    border-width: 6px;
    border-style: solid;
    border-color: #000 transparent transparent transparent; /* 위쪽만 검은색 */
    
    z-index: 10;
}

.detail .summary .summary-content dl a.button {
    text-decoration: none;
    color:#777;
    font-size: 0.875rem;
    padding: 6px 14px;
    border-radius: 40px;
    border:solid 1px #e8e8e8;
    margin-left: 10px;
}

.detail section hr {
    margin-top: 3.75rem;
    border: none;
    height: 1px;
    background-color: #e8e8e8;
}

.detail .table {
    margin-top: 40px;
}
.detail .table .thead {
    display: grid;
    grid-template-columns: minmax(70px,130px) 1fr minmax(70px,130px) minmax(70px,130px) minmax(70px,130px) minmax(70px,130px) minmax(70px,130px);
    border-top: 2px solid #000;
    border-bottom: 1px solid #e8e8e8;
    height: 70px;
}

.detail .table .thead li {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail .table .row {
    display: grid;
    grid-template-columns: minmax(70px,130px) 1fr minmax(70px,130px) minmax(70px,130px) minmax(70px,130px) minmax(70px,130px) minmax(70px,130px);
    border-bottom: 1px solid #e8e8e8;
    height: 70px;
}   

.detail .table.directories .thead {
    grid-template-columns: minmax(120px,260px) minmax(70px,120px) minmax(70px,120px) 1fr;
}

.detail .table.directories .row {
    grid-template-columns: minmax(120px,260px) minmax(70px,120px) minmax(70px,120px) 1fr;
}

.detail .table.directories .row {
    height: auto;
}

.detail .table.directories .row li {
    flex-direction: column;
    text-align: center;
    padding: 15px 0;
}

.detail .table.directories .row li a {
    color: #1D74FF;
    text-decoration: underline;
}

.detail .table .row li {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail .table .row li span.lock {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 44px;
    border: 1px solid #e8e8e8;
    background: url(../images/ic_lock_sm.svg) no-repeat transparent center;
    background-size: 24px 24px;
    text-indent: -9999px;
}

.detail .table .row li span.on {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 44px;
    border: 1px solid #e8e8e8;
    background: url(../images/ic_music.svg) no-repeat transparent center;
    background-size: 24px 24px;
    text-indent: -9999px;
}

.detail button.slt-play-music {
    display: flex;
    padding: 14px 25px;
    font-size:1.125rem;
    font-weight: 400;
    color:#00225D;
    border:solid 1px #00225D;
    border-radius: 50px;
    margin:auto;
    margin-top: 40px;
    align-items: center;
    gap:10px;
}
.detail button.slt-play-music::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: url(../images/ic_more_225D.svg) no-repeat transparent center top -4px;
}

.detail a.outlink {
    color:#777;
    padding: 10px 1.25rem;
    border:solid 1px #777;
    border-radius: 40px;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    gap:4px;
    margin-top: 40px;
    font-size: 1rem;
}


.detail .contents-wrapper .content .title-container a.outlink {
    margin:0;
}


.detail a.outlink::after {
    content: "";
    display: block;
    width:1rem;
    height:1rem;
    background: url(../images/ic_more_777.svg) no-repeat transparent center top -2px;
    background-size:1rem 16px;
}

.detail .summary .summary-content > a.lock {
    color:#777;
    display: inline-block;
    padding: 10px 1.25rem;
    border:solid 1px #777;
    border-radius: 40px;
    margin-top: 40px;
    line-height: 100%;
    background: url(../images/ic_lock_sm.svg) no-repeat transparent left 16px center;
    padding-left: 38px;
    background-size: 18px 18px;
}

.detail .summary .image-container a.lock {
    color:#777;
    display: inline-block;
    padding: 10px 1.25rem;
    border:solid 1px #777;
    border-radius: 40px;
    margin-top: 40px;
    line-height: 100%;
    background: url(../images/ic_lock_sm.svg) no-repeat transparent left 16px center;
    padding-left: 38px;
    background-size: 18px 18px;
}

.detail a.download {
    color:#777;
    padding: 10px 1.25rem;
    border:solid 1px #777;
    border-radius: 40px;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    gap:4px;
    font-size: 1rem;
    font-weight: 400;
}

.detail a.download::after {
    content: "";
    display: block;
    width:1rem;
    height:1rem;
    background: url(../images/ic_download.svg) no-repeat transparent center top -2px;
    background-size:1rem 16px;
}

.detail a.save {
    color:#777;
    padding: 10px 1.25rem;
    border:solid 1px #777;
    border-radius: 40px;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    gap:4px;
    font-size: 0.875rem;
}

.detail a.save::after {
    content: "";
    display: block;
    width:1rem;
    height:1rem;
    background: url(../images/ic_save_gray.svg) no-repeat transparent center top -2px;
    background-size:1rem 16px;
}

.detail button.outlink.black {
    color:#fff;
    padding: 10px 25px;
    background-color: #222;
    border-radius: 40px;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    gap:4px;
    font-size: 1.125rem;
    justify-content: center;
}


.detail .black {
    color:#fff;
    padding: 10px 25px;
    border-radius: 40px;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    gap:4px;
    font-size: 1.125rem;
    position: relative;
    background-color: #222;
    justify-content: center;
}


.detail .black.lock {
    background: url(../images/ic_lock_sm_white.svg) no-repeat #222 left 12px center;
    padding-left: 36px;
    background-size: 18px 18px;
    justify-content: center;
}


.detail button.outlink.black::after {
    content: "";
    display: block;
    width:1rem;
    height:1rem;
    background: url(../images/ic_more_white.svg) no-repeat transparent center top -2px;
    background-size:1rem 16px;
}


.detail .list.one-table {
    grid-template-columns: 1fr;
    row-gap: 3.75rem;
}
.detail .list.one-table .item {
    display: grid;
    grid-template-columns: minmax(120px, 312px) 1fr;
    column-gap: 40px;
    align-items: center;
}

.detail .list.one-table .item img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    border-radius: 15px;
}

.detail .list.one-table .item h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.detail .list.one-table .item dl {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    column-gap: 1.25rem;
    row-gap: 10px;
}

.detail .list.one-table .item dl dt {
    font-size: 1rem;
    font-weight: 700;
}

.detail .list.one-table .item dl dd {
    font-size: 1rem;
}

.detail .inline-popup {
    background-color: #F5F6F9;
    border-radius: 15px 0 15px 0;
    padding: 30px;
    margin-top: 40px;
}

.detail .inline-popup h4 {
    font-size: 1.25rem;
    font-weight: 700;
}
.detail .inline-popup p {
    color:#222;
    font-size:1.125rem;
    margin-top: 10px;
}

.detail .inline-popup div {
    text-align: right;
    margin-top: 30px;
}

.detail .inline-popup div a {
    font-size: 1rem;
    color:#AEAEAE;
    margin-right: 30px;
    border-bottom: solid 1px #aeaeae;
}   

.detail .inline-popup div a.close {
    padding-right: 22px;
    background: url(../images/ic_close.svg) no-repeat transparent right calc(50% - 2px);
}

.detail .inline-popup div a:hover{
    font-weight: 700;
}

.detail .inline-popup div a:last-child {
    margin-right: 0;
}


.detail .detail-filter ul {
    display: grid;
    grid-template-columns: 6.25rem 1fr;
    column-gap: 10px;
    align-items: center;
}

.detail .detail-filter ul li:first-child {
    font-size:1rem;
    font-weight: 700;
}

.detail .detail-filter ul li:has(input[type="radio"]) {
    display: flex;
    flex-wrap: wrap;
    gap:1.25rem;
}

.detail .detail-filter li input[type="radio"] {
    display: none;
}

.detail .detail-filter li label {
    display: flex;
    align-items: center;
    gap:10px;
}
.detail .detail-filter li label::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/ic_radio.svg) no-repeat transparent center;
}

.detail .detail-filter li label:has(input[type="radio"]:checked)::before {
    background: url(../images/ic_radio_on.svg) no-repeat transparent center;
}

.detail .detail-filter li.text-input-container {
    display: flex;
    gap:16px;
    align-items: center;
}

.detail .detail-filter li.text-input-container button {
    background-color: #000;
    color: #fff;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    border-radius: 50px;
    width: 84px;
    height: 48px;
}

.detail .detail-filter li .text-input {
    padding: 0 1.25rem;
    height: 48px;
    font-size:1rem;
    border-radius: 50px;
}

.detail .detail-filter .contents-search  {
    padding: 0;
    height: 3.75rem;
    background-color: transparent;
    margin:0;
    grid-template-columns: minmax(200px, 60%) 134px;
    column-gap: 1.25rem;
}

.detail .detail-filter .contents-search input {
    border: solid 1px #e8e8e8;
}

.detail .collection-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    flex-wrap: wrap ;
}

.detail .collection-list li a {
    display: flex;
    flex-direction: column;
    gap:10px;
    text-align: center;
    font-weight: 700;
}

.detail .collection-list img {
    aspect-ratio: 1;
    border-radius: 15px;
    object-fit: cover;
}

.detail .collection-list li a.active img {
    border:solid 2px #222;
    filter: brightness(0.8);
}

.detail .content > .box:has(img) {
    border-radius: 15px;
    background-color: #F9F9F9;
    display: grid;
    grid-template-columns: 314px 1fr ;
    margin-top: 30px;
}

.detail .content > .box img {
    border-radius: 15px 0 0 15px;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.detail .content > .box .text-container {
    padding: 30px;
}

/* 각 소개 페이지 */
.introduce iframe {
    width: 100%;
    margin: 0 auto;
    display: block;
    margin-bottom: 3rem;
    height: 42.7rem;
    padding: 0 32px;
    margin-top: 3.75rem;
    border: none;
}

.introduce a.outlink {
    color:#00225D;
    border-color: #00225D;
    font-size: 1.125rem;

}

.introduce h2 {
    font-size: 1.25rem;
    margin-top: 40px;
}

.introduce h3 {
    font-size: 1rem;
    font-weight: 700;
}

.introduce .box {
    border-radius: 15px;
    background-color: #F9F9F9;
    padding: 30px;
}

.introduce ul.dot > li {
    position: relative;
    padding-left: 1.25rem;
}
.introduce ul.dot > li::before {
    content: "•"; /* The bullet character */
    position: absolute; /* Position the bullet independently */
    left: 4px;
}

.introduce dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    row-gap: 10px;
}

.introduce dl dt {
    font-weight: 700;
    font-size: 1rem;
}

.introduce dl dd {
    font-size: 1rem;
}

.introduce .ul_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:60px
}

.introduce .ul_list > li {
    border:solid 1px #e8e8e8;
    border-radius: 15px;
    padding: 30px;
}
.introduce .ul_list > li h4 {
    font-size: 1.25rem;
    text-align: center;
}

.introduce .ul_list .intro_list {
    display: flex;
    gap:10px;
    margin-top: 1.25rem;
}

.introduce .ul_list:has(.dl) li {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}

.introduce .ul_list .intro_list li {
    text-align: center;
    font-weight: 700;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    flex-grow: 1;
}

.introduce .ul_list .intro_list .img {
    width: 100%;
    height: 285px;    
    aspect-ratio: 1/1.5;
    background-size: auto 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    margin-bottom: 1.25rem;
}

.introduce .ul_list .intro_list .img.horizon {
    aspect-ratio:1/0.5;
}


.introduce ul.dl li {
    margin-bottom: 1.25rem;
}

.introduce ul.dl span {
    font-weight: 700;

}

.introduce .text-container {
    display: flex;
    gap:40px;
}

.introduce .text-container.v-center {
    align-items: center;
}

.introduce .text-container p {
    flex-grow: 1;
}

.introduce .text-container img {
    object-fit: contain;
}

.introduce img.full {
    width: 100%;
}

.introduce .media-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap:40px;
}

.introduce .media-container h4 {
    font-size: 1.25rem;
    font-weight: 700;
}
.introduce .media-container .item {
    height: 480px;
    background-color: #000;
    position: relative;
}

.introduce .media-container .item iframe {
    margin:0;
    padding: 0;
}

.introduce .media-container .item span {
    display: block;
    text-align: right;
    margin-top: 1.25rem;
    font-size: 1rem;
    color:#222;
}

.introduce .video-event  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:40px;
}

.introduce .video-event .box {
    border-radius: 0 0 15px 15px;
}

.introduce .video-event img {
    border-radius: 15px 15px 0 0 ;
}
.introduce .video-event .box h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 125%;
}

.introduce .video-event .box a {
    margin-top: 10px;
    text-decoration: underline;
}

ul.one-table-introduce  {
    display: flex;
    justify-content: space-around;
    margin-top: 3.75rem;
    gap:40px;
}

ul.one-table-introduce img {
    display: block;
    margin-top: 30px;
}

.want_step {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    margin-top: 44px;
    border-radius: 15px;
    border:solid 1px #e8e8e8;
    padding: 30px;
    gap:68px;
}

.want_step.small {
    width: 100%;
}

.want_step li {
    flex: 1;
    position: relative;
}


.want_step li .step {
    background-color: #00225D;
    color: white;
    height: 25px;
    padding: 0 9px;
    line-height: 28px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    border-radius: 5px;
}

.want_step li h3 {
    margin-top: 24px;
    font-size: 1.25rem;
    font-weight: bold;
}

.want_step li p {
    color: #666666;
    font-size:1rem;
    padding-top: 4px;
}

.want_step li .imgbox {
    display: block;
    margin-top: 24px;
    border: 1px solid #efefef;
    background-color: #fff;
    position: relative;
    height: 230px;
}

.want_step2 li .imgbox {
    height: 133px;
}

.want_step li .imgbox .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-position-y: 50%;
}

.want_step li .imgbox:after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    top: calc(50% - 14px);
    right: -48px;
    border-radius: 50%;
    background: url('data:image/svg+xml;utf8,<svg width="18" height="33" viewBox="0 0 18 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.41406 31.4141L16.4141 16.4141L1.41406 1.41406" stroke="%23AEAEAE" stroke-width="2" stroke-linecap="square"/></svg>') no-repeat transparent center ;
}

.want_step li:last-child .imgbox:after {
    display: none;
}

.want_step .btn {
    width: 100%;
    display: block;
    padding: 4px 0;
    text-align: center;
    margin-top:1rem;
}

.want_step .btn.blue {
    background-color: #0265b1;
    color: #ffffff;
}

.tbl_data {
    width: 100%;
}

.tbl_data th {
    height: 68px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    text-align: center;
    font-weight: 700;
}

.tbl_data td {
    height: 68px;
    background: #fff;
    border: 1px solid #e8e8e8;
    text-align: center;
}

.statistics.tbl_data {
    border-collapse: collapse;
    font-size: 13px;
}

.statistics.tbl_data th {
    height: 34px;
    border: 1px solid #808080;
    padding: 0;
}

.statistics.tbl_data td {
    height: 34px;
    border: 1px solid #808080;
    min-width: 80px;
}

.m_tbl_data {
    display: none;
}

.tbl_wrap .tbl_tit_wrap {
    position: relative;
    margin-bottom: 24px;
    line-height: 28px;
}

.tbl_wrap .tbl_tit_wrap .right {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 28px;
}

.tbl_wrap .tbl_tit_wrap .cnt {
    font-size:1rem;
}

.tbl_wrap .tbl_tit_img_list {
    margin-bottom: 0;
}

.tbl_wrap .tbl_tit_img_list .right {
    position: static;
    text-align: right;
}

.tbl_wrap .tbl_tit_img_list .right .image_view_list {
    background: url('../images/handle_image_list_btn.png') no-repeat;
    width: 165px;
    height: 44px;
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 15px;
    background-size: contain
}

.tbl_wrap .tbl_tit_img_list .right .image_view_list.pdf_none {
    display: none !important
}

.media-container .video-js {
    width: 100%;
    height: 100%;
}

.media-container .video-js .vjs-big-play-button {
    display: none;
}

.media-container #btn_play {
    background: url(../images/space/la_play.png) no-repeat 50%;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    border: none;
    text-indent: -9999px;
    background-size: contain;
    margin-top: -100px;
    margin-left: -100px;
    z-index: 99;
}


#datatable {
    margin-top: 10px;
}

#datatable .dataTables_empty {
    text-align: center !important;
}

#datatable.table_list tr td {
    text-align: center;
}

#datatable.table_list tr td:nth-child(2) {
    background-color: #fafafa;
    text-align: left;
}

#datatable.table_list tr.even td {
    background-color: #fff;
}

#datatable {
    border-top: solid 2px #222;
    width: 100%;
    margin-top: 50px;
}

#datatable thead {
    visibility: hidden;
    display: none;
}

#datatable thead.show {
    visibility: visible;
    display: block;
}

#datatable td {
    padding: 24px 40px;
    background-color: #fafafa;
    border-bottom: solid 1px #eaeaea;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

#datatable td:nth-child(2) {
    background-color: white;
}


#datatable td dl {
    display: flex;
    flex-flow: wrap;
    align-items: center;
}

#datatable td dd {
    font-size: 0.875rem;
}

#datatable td dt {
    font-size: 1rem;
    margin-left: 24px;
}

#datatable td span.highlight, #datatable td dd span.highlight, #datatable td dt span.highlight {
    color: #c9402b;
}

#datatable .dataTables_empty {
    font-size: 24px;
}

#datatable td .icon {
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    margin: auto;
    vertical-align: middle;
}

#datatable td .icon.music {
    background-image: url(../images/icon_music.png);
}

#datatable td .icon.movie {
    background-image: url(../images/icon_movie.png);
}

#datatable td .icon.paper {
    background-image: url(../images/icon_paper.png);
}

#datatable td .icon.text {
    background-image: url(../images/icon_text.png);
}

#datatable td .icon.lock {
    background-image: url(../images/ic_lock.svg);
    background-size: 22px;
}

#datatable td .icon.empty {
    background-image: url(../images/icon_empty.png);
}

#datatable.table_list thead {
    display: table-header-group;
    visibility: visible;
}

#datatable.table_list thead th {
    max-width: 80px;
    font-size: 1rem;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid #eaeaea;
    padding: 1.25rem 0px;
}

#datatable.table_list td {
    font-size: 1rem;
    font-weight: 600;
}

#datatable .pc_none {
    display: none;
}

#datatable td a {
    color: #1D74FF;
    text-decoration: underline;
}


.table input[type="checkbox"] {
    /* 기본 스타일 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 24px;
    height: 24px;
    background: url(../images/ic_check.svg) no-repeat transparent center;
    outline: none;
    cursor: pointer;
}

.table input[type="checkbox"]:checked {
    background: url(../images/ic_check_selected.svg) no-repeat transparent center;
  }

  .dataTables_info {
    margin-top:1rem;
    text-align: right;
  }

.dataTables_paginate {
    display: flex;
    margin:auto;
    margin-top: 62px;
    justify-content: center;
    gap:1.25rem;
    align-items: center;
}

.dataTables_paginate span {
    display: flex;
    gap:1.25rem;
    align-items: center;
    justify-content: center;
}

.dataTables_paginate a {
    display: block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color:#AEAEAE;
}

.dataTables_paginate a.previous {
    background: url('../images/ic_page_prev.svg') no-repeat center center;
    text-indent: -9999px;
 }

.dataTables_paginate a.next {
    background: url('../images/ic_page_next.svg') no-repeat center center;
    text-indent: -9999px;
}

.dataTables_paginate a.first {
    background: url('../images/ic_page_top.svg') no-repeat center center;
    text-indent: -9999px;
    
}

.dataTables_paginate a.last {
    background: url('../images/ic_page_end.svg') no-repeat center center;
    text-indent: -9999px;

}

.dataTables_paginate a.current {
    color: #00225D;
    font-weight: 700;
}


/* 영상, 음원 */
.layer_pop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    overflow: hidden;
    left: 0;
    display: none;
}

.layer_pop.open {
    position: static;
    width: auto;
    height: auto;
    display: block;
}

.layer_mask {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200;
}

.layer_pop.open .layer_mask {
    display: block;
}

.layer_pop .layer_head {
    display: none;
}

.layer_cont {
    position: absolute;
    top: 180px;
    right: 12px;
    left: 12px;
    width: 1120px;
    height: 720px;
    margin: 0 auto;
    background: #fff;
    z-index: 201;
}

.layer_cont .btn_close {
    position: absolute;
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url('../images/btn_allmenu_close.png') no-repeat center center #00225D;
    background-size: 20px;
    text-indent: -999px;
    overflow: hidden;
    cursor: pointer;
}

.layer_cont .media_detail {
    overflow: hidden;
}

.layer_cont .media_detail .imgbox {
    position: relative;
    float: left;
    width: 522px;
    height: 608px;
    margin: 56px 0 0 64px;
    background: #d8d8d8;
}

.layer_cont .media_detail .imgbox .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.layer_cont .media_detail .txtbox {
    position: relative;
    float: left;
    width: 434px;
    height: 608px;
    margin: 56px 0 0 40px;
}

.layer_cont .media_detail .txtbox .tit {
    padding: 32px 0 24px;
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -1px;
}

.layer_cont .media_detail .txtbox dl {
    margin-top: 14px;
    font-size: 16px;
    line-height: 20px;
    overflow: hidden;
}

.layer_cont .media_detail .txtbox dl dt {
    float: left;
    color: #666;
    font-weight: 400;
}

.layer_cont .media_detail .txtbox dl dd {
    padding-left: 90px;
    font-weight: 700;
}

.video_detail {
    padding: 56px 64px;
}

.video_wrap {
    position: relative;
}

.video_wrap > img {
    width: 100%;
}

.video_wrap .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/bg_mask.png') repeat 0 0;
}

.video_wrap .layer .btn_play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: url('../images/btn_play.png') no-repeat center center/100%;
}

#audio_layerPop .layer_head {
    background-color: #222d36;
}

#audio_layerPop .layer_cont {
    max-width: 744px;
    border-radius: 15px;
}

#audio_layerPop .layer_cont .btn_close {
    background-color: #222d36;
    border: 0;
}


#audio_layerPop .audio_wrap {
    background-color: #495a68;
    padding: 40px;
    color: white;
    display: grid;
    grid-template-areas:    "info info"
                            "control progress" ;
    grid-template-columns: minmax(100px, 192px) 1fr;
    column-gap: 30px;
    row-gap: 20px;
}


#audio_layerPop .audio_wrap .info_layer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: stretch;
    clear: both;
    width: 100%;
    grid-area: info;
}

#audio_layerPop .audio_wrap .cover {
    max-width: 192px;
    flex: 2.8;
    background-color: #fff;
    background-image: url(../images/ic_audio_bg.svg);
    border-radius: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 170px;
}

#audio_layerPop .audio_wrap ul {
    margin-left: 24px;
    flex: 6;
}

#audio_layerPop .audio_wrap ul li {
    font-size: 16px;
    letter-spacing: -0.4px;
    color: #fff;
}

#audio_layerPop .audio_wrap ul h3 {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

#audio_layerPop .audio_wrap ul li:nth-child(2) {
    margin-top: 24px;
}

#audio_layerPop .audio_wrap ul li:nth-child(3) {
    margin-top: 16px;
}

#audio_layerPop .audio_wrap .control_layer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    align-items: center;
    grid-area: control;
}

#audio_layerPop .audio_wrap .control_layer a {
    display: block;
    text-indent: -9999px;
}

#audio_layerPop .audio_wrap .control_layer .btn_prev {
    width: 14px;
    height: 14px;
    background: url(../images/prev.png) no-repeat center center/auto 100%;
}

#audio_layerPop .audio_wrap .control_layer .btn_next {
    width: 14px;
    height: 14px;
    background: url(../images/next.png) no-repeat center center/auto 100%;
}

#audio_layerPop .audio_wrap .control_layer .btn_play {
    width: 22px;
    height: 19px;
    background: url(../images/play.png) no-repeat center center/auto 100%;
}

#audio_layerPop .audio_wrap .control_layer .btn_play.pause {
    background-image: url(../images/pause.png)
}

#audio_layerPop .audio_wrap .progress_layer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    font-size: 14px;
    align-items: center;
    grid-area: progress;
}

#audio_layerPop .audio_wrap .progress_layer  span {
    color:#fff;
}

#audio_layerPop .audio_wrap .progress_layer .progress {
    background-color: white;
    height: 4px;
    width: 70%;
    position: relative;
    padding: 0 4px;
}

#audio_layerPop .audio_wrap .progress_layer .progress .current {
    position: absolute;
    top: -10px;
    left: -4%;
    width: 24px;
    height: 24px;
    background: url(../images/picker.png) no-repeat center center/auto 100%;
}

#audio_layerPop .audio_wrap:after {
    content: "";
    clear: both;
    display: block;
}

#audio_layerPop .audio_list_wrap {
    padding: 40px;
    position: relative;
}

#audio_layerPop .audio_list_wrap ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    border-radius: 15px;
    background-color: #F9F9F9;
}


#audio_layerPop .audio_list_wrap li > a {
    display: block;
    width: 100%;
    font-size: 1rem;
    color: #777;
    line-height: 1.5;
    letter-spacing: -0.4px;
    text-align: center;
    padding: 10px;
}

#audio_layerPop .audio_list_wrap li > a.active {
    color: #fff;
    background-color: #222;
    border-radius: 10px;
}
#audio_layerPop .audio_list_wrap li > a:hover {
    color: #00225D;
    font-weight: bold;
}

#audio_layerPop .audio_list_wrap li dl {
    z-index: 0;
    position: absolute;
    display: grid;
    left: 0;
    top: 70%;
    width: 100%;
    box-sizing: border-box;
    padding: 24px 40px;
    max-height: 210px;
    overflow-y: auto;
    grid-template-columns: 1fr 150px;
    gap:20px;
}

#audio_layerPop .audio_list_wrap li dl a:hover {
    text-decoration: underline;
}

#audio_layerPop .audio_list_wrap li dt {
    font-size: 16px;
    line-height: 1.63;
    color: #222222;
}

#audio_layerPop .audio_list_wrap li dd {
    font-size: 16px;
    line-height: 1.63;
    color: #999999;
}

#audio_layerPop .audio_list_wrap li button {
    border: solid 1px #222222;
    color: #222222;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 16px;
    background-color: #ffffff;
    position: absolute;
    right: 40px;
    bottom: -260px;
}

.video-js .vjs-big-play-button {
    display: none !important;
}