/*modal style*/
.modal-layer { display: none; position: relative; width: calc(100% - 36px); max-width: 250px; max-height: calc(100% - 36px); border-radius: 5px; 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% - 34px); padding: 22px 30px 32px; box-sizing: border-box; background: #fae4e7; overflow-y: auto; }

.modal-top { display: flex; justify-content: center; align-items: center; position: relative; height: 34px; padding: 0 12px; box-sizing: border-box; background: #fc5757; }
.modal-top .modal-tit { font-size: 15px; font-weight: 600; color: #fff; text-align: center; letter-spacing: -0.3px; }
.modal-top .modal-close { position: absolute; right: 12px; width: 14px; height: 14px; border: none; background: url('../img/common/ico_close1_modal.svg') center center no-repeat; }

.modal-message .tit { font-size: 13px; font-weight: 400; color: #000; text-align: center; line-height: 18px; }
.modal-message .txt { margin-top: 16px; font-size: 10px; font-weight: 400; color: #000; text-align: center; letter-spacing: -0.2px; line-height: 12px; }

.inp-group-modal { margin-top: 14px; }
.inp-group-modal > div:not(:last-child) { margin-bottom: 12px; }
.inp-group-modal .inp-frm { width: 100%; height: 36px; padding: 0 10px; border: none; box-sizing: border-box; background: #fff; font-size: 10px; font-weight: 400; color: #000; text-align: center; letter-spacing: -0.2px; }

.btn-group-modal { display: flex; justify-content: center; align-items: center; margin-top: 20px; }
.btn-group-modal .btn { margin: 0 4px; }
.btn-group-modal .btn:only-child { margin: 0; }
.btn-group-modal .btn-modal { width: 78px; height: 22px; border: none; border-radius: 11px; box-sizing: border-box; background: #fc5757; font-size: 10px; font-weight: 400; color: #fff; letter-spacing: -0.2px; }
.btn-group-modal .btn-modal-v1 { background: #f4b2ba; }


/*와이드 모달창*/
.modal-group-wide .modal-layer { max-width: 313px; }
.modal-group-wide .modal-layer .modal-container .box-modal { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }


/*필터 모달창*/
.modal-group-filter .modal-layer { border-radius: 10px; box-sizing: border-box; }
.modal-group-filter .modal-container .box-modal { height: auto; padding: 0; background: #fff; }
.btn-group-filter .btn { display: block; width: 100%; height: 50px; border: none; border-bottom: 1px solid #ddd; box-sizing: border-box; background: #fff; font-size: 13px; font-weight: 500; color: #000; }
.btn-group-filter .btn:last-child { border-bottom: none; }
.btn-group-filter .btn.active { color: #fc5757; }


/*이용약관 모달창*/
.modal-group-policy .modal-top { background: #a6b1b3; }
.modal-group-policy .box-modal { background: #fff; }
.modal-group-policy .txt { font-size: 7px; font-weight: 400; color: #000; text-align: center; letter-spacing: -0.14px; line-height: 9px; white-space: pre-line; }


/*하단 버튼 고정 모달창*/
.modal-group-v1 .modal-container { background: #fae4e7; }
.modal-group-v1 .modal-container .box-modal { height: calc(100% - 130px); padding-bottom: 0; }
.modal-group-v1 .modal-bottom { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 96px; background: #fae4e7; }
.modal-group-v1 .btn-group-modal { margin-top: 0; }


/*선물 보내기 모달창*/
.box-scroll { height: 300px; margin-top: 20px; padding: 17px 13px; border-radius: 5px; box-sizing: border-box; background: #fff; overflow-y: auto; }
.box-scroll .list-item2 .item-card { padding: 12px 0; box-sizing: border-box; }
.box-scroll .list-item2 .item-card .img-group { margin-right: 10px; }
.box-scroll .list-item2 .item-card .item-info { width: calc(100% - 88px); padding-top: 12px; box-sizing: border-box; }
.box-scroll .list-item2 .item-card .item-info .item-data { display: block; }
.box-scroll .list-item2 .ck-group { margin: 0 0 0 auto; }
.box-scroll .list-item2 .ck-group .ck-custom2 + label { display: flex; justify-content: flex-end; align-items: center; font-size: 10px; font-weight: 400; color: #a6b1b3; letter-spacing: -0.5px; }
.box-scroll .list-item2 .ck-group .ck-custom2 + label .custom { width: 13px;  height: 13px; margin-left: 5px; }
.gift-guide { margin-top: 10px; font-family: 'TmoneyRoundWind'; font-size: 9px; font-weight: 400; color: #000; text-align: center; letter-spacing: -0.45px; }


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


/*motion2*/
@keyframes modal2Motion {
  0% {
     bottom: -100%;
  }
  100% {
      bottom: 40px;
  }
}