@charset "UTF-8";
/* 버튼 기본 설정 */
.button {
	cursor: pointer;
	border: inherit;
	background: inherit;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-moz-box-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	transition: 0.15s ease-in-out;
	margin: 0 3px;
}
.button_wrap {width: 100%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;}
.button_wrap.center {-webkit-box-pack: center;-moz-box-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-moz-align-items: center;-ms-flex-align: center;align-items: center;}
.button.auto {width:100%;height:100%;font-size: 16px;border-radius: 3px;}
.button.large {min-width: 150px;min-height: 30px;font-size: 14px;padding: 10px 25px;border-radius: 3px;}
.button.medium {height:35px;min-width: 100px;min-height: 30px;font-size: 13px;padding: 10px;border-radius: 3px;}
.button.small {height: 26px; min-width: 50px;font-size: 12px;padding: 5px 10px;border-radius: 3px;}
.button.no_margin {margin:0;}

/* button custom */
.button.outline {background: #fff;border: 1px solid var(--color-gray);color: var(--color-gray);}
.button.outline:hover {border: 1px solid var(--color-green);background-color: var(--color-green);color:var(--color-white);}
.button.outline2 {background: #fff;border: 1px solid var(--color-light-gray4);color: var(--color-light-gray5);}
.button.outline2:hover {border: 1px solid var(--color-black);color:var(--color-black);}
.button.color {border: 1px solid var(--color-green);background-color: var(--color-green);color:var(--color-white);}
.button.color:hover {color: var(--color-black);}

/* select box */
select{
    border: 1px solid var(--color-gray2);border-radius: 3px;margin: 0 5px;padding: 0.2em 1.0em;line-height: 1.8em;
    appearance:none;background:url('/img/common/angle-down-solid.svg') no-repeat right 12px center;background-size: 12px;background-color: #fff;
}
select:focus{border: 1px solid var(--color-gray4);box-sizing: border-box;border-radius: 3px;/* outline: 3px solid #F8E4FF; */}
select.large {font-size: 14px;width: 100%;min-width: 125px;max-width: 180px;}

/* input text */
input[type="text"],input[type="password"] {border: 1px solid var(--color-gray2);padding: 0.2em 1.0em;margin: 0 5px;border-radius: 3px;line-height: 1.8em;}
input[type="text"]:focus,input[type="password"]:focus{border: 1px solid var(--color-gray4);}
input[type="text"].large {font-size: 14px;width: 100%;min-width: 125px;max-width: 180px;}

/* radio, checkbox */
label { display: inline-block; position: relative; padding: 0 0.4em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 2.3rem;}
input[type="radio"], input[type="checkbox"] {vertical-align: middle;}
input[type="radio"] {appearance: none;border: 2px solid var(--color-gray3);border-radius: 50%;width: 1.25em;height: 1.25em;/* transition: border 0.1s ease-in-out; */}
input[type="radio"]:checked {border: 2px solid var(--color-red);background-color: var(--color-red);}
/* input[type="radio"]:focus-visible {
	outline-offset: max(2px, 0.1em);
	outline: max(2px, 0.1em) dotted var(--color-red);
} */
input[type="radio"]:hover {/* box-shadow: 0 0 0 max(1px, 0.1em) var(--color-gray2); */cursor: pointer;}
input[type="radio"]:hover + span {cursor: pointer;}
input[type="radio"]:disabled {background-color: var(--color-gray2);box-shadow: none;opacity: 0.7;cursor: not-allowed;}
input[type="radio"]:disabled + span {opacity: 0.7;cursor: not-allowed;}

input[type="checkbox"] { display: none; }
input[type="checkbox"] + .on { width: 1.25em;height: 1.25em;position: absolute;top: 7px;border: 2px solid var(--color-gray3);border-radius: 3px;}
input[type="checkbox"] + .on + span {margin-left: 23px;}
input[type="checkbox"]:checked + .on { background: var(--color-red);border-color:var(--color-red); }
input[type="checkbox"]:checked + .on:after { display: block; }
input[type="checkbox"] + .on:after { content: ""; position: absolute; display: none; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 4px; top: 0; }

/* 테이블 */
.tb {width: 100%;table-layout: fixed;}
.tb thead tr th,
.tb tbody tr th {background-color: #F9F9F9;border-bottom: 1px solid #ccc;padding: 10px;text-align: center;height: 55px;box-sizing: border-box;line-height: 1.16em;font-size: 13px;}
.tb tbody tr td {border-bottom: 1px solid #ccc;padding: 5px;text-align: center;box-sizing: border-box;line-height: 1.16em;font-size: 13px;word-break: break-all;}
.tb tbody tr td.align-left {text-align: left;}

/* 페이징 */
.paging {display: flex;justify-content: center;text-align: center;align-items: center;margin: 30px 0;padding: 0;}
.paging > * {display: inline-block;height: 24px;min-width: 24px;line-height: 24px;vertical-align: middle;overflow: hidden;box-sizing: border-box;margin: 0 4px;font-size: 14px;font-weight: 500;border-radius: 8px;}
.paging .page {text-align: left;text-indent: -9999px;position: relative;border: 1px solid #dedede;}
.paging .first:after {background: url(http://sd211222.cdn1.cafe24.com/img/common/angles-left-solid.png) center center no-repeat;background-size: 10px 10px;}
.paging .prev:after {background: url(http://sd211222.cdn1.cafe24.com/img/common/angle-left-solid.png) center center no-repeat;background-size: 6px 10px;}
.paging .next:after {background: url(http://sd211222.cdn1.cafe24.com/img/common/angle-right-solid.png) center center no-repeat;background-size: 6px 10px;}
.paging .last:after {background: url(http://sd211222.cdn1.cafe24.com/img/common/angles-right-solid.png) center center no-repeat;background-size: 10px 10px;}
.paging .page:after {display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;content: '';}
.paging .prev{margin-right:20px;}
.paging .next{margin-left:20px;}
.paging .page:hover{border-color: #545656;}
.paging .page:after{display:block;width:100%;height:100%;position:absolute;left:0;top:0;content:'';}
.paging .current{background-color:#545656; color:#fff; font-weight:bold;}
@media screen and (max-width: 768px) {
	.paging > * {margin: 0;}
	.paging .page {margin: 0 2px;}
	.paging .prev {margin-right: 5px;}
	.paging .next {margin-left: 5px;}
}