.before-and-after {
    padding-bottom: 80px;
}

.sec-a {
    padding-top: 71px;
}

.sec-a-wrap {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 1066px;
}

.sec-a-left {
    width: calc((401/1066)*100%);
}

.sec-a-img {
    position: relative;
}

.sec-a-img canvas {
    width: 100%;
    height: auto;
    display: block;
}

.sec-a-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.sec-a-right {
    width: calc((665/1066)*100%);
    padding-left: calc((49/1066)*100%);
}

.sec-a-title {}


.sec-a-desc {}

.sec-a-desc p {
    margin-top: 1.294em;
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: .05em;
}

.sec-a-desc p+p {
    margin-top: 1em;
}

/**/
.sec-b {
    padding-top: 78px;
}

.sec-b-wrap {
    margin: auto;
    max-width: 948px;
    /* height: 259px; */
    background: #f7f5f3;
    padding: calc((37/948)*100%) calc((116/948)*100%) calc((58/948)*100%);
}

.sec-b-title {}

.sec-b-title .heading-section {
    padding-bottom: 0;
}

.sec-b-title .heading-section::before {
    display: none;
}

.sec-b-desc {}

.sec-b-desc p {
    margin-top: 1.294em;
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: .05em;
}

.sec-b-desc p+p {
    margin-top: 1em;
}

/**/
.sec-c {
    padding-top: 86px;
}

.sec-c-wrap {
    max-width: 1068px;
    margin: auto;
}

.sec-c-list {
    margin: -10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sec-c-item {
    width: 50%;
    padding: 10px
}

.sec-c-item.as-one {
    width: 100%;
}

.sec-c-img {
    position: relative;
    overflow: hidden;
}

.sec-c-img canvas {
    width: 100%;
    height: auto;
    display: block;
    /* min-height: 300px; */
}

.sec-c-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.sec-c-img span {
    position: absolute;
    z-index: 1;
    bottom: 0.625em;
    left: -0.71875em;
    width: 6.40625em;
    aspect-ratio: 205/59;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
}

.sec-c-img span::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../../images/before-and-after/layer.png) center/cover;
    z-index: -1;
    transform: scaleX(-1);

}

.sec-c-img span.after {
    bottom: auto;
    top: 1.15625em;
    left: auto;
    right: -1.15625em;
    padding-right: 0.625em;
}

.sec-c-img span.after::before {
    transform: none;
}

/**/
.sec-d {
    padding-top: 89px;
}

.sec-d-wrap {
    margin: auto;
    max-width: 715px;
}

.sec-d-title {}

.sec-d-title .heading-section {
    padding-bottom: 0;
}

.sec-d-title .heading-section::before {
    display: none;
}

.sec-d-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -55px;
    padding-top: 10px;
}

.sec-d-item {
    width: 50%;
    padding: 0 55px;
}

.sec-d-item span {
    position: relative;
    display: block;
    font-family: var(--font-family-title);
    font-size: 20px;
    text-transform: uppercase;
    color: #000;
    margin-top: 2.5em;
}

.sec-d-item span::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.4em;
    background: url(../../images/before-and-after/icon.png) center/cover;
    z-index: -1;
    width: 0.95em;
    aspect-ratio: 1/1;
}

.sec-d-item p {
    margin-top: 0.588em;
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: .05em;
}

.sec-d-item p+p {}

@media only screen and (min-width: 992px) {
    .before-and-after .heading-section {
        letter-spacing: 0.1em;
        padding-bottom: 24px;
    }

    .before-and-after .heading-section span {
        font-size: 50px;
        letter-spacing: 0;
    }
}

@media only screen and (max-width: 991px) {
    #inner-page-wrapper>.container {
        width: 100%;
    }

    .before-and-after .heading-section::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .sec-a-left {
        width: min(100%, 400px);
    }

    .sec-a-right {
        width: 100%;
        padding: 60px 0 0;
        text-align: center;
    }

    .sec-b-wrap {
        padding: 60px 5vw;
    }
}

@media only screen and (max-width: 991px) {
    .sec-c-item {
        width: min(100%, 520px);
    }

    .sec-c-img span {
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 20px !important;
        transform: translateX(-50%);
        padding: 0 !important;
    }

    .sec-d-item {
        width: 100%;
        margin-left: 30px;
    }
}