@charset "utf-8";

/* 필터버튼 */
.filterArea .itemgroup button{margin-bottom:12px}
.filterArea .itemgroup button:nth-last-child(1){margin-right:4px}
.filtersHead .itemgroup{padding-left:2px}
.btn-filtermap{min-width:auto;min-height:auto;height:34px;line-height:32px;margin-right:8px;padding:0 12px;background:#fff;border-radius:32px;font-size:16px;color:#222;box-shadow: 0 4px 8px rgb(0 0 0 / 14%);letter-spacing:-.5px;transition:.2s}
.btn-filtermap:hover{background-color:#eee}
.btn-filtermap:focus, .btn-filtermap:active{box-shadow: 0 4px 8px rgb(0 0 0 / 14%)}
.btn-filtermap.active{background:#fff;color:#4373f4;}
.btn-filtermap.submit{background-color:#4373f4;color:#fff;font-weight:700}
.btn-filtermap.submit:hover{background-color:#515d7d}
.btn-filtermap.submit.active{background-color:#232b42;color:#fff}
.btn-filtermap.icomy{border:1px solid #4373f4;color:#4373f4;font-weight:700}
.btn-filtermap.icomy.active, .btn-filtermap.icomy.submit{background-color:#4373f4;color:#fff}
.btn-filtermap.icomy:hover{background-color:#e0e0e0;color:#4373f4}
.btn-filtermap.open{position:absolute;right:0;top:0;font-size:0;margin:0;z-index:1}
.btn-filtermap.open:after{position:relative;top:3px;content: "";display: inline-block;width: 10px;height: 10px;transform: rotate(135deg);border-width: 2px 2px 0 0;border-style: solid;border-color: #444;}
.btn-filtermap.open.active:after{transform: rotate(-45deg)}
.btn-filtermap.open:focus{box-shadow: 0 2px 8px rgb(0 0 0 / 14%);}

.allfilterPage{padding-bottom:86px}
.allfilterPage .pageHead .btn-close{right:auto;left:16px}
.allfilterWrap{position:relative;width:100%;text-align:left;border-top:1px solid #eee}
.filterArea .toolmaptip{top:46px;right:0}
.filtersHead{position:relative;padding:0 40px 0 12px;text-align:left}
.filtersHead .allFilters{width:34px;position:absolute;right:12px;top:0}
.filtersHead .btn-filtermap{max-width:100%;margin-bottom:12px;text-overflow: ellipsis;white-space:nowrap;overflow:hidden;}
.filtersBody .itemgroup{padding:32px 0;border-bottom:8px solid #f5f5f5;border-top:1px solid #eee}
.filtersBody .itemtitle{padding:0 16px;font-size:18px;font-weight:700}
.filtersBody .btn-group-toggle{display: flex;flex-wrap: wrap;width: 100%;margin-top:16px;padding:0 16px}
.filtersBody .btn-group-toggle .btn-secondary{position:relative;flex:0 0 auto;height:36px;padding:0 8px 0 0;margin-bottom:12px;background:transparent;border:0 !important}
.filtersBody .btn-group-toggle .btn-secondary span{z-index:1;display:flex;width:100%;height:36px;line-height:1.2;border-radius:6px !important;border:1px solid #bbb;background:#fff;align-items:center;justify-content:center;color:#888}
.filtersBody .btn-group-toggle .btn-secondary.active span{border-color:#4373f4;color:#4373f4 !important;font-weight:700}
.filtersBody .btn-group-toggle .btn-secondary input:disabled + span{border-color:#e0e0e0;background:#eee;color:#bbb}
.filtersBody .btn-group-toggle.type1 .btn-secondary{width:100%}
.filtersBody .btn-group-toggle.type2 .btn-secondary{width:calc(100%/2)}

.filtersBody .btn-group-toggle.type3 .btn-secondary{width:calc(100%/3)}
.filtersBody .btn-group-toggle.type3 .btn-secondary:nth-of-type(3n){padding:0}
.filtersBody .btn-group-toggle.type4 .btn-secondary{width:calc(100%/4)}
.filtersBody .btn-group-toggle.type4 .btn-secondary:nth-of-type(4n){padding:0}
.filtersBody .btn-group-toggle.type5 .btn-secondary{width:calc(100%/5)}
.filtersBody .btn-group-toggle.type5 .btn-secondary:nth-of-type(5n){padding:0}
/* .filtersBody .btn-group-toggle.type5 .btn-secondary:nth-of-type(5n) span:after{display:none !important} */
.filtersBody .typeRooms .btn-group-toggle{width:calc(100% - 50px);margin-left:50px}
.filtersBody .typeRooms .form-group + .form-group .btn-group-toggle{margin-top:0}
.filtersBody .typeRooms .btn-group-toggle .btn-secondary{width:calc(100%/5)}
.filtersBody .typeRooms .btn-group-toggle .btn-secondary:nth-of-type(5n){padding:0}
.filtersBody .subtaplist{margin-top:16px;padding:0 16px;white-space: nowrap;width:100%}
.filtersBody .subtaplist .btn-subtapbt{position:relative;font-size:14px;border-radius:0}
.filtersBody .subtaplist .btn-subtapbt.active:after{content:"";display:block;width:100%;height:2px;background:#444;position:absolute;bottom:0;left:0}
.filtersBody .subtaplist + .btn-group-toggle{margin-top:20px}
.filtersBody .btn-group-toggle .btn-secondary.active.active-start:after{background:#f5f5f5;width:20px;height:36px;content:"";display:block;position:absolute;right:-10px;top:0}
.filtersBody .btn-group-toggle .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end) span{position:relative;background:#f5f5f5;border:0;color:#bbb !important;font-weight:400}
.filtersBody .btn-group-toggle .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):after{background:#f5f5f5;width:24px;height:36px;content:"";display:block;position:absolute;right:-10px;top:0}
.filtersBody .btn-group-toggle.type3 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-of-type(3n):after{display:none}
.filtersBody .btn-group-toggle.type3 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-child(3n) span{border-radius:6px 0 0 6px !important}
.filtersBody .btn-group-toggle.type3 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-child(3n+1) span{border-radius:0 6px 6px 0 !important}
.filtersBody .btn-group-toggle.type4 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-of-type(4n):after{display:none}
.filtersBody .btn-group-toggle.type4 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-child(4n) span{border-radius:6px 0 0 6px !important}
.filtersBody .btn-group-toggle.type4 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-child(4n+1) span{border-radius:0 6px 6px 0 !important}
.filtersBody .btn-group-toggle.type5 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-child(5n):after{display:none}
.filtersBody .btn-group-toggle.type5 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-child(5n) span{border-radius:6px 0 0 6px !important}
.filtersBody .btn-group-toggle.type5 .btn-secondary.active.active-start ~ .btn-secondary.active:not(.active-end):nth-child(5n+1) span{border-radius:0 6px 6px 0 !important}
.filterguidetext{display: block;margin:0 12px;padding-left:20px; background:url('/images/icon_16_notice.svg') no-repeat; color:#888; font-size:12px; text-align: left;}
.filterguidetext2{display: block;margin:-12px 12px 0;color:#888; font-size:14px; text-align: left;}

/* 필터 : 따로필터 */
.filtersWrap.active { position: relative; }
.filtersWrap.active .filtersBody { display: block; }
.filtersWrap.active .filtersFoot { display: block }
.filtersWrap > .scrollbar-outer { max-height: calc(100vh - 156px); }

/* 필터 컨텐츠 공용 */
.filtersBody { display: none; overflow: hidden;  background: #fff; }
/* .filtersBody .filters-form { width: 100%; }*/
.filtersBody .filters-tabs { width: 100%; margin: 0; padding: 0; border-radius: 0; box-shadow: none; text-align: left; }

/* 내장형 탭 타이틀 */
.filtersBody .filters-tabs-title { position: relative; padding: 0 16px; margin-top:16px}
.filtersBody .filters-tabs-title:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; right: 0; border-bottom: 1px solid #ddd; }
.filtersBody .filters-tabs-title .nav-tabs { display:block}
.filtersBody .filters-tabs-title .nav-tabs .nav-item { display:inline-block; margin: 0 16px 0 0;height:26px}
.filtersBody .filters-tabs-title .nav-tabs .nav-link { position:relative;width: 100%; height: 26px; padding: 0; border: none; border-radius: 0; color: #222; font-weight: 300; font-size: 14px; }
.filtersBody .filters-tabs-title .nav-tabs .nav-link.active{font-weight:700}
.filtersBody .filters-tabs-title .nav-tabs .nav-link.active:after { display:block;content:"";width:100%;height:2px;background:#444;position:absolute;bottom:0;left:0;z-index:1}
.filtersBody .filters-tabs-title-disabled { display: none; }
.filtersBody .filters-tabs-content { width: 100%; background: #fff; }
.filtersBody .filters-tabs-content .tab-pane { width: 100%; padding:0; box-shadow: none; }
.filtersBody .filters-tabs-content .tab-pane .tab-pane { padding: 0; }
.filtersBody .range-foot .legend{flex-direction:inherit;width:calc(100% + 20%);margin-left:-10%;font-size:12px;color:#888}
.filtersBody .range-foot .legend .active{color:#444;font-weight:700}
.filtersBody .range-foot .legend span{margin:0 !important;flex:1;text-align:center}
.filtersBody .range-foot.split3 .legend{width:calc(100% + 33%);margin-left:-16.5%}
.filtersBody .range-foot.split4 .legend{width:calc(100% + 25%);margin-left:-12.5%}
.filtersBody .range-foot.split5 .legend{width:calc(100% + 20%);margin-left:-10%}
.filtersBody .range-foot.split6 .legend{width:calc(100% + 16.6%);margin-left:-8.3%}

/* 필터 하단 컨트롤 */
.filtersFoot { display: none; position: relative; padding: 10px 16px; border-radius: 0 0 10px 10px; background: #f5F5F5;text-align:left}
.filtersFoot .btn{background-color:transparent;border-radius:0;vertical-align:top}
.filtersFoot .btn:before{content:"";display:inline-block;width:24px;height:24px;vertical-align:top}
.filtersFoot .filters.typeArea .form-group .btn-secondary em:after {content: attr(data-unit);font-size: 14px;}

/* 버튼 */
.btn-savedfilter{position:relative;padding-right:17px;margin-right:8px;color:#444}
.btn-savedfilter:before{background:url('/images/map/filters/icon_24_star_normal.svg') no-repeat 0 0}
.btn-savedfilter:after{position:absolute;top:4px;right:0;content:"";width:1px;height:14px;background:#e0e0e0}
.btn-resetfilter{color:#444}
.btn-resetfilter:before{background:url('/images/map/filters/icon_24_reset.svg') no-repeat 0 0}
.btn-closefilter{float:right;color:#888;text-decoration:underline}
.btn-closefilter:before{display:none}
.btn-addvisit{width:88px;height:88px;border:1px dashed #bbb;border-radius:50%;background:url('/images/map/filters/icon_24_plus.svg') no-repeat 50% 50% / 24px auto #fff}
.btn-deleteblack{width:24px;height:24px;background:url('/images/icon_24_delete.svg')}
.btn-addfilter{width:24px;height:24px;background:url('/images/map/filters/icon_24_star_normal.svg') no-repeat 0 0}
.btn-addfilter.active{background-image:url('/images/map/filters/icon_24_star_select.svg')}
.btn-roundnavy{padding:0 16px;border-radius:22px;height:42px;background:#515d7d;color:#fff;font-size:14px}

/* 전체필터/개별필터 */
.filterNoti{padding:20px 16px 12px;border-top:1px solid #eee;text-align:right;color:#888;font-size:12px}
.filterInputwrap{position:relative;display:flex;padding:0 16px 54px}
.filterInputwrap .form-control{height:38px;padding:10px;border-top:1px solid #eee;border-bottom:1px solid #eee;text-align:right;font-size:14px;color:#444;font-weight:700}
.filterInputwrap .input-group{margin-left:26px;}
.filterInputwrap .input-group:nth-of-type(1){margin:0}
.filterInputwrap .input-group-prepend{background:#f5f5f5;border:1px solid #eee;border-right:0;border-radius:8px 0 0 8px;padding:0}
.filterInputwrap .input-group-prepend button{width:38px;background:url('/images/map/filters/icon_24_minus.svg') no-repeat 50% 50% / 24px auto;font-size:0}
.filterInputwrap .input-group-append{background:#f5f5f5;border:1px solid #eee;border-left:0;border-radius:0 8px 8px 0;padding:0}
.filterInputwrap .input-group-append button{width:38px;background:url('/images/map/filters/icon_24_plus.svg') no-repeat 50% 50% / 24px auto;font-size:0}
.filterInputwrap .wavetext{position:absolute;top:0;left:calc(50% - 13px);width:26px;line-height:45px;text-align:center;font-size:14px;color:#000;font-weight:700}
.filterInputwrap .textnum{position:absolute;top:43px;left:16px;width:calc(100% - 32px)}
.filterInputwrap .textnum span{float:left;display:inline-block;width:calc(50% - 13px);font-size:14px;color:#4373f4;text-align:right}
.filterInputwrap .textnum span:nth-of-type(2){margin-left:26px}
.filterStepwrap{border-top:1px solid #eee;padding:20px 0 24px}
.filterStepwrap .steperitems{position:relative;width:100%;height:180px}
.filterStepwrap .steperitems:before{content:"";width:100%;height:20px;position:absolute;top:0;left:0;background:linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.filterStepwrap .steperitems:after{content:"";width:100%;height:20px;position:absolute;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
.filterStepwrap .steper{display:flex;height:32px;line-height:32px;text-align:center;margin-bottom:4px}
.filterStepwrap .steper div{flex:1;font-size:16px}
.filterStepwrap .steper.active{background-color:#f5f5f5;color:#4373f4;font-weight:700}
.filterStepwrap .wavetext{visibility:hidden;}
.filterStepwrap .steper.active .wavetext{visibility:visible}
.filtersBody .form-group{position:relative;margin-bottom:12px}
.filtersBody .typeRooms .form-group{margin-bottom:0}
.filtersBody .filters-range{padding:0 16px}
.filtersBody .vue-range-slider.slider-component .slider .slider-process{background-color:#4373f4}
.filtersBody .range-head{padding:16px 0 24px;text-align:right}
.filtersBody .range-value{display:inline-block;margin-right:8px;font-size:16px;color:#4373f4;font-weight:700}
.filtersBody .vue-range-slider.slider-component .slider-tooltip-wrap .slider-tooltip{display:none}
.filtersBody .vue-range-slider.slider-component .slider{background-color:#f5f5f5;height:4px !important}

/* 전체필터 */
.allfilterPage:not(.saleListPage) .pageHead{border-bottom:1px solid #eee}
.allfilterPage .pageHead .btn-txt{color:#444;font-size:16px;text-decoration:none}
.allfilterPage .filtersHead{position:fixed;top:56px;left:0;width:100%;padding:12px 0 4px 12px;box-shadow: 0 1px 8px rgb(0 0 0 / 10%);background:#fff;z-index:99; transition: all .3s; }
.allfilterPage .filtersHead.hidden .itemgroup{display:flex;flex-wrap:nowrap;width:max-content;}
.allfilterPage .filtersHead .allFilters{top:12px;right:10px}
.allfilterPage .btn-filtermap.open:after{transform: rotate(-45deg);top:6px;left:-1px}
.allfilterPage .hidden .btn-filtermap.open:after{transform: rotate(135deg);top:3px}
.allfilterPage .hidden:after{content:"";display:block;width:60px;height:60px;background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 20%,rgba(255,255,255,1) 50%, #fff 100%);position:absolute;top:0;right:0}
.allfilterPage .filtersBody { display: block;border-radius:0;padding-top:154px}
.allfilterPage .hidden + .filtersBody{padding-top:62px}
.allfilterPage .filtersBody .range-value{margin-right:16px}
.allfilterPage .filtersBody .filters-range{margin-top:24px}
.allfiltertitle{display:flex;align-items: center;padding-top: 32px;border-top: 7px solid #f5f5f5;}
.allfiltertitle strong {position: relative;padding-left: 16px;margin-right: auto;font-size: 18px;}
.allfiltertitle .btn{margin-right:16px}
.allfiltercont{padding-bottom:22px;border-bottom: 1px solid #eee;}
.allfiltercont:nth-of-type(1) .allfiltertitle{border-top:0}
.allfiltercont:nth-last-child(1){border-bottom:0}
@media (min-width: 1440px){
.allfilterPage .filtersBody, .allfilterPage .filtersFoot{width:100%;float:none}
}
.filtersBody .filters.typeRooms .form-label{position:absolute;left:16px;bottom:0;z-index: 1;width:46px;height:48px;line-height:28px;visibility: visible;color: #444;font-weight:700;font-size: 14px;text-indent: 0;text-align:left}

/* 마이필터 */
[class*="myfilterCon"]{padding-bottom:22px;border-bottom:1px solid #eee}
[class*="myfilterCon"]:nth-last-of-type(1){border-bottom:0}
.myfilterPage .pageHead{border-bottom:1px solid #eee}
.myfilterPage .pageHead .btn-txt{right:56px;font-size:16px;color:#444;text-decoration:none}
.myfilterPage .btn-pageTop{position:fixed;bottom:25px;background:#fff}
.filtertitle{display:flex;align-items:center;padding-top:32px;border-top:7px solid #f5f5f5}
.filtertitle strong{position:relative;padding-left:16px;margin-right:auto;font-size:18px}
.filtertitle .toolmaptip{top:32px;left:85px;right:auto;width:220px;z-index:99;font-weight:300;padding-right:26px}
.filtertitle button{vertical-align:top}
.filtertitle .numarea{padding-right:16px;font-size:14px}
.filtertitle .numarea .current{color:#4373f4;font-weight:500}
.filtercont{position:relative;margin:24px 0 0 16px}
.filtercont .btn-deleteblack{display:none;position:absolute;right:-4px;top:-5px}
.modeDelete .filtercont .btn-deleteblack{display:block}
.myfilterConVisit .filtertitle{border:0}
.myfilterConVisit .visitArea{display:inline-block;vertical-align:top;width:88px;height:88px;margin-left:12px;border-radius:50%;border:1px dashed #bbb;text-align:center}
.myfilterConVisit .visitArea span{display:block;height:44px;line-height:44px}
.myfilterConVisit .btn-typetext{position:relative;margin-right:16px;}
.myfilterConVisit .btn-typetext:after{content:"";display:block;width:1px;height:14px;background:#e0e0e0;position:absolute;right:-8px;top:5px}
.myfilterConVisit .myfilterConlist:before{position:absolute;top:45px;right:0;content:"";display:block;width:100%;height:2px;background:#eee}
.myfilterConVisit .nodata{padding:24px 16px 24px 0}
.myfilterConVisit .nodata span{display:block;color:#888}
.myfilterConlist{display:flex;width: max-content;padding-bottom:10px;padding-top:2px}
.myfilterConlist .rounditem{position:relative;width:88px;height:88px;margin-right:16px;border-radius:50%;text-align:center;cursor:pointer}
.myfilterConlist .rounditem:nth-of-type(1):before{display:none}
.myfilterConlist .btn-addvisit{position:relative;margin-right:16px}
.modePin .myfilterConlist .rounditem:after{position:absolute;top:-3px;right:-4px;content:"";display:block;width:24px;height:24px;background:url('/images/map/filters/icon_24_pin_normal.svg')}
.modePin .myfilterConlist .rounditem.active:after{background-image:url('/images/map/filters/icon_24_pin_select.svg')}
.modePin .myfilterConlist .rounditem.active .listtit, .modePin .myfilterConlist .rounditem.active .listcont{border:1px dashed #4373f4;}
.modePin .myfilterConlist .rounditem.active .listtit{background-color:#e3ecff;color:#444}
.myfilterConlist .rounditem.active .listtit, .myfilterConlist .rounditem.active .listcont{border:1px dashed #4373f4;}
.myfilterConlist .rounditem.active .listtit{background-color:#e3ecff;color:#444}
.myfilterConlist .rounditem .listtit{height:44px;padding:14px 10px 0;text-overflow: ellipsis;white-space:nowrap;overflow:hidden;border-radius:44px 44px 0 0;background-color:#f5f5f5;font-weight:500;border:1px dashed #bbb;border-bottom:0 !important}
.myfilterConlist .rounditem.submit .listtit, .myfilterConlist .rounditem.submit .listcont{border:1px solid #4373f4}
.myfilterConlist .rounditem.submit .listtit{background-color:#4373f4;color:#fff}
.myfilterConlist .rounditem .listcont{height:44px;padding:9px 10px 0;font-size:12px;border-radius:0 0 44px 44px;text-overflow: ellipsis;white-space:nowrap;overflow:hidden;border:1px dashed #bbb;border-top:0 !important}
.filterConlist{display:flex;width: max-content;padding-bottom:10px;padding-top:2px}
.filterConlist li{position:relative;width:152px;height:124px;padding:14px 16px;background:#e3ecff;border-radius:12px;margin-right:8px;text-align:left}
.filterConlist li.nodata{background:url('/images/map/filters/icon_24_error_info.svg') no-repeat 50% 50% / 32px auto #fff !important;border:1px dashed #eee}
.filterConlist .listtit{position:relative}
.filterConlist .listtit strong{display:inline-block;width:calc(100% - 30px);text-overflow: ellipsis;white-space:nowrap;overflow:hidden}
.filterConlist .listtit .btn{position:absolute;top:0;right:0}
.filterConlist .listtit .time{display:block;margin-top:-5px;font-size:12px;color:#888}
.filterConlist .listcont{height:72px;line-height:18px;overflow:hidden}
.myfilterConRecent .filterConlist li{background-color:#f5f5f5}
.myfilterConRecent .filterConlist .listcont{height:54px}
.modePin .myfilterCon, .modePin .myfilterConRecent{opacity:.6}
.addvisit .pageHead{border-bottom:1px solid #eee}
.addvisit .address-section .step{top:55px}
.pageBottom.btmfixed{position:fixed;bottom:0;left:0;width:100%;height:86px;margin:0;padding:16px;background:#fff;z-index:10;transition: all .3s; }
.pagewrap .pageBottom.btmfixed{max-width:424px }

.filtersNickname {padding:32px 16px}
.filtersNickname strong{display:block;padding-bottom:24px;font-size: 18px;}

@media (min-width: 424px){
    .pagewrap .allfilterPage .filtersHead{max-width:424px}
}
@media (min-width: 560px){
    [class*="filtersBody"]{border-radius:10px 10px 0 0}
    .filtersHead .allFilters{right:0}
}
@media (min-width: 1024px){
    .filtersHead{padding:0 38px 0 0}
    .pagewrap .pageBottom.btmfixed,
    .pagewrap .allfilterPage .filtersHead{left:70px;border-left: 1px solid #eee;}
    .myfilterPage .btn-pageTop{left:230px}
}
@media (min-width: 1440px){
    .filtersBody, .filtersFoot{width:360px;float:right}
}