#header {
	background-color: rgba(255, 255, 255, 0);
}

/* Swiper */
.swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23808080'/></svg>") !important;
	left: 3vw !important;
}

.swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23808080'/></svg>") !important;
	right: 3vw !important;
}

/* Disabled navigation buttons */
.swiper-button-prev.swiper-button-disabled {
	background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23D3D3D3'/></svg>") !important;
	opacity: 0.5;
}

.swiper-button-next.swiper-button-disabled {
	background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23D3D3D3'/></svg>") !important;
	opacity: 0.5;
}

/* 애니메이션 정의 */
@keyframes verticalAction {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-15%);
	}
}

.balloon-img {
	position: absolute;
	left: 31vw;
	bottom: 26.5vw;
	width: 17vw;
	animation: verticalAction 1s linear infinite alternate;
}

.hover-box {
	position: absolute;
	border: 2px dashed red;
	pointer-events: none; /* 클릭 방지 */
	display: none;
}

.container {
	max-width: 1920px;
	margin: 0 auto;
	padding: 20px;
}

.section1, .video-play {
	position: relative;
}

.prod-img {
	position: absolute;
	right: 0.5vw;
	bottom: -2vw;
	width: 21.8vw;
	max-width: 246px;
}

.video-play {
	margin: 0;
	padding: 15vw 5vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffec7c;
}

.Brand_Title video {
	width: 100%;
	height: auto;
	border-radius: 10px;
	max-width: 1200px;
}

section.customer {
	width: 90vw;
	max-width: 1200px;
	margin: 18vw auto;
}

h1 {
	font-size: 3rem;
	font-weight: 700;
	margin: 2.5vw 0 0.5vw;
	padding-top: 20px;
	color: #333;
	text-align: center;
}

.grid-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 7vw 0;
	padding: 2.6vw 0;
}

.main-card {
	flex: 1;
	display: flex;
	padding: 6vw 3vw;
	border-radius: 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-card:hover {
	transform: translateY(-5px);
}

.main-card h2 {
	font-size: 2.5rem;
	color: #333;
	margin-bottom: 0.5rem;
}

.main-card-content {
	flex: 1;
	text-align: left;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 3vw;
}

.main-card p {
	font-size: 1.7rem;
	color: #666;
	margin-bottom: 0;
}

.main-card-icon {
	display: flex;
	width: 7.5vw;
	min-width: 52px;
}

.main-card-icon img {
	width: 100%; /* 아이콘 크기에 맞춤 */
	height: auto; /* 아이콘 크기에 맞춤 */
}

/* 색상 클래스 */
.pink { background-color: #FFD8E0; }
.yellow { background-color: #FFEC7C; }
.green { background-color: #DFFFDC; }
.blue { background-color: #DCF4FF; }

/* Choa-SNS */
.Choa-SNS {
	display: inline-block;
	text-align: center;
	width: 100%;
	color: #333;
	background-color: #F1F1F1;
	padding: 10vw 0px;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.Choa-SNS > p {
	font-size: 1.5rem;
	margin-bottom: 1.5vw;
}

.Choa-SNS .swiper-slide .sns-link {
	position: relative;
	width: 60vw;
	height: 37vw;
	margin: 5vw auto 9vw;
}

.Choa-SNS .swiper-slide .sns-link img {
	position: absolute;
	border: 0px;
}

.Choa-SNS .swiper-slide .sns-link .sns-btn {
	top: 0px;
	left: 0px;
	width: 65%;
}

.Choa-SNS .swiper-slide .sns-link .sns-photo {
	bottom: 0px;
	right: 0px;
	width: 95%;
}

/* 반응형 디자인 */
@media (min-width: 768px) {
	.prod-img {
		right: 5vw;
		bottom: -1vw;
		width: 15vw;
	}

	.balloon-img {
		left: 21.1vw;
		bottom: 14.2vw;
		width: 5.5vw;
	}

	.video-play {
		margin: 0;
		padding: 1.4583vw 0 6.7708vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffec7c;
	}

	.Brand_Title video {
		width: 62.5vw;
		height: auto;
		border-radius: 20px; /* 모서리를 둥글게 */
		max-width: 1200px;
	}

	section.customer {
		width: 90vw;
		margin: 6.6vw auto;
	}

	h1 {
		font-size: 2.3rem;
		margin: 2.5vw 0 0.5vw;
		color: #333;
	}

	.grid-container {
		margin: 2vw 0;
	}

	.main-card {
		display: flex;
		padding: 2.7vw 3vw;
		border-radius: 20px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.main-card h2 {
		font-size: 1.4rem;
	}

	.main-card p {
		font-size: 1rem;
	}

	.Choa-SNS {
		padding: 5vw 0px;
		background-image: url('/images/Main/main_bg_01.jpg');
	}

	.Choa-SNS h2 {
		font-size: 2.6vw;
	}

	.Choa-SNS > p {
		font-size: 1.5vw;
		margin-bottom: 1.5vw;
	}

	.Choa-SNS .swiper-container {
		width: 90vw;
	}

	.Choa-SNS .swiper-slide .sns-link {
		width: 100%;
		min-width: 238px;
		height: 17vw;
		min-height: 147px;
	}
}

@media (min-width: 992px) {
	.prod-img {
		right: 5vw;
		width: 15vw;
	}

	h1 {
		font-size: 2.7rem !important;
	}

	.main-card h2 {
		font-size: 1.6rem;
	}

	.main-card p {
		font-size: 1.2rem;
	}
}

@media (min-width: 1200px) {
	section.customer {
		width: 1200px;
		margin: 79px auto;
	}

	.prod-img {
		right: 8.0729vw;
		bottom: -1.0417vw;
		width: 12.7932vw;
	}

	h1 {
		font-size: 3rem;
		margin: 30px 0 6px;
	}

	.grid-container {
		margin: 24px 0;
		padding: 31px 0;
	}

	.main-card {
		min-width: 529.55px;
		padding: 32px 36px;
		border-radius: 20px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.main-card-content {
		padding: 0 14px;
	}

	.main-card h2 {
		font-size: 1.8rem;
	}

	.main-card p {
		font-size: 1.3rem;
	}

	.main-card-icon {
		width: 90px;
	}

	.Choa-SNS {
		padding: 73px 0px;
	}

	.Choa-SNS h2 {
		font-size: 41px;
	}

	.Choa-SNS > p {
		font-size: 22px;
		margin-bottom: 22px;
	}

	.Choa-SNS .swiper-container {
		width: 1200px;
	}

	.Choa-SNS .swiper-slide .sns-link {
		width: 365.5px;
		height: 227px;
		min-height: 112px;
		margin: 36.5px auto;
	}
}

@media (min-width: 1920px) {
	.balloon-img {
		left: 404px;
		bottom: 274px;
		width: 105.53px;
	}

	.video-play {
		padding: 21px 0 97px;
	}

	.prod-img {
		right: 155px;
		bottom: -20px;
		width: 245.63px;
	}
}