@charset "utf-8";

.xe-widget-wrapper{ overflow:visible; display:flex; }
.xe-widget-wrapper > div{ width:100%; display:flex; }


/***************webzine_type***************/
.spw_pt_wrap{ align-content:flex-start; width:100%; }
.spw_pt{ min-height:200px; position:relative; }
.spw_pt_box{ overflow:hidden; transition:background-color 0.6s, box-shadow  0.6s, z-index 0.6s, transform 0.1s; }
.spw_pt_box:hover{ background-color: #f8f8f8; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.2); z-index: 16; transform:scale(1.008); }
.spw_pt_wrap.black .spw_pt_box:hover{ background-color: #232323; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.35); z-index: 16; transform:scale(1.008); }

.spw_txt{ width:67%; padding:30px 20px; }
.spw_title{ margin-bottom:20px; }
.spw_title a{ font-size:18px; color:#333; }
.spw_desc{ font-size:13px; line-height:1.5; font-weight:300; color:#666; }
.spw_pt_wrap.black .spw_title a{ color:#e6e6e6; }
.spw_pt_wrap.black .spw_desc{ color:#aaa; }

.spw_tmb{ width:33%; display:block; opacity:0; transform:translate(30%, 0); transition:opacity 0.3s, transform 0.6s; background-size:cover; background-position:center; background-repeat:no-repeat; }
.spw_pt:hover .spw_tmb{ opacity:1; transform:translate(0, 0); transition:opacity 0.3s, transform 0.6s; }
.spw_tmb img{ display:block; width:100%; height:auto; }



@media(max-width:1080px){
	.spw_pt.col-03{ width:50%; }
	.spw_pt{ min-height:250px; }
	
}

@media(max-width:650px){
	.spw_pt.col-03{ width:100%; }
	.spw_txt{ width:60%; padding:20px 15px; }
	.spw_tmb{ width:40%; }
}






/***************gallery_type***************/
.spg_pt_wrap{ align-content:flex-start; width:100%; justify-content:center; }
.spg_pt{ position:relative; }
.spg_pt_box{ position:relative; overflow:hidden; height:0; padding-bottom:61.53846153846154%; }

.spg_txt{ padding:30px 20px; transition:background-color 0.4s; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; }
.spg_pt_box:hover .spg_txt{ background-color:rgba(255,255,255,0.75); }
.spg_pt_wrap.black .spg_pt_box:hover .spg_txt{ background-color:rgba(36,36,36,0.75); transition:background-color 0.4s; }
.spg_title{ margin-bottom:20px; opacity:0; transform:translate(-30px, 0); transition:opacity 0.3s, transform 0.6s; }
.spg_pt_box:hover .spg_title{ opacity:1; transform:translate(0, 0); transition:opacity 0.3s, transform 0.6s; }
.spg_title span{ font-size:18px; color:#333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spg_desc{ font-size:13px; line-height:1.5; font-weight:300; opacity:0; transform:translate(-30px, 0); transition:opacity 0.3s, transform 0.6s; color:#666; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical; overflow: hidden; }
.spg_pt_box:hover .spg_desc{ opacity:1; transform:translate(0, 0); transition:opacity 0.3s, transform 0.6s; }
.spg_pt_wrap.black .spg_title span{ color:#e6e6e6; }
.spg_pt_wrap.black .spg_desc{ color:#aaa; }

.spg_tmb{ position:absolute; z-index:0; top:0; left:0; width:100%; height:100%; display:block; background-size:cover; background-position:center; background-repeat:no-repeat; transition:transform 0.4s; }
.spg_pt_box:hover .spg_tmb{ transform:scale(1.05); transition:transform 0.4s; }



@media(max-width:850px){
	.spg_pt.col-03{ width:50%; }	
}

@media(max-width:650px){
	/*.spg_pt.col-03{ width:100%; }*/
}