@charset "utf-8";
/* ==============================
 * 요소 css
================================= */

input[type="text"],
input[type="password"],
input[type="submit"],
input[type="button"],
button,
select,
textarea {font-family:'ONE-Mobile-Regular'}
button, input[type="button"], input[type="submit"] {cursor:pointer}

/* apple 기기 */
input[type=text], input[type=password], input[type=button], input[type=submit], button, textarea, select {-webkit-appearance:none;-moz-appearance:none;appearance:none}
select {border:0;height:28px;box-sizing:border-box;border:1px solid #ccc;background:rgba(255,255,255,0.3) url(/resources/_Img/Common/selfrm_arr2.gif) no-repeat right 50%;min-width:120px;padding-right:1px;padding-left:5px;padding-top:1px;border-radius:0}
select::-ms-expand {display:none}


/** --- radio.chechbox 공통 */
.rdos.inline,
.chks.inline {display:inline-block;margin-right:25px;vertical-align:top}
.rdos.inline:last-child,
.chks.inline:last-child {margin-right:0}


/** -- radio  */
.rdos {position:relative;line-height:1}
.rdos.inline {display:inline-block;vertical-align:top}
.rdos input[type="radio"] {position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.rdos input[type="radio"] + label {display:inline-block;position:relative;padding:5px 0 5px 25px;margin-right:5px;color:#686868;line-height:1.2;letter-spacing:0;text-align:left;vertical-align:middle;cursor:pointer;user-select:none;transition:all .3s ease}
.rdos input[type="radio"] + label:before,
.rdos input[type="radio"] + label:after {content:"";position:absolute;border-radius:50%;transition:all .3s ease;box-sizing:border-box}
.rdos input[type="radio"] + label:before {left:0;top:5px;background:#ebebeb;border:1px solid #767676;width:20px;height:20px}
.rdos input[type="radio"] + label:after {left:6px;top:11px;background:#fff;border-radius:50%;width:8px;height:8px;opacity:0}
.rdos input[type="radio"] + label:hover {color:#005667}
.rdos input[type="radio"] + label:hover:before {border-color:#005667}
.rdos input[type="radio"]:checked + label {color:#005667;font-weight:700}
.rdos input[type="radio"]:checked + label:before {border-color:#005667;background:#005667}
.rdos input[type="radio"]:checked + label:after {opacity:1}
@media all and (max-width:768px) {
	.rdos input[type="radio"] + label:before {top:5px}
	.rdos input[type="radio"] + label:after {top:9px}
}

/** -- checkbox */
.chks {position:relative;line-height:1}
.chks input[type="checkbox"] {position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.chks input[type="checkbox"] + label {display:inline-block;position:relative;padding:5px 0 5px 25px;margin-right:5px;color:#666;line-height:1.2;letter-spacing:0;text-align:left;vertical-align:middle;cursor:pointer;user-select:none;transition:all .3s ease}
.chks input[type="checkbox"] + label:before,
.chks input[type="checkbox"] + label:after {content:"";position:absolute;transition:all .3s ease;box-sizing:border-box}
.chks input[type="checkbox"] + label:before {left:0;top:5px;background:#ebebeb;border:1px solid #c6c6c6;border-radius:50%;width:20px;height:20px}
.chks input[type="checkbox"] + label:after {left:6px;top:11px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #999 #999;width:8px;height:5px;transform:rotate(-45deg)}
.chks input[type="checkbox"] + label:hover {color:#005667}
.chks input[type="checkbox"] + label:hover:before {border-color:#005667}
.chks input[type="checkbox"]:checked + label {color:#005667;font-weight:700}
.chks input[type="checkbox"]:checked + label:before {border-color:#005667;background:#005667}
.chks input[type="checkbox"]:checked + label:after {border-color:transparent transparent #fff #fff}
@media all and (max-width:768px) {
	.chks input[type="checkbox"] + label:before {top:5px}
	.chks input[type="checkbox"] + label:after {top:10px}
}



/** -- input */
#contents #cont input.text,
#contents #cont input.txt,
#contents #cont input[type="text"],
#contents #cont input[type="password"],
#contents #cont input[type="file"] {background:#f8f9fb;border:0;border-radius:30px;height:40px;padding:0 15px;color:#5b5b5b;font-size:.889em;box-sizing:border-box}
#contents #cont input[type="password"] {font-family:"Noto Sans KR", sans-serif}
#contents #cont input.text:-webkit-input-placeholder,
#contents #cont input.txt:-webkit-input-placeholder,
#contents #cont input[type="text"]:-webkit-input-placeholder,
#contents #cont input[type="file"]:-webkit-input-placeholder {color:#878787}
#contents #cont input.text:-moz-input-placeholder,
#contents #cont input.txt:-moz-input-placeholder,
#contents #cont input[type="text"]:-moz-input-placeholder,
#contents #cont input[type="file"]:-moz-input-placeholder {color:#878787}
#contents #cont input.text:-ms-input-placeholder,
#contents #cont input.txt:-ms-input-placeholder,
#contents #cont input[type="text"]:-ms-input-placeholder,
#contents #cont input[type="file"]:-ms-input-plplaceholder .aceholder {color:#878787}
#contents #cont input[type="password"]::placeholder,
#contents #cont input[type="password"]::-webkit-input-placeholder,
#contents #cont input[type="password"]::-moz-input-placeholder,
#contents #cont input[type="password"]::-ms-input-placeholder {font-family:"ONE-Mobile-Regular", sans-serif !important;}

/** --- readonly */
input[readonly="readonly"].txt,
input.txt:read-only,
input.txt:disabled {background:#f4f4f4}
input[readonly="readonly"].date,
input.date:read-only,
input.date:disabled{background:#fff}

/** -- select */
select,
select.select {background:#f8f9fb url(/resources/_Img/Common/selfrm_arr2.gif) no-repeat right 50%;border:0;border-radius:35px;height:40px;min-width:100px;padding:0 35px 0 20px;color:#666 !important;font-size:.941em !important;box-sizing:border-box}

@media all and (max-width:768px) {
	input.text,
	input.txt,
	input[type="text"],
	input[type="password"],
	input[type="file"] {padding:0 15px}

	select,
	select.select {padding-left:15px}
}


/** -- form info */
.finfo-ex01,
.finfo-ex02,
.finfo-ex03 {position:relative;padding-left:21px;font-size:.824em;color:#777;letter-spacing:-.05em;text-align:left}
.finfo-ex01.inline,
.finfo-ex02.inline,
.finfo-ex03.inline {display:inline-block}
.finfo-ex02 {color:#da262e}
.finfo-ex03 {color:#005667}
.finfo-ex01 .ico,
.finfo-ex02 .ico, 
.finfo-ex03 .ico {display:block;position:absolute;left:0;top:3px;border-radius:50%;width:14px;height:14px}
.finfo-ex01 .ico,
.finfo-ex01 .ico:after {background-color:#a0a0a0}
.finfo-ex02 .ico,
.finfo-ex02 .ico:after {background-color:#da262e}
.finfo-ex03 .ico,
.finfo-ex03 .ico:after {background-color:#005667}
.finfo-ex01 .ico:before,
.finfo-ex01 .ico:after,
.finfo-ex02 .ico:before,
.finfo-ex02 .ico:after,
.finfo-ex03 .ico:before,
.finfo-ex03 .ico:after {content:"";display:block;position:absolute;left:50%;top:50%;margin-left:-1px}
.finfo-ex01 .ico:before,
.finfo-ex02 .ico:before,
.finfo-ex03 .ico:before {background-color:#fff;width:1px;height:6px;margin-top:-3px}
.finfo-ex01 .ico:after,
.finfo-ex02 .ico:after,
.finfo-ex03 .ico:after {width:1px;height:1px;margin-top:-2px}

@media all and (max-width:999px) {

}

/* Form-style 달력 */

#ui-datepicker-div.ui-widget-content {border:0;background:#fff;box-shadow:9px 0 10px rgba(0,0,0,0.1);min-width:360px;border:1px solid #565656;box-sizing:border-box;border-radius:0;z-index:9999 !important}
.ui-datepicker .ui-datepicker-header {border:0;background:#fff;}
.ui-datepicker {padding:20px;}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {top:0;left:0;width:28px;height:45px;border-radius:0;background:#fff;border:0;cursor:pointer;}
.ui-datepicker .ui-datepicker-next {left:auto;right:0;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {width:0;height:0;overflow:hidden;opacity:0;}
.ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before {display:block;content:'';position:absolute;top:0;left:3px;bottom:0;margin:auto 0;width:11px;height:11px;border-bottom:2px solid #000;border-right:2px solid #000;transform:rotate(135deg);}
.ui-datepicker .ui-datepicker-next:before {left:12px;transform:rotate(-45deg);}
.ui-datepicker .ui-datepicker-header {padding:0;}
.ui-datepicker .ui-datepicker-title {height:45px;font-family:"sofia-pro","Noto Sans KR", sans-serif;font-size:16px;color:#333333;font-weight:500;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-year,
.ui-datepicker .ui-datepicker-title .ui-datepicker-month {display:inline-block;height:45px;line-height:45px;}
.ui-datepicker .ui-datepicker-title select {margin:0;width: calc(50% - 7px);color:#333333;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {margin-right:3px;}
.ui-datepicker .ui-datepicker-calendar {font-family:"sofia-pro","Noto Sans KR", sans-serif;font-size:15px;margin-top:7px;}
#ui-datepicker-div.ui-state-default, 
#ui-datepicker-div.ui-widget-content .ui-state-default, 
#ui-datepicker-div .ui-widget-header .ui-state-default {/*display:flex;align-items:center;justify-content:center;margin:0 auto;background:#fff;border:0;color:#222;width:34px;height:34px;text-align:center;border-radius:50%;box-sizing:border-box;*/}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-default {display:flex;align-items:center;justify-content:center;margin:0 auto;background:#fff;border:0;color:#222;width:34px;height:34px;text-align:center;border-radius:50%;box-sizing:border-box;}
#ui-datepicker-div .ui-widget-header .ui-datepicker-prev,
#ui-datepicker-div .ui-widget-header .ui-datepicker-next {display:flex;align-items:center;justify-content:center;margin:0 auto;background:none;border:0;color:#222;width:34px;height:45px;text-align:center;border-radius:50%;box-sizing:border-box;}
#ui-datepicker-div.ui-widget-content .ui-state-hover {background:#208df0;color:#fff !important;}


.ui-datepicker-calendar thead th {color:#555555;font-weight:500;}
.ui-datepicker td {padding:2px 1px;}
.ui-datepicker-calendar tr > th:first-child,
.ui-datepicker-calendar tr > td:first-child .ui-state-default, 
.ui-datepicker-calendar tr > td:last-child .ui-widget-content .ui-state-default, 
.ui-datepicker-calendar tr > td:last-child .ui-widget-header .ui-state-default {color:#eb1f1f !important;}
.ui-datepicker-calendar tr > th:last-child,
.ui-datepicker-calendar tr > td:last-child .ui-state-default, 
.ui-datepicker-calendar tr > td:last-child .ui-widget-content .ui-state-default, 
.ui-datepicker-calendar tr > td:last-child .ui-widget-header .ui-state-default {color:#2360c5 !important;}
.ui-datepicker-calendar td.ui-datepicker-today a {border:2px solid #dddddd;}
.ui-datepicker-calendar td a:hover.ui-state-default {background:#208df0;color:#fff !important;}

@media all and (max-width:599px) {
	.ui-datepicker {padding:15px;}
	#ui-datepicker-div .ui-widget-content {left:50% !important;transform:translateX(-50%);min-width:220px;}
	.ui-datepicker .ui-datepicker-title {margin:0 20px;}
	.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {font-size:14px;}
	.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {width:20px;}
	.ui-datepicker .ui-datepicker-next:before {left:4px;}
	#ui-datepicker-div.ui-state-default, 
	#ui-datepicker-div .ui-widget-content .ui-state-default, 
	#ui-datepicker-div .ui-widget-header .ui-state-default {width:24px;height:24px;}
}
@media all and (max-width:399px) {
	#ui-datepicker-div .ui-widget-content {left:50% !important;transform:translateX(-50%);min-width:220px;}
	.ui-datepicker .ui-datepicker-title {margin:0 20px;}
	.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {width:20px;}
	.ui-datepicker .ui-datepicker-next:before {left:4px;}
	.ui-datepicker .ui-datepicker-calendar {font-size:12px;}

	#ui-datepicker-div.ui-state-default, 
	#ui-datepicker-div .ui-widget-content .ui-state-default, 
	#ui-datepicker-div .ui-widget-header .ui-state-default,
	#ui-datepicker-div .ui-datepicker-calendar .ui-state-default {width:20px;height:20px;}
	#ui-datepicker-div.ui-widget-content {min-width:100px;}

	#ui-datepicker-div .ui-datepicker-calendar .ui-state-default {width:20px;height:20px;}

	#ui-datepicker-div .ui-widget-header .ui-datepicker-prev,
	#ui-datepicker-div .ui-widget-header .ui-datepicker-next {width:20px;}
	
}


/* 동의 박스 */
.agrees-tit {display:flex;align-items: center;flex-wrap:wrap;margin-bottom:20px;}
.agrees-tit > * {margin-bottom:0;}
.agrees-tit > *:first-child {margin-right:20px;}
.agrees-tit .agree-chk-pt {display:inline-block;font-size: 0.83333em;font-weight: 400;font-family:'ONE-Mobile-Title', sans-serif;line-height:1.2em;padding: 8px 15px 8px 15px;border-radius: 20px;background: #E54B82;color:#fff;}
.agrees-box {border-radius: 30px;border: 1px solid #CCC;padding: 35px 60px;box-sizing:border-box;}
.agrees-box .agrees-inbox {max-height:300px;overflow-y:auto;}

@media all and (max-width:599px) {
	.agrees-box {border-radius: 20px;padding:20px;box-sizing:border-box;}
}

/* ==============================
 * 접근성 대응
================================= */
.bdListTop .bdSec .bdPkg .select:focus-visible,
.bdListTop .bdSec .bdPkg .bdSearch input.text:focus-visible {outline:rgb(59, 153, 252) solid 3px;outline-offset:-3px}
.bdListTop .bdSec .bdPkg .select:not(:focus-visible),
.bdListTop .bdSec .bdPkg .bdSearch input.text:not(:focus-visible) {outline:0}
.bdListTop .bdSec .bdPkg .bdSearch .btnSearch:focus-visible,
.rdos input[type="radio"]:focus-visible + label:before,
.rdos input[type="checkbox"]:focus-visible + label:before {outline:3px dotted #f00;outline-offset:-3px}
.rdos input[type="radio"]:focus:not(:focus-visible) + label:before,
.rdos input[type="checkbox"]:focus:not(:focus-visible) + label:before {outline:0}