@charset "utf-8";

/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/

#content {
    padding-bottom: clamp(30px, 9.1vw, 38px);
}

.areaMain {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: url(../images/index/bacground-main.png) no-repeat bottom;
    padding: 26px 0 47px;
    background-size: cover;
}

.areaMain .title-main {
    float: left;
    width: 600px;
    margin-left: -1px;
    margin-top: 11px;
}

.areaMain .wrapMain {
    position: relative;
    float: right;
    width: 442px;
}

.areaMain .wrapMain .photo-main {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: -17px;
    z-index: 3;
}

.areaMain .wrapMain .photo-main img {
    width: 100%;
}

.areaMain .wrapMain .mainInfo {
    position: relative;
    max-width: 374px;
    width: 100%;
    z-index: 2;
    background-color: #f2f3f5;
    border-radius: 10px;
    padding: 11px 95px 14px 31px;
    margin-top: 15px;
}

.areaMain .wrapMain .mainInfo .wrapMainTitle {
    display: inline-block;
    text-align: center;
    font-size: 21px;
    border-bottom: 2px dotted #aaaaaa;
    letter-spacing: 0.2px;
    line-height: 1.55;
    padding-bottom: 8px;
    margin-bottom: 2px;
}

.areaMain .wrapMain .mainInfo .boxConsul {
    text-align: center;
    font-size: 16px;
    margin-bottom: 9px;
}

.areaMain .wrapMain .mainInfo .infoRed {
    color: #e00404;
    font-size: 20px;
    font-weight: bold;
}

.areaMain .wrapMain .mainInfo .boxConsul .infoRed {
    font-size: 23px;
    margin-left: 24px;
}

.areaMain .wrapMain .mainInfo .infoList {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
}

.areaMain .wrapMain .mainInfo .infoList li {
    display: inline-block;
    width: 118px;
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;
}

.areaMain .wrapMain .mainInfo .infoList .listSub {
    line-height: 1.3;
}

.areaBannerBetween .bannerPhoto {
    margin-bottom: 129px;
}

.areaListReview {
    margin-bottom: 0;
}

@media(max-width:1200px) and (min-width:769px) {

    .navigation-wrapper .arrow.arrow--left {
        left: 0;
    }

    .navigation-wrapper .arrow.arrow--right {
        right: -9px;
    }
}

@media(max-width:1130px) and (min-width:769px) {
    .areaMain .title-main {
        width: 50%;
    }

    .areaMain .wrapMain {
        width: 48%;
    }
}

@media(max-width:975px) and (min-width:769px) {
    .areaMain .wrapMain .mainInfo .wrapMainTitle {
        font-size: 18px;
    }

    .areaMain .wrapMain .photo-main {
        right: -17px;
        width: 30%;
    }
}

@media(max-width:965px) and (min-width:769px) {
    .areaMain .wrapMain .mainInfo .boxConsul {
        font-size: 15px;
        margin-bottom: 0;
    }

    .areaMain .wrapMain .mainInfo .boxConsul .infoRed {
        font-size: 21px;
    }

    .areaMain .wrapMain .mainInfo .infoRed {
        font-size: 18px;
    }

    .areaMain .wrapMain .mainInfo .infoList li {
        width: 48%;
    }
}


@media(max-width:825px) and (min-width:769px) {
    .areaMain .wrapMain .mainInfo {
        bottom: 18px;
        left: 24px;
    }
}

@media (min-width:769px) {
    .hover {
        transition: opacity 0.3s ease;
    }
}

@media (max-width: 768px) {
    .areaMain {
        padding: 2px 0 23px;
        background: url(../images/index/bacground-main-sp.png) no-repeat bottom;
        background-size: cover;
    }

    .areaMain .title-main {
        float: none;
        width: 347px;
        margin: 11px auto 20px;
    }

    .areaMain .wrapMain {
        float: none;
        width: 288px;
        margin: 0 auto;
    }

    .areaMain .wrapMain .photo-main {
        right: -40px;
        bottom: -12px;
        width: 40.5%;
    }

    .areaMain .wrapMain .mainInfo {
        width: 100%;
        z-index: 2;
        padding: 9px 84px 10px 24px;
        border-radius: 5px;
    }

    .areaMain .wrapMain .mainInfo .wrapMainTitle {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .areaMain .wrapMain .mainInfo .boxConsul {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .areaMain .wrapMain .mainInfo .infoRed {
        font-size: 15px;
    }

    .areaMain .wrapMain .mainInfo .boxConsul .infoRed {
        font-size: 17px;
        margin-left: 18px;
    }

    .areaMain .wrapMain .mainInfo .infoList li {
        width: 48%;
        padding: 3px 5px 2px;
        border-radius: 5px;
    }

    .areaMain .wrapMain .mainInfo .infoList .listSub {
        /* FB349 */
        font-size: 13px;
        /* END FB349 */
        line-height: 1.4;
        letter-spacing: 0.7px;
    }

    .areaBannerBetween .bannerPhoto {
        margin: 0 auto 60px;
    }

}

@media (max-width: 667px) {
    .areaGarbage .listGarbagePost .wrapGarbagePostList {
        margin-left: -3px;
    }
}

@media (max-width: 414px) {

    .areaGarbage .listGarbagePost .wrapGarbagePostList {
        margin-left: -6px;
    }

    .areaMain .wrapMain {
        margin-left: 10px;
    }
}


/* AREAESTTOP */
.areaEstTop {
    margin: 35px 0 40px;
}

.areaEstTop .inner {
    max-width: 1160px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

.areaEstTop .wrapEstTop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #DDF6F4;
    padding: 26px 10px 26px 10px;
    justify-content: space-between;
    border-radius: 10px;
}

.areaEstTop .wrapEstTop .wrapEstRight {
    width: 22%;
    margin-top: 1px;
}

.areaEstTop .wrapEstTop .wrapEstRight .wrapEstTitle {
    margin-bottom: 10px;
}

.areaEstTop .wrapEstTop .wrapEstRight .wrapEstTitle .estRightPhoto {
    width: 42px;
    margin: 0 auto 11px;
}

.areaEstTop .wrapEstTop .wrapEstRight .wrapEstTitle .estRightPhoto img {
    width: 100%;
}

.areaEstTop .wrapEstTop .wrapEstRight .wrapEstTitle .titleEstRight {
    font-size: 24px;
    text-align: center;
    color: #01BCAD;
    font-weight: bold;
    letter-spacing: 3px;
}

.areaEstTop .wrapEstTop .wrapEstRight .txtEstRight {
    font-size: 16px;
    text-align: center;
    color: #303030;
    letter-spacing: 1px;
    line-height: 1.65;
    font-weight: 500;
}

.areaEstTop .wrapEstTop .wrapFormTop {
    width: 77.9%;
}

.areaEstTop .wrapEstTop .wrapFormTop form {
    display: flex;
    align-items: center;
}

.areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem {
    background: #ffffff;
    border-radius: 0 10px 10px 10px;
    position: relative;
    width: 291px;
    margin-right: 15px;
    min-height: 231.5px;
}

.areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem .wrapTitleNumber {
    display: flex;
    align-items: flex-end;
    margin-bottom: 18px;
}

.areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem .numberCollecItem {
    background: #01BCAD;
    text-align: center;
    border-radius: 0 0 18px 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 17px 8px 14px;
    font-size: 20px;
    font-weight: bold;
    margin-right: 16px
}

.areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem .titleCollectItem {
    font-size: 18px;
    color: #303030;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 0 10px 5px;
}

.areaEstTop .wrapEstTop .wpcf7-form-control-wrap {
    display: block;
}

.areaEstTop .wrapEstTop .wpcf7-form-control {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 22px 9px;
}

.areaEstTop .wrapEstTop span.wpcf7-list-item {
    cursor: pointer;
    display: block;
    width: 48.1%;
    margin-bottom: 10px;
    margin: 0 0 9px;
}

.areaEstTop .wrapEstTop input {
    display: none !important;
}

.areaEstTop .wrapEstTop .wpcf7-form-control-wrap input {
    border: 3px solid #1572E9;
    width: 100%;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 10px;
    transition: .3s;
    background-color: #f7f7f7;
    outline: none;
    margin: 0;
    max-width: 100%;
    cursor: pointer;
    appearance: button;
}

.areaEstTop .wrapEstTop .wpcf7-list-item-label {
    padding: 10px 10px 9px 10px;
    border-radius: 0;
    display: block;
    border: solid 1px #01BCAD;
    color: #01BCAD;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
    letter-spacing: 1px;
}

.areaEstTop .wrapEstTop span.wpcf7-list-item-label:hover {
    background: #01BCAD;
    color: #ffffff;
}

.areaEstTop .wrapEstTop input:checked+.wpcf7-list-item-label,
.areaEstTop .wrapEstTop input:checked+.wpcf7-list-item-label,
.areaEstTop .wrapEstTop input:checked+.wpcf7-list-item-label {
    background: #01BCAD;
    color: #fff;
    border: solid 1px #01BCAD;
    transition: .5s;
}

.areaEstTop .wrapEstTop span.wpcf7-list-item-label {
    cursor: pointer;
    width: 100%;
}

.areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn {
    font-size: 14px;
    text-align: justify;
    background: #FC9C27;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 4px 0 0px rgba(251, 136, 0, 1.0);
    display: block !important;
    color: #ffffff;
    font-weight: bold;
    padding: 6px 30px 10px 36px;
    width: 168px;
    height: 132px;
    position: relative;
    margin: -3px 0 0 19px;
    font-family: 'Noto Sans JP', sans-serif;
}

.areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 0 solid transparent;
    border-right: 9px solid #ffffff;
    bottom: 11px;
    right: 10px;
}

.areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn span {
    font-size: 26px;
    display: block;
    letter-spacing: 3px;
    margin-top: -2px;
    margin-bottom: 3px;
}

@media (max-width: 1100px) and (min-width: 769px) {
    .areaEstTop .wrapEstTop .wrapEstRight {
        width: calc(100% - 781px);
        padding: 0 20px;
    }

    .areaEstTop .wrapEstTop .wrapFormTop {
        width: 781px;
    }
}

@media (max-width: 1060px) and (min-width: 769px) {
    .areaEstTop .wrapEstTop {
        flex-direction: column;
    }

    .areaEstTop .wrapEstTop .wrapEstRight {
        width: 100%;
        margin-bottom: 20px;
    }

    .areaEstTop .wrapEstTop .wrapEstRight .txtEstRight br {
        display: none;
    }

    .areaEstTop .wrapEstTop .wrapFormTop {
        width: 100%;
    }

    .areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem {
        width: 39%;
        margin-right: 2%;
    }

    .areaEstTop .wrapEstTop .wpcf7-list-item-label {
        letter-spacing: 1px;
        padding: 10px 10px 9px;
    }

    .areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn {
        margin-left: 10px;
        padding: 6px 20px 10px 20px;
        width: 145px;
        height: 114px;
    }
}

@media (min-width: 769px) {
    .areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn:hover {
        background: #01BCAD;
        box-shadow: 0px 4px 0 0px rgb(0 143 132);
    }
}

@media (max-width: 768px) {
    .areaEstTop {
        margin: 0;
    }

    .areaEstTop .inner {
        padding: 0;
    }

    .areaEstTop .wrapEstTop {
        flex-direction: column;
        padding: 26px 5.3% 30px;
        border-radius: 0;
    }

    .areaEstTop .wrapEstTop .wrapEstRight {
        width: 100%;
        margin-top: 0;
        margin-bottom: 23px;
    }

    .areaEstTop .wrapEstTop .wrapEstRight .wrapEstTitle {
        display: flex;
        justify-content: center;
    }

    .areaEstTop .wrapEstTop .wrapEstRight .wrapEstTitle .estRightPhoto {
        width: 25px;
        margin: 0;
    }

    .areaEstTop .wrapEstTop .wrapEstRight .wrapEstTitle .titleEstRight {
        font-size: 22px;
        letter-spacing: 2px;
        margin-left: 15px;
        margin-top: 0px;
    }

    .areaEstTop .wrapEstTop .wrapEstRight .txtEstRight {
        font-size: 14px;
    }

    .areaEstTop .wrapEstTop .wrapEstRight .txtEstRight br {
        display: none;
    }

    .areaEstTop .wrapEstTop .wrapFormTop {
        width: 100%;
        max-width: 500px;
    }

    .areaEstTop .wrapEstTop .wrapFormTop form {
        flex-direction: column;
    }

    .areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem {
        width: 100%;
        margin-right: 0;
        min-height: inherit;
        margin-bottom: 14px;
        display: flex;
        padding: 0 15px 9px 19px;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
    }

    .areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem .wrapTitleNumber {
        width: 65px;
        display: block;
        margin-bottom: 0;
    }

    .areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem .numberCollecItem {
        border-radius: 0 0 8px 8px;
        padding: 2px 4px 5px 5px;
        font-size: 16px;
        margin-right: 0;
        margin-left: 5px;
        width: 53px;
        position: absolute;
        top: 0;
        left: auto;
        letter-spacing: 1px;
    }

    .areaEstTop .wrapEstTop .wrapFormTop .wrapCollectItem .titleCollectItem {
        font-size: 14px;
        letter-spacing: 1.5px;
        padding: 16px 0 0;
    }

    .areaEstTop .wrapEstTop .wpcf7-form-control-wrap {
        width: calc(100% - 81px);
        padding-top: 17px;
    }

    .areaEstTop .wrapEstTop .wpcf7-form-control {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
    }

    .areaEstTop .wrapEstTop .wpcf7-list-item-label {
        font-size: 14px;
        padding: 5px 10px 5px 10px;
        letter-spacing: 1px;
    }

    .areaEstTop .wrapEstTop span.wpcf7-list-item {
        width: 49%;
        margin-bottom: 5px;
    }

    .areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn {
        font-size: 14px;
        border-radius: 8px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 9px 17px 6px 15px;
        width: 263px;
        height: inherit;
        margin: 1px 0 0;
        max-width: inherit;
        letter-spacing: 1.5px;
    }

    .areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn span {
        font-size: 22px;
        display: inline-block;
        letter-spacing: 3px;
        margin-top: 0;
        margin-right: 10px;
    }

    .areaEstTop .wrapEstTop button.wpcf7-form-control.wpcf7-submit.btn:after {
        bottom: 7px;
        right: 8px;
    }
}

@media (max-width: 360px) {
    .areaGarbage .listGarbagePost .garbagePostList {
        margin-left: -4.6%;
    }
}


/* End Row 432 */
body {
    background-color: #F4ECE4;
}
/* areaMain */
.areaMain {
    background: transparent;
    color: #333333;
    padding-bottom: 0;
    margin-bottom: 10px;
}
.areaMain .wrapMain {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    width: 100%;
    padding: 0 20px;
    margin-bottom: -44px;
}
.areaMain .wrapMain .mainInfo {
    position: relative;
    width: 686px;
    max-width: none;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-right: -15.4%;
    z-index: 1;
}
.areaMain .wrapMain .mainInfo .infoIntro {
    font-size: 55px;
    font-weight: bold;
    letter-spacing: 2.2px;
    line-height: 1.46;
    margin-bottom: 24px;
}
.areaMain .wrapMain .mainInfo .infoIntro .introGreen {
    display: inline-block;
    color: #39B767;
    margin-right: 5px;
}
.areaMain .wrapMain .mainInfo .infoBox {
    width: 100%;
    max-width: 566px;
    text-align: center;
    border: 3px solid #333333;
    border-bottom-width: 0;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    padding: 28px 30px 33px;
}
.areaMain .wrapMain .mainInfo .infoBox .infoNote {
    text-align: center;
    font-size: 22px;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.areaMain .wrapMain .mainInfo .infoBox .infoNote .line {
    position: relative;
    padding: 0 20px;
}
.areaMain .wrapMain .mainInfo .infoBox .infoNote .line::before,
.areaMain .wrapMain .mainInfo .infoBox .infoNote .line::after  {
    content: "";
    position: absolute;
    top: 58%;
    left: 1px;
    transform: translateY(-50%) rotate(-30deg);
    width: 2px;
    height: 34px;
    background-color: #333333;
}
.areaMain .wrapMain .mainInfo .infoBox .infoNote .line::after  {
    left: auto;
    right: 1px;
    transform: translateY(-50%) rotate(30deg);
}
.areaMain .wrapMain .mainInfo .infoBox .infoSub {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1px;
}
.areaMain .wrapMain .mainInfo .infoBox .infoSub .infoRed {
    display: inline-block;
    color: #FE4710;
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 3px;
    margin: 0 -4px 0 1px;
}
.areaMain .wrapMain .mainPhoto {
    width: calc(100% - 474px);
    margin-right: -10%;
    margin-top: -7px;
}
.areaMain .mainEstimate {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.areaMain .mainEstimate .estimateBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(50% - 5px);
    border: 3px solid #333333;
    background-color: #E5F6F1;
    border-radius: 16px;
    padding: 22px;
}
.areaMain .mainEstimate .estimateBox .estimateIcon {
    width: 28.4%;
}
.areaMain .mainEstimate .estimateBox .estimateName {
    flex: 1;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.25;
    transform: translateY(-3px);
    letter-spacing: 1px;
} 
.areaMain .mainEstimate .estimateBox .estimateName .nameGreen {
    display: block;
    color: #39B767;
}
.areaMain .mainEstimate .estimateBox .estimateBtn {
    width: 139px;
}
.areaMain .mainEstimate .estimateBox .estimateBtn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 139 / 147;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    background-color: #FE6F10;
    box-shadow: 0 4px 0 #C4570E;
    border-radius: 10px;
    padding: 0px 0 12px 0;
    letter-spacing: 1px;
    transition: all .3s;
}
.areaMain .mainEstimate .estimateBox .estimateBtn a .icon {
    position: relative;
}
.areaMain .mainEstimate .estimateBox .estimateBtn a .icon::before {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 51%;
    transform: translateX(-50%);
    width: 18px;
    aspect-ratio: 1 / 1;
    background: url(../images/index/main-icon-arrow.svg)no-repeat center/100%;
}
.areaMain .mainEstimate .estimateBox.boxSimu {
    position: relative;
    background-color: #7EF5AA;
    z-index: 1;
}
.areaMain .mainEstimate .estimateBox.boxSimu::before,
.areaMain .mainEstimate .estimateBox.boxSimu::after  {
    content: "";
    position: absolute;
    top: 0;
    left: 0.5%;
    width: 21%;
    aspect-ratio: 37 / 25;
    background: url(../images/index/main-photo-03.png) no-repeat bottom center / 100%;
    z-index: -1;
}
.areaMain .mainEstimate .estimateBox.boxSimu::after {
    top: auto;
    bottom: 0;
    right: 19.3%;
    left: auto;
    width: 20.5%;
    aspect-ratio: 37 / 24;
    background: url(../images/index/main-photo-04.png)no-repeat top center/100%;
}
.areaMain .mainEstimate .estimateBox.boxSimu .estimateName {
    padding-left: 10px;
}

@media(max-width: 1300px) and (min-width: 769px) {
    .areaMain .wrapMain {
        margin-bottom: -1vw;
    }
}
@media(max-width: 1220px) and (min-width: 769px) {
    .areaMain .wrapMain {
        margin-bottom: -0.5vw;
    }
}
@media(max-width: 1200px) and (min-width: 769px) {
    .areaMain .wrapMain {
        align-items: flex-end;
        padding: 0;
        margin-bottom: 20px;
    }
    .areaMain .wrapMain .mainInfo {
        width: 69%;
        margin-right: -19.4%;
    }
    .areaMain .wrapMain .mainInfo .infoIntro {
        font-size: 50px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoNote {
        font-size: 20px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub {
        font-size: 26px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub .infoRed {
        font-size: 70px;
    }
    .areaMain .wrapMain .mainPhoto {
        width: 51%;
    }
}
@media(max-width: 1150px) and (min-width: 769px) {
    .areaMain .mainEstimate .estimateBox {
        padding: 15px;
    }
    .areaMain .mainEstimate .estimateBox .estimateName {
        font-size: 32px;
    }
    .areaMain .mainEstimate .estimateBox .estimateIcon {
        width: 25%;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn {
        width: 125px;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn a {
        font-size: 26px;
    }
}
@media(max-width: 1000px) and (min-width: 769px) {
    .areaMain .wrapMain .mainInfo {
        width: 58%;
        margin-right: -6.4%;
    }
    .areaMain .wrapMain .mainInfo .infoIntro {
        font-size: 45px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoNote {
        font-size: 18px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub {
        font-size: 22px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub .infoRed {
        font-size: 60px;
    }
    .areaMain .wrapMain .mainPhoto {
        width: 49%;
    }
}
@media(max-width: 1000px) and (min-width: 769px) {
    .areaMain .wrapMain .mainInfo .infoIntro {
        font-size: 40px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoNote {
        font-size: 16px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub {
        font-size: 20px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub .infoRed {
        font-size: 52px;
    }
}
@media(max-width: 950px) and (min-width: 769px) {
    .areaMain .mainEstimate .estimateBox .estimateName {
        font-size: 26px;
    }
    .areaMain .mainEstimate .estimateBox .estimateIcon {
        width: 20%;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn {
        width: 105px;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn a {
        font-size: 20px;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn a .icon::before {
        bottom: -20px;
        width: 15px;
    }
}
@media (max-width: 825px) and (min-width: 769px) {
    .areaMain .wrapMain .mainInfo {
        left: auto; 
        bottom: auto;
    }
    .areaMain .wrapMain .mainInfo .infoIntro {
        font-size: 36px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoNote {
        font-size: 14px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub {
        font-size: 18px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub .infoRed {
        font-size: 46px;
    }
    .areaMain .mainEstimate .estimateBox .estimateName {
        font-size: 24px;
    }
    .areaMain .mainEstimate .estimateBox .estimateIcon {
        width: 18%;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn {
        width: 95px;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn a {
        font-size: 18px;
    }
}
@media (min-width: 769px) {
    .areaMain .mainEstimate .estimateBox .estimateBtn a:hover {
        box-shadow: none;
        transform: translateY(4px);
    }
}

@media(max-width: 768px) {
    .areaMain .wrapMain {
        padding: 0;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .areaMain .wrapMain .mainInfo {
        width: 100%;
        margin: 0;
    }
    .areaMain .wrapMain .mainInfo .infoIntro {
        font-size: 26px;
        text-align: center;
    }
    .areaMain .wrapMain .mainPhoto {
        width: 100%;
        max-width: 450px;
        margin: 0 auto -20px;
    }
    .areaMain .wrapMain .mainInfo .infoBox {
        position: relative;
        max-width: none;
        padding: 20px 15px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoNote {
        font-size: 16px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoNote .line {
        padding: 0 10px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoNote .line::before,
    .areaMain .wrapMain .mainInfo .infoBox .infoNote .line::after {
        height: 22px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub {
        font-size: 18px;
    }
    .areaMain .wrapMain .mainInfo .infoBox .infoSub .infoRed {
        font-size: 42px;
    }
    .areaMain .mainEstimate .estimateBox {
        padding: 15px;
        width: 100%;
    }
    .areaMain .mainEstimate .estimateBox .estimateIcon {
        width: 20%;
    }
    .areaMain .mainEstimate .estimateBox .estimateName {
        font-size: 20px;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn {
        width: 95px;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn a {
        font-size: 18px;
    }
    .areaMain .mainEstimate .estimateBox .estimateBtn a .icon::before {
        bottom: -18px;
        width: 15px;
    }
    .areaMain .mainEstimate .estimateBox.boxSimu {
        display: none;
    }
    .areaMain .mainEstimate .estimateBox.boxSimu::before {
        width: 18%;
    }
    .areaMain .mainEstimate .estimateBox.boxSimu::after {
        width: 17%;
    }
}

@media(max-width: 430px) {
    .areaMain .mainEstimate .estimateBox {
        width: 100%;
    }
    .areaMain .mainEstimate .estimateBox .estimateIcon {
        width: 30%;
    }
}
/* areaMain */

/* areaMapSearch */
.areaMapSearch {
    background-color: #f2f3f5;
    overflow: hidden;
    padding: 39px 0 37px;
}

.areaMapSearch .areaMap {
    position: relative;
    float: left;
    width: 56.5%;
    background: #FFF;
    border-radius: 15px;
    padding: 0 0 0 13px;
}

.areaMapSearch .areaMap .titleMap {
    position: relative;
    font-size: 25px;
    font-weight: bold;
    background: transparent;
    padding-left: 58px;
    margin-bottom: 26px;
}

/* areaMapSearch */
.areaMapSearch {
    background-color: transparent;
    padding: 0;
    margin-bottom: 10px;
}
.areaMapSearch .mapSearchWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(30px, 5.9vw, 38px) clamp(30px, 5.6vw, 39px) clamp(30px, 5.9vw, 31px);
}
.areaMapSearch .mapSearchWrap .areaMap .titleMap::before {
    content: "";
    position: absolute;
    top: -7px;
    left: -11px;
    width: 50px;
    aspect-ratio: 48/49;
    background: url(../images/index/map_icon.png)no-repeat center/100%;
}
.areaMapSearch .mapSearchWrap .areaMap .mapGroup {
    background: transparent;
    padding: 0;
}
.areaMapSearch .mapSearchWrap .areaMap .mapGroup .mapPhoto {
    top: 36px;
}
.mapGroup {
    position: relative;
    float: left;
    width: 100%;
    background: #f2f3f5;
    padding: 14px 5px 10px 10px;
}

.mapGroup .groupPosition {
    position: relative;
    float: left;
    width: 100%;
    z-index: 3;
}

.mapGroup .groupPosition .boxPosition {
    width: 109px;
    float: left;
}

.mapGroup .groupPosition .groupOne {
    margin: 0 auto;
    overflow: hidden;
}

.mapGroup .groupPosition .boxPosition .titlePosition {
    display: block;
    color: #fff;
    text-align: center;
    margin-top: 4px;
    font-size: 14px;
    font-weight: normal;
}

.mapGroup .groupPosition .boxPosition .positionList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-left: 6px;
}

.mapGroup .groupPosition .boxPosition .positionList>li {
    display: inline-block;
    width: 45px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 4px;
    margin-right: 5px;
}

.mapGroup .groupPosition .boxPosition .positionList>li:nth-child(2n) {
    /* margin-left: 3px; */
}

.mapGroup .groupPosition .boxPosition .positionList>li a {
    background: #fff;
    display: block;
    border-radius: 5px;
    padding: 3px 0px 4px 0px;
    font-size: 12px;
}

.mapGroup .groupPosition .groupOne .positionOne {
    float: left;
    width: 145px;
    background: url(../images/index/background-positionOne.png) no-repeat;
    margin-left: 2px;
    margin-top: 55px;
    padding: 0 37px 7px 0;
}

.mapGroup .groupPosition .groupOne .positionTwo {
    float: left;
    padding: 0px 0px 25px 1px;
    width: 110px;
    background: url(../images/index/background-positionTwo.png) no-repeat;
    margin-left: -20px;
    margin-top: 10px;
    background-size: 100% 100%;
}

.mapGroup .groupPosition .groupOne .positionTwo.boxPosition .positionList {
    margin-top: 5px;
    padding-left: 5px;
}

.mapGroup .groupPosition .groupOne .positionThree {
    float: left;
    padding: 0px 1px 4px 1px;
    width: 110px;
    background: url(../images/index/background-positionThree.png) no-repeat;
    margin-left: 10px;
    margin-top: 10px;
}

.mapGroup .groupPosition .groupOne .groupFF {
    float: right;
    width: 200px;
}

.mapGroup .groupPosition .groupOne .groupFF .positionFour {
    float: right;
    padding-left: 18px;
    padding-bottom: 4px;
    width: 178px;
    background: url(../images/index/background-positionFour.png) no-repeat;
    background-size: auto;
}

.mapGroup .groupPosition .boxPosition.positionFour .positionList {
    padding-left: 5px;
}

.mapGroup .groupPosition .groupOne .groupFF .positionFive {
    float: right;
    padding: 0px 1px 4px 18px;
    width: 178px;
    margin-top: 17px;
    margin-right: 12px;
    background: url(../images/index/background-positionFive.png) no-repeat;
    background-size: 100% 100%;
}

.mapGroup .groupPosition .boxPosition.positionFive .positionList {
    padding-left: 5px;
}

.mapGroup .groupPosition .groupTwo {
    float: left;
}

.mapGroup .groupPosition .groupTwo .positionSix {
    background: url(../images/index/background-positionSix.png) no-repeat;
    background-size: 100% 100%;
    width: 132px;
    padding-right: 21px;
    padding-bottom: 4px;
    margin-left: 20px;
    margin-top: -74px;
}

.mapGroup .groupPosition .groupTwo .positionSeven {
    background: url(../images/index/background-positionSeven.png) no-repeat;
    width: 212px;
    padding: 18px 0 8px 0;
    margin-left: 10px;
    margin-top: -3px;
}

.mapGroup .groupPosition .boxPosition.positionSeven .positionList {
    padding-left: 8px;
}

.mapGroup .groupPosition .groupTwo .positionEight {
    background: url(../images/index/background-positionEight.png) no-repeat;
    width: 215px;
    margin-left: 15px;
    margin-top: -3px;
    padding: 18px 0 8px 0;
}

.mapGroup .groupPosition .boxPosition.positionEight .positionList {
    padding-left: 8px;
}

.mapGroup .mapPhoto {
    position: absolute;
    width: 617px;
    text-align: center;
    top: 50px;
    padding-left: 0;
    z-index: 0;
}

/* mapGroup */

/*mapBox*/
.mapBox {
    bottom: 10px;
    left: 13px;
    height: calc(100% - 57px);
}

.areaSearch .mapBox {
    bottom: 13px;
    height: calc(100% - 25px);
}
/*mapBox*/

.areaMapSearch .mapSearchWrap .areaSearchService {
    width: calc(41.4% - 10px);
    transform: translateY(-1px);
    margin: 0;
}

.areaMapSearch .mapSearchWrap .searchBox {
    margin-bottom: 49px;
}
.areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 0;
}

.areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch .titleMap {
    position: relative;
    font-size: 25px;
    font-weight: bold;
    background: transparent;
    padding-left: 63px;
    margin-bottom: 24px;
}
.areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch .titleMap::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -2px;
    width: 46px;
    aspect-ratio: 44/45;
    background: url(../images/index/search_icon.png)no-repeat center/100%;
}

.areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input[type="text"] {
    width: calc(100% - 63px);
    font-size: 18px;
    font-weight: 500;
    border: none;
    background: #F5F5F5;
    border-radius: 10px 0 0 10px;
    padding: 18px 26px;
    height: auto;
    letter-spacing: 0.7px;
}

.areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input[type="submit"] {
    position: relative;
    width: 63px;
    height: 62px;
    border: none;
    background: url(../images/index/btn-search.png) no-repeat center/31px #39B767;
    color: transparent;
    margin-left: -3px;
    border-radius: 0 10px 10px 0;
}
.areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input::placeholder {
    font-weight: 500;
    color: #aaa;
}
.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService {
    width: 100%;
    padding: 0;
}
.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .titleSearch {
    position: relative;
    font-size: 25px;
    font-weight: bold;
    background: transparent;
    padding-left: 71px;
    margin-bottom: 22px;
}
.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .titleSearch::before {
    content: "";
    position: absolute;
    top: -7px;
    left: -2px;
    width: 54px;
    aspect-ratio: 52/48;
    background: url(../images/index/house_icon.png)no-repeat center/100%;
}
.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService {
    gap: 10px;
}

.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li {
    width: calc(50% - 7px);
    margin: 0;
}
.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService > li a {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background-color: #F5F5F5;
    padding: 13px 20px 15px;
    transition: none;
}

.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li a .servicePhoto {
    width: 60px;
    display: inline-block;
}

.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li a .titleService {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    letter-spacing: 0.3px;;
}
.areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService > li a::before {
    content: "";
    position: absolute;
    bottom: 11px;
    right: 10px;
    border-bottom: 12px solid #333333;
    border-left: 12px solid transparent;
}
@media(max-width: 1250px) and (min-width: 769px) {
    .areaMapSearch .areaMap {
        width: 620px;
    }
    .areaMapSearch .mapSearchWrap .areaSearchService {
        width: calc(100% - 630px);
    }
}
@media (max-width: 1220px) and (min-width: 769px) {
    .areaMapSearch .mapSearchWrap {
        padding: 4vw 4vw;
    }
}
@media(max-width:1170px) and (min-width:769px) {
    .areaMapSearch .inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .areaMapSearch .areaMap {
        display: inline-block;
        float: none;
        width: 100%;
        max-width: 660px;
        margin: 0 auto 30px;
        padding: 0;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService {
        width: 100%;
        max-width: 660px;
        margin: 0 auto;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form {
        width: 100%;
        margin-left: 0;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input[type="text"] {
        width: 85%;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input[type="submit"] {
        width: calc(100% - 85% - 5px);
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li {
        width: calc((100% / 3) - 7px);
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li a .titleService {
        font-size: 14px;
    }
}
@media(min-width: 769px) {
    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input[type="submit"]:hover {
        background-color: #f39c12;
    }
    .mapGroup .groupPosition .positionOne .positionList a:hover {
        color: #ed3357;
    }

    .mapGroup .groupPosition .positionTwo .positionList a:hover {
        color: #d45300;
    }

    .mapGroup .groupPosition .positionThree .positionList a:hover {
        color: #8e44ad;
    }

    .mapGroup .groupPosition .positionFour .positionList a:hover {
        color: #3498db;
    }

    .mapGroup .groupPosition .positionFive .positionList a:hover {
        color: #27ae60;
    }

    .mapGroup .groupPosition .positionSix .positionList a:hover {
        color: #96271a;
    }

    .mapGroup .groupPosition .positionSeven .positionList a:hover {
        color: #d91e18;
    }

    .mapGroup .groupPosition .positionEight .positionList a:hover {
        color: #f39c12;
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService > li a:hover {
        background-color: #39B767;
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService > li a:hover .titleService{
        color: #fff;
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService > li a:hover .servicePhoto img {
        filter: brightness(0) invert(1);
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService > li a:hover:before {
        border-bottom-color: #fff;
    }
}
@media(max-width: 768px) {
    .areaMapSearch .mapSearchWrap {
        padding: 30px 20px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService {
        width: 100%;
    }

    .searchBox {
        background-color: #fff;
        border-radius: 5px;
        padding: 0;
        margin-bottom: 15px;
    }

    .areaMapSearch .areaMap {
        width: 100%;
        padding: 0;
    }

    .areaSearch .mapBox {
        bottom: auto;
        width: 100%;
        height: 100%;
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch {
        padding: 0;
        margin-bottom: 15px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch .titleMap {
        font-size: 18px;
        padding-left: 45px;
        margin-bottom: 16px;
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch .titleMap::before {
        top: 0px;
        left: 0px;
        width: 30px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form {
        width: 100%;
        height: 37px;
        margin-left: 0;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input[type="text"] {
        width: calc(100% - 56px);
        height: auto;
        padding: 8px 10px 8px 9px;
        font-size: 16px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .areaWrapSearch form input[type="submit"] {
        width: 60px;
        height: 40px;
        background-size: 21px;
    }
    .areaMapSearch .searchBox .wrapRecommended  .titleSearch {
        font-size: 18px;
        padding-left: 45px;
        margin-bottom: 16px;
    }
    .areaMapSearch .searchBox .wrapRecommended .titleSearch::before {
        top: 12px;
        left: 0px;
        width: 30px;
        height: auto;
        aspect-ratio: 48/49;
        background: url(../images/index/map_icon.png)no-repeat center/100%;
    }

    .areaMapSearch .wrapRecommended {
        margin-bottom: 16px;
    }

    .areaMapSearch .btn {
        display: block;
        width: 200px;
        margin: 0 auto;
    }

    .areaMapSearch .btn a {
        background-color: #7EF5AA;
        color: #333333;
        font-size: 14px;
        padding: 7px 5px;
    }

    .areaMapSearch .btn a span {
        padding-right: 16px;
    }

    .areaMapSearch .wrapRecommended.wrapService {
        display: inline-block;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService {
        border-radius: 5px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .titleSearch {
        font-size: 16px;
        padding-left: 45px;
        background: transparent;
        margin-bottom: 13px;
    }
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .titleSearch::before {
        top: 12px;
        left: 0px;
        height: auto;
        width: 32px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService {
        padding: 0;
        gap: 10px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li {
        width: calc((100% /3) - 7px);
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li a {
        padding: 7px 5px 5px;
        gap: 10px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li a .titleService {
        width: calc(67% - 10px);
        font-size: 14px;
    }

    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li a .servicePhoto {
        width: 33%;
    }
}
@media(max-width: 430px) {
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li {
        width: calc((100% /2) - 5px);
    }
}
@media(max-width: 390px) {
    .areaMapSearch .mapSearchWrap .areaSearchService .wrapRecommended.wrapService .listService>li a .titleService {
        font-size: 12px;
    }
}
/* areaMapSearch */

/* areaUseful */
.areaUseful {
    margin: 0 0 10px;
}
.areaUseful .sectionBg {
    background-color: #E5F6F1;
    padding: clamp(30px, 5.9vw, 47px) clamp(30px, 5.6vw, 83px) clamp(30px, 5.9vw, 47px);
}
.areaUseful .sectionBg .wrapUseful .wrapTitleItems {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 37px;
    margin-bottom: 34px;
}
.areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsWrap {
    transform: translateY(-9px);
}
.areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsWrap .titleItems {
    font-size: 54px;
    letter-spacing: 2.4px;
    margin-bottom: 1px;
}
.areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsWrap .titleItems .itemGreen {
    color: #39B767;
}
.areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsWrap .subItems {
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.7px;
}
.areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsPhoto {
    width: 215px;
}
.areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsPhoto img {
    width: 100%;
}
.areaUseful .sectionBg .wrapUseful .listUseful {
    display: flex;
    flex-wrap: wrap;
    gap: 41px 10px;
    margin-bottom: 36px;
}
.areaUseful .sectionBg .wrapUseful .listUseful li {
    width: calc((100% / 3) - 7px);
    margin: 0;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .usefulPhoto {
    margin-bottom: 16px;
}


.areaUseful .sectionBg .wrapUseful .listUseful li .usefulPhoto a {
    display: block;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .usefulPhoto img {
    aspect-ratio: 336 / 168;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .wrapCatUseful {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .wrapCatUseful .catUseful {
    margin: 0;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .wrapCatUseful .catUseful a {
    display: block;
    font-size: 12px;
    text-align: center;
    color: #39B767;
    border: 1px solid #39B767;
    background-color: transparent;
    border-radius: 5px;
    padding: 3px 9px;
    line-height: 0.9;
    letter-spacing: 0.5px;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .titleUseful {
    margin-bottom: 10px;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .titleUseful a {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-align: justify;
    line-height: 1.72;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.areaUseful .sectionBg .wrapUseful .listUseful li .timeUseful {
    color: #aaaaaa;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.areaUseful .sectionBg .wrapUseful .btn {
    max-width: 330px;
    margin-top: 5px;
}
.areaUseful .sectionBg .wrapUseful .btn a {
    padding: 17px 10px;
}
.areaUseful .sectionBg .wrapUseful .btn a::before {
    right: 24px;
}

@media (max-width: 1220px) and (min-width: 769px) {
    .areaUseful .sectionBg {
        padding: 4vw 4vw;
    }
}
@media (max-width: 900px) and (min-width: 769px) {
    .areaUseful .sectionBg .wrapUseful .listUseful {
        gap: 20px;
    }
    .areaUseful .sectionBg .wrapUseful .listUseful li {
        width: calc((100% / 2) - 10px);
    }
}
@media(min-width: 769px) {

    .areaUseful .listUseful li .titleUseful a:hover {
        color: #fc9b27;
    }
    .areaUseful .listUseful li .wrapCatUseful .catUseful a:hover {
        color: #fff;
        background: #02bbad;
    }
    .areaUseful .sectionBg .wrapUseful .btn a:hover {
        color: #fff;
        background-color: #333;
    }
    .areaUseful .sectionBg .wrapUseful .btn a:hover::before {
        border-color: #fff;
    }
    .areaUseful .sectionBg .wrapUseful .listUseful li .wrapCatUseful .catUseful a:hover {
        color: #fff;
        background-color: #39B767;
    }
}
@media(max-width: 768px) {
    .areaUseful .sectionBg {
        padding: 24px 24px 24px 32px;
    }
    .areaUseful .sectionBg .wrapUseful .wrapTitleItems {
        gap: 15px;
        margin-bottom: 10px;
        flex-wrap: nowrap;
    }

    .areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItems {
        margin-bottom: 5px;
    }
    .areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsWrap .titleItems {
        font-size: 26px;
        margin-bottom: 8px;
        text-align: left;
    }
    .areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsWrap .subItems {
        font-size: 14px;
        text-align: left;
    }
    .areaUseful .sectionBg .wrapUseful .wrapTitleItems .subItems {
        font-size: 14px;
        text-align: left;
    }
    .areaUseful .sectionBg .wrapUseful .wrapTitleItems .titleItemsPhoto {
        width: 25%;
        max-width: 300px;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful {
        justify-content: space-between;
        gap: 20px;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful li {
        width: calc(50% - 10px);
        margin: 0 0 16px;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful li:nth-child(4n) {
        margin-right: 0;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful li .usefulPhoto {
        margin-bottom: 8px;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful li .wrapCatUseful {
        margin-bottom: 5px;
    }
    .areaUseful .sectionBg .wrapUseful .listUseful li .wrapCatUseful .catUseful a {
        font-size: 10px;
        padding: 2px 9px 3px;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful li .titleUseful {
        margin-bottom: 5px;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful li .titleUseful a {
        font-size: 14px;
        line-height: 1.74;
    }

    .areaUseful .sectionBg .wrapUseful .listUseful li .timeUseful {
        font-size: 10px;
    }

    .areaUseful .sectionBg .wrapUseful .btn {
        display: block;
        /* width: 200px; */
        max-width: 240px;
        margin: 20px auto 0;
    }
    .areaUseful .sectionBg .wrapUseful .btn a {
        font-size: 14px;
        /* padding: 7px 5px; */
        padding: 15px 20px;
    }
}
@media(max-width: 430px) {
    .areaUseful .sectionBg .wrapUseful .listUseful li {
        width: 100%;
    }
}
/* areaUseful */


/* areaGarbage */
.areaGarbage .sectionBg {
    padding: 47px 0 43px;
    background-color: #F5F5F5;
}
.areaGarbage .garbageWrap {
    padding: 0 30px;
    margin-bottom: 41px;
}
.areaGarbage .garbageWrap .garbageTitle {
    text-align: center;
    font-size: 44px;
    font-weight: bold;
    margin-bottom: 22px;
}

.areaGarbage .garbageWrap .garbageTitle .titleGreen {
    display: inline-block;
    margin-right: 5px;
    color: #39B767;
}

.areaGarbage .garbageWrap .listGarbageCat {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

.areaGarbage .garbageWrap .listGarbageCat li {
    width: 100px;
    text-align: center;
}

.areaGarbage .garbageWrap .listGarbageCat li a {
    display: block;
    padding: 6px 10px 5px;
    color: #777777;
    background: #FFFFFF;
    border-radius: 10px;
    border: 2px solid #fff;
}

.areaGarbage .garbageWrap .listGarbageCat li a.active {
    background: #333333;
    color: #fff;
}

.areaGarbage .listGarbagePost {
    position: relative;
    position: relative;
}

.areaGarbage .listGarbagePost:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 196px;
    background: #02bbad;
    z-index: -1;
}

.areaGarbage .listGarbagePost .garbageListTitle {
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin-bottom: 25px;
}

.areaGarbage .listGarbagePost .garbagePostList {
    display: flex;
    overflow: hidden;
    padding-bottom: 20px;
}

.areaGarbage .listGarbagePost .garbagePostList>li {
    min-width: 257px;
    max-width: 257px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .wrapGarbagePostListSub {
    width: 100%;
    height: 100%;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 0 0 10px 10px;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .boxContentGar {
    padding-bottom: 20px;
    display: block;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostThumb {
    width: 100%;
    height: 129px;
    margin-bottom: 20px;
    transition: opacity 0.3s ease;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostThumb img {
    width: 100%;
    height: 100%;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent {
    padding: 0 15px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbagePostTitle {
    display: flex;
    font-size: 16px;
    margin-bottom: 12px;
    vertical-align: text-top;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageContent {
    margin-bottom: 12px;
    line-height: 1.7;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: justify;
}


.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate {
    width: 100%;
    background: #f2f3f5;
    border-radius: 10px;
    padding: 9px 16px 10px 14px;
    margin-bottom: 12px;
}

.areaGarbage .listGarbagePost .garbagePostList.garbagePostList2>li .garbagePostListSub .garbagePostTContent .garbageRate {
    background: #fffae4;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li:not(:last-child) {
    margin-bottom: 4px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li:last-child {
    align-items: baseline;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li .garbageRateTitle {
    /* margin-right: 12px; */
    /* margin-top: -2px; */
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li .garbageRateList {
    width: 70px;
    line-height: 1;
    margin-left: 2px;
    margin-top: 6px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li .garbageRateScore {
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li .garbageRateScore.ScoreRed {
    color: #FE6F10;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate>li .garbageRateList>li {
    width: 11px;
    display: inline-block;
    margin-right: 3px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbagePostTitle span.rate {
    vertical-align: top;
    width: 33px;
    margin-left: -2px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbagePostTitle span+span {
    width: calc(100% - 38px);
    margin-left: 4px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnReview {
    width: 100%;
    max-width: 228px;
    margin-bottom: 14px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnReview a {
    background: #39B767;
    color: #fff;
    font-size: 15px;
    padding: 6px;
    display: block;
    border-radius: 5px;
    text-align: center;
    transition: all .3s;
    letter-spacing: 0.6px;
}
.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbageWrapPhone {
    position: relative;
    text-align: right;
    padding-left: 20px;
}
.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbageWrapPhone::before {
    content: "";
    position: absolute;
    top: 52%;
    left: -1px;
    transform: translateY(-50%);
    width: 32px;
    aspect-ratio: 1/1;
    background: url(../images/common/icon-phone-02.png)no-repeat center/100%;
}
.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnPhone {
    width: 100%;
    line-height: 1;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnPhone a {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #fc9b27;
    pointer-events: none;
    margin-bottom: 2px;
}

.areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .txtReception {
    font-size: 13px;
    font-weight: 500;
    color: #303030;
    letter-spacing: -0.2px;
    text-align: center;
    padding-left: 24px;

}

/* areaGarbage.recommended */
.areaGarbage.recommended {
    margin: 151px 0 108px;
}

.areaGarbage.recommended .garbageTitle span {
    background-image: url(../images/common/icon-recommen.png);
}

/* areaGarbage.recommended */


@media (max-width: 1220px) and (min-width: 769px) {
    .areaGarbage .sectionBg {
        padding: 4vw 0;
    }
}
@media(max-width:1200px) and (min-width:769px) {
    .areaGarbage .listGarbagePost .garbagePostList {
        width: 100%;
    }
    .areaGarbage .garbageWrap .listGarbageCat {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    .areaGarbage .garbageWrap .listGarbageCat li {
        width: calc(100%/8 - 3px);
    }
}
@media(max-width:850px) and (min-width:769px) {
    .areaGarbage .garbageWrap .listGarbageCat li {
        width: calc(100%/6 - 3px);
    }
}

@media(min-width: 769px) {
    .areaGarbage .garbageWrap .listGarbageCat li a:hover {
        background: #333333;
        color: #ffffff;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnReview a:hover {
        background-color: #02bbad;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub:hover {
        opacity: 0.7;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub:hover .btnReview a {
        /*background-color: #02bbad;*/
    }
}
@media(max-width: 768px) {
    .areaGarbage .sectionBg {
        padding: 30px 0;
    }
    .areaGarbage .garbageWrap {
        padding: 0 20px;
        margin-bottom: 30px;
    }
    .areaGarbage .garbageWrap .garbageTitle {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .areaGarbage .garbageWrap .garbageTitle span {
        padding-left: 43px;
        background: url(../images/index/garbageTitle_icon.png) no-repeat left 2px center/ 33px;
    }

    .areaGarbage .garbageWrap .listGarbageCat {
        padding: 0;
        margin-bottom: 20px;
    }

    .areaGarbage .garbageBtnMore {
        text-align: center;
        margin: -3px 0 17px;
    }

    .areaGarbage .garbageBtnMore a {
        position: relative;
        display: inline-block;
        font-size: 13.5px;
        padding-right: 25px;
        color: #39B767;
    }

    .areaGarbage .garbageBtnMore a:after {
        content: "";
        position: absolute;
        top: 8px;
        right: 1px;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 9px solid #39B767;
    }

    .areaGarbage .garbageBtnMore a.show:after {
        transform: rotate(180deg);
    }

    .areaGarbage .listGarbagePost .wrapGarbagePostList {
        margin-left: 0;
    }

    .areaGarbage .listGarbagePost .garbagePostList {
        width: 100%;
        padding-left: 0;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li {
        min-width: 272px;
        max-width: 350px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .wrapGarbagePostListSub {
        padding: 0 5px;
    }

    .areaGarbage .garbageWrap .listGarbageCat li {
        width: calc(100% / 3 - 2px);
    }

    .areaGarbage .garbageWrap .listGarbageCat li a {
        font-size: 12px;
        padding: 5px 10px 6px;
    }
    .areaGarbage .listGarbagePost .garbageListTitle {
        font-size: 17.5px;
        margin-bottom: 19px;
    }

    .areaGarbage .listGarbagePost:after {
        height: 191px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub {
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        /*padding-bottom: 41px;*/
        box-shadow: 0 0px 4px 2px rgba(170, 170, 170, 0.3);
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .boxContentGar {
        padding-bottom: 41px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageContent {
        margin-bottom: 11px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .garbageRate {
        padding: 10px 38px 8px 14px;
        margin-bottom: 13px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnReview {
        margin-bottom: 12px;
        /*bottom: 97px;
        width: 85%;*/
        width: 100%;
        max-width: 240px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnReview a {
        border-radius: 8px;
        padding: 7px 5px 5px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnPhone {
        bottom: 58px;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .btnPhone a {
        background-position: left 12px top 5px;
        pointer-events: auto;
    }

    .areaGarbage .listGarbagePost .garbagePostList>li .garbagePostListSub .garbagePostTContent .txtReception {
        margin-top: -3px;
    }

    /*recommended*/
    .areaGarbage.recommended {
        margin: 26px 0 18px;
    }
}
/* areaGarbage */

/* areaListReview */
.areaListReview .sectionBg {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 37px;
    background: #E5F6F1;
    padding: clamp(30px, 5.9vw, 37px) clamp(30px, 5.6vw, 37px);
    margin-bottom: 10px;
}
.areaListReview .sectionBg .reviewsWrapIntro {
    width: 345px;
    text-align: center;
    margin-top: 42px;
}
.areaListReview .sectionBg .reviewsWrapIntro .introPhoto {
    width: 90%;
    max-width: 243px;
    margin: 0 auto 20px;
}
.areaListReview .sectionBg .reviewsWrapIntro .introTitle {
    font-size: 54px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.areaListReview .sectionBg .reviewsWrapIntro .introTitle .titleGreen {
    display: inline-block;
    color: #39B767;
    margin-right: 5px;
}
.areaListReview .sectionBg .reviewsWrapIntro .introSub {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.7px;
    line-height: 1.7;
}
.areaListReview .sectionBg .ListReview {
    width: calc(100% - 382px);
}
.areaListReview .sectionBg .ListReview .reviewRateScore>li:not(:last-child) {
    margin-bottom: 10px;
}
.areaListReview .sectionBg .ListReview .reviewRateScore > li {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 21px;
}
.areaListReview .sectionBg .ListReview .reviewRateScore .reviewBox .reviewRate .reviewPerson .reviewInfor {
    margin-top: 0;
}
.areaListReview .sectionBg .ListReview .reviewRateScore .reviewBox .reviewRate .reviewPerson .reviewInfor .reviewStartScore {
    margin-bottom: 5px;
}
.areaListReview .sectionBg .ListReview .reviewRateScore .reviewBox .reviewWrapContent {
    gap: 11px 25px;
}
.areaListReview .sectionBg .ListReview .reviewBox .btnReadMore {
    width: 100%;
    max-width: none;
    text-align: right;
    overflow: hidden;
    margin: 0 -1px 0 0;
}
.areaListReview .sectionBg .ListReview .reviewBox .btnReadMore a {
    position: relative;
    width: 100%;
    max-width: 234px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    border: 3px solid #333333;
    background-color: #7EF5AA;
    border-radius: 60px;
    float: right;
    padding: 8px 15px 10px 5px;
}
.areaListReview .sectionBg .ListReview .reviewBox .btnReadMore a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 23px;
    transform: translateY(-50%) rotate(-45deg);
    border: solid #333;
    border-width: 0 2px 2px 0;
    padding: 4px;
}
@media(max-width: 1250px) and (min-width: 1051px) {
    .areaListReview .ListReview .reviewRateScore .reviewBox .reviewContent {
        width: 100%;
    }
    .areaListReview .ListReview .reviewRateScore .reviewBox .reviewWrapContent .wrapReviewRight {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }
    .areaListReview .ListReview .reviewRateScore .reviewBox .reviewWrapContent .wrapReviewRight .imgReviewRight {
        width: calc(50% - 5px);
    }
    .areaListReview .ListReview .reviewRateScore .reviewBox .reviewWrapContent .wrapReviewRight .imgReviewRight:not(:last-child) {
        margin-bottom: 0;
    }
}
@media (max-width: 1220px) and (min-width: 769px) {
    .areaListReview .sectionBg {
        padding: 4vw 4vw;
    }
}
@media(max-width: 1050px) and (min-width: 769px) {
    .areaListReview .sectionBg {
        justify-content: center;
    }
    .areaListReview .sectionBg .ListReview {
        width: 100%;
    }
}
@media(max-width: 950px) and (min-width: 769px) {
    .areaListReview .sectionBg .ListReview .reviewBox .btnReadMore a {
        float: none;
        margin: 0 auto;
    }
}
@media(min-width: 769px) {
    .areaListReview .sectionBg .ListReview .reviewBox .btnReadMore a:hover:before {
        border-color: #fff;
    }
}
@media(max-width:768px) {
    .areaListReview .sectionBg {
        padding: 30px 0;
        gap: 20px;
    }
    .areaListReview .sectionBg .reviewsWrapIntro .introPhoto {
        width: 25%;
        max-width: 200px;
        margin: 0;
    }
    .areaListReview .sectionBg .reviewsWrapIntro .introTitle {
        font-size: 26px;
    }
    .areaListReview .sectionBg .reviewsWrapIntro .introSub {
        font-size: 14px;
    }
    .areaListReview .sectionBg .reviewsWrapIntro {
        width: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
    .areaListReview .sectionBg .ListReview {
        width: 100%;
    }
}
/* areaListReview */

/*areaTypes*/
.areaTypes {
    margin-bottom: 40px;
}
.areaTypes .wrapTypes .sectionBg {
    background: #F5F5F5;
    padding: clamp(30px, 5.9vw, 61px) clamp(30px, 5.6vw, 77px) clamp(30px, 6.9vw, 77px);
}
.areaTypes .wrapTypes .sectionBg:not(:last-child) {
    margin-bottom: 10px;
}

.areaTypes .wrapTypes .areaReviewTitleSmall {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
}

.areaTypes .wrapTypes .areaReviewTitleBig {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    color: #333333;
    letter-spacing: 2.9px;
    margin-bottom: 30px;
}
.areaTypes .wrapTypes .areaReviewTitleBig .titleGreen {
    color: #39B767;
}

.areaTypes .wrapTypes .boxTypes {
    display: inline-block;
}
.areaTypes .wrapTypes .boxTypes:not(:last-child){
    margin-bottom: 70px;
}

.areaTypes .wrapTypes .titleTypes {
    margin-bottom: 13px;
}

.areaTypes .wrapTypes .titleTypes .types {
    position: relative;
    display: inline-block;
    font-size: 20px;
    color: #333333;
    text-align: center;
    letter-spacing: 2px;
    padding-left: 25px;
}
.areaTypes .wrapTypes .titleTypes .types::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 10px;
    width: 3px;
    height: 15px;
    background-color: #39B767;
}
.areaTypes .wrapTypes .boxTypes .listTypes {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    overflow-y: hidden;
    transition: height .3s ease;
}

.areaTypes .wrapTypes .boxTypes .listTypes li {
    width: calc(20% - 8.4px);
}

.areaTypes .wrapTypes .boxTypes .listTypes li a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    background: #ffffff;
    color: #000000;
    height: 100%;
    min-height: 51px;
}
.areaTypes .wrapTypes .boxTypes .listTypes li a .name {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    letter-spacing: 0.5px;
}
.areaTypes .wrapTypes .boxTypes .listTypes li a .icon {
    width: 60px;
}
.areaTypes .wrapTypes .boxTypes .listTypes li a .icon img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

.areaTypes .wrapTypes .linkTypes {
    display: block;
    max-width: 186px;
    width: 100%;
    margin: 41px auto 0;
}

.areaTypes .wrapTypes .linkTypes a {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    border: 3px solid #333333;
    background-color: #7EF5AA;
    border-radius: 60px;
    float: right;
    padding: 8px 15px 10px 5px;
    margin: 0 auto;
}
.areaTypes .wrapTypes .linkTypes a::before {
    content: "";
    position: absolute;
    top: 46%;
    right: 21px;
    transform: translateY(-50%) rotate(45deg);
    border: solid #333;
    border-width: 0 2px 2px 0;
    padding: 4px;
}


.areaTypes .wrapTypes .boxTypesDiff {
    display: inline-block;
}
.areaTypes .wrapTypes .boxTypesDiff .listTypesDiff {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    position: relative;
    overflow-y: hidden;
    transition: height .3s ease;
}

.areaTypes .wrapTypes .boxTypesDiff.typesDiffAfter .listTypesDiff:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 77px;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(2, 154, 145, 0) 0%, rgba(2, 154, 145, 0.8) 100%, #029a91 100%);
    border-radius: 0px;
}
.areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li {
    width: calc(50% - 4px);
}
.areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a {
    display: flex;
    padding: 17px 40px 16px 20px;
    background: #ffffff;
    border-radius: 10px;
    color: #333333;
    position: relative;
}

.areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a:after {
    content: "";
    position: absolute;
    top: 49%;
    transform: translateY(-50%) rotate(-45deg);
    right: 30px;
    border: solid #333333;
    border-width: 0 2px 2px 0;
    padding: 4px;
}
.areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a .numberTypes {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    padding-right: 10px;
    line-height: 1;
    margin-right: 13px;
    transform: translateY(2px);
}
.areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a .numberTypes::before {
    content: "";
    position: absolute;
    top: 40%;
    right: -4px;
    width: 1px;
    height: 68%;
    background: #333333;
    transform: translateY(-50%);
}
.areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a .txtTypes> span{
    display: inline-block;
    color: #39B767;
    margin-left: 10px;
}
.areaTypes .wrapTypes .boxTypesDiff.typesDiffAfter .listTypesDiff.show:after {
    display: none;
}
.areaTypes .wrapTypes .boxTypesDiff .linkTypes {
    margin-top: 40px;
}
.areaTypes .wrapTypes .areaSearch {
    margin-bottom: 67px;
}
.areaTypes .wrapTypes .areaSearch .areaReviewTitleBig {
    margin-bottom: 24px;
}
@media (max-width: 1220px) and (min-width: 769px) {
    .areaTypes .wrapTypes .sectionBg {
        padding: 4vw 4vw;
    }
}
@media(max-width: 1100px) and (min-width: 769px) {
    .areaTypes .wrapTypes .boxTypes .listTypes li a{
        gap: 5px;
        padding: 0 5px;
    }
    .areaTypes .wrapTypes .boxTypes .listTypes li a .icon {
        width: 50px;
    }
}
@media(max-width: 950px) and (min-width: 769px) {
    .areaTypes .wrapTypes .boxTypes .listTypes li {
        width: calc(25% - 8px);
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a {
        padding-right: 25px;
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a:after {
        right: 15px;
    }
}
@media (min-width: 769px) {
    .areaTypes .wrapTypes .linkTypes a:hover {
        color: #fff;
        background: #333333;
    }
    .areaTypes .wrapTypes .linkTypes a:hover::before {
        border-color: #fff;
    }
    .areaTypes .wrapTypes .boxTypes .listTypes li a:hover {
        color: #39B767;
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a:hover {
        background-color: #39B767;
        color: #fff;
    }

    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a:hover:after {
        border-color: #fff;
    }

    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a:hover .numberTypes::before {
        background-color: #fff;
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a:hover .txtTypes > span {
        color: #fff;
    }
}

@media (max-width: 768px) {
    .areaTypes {
        margin-bottom: 60px;
    }
    .areaTypes .wrapTypes .sectionBg {
        padding: 30px 20px;
    }

    .areaTypes .wrapTypes .areaReviewTitleSmall {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .areaTypes .wrapTypes .areaReviewTitleBig {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .areaTypes .wrapTypes .boxTypesDiff:last-child {
        margin-bottom: 0;
    }

    .areaTypes .wrapTypes .titleTypes {
        margin-bottom: 15px;
    }
    .areaTypes .wrapTypes .titleTypes .types {
        display: inline-block;
        font-size: 18px;
        border-radius: 10px;
    }
    .areaTypes .wrapTypes .titleTypes .types::before {
        top: 6px;
        left: 10px;
    }

    .areaTypes .wrapTypes .boxTypes .listTypes li {
        width: calc((100% /3) - 7px);
    }
    .areaTypes .wrapTypes .boxTypes .listTypes li a {
        min-height: 31px;
        padding: 5px 10px;
    }
    .areaTypes .wrapTypes .boxTypes .listTypes li a {
        min-height: 40px;
        gap: 5px;
        padding: 0 5px;
    }
    .areaTypes .wrapTypes .boxTypes .listTypes li a .icon {
        width: 45px;
    }

    .areaTypes .wrapTypes .linkTypes {
        max-width: 240px;
        margin: 30px auto 0;
    }

    .areaTypes .wrapTypes .linkTypes a {
        font-size: 14px;
        border-radius: 50px;
        padding: 15px 20px;
    }

    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff {
        /*flex-direction: column;*/
    }

    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li {
        width: 100%;
        margin-right: 0;
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a {
        padding-right: 20px;
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li:first-child {
        margin-top: 0;
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a:after {
        right: 10px;
    }
    .areaTypes .wrapTypes .boxTypesDiff .listTypesDiff li a .numberTypes::before {
        top: 50%;
        height: 100%;
    }
}
@media(max-width: 430px) {
    .areaTypes .wrapTypes .boxTypes .listTypes {
        gap: 10px;
    }
    .areaTypes .wrapTypes .boxTypes .listTypes li {
        width: calc((100% / 2) - 5px);
    }
}

/*areaTypes*/

/* areaFaq */
.areaFaqPartner.areaFaq {
    margin-bottom: 10px;
}
/* areaFaq */

/* End Row 432 */