/*====================================== 한가원 인적성 2차 css ======================================*/


/* ------------------------------------------------------------------ */
/* ------------------------------ 공통 ------------------------------ */
/* ------------------------------------------------------------------ */
/* .wrapper {width: 100%; height:100%; position:relative} */
html,body {width:100%; height:100%;}
.hidden {width:1px;height:1px;overflow:hidden;border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);display:inline-block;position:absolute;}
.loadingDim {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);z-index: 999;}
.loader {border: 16px solid #f3f3f3;border-top: 16px solid #fe794d;border-radius: 50%;width: 120px;height: 120px;animation: spin 2s linear infinite;position: fixed;top: 50%;left: 50%;}
@keyframes spin { 0% { transform: translate(-50%,-50%) rotate(0deg);} 100% { transform: translate(-50%,-50%) rotate(360deg);} }



.popupBox {position:absolute; top:0; left:0; width:100%; height:100%;}
.layerDim {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:998;}
.loginPg {
    border-radius: 20px; padding: 30px;
}
.loginPg .logTit {width:100%; font-size:58px; color:#000; font-weight:400; line-height:normal; letter-spacing:-1.5px; margin-bottom:20px; text-align:center;}
.loginPg .logTit span {font-weight:bold; color:#fe794d;}

.loginPg .logSub {width:100%; background:#fff6f4; position:relative; text-align: center; margin-bottom:30px; padding:10px 0;}
.loginPg .logSub span { padding-left:28px; font-size:20px; color:#000; font-weight:bold; letter-spacing:-0.6px; text-align:center; display:inline-block; width:max-content; position:relative;}
.loginPg .logSub span::before {content: ''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:23px; height:24px; background:url("../../images/ico_warn.png")50% 50% no-repeat; }

.iptArea {width:100%; position:relative; margin-bottom:40px;}
.iptArea .id {width:100%; margin-bottom:10px; position:relative;}
.iptArea label {display:block; font-size:18px; color:#000; font-weight:bold; line-height:normal; letter-spacing: -0.54px; margin-bottom:15px; }
.iptArea input {width:100%; border:1px solid #ccc; border-radius:10px; background:#fff; line-height:64px; height:80px; padding:0 20px; font-size:22px; color:#000; font-weight:500; letter-spacing:-0.66px; text-align:left;}
.iptArea input::-webkit-input-placeholder { opacity: 0.2;}
.iptArea input:focus {outline:0; border:1px solid #fe794d;}
.iptArea .pw {width:100%; position:relative; margin-top:30px;}

.loginPg .iptArea {width:100%; position:relative; margin-bottom:40px;}
.loginPg .iptArea .id {width:100%; margin-bottom:10px; position:relative;}
.loginPg .iptArea label {display:block; font-size:18px; color:#000; font-weight:bold; line-height:normal; letter-spacing: -0.54px; margin-bottom:15px; }
.loginPg .iptArea input {width:100%; border:1px solid #ccc; border-radius:10px; background:#fff; line-height:64px; height:80px; padding:0 20px; font-size:22px; color:#000; font-weight:500; letter-spacing:-0.66px; text-align:left;}
.loginPg .iptArea input::-webkit-input-placeholder { opacity: 0.2;}
.loginPg .iptArea input:focus {outline:0; border:1px solid #fe794d;}
.loginPg .iptArea .pw {width:100%; position:relative; margin-top:30px;}

.loginPg .iptArea input + button {display:none; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:30px; height:30px; margin-top:18px;}
.loginPg .iptArea .id input + button {background:url("../../images/btn_reset.png")50% 50% no-repeat;}
.loginPg .iptArea .pw input + button.see {background:url("../../images/btn_see.png")50% 50% no-repeat;}
.loginPg .iptArea .pw input + button.masking {background:url("../../images/btn_hide.png")50% 50% no-repeat;}

.loginPg > button {width:100%;  line-height:80px; color:#fff; background:#fe794d; border:1px solid #fe794d; border-radius:100px; text-align:center; font-size:30px; font-weight:bold; letter-spacing:-0.9px;}

.loginPg .logTime {color: #fe794d; text-align: right; font-size: 16px;}

.iptArea2 {margin-bottom: 20px;}
.iptArea2 input {height: 50px; line-height: 50px; font-size: 16px; border-radius: 30px;}
.iptArea2 .pw {margin-top: 15px;}
.iptArea3 {margin-top: 30px; display: none;}
.iptDate input {background: #fff url(../../images/ic_textfield_calendar.svg) right 20px center no-repeat;}


.loginPg .iptArea2 {margin-bottom: 20px;}
.loginPg .iptArea2 input {height: 50px; line-height: 50px; font-size: 16px; border-radius: 30px;} 
.loginPg .iptArea2 .pw {margin-top: 15px;}

.frmGroup {display: flex;}
.frmGroup .deco {height: 50px; line-height: 50px; width: 15px; min-width: 15px; margin-left: 10px;}
.frmGroup select {width: 100%; padding-left: 12px; font-size: 14px; border: 1px solid #ccc; border-radius: 30px;background: #fff url(../../images/icon_slt.svg) calc(100% - 10px) center no-repeat; cursor: pointer;}
.frmGroup input {height: 50px; padding-left: 12px; font-size: 14px; border: 1px solid #ccc;background: #fff; }


@media all and (max-width:640px){
    .loginPg {width: 100%; padding:0px;}
    .loginPg .logTit {font-size:33px;}
    .loginPg .logSub {font-size:22px; word-break:break-all;}
    .loginPg .logSub::before {top:16px;}
    .loginPg .iptArea input {height:64px;}
    .loginPg > button {line-height: 30px; padding: 15px 30px 15px;font-size:24px;}

    .iptArea2 input {height: 40px;}
    .loginPg .iptArea2 input {height: 40px;}
    .frmGroup .deco {height: 40px; line-height: 40px;}
    .frmGroup select {font-size: 12px;}
    .frmGroup input {height: 40px; font-size: 13px;}

}
@media all and (max-width:360px){
    .loginPg .logTit span {display:block;}

}

.bgArea {position:relative; width:100%; max-width:1200px; margin:0 auto; background: url("../../images/personal_bg.png")100% 100% no-repeat; background-size:100% 100%; padding:50px 40px 80px 40px;}

.bgArea .title_img {position:relative;}
.bgArea .title_img > div {margin-bottom:20px;}
.bgArea .bgObj {position:absolute; top:46px; right:70px;}

.bgArea .readme {background:#fff; padding:40px 40px 70px 40px; border-radius:20px; margin-bottom:20px;}
.bgArea .readme p.title {font-size:24px; color:#000; font-weight:bold; line-height:normal; letter-spacing:-0.72px; margin-bottom:30px;}
.bgArea .readme ul li {padding-left:16px; font-size:22px; color:#555; font-weight:400; line-height:1.64; letter-spacing:-0.66px; position:relative; margin-bottom:30px; word-break:keep-all;}
.bgArea .readme ul li span {font-weight:500; color:#000;}
.bgArea .readme ul li::before {content:''; position:absolute; top:13px; left:0; width:8px; height:8px; background:#fe794d; border-radius:50%;}
.bgArea .readme ul li:last-of-type {margin-bottom:0;}

.bgArea .infoIpt {background:#fff; padding:40px 40px 65px 40px; border-radius:20px; margin-bottom:40px;}
.bgArea .infoIpt p.title {font-size:24px; color:#000; font-weight:bold; line-height:normal; letter-spacing:-0.72px; margin-bottom:40px;}
.bgArea .infoIpt .iptInner > div {width:100%; display:flex; flex-flow:row nowrap; align-items:center; justify-content: flex-start; gap:40px; margin-bottom:40px;}
.bgArea .infoIpt .iptInner > div > div {width:100%;}
.bgArea .infoIpt .iptInner > div label,
.bgArea .infoIpt .iptInner > div span {display:block; font-size:18px; color:#000; font-weight:bold; line-height:normal; letter-spacing:-0.54px; margin-bottom:10px;}
.bgArea .infoIpt .iptInner > div input  {width:100%; height:80px; line-height:80px; font-size:28px; color:#000; font-weight:400; line-height:normal; letter-spacing:-0.84px; padding-left:20px; border-radius:10px; border: 1px solid #ccc; background:#fff;}
/*20240429 case 추가*/
.bgArea .infoIpt .iptInner .dropdownCase {position:relative;}
.bgArea .infoIpt .iptInner .dropdownCase button {width:100%; height:80px; line-height:80px; font-size:28px; color:#000; font-weight:400; letter-spacing:-0.84px; padding-left:20px; border-radius:10px; border: 1px solid #ccc; background:#fff; text-align:left;}
.bgArea .infoIpt .iptInner .dropdownCase button::after {content:''; width:20px; height:20px; position:absolute; top:50%; right:20px; transform:translateY(-50%); background:url(../../images/sel_arr.svg)50% 50% no-repeat;}
.bgArea .infoIpt .iptInner .dropdownCase button + div {display:none; position:absolute; top:80px; left:0; width:100%; border:1px solid #ccc; border-radius:10px; padding:0 20px 20px 20px; background:#fff; z-index:999;}
.bgArea .infoIpt .iptInner .dropdownCase button + div ul {width:100%; height:350px; overflow-y:scroll; padding-right:10px;}
.bgArea .infoIpt .iptInner .dropdownCase button + div ul::-webkit-scrollbar {width: 5px;}
.bgArea .infoIpt .iptInner .dropdownCase button + div ul::-webkit-scrollbar-thumb { background: #ccc;}
.bgArea .infoIpt .iptInner .dropdownCase button + div ul::-webkit-scrollbar-track {background: #eee;}
.bgArea .infoIpt .iptInner .dropdownCase button + div ul li {width:100%; position:relative;}
.bgArea .infoIpt .iptInner .dropdownCase button + div ul li a {display:block; width:100%; line-height:60px; border-bottom:1px solid #ccc; font-size:20px; color:#000; font-weight:400;  letter-spacing:-0.84px;}
.bgArea .infoIpt .iptInner .dropdownCase button + div ul li:last-of-type a {border-bottom:0;} 
.bgArea .infoIpt .iptInner .dropdownCase button + div ul li.active a {font-weight:bold;}
.bgArea .infoIpt .iptInner .dropdownCase button.activeSel {border-radius:10px 10px 0 0; border-bottom:0;}
.bgArea .infoIpt .iptInner .dropdownCase button.activeSel::before {width:calc(100% - 55px); height:1px; background:#ccc; position:absolute; bottom:0; left:20px; content:'';}
.bgArea .infoIpt .iptInner .dropdownCase button.activeSel::after {transform:translateY(-50%) rotate(180deg);}
.bgArea .infoIpt .iptInner .dropdownCase button.activeSel + div {border-top:0; border-radius:0 0 10px 10px;}

.chkBox {position:relative; display:flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start;}
.chkBox input {position: absolute; top: 0; left: 0; width: 80%; height: 100%; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer;}
.chkBox input + label {position: relative; padding-left: 50px; cursor: pointer;}
.chkBox input + label > span {display:inline-block; font-size:22px; color:#000; line-height:40px; font-weight:bold; letter-spacing:-0.72px;}
.chkBox input + label > span span.hglt {color:#fe794d;}
.chkBox input + label::after {content: ""; display: block; position: absolute; top: 50%; left: 0; width: 40px; height: 40px; background: url("../../images/ico_chk_off.png")center center no-repeat; background-size: 100% 100%; border: 1px solid #dcdcdc; border-radius: 50%; transform: translateY(-50%); box-sizing: border-box;}
.chkBox input:checked:not(:disabled) + label::after {background: url("../../images/ico_chk_on.png")center center no-repeat;}
.chkBox .popBtn {font-size: 16px; background: #f7f7f7; color: #757575; border: 1px solid #ccc; padding: 8px 15px; border-radius: 5px;}
.chkBox .popBtn::after {content: '>'; display: inline-block; font-size: 14px; vertical-align: middle; padding-left: 10px; transform: translateY(-1px);}

.bgArea .infoIpt .chkBoxList {display: flex; justify-content: space-between; align-items: center;}

.bgArea .ctaBtn {width:100%; text-align:center;}

.chkBox2 input + label {padding-left: 30px;}
.chkBox2 input + label > span {font-size: 16px;}
.chkBox2 input + label::after {width: 25px; height: 25px;}
.chkBox2 input:checked:not(:disabled) + label::after {width: 25px; height: 25px; background-size:  100% 100%;}



.policyBox {margin:15px 0 40px; background:#f7f7f7; padding:10px 10px 10px 30px; height:250px;}
.policyBox > .policyCont {height:230px; overflow-y:scroll; padding:20px 20px 20px 0; font-size:18px; color:#757575; font-weight:400; line-height:30px; letter-spacing:-0.54px;}
.policyBox > .policyCont::-webkit-scrollbar {width: 5px; }
.policyBox > .policyCont::-webkit-scrollbar-thumb { background: #aaa; border-radius:10px;}
.policyBox > .policyCont::-webkit-scrollbar-track {background: #fff;}
/*.policyTable {width:100%; margin-top:15px;} */
.policyTable {width:100%; margin-top:15px; margin-bottom: 40px;}
.policyTable table {width:100%; border-top:1px solid #000; border-spacing: 0; border-collapse: collapse; margin-bottom: 10px;}
.policyTable table thead tr th {background:#f7f7f7; border:1px solid #ccc; padding:15px 10px; line-height:30px; font-size:18px; letter-spacing: -0.54px; color:#000; text-align: center;}
.policyTable table thead tr th:first-of-type {border-left:0;}
.policyTable table thead tr th:last-of-type {border-right:0;} 
.policyTable table tbody tr td {background:#fff; border:1px solid #ccc; padding:15px 10px; line-height:30px; font-size:18px; letter-spacing: -0.54px; color:#757575; text-align: center; word-break:keep-all;}
.policyTable table tbody tr td:first-of-type {border-left:0;}
.policyTable table tbody tr td:last-of-type {border-right:0;} 
.policyTable .policyTxt {font-size: 16px; color: #757575;}

.policyTable2 {margin-bottom: 20px; margin-top: 5px;}
.policyTable2 table thead tr th {font-size: 16px; padding: 10px;}
.policyTable2 table tbody tr td {font-size: 15px; padding: 10px;}


@media all and (max-width:890px) {
    .bgArea .bgObj {display:none; }
}

@media all and (max-width:765px) {
    .bgArea {padding:20px 0px 0px 0px;}
    .bgArea .title_img > div > img {display:block; width:80%; margin:0 auto;}
    .bgArea .title_img > div.logo {margin-bottom:0;}
    .bgArea .title_img > div.logo > img {display:none;}
    .bgArea .readme p.title {font-size:20px; margin-bottom:20px;}
    .bgArea .readme ul li {font-size:20px; margin-bottom:20px;}
    .bgArea .ctaBtn img {display:block; width:80%; margin:0 auto;}
    .bgArea .readme {width:93.75%; padding:30px 20px 50px 20px; margin:0 auto 20px;}    
    .bgArea .infoIpt {width:93.75%; padding:30px 20px 50px 20px; margin:0 auto 20px;}
    .bgArea .infoIpt p.title {font-size:20px;}
    .bgArea .infoIpt .iptInner > div {display:block; margin-bottom:20px;}
    .bgArea .infoIpt .iptInner > div > div {margin-bottom:20px;}
    .bgArea .infoIpt .iptInner > div input {height:60px; line-height:60px; font-size:22px; padding-left:20px;}
    .bgArea .infoIpt .chkBox input + label::after {width:25px; height:25px;}
    .bgArea .infoIpt .chkBox input + label {padding-left:30px;}
    .bgArea .infoIpt .chkBox input + label span {font-size:18px; line-height:30px; letter-spacing:-1px;}
    .bgArea .infoIpt .chkBoxList {flex-direction: column; justify-content: flex-start; align-items: flex-start;}

    .chkBox .popBtn {font-size: 14px; margin-top: 10px; padding: 3px 10px;}

    .bgArea .infoIpt .iptInner .dropdownCase button {height:60px; line-height:60px; font-size:22px; padding-left:20px;}
    .bgArea .infoIpt .iptInner .dropdownCase button + div {top:60px;}
    .bgArea .infoIpt .iptInner .dropdownCase button + div ul {height:auto; max-height:300px;}
    .bgArea .infoIpt .iptInner .dropdownCase button + div ul li a {line-height:50px; font-size:18px;}

    .policyTable2 table thead tr th {line-height: 20px; font-size: 13px;}
    .policyTable2 table tbody tr td {line-height: 20px; font-size: 13px;}

    .tablePop table tbody tr td {font-size: 14px; padding: 0 10px;}
    
}

/* 25.02.28 이전 버전 */
/* .testCover {width:100%; max-width:1200px; margin:0 auto; position:relative;}
.testCover .titArea {width:100%; padding:32px 40px; box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.07); position: sticky; top: 0; background: #fff; z-index: 999;}
.testCover .titArea .txtTit img {max-width:100%;}
.testCover .titArea .txtTit img.pc {display:inline-block;}
.testCover .titArea .txtTit img.tab {display:none;}
.testCover .titArea .testInfoArea {position:absolute; width:70%; top:50%; right:40px; transform:translateY(-50%); display:flex; flex-flow:row nowrap; align-items:center; justify-content: flex-start; gap:30px;}
.testCover .titArea .testInfoArea .progArea {position:relative; width:calc(100% - 210px);}
.testCover .titArea .testInfoArea .progArea .progBg {display:inline-block; vertical-align: middle; width:calc(100% - 70px); background:#f7f7f7;position:relative; border-radius:10px; height:10px;}
.testCover .titArea .testInfoArea .progArea .progBg .progBar {position:absolute; top:0; left:0; width:60%; height:10px; background:#fe794d; border-radius:10px;}
.testCover .titArea .testInfoArea .progArea .progPrct {display:inline-block; vertical-align: middle; font-size:20px; color:#fe794d; font-weight:bold; margin-left:10px; font-family: "Montserrat";}
.testCover .titArea .testInfoArea .remainTime span {display:inline-block; vertical-align: middle; position:relative; height:40px;}
.testCover .titArea .testInfoArea .remainTime span.timeIcon {padding-left:25px;}
.testCover .titArea .testInfoArea .remainTime span.timeIcon::before {content: ''; position:absolute; top:50%; left:0; width:2px; height:24px; background:rgba(0,0,0,0.1); transform:translateY(-50%);}
.testCover .titArea .testInfoArea .remainTime span.time {font-family: "Montserrat"; font-size:30px; color:#000; font-weight:bold; line-height:40px; letter-spacing:1.5px; margin-left:12px;} */

.testCover {width:100%; max-width:1200px; margin:0 auto; position:relative;}
.testCover .titArea {width:100%; padding:32px 40px; box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.07); position: sticky; top: 0; background: #fff; z-index: 999;}
.testCover .txtArea { display: flex; }
.testCover .testArea {padding: 0 0 0 0;}
.testCover .txtArea .txt {display: flex; width: 220px; height: 100px; padding: 32px 59px; justify-content: center; align-items: center; background: #3F2B70; color: #D8FF28; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: -0.9px;}
.testCover .titArea .txtTit {display: flex; justify-content: center; align-items: center; margin: 0 30px 0 40px;}
.testCover .titArea .txtTit img {max-width:100%;}
.testCover .titArea .txtTit img.pc {display:inline-block;}
.testCover .titArea .txtTit img.tab {display:none;}
.testCover .titArea .testInfoArea {position:absolute; width:50%; top: 30%; right:40px;
    display:flex; flex-flow:row nowrap; align-items:center; justify-content: flex-start; gap:30px;}
.testCover .titArea .testInfoArea .progArea {position:relative; width:calc(100% - 210px); display: flex; justify-content: flex-end; align-items: center;}
.testCover .titArea .testInfoArea .progArea .progBg {display:inline-block; vertical-align: middle; width:calc(100% - 100px); background:#f7f7f7;position:relative; border-radius:10px; height:10px;}
.testCover .titArea .testInfoArea .progArea .progBg .progBar {position:absolute; top:0; left:0; width:0%; height:10px; background:#fe794d; border-radius:10px;}
.testCover .titArea .testInfoArea .progArea .progPrct {display:inline-block; vertical-align: middle; font-size:20px; color:#fe794d; font-weight:bold; margin-left:10px; font-family: "Montserrat";}
.testCover .titArea .testInfoArea .remainTime span {display:inline-block; vertical-align: middle; position:relative; height:40px;}
.testCover .titArea .testInfoArea .remainTime span.timeIcon {padding-left:25px;}
.testCover .titArea .testInfoArea .remainTime span.timeIcon::before {content: ''; position:absolute; top:50%; left:0; width:2px; height:24px; background:rgba(0,0,0,0.1); transform:translateY(-50%);}
.testCover .titArea .testInfoArea .remainTime span.time {font-family: "Montserrat"; font-size:30px; color:#000; font-weight:bold; line-height:40px; letter-spacing:1.5px; margin-left:12px;}


@media all and (max-width:1165px){
    .testCover .titArea .txtTit img.tab {display:inline-block;}
    .testCover .titArea .txtTit img.pc {display:none;}
}

@media all and (max-width:1000px){
    .testCover .titArea {padding:15px 40px;}
    .testCover .titArea .testInfoArea {width: 70%;}
    .testCover .txtArea .txt {display: none;}
}

@media all and (max-width:640px) {
    .testCover .titArea {padding:0;}
    .testCover .titArea .txtTit {display:none;}
    .testCover .titArea .txtSubTit {font-size: 14px; padding-left: 30px;}
    .testCover .titArea .testInfoArea {position:relative; width:100%; top:0; right:auto; transform:none; border-bottom:3px solid #fcede3; padding:10px 20px; justify-content: space-between;}
    .testCover .titArea .testInfoArea .progArea {position:static; width:50%; justify-content: center;}
    .testCover .titArea .testInfoArea .progArea .progBg {position:absolute; bottom:-3px; left:0; width:100%; border-radius:0px;  height:3px; background:transparent; z-index:9;}
    .testCover .titArea .testInfoArea .progArea .progBg .progBar {position:static; display:block; height:3px;  border-radius:0;}
    .testCover .titArea .testInfoArea .progArea .progPrct {padding-left:52px; position:relative;}
    .testCover .titArea .testInfoArea .progArea .progPrct::before {content:''; width:40px; height:40px; position:absolute; top:50%; left:0; background:url(../../images/ico_prcnt.svg)50% 50% no-repeat; transform:translateY(-50%)}
    .testCover .titArea .testInfoArea .remainTime {width:50%; text-align: center;}
    .testCover .titArea .testInfoArea .remainTime span.timeIcon {padding-left:52px;}
    .testCover .titArea .testInfoArea .remainTime span.timeIcon::before {content: ''; position:absolute; top:50%; left:0; width:40px; height:40px; background:url(../../images/ico_time.png)50% 50% no-repeat; transform:translateY(-50%);}
    .testCover .titArea .testInfoArea .remainTime span.timeIcon img {display:none;}
    .testCover .titArea .testInfoArea .remainTime span.time {font-size:20px; margin-left:0;}
}

.testCover .stepArea {width:100%; position:relative; padding:40px 0; background:#f0f1f4;}
.testCover .stepArea ul {display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:15px;}
.testCover .stepArea ul li {position:relative; padding-left:50px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: flex-start; gap:15px; width:max-content;}
.testCover .stepArea ul li::before {content: ''; position:absolute; top:50%; left:0; width:40px; height:40px; background:#fff; border-radius:50%; position:absolute; transform: translateY(-50%); background:url("../../images/ico_step_default.png")}
.testCover .stepArea ul li.ing::before {background:url("../../images/ico_step_ing.png");}
.testCover .stepArea ul li.done::before {background:url("../../images/ico_step_done.png");}
.testCover .stepArea ul li:last-child {width:max-content;}
.testCover .stepArea ul li button {font-size:20px; color:#000; letter-spacing:-0.6px; font-family: "Montserrat"; line-height:40px; font-weight:500;}
.testCover .stepArea ul li span.dotGrp {display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:10px; width:max-content; }
.testCover .stepArea ul li span.dotGrp span {width:5px; height:5px; background:#d9d9d9; border-radius:50%;}
.testCover .stepArea ul li.done span.dotGrp span {background:#ffd66d;}

@media all and (max-width:1200px) {
    .testCover .stepArea ul {gap:15px; justify-content: center;}
    .testCover .stepArea ul li span.dotGrp {justify-content: space-around;}
    .testCover .stepArea ul li span.dotGrp span:nth-of-type(2),
    .testCover .stepArea ul li span.dotGrp span:nth-of-type(3),
    .testCover .stepArea ul li span.dotGrp span:nth-of-type(4) {display:none;}
    .testCover .stepArea ul li button {line-height:30px;}
}

@media all and (max-width:850px) {
    .stepTxt {display:none;}
}

@media all and (max-width:640px) {
    .testCover .stepArea {padding:15px 0;}    
    .testCover .stepArea ul {display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:6px;}
    .testCover .stepArea ul li {position:relative; padding-left:0px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: space-evenly; gap:6px; }
    .testCover .stepArea ul li::before {display:none;}
    .testCover .stepArea ul li button {width:40px; height:40px; border-radius:50%; background:#c4cacc; color:#fff; font-weight:bold;}
    .testCover .stepArea ul li.ing button {background:#fff; color:#000; border:3px solid #ffd66d;}
    .testCover .stepArea ul li.done button {background:#ffd66d; color:#000;}
    .testCover .stepArea ul li span.dotGrp {justify-content: center;}
}

@media all and (max-width:340px) {
    .testCover .stepArea ul {gap:15px;}
    .testCover .stepArea ul li span.dotGrp {display:none;}
}

.testCover .questArea {width:100%; padding: 0 40px;}
.testCover .questArea ul {width:100%; position:relative;}
.testCover .questArea ul li {padding:50px 0; border-bottom:10px solid #f9f9f9;}
.testCover .questArea ul li p.qTense {font-size:28px; color:#000; font-weight:400; line-height:1; letter-spacing:-0.84px; margin-bottom:20px; display:flex; flex-flow:row nowrap; align-items: flex-start; justify-content: flex-start;}
.testCover .questArea ul li p.qTense span:first-of-type {display:inline-block; vertical-align: middle; margin-right:10px; font-size:28px; color:#000; font-weight:bold; letter-spacing:-0.84px; font-family:"Montserrat";}
.testCover .questArea ul li p.qTense span:last-of-type {display:inline-block; vertical-align: middle; margin-right:0px; font-size:28px; color:#000; font-weight:500; letter-spacing:-0.84px; font-family:"Montserrat";}
.testCover .questArea ul li .ansBtnList {display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:10px;}
.testCover .questArea ul li .ansBtnList button {width:216px; border:1px solid #aaa; border-radius:10px; background:#fff; height:64px; line-height:64px; font-size:22px; color:#000; letter-spacing:-0.66px; text-align:left; padding-left:20px; background:url("../../images/ico_ans_chk.png")center right 20px no-repeat;}
.testCover .questArea ul li .ansBtnList button.on {border:1px solid #fe794d; color:#fe794d; background:#fbf3f1 url("../../images/ico_ans_chk_on.png")center right 20px no-repeat; font-weight:500;}
.testCover .questArea ul li .ansBtnList button:disabled {border:1px solid #ccc; background:#fff; color:#ccc;}
@media all and (max-width:1165px) {
    .testCover .questArea {height:calc(100dvh - 234px);}
}

@media all and (max-width:1000px) {
    .testCover .questArea {height:calc(100dvh - 200px);}
    .testCover .questArea ul li .ansBtnList button {background:#fff; font-size:18px; text-align:center; padding:0;}
    .testCover .questArea ul li .ansBtnList button.on {background:#fbf3f1;}
}
@media all and (max-width:640px) {
    .testCover .questArea {height:calc(100dvh - 133px);}
    .testCover .questArea {padding: 0;
    }
}

@media all and (max-width:550px) {
    .testCover .questArea ul li {padding:30px 10px;}
    .testCover .questArea ul li p.qTense {font-size:22px; margin-bottom:20px; display:block;}
    .testCover .questArea ul li p.qTense span:first-of-type {display:block; margin-right:0px; font-size:22px;}
    .testCover .questArea ul li p.qTense span:last-of-type {display:block; margin-right:0px; font-size:22px; margin-top:5px; line-height:32px;}
    .testCover .questArea ul li .ansBtnList {display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:4px;}
    .testCover .questArea ul li .ansBtnList button {width: calc(100% / 5); background:#fff; font-size:18px; text-align:center; padding:0;}
    .testCover .questArea ul li .ansBtnList button.on {background:#fbf3f1;}
}

@media all and (max-width:490px) {
    .testCover .questArea ul li .ansBtnList button {word-break:keep-all; height:102px; line-height:26px;}
}

@media all and (max-width:375px) {
    .testCover .questArea ul li .ansBtnList button {font-size:17px;}
}

.testCover .questArea .warnTxt {width:100%; position:relative;}
.testCover .questArea .warnTxt .tooltip {font-size:20px; color:#000; font-weight: 300; background:#fff6f4; height:50px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:5px;}
.testCover .questArea .warnTxt .tooltip > span {font-weight:bold;}

@media all and (max-width:375px) {
    .testCover .questArea .warnTxt .tooltip {font-size:18px;}
}

.testCover .questArea .proceedArea {width:100%; margin-top:40px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:20px; margin-bottom:55px;}
.testCover .questArea .proceedArea button {width:260px; height:80px; line-height:80px; color:#fff; font-size:30px; color:#fff; letter-spacing:-0.9px; font-weight:500; border-radius:100px;}
.testCover .questArea .proceedArea button.prevBtn {padding:0 50px 0 30px; text-align:right; background:#fe794d url("../../images/ico_prev.png")center left 30px no-repeat;}
.testCover .questArea .proceedArea button.nextBtn {padding: 0 30px 0 50px; text-align:left; background:#fe794d url("../../images/ico_nxt.png")center right 30px no-repeat;}
.testCover .questArea .proceedArea button.doneBtn {background:#333 url("../../images/ico_nxt.png")center right 30px no-repeat;}
.testCover .questArea .proceedArea button.prevBtn:disabled {background:#d9d9d9 url("../../images/ico_prev.png")center left 30px no-repeat; color:#f7f7f7; }
.testCover .questArea .proceedArea button.nextBtn:disabled {background:#d9d9d9 url("../../images/ico_nxt.png")center right 30px no-repeat; color:#f7f7f7; }
.testCover .questArea .proceedArea button.doneBtn:disabled {background:#d9d9d9 url("../../images/ico_nxt.png")center right 30px no-repeat; color:#f7f7f7;}

@media all and (max-width:545px) {
    .testCover .questArea .proceedArea {width:100%; margin-top:40px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:0px; margin-bottom:0px;}
    .testCover .questArea .proceedArea > div {width:50%; display: flex; flex-direction: column;}
    .testCover .questArea .proceedArea button {width:100%; height:80px; line-height:80px; font-size:30px; border-radius:0;}
    .testCover .questArea .proceedArea button.prevBtn {padding:0 50px 0 30px; text-align:right; background:#fe794d url("../../images/ico_prev.png")center left 30px no-repeat;}
    .testCover .questArea .proceedArea button.nextBtn {padding: 0 30px 0 50px; text-align:left; background:#fe794d url("../../images/ico_nxt.png")center right 30px no-repeat;}
    .testCover .questArea .proceedArea button.doneBtn {padding: 0 30px 0 50px; text-align:left; background:#333 url("../../images/ico_nxt.png")center right 30px no-repeat;}
    .testCover .questArea .proceedArea button.prevBtn:disabled {background:#d9d9d9 url("../../images/ico_prev.png")center left 30px no-repeat; color:#f7f7f7; }
    .testCover .questArea .proceedArea button.nextBtn:disabled {background:#d9d9d9 url("../../images/ico_nxt.png")center right 30px no-repeat; color:#f7f7f7; }
    .testCover .questArea .proceedArea button.doneBtn:disabled {background:#d9d9d9 url("../../images/ico_nxt.png")center right 30px no-repeat; color:#f7f7f7; }
}


.alertPop {display:none;}
.dim {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8)}
.alertCov {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:400px; padding:30px; box-sizing:border-box; border-radius:15px; background:#fff; border:1px solid #dcdcdc; z-index:9999;}
.alertCov .inner {position:relative;}
.alertCov .inner p.alertTxt {font-size:20px; font-weight:500; line-height:22px; color:#000; text-align:center; margin-bottom:30px;}
.alertCov .inner .buttonArea {display:flex; flex-flow:row nowrap; align-items: center; justify-content: center;}
.alertCov .inner .buttonArea button {min-width:100px; padding: 10px 20px; font-size: 16px; font-weight: 500; border-radius: 4px; background:#fe794d; color:#fff; }


.finCov {width:100%; height:100%; margin:0 auto; position:relative;}
.finCov .finCont {width:100%; text-align:center;padding: 70px 0 70px 0;}
.finCov .finCont .completeImg{width: 180px;}
.finCov .finCont p.txt {font-size:24px; color:#757575; font-weight:300; letter-spacing:-1.5px; margin-top: 30px; line-height: 60px; word-break: keep-all; flex-direction: column;}
.finCov .finCont p.txt span {font-weight:500; color:#000; display: block; word-break: break-all; line-height: 1.5;}
.finCov .finCont button.compBtn {padding:22px 56px 23px; background:#fe794d; border-radius:100px; font-size:30px; line-height:35px; letter-spacing:-0.9px; color:#fff; margin-top: 60px;}
.finTitle{font-size: 40px; font-weight: bold; display: block;}

@media all and (max-width:750px){
    .finCov{padding: 0;}
    .finCov .finCont p.txt {font-size:30px; line-height:40px;}
    .finCov .finCont p.txt span {margin-top: 20px;}
    .finCov .finCont .completeImg{width: 120px;}
}

@media all and (max-width:460px){
    .finCov .finCont img {width:100px;}
    .finCov .finCont p.txt {font-size:22px; margin:30px 0;}
    .finCov .finCont button.compBtn {padding:15px 30px 15px; font-size:24px; line-height:30px;}
}



/* ------------------------------ 헤더 ------------------------------ */
.lyt-header {width: 100%; height: 85px; margin-bottom: -4px; border-bottom: 1px solid #ddd; background: #fff; overflow: hidden;  position: fixed; top: 0; left: 0; z-index: 900;  transition: width 0.2s;}
.lyt-header .head-area {width: 100%; max-width:1200px; height: 85px; padding-left:350px; margin:0 auto;}
.lyt-header .head-area::after {display: block; content: ""; clear: both;}
.lyt-header .mob-dim {display: none;}
.lyt-header .nav-area {float: left; position: relative;}
.lyt-header .nav-area .logo {position: absolute; top: 0; left: -350px; height: 85px; display: flex; justify-content: center; align-items: center;}
.lyt-header .nav-area .logo img {width: 100%; vertical-align: middle;}
.lyt-header .nav-area .main-nav {height: 120px; display: none;}
.lyt-header .nav-area .main-nav::after {display: block; content: "";clear: both;}
.lyt-header .nav-area .main-nav .depth1 {padding: 45px 0; margin-right: 32px; float: left;}
.lyt-header .nav-area .main-nav .depth1 a {font-size: 20px; font-weight: 500;}
.lyt-header .nav-area .m-family {display: none;}
.lyt-header .button-area { float: right;overflow: hidden; transition: width 0.2s; line-height: 85px; height: 85px;}
.lyt-header .button-area .go-login {width: 100px; height: 56px; margin-right: 10px; line-height: 56px; border-radius: 28px; text-align: center; font-weight: 500; font-size: 17px; color: #fff; display: inline-block; background: #fe794d;}
.lyt-header .button-area .go-logout {width: 100px; height: 56px; margin-right: 10px; line-height: 56px; border-radius: 28px; text-align: center; font-weight: 500; font-size: 17px; color: #fff; display: inline-block; background: #bbb; display: none;}
.lyt-header .button-area .apply-contest {width: 180px; height: 56px; padding-left: 30px; line-height: 56px; border-radius: 28px; text-align: center; font-weight: 500; font-size: 17px; display: inline-block; background: #fece00 url(../../images/icon_smile.png) 24px center no-repeat;}
.lyt-header .button-area .hambuger {font-size: 0;}

.lyt-header .button-area.member .go-login {display: none;}
.lyt-header .button-area.member .go-logout {display: inline-block;}

@media screen and (min-width: 100px) and (max-width: 1279px) {
    .lyt-header {width: 100%; padding-left: 0; margin-bottom: 0; display: block; overflow:visible; transition: none;}
    .lyt-header .head-area {width: 100%; height: 85px; max-width: none; padding: 0 20px; position: relative;}
    .lyt-header .mob-dim {width: 100%; height: 100vh; background: rgba(0,0,0,0.3); font-size: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; opacity: 0; transition: all 0.5s;visibility: hidden;}
    .lyt-header .nav-area {position: static;}
    .lyt-header .nav-area .logo {width: 155px; position: static; left: 0; line-height: 4.3;}
    .lyt-header .nav-area .main-nav {display: block; width: 100%; max-width: 360px; height: 100vh; background: #fff; display: inline-block; position: fixed; top: 0; right: -360px; transition: all 0.5s; -webkit-overflow-scrolling: touch; visibility: hidden;}
    .lyt-header .nav-area .main-nav .mob-tit {width: 100%; height: 73.3px; padding: 0 20px; background: #fe794d;}
    .lyt-header .nav-area .main-nav .mob-tit::after {display: block; content: ""; clear: both;}
    .lyt-header .nav-area .main-nav .mob-tit .m-logo {width: 120px; height: 73.3px; padding:17px 0 13px; display: block; float: left;}
    .lyt-header .nav-area .main-nav .mob-tit .m-logo img {width: 100%;}
    .lyt-header .nav-area .main-nav .mob-tit .btn-close {width: 19px; height: 73px; background: url(../../images/icon_close.png) center / 19px no-repeat; font-size: 0; float: right;}
    .lyt-header .nav-area .main-nav .mob-navwrap {height: calc(100vh - 73.3px); min-height: 580px; overflow-y: auto; /*position: relative;*/} /* 20220617 수정 */
    .lyt-header .nav-area .main-nav .nav {width: 100%; padding: 90px 20px 190px 20px;}
    .lyt-header .nav-area .main-nav .depth1 {width: 100%; padding: 0; margin-right: 0; border-bottom: 1px solid #ddd; float: none;}
    .lyt-header .nav-area .main-nav .depth1:first-child {border-top: 1px solid #ddd;}
    .lyt-header .nav-area .main-nav .depth1 a {width: 100%; padding: 20px 0; font-weight: 400;display: block;}
    .lyt-header .nav-area .m-family {display: block; padding: 20px; background: #fff; position: absolute; bottom: 0; right: 0;}
    .lyt-header .nav-area .m-family .with {width: 100%; padding: 28px 18px 25px 18px; background: #f4f4f4;}
    .lyt-header .nav-area .m-family .with::after {display: block; content: ""; clear: both;}
    .lyt-header .nav-area .m-family .with .f-logo {width: calc(50% - 10.5px); margin-right: 21px; float: left;}
    .lyt-header .nav-area .m-family .with .f-logo:last-child {margin-right: 0;}
    .lyt-header .nav-area .m-family .with .f-logo img {width: 100%;}
    .lyt-header .button-area .go-user{font-size: 15px; margin-right: 15px;}
    .lyt-header .button-area .go-logout {
        height: 45px; line-height: 45px; font-size: 15px; width: 80px; margin-right: 0;
    }
    .lyt-header .button-area .apply-contest {display: none;}
    .lyt-header .button-area .hambuger {width: 25px; height: 25px; background: url(../../images/icon_hambuger.png) center / 25px no-repeat; font-size: 0;}

    .lyt-header.nav-view .mob-dim {opacity: 1;transition: all 0.5s; visibility: visible;}
    .lyt-header.nav-view .main-nav {right: 0;transition: all 0.5s; visibility: visible;}
    .lyt-header.nav-view .button-area .go-login {right: 100px;}
    .lyt-header.nav-view .button-area .go-logout {right: 100px;}  

}


/* 2024.11.25 kb 인적성 2차 css 수정 */
.testBtn{
    width: 350px; height:80px; line-height:80px; color:#fff; background:#fe794d; border:1px solid #fe794d; border-radius:100px; text-align:center; font-size:30px; font-weight:bold; letter-spacing:-0.9px; box-shadow: inset -10px -10px 5px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; margin: 0 auto;
}
.go-user{
    margin-right: 20px; font-size: 17px;
}
.go-user .userImg{
    width: 15px; margin-right: 7px;
}
.go-user .userName{
    font-weight: bold;
}

.modPopup.type02 .popupBox{
    height: auto !important;
}
.popTest .popContArea{
    overflow-x: inherit !important; overflow-y: inherit !important;
}
.popFin .popContArea{
    overflow-x: inherit !important; overflow-y: inherit !important;
}

/* intro.html */
body,html{
    width: 100%; height: 110%;
}
.wrap{
    background: url(../../images/mainBg.png) no-repeat; width: 100%; height: 100%; background-size: cover;
}
.mainArea{
    max-width: 1200px; margin: 0 auto; padding: 0 150px; padding-top: 200px; position: relative;
}
.txt{
    display: flex; justify-content: space-between;
}
.txtLeft{
    color: #fff;
}
.txtLeft .top{
    font-size: 76px; font-weight: 100; line-height: 1.1; letter-spacing: 3px;
}
.txtLeft .top span{
    font-weight: 700; display: block; letter-spacing: -1px; text-shadow: 0px 0px 10px rgba(0,0,0,0.05);
}
.txtLeft .mid{
    font-size: 24px; margin: 40px 0 30px 0; letter-spacing: 0.2px; word-break: keep-all;
}
.txtLeft .bot{
    font-size: 17px; letter-spacing: 0.5px; word-break: keep-all;
}
.orderList{
    display: flex; justify-content: space-between; align-items: center; padding: 0 30px; margin: 50px 0;
}
.orderList > li.list01 > ul{
    background: #fff; width: 210px; height: 210px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column;    position: relative;
}
.orderList > li.list01 > ul:nth-child(1)::after{
    content: ''; display: block; background: url(../../images/ico_arr_r.png) no-repeat; width: 24px; height: 36px; position: absolute; right: -32%; top: 50%; transform: translateY(-50%);
}
.orderList > li:nth-child(3) > ul:nth-child(1)::after{
    display: none;
}
.orderList > li.list01 > ul > li:nth-child(1){
    font-size: 16px; font-weight: 700;
}

.orderList > li.list01 > ul > li:nth-child(2){
    font-size: 24px; font-weight: 700; 
}
.orderList > li.list01 > ul > li:nth-child(3){
    margin-top: 25px;
}
.qrCode{
    position: absolute; right: 0; bottom: 40px; cursor: pointer;
}
.qrCode .qrTxt{
    font-weight: 700; font-size: 16px; text-align: center; transform: translate3d(-6px,-25px,0); display: flex; justify-content: center;
}

.qrPopup{
    position: relative;
}
.modPopup.qrPopup .popupBox{
    padding: 30px 50px; max-height: 750px  !important; height: 750px !important; padding-bottom: 0;
}
.qrPopup .popupBox .popContArea{
    overflow-x: unset; overflow-y: unset;
}
.qrPopup .popupBox .popTitArea .closeBtn{
    background: url(../../images/ico_close.png) no-repeat 0 0 !important; width: 40px !important; height: 40px !important; margin-left: auto; font-size: 0;
}
.qrPopup .qrCom{
    display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;
}
.qrPopup .qrCom .topTxt{
    font-size: 22px; color: #222; font-weight: 500;
}
.qrPopup .qrCom .topTxt span{
    font-weight: 700;
}
.qrPopup .qrCom .midImg{
    padding: 30px 0 40px 0;
}
.qrPopup .qrCom .botTxt{
    background: #fef1e8; font-size: 32px; border-radius: 30px; padding: 40px 70px; text-align: center; width: 100%;  font-weight: 500;
}
.qrPopup .qrCom .botTxt span{
    font-weight: 700;
}


@media screen and (min-width: 100px) and (max-width: 1279px) {

    /* _com.scss */
    .modPopup.type01 .popupBox{
        padding: 24px 0px 30px 0px !important;
    }
    .modPopup.type02 .popupBox{
        height: auto !important; padding-bottom: 80px !important;
    }
    .modPopup.popPersonal .popupBox{
        padding: 24px 0px 0px 0px !important;
    }
    .modPopup.popPersonal .popupBox .popContArea{
        border-radius: 0 0 24px 24px !important;
    }
    .modPopup.popPersonal .popupBox .popContArea .bgArea{
        padding: 20px 0px 40px 0px;
    }
    .popCerti .finCov .finCont{
        padding: 40px 0 0 0 !important;
    }

    /* intro.html */
    body,html{
        height: 155%;
    }
    .wrap{
        height: 100%;
    }
    .mainArea{
        width: 100%; padding: 0; max-width: 100%; padding: 120px 20px 40px 20px;
    }
    .mainArea .txt{
        flex-direction: column; text-align: left;
    }
    .mainArea .txtLeft .top{
        font-size: 60px;
    }
    .mainArea .txtLeft .mid{
        font-size: 24px; margin: 35px 0 25px 0; letter-spacing: 0;
    }
    .mainArea .txtLeft .bot{
        font-size: 18px;
    }
    .mainArea .txtRight{
        display: none;
    }
    .orderList{
        margin-top: 60px; flex-direction: column;
    }
    .orderList > li{
        margin-bottom: 100px;
    }
    .orderList > li:last-child{
        margin-bottom: 0;
    }
    .orderList > li.list01 > ul:nth-child(1)::after{
        right: 45%; top: unset; bottom: -32%; transform: rotate(90deg);
    }
    .qrCode{
        position: fixed; right: 0px; bottom: 100px;
    }
    .qrCode img{
        width: 120px;
    }

    .modPopup.qrPopup .popupBox{
        padding-bottom: 30px !important;
    }
    .qrPopup .popupBox{
        margin: 20px !important; padding: 30px 20px 30px 20px !important; 
    }
    .qrPopup .popupBox .popTitArea .closeBtn{
        position: absolute; left: 50%; top: -20px; transform: translate3d(-50%, 0, 0); z-index: 10;
    }
    .qrPopup .qrCom .topTxt{
        width: 200px; text-align: center; margin-top: 40px;
    }
    .qrPopup .qrCom .midImg{
        padding: 25px 0;
    }
    .qrPopup .qrCom .midImg img{
        width: 300px; margin: 0 auto;
    }
    .qrPopup .qrCom .botTxt{
        font-size: 24px; padding: 20px; width: 100%;
    }


}