// main: ga-fabricfarm.less

.main-slider {
	/* Carousel */
	.carousel {
		& .carousel-control {
			background: none;
			opacity: 1;
		}
	}
	.carousel-caption {
		z-index: 10;
	}
	.container-fluid {padding-left:0; padding-right:0;}
	.carousel-inner {
		width: 100%;
		position: relative;
	}
	.carousel-inner > .item > a.item-banner {
		z-index: 100;
		display: block;
		margin: 0 auto;
		max-width: 1140px;
	}
	.carousel-inner > .item > img {
		min-width: 100%;
		height: 574px;
		display: block;
		line-height: 1;
	}
	.carousel-indicators li {
		width: 12px;
		height: 12px;
		background: rgba(0,0,0,0);
		border: 2px solid #fff;
		border-radius: 10px;
	}
	.carousel-indicators .active {
		width: 14px;
		height: 14px;
		margin: 0;
		background-color: #fff;
	}
}

.main-content {
	.main-product-head {
		position: relative;
		h3 {
			font-size: 20px;
			font-weight: 400;
			& strong {
				font-weight: 700;
			}
		}
		.controls {
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	.banners {
		margin: 10px 0 30px 0;
		.ban-item {
			margin: 10px 0 0 0;
		}
	}
	.designer-ranking {
		margin-top: 40px;
		.carousel {
			text-align: center;
			margin-top: 40px;
			img {
				border-radius: 50%;
				border: 1px solid @img-border-color;
			}
			& h4 {
				text-align: center;
				margin-top: 10px;
			}
			& h4 a {
				color: @primary-color;
			}
			p.explanation {
				text-align: center;
				font-size: 14px;
			} 
			.designer-count {
				padding: 0;
				margin: 0 0 10px 0;
				list-style: none;
				text-align: center;
				& .title {
					font-weight: 700;
					color: #fff;
					background: #848488;
					padding: 2px 5px;
					border-radius: 2px;
					margin-right: 5px;
					font-size: 12px;
				}
				& li:first-child {
					border-left: none;
					margin-left: 0;
				}
			}
		}
	}
}
@media (max-width: 767px) {
	/* .goods_list_li dl dd.thum img {
		min-width: 700px;
	} */
	.designer-ranking {
		img {
			width:300px;
			height:300px;
		}
		.designer-count {
			& li {
				line-height: 1;
				display: inline-block;
				margin-left: 5px;
				padding-left: 10px;
				border-left: 1px solid @divi-border;
			}
		}
		.designer-item {
			margin-bottom: 20px;
		}
	}
} 
@media (min-width: 768px) {
	.designer-ranking {
		img {
			width:150px;
			height:150px;
		}
	}
}
@media (min-width: 992px) {
	.designer-ranking {
		img {
			width:200px;
			height:200px;
		}
		.designer-count {
			& li {
				line-height: 1;
				display: block;
				margin-left: 0;
				padding-left: 0;
				border-left: none;
				margin-top: 10px;
			}
		}
	}
}
@media (min-width: 1200px) {
	.designer-ranking {
		img {
			width:300px;
			height:300px;
		}
		.designer-count {
			& li {
				line-height: 1;
				display: inline-block;
				margin-left: 5px;
				padding-left: 10px;
				border-left: 1px solid @divi-border;
			}
		}
	}
}

/* 커뮤니티 */
.community-wrap {
	margin-top: 20px;
	overflow: hidden;
	
	.col-group {
		.thumbnail {
			margin-bottom: 21px;
		}
        .thumbnail .inner {
            position: relative;
			overflow: hidden;
        }
        .thumbnail .hover-caption {
            position: absolute;
            bottom: 0;
			width: 100%;
            padding: 15px 30px;
            text-align: center;
			background: rgba(0, 0, 0, 0.2);
        }
        .thumbnail:hover .hover-caption {
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            transition: all .5s ease-in-out;
        }
        .thumbnail {
            display: block;
            padding: 0;
            background-color: #fff;
            border: none;
            border-radius: 0;
            -webkit-transition: border .2s ease-in-out;
            -o-transition: border .2s ease-in-out;
            transition: border .2s ease-in-out;
		}
		.thumbnail img {
			width: 100%;
            max-width: 100%;
            border: 1px solid @img-border-color;
		}
		.thumbnail .hover-caption-small {
			position: absolute;
			top: 50%;
			width: 100%;
			padding: 15px 30px;
			text-align: center;
			background: rgba(0, 0, 0, 0.2);
		}
		.thumbnail:hover .hover-caption-small {
			top: 0;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			transition: all .5s ease-in-out;
		}
		.hover-caption .hover-data,
		.hover-caption-small .hover-data {
			p.category {
				text-align: left;
				font-size: 14px;
				span {
					border-bottom: 1px solid #fff;
					padding-bottom: 10px;
					color: #fff;
				}
			}
            h4 {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #ffffff;
                margin: 20px 0;
            }
            h4 a {
                color: #ffffff;
                text-align: center;
            }
            h4 a:hover {
                color: @link-hover-color;
            }
            .caption-content {
				color: #ffffff;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; /* 라인수 */
				-webkit-box-orient: vertical;
				word-wrap: break-word;
			}
			.count {
				margin: 20px 0;
				span.round-lg {
					width: 54px !important;
					height: 54px !important;
				}
				span {
					display: inline-block;
					margin: 0 5px;
					i {
						margin-top: 8px;
					}
					i > b.num {
						margin-top: 2px;
						display: block;
						font-size: 14px;
						font-weight: 400;
					}
				}
			}
		}
	}
}
@media (max-width: 767px) {
	.community-wrap {
		.col-group {
			.thumbnail .hover-caption-small {
				padding: 15px 30px;
				bottom: 0;
			}
			.thumbnail:hover .hover-caption-small {
				bottom: 0;
				height: inherit;
			}
			.hover-caption-small .hover-data {
				p.category {
					span {
						padding-bottom: 10px;
					}
				}
				h4 {
					font-size: 18px;
				}
				.caption-content {
					font-size: 14px;
				}
			}
		}
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.community-wrap {
		.col-group {
			.thumbnail .hover-caption-small {
				padding: 15px 15px;
				bottom: -28%;
			}
			.hover-caption-small .hover-data {
				p.category {
					span {
						padding-bottom: 10px;
					}
				}
				h4 {
					font-size: 18px;
				}
				.caption-content {
					font-size: 14px;
				}
			}
		}
	}
}
@media (min-width: 992px) and (max-width:1199px) {
	.community-wrap {
		.col-group {
			.thumbnail .hover-caption-small {
				padding: 15px 15px;
				bottom: -50%;
			}
			.hover-caption-small .hover-data {
				p.category {
					span {
						padding-bottom: 5px;
					}
				}
				h4 {
					font-size: 14px;
				}
				.caption-content {
					font-size: 12px;
				}
			}
		}
	}
}
@media (min-width: 1200px) {
	.community-wrap {
		.col-group {
			.thumbnail .hover-caption-small {
				padding: 15px 30px;
				bottom: -40%;
			}
			.hover-caption-small .hover-data {
				p.category {
					span {
						padding-bottom: 10px;
					}
				}
				h4 {
					font-size: 18px;
				}
				.caption-content {
					font-size: 14px;
				}
			}
		}
	}
}

/* MARKETING CONTENT
	-------------------------------------------------- */
	.marketing .col-lg-4 {
		margin-bottom: 20px;
		text-align: center;
	}
	.marketing h2 {
		font-weight: normal;
	}
	.marketing .col-lg-4 p {
		margin-right: 10px;
		margin-left: 10px;
	}
	/* Featurettes
	------------------------- */
	.featurette-divider {
		margin: 80px 0 0 0; /* Space out the Bootstrap <hr> more */
	}
	.featurette-heading {
		font-weight: 300;
		line-height: 1;
		letter-spacing: -1px;
	}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 767px) {
	.main-slider {
		.carousel-caption {
			.category {
				font-size: 14px;
				span {
					border-bottom: 1px solid #fff;
					padding-bottom: 10px;
				}
			}
			h4 {
				font-weight: 400;
				line-height: 150%;
				padding-top: 20px;
			}
			h4 a {
				color: #fff;
				font-size: 24px;
			}
			.caption-content {
				font-size: 14px;
			}
		}
	}
}
@media (min-width: 768px) {
	.main-slider {
		.carousel-caption {
			.category {
				font-size: 14px;
				span {
					border-bottom: 1px solid #fff;
					padding-bottom: 10px;
				}
			}
			h4 {
				font-weight: 400;
				line-height: 150%;
				padding-top: 20px;
			}
			h4 a {
				color: #fff;
				font-size: 24px;
			}
			.caption-content {
				font-size: 14px;
			}
		}
	}
}

@media (min-width: 992px) {
	.main-slider {
		.carousel-caption {
			top: auto;
			width: auto;
			left: auto;
			bottom: 110px;
			right: 0;
			padding: 30px;
			background: rgba(0,0,0,0.6);
			text-align: left;
			height: auto;
			max-width: 50%;
			text-shadow: none;
		}
		.carousel-caption {
			width: 380px;
		}
		.carousel-caption {
			.category {
				color: #fc97b2;
				font-size: 14px;
				span {
					border-bottom: 1px solid #fc97b2;
					padding-bottom: 10px;
				}
			}
			h4 {
				font-weight: 400;
				line-height: 150%;
				padding-top: 20px;
			}
			h4 a {
				color: #fff;
				font-size: 24px;
			}
			.caption-content {
				font-size: 14px;
			}
		}
	}	
}