@import url("/Css/Fontawesome/webfonts/etc.css");

/* 메인 섹션 기본 설정 */
.index_intro {
	position: relative;
	width: 100%;
	height: 980px;
	background: linear-gradient(to bottom, #ffffff 0%, #d5dbe1 100%);
	overflow: hidden;
}
.container {position: relative; max-width: 1370px; width: 100%; height: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.top_area {position: absolute; top: 60px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 80px; z-index: 100; width: 100%; max-width: 1000px; justify-content: center;}

/* 메인 텍스트 영역 */
.main_text_area {text-align: center; flex-shrink: 0;}
.main_title {margin-bottom: 30px;}
.title_line1,
.title_line2 {display: block; font-size: 48px; line-height: 1.5; font-family: 'JalnanGo'; color: #000; margin-bottom: 10px; opacity: 0; white-space: nowrap; transform: translateY(50px); animation: fadeInUp 1s ease-out forwards;}
.title_line2 {animation-delay: 0.3s;}

/* 메인 비주얼 영역 로그인 */
.logo_area {opacity: 0; transform: scale(0.8); animation: logoEntrance 1.2s ease-out 0.6s forwards, logoPulse 2s ease-in-out 1.8s infinite; margin-top: -20px;}
.logo_area img {width: auto; height: auto; max-width: 98%;}
.login_area {flex-shrink: 0; margin-top: -30px;}
.login_box {
	position: relative;
	background: linear-gradient(to bottom, #f4f4f4 0%, transparent 100%);
	border-radius: 40px;
	padding: 50px 45px;
	width: 386px;
	box-sizing: border-box;
}
.login_box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, #feaf94 0%, transparent 100%);
	border-radius: 40px;
	padding: 1px;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: exclude;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}
.login_input {
	width: 100%;
	padding: 12px 20px;
	margin-bottom: 15px;
	border: 1px solid #feaf94;
	border-radius: 30px;
	font-size: 16px;
	box-sizing: border-box;
	color: #ff6b35;
	outline: none;
	background: rgba(255, 255, 255, 0.8);
}
.login_input::placeholder {color: #ff6b35; opacity: 0.8;}
.checkbox_area {display: flex; justify-content: space-between; align-items: center; margin: 20px 0; font-size: 16px; font-weight: 600; color: #000; width: 100%; padding: 0 10px;}
.checkbox_area label {flex-shrink: 0; color: #000; display: flex; align-items: center;}
.checkbox_area input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
	accent-color: #feaf94;
	margin-right: -15px;
}
.checkbox_area span {flex-shrink: 0; font-size: 15px; color: #666;}
.login_button_area {display: flex; align-items: center; gap: 15px; margin-top: 25px;}
.login_btn {
	flex: 1;
	background: #ffc100;
	color: white;
	border: none;
	padding: 15px 20px;
	border-radius: 30px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}
.social_login {display: flex; gap: 10px;}
.social_btn {
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 50%;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.social_btn img {width: 24px; height: 24px;}
.kakao_login {background: #ffeb00; color: #000;}
.naver_login {background: #03c75b; color: white;}

/* 메인 비주얼 영역 로그인 후 */
.loginAfter_area {flex-shrink: 0; margin-top: -30px;}
.loginAfter_box {
	position: relative;
	background: linear-gradient(to bottom, #f4f4f4 0%, transparent 100%);
	border-radius: 40px;
	padding: 50px 45px;
	width: 400px;
	box-sizing: border-box;
}
.loginAfter_box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, #feaf94 0%, transparent 100%);
	border-radius: 40px;
	padding: 1px;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: exclude;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}
.welcome_message {text-align: center; font-size: 18px; font-weight: 600; color: #ff6b35; margin-bottom: 25px;}
.loginAfter_info_area {margin-bottom: 30px; background: #f8f8f8; border-radius: 5px; padding: 20px; border: 1px solid #f2e0db;}
.loginAfter_deposit_info {display: flex; align-items: center; margin-bottom: 20px; gap: 10px; padding: 10px 0;}
.loginAfter_deposit_label {font-size: 16px; font-weight: 600; color: #ff6b35;}
.loginAfter_deposit_label i {margin-right: 5px; color: #ff6b35;}
.loginAfter_deposit_amount {font-size: 16px; font-weight: 700; color: #ff6b35;}
.loginAfter_info_grid {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 30px;}
.loginAfter_info_item {display: flex; align-items: center; gap: 8px; font-size: 16px;}
.loginAfter_info_icon {width: 16px; height: 16px; display: inline-block; flex-shrink: 0; color: #ff6b35;}
.loginAfter_info_icon i {font-size: 16px;}
.loginAfter_info_label {font-size: 16px; font-weight: 500; color: #333;}
.loginAfter_info_value {font-size: 16px; font-weight: 600; color: #333;}
.loginAfter_button_area {display: flex; align-items: center; gap: 15px; margin-top: 25px;}
.mypage_btn {
	flex: 1;
	background: #ff6b35;
	color: white;
	border: none;
	padding: 15px 20px;
	border-radius: 30px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.mypage_btn:hover {background: #e55a2b;}
.logout_btn {
	background: #ffc100;
	color: white;
	border: none;
	padding: 15px 25px;
	border-radius: 30px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.logout_btn:hover {background: #e6ad00;}
@media (max-width: 965px) {
	.loginAfter_area {margin-top: 0;}
	.loginAfter_box {width: 100%; width: 600px; padding: 30px 25px; border-radius: 30px;}
	.welcome_message {font-size: 17px; margin-bottom: 20px;}
	.loginAfter_info_area {padding: 18px; background: #f8f8f8;}
	.loginAfter_deposit_info {margin-bottom: 18px;}
	.loginAfter_deposit_label, .loginAfter_deposit_amount {font-size: 18px;}
	.loginAfter_info_grid {gap: 18px;}
	.loginAfter_info_item {font-size: 18px;}
	.loginAfter_info_label {font-size: 18px;}
	.loginAfter_info_value {font-size: 18px;}
	.loginAfter_button_area {gap: 12px; margin-top: 20px;}
	.mypage_btn {padding: 16px 15px; font-size: 16px;}
	.logout_btn {padding: 16px 20px; font-size: 16px;}
}
@media (max-width: 768px) {
	.loginAfter_box {width: 470px; padding: 25px 20px;}
	.welcome_message {font-size: 16px;}
	.loginAfter_info_area {padding: 16px; background: #f8f8f8;}
	.loginAfter_deposit_label, .loginAfter_deposit_amount {font-size: 14px;}
	.loginAfter_info_grid {gap: 16px;}
	.loginAfter_info_item {font-size: 14px;}
	.loginAfter_info_label {font-size: 14px;}
	.loginAfter_info_value {font-size: 14px;}
	.loginAfter_button_area {gap: 10px;}
	.mypage_btn {padding: 14px 12px; font-size: 15px;}
	.logout_btn {padding: 14px 18px; font-size: 15px;}
}
@media (max-width: 480px) {
	.loginAfter_box {width: 370px; padding: 25px 20px;}
	.welcome_message {font-size: 15px;}
	.loginAfter_info_area {padding: 15px;}
	.loginAfter_deposit_label, .loginAfter_deposit_amount {font-size: 14px;}
	.loginAfter_info_grid {gap: 14px;}
	.loginAfter_info_item {font-size: 14px; gap: 6px; padding: 5px 0;}
	.loginAfter_info_label {font-size: 14px;}
	.loginAfter_info_value {font-size: 14px;}
	.loginAfter_button_area {gap: 8px;}
	.mypage_btn {padding: 14px 10px; font-size: 15px;}
	.logout_btn {padding: 14px 15px; font-size: 15px;}
}
@media (max-width: 360px) {
	.loginAfter_box {padding: 20px 15px; width: 300px;}
	.welcome_message {font-size: 14px; margin-bottom: 18px; margin-top: 10px;}
	.loginAfter_info_area {padding: 12px;}
	.loginAfter_deposit_info {margin-bottom: 15px;}
	.loginAfter_deposit_label, .loginAfter_deposit_amount {font-size: 13px;}
	.loginAfter_info_grid {gap: 12px; padding-bottom: 10px;}
	.loginAfter_info_item {font-size: 13px; gap: 5px; padding: 3px 0;}
	.loginAfter_info_label {font-size: 13px;}
	.loginAfter_info_value {font-size: 13px;}
	.loginAfter_info_icon {width: 14px; height: 14px;}
	.loginAfter_info_icon i {font-size: 14px;}
	.loginAfter_button_area {margin-top: 18px; gap: 6px;}
	.mypage_btn {padding: 12px 8px; font-size: 14px;}
	.logout_btn {padding: 12px 12px; font-size: 14px;}
}

/* 물류 일러스트 영역 */
.logistics_area {position: absolute; top: 380px; left: 57%; transform: translateX(-50%); width: 100%; height: 600px; z-index: 10;}
.logistics_item {position: absolute; opacity: 0; transform: translateY(100px); animation: itemFloatIn 0.8s ease-out forwards, itemFloat 3s ease-in-out infinite; z-index: 15;}
.logistics_item img {width: auto; height: auto; object-fit: contain;}

.item1 {left: 3%; top: 15%; animation: fadeInSlow 1.5s ease-out forwards; animation-delay: 2.5s; transform: none;}
.item2 {left: 1%; top: 5%; animation-delay: 1s, 2s;}
.item3 {left: 0%; bottom: 27%; animation-delay: 1.2s, 2.5s;}
.item4 {left: 11%; top: 13%; animation-delay: 1.4s, 3s;}
.item5 {left: 23%; bottom: 8%; animation-delay: 1.6s, 3.5s;}
.item6 {right: 27%; bottom: 36%; animation-delay: 1.8s, 4s;}
.item7 {right: 13%; top: 10%; animation-delay: 2s, 4.5s;}

/* 애니메이션 정의 */
@keyframes fadeInUp {to {opacity: 1; transform: translateY(0);}}
@keyframes logoEntrance {to {opacity: 1; transform: scale(1);}}
@keyframes logoPulse {0%, 100% {transform: scale(1);} 50% {transform: scale(1.05);}}
@keyframes itemFloatIn {to {opacity: 1; transform: translateY(0);}}
@keyframes itemFloat {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-8px);}}
@keyframes fadeInSlow {from {opacity: 0;} to {opacity: 1;}}
@media (max-width: 1400px) {
	.container {padding: 0 30px;}
	.top_area {gap: 50px; max-width: 900px;}
	.title_line1,
	.title_line2 {display: block; font-size: 34px; line-height: 1.5; font-family: 'JalnanGo'; color: #000; margin-bottom: 10px; opacity: 0; white-space: nowrap; transform: translateY(50px); animation: fadeInUp 1s ease-out forwards;}
	.logo_area img {width: 450px; height: auto;}
	.logistics_area {position: absolute; top: 380px; left: 57%; transform: translateX(-50%) scale(0.90); width: 1300px; height: 600px; z-index: 10;}
	.logistics_item {position: absolute; opacity: 0; transform: translateY(100px); animation: itemFloatIn 0.8s ease-out forwards, itemFloat 3s ease-in-out infinite; z-index: 15;}
	.logistics_item img {width: 95%; height: auto; object-fit: contain;}
	.item1 {left: 3%; top: 15%; animation: fadeInSlow 1.5s ease-out forwards; animation-delay: 2.5s; transform: none;}
	.item2 {left: 1%; top: 5%; animation-delay: 1s, 2s;}
	.item3 {left: 0%; bottom: 30%; animation-delay: 1.2s, 2.5s;}
	.item4 {left: 11%; top: 13%; animation-delay: 1.4s, 3s;}
	.item5 {left: 22%; bottom: 14%; animation-delay: 1.6s, 3.5s;}
	.item6 {right: 24%; bottom: 35%; animation-delay: 1.8s, 4s;}
	.item7 {right: 13%; top: 10%; animation-delay: 2s, 4.5s;}
}
@media (max-width: 1180px) {
	.index_intro {height: 900px;}
	.top_area {gap: 40px; max-width: 800px; top: 50px;}
	.title_line1, .title_line2 {font-size: 42px;}
	.login_box {width: 350px; padding: 40px 35px;}
	.login_input {padding: 10px 18px; font-size: 15px;}
	.checkbox_area {font-size: 15px; margin: 18px 0;}
	.login_btn {padding: 13px 18px; font-size: 16px;}
	.social_btn {width: 45px; height: 45px;}
	.social_btn img {width: 22px; height: 22px;}
	.title_line1,
	.title_line2 {display: block; font-size: 28px; line-height: 1.5; font-family: 'JalnanGo'; color: #000; margin-bottom: 10px; opacity: 0; white-space: nowrap; transform: translateY(50px); animation: fadeInUp 1s ease-out forwards;}
	.logo_area {opacity: 0; transform: scale(0.6); animation: logoEntrance 1.2s ease-out 0.6s forwards, logoPulse 2s ease-in-out 1.8s infinite; margin-top: -20px;}
	.logo_area img {width: 350px; height: auto;}
	.logistics_area {transform: translateX(-55%) scale(0.80); width: 1200px; margin-top: -60px;}
	.logistics_item img {width: auto; height: auto; object-fit: contain;}
	.item1 {left: 3%; top: 15%; animation: fadeInSlow 1.5s ease-out forwards; animation-delay: 2.5s; transform: none;}
	.item2 {left: 1%; top: 5%; animation-delay: 1s, 2s;}
	.item3 {left: 0%; bottom: 30%; animation-delay: 1.2s, 2.5s;}
	.item4 {left: 11%; top: 13%; animation-delay: 1.4s, 3s;}
	.item5 {left: 18%; bottom: 16%; animation-delay: 1.6s, 3.5s;}
	.item6 {right: 24%; bottom: 35%; animation-delay: 1.8s, 4s;}
	.item7 {right: 1%; top: 10%; animation-delay: 2s, 4.5s;}
}
@media (max-width: 965px) {
	.index_intro {height: auto; min-height: 75vh; padding: 20px 0;}
	.container {padding: 0 15px;}
	.top_area {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		flex-direction: column;
		align-items: center;
		gap: 30px;
		width: auto;
		max-width: none;
		margin-bottom: 30px;
	}
	.main_text_area {margin-bottom: 20px;}
	.title_line1, .title_line2 {font-size: 50px; white-space: normal; line-height: 0.8; margin-bottom: 8px; margin-top: 45px;}
	.logo_area img {max-width: 800px; height: auto; margin-top: 30px;}
	.login_area {margin-top: 0;}
	.login_box {width: 100%; max-width: 500px; padding: 30px 25px; border-radius: 30px;}
	.login_input {padding: 14px 20px; font-size: 16px; margin-bottom: 12px;}
	.checkbox_area {font-size: 14px; margin: 15px 0; padding: 0 5px;}
	.checkbox_area input[type="checkbox"] {width: 18px; height: 18px; margin-right: -180px;}
	.login_button_area {flex-direction: column; gap: 15px; margin-top: 20px;}
	.login_btn {width: 100%; padding: 16px 20px; font-size: 17px;}
	.social_login {justify-content: center; gap: 15px;}
	.social_btn {width: 50px; height: 50px;}
	.logistics_area {transform: translateX(-52%) scale(0.7); width: 1200px; margin-top: 200px;}
	.logistics_item img {width: auto; height: auto; object-fit: contain;}
	.item1 {left: 3%; top: 15%; animation: fadeInSlow 1.5s ease-out forwards; animation-delay: 2.5s; transform: none;}
	.item2 {left: 1%; top: 5%; animation-delay: 1s, 2s;}
	.item3 {left: 0%; bottom: 30%; animation-delay: 1.2s, 2.5s;}
	.item4 {left: 11%; top: 13%; animation-delay: 1.4s, 3s;}
	.item5 {left: 18%; bottom: 16%; animation-delay: 1.6s, 3.5s;}
	.item6 {right: 24%; bottom: 35%; animation-delay: 1.8s, 4s;}
	.item7 {right: 1%; top: 10%; animation-delay: 2s, 4.5s;}
}
@media (max-width: 820px) {
	.index_intro {height: auto; min-height: 95vh; padding: 20px 0;}
}
@media (max-width: 768px) {
	.index_intro {height: auto; min-height: 95vh; padding: 20px 0;}
	.title_line1, .title_line2 {font-size: 35px; line-height: 0.9; margin-top: 30px;}
	.logo_area img {max-width: 350px;}
	.login_box {max-width: 350px; padding: 25px 20px;}
	.login_input {padding: 12px 16px; font-size: 15px;}
	.checkbox_area {font-size: 13px;}
	.checkbox_area input[type="checkbox"] {width: 18px; height: 18px; margin-right: -50px;}
	.login_btn {padding: 14px 18px; font-size: 16px;}
	.social_btn {width: 45px; height: 45px;}
	.social_btn img {width: 20px; height: 20px;}
	.logistics_area {transform: translateX(-50%) scale(0.7); margin-top: 120px;}
}
@media (max-width: 480px) {
	.index_intro {height: auto; min-height: 80vh; padding: 20px 0;}
	.title_line1, .title_line2 {font-size: 28px; line-height: 1.2; margin-top: 20px;}
	.logo_area img {max-width: 250px;}
	.login_box {max-width: 350px; padding: 25px 20px;}
	.login_input {padding: 12px 16px; font-size: 15px;}
	.checkbox_area {font-size: 13px;}
	.checkbox_area span {font-size: 13px;}
	.checkbox_area input[type="checkbox"] {width: 18px; height: 18px; margin-right: -45px;}
	.login_btn {padding: 14px 18px; font-size: 16px;}
	.social_btn {width: 45px; height: 45px;}
	.social_btn img {width: 20px; height: 20px;}
	.logistics_area {transform: translateX(-50%) scale(0.7); margin-top: -20px;}
}
@media (max-width: 360px) {
	.index_intro {height: auto; min-height: 95vh; padding: 20px 0;}
	.title_line1, .title_line2 {font-size: 28px; line-height: 0.2; margin-top: 40px;}
	.logo_area img {max-width: 240px; margin-top: 20px;}
	.login_box {padding: 20px 15px; width: 300px;}
	.logistics_area {transform: translateX(-50%) scale(0.6);}
}

/* 공지 & 배너 섹션 */
.notice_section {width: 100%; padding: 80px 0; position: relative; z-index: 0; overflow: hidden;}
.notice_container {width: 1370px; margin: 0 auto; position: relative; height: 518px;}
.notice_grid {display: flex; flex-direction: column; gap: 26px; position: relative; z-index: 2; pointer-events: none;}
.notice_row.top {display: flex; gap: 38px; width: 676px;}
.notice_row.bottom {display: flex; gap: 38px; width: 1032px;}
.notice_item {
	width: 320px; 
	height: 246px; 
	background: #f0f5fb; 
	padding: 25px; 
	position: relative; 
	display: flex; 
	flex-direction: column; 
	box-sizing: border-box; 
	cursor: pointer; 
	pointer-events: auto;
}
.notice_label {
	background: #000; 
	color: #fff; 
	padding: 8px 15px; 
	font-size: 14px; 
	font-weight: 600; 
	letter-spacing: 0.5px; 
	margin-bottom: 12px;
	width: fit-content;
}
.notice_title_wrap {display: flex; align-items: center; gap: 6px; margin-bottom: 8px;}
.notice_new {font-size: 12px; font-weight: bold; color: #fff; background-color: #e60023; border-radius: 100px; padding: 3px;}
.notice_title {font-size: 16px; font-weight: 600; color: #333; line-height: 1.4; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice_desc {
	font-size: 15px; 
	color: #666; 
	line-height: 1.5; 
	margin: 8px 0; 
	flex-grow: 1; 
	display: -webkit-box; 
	-webkit-line-clamp: 3; 
	-webkit-box-orient: vertical; 
	overflow: hidden; 
	text-overflow: ellipsis;
	max-height: 70px;
}
.notice_divider {height: 1px; background-color: #d9d9d9; margin-top: auto; margin-bottom: 30px;}
.notice_date {font-size: 15px; color: #999; position: absolute; bottom: 20px; right: 20px;}
.notice_banner {position: absolute; bottom: 0; right: 0; width: 657px; height: 518px; z-index: 1;}
.notice_banner img {width: 100%; height: 100%; object-fit: cover; object-position: right bottom; display: block; cursor: pointer;}
.notice_banner_mobile {display: none;}

@media (max-width: 1200px) {
	.notice_section {padding: 60px 0; display: flex; flex-direction: column;}
	.notice_container {width: 100%; margin: 0; padding: 0 20px; display: flex; flex-direction: column;}
	.notice_banner {display: none;}
	.notice_banner_mobile {display: block; width: calc(100% - 40px); margin: 0 auto 40px auto; order: -1;}
	.notice_banner_mobile img {width: 100%; height: auto; display: block;}
	.notice_grid {pointer-events: auto;}
	.notice_row.top, .notice_row.bottom {width: 100%; gap: 20px; flex-wrap: wrap; justify-content: center;}
	.notice_item {width: calc(50% - 15px); min-height: 280px;}
	.notice_row.bottom .notice_item:last-child {display: none;}
	.notice_title {white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: unset;}
}
@media (max-width: 768px) {
	.notice_section {padding: 40px 0; display: flex; flex-direction: column;}
	.notice_container {width: 100%; margin: 0; padding: 0 20px; display: flex; flex-direction: column;}
	.notice_banner {display: none;}
	.notice_banner_mobile {display: block; width: calc(100% - 40px); margin: 0 auto 40px auto; order: -1;}
	.notice_banner_mobile img {width: 100%; height: auto; display: block;}
	.notice_grid {gap: 15px; pointer-events: auto;}
	.notice_row.top, .notice_row.bottom {gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%;}
	.notice_item {width: calc(50% - 12px); max-width: none; height: auto; min-height: 260px; padding: 20px;}
	.notice_item.last_item {display: none;}
	.notice_label {font-size: 12px; padding: 4px 8px;}
	.notice_title {font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: unset;}
	.notice_desc {
		font-size: 13px; 
		display: -webkit-box; 
		-webkit-line-clamp: 4; 
		-webkit-box-orient: vertical; 
		overflow: hidden; 
		text-overflow: ellipsis;
	}
	.notice_date {font-size: 13px; bottom: 15px; right: 15px;}
	.notice_divider {margin-bottom: 25px;}
}
@media (max-width: 480px) {
	.notice_section {padding: 30px 0; display: flex; flex-direction: column;}
	.notice_container {width: 100%; margin: 0; padding: 0 20px; display: flex; flex-direction: column;}
	.notice_banner {display: none;}
	.notice_banner_mobile {display: block; width: calc(100% - 40px); margin: 0 auto 40px auto; order: -1;}
	.notice_banner_mobile img {width: 100%; height: auto; display: block;}
	.notice_item {padding: 15px; min-height: 240px; width: calc(50% - 12px);}
	.notice_item.last_item {display: none;}
	.notice_title {font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: unset;}
	.notice_desc {
		font-size: 14px; 
		display: -webkit-box; 
		-webkit-line-clamp: 4; 
		-webkit-box-orient: vertical; 
		overflow: hidden; 
		text-overflow: ellipsis;
		max-height: 80px;
	}
}

/* 시장조사/시장투어 등 카드 */
.partnership_section {width: 100%; padding: 80px 0; background-color: #fff;}
.partnership_container {width: 1370px; margin: 0 auto;}
.partnership_header {
	text-align: center; 
	margin-bottom: 60px;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeInUp 0.8s ease-out forwards;
}
.partnership_subtitle {
	font-size: 40px; 
	font-weight: 600; 
	color: #000; 
	margin-bottom: 10px;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease-out 0.2s forwards;
}
.partnership_title {
	font-size: 60px; 
	font-weight: 700; 
	color: #000; 
	margin-bottom: 20px; 
	letter-spacing: -1px;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease-out 0.4s forwards;
}
.partnership_desc {
	font-size: 18px; 
	font-weight: 500; 
	color: #666; 
	line-height: 1.5;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease-out 0.6s forwards;
}
.service_grid {display: flex; gap: 20px; justify-content: center;}
.service_card {width: calc(25% - 15px); padding: 60px 30px; background-color: #f8f9fa; text-align: center; display: flex; flex-direction: column; align-items: center;}
.service_card:nth-child(1) {background-color: #f0f0ff;}
.service_card:nth-child(2) {background-color: #fff5f5;}
.service_card:nth-child(3) {background-color: #f0f8ff;}
.service_card:nth-child(4) {background-color: #fff8f0;}
.service_icon {margin-bottom: 30px; display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 20px;}
.service_name {font-size: 30px; font-style: italic; font-weight: 600; color: #333; margin-bottom: 50px;}
.service_text {font-size: 16px; font-weight: 500; color: #333; line-height: 1.6; margin-top: auto; padding: 0 10px;}
@keyframes fadeInUp {
	to {opacity: 1;	transform: translateY(0);}
}
@media (max-width: 1400px) {
	.partnership_container {width: 100%; padding: 0 20px;}
}
@media (max-width: 1200px) {
	.partnership_container {width: 100%; padding: 0 20px;}
	.service_grid {gap: 15px;}
	.service_card {width: calc(25% - 12px); padding: 50px 25px;}
}
@media (max-width: 1024px) {
	.partnership_section {padding: 60px 0;}
	.partnership_container {width: 100%; padding: 0 20px;}
	.partnership_header {margin-bottom: 50px;}
	.partnership_subtitle {font-size: 32px;}
	.partnership_title {font-size: 48px;}
	.partnership_desc {font-size: 16px;}
	.service_grid {flex-wrap: wrap; justify-content: center;}
	.service_card {width: calc(50% - 8px); min-width: 300px; padding: 40px 20px;}
	.service_name {font-size: 26px; margin-bottom: 40px;}
	.service_icon {padding: 15px;}
}
@media (max-width: 768px) {
	.partnership_section {padding: 40px 0;}
	.partnership_container {width: 100%; padding: 0 20px;}
	.partnership_header {margin-bottom: 40px;}
	.partnership_subtitle {font-size: 24px;}
	.partnership_title {font-size: 36px;}
	.partnership_desc {font-size: 14px;}
	.service_grid {gap: 10px;}
	.service_card {width: calc(50% - 5px); min-width: 160px; padding: 30px 15px; height: auto;}
	.service_name {font-size: 18px; margin-bottom: 20px;}
	.service_icon {margin-bottom: 20px; padding: 15px;}
	.service_text {font-size: 13px; line-height: 1.4;}
}
@media (max-width: 480px) {
	.partnership_section {padding: 30px 0;}
	.partnership_container {width: 100%; padding: 0 20px;}
	.partnership_subtitle {font-size: 20px;}
	.partnership_title {font-size: 28px;}
	.partnership_desc {font-size: 13px;}
	.service_grid {gap: 8px;}
	.service_card {width: calc(50% - 4px); padding: 40px 10px; min-width: 150px;}
	.service_name {font-size: 16px; margin-bottom: 15px;}
	.service_icon {margin-bottom: 15px; padding: 12px;}
	.service_text {font-size: 12px;}
	.mobile-break::before {content: "\A"; white-space: pre;}
}
@media (max-width: 360px) {
	.partnership_container {width: 100%; padding: 0 20px;}
	.partnership_subtitle {font-size: 18px;}
	.partnership_title {font-size: 24px;}
	.partnership_desc {font-size: 12px;}
	.service_grid {gap: 6px;}
	.service_card {width: calc(50% - 3px); padding: 30px 8px; min-width: 120px;}
	.service_name {font-size: 14px; margin-bottom: 12px;}
	.service_icon {margin-bottom: 12px; padding: 10px;}
	.service_text {font-size: 11px;}
}

/* 시장투어 이미지 */
.tour_guide_section {width: 100%; padding: 80px 0; background-color: #fff;}
.tour_guide_container {width: 100%; margin: 0 auto; position: relative;}
.card_wrapper {width: 1710px; margin: 0 auto; position: relative; height: 714px;}
.tour_card {
	position: absolute; 
	overflow: hidden; 
	cursor: pointer; 
	box-shadow: 6px 8px 0 0 rgba(0, 0, 0, 0.2);
}
.tour_card.left_card {left: 0; top: 0; z-index: 2;}
.tour_card.right_card {left: 741px; top: 114px; z-index: 1;}
.card_bg {width: 100%; height: 100%; object-fit: cover; display: block;}
.tour_card.left_card .card_content {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: auto; 
	display: flex; 
	flex-direction: row; 
	justify-content: flex-start; 
	align-items: flex-start; 
	padding: 60px; 
	box-sizing: border-box; 
	color: #fff; gap: 40px;
}
.tour_card.right_card .card_content {
	position: absolute; 
	bottom: 0; 
	right: 0;
	width: 100%; 
	height: auto; 
	display: flex; 
	flex-direction: row; 
	justify-content: flex-end; 
	align-items: flex-end; 
	padding: 60px; 
	box-sizing: border-box; 
	color: #fff; 
	gap: 40px;
}
.card_title {font-size: 48px; font-weight: 700; margin-bottom: 0; position: relative; display: inline-block;}
.title_underline {position: absolute; bottom: -10px; left: 0; width: 80px; height: 4px; background-color: #fff; display: block;}
.card_desc_wrap {background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 8px; align-self: flex-end;}
.card_desc {font-size: 20px; line-height: 1.6; font-weight: 400; margin: 0;}

@media (max-width: 1400px) {
	.card_wrapper {width: calc(100% - 40px); margin: 0 20px; height: auto;}
	.tour_card {width: calc(50% + 30px); height: 500px;}
	.tour_card.right_card {left: calc(50% - 30px); top: 80px;}
	.card_content {padding: 50px;}
	.card_title {font-size: 40px;}
	.card_desc {font-size: 18px;}
}
@media (max-width: 1200px) {
	.tour_card {width: calc(50% + 20px); height: 450px;}
	.tour_card.right_card {left: calc(50% - 20px); top: 60px;}
	.card_content {padding: 40px;}
	.card_title {font-size: 36px;}
	.card_desc {font-size: 16px;}
}
@media (max-width: 1024px) {
	.tour_guide_section {padding: 60px 0;}
	.card_wrapper {width: calc(100% - 40px); margin: 0 20px; height: auto;}
	.tour_card {width: calc(50% + 10px); height: 400px;}
	.tour_card.right_card {left: calc(50% - 10px); top: 40px;}
	.tour_card.left_card .card_content {
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%;
		display: flex; 
		flex-direction: column; 
		justify-content: space-between; 
		align-items: flex-start; 
		padding: 30px; 
		gap: 20px;
	}
	.tour_card.right_card .card_content {
		position: absolute; 
		top: 0; 
		right: 0; 
		width: calc(100% - 10px); 
		height: 100%;
		display: flex; 
		flex-direction: column; 
		justify-content: space-between; 
		align-items: flex-end; 
		padding: 30px; 
		gap: 20px;
		text-align: right;
	}
	.card_title {font-size: 28px; margin-bottom: 0;}
	.title_underline {width: 50px; height: 3px;}
	.card_desc {font-size: 14px;}
	.card_desc_wrap {padding: 15px; margin-top: auto;}
	.tour_card.left_card .card_desc_wrap {align-self: stretch;}
	.tour_card.right_card .card_desc_wrap {align-self: stretch;}
}
@media (max-width: 768px) {
	.tour_guide_section {padding: 40px 0;}
	.card_wrapper {width: calc(100% - 40px); margin: 0 20px; height: auto; display: flex; flex-direction: column; gap: 20px;}
	.tour_card {position: relative; width: 100%; height: 300px; left: 0; top: 0;}
	.tour_card.left_card, .tour_card.right_card {position: relative; left: 0; top: 0;}
	.tour_card.left_card .card_content {
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%;
		display: flex; 
		flex-direction: column; 
		justify-content: space-between; 
		align-items: flex-start; 
		padding: 30px; 
		gap: 15px;
	}
	.tour_card.right_card .card_content {
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%;
		display: flex; 
		flex-direction: column; 
		justify-content: space-between; 
		align-items: flex-end; 
		padding: 30px; 
		gap: 15px;
		text-align: right;
	}
	.card_title {font-size: 24px; margin-bottom: 0;}
	.title_underline {width: 40px; height: 2px;}
	.card_desc {font-size: 14px;}
	.card_desc_wrap {padding: 12px; margin-top: auto;}
	.tour_card.left_card .card_desc_wrap {align-self: stretch;}
	.tour_card.right_card .card_desc_wrap {align-self: stretch;}
}
@media (max-width: 480px) {
	.tour_guide_section {padding: 30px 0;}
	.card_wrapper {width: calc(100% - 40px); margin: 0 20px;}
	.tour_card {height: 250px;}
	.tour_card.left_card .card_content, .tour_card.right_card .card_content {padding: 20px; gap: 10px;}
	.card_title {font-size: 20px;}
	.card_desc {font-size: 12px;}
	.card_desc_wrap {padding: 10px;}
}

/* 서비스 갤러리 섹션 */
.service_gallery_section {width: 100%; padding: 80px 0; background-color: #fff;}
.service_gallery_container {width: 1370px; margin: 0 auto;}
.gallery_scroll_wrapper {
	display: flex; 
	gap: 30px; 
	overflow-x: auto; 
	overflow-y: hidden; 
	padding-bottom: 20px; 
	-webkit-overflow-scrolling: touch; 
	scrollbar-width: thin; 
	scrollbar-color: #ccc transparent; 
	scroll-behavior: auto;
	cursor: grab;
	scroll-snap-type: none;
}
.gallery_scroll_wrapper:active {cursor: grabbing;}
.gallery_scroll_wrapper::-webkit-scrollbar {height: 8px;}
.gallery_scroll_wrapper::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 4px;}
.gallery_scroll_wrapper::-webkit-scrollbar-thumb {background: #ccc; border-radius: 4px;}
.gallery_scroll_wrapper::-webkit-scrollbar-thumb:hover {background: #999;}
.gallery_card {
	min-width: 400px; 
	height: 320px; 
	background-color: #fff; 
	border: 1px solid #ddd; 
	overflow: hidden; 
	cursor: pointer; 
	flex-shrink: 0; 
	user-select: none;
	scroll-snap-align: none;
}
.gallery_image {width: 100%; height: 240px; overflow: hidden;}
.gallery_image img {width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;}
.gallery_title {padding: 20px 25px; margin: 0; font-size: 22px; font-weight: 600; color: #333; text-align: center; background-color: #fff;}
@media (max-width: 1400px) {
	.service_gallery_container {width: calc(100% - 40px); margin: 0 20px;}
}
@media (max-width: 1200px) {
	.service_gallery_container {width: calc(100% - 40px); margin: 0 20px;}
	.gallery_card {min-width: 350px; height: 280px;}
	.gallery_image {height: 200px;}
	.gallery_title {font-size: 20px; padding: 18px 20px;}
}
@media (max-width: 1024px) {
	.service_gallery_section {padding: 60px 0;}
	.service_gallery_container {width: calc(100% - 40px); margin: 0 20px;}
	.gallery_scroll_wrapper {gap: 20px;}
	.gallery_card {min-width: 300px; height: 250px;}
	.gallery_image {height: 180px;}
	.gallery_title {font-size: 18px; padding: 15px 18px;}
}
@media (max-width: 768px) {
	.service_gallery_section {padding: 40px 0;}
	.service_gallery_container {width: calc(100% - 40px); margin: 0 20px;}
	.gallery_scroll_wrapper {gap: 15px; padding-bottom: 15px;}
	.gallery_card {min-width: 280px; height: 240px;}
	.gallery_image {height: 180px;}
	.gallery_title {font-size: 16px; padding: 12px 15px;}
}
@media (max-width: 480px) {
	.service_gallery_section {padding: 30px 0;}
	.service_gallery_container {width: calc(100% - 40px); margin: 0 20px;}
	.gallery_scroll_wrapper {gap: 12px;}
	.gallery_card {min-width: 260px; height: 220px;}
	.gallery_image {height: 170px;}
	.gallery_title {font-size: 15px; padding: 12px 15px;}
}

/* 고객센터 섹션 */
.customer_center_section {width: 100%; padding: 80px 0; background-color: #f8f9fa;}
.customer_center_container {width: 1370px; margin: 0 auto; text-align: center;}
.center_title {font-size: 48px; font-weight: 700; color: #333; margin-bottom: 40px;}
.center_info {display: flex; justify-content: center; gap: 80px; margin-bottom: 60px;}
.center_time, .center_email {display: flex; align-items: center; gap: 12px;}
.info_icon {font-size: 24px;}
.info_icon img {display: block;}
.info_text {display: flex; flex-direction: column; text-align: left;}
.info_label {font-size: 16px; color: #666; margin-bottom: 4px;}
.info_value {font-size: 20px; font-weight: 600; color: #333;}
.counselor_list {display: flex; justify-content: center; gap: 40px; margin-bottom: 60px;}
.counselor_item {display: flex; align-items: center; gap: 15px; padding: 20px; background-color: #fff; border: 1px solid #ddd; min-width: 280px;}
.counselor_avatar {width: 60px; height: 60px; border-radius: 50%; overflow: hidden; position: relative;}
.counselor_avatar img {width: 100%; height: 100%; object-fit: cover; display: block;}
.counselor_info {text-align: left;}
.counselor_name {font-size: 18px; font-weight: 600; color: #333; margin-bottom: 4px;}
.counselor_dept {font-size: 14px; color: #666; margin-bottom: 8px;}
.counselor_phone {font-size: 16px; font-weight: 500; color: #333;}
.center_divider {width: 100%; height: 1px; background-color: #ddd; border: none; margin: 60px 0;}
.talk_buttons {display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;}
.talk_btn {
	width: 120px;
	padding: 20px 0;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform 0.2s ease;
}
.talk_btn.yellow {background-color: #ffd700;}
.talk_btn.orange {background-color: #ff9500;}
.talk_btn:hover {transform: translateY(-2px);}
.btn_icon img {width: 24px; height: 24px; display: block;}
.btn_text {font-size: 17px; font-weight: 700; color: #333; line-height: 1.4;}

@media (max-width: 1400px) {
	.customer_center_section {margin-top: 50px;}
	.customer_center_container {width: 100%; padding: 0 20px;}
}
@media (max-width: 1200px) {
	.customer_center_container {width: 100%; padding: 0 20px;}
	.center_info {gap: 60px;}
	.counselor_list {gap: 30px; flex-wrap: wrap; justify-content: center;}
	.counselor_item {width: calc(50% - 15px); min-width: 260px; padding: 18px;}
	.talk_buttons {gap: 15px;}
}
@media (max-width: 1024px) {
	.customer_center_section {padding: 60px 0;}
	.customer_center_container {width: 100%; padding: 0 20px;}
	.center_title {font-size: 40px; margin-bottom: 30px;}
	.center_info {gap: 40px; margin-bottom: 40px;}
	.counselor_list {gap: 20px;}
	.counselor_item {width: calc(50% - 10px); min-width: 240px;}
	.center_divider {margin: 40px 0;}
	.talk_btn {width: 110px;}
	.btn_icon img {width: 20px; height: 20px;}
	.btn_text {font-size: 15px;}
}
@media (max-width: 768px) {
	.customer_center_section {padding: 40px 0;}
	.customer_center_container {width: 100%; padding: 0 20px;}
	.center_title {font-size: 32px; margin-bottom: 25px;}
	.center_info {gap: 20px; margin-bottom: 30px;}
	.center_time, .center_email {justify-content: center;}
	.info_icon img {width: 20px; height: 20px;}
	.info_value {font-size: 18px;}
	.counselor_list {gap: 15px; flex-wrap: wrap; justify-content: center;}
	.counselor_item {width: calc(50% - 8px); min-width: 200px; max-width: none;}
	.counselor_avatar {width: 50px; height: 50px;}
	.counselor_name {font-size: 18px;}
	.counselor_phone {font-size: 17px; font-weight: 600;}
	.center_divider {margin: 30px 0;}
	.talk_buttons {gap: 12px;}
	.talk_btn {width: calc(33.333% - 8px); min-width: 100px;}
	.btn_icon img {width: 25px; height: 25px;}
	.btn_text {font-size: 15px;}
}
@media (max-width: 480px) {
	.customer_center_section {padding: 30px 0;}
	.customer_center_container {width: 100%; padding: 0 20px;}
	.center_title {font-size: 28px; margin-bottom: 20px;}
	.center_info {gap: 15px; margin-bottom: 25px;}
	.center_time, .center_email {justify-content: center;}
	.info_icon img {width: 20px; height: 20px;}
	.info_label {font-size: 14px;}
	.info_value {font-size: 14px;}
	.counselor_list {gap: 8px; flex-wrap: wrap; justify-content: center;}
	.counselor_item {width: calc(50% - 4px); min-width: 140px; padding: 12px;}
	.counselor_avatar {width: 40px; height: 40px;}
	.counselor_name {font-size: 14px;}
	.counselor_dept {font-size: 12px;}
	.counselor_phone {font-size: 15px;}
	.talk_buttons {gap: 8px;}
	.talk_btn {width: calc(33.333% - 6px); min-width: 90px;}
	.btn_icon img {width: 30px; height: 30px;}
	.btn_text {font-size: 14px; font-weight: 600;}
}