@keyframes smartphoto {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes smartphoto-img-wrap {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes smartphoto-inner {
    from {transform: translate(0, 100px);}
    to {transform: translate(0, 0);}
}

@keyframes smartphoto-loader {
    0% {opacity: .4; transform: rotate(0deg);}
    50% {opacity: 1; transform: rotate(180deg);}
    100% {opacity: .4; transform: rotate(360deg);}
}

@keyframes smartphoto-appear {
    0% {display: none; opacity: 0;}
    1% {display: block; opacity: 0;}
    100% {display: block; opacity: 1;}
}

@keyframes smartphoto-hide {
    0% {display: block; opacity: 1;}
    99% {display: block; opacity: 0;}
    100% {display: none; opacity: 0;}
}

.smartphoto {position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .93); opacity: 1; font-family: var(--Pretendard); cursor: pointer; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; transition: all 0.3s ease-out; animation-name: smartphoto; animation-duration: 0.3s; animation-timing-function: ease-out;}

.smartphoto[aria-hidden="true"] {display: none;}

.smartphoto-close {opacity: 0;}

.smartphoto-count {/* display: inline-block; */ display: none; color: #FFF; font-size: 16px;}

.smartphoto-header {width: 100%; max-width: 1000px; height: 60px; padding: 15px; display: block; box-sizing: border-box; position: fixed; z-index: 102; top: 0; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.2);}

.smartphoto-caption {width: 100%; height: 60px; line-height: 60px; padding: 0 60px; box-sizing: border-box; position: absolute; top: 0; left: 0; color: #FFF; font-size: 20px; font-weight: 550; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.smartphoto-caption:focus {outline: none;}

.smartphoto-dismiss {
    display: block; position: absolute; top: 10px; right: 15px; width: 40px; height: 40px; padding: 0; border: none; background-color: transparent; background-repeat: no-repeat; background-size: 30px auto; background-position: center; text-shadow: 0 1px 0 #FFF; color: #FFF; font-size: 30px; text-decoration: none; cursor: pointer; line-height: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='12' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z' fill='%23FFF'/%3E%3C/svg%3E");
}

.smartphoto-content {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.smartphoto-body {position: relative; z-index: 102; width: 100%; height: 100%; margin: 0 auto;}

.smartphoto-inner {position: relative; width: 100%; height: 100%; vertical-align: top;}

.smartphoto-img {display: none; width: auto; height: auto; max-width: none; cursor: zoom-in; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: transform 0.3s ease-out; -webkit-user-drag: none; object-fit: cover;}

.smartphoto-img.active {display: block;}

.smartphoto-img-onmove {cursor: grab; cursor: -webkit-grab; transition: none;}

.smartphoto-img-elasticmove {transition: transform 0.3s ease-out;}

.smartphoto-img-wrap {display: inline-block; opacity: 1; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; animation-name: smartphoto-img-wrap; animation-duration: 0.3s; animation-timing-function: ease-out;}

.smartphoto-img-left {transform: translateX(150%) !important;}

.smartphoto-img-right {transform: translateX(-150%) !important;}

.smartphoto-arrows {max-width: 1100px; list-style-type: none; margin: 0 auto; padding: 0; position: relative; z-index: 1002; top: 50%; left: 0; opacity: 1; animation-name: smartphoto-appear; animation-duration: 0.3s; animation-timing-function: ease-out;}

.smartphoto-arrows[aria-hidden="true"] {animation-name: smartphoto-hide; display: none;}

.smartphoto-arrows li {display: block; position: absolute; top: 50%; width: 40px; height: 40px; animation-duration: 0.3s; animation-timing-function: ease-out; animation-name: smartphoto-appear; background-size: 20px auto; background-repeat: no-repeat; background-position: center;}

.smartphoto-arrows li:focus {outline: none;}

.smartphoto-arrow-right {
    right: 0; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='10' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z' fill='%23FFF'/%3E%3C/svg%3E");
}

.smartphoto-arrow-left {
    left: 0; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='10' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z' fill='%23FFF'/%3E%3C/svg%3E");
}

.smartphoto-arrows [aria-hidden="true"] {animation-name: smartphoto-hide; display: none;}

.smartphoto-arrows a {display: block; width: 100%; height: 100%; text-decoration: none;}

.smartphoto-nav {position: absolute; bottom: 0; left: 0; width: 100%; opacity: 1; animation-name: smartphoto-appear; animation-duration: 0.3s; animation-timing-function: ease-out;}

.smartphoto-nav[aria-hidden="true"] {animation-name: smartphoto-hide; display: none;}

.smartphoto-nav ul {width: 100%; display: block; overflow-x: auto; overflow-y: hidden; list-style: none; margin: 0; padding: 0; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; font-size: 0; line-height: 0;}

.smartphoto-nav ul::-webkit-scrollbar {width: 19px; /* 세로 스크롤바 너비 */ height: 19px; /* 가로 스크롤바 높이 */ background-color: transparent;}
.smartphoto-nav ul::-webkit-scrollbar-thumb {width: 19px; background-color: #CCCCCC; border-radius: 999px; background-clip: padding-box; border: 6px solid transparent;} /* 실제 스크롤바 막대 */
.smartphoto-nav ul::-webkit-scrollbar-track {width: 19px; border-radius: 999px; background-color: transparent;}

.smartphoto-nav li {display: inline-block; overflow: hidden; width: 5.5rem; height: 5.5rem; margin: 10px 5px;}

.smartphoto-nav a {display: block; width: 100%; height: 100%; background-color: #FFF; background-position: center center; background-size: cover; opacity: .5;}

.smartphoto-nav a:focus {opacity: .8;}

.smartphoto-nav a.current {opacity: 1;}

.smartphoto-nav img {width: auto; height: 100%;}

.smartphoto-list {list-style-type: none; position: absolute; z-index: 101; top: 0; left: 0; margin: 0; padding: 0; white-space: nowrap;}

.smartphoto-list li {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s ease-out;}

.smartphoto-list li:focus {outline: none;}

.smartphoto-list-onmove {transition: all 0.3s ease-out;}

.smartphoto-loader-wrap {display: block; position: relative; z-index: 103; width: 0; height: 0; transform: translate(50vw, 50vh);}

.smartphoto-loader {position: absolute; z-index: 101; top: 0; left: 0; width: 30px; height: 30px; margin-top: -25px; margin-left: -25px; border: 8px solid #17CDDD; border-right-color: transparent; border-radius: 50%; animation: smartphoto-loader .5s infinite linear;}

.smartphoto-img-clone {position: fixed; z-index: 100; top: 0; left: 0; transition: all 0.3s ease-out;}

.smartphoto-sr-only {overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0);}