/*
 *  MEMO : 프로젝트 공통 스타일 파일입니다.
 * 작성일 : 2023.12.13
*/


/* ------------------------------------------------------------------------------------------------------------- */

@media all and (max-width:767px) {

    .asset_share.only_m{display:inline-block !important;}
    .only_m{display:block}
    .only_pc{display:none !important;}
    header, footer{display: none;}
    .body{box-sizing: border-box; padding-top:0px}
    .inner_wrap{width:100%; margin: 0 auto; padding:0 0px; box-sizing: border-box;}
    .inner_wrap.bottom_space{padding-bottom: 60px;}
    .inner_mid_wrap{width:100%;}
    .m_inner_wrap{width:100%; margin: 0 auto; padding:0 16px; box-sizing: border-box;}
    .gray_body{background:#fff;}
    .floting_right_btn{display:block; width:50px; position:fixed; z-index: 2; right: 16px; bottom:70px;}


    h1{font-size: 20px; font-family: 'font-b';}
    h2{font-size: 18px; font-family: 'font-b';}

    nav{display:block;}
    nav ul{position:fixed; z-index:98; bottom:0; width: 100%; height:60px; background: #fff; border-top:1px solid var(--gray-line);}
    nav li{height: 100%; width:20%; float: left; text-align: center;}
    nav li a{height:100%; width:100%; display:inline-block; letter-spacing:-0.5px; font-size:12px; color:#D2D1D0;}
    nav li img{width:20px; left:-20px;}
    nav li a span{overflow: hidden; margin: 12px auto 6px auto; width:20px; height:20px; display: block; position: relative;}
    nav li.active a{color:#F16341; font-weight:600}
    nav li.active img{position:absolute; top:-20px; left:0; display: block}

    .m_header{background: #fff; height: 50px; display: flex; justify-content: space-between; align-items: center; position: fixed; top:0; left:0; width:100%; z-index: 98; padding: 0 16px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5;}
    .m_header.transparent{background:linear-gradient(to bottom, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0)); color:#fff; border-bottom: none;}
    .m_header.transparent span{color:#fff;}
    .m_header .m_title{font-family:'font-b'; position: absolute; left:50%;top:50%;transform:translate(-50%, -50%);}
    .m_header .m_map_title{ position: absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius: 50px; display: flex; gap: 4px; width: calc(100% - 80px); max-width: 240px; justify-content: center; margin-top: 8px;}
    .m_header .m_map_title .m_map_tab{background: #fff; padding: 8px 6px; color: #000; display: flex; align-items:center; justify-content: center; border-radius: 50px; border: none; font-family:'font-r'; width: 50%; text-align: center; flex: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-size: 12px;}
    .m_header .m_map_title .m_map_tab.active{background: rgba(247, 94, 57, 0.9); padding: 8px 6px; color: #fff; display: flex; align-items:center; justify-content: center; border-radius: 50px; border: none; font-family:'font-b'; width: 50%; text-align: center; flex: 1; backdrop-filter: blur(10px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-size: 12px;}
    .m_header .m_map_title .tit_dropdown_arrow{width:14px; height:auto; margin-left: 6px;}
    .m_header .left_area, .m_header .right_area{display: flex; align-items: center;}
    .m_header .left_area a{margin-right:14px; height:20px; display:inline-block; vertical-align: middle;}
    .m_header .right_area a{margin-left:14px; display: inline-block; vertical-align: middle;}
    .m_header .right_area .user_profileImg{width:40px; height: 40px;}
    .m_header .right_area .user_profileImg .img_box{width:40px; height:40px; border-radius: 80px;}
    .m_header .right_area .user_profileImg .img_box img{height:100%;}
    .m_header img{height:20px;}
    .m_header .layer_menu{position: absolute; right: 16px; top:45px;}
    .m_header .layer_menu a{padding:16px 18px;}

    .m_main_header{height: 60px; display: flex; justify-content:space-between; align-items: center; padding: 16px; box-sizing: border-box;}
    .m_main_header .m_header_logo{width: 90px;}

    /* table */
    .table_container{display: grid; grid-template-columns:140px 1fr; border-top:1px solid var(--gray-line);}
    .table_container div{font-size: 14px;}
    .table_container .item_col_3{grid-column: auto;}
    .table_container .only_m{display: block; margin-top: 4px;}

    .table_container2{overflow: hidden;}
    .table_container2 .tr_row{display:grid; grid-template-columns:110px 1fr; grid-template-rows:minmax(20px, auto); border-bottom:1px solid var(--gray-line); padding:8px 0;}
    .table_container2 .tr_row div{padding:6px 0; display:table-cell; font-size:14px; line-height: 1.4;}
    .table_container2 .tr_row div:nth-child(odd) {color:#63605F;}
    .table_container2 .tr_row.border_none{border-bottom: none;}


    .col-md-12, .col-sm-12 {width: 100%;}
    .col-md-11, .col-sm-11{width: 100%;}
    .col-md-10, .col-sm-10{width: 100%;}
    .col-md-9, .col-sm-9{width: 100%;}
    .col-md-8, .col-sm-8 {width: 100%;}
    .col-md-7, .col-sm-7{width: 100%;}
    .col-md-6, .col-sm-6{width: 100%;}
    .col-md-5, .col-sm-5{width: 100%;}
    .col-md-4, .col-sm-4{width: 100%;}
    .col-md-3, .col-sm-3{width: 100%;}
    .col-md-2, .col-sm-2{width: 100%;}
    .col-md-1, .col-sm-1{width: 100%;}

    /* font */
    .fs_16_v{font-size: 14px;}
    .fs_14_v{font-size: 13px;}

    .modal{background:#fff; position:fixed; border-radius:5px; width:calc(100% - 30px); height:auto; z-index:301; top:50%; left: 50%; transform: translate(-50%, -50%); display: none;}

    .modal_full{width: 100%; height: 100%; border-radius: 0 !important;}

    .slide_select_menu{overflow-y:auto; max-height:200px;}
    .slide_select_menu li{font-size:16px;}
    .slide_select_menu li [type="checkbox"] + label{display:block; width:100%; padding:12px 18px; font-size:16px; color:#63605F; box-sizing: border-box;}
    .slide_select_menu li [type="checkbox"]:checked + label{background:var(--gray-bg) url('/assets/media/ic_check.png') calc(100% - 18px) center no-repeat; background-size: 15px auto;}

    /* tab */
    .tab_type_2{position:sticky !important; width: 100%; border-bottom: 1px solid #D2D1D0; background: #fff; z-index: 100; box-sizing: border-box; top:50px}

    .tab_type_5 {display: flex; display: flex; justify-content:flex-start; padding: 0 16px;}
    .tab_type_5 li{font-size:14px; color:#9D9999; width:auto; height:auto; padding: 10px; display:inline-block; align-items: center; justify-content: center; cursor: pointer;}

    /* 모바일 버튼 스타일 */
    .only_m .btn_gray_ghost.btn_sm {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        min-width: auto !important;
        height: auto !important;
        line-height: 1.2 !important;
    }
    .tab_type_5 li span{color:#9D9999; margin-left: 4px;}
    .tab_type_5 li.active{font-family: 'font-b'; color:#2A2828; border-bottom: 2px solid #2A2828;}
    .tab_type_5 li.active span{color:var(--main-color);}
    .tab_type_6{display:flex; height:30px;}
    .tab_type_6 li{border-radius:50px; padding:6px 15px; cursor: pointer; line-height: 1; display: flex; align-items: center;}

    /* 내 커뮤니티 */
    .board_list .board_row{display: flex; align-items: center; justify-content: space-between; height: auto; padding: 14px 0; border-bottom: 1px solid #EEEDED;}
    .board_list .board_row a{font-size:14px;}
    .board_list .board_row .board_item_1{flex:1; font-size: 14px; word-wrap: break-word;}
    .board_list .board_row .board_item_2{text-align: left; width:35px; font-size: 14px;}
    .board_list .board_row .board_item_3{text-align: left; width: 100%; font-size: 13px;}
    .board_list .board_row .board_item_3 span{display: inline-block; font-size: 13px;}
    .board_list .board_row .board_item_4{text-align: center; width: 100px; font-size: 14px;}
    .board_inner_row{flex: 1; display:block;  height: auto;}

    .box_01{border: 1px solid var(--gray-bg); border-radius:5px; padding:14px; margin:18px 0;}
    .box_01.box_0_m{border:none; padding:0px; margin:18px 0;}
    .box_01.m_hr_type{border:none; padding: 22px 16px; margin: 0; border-top: 10px solid #f5f5f5;}
    }