@charset "utf-8";

.sub_con {
    margin-bottom: 0;
}

.fecsec {}

.fac-wrapper {
    display: flex;
    gap: 6rem;
    align-items: center;
    background-image: url(/img/page/facility/union.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.fac-img {
    width: 38%;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 4px 4px 20px rgb(0 0 0 / 8%);
}

.fac-img img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.fac-list {
    width: 72%;
}

.fac-list h4 {
    text-align: left;
    border-bottom: 2px solid var(--color-main);
    padding-bottom: 2rem
}

.fac-list dl {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 0;
}

.fac-list dl dt {
    width: 20%;
    color: var(--color-main);
    font-weight: 600;
}

.fac-list dl dd {
    width: 80%
}

.fac-list dl span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: .5rem;
}

.l1 {
    background-image: url(/img/page/facility/l1.svg);
}

.l2 {
    background-image: url(/img/page/facility/l2.svg);
}

.l3 {
    background-image: url(/img/page/facility/l3.svg);
}

.l4 {
    background-image: url(/img/page/facility/l4.svg);
}

.l5 {
    background-image: url(/img/page/facility/l5.svg);
}

/* 층별안내 섹션 */
.floorsec {
    background-color: #b8e4fd;
    padding-top: var(--sub_pd);
    position: relative;
}

.floor-wrapper {
    height: 100%;
    /* max-height: 1080px; */
    position: relative;
    /* padding-top: var(--sub_pd_half); */
    height: 100%;
    background-image: url(/img/page/facility/floor_bg1.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    position: relative;
    background-color: #b8e4fd;
    padding-bottom: var(--sub_pd);
}

.floor-wrapper h4 {
    margin-bottom: 0;
}

.floor-bg {
    display: none;
    text-align: center;
    /* height: 970px; */
    /* background-image: url(/img/page/facility/floor_bg1.jpg); */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: cover; */
    /* position: relative; */
    /* height: 100%; */
    width: 100%;
    margin-top: var(--sub_pd_half);
    z-index: -1;
}

.floor-info {
    display: flex;
    position: relative;
    justify-content: center;
    /* margin-top: 5.5rem; */
    background-image: url(/img/page/facility/floor_building.png);
    background-repeat: no-repeat;
    background-position: center 120px;
    background-size: 382px;
    height: 917px;
    gap: 15rem;
}

.floor {
    position: absolute;
    top: 94px;
    display: flex;
    gap: 40px;
    flex-direction: column;
    align-items: center;
}

.floor li {
    /* padding: .5rem 0; */
    color: #fff;
    background-color: #0083cb;
    width: 140px;
    height: 54px;
    text-align: center;
    border-radius: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.floor li:last-child,
.floor li:nth-last-child(2),
.floor li:nth-last-child(3) {
    background-color: #158169;
}

.mainbuilding,
.subbuilding {}

.mainbuilding {
    width: 40%;
    text-align: center;
    /* margin-top: -110px; */
}

.subbuilding {
    width: 41%;
    text-align: center;
}

.mainbuilding h5,
.subbuilding h5 {
    font-size: 25px;
    margin-bottom: 2rem;
    color: #0083cb;
}

.subbuilding h5 {
    color: #158169;
    margin-bottom: 122px;
}

.mainbuilding h5 span,
.subbuilding h5 span {
    background-color: #fff;
    padding: 1rem;
    border-radius: 2rem;
    display: inline-block;
    width: 200px;
    border: 1px solid #0083cb;
}

.subbuilding h5 span {
    border-color: #158169
}

.floor-info dl {
    background-color: #ddd;
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 62px;
    border: 1px solid #fff;
}

.floor-info dl+dl {
    margin-top: 32px;
}

.floor-info .mainbuilding dl {
    background-color: rgb(161 221 255 / 80%);
    backdrop-filter: blur(5px);
}

.floor-info .mainbuilding dl:nth-last-child(1),
.floor-info .mainbuilding dl:nth-last-child(2),
.floor-info .mainbuilding dl:nth-last-child(3) {
    background-color: #c3e8bbcf;
}

.floor-info .subbuilding dl {
    background-color: #b7d3ffcf;
}

.floor-list {}

.floor-info .hiding {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.byfloor {
    display: inline-flex;
    gap: 2rem;
}

.byfloor li {
    position: relative;
    font-weight: 500;
    color: #111;
}

.byfloor li:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 50%;
    background-color: rgb(0 0 0 / 15%);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -1rem
}

.byfloor li:last-child::after {
    display: none
}

/* PC */
@media only screen and (min-width:1280px) and (max-width: 1600px) {}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/
@media all and (max-width:1024px) {
    .floor-bg {
        height: 1032px
    }

    .fac-wrapper {
        gap: 2rem;
        background-size: 40%;
        height: 100%;
    }

    .fac-img {
        width: 35%;
    }

    .fac-list {
        width: 70%;
    }

    .fac-list h4 {
        margin-bottom: 2rem;
    }

    .fac-list dl {
        gap: 1rem 0;
    }

    .fac-list dl dt {
        width: 25%
    }

    .fac-list dl dd {
        width: 75%
    }

    .floor-wrapper {}

    .floor-info {
        /* padding-top: 3rem; */
        background-size: 300px;
        gap: 5rem;
        height: 738px;
    }

    .floor {
        gap: 20px
    }

    .floor li {
        width: 100px
    }

    .floor-info dl {
        height: 50px;
        display: flex;
    }

    .floor-info dl+dl {
        margin-top: 24px;
    }

    .mainbuilding,
    .subbuilding {
        width: 45%
    }

    .subbuilding h5 {
        margin-bottom: 104px;
    }
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
    .fac-wrapper {
        flex-wrap: wrap
    }

    .fac-list h4 {
        font-size: 24px
    }

    .fac-img {
        width: 100%;
    }

    .fac-list {
        width: 100%;
    }

    .fac-list dl dt {
        font-size: 16px;
        width: 28%;
    }

    .fac-list dl dd {
        width: 72%
    }

    .fac-list dl span {
        width: 18px;
        height: 18px;
        background-size: contain;
    }

    .floor-wrapper {}

    .floor-info {
        flex-wrap: wrap;
        /* padding-top: 0; */
        /* margin-top: 0; */
        /* margin-bottom: 3rem; */
        background: none;
        height: auto;
        width: 100%;
        gap: 3rem;
    }

    .floor {
        display: none
    }

    .mainbuilding,
    .subbuilding {
        width: 100%;
    }

    .mainbuilding h5,
    .subbuilding h5 {
        font-size: 20px;
        margin-bottom: 2rem;
    }

    .mainbuilding h5 span,
    .subbuilding h5 span {}

    .floor-info dl {
        display: flex;
        justify-content: flex-start;
        padding: 0 1rem;
    }

    .floor-info dl+dl {
        margin-top: .5rem;
    }

    .floor-info .hiding {
        overflow: unset;
        height: auto;
        width: auto;
        clip: unset;
        position: relative;
        text-align: left;
        margin-right: 1rem;
        font-size: 17px;
        font-weight: 600;
    }

    .byfloor {
        gap: 1.2rem
    }

    .byfloor li:after {
        margin-right: -.7rem;
    }
}