/* 모달 검은색 배경 */
.modal{display: block; position: fixed; z-index: 100; left: 0; top: 0; bottom:0; 
    max-width:100%; width:100%;  height: 100%;  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; max-height:93vh; overflow: hidden auto;
        top:50%; transform: translateY(-50%); background-color:#fff; z-index: 101;}

     .cart_modal .modal-wrap  {height: 70vh;overflow-y: scroll;}

     .modal-wrap .img{max-height: 77vh;}

    .modal-xl{max-width:1200px; border-radius: 10px;}
    .modal-md{max-width:650px;border-radius: 10px}
    .modal-sm{max-width:1030px;border-radius: 10px}
    .modal-xs{max-width:360px;border-radius: 10px}
    
    .modal-container{max-width:1024px; width: 100%; margin:auto; z-index:101;
    position: relative;
    /* display: -ms-flexbox; display: flex; -ms-flex-direction: column;  flex-direction: column;  pointer-events: auto; */
     border-radius: .3rem;
    outline: 0; }
    
    /* 2020-03-19 */
    .modal-bd.bd{margin-left:0 !important; margin-right:0 !important; padding:0 !important; text-align: center;}
    
    .modal ul.btn-container > li{display: inline-block;margin-top:16px;}
    .modal .modal-container-inner .input_box{display: flex;justify-content: center;margin-top:20px;align-items: center;width:100%;margin:15px auto 0 auto;}

    .modal .modal-container-inner .txt{font-size:14px;}
    .modal .modal-container-inner .input_box p{text-align: left;margin-right:20px;width:10%; }
    .modal .modal-container-inner .input_box input{border:1px solid #ddd; padding:8px 10px; width:90%}
    .modal .modal-container-inner .button{display: flex;width:100%; margin:30px auto 0 auto;}
    .modal .modal-container-inner .button button{color:#888;margin:0 5px;width:100%;border:1px solid #ddd; padding:12px 0; font-size: 16px; background-color: #fff !important; border-radius:5px;}
    .modal .modal-container-inner .button button:first-child{background-color: #FF6C0F !important; color:#fff;border-color: #FF6C0F;}

    
    /* 모달 닫기 */
    .modal-close{position: absolute; right:16px; top:16px; font-size: 1.35em; line-height:1; cursor: pointer; display: block; z-index: 102;}
    
    .modal-container .modal-out-tit{padding-bottom:26px;  font-weight:500; font-size:1.25em;text-align: center;}
    .modal-container .modal-out-tit i{font-weight:700;}
    
    .modal-container{padding:40px 32px 32px;}
    .modal-container .example .img{padding-bottom:6px;}
    .modal-container .example .text{line-height: 1.5; padding-bottom:12px;}
    .modal-container .example .text .content{word-break: break-all;
        white-space: normal;}
    
    .board_content{padding-bottom:24px;}
    .board_content label{display: block; padding-bottom:8px;}
    .file_update{width:100%; border:1px solid #dedede; background:#fff; height:32px; vertical-align: middle;}
    textarea{ border:1px solid #dedede; height:200px; width:100%; }
    
    .modal-container input[type=button]{padding-left:16px; padding-right:16px; cursor: pointer;}
    
    .modal-container .table_btn{text-align:center; padding-top:0;}
    .modal-container .table_btn ul li{text-align:center;display:inline-block; margin:0 3px;}
    
    .guide_text{font-size:13px; padding-top:12px;}
    
    .fileBox ul{margin:0 -8px;}
    .fileBox ul li{float:left; padding:0 8px; width:65%;}
    .fileBox ul li:last-child{width:35%;}
    .fileBox {width:100%;}
    .fileBox .fileName {width:100%; height:30px;line-height:30px; border:none; background:rgba(255,255,255,0); border-bottom:1px solid #d1d1d1; vertical-align:middle}
    .fileBox .btn_file {border:1px solid #d1d1d1; border-radius: 4px; background:#fff; height:30px;font-size:0.8em;line-height:30px;text-align:center;vertical-align:middle}
    .fileBox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
    
    .modal_table{display: table; margin:0 auto;} 
    
    .modal_img_container{text-align: center;}
    .modal_img_container img{width:100%;}
    .wi_select_common {
    width: 123px;
    height: 45px;
    padding: 0 18px;
    vertical-align: middle;
    background: url(https://s3.ap-northeast-2.amazonaws.com/lbplatform/images/timing/152711839681325.png) no-repeat 87% 50%;
    background-color: #fff;
    -webkit-appearance: none;
    }
    
    
    .simple_input{ text-align: center; padding-top:12px;}
    .simple_input:first-child{padding-top:0;}
    .simple_input ul li{display:inline-block;}
    .wi_btn_common{height: 45px; background: #888889; color: #fff; padding:0 16px;}
    
    
    .modal_img{max-height:100vh;}


    /* 메인페이지 모달 */
    .main_modal{background-color:rgba(0, 0, 0, 0.1);}
    .main_modal .modal-wrap{
        max-width: 430px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: transparent;
        width: 100%;
        height: 70%;
        }
    .main_modal .modal-container{padding:0;
        height: inherit;
        line-height: 0;
        }
        .main_modal .modal-container img{
            -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        }
        .main_modal_img{position: relative; display: block;}
    .today_btn{ left:0; z-index:102; font-weight: normal; color:#626262; margin-top:20px;}


    .new_modal{background-color:rgba(0, 0, 0, .1); max-width: 100%;}
    .new_modal .modal-wrap{display: flex; flex-direction: row; background-color: transparent; top:4vh;
        transform:inherit; -ms-transform:inherit; left:0; position: relative; z-index: 999;
    }
    .new_modal .modal-container{padding:0; margin:0 8px; width: 100%; height: 100%; max-width: 500px; border-radius: 0; z-index: 9999;}
    .new_modal .modal-container a{}
    .new_modal .modal-container img{background-color: #fff;}
    .today_btn{position: absolute; left:0; top:calc(100% + 8px); z-index:102; font-weight: normal; color:#626262;}

    .close_btn_area{background-color: #fff; border-top:1px solid #eee; width: 100%; position: relative; z-index: 200;}
    .close_btn_area > li{width:50%; float:left; text-align: center; position: relative; padding:20px 12px; font-size: 0.9em; cursor: pointer;}
    .close_btn_area > li:hover{font-weight: 500;}
    .close_btn_area > li.close_btn_bar::before{content:''; width:1px; height:40%; position: absolute; left:0; top:30%; background-color: #e1e1e1;}

    /* .password_moda */

    .password_moda .modal_jion_list{width:100%;}
    .password_moda .modal_jion_list li{display: flex; align-items: center;margin-bottom:15px;}
    .password_moda .modal_jion_list li:last-child{margin-bottom:none}
    .password_moda .modal_jion_list .jion_title{width:30%; text-align: left;}
    .password_moda .modal_jion_list .jion_title p{width:100%;}
    .password_moda .modal_jion_list .jion_right{width:70%; display: flex;}
    .password_moda .modal_jion_list .jion_right .input_text{width:100%; }

    /* 리뷰 상태 변경 모달 */
    .modal select{width: 100%; border: 1px solid #ddd; padding: 8px 16px;}

    /* 상태 반려 모달창 */
    .refuse_modal .txt_wrap{border: 1px solid #ddd; padding: 12px; max-height: 250px; overflow-y: auto; overflow-x: hidden;}
    .refuse_modal .txt_wrap p{text-align: left;}



    /* 시간오버 모달 */
   .time_modal .modal-head{margin-bottom: 16px; text-align: center; font-size: 20px; font-weight: 700;}
   .time_modal .modal-body p{text-align: center;}
   .time_modal .btn_wrap{text-align: center; margin: 24px auto 0 auto;}
   .time_modal button{padding: 8px 24px; border-radius: 5px; font-size: 15px; min-width: 125px;}
   .time_modal .modal-body dl{display: flex; border-radius: 5px; align-items: center; justify-content: center;}
   .time_modal .modal-body dl dd{font-weight: 600; text-align:left; color: #FF6C0F;}
   .time_modal .modal-body dl dt{width: 70px; max-width: 100%; text-align:left;}
   
   /* 공유하기 모달 */
   .share_modal .modal-head{font-weight: 600; margin-bottom: 16px;}
   .share_modal .x_btn{position: absolute; right: 10px; top: 10px;  font-weight: 500; cursor: pointer; width: 28px;}
   .share_modal .modal-body .img_wrap{width: 60px; height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);}
   .share_modal .modal-body .con_wrap{text-align: center; cursor: pointer;}
   .share_modal .modal-body .con_wrap p{margin-top: 12px; font-size: 15px;}
   .share_modal .swiper-button-prev, .share_modal .swiper-rtl .swiper-button-next{left:-20px; background-color: #fff; width: 40px; height: 40px; border-radius: 50%; top: 40%; box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);}
   .share_modal .swiper-button-next, .share_modal .swiper-rtl .swiper-button-prev{right:-20px; background-color: #fff; width: 40px; height: 40px; border-radius: 50%; top: 40%; box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);}
   .share_modal .swiper-button-next:after, .share_modal .swiper-rtl .swiper-button-prev:after{font-size: 20px; color:#222;}
   .share_modal .swiper-button-prev:after,  .share_modal .swiper-rtl .swiper-button-next:after{font-size: 20px; color:#222;}
   .share_modal .modal-wrap{overflow: hidden;}
   .share_modal .swiper{overflow: inherit;}
   .share_modal .swiper-wrapper{justify-content: center;}

    /* 친구추가 모달 */
    .friend_modal .modal-head{text-align: center; font-weight: 600; font-size: 23px; margin-bottom: 16px;}
    .friend_modal .modal-body>p{text-align: center; font-size: 16px; margin-bottom: 16px;}
    .friend_modal .modal-body .input_con button{margin-left: 4px; border-radius: 5px; background-color: #333; color: #fff; padding: 4px 12px;}
    .friend_modal .modal-body .input_con{width: 100%; display: flex;}
    .friend_modal .modal-body .input_con input{width: 100%; background-color: #f5f5f5; border: 0; padding: 8px; border-radius: 5px;}
    .friend_modal .x_btn{position: absolute; right: 10px; top: 10px;  font-weight: 500; cursor: pointer; width: 28px;}
    .friend_modal .result{max-height: 200px; overflow-y: auto; overflow-x: hidden; background-color: #f5f5f5; padding: 16px; margin-top: 12px;}
    .friend_modal .result ul li .con_wrap{display: flex; align-items: center; justify-content: space-between;}
    .friend_modal .result ul li .con_wrap .thumb{margin-right: 8px; display: flex; align-items: center; justify-content: center; overflow:hidden; width: 35px; height: 35px; border-radius: 50%; border: 1px solid #ddd;}
    .friend_modal .result ul li .con_wrap .thumb img{max-height:90%;}
    .friend_modal .result ul li + li{margin-top: 10px;}
    .friend_modal .result .add_btn span{display: block; transition-duration: 0.2s;  line-height: 1; width: 25px; border: 1px solid #666; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
    .friend_modal .result .add_btn{cursor: pointer;}
    .friend_modal .result .add_btn:hover span{background-color: #333; color: #fff;}
    .friend_modal .add_name input{border: 0; border-bottom: 1px solid #ddd; padding: 12px 0; width: 100%; margin-top: 8px;}
    
    
    
    .friend_end_modal .modal-head{font-size: 17px; margin-bottom: 0;}


    .friend_modal .result ul li .con_wrap.on .add_btn span{background-color: #222; color: #fff;}
    .friend_modal button.invite_btn{border-radius: 5px; background-color: #222; color: #fff; padding: 12px 16px; margin: 12px auto 0 auto; width: 100%; }
    /* 방송시작 모달 */
    .live_modal .in dl{display: flex;}
    .live_modal .in dl + dl{margin-top: 12px;}
    .live_modal .in dl dd>div{flex: 1;}
    .live_modal .in dl dd>div + div{margin-left: 12px;}
    .live_modal .in dl dt{width: 150px; font-weight: 600; margin-top: 10px;}
    .live_modal .in dl dd{width: calc(100% - 150px)}
    .live_modal .in dl dd input{width: 100%; border: 1px solid #ddd; padding: 12px; border-radius: 5px;}
    .live_modal .word button{border-radius: 5px; padding: 10px 12px; margin-left: 4px;}
    .live_modal .word_list{margin-top: 8px; gap: 4px; max-height: 110px; overflow-y: auto; overflow-x: hidden;} 
    .live_modal .word_in{display: none;}
    .live_modal .word_list p{border-radius: 5px; padding: 6px 12px; font-size: 14px; display: flex; cursor: pointer;}
    .live_modal .word_list p span{display: inline-block; vertical-align: middle; width: 18px; height: 18px; }
    .live_modal .word_list p span img{width: 100%; height: 100%; display: block; cursor: pointer; margin-left: 4px;}
    .live_modal .word_list p + p{}

    /* 동영상 업로드 모달 */
    .video_upload_modal .file_name{position: relative; display: table; margin: 0 auto;}
    .video_upload_modal .file_name p{font-size: 0.95em; }
    .video_upload_modal .delete-btn {cursor: pointer; width: 15px;height: 15px; position: absolute;border-radius: 0; top: 5px; right: -16px;background: rgba(0,0,0,1) url(../img/sub/x_btn-w.svg)no-repeat center center / contain;z-index: 5;}
    .video_upload_modal .info{background-color: #f5f5f5; padding: 24px; border-radius: 5px; max-height: 50vh; overflow-y: auto; overflow-x: hidden;}
    .video_upload_modal .info dl{display: flex; align-items: flex-start;}
    .video_upload_modal .info dl dt{font-weight: 600; font-size: 17px; width: 150px; text-align: left;}
    .video_upload_modal .info dl dd{width: calc(100% - 150px); }
    .video_upload_modal .info dl dd input{border: 1px solid #ddd; border-radius: 5px; width: 100%; padding: 8px;}
    .video_upload_modal .info dl dd textarea{height: 120px; padding: 8px; resize: none;}
    .video_upload_modal .info dl + dl{margin-top: 10px;}
    .video_upload_modal .info dl dd .img-upload{display: block;}
    .video_upload_modal .info dl dd .img_list ul li{position: relative; width: 72px; height: 72px;}
    .video_upload_modal .info dl dd .img_list ul li img{width: 100%;height: 100%; object-fit: contain;}
    .video_upload_modal .info dl dd .img_list ul li .delete-btn {top: 0; right: 0;}

    .video_upload_modal .info dl dd div.btn button{padding: 4px 8px; border-radius: 3px;}
    
    /* 후기 확대모달 */
    .img_modal2{}
    .img_modal2 .arrow{position: absolute; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2; display: flex; justify-content: space-between;}
    .img_modal2 .arrow>div{cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ddd; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; padding: 8px;}
    .img_modal2 .arrow>div.right{right: 0;}
    .img_modal2 .arrow>div img{width: 10px; opacity: 0.5;}
    .img_modal2 .swiper-slide img{width: auto; object-fit: contain; height: auto; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
    .img_modal2 .swiper-slide{background-color: transparent; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; padding-bottom: 60%;}
    .img_modal2 .modal-container-inner{overflow: hidden;}

    /* 비밀번호 입력 모달 */
    .password_modal input[type="password"]{border-radius: 5px; padding: 8px; border: 1px solid #ddd; width: 100%;}


    /* 카테고리 모달 */
    .category_modal .in{background-color: #f5f5f5; padding: 24px; border-radius: 5px;}
    .category_modal .add_btn button.add{width: 100%; padding:8px 12px; border-radius: 5px; margin-top: 4px;}
    .category_modal .add_btn select{border-radius: 5px; cursor: pointer;}
    .category_modal .add_btn .add_in{display: none;}
    .category_modal .add_btn .add_in.on{}
    .category_modal .input_con{width: 100%;}
    .category_modal .input_con button{border-radius: 5px;}
    .category_modal .input_con input{width: 100%; border-radius: 5px; padding:8px;}
    .category_modal .input_con input:focus{border: 1px solid #ddd;}
    .category_modal label img{width: 12px; margin-left: 4px;}

    .category_modal .in dl dt{width: 115px;}
    .category_modal .in dl dd{width: calc(100% - 115px);}


    /* 영상검색모달 */
    .search_modal .in .search{background-color: #f5f5f5; border-radius: 5px; display: flex; align-items: center;}
    .search_modal .in .search input{background-color: transparent;}
    .search_modal .in .list{margin-top: 24px;}
    .search_modal .in .list ul{display: flex; flex-wrap: wrap; gap: 8px;}
    .search_modal .in .list ul li{width: calc(20% - 8px); margin-bottom: 12px;}
    .search_modal .in .list ul li .con_wrap{ position: relative;  width: 100%;}
    .search_modal .in .list ul li .img_in{width: 100%; height: 100%; cursor: pointer;
        background-position: center; background-size: cover;
        background-image: url(../img/main/img16.png); padding-bottom: 56.25%;
    }
    .search_modal .in .list ul li .check_con{position: absolute; right: 0; top: 0; width: 100%; height: 100%;}
    .search_modal .in .list ul li .check_con span.on{right: 0; left: inherit;}
    .search_modal .in .list ul li .txt_wrap b{font-size: 16px; font-weight: 600;}
    .search_modal .in .list ul li .txt_wrap{text-align: left; margin-top: 8px;}
    .search_modal .in .list ul li .txt_wrap span{font-size: 14px; opacity: 0.7;}


    .video_input .video{position: relative;width: 250px; margin-top: 16px;}
    .video_input .video .img_in{ width: 100%; height: 100%;
        background-position: center; background-size: cover;
        background-image: url(../img/main/img16.png);
        aspect-ratio: 16/9;
    }
    .video_input .video .x_btn{position: absolute; cursor: pointer; width: 25px; height: 25px; right: 0; top: 0; background-color: #333; display: flex; align-items: center; justify-content: center;}
    .video_input .video .x_btn img{width: 13px;}
    .video_input .video .txt_wrap{text-align: left; margin-top: 8px;}
    .video_input .video .txt_wrap b{font-size: 16px; display: block; font-weight: 600;}
    .video_input .video .txt_wrap span{font-size: 14px; opacity: 0.7; display: block;}

    .tab.type01.upload-tab{position: relative; width: calc(100% - 100px); overflow-x: auto;}
    .upload-wrap{position: relative ; display: flex; flex-wrap: wrap;}
    .upload-wrap button{background-color: #FF6C0F; height: auto; width: max-content; position: relative; padding: 8px 0;   border-radius: 5px; color: #fff; line-height: 1.4; height: max-content; width: 90px; margin-left: auto;}


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

    .new_modal .modal-container{max-width: 450px;}
}

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

    .new_modal .modal-container{max-width: 320px;}
}


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

    .new_modal .modal-wrap{top:32px;}
    .new_modal{width:100%; height: 0; max-width: 100%;}
    .new_modal .modal-container{position: absolute; top:0; left:0; margin:0;}

    .tab.type01.upload-tab{width: calc(100% - 80px);}
    .upload-wrap button{width: 70px;}
    .tab.type01.upload-tab p{padding: 5px 12px !important; font-size: 13px !important; }
    .upload-wrap button{padding: 5px 0; font-size: 13px;}


}
/* ********************************************* *
* 640px max
* ********************************************* */
@media (max-width:640px){
    /* .modal{padding-left: 32px; padding-right: 32px;} */
    .modal-container {padding: 24px 10px 16px;}
    .modal .modal-container-inner .button button{padding: 8px 0;}
    .modal-container .modal-out-tit{padding-bottom: 12px;}
    .modal .modal-container-inner .button{margin-top: 16px;}

    .video_upload_modal .info dl dt{font-size: 16px; width: 100px;}
    .video_upload_modal .info dl dd{width: calc(100% - 100px);}
    .modal .modal-container-inner .button button{font-size: 15px;}

    .live_modal .in dl dt{width: 90px;}
    .live_modal .in dl dd{width: calc(100% - 90px);}
}

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

    .dis-f#uploadTypeCheckboxWrap{display: block;}
    .dis-f#uploadTypeCheckboxWrap>div{margin-left: 0;}
    .dis-f#uploadTypeCheckboxWrap>div label{text-align: left;}

    .dis-f.upload-check{display: block; text-align: left;}
    .dis-f.upload-check > div{margin-left: 0;}
    .upload-tab{flex-wrap: wrap !important;}
    .upload-wrap{display: block;}
    .tab.type01.upload-tab{ width: 100%; margin-bottom: 0 !important;}
    .upload-wrap button{width: 100%;}
}
/* ********************************************* *
* 480px max
* ********************************************* */
@media (max-width:480px){


    .modal-wrap {top: 50%;}

    .modal .modal-container-inner .input_box{width:100%;}
    .modal .modal-container-inner .input_box p{width: 55px;}
    .modal .modal-container-inner .input_box input{width: calc(100% - 55px);}

    .video_upload_modal .info dl{flex-direction: column;}
    .video_upload_modal .info dl dd{width: 100%; margin-top: 12px;}
    .video_upload_modal .info p.f-small{text-align: left;}


}