@charset "utf-8";
@import url("/wk/static/css/font.css");


/* ============================== [ reset ] ========================================================================================== */
html, body, div, span, h1, h2, h3, h4, p, a, em, img, strong,
sub, sup, i, dl, dt, dd, ol, ul, li, form, label, table,
caption, tbody, thead, tr, th, td, article, aside, footer,
header, nav, input, textarea, button, select {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box; font-family:'Pretendard',sans-serif; letter-spacing:-0.02em; line-height:1.5rem;}
strong{font-weight:600;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
caption, .blind {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:polygon(0 0, 0 0, 0 0);}
ol, ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;width:100%;}
a {text-decoration:none;color:var(--col-333);}
button {background:none;border:none;cursor:pointer;}

/* textarea */
textarea {padding:6px 12px 6px 16px; width:100%; resize:none; background:var(--col-white); border:1px solid var(--col-ddd); border-radius:8px; appearance:none; -webkit-appearance:none; -moz-appearance:none; font-size:16px;}

/* select 화살표 커스텀 */
select {-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none;}
select::-ms-expand {display:none;/*for IE10,11*/}
select {background:url("/wk/static/images/jc/icon/icon_down.svg") no-repeat 98%;}

/* input[radio] 커스텀 */
input[type="radio"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0;}
.radio_box label {position:relative;}
.radio_box label {padding-left:28px; line-height:28px; font-weight:400; color:var(--col-333);}
.radio_box label::before {display:block; content:""; width:22px; height:22px; border:1px solid var(--col-gray); border-radius:50%; position:absolute; top:-2px; left:0;}
/*.radio_box label::after {display:block; content:""; width:8px; height:8px; background:var(--col-ddd); border-radius:50%; position:absolute; top:6px; left:8px;} 241128 접근성 관련 이슈로 해당 내용 삭제*/
.radio_box input[type="radio"]:checked + label::before {display:block; content:""; width:22px; height:22px; background:var(--col-blue); border-radius:50%; position:absolute; top:-2px; left:0;}
.radio_box input[type="radio"]:checked + label::after {display:block; content:""; width:8px; height:8px; background:var(--col-white); border-radius:50%; position:absolute; top:6px; left:8px;}
input[type="radio"]:focus + label::before {outline: 2px dashed #888;}

/* input[checkbout] 커스텀 */
input[type="checkbox"] {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:polygon(0 0, 0 0, 0 0);}
input[disabled] {background-color:var(--col-gray2);}
.box_chkbox span {width:100%; font-weight:400; font-size:16px; line-height:28px; color:var(--col-gray); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.box_chkbox input[type="checkbox"] + label {position:relative; padding-left:30px; width:95%; cursor:pointer;}
.box_chkbox input[type="checkbox"] + label:before {content:""; position:absolute; top:0; left:0; width:19px; height:19px; text-align:center; border:1px solid var(--col-gray); background: var(--col-white); border-radius:4px;}
.box_chkbox input[type="checkbox"]:checked + label:after {content:""; position:absolute; top:0px; left:0; width:19px; height:19px; border:1px solid var(--col-blue); background:url("/wk/static/images/jc/icon/icon_check_dark.svg") 50% 50% var(--col-blue) no-repeat; border-radius:4px;}
input[type="checkbox"]:focus + label::before {outline: 2px dashed #888;}

*:not(section):focus{outline: 2px dashed #888; z-index: 300;}

/* 팝업딤드 */
body.dim {overflow:hidden;}
body.dim:before {position:fixed; left:0; top:0; width:100%; height:100vh; background-color:rgba(0, 0, 0, 0.16); content:""; z-index:996;}

/* skip navigation */
.skip_nav a{display:flex; align-items:center; justify-content:center; position:absolute; top:-100px; left:0; width:100%; background:var(--col-blue); height:80px; line-height:28px; font-size:28px; font-weight:600; color:white; z-index:1000;}
.skip_nav a:focus {top:0px}

/* common */
:root{
    --inner :1248px;
    --col-111 :#111;
    --col-333 :#333;
    --col-555 :#555;
    --col-999 :#999;
    --col-ddd :#ddd;
    --col-eee :#eee;
    --col-gray :#757575;
    --col-gray2 :#f5f5f5;
    --col-white :#fff;
	--col_box_bg:#f8f8f8;
	--col-red :#E0024B;
    --col-red2 :#EC073E;
    --col-blue :#4D65E1;
    --col-green :#117935;
    --col-lightgreen :#EBFFF3;
    --col-navy :#39425D;
    --col-sky :#F3F8FF;
    --col-sky2 :#E3EEFF;
    --col-sky3 :#F6F9FD;
    --col-purple :#9E00FF;
    --col-darkblue :#39425D;
    --col-brown :#A95A12;
}

.wrapper {position:relative; width:100%; min-width:1400px;}
#container {display:block; width:100%; height:100%;}
.inner {margin:0 auto; width:1248px;}

/* ============================== [ layout ] ========================================================================================== */
/* header */
header {width:100%; position:sticky; top:0; background-color:var(--col-white); z-index:995;}
.header_wrap {display:flex; flex-direction:column; width:100%;}
/* 20241212 수정 S */
.header_top .login_info {display:flex; justify-content: flex-end; margin: 0 auto; padding: 4px 0; width: var(--inner); align-items:center; gap:16px;}
.header_top .login_info a {color:var(--col-333);}
.header_top .login_info .login_timer {display:flex; align-items:center; gap:8px; color:var(--col-333);}
/* 20241212 수정 E */
.header_bottom {display:flex; width:100%; border-bottom:1px solid var(--col-eee);}
.header_bottom h1 {display:flex; align-items:center;}
.header_bottom ul {display:flex; justify-content:space-between; margin:0 auto; width:var(--inner); height:76px;}
.header_bottom ul li {display:flex; align-items:center; font-size:12px;}
.header_bottom ul li:nth-child(2) {gap:32px;}
.header_bottom ul .logo_menu .g24_logo {position:relative; margin-right:32px; background:url("/wk/static/images/jc/g24_logo.png") no-repeat; width:136px; height:48px;}
.header_bottom ul .logo_menu .g24_logo::after {position:absolute; top:50%; right:-16px; transform:translateY(-50%); width:1px; height:13px; background:#ddd; content :"";}
.header_bottom ul .jc_logo {font-size:24px; font-weight:700;}
.header_bottom ul .gnb_menu a {height: 100%; line-height:28px; font-size:16px; font-weight:600; color:var(--col-111);}
.header_bottom ul .gnb_menu a span {position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%;}
.header_bottom ul .gnb_menu a:hover span {position: relative; color: var(--col-blue);}
.header_bottom ul .gnb_menu a:hover span::after {width: 100%;}
.header_bottom ul .gnb_menu a span::after {display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: var(--col-blue); transition: width ease-out .2s; content: '';}
.header_bottom ul .gnb_menu a.active span {position: relative; color: var(--col-blue);}
.header_bottom ul .gnb_menu a.active span::after {width: 100%;}
/* 20241212 추가 S */
header .e_gov {height: 32px; background-color: #edf1f5;}
header .e_gov > p {margin: 0 auto; width: var(--inner); line-height: 32px; color: var(--col-111);}
header .e_gov > p img {margin-right: 8px; vertical-align: -4px;}
/* 20241212 추가 E */

/* 푸터 */
#footer {background-color: transparent;}
#footer .area {position: relative; width: 1248px; margin: 0 auto;}
#footer .site {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
#footer .site .area {display: flex; align-items: center;}
#footer .site .btnsite {display: flex; justify-content: space-between; align-items: center; width: 200px; height: 54px; padding: 0 24px; border-left: 1px solid #ddd;}
#footer .site .btnsite ~ .btnsite {border-right: 1px solid #ddd;}
#footer .site .btnsite .text {display: block; font-size: 16px; color: #111;}
#footer .site .btnsite .icon {display: block; width: 24px; height: 24px; background: url("/wk/static/images/jc/icon/icon_plus.svg") no-repeat;}
#footer .site .btnsite.active span {font-weight: 600; text-decoration: underline;}
#footer .site .btnsite.active .icon {background: url("/wk/static/images/jc/icon/icon_minus.svg") no-repeat;}

#footer .site_list .list {overflow: hidden; position: absolute; left: 0; bottom: 55px; width: 200px; padding-right: 4px; border: 1px solid #ddd; border-bottom: none; background-color: #fff; border-radius: 8px 8px 0 0;}
#footer .site_list .list li a {display: block; padding: 4px 0 4px 24px; line-height: 28px;}
#footer .site_list .list li a:hover {font-weight: 600; text-decoration: underline; background-color: #f5f5f5;}
#footer .site_list .list--related {left: 200px;}
#footer .site_list .list ul {overflow-y: auto; height: 216px;}
#footer .site_list .list ul::-webkit-scrollbar {width: 4px;}
#footer .site_list .list ul::-webkit-scrollbar-thumb {background: #ddd; border-radius: 4px;}
#footer .site_list .list ul::-webkit-scrollbar-track {background-color: #fff;}

#footer .group {background-color: #F5F5F5;}
#footer .group .area {padding: 40px 0;}
#footer .logos {display: flex; align-items: center;}
#footer .logos a {display: block;}
#footer .logos a ~ a {margin-left: 24px;}
#footer .flex {display: flex; justify-content: space-between;}
#footer .flex_left {margin-top: 24px;}
#footer .flex_left p {color: #111; line-height: 28px;}
#footer .flex_left p ~ p {margin-top: 4px;}
#footer .flex_left p.etc {margin-top: 24px; color: #555;}
#footer .flex_left p.etc strong {color: #111;}
#footer .flex_right .guide a {display: flex; align-items: center;}
#footer .flex_right .guide a span {font-weight: 600; color: #111;}
#footer .flex_right .guide a .icon {display: block; width: 16px; height: 16px; margin-left: 4px; background: url("/wk/static/images/jc/icon/icon_arrow_right.svg") no-repeat;}
#footer .flex_right .guide a ~ a {margin-top: 16px;}
#footer .flex_right .sns {display: flex; align-items: center; margin-top: 40px;}
#footer .flex_right .sns a {display: block;}
#footer .flex_right .sns a ~ a {margin-left: 8px;}
#footer .control {margin-top: 24px; border-top: 1px solid #ddd;}
#footer .control .links {display: flex; align-items: center;}
#footer .control .links a {display: block; padding: 16px 0;}
#footer .control .links a ~ a {margin-left: 24px;}
#footer .control .copyright {font-size: 14px; color: #555;}
/* 20241212 추가 */
#footer .logos.gov {padding-left: 16px; margin-top: 40px; background-color: #fff; height: 40px;}
#footer .logos.gov .copyright {font-size: 14px; color: #111;}
#footer .logos.gov a ~ a {margin: 0px 8px 0px 8px;}

/* 아코디언 */
.acd > ul > li {position:relative; padding:16px 0; border-bottom:1px solid var(--col-eee); z-index:1;}
.acd > ul > li:first-child {border-top:1px solid var(--col-ddd);}
.acd > ul > li:hover {border-bottom:1px solid var(--col-blue);}
.acd > ul > li::after, .acd_arow > .btn_text::after {display:inline-block; content:""; position:absolute; top:18px; right:16px; width:24px; height:24px; background:url("/wk/static/images/jc/icon/icon_arrow2_down.svg") no-repeat; transform:rotate(0deg); transform-style:preserve-3d; z-index:-1;}
footer .acd_arow > .btn_text::after {z-index:1;}
.acd_arow {border:1px solid var(--col-ddd);}
.acd_arow > .btn_text::after {right:0; top:-2px;}
.acd > ul > li.on::after, .acd_arow.acd_open > .btn_text::after {background:url("/wk/static/images/jc/icon/icon_arrow2_up_color.svg") no-repeat; transform:rotate(0deg);}
.acd > ul > li .acd_cont {display:none; line-height:28px; margin-top:16px;}
.acd:not(.type03) > ul > li > .b1_sb, .acd:not(.type03) > ul > li > *:first-child {display:block; cursor:pointer;}
.acd_arow > .btn_text {position:relative; padding-right:32px;}
.acd.type02 {border:1px solid var(--col-ddd); border-radius:8px; padding:0px 24px;}
.acd.type02 > ul > li:first-child {border-top:none;}
.acd.type02 > ul > li:last-child {border-bottom:none;}
.acd.type02 > ul > li::after {right:0;}
.acd.type03 > ul > li::after {display:none;}
.acd.type03 > ul > li > .acd_flex {display:flex; justify-content:space-between; align-items:center;}
.acd.type03 label + label {margin-left:16px;}
.acd.slide_type .acd_btn {margin-bottom:40px;}
.expend_btn_td {text-align:right !important;}
.expend_btn_td button {width:24px; height:24px; background:url("/wk/static/images/jc/icon/icon_arrow2_down.svg") no-repeat right center;}
.expend_btn_td button.exp {background:url("/wk/static/images/jc/icon/icon_arrow2_up_color.svg") no-repeat right center;}
.expend_tr {display:none;}

/* paging */
.box_pagination {text-align:center; font-size:0;}
.box_pagination .text_paging {font-size:16px; padding:0 8px;}
.box_pagination .text_paging.active {color:var(--col-blue); font-weight:600;}
.box_pagination button {display:inline-block; position:relative; width:36px; height:36px; line-height:36px; text-align:center; vertical-align:top; font-size:14px; background-color:var(--col-white); color:var(--col-333);}
.box_pagination button ~ button {margin-left:4px;}
.box_pagination .btn_page.prev + button {margin-left:0;}
.box_pagination button.btn_page {border:1px solid var(--col-ddd); border-radius:4px;}
.box_pagination button:hover, .box_pagination button:focus, .box_pagination button.active {background:var(--col-blue); color:var(--col-white); border-radius:4px; font-weight:600;}
.box_pagination.small_type {display:flex; align-items:center; justify-content:center;}
.paging_division {display:inline-block; width:24px; line-height:36px; color:var(--col-333); font-size:16px;}
.box_pagination.small_type button ~ button {margin-left:0;}
.box_pagination.small_type button:hover,
.box_pagination.small_type button:focus,
.box_pagination.small_type button.active {background:none; border:none; color:var(--col-333); font-weight:400;}
.box_pagination.small_type button.active {color:var(--col-blue); font-weight:600;}
.box_pagination.small_type span.num {display:inline-block; position:relative; width:36px; height:36px; line-height:36px; text-align:center; vertical-align:top; font-size:14px; background-color:var(--col-white); color:var(--col-333);}
.box_pagination.small_type span.num.active {color:var(--col-blue); font-weight:600;}
.box_pagination button.btn_page:hover, .box_pagination button.btn_page:focus {background:var(--col-white); border:1px solid #aaa;}
.box_pagination .btn_page.prev {margin-right:16px;}
.box_pagination .btn_page.next {margin-left:16px;}
.box_pagination .btn_page:after {content:""; display:block; position:absolute; left:50%; top:50%; margin:-8px 0 0 -8px; width:16px; height:16px; background:url("/wk/static/images/jc/icon/icon_arrow_right.svg");}
.box_pagination .btn_page.last:after, .box_pagination .btn_page.first:after {background:url("/wk/static/images/jc/icon/icon_arrow_right_double.svg");}
.box_pagination .btn_page.first:after, .box_pagination .btn_page.prev:after {transform:scaleX(-1);}
.box_pagination .btn_page:disabled, .box_pagination .btn_page:disabled:hover {border:1px solid var(--col-ddd); cursor:default;}
.box_pagination .btn_page:disabled:after {opacity:.3}

/* switch */
.switch_box{display:flex; align-items:center;}
.switch {position:relative; display:inline-flex;}
.switch label {display:inline-block; width:36px; height:20px;}
.switch label .on_txt, .switch label .no_txt {vertical-align:top;}
.switch label .no_txt ~ .slider {margin-left:5px;}
.switch input {z-index:-1; width:0px; height:0px;}
.switch input:focus-visible:after {position:absolute; top:2px; left:1px; width:100%; height:100%; border:2px solid #000; border-radius:0.2rem; content:'';}
.switch .slider {position:relative; display:inline-block; cursor:pointer; height:20px; width:36px; background-color:var(--col-gray); border-radius:27px; -webkit-transition:.4s; transition:.4s;}
.switch .slider:after {position:absolute; content:''; height:16px; width:16px; left:4px; bottom:4px; background-color:var(--col-white); border-radius:50%; -webkit-transition:.4s; transition:.4s;}
.switch input:checked + label .slider {background-color:var(--col-blue);}
.switch input:checked + label .on_txt {display:inline-block;}
.switch input:checked + label .no_txt,
.switch input + label .on_txt {display:none;}
.switch input:focus + label .slider {box-shadow:0 0 1px #0071c0;}
.switch input:checked + label .slider:after {-webkit-transform:translateX(16px); -ms-transform:translateX(16px); transform:translateX(16px);}
.switch input:disabled + label .slider {cursor:default;}
.switch input:disabled + label .slider {background-color:var(--col-eee);}
.switch input:disabled + label .slider:after {background-color:var(--col-gray2);}
.switch.type2 .slider {padding:0 8px; height:20px; width:auto; border-radius:20px; text-align:left;}
.switch.type2 .slider:before {content:''; right:12px; bottom:8px;}
.switch.type2 .slider:after {height:12px; width:12px;}
.switch.type2 input:checked + label .slider{text-align:right;}
.switch.type2 input:checked + label .on_txt,
.switch.type2 input + label .no_txt{line-height:24px; font-size:12px; margin-right:20px; color:var(--col-white); display:inline-block;}
.switch.type2 input + label .no_txt{margin-left:20px; margin-right:0; color:var(--col-555);}
.switch.type2 input:checked + label .no_txt{display:none;}
.switch.type2 input:checked + label .slider:before {content:'';}
.switch.type2 input:checked + label .slider:after {/* -webkit-transform:translateX(36px); */-ms-transform:translateX(36px);/* transform:translateX(36px); */}
.switch.type3 .slider {height:46px; width:120px; background-color:var(--col-white); border:1px solid var(--col_btn); border-radius:27px; -webkit-transition:.4s; transition:.4s;}
.switch.type3 .slider:after {z-index:10; content:'기업'; text-align:center; line-height:46px; font-size:16px; font-weight:600; color:var(--col-white); height:46px; width:60px; left:0; top:-1px; background-color:var(--col-blue); border:1px solid var(--col-blue); border-radius:27px; -webkit-transition:.4s; transition:.4s; -webkit-transform:translateX(60px); -ms-transform:translateX(60px); transform:translateX(60px);}
.switch.type3 .slider span {z-index:1; position:absolute; top:0; left:0; height:46px; width:60px; line-height:46px; display:inline-block; text-align:center; color:var(--col-333); font-size:16px; -webkit-transition:.4s; transition:.4s;}
.switch.type3 .slider span.no_txt {right:0;left:60px;}
.switch.type3 input:checked + label .no_txt, .switch.type3 input + label .on_txt {display:block;}
.switch.type3 input:checked + label .slider {background-color:var(--col-white);}
.switch.type3 input:checked + label .slider:after {position:absolute; content:'개인'; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); background-color:var(--col-green); border:1px solid var(--col-green);}
.switch.type3 input:disabled + label .slider {background-color:#e6e6e6;}

/* ============================== [ Utility Class ] ========================================================================================== */

/* display */
.block {display:block !important;}
.inline_block {display:block !important;}
.flex {display:flex !important;}
.inline_flex {display:inline-flex;}
.hidden {overflow:hidden !important;}
.ir {position:fixed; top:-9999px; font-size:1px; width:1px; height:1px; text-indent:-9999px; opacity:0;}
.blind {display:block; position:absolute; margin:-1px; overflow:hidden; clip-path:polygon(0 0, 0 0, 0 0); width:1px; height:1px;}

/* font-style */
.h1_sb {display:block; line-height:48px; font-size:36px; font-weight:600; color:var(--col-111);}
.h1_b {display:block; line-height:48px; font-size:36px; font-weight:700; color:var(--col-111);}
.h2_sb {display:block; line-height:40px; font-size:28px; font-weight:600; color:var(--col-111);}
.t1_sb {line-height:34px; font-size:24px; font-weight:600; color:var(--col-111);}
.t2_sb {line-height:30px; font-size:20px; font-weight:600; color:var(--col-111);}
.t2_r {line-height:30px; font-size:20px; font-weight:400; color:var(--col-111);}
.t3_sb {line-height:28px; font-size:18px; font-weight:600; color:var(--col-111);}
.t3_r {line-height:28px; font-size:18px; font-weight:400; color:var(--col-111);}
.b1_sb {line-height:28px; font-size:16px; font-weight:600; color:var(--col-333);}
.b1_r {line-height:28px; font-size:16px; font-weight:400; color:var(--col-333);}
.b2_r {line-height:28px; font-size:16px; font-weight:400; color:var(--col-555);}
.b3_r {line-height:28px; font-size:16px; font-weight:400; color:var(--col-999);}
.b4_r {line-height:28px; font-size:16px; font-weight:400; color:var(--col-gray);}
.s1_sb {line-height:28px; font-size:14px; font-weight:600; color:var(--col-555);}
.s1_r {line-height:28px; font-size:14px; font-weight:400; color:var(--col-555);}
.s1_r.lh24{line-height:24px;}

/* flex */
.flex_shrink0 {flex-shrink: 0;}

/* justify content */
.js_start {justify-content:flex-start;}
.js_end {justify-content:flex-end;}
.js_center {justify-content:center;}
.js_btw {justify-content:space-between;}

/* align item */
.al_start {align-items:flex-start !important;}
.al_end {align-items:flex-end !important;}
.al_center {align-items:center !important;}

/* position */
.relative {position:relative;}
.absolute {position:absolute;}

/* word-break */
.keep_all {word-break:keep-all;}

/* margin */
.mt04 {margin-top:4px !important;}
.mt08 {margin-top:8px !important;}
.mt16 {margin-top:16px !important;}
.mt24 {margin-top:24px !important;}
.mt32 {margin-top:32px !important;}
.mt40 {margin-top:40px !important;}
.mt60 {margin-top:60px !important;}
.mt120 {margin-top:120px !important;}

.mb04 {margin-bottom:4px !important;}
.mb08 {margin-bottom:8px !important;}
.mb24 {margin-bottom:24px !important;}
.mb60 {margin-bottom:60px !important;}
.mb120 {margin-bottom:120px !important;}

.ml04 {margin-left:4px !important;}
.ml08 {margin-left:8px !important;}
.ml16 {margin-left:16px !important;}
.ml24 {margin-left:24px !important;}
.ml40 {margin-left:40px !important;}
.ml60 {margin-left:60px !important;}
.ml90 {margin-left:90px !important;}

.mr04 {margin-right:4px !important;}
.mr08 {margin-right:8px !important;}
.mr16 {margin-right:16px !important;}
.mr32 {margin-right:32px !important;}
.mr40 {margin-right:40px !important;}

/* padding */
.pd_none {padding:none !important;}

.pt08 {padding-top:8px !important;}
.pt24 {padding-top:24px !important;}
.pt40 {padding-top:40px !important;}
.pt60 {padding-top:60px !important;}

.pb60 {padding-bottom:60px !important;}
.pb120 {padding-bottom:120px !important;}
.pb180 {padding-bottom:180px !important;}

.pl04 {padding-left:4px !important;}
.pl30 {padding-left:30px !important;}

.pr30 {padding-right:30px !important;}

/* width */
.w_100 {width:100% !important;}

/* border */
.bd_none {border:none !important;}
.bd_ddd {border:1px solid var(--col-ddd);}

/* bg */
.bg_sky {background-color:var(--col-sky) !important;}

/* font size */
.fs12 {font-size:12px !important;}
.fs14 {font-size:14px !important;}
.fs16 {font-size:16px !important;}

/* font color */
.font_333 {color: var(--col-333);}
.font_555 {color:var(--col-555) !important;}
.font_red {color:var(--col-red) !important;}
.font_blue {color:var(--col-blue) !important;}
.font_green {color: var(--col-green) !important;}
.font_white {color:var(--col-white) !important;}
.font_border {color:var(--col-eee) !important;}

/* text align */
.text_left {text-align:left !important;}
.text_center {text-align:center !important;}
.text_right {text-align:right !important;}

/* vertical align */
.vtal_03 {vertical-align:3px;}

.vtal_m01 {vertical-align:-1px;}
.vtal_m02 {vertical-align:-2px;}
.vtal_m03 {vertical-align:-3px;}
.vtal_m04 {vertical-align:-4px;}
.vtal_m05 {vertical-align:-5px;}
.vtal_m06 {vertical-align:-6px;}

/* text-decoration */
.under_line {text-decoration:underline !important;}

/* ============================== [ Component ] ========================================================================================== */

/* btn */
.box_btn_wrap {display:flex; flex-wrap:wrap; align-items:center;}
.popup_btn_wrap {position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:140px; background:var(--col-white); text-align:center;}
.popup_btn_wrap.sticky {box-shadow: 0 -5px 10px 7px rgba(221, 221, 221, 0.16);}
.btn_small {padding:0 8px; height:24px; border:1px solid var(--col-gray); border-radius:50px; background-color:var(--col-white); font-size:14px; text-align:center;}
.btn_medium {padding:4px 12px; height:32px; line-height:24px; border:1px solid var(--col-gray); border-radius:4px; background-color:var(--col-white); font-size:14px; text-align:center;}
.btn_medium.b1_sb {padding:4px 12px; height:40px; line-height:24px; border-radius:4px; background-color:var(--col-white); font-size:16px; text-align:center;}
.btn_large {display:inline-block; padding:10px 16px; line-height:28px; border-radius:4px; background-color:var(--col-white); font-size:16px; text-align:center;}
.btn_big {display:inline-block; padding:10px 24px; min-width:112px; line-height:28px; border-radius:4px; background-color:var(--col-white); font-size:16px; text-align:center;}
.btn_pad_cust1 {padding: 6px 12px;} /* 250616 추가 */
[class^=btn].fill {background-color:var(--col-blue); color:var(--col-white);}
[class^=btn].type01 {border:1px solid var(--col-blue); color:var(--col-blue);}
[class^=btn].type02 {border:1px solid var(--col-gray); color:var(--col-333);}
[class^=btn].r30 {border-radius: 30px;} /* 250616 추가 */
[class^=btn].mw_auto {min-width: auto;} /* 250616 추가 */


/* input value reset x button */
button[type^=reset] {position:absolute; top:50%; transform:translateY(-50%); right:50px; width:18px; height:18px; background:url("/wk/static/images/jc/icon/icon_bold_close.svg") no-repeat; background-size: cover;}

/* indent */
.indent_bullet {position:relative; padding-left:16px;}
.indent_bullet::before {position:absolute; left:4px; top:12px; width:1px; height:1px; border:1px solid #333; border-radius:50%; background:#333; content:"";}

/* icon*/
.s16 {display:inline-block; width:16px; height:16px;}
.s18 {display:inline-block; width:18px; height:18px;}
.s24 {display:inline-block; width:24px; height:24px;}

.icon_home {background:url("/wk/static/images/jc/icon/icon_home.svg") no-repeat; background-size:cover;}
.icon_home_white {background:url("/wk/static/images/jc/icon/icon_home_white.svg") no-repeat; background-size:cover;}
.icon_timer {background:url("/wk/static/images/jc/icon/icon_timer.svg") no-repeat; background-size:cover;}
.icon_arrow_gray {background:url("/wk/static/images/jc/icon/icon_arrow_gray.svg") no-repeat; background-size:cover;}
.icon_delete {background:url("/wk/static/images/jc/icon/icon_delete.svg") no-repeat; background-size:cover;}
.icon_pencil {background:url("/wk/static/images/jc/icon/icon_pencil.svg") no-repeat; background-size:cover;}
.icon_pencil_blue {background:url("/wk/static/images/jc/icon/icon_pencil_blue.svg") no-repeat; background-size:cover;}
.icon_plus {background:url("/wk/static/images/jc/icon/icon_plus.svg") no-repeat; background-size:cover;}
.icon_plus_blue {background:url("/wk/static/images/jc/icon/icon_plus_blue.svg") no-repeat; background-size:cover;}
.icon_share {background:url("/wk/static/images/jc/icon/icon_share.svg") no-repeat; background-size:cover;}
.icon_share_blue {background:url("/wk/static/images/jc/icon/icon_share_blue.svg") no-repeat; background-size:cover;}
.icon_download {background:url("/wk/static/images/jc/icon/icon_download.svg") no-repeat; background-size:cover;}
.icon_arrow_right {background:url("/wk/static/images/jc/icon/icon_arrow2_right.svg") no-repeat; background-size:cover;}
.icon_member_mypage {background:url("/wk/static/images/jc/icon/icon_member_mypage.svg") no-repeat; background-size:cover;}
.icon_memo_edit {background:url("/wk/static/images/jc/icon/icon_memo_edit.svg") no-repeat; background-size:cover;}
.icon_graduation {background:url("/wk/static/images/jc/icon/icon_graduation.svg") no-repeat; background-size:cover;}
.icon_bag {background:url("/wk/static/images/jc/icon/icon_bag.svg") no-repeat; background-size:cover;}
.icon_chart {background:url("/wk/static/images/jc/icon/icon_chart.svg") no-repeat; background-size:cover;}
.icon_message {background:url("/wk/static/images/jc/icon/icon_message-search.svg") no-repeat; background-size:cover;}
.icon_thumbs {background:url("/wk/static/images/jc/icon/icon_thumbs.svg") no-repeat; background-size:cover;}
.icon_news {background:url("/wk/static/images/jc/icon/icon_news.svg") no-repeat; background-size:cover;}
.icon_bold_plus {background:url("/wk/static/images/jc/icon/icon_bold_plus.svg") no-repeat; background-size:cover;}
.icon_youtube {background:url("/wk/static/images/jc/icon/icon_youtube.svg") no-repeat; background-size:cover;}
.icon_checkbox {background:url("/wk/static/images/jc/icon/icon_checkbox.svg") no-repeat; background-size:cover;}
.icon_home_guide {background:url("/wk/static/images/jc/icon/icon_home_guide.svg") no-repeat; background-size:cover;}
.icon_segment {background:url("/wk/static/images/jc/icon/icon_segment.svg") no-repeat; background-size:cover;}
.icon_list {background:url("/wk/static/images/jc/icon/icon_list.svg") no-repeat; background-size:cover;}
.icon_print {background:url("/wk/static/images/jc/icon/icon_print.svg") no-repeat; background-size:cover;}
.icon_magic {background:url("/wk/static/images/jc/icon/icon_magic.svg") no-repeat; background-size:cover;}
.icon_medal {background:url("/wk/static/images/jc/icon/icon_medal_star.svg") no-repeat; background-size:cover;}
.icon_jobfind_search {background:url("/wk/static/images/jc/icon/icon_jobfind_search.svg") no-repeat; background-size:cover;}

.icon_briefcase_fill {background:url("/wk/static/images/jc/icon/icon_briefcase_black.svg") no-repeat; background-size:cover;}
.icon_magic_fill {background:url("/wk/static/images/jc/icon/icon_magic_black.svg") no-repeat; background-size:cover;}
.icon_medal_fill {background:url("/wk/static/images/jc/icon/icon_medal_black.svg") no-repeat; background-size:cover;}
.icon_note_fill {background:url("/wk/static/images/jc/icon/icon_note_black.svg") no-repeat; background-size:cover;}
.icon_note_blue {background:url("/wk/static/images/jc/icon/icon_note_blue2.svg") no-repeat; background-size:cover;}
.icon_money_fill {background:url("/wk/static/images/jc/icon/icon_money_black.svg") no-repeat; background-size:cover;}
.icon_age_fill {background:url("/wk/static/images/jc/icon/icon_age_black.svg") no-repeat; background-size:cover;}
.icon_email {background:url("/wk/static/images/jc/icon/icon_email.svg") no-repeat; background-size:cover;}
.icon_kakao {background:url("/wk/static/images/jc/icon/icon_kakao.svg") no-repeat; background-size:cover;}
.icon_alert {background:url("/wk/static/images/jc/icon/icon_alert.svg") no-repeat; background-size:cover;}
.icon_filter {background:url("/wk/static/images/jc/icon/icon_filter.svg") no-repeat; background-size:cover;}
.icon_location {background:url("/wk/static/images/jc/icon/icon_location.svg") no-repeat; background-size:cover;}
.icon_status_good {background:url("/wk/static/images/jc/icon/icon_status_good.svg") no-repeat; background-size:cover;}
.icon_status_normal {background:url("/wk/static/images/jc/icon/icon_status_normal.svg") no-repeat; background-size:cover;}
.icon_status_bad {background:url("/wk/static/images/jc/icon/icon_status_bad.svg") no-repeat; background-size:cover;}

/* 라벨 박스 */
[class*=label_].type01 {padding:5px 8px; background:var(--col-white);}
.label_blue {padding:4px 6px; border:1px solid var(--col-blue);  border-radius:4px; font-weight: 600; font-size:12px; color:var(--col-blue);}
.label_navy {padding:4px 6px; border:1px solid var(--col-navy);  border-radius:4px; font-weight: 600; font-size:12px; color:var(--col-navy);}
.label_green {padding:4px 6px; border:1px solid var(--col-green);  border-radius:4px; font-weight: 600; font-size:12px; color:var(--col-green);}
.label_purple {padding:4px 6px; border:1px solid var(--col-purple);  border-radius:4px; font-weight: 600; font-size:12px; color:var(--col-purple);}

/* 삭제 버튼 */
.del_btn32 {padding:0; width:32px; height:32px; border-radius:4px; background:url("/wk/static/images/jc/icon/icon_bold_close.svg") 50% 50% no-repeat var(--col-gray2);}
.del_btn60 {padding:0; width:60px; height:60px; border-radius:8px; background:url("/wk/static/images/jc/icon/icon_bold_close.svg") 50% 50% no-repeat var(--col_box_bg);}

/* bread cumb */
.location {margin:0 auto; padding-top:24px; width:1248px;}
.location ul li {display:flex; position:relative; align-items:center;}
.location_cont {display:flex; gap:32px;}
.location ul li:not(:last-child)::after {display:block; content:""; position:absolute; top:50%; transform:translateY(-50%); right:-25px; width:16px; height:16px; background:url("/wk/static/images/jc/icon/icon_line_right_gray.svg") no-repeat;}

/* 강조(필수)  */
.essential {position:relative; display:inline-block; top:0; left:6px; margin-right:10px; width:6px; height:6px;}
.essential:after {display:block; position:absolute; left:-2px; top:-10px; color:var(--col-red); content:'*';}

/* gap 박스 */
[class*=gap_box] {display:flex;}
[class*=gap_box].inline {display: inline-flex;}
[class*=gap_box].column {flex-direction:column;}
.gap_box04{gap:4px;}
.gap_box08{gap:8px;}
.gap_box12{gap:12px;}
.gap_box16{gap:16px;}
.gap_box24{gap:24px;}

/* Tooltip */
.btn_help {width:18px; height:18px;background: url("/wk/static/images/jc/icon/icon_question_on.svg") 0 0 no-repeat; vertical-align:middle; background-size: cover;}
.btn_help.prm {background:url("/wk/static/images/ico16_caution_filled.svg") 0 0 no-repeat;}
.box_help-data {display:none; position:absolute; bottom:30px; left:0; padding:6px 16px; min-width:196px; min-height:36px; background-color:var(--col-white); border:1px solid var(--col-blue); border-radius:12px; box-shadow:0 8px 16px rgba(0, 0, 0, 0.04); z-index:9; visibility:hidden; opacity:0; text-align:left !important}
.box_help-data.w_big {width: 450px;}
.box_help-data.w_big.p_center .tail::before {top: 27px; left: 225px; transform: rotate(135deg);}
.box_help-data.w_big.p_center .tail::after {top: 25px; left: 224px; transform: rotate(135deg);}
.box_tooltip .tail::before
.btn_help.active + .box_help-data {visibility:visible;opacity:1; display: block;}
.box_tooltip {position:relative; display:inline-block; vertical-align:middle;}
.box_tooltip .tail {position: relative; top: -41px; left: -18px;}
.box_tooltip .tail::before {position: absolute; top: 24px; left: 21px; width: 0; height: 0; content: ""; background: inherit; z-index: 11; border-right: 8px solid transparent; border-left: 0px; border-bottom: 9px solid var(--col-white);}
.box_tooltip .tail::after {position: absolute; top: 22px; left: 20px; width: 0; height: 0; content: ""; background: inherit; z-index: 10; border-right: 9px solid transparent; border-left: 0px; border-bottom: 9px solid var(--col-blue);}
.box_tooltip .box_help-data.active {visibility:visible;opacity:1; display: block;}
.box_help-data .txt_list {font-size:14px;line-height:24px}
.box_help-data .s1_sb {margin-bottom:4px}
.box_tooltip .icon_delete {width: 16px; height: 16px; position:absolute;right:12px;top:10px;background:url("/wk/static/images/jc/icon/icon_close.svg") no-repeat; background-size: cover;}
.box_tooltip.type2 .btn_help {background:url("/wk/static/images/icon_question_on.svg") 0 0 no-repeat}
.box_tooltip.type2 .btn_help.dis {background: url("/wk/static/images/icon_question_on.svg") 0 0 no-repeat;}
.box_tooltip.type2 .btn_help.ass {background:url("/wk/static/images/icon_caution_filled_red.svg") 0 0 no-repeat}
.box_tooltip.bottom .box_help-data {left:auto; bottom:auto; top:35px; min-width: 240px;}
.box_tooltip.bottom .box_help-data:after {left:13px; bottom:auto; top:-17px; transform:scaleY(-1)}
.box_tooltip.bottom .box_help-data:before {left:14px; bottom:auto; top:-1px; width:7px}

/* S: 도움말 팝업 심리검사 팝업만 별도처리 */
#hpjcah1000p01 .box_help-data {display:none; position:absolute; top: 4px; left: 500px; padding:6px 16px; min-width:196px; min-height:36px; background-color:var(--col-white); border:1px solid var(--col-blue); border-radius:12px; box-shadow:0 8px 16px rgba(0, 0, 0, 0.04); z-index:1000; visibility:hidden; opacity:0; text-align:left !important}
#hpjcah1000p01 .box_help-data.w_big {width: 450px; height: 320px;}
#hpjcah1000p01 .box_help-data .tail::before {position: absolute; top: 313px; left: 225px; width: 0; height: 0; content: ""; background: inherit; z-index: 11; border-right: 8px solid transparent; border-left: 0px; border-bottom: 9px solid var(--col-white); transform: rotate(315deg);}
#hpjcah1000p01 .box_help-data .tail::after {position: absolute; top: 314px; left: 225px; width: 0; height: 0; content: ""; background: inherit; z-index: 10; border-right: 9px solid transparent; border-left: 0px; border-bottom: 9px solid var(--col-blue); transform: rotate(315deg);}
#hpjcah1000p01 .box_help-data.active {visibility:visible; opacity:1; display: block;}
#hpjcah1000p01 .box_help-data .txt_list {font-size:14px;line-height:24px}
#hpjcah1000p01 .box_help-data .s1_sb {margin-bottom:4px}
#hpjcah1000p01 .box_help-data .icon_delete {width: 16px; height: 16px; position:absolute;right:12px;top:10px;background:url("/wk/static/images/jc/icon/icon_close.svg") no-repeat; background-size: cover;}
/* E: 도움말 팝업 심리검사 팝업만 별도처리 */

/* 말줄임 text-overflow ellipsis */
.text_ellipsis {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.text_ellipsis2 {text-overflow:ellipsis; overflow:hidden; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.text_ellipsis3 {text-overflow:ellipsis; overflow:hidden; word-break:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}

/* 아코디언 */
.expand_content_area {padding-bottom:16px;}
.btn_expand_section.exp strong {text-decoration:underline; color:var(--col-blue);}
.btn_expand_section:hover strong {text-decoration:underline; color:var(--col-blue);}
.btn_expand_section.exp .btn_arrow_type::after {background:url("/wk/static/images/jc/icon/icon_arrow2_up_color.svg") no-repeat;}
.expand_cont_type .btn_arrow_type {position:absolute; right:0; top:0; z-index:2; width:auto; padding:0; border:0;}
.expand_cont_type .btn_arrow_type:after {content:''; position:absolute; right:24px; top:24px; display:inline-block; width:24px; height:24px; background:url("/wk/static/images/jc/icon/icon_arrow2_down.svg") no-repeat; transform:rotate(0deg); transform-style:preserve-3d;}
.expand_cont_type .btn_arrow_type.exp:after {background:url("/wk/static/images/jc/icon/icon_arrow2_up_color.svg") no-repeat; transform:rotate(0deg);}

/* notice box */
.box_notice_wrap{display:flex; padding:16px 24px; border:1px solid #ddd; border-radius:8px; background:#fff; text-align:left;}
.box_notice_wrap .tit {position:relative; min-width:60px; margin-right:24px; padding-left:32px; font-weight:600; line-height:28px;}
.box_notice_wrap .tit:before {display:block; position:absolute; left:0; top:2px; width:24px; height:24px; background:url("/wk/static/images/jc/icon/icon_loudspeaker.svg") no-repeat; content:'';} /* 241128 icon_loudspeaker_green -> icon_loudspeaker 파일명 변경 및 이미지 교체 */
.box_notice_wrap .box_list_area {display: flex; flex-direction: column; justify-content: center; flex:1; gap: 4px;}
.box_notice_wrap .box_list_area .txt_list{position:relative; padding-left:12px; color:var(--col-555);}
.box_notice_wrap .box_list_area .txt_list:before, .sym_cir::before {display:block; position:absolute; left:0; top:10px; width:4px; height:4px; background:#555; border-radius:50%; content:'';}

/* textarea */
.box_textarea {flex:1;}
.box_textarea textarea {min-height:120px; border: 1px solid var(--col-gray); line-height:28px; font-size:16px; font-weight:400; color:var(--col-333);}
.box_textarea .txt_byte {line-height:24px; font-size:14px; text-align:right; color:var(--col-gray);}

/* 241125 textarea 접근성 추가 */
.flex_order {display: flex; flex-direction: column;}
.flex_order textarea {order: 1;}
.flex_order p {order: 2;}

/* 지붕 박스 */
.box_roof_blue {display:flex; flex-direction:column; background:var(--col-white); border:1px solid var(--col-ddd) ; border-radius:8px;}
.box_roof_blue .tit {display:flex; justify-content:space-between; padding:16px 24px; background:var(--col-blue);  border-top-left-radius:8px; border-top-right-radius:8px;}
.box_roof_blue .tit.type01 {justify-content:flex-start;}
.box_roof_blue .roof_info ul {display:flex; flex-direction:column; padding:24px; gap:16px;}
.box_roof_blue .roof_info ul li {display:grid; grid-template-columns:64px 1fr; gap:16px;}
.box_roof_blue .roof_video {padding:24px;}
.box_roof_blue .roof_video .video_area {margin-top:24px; display:flex; align-items:center; gap:16px;}
.box_roof_blue .roof_video .video_area strong {flex-shrink:0;}
.box_roof_blue .roof_video ul {display:flex; gap:8px; flex-wrap:wrap;}
.box_roof_blue .roof_video ul li a{display:inline-block; padding:3px 16px; border-radius:50px; border:3px solid var(--col_box_bg); background:var(--col_box_bg); line-height:28px; font-size:16px; font-weight:400;}
.box_roof_blue .roof_video ul li a:hover {border:3px solid var(--col-blue); color:var(--col-blue); font-weight: 600;}

/* select box */
.select_box {height:40px; flex:1;}
.select_box select {padding:6px 12px 6px 16px; width:100%; height:100%; border-radius:4px; border:1px solid var(--col-gray); background-color:var(--col-white); line-height:28px; font-size:16px; font-weight:400; color:var(--col-gray);}

/* title box */
.tit_box {display:flex; justify-content:space-between;}
/* h2 level title box */
.box_table_hd {display:flex; justify-content:space-between;}

/* input wrap */
.box_ipt_frm {padding:24px 0;}
.box_ipt_frm:not(:first-child) {border-top:1px dashed var(--col-eee);}
.box_ipt_frm .cell {display:flex; flex-direction:column; gap:8px;}
.box_ipt_frm .cell.error {gap:10px;}
.box_ipt_frm .cell.error select, .box_ipt_frm .cell.error input, .box_ipt_frm .cell.error textarea{border:1px solid var(--col-red) !important;}/* 20240820 김대훈 수정 */
.box_ipt_frm .cell .error_msg {line-height:24px; font-size:14px; font-weight:400; color:var(--col-red);}
.box_ipt_frm > ul {display:flex; flex-direction:column; margin-top:24px; gap:12px;}
.box_ipt_frm > ul li {display:grid; grid-template-columns:120px 1fr; gap:8px;}
.box_ipt_frm > ul li > .tit {margin-top:8px;}
.box_ipt_frm > ul li .input_box {height:40px; flex:1;}
.box_ipt_frm > ul li .input_box input {padding:6px 12px 6px 16px; width:100%; height:100%; border-radius:4px; border:1px solid var(--col-gray); line-height:28px; font-size:16px; font-weight:400; color:var(--col-333);}
.box_ipt_frm > ul li .date_box {display:flex; gap:8px;}
.box_ipt_frm > ul li .date_box .date_year {display:inline-block; width:120px; height:40px;}
.box_ipt_frm > ul li .date_box .date_month {display:inline-block; width:72px; height:40px;}
.box_ipt_frm > ul li .date_box select {padding:6px 12px 6px 16px; width:100%; height:100%; border-radius:4px; border:1px solid var(--col-gray); line-height:28px; font-size:16px; font-weight:400; color:var(--col-gray);}
.box_ipt_frm > ul li .date_box .date_line {align-self:flex-start; margin:5px 4px; width:8px; line-height:28px; font-size:16px; text-align:center; color:var(--col-333); vertical-align:top;}
.box_ipt_frm > ul li .search_box {display:flex; flex-direction:column; flex:1; gap:8px;}
.box_ipt_frm > ul li .search_box .box_input {position:relative; flex:1; width:100%; height:40px;}
.box_ipt_frm > ul li .search_box input:not([type=checkbox]) {padding:6px 12px 6px 16px; width:100%; height:40px; border-radius:4px; border:1px solid var(--col-gray);}
.box_ipt_frm > ul li .search_box .icon_search {display:block; position:absolute; top:50%; transform:translateY(-50%); right:12px; width:24px; height:24px; background:url("/wk/static/images/jc/icon/icon_search_mo.svg") no-repeat;}
.box_ipt_frm > ul li .search_box .search_list {display:flex; flex-direction:column; overflow-y:scroll; max-height:204px; overscroll-behavior:contain;}
.box_ipt_frm > ul li .search_box .search_list li {display:flex; gap:8px;}
.box_ipt_frm > ul li .search_box .search_list::-webkit-scrollbar {width:6px;}
.box_ipt_frm > ul li .search_box .search_list::-webkit-scrollbar-thumb {background:var(--col-ddd); /* 스크롤바 막대 색상 */ border-radius:12px;}
.box_ipt_frm > ul li .search_box .search_list::-webkit-scrollbar-track {background:inherit; /* 스크롤바 막대 색상 */}
.box_ipt_frm > ul li .search_box .search_list_checkbox {display:block;}
.box_ipt_frm > ul li .search_box [class^=search_list] li div {display:flex;}
.box_ipt_frm > ul li .search_box [class^=search_list_] {border:1px solid var(--col-ddd); border-radius:4px; background:var(--col-white); box-shadow:2px 2px 36px 0px rgba(17, 17, 17, 0.08);}
.box_ipt_frm > ul li .search_box [class^=search_list_] .search_list li:hover {background:var(--col-sky2);font-size:16px; font-weight:600;}
.box_ipt_frm > ul li .search_box [class^=search_list_] .search_list li:hover span{font-size:16px; font-weight:600; color:var(--col-333);}
.box_ipt_frm > ul li .search_box [class^=search_list_] .search_list li div {padding :4px 16px; width:95%; height:100%;}
.box_ipt_frm > ul li .search_box [class^=search_list_] > div {display:inline-grid; width:100%; padding:8px 4px 12px 0;}
.box_ipt_frm > ul li .search_box [class^=search_list_] > button {padding :8px 16px; width:100%; line-height:28px; border-top:1px solid var(--col-sky); background:var(--col-sky3); font-size:16px; font-weight:600;}
.box_ipt_frm > ul li .search_box .search_list_queue {display:block; width:100%; line-height:28px; font-size:16px; font-weight:400; text-align:center; color:var(--col-gray);}
.box_ipt_frm > ul li .search_box .search_list_button .search_list li {position:relative;}
.box_ipt_frm > ul li .search_box .search_list_button .search_list li::after {position:absolute; right:17px; top:50%; display:block; width:16px; height:16px; background:url("/wk/static/images/jc/icon/icon_arrow1_up.svg") 0 0 no-repeat; transform:translateY(-50%); content:"";}
.box_ipt_frm > ul li .search_box .search_list_button .search_list li button {display:inline-block; width:90%; text-align:left;}
.box_ipt_frm > ul li .search_box .search_list_button .search_list li button span {display:block; width:100%; line-height:28px; font-size:16px; font-weight:400; color:var(--col-gray); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* grid box */

.box_grid_wrap {padding:32px 24px; border-radius:8px; background:var(--col-sky);}
.box_grid_wrap .box_grid2.type02 .tit > p {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width: 250px;}

.box_grid2 {display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.box_grid2 > li {position:relative; display:flex; flex-direction:column; padding:24px; gap:8px; outline:1px solid var(--col-ddd); background:var(--col-white); border-radius:8px;}
.box_grid2 > li.new_profile {padding: 0;}
.box_grid2 > li.new_profile a {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:24px; height: 100%; border:none; border-radius:8px;} /* 241125 접근성 관련 건으로 수정 */
.box_grid2 > li:not(.no_hover):hover {box-shadow:0 0 0 3px var(--col-blue); outline: none !important;}
.box_grid2 > li:not(.no_hover):hover .tit strong {color:var(--col-blue); text-decoration:underline;}
.box_grid2.type01 .rcmd_content {display:flex; margin-top:16px;  gap:24px;}
.box_grid2.type01 .rcmd_content .rcmd_info {display:flex; flex-direction:column; width:380px;}
.box_grid2.type01 .rcmd_content .rcmd_info ul {display:flex; margin-top:8px; gap:12px;}
.box_grid2.type01 .rcmd_content .rcmd_info ul li{display:flex; flex-direction:column; padding:16px 8px; width:calc(100% / 3); border-radius: 8px; background:var(--col-sky); text-align:center;}
.box_grid2.type01 .rcmd_content .chart_info {display:flex; flex-direction:column; flex:1; gap:8px;}
.box_grid2.type01 .rcmd_content .chart_info p {display:flex; justify-content:space-between; width:100%;}
.box_grid2.type01 .tit {display:flex; justify-content:space-between;}
.box_grid2.type01 .tit p {width:510px;}
.box_grid2.type01 .tit p > span {position: relative; display: inline-block; width: 100%; text-align: right;}


.rep {position: absolute; top: -25px; left: 0; width: 44px; height: 50px; background : url("/wk/static/images/jc/badge/badge_txt.png") no-repeat}
.rep.set {position: absolute; top: -24px; left: 0; width: 44px; height: 50px; background : url("/wk/static/images/jc/badge/badgeSet_txt.png") no-repeat}
.rep.rel {display: block; position: relative; top: 0;}
.rep.rel.set {background : url("/wk/static/images/jc/badge/badgeSet_txt_pop.png") no-repeat}

.box_grid2.type01 li:hover .tit p a{color: var(--col-blue);}
.box_grid2.type02 .tit {display:flex; justify-content:space-between;}
.box_grid2.type02 .tit .jobplan_button {min-width: 135px;}
.box_grid2.type02 li {border:none; box-shadow: 2px 2px 20px 0px rgba(17, 17, 17, 0.08);}
.box_grid2.type01 > li:not(.no_hover) {outline:1px solid var(--col-ddd);}
.box_grid2 .box_sky {display:flex; flex-direction:column; gap:8px;}
.box_grid2 .box_sky li {background:var(--col-sky); border-radius:8px;}
.box_grid2 .box_sky li:hover {box-shadow:0 0 0 3px var(--col-blue);}
.box_grid2 .box_sky li:hover .icon_briefcase_fill {background: url("/wk/static/images/jc/icon/icon_briefcase_blue.svg");}
.box_grid2 .box_sky li:hover .icon_magic_fill {background: url("/wk/static/images/jc/icon/icon_magic_blue.svg");}
.box_grid2 .box_sky li:hover .icon_medal_fill {background: url("/wk/static/images/jc/icon/icon_medal_blue.svg");}
.box_grid2 .box_sky li:hover .icon_note_fill {background: url("/wk/static/images/jc/icon/icon_note_blue.svg");}
.box_grid2 .box_sky li:hover .icon_money_fill {background: url("/wk/static/images/jc/icon/icon_money_blue.svg");}
.box_grid2 .box_sky li:hover .icon_age_fill {background: url("/wk/static/images/jc/icon/icon_age_blue.svg");}
.box_grid2 .box_sky li > a {display:flex; gap:16px; align-items:center; padding:16px 20px}
.box_grid2 .box_sky li > a span:nth-child(2) {flex:1;}
.box_grid2 .box_type01 .box_sky li > a > span:nth-child(1) {display:flex; align-items:center; gap:6px; width:110px;}
.box_grid2 .box_type01 .box_sky > li:hover > a strong.category {color: var(--col-blue); text-decoration: underline;}
.box_grid2 .box_type02 .box_sky li > a > span:nth-child(1) {display:flex; align-items:center; gap:6px; width:90px;}
.box_grid2 .box_type02 .box_sky > li:hover > a strong.category {color: var(--col-blue); text-decoration: underline;}
.box_grid2 .box_type03 {background:var(--col-sky); border:none; outline: none;}
.box_grid2 .box_type03 [class*=label] {background:var(--col-white);}
.box_grid2 .box_type03 a {display:flex; justify-content:space-between; align-items:center;}
.box_grid2 .box_type03 a > span {display:inline-flex; flex-direction:column; gap:8px;}
.box_grid2 .box_type03:hover {background:var(--col-white)}
.box_grid2 .box_type03:hover .tit strong {color:var(--col-blue); text-decoration:underline;}

.box_grid2.flow_list {position: relative; gap: 72px !important;}
.box_grid2.flow_list > li + li::before {position: absolute; top: 50%; left: -50px; display: block; width: 28px; height: 24px; background: url("/wk/static/images/jc/icon/icon_next_arrow.svg"); content: "";}
.box_grid2 .box_style01 {padding: 32px 24px; border: 1px solid var(--col-blue); border-radius: 8px;}
.box_grid2 .box_style02 {padding: 32px 24px; border: none; outline: none; background: var(--col-gray2); border-radius: 8px;}
.box_grid2 .box_style03 {padding: 32px 24px; border: none; outline: none; background: var(--col-sky); border-radius: 8px;}
.box_grid2 [class^=box_style] .item_list {display: flex; flex-wrap: wrap; gap: 8px;}
.box_grid2 [class^=box_style] .item_list li {display: inline-block; padding: 8px 24px; border-radius: 50px;}
.box_grid2 [class^=box_style] .item_list.positive li {background: var(--col-sky); font-size: 16px; font-weight: 600; line-height: 28px; color: var(--col-blue); letter-spacing: -0.32px;}
.box_grid2 [class^=box_style] .item_list.negative li {background: var(--col-ddd); font-size: 16px; font-weight: 400; line-height: 28px; color: var(--col-333); letter-spacing: -0.32px;}
.box_grid2.flow_list [class^=box_style] .item_list.negative li {padding: 12px 24px; background: var(--col-ddd); width: 100%; border-radius: 8px; text-align: center; color: var(--col-333);}
.box_grid2.flow_list [class^=box_style] .item_list.positive li {padding: 12px 24px; background: var(--col-white); width: 100%; border-radius: 8px; text-align: center; color: var(--col-blue);}

/* chart wrap */
.box_chart .chart_area {padding:40px; border-radius:8px; background:var(--col-sky);}
.box_chart .chart_info {display:flex; flex-direction:column; gap:8px;}
.box_chart .chart_info.type01 li {display:grid; grid-template-columns:28px 1fr; gap:8px;}
.box_chart .chart_info.type02 li {display:grid; grid-template-columns:72px 1fr; gap:16px;}
.box_chart .selbox_area.type04 .radio_box label {padding-left: 24px;}
.box_chart .selbox_area.type04 .radio_box label::before {width: 16px; height: 16px; top: 1px;}
.box_chart .selbox_area.type04 .radio_box input[type="radio"]:checked + label::after {width: 8px; height: 8px;top: 6px; left: 5px;}

.box_chart.type01 .chart_area {display: flex; justify-content: space-between; padding: 32px 24px;} /* 250617 추가 */
.box_chart.type01 .chart_area .desc_area {display: flex; flex-direction: column; gap: 24px; width: 420px;}
.box_chart.type01 .chart_area .interest_code {display: flex; justify-content: center; padding: 8px 40px; border-radius: 8px; background-color: var(--col-navy);}

.box_chart.type01 .chart_area .interest_table_wrap thead th,
.box_chart.type01 .chart_area .interest_table_wrap tbody td {border: 1px solid var(--col-ddd);}
.box_chart.type01 .chart_area .interest_table_wrap thead th:first-child {background-color: #CADEFF;}
.box_chart.type01 .chart_area .interest_table_wrap thead th:not(:first-child) {background-color: var(--col-sky2);}
.box_chart.type01 .chart_area .interest_table_wrap thead tr th,
.box_chart.type01 .chart_area .interest_table_wrap tbody tr td {padding: 8px 4px; vertical-align: middle; text-align: center;}
.box_chart.type01 .chart_area .interest_table_wrap tbody tr td {background: var(--col-white);}
.box_chart.type01 .chart_area .interest_table_wrap tbody tr:first-child td {border-top-width: 0px;}


/* select box */
.selbox_area {display:flex; align-items:center; padding:24px 40px; gap:40px; background:var(--col-sky2); border-radius:8px;}
.selbox_area.type01 li {display:flex; gap:24px; align-items:center;}
.selbox_area.type01 li:nth-child(1) > div {display:flex; gap:8px; width:400px; height:40px;}
.selbox_area.type01 li:nth-child(1) > div select {width:192px;}
.selbox_area.type01 li:nth-child(2) > div {display:flex; gap:8px; width:460px; height:40px;}
.selbox_area.type01 li:nth-child(2) > div select {width:212px;}
.selbox_area.type02 {width:760px;}
.selbox_area.type02 li {display:flex; gap:40px; align-items:center;}
.selbox_area.type02 li > div {display:flex; gap:8px; width:400px; height:40px;}
.selbox_area.type02 li > div select {width:240px;}
.selbox_area.type03 li {display:flex; gap:24px; align-items:center;}
.selbox_area.type03 li > div {display:flex; gap:8px; height:40px;}
.selbox_area.type03 li > div select {width:400px;}
/* S: 250103 테스트 추가 */
.selbox_area.type04 {flex-wrap: wrap; flex-direction: column; align-items: flex-start; gap: 24px;}
.selbox_area.type04 li {display: flex; align-items: center; gap: 24px;}
.selbox_area.type04 li > div {display: flex; gap: 8px;}
.selbox_area.type04 li:nth-child(1) > div select {width: 120px;} .selbox_area.type04 li:nth-child(2) > div select {width: 100px;}
.selbox_area.type04 li > div button {height: 40px;}
/* E: 250103 테스트 추가 */

.selbox_area button {padding:10px 16px; height:100%; border-radius:4px; border:1px solid var(--col-blue); background:var(--col-white); word-break:keep-all; line-height:0; font-size:16px; font-weight:600;  color:var(--col-blue);}

/* tab */
.tab_wrap .tab_title {display:flex;}
.tab_wrap .tab_title li {flex:1;}
.tab_wrap .tab_title li button, .tab_wrap .tab_title li a {display:block;width:100%;height:48px;border:none;background:var(--col-white);text-align:center;}
.tab_wrap .tab_title li button span, .tab_wrap .tab_title li a span {position:relative;display:block;height:100%;line-height:48px;border:1px solid var(--col-gray);background:var(--col-white);font-weight:400;font-size:16px;color:var(--col_body);}
.tab_wrap .tab_title li ~ li button span, .tab_wrap .tab_title li ~ li a span {border-left:none;}
.tab_wrap .tab_title li:first-child button span, .tab_wrap .tab_title li:first-child a span {border-top-left-radius:4px;border-bottom-left-radius:4px;}
.tab_wrap .tab_title li:last-child button span, .tab_wrap .tab_title li:last-child a span {border-top-right-radius:4px;border-bottom-right-radius:4px;}
.tab_wrap .tab_title li.active button span, .tab_wrap .tab_title li.active a span,
.tab_wrap .tab_title li.active:hover button span, .tab_wrap .tab_title li.active:hover a span {border:none;background:var(--col-blue);color:var(--col-white);font-weight:600;}
.tab_wrap .tab_title li.active button span:after, .tab_wrap .tab_title li.active a span:after {content:'';display:block;position:absolute;left:-1px;top:0;width:1px;height:100%;background:var(--col-blue);}
.tab_wrap.bg_type .tab_title li.active:first-child button span:after, .tab_wrap.bg_type .tab_title li.active:first-child a span:after {display:none;}

/* table wrap */
.table_group tbody {text-align:center;}
.table_group tbody .tit_s {position:relative;}
.table_group tbody .tit_s::after {position:absolute; display:inline-block; top:-4px; right:-15px; line-height:24px; font-size:14px; font-weight:400; color:var(--col-eee); content:"ㅣ";}
.table_group tbody .con_s {padding:20px;}
.table_group tbody tr td {vertical-align:middle;}
.table_group thead tr th {line-height:28px; font-size:16px; font-weight:600;}
.table_group tbody tr td {line-height:28px; font-size:16px; font-weight:400;}
.table_group.py12 td, .table_group.py12 th {padding-top: 12px !important; padding-bottom: 12px !important;}
.table_group .btn_box {display:flex; flex-direction:column; align-items:center; gap:4px}
.table_group .btn_box a {display:inline-block; width:72px; height:32px; padding:4px 0; border:1px solid var(--col-blue); border-radius:4px; font-size:14px; color:var(--col-blue); word-break:keep-all;}
.table_group .btn_box .icon_like {padding-left:18px; background:url("/wk/static/images/jc/icon/icon_like.svg") 25% 55% no-repeat;}
.table_group .btn_box .icon_unlike {padding-left:18px; background:url("/wk/static/images/jc/icon/icon_unlike.svg") 25% 55% no-repeat;}
.table_group [class*=tbl_label] {padding:4px 6px; border-radius:4px; font-size:12px; font-weight:400; color:var(--col-white);}
.table_group .label_box .tbl_label.g24 {background:var(--col-darkblue); border:1px solid var(--col-darkblue); color:var(--col-white);}
.table_group .label_box .tbl_label.blue {background:var(--col-white); border:1px solid var(--col-blue); color:var(--col-blue);}
.table_group .label_box .tbl_label.brown {background:var(--col-white); border:1px solid var(--col-brown); color:var(--col-brown);}
.table_group.border th, .table_group.border td{border-left: 1px solid var(--col-ddd); border-right: 1px solid var(--col-ddd);}
.table_group.type01 {margin-top:24px;}
.table_group.type01 thead tr {background:var(--col-gray2); border-top:1px solid var(--col-ddd);}
.table_group.type01 thead tr th {padding :12px;}
.table_group.type01 tbody tr {border-top:1px solid var(--col-ddd);}
.table_group.type01 tbody tr:last-child {border-bottom:1px solid var(--col-ddd);}
.table_group.type01 tbody tr td {padding:12px;}
.table_group.type01.pd04 thead th,.table_group.type01.pd04 tbody td {padding: 4px;}
.table_group.type01 input[type="checkbox"] + label:before, .table_group.type01 input[type="checkbox"]:checked + label:after {top:0;}
.table_group.type01 .no_data {line-height:28px; font-weight:400; font-size:16px; color:var(--col-gray); text-align:center;}
.table_group.type01 .item_count {margin-bottom:4px; line-height:28px; font-weight:600; font-size:16px;}
.table_group.type01 .item_count .count {color:var(--col-blue);}
.table_group.type02 thead tr {background:var(--col-sky); border-bottom:1px solid var(--col-ddd)}
.table_group.type02 thead tr th {padding :12px 0; border-top:1px solid var(--col-ddd); border-bottom:1px solid var(--col-ddd);}
.table_group.type02 tbody tr {border-bottom:1px solid var(--col-ddd);}
.table_group.type02 tbody tr td {padding:16px 24px;}
.table_group.type02 tbody tr td:nth-child(3) div {display:flex; flex-direction:column; gap:4px; text-align:left}
.table_sticky {position: sticky; top: 100px;}

/* select item */
.selected_item {display:flex; flex-wrap:wrap; gap:8px;}
.selected_item div {display:flex; position:relative; padding:4px 32px 4px 12px; align-items:flex-start; gap:10px; border-radius:20px; background:var(--col-gray2);}
.selected_item span {line-height:24px; font-size:14px; font-weight:400; color:var(--col-333);}
.selected_item button[type^=reset] {position:absolute; top:50%; transform:translateY(-50%); right:12px; width:18px; height:18px; background:url("/wk/static/images/jc/icon/icon_bold_close.svg") no-repeat; background-size: cover;}

/* 팝업 */
.full_pop {background-color:var(--col-white); display:none; overflow:hidden; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); max-height:calc(100vh - 220px); min-height:auto; z-index:997;}
.full_pop.small {width:590px; padding:32px 10px 40px 40px;}
.full_pop.middle {width:880px; padding:32px 40px 40px 40px;}
.full_pop.large {width:984px; padding:32px 16px 40px 40px;}
.full_pop .head {position:relative; padding:0 0 24px; min-height:auto; width:95%; border-bottom:1px solid var(--col-eee); text-align:left; z-index:998;}
.full_pop .head.type2 {margin-bottom:0;border-bottom:none;}
.full_pop > .closed {display:block;position:absolute;right:40px;top:36px;height:32px;width:32px; background:url("/wk/static/images/jc/icon/icon_close.svg") no-repeat 0 0;z-index:999;}
.full_pop > .cont {padding-bottom:70px; overflow-x:hidden; overflow-y:scroll; max-height:calc(100vh - 400px);}
.full_pop.small > .cont {padding:0 24px 140px 0;}
.full_pop.middle > .cont {padding:0 24px 140px 0;}
.full_pop.large > .cont {padding:0 24px 140px 0;}

/* no bottom */
.full_pop.nb > .cont {max-height:calc(100vh - 280px);}
.full_pop.nb > .cont {padding : 0 24px 40px 0;}

.full_pop .cont::-webkit-scrollbar {width:6px;}
.full_pop .cont::-webkit-scrollbar-thumb {background:var(--col-ddd); /* 스크롤바 막대 색상 */ border-radius:12px;}
.full_pop .cont::-webkit-scrollbar-track {background:inherit; /* 스크롤바 막대 색상 */}

/* rank box */
.rank_red {padding:5px 8px; border:1px solid var(--col-red2); border-radius:4px; font-size:12px; font-weight:600; color:var(--col-red2);}
.rank_green {padding:5px 8px; border:1px solid var(--col-green); border-radius:4px; font-size:12px; font-weight:600; color:var(--col-green);}

/* swiper override */
.intro_slider .txt_box {position: relative; width: 488px; background-color:var(--col-white); z-index:50;}
.intro_slider .txt_box .tit {display:flex; flex-direction:column; width:100%;}
.intro_slider .btn_area {display:flex; position: absolute; bottom: 100px; gap:8px; z-index:100;}
.intro_slider .btn_box {display: flex; padding: 4px 8px; gap: 4px; border: 1px solid var(--col-ddd); border-radius: 50px;}
.intro_slider .swiper-wrapper {width:720px; height:350px;}
.swiper-pagination-current {color:var(--col-blue);}
.swiper-pagination-bullet {width: 12px; height: 12px; transition: all ease-in-out .2s;}
.swiper-pagination-bullet.swiper-pagination-bullet-active {width: 32px; border-radius: 6px; background: var(--col-111);}
.swiper-pagination-bullet:focus,
.swiper-pagination-bullet-active:focus {outline: 2px dashed #CAD1F7; outline-offset: 4px;}

.swiper-page {display: flex; align-items: center ; width: 80px !important;}
.swiper-button{width:18px; height:18px; border:none; cursor:pointer;}
.swiper-play-button {margin-top:-2px; background:url("/wk/static/images/jc/icon/icon_play.svg") 50% 50% no-repeat}
.swiper-pause-button {margin-top:-2px; background:url("/wk/static/images/jc/icon/icon_pause.svg") 50% 50% no-repeat}
[class*=swiper-button-n] {margin-top:-2px; background:url("/wk/static/images/jc/icon/icon_swiper_right.svg") 50% 50% no-repeat}
[class*=swiper-button-p] {margin-top:-2px; background:url("/wk/static/images/jc/icon/icon_swiper_left.svg") 50% 50% no-repeat}
[class*=swiper-button-n].dis {margin-top:-2px; background:url("/wk/static/images/jc/icon/icon_swiper_right_dis.svg") 50% 50% no-repeat}
[class*=swiper-button-p].dis {margin-top:-2px; background:url("/wk/static/images/jc/icon/icon_swiper_left_dis.svg") 50% 50% no-repeat}

/* datepicker */
.box_datepicker {position:relative;}
.box_datepicker .ui-datepicker-trigger {position:absolute; right:14px; top:50%; transform:translateY(-50%); width:24px; height:24px; background:url("/wk/static/images/jc/icon/icon_calendar.svg") no-repeat;}

.none_data_box .none_search_data {display: flex; justify-content: center; width: 100%;}
.none_search_data {padding: 240px 0 120px; background: url("/wk/static/images/jc/no_search.png") 50% 120px no-repeat; text-align: center;}

/* ============================== [ Content ] ========================================================================================== */

/* main */
.intro_banner {display:flex; margin:60px auto 0; gap:24px; width:1248px;}
.intro_banner .main_banner {padding:58px 0 0 60px; width:930px; background:url("/wk/static/images/jc/visual.png") no-repeat;}
.intro_banner .action_box {border:1px solid #ddd; padding:24px; border-radius:8px; width:294px;}
.intro_banner .action_box ul {display:flex; flex-wrap:wrap; align-items:center; height:100%;}
.intro_banner .action_box ul li {position:relative; width:100%;}
.intro_banner .action_box ul li:nth-of-type(1).login {background:url("/wk/static/images/jc/icon/icon_login.svg") no-repeat 0% 80%;}
.intro_banner .action_box ul li:nth-of-type(1).logout {background:url("/wk/static/images/jc/icon/icon_logout.svg") no-repeat 0% 80%;}
.intro_banner .action_box ul li:nth-of-type(2) {background:url("/wk/static/images/jc/icon/icon_video.svg") no-repeat 0% 80%;}
.intro_banner .action_box ul li:nth-of-type(3) {background:url("/wk/static/images/jc/icon/icon_guide.svg") no-repeat 0% 80%;}
.intro_banner .action_box ul li:nth-of-type(2):hover .jobcare, .intro_banner .action_box ul li:nth-of-type(3):hover .download {color:var(--col-blue); text-decoration: underline;}
.intro_banner .action_box ul li:nth-of-type(2):hover .icon_share {background:url("/wk/static/images/jc/icon/icon_share_blue.svg");}
.intro_banner .action_box ul li:nth-of-type(3):hover .icon_download {background:url("/wk/static/images/jc/icon/icon_download_blue.svg");}
.intro_banner .action_box ul li > a {display:flex; flex-direction:column; justify-content:flex-end; padding-left:65px; text-align:left; gap:4px; height:68px;}
.intro_banner .action_box ul li + li::before {display:block; margin:16px 0; width:100%; height:1px; background-color:#ddd; content:"";}
.intro_banner .action_box.login ul li:nth-of-type(1) {background:url("/wk/static/images/jc/icon/icon_hi.svg") no-repeat 0% 80%;}
.intro_banner .action_box.login ul li:first-child a span{position:relative;}
.intro_banner .action_box.login ul li:first-child a span:last-child i {display:block; content:""; position:absolute; top:50%; transform:translateY(-50%); left:30%; width:16px; height:16px; background:url("/wk/static/images/jc/icon/icon_line_right_gray.svg") no-repeat;}
.intro_service {margin:120px auto 0; width:1000px; text-align:center;}
.intro_service > div {margin-top:60px; padding-left:330px; background:url("/wk/static/images/jc/write.png") no-repeat 0%;}
.intro_service ul {display:flex; flex-direction:column; justify-content:space-between; gap:40px; width:670px; text-align:left;}
.intro_report {padding:120px 0; margin-top:120px; width:100%; background-color:var(--col-sky);}
.intro_slider {display:flex !important; padding:120px 0 60px !important; width:1248px !important; gap: 40px;}
.intro_interview {padding:120px 0; width:100%; background-color:var(--col-sky);}
.intro_interview .user_interview {display:flex; margin-top:60px; gap:24px;}
.intro_interview .user_interview li {padding:40px 32px; flex:1; border-radius:8px; background-color:var(--col-white); box-shadow:2px 2px 36px 0px rgba(17, 17, 17, 0.08);}
.intro_interview .user_interview li div {display:flex; flex-direction:column; margin-top:40px; gap:8px; text-align:left;}

/* 프로필 작성 */
.profile {padding:24px; margin-top:24px; border-radius:8px;}
.profile .progress {display:flex; margin-top:20px; text-align:center;}
.profile .progress li {padding:8px 24px; flex:1; line-height:28px; font-size:16px; font-weight:400; color:var(--col-white);}
.profile .progress li:first-child {border-top-left-radius:50px; border-bottom-left-radius:50px;}
.profile .progress li:last-child {border-top-right-radius:50px; border-bottom-right-radius:50px;}
.profile .progress li:not(:first-child) {border-left:1px dashed var(--col-ddd);}
.profile .progress li.on:nth-child(1) {background:linear-gradient(90deg, #2485FF 2.31%, #4D65E1 485.86%);}
.profile .progress li.on:nth-child(2) {background:linear-gradient(90deg, #2485FF -99.33%, #4D65E1 393.43%);}
.profile .progress li.on:nth-child(3) {background:linear-gradient(90deg, #2485FF -188.26%, #4D65E1 285.8%);}
.profile .progress li.on:nth-child(4) {background:linear-gradient(90deg, #2485FF -288.61%, #4D65E1 191.57%);}
.profile .progress li.on:nth-child(5) {background:linear-gradient(90deg, #2485FF -384.69%, #4D65E1 97.1%);}
.profile .progress li.on:after {display:inline-block; margin-left:8px; width:16px; height:16px; background:url("/wk/static/images/jc/icon/icon_checked.svg") no-repeat; vertical-align:-3px; content:"";}
.profile .progress li:not([class=on]) {background-color:var(--col-white); color:var(--col-999);}
.profile .tit_box {display:flex; justify-content:space-between;}
.profile .tit_box .profile_tit {display:flex; gap:16px;}
.profile .tit_box .profile_button {display:flex; gap:4px;}
.profile.type01 {border:1px solid var(--col-ddd); background:var(--col-white);}
.profile .item_list {display:none; flex-direction:column; margin-top:24px; gap:8px;}
.profile .item_list li {display:flex; gap:8px;}
.profile .item_list li .item{display:flex; justify-content:space-between; align-items:center; padding:16px 24px; flex:1; border-radius:8px;}
.profile .item_list li .item > div {display:flex; gap:16px;}

/* 관심사항으로 직업 설계서 만들기  */
.box_rcmd_iptfrm {margin-top:40px; text-align:left;}
.box_rcmd_iptfrm .box_textarea {margin-top:24px;}
.box_rcmd_iptfrm textarea {padding:24px;}

/* 팝업 키워드 추천 */
.box_rcmd_itm {display:flex; margin-top:24px; gap:24px;}
.box_rcmd_itm div {position:relative; flex:1; padding:24px; width:100%; border-radius:8px; background:var(--col-sky2); line-height:28px; font-size:16px; color:var(--col-333);}
.box_rcmd_itm .text_ellipsis{padding:0 10px 0 10px;}
.box_rcmd_itm div:last-child::before, .box_rcmd_itm .rcmd_link:last-child::before {position:absolute; display:block; right:60px; top:-87px; width:120px; height:120px; background:url("/wk/static/images/jc/img_AI.png") 100% no-repeat; content:"";}
.box_rcmd_itm .rcmd_link:last-child::before {right:40px !important;}
.box_rcmd_itm.type01.rcmd_info_box > div {padding: 0;}
.box_rcmd_itm.type01 div:hover {box-shadow:0 0 0 3px var(--col-blue);}
.box_rcmd_itm.type01 div a {display:flex; align-items:center; padding:40px 24px; gap:24px; border-radius: 8px; background:var(--col-white); box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08); border:3px solid var(--col-white);} /* 241125 접근성 관련 추가 */
.box_rcmd_itm.type01 div a p {display:flex; flex:1; align-items:center; gap:4px;}
.box_rcmd_itm.type01 .rcmd_link {position: relative; display:flex; align-items:center; padding:40px 24px; gap:24px; flex:1; width:100%; background:var(--col-white); box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08); border:3px solid var(--col-white); border-radius:8px;}
.box_rcmd_itm.type01 .rcmd_link > span {display:flex; flex:1; align-items:center; gap:4px;}
.box_rcmd_itm.type01 .rcmd_link:hover {box-shadow:0 0 0 3px var(--col-blue);}
/* 직종 추천 */
.box_rcmd_itmlst > li {position:relative; margin-top:24px; padding:24px; border-radius:8px; background:var(--col-white); box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08);}
.box_rcmd_itmlst li a {display:inline-block; width:100%;}
.box_rcmd_itmlst .recommend_job_exp ul {display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px;}
.box_rcmd_itmlst .recommend_job_exp ul li {line-height:28px; font-size:16px; font-weight:400; color:var(--col-555);}
.box_rcmd_itmlst .btn_expand_active{outline:3px solid var(--col-blue);}

/* 프로필로 작성하기 */
.generate_profile a {display:flex; flex-direction:column; align-items:center; padding:24px; width:100%;}
.generate_profile a img {margin-bottom:16px; width:120px; height:120px;}

[class*=appearItems] li, [class*=appearItems] > div {top: 50px; opacity: 0; transition: top ease-out .5s calc(1 * 0.4s), opacity ease-out .5s calc(1 * 0.4s), border-color ease-out .2s, outline ease-out .2s, box-shadow ease-out .2s; position: relative;}
[class*=appearItems].show li, [class*=appearItems].show > div {top: 0; opacity: 1;}

/* 보고서 만들기 */
.report_area {display:flex; gap:24px; text-align:center;}
.report_area li .txt_box {display:flex; flex-direction:column; gap:16px; margin-top:40px; padding-top:120px;}
.report_area li .txt_box div:nth-child(1) {display:flex; flex-direction:column; gap:8px; height:104px;}
.report_area.main li:nth-child(1) {background:url("/wk/static/images/jc/img1.png") no-repeat 50% 14% var(--col-white);}
.report_area li:nth-child(1) {background:url("/wk/static/images/jc/img1.png") no-repeat 50% 14% var(--col-sky);}
.report_area li:nth-child(2) {background:url("/wk/static/images/jc/img2.png") no-repeat 50% 14% var(--col-white);}
.report_area li:nth-child(2).bg_sky {background:url("/wk/static/images/jc/img2.png") no-repeat 50% 14% var(--col-sky);}
.report_area > li {padding:60px 40px; gap:40px; flex:1; border-radius:8px;}
.report_area > li .icon_light {background:url("/wk/static/images/jc/icon/icon_light_black.svg") no-repeat;}
.report_area > li:hover {background-color:var(--col-blue) !important; box-shadow:2px 2px 36px 0px rgba(17, 17, 17, 0.08); transition: all ease-out .2s;}
.report_area > li:hover [class^=btn] {background-color:var(--col-white); color:var(--col-blue) !important;}
.report_area > li:hover .icon_light {background:url("/wk/static/images/jc/icon/icon_light_white.svg") no-repeat;}
.report_area > li:hover .b1_sb, .report_area > li:hover .h2_sb{color:var(--col-white);}
.report_area > li:hover .b2_r, .report_area > li:hover .s1_r {color:var(--col-eee);}
.report_area [class^=btn] {margin-top:40px; line-height:28px; font-size:16px; font-weight:600; color:var(--col-white);}

.box_message_wrap {padding:16px 24px;  border:1px solid var(--col-ddd); border-radius:8px; background:var(--col-white);}
.box_message_wrap .box_list_area .txt_list {position:relative; padding-left:16px; line-height:28px; font-size:16px; font-weight:400; color:var(--col-555);}
.box_message_wrap .box_list_area .txt_list::before {display:block; position:absolute; left:0; top:11px; width:4px; height:4px; background:var(--col-555); border-radius:50%; content:'';}

.job_summary {position:relative; display:flex; align-items:center; padding:40px 32px; gap:24px; min-height:270px; border-radius:8px; border:1px solid var(--col-ddd);}
.job_summary::after {display:block; position:absolute; bottom:-4px; right:0; width:240px; height:270px; background:url("/wk/static/images/jc/img_ab_robot.png") no-repeat; content:'';}
.job_summary .txt_area {display:flex; flex-direction:column; gap:12px; width: 700px;}

.job_skill_list .content .side_tit {display:flex; align-items:center;}
.job_skill_list .content {display:flex; padding:40px 40px 40px 25px; background:var(--col-sky); border-radius: 8px;}
.job_skill_list .content .left_side {padding:32px 0; width:320px;}
.job_skill_list .content .left_side .left_side_list {margin-top:24px; padding-left: 15px; padding-right:24px; min-height: 648px; max-height: calc(100vh - 300px); overflow-y: overlay;}
.job_skill_list .content .left_side .left_side_list li button {padding:16px 40px 16px 24px; width:100%; text-align:left;}
.job_skill_list .content .left_side .left_side_list li.active button {position: relative; background-color:var(--col-white); box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08); background-clip: padding-box; border-radius:8px}
.job_skill_list .content .left_side .left_side_list li.active button::after {position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background: url("/wk/static/images/jc/icon/icon_right_poligon_white.svg") no-repeat; width: 24px; height: 24px; content: "";}
.job_skill_list .content .left_side .left_side_list li.active span{text-decoration:underline; line-height:28px; font-size:16px; font-weight:600; color:var(--col-blue);}
.job_skill_list .content .left_side .left_side_list::-webkit-scrollbar {width:6px;}
.job_skill_list .content .left_side .left_side_list::-webkit-scrollbar-thumb {background:var(--col-ddd); /* 스크롤바 막대 색상 */ border-radius:12px;}
.job_skill_list .content .left_side {padding:32px 8px 32px 0; width:320px;}
.job_skill_list .content .left_side .left_side_list li:not(.active):hover {border-radius:8px;}
.job_skill_list .content .left_side .left_side_list li:not(.active):hover button {position: relative; padding:16px 24px; width:100%; text-align:left;}
.job_skill_list .content .left_side .left_side_list li:not(.active):hover button::after {position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background: url("/wk/static/images/jc/icon/icon_right_poligon_blue.svg") no-repeat; width: 24px; height: 24px; content: "";}
.job_skill_list .content .left_side .left_side_list li.active {font-size: 16px;}
.job_skill_list .content .left_side .left_side_list li.active span{text-decoration:underline; line-height:28px; font-size:18px; font-weight:600; color:var(--col-blue); transition: 0.2s;}
.job_skill_list .content .left_side .left_side_list li:not(.active):hover {background-color:var(--col-sky2); box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08);}
.job_skill_list .content .left_side .left_side_list li:not(.active):hover span {text-decoration:underline; line-height:28px; font-size:16px; font-weight:600; color:var(--col-333);}
.job_skill_list .content .right_side {padding:32px 16px 32px 40px; background-color:var(--col-white); flex:1; min-width: 880px; border-radius:8px; box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08);}
.job_skill_list .content .right_side .right_side_list li {border:1px solid var(--col-ddd); border-radius:8px;}
.job_skill_list .content .right_side .right_side_list li:hover {box-shadow:0 0 0 3px var(--col-blue);}
.job_skill_list .content .right_side .right_side_list.grid_1 {display:grid; grid-template-columns:1fr; gap:8px; margin-top:24px; padding:3px 24px 3px 3px; max-height:648px; overflow-y:scroll; overflow-x:hidden; overscroll-behavior:none;}
.job_skill_list .content .right_side .right_side_list.grid_1 li > a {display:inline-flex; flex-direction:row; align-items:center; justify-content:space-between; width:100%; padding:20px;}
.job_skill_list .content .right_side .right_side_list.grid_1 li > a > span {display:inline-block; width:95%}
.job_skill_list .content .right_side .right_side_list.grid_1 li > a > span .info_box {display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:4px}
.job_skill_list .content .right_side .right_side_list.grid_1 li:hover {background:var(--col-sky3);}
.job_skill_list .content .right_side .right_side_list.grid_1 li:hover .sub_tit {text-decoration:underline;}
.job_skill_list .content .right_side .right_side_list.grid_3 {display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:24px; padding:3px 24px 3px 3px; max-height:calc(100vh - 300px); overflow-y:scroll; overflow-x:hidden; overscroll-behavior:none;}
.job_skill_list .content .right_side .right_side_list.grid_3 li .txt_area {margin-top:4px; min-width:216px;}
.job_skill_list .content .right_side .right_side_list.grid_3 li a {padding:20px; display:flex; flex-direction:column; gap:8px;}
.job_skill_list .content .right_side .right_side_list.grid_3 li a .tit {display:flex; justify-content:space-between; align-items:center;}
.job_skill_list .content .right_side .right_side_list.grid_3 li a .tit .level {font-size:12px; font-weight:400; color:var(--col-555);}
.job_skill_list .content .right_side .right_side_list.grid_3 li:hover span:nth-child(2) > strong {text-decoration: underline;}
.job_skill_list .content .right_side .right_side_list::-webkit-scrollbar {width:6px;}
.job_skill_list .content .right_side .right_side_list::-webkit-scrollbar-thumb {background:var(--col-ddd); /* 스크롤바 막대 색상 */ border-radius:12px;}
.job_skill_list .content .right_side .right_side_list::-webkit-scrollbar-track {background:inherit; /* 스크롤바 막대 색상 */}

/* 240725 .tit 삭제 .tit_box로 변경 */
.job_skill_tbl .tit_box .state_box {display:flex; gap:16px;}
.job_skill_tbl .tit_box .state_box span {display:flex; align-items:center;}
.job_skill_tbl .tit_box .state_box span [class*=box_] {display:block; width:16px; height:16px; border:1px solid var(--col-ddd);}
.job_skill_tbl .tit_box .state_box span .box_ltgrn {background: repeating-linear-gradient(135deg, var(--col-lightgreen), #fff 4px, var(--col-lightgreen) 0,var(--col-lightgreen) 0px);}
.job_skill_tbl .tit_box .state_box span .box_wht {background:var(--col-white);}
/* 240725 .tit 삭제 .tit_box로 변경 */
.job_skill_tbl table {width:100%; border:1px solid var(--col-ddd); table-layout:fixed;}
.job_skill_tbl table + table {margin-top:-1px; border-top:none;}
.job_skill_tbl table thead th {padding:12px 16px; border-left:1px solid var(--col-ddd);; background:var(--col-sky2);}
.job_skill_tbl table tbody th {padding:12px 16px; background:var(--col-sky); vertical-align:middle; border:1px solid var(--col-ddd);}
.job_skill_tbl table tbody td {height: 0; background:var(--col-white); border:1px solid var(--col-ddd);}
.job_skill_tbl table tbody td div {padding:12px 16px; background:var(--col-white); line-height:28px; font-size:16px; font-weight:400;}
.job_skill_tbl table tbody td div.active {height: 100%; background: repeating-linear-gradient(135deg, var(--col-lightgreen), #fff 10px, var(--col-lightgreen) 0,var(--col-lightgreen) 12px);}
.job_skill_tbl table tbody td div a:hover {font-size:16px; font-weight:600; color:var(--col-333); text-decoration:underline;}
.job_skill_tbl table tbody .th {padding: 12px 16px; height: 100%; background: var(--col-sky); text-align: center; vertical-align: middle; word-break: break-all;}

/* popup skybox */
.pop_sky {display:flex; flex-direction:column; margin-top:24px; padding:16px 20px; gap:4px; border-radius:8px; background:var(--col-sky);}
.pop_sky a {color:var(--col-blue); text-decoration:underline};

/* gray border box */
.box_skill {margin-top :24px;}
.box_skill > ul {display:grid; grid-template-columns:1fr 1fr 1fr 1fr; margin-top:12px; padding:16px 24px; gap:16px; border-radius:8px; border:1px solid var(--col-ddd); background:var(--col-white);}
.box_skill > ul li a {line-height:28px; font-size:16px; font-weight:400; color:var(--col-555);}
.box_skill > ul li a:hover {color:var(--col-blue); font-weight:600;}
.box_skill > ul li a.has {text-decoration:underline;}

/* 직업 설계서 전송하기 */
.box_trans {display: flex; flex-direction: column; gap: 8px;}
.box_trans li {display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 24px; border-radius: 8px; border: 3px solid var(--col-white); outline: 1px solid var(--col-ddd); margin-left: 3px;}
.box_trans li:hover {border-radius: 8px; outline: 3px solid var(--col-blue); background: var(--col-white); box-shadow: 2px 2px 20px 0px rgba(17, 17, 17, 0.08);}

/* 경고 박스 */
.alert_box {display: flex; flex-direction: column; align-items: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; width: 400px; padding: 40px 40px 32px 40px; z-index: 999}

/* 개인정보 */
.personalInfo_box ul li .content_box {margin-top: 24px; padding:24px 8px 24px 24px;  border-radius: 4px; border: 1px solid var(--col-ddd);}
.personalInfo_box ul li .content_box .content {display: flex; flex-direction: column; gap: 16px; padding-right: 10px; max-height: 320px; overflow-y: scroll;}
.personalInfo_box ul li .content_box .content p strong, .personalInfo_box ul li .content_box .content p span {display: block;}
.personalInfo_box ul li .content_box .content::-webkit-scrollbar {width:6px;}
.personalInfo_box ul li .content_box .content::-webkit-scrollbar-thumb {background:var(--col-ddd); /* 스크롤바 막대 색상 */ border-radius:12px;}
.personalInfo_box ul li .content_box .content::-webkit-scrollbar-track {background:inherit; /* 스크롤바 막대 색상 */}
.personalInfo_box ul li .check_box {display: flex; justify-content: space-between; margin-top: 24px;}
.personalInfo_box ul li .check_box .radio_box {display: flex; gap: 16px; flex-wrap: wrap;}

/* 인쇄하기 */
.pop_print .menu_tit {padding: 16px 24px; border-radius: 8px; background: var(--col-blue)}
.pop_print .market_info {display: flex; flex-direction: column;}
.pop_print .print_header {display: flex; margin-top: 40px; padding: 40px 32px; gap: 24px; border-radius: 8px; border: 1px solid var(--col-ddd)}
.pop_print .print_header .box_graph {width: 240px; height: 180px}
.pop_print .print_header .graph_info {display: flex; flex-direction: column; justify-content: center; gap: 12px}
.pop_print .job_skill_tbl {display: flex; flex-direction: column; gap: 40px}
.pop_print .market_info .chart_area .sky_box {padding: 40px; border-radius: 8px; background: var(--col-sky);}
.pop_print .market_info .chart_area .sky_box .select {display: flex; padding: 24px 32px; gap: 8px; border-radius: 8px; background: var(--col-sky2);}
.pop_print .market_info .chart_area .sky_box .select button {padding: 10px 16px; height: 40px; border-radius: 4px; border: 1px solid var(--col-blue); background: var(--col-white); word-break: keep-all; color: var(--col-blue);}
.pop_print .market_info .chart_area .sky_box .select .select_area {display: flex; gap: 24px; width: 100%}
.pop_print .market_info .chart_area .sky_box .select .select_area > div {display: flex; align-items: center; gap: 24px; flex: 1}
.pop_print .market_info .chart_area .sky_box .select .select_area > div > div {display: flex; gap: 8px; width: 100%}
.pop_print .market_info .chart_area .sky_box .chart {border-radius: 4px;}

/* 추천제외 팝업 */
.etc_input_box {display: flex;}
.etc_input_box .box_input {position : relative; flex: 1;}
.etc_input_box .box_input input {padding: 6px 12px; margin-left: 8px; width: 100%; border: 1px solid var(--col-ddd); border-radius: 4px;}
.etc_input_box > span, .etc_input_box > span label {width: auto;}

/* 신규페이지 */
.renewal_banner {width: 100%; height: 400px; background: url("/wk/static/images/jc/renewal-jc-banner.png") 50% no-repeat; background-size: cover;}
.renewal_banner .main_banner {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; width: 1248px; height: 100%;}
.renewal_banner .main_banner .location {position: absolute; top: 0;}
.renewal_banner .main_banner .location a { color: var(--col-white);}
.renewal_banner .main_banner .bn_head {line-height: 80px; font-size: 60px; font-weight: 700;  letter-spacing: -1.2px; color: var(--col-white);}
.renewal_banner .main_banner .location ul li:not(:last-child)::after {background: url("/wk/static/images/jc/icon/icon_line_right_white.svg") no-repeat;}

.renewal_desc {position: relative; display: flex; align-items: center; justify-content: center; padding: 120px 0; width: 100%; overflow: hidden;}

.renewal_desc::before {position: absolute; display: block; top: 210px; right: 490px; width: 185px; height: 185px; background: url("/wk/static/images/jc/bubble1.png") no-repeat; content: "";}
.renewal_desc::after {position: absolute; display: block; top: 250px; right: 0; width: 540px; height: 540px; background: url("/wk/static/images/jc/bubble2.png") no-repeat; content: "";}
.renewal_desc .mo_base {position: relative; padding: 12px; width: 360px; height: 800px; background: url("/wk/static/images/jc/mb_base.png") no-repeat; border-radius: 24px; box-shadow: 20px 40px 80px 0px rgba(17, 17, 17, 0.08), -2px -10px 30px 0px rgba(102, 131, 188, 0.25) inset, 10px 2px 20px 0px #FFF inset; z-index: 1;}
.renewal_desc .mo_base_l1 {position: absolute; left: -380px; bottom: 60px; width: 300px; height: 360px; background: url("/wk/static/images/jc/mb_l1.png") no-repeat; border-radius: 16px; box-shadow: 5px 5px 80px 0px rgba(17, 17, 17, 0.08); content: "";}
.renewal_desc .mo_base_text {position: absolute; display: flex; flex-direction: column; justify-content: space-between; left: -380px; top: 48px; height: 244px;}
.renewal_desc .mo_base_l2 {position: absolute; left: -720px; bottom: 60px; width: 300px; height: 360px; background: url("/wk/static/images/jc/mb_l2.png") no-repeat; border-radius: 16px; box-shadow: 5px 5px 80px 0px rgba(17, 17, 17, 0.08); content: "";}
.renewal_desc .mo_base_r1 {position: absolute; right: -380px; bottom: 60px; width: 300px; height: 360px; background: url("/wk/static/images/jc/mb_r1.png") no-repeat; border-radius: 16px; box-shadow: 5px 5px 80px 0px rgba(17, 17, 17, 0.08); content: "";}
.renewal_desc .mo_base_r2 {position: absolute; right: -720px; bottom: 60px; width: 300px; height: 360px; background: url("/wk/static/images/jc/mb_r2.png") no-repeat; border-radius: 16px; box-shadow: 5px 5px 80px 0px rgba(17, 17, 17, 0.08); content: "";}

.renewal_chaneged {padding: 120px;}
.renewal_chaneged .change_list .flow_l strong:nth-child(1) {position: relative; line-height: 80px; font-size: 60px; font-weight: 700; letter-spacing: -1.2px; color: rgba(77, 101, 225, 0.30);}
.renewal_chaneged .change_list .flow_l strong:nth-child(2) {margin-left: 120px; padding: 13px 37px;border-radius: 500px; border: 3px solid var(--col-blue); background: var(--col-white); line-height: 80px; color: var(--col-blue); font-size: 60px; font-weight: 700; letter-spacing: -1.2px;}
.renewal_chaneged .change_list .flow_r strong:nth-child(1) {position: relative; padding: 13px 37px; border-radius: 500px; border: 3px solid var(--col-blue); background: var(--col-white); line-height: 80px; color: var(--col-blue); font-size: 60px; font-weight: 700; letter-spacing: -1.2px;}
.renewal_chaneged .change_list .flow_r strong:nth-child(2) {margin-left: 120px; line-height: 80px; font-size: 60px; font-weight: 700; letter-spacing: -1.2px; color: rgba(77, 101, 225, 0.30);}
.renewal_chaneged .change_list .flow_l strong:first-child::after {position: absolute; top: 50%; right: -96px; width: 72px; height: 12px; background: url("/wk/static/images/jc/arrow_f_right.png"); content: "";}
.renewal_chaneged .change_list .flow_r strong:first-child::after {position: absolute; top: 50%; right: -96px; width: 72px; height: 12px; background: url("/wk/static/images/jc/arrow_f_left.png"); content: "";}
.renewal_chaneged .change_list {display: flex; flex-direction: column; gap: 40px;}
.renewal_chaneged .change_list ul {display: flex; gap: 80px; justify-content: center;}

.renewal_simply {padding: 120px 0; margin: 0 auto; width: 1248px;}
.renewal_simply ul li:not(.n1) {position: relative; height: 480px;}
.renewal_simply ul li:not(.n4) {padding: 60px; flex:1;}
.renewal_simply ul li.n1 {position: relative; height: 460px;}
.renewal_simply ul li.n4 {padding: 60px; width: 744px ;}
.renewal_simply ul li.n1::after {position: absolute; right: 0; bottom: 0; width: 762px; height: 460px; background: url("/wk/static/images/jc/simply_n1.png") no-repeat; content: "";}
.renewal_simply ul li.n2::after {position: absolute; right: 0; bottom: 0; width: 612px; height: 344px; background: url("/wk/static/images/jc/simply_n2.png") no-repeat; content: "";}
.renewal_simply ul li.n3::after {position: absolute; right: 0; bottom: 0; width: 612px; height: 344px; background: url("/wk/static/images/jc/simply_n3.png") no-repeat; content: "";}
.renewal_simply ul li.n4::after {position: absolute; right: 0; bottom: 0; width: 744px; height: 344px; background: url("/wk/static/images/jc/simply_n4.png") no-repeat; content: "";}
.renewal_simply ul li.n5::after {position: absolute; right: 0; bottom: 0; width: 480px; height: 316px; background: url("/wk/static/images/jc/simply_n5.png") no-repeat; content: "";}

.renewal_FAQ .title{display: flex; justify-content: space-between; align-items: end; text-align: left;}
.renewal_FAQ .title .FAQ_btn {position: relative; display: flex; height: 56px; padding: 14px 24px; justify-content: center; align-items: center; border-radius: 4px; background: var(--col-blue);}
.renewal_FAQ .title .FAQ_btn::after {position: absolute; top: -88px; width: 120px; height: 120px; background: url("/wk/static/images/jc/img_AI.png"); content: "";}
.renewal_FAQ .FAQ_cont {padding: 24px 24px 40px 24px; border-radius: 8px; border: 3px solid var(--col-blue); background: var(--col-white);}

.renewal_stban {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 120px; padding: 40px 0; gap: 24px; width: 100%; background: url("/wk/static/images/jc/jobcare_start_banner.png") 50% no-repeat; background-size: cover; text-align: center;}
.renewal_stban .jc_start_btn {display: flex; width: 160px; height: 56px; padding: 14px 24px; justify-content: center; align-items: center; border-radius: 4px; background: var(--col-white);}

/* S: 250410 DatePicker CSS 변경 */
.ui-widget.ui-widget-content{border-color:var(--col-ddd);}
.ui-widget-header{background:#fff;border:0;}
.ui-datepicker .ui-datepicker-title{font-weight:bold}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{border-radius:50%;background-color:var(--col-white);border:1px solid var(--col-gray);color:var(--col-333)}
.ui-datepicker .ui-datepicker-prev-hover{top:2px;left:2px}
.ui-datepicker .ui-datepicker-next-hover{top:2px;right:2px}
.ui-datepicker-prev:before {content: '';display: block; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: url("/wk/static/images/jc/icon/icon_arrow_right.svg");transform: rotate(180deg);}
.ui-datepicker-next:before {content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: url("/wk/static/images/jc/icon/icon_arrow_right.svg")}
.ui-widget-header .ui-icon {width:32px;height:32px;border-radius:50%}
.ui-datepicker-prev,.ui-datepicker-next { display: block; background: none; border: none; text-indent: 0; overflow: visible; padding: 0;}
.ui-datepicker th{font-weight: normal; background: #f9f9f9;}
.ui-datepicker-week-end span[title=Sunday]{color:var(--col-red)}
.ui-datepicker-week-end span[title=Saturday]{color: var(--col-blue)}
.ui-datepicker td span, .ui-datepicker td a{text-align:center}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{background:transparent;border-color:var(--col-gray);color:var(--col-333)}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-wi.icon_locationdget-header .ui-state-highlight{background-color:#F9FAFF;border-color:var(--col-blue);color:var(--col-blue)}
/* E: 250410 DatePicker CSS 변경 */

.employ_distribution {display: flex; gap: 24px; height: 550px;}
.employ_distribution .chart_area {height: 100%;}
.employ_distribution .employ_level {display: flex; justify-content: center; min-width: 240px; border-radius: 8px; text-align: center;}
.employ_distribution .employ_level .user_level > strong {position: relative; top: 76px;}
.employ_distribution .employ_level.high {background: url("/wk/static/images/jc/level_high.png") no-repeat;}
.employ_distribution .employ_level.middle {background: url("/wk/static/images/jc/level_middle.png") no-repeat;}
.employ_distribution .employ_level.low {background: url("/wk/static/images/jc/level_low.png") no-repeat;}
.employ_distribution .employ_level.none {background: url("/wk/static/images/jc/level_none.png") no-repeat;}

/* S: 신규 팝업, 추천 정보 250630 */
.rcmd_mentaltest_result {gap: 0 !important; background: url("/wk/static/images/jc/mentaltest_top5.png") no-repeat 100% 100% !important; background-size: cover !important; box-shadow: none !important; outline: none !important;}

.rcmd_location_box {padding: 24px 32px; background-color: var(--col-sky); height: 200px; border-radius: 12px;}
.rcmd_location_box .location_select_wrap {width: 100%; height: 16px; padding: 4px 0; background: var(--col-sky2); border-radius: 8px;}
.rcmd_location_box .location_select_wrap .location_radius_list {display: flex; height: 100%; margin: 0 auto;}
.rcmd_location_box .location_select_wrap .location_radius_list li {position: relative; display: flex; align-items: center; justify-content: center; flex: 1;}
.rcmd_location_box .location_select_wrap .location_radius_list li label {display: flex; align-items: center; justify-content: center; width: 100%;}
.rcmd_location_box .location_select_wrap .location_radius_list li label .img {display: block; width: 28px; height: 28px; background: url("/wk/static/images/jc/radio_basic.svg") no-repeat;}
.rcmd_location_box .location_select_wrap .location_radius_list li label [type="radio"]:checked + .img {width: 28px; height: 28px; background: url("/wk/static/images/jc/radio_select.svg") no-repeat; transition: 0.2s;}
.rcmd_location_box .location_select_wrap .location_radius_list li label [type='radio']:checked ~ .label {font-weight: 600; transition: 0.2s; color: var(--col-333); font-size: 20px;}
.rcmd_location_box .location_select_wrap .location_radius_list li label [type='radio']:focus + .img {width: 28px; height: 28px; background: url("/wk/static/images/jc/radio_select.svg") no-repeat; transition: 0.2s; outline: 2px dashed #888; z-index: 300;}
.rcmd_location_box .location_select_wrap .location_radius_list li label [type='radio']:hover + .img {width: 28px; height: 28px; background: url("/wk/static/images/jc/radio_select.svg") no-repeat; transition: 0.2s;}
.rcmd_location_box .location_select_wrap .location_radius_list li label [type='radio']:hover ~ .label {font-weight: 600; transition: 0.2s; color: var(--col-333); font-size: 20px;}
.rcmd_location_box .location_select_wrap .location_radius_list li label .label {position: absolute; bottom: -50px; color: var(--col-gray);}
.rcmd_location_box .location_select_wrap .location_radius_list li label .img,.label {cursor: pointer;}


.training_rcmd_list {display: flex; flex-direction: column; gap: 8px;}
.training_rcmd_list > li {display: flex; gap: 52px; align-items: center; padding: 24px 32px; border: 1px solid var(--col-ddd); border-radius: 12px;}
.training_rcmd_list > li > div:nth-child(1) {flex: 1;}
.training_rcmd_list > li > div:nth-child(1) > ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
.training_rcmd_list > li > div:nth-child(2) {width: 360px;}
.training_rcmd_list > li > div:nth-child(2) .title {width: 100px;}
.training_rcmd_list > li > div:nth-child(2) .percent_wrap {position: relative; width: 188px; height: 16px; border-radius: 4px; background: #e3eeff;}
.training_rcmd_list > li > div:nth-child(2) .percent_wrap .percent {position: absolute; display: block; background: linear-gradient(90deg,#2485FF,#4D65E1); height: 100%; border-radius : 4px;}

.training_rcmd_list > li:hover {background: var(--col-sky); outline: 3px solid var(--col-blue);}
.training_rcmd_list > li:hover > div:nth-child(1) a {text-decoration: underline;}
.training_rcmd_list > li.no_hover {background: inherit; outline-width: 0;}

.region_select_table .select_table.sido {display: flex; flex-direction: column; width: 40%; border: 1px solid var(--col-ddd); border-right: 2px solid var(--col-ddd);}
.region_select_table .select_table.sido .title {padding: 12px 16px; width: 100%; border-right-width: 0px; background: var(--col-sky2); border: 1px solid var(--col-ddd); border-right-width: 0px !important; text-align: center;}
.region_select_table .select_table.sido ul {display: flex; flex-wrap: wrap;}
.region_select_table .select_table.sido ul li {width: 50%; border-bottom: 1px solid var(--col-ddd);}
.region_select_table .select_table.sido ul li:nth-child(odd) {border-right: 1px solid var(--col-ddd);}

.region_select_table .select_table.gugun {display: flex; flex-direction: column; width: 60%; border: 1px solid var(--col-ddd); border-left: 2px solid var(--col-ddd);}
.region_select_table .select_table.gugun .title {padding: 12px 16px; width: 100%; background: var(--col-sky); border: 1px solid var(--col-ddd); border-left-width: 0px !important; text-align: center;}
.region_select_table .select_table.gugun ul{display: flex; flex-wrap: wrap;}
.region_select_table .select_table.gugun ul li {width: 50%;  border-bottom: 1px solid var(--col-ddd);}
.region_select_table .select_table.gugun ul li:first-child {width: 100%;}
.region_select_table .select_table.gugun ul li:nth-child(even) {border-right: 1px solid var(--col-ddd);}
.region_select_table .select_table ul li button {padding: 12px 16px; width: 100%;}
.region_select_table .select_table ul li:hover {box-shadow: 0 0 0 3px inset var(--col-blue);}
.region_select_table .select_table ul li:hover button,
.region_select_table .select_table ul li.active button {color: var(--col-blue); font-weight: 600; box-shadow: 0 0 0 3px inset var(--col-blue);}
/* E: 신규 팝업, 추천 정보 250630 */

.detail_job_selcet {padding : 24px 32px; border: 1px solid var(--col-ddd); border-radius: 12px;}
.detail_job_selcet .selected_item > div {padding: 4px 12px;}
.detail_job_selcet .selected_item > div.active {outline:3px solid var(--col-blue); background: var(--col-white);}
.detail_job_selcet .selected_item > div.active button[type=button] {color: var(--col-blue); font-weight: 600;}

.rcmd_job_box {display:flex; flex-direction: column; padding: 32px 24px; background: var(--col-sky); border-radius: 8px;}
.rcmd_job_box .rcmd_job_list {display: flex; justify-content: center; padding:24px; height: 480px; background: var(--col-sky2); border-radius: 8px;}
.rcmd_job_box .rcmd_job_list .side_tit {display:flex; align-items:center;}
.rcmd_job_box .rcmd_job_list .left_side {padding:32px 0;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list {display: flex; flex-direction: column; gap: 4px; margin-top:24px; padding-right:24px; padding-bottom: 60px; height: 100%; overflow-y: overlay;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li button {padding:16px 40px 16px 24px; width:100%; text-align:left;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li.active button {position: relative; background-color:var(--col-white); box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08); background-clip: padding-box; border-radius:8px}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li.active button::after {position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background: url("/wk/static/images/jc/icon/icon_right_poligon_white.svg") no-repeat; width: 24px; height: 24px; content: "";}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li.active span{text-decoration:underline; line-height:28px; font-size:16px; font-weight:600; color:var(--col-blue);}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list::-webkit-scrollbar {width:6px;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list::-webkit-scrollbar-thumb {background:var(--col-ddd); /* 스크롤바 막대 색상 */ border-radius:12px;}
.rcmd_job_box .rcmd_job_list .left_side {flex: 1; padding:0 8px 0 0; overflow: hidden;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li:not(.active):hover {border-radius:8px;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li:not(.active):hover button {position: relative; padding:16px 24px; width:100%; text-align:left;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li:not(.active):hover button::after {position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background: url("/wk/static/images/jc/icon/icon_right_poligon_white.svg") no-repeat; width: 24px; height: 24px; content: "";}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li.active {font-size: 16px;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li.active span{text-decoration:underline; line-height:28px; font-size:18px; font-weight:600; color:var(--col-blue); transition: 0.2s;}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li:not(.active):hover {background-color:var(--col-white); box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08);}
.rcmd_job_box .rcmd_job_list .left_side .left_side_list li:not(.active):hover span {text-decoration:underline; line-height:28px; font-size:16px; font-weight:600; color:var(--col-333);}
.rcmd_job_box .rcmd_job_list .right_side {padding: 12px 8px 12px 12px; background-color:var(--col-white); flex: 2; border-radius:8px; box-shadow:2px 2px 20px 0px rgba(17, 17, 17, 0.08);}
.rcmd_job_box .rcmd_job_list .right_side .right_side_content {padding:12px 16px 12px 12px; height: 100%; overflow-y: scroll;}
.rcmd_job_box .rcmd_job_list .right_side .right_side_content::-webkit-scrollbar {width:6px;}
.rcmd_job_box .rcmd_job_list .right_side .right_side_content::-webkit-scrollbar-thumb {background:var(--col-ddd); /* 스크롤바 막대 색상 */ border-radius:12px;}
.rcmd_job_box .rcmd_job_list .right_side .right_side_content::-webkit-scrollbar-track {background:inherit; /* 스크롤바 막대 색상 */}
.rcmd_job_box .selected_item div {padding: 6px 16px; background-color: var(--col-white); border: 1px solid var(--col-ddd);}
.rcmd_job_box .selected_item div.active {outline:3px solid var(--col-blue); background: var(--col-white);}
.rcmd_job_box .selected_item div.active button[type=button] {color: var(--col-blue); font-weight: 600;}