﻿#Banner.B1z.S1 .Imgs img{display:block;width:100%;height:auto;}
#Wrap{display:grid;grid-template-columns:300px 1fr;gap:50px;margin:0 auto;padding:5rem 10%;box-sizing:border-box;}

#Body .Kind{display:flex;flex-direction:column-reverse;align-items:center;gap:5px;padding-bottom:30px;margin:0 auto;font-size:3rem;font-weight:500;text-align:center;}
#Body .Kind a{display:block;font-size:3rem;}
#Body .Header .Breadcrumb{display:flex;align-items:center;}
#Body .Header .Breadcrumb a,#Body .Header .Breadcrumb span,#Body .Header .Breadcrumb p,#Body .Header .Breadcrumb div{display:flex;align-items:center;margin:0 5px 0 0;font-size:1.3rem;text-decoration:none;}
#Body .Header .Breadcrumb span{position:relative;width:10px;text-indent:-99999px;}
#Body .Header .Breadcrumb span::before{content:"";position:relative;top:40%;left:0;width:0;height:0;border:5px solid transparent;border-width:3px 0px 3px 6px;border-style:solid;border-left-color:#000;}
.Pages .pagination{display:flex;justify-content:center;margin:20px auto;width:100%;text-align:center;}
.Pages .pagination li{margin:0 2.5px 5px;width:35px;line-height:35px;}
.Pages .pagination li a{display:block;border-width:1px;border-style:solid;}

#PhotoList .L1s{display:grid;grid-template-columns:repeat(5, 1fr);gap:3rem;}
#PhotoList .L1{padding:0;}
#PhotoList .L1:hover .Img1{cursor:zoom-in;}
#PhotoList .FadeIn{display:none;padding:0 10px;font-size:1.3rem;box-sizing:border-box;}
#PhotoList.B1z.S1 .Imgs img{display:block;width:100%;height:auto;aspect-ratio:2 / 1.5;object-fit: cover;}

#PhotoLightboxOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;}
#PhotoLightboxOverlay .LightboxMask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);cursor:pointer;}
#PhotoLightboxOverlay .LightboxContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:1000px;height:80vh;pointer-events:none;}
#PhotoLightboxOverlay .photo-swiper{padding-top:40px;padding-bottom:40px;width:100%;height:calc(100% - 80px);position:relative;pointer-events:auto;}
#PhotoLightboxOverlay .photo-swiper .swiper-slide{display:flex;align-items:center;justify-content:center;}
#PhotoLightboxOverlay .photo-swiper .swiper-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
#PhotoLightboxOverlay .photo-swiper .CloseBtn{position:absolute;top:0;right:1px;z-index:10000;color:#ffffff;cursor:pointer;font-size:4rem;line-height:1;transition:color 0.3s;}
#PhotoLightboxOverlay .photo-swiper .CloseBtn:hover{color:#ff0000;}
#PhotoLightboxOverlay .photo-swiper .swiper-pagination-fraction{position:absolute;bottom:-30px;top:auto;color:#ffffff;font-size:1.5rem;width:auto;left:50%;transform:translateX(-50%);background:transparent;z-index:10000;}
#PhotoLightboxOverlay .photo-swiper .swiper-button-next,#PhotoLightboxOverlay .photo-swiper .swiper-button-prev{color:#ffffff;--swiper-navigation-size:40px;}
#PhotoLightboxOverlay .photo-swiper .PhotoTitle{position:absolute;bottom:0;z-index:9999;width:100%;color:#fff;line-height:1.5;font-size:1.6rem;text-align:center;}

@media screen and (min-width:1250px){
}
@media screen and (min-width:960px) and (max-width:1249px){
	#Wrap{padding:5rem 7.5%;grid-template-columns:225px 1fr;gap:25px;min-height:300px;}
}
@media screen and (max-width:959px){
	#Wrap{padding:0;grid-template-columns:1fr;gap:10px;min-height:300px;}
	#Left{width:100%;overflow:hidden;}
	#Left #Side li{margin-bottom:0;}
	#Body{padding:0 5% 5% 5%;}
	#Body .Kind{padding-bottom:20px;font-size:2.2rem;}
	#Body .FadeIn h1.Title{padding:0;margin:0;}
	#PhotoLightboxOverlay .photo-swiper{padding-top:30px;padding-bottom:80px;height:calc(100% - 110px);}
	#PhotoLightboxOverlay .photo-swiper .swiper-button-next,#PhotoLightboxOverlay .photo-swiper .swiper-button-prev{position:absolute;top:auto;bottom:0;color:#ffffff;--swiper-navigation-size:28px;}
	#PhotoLightboxOverlay .photo-swiper .swiper-pagination-fraction{bottom:0;}
	#PhotoLightboxOverlay .photo-swiper .PhotoTitle{bottom:35px;font-size:1.4rem;text-align:justify;}
}
@media screen and (max-width:639px){
	#Wrap{min-height:200px;}
	#Body .Header .Breadcrumb{width:100%;}
	#PhotoList .L1s{grid-template-columns:repeat(3, 1fr);gap:0.5rem;}
}