@charset "UTF-8";
/*───────────────────────────────────────────────────────────

SCSS / SUB_B.SCSS

───────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────
                        공통요소
───────────────────────────────────────────────────────────*/
.nav_wrap .nav_box h3 { font-size: var(--title-50); line-height: 120%; padding: 0; margin: 0; text-align: center; color: var(--black-color00); font-weight: 600; z-index: 1; letter-spacing: -1px; font-family: var(--font-type02); }
.nav_wrap .nav_box h3:has(.nav_tt) span:first-child { display: none; }
#wrap.sub_product .sub_visual .sub_menu dl dd { justify-content: space-between; }
#wrap:has(.sub_visual) #contents_wrap, .w_custom_sub { max-width: 1400px; width: calc(100% - 60px); margin: 0 auto; position: relative; }
#wrap:has(.border_visual) #contents_wrap { width: 100%; max-width: unset; }
#wrap:has(.border_visual) .sub_board { max-width: 1400px; width: calc(100% - 60px); margin: 0 auto; position: relative; }
/* 테이블 팝업 영역 */
.table_popup_wrap { display: none; align-items: center; justify-content: center; transition: all 500ms ease; }
.table_popup_wrap .table_popup { display: none; opacity: 0; transition: all 500ms; transition-delay: 1500ms; }
.table_popup_wrap:has(.table_popup.on) { display: flex; align-items: center; justify-content: center; position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; isolation: isolate; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on { width: calc(100% - 60px); max-width: 900px; margin: 0 auto; background: #fff; opacity: 1; display: block; box-shadow: 0 0 0 1px var(--black-color00) inset; transition: all 500ms; transition-delay: 1500ms; overflow: hidden; padding-right: 1px; padding-bottom: 1px; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; background: var(--black-color02); padding: 25px 30px; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl { display: flex; align-items: center; color: #fff; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dt { font-weight: 700; font-family: var(--font-type02); letter-spacing: -0.52px; font-size: var(--title-26); line-height: 0.8; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dd { font-size: var(--title-20); font-weight: 400; line-height: 1; letter-spacing: -0.4px; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dd:empty { display: none; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dd::before { content: ""; display: inline-block; width: 1px; height: 14px; flex-shrink: 0; margin: 0 20px; position: relative; background: #D9D9D9; opacity: 0.6; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top .tp_close_btn { width: 20px; height: 20px; position: relative; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top .tp_close_btn::before, .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top .tp_close_btn::after { content: ""; width: 2px; border-radius: 100px; height: 100%; background: #fff; transition: all 500ms ease; left: 50%; top: 0; transform-origin: center; position: absolute; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top .tp_close_btn::after { rotate: 45deg; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top .tp_close_btn::before { rotate: -45deg; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont { box-sizing: border-box; padding: 30px; height: 60%; max-height: 720px; overflow-y: scroll; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont > div:last-child p { font-family: var(--font-type02); font-weight: 700; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont > div:last-child img { box-shadow: 0 0 0 1px var(--border-color01); }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont > div:not(:last-child) { margin-bottom: 39px; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont p { display: flex; gap: 12px; align-items: center; font-size: var(--title-24); font-weight: 600; line-height: 0.91; letter-spacing: -0.48px; margin-bottom: 20px; }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont p::before { content: ""; display: block; width: 14px; height: 3px; flex-shrink: 0; background: var(--point-color01); }
.table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont img { width: 100%; display: block; }
.table_popup_wrap:has(.table_popup.on) .dark_bg { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; cursor: pointer; background: #000; opacity: 0.25; }
@media screen and (max-width:580px) {
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont > div:not(:last-child) { margin-bottom: 30px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top .tp_close_btn { width: 12px; height: 15px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont { padding: 15px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont p { font-size: 15px; gap: 6px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_cont p::before { width: 11px; height: 2px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top { padding: 15px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dt { font-size: 17px; padding-top: 2px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dd { font-size: 14px; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dd::before { height: 12px; top: 1px; margin: 0 8px; }
}
@media screen and (max-width:479px) {
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl { flex-direction: column; align-items: baseline; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dd { padding-top: 4px; line-height: 1.2; }
  .table_popup_wrap:has(.table_popup.on) .table_popup.on .tp_top dl dd::before { content: none; }
}
/* 버튼영역 */
.btnWrap { display: flex; align-items: center; gap: 30px; justify-content: center; }
a.linkBtn { color: #fff; background: var(--point-color01); text-align: center; font-size: var(--title-26); font-weight: 700; line-height: 1.153; letter-spacing: -0.78px; box-sizing: border-box; padding: 25px 33.52px; height: 80px; }
/* 공통 박스 디자인 */
.box_tit_area { background: #EEF4F9; padding: max(40px, 2.65vw) max(30px, 3.14vw); box-sizing: border-box; margin-bottom: var(--size-60); }
.box_tit_area:has(+ .scon_area) { margin-bottom: calc(var(--size-80) - 5px); }
.box_tit_area:has(.scon_tb) { margin-bottom: var(--size-80); }
.box_tit_area h3 { display: flex; gap: max(9px, 0.95vw); font-size: max(26px, 2.083335vw); color: var(--point-color01); font-family: var(--font-type02); font-weight: 700; line-height: 1.5; letter-spacing: -0.8px; margin-left: 4px; word-break: keep-all; text-wrap: balance; }
.box_tit_area h3::before { content: ""; width: max(6px, 0.533vw); height: max(10px, 0.852vw); rotate: 60deg; flex-shrink: 0; display: block; background: var(--point-color01); border-radius: 100%; margin-top: calc(max(26px, 2.083335vw) - max(26px, 2.083335vw) / 2.8); }
.box_tit_area p { color: var(--black-color04); font-size: var(--title-20); margin-top: calc(var(--title-20) - 2px); line-height: 180%; font-weight: 400; }
.box_tit_area p strong { color: var(--point-color01); font-weight: 600; }
.box_tit_area p b { color: var(--black-color02); font-weight: 600; font-size: var(--title-24); display: block; margin-bottom: 8px; }
.scon_area:has(+ .scon_area) { margin-bottom: calc(var(--size-100) - 5px); }
.scon_area:has(+ .scon_bk) { margin-bottom: calc(var(--size-100) - 21px); }
.scon_area:has(.features_thumb) { display: flex; gap: var(--size-60); }
.scon_area:has(.features_thumb) .features_thumb { margin-top: 5px; }
.scon_area:has(.features_thumb) .features_thumb + div { width: 100%; }
.scon_area h4 { font-size: var(--title-30); font-weight: 500; line-height: 1; letter-spacing: -0.6px; color: var(--black-color02); display: flex; gap: 20px; margin-bottom: calc(var(--title-30) + 5px); }
.scon_area h4::before { content: ""; width: 10px; height: 10px; background: var(--point-color01); margin-top: calc(var(--title-30) / 3); }
.scon_area h4.eng_tit { font-size: var(--title-30); font-weight: 700; line-height: 1; letter-spacing: -0.6px; color: var(--black-color02); font-family: var(--font-type02); display: flex; gap: 20px; margin-bottom: calc(var(--title-30) - 5px); line-height: 0.8; }
.scon_area h4.eng_tit:has(+ .product_info) { margin-bottom: calc(var(--title-30) - 3px); }
.scon_area h4.eng_tit::before { content: ""; width: 10px; height: 10px; background: var(--point-color01); margin-top: 6px; }
.scon_area.scon_tb h4 { font-size: var(--title-40); font-weight: 700; line-height: 1; letter-spacing: -0.8px; color: var(--black-color02); font-family: var(--font-type02); line-height: 0.7; display: flex; gap: 20px; margin-bottom: calc(var(--title-50) - 6px); }
.scon_area.scon_tb h4::before { content: none; }
.scon_area .features_thumb { width: 100%; max-width: 600px; }
.scon_area .features_list { counter-reset: features_num 0; }
.scon_area .features_list + .box_tit_area { margin-top: var(--size-80); }
.scon_area .features_list > li { display: flex; font-size: var(--title-24); box-sizing: border-box; font-weight: 400; line-height: 1.5; color: var(--black-color04); padding: 27px 35px; box-shadow: 0 0 0 1px var(--border-color01) inset; }
.scon_area .features_list > li:has(.for_pc) { padding-bottom: 22px; }
.scon_area .features_list > li:not(:last-child) { margin-bottom: 20px; }
.scon_area .features_list > li::before { counter-increment: features_num 1; content: "0" counter(features_num); font-family: var(--font-type02); font-weight: 700; color: var(--point-color01); font-size: var(--title-22); display: block; margin-right: 28px; padding-top: 2px; }
.scon_area .features_list > li > div { width: 100%; }
.scon_area .features_list > li > div ul { margin-top: 8px; }
.scon_area .features_list > li > div ul li { font-size: var(--title-20); line-height: 1.7; color: var(--black-color06); display: flex; }
.scon_area .features_list > li > div ul li::before { content: "-"; display: block; margin-right: 5px; }
.scon_area .table_area { text-align: center; }
.scon_area .table_area .tr_mark { background: #EEF4F9; }
.scon_area .table_area .tr_mark th { font-weight: 500; }
.scon_area .table_area .tr_mark th, .scon_area .table_area .tr_mark td { color: var(--point-color01); }
.scon_area .table_area.noCol thead th, .scon_area .table_area.noCol thead td, .scon_area .table_area.noCol tbody th, .scon_area .table_area.noCol tbody td { height: 70px; padding: 16px 5px; }
.scon_area .table_area.noCol thead th > span, .scon_area .table_area.noCol thead td > span, .scon_area .table_area.noCol tbody th > span, .scon_area .table_area.noCol tbody td > span { display: block; max-width: 60%; text-align: right; }
.scon_area .table_area:not(.noCol) tr:nth-child(even) { background: #f5f5f5; }
.scon_area .table_area:not(:last-child) { margin-bottom: var(--size-100); }
.scon_area .table_area h5 { font-size: var(--title-30); font-weight: 600; line-height: 1; letter-spacing: -0.6px; color: var(--black-color02); font-family: var(--font-type02); display: flex; gap: 20px; margin-bottom: calc(var(--title-30) - 3px); line-height: 0.8; }
.scon_area .table_area h5::before { content: ""; width: 10px; height: 10px; background: var(--point-color01); margin-top: 6px; }
.scon_area .table_area h5 em { color: var(--black-color07); margin-left: auto; font-size: var(--title-18); font-weight: 400; letter-spacing: -0.36px; align-self: center; }
.scon_area .table_area table { transition: all 500ms; }
.scon_area .table_area table .tb_left { text-align: left; padding-left: 30px; }
.scon_area .table_area table thead { background: #7E8D9F; color: #fff; }
.scon_area .table_area table thead th, .scon_area .table_area table thead td { color: #fff; font-size: max(20px, 1.458335vw); line-height: 1.27; letter-spacing: -0.84px; font-weight: 600; box-sizing: border-box; padding: 17px 14px; height: 70px; }
.scon_area .table_area table thead th:not(:last-child), .scon_area .table_area table thead td:not(:last-child) { border-right: 1px solid var(--border-color01); }
.scon_area .table_area table tbody .table_bgW { background: #fff; }
.scon_area .table_area table tbody th { font-weight: 700; }
.scon_area .table_area table tbody td { font-weight: 400; }
.scon_area .table_area table tbody td ul li { font-size: var(--title-24); color: var(--black-color04); font-weight: 400; display: flex; line-height: 1.417; }
.scon_area .table_area table tbody td ul li::before { content: ""; flex-shrink: 0; width: 3px; height: 3px; border-radius: 10px; background: var(--black-color04); margin-top: calc(var(--title-24) - 4px); margin-right: calc(var(--title-24) / 2); }
.scon_area .table_area table tbody td ul li:not(:last-child) { margin-bottom: 8px; }
.scon_area .table_area table tbody td ul li::before { margin-top: calc(var(--title-24) - 9px); margin-right: calc(var(--title-24) / 2.7); }
.scon_area .table_area table tbody th, .scon_area .table_area table tbody td { color: var(--black-color04); line-height: 1.5; font-size: max(18px, 1.25vw); padding: 22px 2px; height: 81px; box-sizing: border-box; letter-spacing: -0.2px; box-shadow: 0px -2px 0 -1px var(--border-color01) inset; }
.scon_area .table_area table tbody th:not(:last-child), .scon_area .table_area table tbody td:not(:last-child) { border-right: 1px solid var(--border-color01); }
.scon_area .table_area table tbody th:has(+ [rowspan]), .scon_area .table_area table tbody td:has(+ [rowspan]) { border-right: none; }
.scon_area .table_area table tbody th:not(:first-of-type)[rowspan], .scon_area .table_area table tbody td:not(:first-of-type)[rowspan] { box-shadow: 2px -2px 0 -1px var(--border-color01) inset; }
.scon_area .table_area table tbody th:has(button, a), .scon_area .table_area table tbody td:has(button, a) { padding: 15px 20px; }
.scon_area .table_area table tbody .tabel_view_btn { min-width: 120px; display: block; box-shadow: 0 0 0 1px var(--border-color01) inset; font-size: var(--title-20); color: var(--black-color05); line-height: 1.5; font-weight: 400; letter-spacing: -0.6px; font-family: var(--font-type02); text-align: center; padding: 10px 20px; box-sizing: border-box; margin: 0 auto; background: #fff; transition: all 500ms; width: fit-content; cursor: pointer; }
hr.dot_line { display: block; margin: var(--size-100) 0; border: none; border-top: 1px dashed var(--border-color02); }
.tab_list.ver_fit > li { min-width: unset; padding: 0 46px; letter-spacing: -0.92px; }
.tab_list.ver_ts2 { margin: -15px 0 var(--size-60); }
.tab_list.ver_ts2 > li { min-width: 220px; }
.tab_list > li span { font-family: var(--font-type02); }
/* 공통영역 반응형 */

@media screen and (min-width:1920px) {
	.scon_area .table_area table tbody th, .scon_area .table_area table tbody td{font-size:var(--title-24);}
}
@media screen and (max-width:1300px) {
  .scon_area .table_area.noCol thead th > span, .scon_area .table_area.noCol thead td > span, .scon_area .table_area.noCol tbody th > span, .scon_area .table_area.noCol tbody td > span { max-width: 64%; }
}
@media screen and (max-width:1024px) {
  .scon_area:has(.features_thumb) { flex-direction: column; align-items: baseline; }
  .scon_area .features_list > li { font-size: var(--title-18); padding: 15px; align-items: center; }
  .scon_area .features_list > li > div ul li { font-size: 15px; }
  .scon_area .features_list > li::before { margin-right: 15px; align-self: baseline; line-height: 1; }
  .scon_area .table_area table thead th, .scon_area .table_area table thead td { font-size: var(--title-20); padding: 15px; height: 60px; }
  .scon_area .table_area table tbody th:has(button, a), .scon_area .table_area table tbody td:has(button, a) { padding: 8px 10px; }
  .scon_area .table_area table tbody th, .scon_area .table_area table tbody td { font-size: var(--title-18); padding: 15px; height: 50px; }
  .scon_area .table_area table tbody .tabel_view_btn { padding: 5px 14px; }
  .scon_area .table_area table tbody td ul li { font-size: var(--title-18); }
  .scon_area .table_area table tbody td ul li::before { margin-top: calc(var(--title-18) - 5px); width: 2px; height: 2px; margin-right: calc(var(--title-18) / 2); }
  .scon_area .table_area table tbody button.tabel_view_btn { min-width: 90px; padding: 6px 10px; font-size: var(--title-18); }
  .scon_area .table_area table tbody th:has(button), .scon_area .table_area table tbody td:has(button) { padding: 10px; }
  .scon_area .table_area .table_wrap { overflow-x: auto; width: calc(100% + 40px); margin-left: -20px; }
  .scon_area .table_area table { min-width: 640px; margin-left: 20px; }
  .scon_area .table_area table.tw-wide { min-width: 1024px; }
  .scon_area .table_area table.tw-small { min-width: 480px; }
}
@media screen and (max-width:860px) {
  .box_tit_area { margin-bottom: var(--size-80); }
  .tab_list.ver_ts2 > li { min-width: unset; }
  .scon_area .table_area.noCol thead th > span, .scon_area .table_area.noCol thead td > span, .scon_area .table_area.noCol tbody th > span, .scon_area .table_area.noCol tbody td > span { max-width: calc(100% - 30px); padding: 0 20px; }
  .scon_area .table_area.noCol thead th, .scon_area .table_area.noCol thead td, .scon_area .table_area.noCol tbody th, .scon_area .table_area.noCol tbody td { height: 50px; }
  #wrap:has(.sub_visual) #contents_wrap, .w_custom_sub { width: calc(100% - 30px); }
  #wrap:has(.border_visual) #contents_wrap { width: 100%; max-width: unset; }
  #wrap:has(.border_visual) .sub_board { width: calc(100% - 30px); }
  /* 공통 박스 디자인 */
  .scon_area h4.eng_tit, .scon_area .table_area h5, .scon_area h4 { gap: 10px; font-size: var(--title-22); margin-bottom: 20px; }
  .scon_area.scon_tb h4 { font-size: var(--title-26); }
  .scon_area h4.eng_tit::before, .scon_area .table_area h5::before, .scon_area h4::before { width: 7px; height: 7px; }
  .scon_area h4.eng_tit::before { margin-top: 4px; }
  .scon_area .table_area h5::before { margin-top: 3px; }
  .box_tit_area p b { font-size: var(--title-20); line-height: 1.4; }
  .box_tit_area p { margin-top: 10px; font-size: var(--title-18); line-height: 1.6; }
  /* 버튼 */
  a.linkBtn { font-size: var(--title-18); font-weight: 600; padding: 15px 20px; height: auto; }
}
@media screen and (max-width:640px) {
  .scon_area .table_area h5:has(> em) { position: relative; padding-bottom: 30px; }
  .scon_area .table_area h5 em { position: absolute; bottom: 0; right: 0; }
}
@media screen and (max-width:479px) {
  .scon_area.scon_tb h4 { font-size: var(--title-24); line-height: 1; }
  .tab_list.ver_ts2 { flex-direction: column; }
  .scon_area h4.eng_tit::before { margin-top: 8px; }
  .scon_area h4.eng_tit:has(+ .product_info) { line-height: 1.1; }
}
@media screen and (max-width:320px) {
  #wrap:has(.sub_visual) #contents_wrap, .w_custom_sub { width: calc(100% - 20px); }
  #wrap:has(.border_visual) #contents_wrap { width: 100%; max-width: unset; }
  #wrap:has(.border_visual) .sub_board { width: calc(100% - 20px); }
}
/*───────────────────────────────────────────────────────────
                        SUB VISUAL
───────────────────────────────────────────────────────────*/
.sub_visual { width: 100%; height: 460px; box-sizing: border-box; position: relative; display: flex; align-items: center; transition: all 500ms; display: none; background-position: center center; background-size: cover; }
.sub_visual[selected] { display: block; }
.sub_visual .sub_tt_area { height: 100%; display: flex; align-items: center; }
.sub_visual .sub_tt_area h2 { font-size: clamp(35px, 10vw, 70px); color: var(--point-white); font-family: var(--font-type02); line-height: 111%; margin-top: calc(var(--title-40) - 3px); }
.sub_visual::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); }
.sub_visual .sub_menu { position: absolute; width: 100%; bottom: 0; left: 0; background: #fff; }
.sub_visual .sub_menu::before { content: ""; width: 100%; height: 1px; background: var(--border-color01); left: 0; bottom: 0; position: absolute; }
.sub_visual .sub_menu dl { position: relative; }
.sub_visual .sub_menu dl dt { display: none; }
.sub_visual .sub_menu dl dd { position: relative; display: flex; gap: clamp(30px, 6vw, 70px); align-items: center; }
.sub_visual .sub_menu dl dd a, .sub_visual .sub_menu dl dd strong { display: block; font-family: var(--font-type02); color: var(--black-color02); font-size: var(--title-24); letter-spacing: -0.72px; line-height: 125%; font-weight: 400; text-align: center; padding: 25px 0; }
.sub_visual .sub_menu dl dd a.on::before { width: 100%; }
.sub_visual .sub_menu dl dd a { position: relative; }
.sub_visual .sub_menu dl dd a::before { content: ""; width: 0%; height: 2px; background: var(--point-color01); bottom: 0; position: absolute; left: 50%; transform: translateX(-50%); transition: all 500ms; }
.sub_visual .sub_menu dl dd a.on { color: var(--point-color01); -webkit-text-stroke: 1px #1a51a3; }
.sub_visual .sub_menu dl dd a.on::before { content: ""; width: 100%; height: 2px; }
.sub_visual .desc_area { margin-left: auto; margin-top: calc(var(--title-40) - 1px); }
.sub_visual .desc { display: flex; align-items: center; gap: 13px; }
.sub_visual .desc img { display: block; }
.sub_visual .desc a { color: inherit; }
.sub_visual .desc > *:not(:first-child) { position: relative; padding-left: 20px; }
.sub_visual .desc > *:not(:first-child)::after, .sub_visual .desc > *:not(:first-child)::before { content: ""; width: 7px; height: 1px; border-radius: 100px; background: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transform-origin: top right; }
.sub_visual .desc > *:not(:first-child)::after { rotate: 45deg; }
.sub_visual .desc > *:not(:first-child)::before { rotate: -45deg; }
.sub_visual .desc dd { color: var(--point-white); font-size: var(--title-18); font-weight: 400; letter-spacing: 0.18px; }
.sub_visual .desc dd + dd { font-weight: 600; }
@media screen and (min-width:1024px) {
  .sub_visual .sub_menu dl dd a:hover { color: var(--point-color01); -webkit-text-stroke: 1px #1a51a3; }
  .sub_visual .sub_menu dl dd a:hover::before { content: ""; width: 100%; height: 2px; }
}
@media (width <= 1024px) {
  .sub_visual .sub_menu dl dd a, .sub_visual .sub_menu dl dd strong { font-size: var(--title-22); }
}
@media (width <= 860px) {
  .sub_visual .sub_tt_area { flex-direction: column; align-items: center; gap: 3px; justify-content: center; }
  .sub_visual .desc_area { margin-left: unset; margin-top: calc(var(--title-40) - 20px); }
}
@media screen and (min-width:720px) {
  .sub_visual .sub_menu dl { overflow: auto; }
  .sub_visual .sub_menu dl dd { min-width: 1300px; }
}
@media (width <= 720px) {
  .sub_visual { height: 360px; background-position: 58% center; }
  .sub_visual .sub_menu .w_custom_sub { width: 100%; z-index: 30; }
  .sub_visual .sub_menu dl { box-sizing: border-box; }
  .sub_visual .sub_menu dl dt { display: block; color: var(--point-color01); font-weight: 600; font-size: var(--title-20); position: relative; padding: 15px 15px; }
  .sub_visual .sub_menu dl dt::after, .sub_visual .sub_menu dl dt::before { content: ""; width: 7px; height: 1px; border-radius: 100px; background: var(--black-color09); position: absolute; right: 18px; top: calc(50% - 5px); transform: translateY(-50%); transform-origin: top left; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
  .sub_visual .sub_menu dl dt::after { rotate: 45deg; }
  .sub_visual .sub_menu dl dt::before { rotate: 135deg; }
  .sub_visual .sub_menu dl dt.on::after, .sub_visual .sub_menu dl dt.on::before { top: 50%; }
  .sub_visual .sub_menu dl dt.on::after { rotate: -45deg; }
  .sub_visual .sub_menu dl dt.on::before { rotate: 220deg; }
  .sub_visual .sub_menu dl dd { display: none; }
  .sub_visual .sub_menu dl dd.open { display: block; position: absolute; width: 100%; top: 100%; z-index: 9; background: var(--point-white); padding-bottom: 2vw; border-bottom: 2px solid var(--point-color01); }
  .sub_visual .sub_menu dl dd a { padding: 15px; text-align: left; font-size: var(--title-18); }
  .sub_visual .sub_menu dl dd a.on { font-weight: 400; color: unset; -webkit-text-stroke: unset; }
  .sub_visual .sub_menu dl dd a.on::before { content: none; }
  .sub_visual .sub_tt_area h2 { margin-top: 0; }
}
@media (width <= 320px) {
  .sub_visual .sub_menu dl dt, .sub_visual .sub_menu dl dd { padding-left: 10px; padding-right: 10px; }
  .sub_visual .sub_menu dl dd a { padding: 15px 0; }
}
/*───────────────────────────────────────────────────────────
                        COMPANY
───────────────────────────────────────────────────────────*/
/*** company/about [ 인사말  ] ***/
/* PC 일반 */
#container:has(.sub_about) { background: url("../images/sub/sub_about_bg.png") no-repeat center bottom/cover; }
.sub_about { margin-bottom: 58px; }
.sub_about .sub_about_img { height: 0; padding: 0 0 30% 0; background: url("../images/skin/sub_about.jpg") no-repeat center center; background-size: cover; position: relative; z-index: 1; }
.sub_about .sub_about_area h3 { font-size: var(--title-38); font-weight: 400; line-height: 1.55; text-align: center; color: var(--black-color03); margin: var(--size-60) 0 calc(var(--size-50) - 2px); letter-spacing: -0.47px; }
.sub_about .sub_about_area h3 strong { font-weight: 600; color: var(--point-color01); }
.sub_about .sub_about_area h3 strong > span { font-weight: 700; font-family: var(--font-type02); }
.sub_about .sub_about_txt { display: flex; flex-direction: column; gap: var(--title-30); align-items: center; }
.sub_about .sub_about_txt p { color: var(--black-color05); font-size: var(--title-24); line-height: 1.835; font-weight: 400; text-align: center; }
/*** company/history [ 회사연혁  ] ***/
/* PC 일반 */
#wrap:has(.sub_history) #contents_wrap { width: 100%; max-width: 100%; }
#wrap:has(.sub_history) .nav_wrap .nav_box { padding-bottom: calc(var(--size-60) - 28px); }
.sub_history .his_btn_area { margin-bottom: calc(var(--size-80) + 18px); background: var(--point-white); z-index: 5; position: sticky; top: 121px; }
.sub_history .his_btn_area::after { content: ""; position: absolute; bottom: 0; width: 0; height: 1px; background: var(--border-color01); transition: all 2.5s ease; transition-delay: 500ms; z-index: -1; }
.sub_history .his_btn_area.aos-init::after { content: ""; width: 100%; }
.sub_history .his_tab_btn { display: flex; box-sizing: border-box; transition: all 300ms; }
.sub_history .his_tab_btn button { width: 100%; font-size: var(--title-34); font-family: var(--font-type02); color: var(--black-color09); line-height: 88%; font-weight: 700; position: relative; box-sizing: border-box; transition: all 300ms; padding: 28px 20px 27px; }
.sub_history .his_tab_btn button.on, .sub_history .his_tab_btn button:hover { color: var(--point-color01); }
.sub_history .his_tab_btn button.on::after { content: ""; display: block; width: 13px; height: 13px; flex-shrink: 0; left: calc(50% - 6px); background: var(--point-color01); position: absolute; bottom: -7px; border-radius: 100%; transform: skew(-35deg, 10deg); }
.sub_history .history_box { gap: var(--size-60); align-items: flex-start; display: none; }
.sub_history .history_box.on { display: flex; }
.sub_history .history_box .his_year { max-width: 268px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--title-30); margin-top: -15px; }
.sub_history .history_box .his_year strong { display: block; width: 100%; font-size: var(--title-50); font-weight: 700; font-family: var(--font-type02); color: var(--black-color02); }
.sub_history .history_box .his_year::after { content: ""; width: 60px; height: 2px; background: var(--point-color01); display: block; flex-shrink: 0; }
.sub_history .history_box .his_detail { position: relative; width: 100%; display: flex; flex-direction: column; gap: calc(var(--title-40) + 3px); }
.sub_history .history_box .his_detail::after { content: ""; width: 1px; height: calc(100% - 40px); top: 20px; background: var(--border-color01); position: absolute; left: 126px; z-index: -1; }
.sub_history .history_box .his_detail dl { display: flex; align-items: baseline; }
.sub_history .history_box .his_detail dt { font-size: var(--title-30); font-weight: 700; font-family: var(--font-type02); color: var(--black-color02); display: block; position: relative; width: 100%; max-width: 126px; }
.sub_history .history_box .his_detail dt::after { content: ""; width: 12px; height: 12px; right: -6px; box-sizing: border-box; border: 3px solid var(--point-color01); background: #fff; border-radius: 100px; outline: 4px solid #e8eef6; position: absolute; z-index: 3; top: calc(var(--title-40) - 26px); }
.sub_history .history_box .his_detail dd { padding-left: var(--size-60); }
.sub_history .history_box .his_detail dd em { font-size: var(--title-24); font-weight: 700; font-family: var(--font-type02); color: var(--black-color02); position: relative; top: -3px; min-width: 27px; }
.sub_history .history_box .his_detail dd li { font-size: var(--title-20); color: var(--black-color06); font-weight: 400; display: flex; gap: 15px; line-height: 1.3; position: relative; top: 1px; }
.sub_history .history_box .his_detail dd li:not(:first-child) { margin-top: var(--title-18); }
/*** company/charter [ 윤리경영  ] ***/
/* PC 일반 */
.sub_charter .sub_charter_img { height: 0; padding: 0 0 30% 0; background: url("../images/skin/sub_charter.jpg") no-repeat center center; background-size: cover; position: relative; z-index: 1; }
.sub_charter .sub_charter_area { margin-top: var(--size-80); }
.sub_charter .sub_charter_area .sub_charter_list { counter-reset: charterNum 0; }
.sub_charter .sub_charter_area .sub_charter_list > div { position: relative; padding-left: 208px; padding-bottom: var(--title-40); margin-bottom: var(--title-40); }
.sub_charter .sub_charter_area .sub_charter_list > div:not(:last-child) { border-bottom: 1px solid var(--border-color01); }
.sub_charter .sub_charter_area .sub_charter_list > div::before { counter-increment: charterNum 1; content: "0" counter(charterNum) "."; position: absolute; left: 0; width: 210px; height: calc(100% - var(--title-40)); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: var(--title-50); color: var(--point-color01); font-weight: 700; line-height: 1; font-family: var(--font-type02); }
.sub_charter .sub_charter_area .sub_charter_list > div > p { font-size: var(--title-26); font-weight: 500; color: var(--black-color02); line-height: 1.39; padding-left: 2px; }
.sub_charter .sub_charter_area .sub_charter_list > div ul { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; overflow: hidden; }
.sub_charter .sub_charter_area .sub_charter_list > div ul li { display: flex; }
.sub_charter .sub_charter_area .sub_charter_list > div ul li p { color: var(--black-color06); font-size: var(--title-24); font-weight: 400; line-height: 1.4; }
.sub_charter .sub_charter_area .sub_charter_list > div ul li p b { font-weight: 500; color: var(--black-color03); }
.sub_charter .sub_charter_area .sub_charter_list > div ul li::before { content: ""; flex-shrink: 0; width: 3px; height: 3px; display: block; border-radius: 100%; margin-top: calc(var(--title-24) - 8px); margin-right: 10px; background: var(--black-color06); }
/*** company/location [ 사업장소개  ] ***/
/* PC 일반 */
#wrap:has(.sub_location) #contents_wrap { width: 100%; max-width: 100%; }
#wrap:has(.sub_location) #contents_box { overflow: hidden; }
.sub_location .sub_location_mapping { width: 100%; height: 100%; position: relative; background: linear-gradient(180deg, rgba(26, 81, 163, 0) 0%, rgba(26, 81, 163, 0.04) 50%); padding-bottom: var(--size-120); margin-bottom: var(--size-120); }
.sub_location .sub_location_mapping .map_area { aspect-ratio: 1/0.547; max-width: 1340px; position: relative; isolation: isolate; min-width: 580px; }
.sub_location .sub_location_mapping .map_area::after { content: ""; background: url("../images/sub/location_map.svg") no-repeat center center/cover; position: absolute; width: 100%; height: 100%; opacity: 0.3; z-index: -1; left: 50%; transform: translateX(-50%); }
.sub_location .sub_location_mapping .map_area .pin_marker { position: absolute; display: flex; top: 0; left: 0; font-size: var(--title-20); font-family: var(--font-type02); color: var(--point-color01); transform: translate(-50%, -50%); font-weight: 700; line-height: 1.5; letter-spacing: -0.6px; gap: 5px; }
.sub_location .sub_location_mapping .map_area .pin_marker span { position: absolute; white-space: nowrap; }
.sub_location .sub_location_mapping .map_area .pin_marker i { display: block; width: 22px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' viewBox='0 0 22 30' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' fill='rgba(255,255,255)'/%3E%3Cpath d='M11 0C4.92781 0 0 4.84686 0 10.8193C0 21.3974 11 30 11 30C11 30 22 21.3974 22 10.8193C22 4.84686 17.0722 0 11 0ZM11 16.7917C7.64862 16.7917 4.92781 14.1156 4.92781 10.8193C4.92781 7.52297 7.64862 4.84686 11 4.84686C14.3514 4.84686 17.0722 7.52297 17.0722 10.8193C17.0722 14.1156 14.3514 16.7917 11 16.7917Z' fill='rgba(26, 81, 163, 1)'/%3E%3C/svg%3E") no-repeat center center/contain; }
.sub_location .sub_location_mapping .map_area .pin_marker.korea { flex-direction: column; align-items: center; justify-content: center; left: 42.4%; top: 45.7%; color: #0F3876; }
.sub_location .sub_location_mapping .map_area .pin_marker.korea span { top: -30px; }
.sub_location .sub_location_mapping .map_area .pin_marker.korea i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' viewBox='0 0 22 30' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' fill='rgba(255,255,255)'/%3E%3Cpath d='M11 0C4.92781 0 0 4.84686 0 10.8193C0 21.3974 11 30 11 30C11 30 22 21.3974 22 10.8193C22 4.84686 17.0722 0 11 0ZM11 16.7917C7.64862 16.7917 4.92781 14.1156 4.92781 10.8193C4.92781 7.52297 7.64862 4.84686 11 4.84686C14.3514 4.84686 17.0722 7.52297 17.0722 10.8193C17.0722 14.1156 14.3514 16.7917 11 16.7917Z' fill='rgba(15, 56, 118, 1)'/%3E%3C/svg%3E") no-repeat center center/contain; }
.sub_location .sub_location_mapping .map_area .pin_marker.china { flex-direction: column; align-items: flex-end; left: 39.2%; top: 53.1%; }
.sub_location .sub_location_mapping .map_area .pin_marker.china span { top: -30px; }
.sub_location .sub_location_mapping .map_area .pin_marker.vietnam { left: 36.4%; top: 58.3%; gap: 15px; }
.sub_location .sub_location_mapping .map_area .pin_marker.vietnam span { right: 30px; }
.sub_location .sub_location_mapping .map_area .pin_marker.malaysia { left: 34.5%; top: 63.4%; gap: 15px; }
.sub_location .sub_location_mapping .map_area .pin_marker.malaysia span { right: 30px; }
.sub_location .sub_location_info { display: flex; flex-direction: column; border-top: 2px solid #2A282D; border-bottom: 2px solid var(--border-color01); box-sizing: border-box; }
.sub_location .sub_location_info span.line { width: 2px; height: calc(var(--title-30) - 10px); margin: 0 21px; background: var(--border-color01); display: block; }
.sub_location .sub_location_info > div { overflow: hidden; padding: 40px 30px; }
.sub_location .sub_location_info > div:not(:first-child) { border-top: 2px solid var(--border-color01); }
.sub_location .sub_location_info > div > dl { width: 100%; box-sizing: border-box; position: relative; transition: all 500ms; }
.sub_location .sub_location_info > div > dl.ff_eng dt { font-family: var(--font-type02); margin-bottom: calc(var(--title-20) - 2px); }
.sub_location .sub_location_info > div > dl.ff_eng dd > span { font-family: var(--font-type02); line-height: 141.667%; }
.sub_location .sub_location_info > div > dl dt { font-size: var(--title-30); font-weight: 400; line-height: 1; color: var(--black-color02); display: flex; align-items: center; margin-bottom: var(--title-20); width: 100%; box-sizing: border-box; }
.sub_location .sub_location_info > div > dl dt b { font-family: var(--font-type02); font-weight: 700; line-height: 100%; font-size: var(--title-30); color: var(--point-color01); position: relative; top: 1px; }
.sub_location .sub_location_info > div > dl dt .detail_map_btn { width: 46px; height: 22px; position: absolute; }
.sub_location .sub_location_info > div > dl dt .detail_map_btn::after, .sub_location .sub_location_info > div > dl dt .detail_map_btn::before { content: ""; width: 60%; height: 2px; transform-origin: left; background: #ddd; position: absolute; top: 20px; transition: all 500ms ease; }
.sub_location .sub_location_info > div > dl dt .detail_map_btn::before { rotate: -45deg; }
.sub_location .sub_location_info > div > dl dt .detail_map_btn::after { rotate: -135deg; }
.sub_location .sub_location_info > div > dl dd > span { font-size: var(--title-24); font-weight: 400; line-height: 1.25; color: var(--black-color04); display: block; width: 92%; }
.sub_location .sub_location_info > div > dl dd ul { display: flex; margin-top: calc(var(--title-20) + 1px); }
.sub_location .sub_location_info > div > dl dd ul li { color: var(--black-color06); font-size: var(--title-20); font-weight: 400; line-height: 1.5; }
.sub_location .sub_location_info > div > dl dd ul li > span::after { content: ":"; display: inline-block; margin: 0 6px; position: relative; top: 2px; font-size: var(--title-18); }
.sub_location .sub_location_info > div > dl dd ul li:not(:first-child) { display: flex; }
.sub_location .sub_location_info > div > dl dd ul li:not(:first-child)::before { content: ""; width: 1px; height: 12px; display: block; background: var(--border-color01); margin: 0 15px; position: relative; top: calc(var(--title-20) - 10px); }
.sub_location .sub_location_info > div > dl .detail_map_btn { top: 50%; transform: translateY(-50%); right: -4px; transition: all 500ms; }
.sub_location .sub_location_info > div .map_hid { max-height: 0; /* 최소 높이 지정 */
  transition: all 500ms; overflow: hidden; }
.sub_location .sub_location_info > div .map_hid iframe { width: 100%; transition-delay: 0.2s; transition: all 500ms; height: 0px; }
.sub_location .sub_location_info > div.on .map_hid { max-height: 430px; transition: all 500ms; }
.sub_location .sub_location_info > div.on .map_hid iframe { width: 100%; transition-delay: 0.2s; transition: all 500ms; height: 400px; }
.sub_location .sub_location_info > div.on .detail_map_btn { top: calc(50% - 10px); transform: rotateX(180deg); }
.sub_location .sub_location_info > div.on .detail_map_btn::after, .sub_location .sub_location_info > div.on .detail_map_btn::before { background: var(--point-color01); }
.sub_location .sub_location_info > div .map_hid iframe { width: 100%; margin-top: calc(var(--title-30) + 10px); }
/*** company/nice_group [ NICE 그룹  ] ***/
.sub_nice_group .box_tit_area { margin-bottom: calc(var(--size-100) - 5px); }
.sub_nice_group .ng_business { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--title-30); transition: all 500ms ease; }
.sub_nice_group .ng_business .ng_data { background: url("../images/sub/nice_group_ico01.svg") no-repeat bottom 50px right 50px; background-size: 80px; }
.sub_nice_group .ng_business .ng_cash { background: url("../images/sub/nice_group_ico02.svg") no-repeat bottom 50px right 50px; background-size: 80px; }
.sub_nice_group .ng_business .ng_payment { background: url("../images/sub/nice_group_ico03.svg") no-repeat bottom 50px right 50px; background-size: 80px; }
.sub_nice_group .ng_business .ng_eco { background: url("../images/sub/nice_group_ico04.svg") no-repeat bottom 50px right 50px; background-size: 80px; }
.sub_nice_group .ng_business > div { border: 1px solid var(--border-color01); box-sizing: border-box; padding: 60px; padding-bottom: 72px; }
.sub_nice_group .ng_business > div > p { color: var(--point-color01); font-size: var(--title-30); font-weight: 700; line-height: 1; font-family: var(--font-type02); }
.sub_nice_group .ng_business > div > span { font-size: var(--title-22); color: var(--black-color03); font-weight: 400; line-height: 154.545%; display: block; margin-top: var(--title-30); }
.sub_nice_group .ng_business > div .keyword { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--title-30) - 1px); }
.sub_nice_group .ng_business > div .keyword em { display: block; box-sizing: border-box; padding: 10px 20px; font-size: var(--title-20); line-height: 1.5; letter-spacing: -0.7px; color: var(--black-color06); background: var(--gray-bg01); font-weight: 400; border-radius: 100px; }
.sub_nice_group .ng_business > div .keyword em.emp { background: var(--point-color01); color: #fff; font-weight: 500; }
/*───────────────────────────────────────────────────────────
                            HR
───────────────────────────────────────────────────────────*/
/*** hr/talent [  인재상  ] ***/
.sub_talent .sub_talent_area { display: flex; flex-wrap: wrap; gap: 30px; transition: all 300ms ease; }
.sub_talent .sub_talent_area div { background: #EEF4F9 url() no-repeat bottom 50px right 50px; width: calc(50% - 15px); box-sizing: border-box; padding: 60px; height: 250px; transition: all 300ms ease; }
.sub_talent .sub_talent_area div.talent_it { background: #EEF4F9 url("../images/sub/talent_ico01.svg") no-repeat bottom 50px right 50px; background-size: 87px; }
.sub_talent .sub_talent_area div.talent_te { background: #EEF4F9 url("../images/sub/talent_ico02.svg") no-repeat bottom 50px right 50px; background-size: 70px; }
.sub_talent .sub_talent_area div.talent_os { background: #EEF4F9 url("../images/sub/talent_ico03.svg") no-repeat bottom 50px right 50px; background-size: 86px; }
.sub_talent .sub_talent_area div.talent_ct { background: #EEF4F9 url("../images/sub/talent_ico04.svg") no-repeat bottom 50px right 50px; background-size: 83px; }
.sub_talent .sub_talent_area div h4 { font-size: var(--title-30); font-family: var(--font-type02); font-weight: 700; line-height: 100%; color: var(--point-color01); display: flex; align-items: center; gap: calc(var(--title-18) / 2) var(--title-18); }
.sub_talent .sub_talent_area div h4 em { color: #95AAC9; font-size: var(--title-22); letter-spacing: -0.66px; }
.sub_talent .sub_talent_area div p { color: var(--black-color03); line-height: 1.545; font-size: var(--title-22); font-weight: 400; width: 88%; margin-top: var(--title-30); }
/*** hr/personnel [  인사제도  ] ***/
.sub_personnel .position_system { padding: 70px 60px 100px; box-shadow: 0 0 0 1px var(--border-color01) inset; }
.sub_personnel .position_system dl { display: flex; align-items: center; gap: var(--title-20) calc(clamp(30px, 6vw, 70px) - 1px); }
.sub_personnel .position_system dl:not(:last-child) { margin-bottom: var(--title-30); }
.sub_personnel .position_system dl dt { flex-shrink: 0; font-weight: 500; font-size: var(--title-24); color: var(--black-color04); line-height: 1.25; text-align: center; }
.sub_personnel .position_system dl dd { width: 100%; }
.sub_personnel .position_system dl dd > p { width: 100%; border-radius: 400px; height: 70px; font-weight: 700; color: var(--point-color01); line-height: 1.25; font-family: var(--font-type02); font-size: var(--title-24); background: var(--point-color09); display: inline-flex; justify-content: center; align-items: center; }
.sub_personnel .position_system dl dd ul { display: flex; align-items: center; gap: 63px; position: relative; }
.sub_personnel .position_system dl dd ul::before { content: ""; position: absolute; width: 100%; top: 50%; height: 1px; background: var(--border-color01); }
.sub_personnel .position_system dl dd ul li { position: relative; width: 100%; border-radius: 100px; background: #EFEFEF; font-size: var(--title-24); color: var(--black-color04); font-weight: 400; line-height: 1.25; text-align: center; box-sizing: border-box; padding: 20px; }
.sub_personnel .position_system dl dd ul li em { position: absolute; right: -43px; bottom: -31px; font-size: var(--title-20); font-weight: 400; line-height: 1.5; color: var(--black-color09); }
.sub_personnel .position_system dl dd ul li:not(:first-child)::after { content: ""; width: 6px; height: 6px; border-radius: 100px; background: var(--point-color01); position: absolute; left: -3px; top: calc(50% - 3px); }
.sub_personnel .system_enforcement { margin-top: calc(var(--size-100) + 2px); counter-reset: system_efm_num 0; }
.sub_personnel .system_enforcement > div { display: flex; align-items: center; gap: var(--size-60); }
.sub_personnel .system_enforcement > div:not(:last-child) { padding-bottom: clamp(30px, 6vw, 70px); margin-bottom: clamp(30px, 6vw, 70px); border-bottom: 1px solid var(--border-color01); }
.sub_personnel .system_enforcement > div::before { content: ""; width: 180px; height: 180px; border-radius: 300px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sub_personnel .system_enforcement > div:nth-child(1)::before { background: #f5f5f5 url("../images/sub/enforce_ico01.svg") no-repeat center center; }
.sub_personnel .system_enforcement > div:nth-child(2)::before { background: #f5f5f5 url("../images/sub/enforce_ico02.svg") no-repeat center center; }
.sub_personnel .system_enforcement > div:nth-child(3)::before { background: #f5f5f5 url("../images/sub/enforce_ico03.svg") no-repeat center center; }
.sub_personnel .system_enforcement > div:nth-child(4)::before { background: #f5f5f5 url("../images/sub/enforce_ico04.svg") no-repeat center center; }
.sub_personnel .system_enforcement > div:nth-child(5)::before { background: #f5f5f5 url("../images/sub/enforce_ico05.svg") no-repeat center center; }
.sub_personnel .system_enforcement > div .copy strong { font-size: var(--title-26); font-weight: 700; line-height: 100%; color: var(--point-color01); margin-bottom: calc(var(--title-18) - 1px); display: block; }
.sub_personnel .system_enforcement > div .copy strong::before { font-size: var(--title-30); font-family: var(--font-type02); counter-increment: system_efm_num 1; content: "0" counter(system_efm_num) "."; display: inline-flex; margin-right: 8px; }
.sub_personnel .system_enforcement > div .copy p { line-height: 1.6; font-size: var(--title-24); font-weight: 400; word-break: keep-all; text-wrap: balance; color: var(--black-color06); }
.sub_personnel .system_enforcement > div .copy p:not(:last-of-type) { margin-bottom: var(--title-20); }
/*** hr/recruit [  채용안내  ] ***/
.sub_recruit .process_step { display: flex; align-items: center; justify-content: center; gap: 46px; padding: 50px; box-sizing: border-box; box-shadow: 0 0 0 1px var(--border-color01) inset; transition: all 500ms ease; }
.sub_recruit .process_step dl { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.sub_recruit .process_step dl:not(:last-child)::after { content: ""; width: 46px; right: -46px; position: absolute; height: 1px; background: var(--border-color01); top: 80px; z-index: -1; }
.sub_recruit .process_step dl::before { content: ""; width: 160px; height: 160px; border-radius: 300px; box-shadow: 0 0 0 8px #EEF4F9 inset; display: block; transition: all 500ms ease; }
.sub_recruit .process_step dl dt { font-size: var(--title-22); color: var(--point-color01); font-family: var(--font-type02); font-weight: 700; line-height: 1.14; display: block; margin: var(--title-20) 0 var(--title-16); }
.sub_recruit .process_step dl dt::after { display: inline-block; margin-left: 6px; }
.sub_recruit .process_step dl dd { color: var(--black-color04); font-size: var(--title-24); font-weight: 400; line-height: 1.25; }
.sub_recruit .process_step.newcomer { counter-reset: newcomer_num 0; }
.sub_recruit .process_step.newcomer dl dt::after { counter-increment: newcomer_num 1; content: "0" counter(newcomer_num); }
.sub_recruit .process_step.newcomer dl:nth-child(1)::before { background: #fff url("../images/sub/newcomer_ico01.svg") no-repeat center center; }
.sub_recruit .process_step.newcomer dl:nth-child(2)::before { background: #fff url("../images/sub/newcomer_ico02.svg") no-repeat center center; }
.sub_recruit .process_step.newcomer dl:nth-child(3)::before { background: #fff url("../images/sub/newcomer_ico03.svg") no-repeat center center; }
.sub_recruit .process_step.newcomer dl:nth-child(4)::before { background: #fff url("../images/sub/newcomer_ico04.svg") no-repeat center center; }
.sub_recruit .process_step.newcomer dl:nth-child(5)::before { background: #fff url("../images/sub/newcomer_ico05.svg") no-repeat center center; }
.sub_recruit .process_step.career { counter-reset: career_num 0; }
.sub_recruit .process_step.career dl dt::after { counter-increment: career_num 1; content: "0" counter(career_num); }
.sub_recruit .process_step.career dl:nth-child(1)::before { background: #fff url("../images/sub/career_ico01.svg") no-repeat center center; }
.sub_recruit .process_step.career dl:nth-child(2)::before { background: #fff url("../images/sub/career_ico02.svg") no-repeat center center; }
.sub_recruit .process_step.career dl:nth-child(3)::before { background: #fff url("../images/sub/career_ico03.svg") no-repeat center center; }
.sub_recruit .process_step.career dl:nth-child(4)::before { background: #fff url("../images/sub/career_ico04.svg") no-repeat center center; }
.sub_recruit .process_step.career dl:nth-child(5)::before { background: #fff url("../images/sub/career_ico05.svg") no-repeat center center; }
.sub_recruit .process_step.career dl:nth-child(6)::before { background: #fff url("../images/sub/career_ico06.svg") no-repeat center center; }
.sub_recruit .recruit_banner { transition: all 500ms ease; margin-top: var(--size-100); height: 0; padding: 0 0 28.5% 0; background: url("../images/sub/sub_recruit.jpg") no-repeat center center; background-size: cover; position: relative; z-index: 1; isolation: isolate; position: relative; color: #fff; text-align: center; }
.sub_recruit .recruit_banner .copy { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sub_recruit .recruit_banner h4 { font-size: var(--title-50); font-weight: 700; line-height: 1.2; }
.sub_recruit .recruit_banner p { font-size: var(--title-20); font-weight: 400; line-height: 1.1; margin: 30px 0 40px; }
.sub_recruit .recruit_banner a { color: inherit; letter-spacing: -0.6px; font-weight: 400; line-height: 1.5; font-size: var(--title-20); display: block; padding: 17px 30px; width: fit-content; margin: 0 auto; position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 0 0 1px var(--point-white) inset; }
@media screen and (min-width:1024px) {
  .sub_recruit .recruit_banner a::before { content: ""; width: 0%; height: 100%; position: absolute; left: -30px; top: 0; background: var(--point-color01); transform: skewX(40deg); opacity: 0; z-index: -1; transition: all 300ms ease-in; transition-delay: 100ms; }
  .sub_recruit .recruit_banner a:hover::before { width: 140%; opacity: 1; }
}
.sub_recruit .recruit_banner::before { content: ""; position: absolute; width: 100%; height: 100%; background: #020910; top: 0; left: 0; opacity: 0.45; z-index: -1; }
/*** hr/welfare [  복리후생  ] ***/
.sub_welfare .sub_welfare_area { display: flex; gap: 30px; flex-wrap: wrap; }
.sub_welfare .sub_welfare_area > div { width: calc(50% - 15px); background: #EEF4F9; box-sizing: border-box; padding: 50px 60px 64px 60px; }
.sub_welfare .sub_welfare_area > div.welfare_flex h4::before { content: ""; background: url("../images/sub/welfare_ico01.svg") no-repeat center center/contain; width: 100%; background-size: auto 100%; height: 85px; display: block; }
.sub_welfare .sub_welfare_area > div.welfare_edu h4::before { content: ""; background: url("../images/sub/welfare_ico02.svg") no-repeat center center/contain; width: 100%; background-size: auto 100%; height: 78px; display: block; }
.sub_welfare .sub_welfare_area > div.welfare_vacation h4::before { content: ""; background: url("../images/sub/welfare_ico03.svg") no-repeat center center/contain; width: 100%; background-size: auto 100%; height: 77px; display: block; }
.sub_welfare .sub_welfare_area > div.welfare_health h4::before { content: ""; background: url("../images/sub/welfare_ico04.svg") no-repeat center center/contain; width: 100%; background-size: auto 100%; height: 77px; display: block; }
.sub_welfare .sub_welfare_area > div.welfare_present h4::before { content: ""; background: url("../images/sub/welfare_ico05.svg") no-repeat center center/contain; width: 100%; background-size: auto 100%; height: 77px; display: block; }
.sub_welfare .sub_welfare_area > div.welfare_event h4::before { content: ""; background: url("../images/sub/welfare_ico06.svg") no-repeat center center/contain; width: 100%; background-size: auto 100%; height: 77px; display: block; }
.sub_welfare .sub_welfare_area > div.welfare_food h4::before { content: ""; background: url("../images/sub/welfare_ico07.svg") no-repeat center center/contain; width: 100%; background-size: auto 100%; height: 77px; display: block; }
.sub_welfare .sub_welfare_area > div h4 { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--title-30); font-weight: 500; color: var(--point-color01); margin-bottom: 30px; padding-bottom: 35px; width: 100%; border-bottom: 1px solid #c1cfe1; line-height: 1; }
.sub_welfare .sub_welfare_area > div h4::before { margin-bottom: 38px; }
.sub_welfare .sub_welfare_area > div ul { display: flex; flex-direction: column; gap: 11px; }
.sub_welfare .sub_welfare_area > div ul li { line-height: 1.4; font-weight: 400; font-size: var(--title-22); color: var(--black-color03); display: flex; }
.sub_welfare .sub_welfare_area > div ul li::before { content: ""; display: block; width: 3px; height: 3px; border-radius: 10px; background: var(--black-color03); margin-top: calc(var(--title-22) - 8px); margin-right: 10px; flex-shrink: 0; }
/*───────────────────────────────────────────────────────────
                        PRODUCT
───────────────────────────────────────────────────────────*/
.sub_smps, .sub_switching_trans, .sub_power_trans, .sub_ev_charger, .sub_cartridge, .sub_touchpad { margin-bottom: calc(var(--size-80) + 6px); }
.sub_odm { margin-bottom: 56px; }
/*** product/smps [  SMPS  ] ***/
.sub_smps .product_info { padding-bottom: 4px; }
.sub_smps .product_info > div { display: flex; padding: 50px 0; box-sizing: border-box; gap: calc(var(--size-60) + 5px); border-bottom: 1px solid var(--border-color01); }
.sub_smps .product_info > div:first-child { border-top: 1px solid var(--black-color03); }
.sub_smps .product_info > div .thumb, .sub_smps .product_info > div ul { width: 100%; }
.sub_smps .product_info > div .thumb { max-width: 500px; }
.sub_smps .product_info > div > ul > li { font-size: var(--title-24); color: var(--black-color06); font-weight: 400; display: flex; line-height: 1.25; }
.sub_smps .product_info > div > ul > li::before { content: ""; flex-shrink: 0; width: 3px; height: 3px; border-radius: 10px; background: var(--black-color06); margin-top: calc(var(--title-24) - 4px); margin-right: calc(var(--title-24) / 2); }
.sub_smps .product_info > div > ul > li:has(> div) { font-size: var(--title-24); color: var(--black-color00); font-weight: 400; display: flex; }
.sub_smps .product_info > div > ul > li:has(> div)::before { content: ""; flex-shrink: 0; width: 3px; height: 3px; border-radius: 10px; background: var(--black-color00); margin-top: calc(var(--title-24) - 4px); margin-right: calc(var(--title-24) / 2); }
.sub_smps .product_info > div > ul > li:has(> div):not(:last-child) { margin-bottom: 30px; }
.sub_smps .product_info > div > ul > li:has(> div)::before { margin-top: calc(var(--title-24) - 8px); }
.sub_smps .product_info > div > ul > li:has(br) { line-height: 1.75; }
.sub_smps .product_info > div > ul > li:has(br)::before { margin-top: calc(var(--title-24) - 3px); }
.sub_smps .product_info > div > ul > li::before { margin-top: calc(var(--title-24) - 9px); }
.sub_smps .product_info > div > ul > li:not(:last-child) { margin-bottom: 20px; }
.sub_smps .product_info > div > ul > li > div { width: 100%; }
.sub_smps .product_info > div > ul > li > div ul { margin-top: 20px; }
.sub_smps .product_info > div > ul > li > div ul li { font-size: var(--title-24); line-height: 1.25; color: var(--black-color06); display: flex; }
.sub_smps .product_info > div > ul > li > div ul li:not(:last-child) { margin-bottom: 15px; }
.sub_smps .product_info > div > ul > li > div ul li::before { content: "-"; display: block; position: relative; margin-right: 5px; top: 2px; }
/*** product/ev_charger [  ev_charger  ] ***/
.sub_ev_charger .table_area { margin-top: -15px; }
/*** product/touchpad [  touchpad  ] ***/
.sub_touchpad .scon_area .table_area table col:first-child { min-width: 260px; }
/* 반응형 */
@media only screen and (max-width:1440px) {
  /* 채용안내 */
  .sub_recruit .process_step { align-items: baseline; }
  .sub_recruit .process_step dl { max-width: 100px; }
  .sub_recruit .process_step dl:not(:last-child)::after { top: 45px; width: 60px; right: -60px; }
  .sub_recruit .process_step dl::before { content: ""; width: 90px; height: 90px; }
  .sub_recruit .process_step dl dt { font-size: var(--title-20); }
  .sub_recruit .process_step dl dd { font-size: var(--title-18); }
  .sub_recruit .process_step.newcomer dl:nth-child(1)::before, .sub_recruit .process_step.career dl:nth-child(1)::before { background-size: 36px; }
  .sub_recruit .process_step.newcomer dl:nth-child(2)::before, .sub_recruit .process_step.career dl:nth-child(2)::before { background-size: 36px; }
  .sub_recruit .process_step.newcomer dl:nth-child(3)::before, .sub_recruit .process_step.career dl:nth-child(3)::before { background-size: 36px; }
  .sub_recruit .process_step.newcomer dl:nth-child(4)::before, .sub_recruit .process_step.career dl:nth-child(4)::before { background-size: 36px; }
  .sub_recruit .process_step.newcomer dl:nth-child(5)::before, .sub_recruit .process_step.career dl:nth-child(5)::before { background-size: 36px; }
  .sub_recruit .process_step.newcomer dl:nth-child(6)::before, .sub_recruit .process_step.career dl:nth-child(6)::before { background-size: 36px; }
}
@media only screen and (max-width:1360px) {
  /* 인재상 */
  .sub_talent .sub_talent_area div { width: 100%; }
}
@media only screen and (max-width:1200px) {
  /* 인사말 */
  .sub_about .sub_about_area h3, .sub_about .sub_about_area h3 strong { word-break: keep-all; text-wrap: pretty; }
  .sub_about .sub_about_area h3 br { display: none; }
  /* 사업장소개 */
  .sub_location .sub_location_info span.line { width: 1px; height: calc(var(--title-30) - 14px); margin: 0 10px; margin-top: 3px; }
  .sub_location .sub_location_info > div > dl dt, .sub_location .sub_location_info > div > dl dt b { font-size: var(--title-22); }
  .sub_location .sub_location_info > div > dl dd > span, .sub_location .sub_location_info > div > dl.ff_eng dd > span { line-height: 1.3; font-size: var(--title-20); }
  .sub_location .sub_location_info > div > dl dd ul li { font-size: 15px; }
  .sub_location .sub_location_info > div > dl dd ul li > span::after { margin: 0 3px; top: 0; font-size: 12px; }
  /* NICE 그룹 */
  .sub_nice_group .ng_business > div:is(.ng_data, .ng_cash, .ng_payment, .ng_eco) { background-size: 60px; }
  /* 채용안내 */
  .sub_recruit .recruit_banner { padding: 0 0 40% 0; }
}
@media only screen and (min-width:1024px) {
  .scon_area .table_area table tbody .tabel_view_btn:hover { box-shadow: 0 0 0 1px var(--point-color01) inset; color: var(--point-color01); }
}
@media only screen and (max-width:1024px) {
  /* 인사말 */
  .sub_about .sub_about_img { padding: 0 0 42% 0; }
  .sub_about .sub_about_txt p { word-break: keep-all; text-wrap: pretty; }
  .sub_about .sub_about_txt p br { display: none; }
  /* 연혁 */
  #wrap:has(.sub_history) .nav_wrap .nav_box { padding-bottom: var(--size-60); }
  .sub_history .history_box { flex-direction: column; }
  .sub_history .history_box .his_year { flex-direction: column; align-items: baseline; max-width: 100%; margin-top: 0; }
  .sub_history .his_btn_area { top: 101px; }
  .sub_history .his_tab_btn button { padding: 15px; font-size: var(--title-24); }
  .sub_history .his_tab_btn { border-bottom: 1px solid var(--border-color01); }
  .sub_history .his_tab_btn button.on::after { transform: unset; bottom: -1px; left: 0; width: 100%; height: 1px; }
  /* 윤리경영 */
  .sub_charter .sub_charter_area .sub_charter_list > div { padding-left: 130px; }
  .sub_charter .sub_charter_area .sub_charter_list > div::before { width: 100px; }
  .sub_charter .sub_charter_area .sub_charter_list > div > p { font-size: var(--title-24); }
  .sub_charter .sub_charter_area .sub_charter_list > div ul li p { font-size: var(--title-20); }
  .sub_charter .sub_charter_area .sub_charter_list > div ul li::before { margin-top: calc(var(--title-20) - 8px); }
  /* NICE 그룹 */
  .sub_nice_group .ng_business > div > span { font-size: var(--title-18); margin-top: var(--title-20); }
  .sub_nice_group .ng_business > div .keyword { margin-top: var(--title-20); gap: 6px; }
  .sub_nice_group .ng_business > div .keyword em { font-size: var(--title-16); padding: 4px 15px 5px; }
  .sub_nice_group .ng_business { grid-template-columns: repeat(1, 1fr); }
  .sub_nice_group .ng_business > div:is(.ng_data, .ng_cash, .ng_payment, .ng_eco) { padding: 40px 30px; padding-bottom: 90px; background-size: 50px; background-position: bottom 30px right 30px; }
  /* 사업장소개 */
  .sub_location .sub_location_info > div { padding: 30px 15px; }
  .sub_location .sub_location_info > div > dl dt { margin-bottom: 10px; }
  .sub_location .sub_location_info > div > dl dd ul { margin-top: 10px; }
  .sub_location .sub_location_info > div > dl dt .detail_map_btn::after, .sub_location .sub_location_info > div > dl dt .detail_map_btn::before { width: 40%; top: 14px; }
  .sub_location .sub_location_info > div > dl dt .detail_map_btn { height: 15px; width: 30px; right: 0; }
  .sub_location .sub_location_info > div > dl dd > span, .sub_location .sub_location_info > div > dl.ff_eng dd > span { font-size: 17px; }
  .sub_location .sub_location_mapping .map_area .pin_marker i { width: 12px; height: 20px; }
  .sub_location .sub_location_mapping .map_area .pin_marker.korea span, .sub_location .sub_location_mapping .map_area .pin_marker.china span { top: -20px; }
  .sub_location .sub_location_mapping .map_area .pin_marker.vietnam span, .sub_location .sub_location_mapping .map_area .pin_marker.malaysia span { right: 20px; top: -4px; }
  .sub_location .sub_location_info > dl dt .detail_map_btn::after, .sub_location .sub_location_info > dl dt .detail_map_btn::before { width: 40%; }
  /* 인재상 */
  .sub_talent .sub_talent_area div { padding: 40px 30px; height: auto; }
  .sub_talent .sub_talent_area div.talent_it { background: #EEF4F9 url("../images/sub/talent_ico01.svg") no-repeat bottom 30px right 30px; background-size: 43px; }
  .sub_talent .sub_talent_area div.talent_te { background: #EEF4F9 url("../images/sub/talent_ico02.svg") no-repeat bottom 30px right 30px; background-size: 35px; }
  .sub_talent .sub_talent_area div.talent_os { background: #EEF4F9 url("../images/sub/talent_ico03.svg") no-repeat bottom 30px right 30px; background-size: 43px; }
  .sub_talent .sub_talent_area div.talent_ct { background: #EEF4F9 url("../images/sub/talent_ico04.svg") no-repeat bottom 30px right 30px; background-size: 37px; }
  .sub_talent .sub_talent_area div h4 { font-size: var(--title-24); }
  .sub_talent .sub_talent_area div h4 em { font-size: var(--title-20); }
  .sub_talent .sub_talent_area div p { font-size: var(--title-20); }
  /* 인사제도 */
  .sub_personnel .position_system dl { flex-direction: column; align-items: baseline; }
  .sub_personnel .position_system dl dd ul li { font-size: var(--title-20); }
  .sub_personnel .system_enforcement > div::before { width: 140px; height: 140px; }
  /* 채용안내 */
  .sub_recruit .process_step { flex-direction: column; align-items: baseline; }
  .sub_recruit .process_step dl { flex-direction: row; gap: 20px; max-width: unset; width: 100%; justify-content: flex-start; }
  .sub_recruit .process_step dl::before { flex-shrink: 0; }
  .sub_recruit .process_step dl dt { flex-shrink: 0; }
  .sub_recruit .process_step.newcomer dl:nth-child(1)::before, .sub_recruit .process_step.career dl:nth-child(1)::before { background-size: 36px; width: 120px; height: 120px; }
  .sub_recruit .process_step.newcomer dl:nth-child(2)::before, .sub_recruit .process_step.career dl:nth-child(2)::before { background-size: 36px; width: 120px; height: 120px; }
  .sub_recruit .process_step.newcomer dl:nth-child(3)::before, .sub_recruit .process_step.career dl:nth-child(3)::before { background-size: 36px; width: 120px; height: 120px; }
  .sub_recruit .process_step.newcomer dl:nth-child(4)::before, .sub_recruit .process_step.career dl:nth-child(4)::before { background-size: 36px; width: 120px; height: 120px; }
  .sub_recruit .process_step.newcomer dl:nth-child(5)::before, .sub_recruit .process_step.career dl:nth-child(5)::before { background-size: 36px; width: 120px; height: 120px; }
  .sub_recruit .process_step.newcomer dl:nth-child(6)::before, .sub_recruit .process_step.career dl:nth-child(6)::before { background-size: 36px; width: 120px; height: 120px; }
  .sub_recruit .process_step dl:not(:last-child)::after { top: unset; width: 1px; height: 60px; right: unset; bottom: -60px; left: 60px; }
  /* 복리후생 */
  .sub_welfare .sub_welfare_area > div ul { gap: 6px; }
  .sub_welfare .sub_welfare_area > div ul li { font-size: var(--title-18); }
  .sub_welfare .sub_welfare_area > div ul li::before { margin-top: calc(var(--title-18) - 6px); width: 2px; height: 2px; margin-right: 7px; }
  .sub_welfare .sub_welfare_area > div { padding: 30px; }
  .sub_welfare .sub_welfare_area > div.welfare_flex h4::before { width: 50px; height: 50px; background-size: 50px; }
  .sub_welfare .sub_welfare_area > div.welfare_edu h4::before { width: 50px; height: 50px; background-size: 50px; }
  .sub_welfare .sub_welfare_area > div.welfare_vacation h4::before { width: 50px; height: 50px; background-size: 50px; }
  .sub_welfare .sub_welfare_area > div.welfare_health h4::before { width: 50px; height: 50px; background-size: 50px; }
  .sub_welfare .sub_welfare_area > div.welfare_present h4::before { width: 50px; height: 50px; background-size: 50px; }
  .sub_welfare .sub_welfare_area > div.welfare_event h4::before { width: 50px; height: 50px; background-size: 50px; }
  .sub_welfare .sub_welfare_area > div.welfare_food h4::before { width: 50px; height: 50px; background-size: 50px; }
  .sub_welfare .sub_welfare_area > div h4 { font-size: var(--title-24); margin-bottom: 20px; padding-bottom: 20px; }
  .sub_welfare .sub_welfare_area > div h4::before { margin-bottom: 15px; }
  /* SMPS */
  .sub_smps .product_info > div { flex-direction: column; padding: 25px 0; }
  .sub_smps .product_info > div .thumb { max-width: 100%; width: 100%; height: 65vw; }
  .sub_smps .product_info > div .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sub_smps .product_info > div > ul > li:has(> div) { font-size: var(--title-18); }
  .sub_smps .product_info > div > ul > li:has(> div)::before { margin-top: calc(var(--title-18) - 6px); margin-right: calc(var(--title-18) / 2); width: 2px; height: 2px; }
  .sub_smps .product_info > div ul li { font-size: var(--title-18); word-break: keep-all; text-wrap: pretty; }
  .sub_smps .product_info > div > ul > li > div ul { margin-top: 14px; }
  .sub_smps .product_info > div > ul > li > div ul li { font-size: 15px; }
  .sub_smps .product_info > div > ul > li > div ul li::before { margin-top: -1px; margin-right: 6px; }
  .sub_smps .product_info > div { gap: 20px; }
  .sub_smps .product_info > div ul li:not(:last-child) { margin-bottom: 14px; }
  .sub_smps .product_info > div ul li:has(br)::before { margin-top: calc(var(--title-18) - 2px); }
  .sub_smps .product_info > div ul li::before { width: 2px; height: 2px; margin-top: calc(var(--title-18) - 6px); margin-right: calc(var(--title-18) / 2); }
}
@media only screen and (max-width:860px) {
  /* 윤리경영 */
  .sub_charter .sub_charter_area .sub_charter_list > div { padding-left: 110px; }
  .sub_charter .sub_charter_area .sub_charter_list > div::before { width: 80px; }
  /* 사업장소개 */
  .sub_location .sub_location_mapping .map_area { aspect-ratio: unset; height: clamp(310px, 50vw, 420px); }
  /* 인사제도 */
  .sub_personnel .position_system { padding: 40px 30px; }
  .sub_personnel .position_system dl dt { font-size: var(--title-22); }
  .sub_personnel .position_system dl dd ul { flex-direction: column; }
  .sub_personnel .position_system dl dd ul::before { width: 1px; height: 100%; top: 0; left: 50%; }
  .sub_personnel .position_system dl dd ul li:not(:first-child)::after { top: -2px; left: 50%; transform: translateX(-50%); }
  .sub_personnel .position_system dl dd ul li em { bottom: unset; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); background: #fff; }
  .sub_personnel .system_enforcement > div .copy strong { font-size: var(--title-24); }
  .sub_personnel .system_enforcement > div .copy p { font-size: var(--title-16); }
  .sub_personnel .system_enforcement > div .copy p:not(:last-of-type) { margin-bottom: 10px; }
  .sub_personnel .system_enforcement > div::before { width: 100px; height: 100px; }
  .sub_personnel .system_enforcement > div { gap: 25px; flex-direction: column; align-items: center; text-align: center; }
  .sub_personnel .system_enforcement > div:nth-child(1)::before { background-size: 50px; }
  .sub_personnel .system_enforcement > div:nth-child(2)::before { background-size: 50px; }
  .sub_personnel .system_enforcement > div:nth-child(3)::before { background-size: 50px; }
  .sub_personnel .system_enforcement > div:nth-child(4)::before { background-size: 50px; }
  .sub_personnel .system_enforcement > div:nth-child(5)::before { background-size: 50px; }
  .sub_recruit .process_step { padding: 25px; }
}
@media only screen and (max-width:767px) {
  /* 인사말 */
  .sub_about .sub_about_area h3 { font-size: var(--title-26); }
  .sub_about .sub_about_txt p { font-size: var(--title-18); }
  .sub_about .sub_about_txt { gap: 10px; }
  /* 윤리경영 */
  .sub_charter .sub_charter_img { padding: 0 0 50% 0; }
  .sub_charter .sub_charter_area .sub_charter_list > div::before { width: auto; }
  .sub_charter .sub_charter_area .sub_charter_list > div { padding-left: calc(5vw + 50px); margin-bottom: 20px; padding-bottom: 25px; }
  /* 사업장소개 */
  .sub_location .sub_location_info > div.on .map_hid { max-height: 250px; }
  .sub_location .sub_location_info > div.on .map_hid iframe { height: 200px; }
  .sub_location .sub_location_info > div > dl dd ul { flex-direction: column; align-items: baseline; }
  .sub_location .sub_location_info > div > dl dd ul li:not(:first-child)::before { content: none; }
  .sub_location .sub_location_info > div > dl dt { flex-direction: column; align-items: baseline; font-size: var(--title-18); margin-bottom: 5px; }
  .sub_location .sub_location_info > div > dl dt b { margin-top: 4px; font-size: var(--title-30); }
  .sub_location .sub_location_info span.line { display: none; }
  /* 채용안내 */
  .sub_recruit .recruit_banner h4 { font-size: var(--title-40); }
  .sub_recruit .recruit_banner p { margin: 15px 0 20px; font-size: var(--title-18); line-height: 1.4; text-wrap: balance; word-break: keep-all; }
  .sub_recruit .recruit_banner a { padding: 10px 20px; font-size: var(--title-16); }
  .sub_recruit .recruit_banner .copy { box-sizing: border-box; padding: 0 20px; }
  /* 인사제도 */
  .sub_personnel .position_system dl dd > p { height: 50px; }
  .sub_personnel .position_system dl dd ul li { padding: 15px; }
  /* 복리후생 */
}
@media only screen and (max-width:640px) {
  /* 인사말 */
  .sub_about_img { padding: 0 0 50% 0; background-size: cover; position: relative; z-index: 1; }
  /* 연혁 */
  .sub_history .his_btn_area { top: 81px; }
  .sub_history .his_btn_area.aos-init::after { content: none; }
  .sub_history .his_tab_btn { display: flex; border-bottom: none; flex-wrap: wrap; }
  .sub_history .his_tab_btn button { border-bottom: 1px solid var(--border-color01); width: 50%; padding: 15px 8px; font-size: var(--title-22); }
  .sub_history .history_box .his_detail dl { flex-direction: column; }
  .sub_history .history_box .his_detail dt { max-width: unset; }
  .sub_history .history_box .his_detail dt, .sub_history .history_box .his_detail dd { padding-left: var(--size-80); box-sizing: border-box; }
  .sub_history .history_box .his_detail dd { padding-top: 10px; }
  .sub_history .history_box .his_detail dt::after { right: unset; left: 5px; top: calc(var(--title-40) - 18px); }
  .sub_history .history_box .his_detail::after { left: 10px; height: 92.5%; }
  /* 윤리경영 */
  .sub_charter .sub_charter_area .sub_charter_list > div ul li::before { margin-top: 9px; width: 2px; height: 2px; margin-right: 6px; }
  .sub_charter .sub_charter_area .sub_charter_list > div ul { gap: 5px; }
  .sub_charter .sub_charter_area .sub_charter_list > div ul li p { font-size: 15px; line-height: 1.3; }
  .sub_charter .sub_charter_area .sub_charter_list > div { padding-left: 0; }
  .sub_charter .sub_charter_area .sub_charter_list > div > p { font-size: var(--title-20); padding-left: 40px; }
  .sub_charter .sub_charter_area .sub_charter_list > div::before { position: absolute; align-items: baseline; font-size: 25px; }
  /* 채용안내 */
  .sub_recruit .process_step dl dt { padding-bottom: 30px; }
  .sub_recruit .process_step dl dd { position: absolute; left: 140px; top: 50%; }
  .sub_recruit .process_step.newcomer dl:nth-child(1)::before, .sub_recruit .process_step.career dl:nth-child(1)::before { background-size: 35px; width: 90px; height: 90px; }
  .sub_recruit .process_step.newcomer dl:nth-child(2)::before, .sub_recruit .process_step.career dl:nth-child(2)::before { background-size: 35px; width: 90px; height: 90px; }
  .sub_recruit .process_step.newcomer dl:nth-child(3)::before, .sub_recruit .process_step.career dl:nth-child(3)::before { background-size: 35px; width: 90px; height: 90px; }
  .sub_recruit .process_step.newcomer dl:nth-child(4)::before, .sub_recruit .process_step.career dl:nth-child(4)::before { background-size: 35px; width: 90px; height: 90px; }
  .sub_recruit .process_step.newcomer dl:nth-child(5)::before, .sub_recruit .process_step.career dl:nth-child(5)::before { background-size: 35px; width: 90px; height: 90px; }
  .sub_recruit .process_step.newcomer dl:nth-child(6)::before, .sub_recruit .process_step.career dl:nth-child(6)::before { background-size: 35px; width: 90px; height: 90px; }
  .sub_recruit .process_step dl:not(:last-child)::after { left: 45px; }
  .sub_recruit .process_step dl dd { left: 110px; }
  /* 복리후생 */
  .sub_welfare .sub_welfare_area { gap: 20px; }
  .sub_welfare .sub_welfare_area > div { width: 100%; }
}
@media only screen and (max-width:479px) {
  /* NICE 그룹 */
  .sub_nice_group .ng_business > div > p { font-size: var(--title-22); }
  .sub_nice_group .ng_business > div > span { font-size: 15px; line-height: 1.3; }
  .sub_nice_group .ng_business > div:is(.ng_data, .ng_cash, .ng_payment, .ng_eco) { padding: 30px 20px; padding-bottom: 70px; background-size: 50px; background-position: bottom 15px right 15px; }
  /* 인재상 */
  .sub_talent .sub_talent_area div { padding: 30px; }
  .sub_talent .sub_talent_area div h4 { font-size: var(--title-22); flex-direction: column; align-items: baseline; }
  .sub_talent .sub_talent_area div h4 em { font-size: var(--title-18); }
  .sub_talent .sub_talent_area div p { font-size: var(--title-18); margin-top: calc(var(--title-30) / 2); width: 80%; }
  /* 채용안내 */
  .sub_recruit .recruit_banner { padding: 0; height: 260px; }
}