@charset "utf-8";

.text-ellipsis { display:table; table-layout:fixed; width:100%; position:relative; }
.text-ellipsis > * { display:table-cell; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; position:relative; }
.text-ellipsis > *:focus { min-width:fit-content; line-height:1; padding:10px; border:2px solid #000068; background:#fff; position:absolute; left:50%; transform:translate(-50%, -50%) scale(1); z-index:10; cursor:text; }

/* 페이지 */
.pager_area { display:flex; flex-flow:wrap; align-items:center; justify-content:center; gap:10px; margin-top:clamp(40px, 10vw, 100px); }
.pager{ display:flex; justify-content:center; align-items:center; gap:5px; flex-wrap:wrap; }
.pager_btn,
.pager_num { display:inline-flex; align-items:center; justify-content:center; width:clamp(30px, 5vw, 40px); aspect-ratio:1 / 1; line-height:1; padding:0 10px; border:1px solid #e1e1e1; border-radius:5px; background:#fff; font-size:12px; color:#333; text-decoration:none; }
.pager_btn.first { background:url('../img/btn_first.gif') no-repeat center #fff; }
.pager_btn.prev { background:url('../img/btn_prev.gif') no-repeat center #fff; }
.pager_btn.next { background:url('../img/btn_next.gif') no-repeat center #fff; }
.pager_btn.last { background:url('../img/btn_end.gif') no-repeat center #fff; }
.pager_btn:hover,
.pager_num:hover { background-color:#fafafa; }
.pager_num.active { background-color:#003cac; border-color:#003cac; color:#fff; font-weight:800; }
.pager_btn.disabled { opacity:0.35; pointer-events:none; }



/* =========================================================
   Product List
========================================================= */
.item_list_page { width:100%; background:#fff; overflow:hidden; }
.item_list_page * { box-sizing:border-box; }
.item_list_page fieldset { min-width:0; margin:0; padding:0; border:0; }
.item_list_page legend { width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); position:absolute; }
.item_inner { width:min(calc(100% - 60px), 1200px); margin:0 auto; }

/* 제품 검색 */
.item_search_section { padding:clamp(50px, 6vw, 80px) 0 clamp(35px, 4vw, 60px); background:#f5f5f5; }
.item_search_heading h1 { font-size:clamp(18px, 2.5vw, 30px); font-weight:700; line-height:1.3; color:#111; letter-spacing:-0.05em; }
.item_search_heading p { margin-top:10px; font-size:clamp(12px, 2vw, 18px); font-weight:400; line-height:1.5; color:#999; letter-spacing:-0.04em; word-break:keep-all; }
#item_search_form { margin-top:clamp(15px, 2.5vw, 40px); }
.item_search_box { padding:clamp(22px, 2vw, 32px); border:1px solid #e1e1e1; border-radius:clamp(10px, 1vw, 15px); background:#fff; }
.item_search_box .filter_label { display:flex; align-items:center; flex:0 0 clamp(75px, 7vw, 105px); min-height:50px; font-size:clamp(14px, 1.2vw, 17px); font-weight:700; line-height:1.4; color:#333; letter-spacing:-0.04em; }

/* 카테고리 */
.item_category_filter { display:flex; align-items:center; gap:clamp(15px, 2vw, 30px); }
.category_radio_list { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); flex:1; gap:clamp(8px, 1vw, 12px); min-width:0; }
.category_radio_item { min-width:0; position:relative; }
.category_radio_item input[type="radio"] { width:1px; height:1px; opacity:0; position:absolute; top:0; left:0; }
.category_radio_item label {
	display:flex; align-items:center; justify-content:center; flex-direction:column; gap:clamp(7px, 0.8vw, 12px); width:100%; min-height:clamp(60px, 8vw, 100px); padding:10px 5px; border:1px solid #e3e6eb; border-radius:clamp(7px, 0.7vw, 10px);
	background:#fff; color:#999; text-align:center; cursor:pointer; transition:border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.category_radio_item label:hover { border-color:#9ab9ed; color:#003cac; }
.category_radio_item input[type="radio"]:checked + label { border-color:#003cac; background:#003cac; color:#fff; box-shadow:0 0 0 1px rgba(0,60,172,0.05); }
.category_radio_item input[type="radio"]:focus-visible + label { outline:3px solid rgba(0,60,172,0.2); outline-offset:2px; }
.category_radio_item .category_icon { display:flex; align-items:center; justify-content:center; width:clamp(22px, 2vw, 30px); height:clamp(22px, 2vw, 30px); color:currentColor; }
.category_radio_item .category_icon svg { display:block; width:100%; height:100%; }
.category_radio_item .category_name { display:block; max-width:100%; font-size:clamp(12px, 1vw, 15px); font-weight:600; line-height:1; letter-spacing:-0.04em; white-space:nowrap; }

/* 검색어 */
.item_keyword_filter { display:flex; align-items:center; gap:clamp(15px, 2vw, 30px); margin-top:clamp(15px, 1.8vw, 25px) !important; padding-top:clamp(15px, 1.8vw, 25px) !important; border-top:1px solid #eee !important; }
.item_keyword_box { display:flex; align-items:stretch; flex:1; min-width:0; height:clamp(52px, 4.5vw, 62px); border:1px solid #003cac; border-radius:7px; background:#fff; overflow:hidden; }
.item_search_select { flex:0 0 clamp(110px, 11vw, 145px); position:relative; }
.item_search_select::after { content:''; width:8px; height:8px; margin-top:-6px; border-right:1px solid #555; border-bottom:1px solid #555; pointer-events:none; position:absolute; top:50%; right:clamp(14px, 1.3vw, 20px); transform:rotate(45deg); }
.item_search_select select { width:100%; height:100%; padding:0 clamp(35px, 3vw, 45px) 0 clamp(15px, 1.5vw, 22px); border:0; border-radius:0; background:#fff; font-size:clamp(13px, 1.1vw, 15px); font-weight:500; color:#333; appearance:none; outline:0; cursor:pointer; }
.item_keyword_box input[type="text"] { flex:1; min-width:0; height:100%; padding:0 clamp(15px, 2vw, 30px); border:0 !important; background:#fff; box-shadow:none !important; font-size:clamp(13px, 1.1vw, 15px); color:#222; outline:0; }
.item_keyword_box input[type="text"]::placeholder { color:#b8bbc1; }
.item_search_button { display:flex; align-items:center; justify-content:center; gap:7px; flex:0 0 clamp(80px, 8vw, 105px); height:100%; border:0; background:#003cac; font-size:clamp(13px, 1.1vw, 15px); font-weight:600; color:#fff; cursor:pointer; transition:background-color 0.2s ease; }
.item_search_button:hover { background:#002d82; }
.item_search_button svg { display:block; width:clamp(17px, 1.4vw, 20px); height:clamp(17px, 1.4vw, 20px); }

/* 제품 목록 */
.item_result_section { min-height:500px; padding:clamp(40px, 6vw, 100px) 0 clamp(60px, 15vw, 150px); background:#fff; }
.item_result_heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:clamp(25px, 2.5vw, 40px); }
.item_result_heading h2 { font-size:clamp(18px, 1.7vw, 24px); font-weight:700; line-height:1.4; color:#222; letter-spacing:-0.04em; }
.item_result_heading p { font-size:clamp(14px, 1.2vw, 17px); font-weight:600; line-height:1.4; color:#333; }
.item_result_heading p strong { font-weight:700; color:#003cac; }
.item_product_list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:clamp(20px, 2vw, 32px); row-gap:clamp(55px, 6vw, 90px); }
.item_product_card { min-width:0; }
.item_product_image { display:block; width:100%; aspect-ratio:1 / 1; border:1px solid #eee; border-radius:clamp(10px, 1vw, 15px); background:#f6f7f8; overflow:hidden; }
.item_product_image img { display:block; width:100%; height:100% !important; object-fit:cover; transition:transform 0.5s ease; }
.item_product_card:hover .item_product_image img { transform:scale(1.035); }
.item_product_content { padding-top:clamp(20px, 2vw, 28px); }
.item_product_brand { display:block; font-size:clamp(12px, 1vw, 14px); font-weight:700; line-height:1.4; color:#0052bd; letter-spacing:-0.02em; text-transform:uppercase; }
.item_product_name { margin-top:clamp(7px, 0.7vw, 10px); font-size:clamp(16px, 1.8vw, 20px); font-weight:600; line-height:1.45; color:#222; letter-spacing:-0.05em; word-break:keep-all; }
.item_product_name a { display:-webkit-box; overflow:hidden; color:inherit; text-overflow:ellipsis; word-break:normal; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.item_product_name a:hover { color:#003cac; }
.item_product_model { margin-top:5px; font-size:clamp(13px, 1.1vw, 15px); font-weight:400; line-height:1.5; color:#999; letter-spacing:-0.02em; }
.item_product_more { display:none; align-items:center; gap:clamp(8px, 0.8vw, 12px); margin-top:clamp(24px, 2.5vw, 38px); font-size:clamp(12px, 1vw, 14px); font-weight:400; line-height:1.4; letter-spacing:-0.05em; color:#777; transition:color 0.2s ease; }
.item_product_more i { font-size:clamp(14px, 1.2vw, 17px); transition:transform 0.2s ease; }
.item_product_more:hover { color:#003cac; }
.item_product_more:hover i { transform:translateX(3px); }

/* 제품 없음 */
.item_empty { padding:clamp(60px, 8vw, 120px) 15px; border-top:1px solid #eee; text-align:center; }
.item_empty img { display:block; width:min(100%, 300px); margin:0 auto; }
.item_empty p { font-size:clamp(14px, 1.2vw, 17px); font-weight:400; color:#999; }



/* =========================================================
   Product View
========================================================= */
.item_view_page { width:100%; background:#fff; overflow:hidden; }
.item_view_page * { box-sizing:border-box; }
.item_view_section { padding:clamp(50px, 6vw, 90px) 0 clamp(100px, 12vw, 200px); }

/* 제품명 */
.item_view_heading { margin-bottom:clamp(30px, 3.5vw, 55px); }
.item_view_brand { display:block; margin-bottom:clamp(8px, 0.8vw, 12px); font-size:clamp(12px, 1vw, 15px); font-weight:700; line-height:1.4; color:#003cac; letter-spacing:-0.02em; text-transform:uppercase; }
.item_view_heading h1 { display:-webkit-box; font-size:clamp(24px, 3vw, 40px); font-weight:700; line-height:1.35; color:#111; letter-spacing:-0.05em; overflow:hidden; text-overflow:ellipsis; word-break:normal; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

/* 제품 요약 */
.item_view_summary { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; gap:clamp(40px, 6vw, 80px); }

/* 제품 이미지 */
.item_gallery_wrap { min-width:0; }
.item_view_gallery { margin:0; padding:0; list-style:none; }
.item_view_gallery > li { width:100%; aspect-ratio:1 / 1; background-color:#fff; overflow:hidden; }
.item_view_gallery > li img { display:block; width:100%; height:100% !important; object-fit:cover; }
.item_gallery_wrap .lSSlideWrapper { background-color:#f5f7f9; border:1px solid #e5e5e5; }
.item_gallery_wrap .lSPager.lSGallery li { border:1px solid #e5e5e5; border-radius:0 !important; background-color:#fff; transition:border-color 0.2s ease; }
.item_gallery_wrap .lSPager.lSGallery li:hover, .item_gallery_wrap .lSPager.lSGallery li.active { border-color:#003cac; }
.item_gallery_wrap .lSPager.lSGallery li a { display:block; aspect-ratio:1 / 1; overflow:hidden; }
.item_gallery_wrap .lSPager.lSGallery img { display:block; width:100%; height:100% !important; opacity:1; object-fit:cover; }

/* 제품 기본 정보 */
.item_view_information { min-width:0; padding-top:clamp(20px, 3vw, 40px); }
.item_information_list { margin:0; padding:0; }
.item_information_row { display:grid; grid-template-columns:clamp(90px, 10vw, 125px) minmax(0, 1fr); align-content:center; min-height:clamp(40px, 4.5vw, 55px); border-bottom:1px solid #e5e5e5; }
.item_information_row dt,
.item_information_row dd { display:flex; align-items:flex-start; min-width:0; margin:0; padding:10px 0; font-size:clamp(16px, 1.8vw, 18px); line-height:1.5; letter-spacing:-0.04em; word-break:keep-all; overflow-wrap:anywhere; }
.item_information_row dt { padding-right:10px; font-weight:700; color:#222; }
.item_information_row dd { align-items:center; font-weight:400; color:#333; }
.item_information_row dd a { color:inherit; }
.item_information_row dd a:hover { color:#003cac; }

/* 관련 키워드 */
.item_keyword_area { margin-top:clamp(30px, 3vw, 45px); }
.item_keyword_area h2 { font-size:clamp(15px, 1.3vw, 18px); font-weight:700; line-height:1.4; color:#222; letter-spacing:-0.04em; }
.item_keyword_list { display:flex; flex-wrap:wrap; gap:8px; margin:clamp(12px, 1.2vw, 18px) 0 0; padding:0; list-style:none; }
.item_keyword_list span { display:flex; align-items:center; min-height:clamp(30px, 2.8vw, 38px); padding:5px clamp(13px, 1.3vw, 18px); border-radius:100px; background:#f5f5f5; font-size:clamp(12px, 1vw, 14px); font-weight:400; line-height:1.3; color:#777; white-space:nowrap; }

/* 다운로드 자료 */
.item_download_area { margin-top:clamp(30px, 3vw, 45px); }
.item_download_area h2 { font-size:clamp(15px, 1.3vw, 18px); font-weight:700; line-height:1.4; color:#222; letter-spacing:-0.04em; }
.item_download_list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:clamp(12px, 1.2vw, 18px) 0 0; padding:0; list-style:none; }
.item_download_list:has(> li:only-child) { grid-template-columns:1fr; }
.item_download_list li { min-width:0; }
.item_download_link { display:grid; grid-template-columns:30px minmax(0, 1fr) 20px; align-items:center; gap:10px; min-height:58px; padding:9px 12px; background:#f7f7f7; color:#555; transition:background-color 0.2s ease, color 0.2s ease; }
.item_download_link:hover { background:#f1f6ff; color:#003cac; }
.item_download_file_icon { display:flex; align-items:center; justify-content:center; width:26px; height:30px; color:#999; position:relative; }
.item_download_file_icon svg { display:block; width:100%; height:100%; }
.item_download_file_icon small { font-size:7px; font-weight:700; line-height:1; color:#fff; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); }
.item_download_information { display:block; min-width:0; }
.item_download_information strong { display:block; overflow:hidden; font-size:clamp(11px, 1vw, 13px); font-weight:500; line-height:1.4; color:#333; letter-spacing:-0.04em; white-space:nowrap; text-overflow:ellipsis; }
.item_download_information > span { display:block; margin-top:2px; font-size:clamp(9px, 0.8vw, 11px); font-weight:400; line-height:1.3; color:#999; }
.item_download_icon { display:flex; align-items:center; justify-content:center; width:20px; height:20px; color:#aaa; }
.item_download_icon svg { display:block; width:17px; height:17px; }
.item_download_area + .item_view_buttons { margin-top:clamp(25px, 3vw, 40px); }

/* 제품 버튼 */
.item_view_buttons { display:flex; gap:clamp(8px, 1vw, 12px); margin-top:clamp(45px, 5vw, 75px); }
.item_estimate_button,
.item_catalog_button { display:flex; align-items:center; justify-content:center; gap:clamp(10px, 1vw, 15px); flex:1; min-width:0; height:clamp(52px, 5vw, 64px); padding:0 clamp(12px, 1.5vw, 22px); border:1px solid #003cac; border-radius:3px; font-size:clamp(14px, 1.6vw, 18px); font-weight:500; line-height:1.3; letter-spacing:-0.04em; transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.item_estimate_button { background:#003cac; color:#fff; }
.item_catalog_button { background:#fff; color:#222; }
.item_estimate_button i, .item_catalog_button i { flex:0 0 auto; font-size:clamp(15px, 1.4vw, 19px); }
.item_estimate_button:hover { border-color:#002d82; background:#002d82; color:#fff; }
.item_catalog_button:hover { border-color:#003cac; background:#f1f6ff; color:#003cac; }

/* 상세정보 탭 */
.item_detail_section { margin-top:clamp(70px, 8vw, 125px); }
.item_detail_tabs { display:flex; width:100%; }
.item_detail_tab { flex:1; height:clamp(50px, 6vw, 65px); padding:0 15px; border:0; border-top:2px solid transparent; background:#f7f7f7; font-size:clamp(14px, 1.6vw, 18px); font-weight:600; line-height:1.3; color:#aaa; cursor:pointer; transform:translateY(1px); transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.item_detail_tab:hover { color:#555; }
.item_detail_tab.active { border-color:#003cac; background:#fff; color:#003cac; }
.item_detail_panel[hidden] { display:none !important; }
.item_detail_panel { padding:clamp(50px, 6vw, 70px) 0; }

/* 상세내용 */
.item_detail_content { font-size:clamp(14px, 1.3vw, 18px); font-weight:400; line-height:1.7; color:#222; letter-spacing:-0.04em; }
.item_detail_content img { max-width:100%; }
.item_detail_block + .item_detail_block { margin-top:clamp(35px, 4vw, 60px); }
.item_detail_block h2 { margin-bottom:clamp(8px, 0.8vw, 12px); font-size:clamp(16px, 1.5vw, 21px); font-weight:700; line-height:1.4; color:#222; }
.item_detail_block p { margin:0; word-break:keep-all; }
.item_detail_block ul { margin:0; padding-left:1.4em; }
.item_detail_block li { padding-left:3px; word-break:keep-all; }
.item_application_box { padding:clamp(25px, 3vw, 45px); background:#f7f7f7; }

/* 동영상 */
.item_video_player { position:relative; width:100%; aspect-ratio:16 / 9; background:#000; overflow:hidden; }
.item_video_play_button { display:block; width:100%; height:100%; padding:0; border:0; background:#000; cursor:pointer; position:relative; overflow:hidden; }
.item_video_play_button img { display:block; width:100%; height:100% !important; object-fit:cover; transition:transform 0.4s ease; }
.item_video_play_icon { width:clamp(58px, 6vw, 78px); color:#f00; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:transform 0.2s ease, color 0.2s ease; }
.item_video_play_icon svg { display:block; width:100%; height:auto; }
.item_video_play_button:hover img { transform:scale(1.02); }
.item_video_play_button:hover .item_video_play_icon { color:#d90000; transform:translate(-50%, -50%) scale(1.08); }
.item_video_play_button:focus-visible { outline:3px solid #003cac; outline-offset:-3px; }
.item_video_player iframe { display:block; width:100%; height:100%; border:0; }
.item_video_empty { padding:clamp(70px, 9vw, 130px) 20px; text-align:center; color:#aaa; }
.item_video_empty i { display:block; margin-bottom:15px; font-size:clamp(35px, 4vw, 55px); }
.item_video_empty p { font-size:clamp(14px, 1.2vw, 17px); }




/* 반응형 */
@media (max-width:980px) {
	.item_category_filter { align-items:flex-start; }
	.item_search_box .filter_label { flex-basis:75px; }
	.item_product_list { grid-template-columns:repeat(3, minmax(0, 1fr)); }

	.item_view_buttons { margin-top:40px; }
}

@media (max-width:760px) {
	.item_search_section { padding-top:40px; }
	.item_category_filter, .item_keyword_filter { display:block; }
	.item_search_box .filter_label { min-height:auto; margin-bottom:15px; }
	.category_radio_list { grid-template-columns:repeat(3, minmax(0, 1fr)); }
	.item_keyword_box { width:100%; }

	.item_view_section { padding-top:45px; }
	.item_view_heading { margin-bottom:35px; }
	.item_view_summary { display:block; }
	.item_view_information { padding-top:30px; }
	.item_detail_section { margin-top:60px; }
}

@media (max-width:540px) {
	.item_search_box { padding:15px; padding-top:20px; }
	.item_search_box .filter_label { display:none; }
	.category_radio_item label { gap:2px; min-height:40px; padding:8px 5px; }
	.category_radio_item .category_name { font-size:10px; }
	.item_keyword_box { height:45px; }
	.item_search_select { flex-basis:85px; }
	.item_search_select select { padding-right:28px; padding-left:12px; font-size:12px; }
	.item_search_select::after { right:12px; }
	.item_keyword_box input[type="text"] { padding:0 12px; font-size:12px; }
	.item_search_button { flex-basis:62px; }
	.item_search_button svg { display:none; }
	.item_result_heading { margin-bottom:22px; }
	.item_product_list { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:20px; row-gap:40px; }
	.item_product_name { font-size:clamp(14px, 3.5vw, 16px); }

	.item_view_section { padding-top:35px; }
	.item_view_heading { margin-bottom:28px; }
	.item_view_heading h1 { font-size:22px; }
	.item_information_row { grid-template-columns:clamp(60px, 15vw, 90px) minmax(0, 1fr); }
	.item_information_row dt,
	.item_information_row dd { font-size:clamp(12px, 3vw, 16px); }
	.item_keyword_list { gap:7px; }
	.item_keyword_list span { min-height:28px; padding:4px 13px; font-size:11px; }
	.item_download_list { grid-template-columns:1fr; }
	.item_view_buttons { gap:7px; margin-top:35px; }
	.item_estimate_button, .item_catalog_button { height:50px; padding:0 10px; font-size:12px; }
	.item_detail_section { margin-top:40px; }
	.item_detail_tab { font-size:clamp(12px, 3vw, 14px); }
	.item_detail_panel { padding-top:40px; }
	.item_detail_content { font-size:13px; }
	.item_detail_block h2 { font-size:15px; }
	.item_application_box { padding:22px 18px; }
}