.page-item-bg {
    height  : 100%;
    position: absolute;
    top     : 0;
    right   : 0;
    left    : 0;
    bottom  : 0;
    overflow: hidden;
}

.page-item-bg img {
    width  : 100%;
    display: block;
}

.page-item-bg .bge {
    position: absolute;
    top     : 0;
    right   : 0;
    bottom  : 0;
    left    : 0;
}

.page-item-bg .bg1 {
    position: absolute;
    top     : 0;
    right   : 0;
    bottom  : 0;
    left    : 0;
}

.page-item-bg .bg2 {
    position: absolute;
    top     : 0;
    right   : 0;
    left    : 0;
    z-index : 9;
}

.page-item-bg .bg2.fixed {
    position: fixed;
    top     : -1080px;
    z-index : 1;
}

.page-item-bg .bg3 {
    width           : 594px;
    transform-origin: top right;
    position        : absolute;
    top             : 0;
    right           : 0;
    z-index         : 9;
}

.page-item-bg .bg3 .leaf {
    display : block;
    position: absolute;
    z-index : -1;
}

.page-item-bg .bg3 .leaf-42 {
    width : 31px;
    height: 35px;
    left  : 52px;
    top   : 429px;
}

.page-item-bg .bg3 .leaf-43 {
    width : 62px;
    height: 79px;
    left  : 196px;
    top   : 338px;
}

.loaded .page-item-bg .bg3 .leaf-42 {
    animation: leaf-42-move-hor 9s ease-in infinite,
        leaf-42-move-ver 9s ease-in infinite;
}

.loaded .page-item-bg .bg3 .leaf-43 {
    animation: leaf-43-move-hor 11s ease-in infinite,
        leaf-43-move-ver 11s ease-in infinite;
}

@keyframes leaf-42-move-hor {
    0% {
        left   : 176px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        left   : 52px;
        opacity: 1;
    }

    100% {
        left   : -100px;
        opacity: 0;
    }
}

@keyframes leaf-42-move-ver {
    from {
        top: 220px;
    }

    to {
        top: 800px;
    }
}

@keyframes leaf-43-move-hor {
    0% {
        left   : 176px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    79% {
        left   : 280px;
        opacity: 1;
    }

    100% {
        left   : 196px;
        opacity: 0;
    }
}

@keyframes leaf-43-move-ver {
    from {
        top: 220px;
    }

    to {
        top: 600px;
    }
}

.page-item-bg .bg5 {
    min-height: 100vw;
    position  : absolute;
    left      : 0;
    right     : 0;
    bottom    : 0;
}

.page-item-bg .bg>img {
    transform : translateX(100%);
    opacity   : 0;
    transition: opacity linear 1000ms;
}

.loaded .page-item-bg .bg>img {
    transform: translateX(0);
    opacity  : 1;
}


.page-item-bg .c {
    height  : auto;
    position: absolute;
    z-index : 10;
}

.page-item-bg .c45 {
    width: 24.5833333333333%;
    /* 281px */
    top  : 26.0185185185185%;
    /* 162px */
    right: -8.4375%;
}

.page-item-bg .c46 {
    width: 19.4791666666667%;
    /* 106px */
    top  : 9.814814814814815%;
    /* 27px */
    left : 1.40625%;
}

.page-item-bg .c47 {
    width : 34.4270833333333%;
    bottom: 0;
    /* 138px */
    right : -7.1875%;
}



/* 左右一共剩 198px */
.page-cloud .c {
    height        : auto;
    position      : fixed;
    z-index       : 10;
    pointer-events: none;
}

.page-cloud .c38 {
    width    : 130.5208333333333%;
    right    : 50%;
    top      : 50%;
    transform: translate(30.5729166666667%, -50%);
}

.page-cloud .c39 {
    width    : 109.9479166666667%;
    left     : 50%;
    top      : 50%;
    transform: translate(-30.5729166666667%, -50%);
}

.page-cloud .c38 {
    animation: cloud-38-loading cubic-bezier(0.215, 0.610, 0.355, 1) 5s infinite alternate-reverse;
}

.page-cloud .c39 {
    animation: cloud-39-loading linear 5s infinite alternate-reverse;
}

.loaded .page-cloud .c38 {
    animation : none;
    transition: right linear 5s;
    right     : 180.5208333333333%;
}

.loaded .page-cloud .c39 {
    animation : none;
    transition: left linear 5s;
    left      : 159.9479166666667%;
}

@keyframes cloud-38-loading {
    from {
        transform: translate(30.5729166666667%, -50%);
    }

    to {
        transform: translate(20.5729166666667%, -50%);
    }
}

@keyframes cloud-39-loading {
    from {
        transform: translate(-30.5729166666667%, -50%);
    }

    to {
        transform: translate(-20.5729166666667%, -50%);
    }
}





.page-item-bg .slogan {
    width    : 480px;
    height   : 75px;
    position : absolute;
    top      : 60%;
    left     : 50%;
    transform: translate(-240px, -150px);
    opacity  : 0;
    filter   : blur(30px);
}

.loaded .page-item-bg .slogan {
    transition: top linear 1s 1s, opacity linear 1s 1s, filter linear 500ms 1.5s;
    top       : 50%;
    opacity   : 1;
    filter    : blur(0);
}

.page-item-bg .magpie {
    /* width   : 38px;
    height  : 27px; */
    width   : 1.9791666666667%;
    height  : 2.5%;
    position: absolute;
    animation: magpie-left-run 20s linear infinite,
        magpie-top-run 20s ease-in-out infinite,
        magpie-scale-run 20s linear infinite;
}

@keyframes magpie-top-run {
    0% {
        top: 10%;
    }

    9% {
        top: 30%;
    }

    15% {
        top: 25%;
    }

    20% {
        top: 28%;
    }

    25% {
        top: 10%;
    }
}

@keyframes magpie-left-run {
    0% {
        left: 100%;
    }

    25% {
        left: -10%;
    }

    100% {
        left: -10%;
    }
}

@keyframes magpie-scale-run {
    0% {
        transform: scale(0.5);
    }

    10% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(0.5);
    }
}

.page-item-bg .car {
    /* width    : 106px;
    height   : 59px; */
    width       : 5.5208333333333%;
    height      : 5.462962962962963%;
    position    : absolute;
    /* animation: car-run 20s linear infinite; */
}

.page-item-bg .car>img {
    display: block;
    width  : 100%;
    height : 100%;
}

.page-item-bg .car>.order {
    display         : block;
    width           : auto;
    height          : auto;
    min-width       : 51px;
    min-height      : 47px;
    padding         : 9px 9px 18px 9px;
    background-color: #ffcb72;
    background-clip : content-box;
    box-sizing      : border-box;
    font-weight     : 700;
    font-size       : 18px;
    text-align      : center;
    color           : #fffffa;
    position        : absolute;
    bottom          : 100%;
    left            : 80%;
    transform       : translateX(-50%) scaleY(0);
    transition      : transform linear 100ms;
}

.page-item-bg .car>.order::before {
    display     : block;
    padding-left: 0.8em;
    content     : attr(data-count)"！";
    text-align  : center;
    white-space : nowrap;
}

.page-item-bg .car.active>.order {
    transform: translateX(-50%) scaleY(1);
}




.page-item-bg .car>.order>.r {
    display        : block;
    width          : 10px;
    height         : 10px;
    background-size: 10px 10px;
    position       : absolute;
}

.page-item-bg .car>.order>.tl {
    background-image: url(../images/order/tl.png);
    top             : 0;
    left            : 0;
}

.page-item-bg .car>.order>.tr {
    background-image: url(../images/order/tr.png);
    top             : 0;
    right           : 0;
}

.page-item-bg .car>.order>.br {
    height          : 19px;
    background-size : 10px 19px;
    background-image: url(../images/order/br.png);
    bottom          : 0;
    right           : 0;
}

.page-item-bg .car>.order>.bl {
    height          : 19px;
    background-size : 10px 19px;
    background-image: url(../images/order/bl.png);
    bottom          : 0;
    left            : 0;
}

.page-item-bg .car>.order>.l {
    display : block;
    position: absolute;
}

.page-item-bg .car>.order>.lt {
    background-image : url(../images/order/lt.png);
    background-size  : 1px 10px;
    background-repeat: repeat-x;
    height           : 10px;
    top              : 0;
    left             : 10px;
    right            : 10px;
}

.page-item-bg .car>.order>.lr {
    background-image : url(../images/order/lr.png);
    background-size  : 10px 1px;
    background-repeat: repeat-y;
    width            : 10px;
    top              : 10px;
    right            : 0;
    bottom           : 19px;
}

.page-item-bg .car>.order>.lb {
    background-image : url(../images/order/lb.png);
    background-size  : 1px 19px;
    background-repeat: repeat-x;
    height           : 19px;
    bottom           : 0;
    left             : 10px;
    right            : 10px;
}

.page-item-bg .car>.order>.ll {
    background-image : url(../images/order/ll.png);
    background-size  : 10px 1px;
    background-repeat: repeat-y;
    width            : 10px;
    top              : 10px;
    left             : 0;
    bottom           : 19px;
}

.page-item-bg .car>.order>.ba {
    display         : block;
    background-image: url(../images/order/ba.png);
    background-size : cover;
    width           : 15px;
    height          : 19px;
    position        : absolute;
    bottom          : 0;
    left            : 50%;
    transform       : translateX(-50%);
}






@keyframes car-run {
    from {
        /** 372px **/
        bottom: 34.444444444444444%;
        left  : 0%;
    }

    to {
        /** 253px **/
        bottom: 23.425925925925926%;
        left  : 100%;
    }
}







.page-item {
    height    : 56.25vw;
    position  : relative;
    box-sizing: border-box;
}

.page-item .page-item-title {
    font-family: 'SourceHanSansCN-Heavy';
    font-weight: 900;
    font-size  : 70px;
    color      : #333;
    text-align : center;
}

.page-item .page-item-desc {
    padding-top: 30px;
    font-weight: 400;
    font-size  : 32px;
    text-align : center;
    color      : rgba(51, 51, 51, 0.6);
}

.page-item.action .page-item-bg {
    width           : 1920px;
    height          : 1080px;
    transform-origin: top left;
}

.page-item .page-item-action {
    text-align   : center;
    position     : absolute;
    left         : 100px;
    right        : 100px;
    /* bottom    : 83px/1080; */
    bottom       : 7.685185185185185%;
    z-index      : 11;
}

.page-item .page-item-action .item-action-app {
    display                : inline-block;
    vertical-align         : bottom;
    padding                : 20px 5px 30px;
    width                  : 150px;
    height                 : 162px;
    border-radius          : 18px;
    background             : transparent;
    backdrop-filter        : blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background-color       : rgba(255, 255, 255, 0.7);
    box-sizing             : border-box;
    position               : relative;
    cursor                 : pointer;
    overflow               : hidden;
    transition             : width linear 300ms, height linear 300ms;
}

.page-item .page-item-action .item-action-app+.item-action-app {
    margin-left: 6px;
}

.page-item .page-item-action .icon {
    margin          : 0 auto;
    display         : block;
    width           : 64px;
    height          : 64px;
    transform-origin: top center;
    transition      : transform linear 300ms;
}

.page-item .page-item-action .title {
    margin-top : 10px;
    display    : block;
    font-weight: 700;
    font-size  : 24px;
    text-align : center;
    color      : #333;
    transition : transform linear 300ms;
}

.page-item .page-item-action .qr-code {
    padding   : 10px;
    display   : block;
    width     : 100%;
    transform : translateY(100%);
    transition: transform linear 300ms;
    box-sizing: border-box;
    position  : absolute;
    bottom    : 0;
    left      : 0;
}

.page-item .page-item-action .qr-code>img {
    display: block;
    width  : 100%;
    height : auto;
}



.page-item .page-item-action .item-action-app:hover {
    /* transform: scale(1.2); */
    width : 220px;
    height: 220px;
}

.page-item .page-item-action .item-action-app:hover .icon {
    /* transform: translate(-100%, -10px) scale(0.25); */
    transform: scale(0);
}

.page-item .page-item-action .item-action-app:hover .title {
    /* transform: translate(0, -92px) scale(0.5); */
    transform: translate(0, -92px) scale(0);
}

.page-item .page-item-action .item-action-app:hover .qr-code {
    transform: translateY(0);
}







.page-item .page-item-role {
    height     : 100%;
    overflow   : hidden;
    position   : absolute;
    /* top     : 495px/1080; */
    top        : 45.833333333333333%;
    right      : 0;
    left       : 0;
    z-index    : 11;
}

.page-item .page-item-role .role-btns {
    width           : 1920px;
    height          : 1080px;
    transform-origin: left top;
    pointer-events  : none;
    position        : absolute;
    top             : 0;
    left            : 0;
    z-index         : 1;
}

.page-item .page-item-role .role-btn {
    pointer-events: all;
    position      : absolute;
    z-index       : 1;
}

.page-item .page-item-role .role-btn img {
    display: block;
    width  : 100%;
}

.page-item .page-item-role .role-btn .tip {
    font-weight: 700;
    font-size  : 30px;
    color      : #ffbe2e;
    text-align : center;
    position   : absolute;
    top        : 310px;
    left       : 736px;
    transition : all linear 500ms 1000ms;
}

.page-item .page-item-role .role-btn-s .tip {
    top : 344px;
    left: 86px;
}

.page-item .page-item-role .role-btn .arrow {
    margin : 0 auto;
    display: block;
    width  : 36px;
    height : 62px;
}

.page-item .page-item-role .role-btn .tip .arrow+.title {
    margin-top: 15px;
    display   : none;
}

.page-item .page-item-role .role-btn .tip-back {
    font-weight: 700;
    font-size  : 18px;
    color      : #ffbe2e;
    text-align : center;
    cursor     : pointer;
    position   : absolute;
    top        : 122px;
    left       : 111px;
    transform  : translateX(-100%);
    opacity    : 0;
    transition : all linear 500ms;
}

.page-item .page-item-role .role-btn .tip-back .arrow {
    margin        : -5px 5px 0 0;
    display       : inline-block;
    vertical-align: middle;
    width         : 26px;
    height        : 18px;
}

.page-item .page-item-role .role-btn-s .tip-back {
    color    : #3f3fd1;
    top      : 150px;
    right    : 111px;
    left     : initial;
    transform: translateX(100%);
}

.page-item .page-item-role .role-btn .active {
    position: absolute;
    top     : 0;
    right   : 0;
}

.page-item .page-item-role .role-btn .extend {
    width     : 139px;
    height    : 231px;
    position  : absolute;
    top       : 377px;
    left      : 0;
    transform : translate(-100px, 100px);
    transition: transform linear 1000ms 1000ms;
}


.page-item .page-item-role .role-btn-b {
    width     : 1145px;
    top       : 34px;
    left      : -281px;
    transition: left linear 1000ms, top linear 1000ms;
}

.page-item .page-item-role .role-btn-s {
    width     : 865px;
    top       : 0px;
    right     : -271px;
    transition: right linear 1000ms, top linear 1000ms;
}

.page-item .page-item-role .role-btn-b .body {
    display         : block;
    width           : 841px;
    height          : 729px;
    background-color: transparent;
    cursor          : pointer;
    position        : absolute;
    left            : 0;
    top             : 122px;
}

.page-item .page-item-role .role-btn-s .body {
    display         : block;
    width           : 846px;
    height          : 591px;
    background-color: transparent;
    cursor          : pointer;
    position        : absolute;
    right           : 0;
    top             : 150px;
}

.page-item .page-item-role .role-btn .normal {
    opacity   : 1;
    transition: opacity linear 500ms;
}

.page-item .page-item-role .role-btn .active {
    opacity   : 0;
    transition: opacity linear 500ms;
}

.page-item .page-item-role .role-btn.role-btn-hover .normal {
    opacity: 0;
}

.page-item .page-item-role .role-btn.role-btn-hover .active {
    opacity: 1;
}



/* 卖家动画 */

.page-item .page-item-role .role-btn-b .leaf {
    opacity   : 0;
    position  : absolute;
    transform : translate(-100px, 100px);
    transition: opacity linear 1000ms 1000ms, transform linear 1000ms 1000ms;
}

.page-item .page-item-role .role-btn-b .leaf-76 {
    width : 70px;
    height: 62px;
    top   : 44px;
    right : 62px;
}

.page-item .page-item-role .role-btn-b .leaf-77 {
    width : 110px;
    height: 98px;
    top   : 134px;
    right : 151px;
}

.page-item .page-item-role .role-btn-b .leaf-78 {
    width : 53px;
    height: 77px;
    top   : 220px;
    right : 261px;
}

.page-item .page-item-role .role-btn-b .leaf-79 {
    width : 82px;
    height: 197px;
    top   : 84px;
    right : 340px;
}

/* 卖家气泡 */
.page-item .page-item-role .role-btn-b .bubbles {
    width   : 750px;
    height  : 400px;
    position: absolute;
    top     : 0;
    right   : 400px;
}

.page-item .page-item-role .role-btn-b .bubble {
    display         : block;
    width           : 20px;
    height          : 20px;
    border-radius   : 50%;
    background-color: #fff;
    position        : absolute;
    bottom          : 100px;
    left            : 480px;
    opacity         : 0;
}

.page-item .page-item-role .role-btn-b .bubble:nth-child(1) {
    width : 12px;
    height: 12px;
    animation: bubble-move-hor-1 6s ease-in infinite,
        bubble-move-ver-1 6s ease-in infinite;
}

.page-item .page-item-role .role-btn-b .bubble:nth-child(2) {
    width : 12px;
    height: 12px;
    animation: bubble-move-hor-2 7.5s ease-in infinite,
        bubble-move-ver-2 7.5s ease-in infinite;
}

.page-item .page-item-role .role-btn-b .bubble:nth-child(3) {
    animation: bubble-move-hor-3 10s ease-in infinite,
        bubble-move-ver-3 10s ease-in infinite;
}

.page-item .page-item-role .role-btn-b .bubble:nth-child(4) {
    animation: bubble-move-hor-4 16s ease-in infinite,
        bubble-move-ver-4 16s ease-in infinite;
}

.page-item .page-item-role .role-btn-b .bubble:nth-child(5) {
    animation: bubble-move-hor-5 28s ease-in infinite,
        bubble-move-ver-5 28s ease-in infinite;
}

.page-item .page-item-role .role-btn-b .bubble:nth-child(6) {
    width : 12px;
    height: 12px;
    animation: bubble-move-hor-6 11s ease-in infinite,
        bubble-move-ver-6 11s ease-in infinite;
}

@keyframes bubble-move-hor-1 {
    0% {
        left     : 450px;
        opacity  : 0;
        transform: scale(0);
    }

    20% {
        opacity  : 1;
        transform: scale(1);
    }

    80% {
        left: 100px;
    }

    100% {
        left: 200px;
    }
}

@keyframes bubble-move-ver-1 {
    from {
        bottom: 100px;
    }

    to {
        bottom: 100%;
    }
}

@keyframes bubble-move-hor-2 {
    0% {
        left     : 580px;
        opacity  : 0;
        transform: scale(0);
    }

    20% {
        opacity  : 1;
        transform: scale(1);
    }

    100% {
        left: 800px;
    }
}

@keyframes bubble-move-ver-2 {
    from {
        bottom: 30px;
    }

    to {
        bottom: 100%;
    }
}

@keyframes bubble-move-hor-3 {
    0% {
        left     : 500px;
        opacity  : 0;
        transform: scale(0);
    }

    20% {
        opacity  : 1;
        transform: scale(1);
    }

    50% {
        left: 520px;
    }

    100% {
        left: 300px;
    }
}

@keyframes bubble-move-ver-3 {
    from {
        bottom: 120px;
    }

    to {
        bottom: 100%;
    }
}

@keyframes bubble-move-hor-4 {
    0% {
        left     : 500px;
        opacity  : 0;
        transform: scale(0);
    }

    20% {
        opacity  : 1;
        transform: scale(1);
    }

    50% {
        left: 700px;
    }

    100% {
        left: 600px;
    }
}

@keyframes bubble-move-ver-4 {
    from {
        bottom: 80px;
    }

    to {
        bottom: 100%;
    }
}

@keyframes bubble-move-hor-5 {
    0% {
        left   : 500px;
        opacity: 0;
    }

    50% {
        left     : 500px;
        opacity  : 0;
        transform: scale(0);
    }

    60% {
        opacity  : 1;
        transform: scale(1);
    }

    75% {
        left: 200px;
    }

    100% {
        left: -24px;
    }
}

@keyframes bubble-move-ver-5 {
    0% {
        bottom: 100px;
    }

    50% {
        bottom: 100px;
    }

    100% {
        bottom: 100%;
    }
}

@keyframes bubble-move-hor-6 {
    0% {
        left   : 500px;
        opacity: 0;
    }

    50% {
        left     : 500px;
        opacity  : 0;
        transform: scale(0);
    }

    60% {
        opacity  : 1;
        transform: scale(1);
    }

    90% {
        left: 200px;
    }

    100% {
        left: 300px;
    }
}

@keyframes bubble-move-ver-6 {
    0% {
        bottom: 100px;
    }

    50% {
        bottom: 100px;
    }

    100% {
        bottom: 100%;
    }
}





/* 供货商动画 */

.page-item .page-item-role .role-btn-s .star-66 {
    width           : 542px;
    height          : 513px;
    position        : absolute;
    left            : 0;
    top             : 167px;
    transform-origin: 52% center;
    animation       : star-twinkle linear 5s infinite;
}

.page-item .page-item-role .role-btn-s .star-67 {
    width           : 245px;
    height          : 238px;
    position        : absolute;
    left            : 289px;
    top             : 216px;
    transform-origin: center;
    animation       : star-twinkle linear 8s 1s infinite;
}

@keyframes star-twinkle {

    0%,
    50%,
    100% {
        transform: scale(0);
        opacity  : 0;
    }

    20% {
        transform: scale(1);
        opacity  : 1;
    }
}





.page-item .page-item-role.role-b .role-btn-b {
    left: 0;
    top : -22px;
}

.page-item .page-item-role.role-b .role-btn-b .normal {
    opacity: 0;
}

.page-item .page-item-role.role-b .role-btn-b .active {
    opacity   : 1;
    transition: none;
}

.page-item .page-item-role.role-b .role-btn-b .extend,
.page-item .page-item-role.role-b .role-btn-b .leaf {
    transform: translate(0, 0);
    opacity  : 1;
}

.page-item .page-item-role.role-b .role-btn .tip {
    transition: all linear 500ms;
    transform : translateX(100%);
    opacity   : 0;
}

.page-item .page-item-role.role-b .role-btn-b .tip-back {
    transition: all linear 500ms 1000ms;
    transform : translateY(0);
    opacity   : 1;
}

.page-item .page-item-role.role-b .role-btn-s {
    right: -865px;
}

.page-item .page-item-role.role-s .role-btn-s {
    right: 0;
    top  : -48px;
}

.page-item .page-item-role.role-s .role-btn-s .normal {
    opacity: 0;
}

.page-item .page-item-role.role-s .role-btn-s .active {
    opacity   : 1;
    transition: none;
}

.page-item .page-item-role.role-s .role-btn .tip {
    transition: all linear 500ms;
    transform : translateX(100%);
    opacity   : 0;
}

.page-item .page-item-role.role-s .role-btn-s .tip-back {
    transition: all linear 500ms 1000ms;
    transform : translateY(0);
    opacity   : 1;
}

.page-item .page-item-role.role-s .role-btn-b {
    left: -1145px;
}








.page-item-bg .page-item-role .role-bg {
    background-color: rgba(238, 254, 241, 0.92);
    width           : 100%;
    height          : 100%;
    position        : absolute;
    top             : 0;
    left            : 0;

}

.page-item-bg .page-item-role .role-bg-s {
    background-color: rgba(235, 250, 255, 0.922);
    opacity         : 0;
}




.page-item .page-item-role .role-body {
    display            : block;
    /* width           : 1920px; */
    height             : 1080px;
    position           : relative;
    overflow           : hidden;
    z-index            : 0;
    transform-origin   : left top;
}


.page-item .page-item-role .role-content {
    /* padding: 186px/1920px 471px/1920px; */
    padding   : 9.6875% 24.53125%;
    width     : 100%;
    height    : 100%;
    display   : block;
    box-sizing: border-box;
    position  : absolute;
    top       : 0;
    left      : 0;
    z-index   : 0;
    opacity   : 0;
    transition: transform linear 1000ms, opacity linear 1000ms;
}

.page-item .page-item-role .role-content-b {
    /* padding: 204px/1920px 234px/1920px x 744px/1920px; */
    padding: 10.625% 12.1875% 10.625% 38.75%;
}

.page-item .page-item-role .role-content-s {
    /* padding: 204px/1920px 744px/1920px x 234px/1920px; */
    padding: 10.625% 38.75% 10.625% 12.1875%;
}




.page-item .page-item-role .role-content>h1 {
    margin-bottom: 80px;
}

.page-item .page-item-role .role-content .tips {
    margin-top : 18px;
    display    : block;
    font-weight: 700;
    font-size  : 18px;
    color      : #ffbe2e;
}

.page-item .page-item-role .role-content .items {
    margin-top: 60px;
}

.page-item .page-item-role .role-content .item {
    display       : inline-block;
    vertical-align: middle;
    width         : 92px;
    height        : 126px;
}

.page-item .page-item-role .role-content .item .icon {
    margin : 0 auto;
    display: block;
    width  : 92px;
    height : 92px;
}

.page-item .page-item-role .role-content .item .title {
    margin-top : 16px;
    display    : block;
    font-weight: 400;
    font-size  : 18px;
    line-height: 1;
    text-align : center;
    color      : rgba(0, 0, 0, 0.3);
}



.page-item .page-item-role .role-content .item .tips {
    padding               : 10px 15px;
    display               : block;
    border-radius         : 20px;
    background            : #fff;
    box-shadow            : 0 5px 10px rgba(0, 0, 0, 0.05);
    font-weight           : 400;
    font-size             : 14px;
    color                 : rgba(0, 0, 0, 0.3);
    white-space           : nowrap;
    position              : absolute;
    bottom                : 100%;
    left                  : 50%;
    transform             : translate(-50%, 30px);
    opacity               : 0;
    visibility            : hidden;
    -webkit-font-smoothing: antialiased;
}


.page-item .page-item-role .role-content .item .tips::after {
    content         : "";
    display         : block;
    border-style    : solid;
    border-width    : 14px 9px 0 9px;
    border-color    : transparent;
    border-top-color: #fff;
    position        : absolute;
    top             : 100%;
    left            : 50%;
    transform       : translateX(-50%);
}

.page-item .page-item-role .role-content .item .icon,
.page-item .page-item-role .role-content .item .title {
    transition: transform 300ms linear;
}

.page-item .page-item-role .role-content .item:hover .icon,
.page-item .page-item-role .role-content .item:hover .title {
    transform: translateY(-10px)
}

.page-item .page-item-role .role-content .item:hover .tips {
    transform : translate(-50%, -30px);
    opacity   : 1;
    visibility: visible;
    transition: all 300ms linear;
}

.page-item .page-item-role .role-content .item+.item {
    margin-left: 30px;
}





.page-item .page-item-role .role-content .register {
    margin-top: 60px;
    cursor    : pointer;
}


.page-item .page-item-role .role-content .register .icon {
    display       : inline-block;
    vertical-align: middle;
    width         : 60px;
    height        : 60px;
}

.page-item .page-item-role .role-content .register .content {
    padding       : 0 20px;
    display       : inline-block;
    vertical-align: middle;
    font-weight   : 400;
    font-size     : 18px;
    color         : #ffbe2e;
    text-align    : left;
}

.page-item .page-item-role .role-content .register .content>h1 {
    font-weight: 700;
    font-size  : 38px;
}

.page-item .page-item-role .role-content .register .arrow {
    display       : inline-block;
    vertical-align: middle;
    width         : 15px;
    height        : 20px;
}

.page-item .page-item-role .role-content-s .register .content {
    color: #3f3fd1;
}




/* 内容样式 */

.page-item .page-item-role .role-content-ep {
    /* padding: 265px/1920px 588px/1920px; */
    padding: 13.8% 30.625%;
}

.page-item .page-item-role .role-content-ep>h2 {
    margin-top : 144px;
    font-weight: 700;
    font-size  : 24px;
    line-height: 50px;
    text-align : center;
    color      : #ffbe2e;
}

.page-item .page-item-role .role-content-ep>h1 {
    margin-top : 25px;
    font-weight: 700;
    font-size  : 38px;
    color      : #ffbe2e;
    text-align : center;
}

.page-item .page-item-role .role-content-ep>p {
    font-weight: 700;
    font-size  : 24px;
    color      : rgba(51, 51, 51, 0.6);
    text-align : center;
    line-height: 1.8;
}

.page-item .page-item-role .role-content-ep>p>.role-title {
    font-weight: 900;
    font-size  : 49px;
    line-height: 3;
}

.page-item .page-item-role .role-content-ep>p>.role-title-b {
    color: #ffbe2e;
}

.page-item .page-item-role .role-content-ep>p>.role-title-s {
    color: #3f3fd1;
}

.page-item .page-item-role .role-content-ep>a {
    display    : block;
    margin-top : 45px;
    font-weight: 700;
    font-size  : 18px;
    color      : #576b95;
    text-align : center;
    cursor     : pointer;
}



.page-item .page-item-role .role-content-ep>h2,
.page-item .page-item-role .role-content-ep>h1,
.page-item .page-item-role .role-content-ep>p {
    opacity   : 0;
    transform : translateY(30px);
    transition: all linear 500ms;
}

.page-item.active .page-item-role .role-content-ep>h2,
.page-item.active .page-item-role .role-content-ep>h1,
.page-item.active .page-item-role .role-content-ep>p {
    opacity  : 1;
    transform: translateY(0px);
}

.page-item.active .page-item-role .role-content-ep>h2 {
    transition-delay: 500ms;
}

.page-item.active .page-item-role .role-content-ep>h1 {
    transition-delay: 1000ms;
}

.page-item.active .page-item-role .role-btn-b .tip {
    animation: tips-move-b ease-in-out 1.5s infinite alternate-reverse;
}

@keyframes tips-move-b {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-30px);
    }
}

.page-item.active .page-item-role .role-btn-s .tip {
    animation: tips-move-s ease-in-out 1.5s infinite alternate-reverse;
}

@keyframes tips-move-s {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(30px);
    }
}




/* 卖家样式 */
.page-item .page-item-role .role-content-b {
    text-align: right;
}

.page-item .page-item-role .role-content-b>h1 {
    font-weight: 900;
    font-size  : 70px;
    color      : #ffbe2e;
}

.page-item .page-item-role .role-content-b>p {
    font-weight: 700;
    font-size  : 18px;
    color      : #333;
}



/* 供货商样式 */
.page-item .page-item-role .role-content-s>h1 {
    font-weight: 900;
    font-size  : 70px;
    text-align : left;
    color      : #3f3fd1;
}

.page-item .page-item-role .role-content-s>p {
    font-weight: 700;
    font-size  : 18px;
    text-align : left;
    color      : #333;
}

.page-item .page-item-role .role-content-s .tips {
    color: #3f3fd1;
}




/* 卖家弹出 */
.page-item .page-item-role .role-content {
    opacity  : 0;
    transform: translateY(10%);
}

.page-item .page-item-role .role-content-ep {
    transition: transform linear 1000ms 500ms, opacity linear 1000ms 500ms;
    opacity   : 1;
    transform : translateY(0);
}

.page-item .page-item-role .role-content-b {
    transition: transform linear 500ms, opacity linear 500ms;
}

.page-item .page-item-role.role-b .role-content-ep {
    transition: transform linear 500ms, opacity linear 500ms;
    opacity   : 0;
    transform : translateY(10%);
}

.page-item .page-item-role.role-b .role-content-b {
    transition: transform linear 1000ms 500ms, opacity linear 1000ms 500ms;
    opacity   : 1;
    transform : translateY(0);
    z-index   : 1;
}

/* 供货商弹出 */
.page-item .page-item-role .role-content-s {
    transition: transform linear 500ms, opacity linear 500ms;
}

.page-item .page-item-role.role-s .role-content-ep {
    transition: transform linear 500ms, opacity linear 500ms;
    opacity   : 0;
    transform : translateY(10%);
}

.page-item .page-item-role.role-s .role-content-s {
    transition: transform linear 1000ms 500ms, opacity linear 1000ms 500ms;
    opacity   : 1;
    transform : translateY(0);
    z-index   : 1;
}



/* 功能动画 */

.page-item .page-item-role.role-b .role-content-b .item:nth-child(1),
.page-item .page-item-role.role-s .role-content-s .item:nth-child(1) {
    opacity        : 0;
    animation      : popup 300ms ease 100ms 1 normal forwards;
    animation-delay: 900ms;
}

.page-item .page-item-role.role-b .role-content-b .item:nth-child(2),
.page-item .page-item-role.role-s .role-content-s .item:nth-child(2) {
    opacity        : 0;
    animation      : popup 300ms ease 150ms 1 normal forwards;
    animation-delay: 1050ms;
}

.page-item .page-item-role.role-b .role-content-b .item:nth-child(3),
.page-item .page-item-role.role-s .role-content-s .item:nth-child(3) {
    opacity        : 0;
    animation      : popup 300ms ease 200ms 1 normal forwards;
    animation-delay: 1200ms;
}


@keyframes popup {
    0% {
        opacity  : 0;
        transform: translateY(100px);
    }

    50% {
        opacity  : 1;
        transform: translateY(-60px);
    }

    100% {
        opacity  : 1;
        transform: translateY(0px);
    }
}


/* 供货商背景处理 */
.page-item-bg .page-item-role .role-bg-b {
    transition: opacity linear 750ms;
    opacity   : 1;
}

.page-item-bg .page-item-role .role-bg-s {
    transition: opacity linear 500ms 500ms;
    opacity   : 0;
}

.page-item-bg .page-item-role.role-s .role-bg-b {
    transition: opacity linear 500ms 500ms;
    opacity   : 0;
}

.page-item-bg .page-item-role.role-s .role-bg-s {
    transition: opacity linear 750ms;
    opacity   : 1;
}