@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

───────────────────────────────────────────────────────────*/


/*───────────────────────────────────────────────────────────
	
	공통

───────────────────────────────────────────────────────────*/

.sub_visual{position: relative;box-sizing: border-box; z-index: 3; height: 700px; }
.sub_visual .thumb{position: absolute;top:0;left:0;width: 100%;height: 100%;background: url('../images/sub/sv_company.jpg') no-repeat center / cover;}
.sub_visual .cont{position: relative;z-index: 2;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;gap: 165px;padding-block: 60px;}
.sub_visual .txt_wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 19px; font-size: var(--title-20); color: var(--point-white); box-sizing: border-box; text-wrap: balance; margin-top: auto; }
.sub_visual .txt_wrap h2 { font-size: 350%; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; font-family: var(--font-type02); }
.sub_visual .txt_wrap h4 { font-size: 110%; font-weight: 400; line-height: 1.4; opacity: 0.6; letter-spacing: 0.025em; }
.sub_visual .sub_nav { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 5; }
.sub_visual .sub_nav .desc { display: flex; height: 60px; font-family: var(--font-type02); font-size: var(--title-20); }

.sub_nav .desc :where(dt, dd){position: relative; height: 100%; background: rgba(0, 0, 0, 0.35); }
.sub_nav .desc dt a{ display: flex; justify-content: center; align-items: center; width: 60px; height: 100%; font-size: 0; padding: 0; box-sizing: border-box; }
.sub_nav .desc dd span { position: relative; display: flex; align-items: center; min-width: 301px; height: 100%; padding: 1px 60px 0 23px; box-sizing: border-box; font-weight: 300; font-size: 90%; color: var(--point-white); cursor: pointer; letter-spacing: -0.03em; }
.sub_nav .desc dd span::before { content: ''; position: absolute; width: 8px; height: 8px; border: solid var(--point-white); border-width: 0 0 2px 2px; top: 47%; right: 27px; transform: translateY(-50%) rotate(-45deg); border-radius: 1px; transition: all 0.4s; }
.sub_nav .desc dd.on span::before { transform: translateY(-50%) rotate(-45deg) scale(-1, -1); top: 55%; }
.sub_nav .desc dd::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background: var(--point-white); opacity: 0.2; translate: 0 -50%; }
.sub_nav .desc dd ul { position: absolute; top: 100%; left: 0; width: 100%; padding: 20px 0; background: var(--point-white); border: 1px solid var(--point-color01); border-radius: 0 0 10px 10px; box-sizing: border-box; pointer-events: none; transition: all 0.4s; opacity: 0; text-align: left; border-top: 0; }
.sub_nav .desc dd.on ul { opacity: 1; pointer-events: all; }
.sub_nav .desc dd ul li a { display: block; font-weight: 400; color: var(--black-color02); padding: 11px 24px; box-sizing: border-box; line-height: 1.4; font-size: 90%; }
.sub_nav .desc dd ul li.on a {color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;}

.sub_nav .desc dd span.search_ul { cursor:auto; }
.sub_nav .desc dd span.search_ul::before { display: none; }

body:has(.sub_notice, .sub_inquiry) .sub_visual .thumb { background-image: url('../images/sub/sv_notice.jpg'); }
body:has(.sub_data, .sub_gallery) .sub_visual .thumb { background-image: url('../images/sub/sv_pr.jpg'); }
body:has(.sub_tech, .sub_qual) .sub_visual .thumb { background-image: url('../images/sub/sv_rd.jpg'); }
body:has(.sub_talent) .sub_visual .thumb { background-image: url('../images/sub/sv_talent.jpg'); }
body:has(.sub_goods) .sub_visual .thumb { background-image: url('../images/sub/sv_goods.jpg'); }

#wrap :where([type="text"], [type="password"]){width: 100%;height: 60px;border: 0; background: var(--gray-bg01);padding: 0 22px;font-size: max(13px, var(--title-18));font-weight: 400;color: var(--black-color03);text-align: left;vertical-align: middle;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing: inherit;}
#wrap :where([type="text"], [type="password"])::placeholder{color: var(--black-color09); font-weight: 400;}
#wrap select{width: 150px;min-width: auto;height: 60px;border: 1px solid var(--border-color01);background: var(--point-white) url('../images/sub/ico_sel_arw.svg') no-repeat calc(100% - 27px) 50%; padding: 0 45px 0 21px;font-size: var(--title-18);font-weight: 400;color: var(--black-color03);letter-spacing: -0.03em;appearance: none;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}

#wrap .sub_board .search_wrap { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; flex-wrap: wrap; gap: 20px; }
#wrap .board_search { background: var(--trans-color); line-height: unset; margin-bottom: 0; padding: 0; width: 100%;  max-width: 602px; border: 1px solid var(--border-color01); }
#wrap .board_search fieldset { display: flex; align-items: center; width: 100%; }
#wrap .board_search .board_search_sel { width: auto; margin: 0; }
#wrap .board_search :where(select, input[type="text"]) { height: 58px; font-size: var(--title-18); border: 0; background-color: var(--point-white); font-family: var(--font-type02); letter-spacing: -0.03em; }
#wrap .board_search :where(select, input[type="text"])::placeholder { font-size: var(--title-18); }
#wrap .board_search select { width: 160px; margin: 0; }
#wrap .board_search .inp_custom { position: relative; display: flex; width: calc(100% - 160px); }
#wrap .board_search .inp_custom::before { content: ''; position: absolute; left: -1px; top: 50%; translate: 0 -50%; width: 1px; height: 14px; background: var(--border-color01); z-index: 2; }
#wrap .board_search .inp_custom::after { content: ''; position: absolute; right: 59px; top: 50%; translate: 0 -50%; width: 1px; height: 14px; background: var(--border-color01); z-index: 2; }
#wrap .board_search input[type="text"] { position: relative; margin: 0;  }
#wrap .board_search input[type="submit"] { display: inline-block; width: 58px; height: 58px; background: var(--point-white) url('../images/sub/ico_search.svg') no-repeat center center; border-radius: var(--radius-10); flex-shrink: 0; font-size: 0; background-size: 20px auto; }



@media (max-width: 1023px) {
    .sub_visual { height: clamp(360px, 50vw, 700px); }
    .sub_visual .cont { gap: clamp(45px, 6vw, 165px); padding-block: clamp(30px, 6vw, 60px); }
    .sub_visual .txt_wrap { gap: clamp(10px, 1.9vw, 19px); }
    .sub_visual .txt_wrap h2 { font-size: 310%; }
    .sub_visual .sub_nav .desc { height: clamp(50px, 6vw, 60px); }
    .sub_nav .desc dt a { width: clamp(50px, 6vw, 60px); }
    .sub_nav .desc dd span { min-width: clamp(210px, 28vw, 280px); padding: 1px clamp(45px, 6vw, 60px) 0 clamp(15px, 2.3vw, 23px); }
    .sub_nav .desc dd span::before { right: clamp(15px, 2.7vw, 27px); width: clamp(7px, 0.8vw, 8px); height: clamp(7px, 0.8vw, 8px);  }

    #wrap .board_search :where(select, input[type="text"]) { height: clamp(45px, 6vw, 58px); padding-left: clamp(17px, 2vw, 22px); padding-right: clamp(30px, 4.5vw, 45px); }
    #wrap .board_search select { width: clamp(100px, 16vw, 160px); }
    #wrap .board_search input[type="submit"] { width: clamp(45px, 6vw, 58px); height: clamp(45px, 6vw, 58px); background-size: clamp(15px, 2vw, 20px) auto; }
    #wrap .board_search .inp_custom { width: calc(100% - clamp(100px, 16vw, 160px)); }
    #wrap .board_search .inp_custom::after { right: clamp(46px, 6vw, 59px); }
    #wrap select { background-position: calc(100% - clamp(17px, 2.7vw, 27px)) 50%; }
    #wrap .sub_board .search_wrap { margin-bottom: clamp(20px, 5vw, 50px); }

    #wrap :where([type="text"], [type="password"]) { height: clamp(40px, 6.1vw, 60px); }

    .sub_nav .desc dd ul { padding: clamp(10px, 2vw, 20px) 0;  }
    .sub_nav .desc dd ul li a { padding: clamp(7px, 1.1vw, 11px) clamp(15px, 2.4vw, 24px); }
}

@media (max-width: 860px) {
    .sub_visual .txt_wrap h2 { font-size: 280%; }
}

@media (max-width: 640px) {
    .sub_visual .txt_wrap h2 { font-size: 250%; }
    .sub_visual .txt_wrap h4 { font-size: 100%; }

}

@media (max-width: 479px) {
    .sub_visual .txt_wrap h2 { font-size: 220%; }

    .sub_visual .sub_nav .desc { width: 100%; }
    .sub_nav .desc dd { width: calc(100% - 50px); }   
    .sub_nav .desc dd:not(:last-child) { display: none; }
    .sub_nav .desc dd span { min-width: auto; }

    #wrap .board_search { width: 100%; order: 1; }
}


#wrap .list_default{position: relative;font-size: var(--title-20);border-top: 2px solid var(--black-color01);}
#wrap .list_default :where(th, td){line-height: 1.4;text-align: center;padding-inline: 9px;border-bottom: 1px solid var(--border-color01);}
#wrap .list_default :where(th, td) strong{font-weight: 500;}
#wrap .list_default .left{text-align: left; font-size: 95%; color: var(--black-color03); display: flex; align-items: center; gap:4px;}
#wrap .list_default .notice span { box-sizing: border-box; font-weight: 600; color: var(--point-color01); font-size: var(--title-18); box-shadow: 0 0 0 1px var(--point-color01); display: inline-flex; justify-content: center; align-items: center; padding-block: 4px 5px; padding-inline: 18px; }
#wrap .list_default th{color: var(--black-color01);padding-block: 24px 26px; font-weight: 500; font-size: 100%;}
#wrap .list_default td{color: var(--black-color08);padding-block: 28px 24px;font-weight: 400; font-size: 90%; letter-spacing: -0.04em; }
#wrap .list_default td a{color: var(--black-color03);white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; width: auto; }
#wrap .list_default .notice { padding-block: 20px; }
#wrap .list_default .board_notice .left { font-weight: 500; }
#wrap .list_default td img { display: inline-block;  }


#wrap .list_default .down a {display: flex; align-items: center; gap: 12px;  justify-content: center; font-size: var(--title-20); }
#wrap .list_default .down a span { color: var(--point-color01); font-weight: 500; font-size: 95%; letter-spacing: -0.03em; line-height: 1; }
#wrap .list_default .down a em{font-size:0;}



#wrap .view_btn .paging { min-height: auto; }
#wrap .paging { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 80px 0 0; }
#wrap .paging a { width: 40px; height: 40px; margin: 0; }
#wrap .paging :is(.on a, a.on) { color: var(--point-color01); border-bottom-color: var(--point-color01); }
#wrap .paging .arrow a { background: var(--gray-bg01) no-repeat center; }
#wrap .paging .arrow a img { display: none; }
#wrap .paging .arrow.next a { background-image: url('../images/sub/ico_pagi_next.svg'); margin-left: 22px; }
#wrap .paging .arrow.prev a { background-image: url('../images/sub/ico_pagi_prev.svg'); margin-right: 22px; }
#wrap .paging .arrow.last a { background-image: url('../images/sub/ico_pagi_last.svg'); }
#wrap .paging .arrow.first a { background-image: url('../images/sub/ico_pagi_first.svg'); }

@media (max-width: 1023px) {
    #wrap .list_default:not(:has(.no_data)) :where(col:last-child, th:last-child, td:last-child) { display: none; }
    #wrap .list_default th { padding-block: clamp(15px, 2vw, 24px) clamp(15px, 2vw, 26px); }
    #wrap .list_default td { padding-block: clamp(15px, 2vw, 28px) clamp(15px, 2vw, 24px); }
    #wrap .list_default .notice span { padding-inline: clamp(12px, 1.8vw, 18px); padding-block: clamp(3px, 0.5vw, 5px); }
    
    #wrap .paging { margin: clamp(40px, 8vw, 80px) 0 0; gap: clamp(5px, 0.8vw, 8px); }
    #wrap .paging .arrow.next a { margin-left: clamp(8px, 2vw, 22px); }
    #wrap .paging .arrow.prev a { margin-right: clamp(8px, 2vw, 22px); }
    #wrap .paging a { width: clamp(35px, 4vw, 40px); height: clamp(35px, 4vw, 40px); }

    #wrap .list_default .down a em { width: clamp(16px, 1.8vw, 18px); aspect-ratio: auto 1; }
}

@media (max-width: 860px) {
    #wrap .list_default:not(:has(.no_data)) :where(col:nth-child(3), th:nth-child(3), td:nth-child(3)) { display: none; }
    #wrap .list_default.list_down:not(:has(.no_data)) :where(col:nth-child(3), th:nth-child(3), td:nth-child(3)) { display: table-cell; width: 140px; }
}

@media (max-width: 640px) {
    #wrap .list_default col:nth-child(1) { width: 80px; }
}

@media (max-width: 520px) {
    #wrap .list_default:not(:has(.no_data)) :where(col:nth-child(1), th:nth-child(1), td:nth-child(1)) { display: none; }
    #wrap .list_default col:nth-child(4) { width: 100px; }

}


@media (max-width: 375px) {
    #wrap .list_default.list_down:not(:has(.no_data)) :where(col:nth-child(3), th:nth-child(3), td:nth-child(3)) { width: 80px; }
    #wrap .list_default .down a span { display: none; }
}


#wrap .bbs_view{position: relative;font-size: var(--title-20);border-bottom: 1px solid var(--border-color01);}
#wrap .bbs_view .view_tit{padding: 0 0 40px;text-align: left;border: 0;margin: 0;width: 100%;font-size: var(--title-20);background: none;display: grid;gap: 27px; border-bottom: 1px solid var(--border-color01);}
#wrap .bbs_view .view_tit:after{display: none;}
#wrap .bbs_view .view_tit h3{ display: flex; gap: 24px; align-items: center; font-size: 190%;font-weight: 600;color: var(--black-color01);width: 100%;text-align: inherit;line-height: 1.3;letter-spacing: -0.03em; overflow: visible; flex-wrap: wrap; }
#wrap .bbs_view .view_tit .notice { box-sizing: border-box; font-weight: 600; color: var(--point-color01); font-size: var(--title-18); box-shadow: 0 0 0 1px var(--point-color01); display: inline-flex; justify-content: center; align-items: center; padding-block: 4px 5px; padding-inline: 18px; }
#wrap .bbs_view .view_info { display: flex; flex-wrap: wrap; gap: 30px; }
#wrap .bbs_view .view_info dl { display: flex; gap: 14px; font-size: var(--title-20); }
#wrap .bbs_view .view_info dt { color: var(--black-color03); font-weight: 400; font-size: 90%; letter-spacing: -0.03em; }
#wrap .bbs_view .view_info dd { color: var(--black-color06); font-weight: 400; font-size: 90%; letter-spacing: -0.03em; }




#wrap .bbs_view .view_cont{padding: 60px 0;min-height: 440px;font-size: 100%;font-weight: 400;color: var(--black-color03);line-height: 1.6;letter-spacing: -0.03em;border-bottom: 0;width: 100%;margin: 0;word-break: keep-all;}

#wrap .extra_editor_wrap { display: flex; width: 100%;border: 0;margin: 0;background: none;overflow: hidden; border-top: 0; padding-bottom: 11px; }
#wrap .extra_editor_wrap div{display: flex;gap: 12px clamp(30px, 3vw, 60px);width: 100%;border: 0;margin: 0;background: none;overflow: hidden;margin: 28px 0;border-top: 0;  background: var(--gray-bg01); }
#wrap .extra_editor_wrap h4{position: relative;font-size: 100%;font-weight: 500;color: var(--black-color03);line-height: 1.3;text-align: center;width: 180px;flex-shrink: 0;padding: 0 15px;background: none;display: flex;align-items: center;justify-content: center; border-bottom: 0; }
#wrap .extra_editor_wrap h4:before{position: absolute; content:''; width: 1px; height: 12px; background: var(--border-color01); top:50%; right:0; translate: 0 -50%;}
#wrap .extra_cont{display: flex;flex-direction: column;gap: 12px;padding: 0;font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.3;width: 100%;}
#wrap .extra_cont span{font-size: inherit;color: inherit;display: block;margin: 0;}
#wrap .extra_cont span a{color: inherit !important;}

#wrap .btn_wrap { margin: 0; padding: 0; width: 100%; }
#wrap .more_btn { display: flex; justify-content: center; align-items: center; font-size: var(--title-20); background: var(--point-color01); box-sizing: border-box; padding-block: 20px; padding-inline: 15px; width: 100%; max-width: 200px; margin-top: 80px; margin-inline: auto; }
#wrap .more_btn span { filter: var(--filter-white); font-size: 100%; font-weight: 600; letter-spacing: -0.03em; text-align: center; }



@media (max-width:1023px){
    #wrap .bbs_view .view_tit{padding: 0 0 clamp(20px, 2.3vw, 23px);gap: clamp(12px, 2vw, 27px);}
    #wrap .bbs_view .view_tit h3{font-size: 180%; gap: clamp(15px, 2vw, 24px); }
    #wrap .bbs_view .view_cont{padding: clamp(30px, 6vw, 60px) 0;min-height: clamp(220px, 44vw, 440px);}
    #wrap .extra_editor_wrap div{ margin-block: clamp(18px, 2.3vw, 23px);column-gap: clamp(25px, 5.5vw, 60px);}
    #wrap .extra_editor_wrap h4{width: clamp(100px, 14vw, 140px);}

    #wrap .bbs_view .view_tit .notice { padding-inline: clamp(12px, 1.8vw, 18px); }

    #wrap .bbs_view .view_info { gap: clamp(15px, 3vw, 30px); }
    #wrap .bbs_view .view_info dl { gap: clamp(12px, 1.5vw, 15px); }

    #wrap .more_btn { margin-top: clamp(40px, 8vw, 80px); width: 80%; padding-block: clamp(15px, 2vw, 20px); max-width: clamp(140px, 20vw, 200px); }
}
@media (max-width:640px){
    #wrap .bbs_view .view_tit h3{font-size: 160%; flex-direction: column; justify-content: flex-start; align-items: flex-start;  }
}
@media (max-width:479px){
    #wrap .bbs_view .view_tit h3{font-size: 130%;}
    #wrap .bbs_view .view_cont{font-size: 90%;line-height: 1.7;}
}
@media (max-width:360px){
    
    
}


#wrap .gell_list { display: grid; grid-template: auto / repeat(3, 1fr); gap: clamp(15px, 2.3vw, 42px); }
#wrap .gell_list > li { position: relative; box-sizing: border-box; background: var(--point-white); box-shadow: 0 0 0 1px inset var(--border-color01); overflow: hidden; display: flex; flex-direction: column; transition: all 0.4s; }

#wrap .gell_list > li::before { position: absolute; content: ''; inset: 0; border: 2px solid var(--point-color01); border-radius: inherit; box-sizing: border-box; opacity: 0; pointer-events: none; transition: inherit; z-index: 2; }
#wrap .gell_list > li .link { position: absolute; inset: 0; z-index: 3; }
#wrap .gell_list .thumb { display: block; width: 100%; aspect-ratio: auto 1.57; overflow: hidden; flex-shrink: 0; }
#wrap .gell_list .thumb img { width: 100%; height: 100%; object-fit: cover; transition: all 0.4s; }
#wrap .gell_list .txt_box { display: flex; flex-direction: column; gap: 29px; height: 100%; justify-content: space-between; box-sizing: border-box; padding-block: 30px; padding-inline: 30px; font-size: var(--title-20); }
#wrap .gell_list .txt_box dl { display: flex; flex-direction: column; gap: 14px; }
#wrap .gell_list .txt_box dt { font-size: 120%; font-weight: 500; color: var(--black-color03); line-height: 1.6; letter-spacing: -0.03em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#wrap .gell_list .txt_box dd { font-size: 90%; font-weight: 400; color: var(--black-color06); line-height: 1.6; letter-spacing: -0.03em; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
#wrap .gell_list .date { color: var(--black-color08); font-weight: 400; font-size: 90%; line-height: 1.4; letter-spacing: -0.03em; }

@media (hover: hover) and (pointer: fine) {
    #wrap .gell_list > li:hover:before { opacity: 1; }
    #wrap .gell_list > li:hover .thumb img { scale: 1.1; }
}

@media (max-width: 1023px) {
    #wrap .gell_list { grid-template: auto / repeat(2, 1fr); }
    #wrap .gell_list .txt_box { gap: clamp(20px, 3vw, 29px); padding-block: clamp(15px, 3vw, 30px); padding-inline: clamp(15px, 3vw, 30px); }
    #wrap .gell_list .txt_box dl { gap: clamp(10px, 1.5vw, 14px); }
}

@media (max-width: 640px) {
    #wrap .gell_list .txt_box dt { font-size: 110%; }
}

@media (max-width: 479px) {
    #wrap .gell_list { grid-template: auto / repeat(1, 1fr); }
}


#wrap div.call_box { display: flex; align-items: center; position: relative; box-sizing: border-box; border: 1px solid var(--point-color01); background: var(--point-white); padding: 24px; margin-bottom: 60px; }
#wrap div.call_box .ico_wrap { box-sizing: border-box; padding: 13px; background: var(--point-color01); }
#wrap div.call_box .call_list { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; display: flex; }
#wrap div.call_box .call_list > li:not(:last-child) { position: relative; box-sizing: border-box; margin-right: clamp(10px, 1.7vw, 31px); padding-right: clamp(10px, 1.7vw, 33px); }
#wrap div.call_box .call_list > li:not(:last-child)::after { content: ''; position: absolute; left: 100%; top: 50%; translate: 0 -50%; width: 1px; height: 14px; background: var(--border-color01); }
#wrap div.call_box .call_list dl { display: flex; gap: clamp(15px, 1.3vw, 24px); font-size: var(--title-20); }
#wrap div.call_box .call_list dt { color: var(--black-color01); font-weight: 500; font-size: 100%; letter-spacing: -0.03em; letter-spacing: 0; }
#wrap div.call_box .call_list dd a { display: flex; align-items: center; gap: 10px; font-size: 100%; color: var(--point-color01); font-weight: 600; letter-spacing: 0.02em; font-family: var(--font-type01); }
#wrap div.call_box .call_list dd a em { flex-shrink: 0; }


label:has([type="radio"]){display: flex;width: fit-content;align-items: flex-start;gap: 10px;cursor: pointer;font-size: var(--title-18);font-weight: 400;color: var(--black-color03);font-family: var(--font-type02);line-height: 20px;letter-spacing: -0.03em;}
label [type="radio"]{display: inline-block; width: 20px; height: 20px; background: url('../images/sub/ico_radio.svg') no-repeat left center / 100% auto; cursor: inherit; flex-shrink: 0;}
label:has([type="radio"]:checked) [type="radio"]{background-image: url('../images/sub/ico_radio_on.svg');}

label:has([type="checkbox"]){display: flex;width: fit-content;align-items: flex-start;gap: 12px;cursor: pointer;font-size: var(--title-20);font-weight: 500;color: var(--black-color01);font-family: var(--font-type02);line-height: 24px;letter-spacing: -0.03em;}
label [type="checkbox"]{display: inline-block; width: 24px; height: 24px; background: url('../images/sub/ico_chk.svg') no-repeat left center / 100% auto; cursor: inherit; flex-shrink: 0;}
label:has([type="checkbox"]:checked) [type="checkbox"]{background-image: url('../images/sub/ico_chk_on.svg');}
label:has([type="checkbox"]) em{font-weight: inherit; color: var(--point-color01); display: contents;}


#wrap .board_write{position: relative; display: block; width: 100%; text-align: left; font-size: var(--title-20);box-sizing:border-box;border-top:1px solid var(--black-color01);border-bottom:1px solid var(--border-color01);padding:40px 0;}
#wrap .board_write :where{display: block; width: 100%;}
#wrap .board_write tbody{display: flex; gap:30px 60px; flex-wrap: wrap;}
#wrap .board_write tr{display: flex;align-items: center;width: calc(100% / 2 - 30px);background: var(--point-white);}
#wrap .board_write th{width: 180px;flex-shrink: 0;font-size: 100%;font-weight: 500;color: var(--black-color01);padding-right: 15px;box-sizing:border-box;}
#wrap .board_write th label{display: block; width: 100%;}
#wrap .board_write th em{font-weight: inherit; color: var(--point-color01);}
#wrap .board_write td{width: 100%; font-size: 90%; font-weight: 400; color: var(--black-color00);}
#wrap .board_write input:where([type="text"], [type="password"]){width: 100%;font-size: inherit;font-weight: inherit;color: inherit;}
#wrap .board_write tr.contents,
#wrap .board_write tr.w100{width:100%;}
#wrap .board_write tr.contents textarea { width: 100%; height: 360px; background: var(--gray-bg01); resize: none; border: 0; font-size: inherit; font-weight: inherit; color: inherit; padding: 22px; }

#wrap .board_write .inp_list { display: flex; gap: 40px; flex-wrap: wrap; }

#wrap .bbs_write_box .file_box{display: flex;gap:20px; align-items: center; }
#wrap .bbs_write_box .file_box .file_txt { width: calc(100% - 120px); height: 60px; box-sizing: border-box; padding-inline: 22px; display: inline-flex; align-items: center; background: var(--gray-bg01); }
#wrap .bbs_write_box .file_box .file_txt > a { color: var(--black-color05) !important; font-size: var(--title-18); font-weight: 400; letter-spacing: -0.03em; cursor: pointer; }
#wrap .bbs_write_box .file_box .file_txt > a > label { cursor: pointer; }
#wrap .bbs_write_box .file_box > label{cursor:pointer;display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:120px;height:50px; font-size:var(--title-18);color:var(--point-white);font-weight:500; background: var(--black-color06); flex-shrink: 0; } 


#wrap .bbs_write_box .captcha_td{display: flex;gap:10px;}
#wrap .bbs_write_box .captcha_wrap {display: flex;gap: 10px;padding:10px;width: 250px;box-shadow: inset 0 0 0 1px var(--border-color01);}
#wrap .board_write #captcha_box{width: 180px;height: 40px;overflow: hidden;border-radius:4px;box-sizing:border-box;}
#wrap .board_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height:none;margin: -1px 0 0 -1px;}
#wrap .board_write #refreshCode{width: 40px;height: 40px;font-size: 0;background: var(--black-color06) url('../images/sub/ico_refresh.svg') no-repeat center;cursor: pointer;}

#wrap .bbs_write_box .captcha_wrap + input{width:280px;}
#wrap .bbs_write_box .chk_list{display: flex;flex-wrap:wrap;gap:10px 40px;}

#wrap .policy_wrap {margin-top:40px; box-sizing: border-box;padding:40px 40px;border:1px solid var(--border-color01); }
#wrap .policy_wrap label:has([type="checkbox"]){font-size:var(--title-20);color:var(--black-color03);font-weight:500;}
#wrap .policy_wrap label:has([type="checkbox"]) strong{color:var(--point-color01);font-weight:500;}
#wrap .policy_wrap .area_box {width: 100%;margin-top: 20px;padding-inline: 9px; box-sizing: border-box;background:var(--gray-bg01);border-radius: var(--radius-05);}
#wrap .policy_wrap .area_box textarea {width: 100%;height:150px;padding-block: 20px 16px; padding-inline: 10px; box-sizing: border-box;color: var(--black-color08);font-size: var(--title-16);line-height: 1.6;letter-spacing: 0;border: none;resize: none;background: var(--trans-color);outline: none;}
#wrap .policy_wrap .area_box textarea::-webkit-scrollbar {width: 4px;}
#wrap .policy_wrap .area_box textarea::-webkit-scrollbar-thumb {background: var(--black-color02); border-radius: 2px;}
#wrap .policy_wrap .area_box textarea::-webkit-scrollbar-track {border-radius: 10px;background: var(--border-color01);margin-block: 10px; }


@media (max-width: 1180px) {
    #wrap div.call_box { flex-direction: column; gap: 30px; align-items: flex-start; }
    #wrap div.call_box .call_list { position: relative; left: 0; top: 0; translate: 0; }
}

@media (max-width:1023px) {

    #wrap div.call_box { gap: clamp(15px, 3vw, 30px); margin-bottom: clamp(30px, 6vw, 60px); padding: clamp(15px, 2.4vw, 24px); }
    #wrap div.call_box .call_list { position: relative; left: 0; top: 0; translate: 0; flex-direction: column; gap: clamp(15px, 2vw, 20px); width: 100%; }
    #wrap div.call_box .call_list > li:not(:last-child) { margin-right: 0; padding-right: 0; }
    #wrap div.call_box .call_list > li:not(:last-child)::after { display: none; }
    #wrap div.call_box .ico_wrap { padding: clamp(10px, 1.3vw, 13px); }
    #wrap div.call_box .ico_wrap span { display: block; width: clamp(20px, 2.4vw, 24px); }
    #wrap div.call_box .call_list dl { flex-wrap: wrap; gap: clamp(10px, 2.4vw, 24px); }
    #wrap div.call_box .call_list dd a { gap: clamp(7px, 1vw, 10px); }
    #wrap div.call_box .call_list dd a em { width: clamp(14px, 1.8vw, 18px); }

    #wrap .board_write { padding: clamp(20px, 4vw, 40px) 0; }
    #wrap .board_write tbody{gap:20px 60px;}
    #wrap .board_write tr{width: 100%; }
    #wrap .bbs_write_box .file_box{width:100%; gap: 10px;}
    #wrap .bbs_write_box .file_box .file_txt,
    #wrap .bbs_write_box .file_box label{height:clamp(40px, 6.1vw, 60px); width: clamp(100px, 12vw, 120px); }
    #wrap .bbs_write_box .file_box .file_txt { width: 100%; }
    #wrap .bbs_write_box .captcha_wrap + input{width:calc(100% - 260px);height:60px;}
    #wrap .policy_cont{margin-top: clamp(20px, 3vw, 30px);}

    #wrap .bbs_write_box .chk_list{gap:10px 20px;}

    label [type="radio"]{width: clamp(16px, 2.4vw, 20px); height: clamp(16px, 2.4vw, 20px);}
    label:has([type="radio"]){line-height: clamp(16px, 2vw, 20px);}

    label [type="checkbox"]{width: clamp(18px, 2.6vw, 24px); height: clamp(18px, 2.6vw, 24px);}
    label:has([type="checkbox"]){line-height: clamp(18px, 2.6vw, 24px);}

    #wrap .board_write .inp_list { gap: clamp(15px, 4vw, 40px); }

    #wrap .board_write tr.contents textarea { height: clamp(240px, 36vw, 360px); }
}
@media (max-width:860px) {
    #wrap .policy_wrap{padding:25px 20px;margin-top:30px;}
}
@media (max-width:640px) {
    #wrap .board_write tr{flex-wrap: wrap;min-height: auto;padding:0;gap:10px;}
    #wrap .board_write th{width: 100%; padding-right: 0; flex-shrink: unset; font-size: 100%;}
    #wrap .board_write td:has(.cap_wrap){flex-wrap: wrap;}
    
    #wrap .bbs_write_box .captcha_wrap{width:auto; padding: 7px;}
    #wrap .board_write #captcha_box{width: 140px;height: 25px;}
    #wrap .board_write #refreshCode{width: 25px;height: 25px;background-size: 13px auto;}
    #wrap .bbs_write_box .captcha_wrap + input{width:100%;height:clamp(40px, 6.1vw, 60px)}
}
@media (max-width:479px) {
    #wrap .board_write{padding:25px 0;}
            
}
@media (max-width: 375px) {
    #wrap div.call_box { align-items: center; }
    #wrap div.call_box .call_list dl { flex-direction: column; text-align: center; }
    #wrap div.call_box .call_list dd a { justify-content: center; }
    #wrap .bbs_write_box .captcha_td { flex-direction: column; align-items: flex-start; }
}


.value_list { display: flex; flex-wrap: wrap; }
.value_list > li { position: relative; width: calc(100% / 4); box-sizing: border-box; padding-inline: 0; border-radius: 100%; font-size: var(--title-20); }
.value_list > li > div::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; border: 1px dashed; box-sizing: border-box; }
.value_list > li > div::after { content: ''; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; z-index: 1; }
.value_list > li .circle_box { position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; border-radius: 100%; z-index: 2; padding: 27px; }


.value_list > li:nth-child(odd) > div.circle_box { border-color: var(--point-color04); }
.value_list > li:nth-child(even) > div.circle_box { border-color: var(--point-color05); }
.value_list > li:nth-child(odd) > div.circle_box::before { border-color: var(--point-color02); }
.value_list > li:nth-child(odd) > div.circle_box::after { background: linear-gradient(0deg,rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%);  }
.value_list > li:nth-child(even) > div.circle_box::before { border-color: var(--point-color03); }
.value_list > li:nth-child(even) > div.circle_box::after { background: linear-gradient(180deg,rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%);  }


.value_list > li .circle_box > div { position: relative; font-size: var(--title-20); text-align: center; width: 100%; border-radius: 100%; z-index: 5; padding: 14px; box-sizing: border-box; }
.value_list > li:nth-child(odd) .circle_box > div { background: var(--point-color04); }
.value_list > li:nth-child(even) .circle_box > div { background: var(--point-color05); }

.value_list > li .circle_box > div > dl { background: var(--point-color02); width: 100%; aspect-ratio: auto 1; border-radius: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; box-sizing: border-box; border: 6px solid var(--point-white); font-size: var(--title-20); gap: 14px; }
.value_list > li:nth-child(even) .circle_box > div > dl { background: var(--point-color06); }
.value_list > li .circle_box > div > dl dt { width: 137px; }
.value_list > li .circle_box > div > dl dd { filter: var(--filter-white); font-size: 170%; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }

.value_list > li p { text-align: center; color: var(--black-color03); font-weight: 400; font-size: 110%; line-height: 1.6; letter-spacing: -0.03em; margin-top: 40px; }

.value_list > li > .arw { content: ''; position: absolute; left: 0; top: calc(47% - 40px); translate: -50% -50%; width: 14px; height: 12px; z-index: 10; background: url('../images/sub/ico_val_arw.svg') no-repeat center;  background-size: 100% auto;  }
.value_list > li:first-child > .arw { display: none; }
.value_list > li:nth-child(odd) > .arw { rotate: 180deg; }

@media (max-width: 1300px) {
    .value_list > li .circle_box { padding: 15px; }
    .value_list > li .circle_box > div > dl dd { font-size: 140%; }
    .value_list > li > .arw { top: calc(50% - 70px); }
}

@media (max-width: 1180px) {
    .value_list > li .circle_box { padding: 10px; }
    .value_list > li .circle_box > div { padding: 9px; }
}

@media (max-width: 1023px) {
    .value_list { flex-direction: column; justify-content: center; align-items: center; }
    .value_list > li { width: 100%; display: flex; align-items: center; gap: clamp(20px, 3vw, 30px); }
    .value_list > li .circle_box { padding: clamp(15px, 2vw, 27px); width: 305px; flex-shrink: 0; }
    .value_list > li p { margin-top: 0; text-align: left; }
    .value_list > li > .arw { top: 100%; left: 155px; }
    .value_list > li:nth-child(odd) > .arw { rotate: 0deg; }
    .value_list > li:first-child > .arw { display: block; }
    .value_list > li:last-child > .arw { display: none; }
    .value_list > li .circle_box > div > dl { gap: clamp(7px, 1.4vw, 14px); }
    .value_list > li .circle_box > div > dl dt { width: clamp(96px, 14vw, 137px); }
    .value_list > li .circle_box > div > dl dd { font-size: 130%; }

    .value_list > li:nth-child(odd) > div.circle_box::after { background: linear-gradient(90deg, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%); }
    .value_list > li:nth-child(even) > div.circle_box::after { background: linear-gradient(-90deg, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%); }
}

@media (max-width: 860px) {
    .value_list > li .circle_box { width: 300px; }
    .value_list > li > .arw { left: 155px; }
    .value_list > li .circle_box > div > dl dd { font-size: 120%; }
}

@media (max-width: 860px) {
    .value_list > li .circle_box { width: 270px; }
    .value_list > li > .arw { left: 135px; width: 12px; height: 10px; }
}

@media (max-width: 640px) {
    .value_list > li .circle_box { width: 220px; }
    .value_list > li > .arw { left: 113px; }
    
    .value_list > li .circle_box > div { padding: 6px; }
    .value_list > li .circle_box > div > dl { border-width: 3px; }
}

@media (max-width: 479px) {
    .value_list > li .circle_box { width: 189px; padding: 10px; }
    .value_list > li > .arw { left: 95px; }
}

@media (max-width: 375px) {
    .value_list > li { gap: 15px; }
    .value_list > li .circle_box { width: 160px; }
    .value_list > li .circle_box > div > dl dd { font-size: 100%; }
    .value_list > li > .arw { width: 10px; height: 8px; left: 81px; }
}


.sub_title.lt { text-align: left; }
.sub_title:has(p) { display: flex; flex-direction: column; gap: 10px; }
.sub_title p { font-size: 120%; font-weight: 500; color: var(--black-color03); line-height: 1.6; letter-spacing: -0.03em; }

.hd_title h5.square { display: flex; align-items: baseline; gap: 14px; }
.hd_title h5.square::before { content: ''; display: block; width: 8px; height: 8px; flex-shrink: 0; background: var(--point-color03); translate: 0 -7px; flex-shrink: 0; }

.chk_list { display: grid; grid-template: auto / repeat(3, 1fr); }
.chk_list li { box-shadow: 0 0 0 1px inset var(--border-color01); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: var(--title-20); text-align: center; padding: 31px; gap: 13px; }
.chk_list li span { font-size: 100%; font-weight: 400; color: var(--black-color03); line-height: 1.4; letter-spacing: -0.03em; }

.square_num { counter-reset: sq_num 0; display: grid; grid-template: auto / repeat(2, 1fr); }
.square_num > li { counter-increment: sq_num 1; }
.square_num dl { font-size: var(--title-20); }
.square_num dt { position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 24px; background: var(--point-color01); font-size: 130%; font-weight: 500; line-height: 1.4; letter-spacing: -0.03em; text-align: center; color: var(--point-white); }
.square_num dt::before { position: absolute; left: 24px; top: 50%; translate: 0 -50%; content: counter(sq_num, decimal-leading-zero); display: block; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; font-size: var(--title-16); font-weight: 600; color: var(--point-color01); letter-spacing: -0.03em; background: var(--point-white); margin-right: auto; flex-shrink: 0; }
.square_num dd { box-sizing: border-box; padding-inline: 24px; padding-top: 24px; }

.bullet_list { display: grid; gap: 13px; }
.bullet_list > li { display: flex; align-items: baseline; font-size: var(--title-20); gap: 10px; }
.bullet_list > li::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 100%; background: var(--black-color08); translate: 0 -4px; flex-shrink: 0; }
.bullet_list > li span { color: var(--black-color03); font-weight: 400; font-size: 95%; line-height: 1.5; letter-spacing: -0.03em; }

.bullet_list.type02 { grid-template: auto / repeat(5, 1fr); gap: 13px 0; }

.num_list { display: grid; grid-template: auto / repeat(3, 1fr); counter-reset: num 0; }
.num_list > li { counter-increment: num 1; box-sizing: border-box; padding-inline: 30px; padding-block: 29px; box-shadow: 0 0 0 1px inset var(--border-color01); }
.num_list dl { font-size: var(--title-20); display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 21px; }
.num_list dt { display: flex; flex-direction: column; gap: 16px; color: var(--black-color03); font-size: 110%; font-weight: 400; line-height: 1.4; letter-spacing: -0.03em; }
.num_list dt::before { content: counter(num, decimal-leading-zero); display: block; color: var(--point-color01); font-size: 95%; font-weight: 600; line-height: 1.6; letter-spacing: -0.03em; flex-shrink: 0; }
.num_list dd { width: 70px; margin-left: auto; }

.num_list > li:nth-child(6) dl { gap: 0; }
.num_list > li:nth-child(6) dd { margin-top: -15px; }

.bd_box { box-sizing: border-box; padding: 30px; box-shadow: 0 0 0 1px inset var(--point-color01); }

.img_list { display: grid; grid-template: auto / repeat(4, 1fr); }
.img_list dl { font-size: var(--title-20); text-align: center; display: flex; flex-direction: column; }
.img_list dl dt { background: var(--gray-bg01); }
.img_list dl dt img { mix-blend-mode: multiply;  }
.img_list dl dd { color: var(--black-color03); font-weight: 500; font-size: 110%; line-height: 1.4; letter-spacing: 0; }

.patent_list { display: grid; grid-template: auto / repeat(5, 1fr); }
.patent_list li { box-sizing: border-box; padding: clamp(30px, 3vw, 60px); background: var(--gray-bg01); }
.patent_list li span { display: block; box-shadow: var(--shadow-02); }

.step_list { display: flex; flex-wrap: nowrap; counter-reset: step 0; box-sizing: border-box; padding-inline: 5px; }
.step_list > li { position: relative; width: 100%; text-align: center; counter-increment: step 1; box-sizing: border-box; padding-block: 30px 27px; padding-inline: clamp(12px, 1.3vw, 20px); }
.step_list > li::before { content: ''; position: absolute; inset: 0; border: 2px dashed var(--border-color01); }
.step_list > li::after { content: ''; position: absolute; left: 2px; background: var(--point-white); width: 100%; height: 50%; }
.step_list > li:nth-child(odd)::after { bottom: 0; }
.step_list > li:nth-child(even)::after { top: 0; }
.step_list > li:first-child::after { left: 0; }
.step_list > li:not(:last-child)::before { border-right: 0; }
.step_list > li > span::before { content: ''; position: absolute; left: 1px; top: 127px; translate: -50% -50%; width: 12px; aspect-ratio: auto 1; background: var(--point-white); border: 3px solid var(--point-color03); z-index: 5; }
.step_list > li:last-child > span::after{ content: ''; position: absolute; left: calc(100% - 1px); top: 50%; translate: -50% -50%; width: 12px; aspect-ratio: auto 1; background: var(--point-white); border: 3px solid var(--point-color03); z-index: 5; }
.step_list > li dl { font-size: var(--title-20); display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 5; }
.step_list > li dt { display: flex; flex-direction: column; gap: 29px; }
.step_list > li dt span { display: block; width: 60px; margin-inline: auto; }
.step_list > li dt::after { content: 'Step 'counter(step, decimal-leading-zero); display: inline-flex; justify-content: center; align-items: center; width: fit-content; margin-inline: auto; color: var(--point-color01); font-weight: 600; font-size: var(--title-18); letter-spacing: -0.03em; padding-inline: 19px; padding-block: 7px; box-shadow: 0 0 0 1px inset var(--point-color01); }
.step_list > li dd { color: var(--black-color01); font-weight: 400; font-size: 100%; line-height: 1.4; letter-spacing: -0.03em; }
.step_list > li dd small { font-size: 90%; color: var(--black-color06); }

.scr_wrap { position: relative; width: 100%; }
.scr_txt { display: none; }

.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.g30 { gap: 30px; }
.g25 { gap: 25px; }
.g24 { gap: 24px; }
.g20 { gap: 20px; }
.g40 { gap: 40px; }
.g42 { gap: 42px; }


@media (max-width: 1150px) {
    .step_list > li dt::after { padding-inline: 24px; }
    .step_list > li > span::before { top: 140px; }
    .step_list > li::after { height: 52%; }
}

@media (max-width: 1130px) {
    .bullet_list.type02 { grid-template: auto / repeat(3, 1fr); gap: 13px; }
    .step_list > li dt { gap: 25px; }
    .step_list > li dl { gap: 20px; }
}

@media (max-width: 1023px) {
    .sub_title p { font-size: clamp(100%, 2.2vw, 120%); }

    .mb40 { margin-bottom: clamp(20px, 4vw, 40px); }
    .mb30 { margin-bottom: clamp(15px, 3vw, 30px); }

    .g30 { gap: clamp(15px, 3vw, 30px); }
    .g25 { gap: clamp(15px, 2.5vw, 25px); }
    .g24 { gap: clamp(15px, 2.4vw, 24px); }
    .g20 { gap: clamp(15px, 2vw, 20px); }
    .g40 { gap: clamp(20px, 4vw, 40px); }
    .g42 { gap: clamp(20px, 4.2vw, 42px); }

    .chk_list li { padding: clamp(20px, 3vw, 31px); gap: clamp(10px, 1.3vw, 13px); }
    .chk_list li .chk { width: clamp(14px, 1.7vw, 17px); }

    .square_num dt { padding: clamp(20px, 2vw, 24px); font-size: clamp(110%, 2.6vw, 130%); }
    .square_num dt::before { left: clamp(20px, 2.4vw, 24px); width: clamp(26px, 3.6vw, 36px); height: clamp(26px, 3.6vw, 36px); }
    .square_num dd { padding-inline: clamp(20px, 2.4vw, 24px); padding-top: clamp(20px, 2.4vw, 24px); }

    .bullet_list { gap: clamp(8px, 1.3vw, 13px); }
    .bullet_list > li { gap: clamp(7px, 1vw, 10px); }

    .num_list > li { padding-inline: clamp(20px, 3vw, 30px); padding-block: clamp(20px, 3vw, 29px); }
    .num_list dl { gap: clamp(15px, 2vw, 21px); }
    .num_list dt { gap: clamp(10px, 1.6vw, 16px); }
    .num_list dd { width: clamp(50px, 7vw, 70px); }

    .bullet_list.type02 { gap: clamp(8px, 1.3vw, 13px); }

    .bd_box { padding: clamp(20px, 3vw, 30px); }

    .img_list { grid-template: auto / repeat(2, 1fr); }

    .patent_list { grid-template: auto / repeat(3, 1fr); }
    .patent_list li { padding: clamp(20px, 5vw, 40px); }

    .step_list > li { padding-block: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 27px); }
    .step_list > li > span::before { top: 50%; }
    .step_list > li dt { gap: clamp(15px, 3vw, 29px); }
    .step_list > li dl { gap: clamp(15px, 2.5vw, 24px); }
    .step_list > li dt span { width: clamp(50px, 6vw, 60px); }
    .step_list > li dt::after { padding-inline: clamp(10px, 2vw, 19px); padding-block: clamp(5px, 0.7vw, 7px); }
    .step_list > li::after { height:50%; }

    .scr_wrap { overflow: hidden; overflow-x: auto; display: flex; width: calc(100% + 60px); margin-left: -30px; padding-inline: 30px; }
    .scr_txt { display: block; }
    .scr_wrap .step_list { width: 1280px; flex-shrink: 0; }
}

@media (max-width: 860px) {
    .square_num dt { gap: 10px; justify-content: flex-start; gap: clamp(20px, 3vw, 30px); }
    .square_num dt::before { position: static; translate: 0; margin: unset; }

    .num_list { grid-template: auto / repeat(2, 1fr); }

    .chk_list { grid-template: auto / repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .square_num dt { flex-direction: column; gap: 10px; justify-content: flex-start; align-items: flex-start; }

    .num_list { grid-template: auto / repeat(1, 1fr); }
    .num_list > li:nth-child(6) dl { gap: clamp(15px, 2vw, 21px); }
    .num_list > li:nth-child(6) dd { margin-top: 0; }

    .bullet_list.type02 { grid-template: auto / repeat(2, 1fr); }

    .patent_list { grid-template: auto / repeat(2, 1fr); }

    .square_num { grid-template: auto / repeat(1, 1fr); }
}

@media (max-width: 479px) {
    .img_list { grid-template: auto / repeat(1, 1fr); gap: 20px; }
    .chk_list { grid-template: auto / repeat(1, 1fr); }
}

@media (max-width: 375px) {
    .bullet_list.type02 { grid-template: auto / repeat(1, 1fr); }

    .patent_list { grid-template: auto / repeat(1, 1fr); }
}

.rd_about{display: flex;flex-wrap:wrap;align-items: center;gap:100px; font-size: var(--title-20); }
.rd_about .img_box{width:34.7%; aspect-ratio:auto 0.813;}
.rd_about .img_box img{width:100%;height:100%;object-fit:cover;}
.rd_about .text_box{width:calc(65.3% - 100px);}
.rd_about .text_box .title h4{font-size:210%;color:var(--black-color01);font-weight:600;line-height:1.4; letter-spacing: -0.03em;}
.rd_about .text_box .title h4 strong{font-size:inherit;color:var(--point-color01);font-weight:inherit;}
.rd_about .text_box .title p{margin-top:30px;font-size:120%;color:var(--black-color03);font-weight:500;line-height:1.5;}
.rd_about .cont{position: relative;box-sizing:border-box;border-top:2px solid var(--border-color02);margin-top:60px;padding-top:60px;display: flex;flex-direction: column;gap:15px;}
.rd_about .cont:before{width:80px;height:2px;content:"";background:var(--point-color01);position: absolute;top:-2px;left:0;}
.rd_about .cont p{font-size:100%;color:var(--black-color03);font-weight:400;line-height:1.6;font-family:var(--font-type02); letter-spacing: -0.03em; }
.rd_about .cont p small{font-size:90%;color:var(--black-color06);font-weight:inherit; line-height: 1.4; }
.rd_about .cont p:has(small) { line-height: 1.4; }

.sub_qual .system_box .chk_list { grid-template: auto / repeat(5, 1fr); }
.sub_qual .square_num { grid-template: auto / repeat(3, 1fr); }



@media (max-width:1023px) {
    .rd_about{gap:clamp(30px, 5.5vw, 60px);align-items: flex-start;}
    .rd_about .text_box{width:calc(65.3% - clamp(30px, 9.5vw, 100px));}
    .rd_about .text_box .title h4{font-size:clamp(160%, 4vw, 210%);}

    .sub_qual .system_box .chk_list { grid-template: auto / repeat(3, 1fr); }
    
}

@media (max-width: 860px) {
    .sub_qual .square_num { grid-template: auto / repeat(2, 1fr); }
}

@media (max-width:640px) {
    .rd_about{flex-direction: column;}
    .rd_about .img_box{width:100%;}
    .rd_about .text_box{width:100%;}
    .rd_about .text_box .title p{margin-top:15px;font-size:100%;}
    .rd_about .cont{margin-top:30px;padding-top:30px;gap:12px;}

    .sub_qual .system_box .chk_list { grid-template: auto / repeat(2, 1fr); }
    .sub_qual .square_num { grid-template: auto / repeat(1, 1fr); }
}

@media (max-width:479px) {
    .sub_qual .system_box .chk_list { grid-template: auto / repeat(1, 1fr); }
}



.sub_tech .core_box .square_num { row-gap: 60px; }
.sub_tech table { position: relative; width: 100%; font-size: var(--title-20); overflow: hidden; }
.sub_tech table :where(th, td) { padding-inline: 30px; text-align: center; font-family: var(--font-type02); }
.sub_tech table th { box-shadow: 0 1px 0 inset var(--border-color01); }
.sub_tech thead th { font-size: inherit; font-weight: 300; line-height: 1.4; letter-spacing: -0.03em; background: var(--point-color01); color: var(--point-white); box-shadow: 1px 1px 0 inset rgba(255, 255, 255, 0.4); padding-block: 19px; }
.sub_tech tbody :where(th, td) { color: var(--black-color03); line-height: 1.4; letter-spacing: -0.03em; box-shadow: 1px 1px 0 inset var(--border-color01); padding-block: 22px; }
.sub_tech tbody tr:last-child td { border-bottom: 1px solid var(--border-color01); }
.sub_tech tbody th { font-size: inherit; font-weight: 500; background: var(--point-color07);  }
.sub_tech tbody td { font-size: 90%; font-weight: 400;  }
.sub_tech tbody td.lt { text-align: left; color: var(--black-color06); }
.sub_tech tbody .tb_th { border-bottom: 1px solid var(--border-color01); }

@media (max-width: 1023px) {
    .sub_tech .core_box .square_num { row-gap: clamp(20px, 6vw, 60px); }
    .scr_wrap table { width: 1100px; flex-shrink: 0; }
    .sub_tech table :where(th, td) { padding-inline: clamp(20px, 3vw, 30px); }
    .sub_tech thead th { padding-block: clamp(15px, 2vw, 19px); }
    .sub_tech tbody :where(th, td) { padding-block: clamp(15px, 2vw, 22px); }
}

@media (max-width: 640px) {
    .scr_wrap table { width: 860px; }
}

@media (max-width: 479px) {
    .scr_wrap table { width: 800px; }
}



/*───────────────────────────────────────────────────────────
	
	제품 적용분야

───────────────────────────────────────────────────────────*/

.sub_field .fie_list { display: flex; flex-direction: column; gap: 140px; counter-reset: num 0; }
.sub_field .fie_list > li { display: flex; align-items: center; gap: clamp(40px, 4.4vw, 80px); }
.sub_field .fie_list > li:nth-child(even) { flex-direction: row-reverse; }
.sub_field .fie_list > li > .img_wrap { display: flex; width: 50%; height: 640px; }
.sub_field .fie_list > li > .img_wrap img { object-fit: cover; }
.sub_field .fie_list > li > .desc_wrap { width: calc(50% - clamp(40px, 4.4vw, 80px)); }
.sub_field .desc_wrap { display: flex; flex-direction: column; gap: 60px; font-size: var(--title-20); }
.sub_field .desc { display: flex; flex-direction: column; gap: 32px; }
.sub_field .desc dt { position: relative; display: flex; flex-direction: column; gap: 22px; font-size: 210%; font-weight: 600; letter-spacing: -0.03em; line-height: 1.4; color: var(--black-color01); padding-right: 150px; }
.sub_field .desc dt small { font-size: var(--title-20); color: var(--point-color01); font-weight: 500; font-family: var(--font-type01); letter-spacing: -0.02em; }
.sub_field .desc dd { font-size: 95%; font-weight: 400; line-height: 1.55; letter-spacing: -0.03em; color: var(--black-color06); }
.sub_field .connect_list { font-size: var(--title-20); display: flex; flex-direction: column; gap: 14px; }
.sub_field .connect_list dt { color: var(--black-color03); font-size: 100%; font-weight: 500; line-height: 1.6; letter-spacing: -0.03em; }
.sub_field .connect_list ul { display: grid; grid-template: auto / repeat(3, 1fr); gap: 14px; }
.sub_field .connect_list li { font-size: var(--title-20); text-align: center; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.sub_field .connect_list li .img_wrap { position: relative; display: flex; align-items: center; aspect-ratio: auto 1.33; overflow: hidden; }
.sub_field .connect_list li .img_wrap img { width: 100%; height: 100%; object-fit: cover; }
.sub_field .connect_list li .img_wrap::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--border-color01); width: 100%; height: 100%; z-index: 2; }
.sub_field .connect_list li span { color: var(--black-color03); font-weight: 400; font-size: 80%; letter-spacing: -0.03em; line-height: 1.4; font-family: var(--font-type01); }


.sub_field .desc dt::before { position: absolute; top: -4%; right: 0; content: counter(num, decimal-leading-zero); counter-increment: num 1; font-size: 248%; font-weight: 700; letter-spacing: -0.03em; text-align: right; -webkit-text-stroke: 1px; -webkit-text-stroke-color: var(--border-color03); color: var(--trans-color); font-family: var(--font-type01); line-height: 1; z-index: 1; }

@media (max-width: 1023px) {
    .sub_field .fie_list { gap: clamp(70px, 14vw, 140px); }
    .sub_field .fie_list > li { flex-direction: column; align-items: flex-start; gap: clamp(30px, 6vw, 60px); }
    .sub_field .fie_list > li:nth-child(even) { flex-direction: column; }
    .sub_field .fie_list > li > .img_wrap { width: 100%; max-width: 750px; height: auto; }
    .sub_field .fie_list > li > .desc_wrap { width: 100%; }
    .sub_field .desc_wrap { gap: clamp(40px, 6vw, 60px); }
    .sub_field .desc { gap: clamp(15px, 3.2vw, 32px); }
    .sub_field .desc dt { gap: clamp(10px, 2.2vw, 22px); width: 100%; padding-right: clamp(100px, 22vw, 150px); }
    .sub_field .connect_list { gap: clamp(10px, 1.5vw, 14px); }
    .sub_field .connect_list ul { gap: clamp(10px, 1.5vw, 14px); }
    .sub_field .connect_list li { gap: clamp(10px, 1.5vw, 14px); }
    .sub_field .desc dt::before { font-size: clamp(180%, 16vw, 248%); }
}

@media (max-width: 479px) {
    .sub_field .connect_list ul { grid-template: auto / repeat(2, 1fr); }
}

/*───────────────────────────────────────────────────────────
	
	제품정보

───────────────────────────────────────────────────────────*/

.goods_nav { background: var(--gray-bg01) }
.goods_nav ul { display: flex; overflow: auto; }
.goods_nav ul li { width: 100%; text-align: center; font-size: var(--title-20); transition: all 0.4s; white-space: nowrap; }
.goods_nav ul li a { display: flex; justify-content: center; align-items: center; padding-inline: 20px; padding-block: 20px 19px; font-size: 110%; font-family: var(--font-type01); font-weight: 500; color: var(--black-color08); text-transform: uppercase; letter-spacing: -0.02em; transition: inherit; }

.goods_nav ul li.on { background: var(--point-color01); }
.goods_nav ul li.on a { filter: var(--filter-white); font-weight: 600; }

.sub_pro .pro_cont { display: flex; align-items: center; gap: clamp(40px, 4.4vw, 80px); margin-bottom: 140px; }
.sub_pro .pro_cont .img_wrap { width: 50%; }
.sub_pro .pro_cont .desc { width: calc(50% - clamp(40px, 4.4vw, 80px)); font-size: var(--title-20); display: flex; flex-direction: column; gap: 18px; }
.sub_pro .pro_cont .desc dt { font-size: 100%; font-weight: 400; line-height: 1.6; letter-spacing: -0.03em; color: var(--black-color01); }
.sub_pro .pro_cont .desc dd { font-size: 90%; font-weight: 400; line-height: 1.6; letter-spacing: -0.03em; color: var(--black-color04); }

.sub_pro .hd_title h2 { text-transform: uppercase; }
.sub_pro .cate_wrap { margin-bottom: 70px; }
.sub_pro .cate_wrap .cate { display: flex; justify-content: center; flex-wrap: wrap; row-gap: 25px; }
.sub_pro .cate_wrap .cate > li { position: relative; font-size: var(--title-20); padding-inline: 27px; }
.sub_pro .cate_wrap .cate > li:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 1px; height: 14px; background: var(--border-color01); }
.sub_pro .cate_wrap .cate > li > a { font-weight: 500; font-family: var(--font-type01); letter-spacing: -0.03em; color: var(--black-color08); transition: all 0.4s; }
.sub_pro .cate_wrap .cate > li.on > a { color: var(--point-color01); font-weight: 600; }

.sub_pro .sub_list .list_gallery > ul { display: grid; grid-template: auto / repeat(3, 1fr); gap: 44px; }
.sub_pro .sub_list .list_gallery li { position: relative; display: flex; flex-direction: column; height: 100%; justify-content: space-between; box-shadow: 0 0 0 1px var(--border-color01); padding-bottom: 42px; gap: 20px; }
.sub_pro .sub_list .list_gallery .link { position: absolute; inset: 0; width: 100%; height: 100%; }
.sub_pro .sub_list .list_gallery .desc_wrap { padding-inline: 30px; margin-top: 20px; }
.sub_pro .sub_list .list_gallery dl { font-size: var(--title-20); text-align: center; display: flex; flex-direction: column; gap: 17px; font-family: var(--font-type01); }
.sub_pro .sub_list .list_gallery dt { font-weight: 600; font-size: 140%; color: var(--black-color01); letter-spacing: 0; }
.sub_pro .sub_list .list_gallery dd { font-weight: 400; font-size: 90%; color: var(--black-color03); letter-spacing: -0.03em; text-transform: uppercase; }
.sub_pro .sub_list .list_gallery .main_more { margin-top: 38px; justify-content: center; }

.sub_pro .sub_list .list_gallery li .img_wrap { width: 100%; aspect-ratio: auto 1.24; overflow: hidden; }
.sub_pro .sub_list .list_gallery li .img_wrap img { width: 100%; height: auto; object-fit: cover; object-position: center top; }

.hd_title.mb40 { margin-bottom: 40px; }

#wrap .sub_list .list_array { margin-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
    .goods_nav ul li:hover { background: var(--point-color01); }
    .goods_nav ul li:hover a { filter: var(--filter-white); }

    .sub_pro .cate_wrap .cate > li > a:hover { color: var(--point-color01); }
    
}

@media (max-width: 1023px) {
    .goods_nav ul li a { padding-block: clamp(15px, 2vw, 20px) clamp(15px, 2vw, 19px); }
    .sub_pro .pro_cont { flex-direction: column; align-items: flex-start; gap: clamp(30px, 6vw, 60px); margin-bottom: clamp(70px, 14vw, 140px); }
    .sub_pro .pro_cont .img_wrap { width: 100%; max-width: 750px; }
    .sub_pro .pro_cont .desc { width: 100%; gap: clamp(12px, 1.8vw, 18px); }
    .sub_pro .cate_wrap { margin-bottom: clamp(35px, 7vw, 70px); }
    .sub_pro .cate_wrap .cate { row-gap: clamp(20px, 2.5vw, 25px); }
    .sub_pro .cate_wrap .cate > li { padding-inline: clamp(20px, 2.7vw, 27px); }
    .sub_pro .cate_wrap .cate > li:not(:last-child)::after { height: clamp(12px, 1.4vw, 14px); }

    .sub_pro .sub_list .list_gallery > ul { gap: clamp(20px, 4.4vw, 44px); grid-template: auto / repeat(2, 1fr); }
    .sub_pro .sub_list .list_gallery li { gap: clamp(15px, 2vw, 20px); padding-bottom: clamp(21px, 4.2vw, 42px); }
    .sub_pro .sub_list .list_gallery dl { gap: clamp(12px, 1.7vw, 17px); }
    .sub_pro .sub_list .list_gallery .main_more { margin-top: clamp(20px, 4vw, 38px); }
    .sub_pro .sub_list .list_gallery .desc_wrap { margin-top: clamp(15px, 2vw, 20px); }

    .hd_title.mb40 { margin-bottom: clamp(20px, 4vw, 40px); }
}

@media (max-width: 640px) {
    .goods_nav .w_custom { width: 100%; max-width: 100%; }
    .goods_nav ul li a { font-size: 100%; }
}


@media (max-width: 479px) {
    .sub_pro .sub_list .list_gallery > ul { grid-template: auto / repeat(1, 1fr); }
}


/*───────────────────────────────────────────────────────────
	
	제품검색

───────────────────────────────────────────────────────────*/

#wrap .goods_search_wrap .search_wrap { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 30px; }
#wrap .goods_search_wrap .goods_search { display: flex; align-items: center; justify-content: flex-end; gap: 15px; width: 100%; }
#wrap .goods_search_wrap .goods_search > span { display: block; width: max-content; flex-shrink: 0; }
#wrap .search_wrap .bbs_num:not(:has(*)) { display: none; }
#wrap .search_wrap .bbs_num { font-family: var(--font-type02); font-size: var(--title-18); font-weight: 500; line-height: 1.4; letter-spacing: -0.03em; color: var(--black-color06); padding: 0; }
#wrap .search_wrap .bbs_num strong { color: var(--point-color01); font-weight: inherit; }

@media (max-width: 479px) {
    #wrap .goods_search_wrap .goods_search { flex-direction: column; align-items: flex-start; }
}

/*───────────────────────────────────────────────────────────

    제품영역

───────────────────────────────────────────────────────────*/

#container.w_custom:has(.sub_view.full_sec) { width: 100%; max-width: 100%; padding-top: 0; }
.sub_view .goods_main_cont .rel_box { display: flex; align-items: center; position: relative; background: var(--border-color03); }
.sub_view .goods_main_cont .thumb { max-width: 1920px; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sub_view .goods_main_cont .thumb img { max-width: unset; max-height: unset; }
.sub_view .goods_main_cont .txt_box { position: relative; z-index: 2; padding-block: 125px; width: calc(50% - 40px); margin-left: auto; }
.sub_view .goods_main_cont .txt_box dl { font-size: var(--title-20); }
.sub_view .goods_main_cont .txt_box dt { font-size: 300%; font-weight: 600; letter-spacing: -0.03em; color: var(--black-color01); display: flex; flex-direction: column; gap: 21px; }
.sub_view .goods_main_cont .txt_box dt h3 { font-weight: inherit; }
.sub_view .goods_main_cont .txt_box dt small { font-size: 36.67%; font-weight: 500;  color: var(--point-color01); letter-spacing: -0.01em; }
.sub_view .goods_main_cont .txt_box dd { font-family: var(--font-type02); font-size: 90%; font-weight: 400; letter-spacing: -0.03em; color: #666; line-height: 1.61; margin-top: clamp(20px, 2.2vw, 40px);  }
.sub_view .goods_main_cont .txt_box dd p span { font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; }
.sub_view .goods_main_cont .txt_box dd.acc { font-size: 100%; color: var(--black-color03); }
.sub_view .goods_main_cont .txt_box dd + dd { margin-top: clamp(15px, 2vw, 30px); }
.sub_view .goods_main_cont .txt_box dd p + p { margin-top: clamp(15px, 2vw, 30px); }

.sub_view .goods_main_cont .txt_box .goods_btn_wrap { display: flex; gap: 15px; margin-top: 80px; }
.sub_view .goods_main_cont .txt_box .goods_btn_wrap a { display: flex; align-items: baseline; justify-content: space-between; width: 240px; padding-block: 19px; padding-inline: 30px; font-size: var(--title-20); }
.sub_view .goods_main_cont .txt_box .goods_btn_wrap span { font-size: 100%; font-weight: 700; filter: var(--filter-white); letter-spacing: -0.03em; }
.sub_view .goods_main_cont .txt_box .goods_btn_wrap li a { background: var(--point-color03); }
.sub_view .goods_main_cont .txt_box .goods_btn_wrap li.cata a { background: var(--point-color01); }
.sub_view .goods_main_cont .txt_box .goods_btn_wrap li.inq a em { translate: 0 3px; }
.sub_view .goods_main_cont .txt_box .goods_btn_wrap a em { display: flex; align-items: center; }

.sub_view .bullet_list { gap: 5px; }
.sub_view .bullet_list > li span { font-size: 90%; color: var(--black-color05); }


.goods_title { font-size: var(--title-20); padding-block: 140px 42px; }
.goods_title h4 { font-size: 210%; font-weight: 600; color: var(--black-color01); letter-spacing: -0.03em; }

.goods_cont { padding-top: 140px; }

@media (max-width: 1320px) {
    .sub_view .goods_main_cont .txt_box { width: calc(60% - 40px); }
    .sub_view .goods_main_cont .txt_box dt { font-size: 270%; }
    .sub_view .goods_main_cont .txt_box .goods_btn_wrap { margin-top: clamp(40px, 4.4vw, 80px); }
    
    
}

@media (max-width: 1023px) {
    .goods_title { padding-block: clamp(70px, 14vw, 140px) clamp(25px, 5vw, 42px); }
    .goods_title h4 { font-size: 190%; }
    .sub_view .sub_title h5 { font-size: 150%; }
    .sub_view .sub_title h5.square { gap: clamp(12px, 1.6vw, 14px); }
    .sub_view .sub_title h5.square::before { width: clamp(6px, 1vw, 8px); translate: 0 clamp(-7px, -0.9vw, -5px); }

    .sub_view .goods_main_cont .rel_box { flex-direction: column; align-items: flex-start; }
    .sub_view .goods_main_cont .thumb { position: static; min-height: 280px; display: flex; transform: translate(0); }
    .sub_view .goods_main_cont .thumb img { width: 100%; height: auto; object-fit: cover; object-position: 20%; }
    .sub_view .goods_main_cont .txt_box { width: 100%; padding-block: clamp(30px, 6vw, 60px); }
    .sub_view .goods_main_cont .txt_box dt { font-size: 280%; gap: clamp(10px, 2vw, 21px); }
    .sub_view .goods_main_cont .txt_box dd { margin-top: clamp(20px, 4vw, 40px); }
    .sub_view .goods_main_cont .txt_box dd + dd { margin-top: clamp(15px, 3vw, 30px); }
    .sub_view .goods_main_cont .txt_box dd p + p { margin-top: clamp(15px, 3vw, 30px); }
    .sub_view .goods_main_cont .txt_box .goods_btn_wrap { gap: clamp(10px, 1.5vw, 15px); margin-top: clamp(30px, 8vw, 80px); }
    .sub_view .goods_main_cont .txt_box .goods_btn_wrap a { padding-inline: clamp(20px, 3vw, 30px); padding-block: clamp(15px, 2vw, 19px); width: clamp(200px, 24vw, 240px); }
    .sub_view .goods_main_cont .txt_box .goods_btn_wrap a em { width: clamp(16px, 2vw, 18px); }
    .sub_view .goods_main_cont .txt_box .goods_btn_wrap li:nth-child(2) a em { translate: 0 clamp(1px, 0.3vw, 3px); }
    
    .goods_cont { padding-top: clamp(70px, 14vw, 140px); }
}

@media (max-width: 860px) {
    
    
}

@media (max-width: 640px) {
    .goods_title h4 { font-size: 170%; }
    .sub_view .sub_title h5 { font-size: 140%; }
    .sub_view .goods_main_cont .txt_box dt { font-size: 260%; }
}

@media (max-width: 479px) {
    .goods_title h4 { font-size: 160%; }
    .sub_view .sub_title h5 { font-size: 130%; }
    .sub_view .goods_main_cont .txt_box dt { font-size: 240%; }
    .sub_view .goods_main_cont .txt_box dt small { font-size: var(--title-20); }
    .sub_view .goods_main_cont .txt_box .goods_btn_wrap a { width: 100%; }
   
}

@media (max-width: 479px) {
    .sub_view .goods_main_cont .txt_box .goods_btn_wrap { flex-direction: column; }
}