/* blog */
/*-------------------------------------------
list
-------------------------------------------*/
#list{
	margin:0; padding:0; list-style:none;
}
	#list .item{
		float:left;
		width:33.33333%;
		padding:0 40px 50px;
	}
	#list .item:nth-of-type(3n+1){padding-left:0;}
	#list .item:nth-of-type(3n+2){padding-left:20px; padding-right:20px;}
	#list .item:nth-of-type(3n+3){padding-right:0;}
		#list .item a{
			position:relative;
			display:block;
			color:#fff;
			border-radius:5px;
			overflow:hidden;
			box-shadow:0 0 8px rgba(0,0,0,.2);
		}
			#list .item figure{
				width:100%;
				height:0;
				padding-bottom:70%;
				background-repeat:no-repeat;
				background-position:50% 50%;
				background-color:#fff;
				background-size:cover;
			}
			#list .item .desc{
				position:absolute; left:0; top:0;
				width:100%; height:100%;
				background:url(../images/blog-overlay.png) 0 bottom repeat-x;
				color:#fff;
				transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s;
			}
			#list .item a:hover .desc{
				background-image:url(../images/blog-overlay2.png);
			}
			#list .item .desc span{
				position:absolute; bottom:0;
				padding:10px;
			}
@media screen and (max-width:812px){/* iX Landscape */
	#list .item{padding:0 30px 40px;}
	#list .item:nth-of-type(3n+2){padding-left:15px; padding-right:15px;}
}
@media screen and (max-width:736px){/* i6 Plus Landscape */
	#list .item{padding:0 20px 30px;}
	#list .item:nth-of-type(3n+2){padding-left:10px; padding-right:10px;}
}
@media screen and (max-width:414px){/* i6,i7,i8 Plus */
	#list .item{width:50%; padding:0 20px 25px;}
	#list .item:nth-of-type(3n+1),
	#list .item:nth-of-type(3n+2),
	#list .item:nth-of-type(3n+3){padding-left:0; padding-right:0;}
	#list .item:nth-of-type(odd){padding-right:15px;}
	#list .item:nth-of-type(even){padding-left:15px;}
}
@media screen and (max-width:375px){/* i6,i7,i8 */
	#list .item{padding-bottom:20px;}
	#list .item:nth-of-type(odd){padding-right:10px;}
	#list .item:nth-of-type(even){padding-left:10px;}
}
@media screen and (max-width:320px){/* i5 */
	#list .item{width:100%;}
	#list .item:nth-of-type(odd){padding-left:10px;}
	#list .item:nth-of-type(even){padding-right:10px;}
}

/*-------------------------------------------
view
-------------------------------------------*/
#blog-detail{
	
}
	#blog-detail .blogTitle{
		margin:0; 
		color:#111;
		padding:15px 0; 
		border-bottom:2px solid #e1c9af;
	}
		#blog-detail .blogTitle time{
			color:#777;
		}
		#blog-detail .blogTitle strong{
			color:#333;
		}
		#blog-detail .blogTitle h3{
			margin:0;
			font-size:200%; line-height:1.2;
			color:#000;
		}
	#blog-detail .blogBody{
		word-wrap:break-word; word-break:normal;
		padding:25px 0;
		font-family:inherit !important;
	}
		#blog-detail .blogBody p,
		#blog-detail .blogBody span{
			font-family:inherit !important;
		}
		#blog-detail .blogBody img{
			display:block; 
			margin:10px auto;
			width:100% !important;max-width:100% !important;
			height:auto !important;
			transition:.3s; -webkit-transition:.3s;
		}
		#blog-detail .blogBody .iframeWrap{
			position:relative;
			width:100%;
			height:0;
			padding-bottom:56.25%;
			transition:.3s; -webkit-transition:.3s;
		}
			#blog-detail .blogBody .iframeWrap iframe{
				position:absolute; left:0; top:0;
				width:100%;
				height:100%;
				transition:.3s; -webkit-transition:.3s;
			}
			#blog-detail .blogBody iframe{
				display:block;
				margin:0 auto;
			}
	#blog-detail .files{
		border-top:1px solid #ddd;
	}
		#blog-detail .files ul{
			margin:0; padding:10px 0; list-style:none;
			line-height:24px;
		}
			#blog-detail .files ul a{
				background:url(../images/icon-file.png) 5px 50% no-repeat;
				padding-left:25px;
				color:#09F; font-size:13px;
			}
@media screen and (max-width:812px){/* iX Landscape */

}
@media screen and (max-width:414px){/* i6,i7,i8 Plus */
	#blog-detail .blogTitle h3{
		font-size:150%;
		margin-top:10px;
	}
}
@media screen and (max-width:320px){/* i5 */
	#blog-detail .blogTitle h3{
		font-size:130%;
	}
}