@charset "utf-8";
/* viewer */
#viewer { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2000; } 
#viewer.active { display: block; }
#viewer .btn_viewer_exit { position: absolute; top: 20px; right: 23px; width: 40px; height: 40px; border-radius: 50%; background: url(../../resources/image/btn/btn_exit_white.svg) no-repeat center center, #222222; background-size: 24px; border-radius: 50%; display: inline-block; z-index: 3000; }
#viewer .viewer_swiper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 480px; height: 500px; overflow: hidden; } 
#viewer .viewer_swiper .swiper-slide { position: relative; overflow: hidden; } 
#viewer .viewer_swiper .swiper-slide img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 
#viewer .viewer_swiper .swiper-slide video { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 
#viewer .viewer-pager { position: absolute; left: 0; bottom: 24px; width: 100%; text-align: center; }
#viewer .viewer-pager > span { width: 8px; height: 8px; background: #ffffff; border-radius: 8px; margin: 0 3px; opacity: 1; transition: all 0.3s ease-out; }
#viewer .viewer-pager > span.swiper-pagination-bullet-active { width: 28px; background: var(--primary-500); }