@charset "utf-8";






/*──────────────── 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:'\32';font-family:'kojipsa';font-size:14px;font-weight:bold;
	width:26px;height:26px;border-radius:5px;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:#487af8;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:'kojipsa';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:'kojipsa';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;font-family:'GongGothicLight',sans-serif;}
.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;}






/*──────────────── input file ────────────────*/
.filebox{font-size:0;position:relative;}
.filebox:after{display:block;visibility:hidden;clear:both;content:""}
.file-info{font-size:13px;color:rgba(71,78,103,0.8);display:inline-block;max-width:calc(100% - 100px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:10px;}
.file-info + .label-del{margin-left:10px;}



.filebox input[type="file"]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.filebox label.upload-btn{
	font-size:14px;
	font-weight:400;
	height:50px;
	padding:0 15px;	
	text-align:center;
	border:1px solid rgba(71,78,103,0.85);
	background:#fff;
	border-radius:2px;
	overflow:hidden;
	display:inline-flex;align-items:center;justify-content:center;
	}
.filebox label.upload-btn:before{content:'\e0e8';font-family:'newfont';font-size:18px;display:inline-block;vertical-align:middle;margin-top:-3px;margin-right:7px;}


.filebox .upImg{clear:both;display:block;max-width:260px;position:relative;overflow:none;}
.filebox .upImg img{max-width:260px;margin-top:5px;}

.filebox .upImg .file-info{position:absolute;bottom:0px;left:265px;font-size:11px;font-weight:200;color:#fff;display:inline-block;height:21px;line-height:22px;padding:0 8px;margin:0;
	background:rgba(71,78,103,0.3);border-radius:2px;/*opacity:0;visibility:hidden;*/transition:all .2s ease-in-out;word-break:keep-all;}
.filebox .upImg .file-info:after{content:'';width:0;height:0;font-size:12px;border-left:4px solid transparent;border-right:4px solid rgba(71,78,103,0.3);border-top:4px solid transparent;border-bottom:4px solid transparent;
	position:absolute;top:50%;right:100%;margin-top:-5px;z-index:2;transition:all .2s ease-in-out;}
.filebox .upImg .file-info:hover{background:rgba(71,78,103,0.6);}
.filebox .upImg .file-info:hover:after{border-right-color:rgba(71,78,103,0.6);}

.filebox .upImg .label-del{position:absolute;top:5px;right:0px;}
.filebox .upImg .label-del input[type="checkbox"] + span{width:30px;height:30px;line-height:31px;margin:0;background:rgba(186,186,186,0.6);border-radius:2px;color:rgba(255,255,255,0.7);}
.filebox .upImg .label-del input[type="checkbox"] + span:before{content:'\e2ba';font-family:'newfont';font-size:16px;font-weight:normal;}
.filebox .upImg .label-del input[type="checkbox"]:hover + span{color:#fff;background:rgba(174,174,174,1);}
.filebox .upImg .label-del input[type="checkbox"]:checked + span{color:#fff;background:#ff5757;}


.filebox.btnCamera{}
.filebox.btnCamera .upload-name{display:none;}
.filebox.btnCamera label.upload-btn{display:inline-block;vertical-align:top;padding:0 12px;width:auto;height:34px;line-height:36px;font-weight:bold;text-align:center;color:#fff;
		border:0;border-radius:2px;background:rgba(71,78,103,0.5);transition:all .2s ease-in-out;margin:0;}
.filebox.btnCamera label.upload-btn:hover{background:#1bc8a6;}
.filebox.btnCamera label.upload-btn:before{content:'\e09d';font-family:'newfont';font-size:15px;vertical-align:middle;font-weight:normal;display:inline-block;margin-top:0;margin-right:8px;}
.filebox.btnCamera .upImg img{margin-top:10;}


.filebox.btnCamera.large label.upload-btn{display:inline-block;vertical-align:top;padding:0 12px;width:auto;height:46px;line-height:48px;padding:0 15px;font-weight:bold;text-align:center;color:#fff;
		border:0;border-radius:2px;background:rgba(71,78,103,0.5);transition:all .2s ease-in-out;margin:0;}
.filebox.btnCamera.large label.upload-btn:hover{background:#1bc8a6;}
.filebox.btnCamera.large label.upload-btn:before{content:'\e09d';font-family:'newfont';font-size:15px;vertical-align:middle;font-weight:normal;display:inline-block;margin-top:0;margin-right:8px;}
.filebox.btnCamera.large .upImg{display:inline-block;margin-left:10px;}
.filebox.btnCamera.large .upImg img{margin-top:0;}
.filebox.btnCamera.large .upImg .label-del{top:0;}



.filebox .upImg.icon{display:inline-block;width:auto;margin-left:10px;}
.filebox .upImg.icon img{width:auto;margin:0;display:inline-block;vertical-align:top;}
.filebox .upImg.icon .label-del{position:relative;top:-8px;left:2px;}
.filebox .upImg.icon .label-del input[type="checkbox"] + span{width:16px;height:16px;line-height:16px;margin:0;background:rgba(186,186,186,0.6);border-radius:2px;color:rgba(255,255,255,0.7);}
.filebox .upImg.icon .label-del input[type="checkbox"] + span:before{content:'\e2ba';font-family:'newfont';font-size:12px;font-weight:normal;}
.filebox .upImg.icon .label-del input[type="checkbox"]:hover + span{color:#fff;background:rgba(174,174,174,1);}
.filebox .upImg.icon .label-del input[type="checkbox"]:checked + span{color:#fff;background:#ff5757;}
.filebox .upImg.icon .file-info{left:65px;vertical-align:bottom;}





/*──────────────── 우편번호 찾기 ────────────────*/
#postcode-layer{display:none;position:fixed;z-index:999;-webkit-overflow-scrolling:touch;}
#postcode-layer .btnClose:before{content:'\28';position:absolute;top:-24px;right:-24px;z-index:3;width:36px;height:36px;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;}