@charset "utf-8";
/*
*   name : uxis default
*   date : 2021.07.07 
*	사이트에 맞게 필요없는 항목부터 지운 뒤 변경해서 사용 요망.
*/

/* 스킵네비게이션 */
#skipNavi {height:0;}
#skipNavi .skipLink {position:absolute;top:-1000px;left:-1000px;overflow:hidden;z-index:5000;}
#skipNavi .skipLink:focus, #skipNavi .skipLink:active {top:0;left:0;padding:10px 20px;background:#1e64ba;color:#fff;}

/* color */
:root{--point-c:#3350ce;} 
:root{--point-c1:#ff6000;} 
:root{--point-c2:#666666;} 
:root{--state-save:#42ad49;}
:root{--state-aging:#aaa;}

/* button */
.btn {border:none;cursor:pointer;line-height:normal;text-align:center;transition:all 0.3s; max-width:100%;display: inline-flex;align-items: center;justify-content: center;}
.btn span {display:inline-block;position:relative;transition:color .3s;font-weight:500;max-width:100%;line-height:140%; font-size:1.5rem;}
.btn.noclick {cursor:default;}


/* 버튼 크기 */
.btn.sizeB {min-height:6rem;padding:1rem 2rem;font-size:1.6rem;}
.btn.sizeM {min-height:5.2rem;padding:1rem 2rem;font-size:1.6rem;}
.btn.sizeMS {min-height:5rem;padding:0rem 2rem;font-size:1.6rem;}
.btn.sizeS{min-width: 10rem; min-height:4.2rem;padding:0.6rem 1rem;}
.btn.sizeSS{min-height:3.4rem;padding:0.6rem 1.6rem;border-radius: 4px;}
.btn.sizeRSS{min-height:3.4rem;padding:0.6rem 1.6rem; border-radius: 30px;}
.btn.sizeSSS{min-height:3rem;padding:0.2rem 1.2rem;border-radius: 4px;}
.btn.sizePS{min-width: 7rem; min-height: 3.2rem; padding: 0.5rem 1rem}
.btn.sizePS span{font-size:1.4rem;}


/* 버튼 색상*/
.btn.point {background:var(--point-c);border:1px solid var(--point-c);}
.btn.point span {color:#fff;}
.btn.point_l {background:#fff;border:1px solid var(--point-c);}
.btn.point_l span {color:var(--point-c);;}
.btn.black {background:#222;border:1px solid #222;}
.btn.black span {color:#fff;}
.btn.lblue {background:#769ddc;border:1px solid #769ddc;}
.btn.lblue span {color:#fff;}
.btn.gray {background:#7c7f83;border:1px solid #7c7f83;}
.btn.gray span {color:#fff;}
.btn.green {background:#37983d;border:1px solid #37983d;}
.btn.green span {color:#fff;}
.btn.lgray {background:#ddd;border:1px solid #ddd;}
.btn.lgray span {color:#999;}
.btn.red {background:#f62f2f;border:1px solid #f62f2f;}
.btn.red span {color:#fff;}

/* 버튼 아이콘*/
.btn.write span {padding-left:30px;}
.btn.write span:before {content:"";position:absolute;top:50%;left:0;margin-top:-10px;display:block;width:20px;height:20px;background:url(../img/default/btn_write.svg) no-repeat center center;}
.btn.message span {padding-left:30px;}
.btn.message span:before {content:"";position:absolute;top:50%;left:0;margin-top:-10px;display:block;width:20px;height:20px;background:url(../img/default/btn_message.svg) no-repeat center center;}


/* info-ex */
.info_ex {text-indent:-20px;padding-left:20px;}
.info_ex:before {content:url(../img/default/info_ex.svg);display:inline-block;margin-right:6px;vertical-align:middle;text-indent:0;}
.info_ex .txt {vertical-align: 0.1rem; font-size: 1.6rem; line-height: 140%; color: #999;}
.info_ex .txt i {font-style:normal;font-size:1.6rem;}

/* 필수입력 */
.nec {margin-left:5px;}
.nec:before {content:"*";color:#f62f2f;font-size:1.6rem;font-weight:600;}

/* pointcolor */
.point_red{color:#f62f2f;}
.point_blue{color:#0044b4; font-weight: 600;}
.point_yellow{color:#f4991f; font-weight: 600;}

/* input */
select {color: #666; padding:1rem;padding-right:3.5rem !important; border: 1px solid #ddd; border-radius:4px;}
input {padding:1rem; border: 1px solid #ddd; border-radius:4px;}
input:not([type=checkbox]):not([type=radio]):disabled,
input:not([type=checkbox]):not([type=radio]):read-only {background:#f4f4f4;}
input::placeholder{color:#999;}
input:not([type=checkbox]):not([type=radio]) {padding:10px;border:1px solid #ddd;border-radius:3px;}
input[type="file"]{position: absolute; width: 0px;height: 0px; padding: 0;overflow: hidden; border: none;}

/* texterea */
textarea {width: 100%; border: 1px solid #ddd; border-radius: 4px;  padding: 1.5rem; resize: none;}
textarea::placeholder{color:#999;}

/* checkbox */
input[type="checkbox"] {appearance:checkbox}
.chkBox {display:inline-block;min-height:17px;padding-left:17px;color:#555;position:relative;}
.chkBox > label {font-size:0 !important;}
.chkBox input {display:inline;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;color:inherit;-webkit-border-radius:0;outline-style:none;margin:0;padding:0;border:0;width:1px;height:1px;overflow:hidden;font-size:0 !important;line-height:0;}
.chkBox .box {display:block;position:absolute;top:0;left:0;width: 18px; height: 18px; cursor: pointer; background: url('../img/default/ico_chk_s.svg') no-repeat left center;font-size:0;}
.chkBox .labelTxt {font-size:1.6rem;display:inline-block;padding:0px 0.5rem 0;cursor: pointer; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s;vertical-align:top;line-height:120%;}
.chkBox input:checked ~ .box {background-position:-20px center;}
.chkBox input:disabled ~ .box {background-position:-57px center;}
.chkBox input:checked:disabled ~ .box {background-position:right center;}
/* .chkBox input:focus ~ .box {background-position:-38px center;} */
.chkBox input:focus:checked ~ .box {background-position:-20px center;}

/* radio */
input[type="radio"] {appearance:radio}
.radioBox {display:inline-block;min-height:17px;padding-left:17px;color:#555;position:relative;}
.radioBox > label {font-size:0 !important;}
.radioBox input {display:inline;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;color:inherit;-webkit-border-radius:0;outline-style:none;margin:0;padding:0;border:0;width:1px;height:1px;overflow:hidden;font-size:0 !important;line-height:0;}
.radioBox .box {display:block;position:absolute;top:0;left:0;width: 18px; height: 18px; cursor: pointer; background: url('../img/default/ico_chk.svg') no-repeat left center;font-size:0;}
.radioBox .labelTxt {font-size:1.6rem;display:inline-block;padding:0px 0.5rem 0;cursor: pointer; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s;vertical-align:top;line-height:120%;}
.radioBox input:checked ~ .box {background-position:-19px center;}
.radioBox input:disabled ~ .box {background-position:-57px center;}
.radioBox input:checked:disabled ~ .box {background-position:right center;}
.radioBox input:focus ~ .box {background-position:-38px center;}
.radioBox input:focus:checked ~ .box {background-position:-19px center;}

/* datepicker custom */
.datepicker{background: #fff url(../img/default/ico_datepicer.svg) no-repeat right 1.5rem center / 2rem;}

#ui-datepicker-div {box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); border:none; padding:0px; border-radius:5px; width:auto;background:#fff !important;}
.ui-datepicker-title {font-size:16px;}
.ui-datepicker-header {background: #333 !important;border:none !important;border-radius:5px 5px 0 0 !important;padding:12px 12px 0 10px !important;color:#fff !important;}
.ui-datepicker-header select {width:43% !important;font-size:14px !important;background:url(../img/default/ico_select.svg) no-repeat right 10px center rgba(255, 255, 255, 0.2);border:none; vertical-align:middle; height:30px; margin:0 2px !important; color:#fff; border-radius:3px !important; padding:0 20px 0 10px !important;}
.ui-datepicker-header select option {color:#333;}
.ui-datepicker-month {color:#fff; margin-left:5px; vertical-align:middle;}
.ui-datepicker-calendar thead {background:#333; color:#fff;}
.ui-datepicker-calendar thead th {padding:12px; color:rgba(255, 255, 255, 0.8);font-size:13px !important;}
.ui-datepicker-calendar thead th span {color:rgba(255, 255, 255, 0.8);}
.ui-datepicker-calendar td {text-align:center;}
.ui-datepicker-calendar td a {font-size:15px;width:30px;height:30px;line-height:26px;margin:0 auto;border:none !important; background:none !important; text-align:center !important; color:#333 !important; border-radius:50%;font-weight:bold !important;text-decoration:none !important;}
.ui-datepicker-calendar td.ui-datepicker-current-day a {background:#333 !important; color:#fff !important;}
.ui-datepicker-calendar thead th span {display:block;}
.ui-datepicker-calendar thead th:nth-child(1) {padding-left:12px;}
.ui-datepicker-calendar thead th:nth-child(7) {padding-right:12px;}
.ui-datepicker-calendar tbody tr:first-child td {padding-top:12px;}
.ui-datepicker-calendar tbody tr:last-child td {padding-bottom:5px;}
.ui-datepicker-calendar td:nth-child(7n+1) {padding-left:12px;}
.ui-datepicker-calendar td:nth-child(7n) {padding-right:12px;}
.ui-datepicker-prev {width:auto !important;height:auto !important;top:12px !important;left:7px !important;cursor:pointer;}
.ui-datepicker-next {width:auto !important;height:auto !important;top:12px !important;right:7px !important;cursor:pointer;}
.ui-datepicker-prev span {position:static !important;width:30px;height:30px;margin:0 !important;background:url(../img/default/datepicker_mprev.svg) no-repeat center center !important;transition:all 0.3s;}
.ui-datepicker-next span {position:static !important;width:30px;height:30px;margin:0 !important;background:url(../img/default/datepicker_mnext.svg) no-repeat center center !important;transition:all 0.3s;}

.ui-datepicker-calendar td a:hover,
.ui-datepicker-calendar td a:focus {background:#333 !important;color:#fff !important;}
.ui-datepicker-prev:hover,
.ui-datepicker-prev:focus,
.ui-datepicker-next:hover,
.ui-datepicker-next:focus {background:none !important; border:none !important;}
.ui-datepicker-buttonpane button {border:1px solid #ddd !important;color:#333 !important;font-weight:500 !important;opacity:1 !important;font-family: 'NanumSquare',sans-serif;font-size:1.2rem;}



/* board page */
.board_page  {text-align:center;line-height:110%;display:block;position:relative;height:auto;min-height:38px;padding:50px 0 0px 0;}
.board_page a {display:inline-block;height:38px;min-width:38px;line-height:38px;padding:0 5px;margin:0 1px 5px;border:1px solid #ececec;background:#fff;text-align:center;overflow:hidden;border-radius:3px;font-size:1.5rem;font-weight:500;position:relative;} 
.board_page a.over {background:var(--point-c); border-color:var(--point-c); color:#fff;}
.board_page a.page-first,
.board_page a.page-prev,
.board_page a.page-next,
.board_page a.page-last {background:#f4f4f4;}
.board_page a.page-first:before,
.board_page a.page-prev:before,
.board_page a.page-next:before,
.board_page a.page-last:before {position:absolute;top:50%;left:50%;display:block;height:10px;background:url(../img/layout/paging.svg)no-repeat;}
.board_page a.page-first:before {content:"";width:10px;margin:-5px 0 0 -5px;background-position:left center;}
.board_page a.page-prev:before {content:"";width:6px;margin:-5px 0 0 -2px;background-position:-12px center;}
.board_page a.page-next:before {content:"";width:6px;margin:-5px 0 0 -2px;background-position:-18px center;}
.board_page a.page-last:before {content:"";width:10px;margin:-5px 0 0 -5px;background-position:right center;}


/* layerpop */
.layerpop_wrap {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(34, 34, 34, 0.7);z-index:40;}
.layerpop_tbl {display:table;table-layout:fixed;width:100%;height:100%;}
.layerpop_cell {display:table-cell;vertical-align:middle;}
.layerpop {position:relative;width: 48rem;max-width:calc(100% - 4rem);margin: 3rem auto 0;box-shadow:0 5px 20px rgba(0, 0, 0, 0.2);opacity:0;transition:opacity .3s;}
.layerpop_wrap.open .layerpop {opacity:1;}
.layerpop_scr {max-height:calc(100vh - 120px); overflow:auto;}
.layerpop_scr > .scroll-content {max-height:calc(100vh - 120px) !important;}
.layerpop_scr > .scroll-scrolly_visible > .layerpop_scr_inwrap {padding-right:2rem;}
.layerpop .closebtn{color:#fff;position: absolute;top: -2.5rem;right: 0;padding-left: 2.5rem;}
.layerpop .closebtn:before{content: "";position: absolute;top: 50%;left: 1.3rem;margin: -1px 0 0 -15px;width: 2rem;height: 2px;transform: rotate(45deg);background: #fff;}
.layerpop .closebtn:after{content: "";position: absolute;top: 50%;left: 1.3rem;margin: -1px 0 0 -15px;width: 2rem;height: 2px;transform: rotate(-45deg);background: #fff;}
.layerpop_btn {display:flex;justify-content:center;gap:20px;}
.layerpop_btn .btn {width:200px;}
.layerpop .tabfocus:focus {outline:auto;}
.layerpop .scrCustom .scroll-element .scroll-bar,
.layerpop .scrCustom .scroll-element:hover .scroll-bar {background-color:#888;}
.layerpop_txtBox .popTit{width:100%; padding:2rem; background:#222; color:#fff; font-weight:600;}
.layerpop_txtBox .layerpop_txtItem {max-width:100%;padding: 2rem;;background:#fff;}

.scroll-scrolly_visible .layerpop_textBox {width:calc(100% - 20px);}
.scroll-element,
.scrCustom .scroll-element div {border: none;margin: 0;padding: 0;position: absolute;z-index: 10;}
.scrCustom .scroll-element div {display: block;height: 100%;left: 0;top: 0;width: 100%;}
.scrCustom .scroll-element.scroll-y {height: 100%;right: 0px;top: 0;width: 5px;}
.scrCustom.scroll-element .scroll-element_outer {overflow: hidden;}
.scrCustom .scroll-element .scroll-element_track { background-color: #f4f4f4;border-radius:0px;}
.scrCustom .scroll-element .scroll-bar { background-color: #222;border-radius:0px;}
.scrCustom .scroll-element:hover .scroll-bar { background-color: #222; }
.scrCustom .scroll-element.scroll-draggable .scroll-bar { background-color: #222; }
.scrCustom .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrCustom .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
.scrCustom .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrCustom .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }




	/* hover */
	@media screen and (min-width:1200px){

		/* board page */
		.board_page a:hover,
		.board_page a:focus {border-color:var(--point-black);}
		.board_page a:hover.page-first,
		.board_page a:focus.page-first,
		.board_page a:hover.page-prev,
		.board_page a:focus.page-prev,
		.board_page a:hover.page-next,
		.board_page a:focus.page-next,
		.board_page a:hover.page-last,
		.board_page a:focus.page-last {border-color:var(--point-black);}

	}

   @media screen and (max-width:480px){

	.btn.sizeS{min-width:8rem;}

   }