#ogd-lb {
position: fixed;
inset: 0;
background: rgba(0,0,0,.95);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
#ogd-lb-wrap {
position: relative;
line-height: 0;
}
#ogd-lb-img {
display: block;
max-width: 90vw;
max-height: 88vh;
object-fit: contain;
border-radius: 4px;
}
#ogd-lb-close {
position: fixed;
top: 16px;
right: 20px;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
appearance: none;
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
opacity: .7;
padding: 6px;
}
#ogd-lb-close:hover { opacity: 1; } #ogd-lb-prev,
#ogd-lb-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: clamp(36px, 4vw, 52px);
height: clamp(56px, 6vw, 84px);
background: rgba(0,0,0,.5);
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
appearance: none;
color: #fff;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 1;
}
#ogd-lb-prev { left: 0; }
#ogd-lb-next { right: 0; }
#ogd-lb.loading #ogd-lb-prev,
#ogd-lb.loading #ogd-lb-next { display: none; }
#ogd-lb-prev svg,
#ogd-lb-next svg {
width: clamp(24px, 2.8vw, 38px);
height: clamp(24px, 2.8vw, 38px);
fill: currentColor;
display: block;
} #ogd-lb.ogd-lb-room #ogd-lb-prev,
#ogd-lb.ogd-lb-room #ogd-lb-next {
width: clamp(40px, 3vw, 48px);
height: clamp(40px, 3vw, 48px);
background: none;
opacity: .8;
}
#ogd-lb.ogd-lb-room #ogd-lb-prev {
left: auto;
right: calc(100% + 50px);
}
#ogd-lb.ogd-lb-room #ogd-lb-next {
right: auto;
left: calc(100% + 50px);
}
#ogd-lb.ogd-lb-room #ogd-lb-prev svg,
#ogd-lb.ogd-lb-room #ogd-lb-next svg {
width: clamp(40px, 3vw, 48px);
height: clamp(40px, 3vw, 48px);
}
#ogd-lb.ogd-lb-room #ogd-lb-prev:hover,
#ogd-lb.ogd-lb-room #ogd-lb-next:hover {
opacity: 1;
} @media (max-width: 1024px) {
#ogd-lb-img {
max-width: 94vw;
max-height: 80vh;
}
#ogd-lb-close {
top: 12px;
right: 16px;
font-size: 30px;
}
}