/*modal style*/
.modal-layer { display: none; position: relative; width: 550px; max-width: calc(100% - 48px); max-height: calc(100% - 48px); border-radius: 10px; box-sizing: border-box; background: #fff; }

.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-color: rgba(0, 0, 0, 0.32); }
.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%; overflow: auto; }
.modal-container .box-modal { overflow-y: auto; }


/*주문 취소 모달창*/
.modal-group-cancel .modal-layer { animation: modalMotion .5s ease-out; }
.modal-group-cancel .modal-top { padding: 50px; box-sizing: border-box; }
.modal-group-cancel .modal-top .tit { font-size: 24px; font-weight: 700; color: #000; }
.modal-group-cancel .order-num { display: flex; padding: 28px 50px; box-sizing: border-box; background: #f8f8f8; }
.modal-group-cancel .order-num .tit { font-size: 20px; font-weight: 600; color: #717171; }
.modal-group-cancel .order-num .txt { margin-left: 4px; font-size: 20px; font-weight: 700; color: #000; }
.modal-group-cancel .inner { padding: 0 50px 50px; box-sizing: border-box; }
.modal-group-cancel .article:not(:last-child) { padding-bottom: 20px; border-bottom: 1px solid #d8d8d8; box-sizing: border-box; }
.modal-group-cancel .top-article { padding: 30px 0 10px; box-sizing: border-box; }
.modal-group-cancel .top-article .tit { font-size: 24px; font-weight: 700; color: #000; }
.modal-group-cancel .textarea-frm { display: block; width: 100%; height: 150px; padding: 24px; border: 1px solid #d8d8d8; border-radius: 10px; box-sizing: border-box; font-size: 16px; font-weight: 500; color: #717171; resize: none; }
.modal-group-cancel .btn-group2 { margin-top: 35px; }


/*메시지 모달창*/
.modal-group-message .modal-layer { width: 500px; padding: 24px; border-radius: 28px; box-shadow: 0 4px 16px -5px rgba(0, 0, 0, 0.25); box-sizing: border-box; animation: modalMotion .5s ease-out; }
.modal-group-message .modal-message .tit { font-size: 18px; font-weight: 600; color: #000; line-height: 32px; }
.modal-group-message .modal-message .txt { margin-top: 16px; font-size: 14px; font-weight: 400; color: rgba(0, 0, 0, 0.6); }
.modal-group-message .btn-group-message { display: flex; justify-content: flex-end; align-items: center; margin-top: 24px; }
.modal-group-message .btn-group-message .btn { display: flex; justify-content: center; align-items: center; height: 40px; margin-right: 40px; padding: 0 12px; border: none; box-sizing: border-box; background: none; font-size: 14px; font-weight: 500; color: #000; letter-spacing: 0.1px; }
.modal-group-message .btn-group-message .btn:last-child { margin-right: 0; }


/*motion*/
@keyframes modalMotion {
  0% {
     bottom: -100%;
  }
  100% {
      bottom: 0;
  }
}


@media only screen and (max-width: 984px) {
	/*주문 취소 모달*/
	.modal-group-cancel .modal-top { padding: 24px; box-sizing: border-box; }
	.modal-group-cancel .modal-top .tit { font-size: 16px; }
	.modal-group-cancel .order-num { padding: 24px; box-sizing: border-box; }
	.modal-group-cancel .order-num .tit { font-size: 14px; }
	.modal-group-cancel .order-num .txt { font-size: 14px; }
	.modal-group-cancel .inner { padding: 0 24px 24px; box-sizing: border-box; }
	.modal-group-cancel .top-article { padding: 24px 0 10px; box-sizing: border-box; }
	.modal-group-cancel .top-article .tit { font-size: 16px; }
	.modal-group-cancel .list-ck li:not(:last-child) { margin-bottom: 10px; }
	.modal-group-cancel .textarea-frm { padding: 16px; box-sizing: border-box; font-size: 14px; }
	.modal-group-cancel .btn-group2 { margin-top: 20px; }
}