@charset "utf-8";

/* =====================================================
PORTFOLIO PRODUCT LIST
PC: 관리자 설정 열 수
MOBILE: 항상 2열
===================================================== */

/* 전체 목록 */
.list-wrap .list-container,
.list-container {
overflow:hidden;
box-sizing:border-box;
}

/* 상품 열 */
.list-wrap .list-row,
.list-container > .list-row {
float:left;
box-sizing:border-box;
}

/* PHP에서 생성되는 줄바꿈용 빈 태그 */
.list-container > .list-row.clearfix {
display:block;
float:none !important;
clear:both !important;
width:100% !important;
height:0 !important;
margin:0 !important;
padding:0 !important;
}

/* 상품 카드 */
.list-item {
position:relative;
width:100%;
background:#fff;
border:1px solid #e8e8e8;
border-radius:16px;
overflow:hidden;
box-shadow:0 7px 22px rgba(0,0,0,.07);
box-sizing:border-box;
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}

.list-item:hover {
transform:translateY(-6px);
border-color:#c9a85f;
box-shadow:0 17px 38px rgba(0,0,0,.14);
}

/* =====================================================
IMAGE
===================================================== */

.list-item .imgframe,
.list-item .list-img {
position:relative;
width:100%;
overflow:hidden;
background:#f4f4f4;
}

/* 비율형 이미지 구조 */
.list-item .img-wrap {
position:relative;
width:100%;
overflow:hidden;
}

/* 실제 이미지 위치 */
.list-item .img-item {
position:absolute;
inset:0;
overflow:hidden;
}

.list-item .img-item a,
.list-item .list-img a {
display:block;
width:100%;
height:100%;
}

/* 이미지 */
.list-item .img-item img,
.list-item .list-img img {
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:
transform .4s ease,
filter .4s ease;
}

.list-item:hover .img-item img,
.list-item:hover .list-img img {
transform:scale(1.05);
filter:contrast(1.03) saturate(1.03);
}

/* 이미지 오버레이 */
.list-item .img-item:after,
.list-item .list-img:after {
content:"VIEW DETAIL";
position:absolute;
left:50%;
top:50%;
z-index:5;
padding:8px 15px;
border:1px solid rgba(255,255,255,.4);
border-radius:999px;
background:rgba(24,35,70,.9);
color:#fff;
font-size:10px;
font-weight:800;
letter-spacing:.5px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transform:translate(-50%, -42%);
transition:
opacity .25s ease,
transform .25s ease;
}

.list-item:hover .img-item:after,
.list-item:hover .list-img:after {
opacity:1;
transform:translate(-50%, -50%);
}

/* 날짜 배지 */
.list-item .list-date {
position:absolute;
z-index:6;
bottom:10px;
padding:5px 9px;
border-radius:999px;
font-size:10px;
line-height:15px;
}

.list-item .list-date.left {
left:10px;
}

.list-item .list-date.right {
right:10px;
}

/* =====================================================
CONTENT
===================================================== */

.list-item .list-content {
padding:14px 14px 13px;
box-sizing:border-box;
}

/* 작성자 / 카테고리 */
.list-item .list-details {
margin:0 0 9px;
padding:0 0 8px;
border-bottom:1px solid #ededed;
color:#999;
font-size:11px;
line-height:17px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.list-item .list-details .member,
.list-item .list-details .guest {
color:#555 !important;
font-weight:700;
}

.list-item .list-sp {
margin:0 5px;
color:#ddd;
}

/* 제목 */
.list-item h2 {
display:block;
min-height:42px;
margin:0 0 8px;
padding:0;
font-size:15px;
line-height:21px;
font-weight:800;
letter-spacing:-.5px;
}

.list-item h2 a {
display:-webkit-box;
overflow:hidden;
color:#111;
text-decoration:none;
word-break:keep-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}

.list-item h2 a:hover {
color:#9b794a;
}

/* 본문 미리보기 */
.list-item .list-cont {
margin:0;
padding:0;
font-size:13px;
line-height:20px;
letter-spacing:-.3px;
}

.list-item .list-cont a {
display:block;
color:#666;
text-decoration:none;
}

.list-item .list-cont .text-muted {
display:-webkit-box;
overflow:hidden;
color:#666 !important;
word-break:keep-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}

/* 하단 정보 */
.list-item .list-read {
display:flex;
align-items:center;
justify-content:space-between;
gap:7px;
margin-top:12px;
padding-top:9px;
border-top:1px solid #ededed;
color:#999;
font-size:11px;
line-height:18px;
}

.list-item .list-read .pull-left,
.list-item .list-read .pull-right {
float:none !important;
}

.list-item .list-read > .clearfix {
display:none;
}

/* More 버튼 */
.list-item .read-more {
flex-shrink:0;
padding:0;
background:none;
}

.list-item .read-more a {
display:inline-block;
padding:5px 9px;
border-radius:999px;
background:#1d2746;
color:#fff !important;
font-size:10px;
line-height:15px;
font-weight:800;
text-decoration:none;
transition:
background .2s ease,
transform .2s ease;
}

.list-item .read-more a:hover {
background:#c9a85f;
transform:translateX(2px);
}

.list-item .read-more i {
margin-left:3px;
}

/* 라벨 */
.list-item .label-cap,
.list-item .tack-icon,
.list-item .label,
.list-item .new,
.list-item .ribbon {
font-size:10px;
font-weight:800;
}

/* =====================================================
MOBILE - ALWAYS 2 COLUMNS
===================================================== */

@media all and (max-width:767px) {

.list-wrap .list-container,
.list-container {
	margin-right:-6px !important;
	margin-left:-6px !important;
}

.list-wrap .list-container > .list-row:not(.clearfix),
.list-container > .list-row:not(.clearfix) {
	float:left !important;
	clear:none !important;
	width:50% !important;
	margin:0 !important;
	padding:0 6px 16px !important;
	box-sizing:border-box !important;
}

/* 줄바꿈용 빈 clearfix는 모바일에서 제거 */
.list-container > .list-row.clearfix {
	display:none !important;
}

/* PHP 인라인 margin 제거 */
.list-container > .list-row:not(.clearfix) > .list-item {
	margin-right:0 !important;
	margin-bottom:0 !important;
}

.list-item {
	border-radius:12px;
	box-shadow:0 4px 14px rgba(0,0,0,.07);
}

.list-item:hover {
	transform:none;
	border-color:#e8e8e8;
	box-shadow:0 4px 14px rgba(0,0,0,.07);
}

/* 터치 화면에서는 오버레이 제거 */
.list-item .img-item:after,
.list-item .list-img:after {
	display:none;
}

.list-item:hover .img-item img,
.list-item:hover .list-img img {
	transform:none;
	filter:none;
}

.list-item .list-content {
	padding:9px 9px 10px;
}

.list-item .list-details {
	margin-bottom:6px;
	padding-bottom:5px;
	font-size:9px;
	line-height:14px;
}

.list-item .list-sp {
	margin:0 2px;
}

.list-item h2 {
	min-height:36px;
	margin-bottom:5px;
	font-size:12px;
	line-height:18px;
	letter-spacing:-.35px;
}

.list-item .list-cont {
	font-size:11px;
	line-height:17px;
}

.list-item .list-cont .text-muted {
	-webkit-line-clamp:2;
}

.list-item .list-read {
	gap:3px;
	margin-top:7px;
	padding-top:6px;
	font-size:9px;
	line-height:15px;
	white-space:nowrap;
}

.list-item .read-more a {
	padding:4px 6px;
	font-size:8px;
	line-height:13px;
}

}

/* 아주 작은 화면도 2열 유지 */
@media all and (max-width:359px) {

.list-wrap .list-container,
.list-container {
	margin-right:-4px !important;
	margin-left:-4px !important;
}

.list-wrap .list-container > .list-row:not(.clearfix),
.list-container > .list-row:not(.clearfix) {
	width:50% !important;
	padding:0 4px 12px !important;
}

.list-item .list-content {
	padding:8px 7px 9px;
}

.list-item h2 {
	font-size:11px;
	line-height:17px;
}

.list-item .list-cont {
	font-size:10px;
	line-height:16px;
}

}