/* 집주인 메인 css */
.houseOwner {}
.houseOwner .mainBanner {
    padding-top: 3.7%;
}
.houseOwner .mainBanner .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.houseOwner .mainBanner .imgArea {
    position: relative;
    margin-bottom: -5px;
    flex: 7;
}
.houseOwner .mainBanner .imgArea .woman {
    margin-left: 13%;
}
.houseOwner .mainBanner .imgArea .woman img {
    width: 100%;
}
.houseOwner .mainBanner .imgArea .house {
    position: absolute;
    bottom: 0;
    left: 0;
}
.houseOwner .mainBanner .imgArea .house img {
}
.houseOwner .mainBanner .imgArea .building {
    position: absolute;
    bottom: 0;
    right: -11%;
}
.houseOwner .mainBanner .imgArea .building img {}
.houseOwner .mainBanner .textArea {flex: 5 !important;}
.houseOwner .mainBanner .textArea .subTitle {
    font-size: 4rem;
    line-height: 1.4;
    padding-left: 10%;
}

/* 만기전 세입자 css */
.beforeTenant {}
.beforeTenant .mainBanner {
    padding-top: 3.7%;
}
.beforeTenant .mainBanner .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.beforeTenant .mainBanner .imgArea {
    position: relative;
    margin-bottom: -5px;
    flex: 7;
}
.beforeTenant .mainBanner .imgArea .woman {
    position: relative;
    z-index: 2;
    padding-right: 13%;
}
.beforeTenant .mainBanner .imgArea .woman img {
    MAX-width: 100%;
}
.beforeTenant .mainBanner .imgArea .calender {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}
.beforeTenant .mainBanner .imgArea .calender img {
}
.beforeTenant .mainBanner .imgArea .truck {
    position: absolute;
    bottom: -33px;
    right: 22%;
    z-index: 3;
}
.beforeTenant .mainBanner .imgArea .truck img {}
.beforeTenant .mainBanner .textArea {flex: 5;}
.beforeTenant .mainBanner .textArea .subTitle {
    font-size: 4rem;
    line-height: 1.4;
}
.beforeTenant .mainBanner .textArea .mainTitle {
    font-family: 'Cafe24Ohsquare';
    color: #1f378c;
    font-size: 5rem;
    margin-top: 7%;
}
.beforeTenant .mainBanner .textArea .appButton li {
    padding-left: 0 !important;
    padding-right: 2%;
}

/* 만기 세입자 css */
.afterTenant {}
.afterTenant .mainBanner {
    padding-top: 3.7%;
}
.afterTenant .mainBanner .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.afterTenant .mainBanner .imgArea {
    position: relative;
    margin-bottom: -18px;
    flex: 7;
}
.afterTenant .mainBanner .imgArea .woman {
    position: relative;
    z-index: 2;
}
.afterTenant .mainBanner .imgArea .woman img {
    max-width: 100%;
}
.afterTenant .mainBanner .imgArea .truck {
    position: absolute;
    bottom: -33px;
    right: 9%;
    z-index: 3;
}
.afterTenant .mainBanner .imgArea .truck img {}
.afterTenant .mainBanner .textArea {flex: 5;}
.afterTenant .mainBanner .textArea .subTitle {
    font-size: 4rem;
    line-height: 1.4;
}
.afterTenant .mainBanner .textArea .mainTitle {
    font-family: 'Cafe24Ohsquare';
    color: #1f378c;
    font-size: 5rem;
    margin-top: 7%;
}
.afterTenant .mainBanner .textArea .appButton li {
    padding-left: 0 !important;
    padding-right: 10px;
}

/* 서브 메인 공통 */
#wrapper .mainBanner .textArea .appButton {
    display: flex;
    margin-top: 12%;
}
#wrapper .mainBanner .textArea .appButton li {
    padding-left: 2%;
}
#wrapper .mainBanner .textArea .appButton li a {}
#wrapper .mainBanner .textArea .appButton li a img {
    border: 1px solid #fff;
    border-radius: 40px;
    transition: all 0.5s;
    max-width: 100%;
}
#wrapper .mainBanner .textArea .appButton li a:hover img {
    border-color: #1f378c;
}
#wrapper .grayBg {
    background-color: #f7f7f7;
}
#wrapper .content .textArea {
}
#wrapper .content .textArea .sectionTitle {
    font-size: 5rem;
    line-height: 1.4;
}
#wrapper .content .textArea .sectionTitle strong {
    font-family: 'Cafe24Ohsquare';
    color: #1f378c;
}
#wrapper .content .textArea .forte {
    margin-top: 30px;
}
#wrapper .content .textArea .forte li {
    font-family: 'Noto Sans KR';
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.6;
    padding-left: 25px;
    margin-bottom: 3%;
    position: relative;
}
#wrapper .content .textArea .forte li:last-child {margin-bottom: 0px;}
#wrapper .content .textArea .forte li::before {
    font-family: xeicon;
    display: block;
    content: "\e929";
    position: absolute;
    left: 0;
}
#wrapper .content .bannerArea {flex: 6;}

#wrapper .rightBanner {}
#wrapper .rightBanner .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14% 50px;
}
#wrapper .rightBanner .textArea {}
#wrapper .rightBanner .textArea .sectionTitle {}
#wrapper .rightBanner .textArea .sectionTitle strong {}
#wrapper .rightBanner .textArea .forte {}
#wrapper .rightBanner .textArea .forte li {}
#wrapper .rightBanner .textArea .forte li::before {}
#wrapper .rightBanner .bannerArea {
    text-align: right;
    padding-left: 20px;
}
#wrapper .rightBanner .bannerArea img {
    max-width: 100%;
}

#wrapper .leftBanner {}
#wrapper .leftBanner .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14% 50px;
}
#wrapper .leftBanner .bannerArea {
    padding-right: 20px;
}
#wrapper .leftBanner .bannerArea img {
    max-width: 100%;
}
#wrapper .leftBanner .textArea {}
#wrapper .leftBanner .textArea .sectionTitle {}
#wrapper .leftBanner .textArea .sectionTitle strong {}
#wrapper .leftBanner .textArea .forte {}
#wrapper .leftBanner .textArea .forte li {}
#wrapper .leftBanner .textArea .forte li::before {}


@media (min-width: 587px) {
}

@media (max-width: 1200px) {
    .houseOwner .mainBanner .imgArea .house {
    }
    .houseOwner .mainBanner .imgArea .house img {
    width: 90%;
}
    .houseOwner .mainBanner .imgArea .building {
        right: -14%;
    }
    .houseOwner .mainBanner .imgArea .building img {
    width: 90%;
}

    .beforeTenant .mainBanner .imgArea .calender {
        right: 0;
        text-align: right;
    }
    .beforeTenant .mainBanner .imgArea .calender img {
    width: 90%;
}
    .beforeTenant .mainBanner .imgArea .truck {
    right: 20%;
    bottom: -29px;
    }
    .beforeTenant .mainBanner .imgArea .truck img {
    width: 90%;
}

    .afterTenant .mainBanner .imgArea .truck {
        bottom: -30px;
        right: 7%;
    }
    .afterTenant .mainBanner .imgArea .truck img {
    width: 90%;
}

}

@media (max-width: 1024px) {
    .houseOwner .mainBanner .imgArea .house {
    }
    .houseOwner .mainBanner .imgArea .house img {
    width: 80%;
}
    .houseOwner .mainBanner .imgArea .building {
        right: -17%;
    }
    .houseOwner .mainBanner .imgArea .building img {
    width: 80%;
}

    .beforeTenant .mainBanner .imgArea .calender {
        bottom: 0;
        right: 0;
    }
    .beforeTenant .mainBanner .imgArea .calender img {
    width: 80%;
}
    .beforeTenant .mainBanner .imgArea .truck {
    bottom: -26px;
    right: 14%;
    }
    .beforeTenant .mainBanner .imgArea .truck img {
    width: 80%;
}

    .afterTenant .mainBanner .imgArea .truck {
        bottom: -27px;
        right: 2%;
    }
    .afterTenant .mainBanner .imgArea .truck img {
    width: 80%;
}

}

@media (max-width: 768px) {
    .houseOwner {}
    .houseOwner .mainBanner {
    }
    .houseOwner .mainBanner .content {
    flex-direction: column;
    align-items: flex-start;
    }
    .houseOwner .mainBanner .imgArea {
    order: 2;
    margin-bottom: -3px;
    }
    .houseOwner .mainBanner .imgArea .woman {
    margin: 0 8%;
    }
    .houseOwner .mainBanner .imgArea .woman img {
    }
    .houseOwner .mainBanner .imgArea .house {
    padding-left: 5px;
    }
    .houseOwner .mainBanner .imgArea .house img {
        width: 50%;
    }
    .houseOwner .mainBanner .imgArea .building {
        right: 0;
        text-align: right;
        padding-right: 5px;
    }
    .houseOwner .mainBanner .imgArea .building img {
        width: 50%;
    }
    .houseOwner .mainBanner .textArea {
    width: 100%;
    order: 1;
    text-align: left !important;
}
    .houseOwner .mainBanner .textArea .subTitle {
    font-size: 4.5rem;
    padding-left: 7%;
    padding-top: 3%;
    }

    /* 만기전 세입자 css */
    .beforeTenant {}
    .beforeTenant .mainBanner {
    }
    .beforeTenant .mainBanner .content {
    flex-direction: column;
    align-items: flex-start;
    }
    .beforeTenant .mainBanner .imgArea {
    margin-bottom: -3px;
    }
    .beforeTenant .mainBanner .imgArea .woman {
    }
    .beforeTenant .mainBanner .imgArea .woman img {
    }
    .beforeTenant .mainBanner .imgArea .calender {
        bottom: 0;
        right: 0;
    }
    .beforeTenant .mainBanner .imgArea .calender img {
        width: 50%;
    }
    .beforeTenant .mainBanner .imgArea .truck {
        right: 25%;
        bottom: -11px;
        text-align: right;
    }
    .beforeTenant .mainBanner .imgArea .truck img {
        width: 50%;
    }
    .beforeTenant .mainBanner .textArea {
    width: 100%;
    text-align: left !important;
}
    .beforeTenant .mainBanner .textArea .subTitle {
    padding-left: 7%;
    padding-top: 3%;
    }
    .beforeTenant .mainBanner .textArea .mainTitle {
    padding-left: 7%;
    margin-top: 3%;
    }
    .beforeTenant .mainBanner .textArea .appButton li {
    }

    /* 만기 세입자 css */
    .afterTenant {}
    .afterTenant .mainBanner {
    }
    .afterTenant .mainBanner .content {
    flex-direction: column;
    align-items: flex-start;
    }
    .afterTenant .mainBanner .imgArea {
    margin-bottom: -10px;
    }
    .afterTenant .mainBanner .imgArea .woman {
    }
    .afterTenant .mainBanner .imgArea .woman img {
    }
    .afterTenant .mainBanner .imgArea .truck {
        bottom: -6px;
        right: 0%;
        text-align: right;
    }
    .afterTenant .mainBanner .imgArea .truck img {
        width: 50%;
    }
    .afterTenant .mainBanner .textArea {
    width: 100%;
    text-align: left !important;
}
    .afterTenant .mainBanner .textArea .subTitle {
    padding-left: 7%;
    padding-top: 3%;
    }
    .afterTenant .mainBanner .textArea .mainTitle {
    padding-left: 7%;
    margin-top: 3%;
    }
    .afterTenant .mainBanner .textArea .appButton li {
    }

    /* 서브 메인 공통 */
    #wrapper .mainBanner .appDown {order: 3;display: flex !important;width: 100%;border-radius: 10px;background-color: #1f378c;}
    #wrapper .mainBanner .appDown li {
    width: 50%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-left: 1px solid #fff;
}
    #wrapper .mainBanner .appDown li a {
    color: #fff;
    display: block;
    font-size: 3rem;
}
    #wrapper .mainBanner .appDown li a i {
    vertical-align: middle;
}

    #wrapper .grayBg {}
    #wrapper .content .textArea {
    text-align: center;
}
    #wrapper .content .textArea .sectionTitle {
    }
    #wrapper .content .textArea .sectionTitle strong {
    }
    #wrapper .content .textArea .forte {
    margin-top: 10px;
    }
    #wrapper .content .textArea .forte li {
    padding-left: 0;
    font-size: 3rem;
    }
    #wrapper .content .textArea .forte li:last-child {}
    #wrapper .content .textArea .forte li::before {
    position: unset;
    display: inline-block;
    padding-right: 5px;
    }
    #wrapper .content .bannerArea {
    padding: 40px 0 0;
    order: 2;
}

    #wrapper .rightBanner {}
    #wrapper .rightBanner .content {
    flex-direction: column;
    padding: 60px 20px;
    }
    #wrapper .rightBanner .textArea {}
    #wrapper .rightBanner .textArea .sectionTitle {}
    #wrapper .rightBanner .textArea .sectionTitle strong {}
    #wrapper .rightBanner .textArea .forte {}
    #wrapper .rightBanner .textArea .forte li {}
    #wrapper .rightBanner .textArea .forte li::before {}
    #wrapper .rightBanner .bannerArea {
    }
    #wrapper .rightBanner .bannerArea img {
    }

    #wrapper .leftBanner {}
    #wrapper .leftBanner .content {
    flex-direction: column;
    padding: 60px 20px;
    }
    #wrapper .leftBanner .bannerArea {
    }
    #wrapper .leftBanner .bannerArea img {
    }
    #wrapper .leftBanner .textArea {}
    #wrapper .leftBanner .textArea .sectionTitle {}
    #wrapper .leftBanner .textArea .sectionTitle strong {}
    #wrapper .leftBanner .textArea .forte {}
    #wrapper .leftBanner .textArea .forte li {}
    #wrapper .leftBanner .textArea .forte li::before {}
}

@media all and (max-width: 586px) {

}