/* 모달 검은색 배경 */
.modal{display: block; position: fixed; z-index: 100; left: 0; top: 0; bottom:0; 
    max-width:100%; width:100%;  height: auto;  background-color: hsla(0,0%,0%,0.4); padding-left:16px; padding-right:16px;    z-index: 9999999;}

.modal-wrap {position: relative; width: auto; margin:auto; height: auto; top:50%; transform: translateY(-50%); background:#fff; box-sizing: border-box; border-radius: 5px; z-index: 101;}
.modal-xl{max-width:1200px;}
.modal-md{max-width:768px;}
.modal-md2{max-width:450px;}
.popup_m .modal-md2 {max-width: 400px;}
.modal-sm{max-width:1030px;}
.modal-xs{max-width:580px;}

.modal-container{max-width:1024px; width: 100%; margin:auto; z-index:200;
position: relative;
/* display: -ms-flexbox; display: flex; -ms-flex-direction: column;  flex-direction: column;  pointer-events: auto; */
border-radius: .3rem;
outline: 0; }

/* 모달 제목 */
.modal-top{background: #333; border-radius: 5px 5px 0 0; padding-bottom: 15px; box-sizing: border-box;}
.modal-txt{color: #fff; text-align: center; padding-top: 15px;}

/* 모달 닫기 */
.modal-close{position: absolute; right:15px; top:15px; color: #fff; font-size: 20px; line-height:1; cursor: pointer; display: block; z-index: 102;}
.modal-container .modal-out-tit{padding-bottom:16px; text-align: center;  font-weight:400; font-size: 16px; color: #333;}
.sear_produ .modal-container .modal-out-tit{ border-bottom: 2px solid #333; margin-bottom:20px;}


.modal-container .example .text{line-height: 1.53; padding-bottom:12px;}
.modal-container .example .text .content{word-break: break-all; white-space: normal;}

/* 모달창 내용 */
.modal-container{padding-bottom: 45px;}
.modal-txt_wrap{padding: 45px 25px 0;}
.modal-container-inner > h2 {font-size: 45px; color: #333; text-align: center;}


/* 화면들어왔을 때 바로 나오는 모달 */
.auto-modal{display: block; position: fixed; left: 0; top: 0; bottom:0; max-width:100%; width:100%;  height: auto;  padding-left:16px; padding-right:16px;    z-index: 9999999;}
.auto-modal-wrap{position: relative; width: auto; height: auto; top:50%; left: 50%; transform: translate(-50%, -50%); background:#fff; box-sizing: border-box; border-radius: 5px; z-index: 101;}
.auto-modal-out-tit{text-align: center; font-weight: 400; font-size: 16px; color: #333; 
    /* margin-bottom: 20px; */}
.auto-modal_btn {text-align: center; padding: 25px;}
.auto-modal_btn > button{padding: 5px 20px; border-radius: 4px; font-size: 18px;}
.auto-modal_close{background-color: #ddd; color: #fff;}
.auto-modal_check{border: 1px solid #ddd; color: #333;}
/* 이미지 모달 */
.img-modal{width: 80%; position: absolute; left: 30%; top: 2%; transform: translateX(-50%); padding-left:16px; padding-right:16px; z-index: 9999999;}
.img-modal > div{width: calc(100%/2);}
.modal_btn{text-align: right; padding: 15px; background: #333; color: #fff;}
.modal_btn > button{color: #fff;}

/* 비밀번호 변경 */
.input_text {width: 100%; padding: 10px 15px; margin-bottom: 10px; border: 1px solid #1112;}
.jion_title > p {color: #222;}
.jion_title{padding-bottom: 10px;}
.password_modal{z-index: 9;}

/*  본인인증 모달 */
.certification_number > div {display: flex; justify-content: center; gap: 5px; margin-top: 10px;}
.certification_number > div > input { width: 250px; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px;}
.sub_txt-wrap {position: absolute; top: 50%; left: 100%; transform: translate(-140%,-50%); font-weight: 400; font-size: 12px;}
.certify_btn{border: 1px solid #e3b54b; border-radius: 4px; width: 80px; background-color: #e3b54b; color: #fff; font-family: 'Pretendard'; font-size: 15px; font-weight: 500;}
.num_input{width: 250px; height: 45px; padding: 10px; border: 1px solid #1115; position: relative;}

/* ********************************************* *
* 1400px max
* ********************************************* */
@media (max-width:1400px){
}

/********************************************* *
* height 800px max
* ********************************************* */
@media (max-width:800px){


}
/* ********************************************* *
* 768px max
* ********************************************* */
    @media (max-width:768px){


}

    /* ********************************************* *
    * width 800px max
    * ********************************************* */
    @media (max-width:640px){
        
    }
    
    

/* ********************************************* *
* 480px max
* ********************************************* */
@media (max-width:480px){
.modal-wrap { top: 45%; border-radius: 0 0 5px 5px;}
.modal-container {padding-bottom: 10px;}
.modal-container .modal-out-tit {padding-bottom: 10px;}
.modal-txt_wrap {padding: 30px 25px 0;}
.modal-container {top: -10px;}
.modal-container-inner > h2 {font-size: 35px;}
.modal-container .modal-out-tit {font-size: 14px;}
}

/* ********************************************* *
* 388px max
* ********************************************* */
@media (max-width:388px){
    
}

/* ********************************************* *
* 387px max
* ********************************************* */
@media (max-width:387px){

}
/* ********************************************* *
* 500px max
* ********************************************* */
@media (max-width:500px){
}

/* ********************************************* *
* 350px max
* ********************************************* */
@media (max-width:350px){

}