@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css);

* { 
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html, body { 
	position:relative; 
	width: 100%;
	overflow-x:hidden;
}
body { 
	font-family: Pretendard, sans-serif;
	font-weight:400;
	line-height:1.3;
	letter-spacing:-.3px;
	word-break:keep-all;
}
a { 
	text-decoration:none; 
}
li { 
	list-style:none; 
}
button { 	
	font-family: Pretendard, sans-serif; 
}
button, a {
	cursor:pointer;
}
input, button {
	background: transparent;
	border:none;
}

.wrapper { 
	max-width: 360px;
	margin:0 auto;
	padding:20px;
}
.comPopBg01 { 
	position:fixed;
	display:none; 
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background: rgba(0,0,0,.7);
	z-index:10;
}
.comPopBg01 .popBox01 { 
	position:absolute; 
	width: 270px;
	max-width: 90%;
	top:50%;
	left:50%;
	padding:29px 16px 16px;
	transform:translate(-50%, -50%);
	background: #FFF;
	border-radius: 15px;
	text-align: center;
}
.comPopBg01 .popBox01 .popClose { 
	position:absolute; 
	display:block; 
	width: 20px;
	height: 20px;
	top:-25px;
	right:5px;
	font-size: 0;
}
.comPopBg01 .popBox01 .popClose:before,
.comPopBg01 .popBox01 .popClose:after { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 20px;
	height: 2px;
	top:50%;
	left:50%;
	margin:-1px 0 0 -10px;
	background: #FFF;
	border-radius: 4px;
}
.comPopBg01 .popBox01 .popClose:before { 
	transform:rotate(45deg); 
}
.comPopBg01 .popBox01 .popClose:after { 
	transform:rotate(-45deg); 
}
.comPopBg01 .popBox01 .imgBox { 
	margin:0 auto 15px;
	font-size: 0;
}
.comPopBg01 .popBox01 .txt01 {
	margin:0 0 9px;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -1px;
	color: #212121;
}
.comPopBg01 .popBox01 .txt02 { 
	margin:0 0 24px;
	font-size: 12px;
	color: #777;
}
.comPopBg01 .popBox01 .popBtmBtn { 
	display:block; 
	width: 100%;
	padding:10px 10px 11px;
	background: #276FB7;
	border-radius: 8px;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0;
	color: #FFF;
}

/* 키패드 시작
------------------------------------------------------ */
.kpLogo { 
	margin:0 auto 10px;
	text-align: center; 
}
.kpLogo img { 
	max-width:100%;
	max-height: 32px;
}
.keypadWr { 
	padding:30px;
	border:1px solid #E0E0E0;
	border-radius: 8px;
}
.kpTit01 { 
	margin:0 0 29px;
	font-weight: 700;
	font-size: 22px;
	text-align: center;
	color: #212121;
}
.kpTit01 span { 
	display:block;
	margin:5px 0 0;
	font-size: 14px;
}
.kpIptLst { 
	display:flex;
	gap:8px;
	margin:0 0 33px;
}
.kpIptLst li { 
	position:relative; 
	width: calc((100% - 24px)/3);
	padding:22.69% 0 0;
}
.kpIptLst .kpIpt { 
	position:absolute; 
	width: 0;
	height: 0;
	top:0;
	left:0;
	overflow:hidden;
}
.kpIptLst .kpLbl { 
	position:absolute; 
	display:flex;
	align-items:center; 
	justify-content:center; 
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background: #E0E0E0;
	border-radius: 8px;
	font-weight: 700;
	font-size: 20px;
	color: #FFF;
	text-align: center;
}
.kpIptLst .kpLbl.on { 
	background: #007AFF; 
}
.kpBtnBox { 
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:0 0 33px;
}
.kpBtnBox .kpBtn {
	display:block; 
	width: calc((100% - 10px)/2);
	padding:16px 8px;
	background: #F0487D;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	color: #FFF;
}
.kpBtnBox .kpBtn.on { 
	background: #0C5EFF;
}
.kpNumLst { 
	display:flex;
	flex-wrap:wrap; 
	gap:8px;
	margin:0 0 16px;
}
.kpNumLst li { 
	position:relative;
	width: calc((100% - 16px)/3);
	padding:14.5% 0 0;
}
.kpNumLst .kpNum,
.kpNumLst .kpNumIco { 
	position:absolute;
	display:block; 
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	border-radius: 8px;
	text-align: center;
}
.kpNumLst .kpNum { 
	border:1px solid #C4C6C8;
	border-radius: 8px;
	font-weight: 700;
	font-size: 18px;
	color: #212121;
}
.kpNumLst .kpNumIco {
	display:flex;
	align-items:center; 
	justify-content:center;
	gap:2px;
	border:1px solid #0C5EFF;
	border-radius: 8px;
}
.kpNumLst .kpNumIco span {
	display:block; 
}
.kpNumLst .kpNumIco .btnIco {
	font-size: 0; 
}
.kpNumLst .kpNumIco .btnTxt { 
	font-weight: 700;
	font-size: 14px;
	color: #0C5EFF;
}
/* 키패드 끝
------------------------------------------------------ */
/* 달력 시작
------------------------------------------------------ */
.calendarBox { 
	margin:0 0 19px;
	padding:26px 16px 30px;
	border:1px solid #E0E0E0;
	border-radius: 8px;	 
}
#calendar { 
	margin:0 0 13px;
}
.fc .fc-toolbar.fc-header-toolbar { 
	margin:0 0 17px;
}
.fc-header-toolbar .fc-toolbar-chunk:nth-child(2) > div { 
	display:flex;
	align-items:center;
	gap:7px;
}
.fc .fc-button { 
	position:relative; 
	display:block;
	width: 22px;
	height: 22px;
	background: #F8F9FA !important;
	border:none;
	border-radius: 50%;
	font-size: 0;
}
.fc .fc-button-primary:focus {
	border-color:transparent;
	box-shadow:none;
}
.fc .fc-button:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 8px;
	height: 8px;
	top:50%;
	left:50%;
	border-top:2px solid #9E9E9E;
	border-right:2px solid #9E9E9E;
}
.fc .fc-button span { 
	display:none;
}
.fc .fc-button.fc-prev-button:before {
	margin:-4px 0 0 -3px;
	transform:rotate(225deg);
}
.fc .fc-button.fc-next-button:before {
	margin:-4px 0 0 -5px;
	transform:rotate(45deg);
}
.fc .fc-toolbar-title { 
	font-weight: 700;
	font-size: 18px;
	color: #212121;
}
.fc-theme-standard .fc-scrollgrid { 
	border:none; 
}
.fc-theme-standard td, 
.fc-theme-standard th { 
	border:none; 
}
.fc-theme-standard thead { 
	border-bottom:1px solid #E0E0E0;
}
.fc-theme-standard th { 
	font-weight: 500; 
	font-size: 12px;
	color: #212121;
}
.fc td { 
	position:relative;
	padding:4px 0;
}
.fc .fc-daygrid-day-top { 
	flex-direction:row;
	justify-content:center; 
}
.fc .fc-daygrid-day.fc-day-today { 
	background:transparent; /* 오늘 날짜 영역 배경색 */
}
.fc .fc-daygrid-day-number { 
	display:flex;
	align-items:center; 
	justify-content:center; 
	width: 32px;
	height: 32px;
	padding:0;
	background: #D9D9D9;
	border-radius: 50%;
	font-weight:500;
	font-size: 13px;
	letter-spacing: -.22px;
	text-align: center;
	color: #212121;
}
.fc .fc-daygrid-day-number.on { 
	background: #007AFF;
	color: #FFF;
}
.fc .fc-daygrid-day-events { 
	position:absolute !important;
	width: 0;
	height: 0;
	top:0;
	left:0;
	border:none;
	font-size: 0;
	overflow:hidden;
}
.calBtn { 
	display:block; 
	width: 100%;
	padding:18px 10px 16px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
}
.calBtn.st01 { 
	background: #0C5BFE;
	color: #FFF;
}
.calBtn.st02 { 
	background: #E0E0E0;
	color: #9E9E9E;
}
.calBtn.st03 { 
	background: #D4E2F0;
	color: #212121;
}
.keypadWr + .calBtn { 
	margin-top:12px;
}
.calBtn + .calBtn { 
	margin-top:8px;
}
.calendarInfo .tit { 
	margin:0 0 13px;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0;
	color: #212121;
}
.calendarInfo .infoLst { 
	margin:0 0 18px;
}
.calendarInfo .infoLst li { 
	position:relative;
	margin:0 0 3px;
	padding:0 0 0 18px;
	font-weight: 500;
	font-size: 15px;
	color: #868E96;
}
.calendarInfo .infoLst li:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 14px;
	height: 14px;
	top:1px;
	left:0;
	background:#276FB7 url(/img/custom/attInfo01.svg) no-repeat center center;
	border-radius: 50%;
}
.calendarInfo .infoLst li:last-child { 
	margin:0;
}
/* 달력 끝
------------------------------------------------------ */