@charset "utf-8";
.clearfix:after {content: "."; display: block; height: 0; overflow: hidden; clear: both; zoom:1;}
.salaryCalc button{outline:none;}
/* input number style */
.salaryCalc{background-color: #e9ecef;}
.salaryCalc .icn{background-image:url("/images/jk-mobile/ver_1/goodjob/salary_calc/img_salary_calc.png"); background-size:119px 71px; background-repeat:no-repeat;}
.salaryCalc .check-icn{background: url('data:image/svg+xml, %0D%0A%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.658%22%20height%3D%229.276%22%20viewBox%3D%220%200%2013.658%209.276%22%3E%0D%0A%20%20%3Cpath%20id%3D%22%ED%8C%A8%EC%8A%A4_2363%22%20data-name%3D%22%ED%8C%A8%EC%8A%A4%202363%22%20d%3D%22M14.537%2C6%2C7.072%2C13.465%2C3%2C9.393%22%20transform%3D%22translate%28-1.939%20-4.939%29%22%20fill%3D%22none%22%20stroke%3D%22%23002aff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A'); background-repeat:no-repeat;}
.salaryCalc .salaryCalcWrap{padding:30px 10px; background-color:#e9ecef;}
.salaryCalc .salaryCalcWrap form fieldset{width:100%;}
.salaryCalc .salaryCalcWrap .calcTit{ margin-bottom:12px; }
.salaryCalc .salaryCalcWrap .calcTit h1 { font-size: 18px; color:#131618; line-height: 24px; font-weight:bold; display:inline;}
.salaryCalc .salaryCalcWrap .calcTit button{float:right; width:105px; text-align: right; font-size:13px; margin-top:3px; }
.salaryCalc .salaryCalcWrap .calcTit button > span { vertical-align: middle; display:inline-block; }
.salaryCalc .salaryCalcWrap .calcTit button .icn{width:18px; height:18px; float:right;background-position:-99px -22px; position:relative; top:-1px; margin-left:4px;}
.salaryCalc .salaryCalcWrap .calcTit p { margin-top: 4px; font-size: 13px; color: #6C767F; line-height: 20px; }
.salaryCalc .salaryCalcWrap .calcInput{background-color:#fff; box-sizing:border-box; border:1px solid #dbdcde; border-radius: 10px; padding:12px 16px;}
.salaryCalc .salaryCalcWrap .calcInput > div{ padding: 8px 0;}
.salaryCalc .salaryCalcWrap .calcInput > div .msgbox{text-align:right; font-size:0.857em; width: 100%; height: 16px; }
.salaryCalc .salaryCalcWrap .calcInput > div .msgbox .num{color:#002aff;}
.salaryCalc .salaryCalcWrap .calcInput > div .msgbox .alrt{color:#ff0000;}
.salaryCalc .salaryCalcWrap .inner .liMonth > .msgbox {margin-top: -23px;}
.salaryCalc .salaryCalcWrap .calcInput > div dl{display:inline-table; width:100%; height: 40px; margin-bottom: 5px;}
.salaryCalc .salaryCalcWrap .calcInput > div:first-child dl {margin-bottom: 0;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dt{display:table-cell; width:108px; min-width:100px; height: 40px; box-sizing:border-box; font-size:1.071em; color:#333; vertical-align: middle; position:relative;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dt::after {content: ""; display: table; clear: both;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dt > span{font-size:0.929em;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dt > button{position:absolute; top:9px; right:14px; width:21px; height:21px; display:block; background-position:-2px -2px; text-indent:-9999px; overflow:hidden;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dt > button.on{position:absolute; top:9px; right:14px; width:21px; height:21px; display:block; background-position:-28px -2px; text-indent:-9999px; overflow:hidden; }
.salaryCalc .salaryCalcWrap .calcInput > div dl dd{width:100%; position:relative; -webkit-box-sizing:border-box; box-sizing:border-box;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.taxfree:after{content:"원"; color:#333; position:absolute; box-sizing:border-box; margin-top: -9px; top:50%; right:3px; width:20px; display:block; }
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.taxfree input { padding-left: 47px; }
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.taxfree .num { position:absolute; top: 12px; left:8px; font-size:12px; color: #002aff;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.salary:after{content:"원"; color:#333; position:absolute; box-sizing:border-box; margin-top: -9px; top:50%;; right:3px; width:20px; display:block;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.salary.typing span {position:absolute; top: 12px; margin-left: 10px;font-size:12px; color: #002aff;}
 
.salaryCalc .salaryCalcWrap .calcInput > div dl dd input{width:100%; text-align:right; box-sizing:border-box; padding:0 25px 0 8px; line-height:100%; vertical-align: middle; border-radius: 0; border: 1px solid #E0E0E0;}
.salaryCalc input.fail {border: 1px solid #ff0000 !important;}
.salaryCalc div.fail {border: 1px solid #ff0000 !important; box-sizing:border-box; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd input[type=number]{-webkit-appearance:none; -moz-appearance:textfield; margin:0;}
 
.salaryCalc .salaryCalcWrap .calcInput > div dl dd input[type=number]::-webkit-inner-spin-button, 
.salaryCalc .salaryCalcWrap .calcInput > div dl dd input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none; -moz-appearance:textfield; margin:0;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div{width:100%; display:inline-block;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div > *{width:50%; height: 40px; float:left; box-sizing:border-box; padding: 12px 0;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div button:first-child{margin-right: -1px;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div button{border:1px solid #E0E0E0; background-color:#fff; color:#999; line-height: 1;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div button.on{position: relative; color: #002aff; border:1px solid #002aff;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div button.on > .icn{width:13px; height:16px; margin-right:4px; display:inline-block; background-position:-99px -3px; position:relative; top:1px;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div button > .icn{display:none;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div button.on > .check-icn{width: 18px; height: 9px; position:relative; top:-1px; display: inline-block;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.selSalaryType div button > .check-icn{display:none;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.familyNum > div{width:100%; box-sizing:border-box; height:40px; align-items: center;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.familyNum > div > input{display:table-cell; text-align:center; padding:0 40px; box-sizing: border-box;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.familyNum > div > button.minus{width:40px; height:40px; background-color:#fff; border: 1px solid #E0E0E0; box-sizing: border-box; position: absolute; left: 0; top: 0; font-size: 0; background: url(/images/jk-pc/ver_1/common/tpl_sp_btn.png) no-repeat -217px 19.5px; background-repeat:no-repeat;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.familyNum > div > button.plus{width:40px; height:40px; background-color:#fff; border: 1px solid #E0E0E0; box-sizing: border-box; position: absolute; right: 0; top: 0; font-size: 0; background: url(/images/jk-pc/ver_1/common/tpl_sp_btn.png) no-repeat -184px 14.5px; background-repeat:no-repeat;}
.salaryCalc .salaryCalcWrap .calcInput > div dl dd.familyNum > div > button.fail {border: 1px solid #ff0000;}
.salaryCalc .salaryCalcWrap .calcResult{background-color:#fff; box-sizing:border-box; border:1px solid #dbdcde; border-bottom:none;}
.salaryCalc .salaryCalcWrap .calcResult .resultTab {width:100%;}
.salaryCalc .salaryCalcWrap .calcResult .resultTab button:first-child{border-left:none;}
.salaryCalc .salaryCalcWrap .calcResult .resultTab button.on{border-bottom:none; background-color:#fff; color:#000;}
.salaryCalc .salaryCalcWrap .calcResult .resultTab button{width:50%; height:50px; box-sizing:border-box; float:left; font-size:1.071em; background-color:#f5f5f5; color:#999; border-left:1px solid #dbdcde; border-bottom:1px solid #dbdcde;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont{padding:15px 20px 19px; background-image:url("/images/jk-mobile/ver_1/goodjob/salary_calc/img_receipt.png"); background-size:11px 4px; background-position:0 100%; background-repeat:repeat-x;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont > p{font-size:0.857em; padding-left:24px; padding-right:5px; position:relative; margin-bottom:15px;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont > p:after{content:""; position:absolute; top:0; left:5px; background-image:url("/images/jk-mobile/ver_1/goodjob/salary_calc/img_salary_calc.png"); width:16px; height:16px; background-size:119px 71px; background-repeat:no-repeat; background-position:-99px -45px; display:block;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont dl{border-top:1px solid #eee; padding:15px 5px;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont dl:after{content:""; display:block;overflow: hidden; clear: both; zoom:1; }
.salaryCalc .salaryCalcWrap .calcResult .resultCont dl dt{float:left; line-height:100%; color:#999; font-size:1.071em; }
.salaryCalc .salaryCalcWrap .calcResult .resultCont dl dd{float:right; line-height:100%; color:#333; font-size:1.071em; }
.salaryCalc .salaryCalcWrap .calcResult .resultCont .list{border-top:1px solid #ccc}
.salaryCalc .salaryCalcWrap .calcResult .resultCont .list dl:first-child{border-top:none;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont .total dt{color:#333;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont .result{border-top:1px solid #ccc;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont .result dl{border-top:0;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont .result dl > *{font-size:1.071em; color:#002aff; font-weight:bold;}
.salaryCalc .salaryCalcWrap .calcResult .resultCont .result > p{margin:-5px 0 20px; text-align:right; font-size:0.857em; color:#666;padding:0 5px;}
.salaryCalc .salaryCalcWrap .calcNotice{font-size:0.857em;color:#666; margin-top:20px; padding:0 10px;}
.salaryCalc .salaryCalcWrap .calcNotice + .calcBtn{margin-top:30px;}
.salaryCalc .salaryCalcWrap .calcBtn{margin-top:12px;}
.salaryCalc .salaryCalcWrap .calcBtn button{width:100%; height:48px; background-color: #1B55F6; color:#fff; font-size:16px; text-align:center; font-weight:600; border-radius:10px; box-sizing:border-box;}
.salaryCalcNoti .salaryNotiWrap article.notiInfo p{font-size:1em; color:#333; padding:30px 15px; border-bottom:1px solid #ddd; line-height:1.5em;}
.salaryCalcNoti .salaryNotiWrap article.notiRules{padding:0 15px 30px;}
.salaryCalcNoti .salaryNotiWrap article.notiRules h2{margin-top:30px; color:#333;}
.salaryCalcNoti .salaryNotiWrap article.notiRules ul{margin-top:10px;}
.salaryCalcNoti .salaryNotiWrap article.notiRules ul + h2{margin-top:25px; color:#333;}
.salaryCalcNoti .salaryNotiWrap article.notiRules li{padding-left:12px; text-indent:0px; position:relative; font-size:1em; color:#666;line-height:1.5em;}
.salaryCalcNoti .salaryNotiWrap article.notiRules li:before{content:""; position:absolute; top:10px; left:5px; width:2px; height:2px; display:block; background-color:#666; line-height:1.5em;}
.salaryCalcNoti .footer{ padding-top:15px; height:56px; box-sizing:border-box;}

.salaryCalc .salaryCalcWrap .calcBox { margin-top:16px; background-color:#fff; box-sizing:border-box; border:1px solid #dbdcde; border-radius: 10px; padding:12px 16px 16px;}
.salaryCalc .salaryCalcWrap .calcBox .titGrp { margin-bottom: 12px; }
.salaryCalc .salaryCalcWrap .calcBox .titGrp .tit {font-weight:bold;font-size:16px;letter-spacing: 0px; color:#131618; line-height:24px;}
.salaryCalc .salaryCalcWrap .calcBox .titGrp .info { margin-top:2px; font-size:12px; letter-spacing: 0px; color:#6C767F; line-height:18px;}
.salaryCalc .salaryCalcWrap .calcBox .txt { margin-top: 2px; font-size:12px;letter-spacing: 0px; color: #6C767F; line-height:18px; word-wrap: break-word; word-break: keep-all; }
.salaryCalc .salaryCalcWrap .calcBox .bgGrp { margin-top: 12px; padding: 12px 8px; background: #F4F6F7; font-size:14px;letter-spacing: 0px; color: #30363C; line-height:20px; text-align: center; }
.salaryCalc .salaryCalcWrap .calcBox .bgGrp strong { font-weight: 600; font-size:16px; line-height:24px; }
.salaryCalc .salaryCalcWrap .calcBox .bgGrp p + p { margin-top: 2px; }
.salaryCalc .salaryCalcWrap .calcBox dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 8px; margin-top: -8px; }
.salaryCalc .salaryCalcWrap .calcBox dl dt { margin-top: 8px; font-size:14px;letter-spacing: 0px; color: #30363C; line-height:20px; }
.salaryCalc .salaryCalcWrap .calcBox dl dd { margin-top: 8px; font-size:14px;letter-spacing: 0px; color: #6C767F; line-height:20px; word-wrap: break-word; word-break: keep-all; }
.salaryCalc .salaryCalcWrap .calcBox table { width: 100%; }
.salaryCalc .salaryCalcWrap .calcBox table caption { display: none; }
.salaryCalc .salaryCalcWrap .calcBox table thead { border-bottom: 1px solid #E2E6E8; background: #F4F6F7; }
.salaryCalc .salaryCalcWrap .calcBox table thead th { height: 37px; font-weight: 500; font-size:14px;letter-spacing: 0px; color: #30363C; text-align: center; }
.salaryCalc .salaryCalcWrap .calcBox table tbody td { height: 37px; font-size:13px;letter-spacing: 0px; color: #30363C; text-align: center;  border-bottom: 1px solid #E2E6E8; }
.salaryCalc .salaryCalcWrap .calcBox table tbody td strong { font-size: 14px; font-weight: 500; }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem { border-bottom: 1px solid #E2E6E8; }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem .faqQ { position: relative; display: flex; align-items: center; width: 100%; text-align: left; padding: 12px 32px 12px 8px; color:#30363C; font-size:14px; letter-spacing: 0px; line-height: 20px; font-weight:500; cursor:pointer; }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem .faqQ .q { margin-right: 8px; font-weight: 600; color:#1B55F6; }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem .faqQ .arrow { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 16px; height: 16px; background: url('/images/jk-mobile/ver_1/goodjob/salary_calc/ico_accordion_arrow_close.png') no-repeat center; background-size: cover; }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem .faqQ[aria-expanded="true"] .arrow { background-image: url('/images/jk-mobile/ver_1/goodjob/salary_calc/ico_accordion_arrow_open.png'); }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem .faqA { padding: 12px 8px; background: #F4F6F7; color:#30363C; font-size:14px; letter-spacing: 0px; line-height: 20px; word-wrap: break-word; word-break: keep-all; }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem .faqA:not([hidden]) { display: flex; }
.salaryCalc .salaryCalcWrap .calcBox .faqList .faqItem .faqA .a { margin-right: 8px; font-weight: 600; color:#1B55F6; }
.salaryCalc .salaryCalcWrap .calcBox .txtdesc { position: relative; margin-top: 12px; font-size:12px;letter-spacing: 0px; color: #6C767F; line-height:18px; padding-left: 18px; }
.salaryCalc .salaryCalcWrap .calcBox .txtdesc:before { content: ''; position:absolute; top:2px; left:0; width: 14px; height: 14px; background: url('/images/jk-mobile/ver_1/goodjob/salary_calc/ico_textdesc.png') no-repeat center; background-size: cover; }

/* 레이어팝업 */
.salaryCalc .lyWrap{position:fixed; top:50%; width:100%; box-sizing:border-box; padding:0 37px; z-index:120;}
.salaryCalc .lyWrap .layerPop{width:100%; background-color:#fff;}
.salaryCalc .lyWrap .layerPop .pop1{width:100%; background-color:#fff; box-sizing: border-box; display:none;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopTit{height:46px; font-size:1.214em; font-weight:bold; position:relative; color:#fff; background-color:#002aff; padding:16px; box-sizing:border-box; line-height:100%;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopTit .close{position:absolute; top:16px; right:16px; background-image:url("/images/jk-mobile/bg_layer_close.png?201603281157"); background-repeat:no-repeat; background-position:-16px 0; background-size:32px 16px; display:block; width:16px; height:16px; text-indent:-9999px; overflow:hidden;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont {height:387px; padding-top:30px; padding-bottom:30px; box-sizing:border-box;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap {height:100%;overflow:auto;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap article.notiInfo p{font-size:1em; color:#333; padding:0 15px 30px; border-bottom:1px solid #ddd; line-height:1.5em;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap article.notiRules{padding:0 15px;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap article.notiRules h2{margin-top:30px; color:#333;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap article.notiRules ul{margin-top:10px;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap article.notiRules ul + h2{margin-top:25px; color:#333;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap article.notiRules li{padding-left:12px; text-indent:0px; position:relative; font-size:1em; color:#666;line-height:1.5em;}
.salaryCalc .lyWrap .layerPop .pop1 .layerPopCont .salaryNotiWrap article.notiRules li:before{content:""; position:absolute; top:10px; left:5px; width:2px; height:2px; display:block; background-color:#666; line-height:1.5em;}
.salaryCalc .lyWrap .layerPop .pop2{width:100%; background-color:#fff; padding:23px 15px 0 15px; box-sizing:border-box; position:relative; display:none;}
.salaryCalc .lyWrap .layerPop .pop2 > .close{position:absolute; top:16px; right:16px; background-image:url("/images/jk-mobile/bg_layer_close.png?201603281157"); background-repeat:no-repeat; background-position:0 0; background-size:32px 16px; display:block; width:16px; height:16px; text-indent:-9999px; overflow:hidden;}
.salaryCalc .lyWrap .layerPop .pop2 > span{width:70px; height:70px; display:block; background-image:url("/images/jk-mobile/ver_1/goodjob/text_count/img_text_count.png"); background-repeat:no-repeat; background-position:-2px -2px; background-size:96px 74px; margin:0px auto;}
.salaryCalc .lyWrap .layerPop .pop2 > p{text-align:center; margin:14px 0 0; padding-bottom:19px; border-bottom:1px solid #e9e9e9; font-size:1.214em; color:#333;}
.salaryCalc .lyWrap .layerPop .pop2 > .writeLetter{font-size:1.071em;color:#002aff; font-weight:bold; text-align:center; height:50px; line-height:50px; width:100%;}
.salaryCalc .lyWrap .layerPop .pop2 > .writeLetter > .icn{width:18px; height:16px; display:inline-block; background-image:url("/images/jk-mobile/ver_1/goodjob/text_count/img_text_count.png"); background-repeat:no-repeat; background-position:-75px -2px; background-size:96px 74px; margin-right:6px;}