.box-wrap {
	max-width: 75%;
	min-width: 300px;
	margin: 30px auto;
	padding: 0;
}
.box {
	background: white;
	border: 1px solid #98E;
	width: 330px;
	margin: 8px 0;
	padding: 0;
}
.box h2 {
	padding: 3px 7px;
	font-size: 12pt;
}
.box ul li {
	list-style: none;
	margin: 0;
}
.mainBox {
	background: transparent;
	border: 1px solid #008080;
	width: 100%;
	margin-bottom: 5px;
}
.mainBox h2 {
	background: #59A;
	color: white;
}
.box.image {
	background: transparent;
	border: none;
	width: 100%;
	min-height: 250px;
	max-height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
}
.box img {
	float: left;
	margin: 5px;
	border-radius: 10px;
}
.icon {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100px;
}
.imageofnow {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
}
.videoofnow {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	max-height: 300px;
}
.quoteofnow {
	text-align: center;
	font-size: 20px;
	font-family: -WEBKIT-PICTOGRAPH;
}
.description {
	text-align: center;
	font-weight: bolder;
}
.boardlinksurl {
	float: left;
	margin-right: 100px;
}


.box.left {
	background: #efe;
	color: #060;
	border: 1px solid #060;
	float: left;
	width:100%
}
.box.right {
	width: 0%;
	float: right;
}

.box.boards, .box.right{
	background: #eef;
	color: #006;
	border: 1px solid #006;
}

.box.boards{
	width: 100%;
}

.box.boards .list
{
	display: flex;
	justify-content: space-between; /* Evenly space links with max space between */
	gap: 10px; /* Space between links */
	flex-wrap: wrap; /* Wrap to next line if needed */
	padding: 10px;
}

.box h2 {
	padding: 3px 7px;
	font-size: 12pt;
}
.box.left h2 {
	background: #9C6;
	color: #060;
}
.box.right h2, .box.boards h2{
	background: #59A;
	color: white;
}
.box img {
	float: none;
	margin: 10px auto;
}

.recent-images {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px;
}

.recent-images img{
	border-radius: 0 !important;
	margin: 0 !important;
}

.box ul {
	padding: 2px 15px;
}
.box ul li {
	list-style: none;
	margin: 0;
}

.image-item {
	position: relative; /* Required for absolute positioning of overlay */
	width: fit-content; /* Ensure container fits image size */
}

.image-item img {
	display: block; /* Remove any default spacing */
	transition: opacity 0.5s ease; /* Smooth dimming effect */
}

.image-item img:hover {
	opacity: 0.3; /* Dim image on hover, as in W3Schools example */
}

.image-item .overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0; /* Hidden by default */
	transition: opacity 0.5s ease; /* Smooth fade-in effect */
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px; /* Adjust based on your design */
	text-align: center;
	padding: 5px;
	box-sizing: border-box;
}

.image-item:hover .overlay {
	opacity: 1; /* Show overlay on hover */
}

.overlay .post-name {
	position: absolute;
	top: 5px;
	right: 5px;
	color: white;
	font-size: 14px;
	text-align: right;
}

.overlay .post-snippet {
	position: absolute;
	bottom: 5px;
	left: 5px;
	right: 5px;
	color: white;
	font-size: 12px;
	text-align: left;
	max-height: 60%; /* Limit height to avoid overlapping post-name */
	overflow: auto; /* Scroll if too long */
}

.news-header{
	display: flow-root;
}

.news-header .ban{
	display: table;
	height: 150px;
	margin-top: 12px;
	margin-bottom: 0px;
	float: right;
	width: 100%;
	max-width: 640px;
}

.news-header .ban p {
	overflow-y: auto;
	height: 110px;
	margin: 4px;
}

.news-header .board_image{
	float:left;
}

#foot{
	height:30px;
	overflow:hidden;
	position: relative;
}
#foot > #foot_oc {
	position: absolute;
	height:30px;
	top:0;
	left:0;
	width: 3884px;
	background: url(static/footer_oc.png);
	-moz-transition:  opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
	-webkit-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-webkit-transform: translate3d(0,0,0);

	-webkit-animation: moveSlideshow 60s linear infinite;
	-moz-animation:    moveSlideshow 60s linear infinite;

}

@-webkit-keyframes moveSlideshow {
	0%   {
		-webkit-transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-1911px);
	}
}
@-moz-keyframes moveSlideshow {
	0% { left: 0; }
	100% { left: -1911px; }
}

.board_image {
	width: 400px;
	max-height: 150px;
	object-fit: cover;
}

@media (max-width: 550px) {
	.board_image {
		width: 100%;
		height: auto;
		max-height: 150px;
	}
}

.box-wrap.news-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
	padding: 10px;
	margin-top: 0px;
}

.box-container{
	max-width: 1450px;
	margin: auto;
}

.boardlist .sub {
	margin-right: 4px;
}

@media (max-width: 550px) {
	.box-wrap {
		max-width: 90%;
	}
}

h1{
	margin-top: 30px !important;
}