/* 600px 이하 모바일 화면 추가 개선 */

/* 🚀 이미지 로딩 최적화 - 레이아웃 시프트 방지 */
.swiper-img {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.swiper-img[data-background] {
    min-height: 300px;
}

/* 메인 배너 이미지 고정 크기 */
#main_swiper .swiper-img {
    aspect-ratio: 1200/400;
    min-height: 250px;
}

/* 배경 이미지가 있는 컨테이너들 */
.hero-section, .banner-section {
    aspect-ratio: 16/9;
    min-height: 200px;
}

/* 이미지 로딩 중 스켈레톤 표시 */
.img-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media all and (max-width: 600px) {
	.layout-toggle-container {
		margin-top: 15px;
		justify-content: center;
	}

	.swiper-img[data-background] {
		background-size: contain;
		width: 100%;
	}

	#portfolio {
		background: url(/images/main/new_portfolio_bg-cf6bd83dd85c5de5eeb4d19349e23722.jpg) no-repeat 0 0;
		background-size: auto;
		width: 100%;
		height: auto;
	}

	.d-flex.justify-content-between.align-items-center.mb-3 {
		display: flex;
		flex-direction: column;
		align-items: center !important;
		gap: 15px;
	}

	.sub_contents .page_title .subCopy {
		font-size: 3rem;
	}

	.investStatusList .inner_cont .info-num .aum-plus {
		font-size: 20px;
	}

	/* 메인화면 swiper */
	.swiper-content .container {
		display: flex;
		justify-content: center;
	}

	.swiper-content .content {
		padding: 30px 20px !important;
	}

	#main_swiper.swiper-container .swiper-content h1 {
		font-size: 4vh;
	}

	#main_swiper.swiper-container .swiper-content p {
		font-size: 1.8vh;
	}

	#main_swiper.swiper-container .swiper-content strong {
		font-size: 2.5vh;
	}

	#main_swiper.swiper-container .swiper-content a.btn-default {
		color: #fff;
		font-family: "Roboto";
		font-weight: 400;
		font-size: 15px;
		line-height: 1px;
		text-align: center;
		padding: 20px 30px;
		border-radius: 3em;
		display: inline-block;
		border: 1px #fff solid;
		background-color: transparent;
		background-image: none;
	}

	/* 비즈니스 모바일 */
	#businessArea_en .padding-style {
		padding: 0;
	}

	#aboutUs3 .padding-style {
		padding: 0;
	}

	#aboutUs2 .padding-style {
		padding: 0;
	}

	.contactUs .page_title {
		padding:20px;
		width: 100%;
	}

	.company .pad-lr20p {
		padding: 0 5%;
	}

	#contents .padding-style{
		padding: 0 3%;
	}

	/* company CEO MESSAGE 문구 */
	.sub_contents .pageinfo_wrap .pageinfo_copy{
		margin:0;
	}

	.sub_contents .pageinfo_wrap .ddaum:before {
		content: "\f10d";
		position: absolute;
		left: 3%;
		top: 50px;
		font-family: FontAwesome;
		font-size: 20px;
	}

	.sub_contents .pageinfo_wrap .ddaum:after {
		content: "\f10e";
		position: absolute;
		right: 3%;
		top: 50px;
		font-family: FontAwesome;
		font-size: 20px;
	}

	.pageinfo_wrap .layout-toggle-container{
		display: none;
	}

	/* 600px 이하에서 탭을 테이블처럼 깔끔하게 표시 */
	.nav.nav-tabs {
		display: table !important;
		width: 100% !important;
		border-collapse: collapse;
		margin: 0;
		padding: 0;
	}

	.nav.nav-tabs .nav-item {
		display: table-cell !important;
		vertical-align: middle;
		width: 33.333% !important; /* 3개 탭에 동일한 너비 */
		height: 100%;
		text-align: center;
		border: 1px solid #dee2e6;
		border-right: none;
	}

	.nav.nav-tabs .nav-item:last-child {
		border-right: 1px solid #dee2e6;

	}

	/* All 탭 숨김 */
	.nav.nav-tabs .nav-item:first-child {
		display: none !important;
	}

	.nav.nav-tabs .nav-link {
		width: 100% !important;
		padding: 8px 4px !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		text-decoration: none;
		height: 100%;
		color: #495057;
		font-size: clamp(14px, 1.5vw, 18px);
		line-height: 1.3;
		white-space: normal; /* 줄바꿈 허용 */
		overflow: visible; /* 오버플로우 표시 */
		text-overflow: clip; /* 말줄임표 제거 */
		word-wrap: break-word; /* 긴 단어 줄바꿈 */
		hyphens: auto; /* 하이픈 자동 추가 */
		min-height: 40px; /* 최소 높이 설정 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav.nav-tabs .nav-link:hover {
		background-color: #e9ecef;
		color: #495057;
	}

	.nav.nav-tabs .nav-link.active {
		background-color: #007bff !important;
		color: #fff !important;
		border-color: #007bff !important;
		height: 100%;
		min-height: 80px;
	}

	/* 탭 텍스트가 길 때 줄바꿈 처리 */
	.nav.nav-tabs .nav-link .team-menu {
		display: block;
		height: 100%;
		width: 100%;
	}

	.sub_contents .pageinfo_wrap .pageinfo_desc .desc .descInner_en {
		width: 100%;
		margin: 0;
	}

	.make-center {
		display:flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
	}

	/* #aboutUs2 .en-con{
		font-size: 13px !important;
	}

	#aboutUs3 .en-con {
		font-size: 13px !important;
	}

	#businessArea_en .en-con {
		font-size: 13px !important;
	}

	.font13{
		font-size: 13px !important;
	} */

	.upup{
		margin-top: 20px;
	}

	.portList .item .position .port_img a {
		min-height: 140px;
	}

	#footer .footerWrap {
		margin: 0;
		padding: 10px;
		max-width: 100%;
		width: 100%;
	}

	#footer {
		position: relative;
		height: auto;
		min-height: 230px;
		opacity: 1 !important;
		transform: translateY(0) !important;
		transition: all 0.5s ease;
		visibility: visible !important;
		pointer-events: auto;
	}

	#footer.active {
		opacity: 1 !important;
		transform: translateY(0) !important;
		visibility: visible !important;
		pointer-events: auto;
	}

	#footer .footerWrap .bottom-gnb a {
		float: none;
		display: block;
		border: 1px solid #495c83;
		padding: 8px 0;
		margin-bottom: 3px;
		text-align: center;
	}

	#footer .footerWrap .siteinfo {
		padding-bottom: 5px;
		text-align: center;
	}

	#footer .footerWrap .siteinfo address {
		display: block;
		margin: 0 0 15px 0;
		line-height: 1.6;
	}

	#footer .footerWrap .siteinfo span {
		display: block;
		margin-bottom: 8px;
		line-height: 1;
	}

	#footer .footerWrap .siteinfo p {
		margin-bottom: 15px;
		line-height: 1.6;
	}

	#footer .footerWrap .copyright {
		margin-top: 20px;
		padding-top: 15px;
		border-top: 1px solid #495c83;
	}

	#footer .familyBox {
		position: relative;
		margin-bottom: 20px;
		text-align: center;
	}

	#footer .familyList {
		position: absolute;
		width: 100%;
		top: 100%;
		left: 0;
		margin-top: 5px;
	}

}