@charset "utf-8";

/* 프리미엄(pre) 반응형 모음.
   원래 pre.component.css 41,929줄 안에 @media 블록 109개가 파일 전체에 흩어져 있어
   어느 폭에서 무엇이 걸리는지 찾기 어렵고, 새 규칙을 어디에 넣느냐에 따라 캐스케이드가 뒤집혔다.
   (실제로 950px 에서 max-width:992px 규칙이 뒤쪽 max-width:1199px 규칙에 밀리는 일이 있었다.)
   무료 버전의 home.responsive.css 와 같은 구조로 여기에 모은다.
   pre.component.css 다음에 로드되므로, 여기 규칙이 항상 그 뒤에 온다.
   블록 사이의 원래 순서는 그대로 보존했다. */

@media (max-width: 1799px) {
    .tutorial-menu {
        flex: none;
        width: calc(20% - 10px);
    }

    .main-pay {
        position: inherit;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: calc(20% - 10px);
        z-index: 0;
    }

    .main-pay a {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    .main-pay a::before {
        width: 100%;
        height: 200px;
        margin-top: 0;
    }
}

@media (max-width: 1699px) {
    .main-inner {
        width: 80%;
    }

    .main-row {
        gap: 20px;
    }

    .main-left, .main-right {
        width: calc(50% - 20px);
    }
}

@media (max-width: 1299px) {
    .main-left, .main-right {
        width: 100%;
    }
}

@media (max-width: 1199px) {
    .tutorial-area .main-inner {
        justify-content: flex-start;
    }

    .tutorial-menu {
        width: calc(33.333% - 10px);
    }

    .tutorial-menu > ul > li::after {
        transform: rotate(-45deg);
    }

    .tutorial-menu > ul > li > ul {
        left: 0;
        right: 0;
        top: 40px;
        width: auto;
    }

    .tutorial-menu > ul > li > ul::before {
        top: -2px;
        left: 50%;
        transform: rotate(135deg) translateX(-50%);
    }

    .main-pay {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .main-pay a {
        flex-flow: row nowrap;
        padding: 1em;
    }

    .main-pay a::before {
        width: 150px;
        height: 100px;
        margin: 0;
        margin-right: 1em;
    }

    .main-pay a::after {
        margin: 0;
        margin-left: 1em;
    }
}

@media (max-width: 799px) {
    .tutorial-title h2 {
        font-size: 1.2em;
    }

    .tutorial-title h2 strong {
        font-size: 1.5em;
    }

    .tutorial-menu {
        width: calc(50% - 10px);
    }

    .main-pay {
        width: calc(50% - 10px);
    }

    .main-pay a {
        flex-flow: column wrap;
        padding: 1em;
    }

    .main-pay a::before {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .main-pay a::after {
        margin-top: 10px;
    }
}

@media (max-width: 599px) {
    .tutorial-title h2 {
        font-size: 1em;
    }

    .tutorial-title h2 strong {
        font-size: 1.2em;
    }
}

@media (max-width: 499px) {
    .tutorial-area {
        background-color: #f2f6fc;
    }

    .tutorial-area::after {
        display: none;
    }

    .tutorial-title {
        height: auto;
        padding: 2em 0;
    }

    .tutorial-menu h3 {
        height: auto;
        padding: 1em 0;
    }

    .tutorial-menu {
        width: 100%;
    }

    .tutorial-menu h3::before {
        display: none;
    }

    .main-pay {
        width: 100%;
    }

    .main-title-area, .main-update {
        flex-flow: column wrap;
    }

    .title-tab {
        margin: 1em 0;
    }

    .main-update > div {
        width: 100%;
    }
}

@media only all and (min-width: 699px) {
    .title-area > .right {
        position: absolute;
        bottom: 0;
        right: 0;
        margin-right: 0;
        z-index: 1;
    }
}

@media only all and (max-width: 698px) {
    .title-area > .right {
        position: relative;
        bottom: 0;
        right: 0;
        margin-right: 0;
        z-index: 1;
    }
}

@media only all and (max-width: 699px) {
    .btn-group button {
        min-width: 46px;
    }
}

@media only all and (max-width: 1199px) {

    .checking-set,
    .selecting-set {
        flex-direction: row;
    }

    .checking-set > .checking,
    .selecting-set > .selecting:not(.auth) {
        width: 55.333333%;
    }

    .map-filter-set .checking-set > .checking, .map-filter-set .selecting-set > .selecting {
        width: auto;
    }
}

@media only all and (max-width: 699px) {
    .checking-set > .checking,
    .selecting-set > .selecting:not(.auth) {
        width: 100%;
    }

}

@media only all and (max-width: 699px) {
    .title-area > .switch-set {
        margin-left: auto;
        margin-right: 0;
    }
}

@media only all and (max-width: 840px) {
    .chip-set {
        width: 100%;
        height: inherit;
        margin-right: 0;
    }

    .chip {
        margin-left: 0;
    }

    .title-area > .right {
        width: 100%;
        height: inherit;
    }
}

@media only all and (max-width: 1599px) {
    .wrapper.fixed .breadcrumb {
        display: none !important;
    }
}

@media only all and (max-width: 1199px) {
    .wrapper.fixed .breadcrumb {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        z-index: auto;
    }

    .wrapper.fixed .breadcrumb > * {
        font-size: 14px;
        color: #333;
    }

    .wrapper.fixed .breadcrumb > .icon-home {
        text-indent: -5000rem;
        width: 14px;
        height: 14px;
        background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_gin_purple.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 14px 14px;
    }

    .wrapper.fixed .breadcrumb > strong {
        color: #5e35b1;
    }
}

@media only all and (max-width: 1199px) {
    .filter-container {
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border-top: 0;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #eff2f9;
        margin-top: 0;
        margin-bottom: 0;
        z-index: 1000;
        -webkit-overflow-scrolling: touch;
    }

    .wrapper.fixed .filter-container {
        display: none;
        padding-top: 0;
        background-color: #f1f3f5;
    }

    .filter-set {
        position: relative;
        width: 100%;
        flex-direction: column;
        padding: 0;
        background-color: #eff2f9;
        border-radius: 0;
        margin-bottom: 60px;
    }

    .filter-set > .filter {
        margin-bottom: 10px;
    }

    .map-info .filter-set {
        margin-bottom: 0;
    }

    .map-info .filter-set > .filter {
        margin-bottom: 0;
    }

    .filter-set > .filter > a {
        border-left: 0;
        min-height: 46px;
        padding-top: 0;
    }

    .filter-set > .filter > a:hover {
        background-color: #fff;
    }

    .filter-set > .filter > .delete {
        display: none;
    }

    .filter-set > .filter > a {
        padding-left: 15px;
    }

    .filter-set > .filter > a > .text {
        display: none;
    }

    .filter-set > .filter > a > .filter-name {
        position: relative;
        top: auto;
        left: auto;
        font-size: 16px;
        font-weight: 600;
        line-height: 28px;
        opacity: 1;
        margin-right: 6px;
    }

    .filter-set > .filter > a > .filter-name:after {
        content: ':'
    }

    .filter-set > .filter > a.active > .filter-name {
        color: #000;
    }

    .filter-set > .filter > a > .legend-text {
        display: block;
        font-size: 16px;
    }

    .filter-set > .filter > a.active {
        border-bottom-left-radius: 0;
        background-color: #fff;
        border-top-color: #dadce0;
        border-bottom-color: #dadce0;
        color: #333;
    }

    .filter-set > .filter:first-child > a,
    .filter-set > .filter:first-child > a.active {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .filter-set > .filter > a.active .arrow {
        background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.svg);
    }

    .filter-set > .filter > fieldset {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        padding-top: 0;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid #dadce0;
        border-left: 0;
    }

    .filter-set > .filter > fieldset > legend {
        display: none;
    }

    .map-info .filter-set > .filter > fieldset > legend {
        display: block;
    }

    .filter-set > .filter > fieldset > .checking-set,
    .filter-set > .filter > fieldset > .selecting-set {
        border-top: 0;
    }

    .filter-set .btn-set {
        position: fixed;
        bottom: 20px;
        width: calc(100% - 40px);
        z-index: 10;
    }

    .btn-set .icon-reset,
    .wrapper.fixed .btn-set .icon-reset {
        width: calc(50% - 30px);
        height: 60px;
        background: #fff;
        border-bottom: 0;
        border-left: 0;
    }

    .btn-set .icon-reset > .blind {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        line-height: normal;
    }

    .filter-set > .btn-set > .btn-submit,
    .wrapper.fixed .filter-set > .btn-set > .btn-submit {
        width: calc(50% - 30px);
        height: 60px;
        font-size: 18px;
        padding-right: 40px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .filter-close-btn {
        width: 60px;
        height: 60px;
        background-image: url(https://aptgin.com/cdn/res/icon/svg/btn_close.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-color: #fff;
        background-size: 20px 20px;
        border-top: 1px solid #dadce0;
        outline: none;
    }
}

@media only all and (max-width: 1339px) {
    .filter-set > .filter.region > a > .text {
        width: 100%;
    }
}

@media only all and (max-width: 1199px) {
    .filter-set > .filter.region > fieldset {
        padding-top: 0;
    }

    .filter-set > .filter.region > a.active > .icon-pin {
        background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_pin_solid_balck.svg);
    }

    .filter-set > .filter.region > a {
        padding-left: 40px;
    }

    .filter-set > .filter.region > a > .text {
        display: block;
        font-size: 16px;
        max-width: calc(100% - 50px);
    }

    .filter-set > .filter.region > fieldset > legend {
        display: none;
    }

    .filter-set > .filter.region > fieldset > .depth-set {
        min-width: 100%;
        border-top: 0;
        flex-wrap: wrap;
    }

    .depth-set > .icon-reset {
        display: none;
    }

    .depth-set ul {
        width: 33.333333%;
    }

    .depth-set .depth-4 {
        width: 100%;
        height: auto;
        min-height: 36px;
        min-width: auto;
        max-width: none;
        border-top: 1px solid #dadce0;
    }

    .depth-set .depth-4 > li {
        padding-left: 20px;
        padding-right: 20px;
    }

    .filter-set > .filter > fieldset .title {
        width: 100%;
    }

    .filter-set > .filter.region > fieldset .checking-set .checking {
        width: 33.33%;
        margin-right: 0;
    }
}

@media only all and (max-width: 699px) {
    .depth-set ul > li {
        width: 100%;
        border-right: 0;
    }
}

@media only all and (max-width: 1339px) {
    .filter-set > .filter.period > a > .text {
        max-width: 100px;
    }
}

@media only all and (max-width: 1199px) {
    .filter-set > .filter.period > a {
        padding-left: 40px;
    }

    .filter-set > .filter.period > a.active > .icon-calendar {
        background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_calendar.svg);
    }

    .filter-set > .filter.period > a > .text {
        display: block;
        max-width: 100%;
    }

    .filter-set > .filter.period > fieldset {
        min-width: 100%;
        padding-top: 0;
        overflow-x: auto;
        margin-top: -1px;
    }

    .filter-set > .filter.period > fieldset > .date-set {
        flex-wrap: nowrap;
        width: 100%;
    }

    .date-set > .icon-reset {
        top: -36px;
    }

    .date-set > .icon-reset:hover {
        background-size: 14px 14px;
    }

    .date-set > div {
        width: 50%;
    }

    .date-set > div > ul {
        border-bottom: 0;
        flex: 1;
    }

    .filter-set > .filter.period > fieldset > .btn-group {
        position: relative;
        top: 2px;
        right: auto;
        height: 36px;
        align-items: flex-start;
        padding-left: 15px;
    }

    .filter-set > .filter.period > fieldset .selecting-set .selecting {
        margin-right: 0;
    }

    .filter-set > .filter.period > fieldset .datepicker-set:after {
        display: none;
    }
}

@media only all and (max-width: 1199px) {
    .filter .multi-set {
        border-top: 0;
        flex-direction: column;
    }
}

@media only all and (max-width: 1199px) {
    .filter.detail .multi-set > .checking-set,
    .filter.detail .multi-set > .selecting-set {
        border-bottom: 1px solid #e9edf3;
    }

    .multi-set > .icon-reset {
        top: -36px;
        right: 40px;
    }
}

@media only all and (max-width: 1199px) {
    .filter .detail-set {
        width: 100%;
        border-left: 0;
        min-height: 0;
    }

    .detail-set > .details {
        padding-top: 22px;
        padding-left: 16px;
        padding-right: 16px;
        border-bottom-color: #e9edf3;
    }

    .details > .fixed-title {
        top: 4px;
        width: 100%;
        height: 26px;
        color: #8f96b3;
        background-color: #fff;
    }

    .detail-set > .details > div.selecting-set > .selecting,
    .detail-set > .details > div.checking-set > .checking {
        width: 33.333333%;
    }
}

@media only all and (max-width: 699px) {
    .detail-set > .details > div.selecting-set > .selecting,
    .detail-set > .details > div.checking-set > .checking {
        width: 50%;
    }

    .details > div > span {
        line-height: 36px;
    }

    .details > div > span:first-of-type {
        line-height: 32px;
    }
}

@media only all and (max-width: 1199px) {
    .filter-set > .filter.save > a {
        width: 100%;
        padding-left: 15px;
        background-image: none;
    }

    .filter-set > .filter.save > a.active {
        color: #000;
        background-color: #fff;
        border-top-color: #dadce0;
        border-bottom-color: #dadce0;
    }

    .filter-set > .filter.save > a > .arrow {
        display: block;
    }

    .filter-set > .filter.save > fieldset > .input-set {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }

    .filter-set > .filter .input-set .selecting {
        margin-top: 20px;
    }

    .filter > fieldset .input-set .selecting-set {
        padding: 0;
        flex-flow: row wrap;
        flex: 3;
    }

    fieldset > .input-set > .input-field {
        flex: 2;
    }

    fieldset > .input-set > .btn-pink {
        flex: 1;
        margin-top: 20px;
        margin-left: 10px;
    }

    fieldset > .input-set > .btn-pink + .dropdown {
        margin-left: 60px;
        margin-top: 20px;
    }

    .filter.save fieldset > .input-set .dropdown {
        flex: 3;
        margin-top: 20px;
    }

}

@media only all and (max-width: 1199px) {
    #areaTxt {
        max-width: 100%;
    }
}

@media only all and (max-width: 1199px) {
    #priceTxt {
        max-width: 100%;
    }
}

@media only all and (max-width: 1199px) {
    #yeardiffTxt {
        max-width: 100%;
    }
}

@media only all and (max-width: 1480px) {
    .modal-container {
        width: calc(100% - 120px);
    }
}

@media only all and (max-width: 1199px) {
    .btn-modal-fluid {
        display: none !important;
    }
    .modal-container.develop-map .location-select{
        display: none;
    }
}

@media only all and (max-width: 840px) {
    .modal-container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        border-radius: 0;
        overflow: auto;
    }

    .modal-container.fluid {
        width: 100%;
    }

    .modal-container .title-area.purple {
        position: sticky;
        top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0;
        z-index: 100;
    }

    .modal-container.slim {
        max-width: inherit;
    }

    .modal-container.develop-map .content-area{
        height: calc(100% - 60px) !important;
    }

    .modal-container.develop-map #develop_list{
        height: calc(100% - 60px) !important;
    }

}

@media only all and (max-width: 685px) {
    .modal-container.develop-map .develop-detail, .modal-container.develop-map #develop_list {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 102;
    }
}

@media only all and (max-width: 840px) {

    .above-area .legend {
        flex: 1;
    }

    .above-area .legend.right {
        flex: none;
    }
}

@media only all and (max-width: 1480px) {
    .switcher-set > .switcher > fieldset > .switch-set > .switch {
        width: 100%;
    }
}

@media only all and (max-width: 1199px) {
    .switcher-set {
        flex-direction: column;
    }

    .switcher-set .open-total-switcher {
        display: none;
    }

    .switcher-set .icon-reset {
        display: none;
    }

    .switcher-set.three > .switcher,
    .switcher-set.four > .switcher,
    .switcher-set.five > .switcher {
        flex-direction: column;
        width: 100%;
    }

    /* 6칸짜리(단지 상세의 지인시세·실거래추이·매물추이·지역시세·소득·기타)는 위 목록에서 빠져 있어
       세로로 바뀐 뒤에도 기본 너비 16.66% 를 유지해, 왼쪽에 가늘게 붙고 오른쪽이 통째로 비어 보였다.
       세로 6줄로 늘어뜨리는 대신 줄마다 개수가 고르게 접히게 한다. 1199 이하 3개씩, 992 이하 2개씩, 699 이하 1개씩.
       .switcher-set .switcher 가 flex:1 이라 width 만으로는 균등 분배돼 줄바꿈이 안 된다 — flex 를 덮는다.
       아래 992/699 블록은 반드시 이 뒤에 와야 한다. 이 파일은 미디어쿼리가 브레이크포인트 순서로
       정렬돼 있지 않아, 앞쪽에 두면 950px 에서 1199 규칙(33.33%)에 밀린다. */
    .switcher-set.six {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .switcher-set.six > .switcher {
        flex: 0 0 33.33333333%;
        width: 33.33333333%;
    }

    .switcher-set .switcher:last-child {
        padding-right: 0;
    }

    .switcher-set > .switcher > .head {
        border-bottom: 1px solid #dee3ef;
    }

    .switcher-set > .switcher:last-child > .head {
        border-bottom: 0;
    }

    .switcher-set .switcher .arrow {
        right: 10px;
        border-right: 0;
    }

    .switcher-set > .switcher > fieldset {
        position: relative;
        top: auto;
        left: auto;
        padding-top: 10px;
        border: 0 none;
        width: 100%;
        border-bottom: 1px solid #dee3ef;
    }

    .switcher-set > .switcher:last-child > fieldset {
        border-top: 1px solid #dee3ef;
        border-bottom: 0;
    }

    .switcher-set > .switcher > fieldset > legend {
        display: none;
    }

    .switcher-set > .switcher > fieldset > .switch-set > .switch {
        width: 50%;
    }
}

@media only all and (max-width: 992px) {
    /* 2개씩 3줄 */
    .switcher-set.six > .switcher {
        flex: 0 0 50%;
        width: 50%;
    }

    /* 가격 행은 row nowrap 이라 좁아지면 오른쪽 안내 박스가 눌린다. 안내 박스를 아랫줄로 내린다. */
    .modal-container .price-slide {
        flex-wrap: wrap;
    }

    .modal-container .price-slide .apt-notice {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 8px;
    }
}

@media only all and (max-width: 699px) {
    /* 한 줄에 1개씩 */
    .switcher-set.six > .switcher {
        flex: 0 0 100%;
        width: 100%;
    }
}

@media only all and (max-width: 840px) {
    .color-set > * {
        padding-top: 5px;
        padding-bottom: 5px;
        margin-left: 0;
        margin-right: 10px;
    }
}

@media only all and (max-width: 1199px) {
    .legend-set .color-set {
        width: 100%;
    }

    .legend-set .color-set:after {
        display: none;
    }
}

@media only all and (max-width: 999px) {
    .legend-set {
        width: 100%;
        padding-top: 30px;
        padding-left: 0;
        padding-bottom: 22px;
    }

    .legend-set.collapsed {
        padding-top: 22px;
        padding-bottom: 0;
    }
}

@media only all and (max-width: 599px) {
    .color-set > * {
        min-width: inherit;
    }

    .color-set > .label {
        width: 100%;
    }

    .legend-set .color-set span:nth-child(2) {
        margin-left: 0;
    }
}

@media only all and (max-width: 840px) {
    .map-legend {
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 1099px) {
    .modal-container .two-three > table:nth-child(1) {
        width: 100%;
        margin-right: 0;
    }

    .modal-container .two-three > table:nth-child(2) {
        width: 100%;
        margin-top: 20px;
    }

    .table-basic > colgroup > col:first-child {
        width: 25%;
    }

    .table-basic th,
    .table-basic > thead > tr > td,
    .table-basic > tbody > tr > td {
        font-size: 14px;
        padding-left: 4px;
        padding-right: 4px;
    }
}

@media (max-width: 1099px) {
    .dl-table-basic > dt {
        width: 25%;
        font-size: 14px;
    }

    .dl-table-basic > dd {
        width: 75%;
        font-size: 14px;
    }

    .dl-table-basic:not(.line3) > dd:nth-of-type(odd) {
        border-right: 1px solid #ccd4e1;
    }

}

@media (max-width: 1099px) {
    .modal-container .row {
        padding-left: 10px;
        padding-right: 10px;
    }

    .row > .real-price {
        width: 100%;
        margin-top: 20px;
    }

    .row > .real-price:first-of-type {
        margin-top: 0;
    }

    .row > .real-price {
        margin-left: 0;
    }
}

@media only all and (max-width: 699px) {
    .note-container > h1 {
        display: none;
    }

    .note-page {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .note-container:before,
    .note-container:after {
        display: none;
    }
}

@media only all and (max-width: 1199px) {
    .fixed-buttons {
        display: none;
    }
}

@media only all and (max-width: 1199px) {
    .btn-aside-filter {
        display: none;
    }
}

@media only all and (min-width: 1569px) {
    .btn-fluid {
        display: block;
    }
}

@media only all and (max-width: 1199px) {
    .btn-top-go {
        bottom: 60px;
        -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
}

@media only all and (max-width: 1199px) {
    .btn-mobile-filter {
        right: auto;
        /* left: 10px; */
        right: 10px;
        /* bottom: 60px; */
        top: 65px;
        display: block;
        border-radius: 25px;
        margin-right: 0;
        -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        z-index: 120;
    }

    .btn-mobile-filter .icon-filter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 46px;
        height: 46px;
        background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_filter_white.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px 14px;
        text-indent: -5000rem;
    }
}

@media only all and (max-width: 1199px) {
    .nav-tabs-wrap {
        background: none;
        border-top: 0;
        border-bottom: 0;
    }

    .nav-tabs {
        justify-content: flex-start;
        padding-left: 6px;
        padding-right: 6px;
    }

    .nav-tabs.col-8 li {
        width: calc(50% - 1px);
        margin-right: 4px;
        margin-bottom: 6px;
    }

    .nav-tabs.col-8 li:nth-child(even) {
        margin-right: 0;
    }
}

@media only all and (max-width: 599px) {
    .nav-tabs {
        margin-top: 6px;
    }
}

@media only all and (max-width: 1199px) {
    .sub-tabs.col-8 li {
        width: calc(50% - 1px);
    }

    .sub-tabs.col-8 li:first-child {
        margin-left: 0;
    }

    .sub-tabs.col-8 li:nth-child(even) {
        width: calc(50% + 1px);
    }
}

@media only all and (max-width: 1199px) {
    .bbs-filter {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bbs-filter .category-list {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 16px;
    }

    .bbs-filter .search-box {
        width: 100%;
    }

    .bbs-filter .search-box input {
        flex-grow: 1;
    }

    .search-box > .btn-purple {
        min-width: 90px;
    }
}

@media only all and (max-width: 1199px) {
    .square input {
        width: auto;
    }
}

@media only all and (max-width: 1199px) {
    .bbs-list li > a {
        padding-right: 20px;
    }

    .bbs-list li > a {
        height: auto;
    }

    .with-thumbnail.report li > a .bbs-content-info {
        bottom: -12px !important;
    }
}

@media only all and (max-width: 599px) {
    .with-thumbnail li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        height: auto;
    }

    .with-thumbnail li > a .img {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 10px;
    }

    .with-thumbnail li > a .img > img {
        margin: 0 auto;
    }

    .with-thumbnail li > a > .subject {
        margin-bottom: 10px;
    }

    .with-thumbnail li > a .text {
        margin-bottom: 10px;
    }

    .with-thumbnail li > a .bbs-content-info {
        position: relative;
        bottom: auto;
    }
}

@media only all and (max-width: 599px) {
    .bbs-content-info .url {
        max-width: 200px;
        padding-left: 0;
    }
}

@media only all and (max-width: 1199px) {
    .bbs-btn-set button {
        min-width: 80px;
        padding: 0 10px;
    }
}

@media only all and (max-width: 1199px) {
    .bbs-view .event-info > dt {
        width: 30%;
    }

    .bbs-view .event-info > dd {
        width: 70%;
    }
}

@media only all and (max-width: 1199px) {
    .bbs-head > .bbs-btn-set {
        position: relative;
        left: auto;
        bottom: auto;
    }

    .bbs-page-move > li > a > .subject {
        display: none;
    }

    .bbs-page-move > li > a > .text {
        display: block;
    }

    .bbs-page-move > li {
        width: 33.333333%;
    }

    .bbs-page-move > li:nth-child(2) {
        width: 33.333333%;
    }

    .bbs-page-move > li > a {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

@media only all and (max-width: 1199px) {
    .bbs-form > .dl-table > dt {
        width: 30%;
    }

    .bbs-form > .dl-table > dd {
        width: 70%;
    }

    .bbs-form > .attachment {
        padding: 6px 10px;
    }

    .bbs-form > .attachment > dt {
        width: 30%;
    }

    .bbs-form > .attachment > dd {
        width: 70%;
    }
}

@media only all and (max-width: 1199px) {
    .modal-container .bbs-form > .dl-table > dd {
        width: calc(100% - 130px);
    }
}

@media only all and (max-width: 1199px) {
    .cafe-list {
        width: 310px;
        margin-bottom: 10px;
    }

    .cafe-list a {
        margin-bottom: 10px;
    }
}

@media only all and (max-width: 991px) {
    main[class*='m0'] {
        padding-left: 0;
    }

    .wrapper.fixed .sidenav {
        top: auto;
        width: 100%;
        height: 44px;
    }

    .sidenav > .static {
        border-top: 1px solid #d9d9d9;
        border-right: 0;
        z-index: 100;
    }

    .mask-sidenav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        border-right: 0;
        opacity: 0.4;
        overflow: hidden;
        z-index: 98;
    }

    .icon-menu {
        flex-direction: row;
        justify-content: space-around;
    }

    .icon-menu > li > a {
        height: 44px;
        width: 44px;
    }

    .icon-menu > li > a.active {
        background-color: transparent;
    }

    .icon-menu > li > a.active:after {
        display: none;
    }

    .icon-menu > li > a span {
        display: none;
    }

    .icon-menu > li > a > .notification-badge {
        top: 4px;
        right: -4px;
    }

    .switcher-contents .btn-open,
    .switcher-contents .btn-close {
        left: -24px;
        width: 23px;
        background-color: #3d3d3d;
        border-color: #3d3d3d;
    }
    .icon-menu li.govPolicyList, .menuInfo, .scriptManualList, .glossaryInfo  {display: none !important;}
}

@media only all and (max-width: 1199px) {
    /* 관심단지 등 사이드 패널 폭. 320px 로 고정돼 있어 홈(90%/최대 400px)보다 좁았다. 홈과 동일하게 맞춘다. */
    .sidenav-contents {
        top: 0;
        width: 90%;
        max-width: 400px;
        left: -400px;
        height: calc(100% - 44px);
        z-index: 99;
    }

    .wrapper.fixed .sidenav-contents {
        top: 0;
        height: calc(100% - 44px);
    }

    .sidenav-contents.open {
        left: 0;
    }

    .sidenav-contents .btn-close,
    .sidenav-contents .btn-open {
        right: -24px;
        width: 23px;
        background-color: #3d3d3d;
        border-color: #3d3d3d;
    }
}

@media only all and (max-width: 1199px) {
    .account-box {
        background-size: cover;
    }
}

@media only all and (max-width: 1199px) {
    .sidenav-contents > div .scroll-area {
        height: calc(100% - 60px);
    }
}

@media only all and (max-width: 1199px) {
    .side-panel {
        top: 56px;
        left: auto;
        right: 0;
        width: 90%;
        height: calc(100% - 100px);
        border-right: 0;
        border-left: 1px solid #d9d9d9;
    }

    .wrapper.fixed .side-panel {
        top: 0;
        height: calc(100% - 44px);
    }

    .side-panel .item-list > li > strong:before {
        top: 0;
    }
}

@media only all and (max-width: 1199px) {
    .keyword-container {
        display: none;
        top: 56px;
        height: calc(100% - 56px);
    }

    .wrapper.fixed .keyword-container {
        top: 0;
        height: 100%;
        z-index: 30;
    }
}

@media only all and (max-width: 1199px) {
    .sidenav-contents .sticker-st02 > li.date > .label {
        display: block;
        margin: 0;
    }

    .sidenav-contents .sticker-st02 > li.detail {
        padding-left: 0;
    }

    .sidenav-contents .sticker-st02 > li.detail {
        padding-top: 26px;
        padding-left: 0;
    }

    .sticker-st02 > li.date > strong:first-of-type {
        margin-left: 0;
    }
}

@media only all and  (max-width: 599px) {
    .hero {
        padding: 0 10px 20px 10px;
    }
}

@media only all and  (max-width: 599px) {
    .heroes-head {
        height: auto;
        flex-direction: column;
    }

    .heroes-head h2 {
        max-width: 100%;
        margin: 10px 0;
    }

    .heroes-head .group-name {
        width: auto;
        max-width: 80%;
        margin-right: 0;
    }

    .heroes-head .pager {
        margin-left: 0;
        width: auto;
    }
}

@media only all and (max-width: 1399px) and (min-width: 1024px) {
    .main.heroes .hero-body > .key-indicator > ul {
        flex-direction: column;
    }

    .main.heroes .hero-body > .key-indicator > ul > li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9edf3;
    }

    .main.heroes .hero-body > .key-indicator > ul > li:last-child {
        border-bottom: none;
    }

    .main.heroes .hero-body > .old-indicator {
        display: none;
        flex-direction: column;
    }

    .main.heroes .hero-body > .old-indicator > div {
        width: 100%;
        border-right: 0;
    }
}

@media only all and (max-width: 1023px) {
    .hero-body > .key-indicator > ul {
        flex-direction: column;
    }

    .hero-body > .key-indicator > ul > li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9edf3;
    }

    .hero-body > .key-indicator > ul > li:last-child {
        border-bottom: none;
    }

    .hero-body > .old-indicator {
        display: none;
        flex-direction: column;
    }

    .hero-body > .old-indicator > div {
        width: 100%;
        border-right: 0;
    }
}

@media only all and  (max-width: 599px) {
    .heroine {
        padding: 0 10px 20px 10px;
    }
}

@media only all and (max-width: 1399px) and (min-width: 1024px) {
    .main.heroes .heroine-body > .apt-detail > .apt-feature,
    .main.heroes .heroine-body > .apt-detail > .unsold {
        width: 100%;
        margin-right: 0;
    }
}

@media only all and (max-width: 1023px) {
    button.icon-left
    .heroine-body > .apt-detail {
        padding-top: 10px;
        flex-direction: column;
    }

    .apt-detail > .apt-feature,
    .apt-detail > .unsold {
        width: 100%;
        margin-right: 0;
    }

    .heroine-body .apt-info > .address {
        width: 100%;
    }

    .heroine-body > .apt-info > .right {
        margin-left: 0;
    }
}

@media only all and (max-width: 599px) {
    .heroine-body .link-buttons {
        justify-content: center;
    }

    button.icon-left {
        font-size: 13px;
        padding-left: 26px;
        padding-right: 0;
        text-indent: -5000rem;
    }

    button.icon-left.naver {
        margin-left: 0;
    }

    .heroine-body .apt-detail {
        display: none;
        padding-left: 10px;
        padding-right: 10px;
    }

    .apt-detail .apt-feature {
        padding-left: 10px;
        padding-right: 10px;
    }

    .apt-detail .apt-feature > li {
        min-height: 48px;
        padding-left: 0;
        padding-right: 0;
        align-items: center;
    }

    .apt-detail .apt-feature > li:before {
        display: none;
        left: 50%;
        transform: translateX(-50%);
    }

    .apt-detail .apt-feature > li > .label {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
    }

    .apt-detail .apt-feature > li:last-child {
        border-bottom: 0;
    }

    .apt-detail .apt-feature > li > p > strong {
        font-size: 17px;
    }

    .apt-detail .scroll-tbody {
        height: 204px;
    }

    .table-blue {
        font-size: 13px;
    }

    .table-blue > tbody > tr > td,
    .table-blue > tbody > tr > th {
        padding-left: 4px;
        padding-right: 4px;
    }

    .apt-detail .unsold > p {
        font-size: 12px;
        margin-right: 0;
    }
}

@media only all and (max-width: 1023px) {
    .card {
        width: 100%;
    }

    .card-title > .right > .min-max {
        display: none;
    }
}

@media only all and (max-width: 599px) {
    .card {
        padding-left: 0;
        padding-right: 0;
    }
}

@media only all and (max-width: 1199px) {
    .switcher-contents {
        top: 56px;
        height: calc(100% - 56px);
        transition: right .3s ease;
        z-index: 200;
    }

    .wrapper.fixed .switcher-contents {
        top: 0;
        height: 100%;
    }

    .mask-switcher {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        border-right: 0;
        opacity: 0.4;
        overflow: hidden;
        z-index: 98;
    }
}

@media only all and (max-width: 1199px) {
    .title-wrap > .title {
        width: auto;
        flex-direction: column;
        margin-top: 20px;
    }

    .title-wrap > .title > h2 {
        font-size: 32px;
        font-weight: 500;
    }

    .title-wrap > .title > p {
        text-align: center;
        padding-top: 30px;
        padding-left: 0;
        padding-bottom: 20px;
    }

    .title-wrap > .title > p:before {
        top: 14px;
        left: calc(50% - 15px);
    }
}

@media only all and (max-width: 1199px) {
    .sub-filter .option {
        margin-bottom: 10px;
    }

    .sub-filter > .right {
        width: 100%;
        justify-content: center;
    }
}

@media only all and (max-width: 599px) {
    .sub-filter .option {
        width: 100%;
        margin-right: 0;
    }

    .sub-filter label.bullet {
        min-width: 66px;
    }

    .period-btns {
        width: 100%;
        justify-content: space-between;
    }

    .period-btns button {
        min-width: 44px;
        font-size: 13px;
        padding-right: 4px;
        padding-left: 4px;
    }
}

@media only all and (max-width: 599px) {
    .sub-filter.address {
        padding-top: 50px;
    }

    .sub-filter.address > .option {
        position: relative;
    }

    .sub-filter.address > .option:first-child > label {
        position: absolute;
        top: -40px;
        color: #333;
        font-size: 18px;
        text-align: center;
        padding-left: 0;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .sub-filter.address > .option:first-child > .bullet:before {
        display: none;
    }

    .sub-filter.address .option {
        width: calc(50% - 3px);
    }

    .sub-filter.address .option > .dropdown {
        width: 100%;
        min-width: inherit !important;
    }

    .sub-filter.address .option:nth-child(2) {
        margin-left: 6px;
    }

    .sub-filter.address .option:nth-child(4), .sub-filter.address .option:nth-child(5) {
        width: 100%;
    }
}

@media all and (min-width: 5000px) {
    .strc-area {
        left: 1230px;
        top: 58px;
    }
}

@media print{
    .no-print {
        display: none;
    }

    .print-div {
        display: block;
    }

    .print-div h4{
        margin: 10px 0;
    }

    .print-div .title-area.thick {
        display: flex;
        justify-content: space-between;
        min-height: auto;
        padding: 20px;
    }

    .print-div .title-area.thick .title-sub {
        display: flex;
    }

    .print-div .col-2 {
        display: initial;
        margin-bottom: 30px;
    }
    .print-div .col-2 > *{
        width: 100%;
    }

    .print-div .col-2.btn-set > div + div {
        padding-left: 0;
    }

    .print-div .col-2 .table-basic {
        margin-bottom: 0;
    }

    .print-div .table-basic {
        width: 100%;
        margin-bottom: 30px;
        border-top: solid 2px #d5dae6;
    }

    .print-div .table-basic th, .print-div .info-area .table-basic td {
        font-size: 13px;
    }

    .print-div .table-basic th {
        height: auto;
        padding: 8px 0;
        color: #50649c;
    }

    .print-div .table-basic td {
        padding: 5px;
    }

}

@media only all and (max-width: 5000px) {
    .comparer.decrepit {
        flex-flow: column wrap;
        align-items: flex-start;
        padding-left: 0;
        padding-right: 0;
    }

    .comparer.decrepit > div {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .comparer.decrepit > div:last-child {
        margin-top: 10px;
        padding-top: 10px;
        border-top: solid 1px #eee;
    }

    .comparer.decrepit > div:last-child h3 {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .comparer.decrepit > div:last-child .sub-filter.address + h3 {
        padding-left: 18px;
        border-left: solid 1px #dadce0;
    }

    .comparer.decrepit > div:last-child .sub-filter + h3 {
        margin-left: 20px;
    }

    .map-wrap.decrepit {
        top: 184px;
    }

    .map-right.decrepit {
        top: 184px;
    }

    .map-tool-area.decrepit {
        top: 195px;
    }

    .map-legend-list.decrepit {
        top: 260px;
    }
}

@media only all and (max-width: 1899px) {
    .report-navi:not(.popup-content .report-navi){
        display: none;
    }
}

@media only all and (max-width: 1600px) {
    .dropdown.map .dropdown-menu {
        max-height: 500px;
    }

    .auction-photo.public li {
        height: 200px;
    }

    .auction-photo.public li + li {
        margin-left: 30px;
    }
}

@media only all and (max-width: 1500px) {
    .switcher-set > .switcher > fieldset > .switch-set.box .switch {
        margin-right: 5px;
        font-size: 12px;
        padding-left: 32px;
    }

    .switcher-set > .switcher > fieldset > .switch-set.box .switch .slider {
        width: 20px;
        height: 10px;
    }

    .switcher-set > .switcher > fieldset > .switch-set.box .switch .slider::before {
        top: -2px;
        left: -5px;
        width: 14px;
        height: 14px;
    }
}

@media only all and (max-width: 1339px) {
    .map-info .filter-set > .filter.period > a > .text {
        max-width: 100%;
    }

    .modal-apt-info .tab-box > .tab-list > li {
        width: calc(25% + 1px);
    }

    .modal-apt-info .tab-box > .tab-list > li a {
        font-size: 16px;
    }
}

@media only all and (max-width: 1199px) {
    .switcher-set > .switcher > fieldset > .switch-set.box {
        right: 10px;
        top: 10px;
    }

    .wrapper.fixed .sidenav {
        top: 0;
    }

    .sidenav {
        top: 57px;
    }

    .title-area.bold {
        padding-top: 70px;
        border-top: 0;
    }

    .depth-set.loc-list ul {
        width: 100%;
    }

    .depth-set.loc-list li {
        width: calc(16.666% - 3px);
    }

    .depth-set .depth-4 > li {
        padding-left: 0;
        padding-right: 0;
    }

    .depth-set.with-icon-add button[disabled]::before {
        left: 9px;
    }

    .filter-set > .filter.save > fieldset > .input-set {
        flex-flow: row wrap;
        width: 100%;
    }

    .filter-set > .filter.save > fieldset > .input-set .selecting-set {
        flex: none;
        width: 100%;
        margin-bottom: 5px;
    }

    .filter-set .filter.save fieldset .input-set .selecting {
        flex-flow: row nowrap;
        width: 33.333333%;
        height: 34px;
    }

    .filter-set .filter.save fieldset .input-set .selecting span {
        font-weight: normal;
        font-size: 15px;
        text-align: left;
    }

    .filter-set > .filter > a > .text {
        display: block;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }

    .filter-set > .filter > a > .legend-text {
        display: none;
    }

    .filter-set .filter.save fieldset .input-set {
        width: 100%;
    }

    .filter-set > .filter.save > a > .legend-text {
        display: block;
    }

    .filter-set > .filter.region > fieldset {
        width: 100%;
    }

    .filter-set > .filter .multi-set {
        display: block;
    }

    .filter-set > .filter .multi-set.demand .selecting-set {
        position: relative;
        padding-top: 25px;
    }

    .filter-set > .filter .multi-set.demand .selecting-name {
        position: absolute;
        top: 5px;
        left: 15px;
    }

    .filter > fieldset .input-set .selecting-set {
        flex-wrap: nowrap;
        width: 20%;
    }

    .map-info .filter-area {
        background-color: #fff;
    }

    .map-info .filter-set > .filter > a {
        border-left: 1px solid #dadce0;
    }

    .map-info .filter-set > .filter.period > fieldset {
        display: none;
        border: 1px solid #717171;
    }

    .map-info .filter-set > .filter > fieldset > .btn-group {
        position: absolute;
        padding-left: 0;
    }

    .map-filter-set .filter .multi-set {
        flex-direction: row;
    }

    .map-filter-set .checking-set > .checking, .map-filter-set .selecting-set > .selecting
    .above-area {
        height: auto;
    }

    .nav-container.tab .nav-tabs {
        border-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .nav-container.tab .nav-tabs li {
        margin-bottom: 4px;
        border-bottom: solid 1px #dadce0;
    }

    .nav-container.tab .nav-tabs li.active::after {
        display: none;
    }

    .sale-detail-list li {
        padding: .6em 0;
    }

    .modal-auction h3 {
        margin-bottom: 10px;
    }

    .info-head dt {
        padding-left: 10px;
    }

    .info-head dt:first-child {
        padding-left: 0;
    }

    .modal-auction .col-2 > * {
        width: 100%;
    }

    .modal-auction .col-2 > div + div {
        margin-top: 20px;
        padding-left: 0;
    }

    .modal-auction .nav-container {
        margin-bottom: 5px;
    }

    .agree-form {
        width: 100%;
    }

    .agree-form .title-area {
        border-top: 0;
    }

    .agree-form .btn-set .btn-leave {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }

    .agree-form .btn-set button {
        width: calc(50% - 10px);
    }

    .btn-mobile-filter {
        left: 50%;
        transform: translateX(-50%);
        width: 130px;
        height: 40px;
        padding-right: 70px;
    }

    .btn-mobile-filter .icon-filter {
        left: 30px;
        width: 20px;
        height: 40px;
    }

    .filter-tip {
        position: absolute;
        right: 30px;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        line-height: 110%;
        transform: translateY(-50%); /*background-color:#fff;transform:translateX(-50%);animation:move-up-down 2s ease-in-out infinite; */
    }

    .alarm .title-box {
        height: auto;
        padding-bottom: 15px;
    }

    .alarm .title-box .tip {
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }

    .sidenav-contents .source-list > li > p {
        display: block;
    }

    .sidenav-contents .source-list.alarm > li:not(.all-alarm) .switch {
        top: 3px;
        transform: none;
    }

    .alarm-area {
        z-index: 210;
    }

    .bbs-form.info dd .word-tip {
        margin-left: 5px;
    }

    .detail-set.filter .details {
        padding-top: 30px;
    }

    .detail-set.filter .details > .fixed-title {
        width: auto;
        right: 4px;
        background-color: #e8eef9;
    }

    .detail-set.filter .details label {
        flex-flow: row nowrap;
        margin: 5px;
    }

    .detail-set.filter .details label span {
        line-height: 130%;
    }

    .detail-set.filter .details .selecting-set {
        flex-flow: row wrap;
    }

    .detail-set.filter .details .item-title {
        width: 100%;
        margin: 5px 0 3px 0;
        line-height: 130%;
        text-align: left;
    }

    .detail-set.filter .dropdown {
        min-width: 100%;
        margin: 5px 0;
    }

    .detail-set.filter .dropdown + .dropdown, .detail-set.filter .dropdown + input {
        margin-left: 0;
    }

    .detail-set.filter input.num, .detail-set.filter input[type=text] {
        width: calc(50% - 10px);
    }

    .detail-set.filter input + span {
        width: 20px;
    }

    .auction-photo.public li {
        height: 150px;
    }

    .edu-info td > div {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .edu-info td .btn, .edu-info td > div .btn {
        display: flex;
        margin-left: 0;
        margin-top: .5em;
    }

    .edu-info td > div + div {
        margin-top: 1em;
    }

    .edu-info td > div {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .edu-info td .btn, .edu-info td > div .btn {
        display: flex;
        margin-left: 0;
        margin-top: .5em;
    }

    .edu-info td .index {
        flex-flow: column wrap;
        align-items: flex-start;
    }

    .index-area .list-basic {
        top: 48px;
        left: 0;
        padding-left: 0;
    }

    .index-area .list-basic li::before {
        top: 11px;
    }

    .bbs-list.edu li > a::before, .bbs-list.coupon li > a::before, .bbs-list.report li > a::before {
        top: 60px;
        right: 1em;
    }

    .bbs-list.pay li > a::before {
        top: 10px;
        right: 10px;
        transform: none;
        width: 80px;
        height: 80px;
        padding: 0 5px;
        font-size: 13px;
    }

    .title-wrap {
        flex-flow: column nowrap;
    }

    .title-wrap .bbs-btn-set {
        justify-content: flex-end;
    }

    @keyframes move-up-down {
        0% {
            top: -22px;
        }
        50% {
            top: -26px;
        }
        100% {
            top: -22px;
        }
    }

    .race ul {
        margin: 0;
        padding: 50px 100px;
    }

    .race ul:first-child {
        padding-left: 50px;
    }

    .race ul::before {
        left: 50px;
        right: 50px;
    }

    .race ul + ul::after {
        left: 50px;
    }

    .race ul.reverse {
        padding-left: 100px;
    }

    .race ul.reverse::after {
        right: 50px;
    }

    .race ul:last-child {
        padding-right: 50px;
    }

    .main-tab .nav-tabs {
        margin-top: 60px;
    }

    .wrapper.fixed .btn-mobile-filter {
        left: auto;
        right: 10px;
        top: 10px;
        width: 50px;
        height: 50px;
        padding: 0;
        transform: none;
    }

    .wrapper.fixed .btn-mobile-filter .filter-tip {
        display: none;
    }

    .wrapper.fixed .btn-mobile-filter .icon-filter {
        left: 50%;
        width: 50px;
        height: 50px;
    }

    .sidenav-contents .source-list .all-alarm .switch {
        top: 0;
        transform: none;
    }

    .above-area .sub-filter .option {
        margin-bottom: 0;
    }

    .comparer.location {
        position: absolute;
        top: 144px;
        left: 65px;
        right: 0;
    }

    .comparer.decrepit {
        margin-left: 65px;
    }

    .comparer.decrepit > div > h3 {
        font-size: 13px;
        line-height: 130%;
    }

    .comparer.decrepit .sub-filter > .right {
        width: auto;
    }

    .comparer.decrepit .sub-filter .option {
        margin-bottom: 0;
    }

    .map-wrap.decrepit {
        top: 170px;
        left: 0;
    }

    .map-right.decrepit {
        top: 170px;
    }

    .map-right.decrepit .total-info {
        top: 64px;
    }

    .bbs-form.info dd .tips {
        margin-left: 0;
        margin-top: 5px;
    }

    .title-wrapper.report > div {
        width: 100%;
    }

    .title-wrapper.report > .title {
        padding-top: 20px;
    }

    .report-total {
        padding: 1em;
    }

    .report-total .step ol {
        flex-flow: column wrap;
        gap: 30px;
    }

    .report-total p {
        font-size: .8rem;
    }

    .report-total p b {
        font-size: inherit;
    }

    .report-total .step {
        max-width: 450px;
        margin-top: 1.5em;
    }

    .report-total .step li span::before {
        display: none;
    }

    .modal-container.modal-alert {
        bottom: auto;
    }

    .report-total .step li + li::after {
        left: 50%;
        top: -25px;
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
    }

    .report-area .member-info dd .btn {
        font-size: .8rem;
    }

    .report-area .member-info dd.security > div {
        margin-left: 0;
    }

    .report-area .member-info dd.security .btn + .btn {
        margin-left: 0;
    }

    .report-area .member-info dd.mail > input {
        flex: 1;
        width: 50%;
    }

    .modal-container .report-area .bbs-form > .dl-table > dt {
        width: 30%;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd {
        width: 70%;
    }

    .bbs-view .event-info.report dt {
        width: 30%;
    }

    .bbs-view .event-info.report dd {
        width: 70%;
    }

    .modal-container .report-area .col-2 {
        flex-flow: column wrap;
        gap: 20px;
    }

    .modal-container .report-area .col-2 > div {
        width: 100%;
    }

    .modal-container.slim .report-area .row {
        padding: 0;
    }

    .btn-group2 {
        top: 16px;
    }

    .openChat-header li .btn-copy {
        margin-right: 30px;
    }
}

@media only all and (max-width: 1100px) {
    .modal-auction .title-area.thick {
        flex-flow: column wrap;
        align-items: flex-start;
    }

    .info-area {
        top: 145px;
    }

    .info-area.public {
        top: 200px;
    }

    .info-head {
        justify-content: flex-start;
    }

    .wide > .sub-filter.address .option.city + .option:not(.city) {
        margin-left: 0;
    }

    .policy-contents [class^=col-], .policy-contents [class*=col-] {
        display: block;
        float: none;
        width: 100%;
    }
}

@media only all and (max-width: 991px) {
    .sidenav {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 44px;
        border-right: 0;
        flex-direction: column;
        z-index: 300;
    }

    .wrapper.fixed .sidenav {
        top: auto;
    }

    .bbs-form.info dd.security input {
        width: calc(50% - 10px);
    }

    .comparer.decrepit {
        margin-left: 0;
    }

    .map-tool-area.decrepit {
        left: 10px;
    }

    .map-legend-list.decrepit {
        left: 10px;
    }

    .with-thumbnail.youtube li > a {
        padding: 1em 0;
    }

    .with-thumbnail.youtube .img {
        height: 180px;
    }

    .with-thumbnail.youtube .img img {
        width: 320px;
        height: 180px;
    }

    .with-thumbnail.youtube .bbs-content-info {
        position: static;
        width: 100%;
    }

    .with-thumbnail.youtube li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        height: auto;
    }

    .with-thumbnail.youtube li > a .img {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 10px;
    }

    .with-thumbnail.youtube li > a .bbs-btn-set {
        right: 0;
        top: auto;
        bottom: 15px;
    }

    .with-thumbnail.youtube .bbs-content-info span {
        font-size: 12px;
    }

    .with-thumbnail.youtube .bbs-content-info .url {
        max-width: none;
    }

    .modal-container .report-area .member-info .terms-text h4 {
        font-size: .9rem;
    }

    .modal-container .report-area .member-info .terms-text h4 b {
        font-size: 1rem;
    }

    .modal-container.slim .report-area .row .wide {
        padding: 0;
    }

    .modal-container.slim .report-area .search-box {
        flex-flow: column wrap;
        align-items: flex-start;
    }

    .modal-container.slim .report-area .search-box > div + div {
        margin-top: .5em;
    }

    .modal-container.slim .report-area .search-box label {
        display: inline-block;
        width: 80px;
        margin-left: 0 !important;
        margin-right: 0;
        font-size: .8rem;
    }

    .modal-container.slim .report-area .search-box input:last-child {
        width: calc(100% - 220px);
    }

    .modal-container.slim .report-area .terms-box {
        margin-bottom: 1em;
    }

    .modal-apt-info .tab-box > .tab-list > li a {
        font-size: 14px;
    }

    .with-thumbnail.edu-info li > a > .subject {
        margin-bottom: 10px;
    }

    .with-thumbnail.edu-info li > a {
        padding-right: 30px;
    }

    .edu-info .btn-review {
        display: flex;
        flex-flow: row nowrap;
        gap: .5em;
        position: static;
        top: auto;
        right: auto;
        transform: none;
    }

    .edu-info .btn-review .btn {
        width: auto;
        margin: 0;
        padding: 0 12px;
    }

    .edu-info .btn-review .btn + .btn {
        margin-top: 0;
    }

    .bbs-list.edu-info .text {
        height: auto;
        min-height: 0;
        max-height: 24px;
        margin-bottom: 20px;
        -webkit-line-clamp: 1;
    }
}

@media only all and (max-width: 959px) {

    .container.fluid {
        margin-right: 0;
    }

    .sale-detail-info li {
        flex: 1;
        padding: 0;
        padding-left: 1em;
    }

    .sale-detail-info li:last-child {
        flex: 1.5;
    }

    .sale-detail-list ul {
        flex-flow: column wrap;
    }

    .sale-detail-list li + li {
        border-bottom: solid 1px #d9e0f7;
    }

    .sale-detail-list .title {
        border-radius: 0;
    }

    .filter > fieldset .input-set .selecting-set .selecting {
        flex: none;
    }

    .info-head > * {
        font-size: .9rem;
    }

    .modal-auction .table-basic th, .info-area .table-basic td, .button-set button {
        font-size: 12px;
    }

    .auction-photo.public li {
        height: 130px;
    }

    .auction-photo.public li + li {
        margin-left: 20px;
    }

}

@media only all and (max-width: 840px) {

    .chip-set {
        width: auto;
    }

    .sidenav-contents .link-list > li > a > small {
        padding-left: 8px;
        line-height: 1rem;
        word-break: keep-all;
        text-indent: 0;
    }

    .filter-set > .filter.save > fieldset > .input-set {
        display: block;
    }

    .filter > fieldset .input-set .selecting-set {
        width: 100%;
        margin: 0;
    }

    .filter-set .filter.save fieldset .input-set .selecting {
        width: 50%;
    }

    .filter.save fieldset > .input-set .dropdown {
        width: 100%;
        margin-left: 0;
    }

    .filter-set > .filter .input-set .selecting {
        margin-top: 0;
    }

    .sale-detail-info ul {
        display: block;
        height: auto;
    }

    .sale-detail-info li {
        margin: 2em 0;
        padding: 0 2em;
        font-size: 18px;
    }

    .sale-detail-info li + li {
        border-left: 0;
    }

    .sale-detail-info li span, .sale-detail-list li span {
        margin-bottom: .5em;
    }

    .sale-detail-info li p {
        padding-left: 65px;
    }

    .icon-loc-sale::before {
        left: 0;
        width: 40px;
        height: 40px;
    }

    .icon-household::before {
        width: 40px;
        height: 40px;
    }

    .icon-completion::before {
        top: 3px;
        width: 36px;
        height: 36px;
    }

    .above-area .btns-set h3 {
        float: none;
        margin-bottom: 1em;
    }

    .info-area .table-basic * {
        word-break: break-all;
    }

    .popup-content .title-area > .right {
        right: 0;
        bottom: auto;
        width: auto;
    }

    .modal-container.modal-login {
        top: 10px;
        bottom: auto;
        width: 90%;
        height: 360px;
        border-radius: 20px;
    }

    .info-area {
        display: block;
        overflow-y: auto;
    }

    .auction-photo.public li {
        height: 120px;
    }

    .auction-photo.public li + li {
        margin-left: 10px;
    }

    .modal-help {
        width: 100%;
        height: auto;
        bottom: auto;
    }

    .race ul {
        margin: 0;
        padding: 30px 50px;
    }

    .race ul:first-child {
        padding-left: 25px;
    }

    .race ul::before {
        left: 25px;
        right: 25px;
    }

    .race ul + ul::after {
        top: -90px;
        left: 25px;
        height: 180px;
    }

    .race ul.reverse {
        padding-left: 50px;
    }

    .race ul.reverse::after {
        right: 25px;
    }

    .race ul:last-child {
        padding-right: 25px;
    }

    .legend-info {
        display: none;
    }

    .bbs-form.member-info > .dl-table > dd > input + .btn {
        margin-left: 0;
        margin-top: .5em;
    }

    .bbs-list.report li > a {
        height: auto;
        min-height: 220px;
    }

    .bbs-list.report li > a .bbs-content-info {
        position: static;
        margin-top: 1em;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd:not(.mail) {
        flex-flow: column nowrap;
        align-items: flex-start;
        justify-content: center;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd:not(.mail) input {
        width: 100%;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd:not(.mail) input + input {
        margin-top: .5em;
        margin-left: 0;
    }

    .modal-container.modal-apt-info {
        overflow-y: auto;
    }

    .modal-container.modal-apt-info .contents-wrapper {
        height: auto;
    }
}

@media only all and (max-width: 740px) {
    .info-head dt {
        padding-left: 0;
    }

    .info-head dd, .info-head dt:first-child {
        padding-right: 10px;
    }

    .info-area {
        top: 155px;
    }

    .bbs-form.info dd.security {
        padding-bottom: 60px;
    }

    .bbs-form.info dd.security.phone {
        padding-bottom: 40px;
    }

    .bbs-form.info dd.security .btn {
        width: 180px;
        margin-top: 5px;
        margin-left: 0;
    }

    /* 버튼 앞 10px 을 없애고, **같은 줄일 때의 간격만** gap 으로 남긴다
       (2026-09-02 사용자 지적 「가로 708 에서 여전히 앞에 공간 생김, 더 줄이면 공간 안생김」).
       ⚠ 위 margin-left:0((0,4,1))으로는 못 이긴다 — pre.component.css 의
          .bbs-form.info > .dl-table > dd .btn + .btn{margin-left:10px} 이 (0,5,1) 이다.
          그리고 「변경」 버튼이 display:none 이어도 **CSS 형제 선택자에는 잡혀서**
          첫 버튼(#telSend·#mailSend)까지 그 규칙에 걸린다.
       ⚠ margin 이 아니라 gap 이어야 하는 이유 — margin 은 **줄이 바뀌어도 남아** 들여쓰기가 되지만
          gap 은 같은 줄일 때만 벌린다. 610~740px 은 버튼이 이미 아랫줄이라 그 10px 이 순수 들여쓰기였다.
       ⚠ span 여백을 0 으로 함께 두는 이유 — 그대로 두면 gap 5px 이 더해져
          「-」·「@gmail.com」 좌우가 5px → 10px 로 벌어진다(599px 이하 화면이 함께 바뀐다). */
    .bbs-form.info > .dl-table > dd .btn + .btn {
        margin-left: 0;
    }

    .bbs-form.info > .dl-table > dd.security {
        column-gap: 5px;
    }

    .bbs-form.info > .dl-table > dd.security > span {
        margin-left: 0;
        margin-right: 0;
    }

    /* 인증 버튼은 **각각 한 줄**을 쓴다 — 휴대전화와 교육신청 이메일이 같은 모양이어야 한다
       (2026-09-02 사용자 지적 「교육신청 이메일에 있는 버튼이 휴대전화와 동일하게 움직여야 됨」).
       ⚠ 폭만 맞춰서는 부족하다 — 앞에 오는 입력칸 묶음의 길이가 두 행이 서로 달라서,
          708px 에서 휴대전화는 「입력칸+버튼1 / 버튼2」 2줄인데 이메일은 「버튼1+버튼2」 1줄이 됐다(실측).
          flex-basis:100% 로 한 줄을 차지하게 하고 실제 폭은 위 width 로 제한한다. */
    /* 인증 버튼은 **각각 한 줄 · 폭은 위 입력칸과 같게** (2026-09-02 사용자 지적
       「줄 변경되면 한번에 내려 오는건 좋은데 최대가 위에 박스와 같게 해야지 100%를 만들어 놓았네」).
       ⚠ 버튼에 직접 걸어서는 안 된다 — flex-basis:100% 는 폭까지 100% 가 되고,
          max-width 로 묶으면 flex 가 **줄어든 폭으로 줄바꿈을 계산해** 다시 같은 줄로 올라간다(실측).
          그래서 묶음(.auth-btns)이 한 줄을 차지하고, 폭 제한은 그 안의 버튼이 갖는다.
       ⚠ 폭만 맞춰서는 부족했던 이유 — 앞에 오는 입력칸 묶음 길이가 두 행이 서로 달라서,
          708px 에서 휴대전화는 「입력칸+버튼1 / 버튼2」, 이메일은 「버튼1+버튼2」 로 갈렸다. */
    .bbs-form.info > .dl-table > dd.security > .auth-btns {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;
        flex-basis: 100%;
        row-gap: 5px;
    }

    /* 「휴대전화 변경」·「이메일 변경」 버튼은 **위 입력칸과 같은 폭**이어야 한다
       (2026-09-01 사용자 지적 「위에 전화번호 입력창 만큼 크기 나와야 되는데 앞에 공간도 생기고 안맞아」).
       위 180px 은 두 행에 같은 값을 쓰던 것이라 어느 쪽과도 맞지 않았다.
       ⚠ 휴대전화 201px 인 이유 — 입력칸 묶음이 60px 짜리 3개 + 구분자로 **211.1px** 인데(실측),
          버튼에는 .bbs-form.info>.dl-table>dd>input+.btn 의 margin-left:10px 이 붙는다((0,4,2) 라
          위 margin-left:0 을 이긴다). 201 + 10 = 211 로 오른쪽 끝이 입력칸과 맞는다.
       ⚠ 교육신청 이메일은 입력칸이 calc(50% - 10px) 로 폭에 따라 변하므로(위 2665 줄) 같은 식을 쓴다.
          이쪽 버튼 앞에는 <p>@gmail.com</p> 이 와서 위 margin 규칙(input+ / span+)에 걸리지 않는다(실측 ml≈0). */
    /* 「이메일 주소」 입력칸은 폭에 비례해 줄어든다 — 줄바꿈되지 않게 (2026-09-01 사용자 지적)
       이 42% 는 599px 이하에만 있었다(아래 dd.e-mail 규칙). 그래서 600~740px 구간에서는 입력칸이
       180px 고정으로 남아 180×2 + 「@」 + 여백 = 385px 가 dd 안쪽 폭(600px 화면에서 345px)을 넘겨
       뒤 입력칸이 다음 줄로 내려갔다. 정작 더 좁은 화면에서는 42% 가 걸려 한 줄로 잘 들어가서,
       **넓은 쪽이 내려가고 좁은 쪽은 안 내려가는** 거꾸로 된 모습이었다(사용자 캡처 2장으로 확인).
       ⚠ 741px 이상은 손대지 않는다 — dd 안쪽 폭이 445px 이상이라 180px 두 개가 이미 들어간다. */
    .bbs-form.info > .dl-table > dd.e-mail > input {
        width: 42%;
    }

    .bbs-form.info dd.security.phone .btn {
        width: 211px;
    }

    /* ⚠ 앞 간격(margin-left:10px)을 없앤다 — 이 폭에서는 버튼이 늘 다음 줄로 내려가는데,
       그 10px 이 그대로 들여쓰기로 남아 위 입력칸보다 안쪽에서 시작했다(실측 700px — 입력칸 x=20 vs 버튼 x=30).
       margin 을 0 으로 두고 폭을 211px(= 입력칸 묶음 60×3 + 구분자, 실측)로 맞추면 좌우가 정확히 겹친다.
       ⚠ 명시도 (0,6,2) 로 올린 이유 — .bbs-form.info>.dl-table>dd>input+.btn 이 (0,4,2) 라
          위 .bbs-form.info dd.security .btn{margin-left:0}((0,4,1))으로는 이기지 못한다(실측으로 잡았다). */
    .bbs-form.info > .dl-table > dd.security.phone > input + .btn {
        margin-left: 0;
    }

    /* 교육신청 이메일 버튼은 **휴대전화 버튼과 같은 폭**이어야 한다
       (2026-09-02 사용자 지적 「교육신청 이메일에 있는 버튼이 휴대전화와 동일하게 움직여야 됨」).
       ⚠ 폭이 다르면 **줄바꿈되는 지점이 달라진다.** 전에는 calc(50% - 10px) 라 585px 화면에서
          이메일 버튼만 171px 이 되어 두 개가 한 줄에 들어갔고(171×2 ≤ 403), 휴대전화는 211px 이라
          각각 다음 줄로 내려갔다(211×2 > 403). 같은 화면에서 두 행이 다르게 보인 원인이다. */
    .bbs-form.info dd.security:not(.phone) .btn {
        width: 211px;
    }

    .bbs-form.info dd.security .notes {
        bottom: 7px;
    }

    .bbs-form.info dd.security .checking span {
        line-height: 20px;
    }

    .bbs-form.member-info dd.security {
        padding-bottom: 60px;
    }

    .bbs-form.member-info dd.security .btn {
        width: 180px;
        margin-top: 5px;
        margin-left: 0;
    }

    .bbs-form.member-info dd.security .notes {
        bottom: 7px;
    }

    .bbs-form.member-info dd.security .checking span {
        line-height: 20px;
    }

    .modal-apt-info .tab-box > .tab-list > li {
        width: calc(50% + 1px);
    }

    .review-list colgroup col:first-child {
        width: 10% !important;
    }

    .review-list colgroup col:nth-child(2) {
        width: 50% !important;
    }

    .review-list colgroup col:nth-child(3) {
        width: 20% !important;
    }

    .bbs-list.edu .text {
        display: flex;
        flex-flow: column nowrap;
        gap: .5em;
        height: auto;
        margin-bottom: 20px;
    }

    .bbs-list.edu li > a {
        height: auto;
        min-height: 220px;
    }

    .bbs-list.edu li > a .bbs-content-info {
        position: static;
    }
}

@media only all and (max-width: 698px) {
    .popup-content .title-area > .right {
        position: absolute;
        width: auto;
    }

    .auction-photo li {
        height: 100px;
    }

    .modal-auction .caution span {
        display: block;
    }

    .btn-onbid {
        margin-top: 5px;
    }

    .info-area.public {
        top: 230px;
    }

    .modal-auction .caution {
        padding: 10px 0;
    }

    .modal-auction .caution span {
        font-size: 12px;
    }

    .bbs-list.pay li > a {
        height: auto;
        padding-left: 160px;
        align-items: flex-start;
    }

    .bbs-list.pay li > a .subject, .bbs-list.pay li > a .sum {
        margin-bottom: .5em;
    }

    .bbs-list.pay li > a::before {
        top: 5px;
        left: 0;
        right: auto;
        width: 50px;
        height: 50px;
        padding: 0 .5em;
        font-size: .6rem;
        line-height: 120%;
        z-index: 1;
    }

    .bbs-list.pay .img {
        position: absolute;
        top: 25px;
        left: 10px;
    }

    .bbs-list.pay .sum {
        height: auto;
    }

    .bbs-list.pay .img, .bbs-list.pay .img img {
        width: 120px;
        height: 120px;
    }

    .bbs-list.pay .bbs-content-info {
        position: static;
        align-items: flex-start;
        margin: 0;
    }

    .bbs-list.pay .bbs-content-info span {
        margin: 0;
        padding: 0;
    }

    .bbs-list.pay .bbs-content-info span:not(.category) {
        width: calc(100% - 100px);
        padding-left: 23px;
    }

    .bbs-list.pay .bbs-content-info span::after {
        display: none;
    }

    .bbs-list.pay .bbs-content-info .category {
        width: 115px;
    }

    .bbs-list.pay .premium {
        height: 120px;
    }

    .bbs-list.pay .premium::before {
        border-width: 40px 1411px 23px 399px;
    }

    .bbs-list.pay .premium::after {
        top: 10px;
        padding-top: 16px;
    }

    .with-thumbnail.edu-info li > a {
        height: auto;
        min-height: 220px;
        padding-right: 60px;
    }

    .with-thumbnail.edu-info li > a .bbs-content-info {
        position: static;
    }

    .edu-info .btn-review {
        flex-flow: column wrap;
        margin-bottom: 20px;
    }

    .title-wrapper > .title {
        width: auto;
        flex-direction: column;
        padding: 2em 0 1em 0;
    }

    .title-wrapper > .title > h2 {
        font-size: 2.5rem;
    }

    .title-wrapper > .title > p {
        height: auto;
        text-align: center;
        padding-top: 30px;
        padding-left: 0;
        padding-bottom: 20px;
    }

    .title-wrapper > .title > p::before {
        top: 14px;
        left: calc(50% - 15px);
    }

    .tab-page h3 {
        font-size: 1rem;
    }

    .research dt span {
        margin-left: 0;
        margin-top: .5em;
    }

    .research dt {
        font-size: 1rem;
    }

    .mileage-total {
        padding: 1em 2em;
    }

    .mileage-total h3 {
        padding-left: 0;
        background: none;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        font-size: 1rem;
        line-height: 200%;
    }

    .mileage-total p {
        font-size: .8rem;
    }

    .mileage-total p b {
        font-size: inherit;
    }

    .mileage-area {
        padding: 1em;
    }

    .race ul {
        margin: 0;
        padding: 0;
        flex-flow: column nowrap;
    }

    .race ul::before {
        left: 50%;
        right: auto;
        top: 0;
        transform: translateX(-50%);
        width: 1px;
        height: 100%;
    }

    .race ul + ul::after {
        display: none;
    }

    .race ul:first-child {
        padding-left: 0;
    }

    .race li {
        margin: 30px auto;
    }

    .race li.start {
        margin-top: 0;
    }

    .race ul.reverse {
        flex-flow: column wrap;
        padding-left: 0;
    }

    .race ul.reverse::after {
        right: 0;
    }

    .race ul:last-child {
        padding-right: 0;
    }

    .race ul:last-child::before {
        height: calc(100% - 30px);
    }

    .ground-spot {
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-container .nav-tabs.col-5 li {
        width: calc(25% + 1px);
    }
}

@media only all and (max-width: 599px) {

    .nav-tabs li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
        line-height: 120%;
        word-break: keep-all;
    }

    .filter-set > .filter.save > fieldset > .input-set {
        flex-flow: row wrap;
    }

    .filter-set > .filter.save > fieldset > .input-set > .btn-pink + .dropdown {
        margin-left: 0;
    }

    .title-area .info, .above-area .info {
        font-size: .8rem;
    }

    .bbs-form.info .dl-table > dt {
        padding: 6px 5px;
        font-size: .9rem;
    }

    .bbs-form.info dd .tips {
        display: block;
        margin-top: 5px;
        font-size: .8rem;
        line-height: 1rem;
    }

    .bbs-form > .dl-table > dd {
        flex-flow: row wrap;
    }

    .bbs-form.info > .dl-table > dd > input {
        text-indent: 0 !important
    }

    .bbs-form.info > .dl-table > dd.security input.tel-box {
        width: 60px;
        text-align: center;
    }

    .bbs-form.info > .dl-table > dd.e-mail > input {
        width: 42%;
    }

    .bbs-form.info > .dl-table > dd.phone > input {
        width: 27%;
    }

    .bbs-form.info > .dl-table > dd .btn {
        margin-left: 0;
    }

    /* ⚠ .btn + .btn 을 따로 적어야 한다 — 위 규칙((0,4,1))만으로는
       pre.component.css 의 .bbs-form.info > .dl-table > dd .btn + .btn{margin-left:10px}((0,5,1))을 못 이긴다.
       (2026-09-02 사용자 지적 「인증번호 발송·인증취소 버튼 앞에 공간 생김, 위에 박스랑 라인 안맞음」)
       ⚠ 「변경」 버튼이 display:none 이어도 **CSS 형제 선택자에는 그대로 잡힌다** —
          그래서 첫 버튼인 #telSend·#mailSend 까지 .btn + .btn 에 걸려 10px 이 붙었다.
       ⚠ 이 규칙은 원래 480px 이하 블록에만 있어서 **480~599px 구간에서만 10px 이 남아 있었다**(실측 585·500px). */
    .bbs-form.info > .dl-table > dd .btn + .btn {
        margin-left: 0;
    }

    /* .connect-sns 의 row-gap:5px(pre.component.css)이 줄 사이 간격을 대신하므로 뺐다 (2026-09-01).
       그대로 두면 599px 이하에서만 5px 이 더해져 10px 이 된다. */

    .bbs-form.info dd .dropdown:first-child {
        margin-right: 5px;
    }

    .bbs-form.info dd .dropdown + .dropdown {
        margin-left: 0;
    }

    .bbs-form.info .dl-table > dt label {
        line-height: 130%;
        word-break: keep-all;
    }

    .sub-filter.address > .option > label.tit {
        width: 100%;
        text-align: left;
    }

    .sub-filter.address .option.city {
        width: calc(33.33% - 4px);
    }

    .sub-filter.address .option.city + .option.city {
        margin-left: 6px;
    }

    .sub-filter.address .option.date input[data-date-type] {
        width: 100%;
    }

    .sub-filter.address .option.date label:not(.tit) {
        position: absolute;
        left: 0;
        top: -25px;
    }

    .sub-filter.address .option.term {
        width: 100%;
        margin: 10px 7px 20px 7px;
        justify-content: center;
    }

    .sub-filter.address .option.term .btn-group {
        justify-content: center;
    }

    .sub-filter.address .option.pay-info {
        width: 100%;
    }

    .sub-filter.address .option.pay-info input {
        width: calc(100% - 95px);
    }

    .depth-set.loc-list li {
        width: calc(33.33% - 3px);
    }

    .legend .color-bar {
        width: 80px;
    }

    .depth-set.with-icon-add > ul > li > button {
        padding: 0;
        text-align: center;
    }

    .info-head {
        justify-content: flex-start;
    }

    .info-head > * {
        font-size: .8rem;
    }

    .info-head dt::before {
        margin-right: 3px;
    }

    .modal-auction h4 {
        margin-bottom: 10px;
        line-height: 110%;
    }

    .table-head {
        flex-flow: column wrap;
    }

    .table-head h4 {
        margin-bottom: 5px;
    }

    .table-head .info {
        margin-bottom: 10px;
        font-size: .8rem;
    }

    .auction-photo li {
        height: 80px;
    }

    .wide > .sub-filter.address .option.city + .option > label {
        margin: 10px 0;
        font-size: 18px;
    }

    .wide > .sub-filter.address .option.city + .option > label::before {
        display: none;
    }

    .above-area .right {
        margin-top: 1em;
    }

    .above-area .legend.right {
        margin-top: 0;
    }

    .above-area .sub-filter.address {
        width: 100%;
        margin-bottom: 0;
        margin-top: .5em;
        padding: 0;
        justify-content: flex-end;
    }

    .above-area .sub-filter.address .option {
        width: 100%;
    }

    .above-area .sub-filter.address .option input {
        margin-left: 0;
    }

    .table-area .table-basic td, .table-area .table-basic td * {
        font-size: .7rem;
        word-break: break-all;
    }

    .table-area .scroll-tbody {
        max-height: 80vh;
    }

    .table-area .list-basic li {
        padding-left: 5px;
    }

    .table-area .list-basic li::before {
        top: 6px;
        left: 0;
    }

    .bbs-form.member-info .dl-table > dt {
        padding: 6px 5px;
        font-size: .9rem;
    }

    .bbs-form.member-info > .dl-table > dd > input {
        text-indent: 0 !important
    }

    .bbs-form.member-info > .dl-table > dd.e-mail > input {
        width: 42%;
    }

    .bbs-form.member-info > .dl-table > dd.phone > input {
        width: 27%;
    }

    .bbs-form.member-info > .dl-table > dd .btn {
        margin-left: 0;
    }

    .bbs-form.member-info .dl-table > dt label {
        line-height: 130%;
        word-break: keep-all;
    }

    .bbs-form.member-info dd .tips {
        display: block;
        margin-left: 0;
        margin-top: 5px;
        font-size: .8rem;
        line-height: 1rem;
    }

    .bbs-list.report li .text {
        justify-content: center;
    }

    .coupon.event .label {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    .coupon.event .code {
        width: calc(100% - 80px);
    }

    .review-list th, .review-list td {
        font-size: .8rem;
    }

    .edu-info .btn-review {
        width: 100%;
    }

    .bbs-list.edu-info .text .btn {
        width: 100%;
    }

    .bbs-list.edu .text {
        width: 100%;
    }
}

@media only all and (max-width: 480px) {
    .bbs-form.info dd span {
        line-height: 130%;
    }

    .bbs-form.info .checking + .checking {
        margin-left: 0;
    }

    .bbs-form.info > .dl-table > dd > input + .btn, .bbs-form.info dd .dropdown + .dropdown {
        margin-top: 5px;
    }

    .bbs-form.info > .dl-table > dd > input + .btn {
        width: 180px;
        margin-left: 0;
    }

    .auction-photo li {
        height: 60px;
    }

    .title-btns {
        right: 45px;
        margin-right: 0;
    }

    .title-btns > * {
        padding: 0 5px;
        font-size: 12px;
        margin-left: 2px;
    }

    .auction-photo.public li {
        height: 130px;
        flex: none;
        width: calc(50% - 10px);
        margin: 5px;
    }

    .auction-photo.public li + li {
        margin-left: 5px;
    }

    .bbs-list.pay li > a {
        min-height: 120px;
        padding-bottom: 1em;
        padding-left: 100px;
    }

    .bbs-list.pay li > a .sum {
        height: auto;
        margin-bottom: 10px;
    }

    .bbs-list.pay li > a .subject {
        margin-bottom: 5px;
    }

    .bbs-list.pay .img, .bbs-list.pay .img img {
        width: 76px;
        height: 76px;
    }

    .bbs-list.pay .img.premium {
        height: 76px;
        padding-top: 0;
    }

    .bbs-list.pay .premium {
        top: 15px;
        height: 120px;
        padding-top: 80px;
        font-size: 1.2rem;
    }

    .bbs-list.pay .premium::before {
        border-width: 40px 1411px 23px 399px;
    }

    .bbs-list.pay .premium::after {
        top: 10px;
        padding-top: 20px;
    }

    .bbs-list.pay .bbs-content-info {
        position: static;
    }

    .bbs-list.pay .bbs-content-info span:not(.category) {
        width: calc(100% - 100px);
        font-size: .8rem;
    }

    .bbs-list.pay .bbs-content-info .category {
        width: 80px;
        font-size: .7rem;
    }

    .bbs-filter .search-box {
        display: flex;
        flex-flow: row wrap;
    }

    .bbs-filter .search-box button {
        width: 100%;
        margin-top: .5em;
        margin-left: 0;
    }

    .bbs-filter .search-box .checking {
        margin-left: 0;
        margin-top: .7em;
    }

    .bbs-filter .search-box .checking + .btn-purple {
        margin-left: 0;
    }

    .bbs-list.edu li > a::before {
        top: 1em;
        transform: none;
    }

    .bbs-list.report li > a::before {
        top: 1em;
        transform: none;
    }

    .bbs-list.pay li > a .sum button {
        margin-left: 0;
        margin-top: 1em;
        width: 100%;
    }

    .edu-info td .btn.icon-youtube-red {
        padding: .3em .5em;
        font-size: .8rem;
        word-break: keep-all;
    }

    .report-total .step {
        width: 100%;
    }

    .report-total .step span {
        font-size: .9rem;
    }

    .report-area .member-info dd.phone input {
        width: calc(33.333% - 10px);
    }

    .report-area .member-info dd.security .notes {
        bottom: 5px;
    }

    .bbs-form.member-info > .dl-table > dd .btn + .btn {
        margin-left: 0;
    }

    .bbs-form.member-info dd span {
        line-height: 130%;
    }

    .bbs-form.member-info .checking + .checking {
        margin-left: 0;
    }

    .bbs-form.member-info > .dl-table > dd > input + .btn {
        width: 180px;
        margin-top: 5px;
        margin-left: 0;
    }

    .bbs-top > .bbs-btn-set > button {
        font-size: .7rem;
    }

    .modal-container.slim .report-area .search-box label {
        width: 100%;
        line-height: 20px;
    }

    .modal-container.slim .report-area .search-box input:last-child {
        width: calc(100% - 110px);
    }

    .modal-container.slim .report-area .search-box > div + div input:nth-child(2) {
        width: 100% !important;
    }

    .comparer[class*=left-pad] {
        padding-right: 30px;
    }

    .comparer[class*=left-pad] .btn-arrow-count {
        display: none;
    }

    .filter-save-list {
        width: 100%;
        right: 0;
    }
	.fr-view img.fr-dib {width: 95% !important;}

    .modal .dl-table-chubby > dd.user-date input {
        margin: 0;
    }
}

@media only all and (max-width: 380px) {
    .info-head dt:nth-child(4) {
        padding-left: 0;
    }

    .with-thumbnail.youtube .bbs-content-info .url {
        width: calc(100% - 120px);
        margin-right: 0;
    }

    .coupon.event .code-result input {
        font-size: 14px;
    }
	.fr-view img.fr-dib {width: 95% !important;}
}

@media only all and (max-width: 340px) {
    .btn-set .icon-reset, .wrapper.fixed .btn-set .icon-reset {
        width: calc(50% - 40px);
        padding: 0;
    }

    .filter-set > .btn-set > .btn-submit, .wrapper.fixed .filter-set > .btn-set > .btn-submit {
        width: calc(50% - 40px);
        padding: 0;
    }

    .sidenav-contents {
        width: 300px;
        left: -300px;
    }

    .icon-menu > li > a {
        width: 40px;
    }

    .modal-auction .caution {
        padding: 10px;
    }

    .info-area.public {
        top: 260px;
    }

    .bbs-list.report .text {
        display: flex;
        width: 100%;
        gap: .5em;
    }

    .bbs-list.report .btn {
        flex: 1;
        padding: 0;
        font-size: .9rem;
    }

    .bbs-list.report .btn::before {
        display: none;
    }
	.fr-view img.fr-dib {width: 95% !important;}
}

@media (max-height: 860px) {
    .map-filter {
        top: 10px;
        overflow-y: auto;
    }
}

/* ── 단지 상세 모달의 좁은 화면 보정 (이 파일 맨 뒤 = 가장 나중에 적용) ── */

@media only all and (max-width: 992px) {
    /* '선택' 행: 칩 목록(ul)이 flex:1 이라 오른쪽 컨트롤(전체가격·저장목록)과 한 줄을 나눠 쓴다.
       칩이 늘어나면 오른쪽이 세로 가운데에 떠 보이므로, 칩을 order 로 뒤로 보내 아랫줄에 전체 폭으로 깔고
       전체가격·저장목록은 선택 줄 오른쪽 끝에 그대로 둔다. */
    /* 두 줄이 되면 위아래가 붙어 답답해 보인다. 선택 줄 위·칩 줄 아래로 여백을 준다. */
    .modal-filter {
        padding-top: 10px;
    }

    .modal-filter ul {
        flex: 1 0 100%;
        order: 1;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* 남는 공간을 전체가격 앞에서 한 번만 밀어야 둘이 붙어서 오른쪽 끝으로 간다.
       저장목록에도 margin-left:auto 가 걸려 있어 공간을 반씩 나눠 갖는 바람에 둘이 벌어졌다. */
    .modal-filter .dropdown-multi {
        margin-left: auto;
    }

    .modal-filter .btn-filter-list {
        margin-left: 10px;
    }
}

@media only all and (max-width: 992px) {
    /* 푸터 저작권 문구가 900px 로 고정돼 있어, 창을 990px 아래로 줄여도 문서 폭이 그대로 남고
       가로 스크롤이 생겼다(무료 화면은 이 제약이 없다). 이 하나 때문에 좁은 폭 반응형이 통째로 묻혔다. */
    .copyright {
        width: auto;
        max-width: 100%;
    }
}

/* ── 아파트 세부정보 모달 폭을 홈과 동일하게 (홈: home.responsive.css) ── */

@media only all and (max-width: 1500px) {
    /* 프리미엄은 .modal-container 가 창 폭에서 좌우 60px 씩 고정으로 깎여 홈보다 좁았다.
       홈과 같이 창 폭에 비례하도록 맞춘다. */
    .root-modal .modal-apt-info {
        max-width: 100%;
        width: calc(100% - 2em);
    }
}

@media only all and (max-width: 1199px) {
    .root-modal .modal-container.modal-apt-info {
        width: 95%;
    }
}

/* ── 아파트 세부정보 모달 내부 반응형 (홈 home.responsive.css 와 동일 규칙을 이 모달 범위로 한정) ── */

@media only all and (max-width: 1199px) {
    /* 홈은 col- 그리드를 전역으로 세로 배치시키지만, 프리미엄에서 전역으로 바꾸면
       모든 화면에 영향이 가므로 이 모달 안으로 범위를 한정한다.
       (좌: 단지 스펙 / 우: 면적별 표 가 좁은 폭에서도 2단으로 남아 표가 잘렸다) */
    .root-modal .modal-apt-info [class^=col-],
    .root-modal .modal-apt-info [class*=" col-"] {
        display: block;
        float: none;
        width: 100%;
    }

    .root-modal .modal-apt-info .data-page .col-6:first-child {
        padding-right: 0;
    }

    .modal-apt-info .data-page .table-basic {
        width: auto;
    }

    .modal-apt-info .data-page .checking-set {
        overflow: hidden;
    }

    .modal-apt-info .data-page .checking-set .checking {
        float: left;
        width: 50%;
    }
}

@media only all and (max-width: 699px) {
    .modal-apt-info .data-page .checking-set .checking {
        width: 100%;
    }
}

@media only all and (max-width: 450px) {
    .root-modal .modal-apt-info .data-page h5 .caution-text {
        font-size: .8rem;
    }

    .root-modal .modal-apt-info .data-page table.text-right th,
    .root-modal .modal-apt-info .data-page table.text-right td {
        font-size: .8rem;
    }

    .root-modal .modal-apt-info .data-page table.text-right td b {
        font-size: .9rem;
    }
}

@media (max-height: 920px) {
    /* 세로가 짧으면 모달이 화면 아래(하단 네비게이션)까지 내려가 잘렸다. 높이를 화면에 맞춘다.
       scroll 로 두면 내용이 넘치지 않아도 빈 스크롤바가 늘 보여, 안쪽 .menu-content 스크롤바와 두 줄로 나온다. */
    .modal-container.modal-apt-info {
        overflow-x: hidden;
        overflow-y: auto;
        height: 95%;
    }
}

@media only all and (max-width: 800px) {
    /* 탭 6개가 한 줄에 몰려 글자가 '단지/환…' 처럼 잘렸다. 3개씩 최대 두 줄로 나눈다.
       - 기본 li 는 flex-shrink 가 살아 있어 폭을 줘도 한 줄로 눌려 들어간다 → flex-basis 까지 고정한다.
       - :nth-child(5n+1) 의 flex:none 이 특이도가 더 높아 1·6번째만 20% 로 남았다 → 같이 덮어쓴다.
       - padding·border 가 폭에 더해져 3개가 안 들어가므로 border-box 로 계산한다. */
    .root-modal .modal-apt-info .tab li,
    .root-modal .modal-apt-info .tab li:nth-child(5n+1),
    .root-modal .modal-apt-info .tab.wide li,
    .root-modal .modal-apt-info .tab.wide li:nth-child(5n+1) {
        box-sizing: border-box;
        flex: 0 0 33.33333%;
        width: 33.33333%;
        border-left: solid 1px #0a2e4f;
        border-right: solid 1px #0a2e4f;
    }
}

/* ── 면적 스위처: 개수에 맞춰 줄당 개수를 균등 분배 ──
   기본은 항상 12.5%(8개/줄) 고정이라, 좁아지면 '12평(24…' 처럼 글자가 잘리고
   9개면 8+1 처럼 아랫줄에 하나만 남았다.
   :has() 로 li 개수를 읽어 ceil(n/2) 개씩 나눠 위아래 줄 개수를 맞춘다. */

@media only all and (max-width: 1000px) {

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(1):last-child) > li {
        flex: 0 0 calc(100.00000% + 1px);
        width: calc(100.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(2):last-child) > li {
        flex: 0 0 calc(50.00000% + 1px);
        width: calc(50.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(3):last-child) > li {
        flex: 0 0 calc(33.33333% + 1px);
        width: calc(33.33333% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(4):last-child) > li {
        flex: 0 0 calc(25.00000% + 1px);
        width: calc(25.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(5):last-child) > li {
        flex: 0 0 calc(33.33333% + 1px);
        width: calc(33.33333% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(6):last-child) > li {
        flex: 0 0 calc(33.33333% + 1px);
        width: calc(33.33333% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(7):last-child) > li {
        flex: 0 0 calc(25.00000% + 1px);
        width: calc(25.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(8):last-child) > li {
        flex: 0 0 calc(25.00000% + 1px);
        width: calc(25.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(9):last-child) > li {
        flex: 0 0 calc(20.00000% + 1px);
        width: calc(20.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(10):last-child) > li {
        flex: 0 0 calc(20.00000% + 1px);
        width: calc(20.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(11):last-child) > li {
        flex: 0 0 calc(16.66667% + 1px);
        width: calc(16.66667% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(12):last-child) > li {
        flex: 0 0 calc(16.66667% + 1px);
        width: calc(16.66667% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(13):last-child) > li {
        flex: 0 0 calc(14.28571% + 1px);
        width: calc(14.28571% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(14):last-child) > li {
        flex: 0 0 calc(14.28571% + 1px);
        width: calc(14.28571% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(15):last-child) > li {
        flex: 0 0 calc(12.50000% + 1px);
        width: calc(12.50000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(16):last-child) > li {
        flex: 0 0 calc(12.50000% + 1px);
        width: calc(12.50000% + 1px);
    }

}

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

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(1):last-child) > li {
        flex: 0 0 calc(100.00000% + 1px);
        width: calc(100.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(2):last-child) > li {
        flex: 0 0 calc(50.00000% + 1px);
        width: calc(50.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(3):last-child) > li {
        flex: 0 0 calc(50.00000% + 1px);
        width: calc(50.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(4):last-child) > li {
        flex: 0 0 calc(50.00000% + 1px);
        width: calc(50.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(5):last-child) > li {
        flex: 0 0 calc(50.00000% + 1px);
        width: calc(50.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(6):last-child) > li {
        flex: 0 0 calc(50.00000% + 1px);
        width: calc(50.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(7):last-child) > li {
        flex: 0 0 calc(33.33333% + 1px);
        width: calc(33.33333% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(8):last-child) > li {
        flex: 0 0 calc(33.33333% + 1px);
        width: calc(33.33333% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(9):last-child) > li {
        flex: 0 0 calc(33.33333% + 1px);
        width: calc(33.33333% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(10):last-child) > li {
        flex: 0 0 calc(25.00000% + 1px);
        width: calc(25.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(11):last-child) > li {
        flex: 0 0 calc(25.00000% + 1px);
        width: calc(25.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(12):last-child) > li {
        flex: 0 0 calc(25.00000% + 1px);
        width: calc(25.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(13):last-child) > li {
        flex: 0 0 calc(20.00000% + 1px);
        width: calc(20.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(14):last-child) > li {
        flex: 0 0 calc(20.00000% + 1px);
        width: calc(20.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(15):last-child) > li {
        flex: 0 0 calc(20.00000% + 1px);
        width: calc(20.00000% + 1px);
    }

    .root-modal .modal-apt-info .sub-tab ul:has(> li:nth-child(16):last-child) > li {
        flex: 0 0 calc(16.66667% + 1px);
        width: calc(16.66667% + 1px);
    }

}

@media only all and (max-width: 800px) {
    /* 본문(.menu-content)은 절대배치라 탭 아래 위치를 top 고정값으로 잡는다(1줄 기준).
       탭이 2줄이 되면 그만큼 아래로 내려야 본문과 겹치지 않는다. (li line-height 50px) */
    .root-modal .modal-apt-info .menu-content {
        top: 150px;
    }

    .root-modal .modal-apt-info .menu-content.active {
        top: 120px;
    }
}

@media only all and (max-width: 1199px) {
    /* .popup-content 의 min-width:900px 때문에 모달을 좁혀도 본문이 900px 로 남아
       탭·표 오른쪽이 잘렸다. 홈에는 이 규칙이 없다. 모달 안에서만 푼다. */
    .root-modal .modal-apt-info .popup-content {
        min-width: 0;
    }
}

@media only all and (max-width: 992px) {

    .root-modal .modal-apt-info .apt-title,
    .root-modal .modal-apt-info .apt-detail {
        flex-flow: column nowrap;
    }

    .root-modal .modal-apt-info .apt-detail .apt-feature {
        flex: none;
        width: 100%;
        margin-right: 0;
    }

    .root-modal .modal-apt-info .apt-detail .unsold {
        width: 100%;
    }

    .root-modal .modal-apt-info .apt-feature li {
        padding-right: 0;
    }
}

@media only all and (max-width: 699px) {
    /* 아이콘 자리(왼쪽 100px)를 줄여 값이 두 줄로 접히지 않게 한다. */
    .root-modal .modal-apt-info .apt-feature li {
        padding-left: 70px;
    }

    .root-modal .modal-apt-info .apt-feature li:before {
        left: 0;
        width: 50px;
        height: 50px;
        background-size: 50px;
    }
}

@media only all and (max-width: 840px) {
    /* 이 폭에서는 프리미엄의 다른 모달과 똑같이 전체 화면으로 띄운다.
       위쪽 95% 규칙이 특이도가 더 높으므로 여기서 명시적으로 되돌린다. */
    .root-modal .modal-container.modal-apt-info {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: 100%;
        border-radius: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@media only all and (max-width: 840px) {
    /* 전체 화면에서는 제목줄의 위쪽 라운드(.modal-container .title-area)도 없앤다. */
    .root-modal .modal-container.modal-apt-info .title-area {
        border-radius: 0;
    }
}