/* 모달 검은색 배경 */
.modal{display: block; position: fixed; left: 50%; top: 50%;transform: translate(0%,-50%); max-width:100%; width:100%;  height: 100%;  z-index: 9999; max-width:420px; }
.modal::before{content:'';display: block; width: 100%;    max-width: 420px;height: 100%;position: absolute;left:50%; top:50%;transform: translate(-50%,-50%); background-color: hsla(0,0%,0%,0.4); }
.popup_m.modal{width:auto !important; }
.modal-wrap {position: relative; width: auto; margin:auto; height: auto;
    top:50%; transform: translateY(-50%); background-color:#fff; z-index: 888; padding:1.2em; border-radius: 1.2em; text-align: center;}

.modal.type02::before{content:'';display: none; }
.modal.type02{ top:auto; bottom:0; transform: translateY(0);height: auto; max-height: 100vh; height: 100%;}
.modal.type02 .modal-wrap{bottom:0; transform: translateY(0);    top: auto; height: 100%; overflow-y: auto;}


/* 기본알람창 크기 */
.modal-wrap.modal-xsss{max-width:210px;}
.modal-wrap.modal-xss{max-width:384px;}
.modal-wrap.modal-xs{max-width: 420px;}
.modal-wrap.modal-smm{max-width: 600px;}
.modal-wrap.modal-sm{max-width: 760px;}
.modal-wrap.modal-md{max-width: 1024px;}
.modal-wrap.modal-lg{max-width: 1200px;}
    
    



.modal-out-tit{font-weight: 600; font-size: 1.2em;}
.modal-container-inner .txt{font-size: 1em; text-align: center; color: #666;}
.modal-container-inner .txt label{font-weight: inherit;}
.modal-container-inner .button{display: flex; margin-top: 1.4em;}
.modal-container-inner .button button{width: 100%; border-radius: .4em; padding:0.8em .8em;}
.modal-container-inner .button button + button{margin-left: .6em;}
.modal-container-inner .button button.save{background: #2A4186; color: #fff; border-color:#2A4186;}
.modal-container-inner .button button{background: #eee; color: #666; border-color:#eee;}


.modal-container-inner .input_box{font-weight: 600; margin-top: .8em;}
.modal-container-inner input{border:1px solid #eee; padding:.6em; border-radius: .2em;}



/*filter_modal*/
.filter_modal header .nav_inner.right  img{height: 1em;}
.filter_modal .modal-wrap{padding:0; text-align: left;}
.filter_modal .content + .content{border-top:0.6em solid #f1f1f1;}
.filter_modal .content {padding-top: 1em;padding-bottom: 1em;}


.card_modal .modal-container-inner {margin-top: .8em;}
.card_modal li{padding:.3em 0;}
.card_modal .modal-container-inner .checkbox_mark{display: flex;font-weight: 600;}
.card_modal .modal-container-inner .checkbox_mark p{font-weight: inherit;}
.card_modal .modal-container-inner .checkbox_mark p span{font-weight: inherit;}
.card_modal .modal-container-inner .checkbox_mark .card_numder{color: #888; margin-left: .2em;}


.index_modal .content .sec_title{text-align: left; margin-bottom: 1em;} 
.index_modal .sec_title h5{font-size: 1.4em; font-weight: 500; line-height: 1.4;}
.index_modal .sec_title h5 span{ font-weight: inherit;}
.index_modal .sec_title p{margin-top: .4em; font-size: 0.9em;}

.index_modal .but{margin-top: .4em;}
.index_modal .but button{    height: 35px;border-radius: .4em;}

.index_modal .modal_bot{margin-top: 1em;display: flex; justify-content: space-between;}
.index_modal .modal_bot button{color: #888; font-size: 0.9em;}
.index_modal .product_list li+li{margin-top: 1em;}
.index_modal .product_list.type04 .thumbnail {width: 7em;   height: 7em;}
.index_modal .product_list.type04 .text_box {width: calc(100% - 7em);}





.review_photo_modal header,
.review_photo_modal .modal-wrap{background: #111; color: #eee; border-radius:0;}
.review_photo_modal .header .sub_top_tit{color: #eee;}
.review_photo_modal .header{border-color:#333;}
.review_photo_modal .nav_inner.right > span{filter: invert(100%);}

.review_photo_modal .swiper-wrapper{align-items: center;}
.review_photo_modal .swiper-slide img{width:100% ;}

.review_photo_modal .content{height: 77vh;}
.review_photo_modal .content > div,
.review_photo_modal .swiper{height: 100%;}
.review_photo_modal .modal_swiper .swiper-slide{align-items: center; display: flex;}
.review_photo_modal .modal_swiper .swiper-button-next,
.review_photo_modal .modal_swiper .swiper-button-prev{top:50%;transform: translateY(-50%); margin:0;}

.review_photo_modal .modal_swiper .swiper-button-next::after,
.review_photo_modal .modal_swiper .swiper-button-prev::after{color: #fff; font-size: 1.7em;}

.review_photo_modal .view_fot{background: transparent; border-color:#333}
.review_photo_modal .view_fot .inner{display: block;}
.review_photo_modal .review_textbox{margin-bottom: 1.4em;font-size: 0.95em; font-weight: 400;}
.review_photo_modal .review_textbox p,
.review_photo_modal .review_textbox span{font-weight: inherit;}
.review_photo_modal .view_fot .buy button{border:1px solid #888; background: transparent; color: #eee; font-size: 1em; font-weight: 200;}


.simple_modal .modal-wrap{padding:.2em 0 .5em; }
.simple_modal ul li{padding:.7em;}
.simple_modal ul li + li{border-top: 1px solid #ddd;}



.package_modal::before{top:-50%;height: 150%;}
.package_modal{bottom:0;    top: auto;transform: none; height: auto;}
.package_modal .modal-wrap{bottom:0;top:auto; transform: none;}

.package_modal .buy button{font-size: 1.1em; color: #fff;  border-radius: .2em; align-items: center; width: 100%; height: 100%; background: #2A4186; height: 42px;}

.package_modal .sec_con .pay_detai_lcon{padding:.8em 0}
.package_modal .sec_con + .sec_con{margin-top: 1.4em;}
.package_modal .sec_con {border-bottom:1px solid #ddd;}
.package_modal .sec_con em{font-weight: bold; text-align: left; display: block;  border-bottom:1px solid #888; padding-bottom: .4em;}


.package_modal .agree_sec{border:none;}
.package_modal .agree_sec em{border:none; padding-bottom: 0;}
.package_modal .agree_sec li{position: relative;}
.package_modal .agree_sec li:first-child{margin-bottom: .8em;}
.package_modal .agree_sec li+li{margin-top: .8em;}


.package_modal .agree_sec button{position: absolute;right:0;top:50%;transform: translateY(-50%); font-size: 0.85em;color: #888; text-decoration: underline;}

/* ********************************************* *
*960px max
* ********************************************* */
@media screen and (max-width:960px){
    .modal{transform: translate(-50%, -50%);top:50%; bottom: auto;        padding: 1.2em;}
    .modal .view_fot{position: fixed; bottom:0;}
    
    .modal.type02{height: auto; padding: 0; left: 50%; transform: translate(-50%);}
    .filter_modal .modal-container-inner {overflow-y: scroll; max-height: calc(100vh - 3.5em); padding-bottom: 5.5em;}
    }
/* ********************************************* *
*800px max
* ********************************************* */
@media screen and (max-width:800px){
.modal {  transform: translate(-50%, -50%);}

.modal.type02{transform: translate(-50%, -50%);top:50%; bottom: auto; position: fixed;padding:0}


}