/*########## 상설전시 ##########*/
.sub_permanent { padding-left: 5.7vw; padding-right: 5.7vw; transition: all .4s; }
.sub_permanent .viewCont { position: relative; display: flex; margin-top: 6.1vh; transition: all .4s; }
.sub_permanent .left { width: 26.56vw; transition: all .4s; }
.sub_permanent .titleWrap h3.title { position: relative; margin-bottom: 3vh; padding-left: 2.6vw; line-height: 1.4; font-size: 1.56vw; color: #0e0e0e; font-weight: 700; transition: all .4s; }
.sub_permanent .titleWrap h3.title:before { content: ''; position: absolute; top: 50%; left: 0; width: 1.66vw; aspect-ratio: 16 / 11; background: url(/html/onlinemuseum/resources/images/sub/ico-title-arrow.svg) no-repeat center; background-size: 100%; transform: translateY(-50%); transition: all .4s; }
.sub_permanent .titleWrap p { font-size: 1vw; color: #5e5e5e; transition: all .4s; }

.sub_permanent .floorWrap { margin-top: 6.63vh; }
.sub_permanent .floorWrap > ul > li { position: relative; padding: 1vw; padding-left: 1.56vw; }
.sub_permanent .floorWrap > ul > li + li { border-top: .05vw solid #ccc; }
.sub_permanent .floorWrap h5 button { display: flex; align-items: center; padding: 1vw 0; width: 100%; font-size: 1vw; color: #8e8e8e; font-weight: 700; background: none; }
.sub_permanent .floorWrap h5 button i { position: relative; width: 3.33vw; font-size: 1.25vw; text-align: left; }
.sub_permanent .floorWrap h5 button i:after { content: ''; position: absolute; top: 50%; right: 0; width: .07vw; height: 1.14vw; background: #ccc; transform: translate(-50%, -50%); }
.sub_permanent .floorWrap h5 button span { flex: 1; position: relative; padding-left: 1.25vw; text-align: left; }
.sub_permanent .floorWrap h5 button span:after { content: ''; position: absolute; top: 50%; right: 0; width: 1.25vw; aspect-ratio: 1; background: url(/html/onlinemuseum/resources/images/sub/permanent/ico-floor.svg) no-repeat center; background-size: 100%; transform: translateY(-50%); }
.sub_permanent .floorWrap .txt { display: none; margin-top: 1.25vw; }
.sub_permanent .floorWrap .txt p { font-size: .93vw; color: #5e5e5e; word-break: keep-all; }
.sub_permanent .floorWrap .txt ul { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 1vw; }
.sub_permanent .floorWrap .txt ul li { width: calc(100% / 3 - (32px / 3)); }
.sub_permanent .floorWrap .txt a { display: flex; align-items: center; justify-content: center; height: 2.9vw; line-height: 1.3; font-size: .83vw; color: #fafafa; font-weight: 700; text-align: center; border-radius: .26vw; background: linear-gradient(30deg, #646464 0%, #020202 25%, #646464 95%); text-transform: uppercase; }

.sub_permanent .floorWrap > ul > li.on:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: .2vw solid transparent; border-image: linear-gradient(135deg, rgba(255, 254, 248, .8) 0%, rgba(155, 155, 155, .4) 20%, rgba(255, 255, 255, .8) 50%, rgba(155, 155, 155, .4) 100%) 1; z-index: -1; }
.sub_permanent .floorWrap > ul > li.on h5 button span:after { background-image: url(/html/onlinemuseum/resources/images/sub/permanent/ico-floor-on.svg); }


.sub_permanent .mapWrap { flex: 1; position: relative; padding-bottom: 13vw; width: 100%; }
.sub_permanent .mapWrap .img { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 2.08vw; padding: 0 1.45vw; }
.sub_permanent .mapWrap .img img { width: 100%; }
.sub_permanent .mapWrap [class*=floor_].on .img { z-index: 9; }

.sub_permanent .mapWrap [class*=floor_]:not(.on) .img { position: absolute; top: 3.12vw; width: 100%; filter: blur(4px); opacity: .3; z-index: 0; }
.sub_permanent .mapWrap [class*=floor_]:not(.on) ~ [class*=floor_]:not(.on) .img { top: 8.34vw; z-index: -1; }

.sub_permanent .mapWrap [class*=floor_] ul { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; transform: translateX(-50%); }
.sub_permanent .mapWrap .floor_2 ul { max-width: 58.22vw; }
.sub_permanent .mapWrap .floor_1 ul { max-width: 58.22vw; }
.sub_permanent .mapWrap .floor_B1 ul { max-width: 59.63vw; }
.sub_permanent .mapWrap [class*=floor_].on ul { opacity: 1; }

.sub_permanent .mapWrap [class*=dot_] { position: absolute; }
.sub_permanent .mapWrap [class*=dot_] a { display: block; }
.sub_permanent .mapWrap [class*=dot_].rotate a { transform: rotate(-30deg); cursor: default; }

.sub_permanent .mapWrap .floor_2 .dot_1 { top: 24%; left: 37%; }
.sub_permanent .mapWrap .floor_2 .dot_2 { top: 66%; left: 22%; }
.sub_permanent .mapWrap .floor_2 .dot_3 { top: 12%; left: 50%; }

.sub_permanent .mapWrap .floor_1 .dot_1 { top: 41%; left: 29%; }
.sub_permanent .mapWrap .floor_1 .dot_2 { top: 50%; left: 55.5%; }
.sub_permanent .mapWrap .floor_1 .dot_3 { top: 27%; left: 42.5%; }
.sub_permanent .mapWrap .floor_1 .dot_4 { top: 35%; right: 12%; }

.sub_permanent .mapWrap .floor_B1 .dot_1 { top: 47%; left: 27%; }
.sub_permanent .mapWrap .floor_B1 .dot_2 { top: 29%; left: 39%; }
.sub_permanent .mapWrap .floor_B1 .dot_3 { top: 41%; left: 83%; }
.sub_permanent .mapWrap .floor_B1 .dot_4 { top: 80%; left: 32%; }
.sub_permanent .mapWrap .floor_B1 .dot_5 { top: 63%; left: 62%; }

.sub_permanent .mapWrap [class*=dot_] > a { font-size: .93vw; color: #0e0e0e; font-weight: 600; }
.sub_permanent .mapWrap [class*=dot_] > a span { position: relative; display: block; margin: 0 auto .31vw; width: .62vw; aspect-ratio: 1; background: #616161; border-radius: 50%; transition: background-color .3s; }
.sub_permanent .mapWrap [class*=dot_] > a span:before { content: ''; position: absolute; top: 50%; left: 50%; width: calc(100% + .52vw); aspect-ratio: 1; background: rgba(97, 97, 97, .2); border-radius: 50%; transform: translate(-50%, -50%); animation: dotBlink 1.8s linear infinite; transition: background-color .3s; }
.sub_permanent .mapWrap [class*=dot_].on > a span { background: #E85656; }
.sub_permanent .mapWrap [class*=dot_].on > a span:before { background: rgba(232, 86, 86, .2); }


.sub_permanent .mapWrap .cont { position: absolute; top: 50%; left: calc(100% + 1.66vw); display: none; align-items: flex-start; padding: 1.56vw; width: 27.08vw; border-radius: .2vw; transform: translateY(-50%); overflow: hidden; z-index: 9; }
.sub_permanent .mapWrap .cont.left { left: auto; right: calc(100% + 32px); }
.sub_permanent .mapWrap .cont:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid transparent; border-image: linear-gradient(135deg, rgba(0, 0, 0, .75) 0%, rgba(155, 155, 155, .4) 20%, rgba(255, 255, 255, .8) 50%, rgba(0, 0, 0, .4) 100%) 1; background: linear-gradient(135deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .3)); backdrop-filter: blur(6px); z-index: -1; }
.sub_permanent .mapWrap .cont .viewImg { width: 195px; aspect-ratio: 1; }
.sub_permanent .mapWrap .cont .viewImg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sub_permanent .mapWrap .cont .txt { flex: 1; display: flex; flex-direction: column; padding: 4px 0 4px 20px; }
.sub_permanent .mapWrap .cont .txt h6 { margin-bottom: 12px; font-size: 14px; color: #c6b68e; font-weight: 800; }
.sub_permanent .mapWrap .cont .txt p { margin-bottom: 16px; font-size: 15px; color: #fff; }
.sub_permanent .mapWrap .cont .txt a { margin-top: auto; width: fit-content; font-size: 14px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.sub_permanent .mapWrap .cont button { position: absolute; top: 18px; right: 20px; width: 30px; aspect-ratio: 1; font-size: 0; background: none; }
.sub_permanent .mapWrap .cont button:before,
.sub_permanent .mapWrap .cont button:after { content: ''; position: absolute; top: 14px; left: 6px; width: 60%; height: 2px; border-radius: 1000px; background: #fff; }
.sub_permanent .mapWrap .cont button:before { transform: rotate(45deg); }
.sub_permanent .mapWrap .cont button:after { transform: rotate(-45deg); }



@media (max-width: 1920px) {
    .sub_permanent { padding-left: 80px; padding-right: 80px; }
    .sub_permanent .viewCont { margin-top: 40px; }
    .sub_permanent .left { width: 460px; }
    .sub_permanent .titleWrap h3.title { margin-bottom: 24px; padding-left: 44px; font-size: 28px; }
    .sub_permanent .titleWrap h3.title:before { width: 28px; }
    .sub_permanent .titleWrap p { font-size: 18px; }

    .sub_permanent .floorWrap { margin-top: 50px; }
    .sub_permanent .floorWrap > ul > li { padding: 20px 0; }
    .sub_permanent .floorWrap > ul > li + li { border-top-width: 1px; }
    .sub_permanent .floorWrap h5 button { padding: 16px 20px; padding-left: 30px; font-size: 20px; }
    .sub_permanent .floorWrap h5 button i { width: 64px; font-size: 24px; }
    .sub_permanent .floorWrap h5 button i:after { width: 1px; height: 22px; }
    .sub_permanent .floorWrap h5 button span { padding-left: 24px; }
    .sub_permanent .floorWrap h5 button span:after { width: 24px; }
    .sub_permanent .floorWrap .txt { margin-top: 24px; padding: 0 20px 0 30px; }
    .sub_permanent .floorWrap .txt p { font-size: 17px; }
    .sub_permanent .floorWrap .txt ul { margin-top: 20px; margin-bottom: 10px; }
    .sub_permanent .floorWrap .txt a { height: 54px; font-size: 15px; border-radius: 5px; }

    .sub_permanent .floorWrap > ul > li.on:before { border-width: 4px; }


    .sub_permanent .mapWrap { padding-bottom: 250px; }
    .sub_permanent .mapWrap .img { margin-top: 40px; padding: 0 28px; }

    .sub_permanent .mapWrap [class*=floor_]:not(.on) .img { top: 60px; }
    .sub_permanent .mapWrap [class*=floor_]:not(.on) ~ [class*=floor_]:not(.on) .img { top: 160px; }

    .sub_permanent .mapWrap .floor_2 ul { max-width: 1118px; }
    .sub_permanent .mapWrap .floor_1 ul { max-width: 1118px; }
    .sub_permanent .mapWrap .floor_B1 ul { max-width: 1145px; }

    .sub_permanent .mapWrap .floor_2 .dot_1 { left: 40%; }
    .sub_permanent .mapWrap .floor_2 .dot_2 { left: 24%; }

    .sub_permanent .mapWrap .floor_1 .dot_1 { left: 31%; }
    .sub_permanent .mapWrap .floor_1 .dot_2 { left: 55%; }

    .sub_permanent .mapWrap .floor_B1 .dot_1 { left: 29%; }
    .sub_permanent .mapWrap .floor_B1 .dot_3 { left: 81%; }

    .sub_permanent .mapWrap [class*=dot_] > a { font-size: 17px; }
    .sub_permanent .mapWrap [class*=dot_].rotate > a { font-size: 16px; }
    .sub_permanent .mapWrap [class*=dot_] > a span { margin: 0 auto 6px; width: 12px; }
    .sub_permanent .mapWrap [class*=dot_] > a span:before { width: calc(100% + 10px); }


    .sub_permanent .mapWrap .cont { left: calc(100% + 32px); padding: 30px; width: 520px; border-radius: 4px; }
    .sub_permanent .mapWrap .cont.left { right: calc(100% + 32px); }
    .sub_permanent .mapWrap .cont:before { border-width: 4px; }
    .sub_permanent .mapWrap .cont .viewImg { width: 195px; }
    .sub_permanent .mapWrap .cont .txt { padding: 4px 0 4px 20px; }
    .sub_permanent .mapWrap .cont .txt h6 {margin-bottom: 12px; font-size: 13px; }
    .sub_permanent .mapWrap .cont .txt p { font-size: 16px; }
    .sub_permanent .mapWrap .cont .txt a { font-size: 14px; text-underline-offset: 4px; }
    .sub_permanent .mapWrap .cont button { top: 18px; right: 20px; width: 30px; }
    .sub_permanent .mapWrap .cont button:before,
    .sub_permanent .mapWrap .cont button:after { top: 14px; left: 6px; height: 2px; }
}
@media (max-width: 1700px) {
    .sub_permanent .mapWrap .floor_2 .dot_2 { left: 28%; }

    .sub_permanent .mapWrap .floor_B1 .dot_3 { left: 79%; }
}
@media (max-width: 1600px) {
    .sub_permanent { padding-left: 60px; padding-right: 60px; }
    .sub_permanent .viewCont { margin-top: 20px; }
    .sub_permanent .left { width: 420px; }
    .sub_permanent .titleWrap h3.title { padding-left: 36px; font-size: 26px; }
    .sub_permanent .titleWrap h3.title:before { top: calc(50% - 1px); width: 24px; }
    .sub_permanent .titleWrap p { font-size: 16px; }

    .sub_permanent .floorWrap { margin-top: 40px; }
    .sub_permanent .floorWrap > ul > li { padding: 10px 0; }
    .sub_permanent .floorWrap h5 button { padding: 10px 24px; padding-left: 28px; }
    .sub_permanent .floorWrap h5 button i { padding-right: 20px; font-size: 22px; }
    .sub_permanent .floorWrap h5 button i:after { height: 18px; }
    .sub_permanent .floorWrap h5 button span { padding-left: 20px; font-size: 18px; }
    .sub_permanent .floorWrap h5 button span:after { width: 22px; }
    .sub_permanent .floorWrap .txt { margin-top: 20px; padding: 0 20px 0 28px; }
    .sub_permanent .floorWrap .txt p { font-size: 15px; }
    .sub_permanent .floorWrap .txt ul { gap: 10px 12px; }
    .sub_permanent .floorWrap .txt ul li { width: calc(100% / 3 - (24px / 3)); }
    .sub_permanent .floorWrap .txt a { height: 46px; font-size: 14px; }
}
@media (max-width: 1400px) {
    .sub_permanent { padding-left: 40px; padding-right: 40px; }
    .sub_permanent .left { width: 400px; }
    .sub_permanent .titleWrap h3.title { padding-left: 30px; font-size: 24px; }
    .sub_permanent .titleWrap h3.title:before { width: 20px; }
    .sub_permanent .titleWrap p { font-size: 16px; word-break: keep-all; }
    .sub_permanent .titleWrap p br { display: none; }

    .sub_permanent .floorWrap { margin-top: 30px; }
    .sub_permanent .floorWrap h5 button i { padding-right: 20px; font-size: 20px; }
    .sub_permanent .floorWrap .txt p { font-size: 15px; }
    .sub_permanent .floorWrap .txt a { height: 44px; }

    .sub_permanent .mapWrap [class*=dot_] > a { font-size: 16px; }
}
@media (max-width: 1200px) {
    .sub_permanent { padding-left: 0; padding-right: 0; }
    .sub_permanent .viewCont { display: block; padding-bottom: 60px; }
    .sub_permanent .left { width: 100%; }
    .sub_permanent .titleWrap { padding: 0 40px; }

    .sub_permanent .floorWrap { padding: 0 40px; width: 100%; z-index: 99; }
    .sub_permanent .floorWrap .txt { display: none !important; }

    .sub_permanent .mapWrap { padding-bottom: 0; overflow: auto; }
    .sub_permanent .mapWrap [class*=floor_] { min-width: 800px; }
    .sub_permanent .mapWrap [class*=floor_]:not(.on) .img { display: none; }

    .sub_permanent .mapWrap .cont { left: calc(100% + 16px); padding: 24px; width: 480px; }
    .sub_permanent .mapWrap .cont.left { right: calc(100% + 16px) }
    .sub_permanent .mapWrap .cont .viewImg { width: 170px; }
    .sub_permanent .mapWrap .cont .txt p { font-size: 15px; }
    .sub_permanent .mapWrap .cont button { top: 16px; }
}
@media (max-width: 1024px) {
    .sub_permanent .mapWrap .cont { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .sub_permanent .mapWrap .cont.left { right: 50%; transform: translate(50%, -50%); }
    .sub_permanent .mapWrap .cont .viewImg { width: 160px; }
}
@media (max-width: 767px) {
    .sub_permanent .titleWrap { padding: 0 20px; }
    .sub_permanent .titleWrap h3.title { margin-bottom: 16px; }

    .sub_permanent .floorWrap { padding: 0; }
    .sub_permanent .floorWrap > ul > li { padding: 8px 0; }
    .sub_permanent .floorWrap h5 button { padding: 8px 22px; }
    .sub_permanent .floorWrap h5 button i { padding-right: 0; width: 50px; }
    .sub_permanent .floorWrap h5 button span { padding-right: 30px; word-break: keep-all; }
}
@media (max-width: 480px) {
    .sub_permanent .mapWrap .cont .viewImg { width: 140px; }
    .sub_permanent .mapWrap .cont .txt p { margin-bottom: 20px; }
}
@media (max-width: 425px) {
    .sub_permanent .mapWrap .cont { flex-direction: column; gap: 16px; }
    .sub_permanent .mapWrap .cont .viewImg { margin: 0 auto; width: 160px; }
    .sub_permanent .mapWrap .cont .txt { padding: 0; }
    .sub_permanent .mapWrap .cont .txt h6 { font-size: 15px; }
    .sub_permanent .mapWrap .cont .txt a { font-size: 15px; }
}
@media (max-width: 374px) {
    .sub_permanent .floorWrap h5 button i { width: 44px; font-size: 18px; }
    .sub_permanent .floorWrap h5 button span { padding-left: 12px; font-size: 16px; }
}




/*########## keyframes collection ##########*/
@keyframes dotBlink {
    0% { width: 0; }
    33% { width: calc(100% + 10px); }
    50% { width: calc(100% + 10px); }
    100% { width: 0; }
}



/* ------------------ temp exh map viewer css styles ------------------ */
.exhMapBox {
    display: flex;
    margin-top: 15px;
  }
  
  .left {
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .leftContentBox {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: center;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  
  .leftContentBox.on {
    background-color: #333;
    color: #fff;
  }
  
  .right {
    flex: 1;
    padding: 20px;
    border: 1px solid #ccc;
  }
  
  .rightContentBox {
    display: none;
  }
  
  .rightContentBox.active {
    display: block;
  }
  
  
  /* 스크롤바 전체 */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px;
}

/* 스크롤바 트랙 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 스크롤바 손잡이 */
::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

/* hover */
::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* .menu 호버 시 스크롤바 유지 */
.menu:hover ::-webkit-scrollbar,
.menu *:hover ::-webkit-scrollbar,
.depth2-wrap:hover ::-webkit-scrollbar,
.depth2-wrap *:hover ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
}

.menu:hover ::-webkit-scrollbar-track,
.menu *:hover ::-webkit-scrollbar-track,
.depth2-wrap:hover ::-webkit-scrollbar-track,
.depth2-wrap *:hover ::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    display: block !important;
}

.menu:hover ::-webkit-scrollbar-thumb,
.menu *:hover ::-webkit-scrollbar-thumb,
.depth2-wrap:hover ::-webkit-scrollbar-thumb,
.depth2-wrap *:hover ::-webkit-scrollbar-thumb {
    background: #999 !important;
    border-radius: 4px !important;
    display: block !important;
}

.pastExhiList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
}

.pastExh {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.9vw;
    line-height: 1.3;
    font-size: .83vw;
    color: #fafafa;
    font-weight: 700;
    text-align: center;
    border-radius: .26vw;
    background: linear-gradient(30deg, #646464 0%, #020202 25%, #646464 95%);
    text-transform: uppercase;
    height: 54px;
    font-size: 15px;
    border-radius: 5px;
    width: calc(100% - 1vw);
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px;
}