@charset "UTF-8";

@keyframes bouncing-up {
    from {
        opacity: 1;
        transform: translateY(-0.3rem);
    }

    to {
        opacity: 1;
        transform: translateY(0.3rem);
    }
}

@keyframes bouncing1 {
    from {
        opacity: 1;
        transform: translateY(0rem);
    }

    to {
        opacity: 1;
        transform: translateY(0.5rem);
    }
}

.toTop-btn img:hover {
    animation: bouncing1 0.4s infinite alternate;
}

* {
    margin: 0;
    font-family: 'PingFang SC','Microsoft YaHei',STZhongsong,Tahoma,Arial;
}

label {
    margin-bottom: 0;
}

.main {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none; /* 取消下划线 */
    color: inherit; /* 继承父元素的文本颜色 */
}

.downloads {
    width: 100%;
    background-color: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
}

    .downloads .down-center {
        justify-content: flex-end;
        color: #0cc3b3;
        font-size: 14px;
        align-items: center;
        padding-right: 10px;
    }

        .downloads .down-center .Downactive {
            margin: 0 8px;
            height: 14px;
            line-height: 14px;
            width: 1px;
            background-color: #0cc3b3;
        }

        .downloads .down-center .down-video {
            cursor: pointer;
        }

.main-center {
    /* width: 57.5%; */
    width: 1100px;
    display: flex;
    flex-wrap: wrap;
}

    .main-center .header {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        height: 88px;
        line-height: 90px;
        color: #4b4b4b;
    }

        .main-center .header .navs {
            display: flex;
            box-sizing: border-box;
            height: 100%;
        }

            .main-center .header .navs .nav-items {
                box-sizing: border-box;
                height: 100%;
                width: 93px;
                text-align: center;
                font-size: 19px;
                cursor: pointer;
            }

        .main-center .header .active span, .main-center .header .hover span {
            background: #249cf2;
            color: #fff;
        }

        .main-center .header .nav-items span {
            border-radius: 8px;
            width: 100%;
            display: inline-block;
            height: 50px;
            vertical-align: middle;
            line-height: 50px;
        }

        .main-center .header .nav-items:hover span {
            background: #249cf2;
            color: #fff;
        }

        .main-center .header .dropdown {
            display: none;
        }

            .main-center .header .dropdown .dropdown-menu.show {
                left: -30px !important;
            }

            .main-center .header .dropdown .dropdown-item {
                padding: 0 20px;
                height: 40px;
                line-height: 40px;
            }

                .main-center .header .dropdown .dropdown-item :hover {
                    color: #fff !important;
                    background-color: #4b4b4b !important;
                }

            .main-center .header .dropdown .dropdown-toggle::after {
                display: none;
            }

            .main-center .header .dropdown .btn {
                font-size: 16px;
                color: #ccc;
                border: solid 1px;
            }

.main-banner {
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: url(/Static/login/imgs/bg2.png) no-repeat #6db3f8; /* 从上到下的渐变色 */
}

    .main-banner .banner-left {
        margin-right: 1.1979vw;
        flex: 1;
    }

        .main-banner .banner-left .banner-left-top {
            display: flex;
            flex-wrap: wrap;
            font-size: 35px;
            align-items: end;
            justify-content: center;
            letter-spacing: 0.1em;
            padding-top: 35px;
        }

            .main-banner .banner-left .banner-left-top .active {
                color: #122f15;
                font-size: 39px;
            }

            .main-banner .banner-left .banner-left-top .activeBgc {
                margin: 0 5px;
                padding: 0 13px;
                background: url("./imgs/fontbg.png");
                background-size: 100% 100%;
                color: #122f15;
            }

        .main-banner .banner-left .banner-left-center {
            margin-top: 35px;
            text-align: right;
            padding-right: 20px;
            letter-spacing: 0.1em;
        }

        .main-banner .banner-left .banner-left-bottom {
            display: flex;
            width: 100%;
            justify-content: center;
        }

            .main-banner .banner-left .banner-left-bottom .banner-more {
                margin-top: 45px;
                background-color: #fff;
                color: #6db3f8;
                padding: 10px 20px;
                border-radius: 30px;
                cursor: pointer;
            }

                .main-banner .banner-left .banner-left-bottom .banner-more:hover {
                    background: #f1f1f1;
                }

                .main-banner .banner-left .banner-left-bottom .banner-more img {
                    transition: transform 0.5s ease; /* 添加过渡效果 */
                }

            .main-banner .banner-left .banner-left-bottom .bannerImg {
                transform: rotate(-180deg); /* 旋转180度 */
            }

    .main-banner .banner-right {
        margin-right: 10px;
        width: 281px;
        height: 300px;
        background-color: #fff;
        border-radius: 8px;
        padding: 30px 30px;
    }

        .main-banner .banner-right .right-top {
            display: flex;
            justify-content: space-between;
            color: #727171;
            border-bottom: 1px solid #f1f1f1;
            font-size: 14px;
            height: 27px;
            cursor: pointer;
        }

            .main-banner .banner-right .right-top .active {
                height: 100%;
                color: #249cf2;
                border-bottom: 2px solid #249cf2;
            }

            .main-banner .banner-right .right-top div {
                min-width: 110px;
                text-align: center;
            }

        .main-banner .banner-right .right-center {
            margin-top: 20px;
            color: #a9a9a9;
            min-height: 142px;
        }

            .main-banner .banner-right .right-center .right-center-item {
                display: flex;
                border: 1px solid #eaeaea;
                align-items: center;
                border-radius: 3px;
                font-size: 14px;
                padding: 1px 5px;
                margin-bottom: 20px;
                line-height: 30px;
            }

                .main-banner .banner-right .right-center .right-center-item input {
                    border: none;
                    height: 100%;
                    margin-left: 2px;
                    font-size: 12px;
                }

                    .main-banner .banner-right .right-center .right-center-item input:focus {
                        outline: none;
                    }

            .main-banner .banner-right .right-center .right-password {
                margin-top: 3px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                .main-banner .banner-right .right-center .right-password .password-item {
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                }

                    .main-banner .banner-right .right-center .right-password .password-item .forget {
                        color: #6daef3;
                        cursor: pointer;
                    }

                    .main-banner .banner-right .right-center .right-password .password-item span {
                        color: #948a81;
                        margin-left: 3px;
                    }

        .main-banner .banner-right .banner-right-bottom {
            margin-top: 10px;
            display: flex;
            font-size: 15px;
            justify-content: space-between;
        }

            .main-banner .banner-right .banner-right-bottom button, .banner-right-bottom input[type=button], .banner-right-bottom input[type=submit] {
                color: #fff;
                border: none;
                border-radius: 5px;
                padding: 5px 15px;
                margin-top: 10px;
            }

            .main-banner .banner-right .banner-right-bottom .banner-btn {
                background-color: #249cf2;
            }

                .main-banner .banner-right .banner-right-bottom .banner-btn:hover {
                    background-color: #0B68B5;
                }

            .main-banner .banner-right .banner-right-bottom .banner-btn2:hover {
                background-color: #E94C07;
            }

            .main-banner .banner-right .banner-right-bottom .banner-btn2 {
                background-color: #ef883b;
            }

.main-founction {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    background-color: #f8f8f9;
    color: #2c3e50;
    z-index: 99;
    height: 170px;
}

    .main-founction .fct-item {
        box-sizing: border-box;
        width: 275px;
        display: inline-block;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

        .main-founction .fct-item:hover, .main-founction .fct-item.activebor {
            background: #cbe5f8;
        }

        .main-founction .fct-item > div {
            margin-top: 55px;
            height: 105px;
        }

        .main-founction .fct-item .fct-item-pic {
            line-height: 60px;
            border-radius: 8px;
            min-width: 100px;
            text-align: center;
            width: 40px;
            float: left;
            margin-right: 10px;
        }

        .main-founction .fct-item .fct-item-detail {
            font-size: 18px;
            margin-top: 5px;
            float: left;
        }

    .main-founction .activebor {
        /* border-bottom: 2px solid #4ca1af;
        background: #f1f1f1;*/
    }

.founction2 {
    height: 115px;
    width: 100%;
    display: none;
}

.founctionActive {
    position: fixed;
    transition: 1s;
}

.founction2Active {
    display: block;
    transform: 1s;
}

.founction3Active {
    height: 230px !important;
}

.main-introduce {
    /*box-shadow: 0 -2px 10px 0px rgba(0, 0, 0, 0.1);*/
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff;
    padding: 50px 0 48px 0;
}

    .main-introduce .introduce-left {
        /* display: inline-flex; */
        background-color: #f1f5ff;
        /* flex: 2; */
        min-width: 226px;
        align-items: center;
        height: 368px;
        /* padding-left: 12px; */
        /* padding-right: 20px; */
        /* margin-right: 10px; */
        border-radius: 10px;
        /* box-shadow: #f1f5ff 5px 5px 0 2px; */
        /* width: 226px; */
        padding: 5px 10px;
    }



        .main-introduce .introduce-left .introduce-left-child {
            width: 266px;
            height: 100%;
            /* flex: 1; */
            text-align: center;
            background: url(./imgs/pic.png) no-repeat;
            background-position: center center;
            background-size: 100% 86%;
            float: left;
        }

            .main-introduce .introduce-left .introduce-left-child img {
                width: 100%;
                height: 100%;
            }

            .main-introduce .introduce-left .introduce-left-child .inTop-left {
                display: flex;
                flex: 1;
            }

                .main-introduce .introduce-left .introduce-left-child .inTop-left .inTop-item {
                    width: 50%;
                    display: flex;
                    align-items: center;
                    color: #4ca1af;
                }

                .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive {
                    padding-left: 14%;
                }

                .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive2 {
                    padding-left: 23%;
                }

                .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive3 {
                    padding-left: 9%;
                }

                .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive4 {
                    padding-left: 18%;
                }

        .main-introduce .introduce-left .introduce-right-child div {
            width: 100%;
        }

        .main-introduce .introduce-left .introduce-right-child .inActive1 {
            font-size: 22px;
            color: #4ca1af;
            margin-bottom: 22px;
            margin-top: 15px;
        }

        .main-introduce .introduce-left .introduce-right-child .inActive2 {
            color: #000000;
            text-align: right;
        }

        .main-introduce .introduce-left .introduce-right-child .inActive3 {
            font-size: 20px;
            color: #2c3e50;
            margin: 10px 0 16px 0;
            padding-left: 10px;
        }

        .main-introduce .introduce-left .introduce-right-child .inActive4 {
            color: #f88031;
            margin-bottom: 20px;
            margin-left: -15px;
        }

        .main-introduce .introduce-left .introduce-right-child .inActive5 {
            color: #2c3e50;
        }

        .main-introduce .introduce-left .introduce-right-child .inActive6 {
            color: #40cd8c;
            margin: 18px 0 22px 0;
            text-align: center;
        }

        .main-introduce .introduce-left .introduce-right-child .inActive7 {
            font-size: 20px;
            color: #2c3e50;
        }

    .main-introduce .introduce-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .main-introduce .introduce-right .introduce-right-top {
            display: flex;
            justify-content: space-between;
        }

            .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item {
                width: 270px;
                height: 180px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                box-sizing: border-box;
                color: #40cd8c;
                margin: 5px;
                box-shadow: #f1f5ff 5px 5px 5px 5px;
                padding: 10px;
                background: #fff;
            }

                .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active1 {
                    font-size: 18px;
                    text-align: left;
                    width: 100%;
                    padding-left: 30px;
                    color: #3399df;
                }

                .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active2 {
                    text-align: right;
                    font-size: 15px;
                    margin-top: 10px;
                }

                .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active3 {
                    margin-top: 15px;
                    width: 100%;
                    padding-left: 30px;
                    color: #3399df;
                }

                .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active4 {
                    margin-top: 18px;
                    font-size: 18px;
                    width: 100%;
                    letter-spacing: 0.1em;
                    padding-left: 30px;
                }

                .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active5 {
                    font-size: 30px;
                    color: #f68941;
                }

                .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active6 {
                    text-indent: 2em;
                    margin-top: 19px;
                }

                .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active7 {
                    margin-top: 10px;
                }

            .main-introduce .introduce-right .introduce-right-top .active1 {
                margin-right: 6px;
            }


            .main-introduce .introduce-right .introduce-right-top .active2 {
                margin-left: 6px;
            }



            .main-introduce .introduce-right .introduce-right-top .active3 {
                margin-right: 6px;
            }



            .main-introduce .introduce-right .introduce-right-top .active4 {
                margin-left: 6px;
            }



.introActive {
    display: none;
    transition: 1s;
}

.homeworks {
    width: 100%;
    display: flex;
    padding: 45px 0 42px 0;
    justify-content: center;
    min-height: 920px;
    background: url(/Static/login/imgs/tb11.png) right no-repeat;
}

    .homeworks .home-title {
        color: #444444;
        width: 100%;
        text-align: center;
        font-size: 48px;
        letter-spacing: 0.1em;
        background: url(/Static/login/imgs/tb1.png) no-repeat;
        padding-top: 30px;
    }

    .homeworks .home-intro {
        width: 100%;
        text-indent: 2em;
        letter-spacing: 0.12em;
        margin-top: 0px;
        line-height: 70px;
    }

    .homeworks .home-pic {
        margin-top: 28px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .homeworks .home-pic img {
            width: auto;
            height: auto;
        }

.weekly {
    width: 100%;
    background: linear-gradient(to right, #2dcdfb, #2d44ea);
    display: flex;
    justify-content: center;
    color: #fff;
    padding: 22px 0 30px 0;
    min-height: 980px;
    padding: 45px 0 42px 0;
}

.weekly-title {
    width: 100%;
    text-align: center;
    letter-spacing: 0.1em;
    background: url(/Static/login/imgs/tb22.png) no-repeat;
    padding-top: 30px;
    margin-top: 50px
}

.weekly-intro {
    width: 100%;
    text-indent: 2em;
    letter-spacing: 0.09em;
    line-height: 60px;
    max-height: 10px;
    text-align: left;
    margin-top: 20px;
}

.weekly-pic {
    margin-top: 13px;
    width: 100%;
    text-align: center;
    border-radius: 12px;
    background: #fff;
    padding-top: 60px;
    margin-bottom: 50px;
}

    .weekly-pic img {
        border-radius: 10px;
        width: auto;
        height: auto;
    }

.colorActive {
    color: #444444;
}

.monthly {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0 15px 0;
    background-color: #fff;
}

    .monthly .weekly-title {
        width: 100%;
        text-align: center;
        letter-spacing: 0.1em;
        background: url(/Static/login/imgs/tb33.png) no-repeat;
        padding-top: 30px;
        margin-top: 50px;
        font-size: 48px;
    }

    .monthly .active {
        text-align: center;
    }

    .monthly .monthly-pic {
        width: 80%;
    }

.examination {
    width: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    padding: 38px 0 81px 0;
}

    .examination .weekly-title {
        width: 100%;
        text-align: center;
        letter-spacing: 0.1em;
        background: url(/Static/login/imgs/tb44.png) no-repeat;
        padding-top: 30px;
        margin-top: 50px;
    }

    .examination .active1 {
        line-height: 30px;
    }

    .examination .examination-detail {
        margin-top: 41px;
        display: flex;
        flex-wrap: wrap;
    }

        .examination .examination-detail .examination-detail-item {
            flex: 1;
            font-size: 15px;
            display: flex;
            flex-direction: column;
            max-height: 220px;
        }

            .examination .examination-detail .examination-detail-item .detail-head {
                color: #fff;
                font-size: 24px;
                text-align: center;
                margin-bottom: 1px;
            }

            .examination .examination-detail .examination-detail-item .detail-main {
                padding: 10px;
                flex: 1;
                min-height: 155px;
                background-color: #eceae8;               
                color: #6b6b6b;
            }

            .examination .examination-detail .examination-detail-item .head1 {
                background-color: #31b2ea;
                margin-top: 70px;
            }

            .examination .examination-detail .examination-detail-item .head2 {
                background-color: #85c226;
            }

            .examination .examination-detail .examination-detail-item .head3 {
                background-color: #f4ae00;
                margin-top: 70px;
            }

            .examination .examination-detail .examination-detail-item .head4 {
                background-color: #e3556b;
            }

        .examination .examination-detail .activeLeft {
            margin-right: 20px;
        }

.joinus {
    padding: 30px 0 30px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #cccccc;
}

    .joinus .join-center {
        justify-content: space-between;
    }

        .joinus .join-center .join-left .manager {
            margin-top: 13px;
        }

        .joinus .join-center .join-left .managers {
            display: flex;
            margin: 5px 0 5px 0;
        }

            .joinus .join-center .join-left .managers .manager-item {
                display: flex;
            }

                .joinus .join-center .join-left .managers .manager-item .item-number {
                    margin-left: 15px;
                }

            .joinus .join-center .join-left .managers .activeRight {
                margin-left: 3.125vw;
            }

        .joinus .join-center .join-left .usNumber {
            display: flex;
            color: #999;
        }

        .joinus .join-center .join-left .usActive {
            margin-left: 15px;
            flex: 1;
        }

        .joinus .join-center .join-right {
            display: flex;
            align-items: flex-end;
            padding-bottom: 1px;
        }

            .joinus .join-center .join-right .join-right-left {
                text-align: center;
                font-size: 14px;
                color: #999;
            }

                .joinus .join-center .join-right .join-right-left img {
                    width: auto;
                    height: auto;
                }

                .joinus .join-center .join-right .join-right-left .join-gzh {
                    margin-top: 8px;
                    margin-left: 30px;
                }

                .joinus .join-center .join-right .join-right-left .join-dy {
                    margin-top: 4px;
                }

.message {
    font-size: 13px;
    color: #bcbcbc;
}

    .message .message-center {
        padding: 5px 0;
    }

.toTop {
    display: flex;
    justify-content: center;
    width: 100%;
}

    .toTop .toTop-center {
        display: flex;
        justify-content: flex-end !important;
        width: 1250px;
    }

    .toTop .toTop-btn {
        cursor: pointer;
        position: fixed;
        bottom: 100px;
        border-radius: 12px;
        padding: 10px;
    }

    .toTop .toTop-btn {
        cursor: pointer;
        position: fixed;
        bottom: 100px;
        border-radius: 12px;
        padding: 10px;
    }

@media (max-width: 1100px) {
    .main-center {
        width: 100% !important;
    }

    .header {
        padding: 0 10px;
    }

    .weekly-pic img {
        width: 95% !important;
        height: 100% !important;
    }

    .homeworks .home-intro {
        padding: 0 15px;
    }

    .homeworks .home-pic {
        padding: 0 10px;
    }

    .examination .active1 {
        padding: 0 15px;
    }

    .monthly .active {
        text-align: left;
    }

    .weekly-intro {
        padding: 0 15px;
    }

    .joinus {
        padding: 20px 10px 5px 10px;
    }

    .toTop .toTop-center {
        width: 100% !important;
    }

    .downloads {
        padding: 0 10px;
    }
}

@media (max-width: 1000px) {
    .main-introduce .introduce-left .introduce-left-child {
        background-size: 100% 70%;
    }
}

@media (max-width: 950px) {
    .main-introduce .introduce-left .introduce-left-child {
        background-size: 100% 60%;
    }
}

@media (max-width: 900px) and (min-width: 805px) {
    .main-introduce .introduce-left .introduce-left-child {
        display: none !important;
    }
}

@media (max-width: 821px) {
    .main-founction {
        justify-content: center;
    }

        .main-founction .active {
            margin-left: 0;
            margin-right: 0;
        }

    .main-introduce .introduce-left .introduce-left-child img {
        width: 65%;
        height: 65%;
    }
}

@media (max-width: 804px) {
    .main-introduce .introduce-right {
        width: 100% !important;
    }

        .main-introduce .introduce-right .introduce-right-top {
            justify-content: center !important;
            margin-top: 10px !important;
        }

    .examination .examination-detail {
        justify-content: center !important;
        padding: 5px;
    }

        .examination .examination-detail :nth-child(2) {
            margin-right: 0;
        }

        .examination .examination-detail .examination-detail-item {
            width: 47% !important;
            flex: none;
            margin: 5px;
            border-radius: 8px;
        }

    .main-introduce .introduce-left .introduce-left-child {
        background-size: 70% 86%;
    }
}

@media (max-width: 752px) {
    .main-founction {
        padding: 0 100px;
    }
}

@media (max-width: 725px) {
    .main-center .header {
        padding: 0 20px !important;
    }

        .main-center .header .navs {
            display: none !important;
        }

        .main-center .header .dropdown {
            display: block !important;
        }
}

@media (max-width: 715px) {
    .joinus .join-center {
        align-items: center;
        flex-direction: column-reverse !important;
    }

        .joinus .join-center .join-right {
            margin-top: 20px;
            width: 100%;
            padding: 10px 10px 20px;
            justify-content: space-between;
        }
}

@media (max-width: 640px) {
    .main-introduce .introduce-left .introduce-left-child {
        background-size: 81% 86%;
    }
}

@media (max-width: 598px) {
    .main-banner .banner-left {
        display: none !important;
    }

    .main-banner .main-center2 {
        display: flex;
        justify-content: center;
        align-self: center;
    }

    .main-introduce .introduce-right {
        padding: 5px 15px;
    }

    .message .message-center {
        padding: 5px 15px;
    }
}

@media (max-width: 585px) {
    .main-founction {
        padding: 0 10px !important;
    }
}

@media (max-width: 568px) {
    .main-founction {
        padding: 0 !important;
    }
}

@media (max-width: 552px) {
    .main-introduce .introduce-left {
        margin-right: 0 !important;
    }

    .homeworks .home-pic img {
        width: 100% !important;
        height: 100% !important;
    }

    .joinus .join-center .join-left {
        padding: 10px;
        width: 100%;
    }

        .joinus .join-center .join-left .managers .activeRight {
            margin-left: 20px;
        }

    .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active1 {
        text-align: center;
        padding-left: 0 !important;
    }

    .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active3 {
        margin-top: 5px;
        text-align: center;
        padding-left: 0 !important;
    }

    .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active4 {
        margin-top: 5px;
        padding-left: 10px;
        font-size: 16px;
    }

    .main-introduce .introduce-right .introduce-right-top .introduce-right-top-item .Active6 {
        text-indent: 0;
    }

    .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive {
        padding-left: 9%;
    }

    .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive2 {
        padding-left: 20%;
    }

    .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive3 {
        padding-left: 7%;
    }

    .main-introduce .introduce-left .introduce-left-child .inTop-left .inTopActive4 {
        padding-left: 14%;
    }

    .main-introduce .introduce-left .introduce-left-child {
        background-size: 88% 70%;
    }
}

@media (max-width: 460px) {
    .main-introduce .introduce-left .introduce-left-child {
        background-size: 100% 65%;
    }
}