@charset "UTF-8";

.MC_box1{ height: 26rem;}
.MC_box4{ margin:0; padding:3.5rem 0; background:url(/images/web/seoulcare/main/bg_Mcbox4.png) no-repeat 7rem bottom; }
.MC_box5{ margin-top:0;}

.Mvisual,
.Mvisual .slick-slider,
.Mvisual .slick-slider div,
.Mvisual .item a{ height: 100%;}
.Mvisual .item a{ display: block;}
.Mvisual .item a img{ width: 100%; height: 100%; object-fit: cover; object-position: center right;}

.callLst > a{ margin-left: 4.5rem;}
.callLst ul li{ align-items: center; gap: 0.5rem;}
.callLst ul .ico{ width: 2.75rem; height: 2.75rem; border-radius: 50%; background:#f8f8f8; display: flex; align-items: center; justify-content: center;}
.callLst ul .ico img{ width: 2rem; height: 2rem;}

@media screen and (max-width: 1540px) {
    .MC_wrap1 .conWrap.left,
    .MC_wrap1 .conWrap.right,
    .MC_box4{ order:0;}
    .MC_box3{ margin-top: 1rem;}
    .MC_box4{ width: 100%; padding:1.5rem 0; background-position: left bottom;}

    .MC_wrap1 .conWrap.left{ flex: 3; }
    .MC_wrap1 .conWrap.right{ flex: 2; margin:0;}

    .linkC1 ul{ flex-direction: column;}

    .callLst{ flex-direction: row; height: auto; padding-bottom:0; justify-content: space-between;}
    .callLst ul{ padding-left: 3rem;}
    .callLst ul li > span{ flex: 1;}
    .callLst > a{ position:relative; bottom:auto; left:auto; width:auto;}
}

@media screen and (max-width: 1240px) {

    .MC_wrap1 .conWrap.left{ flex: none; width: 100%;}
    .MC_wrap1 .conWrap.right{ flex: none; margin-top: 2rem;}
    .MC_box1{ height:auto; padding-right: 0;}
    .MC_box3{ margin-top: 0.5rem;}

    .linkC1 ul{ flex-direction: row;}

}

@media screen and (max-width: 768px) {

    .MC_box4{ background:none; }

    .callLst > a{ margin-left:1rem;}
    .callLst ul{ padding-left:0;}
    .callLst ul li{ flex-direction: row;}

}

@media screen and (max-width: 560px) {

    .MC_wrap1 .conWrap.right{ margin-top: 1.5rem;}

    .callLst{ flex-direction: column;}
    .callLst > a{ margin-left:0; width: 100%;}

}

/* 1. 기본 리스트 스타일 (중간 사이즈 대응) */
.callLst ul li {
    display: flex;
    flex-wrap: wrap;       /* 자리가 부족하면 자동으로 다음 줄로 */
    align-items: center;
    gap: 10px;             /* 요소 간 일정한 간격 */
    justify-content: flex-start; /* 기본은 왼쪽 정렬 */
}

/* 2. 대표번호 숫자 (절대 끊기지 않게 설정) */
.callLst ul li span:first-of-type {
    white-space: nowrap;   /* 번호가 중간에 끊겨서 밑으로 내려가는 것 방지 */
    font-weight: 700;
    font-size: 1.6rem;
}

/* 3. 입원상담 안내 문구 (유동적인 중앙 정렬) */
.callLst ul li .sub_txt {
    font-size: 0.8rem;
    color: #666;
    background-color: #f5f5f5;
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;   /* 문구 자체도 한 덩어리로 유지 */

    /* 화면이 좁아져서 밑으로 내려갔을 때만 중앙 정렬 효과 */
    margin-left: 0;
}

/* 4. 미디어 쿼리 - 화면이 좁아지는 시점 (태블릿/모바일) */
@media screen and (max-width: 1024px) { /* 중간 사이즈부터 적용 */
    .callLst {
        justify-content: center; /* 전체 박스 중앙 */
    }

    .callLst ul {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .callLst ul li {
        justify-content: center; /* 번호와 문구를 중앙으로 */
        text-align: center;
        width: 100%;             /* 너비를 꽉 채워야 중앙 정렬이 잘 됨 */
    }

    /* 입원상담 문구만 콕 집어서 중앙 정렬 */
    .callLst ul li .sub_txt {
        display: block;          /* 독립된 줄로 인식 */
        width: fit-content;      /* 글자 길이에 배경색 맞춤 */
        margin: 5px auto 0;      /* 가로 중앙 정렬 핵심 */
    }
}