@charset "utf-8";

/* ---------------------------------------
	Filename: common.css
	Description : 국토안전관리원
	Author	: mobigen
	date	: 2022-05
	비고 : 
   --------------------------------------- */

@font-face {
    font-family:"NotoSans";
    src:url("../fonts/NotoSans-Light.woff2") format("woff2"),
        url("../fonts/NotoSans-Light.woff") format("woff"),
        url("../fonts/NotoSans-Light.ttf") format("truetype");
    font-weight:300;
    font-style:normal;
}

@font-face {
    font-family:"NotoSans";
    src:url("../fonts/NotoSans-Regular.woff2") format("woff2"),
        url("../fonts/NotoSans-Regular.woff") format("woff"),
        url("../fonts/NotoSans-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family:"NotoSans";
    src:url("../fonts/NotoSans-Medium.woff2") format("woff2"),
        url("../fonts/NotoSans-Medium.woff") format("woff"),
        url("../fonts/NotoSans-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
}

@font-face {
    font-family:"NotoSans";
    src:url("../fonts/NotoSans-Bold.woff2") format("woff2"),
        url("../fonts/NotoSans-Bold.woff") format("woff"),
        url("../fonts/NotoSans-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
}

@font-face {
    font-family:"roboto";
    src:url("../fonts/Roboto-Regular.eot");
    src:url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Roboto-Regular.woff") format("woff"),
        url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family:"roboto";
    src:url("../fonts/Roboto-Medium.eot");
    src:url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Roboto-Medium.woff") format("woff"),
        url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
}

@font-face {
    font-family:"roboto";
    src:url("../fonts/Roboto-Bold.eot");
    src:url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Roboto-Bold.woff") format("woff"),
        url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
}

/* reset */
/* 여백 초기화 */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption {margin:0; padding:0;}

/* a 링크 초기화 */
a {color:inherit; text-decoration:none; cursor:pointer;}
a:hover {color:#004ca2;}

/* 폰트 스타일 초기화 */
em,address {font-style:normal;}

/* 블릿기호 초기화 */
ul,li,ol {list-style:none;}

/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {line-height:1.2; font-size:14px; font-weight:normal;}

/* 버튼 초기화 */
button {border:0; cursor:pointer; font-size:inherit; font-family:inherit; line-height:inherit;}

/* align */
button, input, select, textarea, img {vertical-align:middle;}

/* 반응형 */
img {width:100%;}

/* font */
sup {font-size:10px !important;}

/* 폼 */
form {margin:0; padding:0;}
fieldset {border:0;}
caption, legend, .blind {overflow:hidden; width:0; height:0; line-height:0; font-size:0; text-indent:-9999px;}
input, textarea, select, optgroup {font-size:inherit; font-family:inherit; line-height:inherit; color:inherit; box-sizing:border-box;}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed; width:100%; max-width:100%; word-wrap:break-word; word-break:break-all;}
select {-webkit-appearance:none; -moz-appearance:none; appearance:none;}

/* focus */
input[type="text"]:focus, 
input[type="password"]:focus, 
textarea:focus, 
select:focus,
.mu-radio > input:focus + label,
.mu-checkbox > input:focus + label, 
button:focus {outline:1px dotted #666;}

/* HTML5 새 요소 초기화 */
header, section, footer, aside, nav, main, article, figure {display:block;}

/* clearfix */
.clearfix{*zoom:1;}
.clearfix::before, .clearfix::after {content:""; display:block;  line-height:0;}
.clearfix::after {clear:both;}

/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height:100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_su {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* margin, padding */
.mt05 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}

.mb0 {margin-bottom:0px !important;}
.mb05 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb45 {margin-bottom:45px !important;}
.mb50 {margin-bottom:50px !important;}

/* width */
.w-auto {width:auto !important;}
.w30 {width:30px !important;} 
.w50 {width:50px !important;} 
.w60 {min-width:60px !important;} 
.w70 {width:70px !important;}
.w80 {width:80px !important;}
.w85 {width:85px !important;}
.w100 {width:100px !important;}
.w110 {width:110px !important;}
.w120 {width:120px !important;}
.w125 {width:125px !important;} 
.w130 {width:130px !important;} 
.w140 {width:140px !important;}
.w150 {width:150px !important;} 
.w160 {width:160px !important;}
.w170 {width:170px !important;}
.w190 {width:190px !important;}
.w192 {width:192px !important;}

.w200 {width:200px !important;}
.w220 {width:220px !important;}
.w240 {width:240px !important;}
.w250 {width:250px !important;}
.w295 {width:295px !important;}

.w300 {width:300px !important;}
.w310 {width:310px !important;} 
.w330 {width:330px !important;}
.w340 {width:340px !important;}
.w370 {width:370px !important;}
.w380 {width:380px !important;}
.w400 {width:400px !important;}
.w415 {width:415px !important;}
.w420 {width:420px !important;}
.w430 {width:430px !important;}
.w440 {width:440px !important;} 
.w460 {width:460px !important;} 
.w490 {width:490px !important;}

.w500 {width:500px !important;}
.w600 {width:600px !important;}
.w700 {width:700px !important;}
.w800 {width:800px !important;}
.w900 {width:900px !important;}
.w940 {width:940px !important;}

/* height */
.h50 {height:50px !important;}
.h60 {height:60px !important;} 
.h80 {height:80px !important;}
.h100 {height:100px !important;}
.h500 {height:500px !important;}

/* 스크롤 */
.no-scroll {overflow:hidden; overflow-y:hidden;}
.scroll-xy {overflow:auto; min-width:100%;}
.scroll-x {overflow-x:auto;}
.scroll-y {overflow-y:auto;}

/* common align */
.fl {float:left !important;}
.fr {float:right !important;}
.tc {text-align:center !important;}
.tr {text-align:right !important;}
.tl {text-align:left !important;}
.vt {vertical-align:top !important;}
.vb, 
.vb td {vertical-align:bottom !important;}
.vb .vm,
.vb .vm * {vertical-align:middle !important;}

/* only Mobile */
.mobile-only {display:none;}

/* only PC */
.pc-only{display:block;}
.mu-formbox > tbody > tr.pc-only {display:table-row;} /* 공통 모바일 */

/* 모바일에서만 보이는 항목정의 - @내부아웃 */
.mobile-show .data-label,
.mobile-show .status,
.mobile-show .mu-checkbox,
.mobile-show .inner-mobile {display:none;}

/* 공통 영역 */
.mu-item-group {display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center;}
.mu-item-group .item-ml-auto {display:flex; gap:15px; align-items:center; margin-left:auto;}
.mu-item-label {display:flex; margin-right:10px;}
.mu-item-label:not(:first-child) {margin-left:40px;}
.mu-item-unit {transform:translateX(-5px);}
.item-ml-auto {margin-left:auto;}

/* 기본나누기영역 */
.mu-section {display:flex;} 

/* 링크관련 */
.link {color:#666; font-weight:400;}
.link:hover {color:#004ca2; text-decoration:underline;}
.unlink,.unlink:hover {color:#aaa; text-decoration:line-through; cursor:no-drop;}
.link-b {color:#333; font-weight:400;}
.link-b:hover {color:#333; text-decoration:underline;}
.link-bl,.link-bl:hover {color:#004ca2; font-weight:500;}
.underline {text-decoration:underline;}
.link > .mu-icon-svg {margin-left:7px;}

/* common Placeholder */
::-webkit-input-placeholder {color:#aaa;}
:-moz-placeholder{/* Firefox 18- */color:#aaa;}
::-moz-placeholder{/* Firefox 19+ */color:#aaa;}
:-ms-input-placeholder{color:#aaa;}

/* 말줄임 */
.mu-ellipsis {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* 공통 5라인이상 스크롤(긴 컬럼) */
.inner-scroll {overflow-y:auto; max-height:100px;}

/* 공통 row col 영역분리 */ 
.mu-row {position:relative; display:flex; flex-wrap:wrap; margin:0 -5px;}
.mu-row > .mu-col {position:relative; width:100%; min-width:1px; min-height:1px; padding-left:5px; padding-right:5px;}

/* row col 영역분리 */  
.mu-row:first-child {margin-top:-1px;}
.mu-row {position:relative; display:flex;}
.mu-col {display:flex; flex:1; width:100%; border-top:1px solid #e5e5e5; min-height:50px; box-sizing:border-box;}
.mu-col-1 {width:8.33333%;}
.mu-col-2 {width:16.66667%;}
.mu-col-3 {width:25%;}
.mu-col-4 {width:33.33333%;}
.mu-col-5 {width:41.66667%;}
.mu-col-6 {width:50%;}
.mu-col-7 {width:58.33333%;}
.mu-col-8 {width:66.66667%;}
.mu-col-9 {width:75%;}
.mu-col-10 {width:83.33333%;}
.mu-col-11 {width:91.66667%;}

/* 완료 결과값 안내문구 */
.complete-msg {margin:8px 0; font-weight:normal; color:#666;}
.complete-msg.success {color:#89c550;}
.complete-msg.error {color:#e50000;}

/* 처리상태값 안내문구 */
.status.wait {color:#f26c4f;}/* 답변대기 */
.status.end {color:#333;}/* 답변완료 */
.status.success {color:#89c550;}/* 이용가능 05-26 */
.status.ready {color:#333;}/* 승인대기 05-30 */
.status.reject {color:#333;}/* 승인거절 05-30 */
.status.finish {color:#f26c4f;}/* 승인완료 05-30 */
.status.expire {color:#999;}/* 만료 05-30 */
.status + .mu-btn {margin-left:10px;}

/* disabled 마우스 커서 */
*[disabled], .disabled, .disabled > *, .mu-list > li.disabled {cursor:no-drop;}
*[readonly], .readonly {cursor:default;}

/* button 
****************************************************************************/
/* button basic(contents type) */
.mu-btn {display:inline-flex; justify-content:center; align-items:center; padding:0 25px; height:36px; font-weight:500; color:#333; border:1px solid #e0e0e0; border-radius:6px; background-color:#fff; white-space:nowrap;}
.mu-btn span {color:inherit; font-weight:inherit; line-height:100%; letter-spacing:-1.14px;}
.mu-btn:hover {color:#0080c5; border-color:#0080c5; transition:all .3s;}
.mu-btn:active {border-color:#0080c5;}
.mu-btn:not[disabled] {cursor:pointer;}
.mu-btn[disabled], 
.mu-btn[disabled]:hover {color:#aaa; border-color:#e5e5e5;}
table .mu-btn {padding:0 15px;}

/* button size */
.mu-btn-xs {height:18px;} 
.mu-btn-sm {min-width:60px; height:24px; padding:0 10px;}
.mu-btn-sm span {font-size:.929em;}
.mu-btn-lg {min-width:100px; height:48px; padding:0 20px;}
.mu-btn-lg span {font-size:18px; font-weight:500;}

/* button > icon */
.mu-btn .mu-icon-svg {margin-right:8px;}
.mu-btn span + .mu-icon-svg {margin-right:0; margin-left:4px;}

/* icon type button */
.mu-btn-icon-only {display:flex; justify-content:center; align-items:center; min-width:auto; width:36px; height:36px; padding:0;}
.mu-btn-icon-only .mu-icon-svg {margin:0;}
.mu-btn-icon-only span {overflow:hidden; width:0; height:0; border:0; line-height:0; font-size:0 !important; text-indent:-9999px;}/* 버튼에 blind처리 */
.mu-btn-icon-only.mu-btn-sm {width:24px; height:24px;}
.mu-btn-icon-only.mu-btn-lg {width:48px; height:48px;}

/* button bg non */
.mu-btn-bg-non {padding:0; border:0; border-radius:0; background-color:transparent;}
.mu-btn-bg-non:hover,
.mu-btn-bg-non:active {border:0; background-color:transparent;}
/* bg non 버튼 공통 비활성시 */
.mu-btn-bg-non[disabled], 
.mu-btn-bg-non[disabled]:hover {color:#bbb; background-color:transparent;}

/* button basic(contents type) - primary */
.mu-btn-primary {color:#fff; border:0; background:linear-gradient(to top, #004ca2, #0064d4);}
.mu-btn-primary:hover,
.mu-btn-primary:focus {color:#fff; opacity:.9;}
.mu-btn-primary[disabled], 
.mu-btn-primary[disabled]:hover,
.mu-btn-primary[disabled]:focus {color:#aaa; border:1px solid #ccc; background-color:#f5f5f5;}

/* 부분 삭제용 공통 button */
.mu-btn-delete {min-width:30px; height:30px; padding:0; border:none; background:none;}
.mu-btn-delete,
.mu-btn-delete:hover,
.mu-btn-delete:focus,
.mu-btn-delete:active {background:none;}
.mu-btn-delete .mu-icon-svg {margin:0;}
.mu-btn-delete span {font-size:0;}

/* 공통 예외 버튼 : 검색단 */
.mu-btn-sch {min-width:48px; border:0; background-image:linear-gradient(to top, #004ca2, #0064d4);}
.mu-btn-sch:hover {background-color:#0080c5;}
.mu-btn-sch span, 
.mu-btn-sch:hover span {color:#fff;}
.mu-btn-sch .mu-icon-svg {margin-right:20px;}
.mu-btn-sch .mu-icon-svg.search, 
.mu-btn-sch .mu-icon-svg.search:hover {width:32px; height:32px; background-image:url("../images/ico/ico-search_o.svg");}

/* 공통 예외 버튼 : 팝업,알럿창 닫기용(사이즈는 상속) */
.mu-btn-close {min-width:auto; width:32px; height:32px; padding:0; border:0; border-radius:0; background-color:transparent;}
.mu-btn-close .mu-icon-svg {margin:0;}
.mu-btn-close span {overflow:hidden; width:0; height:0; line-height:0; font-size:0; text-indent:-9999px;}/* 버튼에 blind처리 */

/* 버튼영역 */
.mu-button-wrap {display:flex; gap:10px; justify-content:center; align-items:center; margin-top:30px;}
.mu-button-wrap:last-child {margin-bottom:10px;}
.mu-button-wrap [class^="mu-btn"]:only-child {margin-left:auto;}

/* form 
****************************************************************************/
input[type=text] {font-weight:400; font-family:inherit;}
input[type=text]::-ms-clear {display:none;} /* ie x제거 */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder, 
input::placeholder {color:#aaa;} 
input[disabled] + label {cursor:no-drop;}/* disabled 마우스 커서 공통 처리 */
.label {margin-right:5px;}/* 테이블외에 따로 들어가는 span 타입 label */

/* input */
/* 사이즈 공통 처리, disabled 마우스 커서 공통 처리, round 공통 처리, ie 요소 추가 */
.mu-input {width:100%; height:36px; line-height:34px; padding:0 16px; border:1px solid #ccc; border-radius:6px; background-color:#fff; font-size:inherit; color:#666;}
.mu-input:hover,
.mu-input:active, 
.mu-input:focus {border-color:#333;}
.mu-input[disabled],
.mu-input[readonly] {border-color:#ccc; background-color:#f5f5f5; color:#aaa;}
.mu-input.error {border-color:#e50000; color:#333;}
.mu-input.success {border-color:#89c550; color:#333;}

/* input size */
.mu-input.mu-input-sm {height:44px; line-height:42px; border-radius:2px;}
.mu-input.mu-input-lg {height:48px; font-size:16px; line-height:46px;}

/* 우측에 아이콘이 있는 타입 */
.mu-input-icon {display:flex; align-items:center; position:relative; width:100%;}
.mu-input-icon .mu-input {flex:1; padding-right:40px;}
.mu-input-icon .mu-btn-delete {position:absolute; top:50%; right:6px; transform:translateY(-50%);}
.mu-input-icon input[disabled] + .mu-btn-delete {opacity:0.5; cursor:no-drop;}
.mu-input-icon .mu-btn-sm.mu-btn-icon-only.mu-btn-bg-non {position:absolute; top:50%; right:5px; padding:0; transform:translateY(-50%);}

/* checkbox */
.mu-checkbox {position:relative; display:inline-block; min-height:28px; line-height:28px;}
.mu-checkbox:last-of-type {margin-right:0;}
.mu-checkbox input {overflow:hidden; position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; padding:0; border:0;}
.mu-checkbox label {display:inline-block; position:relative; line-height:18px; vertical-align:middle; cursor:pointer;}
.mu-checkbox label::before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border:1px solid #ccc; border-radius:6px; background:#fff;}
.mu-checkbox label span {display:inline-block; line-height:19px; padding-left:26px; font-weight:400; word-break:break-all;}
.mu-checkbox label .blind {padding-left:18px;}
.mu-checkbox input:checked + label::before {content:""; border-color:#004ca2; background:url("../images/ico/ico-check.svg") no-repeat 1px 3px,linear-gradient(to top, #004ca2, #0064d4);}
.mu-checkbox input:disabled + label span,
.mu-checkbox input[readonly] + label span {color:#aaa;}
.mu-checkbox input:disabled + label::before,
.mu-checkbox input[readonly] + label::before {background-color:#f5f5f5;}
.mu-checkbox input:disabled:checked + label::before,
.mu-checkbox input[readonly]:checked + label::before {border-color:#ccc; background:#f5f5f5 url("../images/ico/ico-check_c_d.svg") no-repeat 1px 3px;}

/* radio */
/* disabled 마우스 커서 공통 처리 */
.mu-radio {position:relative; display:inline-block; min-height:28px; line-height:28px;}
.mu-radio:last-of-type {margin-right:0;}
.mu-radio input {overflow:hidden; position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; padding:0; border:0;}
.mu-radio label {position:relative; display:inline-block; line-height:18px; vertical-align:middle; cursor:pointer;}
.mu-radio label::before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; border:1px solid #ccc; border-radius:50%;}
.mu-radio label span {display:inline-block; line-height:19px; padding-left:26px; font-weight:400; word-break:break-all;}
.mu-radio label .blind {padding-left:18px;}
.mu-radio input:checked + label::before {border-color:#004ca2; background:linear-gradient(to top, #004ca2, #0064d4);}
.mu-radio input:checked + label::after {content:""; position:absolute; top:5px; left:5px; width:8px; height:8px; border-radius:50%; background-color:#fff;} 
.mu-radio input:disabled + label span,
.mu-radio input[readonly] + label span {color:#aaa;}
.mu-radio input:disabled + label::before,
.mu-radio input[readonly] + label::before {background-color:#f5f5f5;}
.mu-radio input:disabled:checked + label::before,
.mu-radio input[readonly]:checked + label::before {border-color:#ccc; background:#f5f5f5;}
.mu-radio input:disabled:checked + label::after,
.mu-radio input[readonly]:checked + label::after {background-color:#ccc;}

.btn-switch {display:flex; height:36px; margin-bottom:20px;}
.btn-switch .mu-radio {flex:1;}
.btn-switch .mu-radio label {display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:100%; border:1px solid #e0e0e0; background-color:#fff; text-align:center; transition:all 0.3s ease;}
.btn-switch .mu-radio:not(:first-child) label {border-left:0;}
.btn-switch .mu-radio:first-child label {border-radius:18px 0 0 18px;}
.btn-switch .mu-radio:last-child label {border-radius:0 18px 18px 0;}
.btn-switch .mu-radio label:before,
.btn-switch .mu-radio label:after {display:none;}
.btn-switch .mu-radio label span {padding-left:0;}
.btn-switch .mu-radio input:checked + label {border:0; background:linear-gradient(to top, #004ca2, #0064d4);}
.btn-switch .mu-radio input:checked + label span {color:#fff;}
.btn-switch .mu-radio:hover label {text-decoration:underline; background-color:#f5f5f5;}
.btn-switch .mu-radio input:disabled + label {border-color:#e0e0e0; background-color:#eee;}
.btn-switch .mu-radio input:disabled + label span {color:#aaa;}
.btn-switch .mu-radio input:disabled + label:before {border:none; background:none;}

/* selectbox *//* js */
/* mu-selectbox 기준 사이즈 상속, 사이즈 공통 처리, disabled 마우스 커서 공통 처리, round 공통 처리, ie click시 움직임 제거(span 추가), js 추가 */
.mu-selectbox .mu-value {position:relative; width:100%; height:100%; padding:0 42px 0 15px; border:1px solid #ccc; border-radius:6px; background-color:#fff; text-align:left; cursor:pointer;}
.mu-selectbox .mu-value::after {content:""; position:absolute; top:50%; right:12px; width:18px; height:18px; margin-top:-9px; background:url("../images/ico/ico-select-arrow.svg") no-repeat 0 0; transition:all .2s;}
.mu-selectbox .mu-value:hover,
.mu-selectbox .mu-value:active,
.mu-selectbox .mu-value:focus {border-color:#333; outline:0}
.mu-selectbox .mu-value span {position:relative;} /* ie click시 움직임 제거 */
.mu-selectbox .mu-list {display:none;  overflow:auto; position:absolute; top:100%; z-index:20; width:100%; max-height:190px; border:1px solid #ccc; border-radius:14px; background-color:#fff;}
.mu-selectbox .mu-list li a {display:block; font-size:inherit; line-height:38px; padding:0 15px; color:#333;}
.mu-selectbox .mu-list li:hover a {background-color:#f5f8fb; text-decoration:none;}
.mu-selectbox.on .mu-list {display:block;}
.mu-selectbox.on .mu-value {background-color:#fff; border-color:#333;}
.mu-selectbox.on .mu-value::after {transform:rotate(180deg);}
.mu-selectbox.disabled .mu-value {border-color:#e8e8e8; background-color:#f5f5f5; color:#bbb;}
.mu-selectbox.disabled .mu-list,
.mu-selectbox.disabled.on .mu-list {display:none;}
.mu-selectbox-up .mu-list {top:inherit; bottom:100%;}

/* basic select */
select::-ms-expand {display:none;}
.mu-selectbox {display:inline-block; position:relative; height:36px; vertical-align:middle;}
.mu-selectbox select {display:block; width:100%; height:36px; padding:0 42px 0 15px; border:1px solid #ccc; border-radius:6px; background:#fff url("../images/ico/ico-select-arrow.svg") no-repeat right 12px center;}
.mu-selectbox select:hover,
.mu-selectbox select:active,
.mu-selectbox select:focus {border-color:#0080c5;}
/* basic select size */
.mu-selectbox.mu-selectbox-lg,
.mu-selectbox.mu-selectbox-lg select {height:48px; font-size:16px;}

/* textarea */
/* mu-area-resize 추가, disabled 마우스 커서 공통 처리, round 공통 처리 */
.mu-area {overflow:auto; width:100%; max-width:100%; min-height:100px; padding:12px 16px; border:1px solid #ccc; border-radius:6px; background-color:#fff; resize:none; font-family:inherit;}
.mu-area:hover,
.mu-area:active, 
.mu-area:focus {border-color:#0080c5;}
.mu-input[disabled],
.mu-input[readonly] {border-color:#ccc; background-color:#f5f5f5; color:#aaa;}
.mu-area-resize {resize:both;}

/* byte */
.mu-byte-group {margin-top:10px; text-align:right; color:#828282;}
.mu-byte-group > strong {color:#000;}
.mu-item-group .mu-byte-group {margin-left:auto;}

/* file 05-23
****************************************************************************/
/* file attach */
.mu-file-attach {position:relative; display:flex; flex-direction:row; align-items:center; width:100%; height:36px;}
.mu-file-attach .mu-file-btn {position:relative;}
.mu-file-attach .mu-file-btn .mu-btn {padding:0; vertical-align:middle; /* IE */ border-color:#004ca2; background-color:#004ca2;}
.mu-file-attach .mu-file-btn .mu-btn label {display:block; width:100%; height:100%; padding:0 16px; line-height:36px; color:#fff; cursor:pointer;}
.mu-file-attach .mu-file-btn:hover .mu-btn {border-color:#0080c5;}
.mu-file-attach .mu-file-btn:hover .mu-btn label,.mu-file-attach .mu-file-btn:hover .mu-btn span {color:#fff;}
.mu-file-attach .mu-file-btn:not(:only-child):last-child {margin-left:10px;}
.mu-file-attach .mu-file-btn .mu-btn-hide {position:absolute; top:0; left:0; width:1px; height:100%; opacity:0;}
.mu-file-attach .mu-input:not(:first-child) {flex:1; margin-left:10px; padding-right:30px;}
.mu-file-attach .mu-input[readonly="readonly"] {background:#fff; color:#333;}
.mu-file-attach .mu-input-icon:not(:last-child) {flex:1 1 0%; min-width:0; margin-right:10px;}
.mu-file-attach .mu-btn-delete {position:absolute; top:50%; right:5px; min-width:30px; transform:translateY(-50%)}
.mu-file-attach + .file-sch-list {margin-top:10px;}

/* 파일첨부리스트타입 */
.mu-file-attach + .mu-file-attach {margin-top:5px;}

/* file attach 수정일떄 (추가,삭제버튼 포함) : 구조 변경 */
.edit-attach-group {position:relative;}
.edit-attach-group .mu-file-attach {width:calc(100% - 46px);}
.edit-attach-group .mu-file-attach > * + * {margin-left:10px;}
.edit-attach-group .mu-file-attach .mu-btn-delete {right:51px;}
.edit-attach-group .mu-file-attach:only-of-type > .mu-btn-delete {right:5px;}/* 한개만 있는 타입(삭제버튼이 없고 파일삭제버튼 위치 조절) */
.edit-attach-group .mu-file-attach:only-of-type > .mu-btn-icon-only:not(.file-delete) {display:none;}
.edit-attach-group > button {position:absolute; top:0; right:0;}

/* file sch list 다운로드 */ 
.file-sch-list > li {height:24px;}
.file-sch-list > li i {margin-right:5px;}
.file-sch-list > li > a {display:inline-block; overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap;}
.file-sch-list > li > a:hover {text-decoration:underline;}
.file-num {margin-left:5px;}

/* email input */
.email-group {display:flex;}
.email-group .part-email {display:flex; align-items:center; margin-right:8px;}
.email-group .part-email input {flex:1;}
.email-group .mu-selectbox {width:192px;}
.email-group span {width:30px; padding:0 5px; text-align:center;}

/* datepicker area
****************************************************************************/
.period-set {display:inline-flex; align-items:center; vertical-align:middle;}
.period-set > span {position:relative; display:inline-block; width:24px; text-align:center; vertical-align:middle;}/* 달력사이 - 만 해당 */
.period-set > span::before {content:"~";}
.mu-datepicker {position:relative; display:inline-block;}
.mu-datepicker .mu-input {width:180px; vertical-align:middle;}
.mu-datepicker .mu-input:hover {border-color:#0080c5;}

/* vue datepicker,timepicker 3.10.2 */
div.mx-datepicker{width:130px;}
.mx-datepicker input {width:100%; height:36px; line-height:1; padding:0 15px; border:1px solid #ccc; border-radius:6px; background-color:#fff; box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.05); color:#333;}
.mx-datepicker input:hover {border-color:#0080c5;} 
.mx-datepicker input:focus {border-color:#0080c5;}
.mx-datepicker input[disabled] {border-color:#ccc; background-color:#f5f5f5; color:#aaa;}
.mx-datepicker .mx-icon-calendar {position:absolute; top:17px; right:12px; width:18px; height:18px; background-image:url("../images/ico/ico-calendar.svg")}
.mx-datepicker .mx-icon-calendar *{display:none;}
.mx-datepicker-main.mx-datepicker-popup {width:262px; min-width:auto; min-height:auto; background:#fff; border:1px solid #aaa; border-radius:6px; box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.3);margin:0; z-index:10001}
.mx-datepicker-main .mx-calendar {float:none; width:100%; padding:0; font-family:'NotoSans';}
.mx-datepicker-main .mx-calendar-header {height:48px; line-height:38px; padding:5px 16px; border-radius:6px 6px 0 0; background-color:#fafafa;}
.mx-datepicker-main .mx-calendar-header * {font-size:16px; font-weight:500; color:#333;}
.mx-datepicker-main .mx-calendar-header > a:hover {color:#0080c5;}
.mx-datepicker-main .mx-calendar-header .mx-current-month + .mx-current-year::after {content:"년";}
.mx-datepicker-main [class^="mx-icon-"] {display:block; width:18px; height:36px; padding:0; background-repeat:no-repeat; background-position:center center; background-size:contain; text-indent:-9999em; vertical-align:middle;}
.mx-datepicker-main .mx-icon-double-left {background-image:url("../images/ico/ico-last_n.svg"); transform:rotate(180deg);}
.mx-datepicker-main .mx-icon-left {background-image:url("../images/ico/ico-right_n.svg"); transform:rotate(180deg);}
.mx-datepicker-main .mx-icon-double-right {background-image:url("../images/ico/ico-last_n.svg");}
.mx-datepicker-main .mx-icon-right {background-image:url("../images/ico/ico-right_n.svg");}
.mx-datepicker-main .mx-calendar-content {width:auto; height:auto; padding:11px 14px;}
.mx-datepicker-main .mx-table-date {table-layout:auto; border-collapse:separate; border-spacing:1px;}
.mx-datepicker-main .mx-panel-date tr {height:auto;}
.mx-datepicker-main .mx-table-date td, .mx-datepicker-main .mx-table-date th {width:auto; font-size:inherit; font-weight:400; vertical-align:middle;}
.mx-datepicker-main .mx-table-date td div, .mx-datepicker-main .mx-table-date th div {width:auto; font-size:inherit; font-weight:400; vertical-align:middle;}
.mx-datepicker-main .mx-table-date th div {color:#666;}/* th평일 */
.mx-datepicker-main .mx-table-date th:first-child {color:#e50000;}/* th일 */ 
.mx-datepicker-main .mx-table-date th:last-child {color:#004ca2;}/* th토 */ 
.mx-datepicker-main .mx-table-date td {min-width:32px; height:32px; background:none;}
.mx-datepicker-main .mx-table-date td div {font-size:14px; color:#666;}
.mx-datepicker-main .mx-table-date td:first-child div {color:#e50000;}/* td일 */ 
.mx-datepicker-main .mx-table-date td:last-child div {color:#004ca2;}/* td토 */
.mx-datepicker-main .mx-table-date td:hover {border:1px solid #004ca2; background:none;}/* 평일hover */
.mx-datepicker-main .mx-table-date td.today, .mx-datepicker-main .mx-table-date td.today.active {background:#004ca2;}/* 오늘 */
.mx-datepicker-main .mx-table-date td.today div, .mx-datepicker-main .mx-table-date td.today.active div {color:#fff;}
.mx-datepicker-main .mx-table-date td.today:hover, .mx-datepicker-main .mx-table-date td.today.active:hover {background:#004ca2;}
.mx-datepicker-main .mx-table-date td.today:hover div, .mx-datepicker-main .mx-table-date td.today.active:hover div {color:#fff;}
.mx-datepicker-main .mx-table-date td.active {border:1px solid #004ca2; background:none;}/* 선택한 날 */
.mx-datepicker-main .mx-table-date td.not-current-month div {color:#aaa;}/* 지난달,다음달 */
.mx-datepicker-main .mx-table-date td.not-current-month:hover div {border:none; color:#aaa;}
.mx-datepicker-main .mx-calendar-content .cell {border:1px solid transparent; background:transparent;}
.mx-datepicker-main .mx-calendar-content .cell div {color:#666;}
.mx-datepicker-main .mx-calendar-content .cell:hover {border:1px solid #f5f5f5; background-color:#f5f5f5;}
.mx-datepicker-main .mx-calendar-content .cell:hover div {color:#666;}
.mx-datepicker-main .mx-calendar-content .cell.active {border:1px solid #004ca2; background:transparent;}
.mx-datepicker-main .mx-calendar-content .cell.active {color:#333;}
.mx-datepicker-main .mx-table-year {padding:0;}
.mx-datepicker-main .mx-table-year .cell div {display:inline-block; width:100%; line-height:36px; margin:1px 5%;}
.mx-datepicker-main .mx-table-month .cell div {display:inline-block; width:100%; line-height:36px; margin:1px 1.5%;}
.mx-btn-current-month,
.mx-btn-current-year {display:inline-block; line-height:38px; padding:0 5px;}

/* 라벨 태그 키워드 헤더 텍스트
***************************************************************************/
/* 타이틀 공통 */
.subject h3,
.mu-heading h4,
.mu-heading h5,
p[class$="-title"],
strong[class$="-title"] {color:#333; font-weight:500;}

/* 컨텐츠내부 공통 헤더 */
.mu-heading {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px;}
.mu-heading h4 {font-weight:400; font-size:18px; line-height:27px; color:#323232;}
.mu-heading h5 {font-weight:400; font-size:16px; line-height:24px; color:#323232;}
.mu-heading h5 strong {font-weight:bold; font-size:22px; color:inherit; line-height:20px; vertical-align:text-top;}
.mu-heading h5 sub {line-height:1; color:inherit; vertical-align:text-bottom;}
.mu-heading .mu-btn {margin-top:-6px;}

/* keyword */
mark.keyword {padding:0 3px; background-color:transparent; color:#004ca2; font-size:inherit; font-weight:inherit;}

/* 건수 */
.mu-total-num {font-weight:500; font-size:16px; line-height:1; color:#333;}
.mu-total-num strong {padding-left:3px; color:#004ca2; font-size:inherit;}

/* 문구 */
.txt-info,.txt-info > li,
span[class^="bul-"], p[class^="bul-"], ul[class^="bul-"] > li {position:relative; word-break:keep-all;}
span[class^="txt-"]::before, p[class^="txt-"]::before, ul[class^="txt-"] > li::before {color:inherit; text-align:left;}
[class^="bul-"] li + li {margin-top:3px;}
[class^="bul-"] > li > ul {margin-top:8px; margin-bottom:8px;}
[class^="bul-"] * {color:inherit;}

/* 데이터 없음 문구 */
.nodata {margin-top:-1px; padding:90px 0; border-top:1px solid #333; border-bottom:1px solid #ccc; font-size:20px; color:#999; text-align:center;}

/* 숫자나 기호가 들어가는 문구 */
.bul-num > li, p.bul-num  {margin-left:18px; padding-left:3px;}
.bul-num > li span, p.bul-num span {margin:0 3px 0 -18px; font-size:inherit; color:inherit;}

/* - 안내문구 */
.bul-hyphen > li, p.bul-hyphen {padding-left:12px;} 
.bul-hyphen > li::before, p.bul-hyphen::before {content:"-"; position:absolute; left:2px; top:0;}
.bul-hyphen > li:last-child, p.bul-hyphen:last-child {margin-bottom:0;} 

.bul-dot > li, p.bul-dot {padding-left:12px;}
.bul-dot > li::before, p.bul-dot::before {content:""; position:absolute; left:0; top:8px; width:3px; height:3px; background:#666;}

/* * 안내문구 */
.bul-ast > li, p.bul-ast {padding-left:12px;}
.bul-ast > li::before, p.bul-ast::before {content:"*"; position:absolute; top:2px; left:0;}

/* ※ 참고문구 */
.bul-refer > li, p.bul-refer {padding-left:16px;}
.bul-refer > li::before, p.bul-refer::before {content:"※"; position:absolute; left:0; top:0;}

/* 공통텍스트 색상타입 */
.txt-org {color:#f26c4f !important;}
.txt-dark {color:#333 !important;}
.txt-light {color:#909090 !important;}
.txt-blue {color:#004ca2 !important;}
.txt-skyblue {color:#0975da !important;}
.txt-basic {color:#666 !important;}
.txt-red {color:#ff0000 !important;}
.txt-brown {color:#b43700 !important;}

/* 필수 항목 표시 */
strong.required {display:inline-block; font-size:0; margin:0 3px; vertical-align:top;}
strong.required::before {content:"*"; color:#e50000; font-size:14px;}
.txt-required {color:#e50000 !important;}/* 필수 항목을 텍스트만으로 표시 */

/* formbox
****************************************************************************/
/* 상세폼테이블 */  
.mu-formbox {width:100%; border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5; background-color:#fff;}
.mu-formbox tr {height:50px;}
.mu-formbox th,
.mu-formbox td {padding:0 10px; border-top:1px solid #e5e5e5; border-left:1px solid #e5e5e5; vertical-align:middle;}
.mu-formbox th {padding-left:20px; font-weight:normal; color:#333; text-align:left; background-color:#fafafa;}
.mu-formbox tr:first-child th,
.mu-formbox tr:first-child td {border-top-color:#333;}
.mu-formbox th.border-top-none,
.mu-formbox td.border-top-none {border-top:0;}
.mu-formbox .mu-item-group > .mu-radio:not(:last-child),
.mu-formbox .mu-item-group > .mu-checkbox:not(:last-child) {margin-right:20px;}

/* mu-formbox-row */
.mu-formbox-row {border-top:1px solid #333; border-bottom:1px solid #ccc; overflow:hidden;}
.mu-col .th {width:140px; padding:12px 15px; background:#fafafa; display:flex; flex-wrap:wrap; align-items:center; min-height:50px; font-weight:normal; box-sizing:border-box;}
.mu-col .th + .td {width:calc(100% - 140px);}
.mu-col .td {align-self:center; width:100%; padding:12px 15px;}
.mu-col .th br {display:none;}
.mu-col .td span {line-height:20px;}
.mu-col .td.cont {padding:30px 0;}
.mu-col .td.cont p {line-height:1.5;}
.mu-col .td ul li a {line-height:28px;}
.mu-col .td a:hover,.mu-col .td a:focus {color:#004ca2; text-decoration:underline;}
.mu-formbox-row .bul-refer {font-size:13px;}
/* mu-formbox-row th bg 분리 */
.mu-formbox-row.mu-formbox-bgnon .th {background:#fff;}
.mu-formbox-row.mu-formbox-bg .th {background:#f5f8fb;}
.mu-formbox-row .th.empty >* {color:#aaa;}/* td empty */
.mu-formbox-row .td .data-info dd {color:#666 !important;}

/* grid
***************************************************************************/
/* mu-grid */
.mu-grid {width:100%; border-top:1px solid #333; border-right:1px solid #e5e5e5;}
.mu-grid tr {height:50px;}
.mu-grid th,
.mu-grid td {padding:0 15px; font-weight:normal;border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; text-align:center;}
.mu-grid th {background-color:#fafafa;}
.mu-grid thead th {color:#333;}
.mu-grid thead th[scope="row"] {text-align:left;}
.mu-grid thead th[scope="row"] ~ th[scope="col"] {font-weight:bold; font-size:18px; background-color:#fff;}
.mu-grid tbody th {text-align:left;}
.mu-grid td a {display:inline-block; overflow:hidden; max-width:calc(100% - 25px); line-height:1.2; color:inherit; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle;}
.mu-grid td a:hover,
.mu-grid td a:hover * {color:#004ca2;} /* 링크색상공통 */ 
.mu-grid td i.mu-icon-svg.new {margin:0 0 0 5px;} /* 새로운글 */
.mu-grid td .mu-btn:only-child {width:100%;}
.mu-grid td.nodata {font-size:inherit;}

/* 기본테이블형 */
.board-list-wrap {position:relative;}
.board-list-wrap .mu-button-wrap {position:absolute; right:0; bottom:0; margin:0; padding:0;}
.board-list-wrap .mu-button-wrap button:only-child {min-width:80px;}

/* pagination */
.mu-pagination {display:flex; justify-content:center; align-items:center; margin:30px auto 0; text-align:center;}
.mu-pagination button, .mu-pagination ul {display:inline-flex; vertical-align:middle;}
.mu-pagination button + button {margin-left:12px;}
.mu-pagination .mu-btn-paging {width:18px; height:36px; min-width:auto; border:0;}
.mu-pagination .mu-btn-paging [class^="mu-icon"] {width:100%; height:100%; margin:0;}
.mu-pagination ul {padding:0 12px;}
.mu-pagination li a {display:block; width:36px; height:36px; line-height:36px; margin:0; padding:0; border:1px solid transparent; border-radius:6px; background:none; font-size:14px; font-weight:500; color:#7f7f7f; text-align:center;}
.mu-pagination li:hover a, 
.mu-pagination li:active a,
.mu-pagination li.active a {border-color:#ccc; background-color:#fff; color:#004ca2; font-weight:500; text-decoration:none;}
.mu-pagination li:active a,
.mu-pagination li.active a {border-color:#003d82; background-color:#004ca2; color:#fff;}
.mu-pagination button, 
.mu-pagination button:hover, 
.mu-pagination button:active {border:none; background:none; padding:0;}
.mu-pagination button[disabled], 
.mu-pagination button[disabled]:hover {background:none;cursor:no-drop;}
.mu-pagination button span {overflow:hidden; width:0; height:0; line-height:0; font-size:0; text-indent:-9999px;}/* 페이징버튼에 blind처리 */
.mu-pagination .paging {display:none; min-width:105px; font-size:18px; text-align:center;}
.mu-pagination .paging .total-num {font-size:inherit; color:#909090;}
.mu-pagination .paging em {font-weight:500; font-size:inherit; color:#004ca2;}
.mu-pagination .mu-btn.mu-btn-icon-only.mu-btn-bg-non {width:18px; height:36px;}

/* tab */ 
.tab-area {position:relative;}
.mu-tab-box {max-width:1420px; height:36px; margin:0 auto 20px; background-color:#fafafa;}
.mu-tab {display:flex; flex-wrap:nowrap; width:100%; height:100%;}
.mu-tab li {flex:1; overflow:hidden; position:relative; height:100%;}
.mu-tab li:only-child {width:100%;} 
.mu-tab li.active {z-index:1;}
.mu-tab li a {display:flex; align-items:center; justify-content:center; height:100%; padding:0 60px; color:#333; text-align:center; white-space:nowrap; border:1px solid #e0e0e0; background-color:#fff;}
.mu-tab li:first-child a {border-radius:24px 0 0 24px;}
.mu-tab li:last-child a {border-radius:0 24px 24px 0;}
.mu-tab li:not(:first-child) a {border-left:0;}
.mu-tab li.active a {color:#fff; border:0; background-image: linear-gradient(to top, #004ca2, #0064d4);}

/* dialog */
.mu-modal {display:flex; align-items:center; justify-content:center; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100; margin:auto;}
.mu-dialog {position:relative; z-index:101; min-width:360px; border:1px solid #ccc; border-radius:10px; background-color:#fff;}
.mu-dialog-background {position:fixed; top:0; left:0; right:0; bottom:0; background-color:#000; opacity:.7; z-index:100;}/* dimmed */
.mu-dialog-head {height:70px; padding:20px;}
.mu-dialog-head .title {color:#333; font-size:20px; font-weight:500; line-height:20px;}
.mu-dialog-body {overflow:auto; max-height:calc(100vh - 218px); min-height:200px; padding:1px 20px;}
.mu-dialog-body .board-head {padding-top:0; border-top:none; border-bottom:1px dashed #e5e5e5;}
.mu-dialog-body .board-body .detail-case-item ~ .detail-case-item {margin-top:20px;}
.mu-dialog-body .board-body .detail-case-item .mu-heading {padding-top:20px !important;}
.mu-dialog-foot {padding:30px 0; text-align:center;}
.mu-dialog-foot button {min-width:100px; height:48px; margin:0 4px; vertical-align:middle;}
.mu-dialog-foot button span {font-size:16px;}
.mu-dialog .mu-dialog-close-btn {position:absolute; top:14px; right:15px; font-size:0;}/* 팝업닫기위치 */
.mu-dialog .mu-dialog-close-btn .mu-icon-svg {width:32px; height:32px;}

/* alert(PC H가변 / MOB 400px고정) */
.mu-alert {position:relative; width:400px; min-width:320px; min-height:190px; padding:20px 30px 30px; border:1px solid #ccc; border-radius:12px; background:#fff;}
.mu-alert-head {padding:0 15px; text-align:center;}
.mu-alert-head strong {font-size:18px; font-weight:500; line-height:1.4em;}
.mu-alert-body {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:50px 20px 30px;}
.mu-alert-head + .mu-alert-body {padding:30px 20px;} 
.mu-alert-msg {line-height:1.6; text-align:center;}
.mu-alert-foot {text-align:center;}
.mu-alert-foot button + button {margin-left:7px;}
.mu-alert .mu-alert-close-btn {position:absolute; top:15px; right:10px;}