#wrapper {position: fixed;width: 100%;height: 100%;/* display: none; */}

#logo.open {
}
#logo {
    opacity: 1;
    width: 60px;
    height: 44px;
    position: absolute;
    top: 17px;
    left: 30px;
    z-index: 32 !important;
    transition: 1s;
}
#logo img {
    width: 70px;
}

/* 검색 */
#search.close {
    height: 80px;
    padding-bottom: 0;
    border-bottom: 1px solid #eee;
}
#search {
    position: absolute;
    width: 100%;
    height: 80px;
    z-index: 31;
    padding: 60px 0px 0px;
    background-color: #fff;
    box-sizing: border-box;
    transition: 0.5s;
    border-bottom: 1px solid #fff;
}
#search.close .searchInput {
    width: 500px;
    top: 20px;
    left: 50%;
    height: 40px;
    transform: translateX(-50%);
}
#search .searchInput {
    background-color: #fff;
    width: 830px;
    height: 40px;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    position: relative;
    padding: 0 45px;
    box-sizing: border-box;
    transition: 0.5s;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}
#search .searchInput button {
    width: 40px;
    height: 38px;
    line-height: 38px;
    background: none;
    border: none;
    font-size: 22px;
}
#search.close .searchInput .back {
    display: none;
}
#search .searchInput .back {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
}
#search .searchInput .back i {}
#search .searchInput input {
    height: 40px;
    border: none;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
}
#search .searchInput .search {
    position: absolute;
    right: 5px;
}
#search .searchInput .search i {}
#search .searchArea {
    position: absolute;
    width: 799px;
    background-color: #fff;
    top: 70px;
    left: 50%;
    border: 1px solid #e6e6e6;
    box-shadow: 2px 2px 5px -3px #555;
    overflow-y: auto;
    max-height: 450px;
    display: none;
    z-index: 20;
    transform: translateX(-50%);
}
#search .searchArea ul {
}
#search .searchArea ul li {
    font-size: 14px;
    color: #888888;
    padding: 13px 15px;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#search.close .searchOptionArea {display: none;}
#search .searchOptionArea {
    width: 800px;
    height: 450px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 20px 30px;
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 1px 1px 1px 0px #ccc;
}
#search .searchGroup {
    flex: 1;
    margin-right: 50px;
}
#search.close .searchOption {}
#search .searchOption {
    width: calc(50% - 20px);
    margin-bottom: 20px;
}
#search .searchOption .optTitle {
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: #666666;
    margin-bottom: 10px;
}
#search .searchOption .optTitle span {float: right;font-family: 'Cafe24 Ohsquare';font-weight: 700;font-size: 14px;color: #000;}
#search .searchOption .btnArea {
    margin: 0px -3px 0;
    flex-wrap: wrap;
}
#search .searchOption .btnArea .radioInput {
    width: 25%;
    /* flex: 1; */
    margin-bottom: 6px;
}
#search .searchOption .btnArea .radioInput input[type="radio"],
#search .searchOption .btnArea .radioInput input[type="checkbox"] {
    display:none;
}
#search .searchOption .btnArea .radioInput input[type="radio"] + span,
#search .searchOption .btnArea .radioInput input[type="checkbox"] + span {
    background: none;
    border: 1px solid #EEF1F8;
    border-radius: 5px;
    text-align: center;
    height: 40px;
    cursor: pointer;
    font-size: 13px;
    color: #666666;
    margin: 0 3px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
#search .searchOption .btnArea .radioInput input[type="radio"]:checked + span,
#search .searchOption .btnArea .radioInput input[type="checkbox"]:checked + span {
    border: 1px solid #2A62FF;
    color: #2A62FF;
    font-weight: 700;
}
#search .searchOption .slide {
    margin: 20px 15px 35px;
}
#search .searchOption .slide .noUi-marker-normal {
    width: 1px;
}
#search .searchOption .slide .noUi-marker-large {
    width: 1px;
    height: 10px;
}
#search .searchOption .slide .noUi-value-large {
    bottom: 50px;
    font-size: 10px;
}
#search .searchOption .management {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 47px;
}
#search .searchOption .management li {
    font-weight: 500;
    font-size: 13px;
    color: #666666;
}
#search .searchOption .toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    margin: 0 0 0 10px;
}
#search .searchOption .toggle-switch-checkbox {
    display: none;
}
#search .searchOption .toggle-switch-label {
    display: block;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    border-radius: 34px;
    box-sizing: border-box;
    background-color: #ccc;
}
#search .searchOption .toggle-switch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in-out;
}
#search .searchOption .toggle-switch-switch {
    display: block;
    width: 26px;
    height: 26px;
    margin: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    border-radius: 28px;
    transition: all 0.3s ease-in-out;
}
#search .searchOption .toggle-switch-checkbox:disabled + .toggle-switch-label {
    background-color: #eee;
}
#search .searchOption .toggle-switch-checkbox:checked + .toggle-switch-label {
    background-color: #2A62FF;
}
#search .searchOption .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
    margin-left: 0;
}
#search .searchOption .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
    right: 0px;
}
#search.close .searchButton { display: none; }
#search .searchButton {
    position: absolute;
    width: 30%;
    bottom: -430px;
    left: 50%;
    display: flex;
    /* background: #ffffffcf; */
    padding: 10px 15px 10px;
    transform: translateX(-50%);
}
#search .searchButton button {
    height: 45px;
    border: none;
    width: 50%;
    color: #fff;
    font-family: 'Cafe24 Ohsquare';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
}
#search .searchButton .clearAll {
    background: #666666;
    border-radius: 25px 0px 0px 25px;
}
#search .searchButton .apply {
    background: #2A62FF;
    border-radius: 0px 25px 25px 0px;
}
#deposit {
    margin-top: -35px;
}
#monthly {
    margin-top: -65px;
}

/* 매물 상세정보 */
#houseInfo {
    position: fixed;
    left: 50%;
    width: 900px;
    height: 100%;
    background-color: #fff;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: scroll;
    display: none;
    box-shadow: 0px 0px 10px 5px #00000047;
    transform: translateX(-50%);
}
#houseInfo .title {
    padding-top: 0px;
    font-size: 18px;
    font-weight: 400;
    line-height: 31px;
}

#houseInfo .progress {
    padding-top: 15px;
}
#houseInfo .progress .step {
    display: inline-block;
    background-color: #004ecb;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 11px;
    border-radius: 20px;
    margin-left: 15px;
}
#houseInfo .progress .step .promotion {
    background-color: #fff;
    color: #0a0c0e;
    margin: -7px -10px -7px 5px;
    display: inline-block;
    padding: 8px 11px;
    border-radius: 20px;
}
#houseInfo .progress .price {
    font-size: 22px;
    font-weight: 800;
    padding: 15px 15px 8px;
}
#houseInfo .progress .price .rentalForm {
    font-size: 14px;
    color: #2962ff;
    font-weight: 600;
    padding-left: 10px;
    position: relative;
}
#houseInfo .progress .price .rentalForm:before {
    content: "|";
    color: #eceff1;
    font-size: 12px;
    position: absolute;
    font-weight: 100;
    left: 0px;
    bottom: 5px;
}
#houseInfo .progress .info {
    display: flex;
    padding: 8px 15px;
    font-size: 13px;
    border-top: 1px solid #eceff1;
    border-bottom: 1px solid #eceff1;
}

#houseInfo .progress .info li {
    border: 1px solid #000;
    padding: 5px 5px;
    font-size: 13px;
    margin-right: 5px;
    text-align: center;
    border-radius: 5px;
}
#houseInfo .progress .info .saleType {
    border-color: #2962ff;
    color: #2962ff;
}
#houseInfo .progress .info .dayAgo {
    border-color: #eceff1;
    color: #0a0c0e;
}
#houseInfo .progress .info .discount {
    border-color: #2f3337;
    color: #fff;
    background-color: #2f3337;
}
#houseInfo .progress .counter {
    display: flex;
    justify-content: flex-start;
    padding: 10px 15px;
    background-color: #f1f5fe;
}
#houseInfo .progress .counter li {
    padding-right: 20px;
    font-size: 12px;
    color: #718792;
    position: relative;
}
#houseInfo .progress .counter li:after {
    content: "|";
    color: #cfd8dc;
    position: absolute;
    font-size: 10px;
    right: 10px;
    top: 0px;
    font-weight: 100;
}
#houseInfo .progress .counter li:last-child:after {display: none}
#houseInfo .progress .counter span {color: #455a64;}
#houseInfo .progress .counter .adView {}
#houseInfo .progress .counter .callCount {}
#houseInfo .progress .counter .visitCount {}

#houseInfo .photo {
    padding-top: 30px;
    border-bottom: 10px solid #eff1f9;
}
#houseInfo .photo .title {background-color: #eceff1;font-size: 16px;line-height: 19px;color: #718792;padding: 12px 15px;border-radius: 5px;position: relative;margin: 0 30px 15px;}
#houseInfo .photo .title button {
    font-size: 22px;
    position: absolute;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 0;
    line-height: 37px;
    top: 4px;
    right: 4px;
    border: none;
    background: none;
}
#houseInfo .photo .title:after {top: 100%;left: 50%;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;}
#houseInfo .photo .title:after {border-top-color: #eceff1;border-width: 9px;margin-left: -9px;}
#houseInfo .photo .tile {padding: 0 30px;}
#houseInfo .photo .tile .tileBox {display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;cursor: pointer;}
#houseInfo .photo .tile .tileBox li {overflow: hidden;position: relative;/* border-radius: 10px; */width: 208px;height: 208px;display: none;}
#houseInfo .photo .tile .tileBox li .photoBox {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    height: 0;
    padding-top: 100%;
}
#houseInfo .photo .tile .tileBox .tilePhoto-0 {
    width: 416px;
    height: 416px;
    display: block;
    border-radius: 10px 0 0 10px;
}
#houseInfo .photo .tile .tileBox .tilePhoto-0 .photoBox {}
#houseInfo .photo .tile .tileBox .tilePhoto-1 {
    display: block;
}
#houseInfo .photo .tile .tileBox .tilePhoto-1 .photoBox {}
#houseInfo .photo .tile .tileBox .tilePhoto-2 {
    display: block;
    border-radius: 0 10px 0 0;
}
#houseInfo .photo .tile .tileBox .tilePhoto-2 .photoBox {}
#houseInfo .photo .tile .tileBox .tilePhoto-3 {
    position: absolute;
    right: 209px;
    bottom: 0;
    display: block;
}
#houseInfo .photo .tile .tileBox .tilePhoto-3 .photoBox {}
#houseInfo .photo .tile .tileBox .tilePhoto-4 {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    border-radius: 0 0 10px 0;
}
#houseInfo .photo .tile .tileBox .tilePhoto-4 .photoBox {}
#houseInfo .photo .tile .tileBox li img {width: 100%;height: 100%;/* border-radius: 10px; */object-fit: cover;position: absolute;top: 0;z-index: 1;border: dashed 1px #eceff1;box-sizing: border-box;}
#houseInfo .photo .tile .tileBox li .photo-name {
    position: absolute;
    background-color: #0a0c0e;
    opacity: 0.8;
    color: #fff;
    top: 10px;
    right: 10px;
    padding: 7px 9px;
    font-size: 12px;
    border-radius: 10px;
    z-index: 10;
}

#houseInfo .photo .advantages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 30px;
}
#houseInfo .photo .advantages li {
    padding: 5px;
    font-size: 16px;
    color: #718792;
}
#houseInfo .photo .story {
    padding: 0 40px 20px;
    font-size: 16px;
    text-align: justify;
    line-height: 160%;
    font-weight: 300;
    color: #666;
}
#houseInfo .photo .story .uname {
    text-decoration: underline;
    font-weight: 500;
    color: #333;
}
#houseInfo .photo .story .residency {
    text-decoration: underline;
    font-weight: 500;
    color: #333;
}
#houseInfo .introduce {
    padding: 20px 40px;
    border-bottom: 10px solid #eff1f9;
}
#houseInfo .introduce .subject {
    background-color: #f1f5fe;
    font-size: 16px;
    line-height: 19px;
    color: #718792;
    padding: 12px 15px;
    border-radius: 5px;
    position: relative;
    margin-top: 10px;
}
#houseInfo .introduce .subject:after {bottom: 100%;left: 30px;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;}
#houseInfo .introduce .subject:after {border-bottom-color: #f1f5fe;border-width: 9px;margin-left: -9px;}

#houseInfo .introduce .detailInfo {
    padding: 15px;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    color: #666;
    border: solid 1px #eceff1;
    border-radius: 5px;
    margin-top: 10px;
}

#houseInfo .summary {
    padding: 20px 40px;
    border-bottom: 10px solid #eff1f9;
}
#houseInfo .summary .title {
    padding-bottom: 0px;
}
#houseInfo .summary .infoBg {
    background-color: #f9f9f9;
    margin: 0 -15px;
    padding: 15px;
    margin-top: 10px;
}
#houseInfo .summary .infoTop {
    border: 1px solid #eceff1;
    border-radius: 5px;
    background-color: #fff;
    padding: 5px;
}
#houseInfo .summary .infoTop .address {
    background-color: #eceff1;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
}
#houseInfo .summary .infoTop .address .split {
    color: #d0d3de;
    font-weight: 100;
    padding: 05px;
}
#houseInfo .summary .infoTop .summaryBox {
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0;
}
#houseInfo .summary .infoTop .summaryBox li {
    flex: 4;
    font-size: 16px;
    color: #0a0c0e;
    padding-left: 15px;
    border-right: 1px solid #f1f1f1;
}
#houseInfo .summary .infoTop .summaryBox li:first-child {
    padding-left: 5px;
}
#houseInfo .summary .infoTop .summaryBox li:last-child {border-right: none;flex: 3;}
#houseInfo .summary .infoTop .summaryBox li .summaryTitle {
    font-size: 16px;
    color: #9ea7aa;
    padding-bottom: 8px;
}
#houseInfo .summary .info {
    margin: 0 -15px;
    padding: 10px 0px;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    align-items: center;
}
#houseInfo .summary .info:last-child {
    border-bottom: none;
}
#houseInfo .summary .info dt {
    flex: 3;
    color: #777;
    padding-left: 30px;
    letter-spacing: -1px;
}
#houseInfo .summary .info dd {
    flex: 10;
    line-height: 18px;
    padding-right: 10px;
}

#houseInfo .manager {
    position: relative;
    padding: 20px 40px;
    border-bottom: 10px solid #eff1f9;
}
#houseInfo .manager .title {
    padding-bottom: 10px;
}
#houseInfo .manager .infoArea {
    display: flex;
}
#houseInfo .manager .infoArea li {
    flex: 9;
}
#houseInfo .manager li.photo {
    flex: 2;
    padding-top: 0;
    padding-right: 20px;
    border-bottom: none;
}
#houseInfo .manager li.photo img {
    width: 100%;
    border-radius: 10px;
}
#houseInfo .manager .info {
    padding-bottom: 10px;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    /* border-bottom: 1px solid #eee; */
    align-items: center;
    margin-left: 40px;
    line-height: 20px;
}
#houseInfo .manager .info dt {
    flex: 3;
    color: #9ea7aa;
}
#houseInfo .manager .info dd {
    flex: 10;
    color: #0a0c0e;
}
#houseInfo .manager .info dd a {}
#houseInfo .manager .callTalk {
    display: flex;
    justify-content: space-between;
    margin: 10px -5px 0;
}
#houseInfo .manager .callTalk li {
    flex: 1;
    text-align: center;
    padding: 0 5px;
}
#houseInfo .manager .callTalk li a {
    display: block;
    border: 1px solid #eceff1;
    line-height: 40px;
    font-size: 16px;
    border-radius: 5px;
}

#houseInfo .btnArea {
    display: flex;
    justify-content: space-around;
    padding: 20px 40px 20px;
}
#houseInfo .btnArea button {
    flex: 1;
    text-align: center;
    margin: 0 5px;
    padding: 15px 0;
    font-size: 15px;
    border-radius: 5px;
    border: none;
}
#houseInfo .btnArea .new {
    background-color: #2962ff;
    color: #fff;
}

/* 매물 요약 카드 */
#houseCard {
    position: absolute;
    width: 400px;
    height: 120px;
    left: 80%;
    bottom: 15px;
    transform: translateX(-200px);
    z-index: 13;
    background-color: #fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    display: flex;
    cursor: pointer;
}
#houseCard .close {
    position: absolute;
    width: 22px;
    height: 22px;
    background-color: #666666;
    border: none;
    border-radius: 25px;
    color: #fff;
    top: -10px;
    right: -5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#houseCard .close i {}
#houseCard .photo {
    width: 120px;
    box-sizing: border-box;
    position: relative;
    height: 120px;
}
#houseCard .photo .loading {
    width: 100%;
    position: absolute;
    top: 54px;
    z-index: 1;
    text-align: center;
    color: #ccc;
}
#houseCard .photo img {
    width: 100%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    object-fit: cover;
    position: absolute;
    top: 0;
    z-index: 2;
    box-sizing: border-box;
}
#houseCard .houseInfo {
    width: calc(100% - 140px);
    padding: 10px;
}
#houseCard .houseInfo .subject {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#houseCard .houseInfo .address {
    font-weight: 300;
    font-size: 12px;
    line-height: 120%;
    color: #666666;
    margin-top: 6px;
}
#houseCard .houseInfo .info {
    display: flex;
    align-items: center;
    margin-top: 5px;
}
#houseCard .houseInfo .info .type {
    border-radius: 14px;
    font-weight: 500;
    font-size: 12px;
    line-height: 120%;
    color: #fff;
    padding: 2px 6px;
    background: #F06548;
    margin-right: 10px;
}
#houseCard .houseInfo .info .type.A {background-color: #F7B84B}
#houseCard .houseInfo .info .type.O {background-color: #299CDB}
#houseCard .houseInfo .info .living {
    font-weight: 300;
    font-size: 12px;
    line-height: 120%;
    color: #666;
}
#houseCard .houseInfo .info .living .live {}
#houseCard .houseInfo .info .living .livem2 {}
#houseCard .houseInfo .info .living .line {
    color: #EAEAEA;
    font-size: 10px;
    padding: 0 5px;
}
#houseCard .houseInfo .info .living .floor {}
#houseCard .houseInfo .price {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #444444;
    margin-top: 7px;
}

#map {
    width: 40%;
    height: calc(100% - 80px);
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 60%;
}
#map .mapMarker {
    width: 18px;
    height: 18px;
    border-radius: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-family: 'Noto Sans';
}
#map .mapMarker.apt {
    background-color: #F7B84B;
}
#map .mapMarker.office {
    background-color: #299CDB;
}
#map .mapMarker.house {
    background-color: #F06548;
}
#map .mapMarker .mapIcon {
    width: 33px;
    position: absolute;
    top: -37px;
    left: -7px;
}

#mapList.open {
    /* top: 80px; */
    /* width: 60%; */
    /* border-radius: 0; */
}
#mapList {
    position: absolute;
    width: 60%;
    height: calc(100% - 80px);
    top: 80px;
    left: 0;
    z-index: 3;
    background-color: #fff;
    transition: 1s;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    /* border-radius: 20px 20px 0 0; */
}
#mapList .close {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0px;
    box-sizing: border-box;
    z-index: 100;
    position: relative;
}
#mapList .total {
    position: absolute;
    left: 19px;
    top: 13px;
    font-size: 16px;
    color: #666;
}
#mapList .total .count {
    font-weight: 600;
    color: #3F51B5;
}
#mapList .close .bar {
    width: 36px;
    height: 5px;
    display: inline-block;
    background: #BEBFC0;
    border-radius: 4px;
    display: none;
}
#mapList .liveChange {
    position: absolute;
    right: 15px;
    top: 8px;
    border: none;
    background: none;
    font-size: 16px;
}
#mapList .houseList {
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 10px 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#mapList .houseList .houseInfo {
    width: 30%;
    margin: 0px 1.65% 37px;
    cursor: pointer;
}
#mapList .houseList .houseInfo .photo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    height: 0;
    padding-top: 100%;
    margin-bottom: 10px;
}
#mapList .houseList .houseInfo .photo img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    position: absolute;
    top: 0;
    z-index: 1;
    border: dashed 1px #eceff1;
    box-sizing: border-box;
}
#mapList .houseList .houseInfo .subject{
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 5px;
}
#mapList .houseList .houseInfo .info{
    font-weight: 400;
    font-size: 13px;
    line-height: 120%;
    color: #666666;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
#mapList .houseList .houseInfo .info .address {}
#mapList .houseList .houseInfo .info .living {
    display: flex;
    align-items: center;
}
#mapList .houseList .houseInfo .info .living .live {}
#mapList .houseList .houseInfo .info .living .livem2 {}
#mapList .houseList .houseInfo .info .living .line {
    color: #EAEAEA;
    font-size: 10px;
    padding: 0 5px;
}
#mapList .houseList .houseInfo .info .living .floor {}
#mapList .houseList .houseInfo .price {
    display: flex;
    align-items: center;
}
#mapList .houseList .houseInfo .price .type {
    border-radius: 3px;
    font-weight: 500;
    font-size: 12px;
    line-height: 120%;
    color: #fff;
    padding: 3px 4px;
}
#mapList .houseList .houseInfo .price .type.O {
    background: #0385FF;
}
#mapList .houseList .houseInfo .price .type.A {
    background: #F7B84B;
}
#mapList .houseList .houseInfo .price .type.H {
    background: #F06548;
}
#mapList .houseList .houseInfo .price .deposit {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #444444;
    padding-left: 5px;
}
#mapList .notList {
    padding: 100px 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}
#mapList .notList i {
    font-size: 40px;
    color: #2a62ff;
    margin-bottom: 20px;
}

#changeButton {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 10;
    width: 113px;
    height: 36px;
}
#changeButton .listBtn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 113px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #2A62FF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-sizing: border-box;
}
#changeButton .listBtn .text {
    font-family: Cafe24 Ohsquare;
    font-size: 13px;
    font-weight: 700;
    color: #2A62FF;
    padding-left: 5px;
}
#changeButton .listBtn .icon {
    width: 24px;
    height: 24px;
    line-height: 28px;
    text-align: center;
    background: #2A62FF;
    border-radius: 20px;
}
#changeButton .listBtn .icon i {
    color: #fff;
    font-size: 15px;
}
#changeButton .mapBtn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 113px;
    height: 36px;
    background: #2A62FF;
    border: 1px solid #2A62FF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-sizing: border-box;
}
#changeButton .mapBtn .text {
    font-family: Cafe24 Ohsquare;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    padding-left: 5px;
}
#changeButton .mapBtn .icon {
    width: 24px;
    height: 24px;
    line-height: 28px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
}
#changeButton .mapBtn .icon i {
    color: #2A62FF;
    font-size: 15px;
}

#photoSwiper {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    padding: 200px 0;
    /* margin: 200px; */
    box-sizing: border-box;
}
#photoSwiper .close {
    position: absolute;
    color: #fff;
    font-size: 40px;
    top: 140px;
    right: 190px;
    z-index: 101;
    cursor: pointer;
}
#photoSwiper .swiper-wrapper li {overflow: hidden;position: relative;border-radius: 10px;width: unset;height: unset;text-align: center;}
#photoSwiper .swiper-wrapper li:first-child {
    width: unset;
    height: unset;
}
#photoSwiper .swiper-wrapper li img {
    height: 100%;
}
#photoSwiper .swiper-wrapper li .photo-name {
    position: absolute;
    background-color: #0a0c0e;
    opacity: 0.6;
    color: #fff;
    bottom: 30px;
    left: 50%;
    padding: 7px 9px;
    font-size: 22px;
    border-radius: 10px;
    transform: translateX(-50%);
}
#photoSwiper .swiper-wrapper li .photo-name a {
    border: none;
    padding: 0;
    color: unset;
    background: unset;
    line-height: unset;
}
#photoSwiper .swiper-pagination {
    bottom: 160px;
    top: unset;
    color: #fff;
    font-size: 18px;
}
#photoSwiper .swiper-pagination .swiper-pagination-bullet {
    background-color: #ddd;
}
#photoSwiper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #fff;
}
#photoSwiper .swiper-button-prev,
#photoSwiper .swiper-button-next {color:#fff}

#photoMask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000000e8;
    z-index: 100;
    display: none;
    cursor: pointer;
}
#mapMask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffffbb;
    z-index: 30;
    display: none;
}
::-webkit-scrollbar {
    width: 6px;  /* 스크롤바의 너비 */
}

::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #217af466; /* 스크롤바의 색상 */
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    border-radius: 10px;
    background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
}

@media all and (max-width: 768px) {
    #logo.open {
        opacity: 0;
        left: -50%;
    }
    #logo {
        opacity: 1;
        width: 60px;
        height: 44px;
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 21;
        transition: 1s;
    }
    #logo img {
        width: 60px;
    }

    /* 검색 */
    #search.close {
        background-color: unset;
        height: 55px;
        padding-bottom: 0;
        border-bottom: unset;
    }
    #search {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 20;
        padding: 55px 15px 0px;
        background-color: #fff;
        box-sizing: border-box;
        transition: 0.5s;
    }
    #search.close .searchInput {
        width: calc(100% - 100px);
        padding-left: 20px;
        top: 15px;
        left: unset;
        height: unset;
        transform: unset;
    }
    #search .searchInput {
        background-color: #fff;
        width: calc(100% - 30px);
        height: 38px;
        box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25);
        border-radius: 25px;
        padding: 0 45px;
        box-sizing: border-box;
        transition: 0.5s;
        position: absolute;
        top: 15px;
        right: 15px;
        transform: unset;
        left: unset;
    }
    #search .searchInput button {
        width: 40px;
        height: 38px;
        line-height: 38px;
        background: none;
        border: none;
        font-size: 22px;
    }
    #search.close .searchInput .back {
        display: none;
    }
    #search .searchInput .back {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 20px;
    }
    #search .searchInput .back i {}
    #search .searchInput input {
        height: 38px;
        border: none;
        box-sizing: border-box;
        width: 100%;
        font-size: 15px;
    }
    #search .searchInput .search {
        position: absolute;
        right: 5px;
    }
    #search .searchInput .search i {}
    #search .searchArea {
        position: absolute;
        width: calc(100% - 60px);
        background-color: #fff;
        top: 54px;
        left: 29px;
        border: 1px solid #e6e6e6;
        box-shadow: 2px 2px 5px -3px #555;
        overflow-y: auto;
        max-height: 300px;
        display: none;
        z-index: 20;
        transform: unset;
    }
    #search .searchArea ul {}
    #search .searchArea ul li {
        font-size: 14px;
        color: #888888;
        padding: 13px 15px;
        border-bottom: 1px solid #f1f1f1;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #search.close .searchOptionArea {display: none;}
    #search .searchOptionArea {
        width: unset;
        height: calc(100% - 45px);
        overflow-x: hidden;
        overflow-y: scroll;
        padding: unset;
        padding-bottom: 30px;
        box-sizing: border-box;
        display: block;
        margin-right: unset;
        border: none;
        position: unset;
        transform: unset;
        box-shadow: unset;
    }
    #search .searchGroup {}
    #search.close .searchOption {}
    #search .searchOption {
        width: unset;
        height: unset;
        margin-right: unset;
        margin-top: 20px;
    }
    #search .searchOption .optTitle {
        font-weight: 700;
        font-size: 13px;
        line-height: 16px;
        color: #666666;
        margin-bottom: 10px;
    }
    #search .searchOption .optTitle span {float: right;font-family: 'Cafe24 Ohsquare';font-weight: 700;font-size: 14px;color: #000;}
    #search .searchOption .btnArea {
        margin: 0px -3px 0;
        flex-wrap: wrap;
    }
    #search .searchOption .btnArea .radioInput {
        width: 25%;
        margin-bottom: 6px;
        flex: unset;
    }
    #search .searchOption .btnArea .radioInput input[type="radio"],
    #search .searchOption .btnArea .radioInput input[type="checkbox"] {
        display:none;
    }
    #search .searchOption .btnArea .radioInput input[type="radio"] + span,
    #search .searchOption .btnArea .radioInput input[type="checkbox"] + span {
        background: none;
        border: 1px solid #EEF1F8;
        border-radius: 5px;
        text-align: center;
        height: 40px;
        cursor: pointer;
        font-size: 13px;
        color: #666666;
        margin: 0 3px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #search .searchOption .btnArea .radioInput input[type="radio"]:checked + span,
    #search .searchOption .btnArea .radioInput input[type="checkbox"]:checked + span {
        border: 1px solid #2A62FF;
        color: #2A62FF;
        font-weight: 700;
    }
    #search .searchOption .slide {
        margin: 20px 15px 55px;
    }
    #search .searchOption .slide .noUi-marker-normal {
        width: 1px;
    }
    #search .searchOption .slide .noUi-marker-large {
        width: 1px;
        height: 10px;
    }
    #search .searchOption .slide .noUi-value-large {
        bottom: 50px;
        font-size: 10px;
    }
    #search .searchOption .management {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: -10px;
    }
    #search .searchOption .management li {
        font-weight: 500;
        font-size: 13px;
        color: #666666;
    }
    #search .searchOption .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 30px;
        margin: 0 0 0 10px;
    }
    #search .searchOption .toggle-switch-checkbox {
        display: none;
    }
    #search .searchOption .toggle-switch-label {
        display: block;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        border-radius: 34px;
        box-sizing: border-box;
        background-color: #ccc;
    }
    #search .searchOption .toggle-switch-inner {
        display: block;
        width: 200%;
        margin-left: -100%;
        transition: margin 0.3s ease-in-out;
    }
    #search .searchOption .toggle-switch-switch {
        display: block;
        width: 26px;
        height: 26px;
        margin: 2px;
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 20px;
        border-radius: 28px;
        transition: all 0.3s ease-in-out;
    }
    #search .searchOption .toggle-switch-checkbox:disabled + .toggle-switch-label {
        background-color: #eee;
    }
    #search .searchOption .toggle-switch-checkbox:checked + .toggle-switch-label {
        background-color: #2A62FF;
    }
    #search .searchOption .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
        margin-left: 0;
    }
    #search .searchOption .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
        right: 0px;
    }
    #search.close .searchButton { display: none; }
    #search .searchButton {
        position: absolute;
        width: calc(100% - 30px);
        bottom: 0;
        left: 0;
        display: flex;
        background: #ffffffcf;
        padding: 10px 15px 10px;
        transform: unset;
    }
    #search .searchButton button {
        height: 45px;
        border: none;
        width: 50%;
        color: #fff;
        font-family: 'Cafe24 Ohsquare';
        font-style: normal;
        font-weight: 700;
        font-size: 13px;
    }
    #search .searchButton .clearAll {
        background: #666666;
        border-radius: 25px 0px 0px 25px;
    }
    #search .searchButton .apply {
        background: #2A62FF;
        border-radius: 0px 25px 25px 0px;
    }
    #deposit {}
    #monthly {}

    /* 매물 상세정보 */
    #houseInfo {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        background-color: #fff;
        z-index: 100;
        overflow-x: hidden;
        overflow-y: scroll;
        display: none;
        transform: unset;
    }
    #houseInfo .title {
        padding-top: 0px;
        font-size: 18px;
        font-weight: 400;
        line-height: 31px;
    }

    #houseInfo .progress {
        padding-top: 15px;
    }
    #houseInfo .progress .step {
        display: inline-block;
        background-color: #004ecb;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        padding: 8px 11px;
        border-radius: 20px;
        margin-left: 15px;
    }
    #houseInfo .progress .step .promotion {
        background-color: #fff;
        color: #0a0c0e;
        margin: -7px -10px -7px 5px;
        display: inline-block;
        padding: 8px 11px;
        border-radius: 20px;
    }
    #houseInfo .progress .price {
        font-size: 22px;
        font-weight: 800;
        padding: 15px 15px 8px;
    }
    #houseInfo .progress .price .rentalForm {
        font-size: 14px;
        color: #2962ff;
        font-weight: 600;
        padding-left: 10px;
        position: relative;
    }
    #houseInfo .progress .price .rentalForm:before {
        content: "|";
        color: #eceff1;
        font-size: 12px;
        position: absolute;
        font-weight: 100;
        left: 0px;
        bottom: 5px;
    }
    #houseInfo .progress .info {
        display: flex;
        padding: 8px 15px;
        font-size: 13px;
        border-top: 1px solid #eceff1;
        border-bottom: 1px solid #eceff1;
    }

    #houseInfo .progress .info li {
        border: 1px solid #000;
        padding: 5px 5px;
        font-size: 13px;
        margin-right: 5px;
        text-align: center;
        border-radius: 5px;
    }
    #houseInfo .progress .info .saleType {
        border-color: #2962ff;
        color: #2962ff;
    }
    #houseInfo .progress .info .dayAgo {
        border-color: #eceff1;
        color: #0a0c0e;
    }
    #houseInfo .progress .info .discount {
        border-color: #2f3337;
        color: #fff;
        background-color: #2f3337;
    }
    #houseInfo .progress .counter {
        display: flex;
        justify-content: flex-start;
        padding: 10px 15px;
        background-color: #f1f5fe;
    }
    #houseInfo .progress .counter li {
        padding-right: 20px;
        font-size: 12px;
        color: #718792;
        position: relative;
    }
    #houseInfo .progress .counter li:after {
        content: "|";
        color: #cfd8dc;
        position: absolute;
        font-size: 10px;
        right: 10px;
        top: 0px;
        font-weight: 100;
    }
    #houseInfo .progress .counter li:last-child:after {display: none}
    #houseInfo .progress .counter span {color: #455a64;}
    #houseInfo .progress .counter .adView {}
    #houseInfo .progress .counter .callCount {}
    #houseInfo .progress .counter .visitCount {}

    #houseInfo .photo {
        padding-top: 15px;
        border-bottom: 10px solid #eff1f9;
    }
    #houseInfo .photo .title {background-color: #eceff1;font-size: 14px;line-height: 19px;color: #718792;padding: 12px 15px;border-radius: 5px;position: relative;margin: 0 15px 15px;}
    #houseInfo .photo .title button {
        font-size: 22px;
        position: absolute;
        width: 35px;
        height: 35px;
        text-align: center;
        padding: 0;
        line-height: 37px;
        top: 4px;
        right: 4px;
        border: none;
        background: none;
    }
    #houseInfo .photo .title:after {top: 100%;left: 50%;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;}
    #houseInfo .photo .title:after {border-top-color: #eceff1;border-width: 9px;margin-left: -9px;}
    #houseInfo .photo .swiper {padding: 0 30px;}
    #houseInfo .photo .swiper .swiper-wrapper {}
    #houseInfo .photo .swiper .swiper-wrapper li {overflow: hidden;position: relative;border-radius: 10px;width: unset;height: unset;}
    #houseInfo .photo .swiper .swiper-wrapper li:first-child {
        width: unset;
        height: unset;
    }
    #houseInfo .photo .swiper .swiper-wrapper li img {
        width: 100%;
        border-radius: 10px;
    }
    #houseInfo .photo .swiper .swiper-wrapper li .photo-name {
        position: absolute;
        background-color: #0a0c0e;
        opacity: 0.6;
        color: #fff;
        top: 10px;
        right: 10px;
        padding: 7px 9px;
        font-size: 12px;
        border-radius: 10px;
    }
    #houseInfo .photo .swiper .swiper-wrapper li .photo-name a {
        border: none;
        padding: 0;
        color: unset;
        background: unset;
        line-height: unset;
    }
    #houseInfo .photo .swiper .swiper-pagination {
        bottom: 0;
        top: unset;
        background-color: #eceff1;
    }
    #houseInfo .photo .swiper .swiper-pagination .swiper-pagination-progressbar-fill {
        background-color: #0a0c0e;
    }
    #houseInfo .photo .advantages {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 5px 15px 10px;
    }
    #houseInfo .photo .advantages li {
        padding: 5px;
        font-size: 14px;
        color: #718792;
    }
    #houseInfo .photo .story {
        padding: 0 15px 15px;
        font-size: 14px;
        text-align: justify;
        line-height: 130%;
        font-weight: 300;
        color: #666;
    }
    #houseInfo .photo .story .uname {
        text-decoration: underline;
        font-weight: 500;
        color: #333;
    }
    #houseInfo .photo .story .residency {
        text-decoration: underline;
        font-weight: 500;
        color: #333;
    }
    #houseInfo .introduce {
        padding: 20px 15px;
        border-bottom: 10px solid #eff1f9;
    }
    #houseInfo .introduce .subject {
        background-color: #f1f5fe;
        font-size: 14px;
        line-height: 19px;
        color: #718792;
        padding: 12px 15px;
        border-radius: 5px;
        position: relative;
        margin-top: 10px;
    }
    #houseInfo .introduce .subject:after {bottom: 100%;left: 30px;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;}
    #houseInfo .introduce .subject:after {border-bottom-color: #f1f5fe;border-width: 9px;margin-left: -9px;}

    #houseInfo .introduce .detailInfo {
        padding: 15px;
        font-size: 14px;
        line-height: 20px;
        text-align: justify;
        color: #666;
        border: solid 1px #eceff1;
        border-radius: 5px;
        margin-top: 10px;
    }

    #houseInfo .summary {
        padding: 20px 15px;
        border-bottom: 10px solid #eff1f9;
    }
    #houseInfo .summary .title {
        padding-bottom: 0px;
    }
    #houseInfo .summary .infoBg {
        background-color: #f9f9f9;
        margin: 0 -15px;
        padding: 15px;
        margin-top: 10px;
    }
    #houseInfo .summary .infoTop {
        border: 1px solid #eceff1;
        border-radius: 5px;
        background-color: #fff;
        padding: 5px;
    }
    #houseInfo .summary .infoTop .address {
        background-color: #eceff1;
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
    }
    #houseInfo .summary .infoTop .address .split {
        color: #d0d3de;
        font-weight: 100;
        padding: 05px;
    }
    #houseInfo .summary .infoTop .summaryBox {
        display: flex;
        justify-content: space-evenly;
        padding: 10px 0;
    }
    #houseInfo .summary .infoTop .summaryBox li {
        flex: 4;
        font-size: 13px;
        color: #0a0c0e;
        padding-left: 15px;
        border-right: 1px solid #f1f1f1;
    }
    #houseInfo .summary .infoTop .summaryBox li:first-child {
        padding-left: 5px;
    }
    #houseInfo .summary .infoTop .summaryBox li:last-child {border-right: none;flex: 3;}
    #houseInfo .summary .infoTop .summaryBox li .summaryTitle {
        font-size: 13px;
        color: #9ea7aa;
        padding-bottom: 8px;
    }
    #houseInfo .summary .info {
        margin: 0 -15px;
        padding: 10px 0px;
        font-size: 13px;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee;
        align-items: center;
    }
    #houseInfo .summary .info:last-child {
        border-bottom: none;
    }
    #houseInfo .summary .info dt {
        flex: 4;
        color: #777;
        padding-left: 15px;
        letter-spacing: -1px;
    }
    #houseInfo .summary .info dd {
        flex: 8;
        line-height: 18px;
        padding-right: 10px;
    }

    #houseInfo .manager {
        position: relative;
        padding: 15px;
        border-bottom: 10px solid #eff1f9;
    }
    #houseInfo .manager .title {
        padding-bottom: 10px;
    }
    #houseInfo .manager .infoArea {
        display: flex;
    }
    #houseInfo .manager .infoArea li {
        flex: 8;
    }
    #houseInfo .manager li.photo {
        flex: 4;
        padding-top: 0;
        padding-right: 20px;
        border-bottom: none;
    }
    #houseInfo .manager li.photo img {
        width: 100%;
        border-radius: 10px;
    }
    #houseInfo .manager .info {
        padding-bottom: 10px;
        font-size: 13px;
        display: flex;
        flex-wrap: wrap;
        /* border-bottom: 1px solid #eee; */
        align-items: center;
        margin-left: unset;
        line-height: unset;
    }
    #houseInfo .manager .info dt {
        flex: 4;
        color: #9ea7aa;
    }
    #houseInfo .manager .info dd {
        flex: 9;
        color: #0a0c0e;
    }
    #houseInfo .manager .info dd a {}
    #houseInfo .manager .callTalk {
        display: flex;
        justify-content: space-between;
        margin: 10px -5px 0;
    }
    #houseInfo .manager .callTalk li {
        flex: 1;
        text-align: center;
        padding: 0 5px;
    }
    #houseInfo .manager .callTalk li a {
        display: block;
        border: 1px solid #eceff1;
        line-height: 40px;
        font-size: 16px;
        border-radius: 5px;
    }

    #houseInfo .btnArea {
        display: flex;
        justify-content: space-around;
        padding: 20px 15px 20px;
    }
    #houseInfo .btnArea button {
        flex: 1;
        text-align: center;
        margin: 0 5px;
        padding: 15px 0;
        font-size: 15px;
        border-radius: 5px;
        border: none;
    }
    #houseInfo .btnArea .new {
        background-color: #2962ff;
        color: #fff;
    }

    /* 매물 요약 카드 */
    #houseCard {
        position: absolute;
        width: calc(100% - 30px);
        height: 120px;
        left: 15px;
        bottom: 15px;
        z-index: 13;
        background-color: #fff;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        display: flex;
        transform: unset;
    }
    #houseCard .close {
        position: absolute;
        width: 22px;
        height: 22px;
        background-color: #666666;
        border: none;
        border-radius: 25px;
        color: #fff;
        top: -10px;
        right: -5px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #houseCard .close i {}
    #houseCard .photo {
        width: 120px;
        box-sizing: border-box;
        position: relative;
        height: 120px;
    }
    #houseCard .photo .loading {
        width: 100%;
        position: absolute;
        top: 54px;
        z-index: 1;
        text-align: center;
        color: #ccc;
    }
    #houseCard .photo img {
        width: 100%;
        height: 100%;
        border-radius: 5px 0 0 5px;
        object-fit: cover;
        position: absolute;
        top: 0;
        z-index: 2;
        box-sizing: border-box;
    }
    #houseCard .houseInfo {
        width: calc(100% - 140px);
        padding: 10px;
    }
    #houseCard .houseInfo .subject {
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    #houseCard .houseInfo .address {
        font-weight: 300;
        font-size: 12px;
        line-height: 120%;
        color: #666666;
        margin-top: 6px;
    }
    #houseCard .houseInfo .info {
        display: flex;
        align-items: center;
        margin-top: 5px;
    }
    #houseCard .houseInfo .info .type {
        border-radius: 14px;
        font-weight: 500;
        font-size: 12px;
        line-height: 120%;
        color: #fff;
        padding: 2px 6px;
        background: #F06548;
        margin-right: 10px;
    }
    #houseCard .houseInfo .info .type.A {background-color: #F7B84B}
    #houseCard .houseInfo .info .type.O {background-color: #299CDB}
    #houseCard .houseInfo .info .living {
        font-weight: 300;
        font-size: 12px;
        line-height: 120%;
        color: #666;
    }
    #houseCard .houseInfo .info .living .live {}
    #houseCard .houseInfo .info .living .livem2 {}
    #houseCard .houseInfo .info .living .line {
        color: #EAEAEA;
        font-size: 10px;
        padding: 0 5px;
    }
    #houseCard .houseInfo .info .living .floor {}
    #houseCard .houseInfo .price {
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        color: #444444;
        margin-top: 7px;
    }

    #map {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        top: 0;
        left: 0;
    }
    #map .mapMarker {
        width: 18px;
        height: 18px;
        border-radius: 10px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        font-family: 'Noto Sans';
    }
    #map .mapMarker.apt {
        background-color: #F7B84B;
    }
    #map .mapMarker.office {
        background-color: #299CDB;
    }
    #map .mapMarker.house {
        background-color: #F06548;
    }

    #mapList.open {
        top: 65px;
    }
    #mapList {
        position: absolute;
        width: 100%;
        height: calc(100% - 65px);
        top: 100%;
        left: 0;
        z-index: 3;
        background-color: #fff;
        transition: 1s;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
        border-radius: 20px 20px 0 0;
    }
    #mapList .close {
        width: 40px;
        height: 40px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 0px;
        box-sizing: border-box;
        z-index: 100;
        position: relative;
    }
    #mapList .total {
        position: absolute;
        left: 19px;
        top: 13px;
        font-size: 13px;
        color: #666;
    }
    #mapList .total .count {
        font-weight: 600;
        color: #3F51B5;
    }
    #mapList .close .bar {
        width: 36px;
        height: 5px;
        display: inline-block;
        background: #BEBFC0;
        border-radius: 4px;
    }
    #mapList .liveChange {
        position: absolute;
        right: 15px;
        top: 8px;
        border: none;
        background: none;
        font-size: 14px;
    }
    #mapList .houseList {
        height: calc(100% - 30px);
        overflow-x: hidden;
        overflow-y: scroll;
        box-sizing: border-box;
        padding: 0 15px 20px;
        display: block;
    }
    #mapList .houseList .houseInfo {
        margin: unset;
        margin-bottom: 37px;
        width: 100%;
    }
    #mapList .houseList .houseInfo .photo {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        height: 0;
        padding-top: 100%;
        margin-bottom: 10px;
    }
    #mapList .houseList .houseInfo .photo img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
        position: absolute;
        top: 0;
        z-index: 1;
        border: dashed 1px #eceff1;
        box-sizing: border-box;
    }
    #mapList .houseList .houseInfo .subject{
        font-weight: 700;
        font-size: 15px;
        line-height: 18px;
        margin-bottom: 5px;
    }
    #mapList .houseList .houseInfo .info{
        font-weight: 400;
        font-size: 13px;
        line-height: 120%;
        color: #666666;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    #mapList .houseList .houseInfo .info .address {}
    #mapList .houseList .houseInfo .info .living {
        display: flex;
        align-items: center;
    }
    #mapList .houseList .houseInfo .info .living .live {}
    #mapList .houseList .houseInfo .info .living .livem2 {}
    #mapList .houseList .houseInfo .info .living .line {
        color: #EAEAEA;
        font-size: 10px;
        padding: 0 5px;
    }
    #mapList .houseList .houseInfo .info .living .floor {}
    #mapList .houseList .houseInfo .price {
        display: flex;
        align-items: center;
    }
    #mapList .houseList .houseInfo .price .type {
        border-radius: 3px;
        font-weight: 500;
        font-size: 12px;
        line-height: 120%;
        color: #fff;
        padding: 3px 4px;
    }
    #mapList .houseList .houseInfo .price .type.O {
        background: #0385FF;
    }
    #mapList .houseList .houseInfo .price .type.A {
        background: #F7B84B;
    }
    #mapList .houseList .houseInfo .price .type.H {
        background: #F06548;
    }
    #mapList .houseList .houseInfo .price .deposit {
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        color: #444444;
        padding-left: 5px;
    }
    #mapList .notList {
        padding: 100px 0;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
    }
    #mapList .notList i {
        font-size: 40px;
        color: #2a62ff;
        margin-bottom: 20px;
    }

    #changeButton {
        position: absolute;
        right: 15px;
        bottom: 15px;
        z-index: 10;
        width: 113px;
        height: 36px;
    }
    #changeButton .listBtn {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 113px;
        height: 36px;
        background: #FFFFFF;
        border: 1px solid #2A62FF;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        box-sizing: border-box;
    }
    #changeButton .listBtn .text {
        font-family: Cafe24 Ohsquare;
        font-size: 13px;
        font-weight: 700;
        color: #2A62FF;
        padding-left: 5px;
    }
    #changeButton .listBtn .icon {
        width: 24px;
        height: 24px;
        line-height: 28px;
        text-align: center;
        background: #2A62FF;
        border-radius: 20px;
    }
    #changeButton .listBtn .icon i {
        color: #fff;
        font-size: 15px;
    }
    #changeButton .mapBtn {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 113px;
        height: 36px;
        background: #2A62FF;
        border: 1px solid #2A62FF;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        box-sizing: border-box;
    }
    #changeButton .mapBtn .text {
        font-family: Cafe24 Ohsquare;
        font-size: 13px;
        font-weight: 700;
        color: #FFFFFF;
        padding-left: 5px;
    }
    #changeButton .mapBtn .icon {
        width: 24px;
        height: 24px;
        line-height: 28px;
        text-align: center;
        background: #fff;
        border-radius: 20px;
    }
    #changeButton .mapBtn .icon i {
        color: unset;
        font-size: unset;
    }
    ::-webkit-scrollbar {
        width: 0;  /* 스크롤바의 너비 */
    }

    ::-webkit-scrollbar-thumb {
        height: unset; /* 스크롤바의 길이 */
        background: unset; /* 스크롤바의 색상 */
        border-radius: unset;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: unset;
        border-radius: unset;
        background: unset;  /*스크롤바 뒷 배경 색상*/
    }
}