/* 리스트 */
.archive { padding: 180px 0 160px; }
.archive .inner { max-width: 1400px; }
.archive .list-heading { margin-bottom: 80px; text-align: center; }
.archive .list-heading .heading { margin-bottom: 20px; font-size: 5.6rem; font-weight: 600; }
.archive .list-heading .text { font-weight: 500; }
.archive-list { overflow: hidden; }
.archive-list .row-filter { margin-top: 16px; }
.archive-list .row-keyword { margin-top: 6px; }
.archive-list .row-between { display: flex; justify-content: space-between; align-items: center; margin: 50px 0 24px; }

.archive-list .search { height: 50px; }
.archive-list .search input { padding-top: 0; padding-bottom: 0; padding-left: 24px; padding-right: 60px; width: 100%; height: 100%; font-size: 1.6rem; background: transparent; outline: none; border-color: transparent; border-radius: 50px; }
.archive-list .search input:focus { border-color: var(--clr-dark); }
.archive-list .search button { position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: url('/syr_history/images/search.svg') no-repeat center / auto 80%; }
.archive-list .search .box { flex: 1 1; overflow: hidden; position: relative; height: 100%; background: #F5F5F7; border: none; border-radius: 55px; }

.archive-list .filter { display: flex; position: relative; }
.archive-list .filter-primary::before { content: ''; z-index: 2; position: absolute; top: 0; right: calc(100% - 105px); width: 100%; height: 100%; background: #fff; pointer-events: none; }
.archive-list .filter-primary .filter-scroll { width: calc(95% - 90px); }
.archive-list .filter-scroll { overflow: visible; position: relative; margin: 0; padding-bottom: 10px; width: 100%; }
.archive-list .filter-scroll .swiper-slide { flex: 0 0 auto; width: auto; box-sizing: border-box; }
.archive-list .filter-scroll .swiper-scrollbar { bottom: 0; }
.archive-list .filter-scroll .swiper-scrollbar-drag { background: var(--clr-dark); }
.archive-list .filter .button-filter {
    display: inline-flex; align-items: center; padding: 0 11px; height: 35px; line-height: 35px; font-size: 1.5rem; font-weight: 500; border: 1px solid #E5E5E5; border-radius: 35px;
    transition-property: color, background, border; transition-timing-function: ease; transition-duration: .1s;
}
.archive-list .filter .button-filter .icon { margin-right: 0.333em; width: 14px; height: 14px; }
.archive-list .filter .button-filter-open { z-index: 2; position: relative; margin-right: 8px; }
.archive-list .filter .button-filter-item { padding-right: 30px; }
.archive-list .filter .button-filter-item::after{
    content: ''; position: absolute; top: 9px; right: 10px;
    width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: auto 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2417 9.805C8.8165 10.3283 8.6039 10.59 8.3479 10.6851C8.12343 10.7683 7.87643 10.7683 7.65197 10.6851C7.39597 10.59 7.18337 10.3283 6.75817 9.805L5.78637 8.60893C5.10869 7.77487 4.76985 7.3578 4.7676 7.0064C4.76565 6.7008 4.90355 6.41107 5.14195 6.21988C5.41613 6 5.95347 6 7.02817 6H8.9717C10.0464 6 10.5838 6 10.8579 6.21988C11.0963 6.41107 11.2342 6.7008 11.2322 7.0064C11.23 7.3578 10.8912 7.77487 10.2135 8.60893L9.2417 9.805Z' fill='%23050505'/%3E%3C/svg%3E%0A");
}
.archive-list .filter .button-filter-item[aria-selected="true"] { border-color: #050505; }
.archive-list .filter .button-filter-keyword { background: #f5f5f5; border-color: #f5f5f5; }
.archive-list .filter .button-filter-keyword[aria-selected="true"] { color: #fff !important; background: var(--clr-secondary) !important; border-color: var(--clr-secondary) !important; }

.archive-list .total { font-size: 1.6rem; font-weight: 500; color: var(--clr-dark); }
.archive-list .total em { font-style: normal; }
.archive-list .type { display: flex; align-items: center; }
.archive-list .type .item { margin-left: 12px; opacity: 0.4; transition: opacity ease .1s; }
.archive-list .type .item .icon-list::before { background-image: url('/syr_history/images/list.svg'); }
.archive-list .type .item .icon-grid::before { background-image: url('/syr_history/images/grid.svg'); }
.archive-list .type .item.on { opacity: 1; }

.archive-board-list { display: flex; flex-wrap: wrap; margin: -30px -12px; }
.archive-board-list .list { padding: 30px 12px; width: 25%; }
.archive-board-list .list .block { display: block; }
.archive-board-list .list .thumbnail { overflow: hidden; position: relative; }
.archive-board-list .list .thumbnail::before { content: ''; display: block; padding-top: calc(220 / 332 * 100%); width: 100%; height: 0; }
.archive-board-list .list .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform ease 2s; }
.archive-board-list .list .thumbnail .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.archive-board-list .list .thumbnail .mask::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity ease .35s; }
.archive-board-list .list .thumbnail .mask::after{
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 60px; height: 60px;
    background-repeat: no-repeat; background-position: center; background-size: auto 100%; border-radius: 50%;
}
.archive-board-list .list .title { overflow: hidden; margin: 16px 0 10px; font-size: 1.8rem; font-weight: 500; color: var(--clr-black); white-space: nowrap; text-overflow: ellipsis; }
.archive-board-list .list .tags { display: flex; flex-wrap: wrap; margin: -5px; }
.archive-board-list .list .tags .tag { padding: 0 5px; font-size: 1.3rem; font-weight: 500; color: #474747; }
.archive-board-list .list-a { padding: 100px 30px; width: 100%; text-align: center; }
.archive-board-list .list-audio .thumbnail .mask::after{
    background-color: rgba(255, 255, 255, 0.2); background-image: url('/syr_history/images/audio.svg');
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: all ease .35s;
    opacity: 0;
}
.archive-board-list .list .text { margin: 8px 0 20px; line-height: 1.6; font-size: 1.6rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.archive-board-list .list .thumbnail.sr-animate img { transform: none; }
.archive-board-list .list .thumbnail.sr-animate-ended img { transition-duration: 0.65s; }
.archive-board-list[data-list-type="grid"] .text { display: none; }
.archive-board-list[data-list-type="list"] .list { padding: 24px 0; width: 100%; border-bottom: 1px solid var(--border); }
.archive-board-list[data-list-type="list"] .list .block { display: flex; align-items: center; }
.archive-board-list[data-list-type="list"] .list .thumbnail { flex: 0 0 auto; margin-right: 40px; width: 260px; }
.archive-board-list[data-list-type="list"] .list .title { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
    .archive-list .filter .button-filter:hover { border-color: var(--clr-dark); }
    .archive-list .filter .button-filter-keyword:hover { background: #e5e5e5; border-color: #e5e5e5; }

    .archive-list .type .item:hover { opacity: 1; }
    .archive-board-list .block:hover .title,
    .archive-board-list .block:focus .title { text-decoration: underline; text-underline-offset: 0.25em; }
    .archive-board-list .block:hover .thumbnail img { transform: scale(1.1); transition-duration: 0.85s; }
    .archive-board-list .block:hover .thumbnail .mask { opacity: 1; }
    .archive-board-list .list .block:hover .thumbnail .mask::before { opacity: 1; }
    .archive-board-list .list-audio .block:hover .thumbnail .mask::after { opacity: 1; transition-delay: 0.1s; }
}
@media screen and (max-width: 1024px) {
    .archive { padding: 120px 0 80px; }
    .archive .list-heading { margin-bottom: 46px; }
    .archive .list-heading .heading { margin-bottom: 12px; font-size: 3.8rem; }
    .archive-list .search { height: 45px; }
    .archive-list .filter .button-filter { font-size: 1.4rem; }
    .archive-list .total { font-size: 1.5rem; }
    .archive-list .type .item .icon { width: 22px; height: 22px; }
    .archive-board-list { margin: -20px -7px; }
    .archive-board-list .list { padding: 20px 7px; }
    .archive-board-list .list .title { margin: 14px 0 8px; font-size: 1.7rem; }
    .archive-board-list .list .thumbnail .mask::before { width: 50px; height: 50px; }
    .archive-board-list .list .text { margin: 6px 0 16px; font-size: 1.5rem; }
}
@media screen and (max-width: 768px) {
    .archive { padding: 100px 0 60px; }
    .archive .list-heading { margin-bottom: 30px; }
    .archive .list-heading .heading { margin-bottom: 10px; font-size: 2.4rem; }
    .archive-list .row-keyword { margin-top: 0; }
    .archive-list .filter { display: block; }
    .archive-list .filter-primary::before { content: none; }
    .archive-list .filter-primary .filter-scroll { width: 100%; }
    .archive-list .filter .button-filter-open { margin-right: 0; margin-bottom: 6px; }
    .archive-list .total { font-size: 1.4rem; }
    .archive-list .filter .button-filter { font-size: 1.3rem; }
    .archive-board-list .list { width: 50%; }
    .archive-board-list .list .title { font-size: 1.6rem; }
    .archive-board-list .list .tags .tag { font-size: 1.2rem; }
    .archive-board-list .list .text { margin: 4px 0 14px; font-size: 1.4rem; }
    .archive-board-list[data-list-type="list"] .list .block { display: block; }
    .archive-board-list[data-list-type="list"] .list .thumbnail { margin-right: 0; margin-bottom: 20px; width: 100%; }
}
@media screen and (max-width: 425px) {
    .archive-board-list .list .title { font-size: 1.5rem; }
    .archive-board-list .list .tags { margin: -4px; }
    .archive-board-list .list .tags .tag { padding: 0 4px; }
}

/* 팝업 */
.modal-filter .modal-foot { display: flex; align-items: center; justify-content: space-between; }
.modal-filter .modal-foot .button { flex: 0.16 1; }
.modal-filter .modal-foot .button.wide { flex: 0.81 1; }
.modal-filter .modal-foot .button em { font-style: normal; }
.modal-filter .category-scroll { overflow: visible; position: relative; }
.modal-filter .category-scroll::after { content: ''; position: absolute; bottom: 0; left: -32px; width: calc(100% + 64px); height: 1px; background: #e5e5e5; }
.modal-filter .category-scroll .swiper-slide { flex: 1 0 auto; width: auto; box-sizing: border-box; }
.modal-filter .category-scroll .button-item { position: relative; padding-bottom: 8px; font-size: 1.7rem; font-weight: 600; color: #a1a1a1; }
.modal-filter .category-scroll .button-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--clr-dark); opacity: 0; }
.modal-filter .category-scroll .button-item[aria-selected="true"] { color: var(--clr-dark); }
.modal-filter .category-scroll .button-item[aria-selected="true"]::after { opacity: 1; }
.modal-filter .panels .panel { padding-top: 36px; }
/* .modal-filter .panels .panel:first-child { padding-top: 0; } */
.modal-filter .panels .heading { margin-bottom: 16px; font-size: 1.7rem; font-weight: 600; color: var(--clr-dark); }
.modal-filter .categories { display: flex; flex-wrap: wrap; margin: -8px; }
.modal-filter .categories .category { display: inline-flex; align-items: center; margin: 4px; padding: 0 12px; height: 35px; line-height: 35px; font-size: 1.5rem; color: var(--clr-dark); border: 1px solid #E5E5E5; border-radius: 35px; }
.modal-filter .categories .category[aria-selected="true"] { border-color: var(--clr-dark); }
@media screen and (max-width: 1024px) {
    .modal-filter .panels .heading { font-size: 1.6rem; }
    .modal-filter .panels .panel { padding-top: 30px; }
    .modal-filter .category-scroll .button-item { font-size: 1.6rem; }
    .modal-filter .categories .category { font-size: 1.4rem; }
}
@media screen and (max-width: 768px) {
    .modal-filter .panels .heading { font-size: 1.5rem; }
    .modal-filter .category-scroll::after { left: -24px; width: calc(100% + 48px); }
    .modal-filter .category-scroll .button-item { font-size: 1.5rem; }
    .modal-filter .categories .category { height: 30px; line-height: 30px; font-size: 1.3rem; }
}


/* 뷰 */
.archive-view { overflow: hidden; }
.archive-view-head { margin-bottom: 40px; text-align: center; }
.archive-view-head .tags { display: flex; flex-wrap: wrap; justify-content: center; margin: -4px -4px 16px; }
.archive-view-head .tags .tag { display: inline-flex; margin: 4px; padding: 0 12px; height: 30px; line-height: 30px; font-size: 1.4rem; font-weight: 500; color: #474747; background: #F5F5F7; border-radius: 30px; }
.archive-view-head .heading { line-height: 1.4; font-size: 4rem; font-weight: 600; color: var(--clr-dark); }
.archive-view-body .section { display: flex; flex-wrap: wrap; margin: -36px -36px 60px; }
.archive-view-body .section-child { flex: 1 1; padding: 36px; }
.archive-view-body .section-top { margin-bottom: 100px; }
.archive-view-body .section .heading { margin-bottom: 20px; font-size: 2.8rem; font-weight: 600; color: var(--clr-dark); }
.archive-view-body .section .contents { width: 100%; line-height: 1.6; font-size: 1.6rem; }
.archive-view-body .section .contents * {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}
.archive-view-body .data .row { display: flex; margin-bottom: 16px; }
.archive-view-body .data .row:last-child { margin-bottom: 0; }
.archive-view-body .data dt { flex: 0 0 auto; width: 80px; margin-right: 20px; font-size: 1.6rem; color: #333; }
.archive-view-body .data dd { flex: 1 1; font-size: 1.6rem; color: var(--clr-dark); font-weight: 500; }
.archive-view-body .data ul { display: flex; flex-wrap: wrap; margin: -4px; }
.archive-view-body .data ul li { padding: 4px; }
.archive-view-body .data .link { text-decoration: underline; text-underline-offset: 0.2em; }
.archive-view-foot { display: flex; align-items: center; margin-top: 180px; }
.archive-view-foot .col { flex: 1 0 33.33333%; width: 33.33333%; }
.archive-view-foot .col:nth-child(2) { text-align: right; }
.archive-view-foot .link { display: inline-block; position: relative; max-width: 100%; }
.archive-view-foot .link.disabled { pointer-events: none; }
.archive-view-foot .link.previous .icon { left: 0; }
.archive-view-foot .link.previous .icon::before { background-image: url("data:image/svg+xml,%3Csvg width='9' height='16' viewBox='0 0 9 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15L0.999999 8L8 1' stroke='%23050505' stroke-miterlimit='10'/%3E%3C/svg%3E%0A"); }
.archive-view-foot .link.previous .title { margin: 0 1.5em 0 1.85em; }
.archive-view-foot .link.next .icon { right: 0; }
.archive-view-foot .link.next .icon::before { background-image: url("data:image/svg+xml,%3Csvg width='9' height='16' viewBox='0 0 9 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 15L8 8L0.999999 1' stroke='%23050505' stroke-miterlimit='10'/%3E%3C/svg%3E%0A"); }
.archive-view-foot .link.next .title { margin: 0 1.85em 0 1.5em; }
.archive-view-foot .link .icon { display: block; position: absolute; top: 0; bottom: 0; margin: auto; }
.archive-view-foot .link .icon::before { background-size: auto 64%; transition: none; }
.archive-view-foot .link .text-wrap { width: 100%; display: flex; }
.archive-view-foot .link .text-wrap .title { display: block; font-weight: 600; color: var(--clr-dark); }
.archive-view-foot .link .text-wrap .text { color: #333333; flex: 0 0 auto; flex: 0 0 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-view-foot .link.next .text-wrap { flex-direction: row-reverse; }
.archive-view-foot .button.list { width: 185px; height: 60px; line-height: 60px; border-color: #E5E5E5; border-radius: 60px; }
@media (hover: hover) and (pointer: fine) {
    .archive-view-body .data .link:hover { color: var(--clr-secondary); }
    .archive-view-foot .button.list:hover { color: #fff; background: var(--clr-secondary); border-color: var(--clr-secondary); }
    .archive-view-foot .link:hover .title { color: var(--clr-secondary); }
    .archive-view-foot .link:hover .icon::before { filter: invert(59%) sepia(81%) saturate(1187%) hue-rotate(340deg) brightness(97%) contrast(93%); }
}
@media screen and (min-width: 1025px) {
    .archive-view-foot .col:nth-child(2) { order: 3; }
    .archive-view-foot .col:last-child { order: 2; text-align: center; }
}
@media screen and (max-width: 1024px) {
    .archive-view-head { margin-bottom: 30px; }
    .archive-view-head .tags { margin: -4px -4px 10px; }
    .archive-view-head .tags .tag { font-size: 1.3rem; }
    .archive-view-head .heading { font-size: 3rem; }
    .archive-view-body .section { margin: -20px -20px 14px; }
    .archive-view-body .section-child { padding: 20px; }
    .archive-view-body .section .heading { margin-bottom: 16px; font-size: 2.2rem; }
    .archive-view-body .section-top { margin-bottom: 80px; }
    .archive-view-body .section .contents { font-size: 1.5rem; }
    .archive-view-body .data dt { width: 70px; font-size: 1.5rem; }
    .archive-view-body .data dd { font-size: 1.5rem; }
    .archive-view-foot { flex-wrap: wrap; margin-top: 45px; }
    .archive-view-foot .col { flex: 1 1 auto; width: 50%; }
    .archive-view-foot .col:last-child { order: 3; display: flex; justify-content: center; }
    .archive-view-foot .link .text-wrap .title { font-size: 15px; margin-bottom: 0; }
    .archive-view-foot .link .text-wrap .text { display: none; }
    .archive-view-foot .link .icon { width: 20px; height: 20px; }
    .archive-view-foot .button.list { margin-top: 30px; padding: 20px; max-width: none; height: 50px; line-height: 50px; }
}
@media screen and (max-width: 768px) {
    .archive-view-head { margin-bottom: 20px; }
    .archive-view-head .heading { font-size: 2rem; }
    .archive-view-head .tags { margin: -2px -2px 8px; }
    .archive-view-head .tags .tag { margin: 2px; font-size: 1.2rem; }
    .archive-view-body .section-child { flex: 0 0 100%; width: 100%; }
    .archive-view-body .section-top { margin-bottom: 60px; }
    .archive-view-body .section .heading { margin-bottom: 10px; font-size: 1.8rem; }
    .archive-view-body .section .contents { font-size: 1.4rem; }
    .archive-view-body .data .row { margin-bottom: 10px; }
    .archive-view-body .data dt { margin-right: 10px; width: 64px; font-size: 1.4rem; }
    .archive-view-body .data dd { font-size: 1.4rem; }
    .archive-view-foot .button.list { padding: 16px; }
    .archive-view-foot .button.list i { width: 16px; height: 16px; }
}


/* 뷰어 */
.view-box { overflow: hidden; position: relative; padding: 60px 0 110px; height: 620px; background: #F5F5F7; border: 1px solid #e5e5e5; border-radius: 8px; }
.view-box [role="button"] { box-shadow: none !important; }
.view-box .page { padding-left: 10px; width: 80px; font-size: 1.6rem; font-weight: 400; }
.view-box .image-lists { position: absolute; display: none; }
.view-box .viewer-backdrop { background: transparent; }
.view-box .viewer-backdrop.viewer-fixed .viewer-title { color: rgba(255, 255, 255, 0); }
.view-box .viewer-backdrop.viewer-fixed { color: #fff; background: rgba(0, 0, 0, 0.8); }
.view-box .viewer-backdrop.viewer-fixed .viewer-toolbar,
.view-box .viewer-backdrop.viewer-fixed .viewer-navbar { background: transparent; }
.view-box .viewer-backdrop.viewer-fixed .viewer-button::before,
.view-box .viewer-backdrop.viewer-fixed .viewer-toolbar .viewer-prev:before,
.view-box .viewer-backdrop.viewer-fixed .viewer-toolbar .viewer-next::before,
.view-box .viewer-backdrop.viewer-fixed .viewer-toolbar .viewer-rotate-right::before,
.view-box .viewer-backdrop.viewer-fixed .viewer-toolbar .viewer-zoom-in::before,
.view-box .viewer-backdrop.viewer-fixed .viewer-toolbar .viewer-zoom-out::before {
    filter: invert(1);
}
.view-box .viewer-button { top: 6px; right: 6px; width: 48px; height: 48px; background: transparent; }
.view-box .viewer-button::before { bottom: 0; left: 0; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.75 3.75H20.25V10.25M3.75 13.75V20.25H10.25M19.5 4.5L14 10M10 14L4.5 19.5' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.view-box .viewer-footer { position: static; }
.view-box .viewer-toolbar { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: #F5F5F7; }
.view-box .viewer-toolbar > ul { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 54px 0 0; width: 100%; }
.view-box .viewer-toolbar > ul > li { margin: 0; width: 48px; height: 48px; background: none; }
.view-box .viewer-toolbar .viewer-prev { order: 1; margin-right: 0; }
.view-box .viewer-toolbar .viewer-next { order: 2; margin-right: auto; margin-left: -12px; }
.view-box .viewer-toolbar .viewer-rotate-right { order: 3; }
.view-box .viewer-toolbar .viewer-zoom-in { order: 4; }
.view-box .viewer-toolbar .viewer-zoom-out { order: 5; }
.view-box .viewer-button::before,
.view-box .viewer-toolbar .viewer-prev:before,
.view-box .viewer-toolbar .viewer-next::before,
.view-box .viewer-toolbar .viewer-rotate-right::before,
.view-box .viewer-toolbar .viewer-zoom-in::before,
.view-box .viewer-toolbar .viewer-zoom-out::before {
    margin: 0; width: 100%; height: 100%;
    background-repeat: no-repeat; background-position: center; background-size: auto 48%;
}
.view-box .viewer-toolbar .viewer-prev:before { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.66782 5.83203L4.12492 11.3749C3.7344 11.7654 3.7344 12.3986 4.12492 12.7891L9.66782 18.332M4.66782 12.082H20.1678' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.view-box .viewer-toolbar .viewer-next::before { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3322 5.83203L19.8751 11.3749C20.2656 11.7654 20.2656 12.3986 19.8751 12.7891L14.3322 18.332M19.3322 12.082H3.83218' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.view-box .viewer-toolbar .viewer-rotate-right::before { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.2618 3.75V7.75H15.2618M4.75 20.25V16.25H8.75M3.81383 13.0312C3.7717 12.6934 3.75 12.3492 3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C14.6766 3.75 17.1111 5.02463 18.6322 7M20.1862 10.9688C20.2283 11.3066 20.25 11.6508 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C9.32342 20.25 6.88887 18.9754 5.36784 17' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.view-box .viewer-toolbar .viewer-zoom-in::before { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20L16.1265 16.1265M16.1265 16.1265C17.4385 14.8145 18.25 13.002 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C13.002 18.25 14.8145 17.4385 16.1265 16.1265ZM11 7.75V14.25M14.25 11L7.75 11' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.view-box .viewer-toolbar .viewer-zoom-out::before { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20L16.1265 16.1265M16.1265 16.1265C17.4385 14.8145 18.25 13.002 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C13.002 18.25 14.8145 17.4385 16.1265 16.1265ZM14.25 11L7.75 11' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.view-box .viewer-navbar { position: absolute; bottom: 0; left: 0; width: 100%; background: #F5F5F7; }
.view-box .viewer-title { height: 140px; }
.view-box .viewer-list { padding: 20px 0; height: 110px; box-sizing: inherit; transition: all ease .3s; }
.view-box .viewer-list > li { position: relative; width: 96px; height: 69px; border-radius: 2px; opacity: 1; }
.view-box .viewer-list > li::before { content: ''; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--clr-secondary); opacity: 0; pointer-events: none; }
.view-box .viewer-list > li + li { margin-left: 8px; }
.view-box .viewer-list > li.viewer-active::before { opacity: 1; }
.view-box .viewer-list img { height: 100%; object-fit: cover; }
.view-box .viewer-canvas { margin-top: 40px; cursor: grab; }
.view-box .viewer-canvas:active { cursor: grabbing; }
.view-box .viewer-tooltip { padding: 0 1em; width: auto; height: 35px; line-height: 35px; font-size: 1.6rem; background: rgba(0, 0, 0, 0.7); border-radius: 35px; }

.media-box iframe,
.pdf-box iframe { border-radius: 8px; }
.pdf-box iframe { height: 620px; }
.audio-box { text-align: center; }
.audio-box iframe,
.audio-box audio { margin-top: 40px; width: 630px; }
.pdf-box { text-align: center; }
.pdf-box .download { display: none; align-items: center; justify-content: center; position: relative; margin: 40px 0 20px; padding: 0 24px; height: 45px; line-height: 45px; font-size: 1.5rem; font-weight: 500; color: var(--clr-dark); border: 1px solid #e5e5e5; border-radius: 45px; }
.pdf-box .download::before{
    content: ''; display: inline-flex; margin-right: 0.5em; width: 16px; height: 16px;
    background-repeat: no-repeat; background-position: center; background-size: auto 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5361 8.83812L7.98184 5.3491C8.45764 4.86749 9.22891 4.86709 9.70471 5.3491C10.1805 5.83071 10.1805 6.6118 9.70471 7.09341L7.71657 9.10663L4.46606 12.3976C3.67306 13.2007 2.38735 13.2007 1.59475 12.398C0.801749 11.5954 0.801749 10.294 1.59475 9.49086L9.14719 1.84338C10.2574 0.719214 12.0571 0.718807 13.1673 1.84256C14.2776 2.96632 14.2776 4.78845 13.1673 5.91261L7.12081 12.0354' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1199px) {
    .viewer-hide-md-down { display: block; }
}
@media screen and (max-width: 1024px) {
    .view-box { padding: 50px 0 80px; height: 480px; }
    .view-box .viewer-button { width: 40px; height: 40px; }
    .view-box .viewer-button::before { background-size: auto 42%; }
    .view-box .viewer-button::before,
    .view-box .viewer-toolbar .viewer-prev:before,
    .view-box .viewer-toolbar .viewer-next::before,
    .view-box .viewer-toolbar .viewer-rotate-right::before,
    .view-box .viewer-toolbar .viewer-zoom-in::before,
    .view-box .viewer-toolbar .viewer-zoom-out::before {
        background-size: auto 56%;
    }
    .view-box .viewer-toolbar { height: 50px; }
    .view-box .viewer-toolbar > ul { padding-right: 46px; }
    .view-box .viewer-toolbar > ul > li { width: 40px; height: 40px; }
    .view-box .viewer-toolbar .viewer-next { margin-left: -6px; }
    .view-box .viewer-title { height: 100px; }
    .view-box .page { width: 64px; font-size: 1.5rem; }
    .view-box .viewer-list { padding: 10px 0; height: 80px; }
    .view-box .viewer-list > li { width: 86px; height: 60px; }

    .pdf-box iframe { display: none; margin-top: 30px; }
    .pdf-box .download { display: inline-flex; }
}
@media screen and (max-width: 768px) {
    .view-box .page { font-size: 1.4rem; }
    .view-box { padding: 50px 0 62px; height: 400px; }
    .view-box .viewer-title { height: 70px; }
    .view-box .viewer-button { width: 36px; height: 36px; }
    .view-box .viewer-toolbar > ul { padding-right: 44px; }
    .view-box .viewer-toolbar > ul > li { width: 36px; height: 36px; }
    .view-box .viewer-list { height: 62px; }
    .view-box .viewer-list > li { width: 64px; height: 42px; }
    .view-box .viewer-list > li + li { margin-left: 6px; }

    .audio-box iframe { margin-top: 20px; width: 100%; height: 130px; }
    .audio-box audio { margin-top: 20px; width: 100%; }
}