.banner {
    width: 100%;
    height: 570px;
    background-image: url("../../img/banner_01.png");
}

.banner > div {
    color: white;
    margin: auto;
    width: 1200px;
    height: 289px;
}

.banner > div > div:nth-child(1) {
    font-size: 42px;
}

.banner > div > div:nth-child(2) {
    margin: 13px 0 0 0;
    font-size: 14px;
}

.banner > div > a {
    display: block;
    cursor: pointer;
    margin-top: 48px;
    width: 125px;
    height: 37px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    border-radius: 18px;
    border: solid 1px #ffffff;
    line-height: 35px;
    text-align: center;
}

.crumbs {
    width: 100%;
    height: 79px;
    background-color: #f7f8fc;
}

.crumbs > div {
    margin: auto;
    width: 1200px;
    padding: 30px 0;
    font-size: 12px;
    color: #999999;
    border-bottom: 1px solid #dcdcdc;
}

.dilemma {
    text-align: center;
    padding: 60px 0 0 0;
    background-color: #f7f8fc;
}

.dilemma > div:first-child {
    font-weight: bold;
    font-size: 30px;
    color: #1a1a1a;
}

.dilemma > div:nth-child(2) {
    font-size: 14px;
    color: #666666;
}

.dilemma > div:nth-child(3) {
    font-size: 16px;
    color: #1a1a1a;
    /*margin-top: 30px;*/
    padding: 30px 0 50px 0;
}

.dilemma > div:last-child {
    width: 1200px;
    height: 194px;
    margin: auto;
    padding: 0 0 88px 0;
    display: flex;
    justify-content: space-between
}

.dilemma > div:last-child > div {
    float: left;
    padding: 24px 20px;
    /*margin-right: 20px;*/
    width: 184px;
    height: 146px;
    background-color: #ffffff;
    text-align: left;
}

.dilemma > div:last-child > div:hover {
    box-shadow: 0 0 10px 0 rgba(56, 116, 244, 0.2);
}

.dilemma > div:last-child > div > img {
    width: 52px;
    height: 52px;
}

.dilemma > div:last-child > div > div:nth-child(2) {
    margin: 20px 0 12px;
    font-size: 20px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1;
}

.dilemma > div:last-child > div > div:nth-child(3) {
    font-size: 14px;
    font-weight: 500;
    color: #4d4d4d;
    line-height: 1.5
}

/*S2B2B2C供应链系统运营框架*/
.framework {
    text-align: center;
    padding: 60px 0 80px 0;
    background-color: #f7f8fc;
}

.framework > div:first-child {
    font-weight: bold;
    font-size: 30px;
    color: #1a1a1a;
}

.framework > div:nth-child(2) {
    font-size: 14px;
    color: #666666;
}

.framework > div:nth-child(3) {
    font-size: 16px;
    color: #1a1a1a;
    /*margin-top: 30px;*/
    padding: 30px 0 50px 0;
}

.framework > div:last-child {
    width: 1200px;
    height: 644px;
    margin: auto;
    border-radius: 4px;
    border: dashed 1px #4e88fe;
    overflow: hidden;
    text-align: center;
}

.framework > div:last-child > div:first-child {
    height: 470px;
}

.framework > div:last-child > div:first-child > div {
    padding: 30px 0;
    font-size: 26px;
    font-weight: 500;
    color: #1a1a1a;
    text-align: center;
    line-height: 1;
}

.framework > div:last-child > div:first-child > img {
    width: 1138px;
    height: 348px;
}

.framework > div:last-child > div:last-child {

    padding: 0 30px;
    width: 1140px;
    height: 174px;
    border-top: dashed 1px #4e88fe;
    background-color: #f7f8fc;

}

.framework > div:last-child > div:last-child > div:first-child {
    padding: 30px 0;
    font-size: 26px;
    font-weight: 500;
    color: #1a1a1a;
    text-align: center;
    line-height: 1;
}

.framework > div:last-child > div:last-child > div:last-child {
    display: flex;
    justify-content: space-between;
}

.framework > div:last-child > div:last-child > div:last-child > div {
    float: left;
    /*margin-right: 24px;*/
    width: 142px;
    height: 56px;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 56px;
    background-color: #8dafed;
    border-radius: 5px;
}


.characteristic {
    width: 100%;
    height: 515px;
}


.characteristic > div:first-child {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    color: #1a1a1a;
    padding-top: 60px;
}

.characteristic > div:nth-child(2) {
    font-size: 14px;
    color: #666666;
    text-align: center;
    padding-bottom: 50px;
}

.characteristic > div:last-child {
    width: 1200px;
    height: 290px;
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    flex-direction: column;
}

.characteristic > div:last-child > div {
    float: left;
    padding: 20px;
    margin: 0 30px 25px 0;
    width: 340px;
    height: 80px;
    display: flex;
}

.characteristic > div:last-child > div > img {
    width: 56px;
    height: 55px;
}

.characteristic > div:last-child > div > div {
    margin-left: 15px;
}

.characteristic > div:last-child > div > div > div:first-child {
    font-size: 20px;
    font-weight: bold;
    color: #666666;
}

.characteristic > div:last-child > div > div > div:last-child {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #666666;
}

/*S2B2B2C模式核心应用价值*/

.value {
    width: 100%;
    height: 842px;
    background-color: #f7f8fc;
    text-align: center;
}

.value > div:first-child {
    font-weight: bold;
    font-size: 30px;
    color: #1a1a1a;
    padding: 60px 0 0 0;
}

.value > div:nth-child(2) {
    font-size: 14px;
    color: #666666;
}

.value > div:nth-child(3) {
    font-size: 16px;
    color: #1a1a1a;
    /*margin-top: 30px;*/
    padding: 30px 0 50px 0;
}

.value > div:last-child > img {
    width: 458px;
    height: 436px;
    margin: 40px auto 0;
}

.value > div:last-child > div {
    position: relative;
    padding: 16px 20px 0 70px;
    width: 278px;
    height: 92px;
    background-color: #ffffff;
    border-radius: 2px;
    border: solid 1px #cccccc;
    margin: auto;
}

.value > div:last-child > div:nth-child(2) {
    top: -431px;
    text-align: left;
}

.value > div:last-child > div:nth-child(3) {
    left: -340px;
    top: -365px;
    text-align: left;
}

.value > div:last-child > div:nth-child(4) {
    left: 344px;
    top: -475px;
    text-align: left;
}

.value > div:last-child > div:nth-child(5) {
    left: -260px;
    top: -391px;
    text-align: left;
}

.value > div:last-child > div:nth-child(6) {
    left: 267px;
    top: -500px;
    text-align: left;
}

.value > div:last-child > div > div:first-child {
    position: absolute;
    left: 6px;
    top: -18px;
    width: 54px;
    height: 60px;
    font-size: 20px !important;
    font-weight: 500 !important;
    text-align: center;
    line-height: 54px !important;
    color: #ffffff !important;
    background: url(../../img/icon_zl5_01.png) no-repeat center / contain;
}

.value > div:last-child > div > div:first-child {
    font-size: 20px;
    font-weight: 300;
    color: #1a1a1a;
    line-height: 1;
    /*transition: all 0.3s linear;*/
}

.value > div:last-child > div > div:first-child {
    /*margin-top: 10px;*/
    font-size: 14px;
    color: #4d4d4d;
    font-weight: 500;
    line-height: 1.5;
}

/*必不可少的功能*/
.function {
    width: 100%;
    height: 645px;
    text-align: center;
}

.function > div:first-child {
    font-weight: bold;
    font-size: 30px;
    color: #1a1a1a;
    padding: 60px 0 0 0;
}

.function > div:nth-child(2) {
    font-size: 14px;
    color: #666666;
}

.function > div:nth-child(3) {
    font-size: 16px;
    color: #1a1a1a;
    /*margin-top: 30px;*/
    padding: 30px 0 50px 0;
}

.function > div:last-child {
    width: 1200px;
    margin: auto;
}

.function > div:last-child > div {

    float: left;
    padding-top: 40px;
    width: 298px;
    height: 128px;
    text-align: center;
    background-color: #ffffff;
    border: solid 1px #e1e4f0;
}

.function > div:last-child > div > img {
    /*width: 70px;*/
    height: 50px;
}

.function > div:last-child > div > div {

    margin-top: 16px;
    font-size: 18px;
    color: #4d4d4d;
    font-weight: 500;
    line-height: 1;
}

/*应用场景*/
.scene {
    width: 100%;
    height: 777px;
    text-align: center;
}

.scene > div:first-child {
    font-weight: bold;
    font-size: 30px;
    color: #1a1a1a;
    padding: 60px 0 0 0;
}

.scene > div:nth-child(2) {
    font-size: 14px;
    color: #666666;
}

.scene > div:nth-child(3) {
    font-size: 16px;
    color: #1a1a1a;
    /*margin-top: 30px;*/
    padding: 30px 0 50px 0;
}

.scene > div:last-child {
    width: 1200px;
    height: 468px;
    margin: 0 auto;
    position: relative;
    display: flex;
}

.scene > div:last-child > div {

    float: left;
    padding-top: 400px;
    width: 300px;
    height: 68px;
    background-size: cover;
    background-position: center center;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;

}

.scene > div:last-child > div:first-child {
    background-image: url("../../img/img_zl7_01.png");
}

.scene > div:last-child > div:nth-child(2) {
    background-image: url("../../img/img_zl7_01.png");
}

.scene > div:last-child > div:nth-child(3) {
    background-image: url("../../img/img_zl7_01.png");
}

.scene > div:last-child > div:nth-child(4) {
    background-image: url("../../img/img_zl7_01.png");
}

/*立即开启S2B2B2C模式*/

.mode {
    width: 100%;
    height: 254px;
    text-align: center;
    background-image: url("../../img/banner_02.png");
}

.mode > div:first-child {
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    padding-top: 76px;
}

.mode > div:last-child {
    margin: auto;
    margin-top: 35px;
    width: 126px;
    height: 38px;
    border-radius: 19px;
    border: solid 1px #ffffff;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
}

/*底部*/
.foot {
    height: 450px;
}