@charset "utf-8";


/*____________________________ FORM ____________________________*/


/* btn */
.btn{color:#fff;font-weight:600;text-align:center;background:#5B7083;display:inline-flex;align-items:center;justify-content:center;
	-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;transition:all .2s ease-in-out;cursor:pointer;border-radius:4px;}
.btn:hover{background:#4B5D6D;}
.btn[class*='span']{display:inline-flex;}

/* size */
.btn, input:not([type="checkbox"]):not([type="radio"]):not(.search), select{padding-left:15px;padding-right:15px;height:54px;font-size:16px;}

input{vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input:not([type="checkbox"]):not([type="radio"]), select{
	display:inline-block;
	vertical-align:middle;
	*overflow:visible;
	padding-top:2px;
	color:#151515;
	font-weight:400;
	border:0;
	border-radius:4px;
	background-color:#fff;
	box-shadow:0 8px 15px #E1E5EB;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	appearance:none;
	position:relative;
	z-index:3;
	}
input:-moz-placeholder, textarea:-moz-placeholder {color:#bfbfbf;font-weight:400;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#bfbfbf;font-weight:400;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#bfbfbf;font-weight:400;}
input::-moz-focus-inner, button::-moz-focus-inner{border:0;padding:0;}

input.datepicker{font-family:'NanumSquareRound',Apple SD Gothic Neo,Dotum,돋움,sans-serif;}
input.datepicker:-moz-placeholder{font-family:'NanumSquareRound',Apple SD Gothic Neo,Dotum,돋움,sans-serif;}
input.datepicker:-ms-input-placeholder{font-family:'NanumSquareRound',Apple SD Gothic Neo,Dotum,돋움,sans-serif;}
input.datepicker::-webkit-input-placeholder{font-family:'NanumSquareRound',Apple SD Gothic Neo,Dotum,돋움,sans-serif;}
input.datepicker::-moz-focus-inner{}

.mySelect{text-decoration:none;display:flex;align-items:center;position:relative;color:#818283;}
.mySelect:after{content:'\59';font-family:'intaefont';position:absolute;right:0;top:0;z-index:6;width:40px;height:100%;font-size:12px;color:#9e9e9e;text-align:center;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;}
.mySelect select{color:inherit;width:100%;padding-right:40px !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-moz-text-overflow:ellipsis;}
.mySelect select::-ms-expand{display:none;}
select option{background-color:#1c1d26;color:#000;}
.mySelect span{display:inline-flex;align-items:center;justify-content:center;width:100px;height:60px;background:#a9a9a9;color:#fff;border-top-left-radius:4px;border-bottom-left-radius:4px;}
.mySelect span + select{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;flex:1;}
.mySelect.focus span{background:rgba(0,0,0,0.5);box-shadow:0px 5px 0px rgba(0,0,0,0.07);}
.mySelect.filled span{background:var(--mainColor);}

input:not([type="checkbox"]):not([type="radio"]):not(:read-only):not(.search):focus, select:focus{border:1px solid rgba(0,0,0,0.2);}
input:not([type="checkbox"]):not([type="radio"]):not(:read-only):not(.search).filled, .mySelect.filled select{}
.mySelect.focus:after{color:rgba(0,0,0,0.6);}
.mySelect.filled:after{color:var(--mainColor);}
input:not([type="checkbox"]):not([type="radio"]):focus, .mySelect.focus{z-index:5;}

.myform{display:inline-flex;align-items:center;position:relative;z-index:1;}
.myform .label{position:absolute;top:50%;left:20px;margin-top:-0.75em;z-index:10;display:inline-block;color:#bfbfbf;transition:all 0.2s cubic-bezier(0.5,0,0,1.25);}
.myform .label.small{font-size:0.8em;margin-top:-1.9em;color:#9a9a9a;}
.myform input:not([type="checkbox"]):not([type="radio"]){width:100%;height:3.8em;padding-top:1.1em;padding-left:18px;border-radius:6px;border-width:1.5px;border-radius:6px;}
.myform input:not([type="checkbox"]):not([type="radio"]):not(:read-only).filled, .myform input:not([type="checkbox"]):not([type="radio"]).filled:focus{border-color:var(--maincolor)}
.myform input:not([type="checkbox"]):not([type="radio"]) + .btnSubmit{position:absolute;top:0;right:0;min-width:64px;width:auto;height:100%;margin:0;padding:0 15px;z-index:10;font-weight:600;font-size:0.95em;color:#c5c5c5;
	border:0;border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;}
.myform input:not([type="checkbox"]):not([type="radio"]).filled + .btnSubmit{color:#ff4e4e;}


.ul-postCode .myform input:not([type="checkbox"]):not([type="radio"]):not(:read-only).filled,
.ul-postCode .myform input:not([type="checkbox"]):not([type="radio"]).filled:focus{border-color:rgba(0,0,0,0.8);}
.ul-postCode .myform input:not([type="checkbox"]):not([type="radio"]).filled{color:rgba(0,0,0,0.8);}
.ul-postCode .myform input:not([type="checkbox"]):not([type="radio"]) + .btnSubmit.mainColor{color:var(--mainColor);}



/*──────────────── Radio & Checkbox (mobile)────────────────*/
input[type="checkbox"], input[type="radio"] {display:none;}
input[type="checkbox"] + span, input[type="radio"] + span{cursor:pointer;display:inline-flex;align-items:center;}

input[type="checkbox"] + span:before{content:'\e936';font-family:'intaefont';font-size:13px;font-weight:normal;
	width:26px;height:26px;border-radius:50%;text-align:center;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;/*background:#d7d7d7;color:rgba(255,255,255,0.8);*/background:#fff;color:#d7d7d7;border:1.5px solid #d7d7d7;}
input[type="checkbox"]:hover + span:before{/*color:rgba(255,255,255,1);*/}
input[type="checkbox"]:checked + span:before{color:#c1eeff;background:#4386F7;border:0;}

.round input[type="checkbox"] + span:before{border-radius:50%;font-size:12px;padding-top:0.15em;}
.round.large input[type="checkbox"] + span:before{font-size:15px;width:31px;height:31px;}


input[type="radio"] + span{position:relative;}
input[type="radio"] + span:before{content:'';position:relative;width:26px;height:26px;background:#d7d7d7;border-radius:50%;display:inline-block;margin-right:10px;}
input[type="radio"] + span:after{content:'';position:absolute;top:8px;left:8px;z-index:6;display:inline-block;width:10px;height:10px;background:rgba(255,255,255,1);border-radius:50%;}
input[type="radio"]:checked + span:before{background:#487af8;}
input[type="radio"]:checked + span:after{background:#c1eeff;}




/* 버튼형식 채크, 라디오 박스 */
label.checkbox-btn{position:relative;text-align:left;width:100%;}
label.checkbox-btn input[type="checkbox"] + span:after{border:0 !important;}
label.checkbox-btn input[type="checkbox"] + span:before{display:none;border:0;}
label.checkbox-btn input[type="checkbox"] + span{position:relative;display:flex;text-align:left;width:100%;height:60px;line-height:1em;padding:0 1em;color:var(--mainColor);background:#fff;border:2px solid var(--mainColor);
	border-top-width:0;border-bottom-width:0;border-radius:0;transition:all .2s ease-in-out;}
label.checkbox-btn:not(:first-child) input[type="checkbox"] + span:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:1px;background:var(--mainColor);z-index:3;}
label.checkbox-btn:first-child input[type="checkbox"] + span{border-top-width:2px;}
label.checkbox-btn:last-child input[type="checkbox"] + span{border-bottom-width:2px;}
label.checkbox-btn:first-child input[type="checkbox"] + span{border-top-left-radius:6px;border-top-right-radius:6px;}
label.checkbox-btn:last-child input[type="checkbox"] + span{border-bottom-left-radius:6px;border-bottom-right-radius:6px;}
label.checkbox-btn input[type="checkbox"]:checked + span{background:var(--mainColor);color:#fff17c;}
label.checkbox-btn input[type="checkbox"]:checked + span:before{background:rgba(0,0,0,0.15);}
label.checkbox-btn input[type="checkbox"] + span:after{content:'\32';font-family:'intaefont';font-size:14px;width:40px;height:100%;margin:0;padding:0;position:absolute;left:auto;top:0;right:0;background:transparent;
	display:inline-flex;align-items:center;justify-content:center;opacity:0;}
label.checkbox-btn input[type="checkbox"]:checked + span:after{opacity:1;}

label.radio-btn{position:relative;text-align:left;width:100%;}
label.radio-btn input[type="radio"] + span:before{display:none;}
label.radio-btn input[type="radio"] + span{position:relative;display:flex;text-align:left;width:100%;height:60px;line-height:1em;padding:0 1em;color:var(--mainColor);background:#fff;border:2px solid var(--mainColor);
	border-top-width:0;border-bottom-width:0;border-radius:0;transition:all .2s ease-in-out;}
label.radio-btn:not(:first-child) input[type="radio"] + span{border-top-width:1px;}
label.radio-btn:first-child input[type="radio"] + span{border-top-width:2px;}
label.radio-btn:last-child input[type="radio"] + span{border-bottom-width:2px;}
label.radio-btn:first-child input[type="radio"] + span{border-top-left-radius:6px;border-top-right-radius:6px;}
label.radio-btn:last-child input[type="radio"] + span{border-bottom-left-radius:6px;border-bottom-right-radius:6px;}
label.radio-btn input[type="radio"]:checked + span{background:var(--mainColor);color:#fff17c;}
label.radio-btn input[type="radio"]:checked + span:before{background:rgba(0,0,0,0.15);}
label.radio-btn input[type="radio"] + span:after{content:'\32';font-family:'intaefont';font-size:14px;width:40px;height:100%;margin:0;padding:0;position:absolute;left:auto;top:0;right:0;background:transparent;
	display:inline-flex;align-items:center;justify-content:center;opacity:0;}
label.radio-btn input[type="radio"]:checked + span:after{opacity:1;}



/* Checkbox 토글버튼 디자인 __________________________________________________ */
[class*="toggle-"] input{display:none;}
[class*="toggle-"] input, [class*="toggle-"] input:after, [class*="toggle-"] input:before, [class*="toggle-"] input *, [class*="toggle-"] input *:after, [class*="toggle-"] input *:before, [class*="toggle-"] input + span{box-sizing:border-box;}
[class*="toggle-"] input::-moz-selection, [class*="toggle-"] input:after::-moz-selection, [class*="toggle-"] input:before::-moz-selection, [class*="toggle-"] input *::-moz-selection, [class*="toggle-"] input *:after::-moz-selection,
[class*="toggle-"] input *:before::-moz-selection, [class*="toggle-"] input + span::-moz-selection, [class*="toggle-"] input::selection, [class*="toggle-"] input:after::selection, [class*="toggle-"] input:before::selection,
[class*="toggle-"] input *::selection, [class*="toggle-"] input *:after::selection, [class*="toggle-"] input *:before::selection, [class*="toggle-"] input + span::selection{background:none;}
[class*="toggle-"]{display:inline-block;position:relative;}
[class*="toggle-"] input + span{outline:0;display:block;width:100%;height:34px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
[class*="toggle-"] input + span:after, [class*="toggle-"] input + span:before {content:"";position:relative;display:block;width:30px;height:100%;z-index:4;}
[class*="toggle-"] input + span:after{left:0;}
[class*="toggle-"] input + span:before {display:none;}
[class*="toggle-"] input:checked + span:after {left:calc(100% - 30px);}


/* toggle-light */
.toggle-light{position:relative;overflow:hidden;width:70px;}
.toggle-light .text-off{position:absolute;top:0;left:0;display:none;}
.toggle-light input + span{background:#f0f0f0;border-radius:2em;padding:2px;transition:all .3s ease;}
.toggle-light input + span:after{border-radius:50%;background:#fff;transition:all .2s ease-in-out;}
.toggle-light input:checked + span{background:var(--mainColor);}
.toggle-light .labelOn, .toggle-light .labelOff{position:absolute;top:0;width:40px;height:100%;display:flex;align-items:center;justify-content:center;z-index:2;font-size:15px;padding-top:0.1em;font-weight:normal;transition:all .2s ease-in-out;}
.toggle-light .labelOn{left:-36px;opacity:0;color:#fff;}
.toggle-light input:checked + span + .labelOn{left:4px;opacity:1;}
.toggle-light .labelOff{left:26px;color:#a7aecb;}
.toggle-light input:checked + span + span + .labelOff{left:80px;opacity:0;}