.environmental1 {
    padding: 98px 0 121px
}

.environmental1 .wrap {
    width: 1200px;
    margin: auto
}

.environmental1 .wrap .title .p1 {
    text-align: left;
    font-weight: bold;
    font-size: 40px;
    color: #111111;
    margin: 0 0 29px
}

.environmental1 .wrap .title .p2 {
    width: 913px;
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    line-height: 32px;
    /*margin: auto;*/
    /*text-align: center*/
}

.environmental1 .wrap .content {
    margin: 69px 0 0 0;
    display: flex;
    gap: 10px
}

.environmental1 .wrap .content .item {
    flex: 1;
    height: 400px;
    background: rgba(247, 248, 250, 0);
    border-radius: 20px;
    border: 1px solid #E6E6E6;
    transition: 1s;
    padding: 48px 0 0 30px;
    cursor: pointer
}

.environmental1 .wrap .content .item.on {
    flex: 4.21052;
    padding: 48px 70px 40px 50px;
    background: #F7F8FA
}

.environmental1 .wrap .content .item.on .p1 {
    transform: translateX(0)
}

.environmental1 .wrap .content .item.on .p2 {
    opacity: 1;
    transition: .6s ease;
    transition-delay: .8s
}

.environmental1 .wrap .content .item.on .icon {
    filter: unset;
    transform: translateX(0)
}

.environmental1 .wrap .content .item .icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0);
    transition: .3s ease
}

.environmental1 .wrap .content .item .icon img {
    object-fit: contain
}

.environmental1 .wrap .content .item .p1 {
    font-weight: bold;
    font-size: 24px;
    color: #111111;
    margin: 80px 0 37px;
    transition: .3s ease
}

.environmental1 .wrap .content .item .p2 {
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    line-height: 32px;
    opacity: 0;
    pointer-events: none
}

.environmental1 .wrap .content2 {
    margin: 60px 0 0 0
}

.environmental1 .wrap .content2 .item {
    height: 70px;
    background: #F7F8FA;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px 0 29px
}
.environmental1 .wrap .content2 .item:not(:last-child){
    margin: 0 0 10px;
}

.environmental1 .wrap .content2 .item .l {
    display: flex;
    align-items: center;
    gap: 15px
}

.environmental1 .wrap .content2 .item .l svg {
    width: 20px;
    height: 20px
}

.environmental1 .wrap .content2 .item .l p {
    font-weight: normal;
    font-size: 18px;
    color: #111111
}

.environmental1 .wrap .content2 .item .r {
    display: flex;
    align-items: center;
    gap: 40px
}

.environmental1 .wrap .content2 .item .r .list {
    display: flex;
    align-items: center;
    gap: 7px
}

.environmental1 .wrap .content2 .item .r .list:hover svg path {
    fill: var(--color)
}

.environmental1 .wrap .content2 .item .r .list:hover p {
    color: var(--color)
}

.environmental1 .wrap .content2 .item .r .list:first-child svg {
    transform: scale(1.1)
}

.environmental1 .wrap .content2 .item .r .list svg {
    width: 18px;
    height: 18px
}

.environmental1 .wrap .content2 .item .r .list svg path {
    transition: .6s ease
}

.environmental1 .wrap .content2 .item .r .list p {
    font-weight: normal;
    font-size: 16px;
    color: #3F3B3A;
    transition: .6s ease
}

@media screen and (max-width: 1919px) {
    .environmental1 .wrap .content2 .item:not(:last-child){
        margin: 0px 0px 0.5208333333vw;
    }
    .environmental1 {
        padding: 5.1041666667vw 0px 6.3020833333vw
    }

    .environmental1 .wrap {
        width: 62.5vw
    }

    .environmental1 .wrap .title .p1 {
        font-size: 2.0833333333vw;
        margin: 0px 0px 1.5104166667vw
    }

    .environmental1 .wrap .title .p2 {
        width: 47.5520833333vw;
        font-size: 0.9375vw;
        line-height: 1.6666666667vw
    }

    .environmental1 .wrap .content {
        margin: 3.59375vw 0px 0px;
        gap: 0.5208333333vw
    }

    .environmental1 .wrap .content .item {
        height: 20.8333333333vw;
        border-radius: 1.0416666667vw;
        padding: 2.5vw 0px 0px 1.5625vw
    }

    .environmental1 .wrap .content .item.on {
        padding: 2.5vw 3.6458333333vw 2.0833333333vw 2.6041666667vw
    }

    .environmental1 .wrap .content .item .icon {
        width: 2.7083333333vw;
        height: 2.7083333333vw
    }

    .environmental1 .wrap .content .item .p1 {
        font-size: 1.25vw;
        margin: 4.1666666667vw 0px 1.9270833333vw
    }

    .environmental1 .wrap .content .item .p2 {
        font-size: 0.9375vw;
        line-height: 1.6666666667vw
    }

    .environmental1 .wrap .content2 {
        margin: 3.125vw 0px 0px
    }

    .environmental1 .wrap .content2 .item {
        height: 3.6458333333vw;
        border-radius: 0.4166666667vw;
        padding: 0px 2.0833333333vw 0px 1.5104166667vw
    }

    .environmental1 .wrap .content2 .item .l {
        gap: 0.78125vw
    }

    .environmental1 .wrap .content2 .item .l svg {
        width: 1.0416666667vw;
        height: 1.0416666667vw
    }

    .environmental1 .wrap .content2 .item .l p {
        font-size: 0.9375vw
    }

    .environmental1 .wrap .content2 .item .r {
        gap: 2.0833333333vw
    }

    .environmental1 .wrap .content2 .item .r .list {
        gap: 0.3645833333vw
    }

    .environmental1 .wrap .content2 .item .r .list svg {
        width: 0.9375vw;
        height: 0.9375vw
    }

    .environmental1 .wrap .content2 .item .r .list p {
        font-size: 0.8333333333vw
    }
}

@media screen and (max-width: 1024px) {
    .environmental1 {
        padding: 50px 0
    }

    .environmental1 .wrap {
        width: 90%
    }

    .environmental1 .wrap .title .p1 {
        font-size: 22px;
        margin: 0 0 10px
    }

    .environmental1 .wrap .title .p2 {
        width: 100%;
        font-size: 13px;
        line-height: 25px
    }

    .environmental1 .wrap .content {
        margin: 20px 0 0 0;
        flex-direction: column;
        gap: 20px
    }

    .environmental1 .wrap .content .item {
        flex: unset !important;
        padding: 30px 5% !important;
        height: auto
    }

    .environmental1 .wrap .content .item .icon {
        width: 40px;
        height: 40px
    }

    .environmental1 .wrap .content .item .p1 {
        font-size: 16px;
        margin: 20px 0 10px
    }

    .environmental1 .wrap .content .item .p2 {
        font-size: 13px;
        line-height: 25px;
        opacity: 1 !important
    }

    .environmental1 .wrap .content2 {
        margin: 20px 0 0 0
    }

    .environmental1 .wrap .content2 .item {
        height: auto;
        padding: 15px 3%
    }

    .environmental1 .wrap .content2 .item .l {
        gap: 7px
    }

    .environmental1 .wrap .content2 .item .r .list {
        gap: 6px
    }

    .environmental1 .wrap .content2 .item .r .list svg {
        width: 12px;
        height: 12px
    }

    .environmental1 .wrap .content2 .item .r .list p {
        font-size: 12px
    }

    .environmental1 .wrap .content2 .item .l svg {
        width: 16px;
        height: 16px
    }

    .environmental1 .wrap .content2 .item .l p {
        font-size: 14px
    }
     .environmental1 .wrap .content2 .item:not(:last-child){
        margin: 0px 0px 15px;
    }
}