/* === PC 상단 slide === */

.upperSlideContainer {
	width: 100%;
	overflow: hidden; 
}

.firstWrapper {
	display: flex;
	justify-content: flex-start; /* 💡 수정: center에서 flex-start로 변경하여 좌측에 붙임 */
	align-items: center;
	gap: 30px;
	padding: 10px 0;
	
	width: 100%;
	max-width: 1200px; /* 💡 중요: 하단 컨텐츠의 폭(width)과 정확히 동일한 숫자로 맞춰주세요 */
	
	/* 
	  💡 하단 컨텐츠가 화면 가운데 정렬되어 있다면 margin: 0 auto; 를 유지하고,
	  만약 하단 컨텐츠가 화면 완전 좌측에 붙어있다면 margin: 0; 으로 변경하세요.
	*/
	margin: 0 auto; 
}

.upperSlideBox {
	/* 수정: 우측 사이드 버튼 영역(264px + gap 30px)을 제외한 나머지 폭을 차지하도록 설정 */
	flex: 1;
	min-width: 0; /* Flex 자식 요소 삐져나침 방지 */
	width: auto;  /* 기존 width: 100% 대신 flex 비율 적용 */
}

/* 1. 슬라이더 자체를 감싸는 박스 너비에 맞춤 */
.upperslide-carousel {
	width: 100%;
	height: 752px; /* 높이도 레이아웃 비율에 맞춰 반응형으로 조정할 수 있습니다 */
}

/* Flickity 셀 자체의 너비를 부모 영역(upperSlideBox)에 맞춤 */
.upperSlideImgBox {
	width: 100% !important;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 이미지 정렬 및 채우기 */
.upperSlideImgBox a {
	display: block;
	width: 100%;
	height: 100%;
}

.upperSlideImgBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* Flickity 버튼 위치 조정 (필요시) */
.upperslide-carousel .flickity-page-dots .dot {
	background-color: #497B72;
}

.upperslide-carousel .flickity-prev-next-button {
	top: 50%;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	transform: translateY(-50%);
}

.flickity-button {
	position: absolute;
	background-color: rgba(65, 62, 62, 0.8);
	border: none;
	color: #FFFFFF;
}

.flickity-button:hover {
	background-color: rgba(65, 62, 62, 1);
	cursor: pointer;
}

/* === 동그란 아이콘 2개 === */

.side {
	width: 264px;
	gap: 43px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.sideBtn1 {
	width: 264px;
	height: 264px;
	border-radius: 500px;
	cursor: pointer;
	background-color: #eec692;
	color: #876815;
}
.sideBtn2 {
	width: 264px;
	height: 264px;
	border-radius: 500px;
	cursor: pointer;
	background-color: #497b72;
	color: white;
}
.sideBtn1,
.sideBtn2 {
	width: 264px;
	gap: 10px;
	font-size: 36px;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.side > a:first-child:hover {
	opacity: 0.7;
	color: #876815;
	text-decoration:none;
}
.side > a:last-child:hover {
	opacity: 0.7;
	color: white;
	text-decoration:none;
}