@charset "utf-8";

/* 메인 시작
------------------------------------------------------ */
.indexWr { 
	padding-bottom:80px;
}
.mBnrWr { 
	display:flex;
	align-items:center;
	height: 108px;
	padding:0 100px 0 16px;
	background:#EEFAFF url(/Form/_web/images/mBnrBg01.png) no-repeat center right 16px;
}
.mBnrWr .tit01 { 
	margin:0 0 6px;
	font-weight: 700;
	font-size: 17px;
	color: #212121;
}
.mBnrWr .tit01 span { 
	color: #28BDFF;
}
.mBnrWr .txt01 { 
	font-size: 14px;
	color: #4F788B;
}
.mSelLstWr { 
	padding:0 16px;
}
.mSelLstWr .btnSel { 
	position:relative;
	display:block; 
	width: 100%;
	padding:17px 20px 15px 30px;
	border-bottom:1px solid #F0F0F0;
	text-align: left;
}
.mSelLstWr .btnSel:before,
.mSelLstWr .btnSel:after {
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
}
.mSelLstWr .btnSel:before {
	width: 20px;
	height: 20px;
	top: 50%;
	left: 0;
	margin:-10px 0 0;
	background-repeat:no-repeat;
	background-size:cover;
}
.mSelLstWr .btnSel:after { 
	width: 9px;
	height: 9px;
	top: 22px;
	right: 8px;
	border-top:2px solid #999;
	border-right:2px solid #999;
	transform:rotate(45deg);
	transition:all .3s ease;
}
.mSelLstWr .btnSel .btnTxt01 {
	position:relative;
	display:inline-block;
	font-weight: 500;
	font-size: 15px;
	color: #212121;
}
.mSelLstWr .btnSel .btnTxt01.on { 
	padding:0 29px 0 0;
}
.mSelLstWr .btnSel .btnTxt01.on:after { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 16px;
	height: 16px;
	top: 2px;
	right: 0;
	background:url(/Form/_web/images/mSelLstChk01.svg) no-repeat center / cover;
}
.mSelLstWr .btnSel .btnTxt02 { 
	display:none;
	margin:7px 0 0;
	font-size: 14px;
	color: #EF5656;
}
.mSelLstWr .btnSel.stDate01:before { 
	background-image: url(/Form/_web/images/mSelLst_date01.svg);
}
.mSelLstWr .btnSel.stArea01:before { 
	background-image: url(/Form/_web/images/mSelLst_area01.svg);
}
.mSelLstWr .btnSel.stInput01:before { 
	background-image: url(/Form/_web/images/mSelLst_input01.svg);
}
.mSelLstWr .btnSel.on:after { 
	top: 20px;
	transform:rotate(135deg);
}
.mSelLstWr .selBox01 { 
	display:none;
	padding:18px 17px 19px;
	background: #FAFAFA;
	border-bottom:1px solid #F0F0F0;
}
.mSelLstWr .selBox01 .iptTit01 { 
	display:block;
	margin:0 0 8px;
	font-size: 14px;
	color: #212121;
}
.mSelLstWr .selBox01 * + .iptTit01 { 
	margin-top:14px;
}
.mSelLstWr .selBox01 .beachBox .tit01 { 
	margin:0 0 16px;
	padding:10px;
	background:linear-gradient(to bottom, #276EFF, #27BEFF, #F0FBFF);
	font-weight: 700;
	font-size: 15px;
	color: #FFF;
	text-align: center;
}
.mSelLstWr .selBox01 .beachScrBox { 
	overflow-x:auto;
}
.mSelLstWr .selBox01 .beachBox .lst01,
.mSelLstWr .selBox01 .beachBox .lst01 .sLst01 { 
	display:flex;
}
.mSelLstWr .selBox01 .beachBox .lst01 { 
	gap:24px;
}
.mSelLstWr .selBox01 .beachBox .lst01 li { 
	flex-shrink:0;
	text-align: center;
}
.mSelLstWr .selBox01 .beachBox .lst01 .sLst01 { 
	gap:8px;
}
.mSelLstWr .selBox01 .beachBox .lst01 .sLst01 + .sLst01 { 
	margin-top:8px;
}
.mSelLstWr .selBox01 .beachBox .lst01 .beachSel { 
	position:relative;
	display:flex;
	align-items:center; 
	justify-content:center; 
	width: 24px;
	height: 24px;
	background:url(/Form/_web/images/mbeachSel01_off.svg) no-repeat center / cover;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	color: #666;
	text-align: center;
}
.mSelLstWr .selBox01 .beachBox .lst01 .beachSel:after { 
	content:attr(data-content);
	position:absolute;
	box-sizing:border-box;
	display:block;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
	-webkit-text-stroke: 2px #FFF;
	z-index: 1;
}
.mSelLstWr .selBox01 .beachBox .lst01 .beachSel span { 
	position:relative; 
	z-index: 2;
}
.mSelLstWr .selBox01 .beachBox .lst01 .beachSel.on { 
	background-image:url(/Form/_web/images/mbeachSel01_on.svg);
	color: #3A3A3A;
}
.mSelLstWr .selBox01 .beachBox .lst01 .lstTxt01 { 
	display:inline-block;
	margin:6px 0 0;
	padding:3px 10px;
	background: #899194;
	border-radius: 5px;
	font-size: 13px;
	color: #FFF;
}
.mBtmWr { 
	position:fixed; 
	width: 100%;
	max-width: 360px;
	bottom: 0;
	left: 50%;
	padding:16px;
	transform:translateX(-50%);
	background: #FFF;
	border-top:1px solid #F0F0F);
	z-index: 1;
}
.mBtmWr .btn { 
	display:block; 
	width: 100%;
	padding:13px 13px 14px;
	background: #28BDFF;
	border:1px solid #28BDFF;
	border-radius: 10px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0;
	color: #FFF;
	transition:all .3s ease;
}
.mBtmWr .btn:focus,
.mBtmWr .btn:hover { 
	background: #FFF;
	color: #28BDFF;
}
/* 메인 끝
------------------------------------------------------ */