@charset "utf-8";

.localsec {
    /* background-color:#ECF5FC; */
    /* padding: 2rem; */
    border-radius: 2rem;
}

.local-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 2rem 3rem;
    background-color: #ECF5FC;
    border-radius: 1rem;
    position: relative;
    align-items: center;
}

.local-list {
    display: flex;
    gap: 6rem;
}

.local-list li span {
    background-image: url(/img/page/location/address.svg);
    background-repeat: no-repeat;
    padding-left: 2rem;
    height: 26px;
    display: inline-block;
    margin-right: 2rem;
    color: var(--color-main);
    font-weight: 600;
    font-size: 22px;
}

.local-list li:nth-child(2) span {
    background-image: url(/img/page/location/call.svg);
}

.local-info a {
    display: inline-block;
    background-color: var(--color-main);
    color: #fff;
    padding: 1rem 3rem;
    border-radius: 30px;
    transition: .4s;
}

.local-info a:hover {
    box-shadow: 4px 4px 12px rgb(45 81 163 / 20%);
    transform: translateY(-5%);
}

.loadmap {
    height: 460px;
    z-index: 0;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 1rem;
    overflow: hidden;
}

.loadmap .root_daum_roughmap .wrap_map {
    height: 100%;
}

.loadmap .root_daum_roughmap .wrap_controllers {
    display: none;
}

.loadmap .root_daum_roughmap .wrap_btn_zoom {
    z-index: 2
}

.loadmap .root_daum_roughmap_landing {
    border-radius: 2rem 2rem 0 0;
    border: none;
}

.loadmap .root_daum_roughmap .border1,
.map .root_daum_roughmap .border2,
.map .root_daum_roughmap .border3,
.map .root_daum_roughmap .border4 {
    /* border:0; */
    display: none;
}

.loadmap .root_daum_roughmap .section_busstop .icon_bus {
    display: none;
}

/* 교통안내 섹션 */
.traffic-wrapper {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.map {
    width: 50%;
}

.map img {
    width: 100%
}

.traffic-list {
    width: 50%;
}

.traffic-list dl {}

.traffic-list dl+dl {
    margin-top: 4rem
}

.traffic-list dl dt {
    color: var(--color-main);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.traffic-list dl dt span {
    background-repeat: no-repeat;
    padding-left: 2rem;
    background-position: left;
}

.traffic-list dl.bus dt span {
    background-image: url(/img/page/location/bus.svg);
}

.traffic-list dl.subway dt span {
    background-image: url(/img/page/location/subway.svg);
}

.traffic-list dl dd {}

.traffic-list dl dd+dd {
    margin-top: 1rem
}

.traffic-list .line9 {
    color: #5f4834;
    font-weight: 600;
    padding-bottom: 5px;
    display: inline-block;
}

.traffic-list .line2 {
    color: #00A95C;
    font-weight: 600;
    padding-bottom: 5px;
    display: inline-block;
}

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

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

    .local-info {
        padding: 2rem;
    }

    .local-list {
        gap: 1rem;
        flex-wrap: wrap;
        width: 75%;
    }

    .local-list li {
        width: 100%
    }

    .local-info a {
        padding: 1rem 2rem;
    }

    .sub_con section.trafficsec {
        margin-top: 2rem;
    }

    .traffic-wrapper {
        flex-wrap: wrap
    }

    .map {
        width: 90%;
    }

    .traffic-list {
        width: 100%
    }

    .traffic-list dl+dl {
        margin-top: 3rem
    }
}

/* 모바일 가로, 모바일 세로 (해상도 ~ 767px)*/
@media all and (max-width:767px) {
    .loadmap {
        height: 260px
    }

    .local-info {
        padding: 1.5rem;
        flex-wrap: wrap;
    }

    .local-list {
        width: 100%
    }

    .local-list li span {
        font-size: 18px;
        height: 20px;
        background-size: contain;
        width: 100%;
    }

    .local-info a {
        margin-top: 1rem;
        width: 100%;
        text-align: center;
    }

    .map {
        width: 100%
    }

    .traffic-list dl dt {
        font-size: 20px
    }

    .traffic-list dl dd+dd {
        margin-top: .5rem
    }

}