#wrap { min-height: calc(100vh - 320px); }


#contents { 
	width: 100%; height: auto;
	padding: 0px 110px;
	margin-top: 60px;
	box-sizing: border-box;
	overflow-x: hidden;
}
#contents .gutter-sizer { width: 3vw; }
#contents .grid-sizer,
#contents .item { width: calc(20% - 3vw); }
#contents .item--width2 { width: calc(40% - 3vw); }


#contents .masonry {
	width: calc(100% + 3vw);
	margin: 0 0;
	overflow: hidden;
}

#contents .masonry:after {
  content: '';
  display: block;
  clear: both;
}



#contents .item { margin-bottom: 3vw; box-sizing: border-box; }
#contents .item > div { width: 100%; height: auto; }
#contents .item > div .img_box { width: 100%; height: auto; box-sizing: border-box; }
#contents .item > div .img_box img.bg {
	position: relative; display: inline-block;
	width: 100%;
	opacity: 1; z-index: 2;
	float: left;
}


#contents .item > div:hover .img_hover { opacity: 1; }
#contents .item > div .img_hover {
	opacity: 0;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	
	
	background-image: url(../images/contents_bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-sizing: border-box;
	z-index: 2;
}
#contents .item > div .img_hover > div {
	left: 0px; top: 50%;
	width: 100%; height: auto; max-height: 100%;

	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	box-sizing: border-box;
}

#contents .item > div .img_hover > div > .content_title {
	width: 100%; height: auto; line-height: 1.5;
	padding: 0px 30px;
	box-sizing: border-box;
}

#contents .item > div .img_hover > div > .content_title > span {
	width: auto; height: auto; max-height: 4em; line-height: 2;
	font-size: 16px; color: #2a2a2a; text-align: center;
	padding-bottom: 4px;
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: box; 
	overflow:hidden; 
	vertical-align:top; 
	text-overflow: ellipsis; 
	word-break:break-word; 
	-webkit-box-orient:vertical; 
	-webkit-line-clamp: 2;
    letter-spacing: 0px;
	left: 50%;
	-webkit-transform: translate(-50%, 0%) skew(-0.1deg);
	-ms-transform: translate(-50%, 0%) skew(-0.1deg);
	transform: translate(-50%, 0%) skew(-0.1deg);
	box-sizing: border-box;
}



#contents .item > div .img_hover > div > .content_title > span::after {
	content: '';
	position: absolute; bottom: 0px; left: 0px;
	width: 100%;; height: 1px;
	background-color: #666666;
	z-index: 10;

	box-sizing: border-box;
}

#contents .item > div .img_hover > div > .content_sub {
	width: 100%; height: auto; line-height: 2;
	padding: 0px 30px;
	margin-top: 5px;
	box-sizing: border-box;
}

#contents .item > div .img_hover > div > .content_sub > span {
	max-width: 100%; height: auto; max-height: 4em; line-height: 2;
	font-size: 13px; color: #5a5a5a; text-align: center;

	display: -webkit-box; 
	display: -ms-flexbox; 
	display: box; 
	overflow:hidden; 
	vertical-align:top; 
	text-overflow: ellipsis; 
	word-break:break-word; 
	-webkit-box-orient:vertical; 
	-webkit-line-clamp: 2;
    letter-spacing: 0px;
	left: 50%;
	-webkit-transform: translate(-50%, 0%) skew(-0.1deg);
	-ms-transform: translate(-50%, 0%) skew(-0.1deg);
	transform: translate(-50%, 0%) skew(-0.1deg);
	box-sizing: border-box;
}



#filter {
	width: 100%; height: auto;
	padding: 0px 110px;
	box-sizing: border-box;
}

#filter > div { width: auto; height: auto; min-height: 20px; line-height: 20px; padding-left: 30px; box-sizing: border-box; }
#filter .filter_icon {
	top: 0px; left: 0px;
	width: auto; height: 100%;
	cursor: pointer;
	box-sizing: border-box;
}
#filter .filter_icon.on { padding-right: 0px; }

#filter .filter_icon > img {
	width: auto; height: 17px;
	margin-top: 1px;
	box-sizing: border-box;
}


#filter .filter_icon > img.on { display: none; }
#filter .filter_icon > img.off { display: inline-block; }

#filter .filter_icon.on > img.on { display: inline-block; height: 10px; margin-top: 5px; margin-left: 0px; }
#filter .filter_icon.on > img.off { display: none; }


#filter .filter_data {
	width: 100%; height: auto; line-height: 18px;
	
}
#filter .filter_data .default { font-size: 16px; cursor: pointer; color: #000; letter-spacing: 1px; }
#filter .filter_data.off .default { display: inline-block; }
#filter .filter_data.on .default { display: none; }

#filter .filter_data.off a { display: none; }
#filter .filter_data.on a { display: inline-block; }

#filter .filter_data a:first-child { margin-left: 0px; }
#filter .filter_data a {
	letter-spacing: 1px;
	font-size: 14px;  color: #6a6a6a;
	margin-left: 35px;
}

#filter .filter_data a.active::after {
	content: '';
	position: absolute; bottom: 0px; left: 0px;
	width: 100%; height: 1px; background-color: #6a6a6a;
}




@media (max-width: 479px){ 
	#wrap { min-height: calc(100vh - 235px); }
	#filter { padding: 0px 15px; }
	#contents { padding: 0px 15px; margin-top: 45px; }


	#contents .item > div .img_hover > div > .content_title { padding: 0px 15px; }
	#contents .item > div .img_hover > div > .content_sub { padding: 0px 15px; }

	#contents .item > div .img_hover > div > .content_title > span { font-size: 12px; }
	#contents .item > div .img_hover > div > .content_sub > span { font-size: 11px; }

	#filter .filter_data .default { font-size: 12px; }
	#filter .filter_data a { font-size: 12px; margin-left: 25px; }
	#filter > div { padding-left: 25px; }


	#contents .gutter-sizer { width: 3vw; }
	#contents .grid-sizer,
	#contents .item { width: calc(50% - 3vw); }
	#contents .item--width2 { width: calc(50% - 3vw); }
	#contents .masonry { width: calc(100% + 3vw); }
	#contents .item { margin-bottom: 3vw; }

}

@media (max-width: 749px) and (min-width: 480px) { 
	#wrap { min-height: calc(100vh - 245px); }
	#filter { padding: 0px 30px; }
	#contents { padding: 0px 30px; margin-top: 45px; }


	#contents .item > div .img_hover > div > .content_title { padding: 0px 15px; }
	#contents .item > div .img_hover > div > .content_sub { padding: 0px 15px; }

	#contents .item > div .img_hover > div > .content_title > span { font-size: 12px; }
	#contents .item > div .img_hover > div > .content_sub > span { font-size: 11px; }

	#filter .filter_data .default { font-size: 12px; }
	#filter .filter_data a { font-size: 12px; margin-left: 25px; }
	#filter > div { padding-left: 25px; }


	#contents .gutter-sizer { width: 3vw; }
	#contents .grid-sizer,
	#contents .item { width: calc(50% - 3vw); }
	#contents .item--width2 { width: calc(50% - 3vw); }
	#contents .masonry { width: calc(100% + 3vw); }
	#contents .item { margin-bottom: 3vw; }
}

@media (max-width: 1023px) and (min-width: 750px) { 
	#wrap { min-height: calc(100vh - 256px); }

	#filter { padding: 0px 30px; }
	#contents { padding: 0px 30px; margin-top: 45px; }


	#contents .item > div .img_hover > div > .content_title { padding: 0px 15px; }
	#contents .item > div .img_hover > div > .content_sub { padding: 0px 15px; }

	#contents .item > div .img_hover > div > .content_title > span { font-size: 12px; }
	#contents .item > div .img_hover > div > .content_sub > span { font-size: 11px; }

	#filter .filter_data .default { font-size: 12px; }
	#filter .filter_data a { font-size: 12px; margin-left: 25px; }
	#filter > div { padding-left: 25px; }


	#contents .gutter-sizer { width: 2vw; }
	#contents .grid-sizer,
	#contents .item { width: calc(33.333% - 2vw); }
	#contents .item--width2 { width: calc(66.666% - 2vw); }
	#contents .masonry { width: calc(100% + 2vw); }
	#contents .item { margin-bottom: 2vw; }
}


@media (max-width: 1279px) and (min-width: 1024px) { 
	#filter { padding: 0px 60px; }
	#contents { padding: 0px 60px; margin-top: 45px; }


	#contents .item > div .img_hover > div > .content_title { padding: 0px 15px; }
	#contents .item > div .img_hover > div > .content_sub { padding: 0px 15px; }

	#contents .item > div .img_hover > div > .content_title > span { font-size: 14px; }
	#contents .item > div .img_hover > div > .content_sub > span { font-size: 12px; }

	#filter .filter_data .default { font-size: 14px; }


	#contents .gutter-sizer { width: 2vw; }
	#contents .grid-sizer,
	#contents .item { width: calc(25% - 2vw); }
	#contents .item--width2 { width: calc(50% - 2vw); }
	#contents .masonry { width: calc(100% + 2vw); }
	#contents .item { margin-bottom: 2vw; }

}




/*
	@media (max-width: 479px){ 

	}

	@media (max-width: 749px) and (min-width: 480px) { 

	}

	@media (max-width: 1023px) and (min-width: 750px) { 

	}


	@media (max-width: 1279px) and (min-width: 1024px) { 

	}
*/