/*modal style*/
.modal-layer { display: none; position: relative; width: 100%; max-width: 622px; padding: 40px; box-sizing: border-box; background: #fff; overflow: hidden; animation: modalMotion .5s ease-out; }

.dim-layer { display: none; position: fixed; _position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; }
.dim-layer-on { display: flex; }
.dim-layer .dim-bg { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0 auto; background: rgba(0, 0, 0, 0.2); }
.dim-layer .modal-layer { display: block; }

.modal-group { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.modal-container { height: 100%; background: #fff; overflow: auto; }
.modal-container .box-modal { height: calc(100% - 44px); overflow-y: auto; }

.modal-top { margin-bottom: 20px; }
.modal-top .modal-tit { font-size: 16px; font-weight: 700; color: #101010; text-align: center; line-height: 24px; }

.btn-group-modal { display: flex; justify-content: center; align-items: center; }
.btn-group-modal .btn-modal { width: 108px; height: 47px; border: 1px solid #101010; border-radius: 24px; box-sizing: border-box; background: none; font-size: 16px; font-weight: 700; color: #101010; }

.modal-group .btn-group-center .btn { width: 160px; }
.modal-group .btn-group-center .btn:not(:last-child) { margin-right: 10px; }


/*약관 보기 모달창*/
.modal-group .policy-group { margin-bottom: 20px; }
.modal-group .policy-group .tit { margin-bottom: 4px; font-size: 14px; font-weight: 400; color: #101010; line-height: 21px; }
.modal-group .policy-group .txt {
	height: 314px;
	padding: 20px;
	box-sizing: border-box;
	background: #f7f7f8;
	font-size: 14px;
	font-weight: 400;
	color: #939393;
	line-height: 21px;
	overflow-y: auto;
}
.modal-group .policy-group .txt table {
	border-spacing: 0px;
	border-collapse: collapse;
}
.modal-group .policy-group .txt th,
.modal-group .policy-group .txt td {
	border: 1px solid #939393;
	padding: 5px;
}
.modal-group .policy-group .txt th {
	background-color: #efefef;
}


/*예약 취소 모달창*/
.modal-group .reserve-cancel .txt p { margin-bottom: 10px; font-size: 16px; font-weight: 400; color: #101010; line-height: 24px; }
.modal-group .reserve-cancel .textarea-cancel { display: block; width: 100%; height: 130px; margin-bottom: 20px; padding: 20px; border: none; box-sizing: border-box; background: #f7f7f8; font-size: 14px; font-weight: 400; color: #101010; }
.modal-group .reserve-cancel .textarea-cancel::-ms-input-placeholder { font-weight: 400; color: #939393; }
.modal-group .reserve-cancel .textarea-cancel::-webkit-input-placeholder { font-weight: 400; color: #939393; }
.modal-group .reserve-cancel .textarea-cancel::-moz-placeholder { font-weight: 400; color: #939393; }
.modal-group .reserve-cancel .ck-group { margin-bottom: 20px; }
.modal-group .reserve-cancel .ck-custom + label .label { font-size: 16px; font-weight: 400; }
.modal-group .reserve-cancel .ck-custom + label .label .frm-message { margin-top: 0; margin-left: 12px; }


/*바텀시트 모션*/
/*motion*/
@keyframes modalMotion {
  0% {
     bottom: -100%;
  }
  100% {
      bottom: 0;
  }
}


@media only screen and (max-width: 1280px) {
	/*modal style*/
	.modal-layer { padding: 40px 20px; box-sizing: border-box; }
	
	.modal-group .btn-group-center .btn { width: 100%; }
	
	/*예약 취소 모달창*/
	.modal-group .reserve-cancel .txt p { font-size: 14px; line-height: 21px; }
	.modal-group .reserve-cancel .textarea-cancel { padding: 10px; box-sizing: border-box; }
	.modal-group .reserve-cancel .ck-custom + label .label { font-size: 14px; }
}