﻿.home-about {
    position: relative;
}

    .home-about .grid.wide {
        max-width: 1192px;
    }

.home-about-decor {
    position: absolute;
    bottom: calc(100% - 1px);
    width: 100%;
}

.home-about-container {
    padding-top: 92px;
}

.home-about-top {
    display: flex;
    align-items: center;
}

.home-about-left {
    flex: 1;
    position: relative;
    z-index: 2;
}

    .home-about-left .title {
        font-size: 43px;
        line-height: 121.1%;
        font-family: 'monM';
        font-weight: 100;
        max-width: 576px;
        color: var(--default-color-1);
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .home-about-left .title.aos-animate::before {
            transform: scale(1);
            transition-delay: .2s;
        }

        .home-about-left .title::before {
            content: '';
            position: absolute;
            width: 520px;
            height: 520px;
            border: 1px solid rgb(0 0 0 / 20%);
            border-radius: 50%;
            pointer-events: none;
            transform: scale(0);
            transition: .7s cubic-bezier(.3,1,0.9,1);
        }

        .home-about-left .title span {
            display: block;
            position: relative;
            z-index: 2;
            transform: translateY(37px);
        }

.home-about-right {
    width: 570px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-about .p-btn-more {
    margin-top: 20px;
}

.home-about-right .img-1 {
    left: 0;
    position: absolute;
    width: 562px;
    height: 415px;
    transform: translateX(-166px);
}

    .home-about-right .img-1 img {
    }

.home-about-right .img-2 img {
}

.home-about-right .img-2 {
    position: relative;
    z-index: 2;
    width: 570px;
    height: 330px;
}

.home-about-bottom {
    max-width: 759px;
    margin: 0 auto;
    padding-top: 69px;
}


.home-about-detail {
}

    .home-about-detail section {
        font-size: 15px;
        color: #777777;
        line-height: 213%;
    }

.home-about-slogan {
    color: var(--default-color-1);
    font-family: 'monM';
    font-size: 15px;
    margin-top: 13px;
    display: block;
}

@media(max-width:1023px) {
    .home-about-top {
        display: flex;
        flex-direction: column-reverse;
    }

    .home-about-decor {
        display: none;
    }

    .home-about-container {
        padding-top: 100px;
        padding-bottom: 30px;
    }

    .home-about-left .title::before {
        display: none;
    }

    .home-about-left .title span {
        transform: translateY(0);
    }

    .home-about-left .title {
        margin-top: 24px;
        font-size: 28px;
    }

    .home-about-left {
        width: 100%;
    }

    .home-about-right {
        width: 100%;
    }

    .home-about-left .title {
        max-width: 100%;
        text-align: unset;
        display: block;
    }

    .home-about-right .img-2 {
        width: 100%;
        height: 400px;
    }

    .home-about-right .img-1 {
        transform: translateX(-166px) translateY(-40px);
    }

    .home-about-bottom {
        max-width: 100%;
        padding-top: 10px;
    }

    .home-about-detail section {
        font-size: 16px;
        line-height: 171%;
    }

    .home-about .p-btn-more {
        margin-top: 28px;
    }
}

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

@media(max-width: 739px) {
    .home-about-right .img-1 {
        display: none;
    }

    .home-about-container {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .home-about-right .img-2 {
        width: 100%;
        height: 260px;
    }

    .home-about-slogan {
        font-size: 14px;
        line-height: 168%;
    }

    .home-about-left .title {
        margin-top: 15px;
        font-size: 25px;
    }
}
