@charset "UTF-8";

/* 20230904 작업한 css 입니다. */

* {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

#houseMapArea {
    padding-top: 0px;
}

#wrap {
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 490;
    overflow: hidden;
    box-sizing: border-box;
}

.contents {
    /*height: calc(100vh - 123px);*/
    /*@supports (-webkit-appearance:none) and (stroke-color: transparent) {*/
    /*    height: -webkit-fill-available;*/
    /*}*/
    padding-bottom: 10px;
}

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

.header{position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; color: #fff; width: 100%; height: 60px; 
background-color: #122B49;}

.msgArea{display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: 0 0 12px 12px; 
background-color: #F1F1F1; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);}
.msgArea .msg{font-size: 12px; font-family: 'pre Medium'; color: #606060;}

.contents .topArea{margin-bottom: 24px;}
.contents .inner{padding: 0 16px 0 16px;}

.hintArea{padding: 10px 8px; border-radius: 6px; background-color: #F4F8FF;}
.hintArea + .resultArea{margin-top: 12px;}
.hintArea .text{font-size: 12px; font-family: 'pre Medium'; color: #606060;}

.searchArea .column{display: flex; flex-direction: column; row-gap: 8px;}
.searchArea .selectArea{display: flex; align-items: center; column-gap: 8px;}
.searchArea .selectArea div {display: flex; flex:1; flex-direction: column; position:relative}
.searchArea .selectArea ul {
    display:none;
    position: absolute;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    top: 100%;
    left: 0;
    margin: 5px 0 0 0;
    z-index: 1000;
    border: 2px solid #D3D3D3;
    max-height: 228px;
}
.searchArea .selectArea ul li {
    display: block;
    cursor: pointer;
    padding: 0 12px;
    line-height: 38px;
}
.searchArea .selectArea .area-btn{
    height: 40px; font-size: 14px; font-family: 'pre Regular'; color: #212121;
    padding: 0 8px; border-radius: 6px; border: 1px solid #d3d3d3;
    background: #fff url('../images/house/ico/ico-select-down.svg') no-repeat center right 8px;
    display: flex;
    align-items: center;
}

.section + .section{margin-top: 24px;}
.btnArea{
    margin-top: 15px;
    position: sticky;
    width: 100%;
    z-index: 800;
    left: 0px;
    bottom: 15px;
    padding: 0 15px;
}
.section .tit{font-size: 18px; font-family: 'pre Bold'; color: #111;}
.section .tit + .cardArea{margin-top: 8px;}
.section.hasHint + .section{margin-top: 24px;}

.cardArea.lifeStyle .simple-cardList{gap: 8px;display: grid;grid-template-columns: 1fr 1fr;}
.cardArea.lifeStyle .cardItem .box{min-width: 160px; display: flex; align-items: center; column-gap: 8px; padding: 10px 13px; border-radius: 6px; 
border: 1px solid #D3D3D3; background-color: #fff; transition: .3s ease-in-out; transition-property: border-color,background-color;}
.cardArea.lifeStyle .cardItem.active .box{border-color: #1B53E3; background-color: #F4F8FF;}
.cardArea.lifeStyle .textArea .text{font-size: 14px; font-family: 'pre Medium'; color: #606060;}
.cardArea.lifeStyle .textArea .colorType{font-family: 'pre Bold';}
/*.resultArea .itemListWrap .itemList{padding-bottom: 35px;}*/
/*.resultArea .itemListWrap .itemList{display: flex; align-items: center; flex-direction: column; max-height: 188px; overflow-y: auto; padding-bottom: 58px;}*/
.resultArea .itemListWrap .item{display: flex; align-items: center; justify-content: space-between; width: 100%;}
.resultArea .itemListWrap .item + .item{margin-top: 20px;}
.resultArea .itemListWrap .name{display: flex; white-space: pre-wrap; align-items: center; font-size: 16px; font-family: 'pre Medium'; color: #202020; word-break: keep-all;}
.resultArea .itemListWrap .infoArea{display: flex; align-items: center; column-gap: 8px; min-width: 187.2px; margin-right: 5px;}
.resultArea .itemListWrap .infoArea.gray .value{color: #606060; background-color: #E9E9E9;}
.resultArea .itemListWrap .simple-info-box{display: flex; align-items: center; column-gap: 4px;}
.resultArea .itemListWrap .infoHead{font-size: 14px; font-family: 'pre Regular'; color: #202020;}
.resultArea .itemListWrap .value{display: flex; align-items: center; justify-content: center; min-width: 45px; padding: 4px 12px; 
height: 28px; border-radius: 4px; font-size: 12px; font-family: 'pre Medium'; color: #fff; background-color: #1B53E3;}
.resultArea .itemListWrap .indicator-icon{ content: ''; width: 24px; height: 24px; background-repeat: no-repeat; margin-right: 4px;}

.btnLocation{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; 
border-radius: 8px; background: #D8E3FF url('../images/house/ico/ico-map-pin.svg') no-repeat center;}
.btnGray{display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; 
font-size: 16px; font-family: 'pre Medium'; color: #606060; border-radius: 8px; background-color: #E9E9E9;}
.btnActive{
    color: #fff;
    background: linear-gradient( 135deg, rgba(27, 83, 227, 1), rgba(27, 83, 227, 1), rgba(29, 141, 244, 1));
}

.colorType.blue{color: #1B53E3 !important;}

/* icons */
.lifestyle-elementaryParents { content: url("../images/house/ico/icon_life_style_elementaryParents.svg")}
.lifestyle-mzGeneration { content: url("../images/house/ico/icon_life_style_mzGeneration.svg")}
.lifestyle-middleAndHighParents { content: url("../images/house/ico/icon_life_style_middleAndHighParents.svg")}
.lifestyle-newlyweds { content: url("../images/house/ico/icon_life_style_newlyweds.svg")}
.lifestyle-petFurniture { content: url("../images/house/ico/icon_life_style_petFurniture.svg")}
.lifestyle-retiredGeneration { content: url("../images/house/ico/icon_life_style_retiredGeneration.svg")}
.lifestyle-selfImprovement { content: url("../images/house/ico/icon_life_style_selfImprovement.svg")}
.lifestyle-singleHouseholds { content: url("../images/house/ico/icon_life_style_singleHouseholds.svg")}


.itemListWrap .item .indicator-icon{
    background-image:url(../images/house/ico/icon_i_indicator.svg);
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 7px;
}

#recommendSelectItemImg {
    display:flex;
}

#recommendSelectItemImg .indicator-icon {
    background-image:url(../images/house/ico/icon_i_indicator_gray.svg);
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    border-radius: 5px;
    padding: 2px;
}

.hopeCardbox .indicator-icon {
    background-image:url(../images/house/ico/icon_i_indicator_gray.svg);
    display: block;
    width: 24px;
    height: 24px;
    margin: 10px 4px 0 0;
    border-radius: 5px;
    padding: 2px;
}


/* 자연 */
/*.itemListWrap .item.type01.icon01 .indicator-iconbackground-image: url('../images/house/ico/type01/ico-type01-01.svg');}*/
/*.itemListWrap .item.type01.icon02 .indicator-iconbackground-image: url('../images/house/ico/type01/ico-type01-02.svg');}*/
/*.itemListWrap .item.type01.icon03 .indicator-iconbackground-image: url('../images/house/ico/type01/ico-type01-03.svg');}*/
/*.itemListWrap .item.type01.icon04 .indicator-iconbackground-image: url('../images/house/ico/type01/ico-type01-03.svg');}*/
/*.itemListWrap .item.type01.icon05 .indicator-iconbackground-image: url('../images/house/ico/type01/ico-type01-03.svg');}*/
.indicator-icon.A001{ background-position: 0 0;}
.indicator-icon.A002{ background-position: 0 -30px;}
.indicator-icon.A003{ background-position: 0 -60px;}
.indicator-icon.A004{ background-position: 0 -90px;}
.indicator-icon.A005{ background-position: 0 -120px;}
.indicator-icon.A006{ background-position: 0 -150px;}
/* 주택 */
/*.itemListWrap .item.type02.icon01 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-01.svg');}*/
/*.itemListWrap .item.type02.icon02 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-02.svg');}*/
/*.itemListWrap .item.type02.icon03 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-03.svg');}*/
/*.itemListWrap .item.type02.icon04 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-04.svg');}*/
/*.itemListWrap .item.type02.icon05 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-05.svg');}*/
/*.itemListWrap .item.type02.icon06 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-06.svg');}*/
/*.itemListWrap .item.type02.icon07 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-07.svg');}*/
/*.itemListWrap .item.type02.icon07 .indicator-iconbackground-image: url('../images/house/ico/type02/ico-type02-07.svg');}*/

.indicator-icon.B001{ background-position: -30px 0;}
.indicator-icon.B002{ background-position: -30px -30px;}
.indicator-icon.B003{ background-position: -30px -60px;}
.indicator-icon.B004{ background-position: -30px -90px;}
.indicator-icon.B005{ background-position: -30px -120px;}
.indicator-icon.B006{ background-position: -30px -150px;}
.indicator-icon.B007{ background-position: -30px -180px;}
.indicator-icon.B008{ background-position: -30px -210px;}

/* 지역인구 */
/*.itemListWrap .item.type03.icon01 .indicator-iconbackground-image: url('../images/house/ico/type03/ico-type03-01.svg');}*/
/*.itemListWrap .item.type03.icon02 .indicator-iconbackground-image: url('../images/house/ico/type03/ico-type03-02.svg');}*/
/*.itemListWrap .item.type03.icon03 .indicator-iconbackground-image: url('../images/house/ico/type03/ico-type03-03.svg');}*/
/*.itemListWrap .item.type03.icon04 .indicator-iconbackground-image: url('../images/house/ico/type03/ico-type03-04.svg');}*/
/*.itemListWrap .item.type03.icon05 .indicator-iconbackground-image: url('../images/house/ico/type03/ico-type03-04.svg');}*/
/*.itemListWrap .item.type03.icon06 .indicator-iconbackground-image: url('../images/house/ico/type03/ico-type03-04.svg');}*/

.indicator-icon.C001{ background-position: -60px 0;}
.indicator-icon.C002{ background-position: -60px -30px;}
.indicator-icon.C003{ background-position: -60px -60px;}
.indicator-icon.C004{ background-position: -60px -90px;}
.indicator-icon.C005{ background-position: -60px -120px;}
.indicator-icon.C006{ background-position: -60px -150px;}

/* 안전 */
/*.itemListWrap .item.type04.icon01 .indicator-iconbackground-image: url('../images/house/ico/type04/ico-type04-01.svg');}*/
/*.itemListWrap .item.type04.icon02 .indicator-iconbackground-image: url('../images/house/ico/type04/ico-type04-02.svg');}*/
/*.itemListWrap .item.type04.icon03 .indicator-iconbackground-image: url('../images/house/ico/type04/ico-type04-03.svg');}*/
/*.itemListWrap .item.type04.icon04 .indicator-iconbackground-image: url('../images/house/ico/type04/ico-type04-04.svg');}*/
/*.itemListWrap .item.type04.icon05 .indicator-iconbackground-image: url('../images/house/ico/type04/ico-type04-05.svg');}*/
/*.itemListWrap .item.type04.icon06 .indicator-iconbackground-image: url('../images/house/ico/type04/ico-type04-06.svg');}*/

.indicator-icon.D001{ background-position: -90px 0;}
.indicator-icon.D002{ background-position: -90px -30px;}
.indicator-icon.D003{ background-position: -90px -60px;}
.indicator-icon.D004{ background-position: -90px -90px;}
.indicator-icon.D005{ background-position: -90px -120px;}
.indicator-icon.D006{ background-position: -90px -150px;}

/* 생활 편의 교통 */
/*.itemListWrap .item.type05.icon01 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-01.svg');}*/
/*.itemListWrap .item.type05.icon02 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-02.svg');}*/
/*.itemListWrap .item.type05.icon03 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-03.svg');}*/
/*.itemListWrap .item.type05.icon04 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-04.svg');}*/
/*.itemListWrap .item.type05.icon05 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-05.svg');}*/
/*.itemListWrap .item.type05.icon06 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-05.svg');}*/
/*.itemListWrap .item.type05.icon07 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-05.svg');}*/
/*.itemListWrap .item.type05.icon08 .indicator-iconbackground-image: url('../images/house/ico/type05/ico-type05-05.svg');}*/

.indicator-icon.E001{ background-position: -120px 0;}
.indicator-icon.E002{ background-position: -120px -30px;}
.indicator-icon.E003{ background-position: -120px -60px;}
.indicator-icon.E004{ background-position: -120px -90px;}
.indicator-icon.E005{ background-position: -120px -120px;}
.indicator-icon.E006{ background-position: -120px -150px;}
.indicator-icon.E007{ background-position: -120px -180px;}
.indicator-icon.E008{ background-position: -120px -210px;}

/* 교육 */
/*.itemListWrap .item.type06.icon01 .indicator-iconbackground-image: url('../images/house/ico/type06/ico-type06-01.svg');}*/
/*.itemListWrap .item.type06.icon02 .indicator-iconbackground-image: url('../images/house/ico/type06/ico-type06-02.svg');}*/
/*.itemListWrap .item.type06.icon03 .indicator-iconbackground-image: url('../images/house/ico/type06/ico-type06-03.svg');}*/

.indicator-icon.F001{ background-position: -150px 0;}
.indicator-icon.F002{ background-position: -150px -30px;}
.indicator-icon.F003{ background-position: -150px -60px;}
.indicator-icon.F004{ background-position: -150px -90px;}
.indicator-icon.F005{ background-position: -150px -120px;}
.indicator-icon.F006{ background-position: -150px -150px;}
.indicator-icon.F007{ background-position: -150px -180px;}

/* 복지문화 */
/*.itemListWrap .item.type07.icon01 .indicator-iconbackground-image: url('../images/house/ico/type07/ico-type07-01.svg');}*/
/*.itemListWrap .item.type07.icon02 .indicator-iconbackground-image: url('../images/house/ico/type07/ico-type07-02.svg');}*/
/*.itemListWrap .item.type07.icon03 .indicator-iconbackground-image: url('../images/house/ico/type07/ico-type07-03.svg');}*/
/*.itemListWrap .item.type07.icon04 .indicator-iconbackground-image: url('../images/house/ico/type07/ico-type07-04.svg');}*/
/*.itemListWrap .item.type07.icon05 .indicator-iconbackground-image: url('../images/house/ico/type07/ico-type07-05.svg');}*/
/*.itemListWrap .item.type07.icon06 .indicator-iconbackground-image: url('../images/house/ico/type07/ico-type07-06.svg');}*/

.indicator-icon.G001{ background-position: -180px 0;}
.indicator-icon.G002{ background-position: -180px -30px;}
.indicator-icon.G003{ background-position: -180px -60px;}
.indicator-icon.G004{ background-position: -180px -90px;}
.indicator-icon.G005{ background-position: -180px -120px;}
.indicator-icon.G006{ background-position: -180px -150px;}
.indicator-icon.G007{ background-position: -180px -180px;}
.indicator-icon.G008{ background-position: -180px -210px;}
.indicator-icon.G009{ background-position: -180px -240px;}
.indicator-icon.G010{ background-position: -180px -270px;}

/* 캡션 */
.sop-caption-span {
    font-family: 나눔고딕B;
    text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) -2px 0px 0px, rgb(255, 255, 255) 0px 2px 0px, rgb(255, 255, 255) 0px -2px 0px, rgb(255, 255, 255) 1px 1px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px;
}


/* 데이터 보드 */
#indicator-navigator {
    margin-top: 3px;
}
.houseSubCategoryTab {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
    margin: 2.5px;
    color: #7B7C7F;
    flex-direction: column;
    height: 40px;
    min-width: 110px;
}
.houseSubCategoryTab.on {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2277F2;
    background-color: #fff;
    margin: 2.5px;
    color: #2277F2;
    flex-direction: column;
    height: 40px;
}
.houseSubCategoryTab span {
    font-size: 13px;
    letter-spacing: -0.5px;
    margin: 0 9px;
}
.houseSubCategoryTab:last-child {
    margin-right: 20px;
}
.categoryTab.on {
    border-bottom: 4px solid #2277F2;
    margin-bottom: -3px;
}

#indicator-chart {
    margin-top: 10px;
    margin-bottom: 5px;
}
.indicator-InfochartWrap > span {
    margin-left: 10px;
    margin-bottom: 3px;
}
.info-right{
    display: flex;
}
.info-right li {
    text-align: center;
    flex: 1;
    height: 64px;
    background: url(../images/common/line.png) no-repeat left center;
    /*background-color: #fff;*/
    /*border-radius: 8px;*/
    /*border: 1px solid #D3D3D3;*/
    padding-left: 2px;
}

.info-right li:first-child {
    background: none;
}

/*.info-right li.current-target {*/
/*    background: linear-gradient( 135deg, rgba(27, 83, 227, 1), rgba(27, 83, 227, 1), rgba(29, 141, 244, 1));*/
/*}*/
.info-right li.current-target em {
    color: #FF6161;
}
/*.info-right li.current-target span {*/
/*    color: #fff;*/
/*}*/
.info-right span {
    display: block;
    color: #111;
    margin: 5px 0 3px;
    font-size: 13px;
}
.info-right em {
    display: block;
    color: #555;
    font-weight: 700;
    font-size: 17px;
}
.f-w500 {
    font-weight: 500 !important;
}
.f-w600 {
    font-weight: 600 !important;
}
.color-dahong {
    color: #F85353 !important;
}
.color-blue {
    color: #1B53E3 !important;
}
.InfodataWrap .category-img {
    background-size: contain;
    width: 50px;
    height: 50px;
    /*position: absolute;*/
    background-repeat: no-repeat;
    background-position: center;
}

.category-img.nature{ background-image: url(../images/house/ico/icon_nature.svg);}
.category-img.house{ background-image: url(../images/house/ico/icon_house.svg);}
.category-img.popul{ background-image: url(../images/house/ico/icon_popul.svg);}
.category-img.safe{ background-image: url(../images/house/ico/icon_safe.svg);}
.category-img.life{ background-image: url(../images/house/ico/icon_life.svg);}
.category-img.edu{ background-image: url(../images/house/ico/icon_edu.svg);}
.category-img.weal{ background-image: url(../images/house/ico/icon_weal.svg);}

.category-wrap{
    width: 100px;
    display: flex;
    justify-content: center;
}
#compare-status {
    font-size: 15px;
    width: 60vw;
    margin-top: 4px;
}

/* --- */

/* mobile */
@media (max-width: 359px){
    .cardArea.lifeStyle .cardItem{width: 100%;}
    .cardArea.lifeStyle .cardItem .box{min-width: auto; width: 100%;}
}