@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 > div,
.Mvisual .slick-slider,
.Mvisual .slick-slider div,
.Mvisual .item,
.Mvisual .item div, .Mvisual .item p,
.Mvisual .item a,
.Mvisual .item a p{ 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;}

.visit > ul{ flex-wrap: wrap;}
.visit > ul li{ max-width: 100%; width: 50%;}
.visit > ul li a{ padding: 0.5rem 1rem;}
.visit > ul li a::before{ display: none;}
.visit > ul li a:hover,
.visit > ul li a:focus{ background:#fff;  border-radius: 2rem;}

@media screen and (min-width: 1541px) {
    .visit{ padding-left: 14.5rem;}
}

@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; margin-left: 1rem;}

    .service ul li a .txt{ word-break: break-all; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
}

@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;}

    .callLst ul{padding-left: 0;}

    .linkC1 ul{ flex-direction: row;}

    .visit > ul{ margin-left: -1rem; gap: 0;}

}
@media screen and (max-width: 968px) {
    .callLst ul li > span{ font-size: 1.4rem;}
}

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

    .MC_box4{ background:none; }

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

    .linkC1 ul{flex-direction: column;}
    .linkC1 ul li a > span{ white-space: wrap; display: block;}

    .visit > ul li{ width: 100%;}

}

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

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

    .introduce .titWrap{ flex-direction: column; gap: 1rem;}
    .introduce .titWrap h2{ flex: none; width: 100%; white-space: wrap; padding-right: 2.5rem; line-height: 2.3rem; text-align: left;}

}

@media screen and (max-width: 380px) {
    .service ul li { width: 100%;}

    .callLst{ gap: 1rem 0;}
    .callLst ul li{ gap: 0 0.5rem;}
    .callLst ul li > span{ width: 100%; flex: none; margin-left: 2rem; font-size: 1.2rem; line-height: 1;}
    .callLst ul .ico{ width: 2rem; height: 2rem;}
    .callLst ul .ico img{ width: 1.25rem; height: auto;}

    .introduce .titWrap h2{ line-height: 1.75rem;}
    .introduce .btn_more{ right:0;}

}