.totalBodyContainer {
    background-color: #FFFFFF;
    padding-bottom: 0;
}

.withKeySection1 {
    margin-top: 120px;
    width: 100%;
}

.withKeySection1Container {
    background: url("/images/solutions/fieldSystem/withKey/withKeySection1Bg.png") no-repeat center center / cover;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(18, 34, 45, 0.2)
}

.withKeySection1Text {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.5rem;
    line-height: 3.75rem;
    letter-spacing: -1.6px;
    color: #FFFFFF;
    text-align: center;
}


.withKeySection2 {
    width: 100%;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.withKeySection2Container {
    width: 100%;
    max-width: 1400px;
    padding-left: 118px;
    padding-right: 67px;
}

.withKeySection2Wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 197px;
}

.withKeySection2TextContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
}

.withKeySection2TextTitle {
    font-family: SCDream, sans-serif;
    font-weight: 700;
    font-size: 2.875rem;
    line-height: 4.375rem;
    letter-spacing: -2.76px;
    color: #12222D;
}

.withKeySection2TextContent {
    font-family: SCDream, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 2.125rem;
    letter-spacing: -1.2px;
    color: #12222D;
}

.withKeySection2ImgContainer > img {
    width: 100%;
    max-width: 704px;
}

.withKeySection3 {
    width: 100%;
    padding-top: 123px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.withKeySection3Container {
    width: 100%;
    max-width: 1400px;
    padding-bottom: 140px;
}


.withKeySection3Wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
}


.withKeySection3TextTitle {
    margin-bottom: 20px;
    font-family: SCDream, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.375rem;
    letter-spacing: -1.44px;
    color: #12222D;
    text-align: center;
}

.withKeySection3TextTitle > span {
    background: linear-gradient(
            rgba(238, 121, 129, 0.1) 80%,
            transparent 80%
    );
}

.withKeySection3TextContent {
    font-family: SCDream, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 2.125rem;
    letter-spacing: -1.08px;
    color: #12222D;
}

.withKeySection4 {
    width: 100%;
    background: #f8f8f8;
    padding-top: 50px;
    padding-bottom: 100px;
}

.withKeySection4Container {
    width: 100%;
    max-width: 1400px;

}

.withKeySection4Wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.withKeySection4Title {
    font-family: SCDream, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.375rem;
    letter-spacing: -1.44px;
    color: #12222D;
}

.withKeySection4Divider {
    width: 100%;
    height: 12px;
    background: url("/images/solutions/fieldSystem/withKey/withKeySection4Divider.png");
}


.withKeySection4FeatContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 24px;
}

.withKeySection4Feat {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease, transform 1s ease;
}

.withKeySection4Wrapper.animate > .withKeySection4FeatContainer > .withKeySection4Feat {
    opacity: 1;
    transform: translateY(0);
}

.withKeySection4Wrapper.animate > .withKeySection4FeatContainer > .withKeySection4Feat:nth-child(1) {
    transition-delay: 0s;
}

.withKeySection4Wrapper.animate > .withKeySection4FeatContainer > .withKeySection4Feat:nth-child(2) {
    transition-delay: 0.2s;
}

.withKeySection4FeatIconContainer {
    flex-shrink: 0;
}


.withKeySection4FeatIconContainer > img {
    width: 100%;
    max-width: 174px;
}

.withKeySection4FeatTextContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    padding: 0 30px;
    border: 1px solid #D0D3D5;
    border-left: none;
    border-radius: 2px;
}


.withKeySection4FeatTextTitle {
    font-family: SCDream, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.375rem;
    letter-spacing: -1.44px;
    color: #12222D;
}

.withKeySection4FeatTextContent {
    font-family: SCDream, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 2.125rem;
    letter-spacing: -1.08px;
    color: #12222D;
}

.withKeySection4NeedContainer {
    width: 100%;
    background: url("/images/solutions/fieldSystem/withKey/withKeySection4NeedBg.png") no-repeat center center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 40px 0;
}


.withKeySection4NeedTitle {
    font-family: SCDream, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.375rem;
    letter-spacing: -1.44px;
    color: #FFFFFF;
}

.withKeySection4NeedTextContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.withKeySection4NeedTextWrapper {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    column-gap: 43px;
    row-gap: 10px;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease, transform 1s ease;
}

.withKeySection4Wrapper.animate > .withKeySection4NeedContainer > .withKeySection4NeedTextContainer > .withKeySection4NeedTextWrapper {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.withKeySection4Text {
    font-family: SCDream, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 2.25rem;
    letter-spacing: -1.08px;
    color: #FFFFFF;
}


.withKeySection5 {
    width: 100%;
    padding-top: 62px;
    padding-bottom: 74px;
}

.withKeySection5Container {
    width: 100%;
    max-width: 1400px;
}

.withKeySection5Wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 70px;
}

.withKeySection5FirstImgContainer{
    opacity: 0;
    transition: opacity 1s ease;
}

.withKeySection5FirstImgContainer.animate{
    opacity: 1;
}

.withKeySection5FirstImgContainer > img {
    width: 100%;
    max-width: 966px;
}

.withKeySection5FirstTextContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 51px;
    padding-top: 35px;
}

.withKeySection5FirstTitleContainer{
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease, transform 1s ease;
}

.withKeySection5FirstTitle {
    font-family: SCDream, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.375rem;
    letter-spacing: -1.44px;
    text-align: center;
    color: #12222D;
}

.withKeySection5FirstContentContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 85px;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease, transform 1s ease;
}

.withKeySection5FirstTextContainer.animate > .withKeySection5FirstTitleContainer,
.withKeySection5FirstTextContainer.animate > .withKeySection5FirstContentContainer{
    opacity: 1;
    transform: translateY(0);
}

.withKeySection5FirstTextContainer.animate > .withKeySection5FirstTitleContainer:nth-child(1){
    transition-delay: 0s;
}

.withKeySection5FirstTextContainer.animate > .withKeySection5FirstContentContainer:nth-child(2){
    transition-delay: 0.2s;
}



.withKeySection5FirstContent {
    font-family: SCDream, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 2.25rem;
    letter-spacing: -1.08px;
    color: #12222D;
}

.withKeySection5FirstContent::marker {
    font-size: 2rem;
}

.withKeySection5SecondContainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.withKeySection5SecondContainer.animate{
    opacity: 1;
}

.withKeySection5SecondContainer > img {
    width: 100%;
    max-width: 682px;
}

.withKeySection6 {
    width: 100%;
    background: url("/images/solutions/fieldSystem/withKey/withKeySection6Bg.png") no-repeat center center / cover;
}

.withKeySection6Container {
    width: 100%;
    max-width: 1400px;
    padding: 110px 0 133px;
}

.withKeySection6TextContainer{
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease, transform 1s ease;
}

.withKeySection6Text {
    font-family: SCDream, sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 2.125rem;
    letter-spacing: -1.08px;
    color: #FFFFFF;
    text-align: center;
}

.withKeySection6ClientSwiperContainer {
    padding-top: 27px;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease, transform 1s ease;
}

.withKeySection6Wrapper.animate>.withKeySection6TextContainer,
.withKeySection6Wrapper.animate>.withKeySection6ClientSwiperContainer{
    opacity: 1;
    transform: translateY(0);
}

.withKeySection6Wrapper.animate>.withKeySection6TextContainer:nth-child(1){
    transition-delay: 0s;
}

.withKeySection6Wrapper.animate>.withKeySection6ClientSwiperContainer:nth-child(2){
    transition-delay: 0.2s;
}

.mySwiper {
    height: 90px;
    width: 80%;
    max-width: 966px;
    margin: auto;
    background-color: #FFFFFF;
    box-shadow: 0 0 20px #FF3333B3;
    border-radius: 60px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide > img {
    max-width: 138px;
    width: 100%;
    height: auto;
}

.swiper-button-next svg,
.swiper-button-prev svg {
    display: none !important;
}


@media (max-width: 1399px) {
    .withKeySection2Container {
        padding-right: 30px;
    }

    .withKeySection2Wrapper {
        gap: 98px;
    }

    .withKeySection2TextTitle {
        font-size: 2.5rem;
        white-space: nowrap;
    }

    .withKeySection2TextContent {
        white-space: nowrap;
    }

    .withKeySection4Container {
        max-width: 570px;
    }


    .withKeySection4FeatContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .withKeySection4NeedTextWrapper {
        display: flex;
        flex-direction: column;
    }

    .withKeySection5FirstContentContainer {
        flex-direction: column;
        gap: 0px;
        align-items: flex-start;
    }
}

@media (max-width: 991px) {

    .withKeySection2Container {
        padding: 0 80px;
    }

    .withKeySection2Wrapper {
        padding-top: 40px;
        flex-direction: column;
        gap: 0;
    }

    .withKeySection2TextContent {
        text-align: center;
    }

    .withKeySection4Container {
        max-width: 538px;
    }
}