@charset "UTF-8";

body.szp_mode {overflow: hidden !important;}

.szp, .szp :before, .szp :after {box-sizing: border-box; margin: 0; padding: 0;}

.szp {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: 0;z-index: 9000;border-radius: 0;background: rgba(29, 29, 30, .95);overflow: hidden;backdrop-filter: blur(6px);}


.szp_frame {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;overflow: hidden;}
.szp_stage {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;width: 100%;height: 100%;position: relative !important;/* ! really important*/transform: translate3d(0,0,0);will-change: transform;}


.szp_slide {/* padding: 4px; */width: 100%;height: 100%;flex-grow: 1;flex-shrink: 0;/* background: #eee; */overflow: hidden;display: inline-flex;flex-direction: column;justify-content: center;align-items: center;}
.szp_slide {
	transform: translateZ(0);
	touch-action: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transition: background-color .25s ease;
}
.szp_slide.active {/* background: #fff; */}


.szp_content {display: block; position: relative; z-index: 1; cursor: move; cursor: grab;}

/* transform & render rules */
.szp_content {
    transform: translate3d(0px, 0px, 0px) scale(1, 1);
    transform-origin: center center;
    transition: none;
    will-change: transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    filter: none;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
}

.szp_area img {display:block; height: auto;	max-height: 100%; max-width: 100%; margin: auto; opacity: 1;/* transition: opacity .1s ease; */object-fit: contain;image-rendering: auto;-webkit-user-drag: none; user-drag: none;}


.szp_hud {opacity: 0;transition: opacity .25s ease;}

.szp_close,
.szp_nav b,
.szp_zoom b {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="228" height="68"><defs><style>.wht{fill:white}</style></defs><path d="M0 0h1v1H0zm227 67h1v1h-1zm-35.5-46.5a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm0 20.1a9.1 9.1 0 1 1 0-18.2 9.1 9.1 0 0 1 0 18.2Z" class="wht"/><path d="M195 30.55h-2.55V28a.95.95 0 0 0-1.9 0v2.55H188a.95.95 0 0 0 0 1.9h2.55V35a.95.95 0 0 0 1.9 0v-2.55H195a.95.95 0 0 0 0-1.9ZM151.5 20.5a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm0 20.1a9.1 9.1 0 1 1 0-18.2 9.1 9.1 0 0 1 0 18.2Z" class="wht"/><path d="M155 30.55h-7a.95.95 0 0 0 0 1.9h7a.95.95 0 0 0 0-1.9Zm-45.66 1.61a.93.93 0 0 1 0-1.32l6.23-6.2c.37-.38.37-.99 0-1.36s-.98-.37-1.36 0l-6.23 6.21a2.84 2.84 0 0 0 0 4.02l6.23 6.21c.38.37.98.37 1.36 0a.95.95 0 0 0 0-1.35l-6.23-6.21ZM75.02 29.5l-6.23-6.22a.96.96 0 0 0-1.36 0 .95.95 0 0 0 0 1.35l6.23 6.21c.36.36.36.96 0 1.32l-6.23 6.2a.95.95 0 0 0 0 1.36c.38.37.98.37 1.36 0l6.23-6.21a2.84 2.84 0 0 0 0-4.02Zm-42.2 2 4.9-4.9a.93.93 0 1 0-1.32-1.33l-4.9 4.9-4.9-4.9a.93.93 0 0 0-1.33 1.33l4.9 4.9-4.9 4.9a.93.93 0 1 0 1.33 1.33l4.9-4.9 4.9 4.9a.93.93 0 0 0 1.33-1.33l-4.9-4.9Z" class="wht"/></svg>'); background-repeat: no-repeat;}

.szp_pos {display: none;position: absolute;top: 18px;left: 18px;z-index: 10;font-size: 14px;line-height: 1;text-align: center;opacity: 1;pointer-events: none;}

.szp_zoom {position: absolute;bottom: 18px;right: 18px;overflow: hidden;border-radius: 8px;}
.ready .szp_zoom {opacity: 1;}
.szp_zoom b {display: block;width: 37px;height: 37px;border: none;font-weight: 700;cursor: pointer;opacity: 1;background-color: rgba(29, 29, 30, .5); background-position: -173px -13px;transition: opacity .25s ease;-webkit-user-select: none;-moz-user-select: none;user-select: none;-webkit-user-drag: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.szp_zoom b:hover {background-color: rgba(29, 29, 30, .8);}
.szp_zoom .szp_zoom_out {background-position: -133px -13px;}

.szp_pc {display: inline-block;position: absolute;bottom: 46px;right: 64px;z-index: 10;padding: 0;font-size: 14px;line-height: 1;text-align: center;opacity: 0;cursor: pointer;pointer-events: none;}

.szp_pos, .szp_pc {/*color: rgba(255,255,255,.8);*/color: #fff;text-shadow: 0 0 5px rgba(29, 29, 30, .5), 1px 0px 1px rgba(29, 29, 30, .5), -1px 0 1px rgba(29, 29, 30, .5), 0 1px 1px rgba(29, 29, 30, .5), 0 -1px 1px rgba(29, 29, 30, .5);}

.ready .szp_pc {opacity: 1;}

.szp_close {display: block;position: absolute;top: 18px;right: 18px;background-color: rgba(29, 29, 30, .5); background-position: -13px -13px;width: 37px;height: 37px;text-align: center;border-radius: 8px;user-select: none;cursor: pointer;opacity: 1;}
.szp_close:hover {background-color: rgba(29, 29, 30, .8);}


.szp_nav {display: none;top: 50%;height: 80px;line-height: 80px;margin-top: -40px;position: absolute;left: 0;width: 60px;cursor: pointer;transition: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;-webkit-user-drag: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.szp_nav b {display: block;width: 37px;height: 40px;font-weight: 700;position: absolute;top: 50%;margin-top: -20px;left: 18px;background-color: rgba(29, 29, 30, .5);background-position: -94px -12px;border-radius: 8px;}
.szp_nav:hover b {background-color: rgba(29, 29, 30, .8);}

.szp_nav.prev {left: 0;}
.szp_nav.next {left: auto;right: 0;}
.szp_nav.next b {left: auto;right: 18px;background-position-x: -53px;}

.has_nav .szp_nav {display: block;opacity: 1; transition: opacity .25s ease;}

.has_nav .szp_pos {display: inline-block;}

.nav_start .szp_nav.prev,
.nav_end .szp_nav.next {opacity: 0; pointer-events: none !important;}




@media only screen and (max-width: 720px) {
	.szp_area {/*top: 150px;bottom: 150px;*/}

	.szp_nav {width: 42px;}
	.szp_nav b {left: 2px;}
	.szp_nav.next b {right: 2px;}

	.szp_close {top: 2px;right: 2px;}

	.szp_zoom {display: flex;flex-flow: row-reverse;right: auto;bottom: 2px;left: 50%;margin-left: -36px;}
	.szp_zoom b {width: 37px;height: 37px;}

    .szp_pos {left: 6px;top: 6px;}
    
	.szp_pc {bottom: 46px;right: auto;left: 50%;width: 60px;margin-left: -27px;}
}



/* CUSTOM MODE MODIFIERS */
.has_nav .szp_stage {cursor: grab;}

.szp_slide.loading {/* pointer-events: none; */}
.szp_slide.loading .szp_content {cursor: wait;/* opacity: .5; *//* filter: grayscale(1); */}

.szp_slide.loading.pending:after {content: "";position: absolute;top: 50%;margin-top: -80px;left: 50%;margin-left: -80px;height: 160px;width: 160px;background: url(../i/loader2.svg) 50% 50% no-repeat;background-size: 100px 100px;z-index: 2;cursor: wait;/* filter: blur(1px); */opacity: .5;}


.scaling .szp_content {image-rendering: auto;}

.scale_min .szp_zoom_out,
.scale_max .szp_zoom_in {opacity: .25;pointer-events: none;/* background-color: rgba(29, 29, 30, .5); */}

.scale_min:not(.scaled_under):not(.scaled_over) .szp_content {transform: none !important;}
.scale_min .szp_content {cursor: zoom-in;image-rendering: auto;}

.scale_max .szp_content {cursor: zoom-out;image-rendering: pixelated;}

.scaled .szp_content {image-rendering: pixelated;}
.scaled .szp_nav {opacity: 0;pointer-events: none !important;display: none;}
.scaled .szp_pos {/* opacity: 0; */}


.scaling .szp_content {transition: transform .5s ease;}
.repositioning .szp_content {transition: transform .25s ease;}


.scaling .szp_zoom {/*opacity: 0.35;*/}

.sliding .szp_stage {transition: transform .3s ease;}


.dragging .szp_box, 
.dragging .szp_stage,
.dragging .szp_content {cursor: grabbing !important;}
.dragging .szp_pc {transition: none; opacity: 0;}
.dragging .szp_content {/*padding: 10px; transition: padding .5s ease;*/}


/*.dragging .szp_pos,*/
.dragging .szp_nav,
.dragging .szp_zoom {opacity: 0;}

.panning .szp_content {cursor: grabbing !important;}
.panning .szp_close {opacity: 0;}
.panning .szp_zoom {opacity: 0;}
.panning .szp_pc {opacity: 0;}
.panning .szp_pos {opacity: 0;}


.scaling .szp_nav,
.panning .szp_nav,
.pinching .szp_zoom {pointer-events: none; opacity: 0;}

.pinching .szp_pos {opacity: 0;}

.pinching .szp_content {}

.scaled_over .szp_pc,
.scaled_over .szp_pos {opacity: 0;}


@media only screen and (max-width: 720px) {
	
}