@charset "utf-8";

.wrap_rct{word-break:break-all;height:100%;padding:70px 0;}
.wrap_rct::before{content:"";display:block;width:170px;height:100%;background:#042e6e;position:absolute;left:0;top:0;}

/*게시판*/
.wrap_rct > ul{display:flex;justify-content:flex-start;align-contents:center;flex-direction:column;}
.wrap_rct > ul > li{}
/*타이틀*/
.wrap_rct .title{width:170px;margin-top:-1px;border-bottom:1px solid #36588b;border-top:1px solid #36588b;position:relative;z-index:1;}
.wrap_rct > ul > li:first-child .title{margin-top:0;}
.wrap_rct .title:before{content:"";display:block;width:calc(100% + 20px);height:100%;background:transparent;position:absolute;top:0;left:0;}
.wrap_rct .title a{display:inline-block;width:100%;font-size:18px;color:#FFF;line-height:1;position:relative;padding:20px 15px;}
.wrap_rct .title a:after{content:"";display:block;width:10px;height:10px;position:absolute;top:calc(50% - 5px);right:0;background:url(/sites/style_guide/images/common/arrow_2_w.png) center no-repeat;transform:scale(0);}
.wrap_rct > ul > li.active .title a:after{transform:scale(1);}
.wrap_rct > ul > li.active .title:before{background:#007eff;}
/*목록*/
.wrap_rct .list{position:absolute;top:70px;left:0;width:100%;padding-left:265px;}
.wrap_rct .list ul{display:flex;justify-content:flex-start;align-contents:center;flex-wrap:wrap;}
.wrap_rct .list ul li{width:33.33333%;padding:0 0 2% 2%;}
/*noData*/
.wrap_rct .list .nodata{font-size:18px;text-align:center;padding:30px 0;width:100%}
/*썸네일*/
.wrap_rct .thumb{display:none;}
.wrap_rct .thumb img{}
/*컨텐츠*/
.wrap_rct .con{}
.wrap_rct a.subject{display:block;padding:35px;text-align:center;background:#FFF;position:relative;}
.wrap_rct a.subject:before{content:"";display:block;width:100%;height:100%;position:absolute;bottom:0;right:0;border:3px solid #0b4da2;filter:alpha(opacity=0);opacity:0;}
.wrap_rct a.subject:after{content:"";display:block;width:35px;height:35px;position:absolute;bottom:0;right:0;background:#0b4da2 url(/sites/style_guide/images/common/arrow_2_w.png) center no-repeat;transform:scale(0);}
/*제목*/
.wrap_rct .subjectText{position:relative;font-size:18px;font-weight:400;color:#7c7c7c;line-height:1.3;height:50px;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;}
.wrap_rct .subjectText:after{content:"";display:block;width:0;height:1px;background:#000;margin-top:3px;}
/*내용*/
.wrap_rct .content{display:none;}
/*날짜*/
.wrap_rct .date{font-size:16px;color:#848484;font-family:'Montserrat', sans-serif;padding-top:10px;}
/*더보기*/
.wrap_rct .more{text-indent:-9999px;position:absolute;left:75px;bottom:70px;width:30px;height:30px;background:url(/sites/style_guide/images/common/plus_3_w.png) center no-repeat;}
/*활성화*/
.wrap_rct .list,
.wrap_rct .more{display:none}
.wrap_rct > ul > li.active .list,
.wrap_rct > ul > li.active .more{display:block}
@media only screen and (max-width:1280px){
	.wrap_rct .list{padding-left:200px;}
}
@media only screen and (max-width:1024px){
	.wrap_rct{padding:35px 0;}
	.wrap_rct .list{top:35px;}
	.wrap_rct .list ul li{width:50%;}
	.wrap_rct a.subject{padding:20px;}
}
@media only screen and (max-width:768px){
	.wrap_rct::before{display:none;}

	.wrap_rct > ul{flex-direction:row;}

	.wrap_rct .title{width:auto;margin-top:0;border:0;margin-right:2px;}
	.wrap_rct .title:before{display:none;}
	.wrap_rct .title a{background:#888;padding:12px 15px;font-size:16px;}
	.wrap_rct .title a:after{display:none;}
	.wrap_rct > ul > li.active .title a{background:#007eff;}

	.wrap_rct .list{padding:15px;background:#FFF;top:95px;}
	.wrap_rct .list ul li{width:100%;padding:0;}
	.wrap_rct .list ul li:nth-child(5n){display:block;}

	.wrap_rct a.subject{padding:10px;text-align:left;}
	.wrap_rct .subjectText{height:auto;position:relative;font-size:16px;color:#7c7c7c;line-height:1.3;width:calc(100% - 90px);white-space:nowrap;}
	.wrap_rct .date{position:absolute;right:5px;top:4px;padding-top:0;}

	.wrap_rct .more{left:auto;bottom:auto;right:0;top:40px;background:url(/sites/style_guide/images/common/plus_3_b.png) center no-repeat;}
}
@media only screen and (max-width:380px){
	.wrap_rct .subjectText{width:100%;}
	.wrap_rct .date{display:none;}
}


/*HOVER****************************************/
@media only screen and (min-width:1025px){
	.wrap_rct > ul > li:hover .title:before{background:#222;}
	.wrap_rct .title a:hover:after,
	.wrap_rct a.subject:hover:before,
	.wrap_rct a.subject:hover:after{transform:scale(1);transition: all 0.3s cubic-bezier(0.2, 0, 0.3, 1);}
	.wrap_rct a.subject:hover:before{filter:alpha(opacity=100);opacity:1;}
}