.title-container {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFADC;
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3vw;
}

.brand-info {
	position: relative;
	height: 133.6vw;
}

.visual-img-tit {
	position: absolute;
	top: 18vw;
	left: 16vw;
	color: #222;
}

.bh-title-text1 {
	font-size: 5.2vw;
}

.bh-title-text2 {
	font-size: 5.2vw;
	margin: 5.4vw 0 4.4vw;
	display: inline-block;
	position: relative;
}

span.memberCountCon {
	font-size: 14.5vw;
	font-weight: 600;
	display: inline-block;
	width: 41.7vw;
	height: 15vw;
	text-align: right;
	margin-right: 1.4vw;
}

.bh-title-text2::after {
	content: "";
	position: absolute;
	left: 0.4vw;
	bottom: 0;
	width: 63.2vw;
	height: 3.5px;
	background-color: #EA5420;
}

.bh-title-text3 {
	font-size: 2.7vw;
	padding-left: 23vw;
}

.title-img {
	position: absolute;
	right: 2.8vw;
	bottom: -2vw;
	max-width: 715px;
	z-index: 9;
	width: 89vw;
}

.brand-history {
	margin-top: 85px;
	margin-bottom: 0;
	color: #222;
}

.brand-history h2 {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 43px;
}

.brand-history h2 span {
	color: #EA5420;
}

.brand-history .history-timeline {;
   display: flex;
}

.brand-history .history-timeline .history-left {
	flex: 1;
	text-align: right;
	padding-right: 29px;
}

.brand-history .history-timeline .history_center {
	width: 2px;
	background-color: #ddd;
	margin: 13px 0 0;
}

.brand-history .history-timeline .history_line {
	width: 2px;
	background-color: #EA5420;
}

.brand-history .history-timeline .history-right {
	flex: 1;
	text-align: left;
	padding-left: 29px;
}

.brand-history .history-timeline .description h3 {
	font-size: 2.2rem;
	font-weight: 600;
}

.brand-history .history-timeline .description p.text1 {
	font-size: 1.4rem;
}

.brand-history .history-timeline .description span.text2 {
	font-size: 1.2rem;
}

.brand-history .history-timeline .description {
	position: relative;
	margin-bottom: 90px;
}

.brand-history .history-timeline .description img {
	margin-bottom: 10px;
	width: 130px;
}

.brand-history .history-timeline .description.on::before {
	background-color: rgb(234, 84, 32, 0.2);
}

.brand-history .history-timeline .history-left .description::before {
	content: '●';
	position: absolute;
	top: 0;
	right: -45px;
	color: #EA5420;
	font-size: 1.5rem;
	padding: 7px 8px 3px 7px;
	border-radius: 50%;
	margin: 0;
	line-height: 18px;
	transition: 0.5s ease;
}

.brand-history .history-timeline .history-right .description::before {
	content: '●';
	position: absolute;
	top: 0;
	left: -44px;
	color: #EA5420;
	font-size: 1.5rem;
	padding: 7px 8px 3px 7px;
	border-radius: 50%;
	margin: 0;
	line-height: 18px;
	transition: 0.5s ease;
}

.brand-video {
	margin: 0;
	padding: 15vw 3vw;
	background-color: #ffec7c;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.brand-video h1 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 5vw;
	color: #333;
	text-align: center;
}

.brand-video .sub-text {
	font-size: 2rem;
	line-height: 1.3;
	text-align: center;
	color: #333;
	margin-bottom: 5vw;
}

.video-container {
  position: relative;
	width: 90vw;
	height: auto;
}

.video-container video, .video-container .video-thumbnail {
  width: 100%;
  height: auto;
  display: block;
	border-radius: 10px; /* 모서리를 둥글게 */
}

.video-container i.fa-play-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 클릭 이벤트를 이미지 아래로 통과시킴 */
	font-size: 7rem;
	color: white;
	padding: 0;
}

.video-container:hover i.fa-play-circle  {
	color: gray;
}

.video-container .overlay-image {
  position: absolute;
	right: -17vw;
	bottom: -8vw;
	width: 20vw;
  pointer-events: none;  /* 이미지 클릭 시 영상 재생 등에 방해 안되게 */
}

@media (min-width: 576px) {
	.brand-history .history-timeline .history-right .description::before {
		left: -45px;
	}
}

@media (min-width: 768px) {
	.brand-info {
		height: 46.5vw;
	}

	.visual-img-tit {
		top: 14.5vw;
		left: 3vw;
	}

	.bh-title-text1, .bh-title-text2 {
		font-size: 2.8vw;
	}

	.bh-title-text2 {
		margin: 3vw 0 2.5vw;
	}

	span.memberCountCon {
		font-size: 7.7vw;
		width: 22.3vw;
		height: 8.1vw;
		margin-right: 1.4167vw;
		padding-left: 0;
	}

	.bh-title-text2::after {
		left: 0;
		bottom: 0;
		width: 34.8vw;
		height: 0.3333vw;
	}

	.bh-title-text3 {
		font-size: 1.5vw;
		padding-left: 0;
	}

	.title-img {
		right: 3vw;
		bottom: -1.4167vw;
		width: 56.1667vw;
	}

	.brand-history h2 {
		font-size: 2.6rem;
	}

	.item-2020 .img2, .item-2022 .img1{
		width: 310px !important;
	}

	.brand-video {
		padding: 7.1vw 0 7.4vw;
	}

	.brand-video h1 {
		font-size: 4rem;
		margin-bottom: 1vw;
	}

	.brand-video .sub-text {
		font-size: 2.2vw;
		margin-bottom: 3vw;
	}

	.video-container {
		width: 80vw;
	}
}

@media (min-width: 992px) {
	.brand-history {
		margin-top: 118px;
	}

	.brand-history h2 {
		font-size: 3.1rem;
		margin-bottom: 119px;
	}

	.brand-history .history-timeline .history-left {
		padding-right: 40px;
	}

	.brand-history .history-timeline .history_center {
		margin: 17px 0 0;
	}

	.brand-history .history-timeline .history-right {
		padding-left: 40px;
	}


	.brand-history .history-timeline .description {
		margin-bottom: 116px;
	}

	.brand-history .history-timeline .description h3 {
		font-size: 30px;
	}

	.brand-history .history-timeline .description p {
		font-size: 24px;
	}

	.brand-history .history-timeline .description span {
		font-size: 20px;
	}

	.brand-history .history-timeline .description .img2 {
		margin-top: 10px;
	}

	.brand-history .history-timeline .history-left .description::before {
		right: -58px;
		font-size: 18px;
		padding: 10px 9px 6px 8px;
		line-height: 18px;
	}

	.brand-history .history-timeline .history-right .description::before {
		left: -58px;
		font-size: 18px;
		padding: 10px 9px 6px 8px;
		line-height: 18px;
	}

	.brand-history .history-timeline .description img {
		width: 179px;
	}

	.item-2013 .img1 {
		width: 281px !important;
	}

	.item-2020 .img2, .item-2022 .img1{
		width: 410px !important;
	}

	.item-2025 .img1 {
		width: 350px !important;
	}
}

@media (min-width: 1200px) {
	.brand-history, .brand-info {
		padding: 0;
	}

	.brand-info {
		height: 600px;
	}

	.visual-img-tit {
		top: 185px;
		left: 0px;
	}

	.bh-title-text1, .bh-title-text2 {
		font-size: 40px;
	}

	.bh-title-text2 {
		margin: 36px 0 29px;
	}

	span.memberCountCon {
		font-size: 100px;
		width: 290px;
		height: 106px;
		margin-right: 17px;
		padding-left: 0;
	}

	.bh-title-text2::after {
		left: 0;
		bottom: 0;
		width: 465px;
		height: 4px;
	}

	.bh-title-text3 {
		font-size: 20px;
		padding-left: 0;
	}

	.title-img {
		right: 0;
		bottom: -17px;
		width: 710px;
	}

	.brand-history {
		margin-top: 118px;
	}

	.brand-history h2 {
		font-size: 44px;
		margin-bottom: 119px;
	}

	.brand-history .history-timeline .history-left {
		padding-right: 40px;
	}

	.brand-history .history-timeline .history_center {
		margin: 17px 0 0;
	}

	.brand-history .history-timeline .history-right {
		padding-left: 40px;
	}

	.brand-history .history-timeline .description h3 {
		font-size: 30px;
	}

	.brand-history .history-timeline .description p {
		font-size: 24px;
	}

	.brand-history .history-timeline .description span {
		font-size: 20px;
	}

	.brand-history .history-timeline .description .img {
		margin-bottom: 10px;
	}

	.brand-history .history-timeline .history-left .description::before {
		right: -58px;
		font-size: 18px;
		padding: 10px 9px 6px 8px;
		line-height: 18px;
	}

	.brand-history .history-timeline .history-right .description::before {
		left: -58px;
		font-size: 18px;
		padding: 10px 9px 6px 8px;
		line-height: 18px;
	}

	.item-2006 .img1 {
		width: 199px !important;
	}

	.item-2012 .img1 {
		width: 211px !important;
	}

	.item-2012 .img1 {
		width: 281px !important;
	}

	.item-2017 .img1 {
		width: 209px !important;
	}

	.item-2019 .img1 {
		width: 191px !important;
	}

	.item-2020 .img1 {
		width: 258px !important;
	}

	.item-2020 .img2 {
		width: 554px !important;
	}

	.item-2021 .img1 {
		width: 259px !important;
	}

	.item-2022 .img1 {
		width: 370px !important;
	}

	.item-2022 .img2 {
		width: 179px !important;
	}

	.item-2023 .img1 {
		width: 231px !important;
	}

	.item-2025 .img1 {
		width: 558px !important;
	}

	.brand-video h1 {
		font-size: 55px;
		margin-bottom: 1vw;
	}

	.brand-video .sub-text {
		font-size: 24px;
		margin-bottom: 3vw;
	}

	.video-container {
		width: 960px;
	}

	.video-container .overlay-image {
		right: -204px;
		bottom: -96px;
		width: 240px;
	}
}

@media (min-width: 1600px) {
}

@media (min-width: 1920px) {
	.brand-video {
		padding: 102px 0 139px;
	}

	.prod-img {
		right: 228px;
		bottom: 10px;
		width: 284px;
	}
}