/* 공용 레이아웃 */
.flexBox{display:flex; align-items:center; gap:5px;}
.red{font-weight: 500; color: #ec635d; padding:0 5px;}

/* input */
textarea{border: 1px solid #bbb; border-radius: 6px; resize: none; font-family: 'Pretendard';}
input{font-family: 'Pretendard'; color:var(--blackColor);}

/* 기본 인풋 */
textarea{padding:12px; background:#fff; border-radius:6px; resize:none; width:100%;}

input[type=text],
input[type=tel],
input[type=file],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=date],
input[type=time]{padding: 0 12px; height: 40px; line-height: 40px; width:100%;}

input[type="time"] { position: relative; padding-right: 25px; }
input[type="time"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; cursor: pointer;  color: transparent; background-size: auto; background-position: right;}


.renewalInput{border:1px solid var(--grayColor2); background:#fff; border-radius:6px; overflow:hidden; width:100%;}
.renewalInput + .renewalInput{margin-top:10px;}
.renewalInput.wAuto{display:inline-block; max-width:140px;}
.renewalInput.textForm{display:flex; align-items:center;}
.renewalInput.textForm > .text{margin-right:12px; font-size:13px; color:#777;}
.renewalInput button{border-radius:0;}

.renewalInput.type2{border:0px; background:transparent;}
.renewalInput.type2 > label{font-size:13px; color:#777; display:inline-block; margin-bottom:5px;}
.renewalInput.type2 > div{border:1px solid var(--grayColor2); background:#fff; border-radius:6px; overflow:hidden; width:100%;}

.renewalInput.type3{border:0px; background:#eee; border-radius: 5px;}

.btnInput{display:flex; align-items:center; width:100%; padding-right:10px;}
.btnInput.phone-change { justify-content: space-between }
.btnInput > button{cursor:pointer; height:40px;}

.renewalInput.btnInput.obj_cert_div{display: none;}
.renewalInput button:disabled{background: #bbb;}

.renewalInput.timeInput {padding-right: 5px;}

.textInput{width:100%; position:relative;}
.textInput > span{font-size:12px; color:#bbb; position:absolute; top:50%; right:12px; transform:translateY(-50%);}

/* select box */
.select_box{border: 1px solid #bbb;  border-radius: 6px; position:relative; display:inline-block; background:#fff;}
.select_box > select{padding: 0 40px 0 12px; height: 40px; z-index: 1; position:relative;}
.select_box:after{content: "\e942"; font-family: 'xeicon'; position:absolute; top:50%; right:5px; font-size:2rem; transform:translateY(-50%);}
.select_box:has(select:disabled){border: 1px solid #dfe2ed; background-color: #edf0f9;}
.select_box:has(select:disabled)::after{color:#dfe2ed;}

/* tabMenu */
.tabMenu{display:flex; margin:-2rem -2rem 2rem;}
.tabMenu > li{cursor:pointer; border-top:1px solid #bbb; background:#ddd; color:#999; width:50%; text-align:center; font-weight:600; font-size:1.5rem; padding:10px;}
.tabMenu > li + li{border-left:1px solid #bbb;}
.tabMenu > li.on{border-bottom:1px solid #F2F2F2; background:#F2F2F2; color:#111;}

.tabArea{display:none;}
.tabArea.view{display:block;}

/* checkbox, radio */
.checkbox, .radio{display:inline-block;}
.checkbox > input,
.radio > input{display:none;}
.checkbox > label{display:flex; align-items: center; cursor:pointer;}
.checkbox > label > .styledBox{position:relative; width:20px; height: 20px; border: 1px solid #bbb; background:#fff; border-radius: 4px; display:inline-block;}
.checkbox > label > .styledBox + span{margin-left:10px; color:#999;}
.checkbox > label > .styledBox + span > .red{font-weight: 500; color: #ec635d; margin-left: 5px;}
.checkbox > input[type=checkbox]:checked + label > .styledBox{background-color: var(--mainColor);}
.checkbox > input[type=checkbox]:checked + label > .styledBox + span{color:#111;}
.checkbox > input[type=checkbox]:checked + label > .styledBox:after{content: "\e929"; font-family:"xeicon"; position:absolute; font-size: 2rem; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff}
.checkbox + .checkbox{margin-left:10px}

.radio > label{display:flex; align-items: center; cursor:pointer;}
.radio > label > .styledBox{position:relative; width:20px; height: 20px; border: 1px solid #bbb; background:#fff;  border-radius: 50%; display:inline-block;}
.radio > label > .styledBox + span{margin-left:10px; color:#999;}
.radio > label > .styledBox + span > .red{font-weight: 500; color: #ec635d; margin-left: 5px;}
.radio > input[type=radio]:checked + label > .styledBox{background-color: var(--blackColor);}
.radio > input[type=radio]:checked + label > .styledBox + span{color:#111;}
.radio > input[type=radio]:checked + label > .styledBox:after{content: ""; position:absolute; background-color:#fff; width:50%; height:50%; border-radius: 50%; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff}
.radio + .radio{margin-left:10px;}

/* 버튼형 라디오 */
.tabRadio{display: flex; margin-bottom: 20px;}
.tabRadio label{display: block; height: 36px; line-height: 36px; padding: 0 20px; background: #dfe2ed; color: #bbbec9; font-size: 14px; border: 1px solid #dfe2ed;  border-left: 0; text-align: center;}
.tabRadio input[type=radio] + label{margin-right: 0;}
.tabRadio input[type=radio]:checked + label{background: #fff; color: var(--subColor);}
.tabRadio input[type=radio]{display: none;}
.tabRadio label:first-of-type{border-radius: 4px 0 0 4px; border-left: 1px solid #dfe2ed;}
.tabRadio label:last-of-type{border-radius: 0 4px 4px 0;}

/* 버튼형 체크박스 */
.tabChkbox{display: flex; margin-bottom: 20px;}
.tabChkbox label{display: block; height: 36px; line-height: 36px; padding: 0 20px; background: #dfe2ed; color: #bbbec9; font-size: 14px; border: 1px solid #dfe2ed; border-left: 0; text-align: center;}
.tabChkbox input[type=checkbox] + label{margin-right: 0;}
.tabChkbox input[type=checkbox]:checked + label{background: #fff; color: var(--subColor);}
.tabChkbox input[type=checkbox]{display: none;}
.tabChkbox label:first-of-type{border-radius: 4px 0 0 4px; border-left: 1px solid #dfe2ed;}
.tabChkbox label:last-of-type{border-radius: 0 4px 4px 0;}

/* 검색, 달력 */
.schInputWrap{position: relative; height:40px; display: inline-block; border:1px solid #bbb; overflow:hidden; background:#fff; border-radius:6px;}
.schInputWrap input[type=text]{padding-right:30px}
.schInputWrap button{font-size:0px; cursor: pointer;}
.schInputWrap button.schBtn{position:absolute; right:10px; top:50%; transform:translateY(-50%); }
.schInputWrap button.schBtn:after{content: "\e97a"; font-family: 'xeicon'; display:inline-block; font-size:1.5rem;}
.schInputWrap button.schDelBtn{display:none; position:absolute; right:25px; top:50%; transform:translateY(-50%);}
.schInputWrap button.schDelBtn.view{display:inline-block;}
.schInputWrap button.schDelBtn:after{content: "\e922"; font-family: 'xeicon'; display:inline-block; font-size:2rem;}

.dayWrap{line-height: 40px;}
.datepicker{position: relative; display: inline-block; }
.datepicker > input{width:120px !important;}
.datepicker > i{font-style:normal;}
.datepicker > i::after{position:absolute; content: "\e9a0"; font-family: "xeicon"; font-size:1.5rem; top:50%; right:10px; transform:translateY(-50%);}
/*.datepicker > input:focus + i:after{color:var(--mainColor);}*/

/* file */
.fileBox input[type=file]{display: none;}
.fileBox input[type=text]{width: 300px;}
.fileBox label{border-radius: 4px; text-align: center; display: inline-block; background: #989ca9; color: #fff; padding: 0 20px; height: 40px; line-height: 40px;}
.fileBox label:hover{background: #bbbec9; box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);}
.fileBox label:disabled{background: #dfe2ed; color: #fff;}
.fileBox label:disabled:hover{box-shadow: none;}

/* 버튼 */
button:disabled{cursor:default;}
.btn{text-align: center; display: inline-block; position: relative; font-family:"pretendard", "Malgun Gothic", "맑은 고딕" ,helvetica, 'Dotum', "Apple SD Gothic Neo", sans-serif; cursor:pointer; border-radius:6px;}
.btn.sizeSS{padding: 0 12px; height: 26px; line-height: 26px;}
.btn.sizeS{padding: 0 12px; height: 40px; line-height: 40px;}
.btn.sizeM{padding: 15px 30px; font-size:15px; font-weight:400;}

.btn.sizeS.icon{width:40px; display:flex; align-items:center; justify-content:center;}
.btn.sizeS.icon > i{margin:0px;}

.btn i{vertical-align: baseline;}
.btn.sizeSS i{margin-right:6px; font-size: 14px; }
.btn.sizeS i{margin-right:6px; font-size: 12px; }
.btn.sizeM i{margin-right:8px; font-size: 14px; }
.btn.sizeL i{margin-right:8px; font-size: 16px; }

.btn.sizePop1{width: 100%;}
.btn.sizePop2{width: 50%;}
.btn.sizePop3{width: 33.33%;}

.btn.bgMain{background: var(--mainColor); color: #fff;}

.btn.bdMain{background: #fff; color: var(--subColor); border:1px solid var(--mainColor);}

.btn.bdGray{background: #fff; color: #777; border:1px solid #bbb;}

.btn.bgGreen{background: #328343; color: #fff;}
.btn.bgGreen:hover{background: #38a24e; box-shadow: 0 0 10px rgba(39, 235, 114, 0.2);}
.btn.bgGreen:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgGreen:disabled:hover{box-shadow: none;}

.btn.bgGray{background: #989ca9; color: #fff;}

.btn.bgBlack{background: #00090d; color: #fff;}

.btnArea{display:flex; align-items:center; gap:5px; max-width:500px; margin:0 auto; margin-top:3rem;}

/* toggle버튼 */
.toggleInput {position: relative; display: inline-block; width:36px; height: 12px; border-radius: 6px; background: #edf0f9;}
.toggleInput input {opacity:0; width:0; height:0;}
.toggleInput input:checked + label:before {transform: translateY(-50%) translateX(20px);}
.toggleInput label{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #edf0f9; border-radius: 6px;}
.toggleInput label:before {border-radius: 50%; position: absolute; content: ""; height: 20px; width: 20px; left:0px; top: 50%; transform: translateY(-50%); background: #fff; box-shadow: 3px 0 10px rgba(73, 75, 83, 0.3); transition: all 0.5s;}
.toggleInput input:checked + label{background: var(--subColor);}
.toggleInput input:disabled + label::before{background: #dfe2ed;}
.toggleInput input:disabled + label{background: #f4f6fc;}

/* - 페이지 로딩 처리 - */
body.loading:after {font-family:"xeicon"; content: "\ec34"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    position:fixed; top:50%; left:50%; width:50px; height:50px; line-height:50px; font-size:4.4rem; padding:5px; z-index:1000; margin-left:-30px;margin-top:-30px;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background:#fff; color:#2d3845; overflow:hidden; text-align: center;
    animation: spin 1.5s linear infinite;
    will-change: transform, opacity;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2);
}

body.loading:before {display:block; position:fixed; background:rgba(0,0,0,0.2); top:0px; left:0px; right:0px; bottom:0px; z-index:999; content:''; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* - @페이지 로딩 처리 - */

/* 페이징 */
.pagingWrap{font-size: 0; display:flex; justify-content: center; align-items: center;}
.pagingWrap a{width: 28px; height: 28px; line-height: 28px;  display: inline-block; font-size: 16px; margin: 0 3px; text-align: center; color: #989ca9;}
.pagingWrap .prev, .pagingWrap .next{display:inline-block; cursor: pointer; margin: 0 3px;}
.pagingWrap .prev:after,
.pagingWrap .next:after{font-family: 'xeicon'; display:inline-block; font-size:25px;}
.pagingWrap .prev:after{content: "\e93c";}
.pagingWrap .next:after{content: "\e93f";}
.pagingWrap a.on{border-radius: 50%; background: var(--mainColor); color: #fff; font-weight: bold;}


/* 팝업영역 설정 */
.pop {display:block;position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0.6);z-index:990;will-change: transform, opacity; }
.popup {position:fixed;top:50%;left:50%;width:90%; padding:0px; height:auto;background:#fff;
	-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	 -webkit-box-shadow:  0px 0px 80px 20px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 80px 20px rgba(0,0,0,0.2);box-shadow: 0px 0px 80px 20px rgba(0,0,0,0.2);
	 z-index:999;display:block;}
.popup.width_400 { max-width:400px; }
.popup.width_600{max-width:600px;}

.popup > header { position:relative; display:flex; align-items:center; justify-content:space-between; padding-bottom:0px; background:#eee; padding:0 20px; border-bottom:1px solid #ccc; height:60px;}
.popup > header h1 { font-size:22px; font-weight:600; color:#333; letter-spacing: -0.5px;}
.popup > header h1 > span { font-size:16px;margin-left:7px; }
.popup > header h1.type2{line-height:1; display: flex; flex-direction: column; justify-content: center;}
.popup > header h1.type2 > span{color:#999; display:block; margin:5px 0px 0px; font-size:13px; padding-left:3px;}
.popup > header .close {font-size:30px; display:inline-block; width:20px; height:30px; line-height:30px; text-align:center; cursor:pointer; color:#333; }

.popup > header .nowSt{margin:0px; padding:0px; background:transparent; color:#101010;}
.popup > header .nowSt > .t > span{color:#101010;}
.popup > header .nowSt > .s > span,
.popup > header .nowSt > .s{color:#101010;}

.popup > footer {position:relative; margin:0px; padding:0 20px; height:60px; display:flex; align-items:center; justify-content:center; background:#eee; border-top:1px solid #ccc; }
.popup > footer a { float: none;display:inline-block;line-height:40px;height:40px;border:0px;font-size:14px;width:auto;padding:0px 30px;color:#fff;margin:0px 2px;cursor:pointer;background:#404d5e;border-radius: 5px;}
.popup > footer.right a { padding:0px 25px; }
.popup > footer a.gray { background:#999; }
.popup > footer a.red { background:#ec635d; }
.popup > footer a.black { background:#2d3845; }
.popup > footer a.del {position:absolute;top:15px;right:20px; display:inline-block;line-height:40px;height:40px;border:0px;font-size:14px;width:auto;padding:0px 20px;color:#999;margin:0px 2px;cursor:pointer;background:#ddd; }
.popup > footer a.preview {position:absolute;top:15px;left:20px; display:inline-block;line-height:40px;height:40px;border:0px;font-size:14px;width:auto;padding:0px 20px;color:#fff;margin:0px 2px;cursor:pointer;background:#ec635d; }
.popup > footer.complete a { background:#48bacb;padding:0px 30px; }
.popup > footer.complete a.gray { background:#999;padding:0px 30px; }
.popup > footer span.select {position:absolute;top:15px;left:20px;padding-left:30px; display:inline-block;line-height:36px;height:36px;border:0px;font-size:14px;width:auto;width:80px;margin:0px 0px;cursor:pointer;background:#fff;border:2px solid #e95653; -webkit-border-radius: 5px;-khtml-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; overflow:hidden;}
.popup > footer span.select > label { position:absolute;top:0px;left:0px;display:block;width:30px;height:30px;line-height:15px;font-size:11px;padding:3px 0px;text-align:center;background:#e95653;color:#fff; }
.popup > footer span.select select { position:relative;display:block;width:130%;padding-left:5px;height:36px;line-height:36px;background:transparent;font-size:14px;font-weight:400;outline: none;z-index:2;color:#333; }
.popup > footer span.select:after { font-family:FontAwesome; content:"\f107";vertical-align: middle;position:absolute;top:0px;right:5px;display:block;color:#999;font-size:15px;height:36px;line-height:36px;z-index:1;}

.popup > footer span.appr {position:absolute;top:15px;left:20px;padding-left:30px; display:inline-block;line-height:36px;height:36px;border:0px;font-size:14px;width:auto;width:80px;margin:0px 0px;cursor:default;;background:#eee;border:2px solid #aaa; -webkit-border-radius: 5px;-khtml-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; overflow:hidden;}
.popup > footer span.appr > label { position:absolute;top:0px;left:0px;display:block;width:30px;height:30px;line-height:15px;font-size:11px;padding:3px 0px;text-align:center;background:#aaa;color:#fff; }
.popup > footer span.appr span { position:relative;display:block;padding-left:5px;height:36px;line-height:36px;background:transparent;font-size:14px;font-weight:400;outline: none;z-index:2;color:#333;text-align:left; }

.popup > footer > .select_box{position:absolute; left:20px; top:50%; transform:translateY(-50%);}

.popup > footer div[data-tab=upload] { display:none; }

.popup > section {overflow-y:auto;background:#fff;padding:0px;margin:0px; max-height:70vh;}

.popup > section article { padding:20px; }


/* 약관 */
.agreement {
	display: block;
	padding: 15px;
	box-sizing: border-box;
	padding-top: 85px;
}

.agreement.show {
	display: block;
}

.agreement>div {
	font-size: 14px;
	margin-bottom: 20px;
}

.agreement>div>strong {
	display: block;
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 15px;
}

.agreement>div>span {
	display: block;
	margin-bottom: 10px;
}

.agreement>div.list>p {
	padding-left: 20px;
	position: relative;
	margin-bottom: 5px;
	font-size: 13px;
	line-height: 16px;
}

.agreement>div.list>p::before {
	display: inline-block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
}

.agreement>div.list>p:nth-of-type(1)::before {
	content: '①'
}

.agreement>div.list>p:nth-of-type(2)::before {
	content: '②'
}

.agreement>div.list>p:nth-of-type(3)::before {
	content: '③'
}

.agreement>div.list>p:nth-of-type(4)::before {
	content: '④'
}

.agreement>div.list>p:nth-of-type(5)::before {
	content: '⑤'
}

.loginbox hgroup { display: block; padding:100px 30px; margin:0 auto; }
.loginbox hgroup > h1 { display:block; font-size:0px; height:140px; background-image:url(../images/sco_bi_temp.png); background-position: center; background-repeat: no-repeat; background-size: contain; } 

header.main { height: 70px !important; }
header.main + main { padding-top:70px !important; }
header > hgroup { display: none; }
header.main > hgroup {display:inline-block; width:150px; position:absolute; left:0px; top:50%; transform:translateY(-50%);}
header.main hgroup > h1 { display:inline-block; vertical-align: top; font-size:0px; width:170px;height:36px; background-image:url(../images/sco_top_bi_temp.svg); background-position: center; background-repeat: no-repeat; background-size: contain; } 

.nowSt { margin-top:0px !important; }

.naviWrap > .header > .topArea { height: 70px !important; }