@charset "utf-8";
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

/****************************	Write****************************/
.btn_confirm {
	text-align:center;
	padding:40px 0;
}
.bo_w_flie {
	margin-top: 5px;
}
/****************************	Viewer****************************/
#bo_v .title {font-weight:800; text-align:center; padding:20px 0; font-size:25px; border-bottom:1px solid rgba(0,0,0,.5);}
#bo_v .title > * {display:block;}
#bo_v .title span {font-size:.7em; padding:10px 0 0; opacity:.7;}
#bo_v .view-grid {display:table; table-layout:fixed; padding:20px 0; width:100%;}
#bo_v .view-grid > * {display:table-cell;}
#bo_v .view-grid .visual {width:500px; vertical-align:top; padding:0 20px 0 0;}

#bo_v .view-grid .info {vertical-align:top; padding:0 0 0 20px; border-left:1px solid rgba(0,0,0,.3);}
#bo_v .view-grid .info dl + dl {margin-top:30px;}
#bo_v .view-grid .info dt {display:inline-block; padding:5px 10px; background:#262931; color:#fff; margin-bottom:15px; min-width:4em;}
#bo_v .view-grid .info dd {margin-left:0;}

#bo_v .view-grid .info dd {font-size:17px;}
#bo_v .view-grid .info dd i {display:inline-block; width:1em; height:1em; border:1px solid #000;}
#bo_v .view-grid .info .descript {display:block; margin:30px 0; border:1px solid rgba(0,0,0,.3); border-left-width:0; border-right-width:0; padding:20px 0; line-height:1.5; font-size:15px;}
#bo_v .view-grid .info .descript .cont {padding-bottom:20px;}
#bo_v .view-grid .info .descript .notice {color:red; font-size:13px;}
#bo_v .view-grid .info .descript .cont + .notice {padding-top:20px; border-top:1px solid rgba(0,0,0,.1);}
#bo_v .view-grid .info dd textarea {display:block; position:relative; width:100% !important; height:170px; font-size:12px; line-height:1.5;}

@media all and (max-width:1024px) {
	#bo_v .view-grid .visual {width:300px;}
}
@media all and (max-width:640px) {
	#bo_v .view-grid, {display:table; table-layout:fixed; padding:20px 0; width:100%;}
	#bo_v .view-grid > *,
	#bo_v .view-grid .visual,
	#bo_v .view-grid .info {display:block; width:auto; padding:0; border:none;}
	#bo_v .view-grid .info .descript {font-size:13px;}
}



/****************************	List****************************/
#bo_sch {text-align:center;}
#bo_cate {
	text-align:center;
}
#bo_cate li {
	display:inline-block;
	vertical-align:middle;
	margin:0.2em;
}
#bo_cate li a {
	border-radius:9em;
}
.trpg-card-list {
	display:block;
	position:relative;
	text-align:center;
	padding:20px 0;
	overflow:hidden;
}
.trpg-card-list li {
	display:inline-block;
	position:relative;
	max-width:47%;
	padding:5px;
	box-sizing:border-box;
}
.trpg-card-list .trpg-card-frame {display:block; position:relative; width:100%; z-index:0; background:rgba(0,0,0,.1);}
.trpg-card-list .trpg-card-frame .pad {position:relative; z-index:-1;}
.trpg-card-list .trpg-card-frame a {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;}
.trpg-card-list .trpg-card-frame a > em {
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	height:100%;
	transform:translate(-50%, -50%) scale(1);
	-webkit-transform:translate(-50%, -50%) scale(1);
	background:no-repeat 50% 0%;
	background-size:cover;
}
.trpg-card-list .trpg-card-frame a:hover > em {
	transform:translate(-50%, -50%) scale(1);
	-webkit-transform:translate(-50%, -50%) scale(1);
}
.trpg-card-list li a .cover {
	display:block;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	font-size:16px;
	overflow:hidden;
}
.trpg-card-list li a strong {display:none;}
.trpg-card-list li a .cover > * {display:block; position:relative;font-size:1em; word-break:keep-all; line-height:1.2; padding:.7em 1.5em;}
.trpg-card-list li a .cover .subject {text-align:left; transform:translateY(100%); -webkit-transform:translateY(100%);}
.trpg-card-list li a:hover .cover > * {transform:translate(0); -webkit-transform:translate(0);}


@media all and (max-width:740px) {
	.trpg-card-list li a .cover {font-size:15px;}
}
@media all and (max-width:540px) {
	.trpg-card-list li a .cover{font-size:14px;}
}
@media all and (max-width:430px) {
	.trpg-card-list li a .cover {font-size:13px;}
}