/* 모달 */

.flex {display: flex;}

button{font-size: 16px;}

.modal{ position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; max-width: 100%; width: 100%; height: 100%; }
.modal-bg{    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0c0c0c66;
    opacity: .8;
    z-index: 100;
    transition: all .2s;
    }

.modal-wrap{position: relative; width: auto; margin: 0 auto; top: 50%; transform: translateY(-50%);  background-color: #fff; border-radius: 5px;/* border-radius: 4px; */ z-index: 120;box-shadow: 2px 4px 11px rgba(0,0,0,0.2);}
.login_modal .modal-con{padding: 40px 30px 25px; }
.modal-close{position: absolute; right: 16px; top: 16px; font-size: 1.35em; cursor: pointer; display: none; z-index: 102;}
.modal-body p.md-title{font-size: 20px; font-weight: 700;}
.modal-body .md-con{padding-top: 15px; font-weight: 400;}
.modal-body {text-align: center;}
.modal-body .md-con p{font-size: 16px; font-weight: 400;}
.modal-body .md-btn{text-align: right; padding-top: 50px;}
.modal-body .md-btn button{display: inline-block; cursor: pointer; margin:0 5px;  padding: 0 20px; height: 34px; border-radius: 3px; line-height: 34px; }
.button button {padding: 10px 20px; border-radius: 4px; border: 1px solid #ddd;}
.button button:first-child {margin-right: 5px;} 
.button button:last-child {border: 1px solid #ff4a6b; background-color: #ff4a6b; color: #fff;}

.modal_tittle {width: 100%; margin: 0 auto;}
.modal_tittle > h2 {padding: 30px 30px 20px; font-size: 24px;}
.profile_modal .modal-con{padding: 0px 30px 25px;}
.profile_modal .b_gray{padding: 20px 0; background-color: #f8f8f8; border-radius: 4px;}
.profile_modal .b_gray > h3 {font-size: 18px; margin-bottom: 10px;}
.profile_modal .file_input_wrap{display: flex; justify-content: space-between; gap: 5px; margin-top: 15px;}
.profile_modal .photo_input{width: 80%; cursor: pointer; border: 1px solid #ddd; padding: 12px 15px; border-radius: 4px;}
.profile_modal .photo_input > span {display: block; float: left; color: #888; font-size: 16px; font-weight: 400;}
.profile_modal .photo_input_button{ width: 25%;  cursor: pointer; background-color: #8888; padding: 12px 0; border-radius: 4px;}
.profile_modal .photo_input_button > span{color: #fff; font-weight: 500; font-size: 14px;}
.profile_modal form input[type=text].filebox {padding: 16px 8px; border: 1px solid #ddd;}
.profile_modal .posting_file_input_wrap {width: 80%;} 

.profile_re_modal .modal-con{padding: 0px 30px 25px;}
.profile_re_modal .b_gray{padding: 20px 20px; background-color: #f8f8f8; border-radius: 4px;}
.profile_re_modal .b_gray > p{display: block; text-align: left; margin-top: 3px;}
.profile_re_modal .modal_form_info li {margin-top: 15px;}
.profile_re_modal .modal_form_info li > div {display: flex; justify-content: space-between;}
.profile_re_modal .modal_form_info li > div > p {display: inline-flex; align-items: center; font-size: 18px; width: 110px; text-align: left; font-weight: 500;}
.profile_re_modal .modal_form_info li > div > div > div {width: 325px; display: flex; gap: 5px;}
.profile_re_modal .modal_form_info li > div > div  input {width: 100%; border: 1px solid #f1f1f1; background-color: #f1f1f1; padding: 12px 15px; border-radius: 4px; font-size: 16px;}
.profile_re_modal .modal_form_info li > .new_phone_number input {background-color: #fff;}
.profile_re_modal .modal_form_info li > .new_phone_number > div > div:last-child {margin-top: 10px;}
.profile_re_modal .modal_form_info li > div > div  button {width: 35%; cursor: pointer; padding: 2px 10px; border-radius: 4px; background-color: #a6a6a6; color: #fff;}

.profile_re_modal .birth {display: flex; border: 1px solid #ddd; border-radius: 4px;}
.profile_re_modal .birth > div {width: calc(100%/3); padding: 12px 15px; border-radius: 4px;}
.profile_re_modal .birth > div > select {width: 100%; border: none; font-size: 16px;}
.profile_re_modal .word_wrap {width: 325px; border-radius: 4px; border: 1px solid #ddd;}
.profile_re_modal .word_wrap > select {width: 95%; padding:12px 15px; border: none; float: left; font-size: 16px; }
.profile_re_modal .word_wrap > select > option {font-size: 16px;}

.service-modal .modal-wrap.modal-sm {height: 650px; overflow-y: scroll;}
.service-modal .button button:last-child {background-color: #fff; border: 1px solid #ddd; color: #444;}
.service-modal ul > li {margin-bottom: 20px;}
.service-modal ul > li > .con_box {height: 260px; font-size: 14px; border: 1px solid #ddd; padding: 8px; margin-top: 8px; text-align: left;}
.service-modal .md-con {overflow-y: scroll; overflow-x: hidden; width: 100%; height: 450px;}
.service-modal .modal_radio_check > p {color: #111; font-weight: 600;}


.idinput_login .modal_tittle{text-align: center;}
.idinput_login .modal_tittle > h3{padding: 30px 30px 10px; font-size: 18px;}
.idinput_login .modal-con{padding: 0px 30px 25px;}

.modal_input_wrap{width: 100%; margin: 15px auto; border: 1px solid #ddd; border-radius: 4px;}
.modal_input_wrap > div {display: flex;}
.modal_basket > div:first-child {padding: 12px 0; font-size: 16px; font-weight: 700;} 
.modal_basket > div:nth-child(2){overflow-y: scroll; height: 145px;}
.modal_basket > div li {font-weight: 400; padding: 8px 0; font-size: 15px;}
.modal_basket > div li:hover{color: #ff4a6b; background-color: #ffe7ec6e;}
.modal_basket1 {  width: 40%;  height: 200px;  border-right: 1px solid #ddd;}
.modal_basket2 {width: 60%; height: 200px;}
.modal_basket2 > div:nth-child(2) > ul {display: flex; flex-wrap: wrap;}
.modal_basket2 > div:nth-child(2) > ul > li {width: 33.3%; font-size: 15px;}
.check_modal .modal-body{padding: 0  30px 20px;}
.check_modal .modal-body .md-con {padding-top: 0;}
.check_modal .modal-body .md-con p {text-align: left;}
.check_modal .modal_input_cont {border-top: 1px solid #ddd; padding: 12px;}
.check_modal .modal_input_cont > ul {display: flex; gap: 5px;}
.check_modal .modal_input_cont li {width: 145px; position: relative; padding: 0px 25px 2px 10px; border: 1px solid #ff4a6b; border-radius: 15px;} 
.check_modal .modal_input_cont li > span{font-size: 14px; font-weight: 400; color: #ff4a6b;}
.check_modal .modal_input_cont li > span:first-child::after{content: '>'; margin: 0 3px;}
.check_modal .modal_input_cont li > span:nth-child(2)::after{content: '✕'; position: absolute; top: 0; right: 0; transform: translateX(-10px) translateY(5px);}
.check_modal .modal_input_cont {overflow-x: scroll;}

.modal_radio_check {justify-content: space-between;}



/* 스크롤바의 Track(트랙) 스타일 */
div::-webkit-scrollbar {
    width: 5px;
    height: 5px; /* 스크롤바 너비 */
  }
  /* 스크롤바의 Thumb(바디) 스타일 */
div::-webkit-scrollbar-thumb {
    background-color: #888; /* 스크롤바 색상 */
    border-radius: 5px; /* 스크롤바 모양 */
  }
  /* 스크롤바의 Track(트랙)에 Hover 효과 */
div::-webkit-scrollbar-track:hover {
    background-color: #eee; /* Hover 시 배경색 변경 */
  }


/* 기본알람창 크기 */
.modal-wrap.modal-xs{max-width: 520px;}
.modal-wrap.modal-sm{max-width: 760px;}
.modal-wrap.modal-md{max-width: 1024px;}
.modal-wrap.modal-lg{max-width: 1200px;}


/* 체크박스 */
.modal_radio_check input {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
}


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

.modal_basket2 > div:nth-child(2) > ul > li {width: 100%; }
.check_modal .modal-body,
.profile_modal .modal-con {padding: 0 12px 20px;}
.modal_tittle > h2 {padding: 30px 12px 5px; font-size: 20px;}
.modal-body .md-con p{font-size: 15px;}
.modal_basket > div li{font-size: 14px;}



}

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

.check_modal .modal-wrap.modal-md {width: 100%; position: fixed; padding-bottom: 20px; top: auto; bottom: 0; transform: none; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.check_modal .modal-body{padding: 0;}
.check_modal .md-con {padding-left: 12px;}
.check_modal .modal_basket > div:first-child{font-size: 14px; font-weight: 600;}
.check_modal .modal_input_wrap{border-radius: 0;}
.check_modal .modal_basket1{width: 30%;}
.check_modal .modal_basket2{width: 70%;}
.check_modal .modal_input_cont li > span{font-size: 12px;}
.check_modal .button{padding: 0 12px; display: flex;}
.check_modal .button button {width: 50%;}
.check_modal .button button:first-child {color: #444;}
.check_modal .modal_input_cont {overflow-x: scroll;}
.check_modal .modal_input_cont > ul {display: flex; gap: 5px; flex-wrap: nowrap;}
.check_modal .modal_input_cont li {width: 130px;} 

.check_modal{ padding: 0;}
}
 


/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){


  .profile_modal .b_gray > h3 {font-size: 14px;}
  .modal-body .md-con p,
  .profile_modal .photo_input_button > span,
  .button button {font-size: 12px;}





}