:root{
    --scroll-wrap-04-head-mb: 120px;
    --scroll-wrap-04-left-width: 28.454172366621066%;
    --scroll-wrap-04-right-width: 54.65116279069767%;
    --scroll-wrap-04-right-padding-left: 59px;
    --scroll-wrap-04-gap: 16.89466484268126%;
    --scroll-wrap-04-content-gap: 32px;
    --scroll-wrap-04-row-gap: 32px;
    --scroll-wrap-04-subtitle-width: 864px;
    --scroll-wrap-04-img-radius: 16px;
    --scroll-wrap-04-animation-width: 500px;
}
.scroll-wrap-04_main{
    padding-block: var(--sectionInnerSpace);
}
.scroll-wrap-04_wrap{
    max-width: 1462px;
    margin: auto;
}
.scroll-wrap-04_main {
    position: relative;
}

.scroll-wrap-04_main .section--header .text-xl {
    max-width: var(--scroll-wrap-04-subtitle-width);
}

.scroll-wrap-04_main .section--header {
    margin-bottom: var(--scroll-wrap-04-head-mb);
}

.scroll-wrap-04-img {
    width: var(--scroll-wrap-04-left-width);
    max-width: var(--scroll-wrap-04-left-width);
}
.scroll-wrap-04-img button {
    padding: 0;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    display: block;
}
.scroll-wrap-04-img button:after {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 49px;
    height: 49px;
    content: '';
    background-image: url(../../images/benefits-perks/play-icon.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: all 0.3s ease;
}
.scroll-wrap-04-img button:hover:after,
.scroll-wrap-04-img button:focus::after {
    transform: scale(1.1);
}
.scroll-wrap-04_row {
    display: flex;
    gap: var(--scroll-wrap-04-gap);
    border-bottom: 1px solid rgba(122, 152, 187, 0.20);
    padding-block: var(--scroll-wrap-04-row-gap);
    background-color: #fff;
    position: sticky;
    z-index: 1;
}
.scroll-wrap-04_row:nth-child(1) { top: 120px; }
.scroll-wrap-04_row:nth-child(2) { top: 220px; }
.scroll-wrap-04_row:nth-child(3) { top: 320px; }
.scroll-wrap-04_row:nth-child(4) { top: 420px; }
.scroll-wrap-04_row:nth-child(5) { top: 520px; }
.scroll-wrap-04_row:nth-child(6) { top: 620px; }
.scroll-wrap-04_row:nth-child(7) { top: 720px; }

.scroll-wrap-04_wrap {
    display: flex;
    flex-direction: column;
}

.scroll-wrap-04-img img {
    width: 100%;
    height: auto;
    border-radius: var(--scroll-wrap-04-img-radius);
}

.scroll-wrap-04-content {
    width: var(--scroll-wrap-04-right-width);
    max-width: var(--scroll-wrap-04-right-width);
    position: relative;
    padding-left: var(--scroll-wrap-04-right-padding-left);
}

.scroll-wrap-04-content span {
    position: absolute;
    color: #6B7080;
    left: 0;
    top: 7px;
}

.scroll-wrap-04-body {
    padding-top: var(--scroll-wrap-04-content-gap);
}
.scroll-wrap-04-animation {
    position: absolute;
    right: 0;
    width: var(--scroll-wrap-04-animation-width);
    z-index: -1;
    top: 0;
    min-height: 1px;
}
.scroll-wrap-04-animation img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1600px) {
    :root{
        --scroll-wrap-04-head-mb: 80px;
        --scroll-wrap-04-left-width:  32.02614379084967%;
        --scroll-wrap-04-right-width: 57.51633986928104%;
        --scroll-wrap-04-right-padding-left: 40px;
        --scroll-wrap-04-gap: 10.457516339869281%;
        --scroll-wrap-04-content-gap: 24px;
        --scroll-wrap-04-row-gap: 32px;
        --scroll-wrap-04-subtitle-width: 1016px;
        --scroll-wrap-04-img-radius: 16px;
        --scroll-wrap-04-animation-width: 356px;
    } 
    .scroll-wrap-04-img button:after {
        width: 46px;
        height: 46px;
    }
    .scroll-wrap-04_main .container {
        position: static;
    }
    .scroll-wrap-04-animation{
        top: 0;
    }
    .scroll-wrap-04_main .section--header {
        gap: 40px;
    }
}
@media screen and (max-width: 1199px) {
    :root{
        --scroll-wrap-04-head-mb: 40px;
        --scroll-wrap-04-left-width:  31.573275862068968%;
        --scroll-wrap-04-right-width: 57.327586206896555%;
        --scroll-wrap-04-right-padding-left: 30px;
        --scroll-wrap-04-gap: 11.099137931034484%;
        --scroll-wrap-04-content-gap: 16px;
        --scroll-wrap-04-row-gap: 24px;
        --scroll-wrap-04-subtitle-width: 770px;
        --scroll-wrap-04-img-radius: 16px;
        --scroll-wrap-04-animation-width: 267px;
    } 
    .scroll-wrap-04_main .section--header { 
        gap: 24px;
    }
    .scroll-wrap-04_row:nth-child(1) { top: 70px; }
    .scroll-wrap-04_row:nth-child(2) { top: 130px; }
    .scroll-wrap-04_row:nth-child(3) { top: 190px; }
    .scroll-wrap-04_row:nth-child(4) { top: 250px; }
    .scroll-wrap-04_row:nth-child(5) { top: 310px; }
    .scroll-wrap-04_row:nth-child(6) { top: 370px; }
    .scroll-wrap-04_row:nth-child(7) { top: 430px; }
    .scroll-wrap-04-img button:after {
        left: 16px;
        bottom: 16px;
        width: 32px;
        height: 32px;
    }
}
@media screen and (max-width: 991px) {
    :root{
        --scroll-wrap-04-head-mb: 40px;
        --scroll-wrap-04-left-width:  31.11111111111111%;
        --scroll-wrap-04-right-width: 48.333333333333336%;
        --scroll-wrap-04-right-padding-left: 30px;
        --scroll-wrap-04-gap: 20.555555555555554%;
        --scroll-wrap-04-content-gap: 16px;
        --scroll-wrap-04-row-gap: 16px;
        --scroll-wrap-04-subtitle-width: 720px;
        --scroll-wrap-04-img-radius: 16px;
        --scroll-wrap-04-animation-width: 192px;
    } 
 }
@media screen and (max-width: 767px) {
    :root{
        --scroll-wrap-04-head-mb: 40px;
        --scroll-wrap-04-left-width:  100%;
        --scroll-wrap-04-right-width: 100%;
        --scroll-wrap-04-right-padding-left: 0;
        --scroll-wrap-04-gap: 0;
        --scroll-wrap-04-content-gap: 12px;
        --scroll-wrap-04-row-gap: 0;
        --scroll-wrap-04-subtitle-width: 100%;
        --scroll-wrap-04-img-radius: 16px;
        --scroll-wrap-04-animation-width: 0;
    }
    .scroll-wrap-04_wrap {
        border-top: 1px solid rgba(122, 152, 187, 0.20);
    }
    .scroll-wrap-04_row {
        flex-direction: column;
        padding: 16px 0;
        border-bottom: 1px solid rgba(122, 152, 187, 0.20);
        position: static;
    }
    .scroll-wrap-04_row.active{
        border-color: #1434CB;
    }
    .scroll-wrap-04-animation{
        display: none;
    }
    .scroll-wrap-04-content span{
        display: none;
    }
    .scroll-wrap-04_row:after{
        display: none;
    }
    .scroll-wrap-04_row.active .scroll-wrap-04-head h3 {
        color: #1434CB;
    }
    .scroll-wrap-04-body{
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .scroll-wrap-04-body p{
        margin: 0;
        font-weight: 400;
    }
    .scroll-wrap-04-head{
        padding-right: 28px;
    }
    .scroll-wrap-04-head:after{
        position: absolute;
        content: "\e915";
        width: 24px;
        height: 24px;
        font-size: 24px;
        color: #1B223A;
        font-family: 'i2c-font' !important;
        right: 0;
        top: 2px;
        line-height: 1;
    }
    .scroll-wrap-04_row.active .scroll-wrap-04-head:after {
        content: "\e90e";
    }
    .scroll-wrap-04-head h3{
        font-size: var(--fontSizeH4);
        line-height: var(--lineheightH4);
        letter-spacing: var(--letterSpacingH4);
    }
    .scroll-wrap-04_wrap .scroll-wrap-04_row:last-child {
        border: none;
    }
    .scroll-wrap-04_main .section--header {
        gap: 16px;
        margin-bottom: 40px;
    }
    .scroll-wrap-04_main .section-title.h2 {
        gap: 4px 0.125em;
    }
}