* {
    margin: 0;
    padding: 0;
        user-select: none;
}

a {
    text-decoration: none;
}

:root {
    --offer1Color: #F9A449;
    --offer2Color: #F57E60;
    --offer3Color: #56BCC9;
    --offer4Color: #2096F4;
    --offer5Color: #378E3B;
    --tagYellow: #F5FB67;
    --tagGreen: #79F32E;
    --tagPurple: #DF5285;
    --tagBlue: #99CCFE;
    --tagRed: #DE0E3C;
    --tagOrange: #F1AC6A;
    --tagWhite:#fff;
}

.sourcing {
    background-color: #990033;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    height: 65vh;
}

.control-tower {
    background-color: #404040;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: 90vh; */
    height: 78vh;
    position: relative;
}

.my-yeeorder {
    background-color: gray;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    height: 50vh;
    position: relative;
}

.content-title {
    color: #fff;
    font-size: 56px;
    font-family: Calibri;
    text-align: center;
    width: 70%;
    font-style: italic;
    margin: 0 auto;
}

.content-desc {
    color: #fff;
    font-size: 18px;
    font-family: Calibri;
    width: 70%;
    text-align: center;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-top: 40px;

}

.content-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
}

.offering-item {
    display: flex;
    align-items: center;
    height: 8vh;
    margin-top: 20px;
}

.offering-item>div {
    height: 6vh;
    line-height: 6vh;
}

.offering-item>div:first-child {
    width: 45%;
    position: relative;
    left: 7px;
}

.offering-item>div:nth-child(2) {
    width: 7vh;
    border-radius: 50%;
    height: 7vh;
    text-align: center;
    line-height: 7vh;
    font-weight: bold;
    z-index: 9;
}

.sourcing-offering>.offering-item:first-child>div:nth-child(2) {
    border: var(--offer1Color) solid 10px;
    color: var(--offer1Color);
}

.sourcing-offering>.offering-item:nth-child(2)>div:nth-child(2) {
    border: var(--offer2Color) solid 10px;
    color: var(--offer2Color);
}

.sourcing-offering>.offering-item:nth-child(3)>div:nth-child(2) {
    border: var(--offer3Color) solid 10px;
    color: var(--offer3Color);
}

.sourcing-offering>.offering-item:nth-child(4)>div:nth-child(2) {
    border: var(--offer4Color) solid 10px;
    color: var(--offer4Color);
}

.sourcing-offering>.offering-item:nth-child(5)>div:nth-child(2) {
    border: var(--offer5Color) solid 10px;
    color: var(--offer5Color);
}

.shadow3 {
    box-shadow: -3px 3px 3px #888888;
}

.shadow1 {
    box-shadow: -1px 1px 1px #888888;
}

.offering-item>div:last-child {
    width: 45%;
    position: relative;
    right: 7px;
}

.sourcing-right-title {
    font-size: 18px;
    text-align: center;
    color: #F9A752;
    font-weight: bold;
    margin-bottom: 20px;
}

.sourcing-offering>.offering-item .left-note {
    position: absolute;
    right: 0px;
}

.sourcing-offering>.offering-item:first-child .left-note {
    background-color: var(--offer1Color);
    width: 60%;
    animation: offeringitem1 3s linear reverse infinite;
}

.sourcing-offering>.offering-item:nth-child(2) .left-note {
    background-color: var(--offer2Color);
    width: 70%;
    animation: offeringitem2 3s linear reverse infinite;
}

.sourcing-offering>.offering-item:nth-child(3) .left-note {
    background-color: var(--offer3Color);
    width: 80%;
    animation: offeringitem3 3s linear reverse infinite;
}

.sourcing-offering>.offering-item:nth-child(4) .left-note {
    background-color: var(--offer4Color);
    width: 40%;
    animation: offeringitem4 3s linear reverse infinite;
}

.sourcing-offering>.offering-item:nth-child(5) .left-note {
    background-color: var(--offer5Color);
    width: 30%;
    animation: offeringitem5 3s linear reverse infinite;
}

.sourcing-offering>.offering-item:nth-child(2) .right-note {
    background-color: var(--offer2Color);
    width: 70%;
    animation: offeringitem2 3s linear reverse infinite;
    animation-delay: 1s;
}

.sourcing-offering>.offering-item:nth-child(3) .right-note {
    background-color: var(--offer3Color);
    width: 70%;
    animation: offeringitem3 3s linear reverse infinite;
    animation-delay: 1s;
}

.sourcing-offering>.offering-item:nth-child(4) .right-note {
    background-color: var(--offer4Color);
    width: 40%;
    animation: offeringitem4 3s linear reverse infinite;
    animation-delay: 1s;
}

.sourcing-offering>.offering-item:nth-child(5) .right-note {
    background-color: var(--offer5Color);
    width: 30%;
    animation: offeringitem5 3s linear reverse infinite;
    animation-delay: 1s;
}

.right-note:hover {
    animation-play-state: paused !important;
}

.left-note:hover {
    animation-play-state: paused !important;
}

/* infinite 动画播放无限次 */
/* reverse 动画反向播放	 */
/* alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放 */
.sourcing-offering>.offering-item:first-child .right-note {
    background-color: var(--offer1Color);
    width: 50%;
    animation: offeringitem1 3s linear reverse infinite;
    animation-delay: 1s;
}

.left-note {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-left: 10px;
    padding-right: 12px;
}

.right-note {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-left: 8px;
    padding-right: 8px;
}

.offering-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

@keyframes offeringitem1 {
    0% {
        width: 60%;
    }

    25% {
        width: 90%;
    }

    50% {
        width: 60%;
    }

    75% {
        width: 30%;
    }

    100% {
        width: 60%;
    }

}

@keyframes offeringitem2 {
    0% {
        width: 70%;
    }

    25% {
        width: 100%;
    }

    50% {
        width: 70%;
    }

    75% {
        width: 40%;
    }

    100% {
        width: 70%;
    }

}

@keyframes offeringitem3 {
    0% {
        width: 80%;
    }

    25% {
        width: 100%;
    }

    50% {
        width: 80%;
    }

    75% {
        width: 60%;
    }

    100% {
        width: 80%;
    }

}

@keyframes offeringitem4 {
    0% {
        width: 40%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 40%;
    }

}

@keyframes offeringitem5 {
    0% {
        width: 30%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 30%;
    }

}

.white-point {
    border-radius: 50%;
    background-color: #fff;
    width: 24px;
    height: 24px;
    box-shadow: -1px 1px 1px #888888;
}

@keyframes hide {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;

    }
}

.block {
    display: block;
}

.none {
    display: none;
}

.hideEle {
    /* animation: hide 1s linear 0 1 infinite; */
    animation-name: hide;
    animation-timing-function: linear;
    animation-duration: 1s;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
}

/* control tower */
.yeect {
    position: relative;
    margin: 0 auto;
    width: 50%;
}

.yeect>.floor {
    width: 100%;
    border: 2px solid #000;
    border-radius: 5px;
    height: 20px;
    background-color: #66B2FF;
    width: 90%;
    margin: 0 auto;
}

.ct-title {
    padding: 10px;
    border: 2px solid #000;
    display: flex;
    border-radius: 5px;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    z-index: 10;
    position: relative;
    top: 10px;
    background-color: #fff;
}

.ct-title>.sides {
    width: 12px;
    height: 100%;
    background-color: #CCE5FF;
}

.control-yee {
    position: relative;
    height: 70vh;
}

.control-yee img {
    width: 150px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tag {
    padding: 3px 6px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 5px;
    position: absolute;
    min-width: 80px;
    font-size: 14px;
    /* transform-origin: center center; */
    backface-visibility: hidden;
    /* 设置缩放的原点为左上角 */
    will-change: transform;
    /* 告知浏览器元素将要发生变化，优化性能 */
    /* backface-visibility: hidden; */
    /* transform-style: preserve-3d; */
    transition: all 0.3s ease-in-out;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: #413f40;
        color: #444444;

}

.tag:hover {
    transform: translateY(-4px) translateX(-2px);
    box-shadow: 2px 5px 0 0 black;
}

.tagHover {
    transform: translateY(-4px) translateX(-2px);
    box-shadow: 2px 5px 0 0 black;
}

/* .tag.greenTag {
    background-color: var(--tagGreen);
}

.tag.orangeTag {
    background-color: var(--tagOrange);
}

.tag.blueTag {
    background-color: var(--tagBlue);

}
.tag.blueTag {
    background-color: var(--tagBlue);
}

.tag.yellowTag {
    background-color: var(--tagYellow);
}

.tag.purpleTag {
    background-color: var(--tagPurple);
}

.tag.redTag {
    background-color: var(--tagRed);
}
.tag.whiteTag {
    background-color: var(--tagWhite);
} */


.tag.greenTag.tagHover {
    background-color: var(--tagGreen);
}

.tag.orangeTag.tagHover {
    background-color: var(--tagOrange);
}

.tag.blueTag.tagHover {
    background-color: var(--tagBlue);
}
.tag.yellowTag.tagHover {
    background-color: var(--tagYellow);
}

.tag.purpleTag.tagHover {
    background-color: var(--tagPurple);
}

.tag.redTag.tagHover {
    background-color: var(--tagRed);
}

.tag.whiteTag.tagHover {
    background-color: var(--tagWhite);
}



.tag.greenTag:hover {
    background-color: var(--tagGreen);
}

.tag.orangeTag:hover {
    background-color: var(--tagOrange);
}

.tag.blueTag:hover {
    background-color: var(--tagBlue);
}

.tag.yellowTag:hover {
    background-color: var(--tagYellow);
}

.tag.purpleTag:hover {
    background-color: var(--tagPurple);
}

.tag.redTag:hover {
    background-color: var(--tagRed);
}

.tag.whiteTag:hover {
    background-color: var(--tagWhite);
}
.tag.po {
    left: 0;
    right: 0;
    top: 1%;
    width: 80px;
    margin: auto;
}

.tag.pi {
    top: 10%;
    left: 25%;
}

.tag.prod {
    top: 8%;
    right: 25%;
}

.tag.ipi {
    top: 17%;
    left: 15%;
}

.tag.material {
    top: 15%;
    right: 10%;
}

.tag.plat {
    top: 24%;
}

.tag.cut {
    top: 24%;
    right: 15%;
}


.tag.psi {
    top: 34%;
    left: 2%;
}

.tag.package {
    top: 48%;
}

.tag.vob {
    top: 57%;
    left: 5%;
}

.tag.cli {
    top: 65%;
    left: 40px;
}

.tag.suffing {
    top: 73%;
    left: 5%;
}

.tag.asn {
    top: 82%;
    left: 60px;
}

.tag.empty {
    top: 90%;
    left: 20%;
}

.tag.prd {
    top: 33%;
    right: 5%;
}

.tag.assem {
    top: 41%;
    right: 10%;
}

.tag.surfac {
    top: 50%;
    right: 3%;
}

.tag.crd {
    top: 58%;
    right: 3%;
}

.tag.ship {
    top: 66%;
    right: 5%;
}

.tag.custom {
    top: 74%;
    right: 7%;
}

.tag.db {
    top: 82%;
    right: 9%;
}

.tag.invoice {
    bottom: 4%;
    right: 21%;
}

.tag.del {
    bottom: 0;
    left: 0;
    right: 0;
    width: 80px;
    margin: auto;
}

/* .pulse {
    transform-style: preserve-3d;
    animation: pulse 1s ease-out;
} */
.my-content {
    display: flex;
    padding: 10px;
    justify-content: space-between;
}

.outer-round {
    width: 24%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.my-content>.outer-round:nth-child(2n+1) {
    background-color: rgba(148, 0, 78, .8);
}

.my-content>.outer-round:nth-child(2n) {
    background-color: rgba(31, 36, 50, .8);
}

.my-yeeorder>.content-right {
    background-color: transparent;
    overflow: hidden;
}

.content-right {
    width: 45%;
    background-color: #fff;
    padding: 20px;
    position: sticky;
    right: 20px;
    top: 20px;
}

.control-tower .content-left {
    /* align-self: flex-start; */
}

/* my yeeorder 轮播图 */
.inner {
    margin: 0 auto;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.inner img {
    height: 99%;
    vertical-align: top;
    object-fit: contain;
}

.my-yeeorder>.content-right ul {
    height: 100%;
    width: 600%;
    /* position: absolute; */
    list-style: none;
    display: flex;
    align-items: center;
    /* top: 20px; */
    transform: translateX(0px);
}


.my-yeeorder>.content-right ol {
    position: absolute;
    height: 20px;
    right: 20px;
    bottom: 20px;
    text-align: center;
    padding: 5px;
}

.my-yeeorder>.content-right ol li {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background-color: #fff;
    margin: 5px;
    cursor: pointer;

}

.my-yeeorder>.content-right ol .current {
    background-color: red;
}

.my-yeeorder>.content-right #arr {
    display: none;
}

.my-yeeorder>.content-right #arr span {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -20px;
    background: #fff;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: '黑体';
    font-size: 30px;
    color: #000;
    opacity: 0.5;
    border: 1px solid #fff;
}

.my-yeeorder>.content-right #arr #right {
    right: 5px;
    left: auto;
}

.my-yeeorder>.content-right #arr li {
    display: none;
}

.shell {
    position: relative;
    width: 60vw;
    height: 40vw;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    color: white;
    perspective: 1000px;
    transform-origin: center;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: translateZ(-30vw) rotateY(0);
    animation: carousel 9s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* .content:hover{
animation-play-state: paused;
} */

.item {
    position: absolute;
    height: 100%;
    aspect-ratio: 1/0.5;
    /* max-width: 400px; */
    max-height: 85%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-box-reflect: below 25px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}

.item:nth-child(1) {
    background-image: url(./../../images/myyeebanner1.png);
    transform: rotateY(0) translateZ(35vw);
}

.item:nth-child(2) {
    background-image: url(./../../images/myyeebanner2.png);
    transform: rotateY(72deg) translateZ(35vw);
}

.item:nth-child(3) {
    background-image: url(./../../images/myyeebanner3.png);
    transform: rotateY(144deg) translateZ(35vw);

}

.item:nth-child(4) {
    background-image: url(./../../images/myyeebanner4.png);
    transform: rotateY(216deg) translateZ(35vw);

}

.item:nth-child(5) {
    background-image: url(./../../images/myyeebanner5.png);
    transform: rotateY(288deg) translateZ(35vw);

}

@keyframes carousel {

    /* 0%,
     17.5% {
         transform: translateZ(-35vw) rotateY(0);
     } */
    /* 0 -72 -144 -216 -288  -360 */
    /* 27.5%,
     45% {
         transform: translateZ(-35vw) rotateY(-120deg);
     }

     55%,
     72.5% {
         transform: translateZ(-35vw) rotateY(-240deg);
     }

     82.5%,
     100% {
         transform: translateZ(-35vw) rotateY(-360deg);
     } */
    /* 0  27.5  55  82.5  */
    /* 17.5  45 72.5 100 */
    /* 0  18 36 54 72  90*/
    /* 10 28 46 64 82 100 */
    0%,
    10% {
        transform: translateZ(-35vw) rotateY(0);
    }

    18%,
    28% {
        transform: translateZ(-35vw) rotateY(-72deg);
    }

    36%,
    46% {
        transform: translateZ(-35vw) rotateY(-144deg);
    }

    54%,
    64% {
        transform: translateZ(-35vw) rotateY(-216deg);
    }

    72%,
    82% {
        transform: translateZ(-35vw) rotateY(-288deg);
    }

    90%,
    100% {
        transform: translateZ(-35vw) rotateY(-360deg);
    }
}

.content-btn {
    margin-top: 2rem !important;
    display: flex;
    font-family: sohne-var,
        "Helvetica Neue",
        Arial,
        sans-serif;
    text-align: center;
    width: 25rem;
    margin: 0 auto;
}

.button {
    --c: #fff;
    min-width: 11rem;
    user-select: none;
    background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p, 100%)/300% no-repeat,
        #82052F;
    color: #0000;
    border: none;
    transform: perspective(500px) rotateY(calc(20deg*var(--_i, -1)));
    text-shadow: calc(var(--_i, -1)* 0.08em) -.01em 0 var(--c),
        calc(var(--_i, -1)*-0.08em) .01em 2px #0004;
    outline-offset: .1em;
    transition: 0.3s;
}

.button:hover,
.button:focus-visible {
    --_p: 0%;
    --_i: 1;
}

.button:active {
    text-shadow: none;
    color: var(--c);
    box-shadow: inset 0 0 9e9q #0005;
    transition: 0s;
}

.button {
    font-family: system-ui, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0;
    cursor: pointer;
    padding: .1em .3em;
    border: 1px solid #fff;
    border-radius: 10px;
}
.sourcing{
background:url(./../../images/1.png) no-repeat  ;
background-size: 100% 100%;
}
.control-tower{
    background: url(./../../images/2.png) no-repeat;
        background-size: 100% 100%;
}
.my-yeeorder{
    background: url(./../../images/3.png) no-repeat;
        background-size: 100% 100%;
}
.content-right{
    background-color: transparent;
}
.shadow3{
    background-color: #fff;
}