.yBoxOverlay *{-webkit-box-sizing:border-box;box-sizing:border-box}
.yBoxOverlay{background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;position:fixed;left:0;top:0;width:100%;height:100%;z-index:10000;
visibility:hidden;opacity:0;-khtml-opacity:0;-webkit-transition:all .5s ease;transition:all .5s ease}
.yBoxOverlay.active{visibility:visible;opacity:1;-khtml-opacity:1}
.yBoxImgZoom{width:100%;height:100%}
.yBoxFrame{/* background:#000; */color:#fff;max-width:-webkit-calc(100% - 10px);max-width:calc(100% - 10px);max-height:-webkit-calc(100vh - 10px);
max-height:calc(100vh - 10px);z-index:10001;-webkit-transition:all .5s ease;transition:all .5s ease;-webkit-transform:translate(0,30px);transform:translate(0,30px)}
.yBoxFrame.yBoxContentFrame{background:#fff;color:#000}
.yBoxOverlay.active .yBoxFrame{-webkit-transform:translate(0,0);transform:translate(0,0)}
.closeYbox{background:transparent;background-size:100% 100%;width:35px;height:35px;position:absolute;top:10px;right:10px;margin:0;padding:0;border:none;cursor:pointer;z-index:3}
.closeYbox::after,.closeYbox::before{content:'';background-color:#fff;width:25px;height:2px;position:absolute;
left:5px;top:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all .5s ease;transition:all .5s ease}
.closeYbox::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.closeYbox:hover::before{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.closeYbox:hover::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}

.yBoxFrame.yBoxContentFrame .closeYbox{background:#fff}
.yBoxFrame.yBoxContentFrame .closeYbox::after,.yBoxFrame.yBoxContentFrame .closeYbox::before{background-color:#000}
.yBoxIframe{background:#000;width:100%;height:100%;position:absolute;top:0;left:0}
.yBoxFrame.yBoxIframeWrap{width:1200px;height:750px}
.yBoxFrame.yBoxIframeWrap .insertYboxAjaxHere{position:absolute;max-height:100%;left:10px;top:10px;right:10px;bottom:10px;padding:0}
.insertYboxAjaxHere{min-width:150px;min-height:100px;max-height:-webkit-calc(100vh - 100px);max-height:calc(100vh - 100px);overflow:auto;padding:50px 19px 13px}
.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere{/* padding:10px; */max-height:-webkit-calc(100vh - 10px);max-height:calc(100vh - 10px)}
.yBoxFrame.yBoxImgWrap img.yBoxImg{max-width:-webkit-calc(100vw - 50px);max-width:calc(100vw - 50px);max-height:-webkit-calc(100vh - 30px);max-height:calc(100vh - 30px);vertical-align:top;
/* box-shadow:0 0 8px 0 rgba(0,0,0,0.8); */}
.yBoxFrame.yBoxImgWrap .yBoxNextImg,
.yBoxFrame.yBoxImgWrap .yBoxPrevImg{background:0 0;width:30%;height:100%;position:absolute;top:0;border:none;cursor:pointer;z-index:2}
.yBoxFrame.yBoxImgWrap .yBoxNextImg{left:0}.yBoxFrame.yBoxImgWrap .yBoxPrevImg{right:0}
.yBoxFrame.yBoxImgWrap .yBoxNextImg::after,.yBoxFrame.yBoxImgWrap .yBoxPrevImg::after{content:'';width:20px;height:20px;position:absolute;top:50%;
border-bottom:3px solid rgba(255,255,255,.7);border-left:3px solid rgba(255,255,255,.7)}
.yBoxFrame.yBoxImgWrap .yBoxPrevImg::after{right:50px;-webkit-transform:translate(0,-50%) rotate(-135deg);transform:translate(0,-50%) rotate(-135deg)}
.yBoxFrame.yBoxImgWrap .yBoxNextImg::after{left:50px;-webkit-transform:translate(0,-50%) rotate(45deg);transform:translate(0,-50%) rotate(45deg)}

.yBoxFrame.yBoxImgWrap .yBoxNextImg:hover::after,
.yBoxFrame.yBoxImgWrap .yBoxPrevImg:hover::after{border-bottom-color:#fff;border-left-color:#fff}
.yBoxLoader{width:16px;height:16px;border-radius:50%;position:relative;animation:yBox-loader-circles 1s linear infinite;top:50%;margin:-8px auto 0 auto;zoom:.5}
.closeYboxOnFocus{width:0;height:0;position:absolute;background:0 0;padding:0;margin:0;border:none}

@keyframes yBox-loader-circles{
0%{box-shadow:0 -27px 0 0 rgba(0,0,0,.05),19px -19px 0 0 rgba(0,0,0,.1),27px 0 0 0 rgba(0,0,0,.2),19px 19px 0 0 rgba(0,0,0,.3),0 27px 0 0 rgba(0,0,0,.4),-19px 19px 0 0 rgba(0,0,0,.6),-27px 0 0 0 rgba(0,0,0,.8),-19px -19px 0 0 #fff}12.5%{box-shadow:0 -27px 0 0 #fff,19px -19px 0 0 rgba(0,0,0,.05),27px 0 0 0 rgba(0,0,0,.1),19px 19px 0 0 rgba(0,0,0,.2),0 27px 0 0 rgba(0,0,0,.3),-19px 19px 0 0 rgba(0,0,0,.4),-27px 0 0 0 rgba(0,0,0,.6),-19px -19px 0 0 rgba(0,0,0,.8)}25%{box-shadow:0 -27px 0 0 rgba(0,0,0,.8),19px -19px 0 0 #fff,27px 0 0 0 rgba(0,0,0,.05),19px 19px 0 0 rgba(0,0,0,.1),0 27px 0 0 rgba(0,0,0,.2),-19px 19px 0 0 rgba(0,0,0,.3),-27px 0 0 0 rgba(0,0,0,.4),-19px -19px 0 0 rgba(0,0,0,.6)}37.5%{box-shadow:0 -27px 0 0 rgba(0,0,0,.6),19px -19px 0 0 rgba(0,0,0,.8),27px 0 0 0 #fff,19px 19px 0 0 rgba(0,0,0,.05),0 27px 0 0 rgba(0,0,0,.1),-19px 19px 0 0 rgba(0,0,0,.2),-27px 0 0 0 rgba(0,0,0,.3),-19px -19px 0 0 rgba(0,0,0,.4)}50%{box-shadow:0 -27px 0 0 rgba(0,0,0,.4),19px -19px 0 0 rgba(0,0,0,.6),27px 0 0 0 rgba(0,0,0,.8),19px 19px 0 0 #fff,0 27px 0 0 rgba(0,0,0,.05),-19px 19px 0 0 rgba(0,0,0,.1),-27px 0 0 0 rgba(0,0,0,.2),-19px -19px 0 0 rgba(0,0,0,.3)}62.5%{box-shadow:0 -27px 0 0 rgba(0,0,0,.3),19px -19px 0 0 rgba(0,0,0,.4),27px 0 0 0 rgba(0,0,0,.6),19px 19px 0 0 rgba(0,0,0,.8),0 27px 0 0 #fff,-19px 19px 0 0 rgba(0,0,0,.05),-27px 0 0 0 rgba(0,0,0,.1),-19px -19px 0 0 rgba(0,0,0,.2)}75%{box-shadow:0 -27px 0 0 rgba(0,0,0,.2),19px -19px 0 0 rgba(0,0,0,.3),27px 0 0 0 rgba(0,0,0,.4),19px 19px 0 0 rgba(0,0,0,.6),0 27px 0 0 rgba(0,0,0,.8),-19px 19px 0 0 #fff,-27px 0 0 0 rgba(0,0,0,.05),-19px -19px 0 0 rgba(0,0,0,.1)}87.5%{box-shadow:0 -27px 0 0 rgba(0,0,0,.1),19px -19px 0 0 rgba(0,0,0,.2),27px 0 0 0 rgba(0,0,0,.3),19px 19px 0 0 rgba(0,0,0,.4),0 27px 0 0 rgba(0,0,0,.6),-19px 19px 0 0 rgba(0,0,0,.8),-27px 0 0 0 #fff,-19px -19px 0 0 rgba(0,0,0,.05)}100%{box-shadow:0 -27px 0 0 rgba(0,0,0,.05),19px -19px 0 0 rgba(0,0,0,.1),27px 0 0 0 rgba(0,0,0,.2),19px 19px 0 0 rgba(0,0,0,.3),0 27px 0 0 rgba(0,0,0,.4),-19px 19px 0 0 rgba(0,0,0,.6),-27px 0 0 0 rgba(0,0,0,.8),-19px -19px 0 0 #fff}}.yBoxVideo{width:100%;height:100%;vertical-align:top}
@media screen and (max-width:767px){
.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere{padding:5px;max-height:-webkit-calc(100vh - 10px);max-height:calc(100vh - 10px)}
.yBoxFrame.yBoxImgWrap img.yBoxImg{max-width:-webkit-calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:-webkit-calc(100vh - 20px);max-height:calc(100vh - 20px)}
.yBoxFrame.yBoxImgWrap .yBoxPrevImg::after{right:50%;width:14px;height:14px}.yBoxFrame.yBoxImgWrap .yBoxNextImg::after{left:50%;width:14px;height:14px}
.yBoxFrame.yBoxIframeWrap .insertYboxAjaxHere{left:5px;right:5px;top:5px;bottom:5px}
.yBoxFrame.yBoxImgWrap .yBoxNextImg,.yBoxFrame.yBoxImgWrap .yBoxPrevImg{width:50px;max-width:30%;height:50%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere{height:-webkit-calc(100vh - 10px);height:calc(100vh - 10px)}
.yBoxFrame.yBoxImgWrap{width:-webkit-calc(100vw - 10px);width:calc(100vw - 10px);height:-webkit-calc(100vh - 10px);height:calc(100vh - 10px)}
.yBoxImgZoom{display:flex;justify-content:center;align-items:center;/* background:#000; */overflow:hidden}
}
@media screen and (max-width:479px){.yBoxFrame.yBoxIframeWrap,.yBoxFrame.yBoxImgWrap{height:-webkit-calc(100vh - 80px);height:calc(100vh - 80px)}
.yBoxFrame.yBoxIframeWrap .insertYboxAjaxHere,.yBoxFrame.yBoxImgWrap .insertYboxAjaxHere{height:-webkit-calc(100vh - 80px);height:calc(100vh - 80px)}
.yBoxFrame.yBoxImgWrap img.yBoxImg,.yBoxIframe{max-height:-webkit-calc(100vh - 90px);max-height:calc(100vh - 90px)}
}