@charset "utf-8";


#facility .facility_info {
    display:flex;
    align-items:stretch;
    gap:30px;
}
#facility .facility_info .info_cont {
    border:1px solid #ddd;
    border-radius:50px;
    padding:30px;
    display:flex;
    flex-direction:column;
    gap:20px;
    flex:1;
}
#facility .facility_info .info_logo {
    text-align:center;
}
#facility .facility_info .info_text {
    border:1px solid #ddd;
    background-color:#FBFBFB;
    border-radius:30px;
    padding:10px 30px;
    display:flex;
    align-items:center;
    gap:30px;
}
#facility .facility_info .info_text .info_ti {
    width:75px;
    font-size:1.11rem;
    font-weight:500;
    font-family:'Paperlogy';
}
#facility .facility_info .info_text .info_co {
    font-size:1rem;
    font-weight:400;
}
#facility .facility_info .info_img {
    flex:1;
}
#facility .facility_info .info_img img {
    width:100%;
}


#facility .facility_building {
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:20px;
}
#facility .facility_building .facility_tab {
    background-color:#F4F4F4;
    border-radius:30px;
    padding:20px;
}
#facility .facility_building .facility_tab .tab_select {
    display:none;
    width: 100%;
    padding: 15px 20px;
    background-color: #45A7E5;
    border: 1px solid #ddd;
    cursor: pointer;
    text-align: left;
    border-radius:999px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2210%22%20viewBox%3D%220%200%2018%2010%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8.99997%2010C8.67737%2010%208.35482%209.87995%208.10886%209.64036L0.369255%202.09719C-0.123085%201.61736%20-0.123085%200.839379%200.369255%200.359734C0.861396%20-0.119911%201.65948%20-0.119911%202.15186%200.359734L8.99997%207.03435L15.8481%200.35997C16.3405%20-0.119675%2017.1385%20-0.119675%2017.6306%200.35997C18.1231%200.839615%2018.1231%201.61759%2017.6306%202.09743L9.89107%209.6406C9.645%209.88023%209.32245%2010%208.99997%2010Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:95% center; 
}
#facility .facility_building .facility_tab .tab_select span {
    font-size:1.22rem;
    font-weight:500;
    color:#fff;
    font-family:'Paperlogy';
}
#facility .facility_building .facility_tab .facility_tab_list .tab_list {
    display:flex;
    align-items:stretch;
    gap:10px;
    flex-wrap: wrap;
}
#facility .facility_building .facility_tab .facility_tab_list .tab_list li {
    width:calc(14.258714% - 8.571428px);
    background-color:#fff;
    padding:15px 20px;
    border-radius:40px;
    text-align: center;
    border:2px solid #fff;
    transition: .3s;
}
#facility .facility_building .facility_tab .facility_tab_list .tab_list li:hover {
    border-color:#45A7E5;
    transition: .3s;
}
#facility .facility_building .facility_tab .facility_tab_list .tab_list li:first-child {
    display:none;
}
#facility .facility_building .facility_tab .facility_tab_list .tab_list li span {
    font-size:1.11rem;
    font-weight:400;
    letter-spacing:-0.6px;
}


#facility .facility_building .building_img .tab_cont_view {
    display:none;
}
#facility .facility_building .building_img .tab_cont_view img {
    border-radius:50px;
    width:100%;
}
#facility .facility_building .building_img .tab_cont_view.active {
    display:block;
}


#tab0 {
    position: relative;
}
#tab0::before {
    content:'상단의 공간명을 클릭하시면 해당 공간을 확인하실 수 있습니다.';
    font-size:1.55rem;
    font-weight:500;
    line-height:150%;
    color:#fff;
    font-family:'Paperlogy';
    width:380px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}

/* ********** 반응형 미디어 쿼리 css ********** */
@media(max-width:1440px) {
    #facility .facility_info {
        align-items:center;
    }
}
@media(max-width:1200px) {}
@media(max-width:1024px) {
    #facility .facility_info {
        flex-direction:column-reverse;
    }
    #facility .facility_info .info_cont {
        width:100%;
        border-radius:30px;
    }
}

@media(max-width:991px) {
    #facility .facility_building .facility_tab .facility_tab_list {
        display: none;
        position: absolute;
        z-index: 99;
        width:calc(100% - 60px);
    }
      #facility .facility_building .facility_tab .facility_tab_list.open {
        display: block;
    }
    #facility .facility_building .facility_tab .tab_select {
        display: block;
        position: relative;
    }
    #facility .facility_building .facility_tab .tab_select.open {
        border-radius: 30px 30px 0 0;
        background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2210%22%20viewBox%3D%220%200%2018%2010%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9.00003%208.34465e-07C9.32263%208.34465e-07%209.64518%200.120049%209.89113%200.359638L17.6307%207.90281C18.1231%208.38264%2018.1231%209.16062%2017.6307%209.64027C17.1386%2010.1199%2016.3405%2010.1199%2015.8481%209.64027L9.00003%202.96565L2.15188%209.64003C1.65954%2010.1197%200.861536%2010.1197%200.369434%209.64003C-0.123145%209.16039%20-0.123145%208.38241%200.369434%207.90257L8.10892%200.359404C8.355%200.119776%208.67755%208.34465e-07%209.00003%208.34465e-07Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    }
    #facility .facility_building .facility_tab .facility_tab_list .tab_list {
        background: #fff;
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 30px 30px;
        flex-direction:column;
        gap:0;
        overflow:hidden;
    }
    #facility .facility_building .facility_tab .facility_tab_list .tab_list .tab_item {
        padding: 10px 20px;
        border-bottom: 1px dashed #ccc;
        cursor: pointer;
        border-radius:0;
        width:100%;
        text-align:left;
    }
    #facility .facility_building .facility_tab .facility_tab_list .tab_list .tab_item:last-child {
        border-bottom:none;
    }
    #facility .facility_building .facility_tab .facility_tab_list .tab_list .tab_item.active {
        color: #45A7E5;
    }
    #facility .facility_building .facility_tab .facility_tab_list .tab_list .tab_item:hover {
        background-color: #e8f6ff;
    }


    #facility .facility_building .building_img .tab_cont_view img {
        border-radius:30px;
    }
}
@media(max-width:768px) {}
@media(max-width:640px) {}
@media(max-width:480px) {
    #facility .facility_info .info_logo {
        width:80%;
        margin:auto;
    }
    #facility .facility_info .info_logo img {
        width:100%;
    }
    #facility .facility_info .info_cont {
        padding:20px;
    }
    #facility .facility_info .info_text {
        align-items: flex-start;
        gap: 0;
        flex-direction: column;
    }
}
@media(max-width:320px) {}