@charset "utf-8";
@import "base.css?v20250422";
/*@import "font.css";*/
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
/*@import "common.css";  */

::-webkit-scrollbar {
    width: 7px;  
    height: 7px;
  }
  
  ::-webkit-scrollbar-button:start:decrement,
  ::-webkit-scrollbar-button:end:increment {
    display: block; /* 스크롤 버튼 표시 */
    height: 10px; /* 스크롤 버튼 높이 */
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #bbb;
    min-height: 50px; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #888;
  }
  
  /* 스크롤바 트랙 배경 */
  ::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* 트랙 배경색 */
    border-radius: 8px; /* 모서리 둥글게 */
  }
  
  ::-webkit-scrollbar-button {
    display: none !important;
  }
 

/* 기본설정 */
.text-center{text-align:center !important;}
.text-left{text-align:left !important;}
.text-right{text-align:right !important;}

.txt-point {color:#008ED6;}
.svy-text {background:#fff; height:480px; padding:20px;}
/*.svy-text pre {white-space:pre-line; font-family:NG; line-height:1.5}
.svy-text strong {display:block; margin-bottom:20px; color:#363c4e; font-size:20px; font-family:NG; text-align:center}*/

.survey-mobile .svy-text {height:auto;}
.survey-mobile .svy-text img {width:95%;}

.survey-info-txt-wrap {display:table; width:100%; margin-bottom:20px !important}
.survey-info-txt {display:table-cell; width:100%; background:#fff; font-size:16px; vertical-align:middle; text-align:center; padding: 30px 20px;}
.survey-info-txt-wrap h3 {display:block; margin-bottom:10px; color:#000000; font-size:15px; font-family:NGB; background:none; }
.survey-info-txt.auto {vertical-align:top; height:auto; padding:20px;}
.survey-info-txt.auto > * {text-align:left}

.survey-select-arr .survey-info-txt-wrap {border:1px solid #d1d1d1}

.alt-msg { color:#000; text-align:center;}
  /* 2022-07-13 오류텍스트 */
  .alt-msg.t_red_border{background: #f0f0f0; font-size: 1.1em; font-weight:700;}
  

.nps-select .radio-wrap-2 > span > label > input:checked:not(old) + span.nps { background:#000000; color:#fff; border:1px solid #000000; }
.nps-select .radio-wrap-2 > span > label:hover > input:checked:not(old) + span.nps { background:#000000; color:#fff; border:1px solid #000000; }

.survey-mobile .nps-select .radio-wrap-2 > span > label > input:checked:not(old) + span.nps { background:#000000; color:#fff; border:1px solid #000000; }
.survey-mobile .nps-select .radio-wrap-2 > span > label:hover > input:checked:not(old) + span.nps { background:#000000; color:#fff; border:1px solid #000000; }

.survey-mobile .nps-select .survey-table-wrap ._res_t_row .radio-wrap-2 > span > label > input:checked:not(old) + span.nps { background:#000000; color:#fff; border:1px solid #000000; }
.cpoint {color:#000000}

/* radio-wrap */
.radio input[type="radio"]:checked + label:before {border-color: #000; animation: ripple 0.4s linear forwards;}
.radio label:before {left: 0; top: 0;width: 22px; height: 22px; border: 2px solid #acacac;}
.radio label:after {top: 5px; left: 5px;width: 12px; height: 12px; transform: scale(0); background: #000;}

.radio2 input[type="radio"]:checked + label:before {border-color: #000; animation: ripple 0.4s linear forwards;}
.radio2 label:before {left: 50%; top: 0;width: 22px; height: 22px; border: 2px solid #acacac; margin-left:-11px;}
.radio2 label:after {top: 5px; left: 50% ;width: 12px; height: 12px; transform: scale(0); background: #000; margin-left:-6px;}

.survey-mobile .radio2 input[type="radio"]:checked + label:before {border-color: #000; animation: ripple 0.4s linear forwards;}
.survey-mobile .radio2 label:before {left: 15px; top: 0;width: 22px; height: 22px; border: 2px solid #acacac; }
.survey-mobile .radio2 label:after {top: 5px; left: 15px ;width: 12px; height: 12px; transform: scale(0); background: #000; margin-left:-6px;}

/* check-wrap */
.checkbox input[type="checkbox"]:checked + label:before {width: 22px; height: 22px; background: #000; border: none; border-color: #000; animation: ripple 0.4s linear forwards;}
.checkbox2 input[type="checkbox"]:checked + label:before {width: 22px; height: 22px; background: #000; border: none; border-color: #000; animation: ripple 0.4s linear forwards;}
.survey-mobile .checkbox2 input[type="checkbox"]:checked + label:before {width: 22px; height: 22px; background: #000; border: none; border-color: #000; animation: ripple 0.4s linear forwards;}


/* star */
.star > label {position: relative; display: inline-block; float: left; width: 66px; height: 65px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_star_0.png");  background-repeat: no-repeat; background-position: 0 -65px;}
.star > label::before {content: ''; position: absolute; display: block; height: 65px; background-image: url("/web/img/v2/bg_score_star_0.png");  background-position: 0 65px; pointer-events: none; opacity: 0;}

@media screen and (max-width: 460px) {
.star > label {position: relative; display: inline-block; float: left; width: 40px; height: 26px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_star_m0.png");  background-repeat: no-repeat; background-position: 0 -26px;}
.star > label::before {content: ''; position: absolute; display: block; height: 26px; background-image: url("/web/img/v2/bg_score_star_m0.png");  background-position: 0 26px; pointer-events: none; opacity: 0;}
}

/* heart */
.heart > label {position: relative; display: inline-block; float: left; width: 66px; height: 65px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_heart_0.png");  background-repeat: no-repeat; background-position: 0 -65px;}
.heart > label::before {content: ''; position: absolute; display: block; height: 65px; background-image: url("/web/img/v2/bg_score_heart_0.png");  background-position: 0 65px; pointer-events: none; opacity: 0;}

@media screen and (max-width: 460px) {
.heart > label {position: relative; display: inline-block; float: left; width: 40px; height: 26px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_heart_m0.png");  background-repeat: no-repeat; background-position: 0 -26px;}
.heart > label::before {content: ''; position: absolute; display: block; height: 26px; background-image: url("/web/img/v2/bg_score_heart_m0.png");  background-position: 0 26px; pointer-events: none; opacity: 0;}
}

/* like */
.like > label {position: relative; display: inline-block; float: left; width: 66px; height: 65px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_like_0.png");  background-repeat: no-repeat; background-position: 0 -65px;}
.like > label::before {content: ''; position: absolute; display: block; height: 65px; background-image: url("/web/img/v2/bg_score_like_0.png");  background-position: 0 65px; pointer-events: none; opacity: 0;}

@media screen and (max-width: 460px) {
.like > label {position: relative; display: inline-block; float: left; width: 40px; height: 26px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_like_m0.png");  background-repeat: no-repeat; background-position: 0 -26px;}
.like > label::before {content: ''; position: absolute; display: block; height: 26px; background-image: url("/web/img/v2/bg_score_like_m0.png");  background-position: 0 26px; pointer-events: none; opacity: 0;}
}

/* smile */
.smile > label {position: relative; display: inline-block; float: left; width: 66px; height: 65px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_smile_0.png");  background-repeat: no-repeat; background-position: 0 -65px;}
.smile > label::before {content: ''; position: absolute; display: block; height: 65px; background-image: url("/web/img/v2/bg_score_smile_0.png");  background-position: 0 65px; pointer-events: none; opacity: 0;}

@media screen and (max-width: 460px) {
.smile > label {position: relative; display: inline-block; float: left; width: 40px; height: 26px; font-size: 0.1em; color: transparent; cursor: pointer; background-image: url("/web/img/v2/bg_score_smile_m0.png");  background-repeat: no-repeat; background-position: 0 -26px;}
.smile > label::before {content: ''; position: absolute; display: block; height: 26px; background-image: url("/web/img/v2/bg_score_smile_m0.png");  background-position: 0 26px; pointer-events: none; opacity: 0;}
}

/** Form Elemnet Animation **/

input:not([type]):focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=dearch]:focus,
textarea:focus {border-bottom: 1px solid #000000; -webkit-box-shadow: 0 1px 0 0 #ff7e00; box-shadow: 0 1px 0 0 #000;}

.dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected {background-color: #f8f8f8; color: #000;}


/** IBT **/

/* intro */
.ibt-date-info {margin-top:30px;}
.ibt-date-info li {list-style:square;}

.ibt-id-confirm {width:100%; height:200px; margin-bottom:50px;}
.ibt-id-confirm dl {width:330px; clear:both; margin:0 auto;}
.ibt-id-confirm dl dt {width:100px; height:40px; padding-top:10px; margin-right:30px; float:left;}
.ibt-id-confirm dl dd {width:200px; height:40px; margin-bottom:10px; float:left;}


/* 정답설정 */
.correct-answer-setting {position: relative; width:100%;  border-radius: 5px; border: 1px solid #dbdbdb;}
.correct-answer-setting-wrap .correct-answer-setting {border: 0;}
.correct-answer-setting.focus{background-color: #fff !important; border: 1px solid #ff0000 !important;}
.correct-answer-setting input[type=text]{ width:150px; text-align:center; font-size:16px;font-weight:bold;}  /* 180615 팀장님추가 */
.correct-answer-setting .survey-select-arr {display:block;}

.correct-answer-setting .survey-select-arr .check-wrap .checkbox  label {width:310px; height:30px; margin-top:-3px; line-height:30px; color: #444; font-size: 15px;}  /* 180615 width값 수정 */
.correct-answer-setting .survey-select-arr .check-wrap .checkbox .setting-part-detail {display:block; margin-top: 12px; padding: 0 0 10px 30px;}
.correct-answer-setting .survey-select-arr .check-wrap .checkbox .setting-part-detail input {height:30px;}
.correct-answer-setting .survey-select-arr .check-wrap .checkbox .setting-part-detail .select-wrapper {width:150px; top:-40px; right:-313px;}   /* 180615 width값 수정, right값 수정 */
.correct-answer-setting .survey-select-arr .check-wrap .checkbox .setting-part-detail .select-wrapper input {height:40px;}

/* 동의 안내 문구 */
.agree_notice p {
    display: flex;
    gap: 20px;
}
.agree_notice span {
    display: flex;
}
.agree_notice  input[type=checkbox] {
    display: none;
} 
.agree_notice input#agree_cont {
    min-width: 200px;
    border-bottom: 1px solid #c8c8c8;
    font-size: 14px;
}
.agree_notice .btn-agree-cont {
    color: #777;
    border: 1px solid #dcdcdc;
    padding: 6px 12px;
}

.custom-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.custom-checkbox .checkbox-style {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2px solid rgba(172, 172, 172, 0.54);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s;
    margin-right: 7px;
}

/* 체크된 상태 */
.agree_notice_wrap  {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}
.custom-checkbox input[type="checkbox"]:checked + .checkbox-style {
    width: 18px;
    height: 18px;
    background: #000;
    border: none;
    border-color: #000;
    animation: ripple 0.4s linear forwards;
    -webkit-animation: ripple 0.4s linear forwards;
}

/* 체크 표시 (V 모양) */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-style::after {
    content: '';
    position: absolute;
    transform: rotate(-45deg);
    top: 5px;
    left: 3px;
    width: 11px;
    height: 5px;
    border: 2px solid #fff;
    border-top-style: none;
    border-right-style: none;
}

@media screen and (max-width: 460px) {
.correct-answer-setting .survey-select-arr .check-wrap .checkbox .setting-part-detail .select-wrapper  {position: relative; width:60%; top:0; right:0;}
}

.total-score-setting {margin-top:50px; margin-bottom:20px; text-align:right;}
.total-score-setting input,
.total-score-setting select,
.total-score-setting textarea	{margin:0; padding:0; border: 0 none; outline: 0 none;vertical-align:middle;}
.total-score-setting textarea,
.total-score-setting input[type=text] {height:35px; line-height:35px; padding: 0 5px; border-bottom:1px solid #acacac; background:transparent;}  /** 180104 수정 **/

.setting-unit-score {text-align:right; position:relative; margin-top:10px;}
.setting-unit-score input[type=text]{ width:100px; text-align:center; font-size:16px;font-weight:bold;}  /* 180615 팀장님추가 */
.setting-unit-score .answer-score {width:80px; font-size:30px; color:#ff0000;}
.setting-unit-score .select-wrapper {width:150px; position:absolute; top:-20px; right:30px;}

.answer-info {height:30px; background: url('/img/ibt/bg_answer_info.png') no-repeat; background-position:0 center; padding-left:50px; margin-bottom:10px; font-size:20px; color:#ff0000;}
.answer-info2 {height:20px; font-size:16px; color:#ff0000;}

/*.answer-ex {background-color:#f6f6f6; padding:20px; margin-bottom:10px;}*/
.answer-ex {padding:20px; margin-bottom:10px;}
.answer-ex .ex-title {font-size:15px; letter-spacing:-0.02em; font-weight:bold;}
/*.answer-ex .ex-comment input,
.answer-ex .ex-comment textarea {margin:0; padding:0; border: 0 none; outline: 0 none;vertical-align:middle;}
.answer-ex .ex-comment textarea,
.answer-ex .ex-comment input[type=text] {font-family:NG; height:35px; line-height:35px; padding: 0 5px; border-bottom:1px solid #acacac; background:transparent;} */
.answer-ex .ex-comment-add button {font-size:13px; letter-spacing:-0.07em; color:#2a7199; margin-top:20px;}



/* 응시 + 채점 */
.test-time-info {padding:50px 0;}
.test-time-info dl {width:420px; border-top:2px solid #ccc; border-bottom:2px solid #ccc; clear:both; background:#fafafa;}
.test-time-info dl dt {width:200px; float:left; height:30px; line-height:28px; border-bottom:1px solid #ddd; padding-left:20px; }
.test-time-info dl dt.last {border-bottom:0;}
.test-time-info dl dd {width:220px; float:left; height:30px; line-height:28px; border-bottom:1px solid #ddd;}
.test-time-info dl dd.last {border-bottom:0;}
.test-time-info dl dd span {font-weight:bold; color:#ff0000; font-size:16px;}
.test-time-info p {margin-top:10px; color:#ff0000;}

.test-time-info2 {padding:10px 0 50px 0;}
.test-time-info2 dl {width:420px; border-top:2px solid #ccc; border-bottom:2px solid #ccc; clear:both; background:#fafafa;}
.test-time-info2 dl dt {width:200px; float:left; height:30px; line-height:28px; border-bottom:1px solid #ddd; padding-left:20px; }
.test-time-info2 dl dt.last {border-bottom:0;}
.test-time-info2 dl dd {width:220px; float:left; height:30px; line-height:28px; border-bottom:1px solid #ddd;}
.test-time-info2 dl dd.last {border-bottom:0;}
.test-time-info2 dl dd span {font-weight:bold; color:#ff0000; font-size:16px;}
.test-time-info2 p {margin-top:10px; color:#ff0000;}

@media screen and (max-width: 460px) {
.time-reminder {text-align:left;}
.test-time-info {margin-top:100px;}
.test-time-info dl {width:100%; border-top:2px solid #ccc; border-bottom:2px solid #ccc; clear:both; background:#fafafa;}
.test-time-info dl dt {width:40%; float:left; height:30px; line-height:28px;}
.test-time-info dl dd {width:60%; float:left; height:30px; line-height:28px;}
.test-time-info dl dd span {font-weight:bold; color:#ff0000; font-size:16px;}
.test-time-info p {width:100%; margin-top:10px; color:#ff0000;}

.test-time-info2 {margin-top:0px; }
.test-time-info2 dl {width:100%; border-top:2px solid #ccc; border-bottom:2px solid #ccc; clear:both; background:#fafafa;}
.test-time-info2 dl dt {width:40%; float:left; height:30px; line-height:28px;}
.test-time-info2 dl dd {width:60%; float:left; height:30px; line-height:28px;}
.test-time-info2 dl dd span {font-weight:bold; color:#ff0000; font-size:16px;}
.test-time-info2 p {width:100%; margin-top:10px; color:#ff0000;}
}

.time-reminder {/*position:fixed; top:0; right:0; z-index:9999;*/}

.mark-correct {width:136px; height:103px; background: url('/img/ibt/bg_correct.png') no-repeat; position:absolute; left:-20px; z-index:900; padding:0;}
.mark-wrong {width:136px; height:103px; background: url('/img/ibt/bg_wrong.png') no-repeat;position:absolute; left:-20px; z-index:900;}
.mark-wrong-part {width:136px; height:103px; background: url('/img/ibt/bg_wrong_part.png') no-repeat;position:absolute; left:-20px;  z-index:900;  padding:0;}

.correct-c {padding:0; position:absolute; margin-top:-5px; margin-left:-8px; }
.correct-s {padding:0; position:absolute; margin-top:-5px; margin-left:-8px; }

/*
@media screen and (max-width: 460px) {
.mark-correct {width:136px; height:103px; background: url('/img/ibt/bg_correct.png') no-repeat; position:relative; left:-10px; z-index:900; margin-bottom:-103px; padding:0;}
.mark-wrong {width:136px; height:103px; background: url('/img/ibt/bg_wrong.png') no-repeat;position:relative; left:-10px; z-index:900; margin-bottom:-103px; padding:0;}

.correct-c {padding:0; margin-bottom:-43px; position:relative; top:-30px; margin-left:-8px; }
.correct-s {padding:0; margin-bottom:-43px; position:relative; top:-27px; margin-left:-8px; }
.survey-mobile .survey-set .radio .correct-c img {width:37px !important; }
}
*/

.page-section {height:25px; text-align:center; background: url('/img/ibt/bg_page_section.png') repeat-x; background-position:0 -30px; margin:30px 0; }
.page-section span {padding:0 20px; color:#c8c8c8; font-size:16px; font-weight:bold; }


.setting-score-comment {padding:10px 0 0 60px; color:#999; margin-bottom:-35px;}  /* 20180627 수정*/
.setting-score-wrap {position:relative; top:-10px;}
.setting-score-wrap2 {position:relative; top:0px;}     /* 배경있을때 */

/*.setting-score-comment {padding:10px 0 0 60px; color:#999; margin-bottom:-35px;}
.setting-score-comment2 {padding:10px 0 0 60px; color:#999; margin-bottom:-35px; margin-top:-20px;}*/

/* 가로 정렬 추가 - jdw */
.inline-box{overflow:hidden; width:100%; padding-left:15px;}
.input-inline .checkbox_c3,
.input-inline .radio_c3{display:inline-block; float:left; width:30%}
.input-inline .checkbox_c2,
.input-inline .radio_c2{display:inline-block; float:left;width:45%}
.input-inline .inline-image{margin:0 0 10px; width:100%; /*height:150px;*/ text-align:left;}
.input-inline .inline-image > img{width:100%; max-width:100%; /*height:100%;*/}
.input-inline .checkbox_c3 label,
.input-inline .radio_c3 label{min-height:21px; cursor:pointer; padding:0 20px 0 28px; display:inline-block; width:100%;}
.input-inline .checkbox_c2 label,
.input-inline .radio_c2 label{min-height:21px; cursor:pointer; padding:0 20px 0 28px; display:inline-block; width:100%;}

/* 가로 정렬 추가 - 모바일 설정 - jdw */
.survey-mobile{}
.survey-mobile .input-inline .checkbox_c3,
.survey-mobile .input-inline .radio_c3{width:100%; height:auto; float:none;}
.survey-mobile .input-inline .checkbox_c2,
.survey-mobile .input-inline .radio_c2{width:100%; height:auto; float:none;}
.survey-mobile .input-inline .inline-image{height:250px;}
.survey-mobile .input-inline .inline-image > img{max-width:400px;}
.survey-mobile.input-inline .checkbox_c3 label,
.survey-mobile.input-inline .radio_c3 label{min-height:30px;}
.survey-mobile.input-inline .checkbox_c2 label,
.survey-mobile.input-inline .radio_c2 label{min-height:30px;}

/*동시시험*/
.survey-answer-wrap .survey-question h1{text-align:center;}
.survey-answer-wrap .time-reminder{position:inherit;}

/* [공통] 툴팁 설정 */
.tooltip-svy{ position: relative; display: inline-block; cursor: default;}
.tooltip-svy .tooltip-title{display:block;padding:2px 4px; color:#ED5C23; font-weight:bold;}
.tooltip-svy .tooltip-text {
    visibility: hidden;
    position: absolute;
    min-width: 100px;
    background-color: #555;
    color: #fff;
    text-align: center;
    font-size:12px;
    padding: 5px 7px;
    border-radius: 5px;
    z-index: 9;
    opacity: 0;
    transition: opacity .6s;
    top: 135%; left: 50%;
    margin-left: -100px;
    line-height: 1.4;
}
.tooltip-svy .tooltip-text::after{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}
.tooltip-svy:hover .tooltip-text {visibility: visible; opacity: 1;}

/* 문항(OX선택형) 설정 */
.test-list{padding: 6px 0 6px 0; margin-bottom:10px;}
.test-list-ox{display: block; vertical-align: middle; margin-top: 5px; margin-bottom: 10px; box-sizing: border-box;}
.test-ox-content{}
.test-ox-content::after{content:''; display:block; clear:both;}
.test-ox-content .test-o,
.test-ox-content .test-x{
    display: inline-block;
    float: left;
    border: 5px solid #ccc;
    padding: 2px 0;
    width: 50px; height: 50px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
    font-weight: bold;
    margin: 5px 8px 0 0;
    cursor: pointer;
    font-size:25px;
    color:#ccc;
}
.test-ox-content .test-o.test-active,
.test-ox-content .test-x.test-active{border: 5px solid #ED5C23;color:#ED5C23;}

/* 문항(빈칸채우기) 설정 */
.blank-add-content{padding: 15px 0 0 70px; width: 570px; text-align: right;}
.blank-add-content .btn-blank-add{font-size: 12px; width: 85px; height: 28px; line-height: 28px; text-align: center;}
.tooltip-svy.blank-add-info{margin-left:10px;}
.tooltip-svy.blank-add-info .tooltip-text{min-width:200px;}


/* 상단 단계 상태바 설정 */
.step-box {padding:0 10px 10px 10px; border:1px solid #ddd; background:#fff;}
.step-state {padding:0 0 15px;}
.step-state ul:after { content:''; display:block; clear:both;}
.step-state ul li { float:left; position:relative; width:33.333333%; padding-top:55px; font-size:15px; font-weight:bold; text-align:center; line-height:12px; color:#666;}
.step-state ul li:first-child { font-size:13px;}
.step-state ul li p{font-size:13px; font-weight: bold;}
.step-state ul li p:after { position:absolute; /* absolute 기준은 li 영역 */ width:41px; height:24px; margin-right:-20px;  top:0; right:0; color:#fff; background-color:#dddddd; font-size:11px; line-height:16px; letter-spacing:-.5px; }
.step-state ul li span { display:block; margin-top:2px; font-weight:normal; color:#898989; font-size:12px;}
.step-state ul li:before { position:absolute; top:35px; left:0; right:0; height:3px; background:#ddd; content:'' } /* 회색 진행바 생성 */
.step-state ul li:nth-child(1):before { left:50%;} /* 첫 번째 진행바 반만 생성*/
.step-state ul li:nth-child(3):before { right:50%;} /* 마지막 진행바 반만 생성*/
/* 화살표 상태 아이콘 */
.step-state ul li:after {position:absolute; top:29px; left:50%; width:15px; height:15px; margin-left:-10px;  content:''; background-color:#fff; border-radius: 50%; border: 3px solid #ddd; box-sizing: border-box;}
/* 활성화 상태바 */
/*.step-state.step1 ul li:nth-child(1):before,*/
.step-state.step2 ul li:nth-child(-n+2):before,
.step-state.step3 ul li:nth-child(-n+3):before,
.step-state.step4 ul li:nth-child(-n+4):before{ background:#ED5C23;}
 /* 활성화 아이콘 표시 */
.step-state.step1 ul li:nth-child(1):after,
.step-state.step2 ul li:nth-child(-n+2):after,
.step-state.step3 ul li:nth-child(-n+3):after,
.step-state.step4 ul li:nth-child(-n+4):after{border:2px solid #ED5C23; background-color:#ED5C23;}
/* 도전 중일 경우의 1/2 영역 비활성화 상태바 영역 */
.step-state ul li p:before { position:absolute; top:35px; left:50%; right:0; height:3px; content:''; }
/* 비활성화 */
/*.step-state.step3 ul li:nth-child(3) p:before, 4단계일때 활성화*/
.step-state.step2 ul li:nth-child(2) p:before{background: #ddd;}


/* 응답 페이지 설정 */

/* 응답 상단 */
.answer-title{}
.answer-title h1{font-size:24px; font-weight:600; text-align:center;}
.answer-title .title-sub-content{}
.answer-title .title-sub-content .answer-test-date{font-size:16px; font-weight:600; color:#ED5C23; text-align:center; margin-top:25px;}
.answer-title .title-sub-content .answer-loading{margin-top:25px; height:100px;}
.answer-title .title-sub-content .answer-loading .loader-object{
  width: 12px; height: 12px;
  border-radius: 50%;
  position: relative;
  animation: loader-object-animation 1s linear infinite;
  top: 50%;
  margin: 0 auto;
}
@keyframes loader-object-animation{
  0% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.05), 15px -15px 0 0 rgba(237, 92, 35, 0.1), 22px 0 0 0 rgba(237, 92, 35, 0.2), 15px 15px 0 0 rgba(237, 92, 35, 0.3), 0 22px 0 0 rgba(237, 92, 35, 0.4), -15px 15px 0 0 rgba(237, 92, 35, 0.6), -22px 0 0 0 rgba(237, 92, 35, 0.8), -15px -15px 0 0 #ED5C23; }
  12.5% {
    box-shadow: 0 -22px 0 0 #ED5C23, 15px -15px 0 0 rgba(237, 92, 35, 0.05), 22px 0 0 0 rgba(237, 92, 35, 0.1), 15px 15px 0 0 rgba(237, 92, 35, 0.2), 0 22px 0 0 rgba(237, 92, 35, 0.3), -15px 15px 0 0 rgba(237, 92, 35, 0.4), -22px 0 0 0 rgba(237, 92, 35, 0.6), -15px -15px 0 0 rgba(237, 92, 35, 0.8); }
  25% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.8), 15px -15px 0 0 #ED5C23, 22px 0 0 0 rgba(237, 92, 35, 0.05), 15px 15px 0 0 rgba(237, 92, 35, 0.1), 0 22px 0 0 rgba(237, 92, 35, 0.2), -15px 15px 0 0 rgba(237, 92, 35, 0.3), -22px 0 0 0 rgba(237, 92, 35, 0.4), -15px -15px 0 0 rgba(237, 92, 35, 0.6); }
  37.5% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.6), 15px -15px 0 0 rgba(237, 92, 35, 0.8), 22px 0 0 0 #ED5C23, 15px 15px 0 0 rgba(237, 92, 35, 0.05), 0 22px 0 0 rgba(237, 92, 35, 0.1), -15px 15px 0 0 rgba(237, 92, 35, 0.2), -22px 0 0 0 rgba(237, 92, 35, 0.3), -15px -15px 0 0 rgba(237, 92, 35, 0.4); }
  50% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.4), 15px -15px 0 0 rgba(237, 92, 35, 0.6), 22px 0 0 0 rgba(237, 92, 35, 0.8), 15px 15px 0 0 #ED5C23, 0 22px 0 0 rgba(237, 92, 35, 0.05), -15px 15px 0 0 rgba(237, 92, 35, 0.1), -22px 0 0 0 rgba(237, 92, 35, 0.2), -15px -15px 0 0 rgba(237, 92, 35, 0.3); }
  62.5% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.3), 15px -15px 0 0 rgba(237, 92, 35, 0.4), 22px 0 0 0 rgba(237, 92, 35, 0.6), 15px 15px 0 0 rgba(237, 92, 35, 0.8), 0 22px 0 0 #ED5C23, -15px 15px 0 0 rgba(237, 92, 35, 0.05), -22px 0 0 0 rgba(237, 92, 35, 0.1), -15px -15px 0 0 rgba(237, 92, 35, 0.2); }
  75% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.2), 15px -15px 0 0 rgba(237, 92, 35, 0.3), 22px 0 0 0 rgba(237, 92, 35, 0.4), 15px 15px 0 0 rgba(237, 92, 35, 0.6), 0 22px 0 0 rgba(237, 92, 35, 0.8), -15px 15px 0 0 #ED5C23, -22px 0 0 0 rgba(237, 92, 35, 0.05), -15px -15px 0 0 rgba(237, 92, 35, 0.1); }
  87.5% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.1), 15px -15px 0 0 rgba(237, 92, 35, 0.2), 22px 0 0 0 rgba(237, 92, 35, 0.3), 15px 15px 0 0 rgba(237, 92, 35, 0.4), 0 22px 0 0 rgba(237, 92, 35, 0.6), -15px 15px 0 0 rgba(237, 92, 35, 0.8), -22px 0 0 0 #ED5C23, -15px -15px 0 0 rgba(237, 92, 35, 0.05); }
  100% {
    box-shadow: 0 -22px 0 0 rgba(237, 92, 35, 0.05), 15px -15px 0 0 rgba(237, 92, 35, 0.1), 22px 0 0 0 rgba(237, 92, 35, 0.2), 15px 15px 0 0 rgba(237, 92, 35, 0.3), 0 22px 0 0 rgba(237, 92, 35, 0.4), -15px 15px 0 0 rgba(237, 92, 35, 0.6), -22px 0 0 0 rgba(237, 92, 35, 0.8), -15px -15px 0 0 #ED5C23; }
}}

/* 응답 내용 */
.answer-content{padding:0; margin-bottom:30px; line-height:24px; border:0 none;}
.answer-content.guide-content{padding:25px 20px; margin-bottom:30px; /*border-top:1px solid #ccc; border-bottom:1px solid #ccc;*/ background-color:#f9f9f9;}
.answer-content #alarm_chk{margin-bottom:10px; font-weight:bold;}
.answer-content #alarm_chk img.img-cauntion{vertical-align: -3px; margin-right: 5px;}
.survey-set h4.answer-sub-title{margin-bottom: 20px !important; padding:0; font-size:16px; font-weight:600; color:#232323;}
.answer-guide-title{margin:5px 0 10px; font-weight:bold;}
.answer-guide-list{padding-left: 15px;}
.answer-guide-list li{list-style: decimal; padding-bottom:10px; line-height:22px; letter-spacing: -0.5px;}
.answer-guide-info{}
.answer-guide-info::after{content:''; display:block; clear:both;}
.answer-guide-info li{float:left; width:33.33333%; text-align:center; box-sizing:border-box; color:#001eff;}
.answer-guide-info li .info-title{font-weight:bold; display:inline-block; width:65px; color:#1f1f1f;}
.answer-guide-txt{margin-bottom:30px;}
.answer-guide-box{padding:20px; margin-bottom: 35px; line-height:24px; border:1px solid #ccc;}
.answer-guide-box2{padding:20px; margin-bottom: 35px; line-height:24px; background-color:#f9f9f9;}
.answer-cover{border:1px solid #d2d2d2; padding:20px; margin-bottom:35px;}

/* 상태별 텍스트 스타일 설정 */
.answer-date{font-size:14px; font-weight:600; color:#ED5C23;}
.answer-warning{font-size:14px; font-weight:600; color:#333; text-decoration: underline;}
.answer-strong{font-size:14px; font-weight:600; color:#333;}
.answer-danger{font-size:14px; font-weight:600; color:#ED5C23;}

/* 응답페이지 폼 설정 */
.answer-form-group{padding:15px 0; margin-bottom:35px;}
.answer-form-group .form-checkbox{text-align:center;}
.answer-form-group .form-checkbox label{cursor:pointer; font-size: 15px; font-weight: bold;}
.answer-form-group .form-checkbox label input[type="checkbox"]{vertical-align:-1px;}
.sub-tit-wrap{}
.sub-tit-wrap::after{content:''; display:block; clear:both;}
.sub-tit-wrap .write-answer-label{width:25%; float:left;}
.sub-tit-wrap .write-answer-label label{font-weight:600;}
.sub-tit-wrap .write-answer-input{width:75%; float:left;}
.sub-tit-wrap .write-answer-input input[type="text"]{min-width:200px; height: 30px; border-radius: 0; padding: 0;border-top:0 none; border-right:0 none; border-left:0 none;border-bottom: 2px solid #000000;}
.sub-tit-wrap .write-answer-input input[type="text"]:focus{border-bottom: 2px solid #ed5c23; box-shadow: none;}

/* 응답페이지 - 감독관대면인증 절차안내 */
.answer-test-connect{background-color: #f9f9f9;}
.answer-test-connect::after{content:''; display:block; clear:both;}
.connect-list{}
.connect-list li{margin-bottom:15px;}
.connect-list li::after{content:''; display:block; clear:both;}
.connect-list li:last-child{margin-bottom:0;}
.connect-content{width:50%; float:left; padding:10px; box-sizing:border-box;}
.connect-content.p100{width:100%; float:left; padding:10px; box-sizing:border-box;}
.connect-content dl dt{margin-bottom:10px; font-weight:bold;}
.connect-content dl dd{background: #fff; padding: 12px; height:200px; box-sizing: border-box;}

/* qr코드, 핸드폰 링크 보내기 */
.connect-content .content-qrcode,
.connect-content .content-phone{height: 100%; box-sizing:border-box;}

.connect-content .content-qrcode{}
.connect-content .content-qrcode .guide-list{margin-bottom:5px;}
.connect-content .content-qrcode .guide-list li{margin-bottom:0; line-height:22px; font-size:13px; letter-spacing: -1px;}
.connect-content .content-qrcode .qrcode-box{}
.connect-content .content-qrcode .qrcode-box .qrcode-img{width:100px; height:100px; text-align:center; line-height: 97px;}
.connect-content .content-qrcode .qrcode-box .qrcode-img img{vertical-align: middle;}

.connect-content .content-phone{}
.connect-content .content-phone .btn-link{font-weight:bold; color:#001eff; font-size: 13px; text-decoration:underline; word-break: break-all;}
.connect-content .content-phone .btn-link:focus,
.connect-content .content-phone .btn-link:hover{text-decoration:underline;}
.connect-content .content-phone dl dd .answer-form-group{padding:0; margin:0;}
.connect-content .content-phone dl dd .answer-form-group .sub-tit-wrap{padding:0; margin:0;}
.connect-content .content-phone dl dd .answer-form-group .sub-tit-wrap .write-answer-label{display:block; width:100%; padding: 0 0 10px 0; font-weight: bold;}
.connect-content .content-phone dl dd .answer-form-group .sub-tit-wrap .write-answer-input{width:auto; margin-right:10px;}
.connect-content .content-phone dl dd .answer-form-group .btn-send-link{height: 30px; line-height: 32px; background-color: #000; color: #fff; font-size: 13px; text-align: center; width: 75px;}
.connect-content .content-phone dl dd .answer-form-btn{margin-bottom:15px;}

/* 화면 공유 안내, 내 전체 화면 */
.connect-content .content-desktop{height: 100%; box-sizing:border-box;}
.connect-content .content-desktop .guide-list{margin-bottom:5px;}
.connect-content .content-desktop .guide-list li{line-height:22px; font-size:13px; letter-spacing: -1px;}

.guide-txt-warning{position:relative; padding-left:15px; color:#f00; font-size:13px; }
.guide-txt-warning::before{content:'!'; position:absolute; left:-2px; top:4px; display:inline-block; width:12px; height:12px; font-weight:bold; background-color:red; color:#fff; text-align:center; line-height: 11px; font-size: 12px;}

/* 응답페이지 - 화면 공유하기 */
.share-desktop-content{text-align:center;}
.share-desktop-content .share-in{
    border: 1px solid #ececec;
    padding:15px;
    display: inline-block;
    text-align: center;
    background: #efefef;
}
.share-desktop-content .share-in .share-area{min-width:350px; min-height:200px; text-align:center;}
.share-desktop-content .share-in .share-area img{width:350px; background-color:#fff;}

.share-myscreen-content{}
.share-myscreen-content::after{content:''; display:block; clear:both;}
.share-myscreen-content .share-myscreen{padding:5px; width:50%; float:left; box-sizing: border-box;}
.share-myscreen-content .share-myscreen .share-myscreen-img{height:100px; border:4px solid #f5f5f5; overflow:hidden; box-sizing: border-box;}
.share-myscreen-content .share-myscreen .share-myscreen-img img{width:100%;}
.share-myscreen-content .share-myscreen.selected .share-myscreen-img{border:4px solid #ed5c23;}
.share-myscreen-content .share-myscreen .share-myscreen-title{margin-bottom:8px; font-size:13px; font-weight:bold; color:#333;}
.share-myscreen-content .share-myscreen.selected .share-myscreen-title{color:#ed5c23;}

.share-myscreen-content .share-myscreen-btn{text-align:right; clear:both; padding: 5px;}
.share-myscreen-content .share-myscreen-btn .btn-share-myscreen{font-size:13px; border:1px solid #000; background-color:#000; padding:4px 10px; text-align:center; color:#fff; line-height:1;}
.share-myscreen-content .share-myscreen-btn .btn-share-myscreen:hover{
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

/* 응답페이지 - 신분증 공유하기 */
.share-card-content{text-align:center;}
.share-card-content .share-in{
    border: 1px solid #ececec;
    padding:15px;
    display: inline-block;
    text-align:center;
    background: #efefef;
}
.share-card-content .share-in .share-area{text-align:center;}
.share-card-content .share-in .share-area img{width:300px; height:191px; background-color:#fff;}

.button-section .btn-share{
    border:1px solid #000;
    text-align:center;
    padding:10px 8px;
    background-color: #000;
    color: #fff;
    font-size: 13px;
    line-height:1;
    width: 100px; height: auto;
}

/* 팝업 - 응시 절차 안내 */
#guide-popup{max-width:800px; margin:0 auto; background-color:#fff;}
#guide-popup .pop-layer{
    max-width: 800px;
    width:100%; height:auto;
    transform: translate(-50%,-50%);
}
#guide-popup .pop-conts-in{padding: 25px 30px; text-align:left;}
#guide-popup .pop-layer .pop-layer-in .answer-guide-box2{margin-bottom:0;}

.text-guide-list{margin-bottom:15px;}
.text-guide-list ul::after{content:''; display:block; clear:both;}
.text-guide-list ul li{float:left; width:25%; box-sizing: border-box; text-align:center;}
.text-guide-list ul li dl{display:inline-block;}
.text-guide-list ul li dl dt{font-size:15px; font-weight:bold; margin-bottom:15px;}
.text-guide-list ul li dl dd.img-guide{padding: 0 5px;}
.text-guide-list ul li dl dd.img-guide img{max-width:100%;}

/* 모바일설정 ==================================================== */
@media (max-width: 767px){

    .connect-content {width: 100%; height: auto; float: none;}
    .connect-content dl dd{height:auto;}

    .share-myscreen-content .share-myscreen .share-myscreen-img{height:auto; max-height:240px;}

    /* 팝업 - 응시 절차 안내 */
    .text-guide-list ul li{width:50%; margin-bottom:15px;}

}


/* 20220831 PASS & FAIL */
    /* 합격 불합격 템플릿 */
    .pass-fail-wrap{
      position: relative;width: 100%; height:100vh; background:#fff;
          display: -ms-flexbox;
          display: -webkit-flex;
      display: flex;
          -webkit-flex-direction: column;
          -ms-flex-direction: column;
      flex-direction: column;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
      justify-content: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
      align-items: center;                    
  }
  .pass-fail-wrap.preview{height: auto; margin-top:0.5rem; margin-bottom:1rem;}
  .pass-fail-wrap.preview .button-section{width: 100%; text-align:Center;}
  .pass-fail-wrap *{box-sizing: border-box; line-height:1.4; word-break: keep-all;}
  .pass-fail-wrap .pass-fail-template{
      position: relative; margin: 10px auto;
      width:700px; max-width:98%; 
      max-height:90%; min-height: 450px;
      border-radius: 20px;
      box-shadow: 0 0 10px rgb(0 0 0 / 20%);
          display: -ms-flexbox;
          display: -webkit-flex;
      display: flex;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
      justify-content: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
      align-items: center;
  }                
.pass-fail-wrap .pass-fail-template .con_table dt {min-width: 90px;}
  .pass-fail-wrap .pass-fail-template-con{text-align: center; color:#333; min-width:300px; max-width:90%; padding-bottom:30px;}
  
  .pass-fail-wrap .pass-fail-template-con h1{display: block; font-weight:700; font-size:1.75rem; margin-bottom:2rem; color: #ed5c23; }
  .pass-fail-wrap .pass-fail-template-con h2{
      margin-bottom:1rem; display: block; padding:12px 20px; background-color: #f5f3f3;
      font-size:1.25rem; font-weight: bold; color:#222;
      border-radius: 15px;
  }                
  .pass-fail-wrap .pass-fail-template-con .box{}
  .pass-fail-wrap .pass-fail-template-con .box ul{display: table; margin:10px auto;}
  .pass-fail-wrap .pass-fail-template-con .box dl{display: table-row;}
  .pass-fail-wrap .pass-fail-template-con .box dl dt,
  .pass-fail-wrap .pass-fail-template-con .box dl dd{display: table-cell; padding:5px 0; line-height:1.5;}
  .pass-fail-wrap .pass-fail-template-con .box dl dt{color:#333;font-weight: bold;text-align: right;}
  .pass-fail-wrap .pass-fail-template-con .box dl dt::after{content: ":"; font-weight: 400; margin:0 5px;}
  .pass-fail-wrap .pass-fail-template-con .box dl dd{text-align: left;}
  .pass-fail-wrap .pass-fail-template-con .box dl dd strong{color:#333;font-weight: bold;}
  .pass-fail-wrap .pass-fail-template-con .box dl dd strong.red{color: #f10b0b;}
  .pass-fail-wrap .pass-fail-template-con .msg{
      margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid #ddd;
      font-size:115%;
  }
  .pass-fail-wrap .pass-fail-template.pass h1,
  .pass-fail-wrap .pass-fail-template.pass .msg strong{color:#ed5c23;}
  .pass-fail-wrap .pass-fail-template.fail h1,
  .pass-fail-wrap .pass-fail-template.fail .msg strong{color:#9e2424;}

  .pass-fail-wrap .pass-fail-copyright{
      position: absolute; left:0; bottom:0; width:100%; background:#f5f5f5; padding: 7px;
      text-align: center; font-size: 11px; font-family: sans-serif; color: #a8a8a8;letter-spacing: 0.2px;
      border-radius: 0px 0 20px 20px;
  }
  .pass-fail-wrap .button-section{margin-top: 2rem;}
  
      /* 템플릿 반응형 */
      @media (max-width: 600px) {
          .pass-fail-wrap .pass-fail-template-con h1{font-size:1.5rem; margin-bottom: 1rem;}    
          .pass-fail-wrap .pass-fail-template-con h2{font-size:110%;}    
          .pass-fail-wrap .pass-fail-template-con .box{font-size:small;}
          .pass-fail-wrap .pass-fail-template-con .msg{font-size: 100%;}            
      }
      @media (max-width: 450px) {            
          .pass-fail-wrap .pass-fail-template{height:auto;}
          .pass-fail-wrap .pass-fail-template-con h1{font-size:120%; margin-top:0px;}
          .pass-fail-wrap .pass-fail-template-con h2{font-size:100%; padding:10px;}  
          .pass-fail-wrap .pass-fail-template-con{min-width: 90%;  margin:20px 0;}
          .pass-fail-wrap .pass-fail-template-con .box dl dt, 
          .pass-fail-wrap .pass-fail-template-con .box dl dd{display: block; padding:0;}
          .pass-fail-wrap .pass-fail-template-con .box dl dt{text-align: left;}
          .pass-fail-wrap .pass-fail-template-con .box dl dt::after{display: none;}
          .pass-fail-wrap .pass-fail-template-con .box dl dd{margin-bottom:10px;}
          .pass-fail-wrap .pass-fail-template-con .box dl dd::before{content: "-"; padding-left:0px; padding-right:5px;}
      }

  /* 시험설정 */
  .correct-answer-setting.v2{}
  .correct-answer-setting.v2 .alt-msg:empty{height:0;}
  .correct-answer-setting.v2 .tooltip{
      position: relative; float: none; display: inline-block;
      padding: 0px; margin-left: 5px;
      cursor: pointer;
  }
  .correct-answer-setting.v2 .tooltip > span:first-child{
        background: #ed5c23;
        border-radius: 3px;
        color: #fff;
        font-weight: 500;
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: block;
        text-align: center;
        vertical-align: middle;}
  .correct-answer-setting.v2 .tooltip .tooltiptext {
      visibility: hidden; opacity: 0;
      position: absolute; top: -8px; left: 100%; margin-left:10px; z-index: 3;
      width: max-content; height: fit-content; padding: 7px 10px; border-radius: 6px;
      background-color: #555; color: #fff; text-align: left; line-height: 160%; letter-spacing:-0.5px; font-size:13px;
      transition: opacity 1s;
  }
  .correct-answer-setting.v2 .tooltip .tooltiptext::after{
    content:""; position: absolute; top: 12px; left: -5px; right:auto;
    margin-left: -5px; border-width: 5px; border-style: solid;
    border-color: #555 transparent transparent transparent;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
    transform: rotate(90deg); 
  }
  .correct-answer-setting.v2 .tooltip:hover .tooltiptext{visibility: visible; opacity: 1;}
  

.page-content.pass-fail-wrap{width:auto; height:auto; display:block; padding: 0 20px; max-width:100%;}
    .pass-fail-wrap .pass-fail-writebox{display:block; margin-bottom:50px;}
    .pass-fail-wrap .pass-fail-writebox .al-center{text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px;}
    .pass-fail-wrap .pass-fail-writebox .svynew-title {
        clear: both; margin-right: 10px; padding: 15px 0px;
            display: -ms-flexbox;
            display: -webkit-flex;
        display: flex;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
        justify-content: space-between;
            -webkit-align-items: flex-end;
            -ms-flex-align: end;
        align-items: flex-end;
    }
    .pass-fail-wrap .pass-fail-writebox .svynew-title p .bbold{font-size: 24px; font-weight: bold; color: #333;}
    .pass-fail-wrap .pass-fail-writebox .svynew-title p .sbold {font-size: 14px;color: #666;padding-left: 20px;}
    .pass-fail-wrap .pass-fail-writebox .svynew-title p.rt {text-align: right;}
    .pass-fail-wrap .pass-fail-writebox .svynew-title p.rt a,
    .pass-fail-wrap .pass-fail-writebox .svynew-title p.rt button{color:#999;}
    .pass-fail-wrap .pass-fail-writebox .svynew-title p.rt a:hover,
    .pass-fail-wrap .pass-fail-writebox .svynew-title p.rt button:hover{color: #ed5c23;}
    .pass-fail-wrap .pass-fail-writebox .svynew-cont-off{padding: 10px; border: 1px solid #dbdbdb; border-radius: 5px; margin: 0px 0px;}
    .pass-fail-wrap .pass-fail-writebox .svynew-cont-off > div{margin-bottom:20px;}
    .pass-fail-wrap .pass-fail-writebox .svynew-cont-off button {width: 70px; padding: 10px; background: #fff; color: #ed5c23; border: 1px solid #ed5c23; line-height: 1; font-size: 14px;}
    .pass-fail-wrap .pass-fail-writebox .svynew-cont-on{}
    .pass-fail-wrap .pass-fail-writebox .svynew-cont-on > div{margin-bottom:20px;}
    .pass-fail-wrap .pass-fail-writebox .svynew-cont-on p button.button1 {width: 70px; padding: 10px; background: #fff; color: #ed5c23; border: 2px solid #ed5c23; line-height: 1;}
    .pass-fail-wrap .pass-fail-writebox .svynew-cont-on p button.button2 {width: 70px;padding: 10px; background: #fff; color: #aaaaaa; border: 2px solid #aaa; line-height: 1;}
    .pass-fail-wrap .pass-fail-writebox .btn_notes{
        display: inline-block; background: #ED5C23; padding: 3px 7px; margin-left: 10px;
        font-size: 12px; color: #fff; vertical-align: 0; font-family: inherit;
    }
    .pass-fail-wrap .pass-fail-writebox .btn_reset{
        display: inline-block; background: #fff; padding: 3px 7px; margin-left: 10px;
        font-size: 12px; color:#5f6368; vertical-align: 0; font-family: inherit;
    }
    .pass-fail-wrap .pass-fail-writebox .btn_reset:hover{background-color: #F9F9F9; color:#5f6368 !important;}

.pass-fail-distribute{width: 190px; padding: 10px; background: #3a3a3a; color: #fff; margin: 0; font-size: 15px; line-height: 22px;}

.pass_fail_notes{;}
    .pass_fail_notes header{padding:0; margin:20px 0 30px;}
    .pass_fail_notes h3{display:inline-block;  font-size: 100%; font-weight: bold; padding:3px 5px; border-radius: 5px; line-height: 1.25;}
    .pass_fail_notes h3.bg1{background:#ed5c23; color:#fff;}
    .pass_fail_notes h3.bg2{background:#999; color:#fff;}
    .pass_fail_notes ul.notes_txt{line-height: 1.25; margin-top:10px; padding-left:20px;}
    .pass_fail_notes ul.notes_txt li{list-style: decimal; margin:5px 0; font-size:90%; line-height: inherit;}
    .pass_fail_notes ul.notes_txt .strong_txt{position:relative; color: #ed5c23; font-weight: bold; font-size:100%; line-height: inherit}
    .pass_fail_notes ul.notes_txt .strong_txt::before{content:"※"; position: absolute; left:-16px;}

.text_style_default{font-size: 11pt; letter-spacing:0px; line-height:1.5;}
.text_style_default.family_nanumGothic{font-family: 나눔고딕, NanumGothic, sans-serif;}

/* 문항 묶음 설정페이지 및  팝업 */
.que_random_set_btn {
    position: relative;
    left: 38px;
    width: fit-content;
    margin-top: 12px;
    padding: 0 5px;
    z-index: 2;
    background-color: #fff;
}

.que_random_set_btn button {
    background-color: #ffe6de;
    color: #ed5c23;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

@media (hover:hover) {
    .que_random_set_btn button:hover {
        background-color: #ffdbcf;
    }  
}

#preview-popup.que-join-popup .layer-close {
    position: absolute;
    width: 16px;
    top: 25px;
    right: 25px;
}
#preview-popup.que-join-popup {
    box-sizing: border-box;
    display: block;
    position: fixed;
    top: calc(50% + 10px);
    left: calc(50% + 82px);
    transform: translate(-50%, -50%);
    border-radius: 10px;
    width: 775px;
    height: 85vh;
    max-height: 1200px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border: 1px solid #dbdbdb;
    z-index: 999;
    background-color: #fff;
    padding: 25px;
}

#preview-popup.que-join-popup * {
    box-sizing: border-box;
}

#preview-popup.que-join-popup *:not(header h2, .float-btn) {
    text-align: left;
}

#preview-popup.que-join-popup section {
    height: 100%;
    display: flex    ;
    flex-direction: column;
}

#preview-popup.que-join-popup .preview-btn {
    width: 100%;
    height: 35px;
    margin: 10px auto 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preview-popup.que-join-popup .preview-btn .float-btn {
    border-radius: 5px;
    font-size: 16px;
    height: auto;
    margin: 0;
}

#preview-popup.que-join-popup .previewbox  {
    height: 100%;
}

.preview-notice {
    margin-bottom: 10px;
}

.preview-notice .preview-notice-box {
    background-color: #f6f6f6;
    padding: 8px 12px;
    border-radius: 5px; 
}

.preview-notice .preview-notice-box>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
}

.preview-notice .preview-notice-box>a .icon_arrow img {
    transition: transform 0.3s ease;
}

.preview-notice .preview-notice-box>a.open .icon_arrow img {
    transform: rotate(180deg);
}

.preview-notice .preview-notice-box>a .title p {
    color: #444;
    font-weight: 500;
    font-size: 15px;
}

.preview-notice .preview-notice-box .notice_content {
    padding: 5px 0 5px;
}

.preview-notice ul li {
    position: relative;
    padding-left: 10px;
    color: #444;
    line-height: 150%;
}

.preview-notice ul li::before {
    position: absolute;
    content: '';
    width: 3.5px;
    height: 3.5px;
    border-radius: 20px;
    background-color: #FFA079;
    top: 8px;
    left: 0;
}

.que_random_join {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    top: -17px;
    max-height: 120px;
}

.que_random_join ul {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 28px 15px 15px 15px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #dbdbdb;
}

#preview-popup.que-join-popup .que_random_join ul {
    border: 0;
    padding: 25px 15px 0 0;
}

.que_random_join ul li {
    position: relative;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    padding: 5px 12px;
}

.que_random_join ul li.join_complete {
    border: 0;
    background-color: #e2e2e2;
    color: #888;
}

.que_random_join ul li.join_complete  span {
    color: #888;
}

.que_random_join ul li:hover .delete {
    opacity: 1;
}

.que_random_join ul li .delete {
    opacity: 0;
    position: absolute;
    right: -6px;
    top: -6px;
    background-color: #222;
    border-radius: 20px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

#preview-popup.que-join-popup .survey-question-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#preview-popup.que-join-popup .survey-answer-wrap {
    height: 100%;
}

#preview-popup.que-join-popup .survey-answer-wrap html {
    overflow-x: hidden;
}

#preview-popup.que-join-popup .survey-answer-wrap html body {
    background-color: #fff;
}

#preview-popup.que-join-popup .survey-answer-wrap #cover_wrap {
    padding-right: 1px;
}

#preview-popup.que-join-popup .survey-answer-wrap section {
    padding: 16px;
    border-radius: 10px;
    border: 2px solid #fff;
    cursor: pointer;
}

.join-wrap {
    position: relative;
    border: 2px solid #ed5c23;
    border-radius: 10px;
    margin: 25px 5px 25px 0;
    padding-top: 10px;
}

.join-wrap::before {
    position: absolute;
    content: '묶음';
    font-size: 14px;
    background-color: #ed5c23;
    color: #fff;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border-radius: 20px;
    padding: 3px 16px;
    z-index: 9;
}

.join-wrap.join_complete {
    border: 2px solid #dbdbdb;
}

.join-wrap.join_complete::before {
    position: absolute;
    content: '묶음';
    font-size: 14px;
    background-color: #aaa;
}

.join-wrap.join_complete::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10px;
}

.que_random_join ul li .delete img {
    width: 9px;
}

.que_random_join ul li span {
    color: #444;
}