/* 필터 공용 */ .tooltip { z-index: 102; } /* 검색바 랩퍼 (투기/과열/조정) */ .searchbar-wrap { position: relative; width: 100%; height: 40px; border-radius: 10px; } .searchbar-wrap:after { content: ''; display: block; position: absolute; z-index: 1; border-radius: inherit; } .searchbar-wrap .badge { display: none; position:absolute; left: 55px; top: -8px; z-index: 3; color: transparent; font-size: 0; background-repeat: no-repeat; background-position: center center; background-size: 100%; } .searchbar-wrap.active:after { left: -1px; top: -1px; right: -1px; bottom: -1px; } /* 투기 */ .searchbar-wrap.typeWarn.active:after { border: 1px solid #cd1d1d; } .searchbar-wrap.typeWarn.active.enter:after { border: 2px solid #cd1d1d; } .searchbar-wrap.typeWarn.active.enter .badge { display: block; width: 57px; height: 16px; background-image: url('/images/map/filters/ico_warn_enter.svg'); } /* 과열 */ .searchbar-wrap.typeOver.active:after { border: 1px solid #f46600; } .searchbar-wrap.typeOver.active.enter:after { border: 2px solid #f46600; } .searchbar-wrap.typeOver.active.enter .badge { display: block; width: 74px; height: 16px; background-image: url('/images/map/filters/ico_over_enter.svg'); } /* 조정 */ .searchbar-wrap.typeCare.active:after { border: 1px solid #ec9f00; } .searchbar-wrap.typeCare.active.enter:after { border: 2px solid #ec9f00; } .searchbar-wrap.typeCare.active.enter .badge { display: block; width: 74px; height: 16px; background-image: url('/images/map/filters/ico_care_enter.svg'); } /* 버튼 / 셀렉트 */ .searchbar-wrap .searchbar { position: relative; height: 40px; padding: 8px 86px 8px 48px; border-radius: 10px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); background: #fff; text-align: left; } .searchbar-wrap .searchbar [class*="btn"] { color: transparent; font-size: 0; } .searchbar-wrap .searchbar .btn-allmenu { position: absolute; top: 8px; left: 16px; border: 0; } .searchbar-wrap .searchbar .btn-addr-search { overflow: hidden; position: relative; display: block; max-width: 100%; padding-right: 16px; border: 0; box-sizing: border-box; color: #222; font-weight: 300; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; text-align: left; line-height: 20px;} .searchbar-wrap .searchbar .btn-search { position: absolute; top: 0; right: 48px; width: 40px; height: 40px; border: 0; background-size: 24px 24px; } .searchbar-wrap .searchbar .btn-home { position: absolute; top: 8px; right: 16px; } .searchbar-wrap .searchbar .custom-select { max-width: 100%; height: 24px; padding: 0 16px 0 0; border: none; background: url('/images/select-down.svg') no-repeat right center / 16px; color: #222; font-size: 14px; line-height: 24px; } .searchbar-wrap .searchbar .custom-select:focus { outline: none; box-shadow: none; } /* 지도 - 필터 */ /* 필터 내부 아이콘 */ .icoMy { display: inline-block; padding: 0 7px 0 24px; background: url('/images/map/filters/ico_my_filter_off.svg') no-repeat left center / 24px; } .icoMy.selected, .icoMy.typeSelected { background-image: url('/images/map/filters/ico_my_filter_on.svg'); } .icoClear { display: inline-block; padding: 0 24px 0 7px; background: url('/images/map/filters/ico_clear_all.svg') no-repeat right center / 24px; } .icoEdit { display: inline-block; width: 16px; height: 16px; background: url('/images/map/filters/ico_edit.svg') no-repeat center center / 100%; } .icoDelete { display: inline-block; padding: 0 24px 0 7px; background: url('/images/map/filters/ico_delete.svg') no-repeat right center / 24px; } .icoDeleteFilter { display: inline-block; width: 16px; height: 16px; background: #ff0200; border-radius: 100%; } .icoDeleteFilter:after { content: ''; display: block; position: absolute; left: 0; top: 50%; right: 0; width: 10px; height: 1px; margin: 0 auto; background: #fff; transform: translateY(-50%); } .icoSpecial { display: inline-block; width: 41px; height: 36px; background: url('/images/map/filters/ico_special.svg') no-repeat center center / 100%; } .icoAddSpecial { display: inline-block; width: 16px; height: 16px; background: url('/images/map/filters/ico_add_special.svg') no-repeat center center / 100%; } .icoAddedSpecial { display: inline-block; padding: 0 0 0 26px; background: url('/images/map/filters/ico_added_special.svg') no-repeat left center / 24px; } .icoComingSoon { display: block; position: relative; width: 193px; height: 133px; margin: 0 auto; color: transparent; font-size: 0; } .icoComingSoon:after { content: ''; display: block; position: absolute; left: 20px; bottom: -8px; right :0; width: 100%; height: 100%; margin: 0 auto; background: url('/images/map/filters/ico_coming_soon.svg') no-repeat center center / 100%; } /* 필터 */ .filters-container { position: relative; width: 100%; border-radius: 10px; background: transparent; } .filters-container.disabled { pointer-events: none; opacity: .7; } /* 지도 - 필터 : 커스텀 툴팁 */ .all-filters.tooltip.b-tooltip { top: -6px !important; opacity: 1; } .all-filters.tooltip.b-tooltip .arrow { left: 3px !important; margin: 0; } .all-filters.tooltip.b-tooltip .arrow:before { border-width: 0 0.2rem 0.2rem; border-bottom-color: rgba(54, 54, 54, .9); } .all-filters.tooltip.b-tooltip .tooltip-inner { min-width: auto; margin: 0 0 0 -8px; padding: 8px; background-color: rgb(54, 54, 54, .9); border-radius: 5px; font-size: 12px; line-height: 16px; text-align: left; } .all-filters-type-toggle.tooltip.b-tooltip { opacity: 1; } .all-filters-type-toggle.tooltip.b-tooltip .arrow { margin: 0; } .all-filters-type-toggle.tooltip.b-tooltip .arrow:before { border-width: 0.2rem 0 0.2rem 0.2rem; border-left-color: rgba(54, 54, 54, .9); } .all-filters-type-toggle.tooltip.b-tooltip .tooltip-inner { min-width: auto; margin: 0 0 0 -8px; padding: 8px; background-color: rgb(54, 54, 54, .9); border-radius: 5px; font-size: 12px; line-height: 16px; text-align: left; } .my-filter-help.tooltip.b-tooltip { left: 10px !important; top: -2px !important; opacity: 1; } .my-filter-help.tooltip.b-tooltip .arrow { margin: 0; } .my-filter-help.tooltip.b-tooltip .arrow:before { border-width: 0 0.2rem 0.2rem; border-bottom-color: rgba(54, 54, 54, .9); } .my-filter-help.tooltip.b-tooltip .tooltip-inner { min-width: auto; padding: 8px; background-color: rgb(54, 54, 54, .9); border-radius: 5px; font-size: 12px; line-height: 16px; text-align: left; } .my-filter-help.tooltip.b-tooltip .tooltip-inner .icoPin { position:relative;display: inline-block; width:10px;color: transparent; font-size: 0; vertical-align: baseline; } .my-filter-help.tooltip.b-tooltip .tooltip-inner .icoPin:before{ content:''; display: block; position: absolute;top:-1px;left:0; width: 10px; height: 10px; background: url('/images/icon_pin_small_selected.svg') no-repeat center center / 100%; } /* 필터 : 전체 필터 [트리거] */ .all-filters { display: flex; position: relative; } .all-filters .btn-all-filters { position: absolute; z-index: 3; width: 44px; height: 44px; background: url('/images/map/filters/ico_all_filters.svg') no-repeat center center / 44px; transition: background-image 0.15s ease-in-out; } .all-filters .btn-all-filters:hover { background-image: url('/images/map/filters/ico_all_filters_over.svg'); } .all-filters .btn-all-filters:hover .badge { background: #fca700; } .all-filters.active .btn-all-filters { background-image: url('/images/map/filters/ico_all_filters_active.svg'); } .all-filters .btn-all-filters .badge { display: inline-block; position: absolute; right: 0; top: 0; min-width: 16px; height: 16px; padding: 0; border-radius: 16px; background: #ffcc00; color:#222; font-weight: 300; font-size:10px; text-align:center; line-height:16px; vertical-align: middle; } .all-filters.active .btn-all-filters .badge { background: #fca700; } .presaleinfo .all-filters .btn-all-filters:hover .badge { background: #60a5ff; } .presaleinfo .all-filters .btn-all-filters:hover { background-image: url('/images/map/filters/ico_all_filters.svg'); } .presaleinfo .all-filters.active .btn-all-filters, .presaleinfo .all-filters.active .btn-all-filters:hover {background-image: url('/images/map/filters/sub_div_entire_filter_selected.svg') !important; } /* 필터 : 전체 필터 */ .all-filters-wrap { position: relative; } .all-filters-wrap.active { overflow: hidden; position: absolute; left: 0; top: 48px; right: 0; z-index: 10; width: 100%; border-radius: 10px; box-shadow: 0 2px 2px rgba(0, 0, 0, .2); background: #f8f8f8; } .all-filters-wrap.active .all-filters-head .all-filters-group { display: flex; } .all-filters-wrap.active .all-filters-body {display: flex; } .all-filters-wrap.active .all-filters-foot {display: flex; } @media (min-width: 560px) {.typerefac .selot-filter.selotNew .all-filters-wrap.active{left:0;width:423px;max-width:max-content}} .typerefac .selot-filter.selotNew .all-filters-wrap.active{width:100%;margin:0} .all-filters-wrap .scrollbar-outer { border-radius: 10px 10px 0 0; max-height: calc(100vh - 192px); } /* 전체필터 최대 높이값 수정 */ /* 필터 : 전체 필터 [헤드] */ .all-filters-head { position: relative; } .all-filters-head .all-filters-type-toggle .btn-all-filters-type-toggle { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 40px; height: 40px; color: transparent; font-size: 0; } .all-filters-head .all-filters-type-toggle .btn-all-filters-type-toggle.typeList { background: url('/images/map/filters/ico_all_filters_type_toggle_grid.svg') no-repeat center center / 100%; } .all-filters-head .all-filters-type-toggle .btn-all-filters-type-toggle.typeGrid { background: url('/images/map/filters/ico_all_filters_type_toggle_list.svg') no-repeat center center / 100%; } .all-filters-my-filter { overflow: hidden; padding: 2px 16px 6px; } .all-filters-my-filter .form-control { padding: 6px 24px 6px 0; border-bottom: 1px solid #ddd; height: 36px; background: transparent url('/images/map/filters/ico_edit.svg') no-repeat center right / 16px; color: #222; font-size: 16px; line-height: 24px; } .all-filters-my-filter .form-control::placeholder { color: #676767; font-size: 14px; } .all-filters-my-filter .form-control + .form-text { display: none; } .all-filters-my-filter .form-control:focus { background: url('/images/map/filters/ico_delete_all.svg') no-repeat calc(100% - 32px) center / 24px; } .all-filters-my-filter .form-control:focus + .form-text { display: block; position: absolute; right: 24px; top: 4px; color: #676767; font-size: 12px; line-height: 24px; } .all-filters-head .all-filters-group { display: none; flex-wrap: wrap; position: relative; padding: 6px 2px; } .all-filters-head .all-filters-group .btn-filter-wrap { display: flex; flex-wrap: wrap; position: relative; background-repeat: no-repeat; background-position: center center; } .all-filters-head .all-filters-group .btn-filter-wrap:after { content: ''; display: block; position: absolute; left: 0; } .all-filters-head .all-filters-group .btn-filter-wrap .badge { position: absolute; top: 0; min-width: 16px; height: 16px; margin: 0 auto; padding: 0; border-radius: 16px; background: #ffcc00; color: #222; font-weight: 300; font-size: 10px; text-align: center; line-height: 16px; vertical-align: middle; } .all-filters-head .all-filters-group .btn-filter-wrap .btn-filter { overflow: hidden; min-width: auto; min-height: auto; padding: 0 8px; border: 0; box-shadow: none; color:#222; font-size: 14px; line-height: 20px; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; } .all-filters-head .all-filters-group .btn-filter-wrap .btn-filter:hover { background-color :#ffcc00; color :#222; } .all-filters-head .all-filters-group .btn-filter-wrap .btn-filter:focus { box-shadow: 0 2px 5px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .23); } .all-filters-head .all-filters-group .btn-filter-wrap .btn-filter.active { box-shadow: 0 1px 3px rgba(0, 0, 0, .2); background-color:#ffcc00; color: #222; } .all-filters-head .all-filters-group .btn-filter-wrap .btn-filter.active .badge { background-color:#ffcc00; } .all-filters-head .all-filters-group .btn-filter-wrap .btn-filter.submit { border: 1px solid #febd36; } .all-filters-head .all-filters-group .btn-filter-wrap .btn-filter.selected { background-color: #ffcc00; color: #222; } /* 전체 필터 버튼 이미지 */ .all-filters-head .all-filters-group .btn-filter-wrap { position: relative; } .all-filters-head .all-filters-group .btn-filter-wrap.typeProd:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeProd_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeSale:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeSale_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typePrice:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePrice_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeArea:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeArea_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeCompYear:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeCompYear_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeRooms:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRooms_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeHouse:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeHouse_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeStruct:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeStruct_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeManage:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeManage_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeRatioF:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioF_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeRatioB:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioB_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeRatioJ:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioJ_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeRatioS:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioS_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeRatioM:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioM_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeSales:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeSales_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeSaleD:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeSaleD_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeParking:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeParking_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeCCTV:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeCCTV_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeElevator:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeElevator_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeLoan:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeLoan_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typePar1:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePar1_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typePar2:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePar2_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typePar3:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePar3_off.svg'); } /* 신규 필터 1.26 추가 */ .all-filters-head .all-filters-group .btn-filter-wrap.typeOption:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_options_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeAreaS:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_area_s_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeAreaP:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_area_p_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeAreaT:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_area_t_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeLand:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_land_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeUsage:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_usage_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeFloor:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_floor_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeStore:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_store_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.typeProgress:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_progress_off.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeProd:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeProd:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeProd_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeSale:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeSale:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeSale_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typePrice:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typePrice:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePrice_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeArea:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeArea:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeArea_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeCompYear:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeCompYear:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeCompYear_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeRooms:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeRooms:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRooms_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeHouse:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeHouse:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeHouse_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeStruct:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeStruct:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeStruct_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeManage:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeManage:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeManage_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeRatioF:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeRatioF:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioF_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeRatioB:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeRatioB:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioB_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeRatioJ:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeRatioJ:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioJ_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeRatioS:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeRatioS:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioS_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeRatioM:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeRatioM:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeRatioM_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeSales:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeSales:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeSales_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeSaleD:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeSaleD:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeSaleD_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeParking:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeParking:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeParking_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeCCTV:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeCCTV:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeCCTV_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeElevator:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeElevator:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeElevator_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeLoan:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeLoan:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typeLoan_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typePar1:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typePar1:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePar1_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typePar2:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typePar2:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePar2_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typePar3:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typePar3:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_typePar3_on.svg'); } /* 신규 필터 1.26 추가 */ .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeOption:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeOption:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_options_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeAreaS:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeAreaS:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_area_s_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeAreaP:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeAreaP:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_area_p_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeAreaT:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeAreaT:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_area_t_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeLand:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeLand:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_land_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeUsage:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeUsage:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_usage_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeFloor:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeFloor:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_floor_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeStore:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeStore:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_store_on.svg'); } .all-filters-head .all-filters-group .btn-filter-wrap.submit.typeProgress:after, .all-filters-head .all-filters-group .btn-filter-wrap.active.typeProgress:after { background-image: url('/images/map/filters/all_filters/ico_all_filters_progress_on.svg'); } /* 전체 필터 버튼 [리스트 타입] */ .all-filters-head .all-filters-group.typeList { padding: 12px; } .all-filters-head .all-filters-group.typeList .btn-filter-wrap { flex: 1 1 auto; min-width: 50%; } .all-filters-head .all-filters-group.typeList .btn-filter-wrap:after { top: 8px; width: 24px; height: 24px; background-size: 24px; } .all-filters-head .all-filters-group.typeList .btn-filter-wrap .badge { display: none; left: 16px; top: 2px; } .all-filters-head .all-filters-group.typeList .btn-filter-wrap .btn-filter { max-width: calc( 100% - 40px); height: 24px; margin: 8px 0 8px 32px; } .all-filters-head .all-filters-group.typeGrid .btn-filter-wrap .btn-filter.active { z-index: 2; } /* 전체 필터 버튼 [그리드 타입] */ .all-filters-head .all-filters-group.typeGrid { padding: 12px 12px 8px; } .all-filters-head .all-filters-group.typeGrid .btn-filter-wrap { flex: 0 0 auto; align-items: center; justify-content: center; min-width: 25%; max-width: 25%; height: 68px; } .all-filters-head .all-filters-group.typeGrid .btn-filter-wrap:after { top: -4px; right: 0; width: 32px; height: 32px; margin: 0 auto; background-size: 32px; } .all-filters-head .all-filters-group.typeGrid .btn-filter-wrap .badge { display: block; left: calc(50% + 12px); top: -2px; } .all-filters-head .all-filters-group.typeGrid .btn-filter-wrap .btn-filter { position: absolute; left: 0; top: 0; right: 0; max-width: 100%; height: 24px; margin: 32px auto 12px; } .all-filters-head .all-filters-group.typeGrid .btn-filter-wrap .btn-filter.active { z-index: 2; max-width: calc( 100% * 4); } /* 필터 : 전체 필터 [바디] */ .all-filters-body { padding: 4px 0 0; border-radius: 0 !important; } .all-filters-body .filters-tabs-content { padding: 8px 12px 12px; } .all-filters-body .filters-tabs-content .filters-tabs-content { padding: 0; } .all-filters-body .filters-tabs-content .tab-pane { padding: 0 !important; } /* 필터 : 전체 필터 [푸터] */ .all-filters-foot { } /* 필터 : 따로필터 */ .filters-wrap.active { position: relative; } .filters-wrap.active .filters-body { display: flex; } .filters-wrap.active .filters-foot { display: flex; } .filters-wrap > .scrollbar-outer { max-height: calc(100vh - 156px); } /* 필터 : 따로필터 [ 헤드 ] */ .filters-head { display: flex; position: relative; } .filters-head .filters-group-outer { display: flex; width: 100%; padding: 0 0 0 14px; } .filters-head .filters-group { display: flex; flex-wrap: nowrap; position: relative; margin:0 0 0 32px; padding: 6px 12px 4px 0; } .filters-head .filters-group .btn-filter { position: relative; flex: 0 0 auto; min-width: auto; min-height: 32px; margin: 0 0 8px 8px; padding: 0 8px; border: 0; border-radius: 16px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .32) , 0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 2px 0 rgba(0, 0, 0, .14); background-color: #fff; color: #676767; font-weight: 300; font-size: 14px; white-space: nowrap; line-height: 30px; } .filters-head .filters-group .btn-filter:hover { background-color :#ffcc00; color :#fff; } .filters-head .filters-group .btn-filter:hover .badge { background: #fff; color: #222; } .filters-head .filters-group .btn-filter:focus { box-shadow: 0 2px 5px rgba(0, 0, 0, .19), 0 1px 1px rgba(0, 0, 0, .23); } .filters-head .filters-group .btn-filter .badge { display: inline-block; min-width: 16px; height: 16px; padding: 0; border-radius: 16px; background: #ffcc00; color: #222; font-weight: 300; font-size: 10px; text-align: center; line-height: 16px; vertical-align: middle; } .filters-head .filters-group .btn-filter.active { background-color:#ffcc00; color: #222; font-weight: bold; } .filters-head .filters-group .btn-filter.active .badge { background-color:#fff; } .filters-head .filters-group .btn-filter.submit { border: 1px solid #febd36; font-weight: 600; color: #222; } .filters-head .filters-group .btn-filter.selected { background-color: #ffcc00; color: #222; } .filters-head .filters-group .btn-filter.icoMy { min-width: 50px; min-height: 30px; padding:0 9px 0 20px; background-image: url('/images/map/filters/ico_my_filter_off.svg'); color: #222; } .filters-head .filters-group .btn-filter.icoMy:after { content: ''; display: block; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; z-index: -1; border-radius: 16px; background: #4178f4 linear-gradient(to right, #7f4de9, #4178f4); } .filters-head .filters-group .btn-filter.icoMy:hover { border-color: #17356e; background-color: #17356e; background-image: url('/images/map/filters/ico_my_filter_on.svg'); color: #fff; } .filters-head .filters-group .btn-filter.icoMy.submit { border: 0; background-image: url('/images/map/filters/ico_my_filter_on.svg'); font-weight: normal; } .filters-head .filters-group .btn-filter.icoMy.submit:after { background: #17356e;} .filters-head .filters-group .btn-filter.icoMy.submit:hover { border-color: #17356e; background-color: #17356e; color: #fff; } .filters-head .filters-group .btn-filter.icoMy.active { border-color: #17356e; background-color: #17356e; background-image: url('/images/map/filters/ico_my_filter_on.svg'); color: #fff; } .filters-head .filters-group .btn-filter.icoMy.active:after { background: #17356e; } .filters-head .filters-group .btn-filter.icoMy.update:before { content: ''; display: block; position: absolute; left: 4px; top: 7px; z-index: 1; width: 4px; height: 4px; border-radius: 2px; background: #ff0200; } .filters-head .filters-group .btn-filter.icoMy.active.submit { font-weight: bold; } /* 필터 : 따로필터 [ 바디 ] */ .filters-body { box-shadow: 0 2px 2px rgba(0, 0, 0, .2); } /* 필터 : 따로필터 [ 푸터 ] */ .filters-foot { box-shadow: 0 2px 2px rgba(0, 0, 0, .2); } /* 필터 컨텐츠 공용 */ [class*="filters-body"] { display: none; overflow: hidden; border-radius: 10px 10px 0 0; box-shadow: 0 1px 8px rgba(0, 0, 0, .2); background: #fff; } [class*="filters-body"] .filters-form { width: 100%; } [class*="filters-body"] .filters-tabs { width: 100%; margin: 0; padding: 0; border-radius: 0; box-shadow: none; text-align: left; } /* 버튼형 탭 타이틀 그룹 & 버튼 */ [class*="filters-body"] .filters-tabs-title-group-outer { position: relative; } [class*="filters-body"] .filters-tabs-title-group-outer:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; right: 0; width: 100%; border-bottom: 1px solid #ddd; } [class*="filters-body"] .filters-tabs-title-group { display: flex; flex-wrap: nowrap; padding: 0 6px; } [class*="filters-body"] .filters-tabs-title-group button:first-child { letter-spacing: -.25px; } [class*="filters-body"] .btn-filters-tabs-title { flex: 0 0 auto; position: relative; min-width: auto; height: 30px; margin: 0 6px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #222; font-weight: 300; font-size: 13px; } [class*="filters-body"] .btn-filters-tabs-title.active { z-index: 1; font-weight: 400; } [class*="filters-body"] .btn-filters-tabs-title.active:after { content: ''; display: block; position: absolute; left: -3px; bottom: -1px; width: calc(100% + 6px); height: 2px; background: #ffcc00; } /* 내장형 탭 타이틀 */ [class*="filters-body"] .filters-tabs-title { position: relative; padding: 0 8px; } [class*="filters-body"] .filters-tabs-title:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; right: 0; border-bottom: 1px solid #ddd; } [class*="filters-body"] .filters-tabs-title .nav-tabs { display: inline-flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; border: 0; -webkit-overflow-scrolling: touch; } [class*="filters-body"] .filters-tabs-title .nav-tabs .nav-item { flex: 0 0 auto; margin: 0 16px 0 0; } [class*="filters-body"] .filters-tabs-title .nav-tabs .nav-link { width: 100%; height: 30px; padding: 0; border: none; border-radius: 0; color: #222; font-weight: 300; font-size: 14px; } [class*="filters-body"] .filters-tabs-title .nav-tabs .nav-link.active { z-index: 1; border-bottom: 2px solid #ffcc00; background: #fff; font-weight: 400; } [class*="filters-body"] .filters-tabs-title .nav-tabs .nav-link.active:after { content: none; } [class*="filters-body"] .filters-tabs-title-disabled { display: none; } [class*="filters-body"] .filters-tabs-title.typeCenter .nav-tabs .nav-item { min-width: 40px; margin: 0 auto; } [class*="filters-body"] .filters-tabs-content { width: 100%; background: #fff; } [class*="filters-body"] .filters-tabs-content .tab-pane { width: 100%; padding: 8px 0 12px; box-shadow: none; } [class*="filters-body"] .filters-tabs-content .tab-pane .tab-pane { padding: 0; } /* 필터 : 필터 Form */ [class*="filters-body"] .filters .form-group { display: flex; flex-wrap: nowrap; position: relative; margin: 0; padding: 0 8px; } [class*="filters-body"] .filters .form-group > div { display: flex; flex-wrap: nowrap; width: 100%; } [class*="filters-body"] .filters .form-group div[role="group"] { display: flex; flex-wrap: wrap; width: 100%; } [class*="filters-body"] .filters .form-group .btn-secondary { min-width: 47px; height: 32px; margin: 8px 4px 0; padding: 0 8px; border: solid 1px #b2b2b2; border-radius: 8px !important; background-color: #fff; color: #222; font-size: 14px; line-height: 20px; } [class*="filters-body"] .filters .form-group .btn-secondary.active { border-color: #ddd; background: #ddd; color: #222 !important; } [class*="filters-body"] .filters .form-group .btn-secondary.disabled { border-color: #ddd; color: #ddd !important; } [class*="filters-body"] .filters .form-group .form-label { display: inline-block; position: absolute; left: 12px; top: 12px; z-index: 1; width: auto; height: auto; visibility: visible; color: #222; font-size: 14px; text-indent: 0; line-height:20px; } [class*="filters-body"] .filters .form-group .form-label + div .btn-group { width: auto; margin: 0 0 0 42px; } [class*="filters-body"] .filters .form-group .btn-group { flex-wrap: wrap; width: 100%; } [class*="filters-body"] .filters .form-group .btn-group .btn-secondary { flex: 0 0 auto; } [class*="filters-body"] .filters .form-group-notice { padding: 2px 8px 4px; color: #676767; font-size: 12px; text-align: right; } /* 필터타입 : 마이필터 */ [class*="filters-body"] .filters.typeMy { padding: 8px 0 0; } [class*="filters-body"] .filters.typeMy .sTop { display: block; position: relative; margin: 0 0 4px; } [class*="filters-body"] .filters.typeMy .sTop:after { content: ''; clear: both; display: block; position: absolute; left: 0; bottom: 0; right: 0; width: 100%; height: 4px; margin: 0 auto; background: #f8f8f8; } [class*="filters-body"] .filters.typeMy .sTop .scrollbar-outer { max-width: 100%; max-height: calc(100vh - 156px); min-height: 66px; border-radius: 10px 10px 0 0; } [class*="filters-body"] .filters.typeMy .sBot { overflow: hidden; position: relative; display: flex; } [class*="filters-body"] .filters.typeMy .sLeft, [class*="filters-body"] .filters.typeMy .sRight { position: relative; width: 50%; padding: 8px 0 0; background: #fff; vertical-align: top; } [class*="filters-body"] .filters.typeMy .sCenter { position: absolute; left: calc(50% - 1px); top: 8px; width: 2px; min-height: calc(100% - 8px); background: #f8f8f8; } [class*="filters-body"] .filters.typeMy .sLeft > .scrollbar-outer, [class*="filters-body"] .filters.typeMy .sRight > .scrollbar-outer { overflow: hidden; min-height: 266px; max-height: 300px; } [class*="filters-body"] .filters.typeMy .sLeft .content, [class*="filters-body"] .filters.typeMy .sRight .content { display: flex; flex-wrap: nowrap; flex-direction: column; width: 100%; } [class*="filters-body"] .filters.typeMy .sLeft .content .head, [class*="filters-body"] .filters.typeMy .sRight .content .head { margin: 0 0 8px 8px; } [class*="filters-body"] .filters.typeMy .sLeft .content .body, [class*="filters-body"] .filters.typeMy .sRight .content .body { flex-direction: column; } [class*="filters-body"] .filters.typeMy .content { position: relative; } [class*="filters-body"] .filters.typeMy .head { position: relative; } [class*="filters-body"] .filters.typeMy .body { position: relative; display: flex; align-items: center; flex-wrap: nowrap; min-height: 66px; } [class*="filters-body"] .filters.typeMy .sTitle { display: block; } [class*="filters-body"] .filters.typeMy .sTitle strong { color: #222; font-weight: normal; font-size: 14px; line-height: 20px; vertical-align: top; } [class*="filters-body"] .filters.typeMy .sTitle strong + span { display: inline-block; position: relative; top: 1px; margin: 0 0 0 6px; color: #ffcc00; font-size: 10px; line-height: 20px; vertical-align: top; } [class*="filters-body"] .filters.typeMy .sTitle.modePin strong + span { color: #17356e; } [class*="filters-body"] .filters.typeMy .btn-my-filter-pin { display: block; position: absolute; right: 36px; top: 0; width: 24px; height: 24px; border: 0; background: url('/images/map/filters/ico_my_filter_pin.svg') no-repeat center center / 100%; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .btn-my-filter-pin-complete { display: block; position: absolute; right: 12px; top: -2px; padding: 2px 6px; border-radius: 12px; border: 1px solid #222; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeMy .btn-my-filter-help { display: block; position: absolute; right: 4px; top: 0; width: 24px; height: 24px; border: 0; background: url('/images/map/filters/ico_my_filter_help.svg') no-repeat center center / 100%; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .form-group { padding: 0; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary.active { border-color: #1549ad; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary.active .value { border: 2px solid #17356e; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary.active .value span:first-child { color: #17356e; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .value { display: flex; position: relative; z-index: 2; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; border: 2px solid #b2b2b2; border-radius: 100%; background: #fff; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .value span { display: block; width: 100%; color: #222; font-weight: normal; font-size:12px; line-height: 16px; letter-spacing: -1px; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .value span + span { font-size: 10px; line-height: 14px; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .value.icoPin:after { content:''; display: none; position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; background: url('/images/map/filters/ico_pin_off.svg') no-repeat center center / 100%; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .value.icoPin.modePin:after { display: block; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .value.icoPin.modeDelete:after { display: none; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary.active .value.icoPin:after { display: block; background-image: url('/images/map/filters/ico_pin_on.svg'); } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary.active .value.icoPin.modeDelete:after { display: none; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .icoDeleteFilter { display: none; position: absolute; right: -2px; top: -2px; z-index: 2; } [class*="filters-body"] .filters.typeMy .form-group .btn-secondary .icoDeleteFilter.modeDelete { display: block; } [class*="filters-body"] .filters.typeMy .btnMyfilter { position: relative; width: 150px; min-height: 88px; margin: 0 0 6px; padding: 4px; border-radius: 8px; background: #ffef75; color: #222; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeMy .btnMyfilter.disabled { background: #f8f8f8; opacity: .5; pointer-events: none; } [class*="filters-body"] .filters.typeMy .btnMyfilter .tips { position: relative; } [class*="filters-body"] .filters.typeMy .btnMyfilter .tips li { position: relative; margin: 0 0 0 14px; list-style: decimal; } [class*="filters-body"] .filters.typeMy .btnMyfilter .titleWrap { padding: 0 4px 6px; } [class*="filters-body"] .filters.typeMy .btnMyfilter .titleWrap .title { display: block; overflow: hidden; position: relative; width: calc(100% - 24px); height: 20px; color: #222; font-size: 14px; line-height: 20px; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; } [class*="filters-body"] .filters.typeMy .btnMyfilter .titleWrap .title.icoAddedSpecial { position: relative; top: 2px; } [class*="filters-body"] .filters.typeMy .btnMyfilter .options { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; position: relative; width: 136px; margin: 0 0 6px; padding: 0 4px; max-height: calc(16px * 3); font-size: 12px; line-height: 16px; -webkit-line-clamp: 3; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial { background: #ffcc00; border: 2px solid #ffcc00; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial .titleWrap { padding: 7px 4px; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial .titleWrap .icoSpecial { position: absolute; right: 8px; top: 8px; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial p { padding: 0 4px 8px; color: inherit; font-size: inherit; line-height: inherit; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial.modeSpecial { border: 2px dashed #ffcc00; background: transparent; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial.modeSpecial .titleWrap { padding: 7px 4px 10px; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial.modeSpecial .titleWrap .title { display: none; } [class*="filters-body"] .filters.typeMy .btnMyfilter.typeSpecial.modeSpecial.disabled .titleWrap .icoSpecial { filter: grayscale(1); -webkit-filter: grayscale(1); } [class*="filters-body"] .filters.typeMy .btnOftenfilter { position: relative; width: 150px; min-height: 88px; margin: 0 0 6px; padding: 4px; border:1px solid #ffef75; border-radius: 8px; color: #222; font-size: 12px; line-height:16px; } [class*="filters-body"] .filters.typeMy .btnOftenfilter.disabled { border-color: #ddd; opacity: .5; pointer-events: none; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .tips > strong { display: block; color: #676767; font-weight: normal; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .tips > strong:first-child { padding: 7px 0 0; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .tips > strong:last-child { padding: 0 0 7px; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .tips ol { position: relative; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .tips ol li { margin: 0 0 0 14px; list-style: decimal; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .titleWrap { padding: 0 4px 6px; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .titleWrap .title { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; color: #222; font-weight: bold; font-size: 14px; line-height: 20px; } [class*="filters-body"] .filters.typeMy .btnOftenfilter .options { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; position: relative; width: 136px; margin: 0 0 6px; padding: 0 4px; max-height: calc(16px * 3); font-size: 12px; line-height: 16px; -webkit-line-clamp: 3; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter { position: relative; width: 150px; min-height: 88px; margin: 0 0 6px; padding: 6px 4px; border-radius: 8px; background: #f8f8f8; color: #222; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter.disabled { background: #f8f8f8; opacity: .5; pointer-events: none; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .tips > strong { display: block; color: #676767; font-weight: normal; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .tips ol { position: relative; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .tips li { position: relative; margin: 0 0 0 14px; list-style: decimal; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .titleWrap { padding: 0 4px 6px; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .titleWrap .title { color: #222; font-weight: bold; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .titleWrap .title .date { margin: 0 4px 0 0; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .titleWrap .title .time { font-weight: normal; font-size: 10px; line-height: 14px; vertical-align: bottom; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .options { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; position: relative; margin: 0 0 6px; padding: 0 28px 0 4px; max-height: calc(16px * 3); font-size: 12px; line-height: 16px; -webkit-line-clamp: 3; } [class*="filters-body"] .filters.typeMy .btnLatelyfilter .options:after { content: attr(data-used-count); display: block; position: absolute; right: 0; bottom: 0; padding: 0 0 0 16px; background: url('/images/map/filters/ico_eyes.svg') no-repeat left center / 14px 8px; color: #676767; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeMy .icoMy { display: inline-block; position: relative; padding: 0 0 0 24px; font-weight: normal; } [class*="filters-body"] .filters.typeMy .icoMy.typeSelected { padding: 0 0 0 24px; } [class*="filters-body"] .filters.typeMy .icoMy.typePoint { padding: 0; background: none; } [class*="filters-body"] .filters.typeMy .icoMy.typePoint:after { content: ''; display: block; position: absolute; left: 0; z-index: 1; bottom: 3px; width: 100%; border: 3px solid #ffcc00; } [class*="filters-body"] .filters.typeMy .icoMy.typePoint .txt { display: inline-block; position: relative; z-index: 2; padding: 0 0 0 20px; background: url('/images/map/filters/ico_my_filter_off.svg') no-repeat -4px center / 24px; } [class*="filters-body"] .filters.typeMy .icoUnder { display: inline-block; position: relative; font-weight: normal; } [class*="filters-body"] .filters.typeMy .icoUnder .txt { position: relative; z-index: 2; } [class*="filters-body"] .filters.typeMy .icoUnder:after { content: ''; display: block; position: absolute; left: 0; z-index: 1; bottom: 3px; width: 100%; border: 3px solid #ffcc00; } [class*="filters-body"] .filters.typeMy .icoUnder.typeColor1:after { border-color: #ffe928; } [class*="filters-body"] .filters.typeMy .icoUnder.typeColor2:after { border-color: #ddd; } [class*="filters-body"] .filters.typeMy .icoUnder.typeColor3:after { bottom: 4px; border-width: 3px; border-color: #fca700; } [class*="filters-body"] .filters.typeMy .icoAddMy { display: inline-block; position: absolute; right: 0; top: 1px; width: 100%; width: 24px; height: 24px; background: url('/images/map/filters/ico_my_filter_off.svg') no-repeat center center / 24px; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .icoAddMy.modeDelete { display: none; } [class*="filters-body"] .filters.typeMy .icoEdit { display: block; position: absolute; right: 6px; top: 6px; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .icoEdit.modeSpecial, [class*="filters-body"] .filters.typeMy .icoEdit.modeDelete { display: none; } [class*="filters-body"] .filters.typeMy .icoDeleteFilter { display: none; position: absolute; right: 6px; top: 6px; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .icoDeleteFilter.modeDelete { display: block; } [class*="filters-body"] .filters.typeMy .icoAddSpecial { display: none; position: absolute; right: 6px; top: 6px; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .icoAddSpecial.modeSpecial { display: block; } /* 방문지역 / 고정지역 / 최근방문 지역 필터 */ [class*="filters-body"] .filters.typeMy .content.typeArea { padding: 12px 0; } [class*="filters-body"] .filters.typeMy .content.typeArea .head { padding: 0 8px; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group div[role="group"] { display: flex; flex-wrap: nowrap; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group div[role="group"] > .btn-group-toggle:first-child .btn-secondary { margin: 8px 4px 8px 4px; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group div[role="group"] > .btn-group-toggle:first-child .btn-secondary:nth-of-type(1):before { display: none; left: -12px; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group .btn-secondary { position: relative; min-width: auto; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 100% !important; background: #fff; white-space: wrap; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group .btn-secondary:before { content:''; display: block; position: absolute; left: -4px; top: 50%; width: 100%; height: 20px; background: #ddd; transform: translateY(-50%); transition: all .15s ease-in-out; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group .btn-secondary:after { content:''; display: block; position: absolute; right: -4px; top: 50%; width: 100%; height: 20px; background: #ddd; transform: translateY(-50%); transition: all .15s ease-in-out; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group .btn-secondary.active:before { background: #17356e; } [class*="filters-body"] .filters.typeMy .content.typeArea .form-group .btn-secondary.active:after { background: #17356e; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter { position: absolute; min-width: auto; width: 50px; height: 50px; margin: 0 0 0 8px; padding: 0; border: 0;} [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter span { display: block; position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 100%; border: 2px dashed #17356e; border-radius: 100% !important; background: #fff url('/images/map/filters/ico_plus.svg') no-repeat center center / 24px; color: transparent; font-size: 0; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer:after { content: ''; display: block; position: absolute; right: -4px; top: 16px; z-index: 1; height: calc(100% - 32px); box-shadow: 0 0 12px 12px rgba(255, 255, 255, .9); } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer > div { margin: 0 0 0 25px; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer .form-group { width: 100%; padding: 0 0 0 33px; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer .form-group > div[role="group"] > .btn-group-toggle:first-child .btn-secondary { margin: 8px 4px 8px 8px; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer .form-group > div[role="group"] > .btn-group-toggle:first-child .btn-secondary:nth-of-type(1):before { display: block; left: -12px; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer .form-group .btn-secondary.active.focus strong { background: #1549ad; color: #fff; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer .form-group .btn-secondary.active.focus strong span { color: inherit; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer .form-group .selected .btn-secondary.active strong { background: #1549ad; color: #fff; } [class*="filters-body"] .filters.typeMy .content.typeArea .btn-add-myfilter + .scrollbar-outer .form-group .selected .btn-secondary.active strong span { color: inherit; } /* 마이필터 : 마이필터 */ [class*="filters-body"] .filters.typeMy .content.typeMy { } /* 마이필터 : 자주 사용 필터 */ [class*="filters-body"] .filters.typeMy .content.typeOften { padding: 0 0 8px; } /* 마이필터 : 최근 사용 필터 */ [class*="filters-body"] .filters.typeMy .content.typeLately { } /* 필터타입 : 매물 */ [class*="filters-body"] .filters.typeProd .form-group { } /* 필터타입 : 매매 */ [class*="filters-body"] .filters.typeSale .form-group { } /* 필터타입 : 가격 */ [class*="filters-body"] .filters.typePrice .form-group { padding: 0 2px; } [class*="filters-body"] .filters.typePrice .form-group .btn-secondary { padding: 0; } [class*="filters-body"] .filters.typePrice .form-group .btn-secondary span { display: block; width: 100%; } [class*="filters-body"] .filters.typePrice .form-group .btn-secondary:first-child { max-width: 47px; width: calc((100% / 5) - 2.5rem); margin: 8px auto; } [class*="filters-body"] .filters.typePrice .form-group .btn-secondary:not(:first-child) { min-width: calc(100% / 5); border: 0; margin: 8px 0; font-size: 14px; line-height: 20px; } [class*="filters-body"] .filters.typePrice .form-group .btn-secondary.active-start { border-radius: 10px 0 0 10px !important; } [class*="filters-body"] .filters.typePrice .form-group .btn-secondary.active-start ~ .btn-secondary.active { border-radius: 0 !important; } [class*="filters-body"] .filters.typePrice .form-group .btn-secondary.active-start ~ .btn-secondary.active-end { border-radius: 0 10px 10px 0 !important; } [class*="filters-body"] .filters.typePrice .form-group + .input-group-wrap { border-top: 1px solid #ddd; padding: 18px 0; } [class*="filters-body"] .filters.typePrice .form-group + .form-group-notice { border-top: 1px solid #ddd; padding: 8px 16px; } [class*="filters-body"] .filters.typePrice .input-group-wrap { display: flex; flex-wrap: wrap; justify-content: space-around; position: relative; padding: 0 0 18px; } [class*="filters-body"] .filters.typePrice .input-group-wrap:after { content: '~'; display: block; position: absolute; left: 0; top: calc(50% - 20px); right: 0; width: 8px; height: 8px; margin: 0 auto; color: #222; font-size: 14px; } [class*="filters-body"] .filters.typePrice .input-group { width: 100%; max-width: calc(50% - 20px); } [class*="filters-body"] .filters.typePrice .input-group .input-group-prepend { padding: 4px 6px; border: 1px solid #b2b2b2; border-radius: 8px 0 0 8px; } [class*="filters-body"] .filters.typePrice .input-group .input-group-prepend .btn { display: inline-block; width: 24px; height: 24px; color: #222; font-size: 28px; } [class*="filters-body"] .filters.typePrice .input-group .form-control { height: 36px; padding: 6px 0; border: 1px solid #b2b2b2; font-size:14px; line-height:24px; text-align: center; } [class*="filters-body"] .filters.typePrice .input-group .input-group-append { padding: 4px 6px; border: 1px solid #b2b2b2; border-radius: 0 8px 8px 0; } [class*="filters-body"] .filters.typePrice .input-group .input-group-append .btn { display: inline-block; width: 24px; height: 24px; color: #222; font-size: 28px; } [class*="filters-body"] .filters.typePrice .input-group-info { display: flex; justify-content: space-around; position: absolute; left: 0; bottom: 0; width: 100%; height: 18px; } [class*="filters-body"] .filters.typePrice .input-group-info [class*="info"] { display: block; width: 100%; max-width: calc(50% - 20px); padding: 0 38px 0 0; color: #517ad6; font-size:12px; text-align: right; } /* 필터타입 : 면적 */ [class*="filters-body"] .filters.typeArea .form-group { padding: 0 8px 8px; } [class*="filters-body"] .filters.typeArea .form-group .btn-secondary { min-width: calc(100% / 4); max-width: calc(100% / 4); padding: 0 4px; border: 0; font-size: 13px; line-height: 20px; margin: 8px 0; letter-spacing: -1px; } [class*="filters-body"] .filters.typeArea .form-group .btn-secondary:first-child { min-width: calc((100% / 4) - 2.5rem); margin: 8px auto; } [class*="filters-body"] .filters.typeArea .form-group .btn-secondary span:after { content: attr(data-unit); font-size: 10px; } [class*="filters-body"] .filters.typeArea .form-group .btn-secondary.active-start { border-radius: 10px 0 0 10px !important; } [class*="filters-body"] .filters.typeArea .form-group .btn-secondary.active-start ~ .btn-secondary.active { border-radius: 0 !important; } [class*="filters-body"] .filters.typeArea .form-group .btn-secondary.active-start ~ .btn-secondary.active-end { border-radius: 0 10px 10px 0 !important; } /* 필터타입 : 점포수 */ [class*="filters-body"] .filters.typeStore .form-group { padding: 0 8px 8px; } [class*="filters-body"] .filters.typeStore .form-group .btn-secondary { min-width: calc(100% / 4); max-width: calc(100% / 4); border: 0; font-size: 14px; line-height: 20px; margin: 8px 0; } [class*="filters-body"] .filters.typeStore .form-group .btn-secondary.active-start { border-radius: 10px 0 0 10px !important; } [class*="filters-body"] .filters.typeStore .form-group .btn-secondary.active-start ~ .btn-secondary.active { border-radius: 0 !important; } [class*="filters-body"] .filters.typeStore .form-group .btn-secondary.active-start ~ .btn-secondary.active-end { border-radius: 0 10px 10px 0 !important; } /* 필터타입 : 준공년도 */ [class*="filters-body"] .filters.typeCompYear .form-group { padding: 0 8px 8px; } [class*="filters-body"] .filters.typeCompYear .form-group .btn-secondary { min-width: calc((100% / 4) - 2.25rem); margin: 8px 1.125rem; padding: 0; border: 0; font-size: 12px; line-height: 16px; } [class*="filters-body"] .filters.typeCompYear .form-group .btn-secondary span { display: block; width: 100%; } /* 필터타입 : 구조 */ [class*="filters-body"] .filters.typeStruct .form-group { } /* 필터 레인지 [내부 버튼] */ [class*="filters-body"] .filters-range { position: relative; padding: 0 16px; } [class*="filters-body"] .filters-range .btn-secondary { min-width: 47px; height: 32px; margin: 8px 4px; padding: 0 8px; border: solid 1px #b2b2b2; border-radius: 8px !important; background-color: #fff; color: #222; font-size: 14px; line-height: 20px; } [class*="filters-body"] .filters-range .btn-secondary.active, [class*="filters-body"] .filters-range .btn-secondary:active { border-color: #ddd; background: #ddd; color: #222 !important; box-shadow: none; } [class*="filters-body"] .filters-range .btn-secondary:focus { box-shadow: none !important; } [class*="filters-body"] .filters-range .btn-secondary.disabled { border-color: #ddd; color: #ddd !important; } /* 필터 레인지 [헤드] */ [class*="filters-body"] .filters-range .range-head { display: flex; align-items: center; } [class*="filters-body"] .filters-range .range-head .btn-secondary { margin-right: auto; } [class*="filters-body"] .filters-range .range-head .btn-icoMarker { width: 24px; height: 24px; margin: 12px 0 0 auto; } [class*="filters-body"] .filters-range .range-head .btn-icoMarker span { width: inherit; height: inherit; } /* 필터 레인지 [바디] */ [class*="filters-body"] .filters-range .range-body .range { margin: 8px 0 0; } [class*="filters-body"] .filters-range .range-body .range-value { position: absolute; right: 50px; top: 12px; font-size: 16px; line-height: 24px; color: #ffcc00; font-weight: 600; } [class*="filters-body"] .filters-range .range-body .range .slider-tooltip { display: none !important; } [class*="filters-body"] .filters-range .slider-piecewise { border-radius: 8px; } [class*="filters-body"] .filters-range .slider-dot { } [class*="filters-body"] .filters-range .slider-process { } /* 필터 레인지 [푸터] */ [class*="filters-body"] .filters-range .range-foot { position: relative; padding: 12px 8px; } [class*="filters-body"] .filters-range .range-foot .legend { flex-direction: initial; width: 100%; } [class*="filters-body"] .filters-range .range-foot .legend span { display: inline-block; font-size: 10px; line-height: 14px; } /* 필터 하단 컨트롤 */ [class*="filters-foot"] { display: none; position: relative; padding: 6px 12px; border-radius: 0 0 10px 10px; background: #f7f7f7; } [class*="filters-foot"] .btn { transition: none; } [class*="filters-foot"] .btn-delete-filter { margin-left: auto; color: #222; font-size: 14px; line-height: 20px; } [class*="filters-foot"] .btn-delete-complete-filter { position: absolute; left: 0; top: -39px; right: 0; width: 70px; margin: 0 auto; padding: 2px 8px; border-radius: 16px; box-shadow:0 4px 16px 0 rgba(0, 0, 0, .2); background: #17356e; color: #fff; font-size: 14px; line-height: 20px; } [class*="filters-foot"] .btn-delete-all-filters { margin-left: auto; color: #222; font-size: 14px; line-height: 20px; } [class*="filters-foot"] .btn-save-myfilter { margin-right: auto; color: #222; font-size: 14px; line-height: 20px; } [class*="filters-foot"] .btn-clear-all-filters { margin-left: auto; color: #222; font-size: 14px; line-height: 20px; } [class*="filters-foot"] .btn-close-filters { display: block; position: absolute; left: 0; top: 0; right: 0; margin: 0 auto; min-width: auto; width: 40px; min-height: auto; height: 36px; color: transparent; font-size: 0; line-height: 0; } [class*="filters-foot"] .btn-close-filters:after { content: ''; display: block; position: absolute; left: 0; top: 5px; right: 0; margin: 0 auto;width:24px; height:24px; background:url('../../images/filter-close.svg') no-repeat 0 0/24px } [class*="filters-foot"] .btn-wrap { overflow: hidden; width: calc(100% + 24px); margin: -6px -12px; border-radius: 0 0 8px 8px; } [class*="filters-foot"] .btn-wrap .btn { width: 50%; border-radius: 0; color: #fff; font-size: 16px; line-height: 40px; } [class*="filters-foot"] .btn-wrap .btn-cancel { background-color:#b2b2b2; } [class*="filters-foot"] .btn-wrap .btn-save { background-color:#17356e; } /* 마이필터 수정 / 레이어 팝업 */ .dimmed { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .35); } .dimmed.typeFilters { z-index: 4; } .dimmed.typeLayer { z-index: 10; } /* 따로필터 : 모드 */ .modePin [class*="filters-body"] .filters.typeMy .content.typeMy, .modePin [class*="filters-body"] .filters.typeMy .content.typeOften, .modePin [class*="filters-body"] .filters.typeMy .content.typeLately { opacity: .5; } .modeSpecial [class*="filters-body"] .filters.typeMy .content.typeArea, .modeSpecial [class*="filters-body"] .filters.typeMy .content.typeOften, .modeSpecial [class*="filters-body"] .filters.typeMy .content.typeLately { opacity: .5; } /* 지도 - 도구 모음 */ .tools-user { width: 40px; height: 40px; padding: 4px; cursor: pointer; } .tools-user .user-icon { display: block; position: relative; width: 100%; height: 100%; border-radius: 100%; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2), 0 1px 3px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 2px 0 0 rgba(0, 0, 0, .1); background: url('/images/default-user-icon.svg') no-repeat center center / 100%; } .tools-user .user-icon img { width: 100%; max-width: 100%; height: 100%; } .tools-user .user-icon .badge { overflow: hidden; display: block; position: absolute; right: -8px; bottom: 0; width: 16px; height: 16px; padding: 0; background: #fff; border-radius: 100%; } .tools-user .user-icon .badge img { width: 100%; max-width: 100%; height: 100%; } .tools-group { display: flex; flex-direction: column; } .tools-group .btn { position: relative; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; background-size: 100%; color: transparent; font-size: 0; } .tools-group .btn.disabled, .tools-group .btn:disabled { background-color: transparent; border: 0; border-radius: 0; } .tools-group .btn.btn-tools-trigger { display: none; position: absolute; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .6); background: #fff; } .tools-group .btn.btn-tools-trigger:before { content: ''; display: block; position: absolute; top: calc(50% - 3px); border-left: 8px solid transparent; border-bottom: 8px solid #222; border-right: 8px solid transparent; border-radius: 2px; transition: transform .3s ease; } .tools-group .btn.btn-tools-trigger.typeService { left: 0; ; border-radius: 0 10px 10px 0; } .tools-group .btn.btn-tools-trigger.typeService:before { left: calc(50% - 9px); transform: rotate(90deg); } .tools-group .btn.btn-tools-trigger.typeService.active:before { transform: rotate(-90deg); } .tools-group .btn.btn-tools-trigger.typeMaps { right: 0; border-radius: 10px 0 0 10px; } .tools-group .btn.btn-tools-trigger.typeMaps:before { right: calc(50% - 9px); transform: rotate(-90deg); } .tools-group .btn.btn-tools-trigger.typeMaps.active:before { transform: rotate(90deg); } /* 도구 [좌측] 영역 */ .tools-group.typeService { flex-wrap: wrap; } .tools-group .btn-sale-with-ico { background-image: url('/images/map/filters/ico_with_sale_off.svg'); } .tools-group .btn-sale-with-ico.active { background-image: url('/images/map/filters/ico_with_sale_on.svg'); } .tools-group .btn-sale-with-ico.disabled, .tools-group .btn-sale-with-ico:disabled { background-image: url('/images/map/filters/ico_with_sale_disabled.svg'); } .tools-group .btn-comp-with-ico { background-image: url('/images/map/filters/ico_with_comp_off.svg'); } .tools-group .btn-comp-with-ico.active { background-image: url('/images/map/filters/ico_with_comp_on.svg'); } .tools-group .btn-comp-with-ico.active-villa { background-image: url('/images/map/filters/ico_with_comp_on_with_villa.svg'); } .tools-group .btn-comp-with-ico.disabled, .tools-group .btn-comp-with-ico:disabled { background-image: url('/images/map/filters/ico_with_comp_disabled.svg'); } .tools-group .btn-par-with-ico { background-image: url('/images/map/filters/ico_with_par_on.svg'); } .tools-group .btn-par-with-ico.active { background-image: url('/images/map/filters/ico_with_par_on.svg'); } .tools-group .btn-par-with-ico.disabled, .tools-group .btn-par-with-ico:disabled { background-image: url('/images/map/filters/ico_with_par_disabled.svg'); } .tools-group .btn-int-with-ico { background-image: url('/images/map/filters/ico_with_int_off.svg'); } .tools-group .btn-int-with-ico.active { background-image: url('/images/map/filters/ico_with_int_on.svg'); } .tools-group .btn-int-with-ico.disabled, .tools-group .btn-int-with-ico:disabled { background-image: url('/images/map/filters/ico_with_int_disabled.svg'); } .tools-group .btn-cert-with-ico { background-image: url('/images/map/filters/ico_with_cert_off.svg'); } .tools-group .btn-cert-with-ico.active { background-image: url('/images/map/filters/ico_with_cert_on.svg'); } .tools-group .btn-zoom-with-ico.level1 { background-image: url('/images/map/filters/ico_with_zoom_level1.svg'); } .tools-group .btn-zoom-with-ico.level2 { background-image: url('/images/map/filters/ico_with_zoom_level2.svg'); } .tools-group .btn-zoom-with-ico.level3 { background-image: url('/images/map/filters/ico_with_zoom_level3.svg'); } .tools-group .btn-zone-with-ico { background-image: url('/images/map/filters/ico_zone.svg'); } .tools-group .btn-zone-with-ico.disabled, .tools-group .btn-zone-with-ico:disabled { background-image: url('/images/map/filters/ico_zone_disabled.svg');} .tools-group .btn-zone-with-ico.typeSchool { background-image: url('/images/map/filters/ico_zone_school.svg'); } .tools-group .btn-zone-with-ico.typeSubway { background-image: url('/images/map/filters/ico_zone_subway.svg'); } .tools-group .btn-zone-with-ico.typeHospital { background-image: url('/images/map/filters/ico_zone_hospital.svg'); } .tools-group .btn-zone-with-ico.typeAcademy { background-image: url('/images/map/filters/ico_zone_academy.svg'); } .tools-group .btn-zone-with-ico.typeStarbucks { background-image: url('/images/map/filters/ico_zone_starbucks.svg'); } .tools-group .btn-naverMaps-with-ico { background-image: url('/images/map/filters/ico_zone_navermaps.png'); } .tools-group .btn-tools-with-ico { background-image: url('/images/map/filters/ico_zone_tools.png'); } .tools-group .btn-lab-with-ico{background-image: url('/images/map/filters/map_btn_kb_lab.svg');} /* 도구 [우측] 영역 */ .tools-group.typeMaps { flex-wrap: wrap; } .tools-group .btn-tool-with-ico { background-image: url('/images/map/filters/ico_with_tool_off.svg'); } .tools-group .btn-tool-with-ico.active { background-image: url('/images/map/filters/ico_with_tool_on.svg'); } .tools-group .btn-spec-with-ico.active { background-image: url('/images/map/filters/ico_with_spec_on.svg'); } .tools-group .btn-spec-with-ico.typeWarn { background-image: url('/images/map/filters/ico_with_spec_warn_off.svg'); } .tools-group .btn-spec-with-ico.typeWarn.active { background-image: url('/images/map/filters/ico_with_spec_warn_on.svg'); } .tools-group .btn-spec-with-ico.typeWarn.active-layer { background-image: url('/images/map/filters/ico_with_spec_warn_on_layer.svg') !important; } .tools-group .btn-spec-with-ico.typeWarn.enter { background-image: url('/images/map/filters/ico_with_spec_warn_enter.svg'); } .tools-group .btn-spec-with-ico.typeOver { background-image: url('/images/map/filters/ico_with_spec_over_off.svg'); } .tools-group .btn-spec-with-ico.typeOver.active { background-image: url('/images/map/filters/ico_with_spec_over_on.svg'); } .tools-group .btn-spec-with-ico.typeOver.active-layer { background-image: url('/images/map/filters/ico_with_spec_over_on_layer.svg') !important; } .tools-group .btn-spec-with-ico.typeOver.enter { background-image: url('/images/map/filters/ico_with_spec_over_enter.svg'); } .tools-group .btn-spec-with-ico.typeCare { background-image: url('/images/map/filters/ico_with_spec_care_off.svg'); } .tools-group .btn-spec-with-ico.typeCare.active { background-image: url('/images/map/filters/ico_with_spec_care_on.svg'); } .tools-group .btn-spec-with-ico.typeCare.active-layer { background-image: url('/images/map/filters/ico_with_spec_care_on_layer.svg') !important; } .tools-group .btn-spec-with-ico.typeCare.enter { background-image: url('/images/map/filters/ico_with_spec_care_enter.svg'); } .tools-group .btn-share-with-ico { background-image: url('/images/map/filters/ico_with_share_off.svg'); } .tools-group .btn-share-with-ico.active { background-image: url('/images/map/filters/ico_with_share_on.svg'); } .tools-group .btn-youtube-with-ico { height: 28px; background-image: url('/images/map/filters/ico_with_youtube_off.svg'); } .tools-group .btn-youtube-with-ico:hover, .tools-group .btn-youtube-with-ico.active { background-image: url('/images/map/filters/ico_with_youtube_on.svg'); } /* 도구 [우측 - 하단] 영역 */ .tools-group.typeZoom { width: 32px; height: 64px; align-items: center; justify-content: center; margin: 0 4px; border-radius: 5px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .6); background: rgba(255, 255, 255, .9); } .tools-group.typeZoom .btn-zoom-up-with-ico { width: 32px; height: 32px; background-image: url('/images/map/filters/ico_with_zoom_up.svg'); background-size: 24px; } .tools-group.typeZoom .btn-zoom-down-with-ico { width: 32px; height: 32px; background-image: url('/images/map/filters/ico_with_zoom_down.svg'); background-size: 24px; } .tools-group.typeLoc { width: 40px; height: 40px; } .tools-group.typeLoc .btn-loc-with-ico { width: 40px; height: 40px; background-image: url('/images/map/filters/ico_with_loc.svg'); } .tools-group.typeLoc .btn-loc-with-ico.active { width: 40px; height: 40px; background-image: url('/images/map/filters/ico_with_loc_on.svg'); } /* 유튜브 공유하기 커스텀 툴팁 */ .tools-int.tooltip.b-tooltip { opacity: 1; } .tools-int.tooltip.b-tooltip .arrow { margin: 0; } .tools-int.tooltip.b-tooltip[x-placement^="right"] .arrow::before { border-width: .25rem .4rem .25rem 0; border-right-color: rgba(54, 54, 54, .9); } .tools-int.tooltip.b-tooltip[x-placement^="left"] .arrow:before { border-width: .25rem 0 .25rem .4rem; border-left-color: rgba(54, 54, 54, .9); } .tools-int.tooltip.b-tooltip .tooltip-inner { min-width: auto; padding: 8px; background-color: rgb(54, 54, 54, .9); border-radius: 5px; font-size: 12px; line-height: 16px; text-align: left; } .tools-int.tooltip.b-tooltip .tooltip-inner .icoPin { display: inline-block; color: transparent; font-size: 0; vertical-align: baseline; } .tools-youtube.tooltip.b-tooltip { opacity: 1; } .tools-youtube.tooltip.b-tooltip .arrow { margin: 0; } .tools-youtube.tooltip.b-tooltip .arrow:before { border-width: .25rem 0 .25rem .4rem; border-left-color: rgba(54, 54, 54, .9); } .tools-youtube.tooltip.b-tooltip .tooltip-inner { min-width: auto; padding: 8px; background-color: rgb(54, 54, 54, .9); border-radius: 5px; font-size: 12px; line-height: 16px; text-align: left; } .tools-youtube.tooltip.b-tooltip .tooltip-inner .icoPin { display: inline-block; color: transparent; font-size: 0; vertical-align: baseline; } /* 반응형 사이즈 확인용 */ .logBox { position: fixed; z-index: 9999; width: 120px; height: 40px; border: 1px solid #000; background: #fff; color: #000; border-radius: 10px; text-align: center; line-height: 40px; } .logBox { left: 12px; bottom: 12px; } /* 반응형 필터 */ /* Desktop */ @media all and (min-width: 1016px) { /* 필터 : 전체 필터 */ .all-filters-wrap { max-width: 360px; } /* 필터 : 따로필터 [ 헤드 ] */ .filters-wrap > .scrollbar-outer { max-width: 336px; } .filters-head .filters-group-outer { flex-wrap: wrap; } .filters-head .filters-group { flex-wrap: wrap; } .filters-body, .filters-foot { max-width: 336px; } } /* Mobile~ */ @media all and (max-width: 1015px) { /* 필터 : 따로필터 [ 헤드 ] */ .filters-head .filters-group-outer { flex-wrap: nowrap; } .filters-head .filters-group { flex-wrap: nowrap; } /* 전체 필터 위치 조절 */ .all-filters.tooltip.b-tooltip { transform: translate3d(28px, 104px, 0px) !important; } } /* Temp mixin @mixin breakpoint($point) { @if $point == 'wDesktop' { @media (min-width: 1016px) { @content; } } @else if $point == 'wMobile' { @media (max-width: 1015px) { @content; } } @else if $point == 'min581Wmin751H' { @media (min-width: 581px) and (min-height: 751px) { @content; } } @else if $point == 'min581Wmax750H' { @media (min-width: 581px) and (max-height: 750px) { @content; } } @else if $point == 'min581Wmax694H' { @media (min-width: 581px) and (max-height: 694px) { @content; } } @else if $point == 'min581Wmax550H' { @media (min-width: 581px) and (max-height: 550px) { @content; } } @else if $point == 'min581Wmax388H' { @media (min-width: 581px) and (max-height: 388px) { @content; } } @else if $point == 'max580Wmin484H' { @media (max-width: 580px) and (min-height: 484px) { @content; } } @else if $point == 'max580Wmax483H' { @media (max-width: 580px) and (max-height: 483px) { @content; } } @else if $point == 'max580Wmax423H' { @media (max-width: 580px) and (max-height: 423px) { @content; } } @else if $point == 'max580Wmax382H' { @media (max-width: 580px) and (max-height: 382px) { @content; } } } */ @media (min-width: 581px) and (min-height: 752px) { .tools-user { right: 12px; top: 12px; } .tools-group.typeService { top: 69px; right: 12px; } .tools-group.typeMaps { top: 369px; right: 12px; } .tools-group.typeZoom { bottom: 149px; right: 12px; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (min-width: 581px) and (max-height: 751px) { .tools-user { display: none; } .tools-group.typeService { left: auto; top: 12px; right: 12px; } .tools-group.typeMaps { top: 310px; right: 12px; } .tools-group.typeZoom { bottom: 149px; right: 12px; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (min-width: 581px) and (max-height: 694px) { .tools-group.typeService { left: auto; top: 12px; right: 54px; } .tools-group.typeMaps { top: 12px; right: 12px; } .tools-group.typeZoom { bottom: 149px; right: 12px; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (min-width: 581px) and (max-height: 550px) { .tools-group.typeService { flex-wrap: wrap-reverse; left: auto; top: 12px; right: 54px; max-height: 160px; } .tools-group.typeMaps { top: 12px; right: 12px; } .tools-group.typeZoom { bottom: 149px; right: 12px; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (min-width: 581px) and (max-height: 388px) { .tools-group.typeService { flex-wrap: wrap-reverse; left: auto; top: 12px; right: 54px; max-height: 160px; } .tools-group.typeMaps { top: 12px; right: 12px; } .tools-group.typeZoom { display: none;} .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (max-width: 580px) and (min-height: 484px) { .tools-user { display: none; } .tools-group.typeService { flex-wrap: nowrap; left: 12px; top: 106px; right: auto; max-height: 100%; } .tools-group.typeMaps { top: 106px; right: 12px; } .tools-group.typeZoom { bottom: 149px; right: 12px; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (max-width: 580px) and (max-height: 483px) { .tools-user { display: none; } .tools-group.typeService { flex-wrap: nowrap; left: 12px; top: 106px; right: auto; max-height: 100%; } .tools-group.typeMaps { top: 106px; right: 12px; } .tools-group.typeZoom { display: none; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (max-width: 580px) and (max-height: 423px) { .tools-user { display: none; } .tools-group.typeService { flex-wrap: wrap; left: 12px; top: 106px; right: auto; max-height: 160px; } .tools-group.typeMaps { top: 106px; right: 12px; } .tools-group.typeZoom { display: none; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } } @media (max-width: 580px) and (max-height: 382px) { .tools-group.typeService { flex-direction: row; flex-wrap: nowrap; align-items: center; left: 12px; top: 106px; right: auto; min-width: 40px; min-height: 40px; max-height: 160px; padding: 0 0 0 32px; } .tools-group.typeService .btn:not(.btn-tools-trigger) { display: none; } .tools-group.typeService.active .btn:not(.btn-tools-trigger) { display: block; } .tools-group.typeMaps { flex-direction: row; flex-wrap: nowrap; align-items: center; top: 106px; right: 12px; min-height: 40px; padding: 0 32px 0 0; } .tools-group.typeMaps .btn:not(.btn-tools-trigger) { display: none; } .tools-group.typeMaps.active .btn:not(.btn-tools-trigger) { display: block; } .tools-group.typeZoom { display: none; } .tools-group.typeLoc { bottom: 85px; right: 12px; } .tools-group.typeSelector { bottom: 0; right: 12px; } .tools-group.typeSelector .btnSelector.typeComp { margin: 0 0 58px; } .tools-group.typeSelector .btnSelector.typeArea { margin: 0 0 34px; } .tools-group.typeSelector .btnSelector.typeSimple { margin: 0 0 48px; } .tools-group .btn.btn-tools-trigger { display: block; } } /* 지도 버튼 디자인 변경 */ .tools-group.typeMaps.type1{width:40px;min-height:148px;background:url('/images/map/filters/map_btn_right_bg.svg') no-repeat; padding:4px;} .tools-group.type1 .btn{width:32px; height:32px; margin-top:2px;} .tools-group.type1 .btn:nth-of-type(1){margin-top:0px;} .tools-group.type1 .btn-tool-with-ico{background-image:url('/images/map/filters/icon_32_map_setting.svg')} .tools-group.type1 .btn-spec-with-ico.typeWarn{background-image:url('/images/map/filters/icon_32_restriction_1_non.svg')} .tools-group.type1 .btn-spec-with-ico.typeOver{background-image:url('/images/map/filters/icon_32_restriction_2_non.svg')} .tools-group.type1 .btn-spec-with-ico.typeCare{background-image:url('/images/map/filters/icon_32_restriction_3_non.svg')} .tools-group.type1 .btn-share-with-ico{background-image:url('/images/map/filters/icon_32_share.svg')} .tools-group.type1 .btn-spec-with-ico.type3D{background-image:url('/images/map/filters/icon_32_3_d_map.svg')} .tools-group.type1 .btn-spec-with-ico.typeWarn.enter{background-image:url('/images/map/filters/icon_32_restriction_1.svg')} .tools-group.type1 .btn-spec-with-ico.typeWarn.active, .tools-group.type1 .btn-spec-with-ico.typeWarn.active-layer{background-image:url('/images/map/filters/icon_32_restriction_1_selected.svg') !important} .tools-group.type1 .btn-spec-with-ico.typeOver.enter{background-image:url('/images/map/filters/icon_32_restriction_2.svg')} .tools-group.type1 .btn-spec-with-ico.typeOver.active, .tools-group.type1 .btn-spec-with-ico.typeOver.active-layer{background-image:url('/images/map/filters/icon_32_restriction_2_selected.svg') !important} .tools-group.type1 .btn-spec-with-ico.typeCare.enter{background-image:url('/images/map/filters/icon_32_restriction_3.svg')} .tools-group.type1 .btn-spec-with-ico.typeCare.active, .tools-group.type1 .btn-spec-with-ico.typeCare.active-layer{background-image:url('/images/map/filters/icon_32_restriction_3_selected.svg') !important} .tools-group.type1 .btn-share-with-ico.active{background-image:url('/images/map/filters/icon_32_share_selected.svg')} .tools-group.type1 .btn-tool-with-ico.active{background-image:url('/images/map/filters/icon_32_map_setting_selected.svg')} .tools-group.type1 .btn-spec-with-ico.type3D.active{background-image:url('/images/map/filters/icon_32_3_d_map_selected.svg')} .guidemap{background-color:#fff; border-radius: 10px; padding:16px; width:292px;} .guidemaptit{font-size: 12px; text-align: left;} .guidemaptit >span{display:block; margin:10px 0;font-size: 10px; text-align:center} .maptypelist ul li{padding:6px 16px 6px 45px;border-top:solid 1px #f1f1f1; position: relative; font-size:12px;text-align:left;} .maptypelist ul li:nth-of-type(1){border-top:none;} .maptypelist ul li>span{font-size: 10px; color:#676767; display: block;} .maptypelist ul li:before,.maptypelist ul li:after{content:""; display:block;position:absolute ;} .maptypelist ul li:before{ width:40px; height:20px; left:0; top:5px;} .maptypelist ul li:after{width:6px; height:6px; border:solid 1px #222; border-left-width:0;border-bottom-width:0; transform: rotate(45deg); right:10px; top:18px} .maptypelist ul li:nth-of-type(1):before{background:url('/images/logo_3d_5.png') no-repeat} .maptypelist ul li:nth-of-type(2):before{background:url('/images/logo_3d_2.png') no-repeat} .maptypelist ul li:nth-of-type(3):before{background:url('/images/logo_3d_3.png') no-repeat} .maptypelist ul li:nth-of-type(4):before{background:url('/images/logo_3d_4.png') no-repeat} .maptypelist ul li:nth-of-type(5):before{background:url('/images/logo_3d_1.png') no-repeat} .tools-group .type3D{background-image:url('/images/map_btn_btn_3_d_default.svg')} .tools-group .type3D.active{background-image:url('/images/map_btn_btn_3_d_selected.svg')} .layer-popup.typeTool .map-views .btn-map-views{border-bottom:1px solid #ddd; padding-bottom:7px; border-radius:0;background-position: left 2px;} .layer-popup.typeTool .map-views .btn-map-views.icoSpec{background-image:url('/images/map/filters/tool_map_mode_restriction.svg')} .layer-popup.typeTool .map-views .btn-map-views.icoShare{background-image:url('/images/map/filters/tool_map_mode_share.svg'); border-bottom:none; padding-bottom:0}