﻿.qx175342021121
{
    position: relative;
    padding: 30px 20px;
    max-width: 1180px;
    margin: 0 auto;
    word-break: break-word;
}
.qx175342021121 .bigbox
{
    width: 100%;
    position: relative;
    display: flex;
    min-height: 500px;
    align-items: center;
}
.qx175342021121 .leftbox
{
    width: calc(40% - 72px);
    position: relative;/* height: 550px; */
    margin: 0 0 0 72px;
}
.qx175342021121 .textarea
{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;/* 垂直居中 */
}
.qx175342021121 .title
{
    font-size: 24px;
    color: #172119;
    font-weight: 600;
}
.qx175342021121 .text
{
    margin: 20px 0;
    font-size: 14px;
}
.qx175342021121 .button
{
    width: max-content;
    position: relative;
    margin: 10px 0;
    color: #ffa500;
}
.qx175342021121 .button .backstage-blocksEditor-wrap
{
    display: inline-block;
}
.qx175342021121 .button .backstage-componet-bd
{
    position: relative;
    padding: 10px 0;
    display: block;
}
.qx175342021121 .backstage-componet-bd::after
{
    position: absolute;
    content: "";
    width: 0;
    height: 2px;
    background-color: #ffa500;
    bottom: 2px;
    left: 0;
    transition: width .4s linear;
}
.qx175342021121 .button:hover .backstage-componet-bd::after
{
    width: 100%;
}
.qx175342021121 .button .backstage-componet-bd a
{
    display: block;
    color: inherit;
}/* 右边图片 */
.qx175342021121 .rightbox
{
    width: calc(60% - 72px);
    position: relative;
    height: 500px;
}
.qx175342021121 .smallimgbox .backstage-componet-bd
{
    width: 100%;
    height: 100%;
}
.qx175342021121 .smallimgbox
{
    position: absolute;
    width: 255px;
    height: 334px;
    top: 84px;
    left: 17%;/* transform: translateY(-50%); */
}
.qx175342021121 .smallimgbox .mb
{
    z-index: 2;
    position: relative;
}
.qx175342021121 .bigimgbox .mb
{
    z-index: 1;
    position: relative;
}
.qx175342021121 .bigbox .blocks-editor-active
{
    z-index: 4;
}
.qx175342021121 .bigimgbox
{
    position: absolute;
    right: 0;
    top: 0;/* transform: translateY(-50%); */
    width: 360px;
    height: 499px;
}
.qx175342021121 .backstage-blocksEditor-wrap
{
    width: 100%;
    height: 100%;
}
.qx175342021121 .backstage-componet
{
    width: 100%;
    height: 100%;
}
.qx175342021121 .bigimgbox .backstage-componet-bd
{
    width: 100%;
    height: 100%;
}
.qx175342021121 .blocks-image
{
    width: 100%;
    height: 100%;
    display: block;
}
.qx175342021121 .rightbox .blocks-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}/* @media screen and (max-width:1200px) {
    .qx175342021121 .bigbox {
        flex-direction: column-reverse;
        width: 100%;
        position: relative;
}
    .qx175342021121 .bigbox .rightbox{
    min-height: 550px;
    margin: 0 auto;
    }
    .qx175342021121 .bigbox .leftbox {
           margin-left: 229px;
    }

} *//* pad横屏 */
@media screen and (max-width: 1024px)
{
    .qx175342021121 .smallimgbox
    {
        left: 0;
    }
    .qx175342021121 .bigbox .rightbox
    {
        width: 53%;
        margin: 0 0 0 72px;
    }
    .qx175342021121 .bigbox .leftbox
    {
        width: calc(47% - 72px);
        margin: 0;
    }
}/* 手机横屏 */
@media screen and (max-width: 900px) and (min-width: 800px)
{/* .qx175342021121 .bigbox .rightbox{
    width:61%;
} */
    .qx175342021121 .bigbox .leftbox
    {
        width: calc(39% - 20px);
        margin-right: 20px;
    }
    .qx175342021121 .bigbox .rightbox
    {
        min-height: 550px;
        margin: 0 auto;
        width: 61%;
    }
}/* pad竖屏 */
@media screen and (max-width: 768px)
{
    .qx175342021121 .bigbox
    {
        flex-direction: column-reverse;
    }
    .qx175342021121 .bigbox .leftbox
    {
        width: 100%;
    }
    .qx175342021121 .bigbox .rightbox
    {
        width: calc(70% - 20px);
        margin-left: 20px;
        margin-top: 10px;
    }
    .qx175342021121 .smallimgbox
    {
        left: 0;
    }
    .qx175342021121 .textarea
    {
        margin-top: 20px;
    }
}
@media screen and (max-width: 500px)
{
    .qx175342021121
    {
        position: relative;
        padding: 20px 10px;
        width: calc(100% - 40px);
    }
    .qx175342021121 .bigbox
    {
        flex-direction: column;
        width: 100%;
        position: relative;
        align-items: unset;
    }
    .qx175342021121 .bigbox .leftbox
    {
        width: 100%;
        position: relative;
        margin: unset;
    }
    .qx175342021121 .bigbox .rightbox
    {
        width: 100%;
        position: relative;
        min-height: 420px;
        margin-bottom: 0;
        height: 400px;
        margin-left: 0;
        margin-top: 10px;
    }
    .qx175342021121 .smallimgbox
    {
        width: 196px;
        height: 257px;
        left: 0;
    }
    .qx175342021121 .bigimgbox
    {
        width: 299px;
        height: 416px;
    }
    .qx175342021121 .textarea
    {
        margin-left: 0;
    }
}
@media screen and (max-width: 400px)
{
    .qx175342021121
    {
        padding: 30px 20px;
    }
    .qx175342021121 .bigbox .rightbox
    {
        width: 100%;
        position: relative;
        height: 360px;
        min-height: 290px;
        margin: 10px auto 0;
    }
    .qx175342021121 .bigbox
    {
        flex-direction: column-reverse;
        width: 100%;
        position: relative;
        align-items: unset;
    }
    .qx175342021121 .bigimgbox
    {
        width: 262px;
        height: 359px;
    }
    .qx175342021121 .smallimgbox
    {
        width: 158px;
        height: 207px;
        left: 0;
        top: 76px;
    }
}