body {
    background-color: #f1f1f1;
    color: #333333;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font-family: "DM Sans", "Gilroy-Bold", "Helvetica", "Arial", sans-serif;
}

div, button, input, textarea, label, a, img {
    box-sizing: border-box;
}

#__next {
    position: relative;
    font-size: 0.22rem;
    overflow: hidden;
}

.header .logo img {
    height: 100%;
}

.header-wrapper {
    position: fixed;
    top: 0px;
    z-index: 100;
    height: 0.75rem;
    max-height: 0.75rem;
}

@media screen and (max-width: 768px) {
    .layui-hide-xs {
        display: none !important
    }

    .layui-show-xs-block {
        display: block !important
    }

    .layui-show-xs-inline {
        display: inline !important
    }

    .layui-show-xs-inline-block {
        display: inline-block !important
    }
}

@media screen and (min-width: 768px) {
    .layui-hide-sm {
        display: none !important
    }
}

.header {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: justify;
    justify-content: space-between;
    position: relative;
    top: 0px;
    width: 100vw;
    height: 0.75rem;
    background-color: #2F4056;
    z-index: 100;
    line-height: 0.75rem;
    margin-bottom: 0px;
}

.header .logo {
    height: 0.43rem;
    margin-left: 2.5vw;
    display: flex;
    align-items: center;
}

.header-wrapper-back {
    z-index: 0;
    min-height: 0.75rem;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
}

.header a{
    color: white;
}

.header.zh .right {
    font-size: 0.16rem;
}

.header .right {
    margin-right: 6.7vw;
    font-size: 0.18rem;
    color: rgb(255, 255, 255);
}

.header .nav-item {
    display: inline-block;
    margin-left: 2vw;
    margin-right: 2vw;
    cursor: pointer;
}

.header .nav-item:hover {
    font-weight: bold;
}

.header .active {
    font-weight: bold;
}

.l-input, .l-select, .l-textarea {
    height: 38px;
    line-height: 1.3;
    border-style: none;
    background-color: inherit;
    color: white;
    text-align: center;
    font-size: 0.16rem;
    /* 去掉三角 */
    appearance: none;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari 和 Chrome */
    /* 去掉边框 */
}

body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0px;
    padding: 0px;
}

.bg-ellipse-full-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background: linear-gradient(98.63deg, rgba(248, 249, 251, 0.546) 20.59%, rgba(120, 230, 220, 0) 89.33%);
}

.bg-ellipse-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: -1;
}

.bg-ellipse-wrapper {
    max-width: 19.2rem;
}

.bg-ellipse-wrapper .bg-ellipse-1 {
    right: -1.9rem;
    top: 0.1rem;
    background: linear-gradient(44.11deg, rgba(139, 233, 223, 0.75) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: rotate(-85.35deg);
}
.bg-ellipse {
    position: absolute;
    width: 6.99rem;
    height: 6.99rem;
    border-radius: 51%;
    z-index: -1;
    transition: transform 0.3s linear 0s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.bg-ellipse-wrapper .bg-ellipse-2 {
    left: -2.1rem;
    top: 5.2rem;
    background: linear-gradient(44.11deg, rgba(124, 177, 235, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: rotate(-21.57deg);
}

.bg-ellipse-wrapper .bg-ellipse-3 {
    right: -1.38rem;
    top: 11.7rem;
    background: linear-gradient(44.11deg, rgba(245, 198, 39, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: scale(0.85) rotate(-63.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-4 {
    left: -2.32rem;
    top: 15.6rem;
    background: linear-gradient(44.11deg, rgba(139, 233, 223, 0.75) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: rotate(-29.1deg);
}

.bg-ellipse-wrapper .bg-ellipse-5 {
    right: -2.57rem;
    top: 24.7rem;
    background: linear-gradient(44.11deg, rgba(124, 177, 235, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: rotate(-70.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-6 {
    left: -2.73rem;
    top: 30.5rem;
    background: linear-gradient(44.11deg, rgba(245, 198, 39, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: rotate(-29.1deg);
}
.bg-ellipse-wrapper .bg-ellipse-7 {
    right: -3.07rem;
    top: 43.5rem;
    background: linear-gradient(44.11deg, rgba(139, 233, 223, 0.75) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: scale(0.85) rotate(-93.95deg);
}
.bg-ellipse-wrapper .bg-ellipse-8 {
    left: -2.43rem;
    top: 54.5rem;
    background: linear-gradient(44.11deg, rgba(124, 177, 235, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
    transform: scale(0.95) rotate(-21.57deg);
}

.footer-z {
    width: 100%;
    height: auto;
    background-color: #2F4056;
    color: rgb(255, 255, 255);
    background-size: 100% 100%;
}
.footer-z a {
    color: white;
}
.footer-z ul {
    padding-top: 40px;
    width: 80%;
    margin: 0 auto;
}

.footer-z li {
    margin-right: 1.5rem;
}

.footer-z .title {
    font-size: 0.20rem;
    font-weight: 600;
    margin-bottom: 0.24rem;
    flex-basis: 30%;
    color: white;
}

.footer-z .content {
    font-size: 0.14rem;
    margin-bottom: 0.15rem;
    margin-right: 0.15rem;
    color: white;
}

.footer-z .content:hover {
    font-weight: bold;
}

.footer-z .content img {
    width: 1.16rem;
    height: 1.16rem;
}

.footer-z .beian {
    padding-top: 20px;
    width: 80%;
    padding-bottom: 15px;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.text-df {
    font-size: 14px;
}

.margin-top {
    margin-top: 14px;
}

.margin-left {
    margin-left: 15px;
}

.img-bg-view {
    margin-top: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-bg {
    max-width: 1080px;
    display: block;
}
.img-bg img {
    padding: 10px;
    max-width: 100%;
    display: block;
    background:
            linear-gradient(
                    0deg,
                    rgba(87,221,255, .1),
                    rgba(87,221,255, .1),
                    transparent,
                    transparent,
                    transparent,
                    transparent,
                    transparent
            ),
            linear-gradient(
                    90deg,
                    transparent,
                    transparent,
                    rgba(87,221,255, .1),
                    rgba(87,221,255, .1),
                    transparent,
                    transparent
            )
}

.img-bg-item {
    padding: 10px;
    display: block;
    max-width: 100%;
    background:
            linear-gradient(
                    0deg,
                    rgba(87,221,255, .1),
                    rgba(87,221,255, .1),
                    transparent,
                    transparent,
                    transparent,
                    transparent,
                    transparent
            ),
            linear-gradient(
                    90deg,
                    transparent,
                    transparent,
                    rgba(87,221,255, .1),
                    rgba(87,221,255, .1),
                    transparent,
                    transparent
            );
}

.img-bg-padding {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.img-bg-item img {
    background: inherit;
}

.img-bg-item .title {
    display: block;
    width: 100%;
    max-width: 1080px;
    font-size: 0.25rem;
    text-align: center;
    letter-spacing: 0.05rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.img-bg-item .content {
    display: block;
    max-width: 1080px;
    width: 100%;
    margin-top: 0.15rem;
    font-size: 0.15rem;
    font-weight: 400;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.img-bg-item .content p{
    margin-top: 0.1rem;
}

.footer-z .follow_me {
    display: flex;
}

@media (max-width: 600px) {
    .footer-z li{
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        margin-right: 15px;
        margin-bottom: 15px;
        width: 100%;
    }

    .footer-z .title{
        flex-basis: 50%;
        width: 50%;
    }

    .footer-z .content-view{
        flex-basis: 50%;
        width: 50%;
    }

    .footer-z .content {
        flex-basis: 50%;
        margin-right: 0px;
    }

    .footer-z .follow_me {
        display: inline-block;
    }
}

.product-img {
    max-height: 70vh;
}


.arktitle {
    font-size: 20px;
    margin-left: 15px;
    font-weight: bold;
    -webkit-background-clip: text;
    animation: blink 2s linear infinite;
    background-color: darkgray;
    color: white;
    text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
    -webkit-animation: blink 2s linear infinite;
    -moz-animation: blink 2s linear infinite;
    -ms-animation: blink 2s linear infinite;
    -o-animation: blink 2s linear infinite;
}
@keyframes blink{
    0%{opacity: 1;}
    50%{opacity: 0.6;}
    100%{opacity: 0.8;}
}
@-webkit-keyframes blink {
    0% { opacity: 1; }
    50%{ opacity: 0.6;}
    100% { opacity: 0.8; }
}
@-moz-keyframes blink {
    0% { opacity: 1; }
    50%{ opacity: 0.6; }
    100% { opacity: 0.8; }
}
@-ms-keyframes blink {
    0% { opacity: 1; }
    50%{ opacity: 0.6; }
    100% { opacity: 0.8;}
}
@-o-keyframes blink {
    0% { opacity: 1; }
    50%{ opacity: 0.6; }
    100% { opacity: 0.8; }
}

pre {
    background-color: inherit;
}