@charset "utf-8";
/* BLOG CSS
------------------------------------------ */
#blog {
	background: url(../img/blog/bg.jpg)  no-repeat right top;
}

#blog::before {
	position: absolute;
	content:"";
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	z-index: -1;
	opacity: 0;
	background: url(../img/blog/bg_pattern.png) no-repeat right top;
}

#blog.is-loaded::before {
	transition-delay: 5.5s;
	transition: all 1s ease;
	opacity: 1;
}

#news.is-loaded {
}

#news::before {
	position: absolute;
	content:"";
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	z-index: -1;
	opacity: 0;
	background: url(../img/news/bg_pattern.jpg)  no-repeat right top;
}

#news.is-loaded::before {
	transition-delay: 5.5s;
	transition: all 1s ease;
	opacity: 1;
}

@media (max-width: 991px){
	#blog {
		background-size: 65% auto;
	}
	#blog::before {
	    background-size: 60% auto;
	}

	#news,
	#news::before{
		background-size: 70% auto;
	}
}

@media (max-width: 768px){
	#blog {
		background-size: 80% auto;
		background-position: right -50px;
	}
	#blog::before {
		background-size: 65% auto;
    	background-position: right -40px;
	}
	#news,
	#news::before{
		background-size: 80% auto;
	}
}

@media (max-width: 480px){
	#blog {
		background-size: 100% auto;
		background-position: right -50px;
	}
	#blog::before {
		background-size: 80% auto;
    	background-position: 170% -55px;
	}
	#news,
	#news::before{
		background-size: 98% auto;
	}
}


@keyframes flashbg{
  50%{
    opacity: 0;
  }
}

/* listbox-blog ------------------------------- */
.bloglist .listbox-blog,
.bloglist .listbox-news {
	width: calc(100% + 3px);
}
.bloglist .listbox-blog .sbox,
.bloglist .listbox-news .sbox {
	width: 25%;
}
.blogdetail .listbox-blog {
	width: calc(100% + 5px);
}
.blogdetail .listbox-blog .sbox {
	width: 16.6666666%;
}

@media (max-width: 991px) {
	.bloglist .listbox-blog,
	.bloglist .listbox-news {
		width: calc(100% + 3px);
	}
	.bloglist .listbox-blog .sbox,
	.bloglist .listbox-news .sbox {
		width: 25%;
	}
	.bloglist .listbox-blog .sbox:nth-child(n + 5) {
		visibility: hidden;
		opacity: 0;
		height: 0;
	}
}
@media (max-width: 768px) {
	.bloglist .listbox-blog,
	.bloglist .listbox-news {
		width: calc(100% + 2px);
	}

	.bloglist .listbox-blog .sbox,
	.bloglist .listbox-news .sbox {
		width: 33.333333333333%;
	}
	.bloglist .listbox-blog .sbox:nth-child(n + 5) {
		display: block;
		visibility: visible;
		opacity: 1;
		height: auto;
	}
}
@media (max-width: 480px) {
	.bloglist .listbox-blog,
	.bloglist .listbox-news {
		width: calc(100% + 1px);
	}

	.bloglist .listbox-blog .sbox,
	.bloglist .listbox-news .sbox {
		width: 50%;
	}
}