@charset "utf-8";

/* 공통 */
.cm-page{font-size:15px;font-weight:300;line-height:1.65}
.cm-br{white-space:pre-line}
.cm-only-sound{font-size:0!important}
.cm-ps{margin:15px 0;font-size:13px;color:var(--danger)}
.cm-ps img{width:15px;margin-top:-2px}
.cm-ps.bg{margin:0 0 15px;padding:12px 25px;border-radius:6px;background:var(--danger-gray)}
.cm-tbl-scr-x{overflow-x:auto}
.cm-link-fill-btn{cursor:pointer;padding:5px 15px;border-radius:4px;font-size:15px;font-weight:500;color:#fff;background:var(--primary);transition:all .15s}
.cm-link-fill-btn.small{font-size:13px}
.cm-link-fill-btn.medium{padding:8px 15px;font-size:14px}
.cm-link-fill-btn.large{padding:13px 15px;border-radius:6px}
.cm-link-fill-btn.kakao{color:#111;background:#ffdc00}
.cm-link-fill-btn.gray{background:#aaa}
.cm-link-fill-btn.dark{background:var(--secondary)}
.cm-download{height:50px;border-radius:6px;border:1px solid var(--primary-50);font-weight:500;color:var(--primary);line-height:38px;background:var(--surface-gray);transition:all .15s}
.cm-download.orange{border-color:var(--third-50);color:var(--third);background:var(--third-gray)}
.cm-tooltip{position:relative;color:var(--primary)}
.cm-tooltip u{margin-right:3px;font-weight:400}
.cm-tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:max-content;padding:2px 10px;border-radius:4px;font-size:13px;color:var(--primary);background:var(--surface-gray);opacity:0;transition:opacity 0.2s;box-shadow:2px 2px 1px rgba(0,0,0,.1)}
.cm-tooltip svg{width:17px;height:17px}
.cm-state{display:inline-block;height:22px;padding:0 5px;border:1px solid;border-radius:4px;font-size:12px;font-weight:500;line-height:20px}
.cm-state.medium{height:32px;padding:0 15px;font-size:14px;line-height:30px}
.cm-state.prm{border-color:var(--primary-50);color:var(--primary)}
.cm-state.prm.fill{padding:0 8px;color:#fff;background:var(--primary)}
.cm-state.dark{border-color:var(--secondary);color:var(--secondary)}
.cm-state.dark.fill{padding:0 8px;color:#fff;background:var(--secondary)}
.cm-state.gray{border-color:var(--color-dark-50);color:var(--color-dark)}
.cm-state.gray.fill{padding:0 8px;color:#fff;background:var(--color-gray)}
@media(hover:hover){
.cm-link-fill-btn:hover{background:var(--primary-hover)}    
.cm-link-fill-btn.gray:hover{background:#999}
.cm-link-fill-btn.dark:hover{background:#010101}
.cm-download:hover{color:#fff;background:var(--primary)}   
.cm-download.orange:hover{color:#fff;background:var(--third)} 
.cm-tooltip:hover{cursor:help}    
.cm-tooltip:hover:after{opacity:1}  
}

/* 서비스소개 [s] *************************************************************************************************** */
#serviceInfo{padding-top:50px}
#serviceInfo h1{font-size:42px;font-weight:300;color:var(--secondary); line-height:1.4; text-align: center;}
#serviceInfo h1 b{font-weight:700}
/* 서비스소개 [e] *************************************************************************************************** */

/* 공통 - 페이징 */
.pg_wrap{margin:50px auto 0}
.pg_wrap .pg{display:flex;justify-content:center;font-size:12px;font-weight:600;text-align:center;font-family:'Pretendard'}
.pg_page, .pg_current{min-width:28px;height:28px;padding:0 5px;margin:0 2px;border-radius:3px;font-size:12px;font-weight:400;color:#999;line-height:28px;background:#f2f2f2;border:none;font-family:'Pretendard'}
.pg_current{color:#fff;background:var(--secondary)}
.pg_start{text-indent:-999px;overflow:hidden;background:url('/img/btn_first.gif') no-repeat center #fff;border:1px solid #e1e1e1}
.pg_prev{text-indent:-999px;overflow:hidden;background:url('/img/btn_prev.gif') no-repeat center #fff;border:1px solid #e1e1e1}
.pg_end{text-indent:-999px;overflow:hidden;background:url('/img/btn_end.gif') no-repeat center #fff;border:1px solid #e1e1e1}
.pg_next{text-indent:-999px;overflow:hidden;background:url('/img/btn_next.gif') no-repeat center #fff;border:1px solid #e1e1e1}
@media(max-width:768px){
.pg_page, .pg_current{min-width:24px;height:24px;line-height:24px}
}

/* 공통 - 폼 엘리먼트 */
.cm-label{font-size:15px;font-weight:500;color:var(--secondary)}
.cm-label.cm-flex{gap:4px}
.cm-required{color:var(--danger)}
/* input readonly */
.cm-readonly{font-weight:300;color:var(--color-gray)!important;background:#f5f5f5}
.cm-readonly:focus{border-color:#ddd!important}
/* input */
.cm-input{height:42px;padding:0 16px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);transition:all .15s}
.cm-input.readonly{background:#f5f5f5}
.cm-input.full{width:100%}
.cm-input:focus{border-color:#aaa;outline:none}
.cm-date{cursor:pointer;position:relative;min-width:140px;height:42px;padding:0 16px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);background:#fff;transition:all .15s}
.cm-date::-webkit-calendar-picker-indicator{cursor:pointer;position:absolute;right:16px;top:50%;transform:translateY(-50%);padding-left:100%}
.cm-date:focus{border-color:#aaa;outline:none}
.cm-number{height:42px;padding:0 16px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);transition:all .15s}
.cm-number:focus{border-color:#180909;outline:none}
.cm-time{width:120px;height:42px;padding-left:10px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);transition:all .15s}
.cm-time:focus{border-color:#aaa;outline:none}
/* textarea */
.cm-txtarea{height:90px;padding:12px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);transition:all .15s}
.cm-txtarea.full{width:100%}
.cm-txtarea:focus{border-color:#aaa;outline:none}
/* select */
.cm-select{min-width:95px;height:42px;padding:0 30px 0 16px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);-webkit-appearance:none;appearance:none;background:url(/sh_img/common/select_arr.png) calc(100% - 10px) center no-repeat #fff;background-size:16px;transition:all .15s}
.cm-select:focus{border-color:#aaa;outline:none}
/* radio */
.cm-radio-wrap{flex:1;align-items:flex-start;gap:15px}
.cm-radio-wrap p{display:flex;align-items:center}
.cm-radio-wrap p label{cursor:pointer;color:var(--secondary)}
.cm-radio-wrap p label:before{display:inline-block;vertical-align:middle;content:"";width:20px;height:20px;margin-right:10px;border-radius:4px;border:1px solid #ddd;text-align:center;line-height:16px}
.cm-radio-wrap p input{position:absolute;width:0;height:0;visibility:hidden}
.cm-radio-wrap p input:checked + label:before{content:url(/sh_img/common/check.png);border:none;background:var(--secondary)}
/* radio - 박스형태 체크 */
.cm-radio-ck label{display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;min-width:95px;height:42px;padding:0 15px;border-radius:6px;border:1px solid var(--surface-gray-bd);font-size:14px;line-height:46px;color:var(--color-gray)}
.cm-radio-ck label svg{Width:19px;height:19px}
.cm-radio-ck input[type=radio]{display:none}
.cm-radio-ck input[type=radio]:checked + label{color:var(--primary);border:1px solid var(--primary);background:#fff}
/* checkbox */
.cm-input-ck-label{display:flex;align-items:center;gap:5px;cursor:pointer;min-width:auto}
.cm-input-ck-label span{flex-shrink:0;display:flex;width:15px;height:15px;border-radius:4px;color:#fff;text-align:center;background:#ccc}
.cm-input-ck-label span svg{width:11px;height:11px;margin:auto}
.cm-input-ck-label input[type="checkbox"]{display:none}
.cm-input-ck-label input[type="checkbox"]:checked+span{color:#fff;background:var(--secondary)}
.cm-input-ck-label input[type="radio"]{display:none}
.cm-input-ck-label input[type="radio"]:checked+span{color:#fff;background:var(--secondary)}
/* password */
.cm-pw-wrap{align-items:center;height:42px;padding:0 16px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);transition:all .15s}
.cm-pw-wrap input{width:calc(100% - 40px);height:100%;border:none}
.cm-pw-wrap input:focus{outline:none}
.cm-pw-wrap button span{font-size:19px;color:#aaa}

/* 공통 - 명세서/근로계약서/증명서 [s] *************************************************************************************** */
.cm-doc-wrap{justify-content:space-between;align-items:flex-start;gap:50px}
/* 샘플 미리보기 [s] */
.cm-doc-sample{position:sticky;top:140px;width:50%;margin-bottom:30px;font-size:13px;color:var(--secondary)}
.cm-doc-sample .scr{overflow-y:auto;max-height:calc(100vh - 220px)}
.cm-doc-sample .title{height:50px;font-size:18px;font-weight:700!important;text-align:center}
.cm-doc-sample img{width:100%}
.cm-doc-sample .tbl{width:100%;border-collapse:collapse}
.cm-doc-sample .tbl th, .cm-doc-sample .tbl td{border:1px solid #ccc;padding:4px 8px}
.cm-doc-sample .tbl th{font-weight:400}
.cm-doc-sample .tbl td{font-weight:400;height:36px}
.cm-doc-sample .tbl th.section-title{text-align:center;font-weight:700;background:#e5e5e5}
.cm-doc-sample .tbl th.sub-title{text-align:center;font-weight:700}
.cm-doc-sample .tbl .right{text-align:right}
.cm-doc-sample .tbl .unit{font-size:13px;text-align:left}
.cm-doc-sample .tbl .footer{text-align:center;padding:12px}
.cm-doc-sample .tbl .btn-small{display:inline-flex;width:18px;height:18px;border-radius:3px;background:#aaa}
.cm-doc-sample .tbl .btn-small svg{width:14px;height:14px;margin:auto;color:#fff;stroke-width:3px}
.cm-doc-sample.ctrt{padding:20px;border:1px solid #ccc}
.cm-doc-sample.ctrt .line{display:inline-block;padding:0 5px;text-decoration:underline}
.cm-doc-sample.ctrt .line svg{display:none;width:12px;height:12px}
.cm-doc-sample.ctrt .txtarea{white-space:break-spaces}
.cm-doc-sample.ctrt .item{margin:5px 0}
.cm-doc-sample.ctrt .indent{padding-left:15px}
.cm-doc-sample.ctrt .sign-area{margin-top:20px}
.cm-doc-sample.ctrt .sign-area.right{text-align:right}
.cm-doc-sample.ctrt .sign-box{margin-top:20px;line-height:1.9}
/* 샘플 미리보기 [e] */

.cm-doc-section-wrap{flex-shrink:0;width:50%;padding-bottom:50px}
.cm-doc-section{padding:40px 15px;border-top:1px solid #ddd}
.cm-doc-section:first-of-type{padding-top:0;border:none}
.cm-doc-section h2{margin-bottom:15px;font-size:22px;font-weight:700;color:var(--secondary)}
.cm-doc-top h1{margin-bottom:30px;font-size:38px;font-weight:700;color:var(--secondary);text-align:center}
.cm-doc-top dl{margin-top:40px}
.cm-doc-top dl dt{margin-bottom:15px;font-size:17px;font-weight:600;color:var(--secondary);text-align:center}
.cm-doc-top dl dd{align-items:unset;gap:8px}
.cm-doc-top dl dd a{gap:10px;padding:0 25px}
.cm-doc-top dl dd a img{padding:2px;width:24px;border-radius:4px;box-shadow:1px 1px 4px rgba(0,0,0,.15);background:#fff}
.cm-doc-top dl dd a img.elec{width:auto;padding:2px 5px;height:24px}
.cm-doc-top dl dd a svg{width:18px;height:18px;margin-left:auto}
.cm-doc-top .tag{gap:8px;margin-top:30px}
.cm-doc-top .tag span{padding:2px 10px;border-radius:20px;font-size:14px;color:var(--secondary);background:var(--surface-gray)}
.cm-doc-form .calc-link{justify-content:flex-end;margin-bottom:8px}
.cm-doc-form .none{display:none}
.cm-doc-form ul{align-items:unset;gap:8px}
.cm-doc-form ul li{display:flex;align-items:baseline;gap:8px;font-weight:500;color:var(--secondary)}
.cm-doc-form ul li .input-wrap{flex-wrap:wrap}
.cm-doc-form ul li .cm-ps{width:100%;margin:2px 0 0;font-weight:400}
.cm-doc-form ul li label, .cm-doc-form ul li .label{min-width:200px;font-size:15px}
.cm-doc-form ul li input{flex:1}
.cm-doc-form ul li.row-center{align-items:center}
.cm-doc-form ul li.block{display:block}
.cm-doc-form ul li.toggle-target{display:none}
.cm-doc-form ul li.add .add-wrap{flex:1}
.cm-doc-form ul li.add input{width:100%;margin-top:8px}
.cm-doc-form ul li.add p{gap:6px}
.cm-doc-form ul li.add p input{margin:0}
.cm-doc-form ul li.add button{width:110px;height:42px;border-radius:6px;color:#fff;background:#aaa}
.cm-doc-form ul li.pd-top10{padding-top:10px}
.cm-doc-form .toggle-more{width:90px;justify-content:center;gap:5px;height:32px;margin:10px auto 0;padding-left:6px;border-radius:4px;font-size:13px;font-weight:500;color:#555;background:#f2f2f2}
.cm-doc-form .toggle-more .btn-txt:after{content:"더보기"}
.cm-doc-form .toggle-more svg{width:18px;height:18px}
.cm-doc-form .toggle-more.active .btn-txt:after{content:"닫기"}
.cm-doc-form .toggle-more.active svg{transform:scaleY(-1)}
.cm-doc-form .worker-selector{flex:1;overflow:hidden;border-radius:6px;border:1px solid #ddd}
.cm-doc-form .worker-selector .cm-input{border:none}
.cm-doc-form .worker-list{display:none;border-top:1px solid #d9d9d9}
.cm-doc-form .worker-list .txt{padding:5px 10px;font-size:14px;background:#f7f7f7}
.cm-doc-form .worker-list .scroll{max-height:150px;padding:0;overflow-y:scroll}
.cm-doc-form .worker-list .cm-ps{padding:5px 10px;margin:0;font-size:13px;text-align:right;background:#f7f7f7}
.cm-doc-form .worker-list label{padding:5px 15px}
.cm-doc-form .cal-ck-wrap{gap:8px;flex:1}
.cm-doc-form .cal-ck-wrap label{min-width:95px}
.cm-doc-form .cal-ck-wrap.row-4 label{min-width:auto}
.cm-doc-form .time select{width:25%}
.cm-doc-form .width-auto label{min-width:95px}
.cm-doc-form .width-auto label:not(:last-of-type){margin-right:25px}
.cm-doc-form .time-table{color:var(--secondary)}
.cm-doc-form .time-table th{padding:10px;font-size:13px;font-weight:500;white-space:nowrap;background:var(--surface-gray)}
.cm-doc-form .time-table tbody th{position:sticky;left:0;border-bottom:1px solid #ddd}
.cm-doc-form .time-table td{padding:10px;border-bottom:1px solid #ddd;font-size:13px;text-align:center}
.cm-doc-form .time-table .cm-input{width:30px;height:28px;padding:0 5px;font-size:13px}
.cm-doc-form .time-table .cm-time{width:110px;height:28px;font-size:13px}
.cm-doc-form .caution{color:var(--secondary)}
.cm-doc-form .caution b{font-weight:700}
.cm-doc-form .workdaycustom{flex:1;justify-content: space-between}
.cm-doc-form .workdaycustom label{min-width:auto}
.cm-doc-form .workdaycustom label:not(:last-of-type){margin-right:0}
.cm-doc-save{align-items:unset;gap:8px;margin-top:40px}
.cm-doc-save button{padding:0 25px}
.cm-doc-save button svg{width:18px;height:18px;margin-left:auto}
.cm-doc-save .save{max-width:200px;width:100%;margin:30px auto 0}
.cm-doc-save .cm-tooltip{margin-left:5px;color:var(--third);line-height:1.65}
.cm-doc-save .cm-tooltip:after{color:var(--third);background:var(--third-gray)}
.cm-doc-btm{align-items:flex-start;gap:20px;padding:30px;border-radius:16px;border:1px solid var(--surface-sky);background:var(--surface-sky);transition:all .15s}
.cm-doc-btm .material-symbols-outlined{padding-top:3px;font-size:30px}
.cm-doc-btm .txt{margin-bottom:15px;font-size:18px;font-weight:600;color:var(--secondary)}
.cm-doc-btm .atxt{gap:5px;font-weight:400;line-height:1;color:var(--primary-sky)}
.cm-doc-btm .atxt svg{width:18px;height:18px}
@media(hover:hover){
.cm-download.orange:hover .cm-tooltip{color:#fff} 
.cm-doc-form .worker-list label:hover{background:#f2f2f2}    
.cm-doc-btm:hover{border-color:var(--primary-sky)} 
}
/* 공통 - 명세서/근로계약서/증명서 [e] ********************************************************************************* */

/* 공통 - 계산기 [s] ************************************************************************************************ */
.cm-calc-tit{margin-bottom:40px;font-size:17px;font-weight:400;text-align:center;color:var(--color-dark)}
.cm-calc-tit h1{margin-bottom:10px;font-size:38px;font-weight:700;color:var(--secondary)}
.cm-calc-tit button{gap:4px;padding:12px 20px;margin:15px auto 0;border-radius:6px;font-size:14px;font-weight:500;color:#fff;background:var(--secondary)}
.cm-calc-tit button svg{width:13px;height:13px}
.cm-calc-wrap{align-items:unset;position:relative;padding-bottom:50px;border-top:1px solid var(--secondary)}
.cm-calc-wrap.sticky{align-items:flex-start}
.cm-calc-wrap .arrow{position:absolute;left:100%;top:45px;z-index:1;transform:translateX(-50%) rotate(-45deg);width:22px;height:22px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;background:#fff}
.cm-calc{width:50%;padding:40px;background:#fff}
.cm-calc h2{margin-bottom:15px;font-size:22px;font-weight:700;color:var(--secondary)}
.cm-calc-in{position:sticky;top:130px;border:1px solid #ddd;border-top:none;border-right:none;background:#fff}
.cm-calc-in ul{align-items:unset;gap:15px}
.cm-calc-in ul li{display:flex;align-items:baseline;gap:8px;font-weight:500;color:var(--secondary)}
.cm-calc-in ul li.none{display:none}
.cm-calc-in ul li > label, .cm-calc-in ul li > .label{min-width:200px}
.cm-calc-in ul li > .label.cm-flex{gap:4px}
.cm-calc-in ul li input{flex:1}
.cm-calc-in ul li.half input{flex:unset;width:50%}
.cm-calc-in ul li.indent > label{text-align:right}
.cm-calc-in ul li .cm-radio-wrap{flex:unset;margin-left:auto;font-size:14px}
.cm-calc-in ul li .cm-radio-wrap p label:before{margin-right:4px}
.cm-calc-in .cal-ck-wrap{gap:8px;flex:1}
.cm-calc-in .calc-btn{display:block;max-width:200px;width:100%;margin:40px auto 0}
.cm-calc-out{border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd}
.cm-calc-out h2{margin-bottom:25px;padding-bottom:20px;border-bottom:2px solid var(--secondary)}
.cm-calc-out .cm-flex-col{align-items:unset;gap:15px}
.cm-calc-out dl{display:flex;align-items:baseline;gap:8px;font-weight:400;color:var(--secondary)}
.cm-calc-out dl dt{gap:4px;min-width:200px}
.cm-calc-out dl dd{flex:1;display:flex;align-items:center}
.cm-calc-out dl dd p{flex:1;text-align:right}
.cm-calc-out table{color:var(--secondary)}
.cm-calc-out table th{padding:10px;font-size:14px;font-weight:500;background:var(--surface-gray)}
.cm-calc-out table td{padding:10px;font-size:14px;font-weight:400;text-align:center}
.cm-calc-out table tfoot th{color:var(--primary)}
.cm-calc-out table p:has(.cm-tooltip){gap:4px}
.cm-calc-out .result{margin-top:15px;padding-top:30px;border-top:1px solid #ddd}
.cm-calc-out .result dl{font-weight:500}
.cm-calc-out .result-won{color:var(--primary)}
.cm-calc-out .btns{justify-content:center;gap:8px;margin-top:10px}
.cm-calc-out .btns button{flex:1;max-width:200px}
/* 공통 - 계산기 [e] ************************************************************************************************ */

/* 마이페이지 [s] *************************************************************************************************** */
/* 마이페이지 - 공통 - snb */
#mpSnb{flex-shrink:0;width:200px;padding-top:50px}
#mpSnb > p{padding-bottom:12px;font-size:28px;font-weight:700;color:var(--secondary)}
#mpSnb > ul{gap:40px;height:100%;border-top:2px solid var(--secondary)}
#mpSnb > ul > li{position:relative;border-top:1px solid #e1e1e1}
#mpSnb > ul > li > a{justify-content:space-between;padding:0 15px;font-size:16px;font-weight:600;color:var(--color-dark);line-height:45px}
#mpSnb > ul > li:not(.dropdown).active > a{color:var(--primary)}
#mpSnb .dropdown > a{display:flex;align-items:center;gap:5px}
#mpSnb .dropdown > a:after{content:"\f107";font-size:20px;font-weight:normal;color:var(--color-dark);font-family:'fontawesome'}
#mpSnb .dropdown.active > a:after{transform:scaleY(-1)}
#mpSnb .snb-toggle{display:none;width:max-content;width:100%;padding:12px 20px;background:var(--surface-gray)}
#mpSnb .snb-toggle li a{display:block;padding:5px 0;font-size:15px;color:var(--color-dark)}
#mpSnb .snb-toggle li a.active{font-weight:500;color:var(--primary)}
@media(hover:hover){#mpSnb .snb-toggle li a:not(.active):hover{font-weight:500;color:var(--secondary)} }
#myPage #shBreadcrumb{padding:0}

/* 마이페이지 - 공통 */
.cm-mypage{align-items:unset}
.cm-mypage .tit-area{font-size:16px;color:var(--color-dark)}
.cm-mypage h1{margin-bottom:30px;font-size:38px;font-weight:700;color:var(--secondary)}
.cm-mp-cont{width:calc(100% - 200px);min-height:70vh;padding:25px 0 50px 50px;border-left:1px solid #ddd}
.cm-mp-section{padding:40px 15px;border-top:1px solid #ddd}
.cm-mp-section.first{padding-top:0;border:none}
.cm-mp-section h2{margin-bottom:15px;font-size:22px;font-weight:700;color:var(--secondary)}
.cm-mp-section h2.cm-flex{justify-content:space-between}
.cm-doc-form.mp ul.half{gap:15px}
.cm-doc-form.mp ul.half li{padding-right:30%}
.cm-doc-form.mp ul.half li > label, .cm-doc-form.mp ul.half li > .label{min-width:200px}
.cm-doc-form.mp .btn-wrap{justify-content:flex-end;margin-bottom:15px}
.cm-doc-form.mp .cm-mp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;column-gap:60px}
.cm-doc-form.mp .width-auto.row-4{width:100%}
.cm-doc-form.mp .width-auto.row-4 label{min-width:25%;padding:0}
.cm-mp-center-btns{justify-content:center;margin-top:30px}
.cm-mp-cancle-btn{width:65px}
.cm-mp-save-btn{width:160px}
.cm-mp-search{gap:5px;padding:15px;margin:15px 0;border-radius:6px;font-size:15px;font-weight:600;color:var(--secondary);background:var(--surface-gray)}
.cm-mp-search .stit{margin-right:10px}
.cm-mp-search input, .cm-mp-search select{height:34px;padding:0 10px;border-radius:4px;font-size:14px}
.cm-mp-search select{cursor:pointer}
.cm-mp-search .cm-input{max-width:170px}
.cm-mp-search .btns-right{align-items:center;gap:5px;margin-left:auto}
.cm-mp-search .btns-right button, .cm-mp-search .btns-right a{height:32px;padding:0 15px;line-height:32px}
.cm-mp-count{margin:30px 0 10px;font-weight:500;color:var(--secondary)}
.cm-mp-count span+span:before{display:inline-block;content:"";width:1px;height:10px;margin:0 10px;background:#bbb}

/* 마이페이지 - 테이블 */
.cm-mp-table{width:100%}
.cm-mp-table thead{position:sticky;top:0}
.cm-mp-table thead th{padding:10px 0;border-top:2px solid var(--secondary);font-weight:500;color:var(--secondary);background:var(--surface-gray)}
.cm-mp-table thead th.tip p{justify-content:center;gap:2px}
.cm-mp-table td{height:45px;border-bottom:1px solid #ddd;text-align:center;color:var(--color-dark);background:#fff}
.cm-mp-table td.name a{justify-content:center;gap:2px;color:var(--secondary)}
.cm-mp-table td.name svg{width:14px;height:14px;color:var(--color-gray)}
.cm-mp-table td.empty{padding:40px 10px}
.cm-mp-table .ck{padding:10px 5px}
.cm-mp-table .ck label{justify-content:center}
.cm-mp-table .material-symbols-outlined{vertical-align:-4px;font-size:18px}

/* 마이페이지 - 페이지 탭 */
.cm-mp-page-tabs{overflow:hidden;gap:12px;position:relative;margin:10px 0 40px}
.cm-mp-page-tabs:after{content:"";position:absolute;bottom:0;left:0;z-index:-1;width:100%;height:2px;background:var(--secondary)}
.cm-mp-page-tabs a{flex:1;padding:18px 0 15px;border-bottom:2px solid var(--secondary);border-radius:8px 8px 0 0;font-size:17px;font-weight:500;text-align:center;color:#999;background:#f2f2f2}
.cm-mp-page-tabs a.on{cursor:default;border:2px solid var(--secondary);border-bottom:none;font-weight:600;color:var(--secondary);background:#fff}
.cm-mp-page-tabs.medium a{padding:15px 0 12px;font-size:15px}

/* 마이페이지 - 대시보드 - 공통 */
/* 마이페이지 - 대시보드 - 기업 */
#myDashBd.cp .tit{align-items:baseline;justify-content:space-between;margin:25px 0;font-size:15px;font-weight:500;color:var(--secondary)}
#myDashBd.cp .tit h1{margin:0;font-size:28px}
#myDashBd.cp .tit span{margin-right:4px;font-size:14px}
#myDashBd.cp h2{font-size:18px;font-weight:700;color:var(--secondary)}
#myDashBd.cp .atc1{gap:10px}
#myDashBd.cp .atc1 li{flex:1;padding:20px;border-radius:6px;border:1px solid #ddd}
#myDashBd.cp .atc1 li h2{margin-right:auto}
#myDashBd.cp .atc1 li dl{display:flex;align-items:flex-end;margin-top:45px}
#myDashBd.cp .atc1 li dl dd{margin-left:auto;font-size:18px;font-weight:700}
#myDashBd.cp .atc1 li dl dd a{color:var(--primary)}
#myDashBd.cp .atc2{align-items:unset;gap:20px;margin-top:40px}
#myDashBd.cp .atc2 > div{flex:1;padding:30px;border-radius:6px;border:1px solid #ddd}
#myDashBd.cp .atc2 .stit{margin-bottom:15px}
#myDashBd.cp .atc2 .stit a{margin-left:auto;color:var(--color-gray)}
#myDashBd.cp .atc2 ul li{display:flex;align-items:center;gap:6px;min-height:22px;line-height:1}
#myDashBd.cp .atc2 ul li+li{margin-top:10px}
#myDashBd.cp .atc2 ul li:before{content:"";width:3px;height:3px;margin-bottom:1px;border-radius:50%;background:var(--secondary)}
#myDashBd.cp .atc2 ul li > span{margin-left:auto;font-size:13px;color:var(--color-gray)}
#myDashBd.cp .atc2 ul.doc1 li a{font-weight:500;color:var(--secondary)}
#myDashBd.cp .atc2 ul.doc2 li p{display:flex;align-items:center;gap:3px;margin-right:auto;font-weight:500;color:var(--secondary)}
#myDashBd.cp .atc2 ul.doc2 li p .new{width:13px;height:13px;border-radius:3px;font-size:8px;color:#fff;text-align:center;line-height:13px;background:var(--primary)}
#myDashBd.cp .atc2 ul.doc2 li a{margin-left:auto}
#myDashBd.cp .atc3{align-items:unset;gap:20px;margin-top:40px}
#myDashBd.cp .atc3 > div{flex:1;padding:30px;border-radius:6px;border:1px solid #ddd}
#myDashBd.cp .atc3 h2{margin-bottom:15px}
#myDashBd.cp .atc3 .chart-wrap{position:relative;overflow:hidden;height:220px}
#myDashBd.cp .atc3 .chart-inner{position:relative;top:50%;transform:translateY(-50%);height:300px}
#myDashBd.cp #pieChart{margin:0 auto}
#myDashBd.cp .atc4{align-items:unset;gap:20px;margin-top:40px}
#myDashBd.cp .atc4 > div{flex:1;padding:30px;border-radius:6px;border:1px solid #ddd}
#myDashBd.cp .atc4 .stit{margin-bottom:15px}
#myDashBd.cp .atc4 .stit a{margin-left:auto;color:var(--color-gray)}
#myDashBd.cp .atc4 .links a{display:flex;align-items:center}
#myDashBd.cp .atc4 .links img{vertical-align:middle;max-height:16px;margin-right:2px}
#myDashBd.cp .atc4 ul li{display:flex;align-items:center;gap:6px;min-height:22px;line-height:1}
#myDashBd.cp .atc4 ul li+li{margin-top:10px}
#myDashBd.cp .atc4 ul li:before{content:"";width:3px;height:3px;margin-bottom:1px;border-radius:50%;background:var(--secondary)}
#myDashBd.cp .atc4 ul li > span{margin-left:auto;font-size:13px;color:var(--color-gray)}

/* 마이페이지 - 회원정보 */
#mpCompany .upload-area{gap:20px;align-items:unset}
#mpCompany .upload-area li{gap:10px;width:calc(100% / 3);border:1px solid #ddd;border-radius:6px;padding:20px;text-align:center}
#mpCompany .upload-area li p{font-size:16px;font-weight:600;color:var(--secondary)}
#mpCompany .upload-area li input[type="file"]{display:none}
#mpCompany .upload-area li img{width:100%;max-height:150px;object-fit:contain}
#mpCompany .upload-area li .upload-btn{cursor:'\f245'}
#mpCompany .upload-area li .no-image{width:100%;padding:20px;border-radius:6px;background:#f2f2f2}
#mpCompany .switch-wrap{display:flex;align-items:center;gap:10px;margin-left:20px;font-size:14px;font-weight:600;color:var(--primary)}
#mpCompany .switch{position:relative;min-width:50px;height:26px}
#mpCompany .switch input{display:none}
#mpCompany .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;width:50px;border-radius:34px;background:#ccc;transition:0.4s}
#mpCompany .switch .slider:before{position:absolute;content:"";left:3px;bottom:3px;width:20px;height:20px;;border-radius:50%;background:#fff;transition:0.4s}
#mpCompany .switch input:checked + .slider{background:var(--primary)}
#mpCompany .switch input:checked + .slider:before{transform:translateX(24px)}
#mpCompany .switch input:checked + .slider:after{content:"ON";padding-left:6px;font-size:12px;color:#fff;line-height:27px}
#mpCompany .switch input:disabled + .slider{background:#e0e0e0;cursor:not-allowed}
#mpCompany .switch input:disabled + .slider:before{background:#c0c0c0}
#mpCompany .cm-doc-form.mp ul li:has(.switch){align-items:flex-end}
#mpCompany .cm-doc-form.mp .width-auto.row-4 label{margin:0}

/* 마이페이지 - 부서/직급 관리 */
#mpDepartment .tit-area{margin-bottom:40px}
#mpDepartment .dptm-wrap{gap:20px;align-items:unset}
#mpDepartment .dptm-wrap h2{font-size:20px;font-weight:700;color:var(--secondary)}
#mpDepartment .dptm-wrap > div{width:50%;padding:25px;border:1px solid #ddd;border-radius:6px}
#mpDepartment .dptm-wrap .btns{margin-left:auto}
#mpDepartment .tbl-scr{overflow-y:auto;height:300px;margin-top:20px}
#mpDepartment table{width:100%;color:var(--secondary)}
#mpDepartment table .cm-input-ck-label{display:inline-flex}
#mpDepartment table thead{position:sticky;top:0}
#mpDepartment table th{padding:10px 0;border-top:2px solid var(--secondary);font-size:15px;font-weight:500;background:var(--surface-gray)}
#mpDepartment table td{height:45px;border-bottom:1px solid #ddd;text-align:center;background:#fff}
#mpDepartment table tr.dragging td{border:none;background:#f2f2f2}
#mpDepartment table td .feather-menu{width:18px;height:18px;vertical-align:middle;color:var(--color-gray);cursor:grab}
#mpDepartment table td .feather-menu:active{cursor:grabbing}
#mpDepartment table td .cm-input{width:100px;height:30px;font-size:14px}

/* 마이페이지 - 직원 등록 */
#mpWkAdd ul li.taxfree button{flex-shrink:0;width:40px;height:40px;padding:0}
#mpWkAdd ul li.taxfree button svg{width:20px;height:20px}
#mpWkAdd ul li.taxfree .cm-flex{gap:8px}
#mpWkAdd ul li.taxfree .cm-flex+.cm-flex{margin-top:8px}
#mpWkAdd ul li.space-top{margin-top:25px;padding-top:40px;border-top:1px dotted #ddd}
#mpWkAdd ul li .pw label{min-width:auto}
#mpWkAdd ul li .pw label:not(:last-of-type){min-width:auto;white-space:nowrap;margin-right:30px}
#mpWkAdd ul li .pw label:nth-of-type(2){margin:0 10px 0 0}
#mpWkAdd .join-request{margin-top:30px;font-weight:500;text-align:center;color:var(--secondary)}
#mpWkAdd .join-request label{display:inline-flex;justify-content:center;font-size:16px}
#mpWkAdd .join-request span{width:18px;height:18px}
#mpWkAdd .join-request span svg{width:14px;height:14px}

/* 마이페이지 - 문서 발급 현황 */
#mpWkHistory .cate{margin-bottom:15px}
#mpWkHistory .cate button{display:flex;align-items:center;font-size:16px;font-weight:500;color:#999}
#mpWkHistory .cate button+button:before{content:"";width:1px;height:11px;margin:0 12px;background:#ccc}
#mpWkHistory .cate button.on{color:var(--secondary)}

/* 마이페이지 - 급여대장 */
#mpPayroll h1{margin-top:25px;font-size:28px;text-align:center}
#mpPayroll .cm-mp-search{gap:12px}
#mpPayroll .cm-mp-search .cm-flex{gap:5px}
#mpPayroll .cm-mp-search .cm-flex .stit{margin-right:5px}
#mpPayroll .cm-mp-table thead{position:relative}
#mpPayroll .cm-mp-table tr:nth-child(2) th{border-top:none}
#mpPayroll .cm-mp-table th{padding:10px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;white-space:nowrap}
#mpPayroll .cm-mp-table th:last-child{border-right:none}
#mpPayroll .cm-mp-table td{padding:10px;border-right:1px solid #ddd;white-space:nowrap}
#mpPayroll .cm-mp-table td:last-child{border-right:none}
#mpPayroll .cm-mp-table td.fix{position:sticky;left:0}
#mpPayroll .cm-mp-table td.name button{display:inline-flex;justify-content:center;align-items:flex-end;gap:2px;color:var(--secondary)}
#mpPayroll .cm-mp-table td.name svg{color:var(--primary)}
#mpPayroll .cm-mp-table tbody tr:hover td{background:#f9f9f9}
#mpPayroll .cm-mp-table tfoot td{font-weight:500;color:var(--secondary);background:var(--surface-gray)}
#mpPayroll table td .cm-input{width:100px;height:30px;padding:0 8px;font-size:14px}

/* 마이페이지 - 급여명세서 */
#mpSalarySlip h1{margin-top:25px;font-size:28px;text-align:center}
#mpSalarySlip .cm-mp-search{gap:12px}
#mpSalarySlip .cm-mp-search .cm-flex{gap:5px}
#mpSalarySlip .cm-mp-search .cm-flex .stit{margin-right:5px}
#mpSalarySlip .cm-mp-search .btns-right input{min-width:200px}
#mpSalarySlip .cm-mp-table td.name svg{width:15px;height:15px}
#mpPreview{text-align:center}
#mpPreview .inner{padding:40px 0}

/* 마이페이지 - 증명서 */
#mpCertificate .cm-mp-search .btns-right input{max-width:120px}
#mpCertificate .cm-mp-table thead th{border-top:1px solid #ccc}

/* 마이페이지 - 근로계약서 */
#mpContract .cm-ps{margin:0}
#mpContract .cm-mp-count{margin-top:15px}

/* 마이페이지 - 캘린더 */
#myCalendar{padding:100px 0;text-align:center}

/* 마이페이지 - 공지사항 */
#mpNotice .subj a{color:var(--secondary)}
/* 마이페이지 - 공지사항(직원용) */
#mpNotice.worker .cm-mp-search .btns-right{order:-1;margin:0 auto 0 0}

/* 마이페이지 - 공지사항 뷰 */
#mpNoticeView h1{margin:25px 0 15px;font-size:28px;text-align:center}
#mpNoticeView .info{padding-bottom:15px;border-bottom:2px solid var(--secondary)}
#mpNoticeView .info .date{margin-left:auto}
#mpNoticeView .cont{padding:30px;color:var(--color-dark);line-height:1.8}

/* 마이페이지 - 공지사항 글쓰기 */
#mpNoticeWrite form{display:flex;flex-direction:column;border-top:2px solid var(--secondary)}
#mpNoticeWrite dl{display:flex;padding:20px}
#mpNoticeWrite dl+dl{border-top:1px solid #ddd}
#mpNoticeWrite dl dt{flex-shrink:0;width:12%;font-size:15px;font-weight:500;color:var(--secondary)}
#mpNoticeWrite dl dt label{font-size:16px;font-weight:600;color:var(--secondary)}
#mpNoticeWrite dl dd{flex-grow:1}
#mpNoticeWrite dl dd.cm-flex{gap:30px}

/* 마이페이지 - 저장 문서함 */
#myArchive .list{display:grid;grid-template-columns:repeat(3,1fr);row-gap:40px;column-gap:20px}
#myArchive .list .item{overflow:hidden;position:relative;border:1px solid #ddd;border-radius:6px;transition:all .15s}
#myArchive .list .item .cm-input-ck-label{position:absolute;top:10px;left:10px;z-index:1}
#myArchive .list .item .img{overflow:hidden;height:140px;padding:10px;background:#f2f2f2}
#myArchive .list .item .img img{width:100%;height:100%;opacity:.9;object-fit:contain;padding:5px;background:#fff}
#myArchive .list .item .txt{padding:15px 20px;font-size:13px;color:var(--color-gray)}
#myArchive .list .item .txt p{margin-bottom:5px;font-size:16px;color:var(--secondary);font-weight:600;color:var(--secondary)}
@media(hover:hover){
#myArchive .list .item:hover{border-color:#aaa}    
}

/* 마이페이지(직원용) - 급여명세서 */
#mpSalarySlipWk .subj a{color:var(--secondary)}

/* 마이페이지(직원용) - 급여명세서 열람 비밀번호*/
#mpSalarySlipWkPw .cont{max-width:320px;margin:0 auto;padding-top:5vh;text-align:center}
#mpSalarySlipWkPw .cont img{width:65px;opacity:.75}
#mpSalarySlipWkPw .cont p{margin:30px 0 20px;font-size:20px;font-weight:700;color:var(--secondary)}

/* 마이페이지(직원용) - 급여명세서/증명서/근로계약서 리스트 공통 */
#mpWokerList .latest{gap:20px;margin-bottom:40px}
#mpWokerList .latest{align-items:normal}
#mpWokerList .latest > div{flex:1;padding:30px;border-radius:6px;font-size:15px}
#mpWokerList .latest .main{position:relative;color:#fff;background:var(--primary);background:linear-gradient(60deg, var(--primary), #17CCEA)}
#mpWokerList .latest .main img{position:absolute;right:20px;top:20px;opacity:.15}
#mpWokerList .latest .main p{padding-bottom:15px;margin-bottom:15px;border-bottom:2px solid rgba(255,255,255,.95);font-size:18px;font-weight:600}
#mpWokerList .latest .main p.empty{position:Relative;top:50%;transform:translateY(-50%);padding:0;margin:0;border:none}
#mpWokerList .latest .main ul li{display:flex}
#mpWokerList .latest .main ul li+li{margin-top:10px}
#mpWokerList .latest .main ul li span{margin-left:auto}
#mpWokerList .latest .main.contract{background:linear-gradient(60deg, #f0610f, #fcbc0d)}
#mpWokerList .latest .main.certificate{background:linear-gradient(60deg, #0c9170, #5fd45f)}
#mpWokerList .latest .sub{border:1px solid #ddd}
#mpWokerList .cm-mp-search .btns-right{gap:0}
#mpWokerList .cm-mp-search .btns-right span+span:before{display:inline-block;content:"";width:1px;height:10px;margin:0 10px;background:#aaa}
#mpWokerList.slip .latest .sub ul{align-items:unset;justify-content:space-between;height:100%}
#mpWokerList.slip .latest .sub ul li{display:flex}
#mpWokerList.slip .latest .sub ul li p{gap:2px}
#mpWokerList.slip .latest .sub ul li > span{margin-left:auto;color:var(--secondary)}
#mpWokerList.slip .latest .main ul li:not(:first-child){padding:0 15px;color:rgba(255,255,255,.75)}
#mpWokerList.slip .latest .main ul li:first-child{margin:15px 0;padding:0 15px 15px;border-bottom:1px solid rgba(255,255,255,.35);font-size:16px;font-weight:500}
#mpWokerList.contract .latest .main ul{position:relative}
#mpWokerList.contract .latest .sub{padding-bottom:25px;border:1px solid #ddd;font-size:14px;color:var(--color-dark);line-height:1.65}
#mpWokerList.contract .latest .sub p{margin-bottom:15px;font-size:18px;font-weight:700;color:#111}
#mpWokerList.contract .latest .sub b{font-weight:500;color:var(--primary)}
#mpWokerList.contract .latest .sub p{margin-bottom:15px;font-size:18px;font-weight:700;color:#111}
#mpWokerList.certificate .latest .main ul li svg{vertical-align:-3px;width:15px;height:15px;animation:circle_rotate 3s linear infinite}
@keyframes circle_rotate{0%{transform:rotate(0deg)} 50%{transform:rotate(-180deg)} 100%{transform:rotate(-360deg)}}
#mpWokerList.certificate .latest .sub p{margin-bottom:15px;font-size:18px;font-weight:700;color:#111}

/* 마이페이지 [e] *************************************************************************************************** */


/* 보류 */
#myCalendar .mypage-calendar-wrap{padding:30px;background:#fff}
#myCalendar .calendar-wrap{display:flex;border:1px solid #ddd}
#myCalendar .sidebar{width:160px;border-right:1px solid #ddd;padding:20px}
#myCalendar .legend-item{display:flex;align-items:center;margin-bottom:10px;font-size:13px}
#myCalendar .legend-item span{width:12px;height:12px;border-radius:2px;margin-right:6px}
#myCalendar .legend-my{background:#003366}
#myCalendar .legend-labor{background:#ffcc00}
#myCalendar .calendar{flex:1;padding:20px}
#myCalendar .cal-header{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:20px}
#myCalendar .cal-header button{border:1px solid #ccc;background:#fff;cursor:pointer;padding:4px 10px;border-radius:4px;font-size:14px}
#myCalendar .month-label{font-weight:bold;font-size:18px;min-width:100px;text-align:center}
#myCalendar table{width:100%;border-collapse:collapse;text-align:center}
#myCalendar th{color:#555;font-weight:500;padding:8px;border-bottom:1px solid #eee}
#myCalendar td{height:80px;vertical-align:top;border-bottom:1px solid #f2f2f2;border-right:1px solid #f2f2f2;font-size:13px;position:relative}
#myCalendar td:last-child{border-right:none}
#myCalendar td .day{position:absolute;top:6px;right:6px;font-size:12px}
#myCalendar td.sun .day{color:#d00}
#myCalendar td.sat .day{color:#009}
#myCalendar .event{display:block;margin-top:22px;background:#003366;color:#fff;font-size:11px;padding:2px 4px;border-radius:3px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#myCalendar .event.yellow{background:#ffcc00;color:#333}