body {
    overflow-x: hidden;
}

.m-warp {
    max-width: 1200px;
    width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

.page-main {
    overflow-x: hidden;
    background: #fff;
}

.banner {
    display: block;
    min-width: 1200px;
    height: 530px;
    margin: 0 auto;
    background-image: url('../images/wx_live/banner.jpg');
    background-repeat: no-repeat;
    background-position: top center;
}

.banner a {
    width: 100%;
    height: 100%;
    display: block;
}

.footer1 {
    background: url(../images/wx_live/footer.jpg) top center no-repeat;
    min-width: 1200px;
    height: 360px;
    padding-top: 123px;
    box-sizing: border-box;
    margin-top: -80px;
    position: relative;
    z-index: -1;
}

.footer__title {
    font-size: 40px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px 2px 2px rgba(36, 179, 165, 0.6);
}

.footer-btn {
    background: url("../images/wx_live/footer-btn.png") no-repeat;
    background-size: contain;
    width: 205px;
    height: 54px;
    margin: 38px auto 0;
}

.footer__btn {
    width: 100%;
    height: 100%;
    display: block;
}


/* 主体内容 */

.title {
    font-size: 32px;
    line-height: 34px;
    color: #404040;
    text-align: center;
    font-weight: bold;
}

.title::after {
    content: "";
    display: block;
    width: 178px;
    height: 7px;
    background-image: linear-gradient(90deg, rgba(172, 215, 255, 0.2) 0%, rgba(146, 184, 250, 0.6) 25%, #7898f5 50%, rgba(120, 152, 245, 0.99) 51%, rgba(146, 184, 250, 0.6) 75%, rgba(172, 215, 255, 0.2) 100%);
    border-radius: 3px;
    margin: 18px auto 0;
}


/* 
* 雪碧图
*/

.screen-one-icon {
    background: url(../images/wx_live/screen-one-icon.png) no-repeat center;
    width: 145px;
    height: 145px;
}

.screen-one-1 {
    background-position: -2px -2px
}

.screen-one-2 {
    background-position: -149px -2px
}

.screen-one-3 {
    background-position: -296px -2px
}

.screen-two-icon {
    background: url(../images/wx_live/screen-two-icon.png) no-repeat center;
    width: 135px;
    height: 145px;
}

.screen-two-1 {
    background-position: -2px -2px
}

.screen-two-2 {
    background-position: -139px -2px
}

.screen-two-3 {
    background-position: -276px -2px
}

.screen-two-4 {
    background-position: -413px -2px
}

.screen-two-5 {
    background-position: -550px -2px
}

.screen-three-icon {
    background: url(../images/wx_live/screen-three-icon.png) no-repeat center;
    width: 40px;
    height: 35px;
}

.screen-three-1 {
    background-position: -2px -2px
}

.screen-three-2 {
    background-position: -44px -2px
}

.screen-three-3 {
    background-position: -86px -2px
}

.screen-three-4 {
    background-position: -128px -2px
}

.screen-three-5 {
    background-position: -170px -2px
}

.screen-three-6 {
    background-position: -212px -2px
}

.screen-four-icon {
    background: url(../images/wx_live/screen-four-icon.png) no-repeat center;
    width: 72px;
    height: 72px;
}

.screen-four-1 {
    background-position: -2px -2px
}

.screen-four-2 {
    background-position: -76px -2px
}

.screen-four-3 {
    background-position: -150px -2px
}

.screen-four-4 {
    background-position: -224px -2px
}

.screen-four-5 {
    background-position: -298px -2px
}

.screen-four-1 {
    background-position: -2px -2px
}

.screen-four-2 {
    background-position: -76px -2px
}

.screen-four-3 {
    background-position: -150px -2px
}

.screen-four-4 {
    background-position: -224px -2px
}

.screen-four-5 {
    background-position: -298px -2px
}


/* 
* ========== End 雪碧图 ===========
*/


/* 
* 内容区
*/

.screen-box {
    position: relative;
    z-index: 2;
}

.screen-one {
    padding: 68px 0 58px;
    background: #dfe8f9;
}

.screen-one .intro {
    width: 985px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    line-height: 32px;
}

.screen-one .list {
    padding-top: 48px;
    font-size: 0;
    margin: 0 52px;
}

.screen-one .item {
    margin: 0 110px;
    display: inline-block;
    vertical-align: middle;
}

.screen-two {
    padding: 84px 0 72px;
    background: #fff;
}

.screen-two .title::after {
    width: 240px;
}

.screen-two .list {
    padding-top: 77px;
    font-size: 0;
    margin: 0 -40px;
}

.screen-two .item {
    vertical-align: top;
    margin: 0 40px;
    display: inline-block;
}

.screen-two .screen-two-icon {
    margin: 0 auto;
}

.screen-two .item-even {
    margin-top: 188px;
}

.screen-two .item__title {
    font-size: 22px;
    line-height: 24px;
    color: #404040;
    text-align: center;
    padding-top: 19px;
}

.screen-two .item__msc {
    font-size: 18px;
    line-height: 30px;
    color: #404040;
    text-align: center;
    padding-top: 17px;
}

.screen-three {
    background: #f0f6ff;
    padding: 62px 0 17px;
}

.screen-three .title::after {
    width: 240px;
}

.screen-three .con {
    font-size: 0;
    margin: 40px 0px 0 110px;
}

.screen-three .list {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}

.screen-three .item {
    width: 256px;
    background-image: linear-gradient(90deg, #5782f0 0%, #217de4 100%);
    border-radius: 8px;
    padding: 0 30px;
    margin: 0 auto 16px;
    box-sizing: border-box;
}

.screen-three .item:last-child {
    margin-bottom: 0;
}

.screen-three .screen-three-icon {
    display: inline-block;
    vertical-align: middle;
}

.screen-three .item__label {
    font-size: 22px;
    line-height: 50px;
    color: #fff;
    padding-left: 22px;
    display: inline-block;
    vertical-align: middle;
}

.screen-three .list__info {
    width: 335px;
    line-height: 41px;
    font-size: 18px;
    color: #fff;
    text-shadow: 0px 1px 3px rgba(219, 118, 3, 1);
    border-radius: 20px;
    background-image: linear-gradient(90deg, #ff8571 0%, #ffa036 100%);
    text-align: center;
    margin-top: 51px;
    cursor: pointer;
}

.screen-three .screen-three__add {
    width: 56px;
    height: 56px;
    background-color: #196bc7;
    opacity: 0.6;
    background: url(../images/wx_live/screen-threen-add.png) center no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin: -100px 90px 0 108px;
}

.screen-three .screen-three__pic {
    width: 500px;
    height: 644px;
    background: url(../images/wx_live/screen-threen-pic.png) center no-repeat;
    display: inline-block;
    vertical-align: middle;
}

.screen-four {
    padding: 94px 0 20px;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.screen-four .title::after {
    width: 240px;
}

.screen-four-bg {
    background: url(../images/wx_live/screen-four-bg.jpg) center no-repeat;
    width: 1920px;
    height: 1256px;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    margin: 200px auto 0;
}

.screen-four .con {
    background: url(../images/wx_live/screen-four-pic.png) center no-repeat;
    width: 1226px;
    height: 908px;
    margin: 0 auto;
    padding-top: 145px;
}

.screen-four .list {
    font-size: 0;
    margin: 52px 100px;
}

.screen-four .item {
    display: inline-block;
    vertical-align: middle;
}

.screen-four .item-right {
    text-align: right;
    width: 340px;
}

.screen-four .item__title {
    font-size: 22px;
    line-height: 24px;
    color: #526ca8;
    padding-bottom: 16px;
}

.screen-four .item__msc {
    font-size: 18px;
    line-height: 28px;
    color: #404040;
}

.screen-four .screen-four-icon {
    margin: 0 138px;
    display: inline-block;
    vertical-align: middle;
}

.screen-four .con__info {
    width: 290px;
    padding: 0 27px;
    line-height: 41px;
    font-size: 18px;
    color: #fff;
    text-shadow: 0px 1px 3px rgba(219, 118, 3, 1);
    border-radius: 20px;
    background-image: linear-gradient(90deg, #ff8571 0%, #ffa036 100%);
    text-align: center;
    margin: 40px auto 0;
    cursor: pointer;
}

.screen-five {
    background: #fff;
}

.screen-five-con {
    position: relative;
    z-index: 1;
}

.screen-five .title::after {
    width: 134px;
}

.screen-five .screen-five__bg {
    width: 1920px;
    height: 496px;
    position: absolute;
    z-index: -1;
    top: 0;
    margin-top: 110px;
    margin-left: -380px;
}

.screen-five .screen-five__bg img {
    width: 100%;
    height: 100%;
    display: block;
}

.screen-five .con {
    padding: 150px 0 160px;
    margin: 0 60px;
    width: 620px;
}

.screen-five .con__title {
    height: 48px;
    background-image: linear-gradient(0deg, #489aed 0%, #5277ff 100%);
    border-radius: 10px;
    font-size: 24px;
    line-height: 48px;
    color: #fff;
    text-shadow: 0px 2px 4px rgba(41, 97, 202, 0.4);
    text-align: center;
    display: inline-block;
    padding: 0 34px;
}

.screen-five .list {
    padding-top: 52px;
    font-size: 0;
    margin: 0 -110px -25px 0;
}

.screen-five .item {
    font-size: 18px;
    line-height: 20px;
    color: #404040;
    padding-left: 31px;
    position: relative;
    z-index: 1;
    width: 120px;
    margin: 0 50px 25px 0;
    display: inline-block;
}

.screen-five .item::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: linear-gradient(0deg, rgba(254, 202, 85, 1) 0%, #fe8d50 100%);
    border-radius: 50%;
}

.screen-five .con-right {
    width: 515px;
    height: 500px;
    display: inline-block;
    vertical-align: middle;
}

.screen-five .con-right img {
    width: 100%;
    height: 100%;
    display: block;
}

.right {
    float: right;
}

.screen-five .screen-five-bg-2 {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 122px;
    width: 1920px;
    height: 344px;
    margin: 0 auto;
    left: 0;
    right: 0;
    min-width: 1920px;
}

.screen-five .screen-five-bg-2__pic {
    width: 1350px;
    height: 344px;
    background: #f0f8fd;
}

.screen-five .screen-five__info {
    width: 290px;
    padding: 0 28px;
    line-height: 41px;
    font-size: 18px;
    color: #fff;
    text-shadow: 0px 1px 3px rgba(219, 118, 3, 1);
    border-radius: 20px;
    background-image: linear-gradient(90deg, #ff8571 0%, #ffa036 100%);
    text-align: center;
    margin: 0 auto;
}

.screen-six {
    padding-top: 90px;
}

.screen-six .screen-six__pic {
    background: url(../images/wx_live/screen-six-pic.png) center no-repeat;
    width: 1253px;
    height: 657px;
    margin: 0 auto;
}


/* 
* ========== End 内容区 ===========
*/