.frame4565 {
    height: 750px;
    width: 100%;
    border-bottom: 1px solid var(--semi-color-border);
}

.content {
    width: 480px;
}

:global{
    body{
        --react-logo-color:#087ea4;
    }
    body[theme-mode='dark']{
        --react-logo-color:var(--semi-color-primary)
    }
}

.autoWrapper_4fa00029 {
    position: relative;
    width: 721px;
}

@media screen and (max-width: 1440px) {

    .frame4565_pos {
        position: relative;
    }

    .content_pos {
        position: absolute;
        top: 172px;
        left: 160px; 
    }

    .autoWrapper_4fa00029_pos {
        position: absolute;
        top: 89px;
        left: 760px;
    }
}

@media screen and (min-width: 1441px) {
    
    .frame4565_pos {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content_pos {
        flex-shrink: 0;
        margin-right: 120px;
    }

    .autoWrapper_4fa00029_pos {
        flex-shrink: 0;
    }
       
}

.title {
    width: 480px;
    font-size: 48px;
    color: var(--semi-color-text-0);
    text-align: left;
    vertical-align: top;
    font-weight: 600;
    line-height: 67px;
    letter-spacing: 0em;
}

.title_en {
    font-weight: 700;
}

.subtitle {
    width: 480px;
    font-size: 18px;
    color: var(--semi-color-text-0);
    line-height: 32px;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
    margin-top: 32px;
}

.frameworksWrapper {
    margin-top: 64px;
    color: var(--semi-color-text-0);
}

.frameworks {
    width: 224px;
    height: 48px;
}

.background {
    position: absolute;
    width: 640px;
    height: 640px;
    left: -50px;
    top: -20px;
    filter: blur(120px);
    opacity: .6;

    &::before {
        content: "";
        position: absolute;
        width: 474px;
        height: 474px;
        top: 132px;
        background-color: rgb(var(--semi-indigo-3));
        border-radius: 50%;
    }

    &::after {
        content: "";
        position: absolute;
        width: 474px;
        height: 474px;
        left: 166px;
        background-color: rgb(var(--semi-teal-3));
        border-radius: 50%;
    }
}

.group3736 {
    position: relative;
    height: 682px;
    margin-left: -30px;
    margin-top: -30px;
}

.group3736dark {
    display: none;
    position: relative;
    height: 682px;
    margin-left: -30px;
    margin-top: -30px;
}

body[theme-mode='dark'] {
    .group3736 {
        display: none;
    }

    .group3736dark {
        display: inline;
    }
}
