.banner {
    background: linear-gradient( 90deg, #237EBB66 0%, rgba(255,255,255,0) 100%);
    background-size: cover;

    .title {
        color: #FFFFFF;
    }

    .sub-title {
        color: #FFFFFF;
    }
}

.linear-bg(100) {
    100% {
        background: linear-gradient(90deg, #7FD5EF 0%, #7FD5EF 100%);
    }
}

.linear-bg(@x) when (@x < 100) {
    @i: @x * 1%;
    @j: (@x + 0.1) * 1%;
    @bg: linear-gradient(90deg, #7FD5EF 0%, #7FD5EF @i, #FFFFFF @i, #FFFFFF 100%);

    @{i} {
        background: @bg;
    }

    .linear-bg(@x + 1);
}

.linear-bg-hide(100) {
    100% {
        background: linear-gradient(90deg, #7FD5EF 0%, #7FD5EF 100%);
    }
}

.linear-bg-hide(@x) when (@x >= 1) {
    @n: (100 - @x) * 1%;
    @i: @x * 1%;
    @j: (@x + 0.1) * 1%;
    @bg: linear-gradient(90deg, #7FD5EF 0%, #7FD5EF @i, #FFFFFF @j, #FFFFFF 100%);

    @{n} {
        background: @bg;
    }

    .linear-bg-hide(@x - 1);
}

@keyframes bg-animation {
    .linear-bg(1);
}

@keyframes bg-hide {
    .linear-bg-hide(99);
}

.teams {
    padding-top: 84px;
    padding-bottom: 100px;

    .name {
        color: #17598F;
        font-size: 20px;
        font-weight: 700;
        line-height: 23px;
        padding-left: 15px;
    }

    .title {
        padding-left: 5px;
        color: #838B9A;
        font-size: 18px;
        line-height: 21px;
        margin-top: 11px;
        border-left: 5px solid #7FD5EF;
        transition: border 0.2s ease-in;

        &:hover {
            border-left: 5px solid #FFFFFF;
        }

        span {
            padding: 0 5px;

            &:hover {
                animation: bg-animation 0.3s 1 forwards linear;
            }
        }
    }
}