@charset "utf-8";

/* secCmnEstateList */
.secCmnEstateList{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.secCmnEstateList .item{
    width: 370px;
    margin: 40px 40px 0 0;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1),inset 0px -2px 0px 0px rgba(4, 0, 0, 0.2);
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.secCmnEstateList .item:nth-child(3n){
    margin-right: 0;
}
.secCmnEstateList .item:nth-child(-n+3){
    margin-top: 0;
}
.secCmnEstateList .boxHead{
    display: block;
    position: relative;
}
.secCmnEstateList .imgExterior{
    height: 0;
    padding-top: 59.46%;
}
.secCmnEstateList .imgFloor{
    height: 0;
    padding-top: 57.143%;
}
.secCmnEstateList .boxImgFloor{
    padding: 20px 27.5px;
    background: #fff;
}
.secCmnEstateList .swiper-button-prev::after,
.secCmnEstateList .swiper-button-next::after{
    display: none;
}
.secCmnEstateList .swiper-button-prev,
.secCmnEstateList .swiper-button-next{
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
    margin-top: -14px;
}
.secCmnEstateList .swiper-button-prev svg,
.secCmnEstateList .swiper-button-next svg{
    width: 6px;
    height: 10px;
}
.secCmnEstateList .swiper-button-prev use,
.secCmnEstateList .swiper-button-next use{
    fill: var(--subColor);
}
.secCmnEstateList .swiper-button-prev.swiper-button-disabled,
.secCmnEstateList .swiper-button-next.swiper-button-disabled{
    display: none;
}
.secCmnEstateList .icoType{
    width: 90px;
    padding: 3px 0;
    font-size: 11px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    letter-spacing: 0;
}
.secCmnEstateList .icoType.bg01{
    background: var(--usedEstateColor);
}
.secCmnEstateList .icoType.bg02{
    background: var(--usedMansionColor);
}
.secCmnEstateList .icoType.bg03{
    background: var(--newHouseColor);
}
.secCmnEstateList .icoType.bg04{
    background: var(--landColor);
}
.secCmnEstateList .icoType.bg05{
    background: var(--renovationColor);
}
.secCmnEstateList .iconWrap{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 120px);
}
.secCmnEstateList .ico{
    height: 19px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 3px;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    margin-left: 3px;
}
.secCmnEstateList .icoNew{
    width: 31px;
    background: #ff0;
    color: #000;
}
.secCmnEstateList .icoRenov{
    width: 53px;
    background: #ffd800;
    color: #000;
}
.secCmnEstateList .icoDisc{
    width: 53px;
    background: #eee;
    color: #fd4c85;
}
.secCmnEstateList .icoDisc .txt{
    padding-left: 12px;
    position: relative;
}
.secCmnEstateList .icoDisc .txt::before{
    content: "";
    background: url(../img/estate/icoDisc.jpg) center / contain no-repeat;
    width: 10px;
    height: 11px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.secCmnEstateList .icoProp{
    width: 51px;
    background: #ed6103;
    color: #fff;
}
.secCmnEstateList .boxTit{
    padding: 9px 10px;
    border-top: 1px solid #dcdcdc;
}
.secCmnEstateList .boxTit,
.secCmnEstateList .boxTitIn{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.secCmnEstateList .boxTit{
    justify-content: space-between;
    -webkit-justify-content: space-between;
    position: relative;
}
.secCmnEstateList .boxTitIn{
    width: calc(100% - 46px);
}
.secCmnEstateList .labelCheck{
    display: inline-block;
}
.secCmnEstateList .labelCheck .icoCheck::before{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: #eee;
    border-radius: 3px;
    position: relative;
    z-index: 10;
}
.secCmnEstateList .labelCheck input[type="checkbox"]:checked + .icoCheck::before{
    background: var(--subColor);
}
.secCmnEstateList .labelCheck input[type="checkbox"]:checked + .icoCheck::after{
    content: "";
    background: #fffde0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.secCmnEstateList .labelCheck svg{
    display: none;
    width: 14px;
    height: 10px;
    position: absolute;
    top: 16px;
    left: 14px;
    z-index: 10;
}
.secCmnEstateList .labelCheck use{
    fill: var(--subTxtColor);
}
.secCmnEstateList .labelCheck input[type="checkbox"]{
    display: none;
}
.secCmnEstateList .labelCheck input[type="checkbox"]:checked + .icoCheck svg{
    display: block;
}
.secCmnEstateList .tit{
    display: inline-block;
    max-width: 100%;
    font-size: 14px;
    line-height: var(--spTitLineHeight);
    color: #1d3994;
    margin-left: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 10;
}
.secCmnEstateList .boxFavorite{
    display: block;
    width: 18px;
    height: 16px;
    position: relative;
    z-index: 10;
    cursor: pointer;
}
.secCmnEstateList .boxFavorite .icoCheck::before{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: var(--subColor);
    border-radius: 3px;
    position: relative;
    z-index: 10;
}
.secCmnEstateList .boxFavorite input[type="checkbox"]:checked + .icoCheck::after{
    content: "";
    background: #fffde0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.secCmnEstateList .boxFavorite img,
.secCmnEstateList .boxFavorite svg{
    width: 18px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
}
.secCmnEstateList .boxFavorite img{
    display: none;
}
.secCmnEstateList .boxFavorite use{
    fill: var(--mainColor);
}
.secCmnEstateList .boxFavorite input[type="checkbox"]{
    display: none;
}
.secCmnEstateList .boxFavorite input[type="checkbox"]:checked + .icoFavorite img{
    display: inline;
}
.secCmnEstateList .boxFavorite input[type="checkbox"]:checked + .icoFavorite svg{
    display: none;
}
.secCmnEstateList .boxBody{
    border-top: 1px solid #dcdcdc;
    padding: 15px 10px 25px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.secCmnEstateList .boxTxt{
    width: calc(100% - 100px);
}
.secCmnEstateList .boxInfo{
    font-size: 12px;
    line-height: var(--spTxtLineHeight);
}
.secCmnEstateList .itemInfo{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.secCmnEstateList .itemInfo:nth-child(n+2){
    margin-top: 1px;
}
.secCmnEstateList .dtInfo{
    padding: 2px;
    background: #eee;
    color: var(--mainColor);
    border-radius: 2px;
    line-height: 1;
    border-radius: 3px;
}
.secCmnEstateList .ddInfo{
    width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mainColor);
}
.secCmnEstateList .txtAddress{
    font-size: 12px;
    line-height: var(--spTxtLineHeight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mainColor);
    margin-top: 5px;
}
.secCmnEstateList .txtAddress svg{
    width: 12px;
    height: 16px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 6px;
}
.secCmnEstateList .txtAddress use{
    fill: var(--mainColor);
}
.secCmnEstateList .txtPrice01{
    color: #e4301e;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
}
.secCmnEstateList .fNum01{
    font-size: 21px;
}
.secCmnEstateList .txtPrice02{
    font-size: 12px;
    text-align: right;
    color: #e4301e;
    text-decoration: line-through;
    margin-top: 5px;
}
.secCmnEstateList .fNum02{
    font-size: 14px;
}
.secCmnEstateList .boxMember{
    height: calc(100% - 222px);
    padding: 25px 0;
    background: var(--memberBgColor);
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.secCmnEstateList .titMember{
    color: var(--memberColor);
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.secCmnEstateList .svgMember{
    width: 14px;
    height: 18px;
    margin-right: 5px;
}
.secCmnEstateList .svgMember use{
    fill: var(--memberColor);
}
.secCmnEstateList .txtMember{
    color: var(--mainColor);
    font-size: 13px;
    margin-top: 10px;
}
.secCmnEstateList .boxBtnMember{
    width: 275px;
    display: flex;
    display: -webkit-flex;
    margin: 20px auto 0;
}
.secCmnEstateList .btnLogin,
.secCmnEstateList .btnMember{
    width: 130px;
    height: 35px;
    background: #fff;
    color: var(--mainColor);
    box-shadow: inset 0px -2px 0px 0px rgba(4, 0, 0, 0.2);
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    border-radius: 3px;
}
.secCmnEstateList .btnMember{
    color: var(--memberTxtColor);
    background: var(--memberColor);
    margin-left: 15px;
}
.secCmnEstateList .btnDel{
    display: inline-block;
    padding: 5px 0 5px 10px;
    position: relative;
    z-index: 10;
    cursor: pointer;
    white-space: nowrap;
    color: var(--logoutTxtColor);
    font-size: 11px;
}
@media only screen and (max-width:767px){
    .secCmnEstateList.spType01 .item{
        width: 100%;
        margin-right: 0;
    }
    .secCmnEstateList.spType01 .item:nth-child(n+2){
        margin-top: 20px;
    }
    .secCmnEstateList.spType02 .iconWrap{
        top: 11px;
        right: auto;
        left: 11px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        max-width: calc(100% - 11px);
    }
    .secCmnEstateList.spType02 .ico{
        margin-top: 2px;
    }
    .secCmnEstateList .boxMember{
        height: 140px;
    }
}
@media only screen and (max-width:767px){
    .secCmnEstateList .imgMember img{
        width: 100%;
        height: auto;
    }
    .secCmnEstateList.spType02 .item{
        width: 100%;
        margin-right: 0;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-direction: row;
        position: relative;
    }
    .secCmnEstateList.spType02 .item:nth-child(n+2){
        margin-top: 10px;
    }
    .secCmnEstateList.spType02 .txtPrice01{
        margin: 0 0 0 2px;
    }
    .secCmnEstateList.spType02 .imgExterior{
        padding-top: 75.164%;
    }
    .secCmnEstateList.spType02 .boxTit{
        order: 1;
        -webkit-order: 1;
        width: 100%;
        border-bottom: 1px solid #dcdcdc;
    }
    .secCmnEstateList.spType02 .boxHead{
        order: 2;
        -webkit-order: 2;
        width: 163px;
        padding: 11px 0 11px 11px;
    }
    .secCmnEstateList.spType02 .imgMember{
        position: relative;
        z-index: 10;
    }
    .secCmnEstateList.spType02 .icoNew{
        top: 15px;
        left: 15px;
    }
    .secCmnEstateList.spType02 .icoType{
        left: auto;
        right: -100px;
    }
    .secCmnEstateList.spType02 .boxBody,
    .secCmnEstateList.spType02 .boxMemberSp{
        order: 3;
        -webkit-order: 3;
        width: calc(100% - 163px);
        padding: 30px 10px 11px;
    }
     .secCmnEstateList.spType02 .boxBody{
        flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
        border-top: none;
    }
    .secCmnEstateList.spType02 .boxPrice{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        margin-top: 5px;
    }
    .secCmnEstateList.spType02 .boxTxt{
        width: 100%;
        margin-top: 5px;
    }
    .secCmnEstateList.spType02 .txtAddress{
        margin-top: 3px;
    }
    .secCmnEstateList.spType02 .swiper-button-prev,
    .secCmnEstateList.spType02 .swiper-button-next,
    .secCmnEstateList.spType02 .boxMember{
        display: none;
    }
    .secCmnEstateList.spType02 .titMemberSp{
        order: 1;
        -webkit-order: 1;
        width: 100%;
        font-size: 14px;
        color: var(--memberColor);
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        padding: 13px 10px;
        position: relative;
        z-index: 10;
    }
    .secCmnEstateList.spType02 .titMemberSp::after{
        content: "";
        width: 100%;
        height: 1px;
        background: var(--memberColor);
        opacity: 0.3;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .secCmnEstateList.spType02 .boxMemberSp::before{
        content: "";
        width: 100%;
        height: 100%;
        background: var(--memberBgColor);
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid var(--memberColor);
        border-radius: 3px;
    }
    .secCmnEstateList.spType02 .txtMemberSp{
        font-size: 12px;
        line-height: 1.5;
        color: var(--memberColor);
        position: relative;
        z-index: 10;
        margin-top: 7px;
    }
    .secCmnEstateList.spType02 .btnMemberSp{
        width: 165px;
        height: 35px;
        background: var(--memberColor);
        color: var(--memberTxtColor);
        font-size: 12px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        position: relative;
        z-index: 10;
        border-radius: 3px;
        box-shadow: inset 0px -2px 0px 0px rgba(4, 0, 0, 0.2);
        padding-bottom: 2px;
        margin-top: 7px;
    }
}
@media only screen and (max-width:767px){
    .secCmnEstateList.spType02 .btnMemberSp{
        width: 100%;
        font-size: 11px;
        letter-spacing: 0;
    }
}
@media only screen and (max-width:359px){
    .secCmnEstateList.spType02 .boxHead{
        width: 130px;
    }
    .secCmnEstateList.spType02 .boxBody,
    .secCmnEstateList.spType02 .boxMemberSp{
        width: calc(100% - 130px);
    }
}
@media only screen and (max-width:767px){
    .freeTxt{
        margin-top: 15px;
    }
}