@charset "utf-8";

/*========================================*/
/* Green Gable by DesignerSOL.co.kr
 * nanumfine@naver.com
 /*========================================*/

.floatLeft{float:left;}
.floatRight{float:right;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* designsol-table */
.designsol-table-wrapper{padding:30px}
.designsol-table{width:100%}
.designsol-table td{padding:3px 0}
.designsol-table .time-area{text-align:right}
.designsol-table .title-category,
.designsol-table .title-group,
.designsol-table .title{float:left; height:18px}

.designsol-table .title-area {width:75%}
.designsol-table .time-area{width:25%}
.designsol-table .title-category{width:20%}
.designsol-table .title-group{width:80%}
.designsol-table .category{max-width:95%;display:block; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; height:18px} 
.designsol-table .title{max-width:80%;display:block; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; height:18px}

@media (max-width:480px) {
	.designsol-table .title-area {width:70%}
	.designsol-table .time-area{width:30%}
	.designsol-table .title{max-width:70%;white-space:normal}
}
@media (max-width:767px) {
	.designsol-table-wrapper{padding:30px 15px}
}
@media (min-width:768px) and (max-width:991px) {
	.designsol-table-wrapper{padding:30px 20px}
}

/* designsol-list */
.designsol-list li{padding:3px 3px}
.designsol-list .time-area{text-align:right}

.designsol-list .title-area,
.designsol-list .time-area{float:left}
.designsol-list .title-category, 
.designsol-list .title-group,
.designsol-list .title{float:left; height:18px}

.designsol-list .title-area {width:75%}
.designsol-list .time-area{width:25%}

.designsol-list .title-category{width:20%}
.designsol-list .title-group{width:80%}

.designsol-list .category{max-width:95%;display:block; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; height:18px}
.designsol-list .title{max-width:75%;display:block; overflow: hidden; white-space:nowrap; text-overflow:ellipsis}

@media (max-width:480px) {
	.designsol-list .title-area {width:70%}
	.designsol-list .time-area{width:30%}
	.designsol-list .title{max-width:70%}
}

/* designsol-webzine */
.designsol-webzine li{position: relative}
.designsol-webzine .thumb-area{max-width:50%; max-height:190px}
.designsol-webzine .thumb-area .thumb{width:100%; height:100%}
.designsol-webzine .thumb-area .thumb img{max-height:190px; min-height: 95px}
.designsol-webzine .content-area{position:absolute;bottom:20px;margin-left:50%;width:50%;padding:0 30px}
.designsol-webzine .content-area .title-area{margin-bottom:10px}
.designsol-webzine .content-area .title-area .title{display:block;float:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500; height:20px;}
.designsol-webzine .content-area .text{font-size:13px;line-height:22px;max-height:44px;overflow:hidden}

@media (max-width: 480px) {
	.designsol-webzine .content-area .title-area .title{font-weight:700}
	.designsol-webzine .content-area{bottom:5px}
	.designsol-webzine .content-area .text{line-height:18px;max-height:20px}
}
@media (max-width: 991px) {
	.designsol-webzine .content-area .title-area{margin-bottom:5px}
	.designsol-webzine .content-area{padding:0 10px}
}
@media (max-width: 1629px) {
	.designsol-webzine .content-area .title-area .title{max-width:60%}
}
@media (min-width: 1630px) {
	.designsol-webzine .content-area .title-area .title{max-width:70%}
}

/* designsol-gallery-one */
.designsol-gallery-one-thumb .thumb {height:100%}
.designsol-gallery-one-thumb .thumb img{max-height:380px; min-height: 190px;}
.designsol-gallery-one li {
	padding:15px 0;
	color:#9a9a9a;
	border-bottom:1px solid #eaeaea;
}
.designsol-gallery-one li:last-child {
	border-bottom:0;
}
.designsol-gallery-one .title-group{padding-bottom:5px}
@media (max-width: 767px) {
	.designsol-gallery-one .title-group{padding-bottom:0}
}
@media (max-width: 992px) {
	.designsol-gallery-one .title-group .title{display:block;float:left;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* designesol-gallery */
.designsol-gallery > li{float:left; white-space: nowrap; overflow: hidden}
.gallery-warpper{position:relative}
.gallery-warpper > .gallery > .thumb {height:100%}
.gallery-warpper > .gallery > .thumb img{max-height:190px; min-height: 95px}
.gallery-warpper>.title-area{position:absolute;bottom:0;left:0;top:auto;width:101%;padding:10px;color:#fff;background-color:rgba(0,0,0,.4);-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
.gallery-warpper:hover .title-area{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.gallery-warpper>.title-area>.title-group>.title{font-size:14px;font-weight:500;opacity:0;-webkit-transition:opacity .35s;transition:opacity .35s;-webkit-backface-visibility:hidden;display:block;float:left;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; height:20px}
.gallery-warpper > .title-area > .title-group > .title{opacity: 1} 
@media (max-width: 480px) {
	.gallery-warpper>.title-area{padding:5px}
}

/* 공통 */
.designsol-table,
.designsol-list,
.designsol-webzine,
.designsol-gallery-one,
.designsol-gallery{font-family: '나눔고딕', 'Nanum Gothic', Dotum,'굴림',Gulim,Helvetica,sans-serif!important;font-size: 13px}

.designsol-webzine .thumb-area .thumb,
.designsol-webzine .content-area .date,
.designsol-gallery-one-thumb .thumb,
.gallery-warpper > .gallery > .thumb,
.gallery-warpper .time-area > .date{display:block}

.designsol-table .replyNum a,
.designsol-list .replyNum a,
.designsol-webzine .replyNum a,
.designsol-gallery-one .replyNum a,
.gallery-warpper .replyNum a{font-style:normal; font-weight:bold}

.designsol-table .time-area .date,
.designsol-list .time-area .date,
.designsol-webzine .content-area .date,
.designsol-gallery-one .date,
.gallery-warpper .time-area > .date{font-size:12px}

.designsol-webzine li:hover img,
.designsol-gallery-one-thumb .thumb:hover img,
.gallery-warpper>.gallery>.hover-img:hover img{opacity:.6;-webkit-transform:translate3d(0,0,300px);transform:translate3d(0,0,300px)}

.bg-dark .designsol-table,
.bg-dark .designsol-webzine {
	color:#b0b0b0;
}