@charset "UTF-8";
@font-face {
    font-family: 'NanumSquareNeoLight';
    src: url(../fonts/NanumSquareNeo-aLt.ttf);
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(../fonts/NanumSquareNeo-bRg.ttf);
}
@font-face {
    font-family: 'NanumSquareNeoBold';
    src: url(../fonts/NanumSquareNeo-cBd.ttf);
}
@font-face {
    font-family: 'NanumSquareNeoExtraBold';
    src: url(../fonts/NanumSquareNeo-dEb.ttf);
}
@font-face {
    font-family: 'NanumSquareNeoHeavy';
    src: url(../fonts/NanumSquareNeo-eHv.ttf);
}
@font-face {
    font-family: 'NanumSquareNeoVariable';
    src: url(../fonts/NanumSquareNeo-Variable.ttf);
}
* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'NanumSquareNeo'; color: #262626;}
ul li {list-style: none;}
a {text-decoration: none; cursor: pointer;}
a:hover {text-decoration: underline;}
.hide {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.clearfix::after {content: ""; display: block; clear: both;}
button {cursor: pointer;}
.pcNone {display: none;}


/* 로그아웃 버튼 */
.btn0 {background: #FFF7A1; border-radius: 5px; width: 100px; height: 40px; display: inline-block; font-size: 16px; border: none;}
/* 더보기 버튼 */
.btn1 {background: #2c62a2; color: #fff; border: none; border-radius: 5px; width: auto; height: 40px; display: inline-block; font-size: 16px; padding: 0 15px;}
.btn1:hover {background: #357ABD; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: background 0.3s, box-shadow 0.3s;}
/* 표 안에 사용하는 승인완료 버튼 */
.btn2 {background: #4a92d9; color: #fff; border: none; height: 30px; display: inline-block; width: 80px;}
/* 검색버튼 */
.btn3 {background: #45536d; border-radius: 5px; width: 100px; height: 40px; display: inline-block; font-size: 16px; border: none; color: #fff;}
/* 표 안에 사용하는 삭제버튼 */
.btn4 {background: #d94a4a; color: #fff; border: none; width: 80px; height: 30px; display: inline-block;}
/* 표 안에 사용하는 메뉴권한 버튼 */
.btn5 {background: #003668; color: #fff; width: 100px; height: 45px; border: none;}
/* 가입반려, 탈퇴 버튼 */
.btn6 {background-color: #575757; border: 1px solid #575757; width: 120px; height: 40px; color: #fff; border-radius: 3px;}
/* 수정버튼*/
.btn7 {background-color: #ec566a; border: 1px solid #ec566a; width: 120px; height: 40px; color: #fff; border-radius: 3px;}
/* 목록버튼 */
.btn8 {background-color: #275BAB; border: 1px solid #275BAB; width: 120px; height: 40px; color: #fff; border-radius: 3px;}
/* 표 안에 버튼 (설문 추가, 삭제) */
.btn9 {background-color: #275BAB; border: 1px solid #275BAB; width: 100px; height: 40px; color: #fff; border-radius: 3px;}
.btn10 {background-color: #575757; border: 1px solid #575757; width: 100px; height: 40px; color: #fff; border-radius: 3px;}
/* 취소버튼 */
.btn11 {background-color: #edf1f7; border: #edf1f7; width: 120px; height: 40px; border-radius: 3px;}
/* 대영역 추가, 삭제버튼 */
.btn12 {height: 36px; padding: 0 15px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; cursor: pointer;}
/* 척도, 문항 추가버튼 */
.btn13 {background: #243e72; color: #fff; padding: 9px 12px; border-radius: 2px; border: none; cursor: pointer;}
/* 메인페이지 회원가입, 아이디/비밀번호 찾기버튼 */
.btn14 {background: #f0f9ff; flex: 1; text-align: center; padding: 10px 0; border: 1px solid #ababab; border-radius: 10px; cursor: pointer;}
/* 회원탈퇴 버튼 */
.btn15 {background: #d94a4a; color: #fff; border: none; border-radius: 5px; width: auto; height: 40px; display: inline-block; font-size: 16px; padding: 0 15px;}
.btn16 {height: 40px; padding: 0; font-weight: 400; color: #fff; border: 1px solid #0891a8; background: #219aaf; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); transition: 0.3s; width: 80px; color: #545859; border-color: #959c9e; background: #fff; font-size: 1em;}
.btn17 {height: 40px; padding: 0; font-weight: 400; border: none; width: 80px; background: #d6dce5; font-size: 1em;}
/* 상세검색 버튼 */
.btn18 {position: absolute; left: 0; right: 0; bottom: -30px; margin: auto; width: 195px; display: inline-block; padding: 10px 0 10px 0; background: #ffffff url(../images/arrowbtn.png) no-repeat right 20px center; color: #111111; font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; border: 1px solid #bbbbbb; border-radius: 60px; transition: all 0.3s ease; background-size: contain;}
.btn19 {height: 40px; padding: 0 15px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; cursor: pointer; font-size: 16px;}

/* 테두리 */
.box3 {background-color: #f9fbff; border: 1px solid #d0e2ff; border-radius: 10px; padding: 20px 10px 0 15px; box-shadow: 0 4px 8px rgba(0, 80, 180, 0.1); margin: 20px 0;}
.box4 {border: 1px solid #d0e2ff; border-radius: 10px; padding: 10px 20px 0}
.box5 {background-color: #f9fbff; border: 1px solid #d0e2ff; border-radius: 10px; padding: 20px 15px; box-shadow: 0 4px 8px rgba(0, 80, 180, 0.1); margin: 20px 0;}

/* 배경 */
.bg1 {background: #4a92d9; color: #fff; border: none; height: 30px; display: inline-block; width: 80px; line-height: 30px;}
.bg2 {background: #d94a4a; color: #fff; border: none; height: 30px; display: inline-block; width: 80px; line-height: 30px;}
.bg3 {background: #308d00; color: #fff; border: none; height: 30px; display: inline-block; width: 80px; line-height: 30px;}


/* col */
.col4 {width: 4%;}
.col5 {width: 5%;}
.col6 {width: 6%;}
.col7 {width: 7%;}
.col8 {width: 8%;}
.col9 {width: 9%;}
.col10 {width: 10%;}
.col11 {width: 11%;}
.col12 {width: 12%;}
.col13 {width: 13%;}
.col14 {width: 14%;}
.col15 {width: 15%;}
.col16 {width: 16%;}
.col17 {width: 17%;}
.col18 {width: 18%;}
.col19 {width: 19%;}
.col20 {width: 20%;}
.col21 {width: 21%;}
.col22 {width: 22%;}
.col23 {width: 23%;}
.col24 {width: 24%;}
.col25 {width: 25%;}
.col26 {width: 26%;}
.col27 {width: 27%;}
.col28 {width: 28%;}
.col30 {width: 30%;}
.col32 {width: 32%;}
.col35 {width: 35%;}
.col36 {width: 36%;}
.col38 {width: 38%;}
.col39 {width: 39%;}
.col40 {width: 40%;}
.col41 {width: 41%;}
.col42 {width: 42%;}
.col43 {width: 43%;}
.col44 {width: 44%;}
.col45 {width: 45%;}
.col46 {width: 46%;}
.col47 {width: 47%;}
.col48 {width: 48%;}
.col49 {width: 49%;}
.col50 {width: 50%;}
.col55 {width: 55%;}
.col60 {width: 60%;}
.col70 {width: 70%;}
.col80 {width: 80%;}
.col90 {width: 90%;}


/* select, input, textarea */
select, input, textarea {white-space: nowrap; text-overflow: ellipsis; border: 1px solid #cdcdcd; max-width: 100%; vertical-align: middle; font-size: 15px;}
select {height: 40px; min-width: 155px; padding: 0 0 0 10px; background: #fff; border-radius: 3px; appearance: none; cursor: pointer; -webkit-appearance: none; background: url(../images/arrowbtn.png) no-repeat 98% 50%; background-size: contain;}
input {padding: 10px; height: 40px; border-radius: 3px;}
input.ctype1 {width: 100px;}
input.ctype2, input.email {width: 130px;}
.radioBox ul {display: flex; justify-content: flex-start;}
.radioBox ul li {position: relative; margin-right: 10px;}
.popup .radioBox label, .radioBox > div {padding-left: 2rem;}
.popup .radioBox > div {padding-bottom: 10px;}
.popup .radioBox > div > div {margin: 5px 0 0;}
.radioBox label, .radioBox > div {padding-left: 2.3rem; cursor: pointer; position: relative; z-index: 1; display: block; height: auto;}
.popup .radioBox li span {padding-left: 2.3rem; cursor: pointer; position: relative; z-index: 1; display: inline-block; height: auto;}
.comp-block .radioBox label {padding-bottom: 20px; margin-bottom: 10px;}
.radioBox label::before {position: absolute; left: 0; top: 0; z-index: -2; width: 1.3rem; height: 1.3rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff; content: "";}
.searchBox-verti .radioBox label::before {top: 50%; transform: translateY(-50%);}
.oper-table td .radioBox label::before, .oper-table td .radioBox label::after {left: 50%; top: 50%; transform: translate(-50%, -50%);}
.radioBox input[type="radio"]:checked + label.on {padding-bottom: 0;}
.radioBox label::after {position: absolute; left: 7px; top: 50%; transform: translateY(-50%); z-index: -1; width: 0.5rem; height: 0.5rem; border-radius: 100%; background-color: #fff; content: "";}
.operating-hours .radioBox label::after, .oper-section .radioBox label::after {top: 11px;}
.radioBox input[type="radio"]:checked + label::before {border-color: #006bb7;}
.popup .radioBox > div.on {color: #000; font-weight: bold;}
/* .popup .radioBox > div.on::after {background: url(../images/radioBtn.png) no-repeat center; background-size: 100%;position: absolute; left: 0; width: 1.3rem; height: 1.3rem; content: ""; top: 0;} */
.popup .radioBox > div.on::before, .popup .radioBox > div.on::after {content: ""; position: absolute;}
.popup .radioBox > div.on::after {border: 1px solid #006bb7; left: 0; top: 0; z-index: -2; width: 1.3rem; height: 1.3rem; border-radius: 100%; background-color: #fff;}
.popup .radioBox > div.on::before {background-color: #006bb7; left: 0.4rem; top: 0.4rem; z-index: -1; width: 0.5rem; height: 0.5rem; border-radius: 100%;}
/* .popup .radioBox > div.on::before {display: none;} */
.popup .radioBox > div::before {content: ""; position: absolute; left: 0; top: 0; z-index: -2; width: 1.3rem; height: 1.3rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff;}
/*  */


.popup .radioBox span.on {color: #000; font-weight: bold;}
.popup .radioBox span.on::before, .popup .radioBox span.on::after {content: ""; position: absolute;}
.popup .radioBox span.on::after {border: 1px solid #006bb7; left: 0; top: 0; z-index: -2; width: 1.3rem; height: 1.3rem; border-radius: 100%; background-color: #fff;}
.popup .radioBox span.on::before {background-color: #006bb7; left: 0.4rem; top: 0.4rem; z-index: -1; width: 0.5rem; height: 0.5rem; border-radius: 100%;}
.popup .radioBox span::before {content: ""; position: absolute; left: 0; top: 0; z-index: -2; width: 1.3rem; height: 1.3rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff;}


.radioBox label div {margin: 5px 0 0; line-height: 25px;}
.radioBox input[type="radio"]:checked + label::after {background-color: #006bb7;}
input.scale-input[type="radio"] {appearance: none; border-radius: 50%; width: 24px; height: 24px; border: 1px solid #e5e7ee; position: relative; cursor: pointer; margin: 0 auto; display: block;}
input.scale-input[type="radio"]::before {position: absolute; content: ""; width: 1.3rem; height: 1.3rem; border-radius: 50%; background-color: #fff; border: 1px solid #ddd; top: 50%; left: 50%; transform: translate(-50%, -50%);}
input.scale-input[type="radio"]::after {position: absolute; content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%);}
input.scale-input[type="radio"]:checked::before {border-color: #006bb7; opacity: 0.3;}
input.scale-input[type="radio"]:checked::after {background-color: #006bb7;}
input[type="number"] {max-width: 90px;}
input[type="time"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 80px; padding: 4px; font-size: 14px; box-sizing: border-box;}
input[type="checkbox"] {width: 24px; height: 24px; border: 1px solid #e5e7ee; cursor: pointer; background: #fff; appearance: none;}
textarea {resize: none;word-wrap: break-word; white-space: pre-wrap; overflow-wrap: break-word;}
.itemSn, .itemSn2, .itemSn3 {appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 2px solid #ccc; border-radius: 8px; position: relative; cursor: pointer; background-color: #fff; vertical-align: middle; margin-right: 7px; display: inline-block;}
.itemSn2 {width: auto !important; margin-bottom: 5px; word-break: keep-all; overflow-wrap: break-word;}
.staff-choice .itemSn2 {margin-bottom: 0;}
.itemSn:checked, .itemSn2:checked, .itemSn3:checked {border-color: #006bb7; background-color: #006bb7;}
.itemSn:checked::after, .itemSn2:checked::after, .itemSn3:checked::after {content: ""; position: absolute; top: 40%; left: 50%; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg);}
.radioBox .form_radio > span {padding-left: 30px;}
.radioBox .form_radio > span.on {color: #000; font-weight: bold;}
.radioBox .form_radio > span.on::before, .radioBox .form_radio > span.on::after {content: ""; position: absolute;}
.radioBox .form_radio > span.on::after {border: 1px solid #006bb7; left: 0; top: 0; z-index: -2; width: 1.3rem; height: 1.3rem; border-radius: 100%; background-color: #fff;}
.radioBox .form_radio > span.on::before {background-color: #006bb7; left: 0.4rem; top: 0.389rem; z-index: -1; width: 0.5rem; height: 0.5rem; border-radius: 100%;}
.radioBox .form_radio > span::before {content: ""; position: absolute; left: 0; top: 0; z-index: -2; width: 1.3rem; height: 1.3rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff;}


/* 정렬 */
.tal {text-align: left !important;}
.tac {text-align: center !important;}
.tar {text-align: right !important;}

/* display*/
.dn {display: none;}
.db {display: block;}
.dib {display: inline-block;}
.flex {display: flex; justify-content: space-between; align-items: center;}
.alc {align-items: center;}
.flex-st {justify-content: flex-start !important;}
.flex-dc {flex-direction: column;}


/* 높이 */
.minh112 {min-height: 112px; background-size: 25%;}

/* 패딩 */
.p0 {padding: 0;}
.pb0 {padding-bottom: 0 impoa !important;}

/* 마진 */
.mt0 {margin-top: 0 !important;}
.m0-10 {margin: 0 10px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb20 {margin-bottom: 20px !important;}
.m10-0-0 {margin: 10px 0 0;}
.m20-0-0 {margin: 20px 0 0 !important;}
.m40-0-20 {margin: 40px 0 20px !important;}

/* 글자 색 */
.ftRed {color: #cf122b !important;}
.ftBlue {color: #00327f !important;}

/* 글자 스타일 */
.tdu {text-decoration: underline;}

/* 글자 두께 */
.fwb {font-weight: bold;}

/* 글자 크기 */
.ft13 {font-size: 13px;}
.ft14 {font-size: 14px;}

/* 탭 */
.tabList {display: none;}
.tabList:first-of-type {display: block;}

/* 입력칸 */
pre {white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all;}

@media all and (max-width: 1024px) {
    .moNone {display: none;}
    .pcNone {display: block;}
    .survey-container ul {align-items: flex-start; flex-direction: column;}
    .survey-container ul li {margin-bottom: 20px;}
}

@media all and (max-width: 767px) {
    .radioBox .form_radio > span.on::before {left: 0.384rem; top: 0.35rem; z-index: 2;}
    .radioBox .form_radio > span.on::after, .radioBox .form_radio > span::before {z-index: 1;}
    .mo-none {display: none !important;}
  .flex.m-wrap {flex-wrap: wrap;}
}