@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

body {background-color:#222326}
#wrap {position:relative; min-height:100vh; overflow-x:hidden; overflow-y:visible; color:#fff; background-color:#222326}
.main-header {display:grid; grid-template-columns:minmax(200px, 1fr) auto minmax(200px, 1fr); align-items:center; box-sizing:border-box}
.main-header .main-logo {justify-self:start}
.main-header .main-header_page-title {justify-self:center; margin:0; font-family:'futura-pt', sans-serif; font-size:18px; font-weight:400; letter-spacing:0.02em; color:#fff}
.main-header .main-header-actions {justify-self:end}
article#container {background:#fff; color:#333}

@media all and (max-width:1024px) {
	.main-header {
		grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
		column-gap:12px;
	}
	.main-header_page-title {font-size:17px}
}
@media all and (max-width:767px) {
	.main-header {
		padding:16px;
		grid-template-columns:auto 1fr;
		grid-template-rows:auto auto;
		row-gap:12px;
	}
	.main-logo {grid-column:1; grid-row:1}
	.main-header-actions {grid-column:2; grid-row:1; justify-self:end}
	.main-header_page-title {
		grid-column:1 / -1;
		grid-row:2;
		justify-self:center;
		font-size:15px;
		letter-spacing:0.04em;
	}
}









/* History Overview */
.history__main {position:relative; z-index:10; padding:4% 0 0 0; max-width:1366px; margin:0 auto; box-sizing:border-box}
.history__intro {padding:32px 50px 48px; box-sizing:border-box}
.history__intro-head {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:24px 40px; margin-bottom:28px}
.history__intro-titles {display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.history__intro-h2 {margin:0; font-family:'Work Sans', sans-serif; font-size:60px; font-weight:700; line-height:1.05; color:#fff}
.history__intro-sub {font-size:22px; font-weight:400; color:#f3f3f3}
.history__intro-lead {margin:0; max-width:100%; font-size:18px; font-weight:300; line-height:1.8; color:#fff; margin-bottom:24px}
.history__intro-pdf-row {display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin-bottom:150px}
.history__intro-pdf-btn {display:inline-flex; align-items:center; justify-content:center; min-height:89px; padding:0 30px; border:1px solid #fff; border-radius:10px; font-size:20px; font-weight:600; background:transparent; box-sizing:border-box; flex-shrink:0; text-decoration:none; transition:background-color .2s ease, color .2s ease}
.history__intro-pdf-btn--tongsa {color:#ff6900}
.history__intro-pdf-btn--tongsa:hover {background-color:#ff6900; color:#fff;  border:1px solid #ff6900;}
.history__intro-pdf-btn--themasa {color:#0084ff}
.history__intro-pdf-btn--themasa:hover {background-color:#0084ff; color:#fff; border:1px solid #0084ff;}
.history__tl {position:relative; padding:8px 50px 160px; box-sizing:border-box}
.history__tl-line {position:absolute; top:0; bottom:120px; left:calc(80px + 22px); width:1px; z-index:0; pointer-events:none}
.history__tl-line-track {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,.25)}
.history__tl-line-fill {position:absolute; top:0; left:0; width:100%; height:0; background-color:#fff; will-change:height}
.history__tl-rows {position:relative; z-index:1; padding-bottom:100px}
.history__tl-item {display:grid; grid-template-columns:130px minmax(0, 1fr); column-gap:136px; align-items:flex-start; padding-bottom:50px}
.history__tl-item.YearEnd {padding-bottom:170px}
.history__tl-item:last-child {padding-bottom:0}
.history__tl-rail {position:relative; min-height:36px; box-sizing:border-box}
.history__tl-dot {position:absolute; left:54px; top:15px; width:7px; height:7px; margin-left:-5px; border-radius:50%; background-color:#fff; z-index:2}
.history__tl-dot--muted {opacity:0.45}
.history__tl-year-sm {position:absolute; left:70px; top:8px; font-family:'Work Sans', sans-serif; font-size:16px; font-weight:400; line-height:1.2; color:#fff; white-space:nowrap}
.history__tl-item--era .history__tl-year-sm {display:none}
.history__tl-main {position:relative; padding-top:0}
.history__tl-main img {max-width:100%; height:auto; display:block; vertical-align:top}
.history__tl-era {margin:-75px 0 16px 0; font-family:'Work Sans', sans-serif; font-size:48px; font-weight:700; line-height:1.1; color:#fff}
.history__tl-copy {margin:0; font-size:20px; font-weight:300; line-height:1.75; color:#fff}
.history__tl-copy span {font-size:18px; font-weight:100; color:#bbbbbb}
.history_annotation {font-family:'Work Sans', sans-serif; font-size:14px; color:#ccc; max-width:180px; position:absolute; top:0; right:0; line-height:1.5}
.history_annotation_details {margin-top:5px; font-size:12px; color:#aaa; line-height:1.5}
.historyImg-mt {margin-top:20px}
.historyImg-copy {margin:2% 0; font-size:24px; font-weight:500; line-height:1.75; color:#fff;}


/* 반응형 */
@media all and (max-width:1200px) {
	.history__intro-titles {gap:48px}
	.history__tl-item {column-gap:72px}
}
@media all and (max-width:1024px) {
	.history__intro-h2 {font-size:clamp(36px, 6vw, 52px)}
	.history__intro-sub {font-size:18px}
	.history__intro-lead {font-size:17px; margin-bottom:20px}
	.history__intro-pdf-row {margin-bottom:96px}
	.history__tl {padding:8px 26px 120px}
	.history__tl-line {left:40px}
	.history__tl-item {grid-template-columns:96px minmax(0, 1fr); column-gap:40px}
	.history__tl-dot {left:16px}
	.history__tl-year-sm {left:28px; font-size:14px}
	.history__tl-era {font-size:clamp(32px, 5vw, 42px); margin:-48px 0 0 0}
	.history__tl-copy {font-size:18px}
	.history__tl-copy span {font-size:16px}
	.historyImg-copy {font-size:20px}
	.history__tl-item.YearEnd {padding-bottom:120px}
}
@media all and (max-width:767px) {
	.history__intro-head {flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:20px}
	.history__intro-titles {flex-direction:column; align-items:flex-start; gap:8px}
	.history__intro-h2 {font-size:clamp(28px, 8vw, 40px)}
	.history__intro-pdf-row {flex-direction:column; align-items:stretch; margin-bottom:56px}
	.history__intro-pdf-btn {width:100%; max-width:100%; box-sizing:border-box; justify-content:center; min-height:50px; font-size:16px}
	.history__intro-lead {font-size:15px; line-height:1.75; margin-bottom:16px}
	.history__tl {padding:8px 16px 96px}
	.history__tl-rows {padding-bottom:48px}
	.history__tl-line {bottom:80px; left:18px}
	.history__tl-item {
		grid-template-columns:44px minmax(0, 1fr);
		column-gap:16px;
		padding-bottom:40px;
	}
	.history__tl-item.YearEnd {padding-bottom:88px}
	.history__tl-rail {min-height:28px}
	.history__tl-dot {left:4px; top:10px}
	.history__tl-year-sm {left:12px; font-size:13px; top:5px}
	.history__tl-era {margin:-34px 0 0 0; font-size:clamp(26px, 7vw, 34px)}
	.history__tl-copy {font-size:15px; line-height:1.7}
	.history__tl-copy span {font-size:13px}
	.historyImg-copy {font-size:16px; line-height:1.65}
	.historyImg-mt {margin-top:14px}
	.history_annotation {
		position:static;
		max-width:100%;
		margin-top:12px;
		padding-top:0;
		font-size:12px;
	}
	.history_annotation_details {font-size:11px}
}






/* 50th Anniversary Film */
.film__main {position:relative; z-index:10; max-width:1570px; margin:0 auto; padding:4% 50px 70px; box-sizing:border-box}
.film__list {margin-top:7%}
.film__item + .film__item {margin-top:8%}
.film__video-title {margin:0 0 3% 0; font-size:24px; font-weight:500; line-height:1.5; color:#f3f3f3; text-align:center}
.film__video-frame {width:100%; max-width:1470px}
.film__video-frame iframe {width:100%; aspect-ratio:16 / 9; border:0; display:block}


/* 반응형 */
@media all and (max-width:1024px) {
	.film__main {padding:16px 26px 50px}	
	.film__list {margin-top:70px}
	.film__item + .film__item {margin-top:56px}
	.film__video-title {margin-bottom:14px; font-size:24px}
}
@media all and (max-width:767px) {
	.film__main {padding:10px 16px 36px}
	.film__item + .film__item {margin-top:42px}
	.film__video-title {margin-bottom:12px; font-size:20px; line-height:1.45}
}





/* People of ETRI */
.people__main {position:relative; z-index:10; max-width:1570px; margin:0 auto; padding:4% 50px 70px; box-sizing:border-box}
.people__intro .subDesc {font-size:16px; margin-top:6%; color:#626262;}
.people__grid {margin-top:70px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:35px}
.people__item {display:block; border-radius:10px; overflow:hidden}
.people__item img {width:100%; height:auto; display:block; transition:transform .25s ease}
.people__item:hover img {transform:scale(1.03)}

@media all and (max-width:1024px) {
	.people__main {padding:16px 26px 50px}
	.people__intro .subDesc {margin-top:40px}
	.people__grid {margin-top:50px; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px}
}
@media all and (max-width:767px) {
	.people__main {padding:10px 16px 36px}
	.people__intro .subDesc {margin-top:24px}
	.people__grid {margin-top:34px; grid-template-columns:1fr; gap:20px}
}










/* Photo Archive */
.photo__main {position:relative; z-index:10; max-width:1660px; margin:0 auto; padding:4% 50px 80px; box-sizing:border-box}
.photo__intro .subDesc {margin-top:50px}
.photo__tabs {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6%}
.photo__tab {display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 45px; box-sizing:border-box; border:1px solid #fff; border-radius:10px; background:transparent; font-size:15px; font-weight:400; line-height:1.2; color:#c9c9c9; cursor:pointer; font-family:inherit; text-decoration:none; transition:color .2s ease, border-color .2s ease, background-color .2s ease}
.photo__tab:hover {color:#fff}
.photo__tab.is-active {color:#ff7200; border-color:#ff7200}
.photo__stage {position:relative; margin-top:3%}
.photo__swiper-inner {max-width:100%; margin:0 auto; width:100%; position:relative; box-sizing:border-box}
.photo__swiper-row {display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0; width:100%}
.photo__swiper-view {flex:1 1 auto; min-width:0; max-width:1140px; position:relative}
.photo__swiper {overflow:hidden; width:100%}
.photo__nav {position:absolute; z-index:5}
.photo__nav--prev {left:-80px}
.photo__nav--next {right:-80px}
.photo__slide {box-sizing:border-box}
.photo__slide-img-wrap {width:100%; max-width:1140px; margin:0 auto}
.photo__slide-img-wrap img {width:auto; max-height:589px; display:block; vertical-align:top; margin:0 auto}
.photo__slide-foot {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:20px 32px; margin-top:32px}
.photo__caption {flex:1; min-width:0; margin:0; font-size:14px; font-weight:300; line-height:1.65; color:#e5e5e5; text-align:left}
.photo__download {display:inline-flex; align-items:center; justify-content:center; gap:8px; height:31px; padding:0 18px; box-sizing:border-box; border:1px solid #fff; border-radius:8px; background:transparent; font-size:12px; font-weight:300; line-height:1.2; color:#c9c9c9; text-decoration:none; flex-shrink:0; transition:background-color .2s ease, color .2s ease}
.photo__download:hover {background-color:rgba(255,255,255,.08); color:#fff}
.photo__download-text {white-space:nowrap}
.photo__download-icon {display:block; width:auto; height:14px}
.photo__pagination.swiper-pagination-horizontal {position:static !important; display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; width:100% !important; margin:65px 0 0 0 !important; transform:none !important}
.photo__pagination .swiper-pagination-bullet {width:8px; height:8px; margin:0 !important; border-radius:0; opacity:1; background-color:#7d7d7d}
.photo__pagination .swiper-pagination-bullet-active {background-color:#ff6900}
.photo__nav img {display:block; width:100%; height:auto}
.photo__nav:focus-visible {outline:2px solid #ff7200; outline-offset:4px}

@media all and (max-width:1800px) {
	.photo__nav--prev {left:-20px}
	.photo__nav--next {right:-20px}
}
@media all and (max-width:1240px) {
	.photo__slide-img-wrap img {width:100% !important}
}
@media all and (max-width:1024px) {
	.photo__main {padding:16px 26px 50px}
	.photo__intro .subDesc {margin-top:40px}
	.photo__tabs {margin-top:36px}
	.photo__stage {margin-top:72px}
	.photo__swiper-inner {max-width:100%; padding:0 8px; box-sizing:border-box}
	.photo__swiper-row {align-items:center}
	.photo__nav {max-width:30px}
	.photo__nav--prev {left:-10px}
	.photo__nav--next {right:-10px}
}
@media all and (max-width:767px) {
	.photo__main {padding:10px 16px 36px}
	.photo__intro .subDesc {margin-top:24px}
	.photo__tabs {margin-top:28px; gap:8px; flex-wrap:wrap}
	.photo__tab {width:100%; height:auto; min-height:36px; padding:8px 20px; font-size:14px}
	.photo__stage {margin-top:48px}
	.photo__swiper-inner {padding:0 4px}
	.photo__pagination.swiper-pagination-horizontal {margin-top:40px !important}
	.photo__slide-foot {flex-direction:column; align-items:stretch}
	.photo__download {width:100%; max-width:100%; box-sizing:border-box}
}
@media all and (max-width:425px) {
	.photo__nav {max-width:20px}
	.photo__nav--prev {left:-10px}
	.photo__nav--next {right:-10px}
}









/* News Archive */
.news__main {position:relative; z-index:10; max-width:1660px; margin:0 auto; padding:20px 50px 80px; box-sizing:border-box}
.news__intro .subDesc {margin-top:50px}
.news__stage {position:relative; margin-top:72px}
.news__swiper-inner {max-width:100%; margin:0 auto; width:100%; position:relative; box-sizing:border-box}
.news__swiper-row {display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0; width:100%}
.news__swiper-view {flex:1 1 auto; min-width:0; max-width:1140px; position:relative}
.news__swiper {overflow:hidden; width:100%}
.news__nav {position:absolute; z-index:5; padding:0; border:0; background:transparent; cursor:pointer; line-height:0}
.news__nav--prev {left:-80px}
.news__nav--next {right:-80px}
.news__nav img {display:block; width:100%; height:auto}
.news__nav:focus-visible {outline:2px solid #ff7200; outline-offset:4px}
.news__slide {display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px 56px; align-items:start; box-sizing:border-box; background:#222326}
.news__slide-media img {width:auto; max-height:415px; display:block; vertical-align:top; max-width:540px; margin:0 auto}
.news__slide-text {min-width:0}
.news__meta {margin:0 0 40px; font-size:16px; font-weight:500; line-height:1.55; color:#fff}
.news__headline {margin:0 0 30px; font-size:20px; font-family:'rix-modern-myeongjo', 'Noto Serif KR', serif; font-weight:700; line-height:1.45; color:#dcdcdc}
.news__subhead {margin:0 0 40px; font-size:14px; font-weight:500; line-height:24px; color:#b5b5b5}
.news__body {margin:0; font-size:14px; font-weight:400; line-height:1.7; color:#b5b5b5}
.news__rail {margin-top:56px; width:100%; box-sizing:border-box}
.news__rail-inner {display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:0 30px}
.news__rail-slot {display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:12px; flex:0 0 auto; position:relative}
.news__rail-year {margin:0; font-size:14px; font-weight:700; line-height:1.2; color:#fff; text-align:center; letter-spacing:0.02em; min-height:1.2em; transition:color .2s ease; position:absolute; top:-25px}
.news__rail-year-spacer {display:block; width:2px; min-height:1.2em; height:1.2em; visibility:hidden; pointer-events:none}
.news__rail-slot.is-segment-active .news__rail-year {color:#ff7200}
.news__rail-tick {width:1px; min-width:1px; height:18px; border:0; border-radius:1px; background-color:#fff; cursor:pointer; padding:0; box-sizing:border-box; transition:background-color .2s ease, box-shadow .2s ease}
.news__rail-tick:hover {background-color:#e0e0e0}
.news__rail-tick.is-active {background-color:#ff7200; box-shadow:0 0 0 1px rgba(255,114,0,.35)}

@media all and (max-width:1800px) {
	.news__nav--prev {left:-20px}
	.news__nav--next {right:-20px}
}
@media all and (max-width:1200px) {
	.news__slide {grid-template-columns:1fr; gap:28px}
}
@media all and (max-width:1024px) {
	.news__main {padding:16px 26px 50px}
	.news__intro .subDesc {margin-top:40px}
	.news__stage {margin-top:48px}
	.news__swiper-inner {max-width:100%; padding:0 8px; box-sizing:border-box}
	.news__nav {max-width:30px}
	.news__nav--prev {left:-20px; margin-top:-50px}
	.news__nav--next {right:-20px; margin-top:-50px}
	
	.news__rail {margin-top:40px}
	.news__rail-inner {gap:0 36px}
	
	.news__slide-media img {width:100% !important}
}
@media all and (max-width:767px) {
	.news__main {padding:10px 16px 36px}
	.news__intro .subDesc {margin-top:24px}
	.news__stage {margin-top:36px}
	.news__swiper-inner {padding:0 4px}
	.news__nav {max-width:20px}
	.news__nav--prev {left:-10px; margin-top:-150px}
	.news__nav--next {right:-10px; margin-top:-150px}
	.news__meta {margin-bottom:28px; font-size:15px}
	.news__headline {font-size:clamp(17px, 4.5vw, 20px); margin-bottom:22px}
	.news__subhead {margin-bottom:28px; font-size:13px; line-height:22px}
	.news__body {font-size:13px}
	.news__rail {
		margin-top:40px;
		margin-left:-16px;
		margin-right:-16px;
		width:auto;
		max-width:none;
		padding:8px 16px 8px;
		box-sizing:border-box;
		overflow-x:auto;
		overflow-y:visible;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		scrollbar-width:thin;
	}
	.news__rail::-webkit-scrollbar {height:6px}
	.news__rail::-webkit-scrollbar-thumb {background:rgba(255,255,255,.25); border-radius:3px}
	.news__rail::-webkit-scrollbar-track {background:transparent}
	.news__rail-inner {
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-items:flex-end;
		gap:0 28px;
		width:max-content;
		min-width:100%;
		padding:28px 4px 4px;
		box-sizing:border-box;
	}
	.news__rail-year {font-size:16px}
}
@media all and (max-width:425px) {
	.news__nav {max-width:20px}
	.news__nav--prev {left:-10px; margin-top:-200px}
	.news__nav--next {right:-10px; margin-top:-200px}
}
@media all and (max-width:375px) {
	.news__nav--prev {margin-top:-220px}
	.news__nav--next {margin-top:-220px}
}
@media all and (max-width:340px) {
	.news__nav--prev {margin-top:-240px}
	.news__nav--next {margin-top:-240px}
}











/* 상단 눈금(연도 레일) */
.photo__rail {margin-top:100px; width:100%; box-sizing:border-box}
.photo__rail-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: center; 
	gap: 15px;
}

.photo__rail-slot {
	flex: 0 0 auto;
	width: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	position: relative;
}
.photo__rail-year {position:absolute; top:-26px; margin:0; font-family:'Work Sans', sans-serif; font-size:14px; font-weight:600; line-height:1.2; color:#fff; white-space:nowrap; transition:color .2s ease}
.photo__rail-slot.is-segment-active .photo__rail-year {color:#ff7200}
.photo__rail-tick {width:1px; min-width:1px; height:18px; padding:0; border:0; border-radius:1px; background-color:#fff; cursor:pointer; box-sizing:border-box; transition:background-color .2s ease, box-shadow .2s ease; position:relative}
.photo__rail-tick:after {content:''; display:block; width:10px; height:100%; position:absolute; top:0; left:-5px}
.photo__rail-tick:hover {background-color:#e0e0e0}
.photo__rail-tick.is-active {background-color:#ff7200; box-shadow:0 0 0 1px rgba(255,114,0,.35)}
.photo__rail-tick:disabled {cursor:default}
.photo__rail-slot:not(.has-slide) .photo__rail-tick {opacity:.45}

/* 하단 페이지네이션(현재 연도 슬라이드) */
.photo__pager {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; width:100%; margin:65px 0 0 0}
.photo__pager-dot {width:8px; height:8px; padding:0; border:0; border-radius:0; background-color:#7d7d7d; cursor:pointer; transition:background-color .2s ease}
.photo__pager-dot:hover {background-color:#a5a5a5}
.photo__pager-dot.is-active {background-color:#ff6900}

/* 반응형 */
@media all and (max-width:1700px) {
	.photo__rail-slot {width:40px}
}
@media all and (max-width:1400px) {
	.photo__rail-slot {width:20px}
}
@media all and (max-width:1024px) {
	.photo__rail {margin-top:70px}
	.photo__rail {
		margin-left:-16px; margin-right:-16px; width:auto;
		padding:30px 16px 8px; box-sizing:border-box;
		overflow-x:auto; overflow-y:visible;
		-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
	}
	.photo__rail::-webkit-scrollbar {height:6px}
	.photo__rail::-webkit-scrollbar-thumb {background:rgba(255,255,255,.25); border-radius:3px}
	.photo__rail::-webkit-scrollbar-track {background:transparent}
	.photo__rail-inner {flex-wrap:nowrap; justify-content:center; gap:0 10px; width:max-content; min-width:100%}
	.photo__rail-slot {flex:0 0 auto; max-width:none}
	.photo__pager {margin-top:40px}
}
@media all and (max-width:768px) {
	.photo__rail-inner {gap:5px; justify-content:center}
	.photo__rail-slot {gap:10px; width:20px; }	
}
@media all and (max-width:550px) {
	.photo__rail-inner {gap:2px}
	.photo__rail-slot {width:25px}	
}















/* 이전 연사 */
.before-history-section {
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.before_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 30px;
    margin-top: 60px;
    padding: 0;
}

.before_list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px 20px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.before_list li:hover {
    transform: translateY(-8px);
    border-color: #ff6900;
    box-shadow: 0 12px 30px rgba(255, 105, 0, 0.15);
}

.before_list .thumb-box {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    background: #1a1b1d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.before_list .thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.before_list .before_btn {
    width: 100%;
    margin-top: 24px;
}

.before_list .before_btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background-color: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.before_list li:hover .before_btn a {
    background-color: #ff6900;
    border-color: #ff6900;
    color: #fff;
}




@media all and (max-width: 1024px) {
    .before-history-section {
        margin-top: 40px;
    }
    .before_list {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
        margin-top: 40px;
    }
    .before_list li {
        padding: 24px 16px;
    }
}

@media all and (max-width: 767px) {
    .before_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
        margin-top: 30px;
    }
    .before_list li {
        padding: 20px 12px;
        border-radius: 8px;
    }
    .before_list .thumb-box {
        max-width: 120px;
    }
    .before_list .before_btn {
        margin-top: 16px;
    }
    .before_list .before_btn a {
        font-size: 13px;
        min-height: 36px;
        border-radius: 6px;
    }
}

@media all and (max-width: 380px) {
    .before_list {
        grid-template-columns: 1fr;
    }
}