@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Platform UX. (Weaverloft Corp.)
 * 2. Production Date: 2026-01-15
 * 3. Client: AP
 * 4. Homepage : https://weaverloft.com/
 */

/*========== Import ==========*/
@import url("reset.css");
@import url("layout.css");
@import url("popup.css");
@import url("board.css");
/* 라이브러리 */
@import url("jquery-ui.css");
@import url("jquery.timepicker.min.css");
/*========== Font ==========*/
@import url('../font/pretendard.css');


:root {
    --main-color: #f8f8f8;
	--point-color: #2c60a1;
	--light-point-color: #ebf3fd;
	--bg-color: #f8f8f8;
	--red-color: #ef4444;
	--text-color-2: #202527;
	--text-color-5: #59596C;
    --text-color-8: #8A8A9A;
    --text-color-c: #C7C7C7;
	--border-color-d: #DBDBEA;
    --border-color-e: #E3E3EE;
}
*:has(.laneige),
.laneige { --point-color: #5b87fe; --light-point-color: #ebf3fd;}
*:has(.sulwhasoo),
.sulwhasoo { --point-color: #e86e25; --light-point-color: #fcf5ef;}
*:has(.iope),
.iope { --point-color: #203a80; --light-point-color: #e6eef8;}
*:has(.mamonde),
.mamonde { --point-color: #9b94d9; --light-point-color: #f0eef9;}
*:has(.hera),
.hera { --point-color: #B6985A; --light-point-color: #E3D1C1;}
*:has(.ap),
.ap { --point-color: #707984; --light-point-color: #f5f7f9;}
*:has(.hanyul),
.hanyul { --point-color: #8aa591; --light-point-color: #f4f5ed;}
*:has(.miseenscene),
.miseenscene { --point-color: #fa6b2c; --light-point-color: #f0c6ae;}

/*========== Base ==========*/
html, body{width: 100%; font-size: 1rem; color: #202527; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size-adjust: 100%; overflow-y: auto; }
html, body, * { font-family: 'Pretendard',sans-serif; letter-spacing: -0.025em; -webkit-font-smoothing: antialiased;}
*, *::before, *::after{box-sizing: border-box;}
a {display: inline-block; text-decoration: none;  cursor: pointer; vertical-align: top;}
button {font-size: 1rem; cursor: pointer;}
span {display: inline-block; font-weight: inherit; font-family: inherit; }
input{appearance:none; -webkit-appearance:none; -moz-appearance:none;}
*::placeholder { font-size: inherit; font-weight: 400;}
picture, figure { display: block; box-sizing: border-box; margin: 0; font-size: 0; } 
dd, dt{display: inline-block;}
em, img, figure { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; }
article, aside, details, figcaption, figure, main, footer, header, nav, section, summary { display: block}
audio, canvas, video { display: inline-block }
img {max-width: 100%; height: auto; border: 0; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;}
video, embed, object { max-width: 100% }
.screen-ir { position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);} 
/*========== 사이즈 지정 ==========*/
.w100p { width: 100% !important;}
.w400 { width: 100% !important; max-width: 400px !important;}
.w500 { width: 100% !important; max-width: 500px !important;}
.w600 { width: 100% !important; max-width: 600px !important;}
.w1500 { width: 100% !important; max-width: 1500px !important;}
.mgb10 { margin-bottom: 10px !important;}
.mgb20 { margin-bottom: 20px !important;}
.mgt10 { margin-top: 10px !important;}
.mgt20 { margin-top: 20px !important;}
.mgl10 { margin-left: 10px !important;}
.mgl20 { margin-left: 20px !important;}
.mgr10 { margin-right: 10px !important;}
.mgr20 { margin-right: 20px !important;}
.txt-left { text-align: left !important;}

/*========== Skip 본문으로 바로가기 ==========*/
.skip-nav {display: inline-block;opacity: 0; position: absolute;top: -50px;left: 0;z-index: 500;width: 160px; padding: 10px 20px;background-color: #000;color: #fff;text-decoration: none;font-size: 14px;transition: all 0.3s ease;text-align: center;}
.skip-nav:focus {top: 0;opacity: 1;}

/*========== Button ==========*/
.common-btn { display: inline-block; min-width: 90px; padding: 9px 16px; background: #111; color: #fff; border: 1px solid transparent; border-radius: 3px; font-size: 14px; font-weight: 500; text-align: center; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: 300ms; } 
.common-btn:hover, .common-btn:focus, .common-btn:active { opacity: 0.8; }
.common-btn.small { min-width: 50px; padding: 5px 8px; font-size: 12px; } 
.common-btn span { display: inline-block; background-repeat: no-repeat; background-position: right center; cursor: pointer; } 
.common-btn.disabled { opacity: 0.4; cursor:default; pointer-events: none; } 
.common-btn.disabled span { cursor:default; }

/* color */
.common-btn.gray { background-color: #7d7d7d; color: #fff; }
.common-btn.color { background-color: var(--point-color); color: #fff; }
.common-btn.line { background-color: #fff; border: 1px solid var(--point-color); color: var(--point-color); }
.common-btn.line:hover, .common-btn.line:focus, .common-btn.line:active { background-color: var(--light-point-color); }
.common-btn.blackline { background-color: #fff; border: 1px solid #666; color: #666; }
.common-btn.blackline:hover, .common-btn.blackline:focus, .common-btn.blackline:active { opacity: 1; background-color: rgba(0,0,0,0.05); }
.common-btn.light-green { background-color: #D6F0EB; color: #00766a;}
.common-btn.blue { background-color: #359eff; color: #fff;}
.common-btn.red { background-color: var(--red-color); color: #fff;}
.common-btn.add { width: auto; line-height: 40px; padding: 0 20px; font-size: 16px; border-radius: 30px; background-color: var(--point-color);}
.common-btn.add span { position: relative; padding-left: 1.5em; background-image: url('../img/icon-plus-fff.svg'); background-repeat: no-repeat; background-position: left center; background-size: 1.25em auto;}
.common-btn.light-green:hover, .common-btn.light-green:focus, .common-btn.light-green:active { background-color: #BFE4DB;}
/* icon */
.common-btn.download { display: flex; align-items: center; gap: 4px; padding-block: 7px; }
.common-btn.download::before { content: ''; display: inline-block; width: 18px; height: 18px; background: url("../img/icon-download-fff.svg") no-repeat center / cover;}
.common-btn.download.light-green::before { background-image: url("../img/icon-download.svg")}
.common-btn.excel { display: flex; align-items: center; gap: 4px; padding-block: 7px; }
.common-btn.excel::before { content: ''; display: inline-block; width: 18px; height: 18px; background: url("../img/icon-excel.svg") no-repeat center / cover;}
.common-btn.del { display: flex; align-items: center; gap: 4px; padding-block: 7px; }
.common-btn.del::before { content: ''; display: inline-block; width: 18px; height: 18px; background: url("../img/icon-trash-fff.svg") no-repeat center / cover;}
.common-btn.plus { display: flex; align-items: center; gap: 4px; padding-block: 7px; }
.common-btn.plus::before { content: ''; display: inline-block; width: 18px; height: 18px; background: url("../img/icon-plus-fff.svg") no-repeat center / cover;}
.common-btn.reset { display: flex; align-items: center; gap: 4px; padding: 6px 13px; color: var(--text-color-8); background-color: #fff;}
.common-btn.reset::before { content: ''; display: block; width: 20px; height: 20px; background: url("../img/icon-reset.svg") no-repeat center / cover;}
.common-btn.reset:hover { color: var(--text-color-5);}
.common-btn.list span { display: flex; align-items: center; justify-content: center; gap: 8px;}
.common-btn.list em { position: relative; display: inline-block; width: 12px; height: 1px; background-color: #fff; }
.common-btn.list em::before,
.common-btn.list em::after { content:''; position: absolute; left: 0; width: 100%; height: 100%; background-color: #fff;}
.common-btn.list em::before { top: -4px;}
.common-btn.list em::after { bottom: -4px;}

/*========== 테이블 상단 검색 영역 ==========*/
.common-table-top{display:flex; align-items: center; justify-content: space-between; margin-top: 20px; margin-bottom: 10px;}
.common-table-top .box{display:flex; gap:20px; align-items: center;}
.common-table-top .box .select-wrap{display:flex; gap:6px;}
.common-table-top .box span.red{color: #db1b37;}

/* 상단 검색 */
.form-wrap{border:1px solid var(--border-color-d); padding: 14px 24px; border-radius:6px; margin-bottom: 20px;}
.form-wrap .form-line{display:flex; gap:40px; margin-bottom: 20px; max-width: 1240px;}
.form-wrap .form-line:last-of-type { margin-bottom: 0;}
.form-wrap.triple .form-line { gap: 20px; max-width: 1400px;}
.form-wrap .item{ display:flex;align-items: center; width: 100%; flex: 1;}
.form-wrap .title-box{font-weight: 500; width: 140px;}
.form-wrap .flex-box{display:flex; gap:10px; align-items: center; width: calc(100% - 140px);}
.form-wrap .search-wrap select { min-width: 130px;}
.form-wrap .datepicker-flex-box{display:flex; gap:10px; align-items: center;}
.form-wrap .item > select,
.form-wrap .item > input { width: calc(100% - 140px);}
.form-wrap .btn-wrap { display:flex; gap:6px; align-items: center; justify-content: flex-end;}
.form-wrap .form-line:has(.btn-wrap) { max-width: 100%;}
.form-wrap .form-line .btn-wrap { flex-shrink: 0;}

/*========== 테이블 ==========*/
tbody td{word-break: break-all !important;}
.common-table-wrap .common-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.common-table-wrap .common-table thead tr { background: var(--bg-color); }
.common-table-wrap .common-table th { vertical-align: middle; padding-block: 11px; border: 1px solid var(--border-color-d); border-left: 0; font-weight: 600; color: var(--text-color-5); }
.common-table-wrap .common-table thead th:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid var(--border-color-d); } 
.common-table-wrap .common-table thead th:last-child { border-radius: 0 6px 6px 0; }
.common-table-wrap .common-table thead th, .common-table-wrap .common-table tbody td { font-size: 15px; vertical-align: middle; }
.common-table-wrap .common-table thead th a{font-weight: 600; color: var(--text-color-5);}
.common-table-wrap .common-table tbody td { padding: 12px; border-bottom: 1px solid var(--border-color-d); text-align: center; }
.common-table-wrap .common-table tbody tr { position: relative; z-index: 1;}
.common-table-wrap .common-table tbody tr td:not(.i-star):first-of-type::before { content:''; position: absolute; left:0; right: 0; bottom: 4px; height: calc(100% - 8px); background-color: #f5f5f5; pointer-events: none; border-radius: 6px; z-index: -1; opacity: 0;}
.common-table-wrap .common-table tbody td a { width: 100%; text-decoration: underline;}
.common-table-wrap .common-table tbody td a span { text-decoration: underline;}
.common-table-wrap .common-table tbody th { border-left: 1px solid var(--border-color-d); border-top: 0; background: var(--bg-color);}
.common-table-wrap .common-table tbody tr:first-child th { border-top: 1px solid var(--border-color-d);}
.common-table-wrap .common-table tbody tr:first-child th:first-child { border-radius: 6px 0 0 0;}
.common-table-wrap .common-table tbody tr:last-child th:first-child { border-radius: 0 0 0 6px;}
.common-table-wrap .common-table:not(:has(thead)) tbody tr:first-of-type td { border-top: 1px solid var(--border-color-d);}
.common-table-wrap .common-table caption:not(.screen-ir) { text-align: left; font-size: 18px; font-weight: 600; color: #111; margin-bottom: 15px; padding-left: 5px;}
.common-table-wrap .common-table .w60 { width: 60px; }
.common-table-wrap .common-table .w80 { width: 80px; }
.common-table-wrap .common-table .w90 { width: 90px; }
.common-table-wrap .common-table .w100 { width: 100px; }
.common-table-wrap .common-table .w120 { width: 120px; }
.common-table-wrap .common-table .w130 { width: 130px; }
.common-table-wrap .common-table .w140 { width: 140px; }
.common-table-wrap .common-table .w150 { width: 150px; }
.common-table-wrap .common-table .w180 { width: 180px; }
.common-table-wrap .common-table .w190 { width: 190px; }
.common-table-wrap .common-table .w200 { width: 200px; }
.common-table-wrap .common-table .w220 { width: 220px; }
.common-table-wrap .common-table .w240 { width: 240px; }
.common-table-wrap .common-table .w260 { width: 260px; }
.common-table-wrap .common-table .w280 { width: 280px; }
.common-table-wrap .common-table .w300 { width: 300px; }
.common-table-wrap .common-table .w330 { width: 330px; }
.common-table-wrap .common-table .w400 { width: 400px; }
@media (hover: hover) {
	.common-table-wrap .common-table tbody td a:hover { color: #004eff;}
}

@media screen and (max-width: 1920px) {
	.common-table-wrap .common-table thead th, .common-table-wrap .common-table tbody td { font-size: clamp(13px,0.78125vw,15px);}
	.common-table-wrap .common-table .w60 { width: clamp(54px,3.1250vw,60px); }
	.common-table-wrap .common-table .w80 { width: clamp(72px,4.1667vw,80px); }
	.common-table-wrap .common-table .w90 { width: clamp(81px,4.6875vw,90px); }
	.common-table-wrap .common-table .w100 { width: clamp(90px,5.2083vw,100px); }
	.common-table-wrap .common-table .w120 { width: clamp(108px,6.25vw,120px); }
	.common-table-wrap .common-table .w130 { width: clamp(117px,6.7708vw,130px); }
	.common-table-wrap .common-table .w140 { width: clamp(126px,7.2917vw,140px); }
	.common-table-wrap .common-table .w150 { width: clamp(135px,7.8125vw,150px); }
	.common-table-wrap .common-table .w180 { width: clamp(162px,9.3750vw,180px); }
	.common-table-wrap .common-table .w190 { width: clamp(171px,9.8958vw,190px); }
	.common-table-wrap .common-table .w200 { width: clamp(180px,10.4167vw,200px); }
	.common-table-wrap .common-table .w220 { width: clamp(198px,11.4583vw,220px); }
	.common-table-wrap .common-table .w240 { width: clamp(216px,12.5vw,240px); }
	.common-table-wrap .common-table .w260 { width: clamp(234px,13.5417vw,260px); }
	.common-table-wrap .common-table .w280 { width: clamp(252px,14.5833vw,280px); }
	.common-table-wrap .common-table .w300 { width: clamp(270px,15.6250vw,300px); }
	.common-table-wrap .common-table .w330 { width: clamp(297px,17.1875vw,330px); }
	.common-table-wrap .common-table .w400 { width: clamp(360px,20.8333vw,400px); }
}

/* 테이블 small */
.common-table-wrap.small .common-table thead th{padding-block: 8px;}
/* 말줄임이 필요할 경우 - 한줄: ellipsis, 두줄: ellipsis2 */
.common-table-wrap .common-table .ellipsis .cell-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.common-table-wrap .common-table .ellipsis2 .cell-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
/* 소팅 */
.table-cell .i-sorting {content: ''; display: inline-block; width: 7px;height: 10px; margin-left:4px; background: url('../img/icon-sorting.svg')no-repeat center; background-size: 7px 10px;}
.table-cell .i-sorting.up{background: url('../img/icon-sorting-up.svg')no-repeat center;}
.table-cell .i-sorting.down{background: url('../img/icon-sorting-down.svg')no-repeat center;}
/* 별점 */
.table-cell.i-star {font-size: 15px; font-weight: 700; color: #202527;}
.table-cell.i-star::before {content: ''; display: inline-block; vertical-align: top; width: 18px; height: 18px; background: url("../img/icon-star.svg")no-repeat center; background-size: 100% 100%;}
/* 테이블 스크롤 */
.scroll-table { overflow-y: auto;}
.scroll-table::-webkit-scrollbar { width: 4px;  border-radius: 6px; } 
.scroll-table::-webkit-scrollbar-thumb { background-color: #BBBBC4; border-radius: 6px; } 
.scroll-table::-webkit-scrollbar-track { background-color: #fff; }
/* rowspan th추가(2개일때) */
.common-table-wrap .common-table thead:has(tr + tr) tr:first-of-type th:last-of-type{border-radius:0 6px 0 0}
.common-table-wrap .common-table thead tr + tr th{border-top:none}
.common-table-wrap .common-table thead tr + tr th:first-of-type{border-radius:0; border-left: none;}
.common-table-wrap .common-table thead tr + tr th:last-of-type{border-radius: 0 0 6px 0;}
/* fix */
.common-table-wrap .common-table tbody tr.fix-tr td:first-of-type::before { background-color: #FFF6E8; pointer-events: none; opacity: 1;}
/* 필수 */
.required span { position: relative;}
.required span::before { content:'*'; position: absolute; top: 50%; left: -5px; font-size: inherit; transform: translate(-100%, -50%); line-height: 1; color: var(--red-color);}
.common-table-wrap .common-table tbody td.table-cell:has(.radio-box-wrap) { font-size: 0;}
.common-table-wrap .common-table tbody td.table-cell .radio-box-wrap { font-size: 15px;}
/*========== 테이블 하단 영역 ==========*/
.common-table-bottom {position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 24px 0 0; } 
.common-table-bottom:has(.table-bt-btn){justify-content: space-between;}
.common-table-bottom:has(.table-bt-btn.center) { justify-content: center; }
.common-table-bottom:has(.table-bt-btn.right) { justify-content: flex-end; }
.common-table-bottom .pager-area { display: flex; gap: 20px; align-items: center;}
.common-table-bottom .pager-area .total-num { display: flex; align-items: center;}
.common-table-bottom .pager-area .total-num li { font-size: 15px; font-weight: 300;}
.common-table-bottom .pager-area .total-num li span { font-weight: 500;}
.common-table-bottom .pager-area .total-num li + li { position: relative; margin-left: 15px; padding-left: 15px;}
.common-table-bottom .pager-area .total-num li + li::before { content:''; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; transform: translateY(-50%); background-color: #999;}
.common-table-bottom:has(.table-bt-btn) .pager-area{position: static;}
.common-table-bottom .table-bt-btn { display: flex; justify-content: center; align-items: center; gap: 6px; }

/*========== Pagination ==========*/
.basic-pagination { display: flex; align-items: center; text-align: center;} 
.basic-pagination-btn { opacity: 1; display: inline-block; width: 8px; height: 18px; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; background-size: 10px 10px; margin: 0 5px; transition: opacity 300ms; } 
.basic-pagination-btn:hover { opacity: 0.6; } 
.basic-pagination-btn-first, .basic-pagination-btn-last { width: 14px; height: 18px; background-size: 12px 10px; } 
.basic-pagination-btn-first { background-image: url("../img/arrow-double-left-b.svg"); } 
.basic-pagination-btn-last { background-image: url("../img/arrow-double-right-b.svg"); } 
.basic-pagination-btn-prev { background-image: url("../img/arrow-left-b.svg"); } 
.basic-pagination-btn-next { background-image: url("../img/arrow-right-b.svg"); } 
.basic-pagination ul { display: inline-block; width: auto; margin: 0 10px; } 
.basic-pagination li { display: inline-block; width: 33px; height: 33px; line-height: 33px; margin: 0 4px; } 
.basic-pagination li button { width: 100%; height: 100%; font-size: 14px; font-weight: 500; color: var(--text-color-5); transition: border-radius 300ms, background-color 300ms, font-weight 300ms, color 300ms, opacity 300ms; } 
.basic-pagination li.act button { border-radius: 5px; background-color: var(--text-color-2); font-weight: 700; color: #fff; } 
.basic-pagination li:hover button { opacity: 0.7; } 
.basic-pagination li.act:hover button { opacity: 0.9; } 

/*========== Common design ==========*/
/*========== base ==========*/
/* input */
input { width: 100%; padding: 4px 8px; height: 35px; background-color: #fff; border: 1px solid var(--border-color-d); border-radius: 3px; font-size: 14px; font-weight: 500; color: var(--text-color-2); letter-spacing: -0.06em; box-sizing: border-box; } 
input::placeholder { font-size: 14px; font-weight: 500; color: #ccc; letter-spacing: -0.06em; } 
input:focus-visible { outline: none; background-color: #fff; border: 1px solid var(--point-color); } 
input[type="text"]::-ms-clear { display: none; } 
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 
input[type=number] { text-align: right; -moz-appearance: textfield; appearance: textfield; } 
input[type=number]::placeholder { text-align: left; } 
input[name=number] {font-weight: 400;color:#333; letter-spacing: 0; text-align: right; }
input.integerNum {font-weight: 400;color:#333; letter-spacing: 0; text-align: right; }
input.decimalNum { font-weight: 400; color:#333; letter-spacing: 0; text-align: right; }
input[name=number]::placeholder { text-align: left; } 
input[type=file] { height: 24px !important; } 
input[type=hidden]{width: 0;}
/* % inputbox percent */
.input-box.percent { display: flex; flex-flow: row nowrap; align-items: baseline; } 
.input-box.percent span { margin-left: 2px; } 
input.percent { padding: 4px; letter-spacing: 0; text-align: right; } 
input:disabled, input.disabled { background-color: #f2f2f2; cursor: default;} 
input[name=number]:disabled, input[name=number].disabled {color:#666; } 
input.was-validated{ border: 1px solid #f93d5c; } 
input[readonly] { border: 0; text-align: center; background: transparent; }

/* password open */
.open-password{position: absolute; top: 50%; right: 0; width: 34px; height: 34px; background: url("../img/icon-password-on.svg") 50% 50% / 20px no-repeat; transform: translateY(-50%); opacity: 0.6;}
.open-password.on{background-image: url("../img/icon-password-off.svg");}
/* Checkbox */
input[type="checkbox"] + label { cursor: pointer; } 
.checkbox-wrap input[type="checkbox"] { display: none; } 
.checkbox-wrap input[type="checkbox"] + label { display: inline-block; width: auto; height: auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; background: transparent !important; } 
.checkbox-wrap input[type="checkbox"] + label:hover { opacity: 0.8; } 
.checkbox-wrap input[type="checkbox"] + label::before { content: ''; display: inline-block; width: 16px; height: 16px; margin: 0 8px 0 0; border: 1px solid #a5a9ba; border-radius: 2px; box-sizing: border-box; vertical-align: middle; transform: translateY(-1px); cursor: pointer; background: #fff; } 
.checkbox-wrap input[type="checkbox"]:disabled + label::before { pointer-events: none; } 
.checkbox-wrap input[type="checkbox"]:checked + label::before { border: none; background-color: var(--point-color); background-image: url("../img/icon-chk-on.svg"); background-repeat: no-repeat; background-position: center center; background-size: cover; cursor: pointer; } 
.checkbox-wrap.disabled input[type="checkbox"] + label { opacity: 0.6; cursor: default; pointer-events: none; } 
.checkbox-wrap.disabled input[type="checkbox"] + label:hover { opacity: 0.6; cursor: default; } 
.checkbox-wrap input[type="checkbox"]:disabled + label { opacity: 0.6; cursor: default; } 
.checkbox-wrap input[type="checkbox"].was-validated + label::before { border: 1px solid #f93d5c; } 
/* Radio */
.basic-radio-box { display: inline-block; margin-right: 12px; } 
.basic-radio-box:last-child { margin: 0; } 
.basic-radio-box input[type="radio"] { display:none; } 
.basic-radio-box input[type="radio"] + label { display: inline-block; margin: 0 auto; vertical-align: middle; position: relative; cursor: pointer; box-sizing: border-box; } 
.basic-radio-box input[type="radio"] + label span { padding: 0 0 0 24px; } 
.basic-radio-box.table input[type="radio"] + label span { padding: 0 0 0 16px; } 
.basic-radio-box input[type="radio"] + label::before { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width:16px; height:16px; background-color: #fff; border:1px solid #a1a5b7; border-radius: 50%; transform: translate(0, -50%); box-sizing: border-box; } 
.basic-radio-box input[type="radio"] + label::after { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width:10px; height:10px; transform: translate(50%, -50%); box-sizing: border-box; } 
.basic-radio-box input[type="radio"]:checked + label::before { width: 16px; height: 16px; border: 1px solid var(--point-color); border-radius:50%; vertical-align:middle; } 
.basic-radio-box input[type="radio"]:checked + label::after { width: 8px; height: 8px; background-color: var(--point-color); border: 1px solid var(--point-color); border-radius:50%; vertical-align:middle; } 
.basic-radio-box.disabled { pointer-events: none; } 
.basic-radio-box.disabled input[type="radio"] + label::before { background-color: #f2f2f2; border: 1px solid #bbb; } 
.basic-radio-box.disabled input[type="radio"]:checked + label::after, .basic-radio-box.disabled input[type="radio"][checked] + label::after { background-color: #bbb; border: 1px solid #bbb; } 
.basic-radio-box input[type="radio"]:disabled + label::before { background-color: #f2f2f2; border: 1px solid #bbb; } 
.basic-radio-box input[type="radio"]:checked:disabled + label::after, .basic-radio-box input[type="radio"][checked]:disabled + label::after { background-color: #bbb; border: 1px solid #bbb; } 
.basic-radio-box input[type="radio"].was-validated + label::before { border: 1px solid #f93d5c; } 
/*========== Select ==========*/
select { min-width: 70px; padding: 10px 26px 10px 8px; border: 1px solid var(--border-color-d); border-radius: 3px; background-image: url("/amospro/asset/images/select-arrow-g.svg"); background-repeat: no-repeat; background-position: calc(100% - 9px) center; background-size: 10px 10px; font-size: 13px; color: var(--text-color-2); line-height: 1; box-sizing: border-box; } 
select:focus-visible { outline: none; border: 1px solid var(--point-color); }
select.disabled, select:disabled {background-color: #f2f2f2;opacity:1; cursor: default; } 
select.was-validated { border: 1px solid #f93d5c; }  
/* textarea */
.textarea-box { font-size: 0;}
textarea { width: 100%; height: 120px; padding:8px; border: 1px solid var(--border-color-d); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; box-sizing:border-box; } 
textarea::placeholder { color: #ccc; } 
textarea:focus-visible { border: 1px solid var(--point-color); } 
textarea::-webkit-scrollbar { width: 6px; background-color: #ccc; } 
textarea::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 6px; } 
textarea::-webkit-scrollbar-track { background-color: #fff; } 
textarea.disabled { background-color: #f2f2f2; cursor: default; /*pointer-events: none;*/ }
/* search-box */
.search-box:not(.view) { position: relative; width: 100%; height: 26px; padding: 0 0 0 20px; background-color: #fff; border:1px solid #ccc; border-radius: 3px; box-sizing: border-box; } 
.search-box label { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; background-image: url("../img/icon-search.svg"); background-repeat: no-repeat; background-size: 14px 14px; background-position: 6px center; cursor: pointer; } 
.search-box input[type="search"] { width: 100%; height:24px; padding: 2px; background-color: #fff; border-color: #fff; text-overflow: ellipsis; } 
.search-box.disabled { background-color: #f2f2f2; pointer-events: none; } 
.search-box.disabled input[type="search"] { background-color: #f2f2f2; border-color: #f2f2f2; } 
.search-box.was-validated { border: 1px solid #f93d5c; } 

/*========== Datepicker ==========*/
.datepicker-box-wrap { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 8px; } 
.input-box.datepicker-box { width: 100%; } 
.input-box.datepicker-box input { background-repeat: no-repeat; background-position: calc(100% - 12px) center; background-size: 14px auto; background-image: url("/amospro/asset/images/icon-datepicker.svg"); cursor: pointer; } 
.datepicker-box-wrap.white input { padding: 15px; background-color: #fff; border: 1px solid #ccc; border-radius: 2px; } 
.ui-datepicker * { font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important; } 
.ui-datepicker { display: none; width: 300px !important; background-color: #fff; border-radius: 10px; margin-top: 10px; margin-left: 0px; margin-right: 0px; padding: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); } 
.ui-widget.ui-widget-content { z-index: 20001 !important; border: none; } 
.ui-timepicker-standard { z-index: 20001 !important; } 
.ui-widget-header { border: 0px solid #dddddd; background: #fff; } 
.ui-datepicker .ui-datepicker-header { position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--box-round-radius); padding: 6px; margin: 0; background-color: var(--bg-color); border-radius: 28px; } 
.ui-helper-clearfix:before, .ui-helper-clearfix:after { display: none; } 
.ui-datepicker .ui-datepicker-title { order: 1; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(100% - 64px); margin: 0 0em; line-height: 1; text-align: center; font-size: 17px; padding: 0px; font-weight: 700; font-variation-settings: 'wght' 700; color: #111; } 
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year, .ui-datepicker-title .ui-datepicker-month { width:auto; min-width: unset; padding: 0; border-radius: 0; border: none; background: none; font-size: 17px; font-weight: 700 !important; font-variation-settings: 'wght' 700 !important; text-align: center; color: #000; } 
.ui-datepicker select.ui-datepicker-month:focus, .ui-datepicker select.ui-datepicker-year:focus { border: none; } 
.ui-datepicker select.ui-datepicker-year::-webkit-scrollbar { width: 4px; background-color: #f5f5f5; border-radius: 6px; } 
.ui-datepicker select.ui-datepicker-year::-webkit-scrollbar-thumb { background-color: var(--blue-color); border-radius: 6px; } 
.ui-datepicker select.ui-datepicker-year::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: 6px; } 
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; float: unset; width: 36px; height: 36px; padding: 4px; border-radius: 50%; border: 1px solid #fff; background-color: #fff; transition: border-color 400ms; cursor: pointer; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); } 
.ui-datepicker .ui-datepicker-prev { left: 6px; } 
.ui-datepicker .ui-datepicker-next { right: 6px; } 
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { position: static; display: block; width: 100%; height: 100%; margin: 0; background-position: center center !important; background-size: 24px auto !important; background-repeat: no-repeat; background-image: url("../img/icon-arrow-next.svg"); text-indent: -9999px; } 
.ui-datepicker .ui-datepicker-prev span { background-image: url('../img/icon-arrow-left.svg'); } 
.ui-datepicker .ui-datepicker-next span { background-image: url("../img/icon-arrow-right.svg"); } 
.ui-datepicker-calendar>thead>tr>th:first-child, .ui-datepicker-calendar>thead>tr>th:last-child, .ui-datepicker-calendar>thead>tr>th { font-size: 1rem !important; font-weight: 600 !important; font-variation-settings: 'wght' 600 !important; color: #000 !important; } 
.ui-datepicker-calendar>thead>tr>th> span { font-weight: 600 !important; font-variation-settings: 'wght' 600 !important; } 
.ui-datepicker-calendar>tbody>tr>td { padding: 0; font-size: 15px !important; text-align: center; } 
.ui-datepicker-calendar>tbody>tr:first-child>td { padding-top: 10px; } 
.ui-datepicker-calendar>tbody>tr>td>a, .ui-datepicker-calendar>tbody>tr>td:first-child a, .ui-datepicker-calendar>tbody>tr>td:last-child a { display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 15px !important; font-weight: 500 !important; font-variation-settings: 'wght' 500 !important; color: #000; } 
.ui-state-default.ui-state-active { background-color: #111 !important; color: #fff !important; } 
.ui-datepicker-calendar>tbody>tr>td:first-child a.ui-state-default.ui-state-active { background-color: #111 !important; color: #fff !important; } 
.ui-state-disabled, .ui-state-disabled .ui-state-default { color: #bbb !important; } 
.month-picker-grid { display: flex; flex-wrap: wrap; gap: 10px; } 
.month-picker-grid > .month-item { width: calc(100% / 3 - 10px); padding: 8px 12px; border: 1px solid var(--label-gray); border-radius: var(--check-radius); background-color: #fff; color: #666; text-align: center; cursor: pointer; transition: border 400ms, background-color 400ms, color 400ms; font-weight: 500; font-variation-settings: 'wght' 500; } 
.month-picker-grid > .month-item:hover { border-color: var(--main-point-color); background-color: #F5F5F7; color: #111; } 
.ui-datepicker-today .ui-state-default { display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: #fff !important; border: 2px solid #333 !important; } 
.ui-datepicker-today .ui-state-default.ui-state-active {background-color: #111 !important; color: #fff !important;}
/* monthpicker */
.month-wrap { display: flex; gap:8px; align-items: center; margin-bottom: 20px;}
input.monthpicker { width: auto; height: auto; font-size: 28px; font-weight: 700; max-width: 138px; padding: 0 15px 0 0; text-align: center; border: 0; transition: color 300ms;}
.ui-monthpicker.ui-datepicker .ui-datepicker-calendar { margin-top: 5px; }
.btn-date-move { width: 22px; height: auto; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; opacity: 1; transition: opacity 300ms;}
.btn-date-move.prev { background-image: url('../img/icon-arrow-left.svg');}
.btn-date-move.next { background-image: url('../img/icon-arrow-right.svg');}
.input-box.monthpicker-box input { background-repeat: no-repeat; background-position: right center; background-size: 14px auto; background-image: url("/amospro/asset/images/icon-datepicker.svg"); cursor: pointer;}
/* datepicker 타이틀ver */
.date-wrap { display: flex; gap:8px; align-items: center; margin-bottom: 20px;}
.date-wrap .input-box.datepicker-box { width: auto;}
.date-wrap input.datepicker { width: auto; height: auto; font-size: 24px; font-weight: 700; max-width: 165px; padding: 0 15px 0 0; text-align: center; border: 0; transition: color 300ms;}
.date-wrap .input-box.datepicker-box input { background-position: right center;}
@media (hover:hover) {
	.month-wrap input.monthpicker:hover,
	.date-wrap input.datepicker:hover { color: #004eff;}
	.btn-date-move:hover { opacity: 0.6;}
}

/*========== Custom Design - Button On & Off ==========*/
.btn-on-off-wrap { position: relative; width: 90px; } 
.btn-on-off-wrap input[type="checkbox"] { border: none;}
.btn-on-off-wrap input[type="checkbox"] + label { position: static; top: auto; left: auto; transform: translate(0,0); cursor: pointer; } 
.btn-on-off-wrap input[type="checkbox"] + label::before, .btn-on-off-wrap input[type="checkbox"]:checked + label::before { width: auto; height: auto; background-color: transparent; background: none; border: none; border-radius: 0; transition: 0ms; outline: none; outline-color: transparent; } 
.btn-on-off-wrap input[type="checkbox"] + label { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px;height: 34px; border-radius: 18px; background-color: #E9E9E9; border: 1px solid #bbb;} 
.btn-on-off-wrap input[type="checkbox"] + label span { position: absolute; left: 22px; transform: translateX(-18px); top: 4px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background-color: #888; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label span {transform: translateX(38px); background-color: #fff;} 
.btn-on-off-wrap input[type="checkbox"]:checked + label::before { opacity: 0; visibility: hidden; } 
.btn-on-off-wrap input[type="checkbox"] + label::before, .btn-on-off-wrap input[type="checkbox"] + label::after { position: absolute; top: 0; width: 44px; line-height: 32px; color: #fff; text-align: center; } 
.btn-on-off-wrap input[type="checkbox"] + label::before { opacity: 1; visibility: visible; content: '숨김'; right: 13px; width: 44px; background-color: transparent; font-size: 15px; font-weight: 600; color: var(--text-color-5); text-align: center; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"] + label::after { display: none; content: '노출중'; left: 14px; font-size: 15px; font-weight: 600;  color: #fff; background-color: transparent; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label::after { display: block; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label { background-color: var(--point-color) !important; border-color: var(--point-color) !important; } 
.btn-on-off-wrap input[type="checkbox"].disabled + label, .btn-on-off-wrap input[type="checkbox"].disabled + label::after, .btn-on-off-wrap input[type="checkbox"].disabled + label::before { background-color: #ececec; color: #d5d5d5; } 
.btn-on-off-wrap input[type="checkbox"].disabled, .btn-on-off-wrap input[readonly] + label, .btn-on-off-wrap input[readonly] + label::before, .btn-on-off-wrap input[readonly] + label::after { pointer-events: none; cursor: default; } 

.error { margin-top: 0.5em; padding-left: 1.5em; color: var(--red-color); font-size: 14px; line-height: 1.3; background-image: url('../img/icon-error-red.svg'); background-repeat: no-repeat; background-size: 1em auto; background-position: top 0.15em left; text-align: left;}