@charset 'UTF-8';
@import url('var.css');
.brand-history-sec {}
.brand-history-sec h2 {
	background: url(../images/sub/logo_background.png) center center / 90% no-repeat;
	padding-bottom: 2em;
}
.brand-history-container {
	position: relative;
	left: calc(50% - 45%);
}
.slick-slide {
	margin-right: 1.2em;
}
.brand-history {}
.brand-history-item {}
.brand-history-item h3 {
	font-size: 1.5em;
	color: var(--medium-gray);
}
.brand-history-item ul {
	height: 250px;
	padding-top: 1em;
	padding-left: 0.5em;
}
.brand-history-item ul li {
	position: relative;
	padding-left: 1em;
}
.brand-history-item ul li::before {
	position: absolute;
	left: 5px;
	top: calc(0.8em - 1px);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #000;
	content: '';
}
.history-item {
	height: 300px;
	margin: 2em 0;
	color: #fff;
	overflow: auto;
	-ms-overflow-style: none; /* 인터넷 익스플로러 */
	scrollbar-width: none; /* 파이어폭스 */
}
.history-item::-webkit-scrollbar {
	display: none; /* 크롬, 사파리, 오페라, 엣지 */
}
.history-item1 {background: url(../images/sub/history_visual_01.jpg) center center / cover no-repeat;}
.history-item2 {background: url(../images/sub/history_visual_02.jpg) center center / cover no-repeat;}
.history-item3 {background: url(../images/sub/history_visual_03.jpg) center center / cover no-repeat;}
.history-item4 {background: url(../images/sub/history_visual_04.jpg) center center / cover no-repeat;}
.history-item-dl {
	position: relative;
	padding: 2.5em 1em;
	z-index: 1;
}
.history-item-dl::before {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height: auto;
	background: rgba(0,0,0,0.5);
	content: '';
	z-index: -1;
}
.history-item-dl dt {}
.history-item-dl dd {}
.history-item-dl dd p {
	line-height: 1.2;
}

/* --------------반응형---------------- */
/* 1. mo ~767px까지 */
@media all and (max-width: 767px) {
	.brand-history-container {}
	.brand-history-wrap {}
	.brand-history {}
	.brand-history-item {}
	.brand-history-item h3 {}
	.brand-history-item ul {}
	.brand-history-item ul li {}
	.brand-story-item1 {}
	.history-item {}
	.history-item dl {}
	.history-item-dl dt {}
	.history-item-dl dd {}
	.history-item-dl dd p {}
}

/* 2. tb 768px부터~ */
@media all and (min-width: 768px) {
	.brand-history-item ul {
		height: 200px;
		padding-top: 1em;
		padding-left: 0.5em;
	}
	.brand-history-item h3 {
		font-size: 1.6em;
	}
}

/* 3. only tb 768px ~ 1279px */
@media all and (min-width: 768px) and (max-width: 1279px) {

}

/* 4. pc 1280px부터~ */
@media all and (min-width: 1280px) {
	.brand-history-item h3 {
		font-size: 2em;
	}
	.slick-slide {
		margin-right: 3em;
	}
	
/* 5. pc 1600px부터~ */
@media all and (min-width: 1600px) {
	.brand-history-sec h2 {
		background-size: 80%;
	}
	.brand-history-container {
		left: calc(50% - 40%);
	}
	.history-item {
		height: 350px;
	}
}
}