/*
 * @Project Name: 外贸啦DIY(子比)
 * @Project URI: https://waimao.la/
 * @Author: WaiMao.La
 * @Author URI: https://waimao.la/
 * @Date: 2024-06-27 15:38:58
 * @FilePath: \WaiMaoLa_Diy\css\yuansufuhao.css
 * @LastEditors: WaiMao.La
 * @LastEditTime: 2024-06-27 21:19:08
 * @Description: 感谢您使用外贸啦DIY(子比)，插件源码有详细的注释，支持二次开发。
 * @Remind me: 无利不起早，使用盗版插件会存在各种未知风险。支持正版，从我做起！
 */

.container1 {
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: fixed;
    z-index: -1;
    pointer-events: none;
    margin-top: -5%
}

.container1 .inner-container1 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: -1
}

.shape {
    margin: 0 auto;
    position: relative;
    z-index: -1
}

.random-shape:after {
    font-family: FontAwesome;
    content: ""
}

@keyframes shape-1 {
    0% {
        transform: translate3d(0, 0, 0)rotate(226deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(586deg)
    }
}

.shape-container--1 {
    animation: shape-1 45s linear infinite
}

.shape-container--1 .random-shape:after {
    margin: 6rem;
    color: #DB7093;
    font-size: 1.2rem;
    content: ""
}

@keyframes shape-2 {
    0% {
        transform: translate3d(0, 0, 0)rotate(74deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(434deg)
    }
}

.shape-container--2 {
    animation: shape-2 45s linear infinite
}

.shape-container--2 .random-shape:after {
    margin: 9rem;
    color: #FFD700;
    font-size: 1.8rem;
    content: ""
}

@keyframes shape-3 {
    0% {
        transform: translate3d(0, 0, 0)rotate(242deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(602deg)
    }
}

.shape-container--3 {
    animation: shape-3 48s linear infinite
}

.shape-container--3 .random-shape:after {
    margin: 8rem;
    color: #FFD700;
    font-size: 1.6rem;
    content: ""
}

@keyframes shape-4 {
    0% {
        transform: translate3d(0, 0, 0)rotate(313deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(673deg)
    }
}

.shape-container--4 {
    animation: shape-4 50s linear infinite
}

.shape-container--4 .random-shape:after {
    margin: 10rem;
    color: #DB7093;
    font-size: 2rem;
    content: ""
}

@keyframes shape-5 {
    0% {
        transform: translate3d(0, 0, 0)rotate(135deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(495deg)
    }
}

.shape-container--5 {
    animation: shape-5 50s linear infinite
}

.shape-container--5 .random-shape:after {
    margin: 9rem;
    color: #C2B7FE;
    font-size: 1.8rem;
    content: ""
}

@keyframes shape-6 {
    0% {
        transform: translate3d(0, 0, 0)rotate(355deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(715deg)
    }
}

.shape-container--6 {
    animation: shape-6 49s linear infinite
}

.shape-container--6 .random-shape:after {
    margin: 5rem;
    color: #95A9FF;
    font-size: 1rem;
    content: ""
}

@keyframes shape-7 {
    0% {
        transform: translate3d(0, 0, 0)rotate(28deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(388deg)
    }
}

.shape-container--7 {
    animation: shape-7 48s linear infinite
}

.shape-container--7 .random-shape:after {
    margin: 4rem;
    color: #DB7093;
    font-size: 0.8rem;
    content: ""
}

@keyframes shape-8 {
    0% {
        transform: translate3d(0, 0, 0)rotate(126deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(486deg)
    }
}

.shape-container--8 {
    animation: shape-8 43s linear infinite
}

.shape-container--8 .random-shape:after {
    margin: 9rem;
    color: #95A9FF;
    font-size: 1.8rem;
    content: ""
}

@keyframes shape-9 {
    0% {
        transform: translate3d(0, 0, 0)rotate(165deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(525deg)
    }
}

.shape-container--9 {
    animation: shape-9 45s linear infinite
}

.shape-container--9 .random-shape:after {
    margin: 2rem;
    color: #FFF8DC;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-10 {
    0% {
        transform: translate3d(0, 0, 0)rotate(180deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(540deg)
    }
}

.shape-container--10 {
    animation: shape-10 41s linear infinite
}

.shape-container--10 .random-shape:after {
    margin: 3rem;
    color: #95A9FF;
    font-size: 0.6rem;
    content: ""
}

@keyframes shape-11 {
    0% {
        transform: translate3d(0, 0, 0)rotate(85deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(445deg)
    }
}

.shape-container--11 {
    animation: shape-11 50s linear infinite
}

.shape-container--11 .random-shape:after {
    margin: 7rem;
    color: #95A9FF;
    font-size: 1.4rem;
    content: ""
}

@keyframes shape-12 {
    0% {
        transform: translate3d(0, 0, 0)rotate(137deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(497deg)
    }
}

.shape-container--12 {
    animation: shape-12 45s linear infinite
}

.shape-container--12 .random-shape:after {
    margin: 6rem;
    color: #FFD700;
    font-size: 1.2rem;
    content: ""
}

@keyframes shape-13 {
    0% {
        transform: translate3d(0, 0, 0)rotate(15deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(375deg)
    }
}

.shape-container--13 {
    animation: shape-13 44s linear infinite
}

.shape-container--13 .random-shape:after {
    margin: 7rem;
    color: #FFF8DC;
    font-size: 1.4rem;
    content: ""
}

@keyframes shape-14 {
    0% {
        transform: translate3d(0, 0, 0)rotate(242deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(602deg)
    }
}

.shape-container--14 {
    animation: shape-14 50s linear infinite
}

.shape-container--14 .random-shape:after {
    margin: 8rem;
    color: #DB7093;
    font-size: 1.6rem;
    content: ""
}

@keyframes shape-15 {
    0% {
        transform: translate3d(0, 0, 0)rotate(176deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(536deg)
    }
}

.shape-container--15 {
    animation: shape-15 47s linear infinite
}

.shape-container--15 .random-shape:after {
    margin: 4rem;
    color: #95A9FF;
    font-size: 0.8rem;
    content: ""
}

@keyframes shape-16 {
    0% {
        transform: translate3d(0, 0, 0)rotate(66deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(426deg)
    }
}

.shape-container--16 {
    animation: shape-16 43s linear infinite
}

.shape-container--16 .random-shape:after {
    margin: 9rem;
    color: #FFD700;
    font-size: 1.8rem;
    content: ""
}

@keyframes shape-17 {
    0% {
        transform: translate3d(0, 0, 0)rotate(113deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(473deg)
    }
}

.shape-container--17 {
    animation: shape-17 43s linear infinite
}

.shape-container--17 .random-shape:after {
    margin: 6rem;
    color: #FFF8DC;
    font-size: 1.2rem;
    content: ""
}

@keyframes shape-18 {
    0% {
        transform: translate3d(0, 0, 0)rotate(166deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(526deg)
    }
}

.shape-container--18 {
    animation: shape-18 44s linear infinite
}

.shape-container--18 .random-shape:after {
    margin: 2rem;
    color: #95A9FF;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-19 {
    0% {
        transform: translate3d(0, 0, 0)rotate(293deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(653deg)
    }
}

.shape-container--19 {
    animation: shape-19 42s linear infinite
}

.shape-container--19 .random-shape:after {
    margin: 1rem;
    color: #FFF8DC;
    font-size: 0.2rem;
    content: ""
}

@keyframes shape-20 {
    0% {
        transform: translate3d(0, 0, 0)rotate(283deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(643deg)
    }
}

.shape-container--20 {
    animation: shape-20 42s linear infinite
}

.shape-container--20 .random-shape:after {
    margin: 6rem;
    color: #95A9FF;
    font-size: 1.2rem;
    content: ""
}

@keyframes shape-21 {
    0% {
        transform: translate3d(0, 0, 0)rotate(4deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(364deg)
    }
}

.shape-container--21 {
    animation: shape-21 50s linear infinite
}

.shape-container--21 .random-shape:after {
    margin: 6rem;
    color: #C2B7FE;
    font-size: 1.2rem;
    content: ""
}

@keyframes shape-22 {
    0% {
        transform: translate3d(0, 0, 0)rotate(49deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(409deg)
    }
}

.shape-container--22 {
    animation: shape-22 50s linear infinite
}

.shape-container--22 .random-shape:after {
    margin: 9rem;
    color: #C2B7FE;
    font-size: 1.8rem;
    content: ""
}

@keyframes shape-23 {
    0% {
        transform: translate3d(0, 0, 0)rotate(337deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(697deg)
    }
}

.shape-container--23 {
    animation: shape-23 50s linear infinite
}

.shape-container--23 .random-shape:after {
    margin: 5rem;
    color: #95A9FF;
    font-size: 1rem;
    content: ""
}

@keyframes shape-24 {
    0% {
        transform: translate3d(0, 0, 0)rotate(34deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(394deg)
    }
}

.shape-container--24 {
    animation: shape-24 49s linear infinite
}

.shape-container--24 .random-shape:after {
    margin: 8rem;
    color: #C2B7FE;
    font-size: 1.6rem;
    content: ""
}

@keyframes shape-25 {
    0% {
        transform: translate3d(0, 0, 0)rotate(292deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(652deg)
    }
}

.shape-container--25 {
    animation: shape-25 43s linear infinite
}

.shape-container--25 .random-shape:after {
    margin: 1rem;
    color: #95A9FF;
    font-size: 0.2rem;
    content: ""
}

@keyframes shape-26 {
    0% {
        transform: translate3d(0, 0, 0)rotate(117deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(477deg)
    }
}

.shape-container--26 {
    animation: shape-26 50s linear infinite
}

.shape-container--26 .random-shape:after {
    margin: 4rem;
    color: #95A9FF;
    font-size: 0.8rem;
    content: ""
}

@keyframes shape-27 {
    0% {
        transform: translate3d(0, 0, 0)rotate(115deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(475deg)
    }
}

.shape-container--27 {
    animation: shape-27 46s linear infinite
}

.shape-container--27 .random-shape:after {
    margin: 10rem;
    color: #95A9FF;
    font-size: 2rem;
    content: ""
}

@keyframes shape-28 {
    0% {
        transform: translate3d(0, 0, 0)rotate(110deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(470deg)
    }
}

.shape-container--28 {
    animation: shape-28 48s linear infinite
}

.shape-container--28 .random-shape:after {
    margin: 2rem;
    color: #DB7093;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-29 {
    0% {
        transform: translate3d(0, 0, 0)rotate(89deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(449deg)
    }
}

.shape-container--29 {
    animation: shape-29 47s linear infinite
}

.shape-container--29 .random-shape:after {
    margin: 1rem;
    color: #95A9FF;
    font-size: 0.2rem;
    content: ""
}

@keyframes shape-30 {
    0% {
        transform: translate3d(0, 0, 0)rotate(103deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(463deg)
    }
}

.shape-container--30 {
    animation: shape-30 43s linear infinite
}

.shape-container--30 .random-shape:after {
    margin: 2rem;
    color: #FFD700;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-31 {
    0% {
        transform: translate3d(0, 0, 0)rotate(64deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(424deg)
    }
}

.shape-container--31 {
    animation: shape-31 43s linear infinite
}

.shape-container--31 .random-shape:after {
    margin: 2rem;
    color: #C2B7FE;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-32 {
    0% {
        transform: translate3d(0, 0, 0)rotate(265deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(625deg)
    }
}

.shape-container--32 {
    animation: shape-32 44s linear infinite
}

.shape-container--32 .random-shape:after {
    margin: 4rem;
    color: #FFD700;
    font-size: 0.8rem;
    content: ""
}

@keyframes shape-33 {
    0% {
        transform: translate3d(0, 0, 0)rotate(22deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(382deg)
    }
}

.shape-container--33 {
    animation: shape-33 48s linear infinite
}

.shape-container--33 .random-shape:after {
    margin: 5rem;
    color: #95A9FF;
    font-size: 1rem;
    content: ""
}

@keyframes shape-34 {
    0% {
        transform: translate3d(0, 0, 0)rotate(19deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(379deg)
    }
}

.shape-container--34 {
    animation: shape-34 44s linear infinite
}

.shape-container--34 .random-shape:after {
    margin: 7rem;
    color: #FFF8DC;
    font-size: 1.4rem;
    content: ""
}

@keyframes shape-35 {
    0% {
        transform: translate3d(0, 0, 0)rotate(344deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(704deg)
    }
}

.shape-container--35 {
    animation: shape-35 46s linear infinite
}

.shape-container--35 .random-shape:after {
    margin: 8rem;
    color: #FFD700;
    font-size: 1.6rem;
    content: ""
}

@keyframes shape-36 {
    0% {
        transform: translate3d(0, 0, 0)rotate(6deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(366deg)
    }
}

.shape-container--36 {
    animation: shape-36 49s linear infinite
}

.shape-container--36 .random-shape:after {
    margin: 10rem;
    color: #FFD700;
    font-size: 2rem;
    content: ""
}

@keyframes shape-37 {
    0% {
        transform: translate3d(0, 0, 0)rotate(272deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(632deg)
    }
}

.shape-container--37 {
    animation: shape-37 47s linear infinite
}

.shape-container--37 .random-shape:after {
    margin: 8rem;
    color: #C2B7FE;
    font-size: 1.6rem;
    content: ""
}

@keyframes shape-38 {
    0% {
        transform: translate3d(0, 0, 0)rotate(55deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(415deg)
    }
}

.shape-container--38 {
    animation: shape-38 43s linear infinite
}

.shape-container--38 .random-shape:after {
    margin: 2rem;
    color: #C2B7FE;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-39 {
    0% {
        transform: translate3d(0, 0, 0)rotate(86deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(446deg)
    }
}

.shape-container--39 {
    animation: shape-39 46s linear infinite
}

.shape-container--39 .random-shape:after {
    margin: 4rem;
    color: #FFF8DC;
    font-size: 0.8rem;
    content: ""
}

@keyframes shape-40 {
    0% {
        transform: translate3d(0, 0, 0)rotate(164deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(524deg)
    }
}

.shape-container--40 {
    animation: shape-40 46s linear infinite
}

.shape-container--40 .random-shape:after {
    margin: 9rem;
    color: #FFD700;
    font-size: 1.8rem;
    content: ""
}

@keyframes shape-41 {
    0% {
        transform: translate3d(0, 0, 0)rotate(98deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(458deg)
    }
}

.shape-container--41 {
    animation: shape-41 45s linear infinite
}

.shape-container--41 .random-shape:after {
    margin: 7rem;
    color: #C2B7FE;
    font-size: 1.4rem;
    content: ""
}

@keyframes shape-42 {
    0% {
        transform: translate3d(0, 0, 0)rotate(140deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(500deg)
    }
}

.shape-container--42 {
    animation: shape-42 50s linear infinite
}

.shape-container--42 .random-shape:after {
    margin: 10rem;
    color: #C2B7FE;
    font-size: 2rem;
    content: ""
}

@keyframes shape-43 {
    0% {
        transform: translate3d(0, 0, 0)rotate(268deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(628deg)
    }
}

.shape-container--43 {
    animation: shape-43 41s linear infinite
}

.shape-container--43 .random-shape:after {
    margin: 8rem;
    color: #DB7093;
    font-size: 1.6rem;
    content: ""
}

@keyframes shape-44 {
    0% {
        transform: translate3d(0, 0, 0)rotate(134deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(494deg)
    }
}

.shape-container--44 {
    animation: shape-44 43s linear infinite
}

.shape-container--44 .random-shape:after {
    margin: 2rem;
    color: #95A9FF;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-45 {
    0% {
        transform: translate3d(0, 0, 0)rotate(176deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(536deg)
    }
}

.shape-container--45 {
    animation: shape-45 50s linear infinite
}

.shape-container--45 .random-shape:after {
    margin: 6rem;
    color: #FFD700;
    font-size: 1.2rem;
    content: ""
}

@keyframes shape-46 {
    0% {
        transform: translate3d(0, 0, 0)rotate(9deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(369deg)
    }
}

.shape-container--46 {
    animation: shape-46 48s linear infinite
}

.shape-container--46 .random-shape:after {
    margin: 5rem;
    color: #DB7093;
    font-size: 1rem;
    content: ""
}

@keyframes shape-47 {
    0% {
        transform: translate3d(0, 0, 0)rotate(342deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(702deg)
    }
}

.shape-container--47 {
    animation: shape-47 42s linear infinite
}

.shape-container--47 .random-shape:after {
    margin: 6rem;
    color: #C2B7FE;
    font-size: 1.2rem;
    content: ""
}

@keyframes shape-48 {
    0% {
        transform: translate3d(0, 0, 0)rotate(40deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(400deg)
    }
}

.shape-container--48 {
    animation: shape-48 44s linear infinite
}

.shape-container--48 .random-shape:after {
    margin: 5rem;
    color: #FFD700;
    font-size: 1rem;
    content: ""
}

@keyframes shape-49 {
    0% {
        transform: translate3d(0, 0, 0)rotate(150deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(510deg)
    }
}

.shape-container--49 {
    animation: shape-49 45s linear infinite
}

.shape-container--49 .random-shape:after {
    margin: 2rem;
    color: #FFF8DC;
    font-size: 0.4rem;
    content: ""
}

@keyframes shape-50 {
    0% {
        transform: translate3d(0, 0, 0)rotate(20deg)
    }

    100% {
        transform: translate3d(0, 0, 0)rotate(380deg)
    }
}

.shape-container--50 {
    animation: shape-50 43s linear infinite
}

.shape-container--50 .random-shape:after {
    margin: 9rem;
    color: #C2B7FE;
    font-size: 1.8rem;
    content: ""
}

.stop-shape {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

@media screen and (max-width: 1000px) {
    .container1 {
        display: none;
    }