@media (max-width: 1280px) {
    .container:not(.type03):not(.type04),
    #footer .footer_inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    #pc_nav .floor1 {
        gap: 28px;
    }

    .main_visual_block .mv_tit h2 {
        font-size: 52px;
    }

    .care_diff_list ul li .txt h3 {
        font-size: 26px;
    }

    .care_diff_list ul li .txt p {
        font-size: 20px;
    }

    #reserv_area .rsv_container{
        gap: 10px;
    }

    #reserv_area .left,
    #reserv_area .right{
        width: calc(50% - 10px);
    }
}

@media (max-width: 1024px) {
    :root {
        --header-height: 65px;
    }

    .container.type03 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #header {
        height: 65px;
    }

    #header .header_logo h1 a img {
        height: 24px;
    }

    #pc_nav {
        display: none;
    }

    .btn_mobile_menu {
        display: flex;
    }

    .mobile_nav {
        top: 65px;
    }

    .mobile_nav.is_open {
        max-height: calc(100vh - 65px);
    }

    .mob_dim {
        top: 65px;
        height: calc(100vh - 65px);
    }

    .sec_type01,
    .sec_type02,
    .sec_banner,
    #main_section12,
    #map {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .main_visual_block {
        padding-top: 65px;
    }

    .main_visual_block .mv_txt h2 {
        font-size: 44px;
    }

    .main_visual_block.mv_in .mv_txt p {
        font-size: 18px;
    }

    .sec_txt.mb02{
        margin-bottom: 40px;
    }

    .sec_txt p.type01{
        margin-top: 12px;
    }

    .sec_tit.type02 {
        margin-bottom: 40px;
    }

    .sec_tit h2,
    .sec_txt h2 {
        font-size: 36px;
    }

    .sec_tit p,
    .sec_txt p,
    .exImg_list ul li .ba_label {
        font-size: 18px;
    }

    .sec_tit p {
        margin-top: 12px;
    }

    .surgery_target_imgList ul {
        gap: 40px 20px;
        justify-content: flex-start;
    }

    .surgery_target_imgList ul li {
        width: calc((100% - 20px) / 2);
    }

    .surgery_target_imgList ul li p {
        margin-top: 18px;
        font-size: 18px;
    }

    .surgery_stage_desc{
        padding: 40px 20px;
    }

    .surgery_stage_desc ul li {
        gap: 40px;
    }

    .surgery_stage_desc ul li figure {
        width: 100%;
    }

    .surgery_stage_desc ul li .stage_txt h3 {
        font-size: 26px;
    }

    .surgery_stage_care p{
        font-size: 18px;
    }

    .compare_table td,
    .compare_table .cell_label {
        font-size: 18px;
    }

    .compare_table thead th {
        font-size: 22px;
    }

    .suture_system_block .suture_sys_list h3 {
        font-size: 24px;
    }

    .suture_system_block .suture_sys_list p {
        font-size: 18px;
    }

    .half_sec01 .right {
        padding-left: 60px;
    }

    .tabMenu_type01 .tab_nav {
        margin-bottom: 40px;
    }

    .tabMenu_type01 .tab_btn {
        font-size: 18px;
    }

    .tabMenu_type01 .tab_panel .tab_txt p {
        font-size: 18px;
    }

    .tabMenu_type01 .card_head h3 {
        font-size: 22px;
    }

    .tabMenu_type01 .tab_card ul li {
        font-size: 18px;
    }

    .emergency_banner {
        gap: 40px;
        padding: 40px 24px;
    }

    .emergency_banner h2 {
        font-size: 24px;
    }

    .emergency_banner p {
        font-size: 14px;
    }

    .emergency_banner .btn_call {
        font-size: 16px;
    }

    .care_diff_list ul li .txt h3 {
        font-size: 24px;
    }

    .care_diff_list ul li .txt p {
        font-size: 18px;
    }

    .care_method_list_area ul li .txt h3 {
        font-size: 28px;
    }

    .care_method_list_area ul li .txt p {
        font-size: 18px;
    }

    .scar_surgery_area{
        gap: 20px;
    }

    .scar_surgery_area .txt h2 {
        font-size: 36px;
    }

    .scar_surgery_area .txt p {
        font-size: 18px;
    }

    .scar_surgery_area .txt .btn_more {
        font-size: 18px;
    }

    .scar_care_graph{
        padding: 20px;
    }

    .scar_cure_method_area{
        flex-direction: column;
        padding: 40px 20px;
    }

    .scar_cure_method_area .img{
        width: 100%;
    }

    .scar_cure_method_area .desc{
        padding-left: 0;
        margin-top: 24px;
    }

    .scar_cure_method_area .desc h3 {
        font-size: 28px;
    }

    .scar_cure_method_area .desc p {
        font-size: 18px;
    }

    #director .right {
        padding-left: 40px;
    }

    #director .right .role,
    #director .right .name .title {
        font-size: 18px;
    }

    #director .right .name .kor {
        font-size: 36px;
    }

    #director .right .career_main li,
    #director .right .career_sub li {
        font-size: 18px;
    }

    #director .director_article {
        padding: 40px 20px;
    }

    #director .article_title {
        text-align: left;
        font-size: 28px;
    }

    #director .article_thumbs{
        padding: 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    #director .article_thumbs li{
        width: calc(50% - 5px);
    }

    #map .container {
        height: auto;
    }

    #map .map_area {
        flex-direction: column;
        gap: 40px;
    }

    #map .map_left,
    #map .map_right {
        width: 100%;
        height: auto;
    }

    #map .map_right{
        padding: 0;
    }

    #map .info_title {
        font-size: 28px;
    }

    #map .hours_list .day,
    #map .hours_list .time {
        font-size: 16px;
    }

    #map .address,
    #map .route,
    #map .parking {
        font-size: 16px;
    }

    #footer .top {
        flex-direction: column;
        gap: 32px;
    }

    #footer .right .floor1 {
        flex-wrap: wrap;
        gap: 32px 48px;
    }
}

@media (max-width: 864px) {
    br.br_864 {
        display: inline;
    }

    .main_visual_block .mv_txt h2 {
        font-size: 36px;
    }

    .main_visual_block.mv_in .mv_txt p {
        font-size: 16px;
    }

    .tabMenu_type01 .tab_btn {
        font-size: 14px;
        min-width: 140px;
    }

    .tabMenu_type01 .tab_panel {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tabMenu_type01 .tab_panel .tab_txt{
        padding: 12px 0 0 0;
    }

    .tabMenu_type01 .tab_panel .tab_txt p {
        font-size: 16px;
    }

    .tabMenu_type01 .tab_card {
        width: 100%;
        padding: 28px 20px;
    }

    .tabMenu_type01 .card_head h3 {
        font-size: 18px;
    }

    .tabMenu_type01 .tab_card ul li {
        font-size: 14px;
    }

    .emergency_banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .emergency_banner .right{
        width: 100%;
    }

    .emergency_banner .btn_call {
        width: 100%;
        min-width: auto;
    }

    .care_diff_list ul{
        gap: 12px;
    }

    .care_diff_list ul li {
        flex-direction: column;
        min-height: auto;
    }

    .care_diff_list ul li .ico {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        align-self: auto;
        padding: 20px;
    }

    .care_diff_list ul li .ico img{
        width: auto;
        height: 60px;
    }

    .care_diff_list ul li .txt{
        padding: 20px;
    }

    .care_diff_list ul li .txt h3 {
        font-size: 20px;
    }

    .care_diff_list ul li .txt p {
        font-size: 14px;
    }

    .care_method_list_area ul li .txt h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .care_method_list_area ul li .txt p {
        font-size: 14px;
    }

    .scar_surgery_area .txt p {
        font-size: 14px;
    }

    .scar_surgery_area .txt .btn_more {
        font-size: 14px;
    }

    .scar_cure_method_area .desc h3 {
        font-size: 20px;
    }

    .scar_cure_method_area .desc p {
        font-size: 14px;
    }

    #director .director_portrait {
        flex-direction: column;
        gap: 40px;
    }

    #director .left,
    #director .right {
        width: 100%;
    }

    #director .right {
        padding: 0;
    }

    #director .right .role,
    #director .right .name .title {
        font-size: 16px;
    }

    #director .right .name .kor {
        font-size: 28px;
    }

    #director .right .career_main,
    #director .right .career_sub {
        margin-top: 20px;
    }

    #director .right .career_main li,
    #director .right .career_sub li {
        font-size: 14px;
    }

    #director .article_title {
        font-size: 24px;
    }

    #director .article_list li {
        font-size: 14px;
    }

    #map .info_block,
    #map .info_block:last-child {
        padding: 40px 0;
    }

    #map .info_title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    #map .hours_list .day,
    #map .hours_list .time {
        font-size: 14px;
    }

    #map .hours_list .note{
        font-size: 14px;
    }

    #map .address,
    #map .route,
    #map .parking {
        font-size: 14px;
    }

    #reserv_area .rsv_container{
        flex-direction: column;
        gap: 60px;
    }

    #reserv_area .left{
        gap: 40px;
    }

    #reserv_area .left,
    #reserv_area .right{
        width: 100%;
    }

    #reserv_area .right{
        position: static;
        max-height: max-content;
        overscroll-behavior: unset;
        overflow: visible;
    }

    #reserv_area .rsv_summary{
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 60px;
        padding-right: 60px;
    }

    #reserv_area .rsv_summary{
        padding: 0;
    }

    #reserv_area .summary_block:nth-last-of-type(2)::after{
        display: none;
    }

    #reserv_area .summary_block{
        padding: 24px 20px;
    }

    #reserv_area .summary_block::after{
        width: 100vw;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    #reserv_area .summary_block:first-child{
        padding-top: 24px;
    }

    #reserv_area .summary_dl .dt,
    #reserv_area .summary_dl .dd{
        font-size: 14px;
    }

    #reserv_area .rdo .rdo_txt{
        font-size: 14px;
    }

    #reserv_area .input_group{
        gap: 8px;
    }

    #reserv_area .rsv_input{
        font-size: 14px;
        padding: 16px;
    }

    #reserv_area .agree_group{
        gap: 10px;
    }

    #reserv_area .rsv_submit{
        margin-top: 0;
        font-size: 16px;
        padding: 10px 24px;
        border-radius: 5px;
    }

    #reserv_area .rsv_submit_btn{
        padding: 4px 20px 40px 20px;
    }

    #reserv_area .rsv_tit{
        font-size: 20px;
        margin-bottom: 20px;
    }

    #reserv_area .rsv_label{
        font-size: 18px;
        margin-bottom: 12px;
    }

    #reserv_area .rsv_field + .rsv_field{
        margin-top: 20px;
    }

    #reserv_area .chk .chk_box{
        width: 20px;
        height: 20px;
    }

    #reserv_area .chk .chk_box::after{
        width: 4px;
    }

    #reserv_area .chk .chk_txt{
        font-size: 14px;
    }

    #reserv_area .calendar{
        width: 100%;
        max-width: 568px;
        margin: 0 auto;
    }

    #reserv_area .calendar *{
        font-size: 16px;
    }

    #reserv_area .calendar .cal_head{
        margin-bottom: 20px;
    }

    #reserv_area .cal_title{
        font-size: 16px;
    }

    #reserv_area .time_field .rsv_label{
        margin-bottom: 8px;
    }

    #reserv_area .time_group{
        gap: 8px 5px;
    }

    #reserv_area .time_slot{
        font-size: 16px;
        padding: 10px;
        border-radius: 5px;
    }

    #reserv_area .agree_detail{
        font-size: 14px;
    }


    #reserv_area .rsv_step:not(:has(.time_field)){
        padding-bottom: 40px;
    }
}

@media (max-width: 850px) {
    .container.type04 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 768px) {
    br.br_pc {
        display: none;
    }

    br.br_768 {
        display: inline;
    }

    .sec_type01,
    .sec_type02,
    .sec_banner,
    #main_section12,
    #map {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .main_visual_block{
        align-items: flex-end;
    }

    .main_visual_block.mv_type02{
        align-items: center;
    }

    .main_visual_block.mv_type02 .mv_inner{
        margin-bottom: 0;
    }

    .main_visual_block .mv_tit h2 {
        font-size: 36px;
    }

    .main_visual_block .mv_tit p {
        font-size: 16px;
    }

    .main_visual_block .mv_inner{
        margin-bottom: 19vh;
    }

    .main_visual_block .mv_txt h2 {
        font-size: 30px;
    }

    .main_visual_block.mv_in .mv_txt p {
        font-size: 14px;
    }

    .main_section {
        padding: 90px 0;
    }

    .main_section .sec_tit h2 {
        font-size: 30px;
    }

    .sub_section {
        padding: 80px 0;
    }

    #sub_visual .sub_visual_tit h2 {
        font-size: 32px;
    }

    .sec_tit p.mt_type02, .sec_txt p.mt_type02{
        margin-top: 8px;
    }

    .sec_tit p.mt_type03, .sec_txt p.mt_type03{
        margin-top: 12px;
    }

    .sec_tit h2,
    .sec_txt h2 {
        font-size: 24px;
    }

    .sec_tit p,
    .sec_txt p,
    .exImg_list ul li .ba_label {
        font-size: 14px;
    }

    .surgery_target_imgList ul{
        gap: 8px;
    }

    .surgery_target_imgList ul li p{
        margin-top: 0;
        width: 100%;
        padding: 8px 16px;
        font-size: 14px;
    }

    .surgery_stage_desc {
        margin-top: 48px;
    }

    .surgery_stage_desc ul {
        gap: 40px;
    }

    .surgery_stage_desc ul li {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .surgery_stage_desc ul li .stage_txt {
        width: 100%;
        gap: 12px;
    }

    .surgery_stage_desc ul li .stage_txt h3 {
        font-size: 22px;
    }

    .surgery_stage_desc ul li .stage_txt p br {
        display: none;
    }

    .surgery_stage_desc ul li .stage_txt p {
        font-size: 16px;
        margin-top: 0;
    }

    .surgery_stage_desc ul li .stage_txt p.stage_target {
        font-size: 16px;
        margin-top: 0;
    }

    .surgery_stage_txt_area ul li {
        flex-direction: column;
        padding: 18px 12px;
        text-align: center;
    }

    .surgery_stage_txt_area ul li .stage_time {
        width: auto;
        margin-bottom: 8px;
        font-size: 18px;
    }

    .surgery_stage_txt_area ul li .stage_desc {
        font-size: 15px;
    }

    .compare_table td,
    .compare_table .cell_label {
        font-size: 16px;
        padding: 16px 14px;
    }

    .compare_table thead th {
        font-size: 20px;
        padding: 22px 14px;
    }

    .compare_table .info_tip_box {
        font-size: 14px;
    }

    .suture_system_block .left,
    .suture_system_block .right {
        width: 100%;
    }

    .suture_system_block .left {
        padding-right: 0;
    }

    .suture_system_block .right {
        margin-top: 40px;
    }

    .suture_system_block .suture_sys_list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 32px 20px;
    }

    .suture_system_block .suture_sys_list h3 {
        font-size: 22px;
    }

    .suture_system_block .suture_sys_list p {
        font-size: 16px;
    }

    .tabMenu_type01 .tab_panel .tab_txt p {
        font-size: 14px;
    }

    .care_diff_list ul li {
    }

    .care_diff_list ul li .txt {
    }

    .care_diff_list ul li .txt p br {
        display: none;
    }

    .care_method_list_area ul{
        gap: 40px;
    }

    .care_method_list_area ul li {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .care_method_list_area ul li .img,
    .care_method_list_area ul li .txt {
        width: 100%;
    }

    .care_method_list_area ul li .txt {
        padding: 0;
        gap: 8px;
    }

    .scar_surgery_area .txt h2 {
        font-size: 24px;
    }

    .yt_link{
        margin: 20px auto 40px auto;
        width: 240px;
        max-width: 100%;
    }

    .yt_link a{
        font-size: 14px;
        justify-content: space-between;
        border-radius: 5px;
        padding: 12px 24px;
    }

    #director .article_title {
        font-size: 20px;
    }

    #map .hours_list {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    #request .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    #request .txt_area h2 {
        font-size: 28px;
    }

    #footer{
        padding: 60px 0;
    }

    #footer .bot {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    #footer .footer_inner{
        flex-direction: column;
    }

    #footer .footer_info li{
        font-size: 14px;
    }

    #footer .footer_policy{
        flex-direction: row;
        gap: 12px;
    }

    #footer .footer_policy li a{
        font-size: 14px;
    }

    .btn_emergency_fixed{
        font-size: 16px;
        font-weight: 600;
        padding: 8px 16px;
        line-height: 1.5;
        width: 135px;
    }

    .btn_qa_fixed{
        font-size: 16px;
        font-weight: 600;
        padding: 8px 16px;
        line-height: 1.5;
        width: 135px;
        bottom: 90px;
    }

    #reserv_area{
        padding-bottom: 0;
    }
}

@media (max-width: 640px) {
    br.br_640 {
        display: inline;
    }

    .exImg_list ul {
        gap: 12px 0;
    }

    .exImg_list ul li {
        width: 100%;
    }

    #sub_beforeAfter .exImg_list ul li {
        width: 50%;
    }

    .compare_table td,
    .compare_table .cell_label {
        font-size: 14px;
        padding: 16px 10px;
    }

    .compare_table thead th {
        font-size: 18px;
        padding: 20px 10px;
    }

    #main_section04 {
        padding: 0;
    }

    #main_section04 .container > * {
        display: none;
    }

    #main_section04 .container .mo_suture_detail {
        display: block;
    }

    .suture_system_block .suture_sys_list h3 {
        font-size: 20px;
    }

    .suture_system_block .suture_sys_list p {
        font-size: 14px;
    }

    .half_sec01 {
        flex-direction: column;
        gap: 40px;
    }

    .half_sec01 .left,
    .half_sec01 .right {
        width: 100%;
    }

    .half_sec01 .right {
        padding: 0;
    }

    .scar_surgery_area{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .scar_surgery_area .txt,
    .scar_surgery_area .img{
        width: 100%;
    }

    .scar_surgery_area .txt h2{
        margin-bottom: 12px;
    }

    .scar_surgery_area .txt .btn_more{
        margin-top: 20px;
        border-radius: 5px;
    }

    .scar_care_graph {
        padding: 0;
        background: transparent;
    }

    .scar_care_graph > img:not(.scar_graph_img_mo) {
        display: none;
    }

    .scar_care_graph .scar_graph_img_mo {
        display: block;
    }
}

@media (max-width: 568px) {
    .sub01_visual .mv_bg img {
        object-position: left 65% top 0;
    }

    #reserv_area .chk_group{
        gap: 20px 24px;
    }

    #reserv_area .rsv_field .chk{
        width: calc(50% - 12px);
    }
}

@media (max-width: 480px) {
    #header .header_logo h1 a img {
        height: 20px;
    }

    .main_visual_block .mv_tit h2 {
        font-size: 30px;
    }

    .compare_table .info_tip_box {
        width: max-content;
        max-width: 78vw;
        padding: 12px 16px;
        font-size: 14px;
        white-space: normal;
    }

    #footer .right .floor1 {
        gap: 24px 32px;
    }
}


/* ==========================================================================
   상담 및 문의 게시판 - 반응형
   ========================================================================== */

@media (max-width: 1024px) {
    .main_visual_block.counsel_visual {
        min-height: 560px;
    }

    #counsel_area {
        padding: 80px 0 90px;
    }

    #counsel_area .form_row > .form_label {
        width: 150px;
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .main_visual_block.counsel_visual {
        min-height: 430px;
    }

    #counsel_area {
        padding: 50px 0 60px;
    }

    /* 검색 */
    #counsel_area .counsel_search {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 24px;
    }

    #counsel_area .counsel_search .search_type,
    #counsel_area .counsel_search .search_keyword {
        width: 100%;
    }

    #counsel_area input[type="text"],
    #counsel_area input[type="tel"],
    #counsel_area input[type="password"],
    #counsel_area input[type="email"],
    #counsel_area select {
        height: 46px;
        font-size: 15px;
    }

    /* 목록 : 표 → 카드 */
    #counsel_area .counsel_table {
        display: none;
    }

    #counsel_area .counsel_list_mo {
        display: block;
    }

    /* 페이지네이션 */
    #counsel_area .counsel_paging_area {
        flex-direction: column;
        gap: 24px;
        margin-top: 30px;
    }

    #counsel_area .counsel_paging {
        gap: 16px;
    }

    #counsel_area .counsel_paging button {
        font-size: 16px;
    }

    #counsel_area .counsel_paging_area .btn_write {
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        height: 52px;
        font-size: 17px;
    }

    /* 폼 */
    #counsel_area .counsel_form {
        padding-top: 24px;
    }

    #counsel_area .form_row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 18px;
    }

    #counsel_area .form_row > .form_label {
        width: 100%;
        padding-top: 0;
        font-size: 15px;
        font-weight: 700;
    }

    #counsel_area .form_field .field_inline {
        gap: 8px;
    }

    #counsel_area .form_field .field_inline .at {
        font-size: 15px;
    }

    #counsel_area .chk .chk_txt {
        font-size: 14px;
    }


    /* 첨부파일 */
    #counsel_area .file_picker {
        height: 46px;
    }

    #counsel_area .file_picker .btn_file {
        height: 32px;
        margin: 0 8px;
        padding: 0 10px;
        font-size: 13px;
    }

    #counsel_area .file_picker .file_name {
        font-size: 13px;
    }

    #counsel_area .file_ctrl button {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    #counsel_area .field_note {
        font-size: 13px;
    }

    /* 동의 박스 */
    #counsel_area .form_divider {
        margin: 26px 0 20px;
    }

    #counsel_area .agree_box {
        justify-content: flex-start;
        gap: 10px;
        padding: 16px 14px;
    }

    #counsel_area .agree_box .agree_detail {
        margin-left: auto;
        font-size: 13px;
        white-space: nowrap;
    }

    /* 버튼 : 모바일에서는 주버튼이 위, 취소가 아래 */
    #counsel_area .btn_row {
        flex-direction: column;
        gap: 8px;
        margin-top: 28px;
    }

    #counsel_area .btn_navy,
    #counsel_area .btn_gray {
        width: 100%;
        min-width: 0;
        height: 52px;
        font-size: 17px;
    }

    #counsel_area .btn_row .btn_navy {
        order: 1;
    }

    #counsel_area .btn_row .btn_gray {
        order: 2;
    }

    /* 에디터 */
    .counsel_editor .editor_body {
        min-height: 180px;
        font-size: 15px;
    }

    .counsel_editor .editor_toolbar {
        gap: 1px;
        padding: 5px 6px;
    }

    .counsel_editor .editor_toolbar button {
        min-width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .counsel_editor .editor_toolbar select {
        height: 26px;
        font-size: 12px;
    }

    /* 비밀번호 확인 */
    #counsel_area .counsel_password {
        padding: 20px 0 0;
    }

    #counsel_area .counsel_password .password_tit {
        font-size: 32px;
    }

    #counsel_area .counsel_password .password_desc {
        margin-top: 10px;
        font-size: 14px;
    }

    #counsel_area .counsel_password .password_form {
        margin-top: 30px;
        padding-top: 22px;
    }

    #counsel_area .counsel_password .password_form input {
        height: 48px;
    }

    /* 상세 */
    #counsel_area .counsel_view .view_head {
        padding: 20px 4px;
    }

    #counsel_area .counsel_view .view_title {
        font-size: 19px;
    }

    #counsel_area .counsel_view .view_meta {
        font-size: 13px;
    }

    #counsel_area .counsel_view .view_content {
        min-height: 160px;
        padding: 22px 4px;
        font-size: 15px;
    }

    #counsel_area .counsel_view .view_files {
        padding: 16px 4px;
    }

    #counsel_area .counsel_view .view_files a {
        padding: 7px 10px;
        font-size: 14px;
    }

    #counsel_area .counsel_view .view_answer {
        margin-top: 5%;
        padding: 0;
    }

    #counsel_area .counsel_view .view_answer .answer_tit {
        margin: 0 4px;
        padding: 8px 10px;
        font-size: 15px;
    }

    #counsel_area .counsel_view .view_answer .answer_body {
        margin: 0 4px;
        padding: 18px 14px;
        font-size: 15px;
    }

    #counsel_area .counsel_view .view_answer .answer_body p {
        margin: 0 0 14px;
    }
}

@media (max-width: 480px) {
    #counsel_area .counsel_list_mo .mo_subject {
        font-size: 15px;
    }

    #counsel_area .counsel_list_mo .mo_meta {
        font-size: 12px;
    }

    #counsel_area .counsel_list_mo .mo_meta > span {
        padding: 0 7px;
    }

    #counsel_area .counsel_paging {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    /* 제목 행 : 모바일에서는 라벨 우측에 비공개 체크가 붙고 입력창이 아래로 내려간다 */
    #counsel_area .form_row.row_title {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    #counsel_area .form_row.row_title > .form_label {
        width: auto;
        flex: 1 1 auto;
        display: block;
    }

    #counsel_area .form_row.row_title > .secret_chk {
        order: 2;
        margin-left: auto;
        padding-top: 0;
        align-self: center;
    }

    #counsel_area .form_row.row_title > .form_field {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
    }
}

/* ==========================================================================
   의료 정보 게시판 - 반응형
   ========================================================================== */

@media (max-width: 1280px) {
    /* 본문 폭이 좁아지면 목차를 조금 줄여 본문을 먼저 확보합니다. */
    #medical_area .medical_view {
        gap: 40px;
    }

    #medical_area .medical_toc {
        flex-basis: 200px;
        width: 200px;
    }
}

@media (max-width: 1024px) {
    .main_visual_block.medical_visual {
        min-height: 560px;
    }

    #medical_area {
        padding: 80px 0 90px;
    }

    #medical_area .medical_list {
        gap: 44px 24px;
    }

    #medical_area .medical_list .card_overlay {
        left: 16px;
        right: 16px;
        bottom: 14px;
        font-size: 18px;
    }

    /* 목차를 본문 위로 올려 가로 폭을 모두 본문에 씁니다. */
    #medical_area .medical_view {
        flex-direction: column;
        gap: 0;
    }

    #medical_area .medical_view .view_body {
        order: 2;
        width: 100%;
    }

    /* 목차가 본문 위로 올라오면 따라다니지 않고 그 자리에 둡니다. */
    #medical_area .medical_toc {
        position: static;
        order: 1;
        flex: none;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-bottom: 24px;
        padding: 20px 22px;
        border-radius: 8px;
        background: #F5F7FA;
    }

    #medical_area .medical_toc .toc_inner {
        padding-top: 0;
    }

    #medical_area .medical_cta {
        margin-top: 70px;
        padding: 44px 40px;
    }

    #medical_area .medical_cta .cta_txt h3 {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    .main_visual_block.medical_visual {
        min-height: 430px;
    }

    #medical_area {
        padding: 50px 0 60px;
    }

    /* 검색 */
    #medical_area .medical_search {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 24px;
    }

    #medical_area .medical_search .search_type,
    #medical_area .medical_search .search_keyword {
        width: 100%;
    }

    #medical_area input[type="text"],
    #medical_area select {
        height: 46px;
        font-size: 16px;
    }

    /* 카드 목록 : 2열 */
    #medical_area .medical_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }

    #medical_area .medical_list .card_overlay {
        font-size: 16px;
    }

    /* 좁은 화면에서는 카드 폭이 줄어 두 줄 자르기에 걸리므로, 제목 · 요약을 끝까지 보여 준다. */
    #medical_area .medical_list .card_title {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
        margin-top: 12px;
        font-size: 16px;
        word-break: break-word;
    }

    #medical_area .medical_list .card_summary {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
        margin-top: 8px;
        font-size: 14px;
        word-break: break-word;
    }

    #medical_area .medical_empty {
        padding: 60px 8px;
        font-size: 16px;
    }

    /* 페이지네이션 */
    #medical_area .medical_paging_area {
        margin-top: 44px;
    }

    #medical_area .medical_paging {
        gap: 16px;
    }

    #medical_area .medical_paging button {
        font-size: 16px;
    }

    /* 상세 */
    #medical_area .medical_view .view_title {
        font-size: 20px;
    }

    #medical_area .medical_view .view_date {
        margin-top: 8px;
        font-size: 14px;
    }

    #medical_area .medical_view .view_content {
        padding-top: 24px;
        font-size: 15px;
    }

    #medical_area .medical_view .view_content h2 {
        scroll-margin-top: 100px;
        margin: 32px 0 12px;
        font-size: 18px;
    }

    #medical_area .medical_view .view_content h3 {
        scroll-margin-top: 100px;
        margin: 24px 0 10px;
        font-size: 16px;
    }

    /*
       본문 썸네일 : 그림이 140px 로 고정돼 있어 좁은 화면에서는 옆의 제목 · 설명이
       짓눌려 잘립니다. 그림을 줄이고 줄 수 제한을 풀어 내용을 끝까지 보여 줍니다.
    */
    #medical_area .medical_view .view_content figure.content_thumb > a:not(.thumb_url) {
        gap: 14px;
    }

    #medical_area .medical_view .view_content figure.content_thumb img {
        flex: 0 0 110px;
        width: 110px;
        height: 150px;
    }

    /* 그림이 좁아진 만큼 재생 표시도 그림 한가운데로 옮깁니다. */
    #medical_area .medical_view .view_content figure.content_thumb.thumb_video > a:not(.thumb_url)::before,
    #medical_area .medical_view .view_content figure.content_thumb.thumb_video > a:not(.thumb_url)::after {
        left: 55px;
    }

    #medical_area .medical_view .view_content figure.content_thumb .thumb_info {
        gap: 6px;
        padding: 12px 14px 12px 0;
    }

    #medical_area .medical_view .view_content figure.content_thumb .thumb_title {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
        font-size: 15px;
    }

    #medical_area .medical_view .view_content figure.content_thumb .thumb_desc {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
        font-size: 13px;
    }

    /* 표는 칸이 짓눌리지 않도록 가로로 밀어 볼 수 있게 둡니다. */
    #medical_area .medical_view .view_content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        table-layout: auto;
    }

    #medical_area .medical_view .view_content th,
    #medical_area .medical_view .view_content td {
        padding: 10px 12px;
        font-size: 14px;
        word-break: break-word;
    }

    #medical_area .medical_toc {
        padding: 16px 18px;
    }

    #medical_area .medical_toc button {
        font-size: 14px;
    }

    /* 이전글 / 다음글 */
    #medical_area .medical_nav {
        margin-top: 50px;
    }

    #medical_area .medical_nav .nav_row {
        align-items: flex-start;
        gap: 14px;
        padding: 14px 4px;
    }

    #medical_area .medical_nav .nav_label {
        width: 78px;
        gap: 6px;
        font-size: 14px;
        line-height: 1.45;
    }

    #medical_area .medical_nav .nav_row a,
    #medical_area .medical_nav .nav_none {
        font-size: 14px;
    }

    /* 좁은 화면에서는 제목을 한 줄로 잘라 내지 않고 여러 줄로 모두 보여 줍니다. */
    #medical_area .medical_nav .nav_row a {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        word-break: break-word;
    }

    #medical_area .medical_btn_row {
        margin-top: 24px;
    }

    #medical_area .btn_list {
        min-width: 104px;
        height: 44px;
        font-size: 15px;
    }

    /* 하단 문의 배너 */
    #medical_area .medical_cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        margin-top: 50px;
        padding: 32px 24px;
    }

    #medical_area .medical_cta .cta_txt h3 {
        font-size: 20px;
    }

    #medical_area .medical_cta .cta_txt p {
        margin-top: 10px;
        font-size: 15px;
    }

    #medical_area .btn_cta {
        width: 100%;
        min-width: 0;
        height: 52px;
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    /* 카드 목록 : 1열 */
    #medical_area .medical_list {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #medical_area .medical_list .card_overlay {
        font-size: 18px;
    }

    #medical_area .medical_paging {
        gap: 12px;
    }
}