.layui-layout-admin .layui-body {
    padding-bottom: 0;
}

.banner {
    width: 100%;
}

.banner img {
    width: 100%;
}

.banner .apply_now {
    width: 200px;
    height: 60px;
    background: linear-gradient(88deg, #1732FF 0%, #0014AD 100%);
    border-radius: 3px;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    position: absolute;
    z-index: 1;
    margin-left: 45%;
    margin-top: -9%;
}
.banner .hover_code {
    width: 240px;
    height: 280px;
    padding: 20px;
    background: linear-gradient(0deg, #DBE8F9 0%, #FFFFFF 100%);
    box-shadow: 0px 0px 29px 0px rgba(39, 39, 39, 0.25);
    border-radius: 10px;
    font-weight: 500;
    font-size: 24px;
    color: #12358D;
    display: none;
    text-align: center;
    position: absolute;
    margin-left: 43%;
    margin-top: -19%;
    z-index: 2;
}
.banner .hover_code img {
    width: 100%;
    display: block;
    margin-bottom: 13px;
}
.banner .apply_now:hover+.hover_code{
    display: block;
}
.banner .hover_code:hover{
    display: block;
}

/* 加入我们 */
.join {
    margin: 100px 0;
}

.join img {
    box-shadow: 0px 5px 18px 0px rgba(75, 97, 118, 0.18);
    border-radius: 10px;
}


/* 商标管理系统 */
.system {
    background: url('/static/b2023/images/q_system/2-bg.jpg') center no-repeat;
    padding-top: 90px;
}

.title {
    font-size: 48px;
    font-family: "albbphtM";
    font-weight: 500;
    color: #333333;
    line-height: 72px;
    text-align: center;
}

.title span {
    background-image: linear-gradient(to right, #1732FF, #0014AD);
    /* 线性渐变背景，方向向上 */
    -webkit-background-clip: text;
    /* 背景被裁剪成文字的前景色 */
    -webkit-text-fill-color: transparent;
    /* 文字填充颜色变透明 */
}

.system .system_main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.system .system_main .system_right {
    height: 100%;
}

.system_main .system_right .system_drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.system_main .system_right .system_drop .drop_right {
    width: 500px;
    font-size: 20px;
    font-family: "albbphtM";
    color: #333333;
    line-height: 36px;
    margin-left: 10px;
    margin-top: 50px;
}

/* 获取支持 */
.support {
    margin: 100px 0;
}

.support .supports {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.support .supports .suuport_drop {
    background: linear-gradient(-47deg, #F9FCFF 0%, #FFFFFF 100%);
    box-shadow: 0px 5px 18px 0px rgba(75, 97, 118, 0.18);
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    height: 240px;
}

.support .supports .suuport_drop p {
    width: 196px;
    font-size: 20px;
    font-family: "albbphtM";
    color: #222222;
    line-height: 36px;
    text-align: justify;
    margin-top: 30px;
}

.support .application_landing {
    display: block;
    width: 200px;
    height: 60px;
    background: linear-gradient(88deg, #1732FF 0%, #0014AD 100%);
    box-shadow: 0px 5px 24px 0px rgba(34, 32, 32, 0.22);
    border-radius: 3px;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    font-family: "思源黑体";
    font-weight: 500;
    color: #FFFFFF;
    margin: 30px auto 0;
}

/* 视频学习文档 */
.learning {
    background: url('/static/b2023/images/q_system/4-bg.jpg') center no-repeat;
    padding: 100px 0;
}

.learning .videos {
    margin: 60px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.learning .videos video {
    width: 580px;
    height: 326px;
}

.learning .application {
    width: 200px;
    height: 60px;
    background: linear-gradient(88deg, #1732FF 0%, #0014AD 100%);
    box-shadow: 0px 5px 24px 0px rgba(34, 32, 32, 0.22);
    border-radius: 3px;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    font-family: "思源黑体";
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 auto;
}

/* 弹窗 */
.dialogs {
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: #333;
    font-size: 20px;
}

.dialogs img {
    width: 300px;
    height: 300px;
    text-align: center;
}


/* 适配 */
@media screen and (max-width:1400px) {
    .system .system_main .system_left {
        width: 50%;
    }

    .system .system_main .system_left img {
        width: 100%;
    }
}

@media screen and (max-width:1200px) {
    .layui-layout-admin .layui-body {
        min-width: auto;
    }

    .banner {
        width: 100%;
        min-width: 430px;
    }

    .join {
        margin: 10px 0;
    }

    .join img {
        width: 100%;
    }

    .system {
        background-size: cover;
        min-width: 430px;
        padding-top: 20px;
    }

    .title {
        font-size: 24px;
        line-height: 30px;
        margin: 0 20px;
    }

    .system .system_main {
        flex-wrap: wrap;
        justify-content: center;
    }

    .system_main .system_right .system_drop {
        width: 80%;
        margin: 10px;
        justify-content: center;
    }

    .system_main .system_right .system_drop .drop_right {
        width: 70%;
        margin-left: 10px;
        margin-top: 20px;
    }

    .support {
        margin: 10px 0;
        min-width: 430px;
    }

    .support .supports {
        flex-wrap: wrap;
        margin-left: 20px;
        margin-right: 20px;
        justify-content: space-around;
    }

    .support .supports .suuport_drop {
        margin-top: 20px;
    }

    .learning {
        padding: 20px 0;
        width: 100%;
        min-width: 430px;
        background-size: contain;
    }

    .learning .videos {
        flex-wrap: wrap;
        justify-content: center;
        margin: 10px;
    }

    .learning .videos img {
        margin-top: 20px;
        width: 100%;
    }
}