﻿.home-why {
    background-image: url(/Design/img/home-why.png);
    background-size: cover;
    position: relative;
}

.home-bg {
    position: relative;
}

.home-why-container {
    padding-top: 38px;
}

.home-why-wrap {
    display: flex;
    align-items: center;
}

    .home-why-wrap .wrap-left {
        width: 576px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0;
        position: relative;
        z-index: 2;
    }

    .home-why-wrap .wrap-left-title {
        margin: 0;
        line-height: 126.2%;
        font-family: 'interB';
        font-size: 25px;
        text-transform: uppercase;
        color: var(--default-color-1);
        font-weight: 100;
    }

    .home-why-wrap .wrap-left-descript {
        font-family: 'interSB';
        font-size: 22px;
        line-height: 150%;
        color: var(--default-color-1);
        margin-top: 2px;
    }

    .home-why-wrap .wrap-left-list {
        margin-top: 40px;
    }

    .home-why-wrap .item {
        display: flex;
        align-items: center;
        border-radius: 55px;
        border: 1px solid #f1ca94;
        background: rgba(255, 255, 255, 0.50);
        box-shadow: 4px 4px 10px 0px rgb(241 202 148 / 50%) inset;
        padding: 12px 18px;
        margin-bottom: 18px;
        max-width: 506px;
    }

    .home-why-wrap .item-index {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        background: linear-gradient(4deg, #b88939 10.23%, #f2cd9a 103.14%);
        position: relative;
        font-family: 'interSB';
        font-size: 25px;
        color: #fff;
    }

        .home-why-wrap .item-index::before {
            content: '';
            position: absolute;
            width: 33px;
            height: 33px;
            border: 2px solid #fff;
            border-radius: 50%;
        }

    .home-why-wrap .wrap-left-list h3 {
        margin: 0;
        font-family: 'interSB';
        font-size: 18px;
        color: var(--default-color-1);
        font-weight: 100;
        padding-left: 16px;
        line-height: 166%;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .home-why-wrap .wrap-right {
        width: calc(100% - 576px);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .home-why-wrap .wrap-right-img {
        position: absolute;
        z-index: 2;
        bottom: 0;
    }

        .home-why-wrap .wrap-right-img img {
            /* transform: translateY(97px); */
        }

    .home-why-wrap .wrap-right-decor {
        position: relative;
    }

        .home-why-wrap .wrap-right-decor img {
            width: 960px;
        }

    .home-why-wrap .wrap-right-img_1 {
        position: absolute;
        z-index: 3;
        top: 169px;
        right: -28px;
    }

        .home-why-wrap .wrap-right-img_1 img {
            animation: fordecor linear 10s infinite;
        }

    .home-why-wrap .wrap-right-img_2 {
        position: absolute;
        z-index: 3;
        bottom: -49px;
        left: 14px;
    }

        .home-why-wrap .wrap-right-img_2 img {
            animation: fordecor2 linear 5s infinite;
        }

@media(max-width:1023px) {
    .home-why-wrap .wrap-right {
        display: none;
    }

    .home-why-wrap .wrap-left {
        padding: 0;
        width: 100%;
    }

    .home-why-wrap .item:last-child {
        margin-bottom: 0;
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .home-why-container {
        padding: 35px 0;
    }

    .home-why-wrap .wrap-left-list {
        display: grid;
        grid-auto-rows: minmax(min-content, max-content);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 20px;
    }
}

@media(min-width:740px) and (max-width:1023px) {
}

@media(max-width:739px) {
    .home-why-container {
        padding: 25px 0;
    }

    .home-why-wrap .wrap-left-title {
        font-size: 16px;
    }

    .home-why-wrap .wrap-left-descript {
        font-size: 23px;
    }

    .home-why-wrap .item-index {
        display: none;
    }

    .home-why-wrap .wrap-left-list h3 {
        font-size: 11px;
        padding-left: 0;
    }

    .home-why-wrap .item {
        margin-bottom: 0;
        padding: 7px 12px;
        text-align: center;
    }

    .home-why-wrap .wrap-left-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 8px;
    }

    .home-why-wrap .wrap-left-list {
        margin-top: 15px;
    }
}