select{outline: none;}
.modal.center_modal .modal-container{box-shadow: 0 0 28px rgba(0,0,0,.08);}

.modalOpen{height: 100% !important; overflow: hidden !important;}
/* 모달 검은색 배경 */
.modal_window_bg{position: fixed; left: 0; top: 0; bottom:0; z-index: 101;
    max-width:100%; width:100%;  height: 100%;  background-color: hsla(0,0%,0%,0.4);}

.modal{position: fixed; left: 0; bottom:0; max-width:100%; width:100%; z-index: 102; height: 0;}
.modal button{min-width:80px;}
.modal.center_modal{ position: fixed; top:50%; left: 50%; transform: translate(-50% ,-50%); width: 100%; height: 100%;}
.modal-wrap {position: relative; width: auto;margin:0 auto; height: 100%; z-index: 102;}

.modal-container{ width: 100%; margin:auto; z-index:103; border-radius: .6em; overflow: hidden;
overflow-y: auto;  text-align: center; 
 display: -ms-flexbox; display: flex;
-ms-flex-direction: column;  flex-direction: column;}


.modal-bd{ padding:20px; background-color:#fff;}

.modal ul.btn-container{display: flex;}
.modal ul.btn-container.fixed{position: absolute; bottom:0; width: 100%; left:0; right:0;}
.modal ul.btn-container > li{width: 100%; padding-right:8px;}
.modal ul.btn-container > li:last-child{padding-right:0;}

.modal ul.btn-container > li .btn{width: 100%; font-size: 1em; border-radius: .3em;}


/* 모달 닫기 */
.modal-close{position: absolute; right:1.2em; top:1.2em; font-size: 1.25em; font-weight: lighter; color:#98A8B9; line-height:1; cursor: pointer; display: block; z-index: 110;}
.modal_img{max-height:100vh;}
.today_btn{position: absolute; left:0; top:calc(100% + 8px); z-index:102; font-weight: normal;}
.modal.center_modal .modal-container{position:absolute; top:50%;left:50%; transform: translate(-50%, -50%); 
   width: 350px; max-width: 96%;overflow-x: hidden; overflow-y: auto;
}
/* .modal.center_modal .modal-container{ max-height: 70vh; } */
.modal.center_modal textarea{background-color: #f5f5f5; height: 100px; overflow-y: auto; border-radius: 0.3em; width: 100%;}
.modal.center_modal textarea::placeholder{color: #bbb;}
.modal.center_modal textarea:focus{outline: 0;}

.modal .list_container_type2 {overflow-y:scroll; height: 60vh;}


.modal.bottom_modal .modal-wrap{top:inherit;  transform: inherit; width: 100%;}
.modal.bottom_modal .modal-container{border-radius: 2em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; bottom:0; text-align: left; position: absolute;}
.modal.bottom_modal .modal-bd{padding-bottom:1.2em;}

.btn-modal-container{background-color: transparent;}
.btn-modal-container .btn_modal_wrap{ width: 100%; border-radius: .6em; overflow: hidden;
    overflow-y: auto; background-color:#fff; text-align: center; 
     display: -ms-flexbox; display: flex;  -ms-flex-direction: column;  flex-direction: column;} 
.btn_modal_wrap:last-child{margin-top:.8em;}
.btn_modal_wrap .btn_con{border-bottom:1px solid #e8e3d6;}
.btn_modal_wrap .btn_con:last-child{border-bottom:0;}

.modalSlide{position: relative; line-height: 1;}
.modalSlide_arrow {position: absolute; top:45%; transform: translateY(-50%); width: 100%;}
.modalSlide_arrow img{width: 1em; line-height: 0;}
.modalSlide_arrow li{position: absolute; background-color: rgba(255,255,255,.7); padding:.6em; cursor: pointer;}
.modalSlide_arrow li span{line-height: 0;}
.modalSlide_arrow .prev{left:0;}
.modalSlide_arrow .next{right:0;}

.modal .list_container_type2 li{border-top:0 !important; border-bottom:0 !important;}
.modal .profile_img.sidetype {height:3.0em;}

.modal-out-tit{font-size: 18px; font-weight: bold;margin-bottom: 16px;}
.modal-out-tit b{line-height: 1;}
/* .modal-container-inner p{margin-top:1.2em;} */

.modal .modal_user_info{background-color:#f2f2f7; padding:1.2em; margin-top:.6em;}
.modal .modal_user_info dl{ display: flex; line-height: 1.7;}
.modal .modal_user_info dt, .modal .modal_user_info dd{font-size: .85em; display: inline-block;}
.modal .modal_user_info dt{color:#98A8B9; margin-right:1em;}




.chat_img_modal{background-color: #000; height: 100%; top:0;}
.chat_img_modal .modal-container{width: 100% !important; border-radius: 0;}
.chat_img_modal .main_img{line-height: 0;}
.chat_img_modal .main_img img{width: 100%; max-height: 100%;}

.modal-img-download{position: absolute; right:4em; top:1.4em;
    background-image: url(../images/i_download.svg); width: 1.25em; height: 1.25em;
    line-height:1; cursor: pointer; display: block; z-index: 110;}

/* 2023.05.22 고담 커스텀 */
.modal ul.btn-container.godam > li .btn{}
.modal ul.btn-container.godam > li .btn.btn-white{border: 1px solid #264428; color:#264428}
.modal ul.btn-container.godam > li .btn.btn-secondary2{background:#264428; color:#fff;}
.godam_modal.modal-bd{border:1px solid #efefef;}
.modal ul.btn-container.godam_btn_wrap li button{border: 1px solid #947062; color:#947062}
.modal ul.btn-container.godam_btn_wrap li:last-child button{background:#947062; color:#fff;}


/* 접근권한 모달 */
.acess_wrap .bd{background-color: #fff; width: 325px; display: flex; flex-direction: column; gap:30px 0; max-width: 95%; border-radius: 10px; padding: 16px;}
.acess_modal .con_wrap{display: flex; align-items: center;}
.acess_modal .con_wrap .icon_wrap{width: 40px; height: 40px; border-radius: 50%; background-color: #F2FDF7; display: flex; align-items: center; justify-content: center;}
.acess_modal .con_wrap .txt_wrap{padding-left: 10px;}
.acess_modal .con_wrap .txt_wrap b{display: block; margin-bottom: 4px; font-size: 16px;}
.acess_modal .con_wrap .txt_wrap span{color: #666; font-size: 14px;}
.acess_modal button{font-weight: 500;}
.acess_wrap .txt_con{border-top: 1px solid #d9d9d9; padding-top: 1.2em; margin-top: 1.2em;}
.acess_wrap .txt_con p + p{margin-top: 0.2em;}
.acess_modal .modal-out-tit b{line-height: 1.3; font-weight: 500;}
.acess_modal .modal-out-tit b .bold{font-weight: 700;}
.acess_wrap h3{font-size: 18px; font-weight:600;}
.acess_wrap .sub_tit{margin-bottom: 20px; display: block; font-weight: 600;}
.acess_wrap .button_wrap{margin-top: 30px; }
.acess_wrap .button_wrap button{border-radius: 55px; padding:14px 16px;}


/* 취소모달 */
.cancel_modal .count{color: #999; gap: 0.2em; width: 100%; text-align: right; display: flex; justify-content: flex-end;}
.cancel_modal .count span.on{color: #111; font-weight: 600;}

/* 바코드모달 */
.simple_modal .close_btn{width: 2.4em; height: 2.4em; background-color: #fff; font-weight: 600;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; border-radius: 50%;
    position: absolute; left: 50%; top: 35%; transform: translateX(-50%);
}
.simple_modal .barcode_img img{width: 100%;}


/* 캘린더모달 */
.calender_modal .x_btn{width: 3em; height: 3em; margin: 0 auto 1.2em auto; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,.7); border-radius: 50%;}

.calender_modal{width: 390px;  max-width: 95%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 102; }
.calender_modal .month{display: flex; padding: 0.8em 0; align-items: center; justify-content: space-between;}
.calender_modal .month p{display: flex; font-size: 1.2em; align-items: center; justify-content: center;}
.calender_modal .month p span{font-weight: 700;}
.calender_modal .month img{width: 2.5em; height: 2.5em;}
.calender_modal .calender02 ul li .date{background-color: #f5f5f5;display: flex; }
.calender_modal .calender02 ul li .date>div{width: 12.5%;}
.calender_modal .calender02 ul li .date>div p{display: flex; text-align: center; align-items: center;justify-content: center; padding:0.5em 0.3em; font-size: 0.85em;}
.calender_modal .calender02 ul li .info{display: flex;}
.calender_modal .calender02 ul li .info>div{width: 12.5%;}
.calender_modal .calender02 ul li .info>div p{padding: 0.4em; font-size: 0.8em; text-align: center; font-weight: 600; height: 100%; display: flex; align-items: center;justify-content: center;}
.calender_modal .calender02 ul li .info + .info{border-top: 1px solid #d9d9d9;}
.calender_modal .calender02 ul li .info .in p{font-weight: 700; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.8em; word-break: keep-all; line-height: 1.2;}


.calender_modal .calender02 ul li .info .in p.operation{color:#111; position: relative;}
/* .calender_modal .calender02 ul li .info .in p::before{content: ""; width:0.4em; height: 0.4em; background-color: #111; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 3px;} */
.calender_modal .calender02 ul li .info .in p.rest{color:#D85151;}
.calender_modal .calender02 ul li .info .in p.rest::before{background-color:#D85151;}
.calender_modal .calender02 ul li .info .in p.am_rest{color:#FFCC4A;}
.calender_modal .calender02 ul li .info .in p.am_rest::before{background-color:#FFCC4A;}
.calender_modal .calender02 ul li .info .in p.pm_rest{color:#2FA8FF;}
.calender_modal .calender02 ul li .info .in p.pm_rest::before{background-color:#2FA8FF;}

.calender_modal .inner{background-color: #fff; border-radius: 0.8em; padding: 12px; max-height: 80vh; overflow: hidden;}


.mo_view03{display: none; margin-bottom: 0.4em; color: #D85151;}


/* 접수된 문의 이미지 확대 모달 */
.img_zoom_modal{height: 100%;}
.img_zoom_modal .img{position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; width: 100%;}
.img_zoom_modal .img img{width: 100%; height: 100%;}
.modal_window_bg.dark{background-color: hsla(0, 0%, 0%, 0.85);}
.img_zoom_modal .x_btn{position: absolute; right: 1em; top: 1em;}
.img_zoom_modal .x_btn img{width: 1.5em;}


.modal .sub_info{width: 100%; border-radius: 0.1em; max-height: 30vh; overflow-y: auto; overflow-x: hidden; background-color: #f5f5f5; padding: 0.8em; margin-top: 0.8em;}
.modal .sub_info::-webkit-scrollbar {width:6px;} 
.modal .sub_info::-webkit-scrollbar-track { background:#ddd;}
.modal .sub_info::-webkit-scrollbar-thumb {background:#FF859E;}

.modal .sub_info p + p{margin-top: 0.2em;}
.modal .sub_info p{color: #666; font-weight: 500; font-size: 15px; line-height: 1.2;}




/* 달력 선택 모달 */
.modal_calendar{width: 340px; background-color: #fff; z-index: 200; padding: 1.2em; border-radius: 0.5em; max-width: 96%; margin: 0 auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.modal_calendar .title{font-size: 1.25em; font-weight: 600; text-align: center; margin-bottom:1.2em;}
.modal_calendar .cal_in{display: flex; justify-content: center; width: 100%; margin-bottom:1.2em;}
.modal_calendar .cal_in .in{width: 33.333%;}
.modal_calendar .cal_in .in ul li{ color: #999;}
.modal_calendar .cal_in .in ul li p{font-size: 1.15em; font-weight: 600;}
.modal_calendar .cal_in .in ul li.current{color: #FF859E;}
.modal_calendar .cal_in .in ul li .con_wrap{padding: 0.8em 0.8em; width: 100%; display: flex; align-items: center; justify-content: center;}
.modal_calendar .cal_in .in ul li.current .con_wrap{background-color: #f5f5f5; }
.modal_calendar .cal_in .in ul li.current .con_wrap p{position: relative;}
.modal_calendar .cal_in .in ul li.current .con_wrap p::after{content: ""; width:25px; height: 2px; background-color: #FF859E; left: 50%; position: absolute; transform: translateX(-50%); bottom: -0.8em;}

.modal_calendar .btn_wrap{display: flex; gap: 16px;}
.modal_calendar .btn_wrap button{border-radius: 5px; padding: 12px 16px; width: 100%;}


/* ------------------------한국특수가스 모달 24-07-15----------------------------- */

.h3{height: 2.8em;}
.xsmall02{font-size: 0.8em;}
.h-100{height: 100%;}
.pt{padding-top: 24px !important;}
.send_certi{margin-top: 20px;}

.fc-k5{color:#555;}
.btn-container .flex05 button{color: #555; background-color: #eee;}
.modal button{line-height: 1;}
.modal-out-tit{margin-bottom: 16px;}

.tl{text-align: left;}

.min_notice{color: #888; font-size: 12px; line-height: 1.4;}
.tsmodal_box{width: 100%; padding: 8px 0;}
.tsmodal_box .tit{font-size: 16px; color: #222; font-weight: 500; line-height: 1;}
.modal .inputbox{ border-radius: 4px; width: 100%;margin: 8px 0;}
.modal .inputbox input{height: 46px; width: 100%; border: 1px solid #ddd; border-radius: 4px; font-size: 16px;}



.viewtit {font-size: 20px; align-items: flex-start; margin-bottom: 16px ; padding-bottom: 12px; border-bottom: 1px solid #eee;}
.min_ordernum{ margin-left: 8px; color: #888; font-size: 12px; line-height: 1;}
.viewbox .date {font-size: 18px; color: #555 ; font-weight: 600;}

.detailbox ul{padding: 12px; border-radius: 8px; border: 1px solid #eee;}
.detailbox ul li{display: flex; font-size: 16px; line-height: 1.4;}
.detailbox ul li .left{width: 86px; color: #888; }
.detailbox ul li .right{width: calc(100% - 86px);}
.detailbox ul li + li{margin-top: 8px;}


.txt_bef{padding-left: .85em; position: relative; word-wrap: break-word; word-break: keep-all;}
.txt_bef:before{content: '※'; position: absolute; display: inline-block; left: 0; top: 0;}




/* ********************************************* *
 * 350px max
 * ********************************************* */
 @media (max-width:350px){
    .mo_view03{display: block;}
    .calender_modal .calender02{ overflow-x: auto; overflow-y: auto; position: relative; max-height: 70vh;}
    .calender_modal .calender02 ul{width: 390px;}
}