@charset "utf-8";
/********************** 
	common.css 
	2025.06.23
***********************/

/* 포인트컬러 변수지정 */
:root{
	--white-color:#ffffff;
	
	--lred-color:#ec372c;
	--lred-active-color:#de0d00;
	
	--red-color:#FF0000;
	--darkred-color:#df5555;
	
	--darkblue-color: #2A54AB; /* 메인블루컬러 */
	--darkblue-active-color: #123580; /* 메인블루컬러 */

	--grayblue20-color:#F1F3F6; /* 버튼 배경색*/
	--grayblue30-color:#E8F1FF; /* 좌측 메뉴 배경색 */

	--grayblue40-color:#B9BCBE; /* 라인버튼 라인색 */
	--grayblue40-active-color:#9ba0a3; /* 라인버튼 라인색 */

	--grayblue60-color:#808CAA; /* 그리드 tr배경색 */
	
	--lgray10-color:#f7f7f7;
	--lgray20-color:#f2f2f2;
	--lgray21-color:#f1f1f1;

	--gray10-color:#f0f0f0;
	--gray20-color:#eeeeee;
	--gray30-color:#dddddd;
	--gray40-color:#cccccc;
	--gray45-color:#BABABA; /* 그리드 tr라인색*/
	--gray50-color:#888888;	
	--gray60-color:#666666;	
	--gray70-color:#555555;
	--gray80-color:#333333;
	--gray90-color:#222222;
	--black-color:#000000;
}

.fc-white{color: var(--white-color) !important;}
.fc-gray50{color: var(--gray50-color) !important;}
.fc-gray70{color: var(--gray70-color) !important;}
.fc-gray80{color: var(--gray80-color) !important;}
.fc-darkblue{color: var(--darkblue-color) !important;}
.fc-red{color: var(--red-color) !important;}
.fc-black{color: var(--black-color) !important;}
.fc-darkred{color: var(--darkred-color) !important;}
.fc-dyellow{color:#e59f00;}

/* font-size */
.font11{font-size:11px !important;}
.font12{font-size:12px !important;}
.font13{font-size:13px !important;}
.font14{font-size:14px !important;}
.font15{font-size:15px !important;}
.font16{font-size:16px !important;}
.font17{font-size:17px !important;}
.font18{font-size:18px !important;}
.font22{font-size:22px !important;}
.font40{font-size:40px !important;}

/* 폰트weight*/
.fw-normal{font-weight:normal;}
.fw-400{font-weight:400;}
.bold{font-weight:700;}
.bold-noto{font-weight:bold;}

/* 폰트 간격 조정 */
.l-sp-m1::placeholder{letter-spacing:-1px;}

/* 정렬관련 */
.fl {float:left;}
.fr {float:right;}

.al{text-align:left !important;}
.ac{text-align:center !important;}
.ar{text-align:right !important;}

.vt {vertical-align:top !important;}
.vm {vertical-align:middle !important;}
.vb {vertical-align:bottom !important;}

/* 마진 패딩 */
.mg-0auto{margin:0 auto !important;}
.mt-minus2{margin-top:-2px !important;}
.mt-minus4{margin-top:-4px !important;} /* 2024.08.16 추가*/
.mt0{margin-top:0 !important;}
.mt4{margin-top:4px !important;}
.mt5{margin-top:5px !important;}
.mt8{margin-top:8px !important;}
.mt10{margin-top:10px !important;}
.mt12{margin-top:12px !important;}
.mt16{margin-top:16px !important;} 
.mt24{margin-top:24px !important;}
.mt32{margin-top:32px !important;}
.mt40{margin-top:40px !important;}
.mt42{margin-top:42px !important;}
.mt60{margin-top:60px !important;}

.ml0{margin-left:0 !important;}
.ml2{margin-left:2px !important;}
.ml5{margin-left:5px !important;}
.ml8{margin-left:8px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}

.mr2{margin-right:2px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important;}

.mb0{margin-bottom:0 !important;}
.mb3{margin-bottom:3px !important;}
.mb5{margin-bottom:5px !important;}
.mb8{margin-bottom:8px !important;}
.mb10{margin-bottom:10px !important;}
.mb16{margin-bottom:16px !important;}
.mb24{margin-bottom:24px !important;}
.mb36{margin-bottom:36px !important;}

.pb36{padding-bottom:36px !important;}
.pb100{padding-bottom:100px !important;}

.pl16{padding-left:16px !important;}

.pr14{padding-right:14px !important;}

.pd-top-none{padding-top:0 !important;}
.pd-bottom-none{padding-bottom:0 !important;}
.pd-right-none{padding-right:0 !important;}
.pd-left-none{padding-left:0 !important;}

/* block */
.block {display:block !important;}
.in-block {display:inline-block;}

/* 아이콘사이즈 */
.icon24{width:24px; height:24px;}
.icon16{width:16px; height:16px;}

.ico-f18{font-size:14px;}

/* widthpx */
.m-w20px{min-width:20px !important;}
.m-w70px{min-width:70px !important;}
.w60px{width:60px !important;}
.w70px{width:70px !important;}
.w75px{width:75px !important;}
.w80px{width:80px !important;}
.w100px{width:100px !important;}
.w117px{width:117px !important;}
.w123px{width:123px !important;}
.w150px{width:150px !important;}
.w160px{width:160px !important;}
.w176px{width:176px !important;}
.w210px{width:210px !important;}
.w214px{width:214px !important;}
.w215px{width:215px !important;}
.w216px{width:216px !important;}
.w218px{width:218px !important;}
.w240px{width:240px !important;}
.w250px{width:250px !important;}
.w260px{width:260px !important;}
.w283px{width:283px !important;}
.w300px{width:300px !important;}
.w340px{width:340px !important;}
.w396px{width:396px !important;}

.h24{height:24px !important}
.h28{height:28px !important}
.h38{height:38px !important}


/* text decoration*/
.underline{ text-decoration:underline}

.btn-cursor{ cursor:pointer;}

/* 투명도 */
.opacity50{opacity:50%}


/********** 체크박스 공통 스타일***********/
.cm-checkbox {display:inline-block; vertical-align:middle;}
.cm-checkbox *{line-height:1;}
.cm-checkbox input[type="checkbox"] {
  width:16px;
  height:16px;
  margin:0 0 0 0;
  border:1px solid #aaa;
  background:#fff;
  border-radius:2px;
  box-sizing:border-box;
  -webkit-appearance:none;
  -moz-appearance: none;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  }
.cm-checkbox input[type="checkbox"]:hover{border-color:#333; }
.cm-checkbox input[type="checkbox"]:checked:before{content:"\e929"; font-family:xeicon; font-size:18px; position:absolute; top:-3px; left:-2px; width:16px; height:16px;}
.cm-checkbox input[type="checkbox"]:checked { position:relative;color:#fff; border-color:var(--darkblue-color); background:var(--darkblue-color); 
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.cm-checkbox input[type="checkbox"]:checked:hover,
.cm-checkbox input[type="checkbox"]:checked:focus {color:#fff; background:var(--darkblue-color);}
.cm-checkbox input[type="checkbox"]:disabled  { border-color:#d8d8d8; background:#eee; border-radius:2px; box-sizing:border-box;}
.cm-checkbox input[type="checkbox"]:checked:disabled {color:#e9e9e9 !important; border-color:#d0d0d0 !important; background:#d0d0d0 !important; border-radius:2px; box-sizing:border-box;}

.cm-checkbox input[type="checkbox"]:checked + label {color:var(--darkblue-color);}
.cm-checkbox input[type="checkbox"]:disabled + label {color:#b3b3b3;}
.cm-checkbox label{color:#222;font-size: 13px;vertical-align:middle;}
/* checkbox label 간격 */
.cm-checkbox input[type="checkbox"] + label{margin-left: 4px;}
.cm-checkbox label + input[type="checkbox"]{margin-left:2px;}
.cm-checkbox .checkbox-item input[type="checkbox"] + label{margin-right:8px;}
/* 1개이상일때 마진20 */
.cm-checkbox.lavel-mr20 label{margin-right:20px;}
.cm-checkbox.lavel-mr10 label{margin-right:10px;}
.cm-checkbox.mr20 label{margin-right:20px;}
.cm-checkbox.w-fixed25{width: calc(25% - 16px);}

/********** 라디오박스 공통 스타일**********/
.cm-radiobox{display:inline-block; vertical-align:middle;}
.cm-radiobox:after{content:""; clear:both; display:block;}
.cm-radiobox *{line-height:1;}
.cm-radiobox:last-child{margin-left:0;}
.cm-radiobox input[type="radio"]{display:none;}
.cm-radiobox label{float:left;display:inline-block;height:16px;line-height:16px;position:relative;padding-left:20px;margin-right:5px;color:#222;font-size: 13px;}
.cm-radiobox label::before{content:""; position:absolute; top:0; left:0px; width:16px; height:16px; border:1px solid #777; background-color:#fff; -webkit-border-radius:16px; border-radius:16px; 
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;}
.cm-radiobox input[type="radio"]:hover + label::before,
.cm-radiobox input[type="radio"]:focus + label::before{border-color:#333;}
.cm-radiobox input[type="radio"]:checked + label::before{border-color:var(--darkblue-color); border:4px solid var(--darkblue-color); transform: scale(1.1); 
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;}
.cm-radiobox input[type="radio"]:checked + label::after{display:block;}
.cm-radiobox input[type="radio"]:disabled + label{color: #b7b7b7;}
.cm-radiobox input[type="radio"]:disabled + label::before{border-color: #ccc;}
.cm-radiobox input[type="radio"]:checked:disabled + label{color: #b7b7b7;}
.cm-radiobox input[type="radio"]:checked:disabled + label::before{border-color: #b7b7b7;}
.cm-radiobox input[type="radio"]:checked:disabled + label::after{background:#b7b7b7;}

.cm-radiobox input[type="radio"]:checked + label {color:var(--darkblue-color);}
.cm-radiobox input[type="radio"]:disabled + label {color:#b3b3b3;}
/* 단독사용 :: 테이블 td에 사용될 경우 우측 패딩값 마진값 조절*/
.label-none input[type="radio"] + label{padding-left: 16px !important; margin-right: 0 !important;}

.cm-radiobox.w-fixed33{width: calc(33% - 16px);}
.cm-radiobox.mr20 label{margin-right:20px;}


/******** button style*********/
button{position: relative; display:inline-block; text-align:center; font-weight:500; vertical-align:middle; border-radius:3px; font-family:'Pretendard', sans-serif; box-sizing:border-box; transition: all 0.3s ease;}
button:hover{-webkit-box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.082); box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.08);}

.btn-fill01{background: var(--darkblue-color); border:1px solid var(--darkblue-color); color: var(--white-color);}
.btn-fill01:hover,
.btn-fill01:focus{background: var(--darkblue-active-color); border:1px solid var(--darkblue-active-color);}

.btn-fill02{background: var(--grayblue20-color); border:1px solid var(--grayblue20-color); color: var(--darkblue-color);}
.btn-fill02:hover,
.btn-fill02:focus{background: #E4E9F1; border:1px solid #E4E9F1;}

.btn-fill03{background: var(--grayblue40-color); border:1px solid var(--grayblue40-color); color: var(--white-color);}
.btn-fill03:hover,
.btn-fill03:focus{background: var(--grayblue40-active-color); border:1px solid var(--grayblue40-active-color);}

.btn-fill04{background: var(--lred-color); border:1px solid var(--lred-color); color: var(--white-color);}
.btn-fill04:hover,
.btn-fill04:focus{background: var(--lred-active-color); border:1px solid var(--lred-active-color);}

.btn-fill05{background: #fcef5c; border:1px solid #fcef5c; color: var(--red-color);}
.btn-fill05:hover,
.btn-fill05:focus{background: #f1e455; border:1px solid #f1e455;}

.btn-outline01{background: var(--white-color); border:1px solid var(--darkblue-color); color: var(--darkblue-color);}
.btn-outline01:hover,
.btn-outline01:focus{background: var(--darkblue-color); border:1px solid var(--darkblue-color); color: var(--white-color);}

.btn-outline02{background: var(--white-color); border:1px solid var(--grayblue40-color); color: var(--gray80-color);}
.btn-outline02:hover,
.btn-outline02:focus{border:1px solid var(--darkblue-color); color: var(--darkblue-color);}

.btn-outline03{background: var(--white-color); border:1px solid var(--gray30-color); color: var(--gray60-color);}
.btn-outline03:hover,
.btn-outline03:focus{border:1px solid var(--gray45-color); color: var(--gray80-color);}

.btn-outline04{background: var(--white-color); border:1px solid var(--lred-color); color: var(--lred-color);}
.btn-outline04:hover,
.btn-outline04:focus{border:1px solid var(--lred-active-color); color: var(--lred-active-color);}

.btn-txt01{background: var(--white-color); border:none; color: var(--darkblue-color);}
.btn-txt01:hover,
.btn-txt01:focus{background: var(--grayblue30-color); -webkit-box-shadow:none; box-shadow:none;}

.btn-txt02{background: var(--white-color); border:none; color: var(--black-color);}
.btn-txt02:hover,
.btn-txt02:focus{background: var(--gray20-color); -webkit-box-shadow:none; box-shadow:none;}

.btn-txt03{background: var(--white-color); border:none; color: var(--gray50-color);}
.btn-txt03:hover,
.btn-txt03:focus{background: var(--gray10-color); -webkit-box-shadow:none; box-shadow:none;}

.btn-txt04{background: var(--white-color); border:none; color: var(--lred-color);}
.btn-txt04:hover,
.btn-txt04:focus{background: #fff0ee;-webkit-box-shadow:none; box-shadow:none;}

button.btn-disabled{background: var(--lgray21-color); border:1px solid var(--lgray21-color) ; color: var(--gray40-color); }
button:disabled{/*opacity:0.9;*/ cursor: default; color: var(--gray40-color) !important; background: var(--lgray21-color) !important; border:1px solid var(--lgray21-color) !important; pointer-events: none;}

/* 버튼 사이즈 */
.btn-xl{height:40px; font-size:14px !important; padding:0 12px !important;}
.btn-l{height:32px; font-size:14px !important; padding:0 12px !important;}
.btn-m{height:28px; font-size:14px !important; padding:0 11px !important;}
.btn-s{height:24px; font-size:13px !important; padding:0 10px !important;}
.btn-xs{height:22px; font-size:12px !important; padding:0 8px !important;}
.btn-mini{height:20px; font-size:12px !important; padding:0 8px !important;}

/* 버튼+아이콘 설정*/
.btn-xl > i{font-family: xeicon; font-size:16px; vertical-align:middle; margin-top:-2.2px; margin-right:4px;}
.btn-l > i{font-family: xeicon; font-size:16px; vertical-align:middle; margin-top:-2.2px; margin-right:4px;}
.btn-m > i{font-family: xeicon; font-size:16px; vertical-align:middle; margin-top:-1.6px; margin-right:3px;}
.btn-s > i{font-family: xeicon; font-size:14px; vertical-align:middle; margin-top:-2px; margin-right:3px;}
.btn-xs > i,
.btn-mini > i{font-family: xeicon; font-size:14px; vertical-align:middle; margin-top:-1px; margin-right:2px;}

/* 버튼 underline */
.btn-uline{text-decoration: underline !important; cursor:pointer;}
.btn-uline:link{text-decoration: underline !important;}
.btn-uline:visited{text-decoration: underline !important;}
.btn-uline:hover{text-decoration: underline !important;}
.btn-uline:active{text-decoration: underline !important;}
.btn-uline:focus{text-decoration: underline !important;}
/* 2025.06.23 용도자동추가폰트사이즈*/
.btn-uline.font-small{font-size:12px !important}

/* 버튼 underline2 :24.09.25 추가
.btn-uline2{text-decoration: none !important; cursor:pointer;}
.btn-uline2:link{text-decoration: none !important;}
.btn-uline2:visited{text-decoration: underline !important;}
.btn-uline2:hover{text-decoration: underline !important;}
.btn-uline2:active{text-decoration: none !important;}
.btn-uline2:focus{text-decoration: underline !important;}*/

/* 버튼 underline2 :24.09.25 추가*/
.btn-uline2{text-decoration: none !important; cursor:pointer;}
.btn-uline2:link{text-decoration: none !important; /*border-bottom:1px solid var(--darkblue-color);*/}
.btn-uline2:visited{text-decoration: none !important; }
.btn-uline2:hover{text-decoration: none !important; border-bottom:1px solid var(--darkblue-color);}
.btn-uline2:active{text-decoration: none !important;}
.btn-uline2:focus{text-decoration: none !important; border-bottom:1px solid var(--darkblue-color);}

/* btn-round */
.btn-round-s{border-radius:25px !important;}

/* 상태값 text*/
.status-txt{display:inline-block; min-width:25px; /*height:21px;*/ padding:3px 8px; text-align:center; font-size:12px; border-radius:3px; font-weight:bold;}
.status-type01{background: var(--grayblue30-color); border:1px solid var(--grayblue20-color); color: var(--darkblue-color);}
.status-type02{background:var(--white-color); color:var(--gray50-color); border:1px solid var(--gray30-color);}
.status-type03{background:var(--gray20-color); color:var(--gray50-color);  border:1px solid var(--gray20-color);}
.status-type04{background:var(--white-color); color:var(--red-color);  border:1px solid var(--gray30-color);}
.status-round{border-radius:25px !important;}
table td .status-txt{display:inline-block;min-width:50px; /*height:20px;*/ line-height: 1;padding: 3px 5px;font-size: 11px;border-radius:3px;font-weight:500;} /* 그리드 및 테이블 영역 패딩값 조절*/
.status-warning{background:var(--red-color); color:var(--white-color);  border:1px solid var(--red-color);}
table td .status-txt.status-warning{min-width:40px;}
/* 2024.02.22 추가*/
table th .status-txt{display:inline-block; min-width:50px; height:23px;line-height:20px; padding:0 5px !important; font-size:12px;  border-radius:3px; font-weight:500;} /* 그리드 및 테이블 영역 패딩값 조절*/
.status-warning{background:var(--red-color); color:var(--white-color);  border:1px solid var(--red-color);}
table th .status-txt.status-warning{min-width:40px;}

/* 메뉴권한관리 상태값 추가 .status-type05~.status-type08 */
.status-type05{display:inline-block; width:19px; height:18px; padding:4px 5px 0; margin-right:3px; font-size:11px; border-radius:3px; font-weight:500; background: #05509d; line-height:1; color:var(--white-color); box-sizing:border-box;}
.status-type05:after{content:"총";}
.status-type06{display:inline-block; width:19px; height:18px; padding:4px 5px 0; margin-right:3px; font-size:11px; border-radius:3px; font-weight:500; background: #a769ee; line-height:1;color:var(--white-color); box-sizing:border-box;}
.status-type06:after{content:"관";}
.status-type07{display:inline-block; width:19px; height:18px; padding:4px 5px 0; margin-right:3px; font-size:11px; border-radius:3px; font-weight:500; background: #746af6; line-height:1;color:var(--white-color); box-sizing:border-box;}
.status-type07:after{content:"결";}
.status-type08{display:inline-block; width:19px; height:18px; padding:4px 5px 0; margin-right:3px; font-size:11px; border-radius:3px; font-weight:500; background: #40aadc; line-height:1;color:var(--white-color); box-sizing:border-box;}
.status-type08:after{content:"사";}

/* 데이터수집 방식 상태값 추가 .data-type01~.data-type02 */
.data-type01{display:inline-block; width:19px; height:18px; padding:4px 5px 0; margin-right:3px; font-size:11px; border-radius:3px; font-weight:500; background: #05509d; line-height:1;color:var(--white-color); box-sizing:border-box;}
.data-type01:after{content:"S";}
.data-type02{display:inline-block; width:19px; height:18px; padding:4px 5px 0; margin-right:3px; font-size:11px; border-radius:3px; font-weight:500; background: #40aadc; line-height:1;color:var(--white-color); box-sizing:border-box;}
.data-type02:after{content:"V";}

/* 2024.07.05 사용내역 상태값 추가 (팝업은 버튼으로사용/ 그리드는 상태값으로사용) */
.status-txt2{display:inline-block; min-width:20px; height:20px; padding:3px 4px 0; text-align:center; font-size:11px; border-radius:5px; font-weight:500;}
.status-type09{background: #fff6c0;color: #f24a00;border:1px solid #fff6c0;} /* 변경 25.02.20 색상변경 */
.status-type10{background:#EFF5FF; color:var(--darkblue-active-color);  border:1px solid #EFF5FF;} /* 분할 */
.status-type11{background:var(--gray20-color); color:var(--gray90-color);  border:1px solid var(--gray20-color);} /* 지연버튼 그레이 */
.status-type13{background:/*#f4eeff #fff0ee*/ #ffebe8; color: /*#5324ff*/ #ff2c1a;  border:1px solid #ffebe8;} /* 부분 25.02.20 */
/* 2024.07.17 원화환산 버튼용으로 사용*/
table td .status-type12{background:#ffffff; color:var(--gray90-color);  border:1px solid var(--darkblue-color); padding:0 10px !important;}


/* 버튼영역 아이콘*/
.ico-book{display:inline-block; vertical-align:middle; width:15px; height:15px; background:url(../img/ico_book.png) center/contain no-repeat; background-size:100%;}
.ico-division{display:inline-block; vertical-align:middle; width:15px; height:15px; background:url(../img/ico_write.png) center/contain no-repeat; background-size:100%;}
.ico-delete{display:inline-block; vertical-align:middle; width:18px; height:18px; background:url(../img/ico_delete.svg) center/contain no-repeat; }
.ico-delete2{display:inline-block; vertical-align:middle; width:18px; height:18px; background:url(../img/ico_delete2.svg) center/contain no-repeat; }
.ico-edit{display:inline-block; vertical-align:middle; width:18px; height:18px; background:url(../img/ico_edit.svg) center/contain no-repeat; }
.ico-attach{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach.svg) center/contain no-repeat;} /* 블루색상 첨부파일아이콘*/
.ico-attach2{display:inline-block; vertical-align:middle; width:24px; height:24px; background:url(../img/ico_attach2.svg) center/contain no-repeat;}
.ico-attach3{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach3.svg) center/contain no-repeat;} /* 그레이색상 첨부파일아이콘*/
.ico-attach3-2{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach3.svg) center/contain no-repeat; opacity:0.5;} /* 그레이색상 0.5 첨부파일아이콘*/
.ico-attach4{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach4.svg) center/contain no-repeat;} /* 옐로우색상 첨부파일아이콘*/
.ico-org{display:inline-block; vertical-align:middle; width:24px; height:24px; background:url(../img/ico_org_chart.svg) center/contain no-repeat;}
.ico-update{display:inline-block; vertical-align:middle; width:24px; height:24px; background:url(../img/ico_update.svg) center/contain no-repeat;}
.ico-new{display:inline-block; position:relative; width:13px; height:14px; margin:-3px 2px 0 2px; vertical-align:middle; background: var(--darkblue-color); border-radius:4px 0 4px 0; box-sizing:border-box;}
.ico-new:after{content:"N"; position:absolute; left:3px; top:1px; font-size:9px; font-weight:500; color:#fff; text-align:center; vertical-align:middle;}
/* 2025.06.23 용도 아이콘 추가 */
.ico-auto{display:flex !important;align-items: center;justify-content: center;background:#EFF5FF;width: 20px;height:16px;border-radius:4px;padding:0 1px;color: var(--darkblue-color);font-size: 9px !important;cursor:default;margin: 0 0 0 2px !important;font-weight: 500;}


/* 첨부파일 아이콘*/
.ico-zip{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach_zip.svg) center/contain no-repeat;} 
.ico-file{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach_file.svg) center/contain no-repeat;} 
.ico-photo{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach_photo.svg) center/contain no-repeat;} 
.ico-mp3{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach_mp3.svg) center/contain no-repeat;} 
.ico-vod{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(../img/ico_attach_vod.svg) center/contain no-repeat;} 

/* icon 버튼 -icon만 있는 경우*/
.icon-btn{min-width:28px; padding:0 2px !important; vertical-align:middle;}
.icon-btn i{margin-top:0;margin-right:0; vertical-align:middle; font-size:18px; font-family: xeicon;}

.icon-btn2{ padding:0 1px !important; vertical-align:middle;}
.icon-btn2 i{margin-top:0;margin-right:0; vertical-align:middle; font-size:14px; font-family: xeicon;}

.icon-btn3{ padding:0 1px !important; vertical-align:middle; width:20px;height:18px;line-height:1;}
.icon-btn3 i{margin-top:0;margin-right:0; vertical-align:middle; font-size:14px; font-family: xeicon;}

/* 2024.06.18 비활성화일때 아이콘 투명도*/
.icon-btn[disabled="disabled"] > i{ opacity:0.5;}

/* 버튼 정렬 */
.both-con-box{position:relative; width:100%; margin:12px 0 10px 0; text-align:center;}
.both-con-box:after{content:""; clear:both; display:block;}
.both-con-box .left-con{float:left;}
.both-con-box .right-con{float:right;}
.both-con-box .left-con button{margin-left:0;}
.both-con-box .right-con button{margin-right:0;}
.both-con-box .left-con button,
.both-con-box .right-con button,
.both-con-box .centerbtn button,
.both-con-box .center-con button{margin-left:1px; margin-right:1px; }
.both-con-box .centerbtn button{min-width:75px;}
.both-con-box button{min-width:70px;}
.both-con-box .right-con-ab{position: absolute;right: 0;top: 0;width: 25%;text-align: right;} /* 24.03.27 추가*/
.both-con-box .left-con-ab{position: absolute;left: 0;top: 0;width: 25%;text-align: left;} /* 24.04.16 추가*/

/* 서브타이틀+버튼 */
.both-con-box .stitle-txt{position:relative;display:inline-block; padding:3px 5px 0 12px; vertical-align:middle; font-size:16px; color: var(--black-color); font-weight:bold; }
.both-con-box .stitle-txt:before{ content:""; position:absolute; top:5px; left:0; width:10px; height:10px; background: url(../img/ico_arrow_bold_right.png) center no-repeat; background-size:58%;}
.both-con-box .explain-txt{display:inline-block; font-size:13px;}
.both-con-box .bar:before{content:"│"; color: var(--gray40-color); padding-right:5px;}
/* sub-title - fontsize14*/
.both-con-box .xstitle-txt{position:relative;display:inline-block; padding:3px 5px 0 12px; vertical-align:middle; font-size:14px; color: var(--black-color); font-weight:bold; }
.both-con-box .xstitle-txt:before{ content:""; position:absolute; top:5px; left:0; width:10px; height:10px; background: url(../img/ico_arrow_bold_right.png) center no-repeat; background-size:50%;}

/* 2024.06.19 버튼 정렬 박스 (사용내역 상세-관리자)배경색 추가*/
.light-blue-rbox{margin:24px 0; background:#EFF5FF; padding:16px 20px 16px; }


/* shadow-none */
.boxshadow-on{box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.03);}
.boxshadow-none{box-shadow: none;}

/*  table list 라인정렬 */
.list-line{position:relative; font-size:13px;}

/* grid-wrap */
.grid-wrap{position:relative;}


/* **********************
	* 페이징
********************** */
/* 좌우버튼+페이징*/
.paging-wrap{position:relative;}
.paging-wrap .paging{width:70%;}
.paging-wrap .left-btn-wrap{position:absolute; left:0; top:0; width:20%; text-align:left;}
.paging-wrap .right-btn-wrap{position:absolute; right:0; top:0; width:20%; text-align:right;}

.paging-wrap .left-btn-wrap button,
.paging-wrap .right-btn-wrap button{min-width:70px;}

.popup-conts .paging-wrap .paging{width:80%;} /* 24.03.27 추가*/

/* 페이징 - 2024.02.23 수정 */
.paging {text-align:center;margin:12px auto;}
.paging a.first,
.paging a.prev,
.paging a.next,
.paging a.last { overflow:hidden; text-indent:-3000px;}
.paging a.first:hover,
.paging a.prev:hover,
.paging a.next:hover,
.paging a.last:hover {background-color: var(--grayblue20-color);}
.paging a.first {background:url(../img/btn_arrow_first.png) center no-repeat; background-size:24px 24px;}
.paging a.prev {background:url(../img/btn_arrow_prev.png) center no-repeat; background-size:24px 24px;}
.paging a.next {background:url(../img/btn_arrow_next.png) center no-repeat;background-size:24px 24px;}
.paging a.last {background:url(../img/btn_arrow_last.png) center no-repeat; background-size:24px 24px;}
.paging a{ display:inline-block; margin:0 1px; min-width:24px; height:24px; /*line-height:21px;*/ padding:2px 5px; text-align:center; /*border:1px solid #fff;*/ color:#666; font-size:13px; font-weight:400; vertical-align:middle; border-radius:5px;box-sizing:border-box;}
.paging a:visited{color:#666;}
.paging a:hover{background-color: var(--grayblue20-color); color:var(--darkblue-color);}
.paging a.on {border:1px solid var(--darkblue-color); background-color:var(--darkblue-color); color:#fff;}

.paging .paging-txt{display:inline-block; margin:0 10px;}
.paging .paging-txt .num{width:40px; text-align:center;}
.paging .paging-txt em{margin:0 4px;}
.paging .paging-txt input.num::placeholder{color: rgba(0,0,0,1);}
.paging select{margin-left:12px;}


/* **********************
	* modal 팝업
********************** */
.modal-popup-area{display:none; overflow-y:auto; overflow-x:auto; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:30000; background:#000; background:rgba(0,0,0,0.55);}
.modal-popup-area .modal-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-popup-area .modal-pop-inner .modal-inner-box{position:relative;display:table-cell;vertical-align:middle; padding:24px;}
.modal-popup-area .modal-pop-inner .modal-inner-box .modal-conts{width:100%; /*min-width: 640px;*/ max-width:640px; min-height:190px; margin:0 auto; padding:0; background:#fff; border-radius:10px; box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.35); box-sizing:border-box; }

/* popup header */
.popup-header {position:relative; width:100%; padding:0; text-align:center;}
.popup-header .layer-close-btn{position: absolute; right:16px; top:16px; width:24px; height:24px; background:url(../img/btn_close.png) center/contain; cursor:pointer;}
.popup-header .poptitle{position:relative; height:50px; margin:0;padding:18px 0 0px 24px; text-align:left; /*border-bottom:1px solid #E5ECF1;*/ color: var(--black-color); box-sizing:border-box;}
.popup-header .poptitle span{position:relative; display:inline-block; font-size:18px; font-weight:700; padding-left:13px; line-height:1;}
.popup-header .poptitle span:before{content:""; width:5px; height:21px; position:absolute; top:-2px; left:0; background: url(../img/ico_titlebar_l.png) no-repeat;}

/* popup header02 */
.popup-header02 {position:relative; width:100%; padding:10px 0 0 0; text-align:center; /*background:#f2f2f2; border-radius:10px 10px 0 0;*/}
.popup-header02 .layer-close-btn{position: absolute; right:16px; top:16px; width:24px; height:24px; background:url(../img/btn_close.png) center/contain; cursor:pointer;}
.popup-header02 .poptitle{position:relative; margin:0 0 0 0 ; /*border-bottom:1px solid #E5ECF1;*/  padding:12px 0 0 0; font-size:18px; font-weight:bold; vertical-align:middle; color:#000; line-height:1;}

/* popup header-s */
.popup-header-s {position:relative; width:100%; padding:0; text-align:center;}
.popup-header-s .layer-close-btn{position: absolute; right:16px; top:13px; width:24px; height:24px; background:url(../img/btn_close.png) center/contain; cursor:pointer;}
.popup-header-s .poptitle{position:relative; height:42px; margin:0;padding:16px 0 4px 24px; text-align:left;/* border-bottom:1px solid #E5ECF1;*/ color: var(--black-color); box-sizing:border-box;}
.popup-header-s .poptitle span{position:relative; display:inline-block; font-size:16px; font-weight:700; padding-left:13px; line-height:1;}
.popup-header-s .poptitle span:before{content:""; width:5px; height:16px; position:absolute; top:0; left:0; background: url(../img/ico_titlebar_s.png) no-repeat;}

/* popup header */
.popup-header03 {position:relative; width:100%; padding:0; text-align:center;}
.popup-header03 .layer-close-btn{position: absolute; right:16px; top:16px; width:24px; height:24px; background:url(../img/btn_close_white.png) center/contain; cursor:pointer;}
.popup-header03 .poptitle{position:relative; height:50px; margin:0;padding:18px 0 0px 24px; text-align:left;/* border-bottom:1px solid #E5ECF1;*/ color: var(--white-color); background: var(--darkblue-color); box-sizing:border-box;}
.popup-header03 .poptitle span{position:relative; display:inline-block; font-size:18px; font-weight:700; padding-left:13px; line-height:1;}
.popup-header03 .poptitle span:before{content:""; width:5px; height:21px; position:absolute; top:-2px; left:0; background: url(../img/ico_titlebar_l_light.png) no-repeat;}


/* popup con */
.popup-conts{position:relative; margin:0 auto; font-size:14px; padding:6px 20px 16px; text-align:left; box-sizing:border-box;}
.popup-footer{position:relative; width:100%; padding:0 20px 0 20px; text-align:center; box-sizing:border-box;}
/* 팝업 사이즈 */
.modal-conts.w400px{/* min-width: 400px !important;*/ max-width:400px !important;}
.modal-conts.w460px{/* min-width: 460px !important;*/ max-width:460px !important;}
.modal-conts.w500px{/* min-width: 540px !important;*/ max-width:500px !important;}
.modal-conts.w540px{/* min-width: 540px !important;*/ max-width:540px !important;}
.modal-conts.w700px{/* min-width: 700px !important;*/ max-width:700px !important;}
.modal-conts.w800px{/* min-width: 800px !important;*/ max-width:800px !important;}
.modal-conts.w870px{/* min-width: 870px !important;*/ max-width:870px !important;}
.modal-conts.w1000px{/* min-width: 1000px !important;*/ max-width:1000px !important;}
.modal-conts.w1100px{/*min-width: 1100px !important;*/ max-width:1100px !important;}
.modal-conts.w1160px{/* min-width: 1160px !important;*/ max-width:1160px !important;}
.modal-conts.w1200px{ /*min-width: 1366px !important;*/ max-width:1200px !important;} /* 24.10.30 추가*/
.modal-conts.w1260px{ /*min-width: 1260px !important;*/ max-width:1260px !important;} /* 24.12.10 추가*/
.modal-conts.w1366px{ /*min-width: 1366px !important;*/ max-width:1366px !important;}
.modal-conts.w1600px{min-width: 1366px !important;max-width:1600px !important;} /* 25.07.02 추가*/
.modal-conts.w100per{min-width: 100% !important; max-width:100% !important;}

.modal-conts.allmenu{/* min-width: 800px !important;*/ max-width:960px !important; height:auto;}
.modal-conts.allmenu .popup-conts{ padding:20px 32px 48px 32px}

/* 레이어팝업 */
.layerpop-area{display:none; position:absolute; top:0px; left:0; width:100%;width:300px; min-height:100px; margin:0 auto; padding:0; background-color:#fff !important; border-radius:10px; box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.35); box-sizing:border-box;z-index:19000; }

/* 2024.01.12 모달팝업 타이틀 옆 텍스트 추가 */
.modal-popup-area .explain-txt{display:inline-block; font-size:14px;}
.modal-popup-area .bar:before{content:"│"; color: var(--gray40-color); padding-right:5px; background:none;}


/* (비회원) 메인 약관/개인정보보방침 팝업 반응형 */
.responsive-pop .modal-conts{max-width: 1000px !important; min-width:auto !important;}

@media all and ( max-width: 800px ){
	/* (비회원) 메인 약관/개인정보보방침 팝업 반응형 */
	.responsive-pop .modal-pop-inner .modal-inner-box {padding:0;}
	.responsive-pop .modal-conts{width:100% !important; height:100% !important; max-height:100vh;  border-radius:0 !important; box-shadow:none;}
	.modal-popup-area.responsive-pop .popup-conts{position: relative; max-height:100vh; overflow-x: hidden; overflow-y: hidden; padding:20px 0px;}
	.responsive-pop .join-policy-box01{ height:100vh !important; max-height: calc(100vh - 200px); padding:16px 20px 50px 20px;}
}