@import url('/comm/css/sub.css');


/* ============================================================
   카테고리 · 리스트 · 검색 — /project/project.php (#project_list_wrap)
   카테고리: Figma _cat(681px~ 칩) | ~980 축소 | ~680 이하는 기존 밑줄 탭·테두리
   category.php: .cate_con.swiper-container + ul.swiper-wrapper
   페이징(.page_num): comm/css/common.css
   ============================================================ */
/* 프로젝트 리스트 — 그리드 간격 50px(변수 없이 고정) · PC 3열 | ~980 2열 | ~680 1열 */
#project_list_wrap {
	--project-meta-top: 15px;
	--project-year-opacity: 0.7;
	--project-title-gap: 6px;
	--bbs-search-h: 60px;
	--bbs-search-gap: 5px;
	--bbs-search-radius: 5px;
	--bbs-search-bg: #1a1a1a;
	--bbs-search-bd: rgba(255, 255, 255, 0.12);
	--bbs-search-bd-focus: rgba(255, 255, 255, 0.28);
	--bbs-search-row-max: 510px;
	--bbs-search-btn: #ff4c13;
	--bbs-search-btn-hover: #e64511;
	--bbs-search-select-w: 150px;
	--bbs-search-input-w: 290px;
	--bbs-search-fs: 0.889rem;
	--project-page-btn-top: 80px;
	--project-page-num-bottom: 24px;
	/* Figma _cat: 칩 54·radius 5·gap 10 | off: 흰 10%·테두리 20% | on: #F23D00·600 */
	--cate-chip-h: 54px;
	--cate-chip-radius: 5px;
	--cate-chip-gap: 10px;
	--cate-pad-x: 24px;
	--cate-fs: 1rem;
	--cate-off-bg: rgba(255, 255, 255, 0.1);
	--cate-off-bd: rgba(255, 255, 255, 0.2);
	--cate-pad-end: 24px;
}

/* 카테고리 — Figma + Swiper */
#project_list_wrap .cate_con { overflow: visible; margin: 0 auto 60px; box-sizing: border-box; position: relative; scrollbar-width: none; scrollbar-color: transparent transparent; -ms-overflow-style: none; padding: 2px; }
#project_list_wrap .cate_con.swiper-initialized { overflow: hidden !important; }
#project_list_wrap .cate_con.swiper { -webkit-user-select: none; user-select: none; }
#project_list_wrap .cate_con.swiper a { -webkit-user-drag: none; }
#project_list_wrap .cate_con::-webkit-scrollbar,
#project_list_wrap .cate_con.swiper::-webkit-scrollbar { -webkit-appearance: none; appearance: none; width: 0 !important; height: 0 !important; background: transparent; }
#project_list_wrap .cate_con::-webkit-scrollbar:horizontal,
#project_list_wrap .cate_con.swiper::-webkit-scrollbar:horizontal { height: 0 !important; min-height: 0 !important; max-height: 0 !important; }
#project_list_wrap .cate_con::-webkit-scrollbar-button,
#project_list_wrap .cate_con.swiper::-webkit-scrollbar-button,
#project_list_wrap .cate_con::-webkit-scrollbar-corner,
#project_list_wrap .cate_con.swiper::-webkit-scrollbar-corner { display: none !important; width: 0 !important; height: 0 !important; }
#project_list_wrap .cate_con::-webkit-scrollbar-thumb,
#project_list_wrap .cate_con.swiper::-webkit-scrollbar-thumb,
#project_list_wrap .cate_con::-webkit-scrollbar-track,
#project_list_wrap .cate_con.swiper::-webkit-scrollbar-track { background: transparent; border: 0; }
#project_list_wrap .cate_con .swiper-button-prev,
#project_list_wrap .cate_con .swiper-button-next,
#project_list_wrap .sub-menu-list-container ~ .swiper-button-prev,
#project_list_wrap .sub-menu-list-container ~ .swiper-button-next,
#project_list_wrap .sub-menu-list-container + .swiper-button-prev,
#project_list_wrap .sub-menu-list-container + .swiper-button-next { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
#project_list_wrap .cate_con .swiper-scrollbar,
#project_list_wrap .cate_con .swiper-scrollbar-drag { display: none !important; }
#project_list_wrap .cate_con .swiper-wrapper::-webkit-scrollbar,
#project_list_wrap .cate_con ul::-webkit-scrollbar { -webkit-appearance: none; appearance: none; width: 0 !important; height: 0 !important; background: transparent; }
#project_list_wrap .cate_con .swiper-wrapper::-webkit-scrollbar:horizontal,
#project_list_wrap .cate_con ul::-webkit-scrollbar:horizontal { height: 0 !important; min-height: 0 !important; }
#project_list_wrap .cate_con .swiper-wrapper::-webkit-scrollbar-button,
#project_list_wrap .cate_con ul::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
#project_list_wrap .cate_con .swiper-wrapper,
#project_list_wrap .cate_con ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--cate-chip-gap); scrollbar-width: none; -ms-overflow-style: none; margin: 0; padding: 0 var(--cate-pad-end) 0 0; box-sizing: border-box; }
#project_list_wrap .cate_con.swiper-initialized .swiper-wrapper { flex-wrap: nowrap !important; gap: 0; box-sizing: content-box; padding-left: 0 !important; padding-right: 0 !important; }
#project_list_wrap .cate_con.swiper-initialized .swiper-slide:last-child { margin-right: var(--cate-pad-end) !important; }
#project_list_wrap .cate_con ul li { width: auto; margin: 0; padding: 0; list-style: none; flex-shrink: 0; }
#project_list_wrap .cate_con ul li a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative; min-width: 0; height: var(--cate-chip-h); padding: 0 var(--cate-pad-x); border-radius: var(--cate-chip-radius); border: 1px solid var(--cate-off-bd); background: var(--cate-off-bg); color: #ffffff; font-size: var(--cate-fs); font-weight: 400; line-height: 1.667; letter-spacing: var(--letter-spacing-body); text-align: center; text-decoration: none; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease; }
#project_list_wrap .cate_con ul li a::after { content: none !important; display: none !important; }
#project_list_wrap .cate_con ul li:not(.hover) a:hover { border-color: rgba(255, 255, 255, 0.35); }
#project_list_wrap .cate_con ul li.hover a { background: var(--main) !important; border-color: var(--main) !important; color: #ffffff !important; font-weight: var(--fw-semibold) !important; }
#project_list_wrap .cate_con.sub-menu-list-container.swiper-initialized .swiper-slide { width: auto; box-sizing: border-box; flex-shrink: 0; }

/* 뷰: 상세는 #subtitle 미출력 — comm/css/project.css #subtitle.contact_subtitle 상단 패딩과 동일(239/165/120) */
#project_list_wrap.project_ptype_view > .basic_in { padding-top: 239px; box-sizing: border-box; }

/* 리스트 gap: PC 36 → ~980 28(2열) → ~680 20(1열) → ~480 16 → ~360 14 */
#project_list_wrap .pro_list { display: flex; flex-wrap: wrap; gap: 36px; margin: 0; padding: 0; }
#project_list_wrap .pro_list dl { margin: 0; padding: 0; width: calc((100% - 72px) / 3); box-sizing: border-box; }
#project_list_wrap .pro_list dd { margin: 0; padding: 0; border: 0; background: transparent; }

#project_list_wrap .project_card { display: block; width: 100%; position: relative; color: var(--white); text-decoration: none; }
/* Figma box: thum 500×333 */
#project_list_wrap .project_card .thumb { width: 100%; aspect-ratio: 500 / 333; position: relative; overflow: visible; z-index: 2; }
#project_list_wrap .project_card .thumb .thumb_img { position: absolute; inset: 0; overflow: hidden; }
#project_list_wrap .project_card .thumb .thumb_img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 0.4s ease; }
/* Figma: 하단 라인 #F23D00 — 컴포넌트에 플로팅 원 없음 */
#project_list_wrap .project_card .thumb .project_next,
#project_list_wrap .project_card:hover .thumb .project_next,
#project_list_wrap .project_card:focus-visible .thumb .project_next,
#project_list_wrap #project .project_card .thumb .project_next,
#project_list_wrap #project .project_card:hover .thumb .project_next { display: none !important; opacity: 0 !important; visibility: hidden !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; pointer-events: none !important; }
#project_list_wrap .project_card .thumb .project_next img { display: none !important; }
#project_list_wrap .project_card .thumb .project_line { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 5px !important; min-height: 5px !important; max-height: 5px !important; display: block !important; box-sizing: border-box !important; background: var(--main); opacity: 0; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease, opacity 0.25s ease; z-index: 2; pointer-events: none; border-radius: 0; }
#project_list_wrap .project_card:hover .thumb .project_line, #project_list_wrap .project_card:focus-visible .thumb .project_line { opacity: 1; transform: scaleX(1); }
#project_list_wrap .project_card:hover .thumb .thumb_img img, #project_list_wrap .project_card:focus-visible .thumb .thumb_img img { transform: scale(1.08); }
/* Figma 속성=베리언트2: 제목만 --main, 연도 2025는 #fff */
#project_list_wrap .project_card .meta h4 { transition: color 0.25s ease; }
#project_list_wrap .project_card:hover .meta h4, #project_list_wrap .project_card:focus-visible .meta h4 { color: var(--main) !important; }
@media (prefers-reduced-motion: reduce) {
#project_list_wrap .project_card .thumb .thumb_img img { transition: none; }
#project_list_wrap .project_card .thumb .project_line { transition: none; }
#project_list_wrap .project_card .meta h4 { transition: none; }
}
@media (hover: none) {
#project_list_wrap .project_card .thumb .project_line { opacity: 1; transform: scaleX(1); }
#project_list_wrap .project_card .meta h4 { color: var(--main) !important; }
}

#project_list_wrap .project_card .meta { position: relative; z-index: 1; padding-top: var(--project-meta-top); box-sizing: border-box; }
#project_list_wrap .project_card .meta .fs16 { opacity: var(--project-year-opacity); }
/* 연도: 메인 #project·Figma(16 Regular, 자간 -0.48, 행간 1.75)과 동일 — 제목 bold와 구분 */
#project_list_wrap .project_card .meta > p.fs16 { font-family: var(--kor); font-weight: var(--fw-regular); letter-spacing: var(--letter-spacing-default); line-height: 1.75; }
#project_list_wrap .project_card .meta .fs26 { margin-top: var(--project-title-gap); }
#project_list_wrap .project_card .meta .fs26:first-child { margin-top: 0; }
#project_list_wrap .project_card .meta p,
#project_list_wrap .project_card .meta h4 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin: 0; }

/* 리스트 ↔ 페이지번호 — 메인 #project Figma(--project-btn-top 80px) */
#project_list_wrap .page_num { padding: var(--project-page-btn-top) 0 var(--project-page-num-bottom); margin: 0; box-sizing: border-box; }

/* 검색 — #project_list_wrap */
#project_list_wrap .bbs_search { text-align: center; font-size: 0; padding: 12px 0 0; box-sizing: border-box; }
#project_list_wrap .bbs_search .bbs_search_row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--bbs-search-gap);
	width: 100%;
	max-width: var(--bbs-search-row-max);
	margin: 0 auto;
	box-sizing: border-box;
}
#project_list_wrap .bbs_search_select_wrap {
	position: relative;
	flex: 0 0 var(--bbs-search-select-w);
	width: var(--bbs-search-select-w);
	min-width: var(--bbs-search-select-w);
	max-width: var(--bbs-search-select-w);
	box-sizing: border-box;
}
/* 셀렉트: common cat_arrow는 어두운 필드와 안 맞음 → 배경 제거 후 흰색 단일 ::after만 */
#project_list_wrap .bbs_search_select_wrap::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #ffffff;
	opacity: 0.9;
	pointer-events: none;
}
#project_list_wrap .bbs_search_select_wrap .bbs_search_select,
#project_list_wrap .bbs_dd_field .search_input {
	font-size: var(--bbs-search-fs);
	font-weight: 400;
	line-height: 1.2;
	font-family: inherit;
	letter-spacing: var(--letter-spacing-default);
	color: #ffffff;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	transition: border-color 0.2s ease;
}
#project_list_wrap .bbs_search_select_wrap .bbs_search_select {
	padding: 0 40px 0 16px;
	width: 100%;
	height: var(--bbs-search-h) !important;
	border: 1px solid var(--bbs-search-bd);
	border-radius: var(--bbs-search-radius);
	background-color: var(--bbs-search-bg);
	background-image: none !important;
	cursor: pointer;
}
#project_list_wrap .bbs_search_select_wrap .bbs_search_select:focus { border-color: var(--bbs-search-bd-focus); }

#project_list_wrap .bbs_dd_field {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	flex: 0 0 var(--bbs-search-input-w);
	width: var(--bbs-search-input-w);
	min-width: var(--bbs-search-input-w);
	max-width: var(--bbs-search-input-w);
	box-sizing: border-box;
}
#project_list_wrap .bbs_dd_field .search_input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: var(--bbs-search-h);
	padding: 0 16px;
	background: var(--bbs-search-bg);
	border: 1px solid var(--bbs-search-bd);
	border-radius: var(--bbs-search-radius);
}
#project_list_wrap .bbs_dd_field .search_input::placeholder,
#project_list_wrap .bbs_dd_field .search_input::-webkit-input-placeholder {
	color: #ffffff;
	opacity: 0.5;
	font-size: var(--bbs-search-fs);
	font-weight: 400;
	font-family: inherit;
	letter-spacing: var(--letter-spacing-default);
	line-height: 1.2;
}
#project_list_wrap .bbs_dd_field .search_input:focus { border-color: var(--bbs-search-bd-focus); }

#project_list_wrap .bbs_dd_btn { margin: 0; padding: 0; border: 0; background: transparent; flex: 0 0 auto; box-sizing: border-box; }
#project_list_wrap .bbs_dd_btn .bbs_s_b {
	width: var(--bbs-search-h);
	height: var(--bbs-search-h);
	min-width: var(--bbs-search-h);
	padding: 0;
	border: 0;
	border-radius: var(--bbs-search-radius);
	background: var(--bbs-search-btn);
	outline: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	font-size: 0;
	line-height: 0;
}
#project_list_wrap .bbs_dd_btn .bbs_s_b:hover { background: var(--bbs-search-btn-hover); }
#project_list_wrap .bbs_dd_btn .bbs_s_b .ico-search { display: block; width: 24px; height: 24px; flex-shrink: 0; color: #ffffff; vertical-align: middle; }

/* 뷰 — 2열(~1080↑): 좌 450 + gap 80 · 본문 가변 / ~1080↓ 1열 세로스택 | 리스트·카테고리 태블릿 ~980 */
#project_list_wrap .pro_view{}
#project_list_wrap .pro_top{display:grid; grid-template-columns:450px minmax(0, 1fr); column-gap:80px; row-gap:0; align-items:start; margin:0 0 100px; box-sizing:border-box;}
#project_list_wrap .pro_top .pro_media{display:flex; flex-direction:column; box-sizing:border-box; width:100%; min-width:0; position:sticky; top:110px; align-self:start;}
#project_list_wrap .pro_top .pro_detail{margin:0; padding:0; box-sizing:border-box; min-width:0; width:100%;}
#project_list_wrap .pro_top .pro_img .prdImg{display:block; overflow:hidden;}
#project_list_wrap .pro_top .pro_img .prdImg img{width: 100%; vertical-align: top;}
#project_list_wrap .pro_top .pro_txt{padding:0; box-sizing:border-box;}
#project_list_wrap .pro_top .pro_txt_frame{margin:0; padding:0; border:0; border-bottom:1px solid rgba(255, 255, 255, 0.2); box-sizing:border-box;}
#project_list_wrap .pro_top .pro_txt .year{display:inline-block; margin:0 0 10px; padding:3px 15px; box-sizing:border-box; border-radius:5px; background:var(--main); color:var(--white); font-family:var(--kor); font-size:0.667rem; font-weight:var(--fw-bold); letter-spacing:var(--letter-spacing-none); line-height:1.833; vertical-align:top;}
#project_list_wrap .pro_top .pro_txt .prdname{display:block; margin:0; padding:0; color:var(--white); font-family:var(--kor); font-size:2.778rem; font-weight:var(--fw-bold); letter-spacing:-2.5px; line-height:1.28;}
#project_list_wrap .pro_top .pro_txt .pro_meta{margin:40px 0 0; padding:0 0 35px; box-sizing:border-box;}
#project_list_wrap .pro_top .pro_txt .pro_meta_row{display:grid; grid-template-columns:80px minmax(0, 1fr); column-gap:20px; align-items:start; margin:0; padding:0 0 5px; box-sizing:border-box; min-height:30px;}
#project_list_wrap .pro_top .pro_txt .pro_meta_row:last-child{padding-bottom:0;}
#project_list_wrap .pro_top .pro_txt .pro_meta_row .meta_l{margin:0; padding:0; color:var(--white); font-family:var(--kor); font-size:1rem; font-weight:var(--fw-semibold); letter-spacing:var(--letter-spacing-body); line-height:1.667;}
#project_list_wrap .pro_top .pro_txt .pro_meta_row .meta_d{margin:0; padding:0; color:var(--white-subtitle); font-family:var(--kor); font-size:1rem; font-weight:var(--fw-regular); letter-spacing:var(--letter-spacing-body); line-height:1.667; word-break:break-word;}
#project_list_wrap .pro_top .pro_txt .pro_btn{margin:0; padding:35px 0 0; box-sizing:border-box;}
#project_list_wrap .pro_top .pro_txt .pro_btn.eng a{display:block; width:100%; height:56px; margin:0; padding:0 16px; box-sizing:border-box; border:0; border-radius:5px; background:var(--white); color:var(--black); text-align:center; font-family:var(--eng); font-size:0.889rem; font-weight:var(--fw-semibold); letter-spacing:var(--letter-spacing-eng); line-height:56px; text-decoration:none; transition:background 0.25s ease, color 0.25s ease;}
#project_list_wrap .pro_top .pro_txt .pro_btn a:before{display:none !important; content:none !important; margin:0 !important;}
#project_list_wrap .pro_top .pro_txt .pro_btn.eng a.listBtn:hover{background:var(--main); color:var(--white);}
#project_list_wrap .pro_top .pro_txt .prdnum{display: block; font-size:1rem; letter-spacing:var(--letter-spacing-none); font-family:var(--eng); color:var(--main); line-height:1.3; padding:0 0 8px;}
#project_list_wrap .pro_top .pro_txt .shortexp{display:block; font-size:1.125rem; line-height:1.5; letter-spacing:var(--letter-spacing-body); color:var(--white-subtitle); font-weight:400; padding: 10px 0 0;}
#project_list_wrap .pro_top .pro_txt .pro_info{margin: 30px 0 0; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
#project_list_wrap .pro_top .pro_txt .pro_info ul{}
#project_list_wrap .pro_top .pro_txt .pro_info ul li{font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 1.6; padding:0 0 10px 82px; box-sizing:border-box; position:relative; color:var(--white-subtitle);}
#project_list_wrap .pro_top .pro_txt .pro_info ul li:last-child{padding-bottom: 0 !important;}
#project_list_wrap .pro_top .pro_txt .pro_info ul li .tit{display:inline-block; color:var(--white); letter-spacing: var(--letter-spacing-body); position: absolute; left: 0; top:0;}
#project_list_wrap .pro_top .pro_txt .pro_info .download_icon{vertical-align: middle; font-size:20px; margin: -4px 5px 0 0; color:rgba(255, 255, 255, 0.85);}
#project_list_wrap .pro_top .pro_txt .pro_info .upfile2{padding: 20px 0 0; font-size:0.875rem; letter-spacing: var(--letter-spacing-caption); line-height: 1.5; color:var(--white-subtitle);}
#project_list_wrap .pro_detail{font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 1.75; color: var(--white-subtitle); word-break: break-word;}
#project_list_wrap .pro_top .pro_detail > :first-child{margin-top:0;}
#project_list_wrap .pro_detail img{display:block; max-width:100%; height: auto !important;}
#project_list_wrap .pro_detail > * + *{margin-top:30px;}
#project_list_wrap .pro_detail img + img{margin-top:30px;}



/* 관련상품 */
.pro_roll{position: relative; width: calc(100% + 30px); margin: 0 -15px;}
.pro_roll:after{content:''; display:block; clear:both;}
.pro_roll dl{padding: 0 15px;}
.pro_roll dl a{display:block;}
.pro_roll dl dt{overflow:hidden;}
.pro_roll dl dt img{width:100%; background-repeat:no-repeat; background-position:center; background-size:contain; transition:all .3s linear;}
.pro_roll dl:hover dt img{transform:scale(1.1); transition:all .3s linear;}
.pro_roll dl dd{padding:20px 0; box-sizing:border-box;}
.pro_roll dl dd .title{font-size:1.125rem; font-weight: 500; color:var(--black); line-height:120%; letter-spacing:var(--letter-spacing-body); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.pro_roll dl dd .multiple{font-size:1rem; line-height:120%; height:1.4em; letter-spacing:var(--letter-spacing-body); margin:10px 0 0; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}

.pro_roll .slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999; opacity: 1; right: 47px; top:-86px;}
.pro_roll .slick-arrow:hover{opacity: 0.5;}
.pro_roll .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; margin-right:50px;}
.pro_roll .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto;}


/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){



}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){



}

/*******************************************************************************
    @media ~1080px — 상세 .pro_top 1열 세로 스택만 (~980은 유지)
*******************************************************************************/
@media all and (max-width:1080px){
#project_list_wrap.project_ptype_view > .basic_in { padding-top: 165px; box-sizing: border-box; }
#project_list_wrap .pro_top{margin:0 0 80px; grid-template-columns:1fr; row-gap:40px; column-gap:0;}
#project_list_wrap .pro_top .pro_media{width:100%; max-width:none; position:static;}
#project_list_wrap .pro_top .pro_detail{width:100%; max-width:none; margin:0; padding:0;}
#project_list_wrap .pro_top .pro_txt{padding:20px 0 0;}
#project_list_wrap .pro_top .pro_txt .prdname{font-size:2rem; letter-spacing:var(--letter-spacing-heading);}
#project_list_wrap .pro_top .pro_txt .pro_meta{margin:28px 0 0; padding:0 0 28px;}
#project_list_wrap .pro_top .pro_txt .pro_meta_row{grid-template-columns:72px minmax(0, 1fr); column-gap:16px;}
#project_list_wrap .pro_top .pro_txt .shortexp{font-size:1rem; padding: 8px 0 0;}
#project_list_wrap .pro_top .pro_txt .pro_info{margin: 20px 0 0; padding:15px 0;}
#project_list_wrap .pro_top .pro_txt .pro_info ul{}
#project_list_wrap .pro_top .pro_txt .pro_info ul li{padding:0 0 8px 82px;}
#project_list_wrap .pro_top .pro_txt .pro_info .download_icon{font-size:18px; margin: -4px 5px 0 0;}
#project_list_wrap .pro_top .pro_txt .pro_btn{padding:28px 0 0;}
#project_list_wrap .pro_top .pro_txt .pro_btn.eng a{height:50px; line-height:50px; padding:0 14px;}
#project_list_wrap .pro_detail > * + *{margin-top:24px;}
#project_list_wrap .pro_detail img + img{margin-top:24px;}
}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* 검색 — 좁은 가로에서 한 줄 넘침 방지 */
#project_list_wrap .bbs_search .bbs_search_row { flex-wrap: wrap; }
#project_list_wrap { --bbs-search-h: 54px; --cate-chip-h: 50px; --cate-pad-x: 20px; --cate-pad-end: 20px; }
#project_list_wrap .bbs_dd_btn .bbs_s_b .ico-search { width: 22px; height: 22px; }

/* 카테고리 — ~980: Figma 축소(칩 50·끝여백 20) */
#project_list_wrap .cate_con { margin: 0 auto 40px; }

/* 리스트 — 태블릿(~980): 2열 */
#project_list_wrap .pro_list { gap: 28px; }
#project_list_wrap .pro_list dl { width: calc((100% - 28px) / 2); }

/* 뷰 — List 버튼 축소 */
#project_list_wrap .pro_top .pro_txt .pro_btn.eng a{height:46px; line-height:46px; padding:0 12px;}
#project_list_wrap .pro_detail > * + *{margin-top:20px;}
#project_list_wrap .pro_detail img + img{margin-top:20px;}

/* 관련상품 */
.pro_roll{width: calc(100% + 20px); margin: 0 -10px;}
.pro_roll dl{padding: 0 10px;}
.pro_roll dl dd{padding:15px 0;}
.pro_roll dl dd .multiple{margin:8px 0 0;}

.pro_roll .slick-arrow{width:25px; height:25px; right: 38px; top:-68px;}
.pro_roll .slick-prev{margin-right:40px;}




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* 리스트 — main.css #project 모바일(figma 440) */
#project_list_wrap { --project-meta-top: 10px; --project-title-gap: 0; --bbs-search-h: 50px; --project-page-btn-top: 30px; --project-page-num-bottom: 16px; }

/* 카테고리 — ~680: 밑줄 탭·가로 스크롤 | inset 테두리 | 맨끝 탭~오른쪽 테두리 여백(첫 탭~왼쪽과 동일 24px 느낌) */
#project_list_wrap .cate_con { margin: 0 auto 20px; padding: 0 24px; display: block; position: relative; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); scroll-padding-inline-end: 24px; }
#project_list_wrap .cate_con.swiper-initialized { overflow-x: auto !important; overflow-y: hidden !important; }
#project_list_wrap .cate_con::-webkit-scrollbar { -webkit-appearance: none; appearance: none; width: 0 !important; height: 0 !important; }
#project_list_wrap .cate_con::-webkit-scrollbar:horizontal { height: 0 !important; min-height: 0 !important; }
#project_list_wrap .cate_con .swiper-wrapper,
#project_list_wrap .cate_con ul { display: block; white-space: nowrap; text-align: center; font-size: 0; flex-wrap: unset; justify-content: unset; align-items: unset; gap: 0; overflow: visible; margin: 0; padding: 0; box-sizing: border-box; }
#project_list_wrap .cate_con.swiper-initialized .swiper-slide:last-child { margin-right: 24px !important; }
#project_list_wrap .cate_con ul li:last-child { margin-right: 24px; }
#project_list_wrap .cate_con ul li { float: none; display: inline-block; margin: 0; width: auto; padding: 0 10px; list-style: none; }
#project_list_wrap .cate_con ul li a { display: inline-block; min-width: auto; min-height: 0; height: auto; padding: 12px 0; border-radius: 0; border: 0; background: transparent !important; color: var(--white-subtitle); font-size: 1rem; font-weight: 400; line-height: 1.2; letter-spacing: var(--letter-spacing-body); text-align: center; text-decoration: none; position: relative; box-sizing: border-box; transition: color 0.3s linear; }
#project_list_wrap .cate_con ul li a::after { content: '' !important; display: block !important; width: 0; height: 2px; background: var(--main); position: absolute; left: 0; bottom: 0; z-index: 2; transition: all 0.3s linear; }
#project_list_wrap .cate_con ul li:not(.hover) a:hover { color: rgba(255, 255, 255, 0.9); }
#project_list_wrap .cate_con ul li.hover a { background: transparent !important; border-color: transparent !important; color: var(--main) !important; font-weight: 700 !important; }
#project_list_wrap .cate_con ul li.hover a::after { width: 100% !important; }
#project_list_wrap.project_ptype_view > .basic_in { padding-top: 120px; }
#project_list_wrap .pro_list { gap: 20px 0; }
#project_list_wrap .pro_list dl { width: 100%; }
#project_list_wrap .project_card .thumb { aspect-ratio: 400 / 267; }

#project_list_wrap .bbs_search { padding: 16px 0 0; }
#project_list_wrap .bbs_search .bbs_search_row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: var(--bbs-search-gap); row-gap: var(--bbs-search-gap); max-width: none; padding: 0; box-sizing: border-box; align-items: stretch; }
#project_list_wrap .bbs_search_select_wrap { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: none; min-width: 0; }
#project_list_wrap .bbs_search_select_wrap .bbs_search_select { height: var(--bbs-search-h) !important; padding: 0 40px 0 16px; }
#project_list_wrap .bbs_dd_field { grid-column: 1; grid-row: 2; min-width: 0; width: auto; max-width: none; }
#project_list_wrap .bbs_dd_field .search_input { width: 100%; min-width: 0; max-width: 100%; height: var(--bbs-search-h); line-height: 1.2; padding: 0 16px; }
#project_list_wrap .bbs_dd_btn { grid-column: 2; grid-row: 2; width: auto; display: flex; align-items: stretch; }
#project_list_wrap .bbs_dd_btn .bbs_s_b { width: var(--bbs-search-h); min-width: var(--bbs-search-h); height: var(--bbs-search-h); }
#project_list_wrap .bbs_dd_btn .bbs_s_b .ico-search { width: 20px; height: 20px; }

/* 뷰 — 세로 스택: 이미지·메타 → 본문 */
#project_list_wrap .pro_top{margin:0 0 40px; grid-template-columns:1fr; row-gap:32px; column-gap:0;}
#project_list_wrap .pro_top .pro_media{width:100%; max-width:none;}
#project_list_wrap .pro_top .pro_detail{width:100%; max-width:none; margin:0; padding:0;}
#project_list_wrap .pro_top .pro_txt{padding:20px 0 0;}
#project_list_wrap .pro_top .pro_txt .prdnum{padding:0 0 6px;}
#project_list_wrap .pro_top .pro_txt .prdname{font-size:1.8rem; letter-spacing:var(--letter-spacing-heading);}
#project_list_wrap .pro_top .pro_txt .pro_meta{margin:24px 0 0; padding:0 0 24px;}
#project_list_wrap .pro_top .pro_txt .pro_meta_row{grid-template-columns:64px minmax(0, 1fr); column-gap:12px; min-height:0;}
#project_list_wrap .pro_top .pro_txt .pro_meta_row .meta_l,#project_list_wrap .pro_top .pro_txt .pro_meta_row .meta_d{font-size:0.889rem; line-height:1.5;}
#project_list_wrap .pro_top .pro_txt .pro_info{margin: 15px 0 0; padding:12px 0;}
#project_list_wrap .pro_top .pro_txt .pro_info ul{}
#project_list_wrap .pro_top .pro_txt .pro_info ul li{padding:0 0 6px 70px;}
#project_list_wrap .pro_top .pro_txt .pro_info .download_icon{font-size:16px;}
#project_list_wrap .pro_top .pro_txt .pro_info .upfile2{padding: 15px 0 0; font-size:12px;}
#project_list_wrap .pro_top .pro_txt .pro_btn{padding:22px 0 0;}
#project_list_wrap .pro_top .pro_txt .pro_btn.eng a{height:42px; line-height:42px; padding:0 12px;}
#project_list_wrap .pro_detail > * + *{margin-top:16px;}
#project_list_wrap .pro_detail img + img{margin-top:16px;}

/* 관련상품 */
.pro_roll dl dd{padding:12px 0;}
.pro_roll dl dd .multiple{margin:6px 0 0;}

.pro_roll .slick-arrow{right: 30px; top:-54px;}




}
/*******************************************************************************
    @media ~480px              
*******************************************************************************/
@media all and (max-width:480px){


/* 리스트 */
#project_list_wrap { --bbs-search-h: 46px; --project-page-btn-top: 30px; --project-page-num-bottom: 12px; }
#project_list_wrap .pro_list { gap: 16px 0; }
#project_list_wrap .pro_list dl { width: 100%; }
#project_list_wrap .bbs_dd_btn .bbs_s_b .ico-search { width: 19px; height: 19px; }

#project_list_wrap .bbs_search { padding: 12px 0 0; }
#project_list_wrap .bbs_search .bbs_search_row { padding: 0; }

#project_list_wrap .pro_top .pro_txt .pro_btn.eng a{height:40px; line-height:40px; padding:0 10px;}
#project_list_wrap .pro_detail > * + *{margin-top:12px;}
#project_list_wrap .pro_detail img + img{margin-top:12px;}

}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

#project_list_wrap { --bbs-search-h: 42px; --project-page-num-bottom: 12px; }
#project_list_wrap .pro_list { gap: 14px 0; }
#project_list_wrap .bbs_dd_btn .bbs_s_b .ico-search { width: 18px; height: 18px; }

#project_list_wrap .pro_top .pro_txt .pro_btn.eng a{height:36px; line-height:36px; padding:0 8px;}

}