.experience_list { width: 100%; padding: 96px 22px; padding: clamp(50px, 5vw, 96px) clamp(10px, 1.1458vw, 22px); background-color: #fff; display: flex; flex-direction: column; grid-gap: 28px; grid-gap: clamp(18px, 1.4583vw, 28px); }
.experience_list .navi_box { display: flex; grid-gap: 45px; align-items: center; }
.experience_list .navi_box h2 { color: #0D0D0D; font-size: 1.375rem; font-weight: 700; }
.experience_list .list_box { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; grid-gap: 44px; }
.experience_list .experience_box { display: flex; flex-direction: column; grid-gap: 30px; grid-gap: clamp(18px, 1.5625vw, 30px); }
.experience_list .experience_img .img_box { width: 100%; aspect-ratio: 915 / 385; position: relative; }
.experience_list .experience_img .img_box img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; }
.experience_list .info_box h3 { color: #000; font-size: 1.875rem; font-size: clamp(24px, 1.5625vw, 30px); font-weight: 500; }
.experience_list .info_box p { color: #000; font-size: 1.125rem; font-size: clamp(14px, 0.9375vw, 18px); font-weight: 300; line-height: 1.6; }
.experience_list .detail_list { border-top: 1px solid #0D0D0D; width: 100%; display: flex; flex-direction: column; }
.experience_list .detail_list > li { display: flex; width: 100%; padding: 24px 22px; padding: clamp(12px, 1.2500vw, 24px) clamp(0px, 1.1458vw, 22px); justify-content: space-between; align-items: center; border-bottom: 1px solid #EAEDEF; }
.experience_list .detail_list > li .experience_name { color: #000; font-size: 22px; font-size: clamp(16px, 1.1458vw, 22px); font-style: normal; font-weight: 500; line-height: normal; }
.experience_list .detail_list > li .more_info { color: #000; font-size: 16px; font-size: clamp(14px, 0.8333vw, 16px); font-style: normal; font-weight: 300; line-height: normal; }


.experience_list.v2 { padding-left: 0; padding-right: 0; }
.experience_list.v2 .navi_box { padding: 0 var(--width-padding); }
.experience_list.v2 .list_box { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; grid-gap: 1px; border-bottom: 1px solid #E8EBED; background: #E8EBED; }
.experience_list.v2 .experience_box { background-color: #fff; grid-gap: 0; }
.experience_list.v2 .experience_box .experience_img .img_box { aspect-ratio: 640 / 500; overflow: hidden; }
.experience_list.v2 .experience_box:not(.empty):hover .img_box img { transform: scale(1.1); transition: transform 0.3s ease-in-out; }
.experience_list.v2 .info_box { padding: clamp(12px, 1.2500vw, 24px) var(--width-padding); }
.experience_list.v2 .info_box .category { color: #000; font-size: clamp(14px, 0.8333vw, 16px); font-style: normal; font-weight: 300; margin-bottom: clamp(16px, 1.1458vw, 22px); }
.experience_list.v2 .info_box .title_box { display: flex; flex-direction: column; grid-gap: clamp(16px, 1.1458vw, 22px); }
.experience_list.v2 .info_box .title_box h3 { color: #000; font-family: "classico-urw", sans-serif; font-size: 42px; font-size: clamp(20px, 2.1875vw, 42px); font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.03em; line-height: 1; }
.experience_list.v2 .info_box .title_box p { color: #000; font-size: clamp(15px, 0.9375vw, 18px); font-style: normal; font-weight: 300; line-height: 150%; white-space: pre-line; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2;     /* 최대 2줄 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 50px; }
.experience_list.v2 .info_box .margin_box { display: flex; flex-direction: column; justify-content: space-between; grid-gap: clamp(30px, 4.1667vw, 80px); }
.experience_list.v2 .icon_box > svg { transition: all 0.3s ease-in-out; }
.experience_list.v2 .list_box .experience_box:not(.empty):hover .info_box .icon_box > svg { transform: rotate(90deg); }
.experience_list.v2 .list_box .experience_box:not(.empty):hover .info_box { background-color: rgba(232, 235, 237, 0.36); }


@media (max-width:1200px) {
	.experience_list.v2 .list_box{ grid-template-columns: repeat(2, 1fr); }
	}

@media (max-width:768px) {
.experience_list .list_box { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width:500px) {
	.experience_list.v2 .list_box { grid-template-columns: repeat(1, 1fr); grid-gap: 10px; }
.experience_list.v2 .experience_box .experience_img .img_box { aspect-ratio: 3/2; }
.experience_list.v2 .info_box .more_info { display: none; }
.experience_list.v2 .info_box .title_box p { height: auto; }

}


.experience_detail-title { display: grid; grid-template-columns: repeat(3, 1fr); padding: 24px 22px; padding: clamp(12px, 1.2500vw, 24px) clamp(10px, 1.1458vw, 22px); border: 1px solid #E8EBED; width: 100%; }
.experience_detail-title h1 { color: #000; font-size: 2.625rem; font-size: clamp(24px, 2.1875vw, 42px); font-style: normal; font-weight: 300; }
.experience_detail-title .info_box { display: flex; flex-direction: column; grid-gap: 120px; grid-gap: clamp(50px, 6.2500vw, 120px); }
.experience_detail-title .info_box .desc { color: #0D0D0D; font-size: 1rem; font-size: clamp(14px, 0.8333vw, 16px); font-style: normal; font-weight: 300; line-height: 150%; word-break: keep-all; white-space: pre-line; }
.experience_detail-title .info_box .btn_box { display: flex; grid-gap: 6px; }
.experience_detail-img { width: 100%; padding: 120px 0; padding: clamp(50px, 6.2500vw, 120px) 0; position: relative; overflow: hidden; }
.experience_detail-img .img_box { aspect-ratio: 860 / 422; position: relative; }
.experience_detail-img .img_box img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }
.experience_detail-info { position: relative; }
.experience_detail-info.hidden { display: none; }
.experience_detail-info .title_box { padding: 24px 20px; padding: clamp(12px, 1.2500vw, 24px) var(--width-padding); position: relative; height: 92px; width: 100%; border-bottom: 1px solid #0D0D0D; }
.experience_detail-info .title_box > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; color: #000; font-size: 1.125rem; font-style: normal; font-weight: 300; line-height: normal; }
.experience_detail-info .basic_info { display: grid; grid-template-columns: repeat(3, 1fr); background-color: #E8EBED; grid-gap: 1px; border-bottom: 1px solid #E8EBED; }
.experience_detail-info .basic_info > div { padding: 24px 22px; padding: clamp(12px, 1.2500vw, 24px) var(--width-padding); display: flex; justify-content: space-between; width: 100%; align-items: center; background-color: #fff; flex-wrap: wrap; grid-row-gap: 10px; }
.experience_detail-info .basic_info > div h3 { color: #000; font-size: 1.375rem; font-size: clamp(17px, 1.1458vw, 22px); font-style: normal; font-weight: 500; line-height: normal; }
.experience_detail-info .basic_info > div p { color: #000; font-size: 1rem; font-size: clamp(14px, 0.8333vw, 16px); font-style: normal; font-weight: 300; line-height: normal; word-break: keep-all; white-space: pre-line; }


.experience_detail-info .use_info { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; position: relative; width: 100%; background-color: #E8EBED; grid-gap: 1px; border-bottom: 1px solid #E8EBED; }
.experience_detail-info .use_info > div { background-color: #fff; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.experience_detail-info .use_info > div .title {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	color: #000;
	font-size: 2.625rem;
	font-size: clamp(18px, 2.1875vw, 42px);
	font-weight: 300;
	padding: clamp(14px, 1.4583vw, 28px) var(--width-padding);
	border-right: 1px solid #E8EBED;
}

.experience_detail-info .use_info > div .desc_box {
	grid-column: span 2;
	padding: 28px 22px;
	padding: clamp(14px, 1.4583vw, 28px) var(--width-padding);
	display: flex;
	flex-direction: column;
	grid-gap: 28px;
	grid-gap: clamp(14px, 1.4583vw, 28px);
}

.experience_detail-info .use_info > div .desc_box.bet{
    justify-content: space-between;
}

.experience_detail-info .use_info > div .desc_box .sub_title {
	color: #9C9C9C;
	font-size: 1.25rem;
	font-size: clamp(16px, 1.0417vw, 20px);
	font-weight: 300;
}

.experience_detail-info .use_info > div .desc_box .info {
	color: #0D0D0D;
	font-size: 1rem;
	font-size: clamp(15px, 0.8333vw, 16px);
	font-style: normal;
	font-weight: 300;
	line-height: 160%;
	white-space: pre-line;
	word-break: keep-all;
}

.experience_detail-info .use_info > div .link a{
    color: #286B65;
    font-size: clamp(14px, 0.8333vw, 16px);
font-style: normal;
font-weight: 700;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
} 

.experience_detail-info .use_info > div.full { grid-column: span 2; grid-template-columns: repeat(6, 1fr); }
.experience_detail-info .use_info > div.full .desc_box { grid-column: span 5; }

@media (max-width:1024px) {
.experience_detail-info .basic_info { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:768px) {
.experience_detail-title { display: flex; flex-direction: column; grid-gap: 20px; grid-gap: clamp(4px, 1.0417vw, 20px); }
.experience_detail-info .basic_info { grid-template-columns: repeat(1, 1fr); }
.experience_detail-info .basic_info > div { display: flex; flex-direction: column; align-items: flex-start; }


.experience_detail-info .use_info {
	display: flex
;
	flex-direction: column;
}

.experience_detail-info .use_info > div.full {
	grid-template-columns: repeat(3, 1fr);
}

.experience_detail-info .use_info > div.full .desc_box {
	grid-column: span 2;
}
}

@media (max-width:500px) {
	.experience_detail-info .use_info > div{
		display: flex;
		flex-direction: column;
	}

	.experience_detail-info .use_info > div .title{
		border: none;
		border-bottom: 1px solid #E8EBED;
	}
}