xlb-main-login/src/common/stylus/aboutus/p1.css

``` yarn install ```

/**
公众号裂变系统样式表
 */
.p1_slide_top {
    height: auto !important;
}

.xlb-headers {
    width: 100%;
    height: 360px;
    background: linear-gradient(180deg, rgba(222, 31, 38, 1) 0%, rgba(251, 71, 46, 1) 100%);
    opacity: 1;
}

.block_p1_title h3 {
    font-family: 'Source Han Sans CN';
    font-weight: bold;
}

.block_p1_title {
    font-family: 'Source Han Sans CN';
    /* cursor: pointer; */
    margin-top: 60px;
    margin-bottom: 0;
    text-align: center;
    height: 46px;
    width: 100%;
    font-size: 32px;
    font-weight: bold;
    line-height: 46px;
    color: #333333;
    opacity: 1;
}

.block_p1_divide {
    text-align: center;
    height: 3px;
    width: 74px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(222, 31, 38, 1);
    opacity: 1;
    margin: 34px auto 74px;
}

.nav_slide_box {
    display: flex;
    padding: 0 8px 0 0;
    background: #F5F9FF;
}

.nav_slide_box div {
    flex: 1;
}

.nav_slide_btn {
    height: 60px;
    border-radius: 4px;
}

.nav_slide_btn_text {
    height: 60px;;
    font-size: 26px;
    cursor: pointer;

    font-family: Source Han Sans CN;
    line-height: 60px;
    text-align: center;
    width: 100%;
}

.p1_causel_block {
     padding-bottom: 60px;
    box-sizing: border-box;
}

.carousel {
    height: auto;
}

.carousel-caption {
    text-align: left;

    text-shadow: none;
    top: 100px;
}

.nav_slide_info {
    width: 100%;
    /* margin-right: -20%; */
}

.nav_slide_divide {
    text-align: left;
    height: 3px;
    width: 50px;
    margin: 20px auto 0 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(222, 31, 38, 1);
}

.nav_slide_text1 {

    font-size: 26px;

    font-family: 'Source Han Sans CN';
    font-weight: 400;
    line-height: 37px;
    color: rgba(53, 53, 53, 1);
    /*width: 500px;*/

    opacity: 1;

}

.nav_slide_desc {
    position: relative;
    margin-top: 10px;
    height: 29px;
    font-size: 20px;
    font-family: Source Han Sans CN, serif;
    font-weight: 400;
    line-height: 29px;
    color: rgba(136, 136, 136, 1);
    opacity: 1;
}

.nav_slide_text2 {
    margin-top: 20px;
    height: 32px;
    font-size: 22px;
    font-family: Source Han Sans CN, serif;
    font-weight: 400;
    line-height: 37px;
    color: rgba(53, 53, 53, 1);
    opacity: 1;

}

.nav_slide_text2 img {
    width: 10px !important;
}

.nav_round {
    width: 10px;
    height: 10px;
    background: rgba(53, 53, 53, 1);
    border-radius: 50%;
    opacity: 1;

}

.block_1_desc {
    margin-top: 18px;
    text-align: center;
    height: 26px;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    color: #666666;
    opacity: 1;
}

.block_p1_2 {
    background: #fff;
}

.block_p2_divide {
    height: 3px;
    width: 74px;
    margin: 34px auto;
    background: rgba(222, 31, 38, 1);
    opacity: 1;
}

.block_p2_desc {
    margin-bottom: 30px;
    margin-top: 24px;
    height: 26px;
    text-align: center;
    font-size: 18px;
    font-family: Source Han Sans CN, serif;
    font-weight: 400;
    line-height: 26px;
    color: rgb(41, 41, 41);;
    opacity: 1;
}

.block_p2_description {
    margin-bottom: 60px;
    margin-top: 24px;
    height: 26px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    color: #666666;
    opacity: 1;
}

.block_p1_2_items {
    display: flex;
    margin-right: 24px;
}

.block_p1_2_item {
    width: 25%;
    margin: 0 24px 24px 0;
}
.block_p1_2_item_private {
    width: 33%;
    margin: 0 72px 72px 0;
}
.block_p1_2_item_private_buShu {
    width: 50%;
    margin: 0 40px 40px 0;
}
.block_p1_2_item_private_back {
    height: 500px;
    position: relative;
    box-sizing: border-box;
    width: 33%;
    margin: 0 72px 0 0;
}
.block_p1_2_item_private_back_img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.block_p1_2_item_info_private_back {
    height: 500px;

}
.block_p1_2_item_info_private {
    padding-top: 24px;
    box-sizing: border-box;
    text-align: center;
    box-sizing: border-box;
    height: 300px;
    background: #FFFAFA;
    box-shadow: 0px 0px 11px rgba(151, 151, 151, 0.12);
    border-radius: 4px;
}
.block_p1_2_item_info_private_buShu {
position: relative;
    display: flex;
    box-sizing: border-box;
    text-align: center;
    box-sizing: border-box;
    height: 200px;
    background: #FFFAFA;
    box-shadow: 0px 0px 11px rgba(151, 151, 151, 0.12);
    border-radius: 4px;
}
.block_p1_2_item_info {
    padding: 34px 20px 24px 24px;
    box-sizing: border-box;
    height: 216px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
}

.block_p1_2_item_info:hover {
    box-shadow: 0 11px 30px rgba(107, 4, 4, 0.15);
}

.p1_2_item_icon {
    width: 40px;
    height: 40px;
    margin-bottom: 34px;
}
.p1_2_item_icon_private {
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
}
.p1_2_item_title_private {
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16px;
}
.p1_2_item_title_private_buShu {
    font-family: 'Source Han Sans CN';
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 22px;
    text-align: left;
}
.p1_2_item_title_private_back {
    font-family: 'Source Han Sans CN';
    position: absolute;
    top: 116px;
    width: 100%;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;
}
.p1_2_item_title {
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 32px;
    font-size: 20px;
    font-family: Source Han Sans CN, serif;
    font-weight: bold;
    line-height: 32px;
    color: #333333;
    margin-bottom: 12px;
}

.p1_2_item_desc {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}
.p1_2_item_desc_private_back {
    position: absolute;
    top: 177px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #FFFFFF;
}
.p1_2_item_desc_private_buShu {
    width: 220px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin-bottom: 6px;
    text-align: left;
}
.block_p1_2_item_private_back_icon {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translate(-50%,0);
    width: 106px;
    height: 106px;
}
.p1_2_item_desc_private {
    margin:6px auto 0;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    width: 250px;
}
.p1_2_block {
    background: #F5F9FF;
}

.container-p2 {
    width: 90%;
    margin-left: 5%;
}

.block_p1_2 {
    padding-bottom: 74px;
}

ul li {
    list-style-type: none;
}

.p1_3_block {
    padding-bottom: 50px;
    width: 100%;
    padding-top: 34px;
    background: rgba(246, 248, 249, 1);
}

.footer_step_box {
    margin-top: 100px;
}

.footer_step_box_2 {
    margin-top: 140px;
}

.footer_step_desc {
    text-align: center;
    height: 35px;
    margin-top: 25px;
    font-size: 1.5em;
    font-family: Source Han Sans CN, serif;
    font-weight: 400;
    line-height: 35px;
    color: rgba(136, 136, 136, 1);
    opacity: 1;
}

.footer_step_icon {
    width: 100%;
    margin-bottom: -50px;
}

.footer_step_box img {
    width: 50px;
}

/**
p4
 */

.p4 .block_p1_2 {
    background: #fff;
}

.p4 .block_p1_2_item_info {
    background: rgba(246, 248, 249, 1);
}

.p4 .block_p1_2_item_info:hover {
    background: #fff;
}

/**
p4
 */

.p4_block_2_info {
    margin-top: 50px;
    padding: 15px;
    margin-left: 10px;
    border-right: 1px solid rgba(218, 218, 218, 1);;
}

.p4_block_info_last {
    border-right: none;
}

.p4_2_block {
    padding-bottom: 100px;
    background: rgba(246, 248, 249, 1);
}

.p4_block_2_icon {
    width: 100px;
}

.p4_block_2_text1 {
    margin-top: 30px;
    height: 37px;
    font-size: 24px;
    font-family: Source Han Sans CN, serif;
    font-weight: 400;
    line-height: 37px;
    color: rgba(53, 53, 53, 1);

    opacity: 1;

}

.p4_block_2_text2 {

    margin-top: 27px;
    font-size: 20px;
    font-family: Source Han Sans CN, serif;
    font-weight: 400;
    line-height: 37px;
    color: rgba(136, 136, 136, 1);


}

.p4_block_2_text3 {

    font-size: 22px;
    font-family: Source Han Sans CN, serif;
    font-weight: 400;
    line-height: 37px;
    color: rgba(136, 136, 136, 1);
}

/**
p5
 */
/**
p5
 */

.p5_block_2_info_right {
    margin-top: 100px;
    margin-left: 50px;
}

/**
轮播2
 */
.poster-main {;
    position: relative;
    margin: 0 auto;;
}

.poster-main .poster-list .poster-item {
    position: absolute;
    left: 0;
    top: 0;
}

.poster-main .poster-btn {
    position: absolute;
    top: 0;
    cursor: pointer;
}


/**
标题小圆点
 */
.common_point {
    width: 10px;
    margin: 10px 10px 10px 0;
}

/*微信saas*/
.block_p1_3_rec_box {
    height: 420px;
    min-width: 240px;
    max-width: 270px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    border-radius: 8px 8px 0 0;
}

.block_p1_header {
    background: linear-gradient(180deg, #F94148 0%, #D5131B 100%);
    width: 100%;
    height: 104px;
    display: flex;
    flex-direction: row;
    padding: 20px;
    border-radius: 8px 8px 0px 0px;
    cursor: pointer;
}

.block_p1_header > img {
    width: 42px;
    height: 42px;
    margin-right: 12px;
}

.block_p1_nav_title {
    font-size: 18px;
    font-weight: 800;
    line-height: 25px;
    color: #FFFFFF;
    opacity: 1;

}

.block_p1_nav_desc {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 17px;
    color: #FFFFFF;
    opacity: 0.8;

}

.block_p1_nav_descs {
    margin-top: 6px;
}

.block_p1_menu {
    margin: 18px 0;
}

.block_p1_menu_img {
    width: 12px;
    height: 12px;
    margin-right: 12px;
    position: relative;
    left: 0;
    top: 6px;
}

.block_p1_menu_title {

    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 22px;
}

.block_p1_menu_desc {

    height: 17px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 17px;
    color: #666666;
    opacity: 0.9;
    margin-top: 7px;
}

.block_p1_menu_mid {
    display: flex;
    flex-direction: row;
    padding: 14px 20px;
    cursor: pointer;
}

.block_p1_menu_mid:hover {
    background: #F3F3F3;
    opacity: 0.96;
}

.block_p1_line {
    height: 1px;
    background: #D9D9D9;
    opacity: 1;
    margin: 0 20px;
}

.block_p1_more {
    margin: 14px 24px 0 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    color: #333333;
}

.block_p1_addmore {

    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;

    opacity: 1;
}

.block_p1_row {
    width: 16px;
    height: 16px;
    position: relative;
    left: 0;
    top: 4px;
}

.block_p1_mores {
    color: #de1f26;
}

.block_p1_function {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 44px;
}

.block_p1_3_rec_box {
    background: #fff;
    margin-right: 25px;
}

.block_p1_zeng {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.block_p1_zeng_1 {
    display: flex;
    flex-direction: row;

    height: 180px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 1;
    border-radius: 2px;
    width: 48%;
    min-width: 400px;
    padding: 50px 0 0 70px;
    margin-right: 40px;
}

.block_p1_zeng_1 > img {
    width: 64px;
    height: 64px;
    margin-right: 32px;
}

.block_p1_zeng_header {
    font-size: 28px;
    font-family: 'Source Han Sans CN', serif;
    font-weight: bold;
    line-height: 40px;
    color: #333333;
    opacity: 1;
}

.block_p1_zeng_desc {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: #999999;
    opacity: 1;

}

.block_p1_zeng_descs {
    margin-top: 12px;
}

.block_p1_zeng_top {
    margin-top: 40px;
}

.block_1_5_desc {
    display: flex;
    flex-direction: row;
    margin-top: 80px;
}

.block_1_logo_pic {
    width: 90px;
    height: 90px;
    text-align: center;
}

.block_1_5_name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 22px;
    color: #FFFFFF;
    opacity: 1;
    text-align: center;
    margin-top: 16px;
}

.block_5_red {

    background: linear-gradient(180deg, #E22427 0%, #F6402C 100%);
}

.getwhite {
    color: #fff;
}

.block_1_logo_pic_div {
    text-align: center;
}

.footer_header {
    display: flex;
    flex-direction: row;

}

.footer_block_p1 > img {
    width: 86px;
    height: 86px;
    margin-right: 16px;
}

.footer_block_name {

    font-size: 28px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 40px;
    color: #FFFFFF;
    opacity: 1;
}

.footer_block_zhiwu {

    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 25px;
    color: #FFFFFF;
    opacity: 0.9;
    margin-top: 8px;
}

.footer_block_gang {
    width: 42px;
    height: 4px;
    background: #FFFFFF;
    opacity: 0.7;
    margin-top: 11px;
}

.footer_block_content {
    font-weight: 400;
    line-height: 40px;
    color: #FFFFFF;
    opacity: 1;
}

.footer_block_marleft {
    margin-left: 100px;
}

.block_1_detail {
    margin-top: 52px;
}

.p1_nav_f1 {
    margin-top: 42px;
  width: 100%;
}

.block_6_rec:hover {

    box-shadow: 0 6px 14px rgba(107, 4, 4, 0.15);
}
.lunBo-card {
    height: 440px;
}
.lunBo-title {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #353535;
    opacity: 1;
    margin: 84px 0 20px 0;
}
.lunBo-desc {
    width: 324px;
    height: 130px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 47px;
    color: #333333;
    opacity: 1;
}
.p1-card {
    width: 25%;
    height: 360px;
    background: #FFFFFF;
    margin-right: 24px;
    box-shadow: 0px 3px 11px rgba(151, 151, 151, 0.12);
    opacity: 1;
    border-radius: 4px;
}
.p1-card-header {
    display: flex;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, #F35A60 0%, #DE1F26 100%);
    opacity: 1;
    border-radius: 4px 4px 0px 0px;
    padding: 22px 0 22px 24px;
}
.p1-card-header-left {
    margin-left: 12px;
}
.p1-card-header-left-title {
    font-size: 22px;
    font-weight: bold;
    line-height: 30px;
    color: #FFFFFF;
}
.p1-card-header-left-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #FFFFFF;
    margin-top: 6px;
}
.p1-card-footer {
    padding: 55px 16px 0 24px;
}
.p1-card-footer-desc {
    display: flex;
margin-bottom: 26px;
}
.p1-card-footer-img {
    position: relative;
    top: 50%;
    width: 17px;
    height: 12px;
    margin-right: 16px;
    margin-top: 2px;
}
.p1-card-footer-desc-text {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}
.p4-step-img {
    width: 100%;
}
.p4All {
    display: flex;
    padding: 0 0 0 40px;
    box-sizing: border-box;
}
.p4One {
    margin-top: 4px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #DE1F26;
    z-index: 2;
}
.p4Two {
    margin-top: 4px;
    display: inline-block;
    position: relative;
    width: 18px;
    left: -13px;
    top: 5px;
    height: 18px;
    z-index: 1;
    background: #FFB8BB;
}
.p4Three {
    font-size: 24px;
    font-weight: 400;
    color: #666666;
}
.p4-louDou-left-one {
    font-family: Source Han Sans CN, serif;
    margin: 90px 0 40px 0;
    font-size: 32px;
    font-weight: bold;
    color: #333333;
}
.p4-louDou-left-two {
    font-family: Source Han Sans CN, serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    font-weight: bold;
    color: #DE1F26;
    margin-bottom: 18px;
}
.p4-louDou-left-three {
    font-family: Source Han Sans CN, serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    color: #333333;
}
.p4-louDou-left-card {
    padding: 35px;
    box-sizing: border-box;
    margin: auto;
    width: 90%;
    height: 176px;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px rgba(151, 151, 151, 0.12);
    border-radius: 4px;
}
.p1_2_item_icon_private_card1 {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    width: 94px;
    height: 120px;
    margin: 0 80px 0 50px;
}
.p1_2_item_icon_private_card2 {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    width: 104px;
    height: 96px;
    margin: 0 80px 0 50px;
}
.p1_2_item_icon_private_card3 {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    width: 96px;
    height: 96px;
    margin: 0 80px 0 50px;
}
.p1_2_item_icon_private_card4 {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    width: 84px;
    height: 96px;
    margin: 0 80px 0 50px;
}
.block_p1_2_item_info_private_buShu_right {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
}
.carousel-inner {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    width: 95%;
    overflow: hidden;
    /*text-align: center;*/
}
.carousel-indicators .active {
    width: 86px;
    height: 14px;
    background-color: #DE1F26;
    border-radius: 7px;
}
.carousel-indicators li {
    background-color: #FFB8BB;
}
.carousel-control.left {
    background-image: none;
    background-repeat: repeat-x;
    position: absolute;
    left: -80px;
}
.carousel-control.right {
    background-image: none;
    background-repeat: repeat-x;
    position: absolute;
    right: -80px;
}
.carousel-indicators {
    position: absolute;
    bottom: -40px;
}
.btn-swiper {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}