@media (max-width:1024px){
    #hq:has(.program_month) > *{min-width: unset; padding: 0 }
    #hq:has(.program_list) > *{min-width: unset; padding: 0 }
    #hq:has(.program_view) > *{min-width: unset; padding: 0 }
    #hq:has(.program_month) > .panel {justify-content: center}
    #hq:has(.program_list) > .panel {justify-content: center}
    .grid.grid_v1:has(.program_month){grid-template-columns:1fr;gap:20px}
    section.program_month .table.month{overflow-x:auto}
    section.program_month .panel{flex-wrap:wrap}
    section.program_month .panel .male-auto{margin-left:0}
    section.program_list .box form >  .flex {flex-wrap:wrap}
    section.program_list .box form >  .flex b {display: none}

    .grid.grid_v1:has(.program_view){grid-template-columns:1fr;gap:20px}
    .program_view .panel{flex-wrap:wrap}
    .program_view .panel .male-auto{margin-left:0}
    .program_view .table{overflow-x:auto}
    .program_view .box_white{padding:10px}

    .program_view .table.list table colgroup,
    .program_view .table.list table thead{display:none}
    .program_view .table.list table,
    .program_view .table.list tbody,
    .program_view .table.list tr,
    .program_view .table.list td{display:block;width:100%}
    .program_view .table.list tr{margin-bottom:15px;border:1px solid #eee;border-radius:10px;padding:10px;background:#fff}
    .program_view .table.list td{display:flex;gap:10px;padding:6px 0;border:none}
    .program_view .table.list td::before{
        content:attr(data-label);
        flex:0 0 90px;
        font-weight:600;
        color:#666;
    }
    .program_view .table.list td input,
    .program_view .table.list td textarea,
    .program_view .table.list td .btn{width:100%!important;}
    .program_view .table.list td textarea{min-height:60px}
    .program_view .table.list td .btn + .btn{margin-top:5px}

    .program_view .table.list2 table colgroup,
    .program_view .table.list2 table thead{display:none}
    .program_view .table.list2 table,
    .program_view .table.list2 tbody,
    .program_view .table.list2 tr,
    .program_view .table.list2 td{display:block;width:100%}
    .program_view .table.list2 tr{margin-bottom:15px;border:1px solid #eee;border-radius:10px;padding:10px;background:#fff}
    .program_view .table.list2 td{display:flex;gap:10px;padding:6px 0;border:none}
    .program_view .table.list2 td::before{
        content:attr(data-label);
        flex:0 0 90px;
        font-weight:600;
        color:#666;
    }
    .program_view .table.list2 td input,
    .program_view .table.list2 td textarea,
    .program_view .table.list2 td .btn{width:100% !important}
    .program_view .table.list2 td textarea{min-height:60px}
    .program_view .table.list2 td .btn + .btn{margin-top:5px}
    .program_view div.box_white {margin-bottom: 20px}
}

@media (max-width:640px){
    .program_month nav.panel{justify-content:center;flex-wrap:wrap;gap:10px}
    .grid.grid_v1:has(.program_list){padding:0 10px}
    .grid.grid_v1:has(.program_month) > *{min-width:0}
    .grid.grid_v1:has(.program_view) > *{min-width:0}
    section.program_month .panel{flex-wrap:wrap}
    section.program_month .panel h5{width:100%;text-align:center}
    section.program_month .panel button,
    section.program_month .panel a{flex:1 1 auto}
    section.program_month .table.month{overflow-x:auto}
    .program_month .table.month table{min-width:600px}
    section.program_month .table.month colgroup {display: none}
    .program_month .table.mb0{overflow-x:auto}
    .program_month .table.mb0 .btn{width:100%}
    .grid.grid_v1:has(.program_view){padding:0 10px}
    .program_view input,
    .program_view textarea,
    .program_view select{width:100%}
    .program_view td .flex{flex-direction:column;align-items:stretch}
    .program_view td .flex .btn{width:100%}
    .program_view .photo-upload,
    .program_view .preview-list{justify-content:center}
    .program_view ul li{flex-wrap:wrap}
    .program_view ul li .search{width:100%}
    .program_view .table colgroup {display: none}
}