.logo {
    width: 10.8em;
}
.flow {
    background-image: linear-gradient(90deg, #422dc8, #18124d);
    background-image: -webkit-linear-gradient(left, #422dc8, #18124d);
    transition: all 0.4s ease;
}
.button {
    height: 3.25em;
    min-width: 8.5em;
    width: fit-content;
    padding: 0 1.5em;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background-color: #412dc6;
}
.button .flow {
    z-index: 1;
    border-radius: 4px;
}
.button .icon {
    padding-left: calc(0.15rem + 5px);
}
.button .char {
    font-size: 18px;
    position: relative;
    z-index: 2;
}
@media (max-width: 1440px) {
    .button .char {
        font-size: 16px;
    }
}
@media (max-width: 1024px) {
    .button .char {
        font-size: 14px;
    }
}
.button:hover .flow {
    opacity: 0;
}
.caption {
    padding-bottom: 30px;
    margin-bottom: 0.2rem;
}
.caption .head .char,
.caption h1 {
    color: transparent;
    background-image: linear-gradient(120deg, #9cb6f7, #fff);
    background-image: -webkit-linear-gradient(left top, #9cb6f7, #fff);
    -webkit-background-clip: text;
}
.caption .head svg {
    width: 1.6em;
    height: 1.6em;
}
.caption .head svg use {
    stroke: url(#linear-gradient);
    stroke-width: 10;
    fill: none;
}
.caption .head .char {
    margin-left: 1em;
    font-size: 1.2em;
    letter-spacing: 0.2em;
}
.caption .head + h1 {
    padding-top: 20px;
    margin-top: 0.3rem;
}
@media (max-width: 1280px) {
    .caption .head {
        font-size: 16px;
    }
}
.caption h1 {
    font-size: 2em;
    width: fit-content;
}
.caption .en {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 0.3rem;
    padding-top: 10px;
    letter-spacing: 0.1em;
}
.define-svg {
    width: 0;
    height: 0;
}
.define-svg #caption circle {
    fill: none;
}
.datum .data-rolling {
    text-align: center;
}
.datum .enb {
    font-size: 3em;
    line-height: 1.1;
    height: 1em;
    overflow: hidden;
}
.datum .enb:after {
    content: attr(data-content);
    font-size: 0.5em;
    padding-left: 1em;
    display: inline-block;
    vertical-align: top;
}
.datum .text {
    margin-top: 0.1rem;
}
.datum .line {
    height: 1.4em;
    max-height: 100%;
    margin: auto;
    border-right: 1px dashed rgba(255, 255, 255, 0.5);
}
@media (min-width: 801px) {
    .datum .item {
        display: block;
    }
}
@media (max-width: 800px) {
    .datum {
        display: block;
    }
    .datum .item {
        padding: 24px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .datum .item:first-child {
        border: 0 none;
    }
    .datum .item:last-child {
        padding-bottom: 0;
    }
    .datum .line {
        display: none;
    }
}
.swiper-pagination.default {
    position: relative;
    bottom: 0;
    width: auto;
    padding-top: 20px;
    margin-top: 0.2rem;
    height: 8px;
}
.swiper-pagination.default .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
    vertical-align: top;
}
.swiper-pagination.default .swiper-pagination-bullet-active {
    background-color: #412dc6;
}
.circuit {
    z-index: 1;
    pointer-events: none;
}
.circuit canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.circuit ~ .main {
    z-index: 2;
}
.masking {
    z-index: 1;
    border-radius: 50%;
    background-color: #412dc6;
    position: absolute;
    filter: blur(160px);
    -webkit-filter: blur(160px);
    width: 300px;
    height: 300px;
    left: 50%;
    pointer-events: none;
}
.nav {
    height: 1.18rem;
    line-height: 1.18rem;
}
@media (max-width: 1220px) {
    .nav {
        height: 3.75em;
        line-height: 3.75em;
    }
}
.touch.cc,
.touch .cc {
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #fff;
}
.touch.cc > .flow,
.touch .cc > .flow {
    margin: -1px;
    border-radius: 960px;
    z-index: 1;
}
.touch .icon {
    position: relative;
    z-index: 2;
}
.touch.cc:hover,
.touch:hover .cc {
    border-color: transparent;
}
ul.pagination {
    text-align: center;
    padding-top: 20px;
    margin-top: 0.3rem;
    padding-left: 0;
    font-size: 0;
}
ul.pagination li {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    width: 2.5em;
    line-height: 2.5em;
    height: 2.5em;
    border-radius: 100px;
    margin: 0 0.2em;
    transition: all 0.4s ease-out;
    position: relative;
}
ul.pagination li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 100px;
    background-image: linear-gradient(90deg, #422dc8, #18124d);
    background-image: -webkit-linear-gradient(left, #422dc8, #18124d);
    z-index: 1;
    transition: all 0.4s ease-out;
    opacity: 0;
}
ul.pagination li a {
    transition: none;
}
ul.pagination li span {
    display: block;
}
ul.pagination li a,
ul.pagination li span {
    position: relative;
    z-index: 2;
}
ul.pagination li:last-child,
ul.pagination li:first-child {
    border: 2px solid #fff;
    opacity: 0.5;
    line-height: calc(2.5em - 4px);
    font-size: 20px;
    box-sizing: border-box;
}
ul.pagination li:last-child:before,
ul.pagination li:first-child:before {
    margin: -2px;
}
ul.pagination li:last-child > span,
ul.pagination li:first-child > span {
    display: block;
}
ul.pagination li:last-child > a,
ul.pagination li:first-child > a,
ul.pagination li:last-child > span,
ul.pagination li:first-child > span {
    overflow: hidden;
    text-indent: -100px;
    font-size: 0.9em;
    font-family: "iconfont";
}
ul.pagination li:last-child > a:after,
ul.pagination li:first-child > a:after,
ul.pagination li:last-child > span:after,
ul.pagination li:first-child > span:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-indent: 0;
}
ul.pagination li:last-child:hover,
ul.pagination li:first-child:hover,
ul.pagination li:last-child.active,
ul.pagination li:first-child.active {
    opacity: 1;
    border-color: transparent;
}
ul.pagination li:last-child {
    margin-left: 0.3rem;
    margin-right: 0;
}
ul.pagination li:last-child > a:after,
ul.pagination li:last-child > span:after {
    content: "\e85c";
}
ul.pagination li:first-child {
    margin-right: 0.3rem;
    margin-left: 0;
}
ul.pagination li:first-child > a:after,
ul.pagination li:first-child > span:after {
    content: "\e85e";
}
ul.pagination li:hover:before,
ul.pagination li.active:before {
    opacity: 1;
}
ul.pagination li.disabled {
    pointer-events: none;
}
@media (max-width: 1680px) {
    ul.pagination li li {
        font-size: 18px;
    }
}
@media (max-width: 1440px) {
    ul.pagination li li {
        font-size: 16px;
    }
}
@media (max-width: 1280px) {
    ul.pagination li li {
        font-size: 14px;
    }
}
ul.info .cc {
    width: 2.25em;
    height: 2.25em;
    border: 1px solid #fff;
    margin-right: 1em;
}
@media (min-width: 1025px) {
    ul.info {
        margin-left: -0.6rem;
        padding-top: 0.375em;
    }
    ul.info li {
        margin-left: 0.6rem;
    }
}
@media (max-width: 1024px) {
    ul.info {
        display: block;
        margin-bottom: 20px;
    }
    ul.info li {
        margin: 0 auto 10px;
    }
}
.share .cc {
    width: 2.625em;
    height: 2.625em;
    background-color: #182029;
    color: rgba(255, 255, 255, 0.6);
    border: 0 none;
}
.share .cc + .cc {
    margin-left: 1.25em;
}
.share .cc .flow {
    margin: 0;
}
.share .cc:hover {
    color: #fff;
    background-color: transparent;
}
.wechat {
    text-align: center;
}
.wechat li + li {
    margin-left: 1.5em;
}
.wechat li img {
    width: 6.875em;
    height: 6.875em;
    object-fit: contain;
    margin-bottom: 0.5em;
}
.wechat li p {
    font-size: 14px;
    opacity: 0.7;
}
a.scroll {
    width: fit-content;
}
a.scroll .char {
    font-size: 14px;
}
a.scroll .cc {
    width: 4.3em;
    height: 4.3em;
    text-align: center;
    margin-right: 1em;
}
a.scroll .mouse {
    width: 0.8em;
    height: 1.3em;
    border: 1px solid #fff;
    border-radius: 10px;
    margin: 0 auto 0.25em;
}
a.scroll .mouse:after {
    content: "";
    display: block;
    background-color: #fff;
    width: 1px;
    height: 5px;
    margin: 0.35em auto 0;
}
a.scroll .icon {
    font-size: 0.8em;
    line-height: 0.5;
    animation: mouse-scroll 2s linear infinite;
}
@keyframes mouse-scroll {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
    100% {
        transform: translateY(0);
    }
}
.html5video {
    background-color: #1a1351;
    position: relative;
    border-radius: 0.8em;
    overflow: hidden;
    text-align: center;
}
.html5video .img {
    padding-top: 79%;
    opacity: 0.5;
}
.html5video .cc {
    background-size: 400% 100%;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-attachment: scroll;
    background-color: #fff;
    background-image: -webkit-linear-gradient(left, #422dc8 0%, #18124d 33.33333%, #18124d 66.6666666%, #422dc8 100%);
    background-image: linear-gradient(90deg, #422dc8 0%, #18124d 33.33333%, #18124d 66.6666666%, #422dc8 100%);
    animation-name: flow;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition: all 0.2s ease;
}
@keyframes flow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -400% 0;
    }
}
.html5video .box {
    width: 4.5em;
    height: 4.5em;
    margin: 0 auto 0.8em;
    position: relative;
}
.html5video .fade {
    mask-image: repeating-radial-gradient(circle closest-side at 50% 50%, transparent 0%, transparent calc(100% - 2px), #000 calc(100% - 2px), #000 100%);
    -webkit-mask-image: repeating-radial-gradient(circle closest-side at 50% 50%, transparent 0%, transparent calc(100% - 2px), #000 calc(100% - 2px), #000 100%);
}
.html5video:hover .fade {
    visibility: visible;
    opacity: 1;
    pointer-events: unset;
    transform: scale(1.2);
}
#header,
#navbar {
    left: 0;
    right: 0;
    top: 0;
}
#header {
    position: absolute;
    z-index: 200;
    transition: all 0.4s ease;
    border-bottom: 1px solid transparent;
}
#header .navbar {
    height: 100%;
}
#header .navbar .fade {
    position: absolute;
    left: 50%;
    top: 100%;
    padding: 1em;
    min-width: 7em;
    white-space: nowrap;
    transform: translateX(-50%);
    margin-top: 8px;
    border-radius: 0.5em;
    text-align: center;
    line-height: 2;
    font-size: 0.925em;
}
#header .navbar .fade:empty {
    display: none;
}
#header .navbar .fade a {
    opacity: 0.8;
}
#header .navbar .fade a:hover {
    text-decoration: underline;
    opacity: 1;
}
#header .navbar li,
#header .navbar li > a {
    position: relative;
}
#header .navbar li > a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -1px;
    transition: all 0.4s ease;
    background-color: #412dc6;
    border-radius: 4px;
    height: 3px;
    opacity: 0;
}
#header .navbar li + li {
    margin-left: 0.55rem;
}
#header .navbar li:last-child {
    margin: auto 0 auto 0.8rem;
    padding: 0 0.4rem;
}
#header .navbar li:last-child:after {
    z-index: 1;
    content: "";
    position: absolute;
    top: 50%;
    border-radius: 50px;
    height: 2.8125em;
    left: 0;
    right: 0;
    line-height: 2.8125em;
    transform: translateY(-50%);
    background-image: linear-gradient(90deg, #422dc8, #18124d);
    background-image: -webkit-linear-gradient(left, #422dc8, #18124d);
}
#header .navbar li:last-child > a {
    position: relative;
    z-index: 2;
}
#header .navbar li:hover .fade {
    visibility: visible;
    opacity: 1;
    pointer-events: unset;
    margin-top: 0;
}
#header .menu {
    width: 28px;
    padding: 2px 0;
    display: none;
}
#header .menu .line {
    height: 2px;
    margin: 6px 0;
    transition: all 0.4s ease;
    background-color: #fff;
}
#header .menu.on .line:nth-of-type(1) {
    transform: translateY(8px) rotateZ(45deg);
}
#header .menu.on .line:nth-of-type(2) {
    transform: rotateZ(45deg);
}
#header .menu.on .line:nth-of-type(3) {
    transform: translateY(-8px) rotateZ(-45deg);
}
#header.active,
#header:hover {
    border-color: rgba(255, 255, 255, 0.1);
}
#header.active .navbar li.on > a:after,
#header:hover .navbar li.on > a:after {
    opacity: 1;
}
@media (max-width: 1024px) {
    #header .navbar {
        display: none;
    }
    #header .menu {
        display: block;
    }
}
#navbar {
    position: absolute;
    z-index: 199;
    background-color: rgba(10, 26, 33, 0.8);
    display: none;
}
#navbar .swiper dd .cc {
    position: relative;
    margin-right: 0.8em;
    overflow: hidden;
}
#navbar .swiper dd .cc img {
    width: 1.7em;
    height: 1.7em;
    min-width: 24px;
    min-height: 24px;
    object-fit: contain;
    transition: all 0.4s ease;
}
#navbar .swiper dd .cc .d {
    z-index: 1;
    filter: grayscale(10000%) brightness(1000%) opacity(0.5);
    -webkit-filter: grayscale(10000%) brightness(1000%) opacity(0.5);
}
#navbar .swiper dd .cc .a {
    z-index: 2;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
#navbar .swiper dd .char {
    font-size: 0.9em;
    font-weight: bold;
    color: transparent;
    background-color: #fff;
    background-image: linear-gradient(120deg, #9cb6f7 0%, #fff 50%, #fff 100%);
    background-image: -webkit-linear-gradient(left top, #9cb6f7 0%, #fff 50%, #fff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    opacity: 0.7;
    transition: all 0.4s ease;
    background-position: 100% center;
}
@media (max-width: 1440px) {
    #navbar .swiper dd .char {
        font-size: 16px;
    }
}
#navbar .swiper dd a:hover .cc .a {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#navbar .swiper dd a:hover .char {
    opacity: 1;
    background-position: 0 center;
}
@media (min-width: 1025px) {
    #navbar .swiper {
        padding: 1.1rem 0;
        display: block;
    }
    #navbar .swiper dt {
        display: none;
    }
    #navbar .swiper dd {
        margin: -0.4rem -1.1rem 0 0;
    }
    #navbar .swiper dd a {
        margin: 0.4rem 1.1rem 0 0;
    }
    #navbar .swiper dd .cc {
        width: 4em;
        height: 4em;
        background-color: #353b41;
    }
}
@media (max-width: 1024px) {
    #navbar .swiper {
        height: calc(100vh - 60px);
        overflow-y: auto;
    }
    #navbar .swiper .swiper-wrapper {
        display: block;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
    }
    #navbar .swiper .swiper-slide {
        display: block;
        opacity: 1!important;
        transform: none!important;
        pointer-events: unset;
        overflow: hidden;
    }
    #navbar .swiper .swiper-slide.active dt .icon {
        transform: rotateZ(-180deg);
    }
    #navbar .swiper dd {
        display: none;
        padding: 1em;
    }
    #navbar .swiper dd a + a {
        margin-top: 12px;
    }
    #navbar .swiper dd .cc {
        width: 24px;
        height: 24px;
    }
    #navbar .swiper dt {
        height: 50px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 18px;
    }
    #navbar .swiper .list .icon {
        transition: all 0.4s ease;
    }
    #navbar .swiper .list.on dt a {
        color: #412dc6;
    }
}
#banner .swiper .main {
    height: 100%;
}
#banner .swiper .left .title {
    font-size: 0.65rem;
    padding-bottom: 10px;
    margin-bottom: 0.1rem;
}
@media (max-width: 708px) {
    #banner .swiper .left .title {
        font-size: 24px;
    }
}
#banner .swiper .left .enb {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#banner .swiper .left .button {
    margin-top: calc(0.7rem + 20px);
}
#banner .swiper .right {
    position: relative;
    text-align: center;
}
#banner .swiper .right .bg {
    z-index: 1;
    pointer-events: none;
    width: 131.57894737%;
    /*opacity: 0;*/
    transition: all 0.4s ease;
}
#banner .swiper .right .bg:after {
    padding-top: 111.2%;
}
#banner .swiper .right .bg .fill {
    background-image: url("../images/banner.png")/*tpa=assets/index/images/banner.png*/;
    animation: xuanzhuan 30s linear infinite;
}
#banner .swiper .right .bg .fill:nth-of-type(2) {
    animation-delay: -5s;
    animation-duration: 40s;
}
@keyframes xuanzhuan {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
#banner .swiper .right .enb,
#banner .swiper .right .sub{
    position: relative;
    z-index: 2;
}
#banner .swiper .right .enb {
    height: 1rem;
    min-height: 64px;
    transform: scale(0.8);
    opacity: 0;
    transition: opacity 2s ease, transform 1.4s ease 0.6s;
    animation: bannerLogo 2s ease forwards;
}
@keyframes bannerLogo{
    0%{opacity: 0;transform: scale(0.8)}
    30%{opacity: 0.3;transform: scale(0.8)}
    100%{opacity: 1;transform: scale(1)}
}
#banner .swiper .right .sub {
    font-size: 0.9em;
    letter-spacing: 0.2em;
    padding-top: 10px;
    margin-top: 0.1rem;
}
@media (min-width: 801px) {
    #banner .swiper {
        height: 100vh;
        max-height: 56.25vw;
        min-height: 400px;
    }
    #banner .swiper .left,
    #banner .swiper .right {
        width: 50%;
    }
    #banner .swiper .right {
        order: 2;
    }
    #banner .swiper .left {
        order: 1;
    }
}
@media (max-width: 800px) {
    #banner .swiper {
        text-align: center;
    }
    #banner .swiper .main {
        display: block;
        position: relative;
        padding: 80px 0;
    }
    #banner .swiper .right {
        padding: calc(10% + 20px) 0;
    }
    #banner .swiper .left .button {
        margin-left: auto;
        margin-right: auto;
    }
}
#about .about .circuit {
    bottom: -2.7rem;
    mask-image: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.1) 90%, transparent 100%);
    -webkit-mask-image: -webkit-linear-gradient(top, transparent 0%, transparent 65%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.1) 90%, transparent 100%);
}
@media (max-width: 1024px) {
    #about .about .circuit {
        bottom: 50%;
    }
}
#about .about .left {
    position: relative;
}
#about .about .left .more {
    opacity: 0.7;
    width: fit-content;
}
#about .about .left .more .cc {
    width: 3.2em;
    height: 3.2em;
    margin-right: 1em;
}
#about .about .left .more .cc .icon {
    font-size: 12px;
}
#about .about .left .more .en {
    font-size: 0.9em;
}
#about .about .left .more:hover {
    opacity: 1;
}
#about .about .right .img {
    position: relative;
}
#about .about .right .masking {
    left: 0;
    width: 500px;
    height: 500px;
    background-color: #3f18bf;
    bottom: 10%;
    opacity: 0.5;
}
#about .about .right .datum {
    width: 100%;
    margin-top: -2.8em;
}
#about .about .right svg circle {
    fill: #fff;
    animation: shanshuo 2s linear infinite;
    filter: blur(1px);
}
#about .about .right svg circle:nth-of-type(3),
#about .about .right svg circle:nth-of-type(9) {
    animation-delay: 1s;
}
#about .about .right svg circle:nth-of-type(2),
#about .about .right svg circle:nth-of-type(7) {
    animation-delay: 0.5s;
}
#about .about .right svg circle:nth-of-type(4) {
    animation-delay: 1.5s;
}
#about .about .right svg circle:nth-of-type(5) {
    animation-delay: 0.2s;
}
#about .about .right svg circle:nth-of-type(6) {
    animation-delay: 1.25s;
}
#about .about .right svg circle:nth-of-type(8) {
    animation-delay: 1.75s;
}
@keyframes shanshuo {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#about .about .bg1 {
    pointer-events: none;
    position: absolute;
}
#about .about .bg1 {
    left: 0;
    top: 10%;
    max-width: 509px;
    width: 100%;
    transform: translate(-39.21568627%, 20%);
    background-image: url("../images/b1.png")/*tpa=assets/index/images/b1.png*/;
}
#about .about .bg1:after {
    padding-top: 101.17878193%;
}
@media (min-width: 1025px) {
    #about .about .left {
        width: 41.44736842%;
    }
    #about .about .left .more {
        margin-top: calc(10px + 1rem);
    }
    #about .about .right {
        width: 52.63157895%;
    }
}
@media (max-width: 1024px) {
    #about .about .main,
    #about .about .right,
    #about .about .right:before {
        display: block;
    }
    #about .about .bg1 {
        width: 60%;
    }
    #about .about .left .more {
        margin-top: 36px;
    }
    #about .about .right {
        margin-top: 30px;
    }
    #about .about .right .img {
        max-width: 640px;
        margin: 0 auto;
    }
}
#about .feature {
    margin-top: calc(40px + 1rem);
}
#about .feature .scroll {
    margin-top: 0.9rem;
}
#about .feature .thumb .title {
    font-size: 1.2em;
    line-height: 1.35;
    height: 2.7em;
}
#about .feature .thumb .dot span {
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    margin-right: 6px;
}
#about .feature .thumb .dot span:nth-of-type(2) {
    opacity: 0.5;
}
#about .feature .thumb .dot span:nth-of-type(3) {
    opacity: 0.5;
}
#about .feature .thumb .img {
    border-radius: 0.9em;
    z-index: 1;
}
#about .feature .thumb .content {
    z-index: 2;
    transform: translateY(100%);
    margin: 0.28rem;
    padding: 0.28rem;
    background-image: linear-gradient(180deg, #5b7dd8, transparent);
    background-image: -webkit-linear-gradient(top, #5b7dd8, transparent);
    border-radius: 0.9em;
}
#about .feature .thumb .swiper-slide {
    border-radius: 0.9em;
    background-image: url("../images/feature.jpg")/*tpa=assets/index/images/feature.jpg*/;
    padding: 0.28rem;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
}
#about .feature .thumb .swiper-slide > .title {
    margin-bottom: 0.5rem;
    padding-bottom: 20px;
}
#about .feature .thumb .swiper-slide.on .content {
    transform: translateY(0);
}
#about .feature .gallery {
    height: 100%;
    overflow: visible;
}
#about .feature .gallery .swiper-slide:before {
    content: "";
    position: absolute;
    left: 1.3em;
    right: 1.3em;
    bottom: -0.4em;
    height: 3em;
    background-color: rgba(27, 37, 48, 0.8);
    border-radius: 0.9em;
    z-index: 1;
    pointer-events: none;
}
#about .feature .gallery .box1 {
    padding: 0.5rem;
    border-radius: 0.9em;
    background-color: rgba(27, 37, 48, 0.8);
    margin-bottom: 1.2em;
}
#about .feature .gallery .box1 .dot {
    width: 10px;
    height: 10px;
    background-color: #412dc6;
    border-radius: 50%;
}
#about .feature .gallery .box1 .title {
    padding: 10px 0;
    margin: 0.2rem 0 0.1rem;
    min-height: 9em;
}
#about .feature .gallery .box1 .cc {
    position: absolute;
    top: -2em;
    right: 0.25rem;
    width: 4em;
    height: 4em;
    background-color: #412dc6;
}
#about .feature .gallery .box1 .cc img {
    width: 2em;
    height: 2em;
    object-fit: contain;
}
#about .feature .gallery .box1 .line {
    height: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
#about .feature .gallery .box1 .line:after {
    height: 100%;
    width: 30%;
    background-color: #412dc6;
    border-radius: 3px;
}
#about .feature .gallery .box2 {
    height: 1rem;
    min-height: 3.75em;
    border-radius: 0.9em;
    padding: 0 0.5rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.1);
}
#about .feature .gallery .box2 .cc {
    width: 2.4em;
    height: 2.4em;
    background-color: #4d78ea;
    margin-right: 1em;
}
#about .feature .gallery .box2 .cc img {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
}
#about .feature .gallery .box2 .char {
    font-weight: bold;
    font-size: 1.2em;
}
@media (min-width: 1025px) {
    #about .feature .left {
        max-width: 415px;
        margin-right: 1rem;
    }
    #about .feature .gallery {
        width: 22.5em;
        margin: 0 0 0 auto;
    }
    #about .feature .thumb {
        right: 1.5rem;
        left: auto;
        width: 14em;
    }
    #about .feature .thumb .swiper-wrapper {
        display: block;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
    }
    #about .feature .thumb .swiper-wrapper::-webkit-scrollbar,
    #about .feature .thumb .swiper-wrapper::-webkit-scrollbar-thumb {
        width: 6px;
        border-radius: 6px;
    }
    #about .feature .thumb .swiper-wrapper::-webkit-scrollbar {
        background-color: rgba(255, 255, 255, 0.2);
    }
    #about .feature .thumb .swiper-wrapper::-webkit-scrollbar-thumb {
        background-color: #412dc6;
    }
    #about .feature .thumb .swiper-slide {
        height: auto;
    }
    #about .feature .thumb .swiper-slide + .swiper-slide {
        margin-top: 0.3rem;
    }
    #about .feature .content {
        margin-right: 15.5em;
        padding-top: 1.9rem;
    }
    #about .feature .content .swiper-pagination {
        display: none;
    }
}
@media (max-width: 1024px) {
    #about .feature .content {
        display: block;
    }
    #about .feature .content .left {
        margin-bottom: 48px;
    }
    #about .feature .thumb {
        display: none;
    }
}
@media (max-width: 768px) {
    #about .feature .gallery .box1 {
        padding: 20px;
    }
    #about .feature .gallery .box1 .cc {
        right: 10px;
    }
    #about .feature .gallery .box2 {
        padding: 0 20px;
    }
}
#product {
    background-color: #0f0d16;
}
#product .masking{
    width: 500px;
    height: 500px;
    right: 25%;
    left: auto;
    top: 50%;
    transform: translate(50%,-50%);
    opacity: 0.7;
}
@media (max-width: 1024px){
    #product .masking{
        right: 50%;
        top: 50vw;
    }
}
#product .container .head {
    cursor: pointer;
}
#product .container .head .cc {
    border: 2px solid #fff;
    width: 4em;
    height: 4em;
    margin-right: 0.6em;
    transition: all 0.4s ease-out;
}
#product .container .head .cc img {
    width: 2em;
    height: 2em;
    object-fit: contain;
}
#product .container .head .char {
    font-weight: bold;
    font-size: 0.9em;
}
#product .container h1 {
    font-size: 1.3em;
    padding-bottom: 10px;
    margin-bottom: 0.3rem;
}
#product .container .text {
    opacity: 1;
}
#product .container .text ul {
    padding-left: 17px;
    margin: 0;
}
#product .container .more {
    font-size: 0.9em;
    margin-left: 17px;
    margin-top: calc(10px + 0.2rem);
}
#product .container .more:hover {
    text-decoration: underline;
}
#product .container .list .content {
    padding: 20px 0;
    margin: 0.2rem 0;
}
#product .container .list .item + .item {
    margin-top: 20px;
}
#product .container .list .item.on .head .cc {
    border-color: transparent;
    background-color: #412dc6;
}
#product .container .swiper {
    mix-blend-mode: screen;
}
#product .container .swiper .img:after {
    padding-top: 87%;
}
@media (min-width: 1025px) {
    #product .container .swiper-pagination,
    #product .container .content {
        display: none;
    }
    #product .container .list {
        width: 50%;
        box-sizing: border-box;
        padding-right: 0.9rem;
    }
    #product .container .swiper {
        width: 50%;
    }
}
@media (max-width: 1024px) {
    #product .container {
        display: block;
    }
    #product .container .list {
        display: none;
    }
    #product .container .swiper .head {
        margin-bottom: 20px;
    }
    #product .container .swiper .head .cc {
        border-color: transparent;
        background-color: #412dc6;
    }
    #product .container .swiper .head .char {
        font-size: 16px;
    }
    #product .container .swiper .more {
        font-size: 16px;
    }
    #product .container .swiper .img {
        max-width: 640px;
        margin: 0 auto 24px;
    }
}
#news .masking {
    top: 50%;
    transform: translate(-60%, -50%);
    opacity: 0.75;
}
#news .main {
    z-index: 2;
}
#news .swiper {
    margin-right: -0.3rem;
    overflow: visible;
}
#news .swiper a {
    margin-right: 0.3rem;
}
#news .swiper a .default,
#news .swiper a .fade {
    border-radius: 0.9em;
}
#news .swiper a .default {
    background-color: #182029;
    padding: 0.4rem 1.4em;
    box-sizing: border-box;
    min-height: 75%;
    top: 50%;
    bottom: auto;
    z-index: 1;
    transform: translateY(-50%);
}
#news .swiper a .default .title {
    margin-bottom: calc(10px + 0.5rem);
}
#news .swiper a .default .en {
    margin: auto 0 0 0;
}
#news .swiper a .from {
    font-size: 14px;
    color: #412dc6;
    padding-bottom: 10px;
    margin-bottom: 0.2rem;
}
#news .swiper a .img {
    overflow: hidden;
    border-radius: 0.6em;
}
#news .swiper a .img .add {
    padding-top: 60%;
}
#news .swiper a .en {
    font-size: 14px;
    opacity: 0.5;
}
#news .swiper a .title {
    height: 3em;
}
#news .swiper a .cc {
    width: 1.8em;
    height: 1.8em;
    background-color: #fff;
}
#news .swiper a .cc .icon {
    font-size: 12px;
    color: #412dc6;
}
#news .swiper a .fade {
    position: relative;
    padding: 1.4em;
    transform: scale(0.8);
    z-index: 2;
}
#news .swiper a .fade .title {
    padding-top: 10px;
    margin-top: 0.1rem;
}
#news .swiper a .fade .info {
    padding-top: 10px;
    margin-top: 0.1rem;
}
#news .swiper a .fade .flow {
    top: 100%;
    height: 2.7em;
    margin-top: -0.9em;
    bottom: auto;
    border-radius: 0 20% 0 0;
    clip-path: polygon(0.9em 0, 100% 0, 100% 0.4em, calc(100% - 2.4em) 100%, calc(100% - 2.4em) calc(100% - 1.8em), 0.9em calc(100% - 1.8em));
}
#news .swiper a:hover .fade {
    transform: scale(1);
}
#news .swiper-change {
    margin-top: 0.3rem;
    padding-top: 30px;
}
#news .swiper-change .line {
    margin: 0 1.5em;
    height: 2px;
    border-radius: 2px;
    flex: 1;
}
#news .swiper-change .cc {
    width: 3em;
    height: 3em;
}
#news .swiper-change .cc:hover {
    border-color: transparent;
}
@media (max-width: 960px) {
    #news .swiper a .default {
        padding: 20px 1.4em;
    }
    #news .swiper a .fade {
        padding: 2em 1.4em;
    }
}
@media (max-width: 550px) {
    #news .swiper .swiper-slide-active .fade {
        visibility: visible;
        opacity: 1;
        pointer-events: unset;
        transform: scale(1);
    }
}
#partner .masking {
    top: 30%;
}
#partner .main {
    z-index: 2;
}
#partner .list {
    margin: -1em -1em 0 0;
}
#partner .list a {
    margin: 1em 1em 0 0;
    padding: 1em;
    background-color: #fff;
    border-radius: 0.9em;
}
#partner .list a:hover {
    background-color: transparent;
}
#partner .list a:hover img {
    filter: grayscale(1000%) contrast(0) brightness(1000%);
    -webkit-filter: grayscale(1000%) contrast(0) brightness(1000%);
}
#partner .list .fade {
    z-index: 1;
    border-radius: 0.9em;
}
#partner .list .content {
    z-index: 2;
}
#partner .list .swiper-wrapper {
    flex-direction: unset;
}
#partner .list .content {
    padding-top: 30%;
}
#partner .list img {
    transition: all 0.4s ease;
    max-height: 100%;
}
#partner .caption {
    position: relative;
    padding-right: 15em;
    margin-bottom: 0.6rem;
    padding-bottom: 20px;
}
#partner .caption .img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-150%);
    width: 14.7em;
    background-image: url("../images/b5.png")/*tpa=assets/index/images/b5.png*/;
    mix-blend-mode: screen;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.54, 0.22, 1, 0.45);
}
#partner .caption .img:after {
    padding-top: 108.84353741%;
}
#partner .caption.ready .img {
    opacity: 1;
    transform: translateY(-50%);
}
#partner .marquee {
    padding-top: 20px;
    margin-top: 0.3rem;
    overflow: visible;
}
#partner .marquee .swiper-slide {
    width: 33.333333%;
}
#partner .marquee .img {
    padding-top: 19.37%;
    background-image: url("../images/marquee.png")/*tpa=assets/index/images/marquee.png*/;
}
#linkus .img {
    background-position: right center;
}
#linkus .caption h1 {
    padding-top: 0;
    margin-top: 0;
    font-size: 2.5em;
}
#linkus .circuit {
    background-position: right center;
}
#linkus .circuit canvas {
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 7rem), transparent calc(100% - 4rem), transparent 100%);
    -webkit-mask-image: -webkit-linear-gradient(left, #000 0%, #000 calc(100% - 7rem), transparent calc(100% - 4rem), transparent 100%);
}
#footer {
    padding: 46px 0 16px;
}
#footer .circuit{
    padding: 46px 0 0;
    margin: 0.3rem 0 0;
}
#footer .logo {
    margin-top: 0.3rem;
}
#footer .container {
    padding: 30px 0;
    margin: 0.5rem 0;
}
#footer .container .nav {
    text-align: center;
    line-height: 1;
    padding-bottom: 20px;
    margin-bottom: 0.3rem;
}
#footer .container .nav li {
    padding: 0 0.4rem;
    position: relative;
}
#footer .container .nav li:after {
    content: "";
    position: absolute;
    top: 0.5625em;
    height: 0.5em;
    width: 1px;
    background-color: #fff;
    opacity: 0.5;
    right: -0.5px;
    margin-top: -0.25em;
}
#footer .container .nav li:first-child {
    padding-left: 0;
}
#footer .container .nav li:last-child {
    padding-right: 0;
}
#footer .container .nav li:last-child:after {
    display: none;
}
#footer .container .nav .top {
    font-size: 1.125em;
    margin-bottom: 0.3rem;
}
#footer .container .nav .sub {
    opacity: 0.7;
    margin-top: 0.2rem;
}
#footer .container .nav a:hover {
    opacity: 1;
    text-decoration: underline;
}
#footer .container .blogroll .static {
    height: 3.125em;
    padding: 0 0.75em 0 1em;
    border: 0 none;
}
#footer .container .blogroll .static .char {
    font-size: 14px;
}
#footer .container .blogroll .static .cc {
    width: 1.625em;
    height: 1.625em;
}
#footer .container .blogroll .static .cc .icon {
    font-size: 12px;
}
#footer .container .blogroll .fade {
    position: absolute;
    right: 0;
    bottom: 100%;
    border-radius: 0.9em;
    padding: 1.5em;
    overflow-y: auto;
    max-height: 13.5em;
    transform: translateY(3.125em);
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.15);
}
#footer .container .blogroll .fade:empty {
    display: none;
}
#footer .container .blogroll .fade a {
    opacity: 0.7;
    padding: 0.375em 0;
}
#footer .container .blogroll .fade a:hover {
    opacity: 1;
    text-decoration: underline;
}
#footer .container .blogroll:hover .fade {
    transform: translateY(0);
}
#footer .container .blogroll:hover .static .cc {
    transform: rotateZ(-90deg);
}
#footer .container .wechat {
    padding: 20px 0;
    margin: 0.3rem 0;
}
@media (min-width: 1025px) {
    #footer .container .share,
    #footer .container .wechat,
    #footer .container .blogroll {
        margin-right: 0;
        margin-left: auto;
    }
    #footer .container .blogroll .static {
        width: 11.25em;
    }
    #footer .container .blogroll .fade {
        max-width: 360px;
        min-width: 200px;
    }
}
@media (max-width: 1024px) {
    #footer .container {
        display: block;
    }
    #footer .container .nav {
        display: none;
    }
    #footer .container .blogroll {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }
    #footer .container .blogroll .static {
        width: auto;
    }
    #footer .container .blogroll .fade {
        left: 0;
    }
}
#footer .copyright {
    margin-bottom: 0.2rem;
    font-size: 12px;
}
#footer .copyright a {
    opacity: 0.5;
    margin-right: 1.3rem;
}
#footer .copyright a:last-child {
    margin: 0 0 0 auto;
}
#footer .copyright a:hover {
    opacity: 1;
}
@media (max-width: 1024px) {
    #footer .copyright {
        display: block;
        text-align: center;
    }
    #footer .copyright a {
        margin: 2px 0;
    }
}
#toTop {
    position: fixed;
    right: 0;
    bottom: 1.5rem;
    z-index: 198;
    cursor: pointer;
    transform: translateX(100%);
    color: #fff;
    transition: all 0.4s ease;
}
#toTop .cc {
    width: 2.2em;
    height: 2.2em;
    border: 1px solid #fff;
    transform: rotateZ(-90deg);
    margin-right: 0.5em;
}
#toTop .char {
    font-size: 0.8em;
}
#toTop.on {
    transform: none;
    right: 0.3rem;
}
#toTop:hover{
    color: #5b7dd8;
}
#toTop:hover .cc{
    border-color: #5b7dd8;
}
#column {
    overflow: hidden;
}
#column .main {
    box-sizing: border-box;
    height: 7.5rem;
    min-height: 360px;
    z-index: 2;
}
#column .content {
    max-width: 760px;
}
#column .content h6 {
    font-size: 1.2em;
    padding-bottom: 6px;
    margin: 0;
}
#column .content h1 {
    font-size: 0.65rem;
    line-height: 1.35;
    padding-bottom: 10px;
    margin-bottom: 0.2rem;
}
@media (max-width: 708px) {
    #column .content h1 {
        font-size: 24px;
    }
}
#column .content .en {
    font-size: 14px;
    text-transform: uppercase;
}
#column .content .ul {
    max-width: 560px;
}
#column .content .ul a {
    margin: 0.8em 0.9em 0 0;
}
@media (max-width: 1024px) {
    #column .content .ul .tf {
        font-size: 13px;
    }
}
@media (max-width: 800px) {
    #column .content .ul .tf {
        font-size: 12px;
    }
}
@media (min-width: 1025px) {
    #column .content .ul a {
        border-color: #507ef1;
        line-height: 2em;
        padding: 0 1.2em;
    }
    #column .content .ul .tf {
        position: relative;
        z-index: 2;
    }
}
@media (max-width: 1024px) {
    #column .content .ul {
        text-decoration: underline;
    }
    #column .content .ul a {
        border: 0 none;
        opacity: 0.7;
    }
    #column .content .ul a:hover {
        opacity: 1;
    }
    #column .content .ul .flow {
        display: none;
    }
}
#column .bg {
    animation: animate1 40s linear infinite;
}
@keyframes animate1 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
#company .company .left {
    position: relative;
}
#company .company .bg {
    position: absolute;
    left: -3.4rem;
    width: 39em;
    background-image: url("../images/map.png")/*tpa=assets/index/images/map.png*/;
    pointer-events: none;
    top: 280px;
}
#company .company .bg:after {
    padding-top: 100%;
}
#company .company .right img {
    border-radius: 1em;
}
#company .company .datum {
    padding-top: 10px;
    margin-top: 1rem;
}
@media (min-width: 1025px) {
    #company .company .left,
    #company .company .right {
        width: 50%;
    }
    #company .company .left {
        box-sizing: border-box;
        padding-right: 0.6rem;
    }
}
@media (max-width: 1024px) {
    #company .company {
        display: block;
    }
    #company .company .right {
        margin: 24px auto 0;
        max-width: 640px;
    }
}

#company .course .caption {
    position: absolute;
    left: 20px;
    top: 0;
    z-index: 2;
}

#company .course .container {
    z-index: 1;
}
#company .course .bg {
    width: 100vw;
    pointer-events: none;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 0 30px), repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0 1px, transparent 0 30px);
    background-image: -webkit-repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 0 30px), -webkit-repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0 1px, transparent 0 30px);
    mask-image: repeating-radial-gradient(ellipse closest-side at 50% 50%, #000 0%, transparent 100%, transparent 200%);
    -webkit-mask-image: repeating-radial-gradient(ellipse closest-side at 50% 50%, #000 0%, transparent 100%, transparent 200%);
}
#company .course .bg .masking {
    width: 600px;
    height: 600px;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: blur(240px);
    -webkit-filter: blur(240px);
    opacity: 0.75;
}
#company .course .container {
    padding-top: 1px;
    overflow: hidden;
}
#company .course .container .trend {
    margin-top: 60px;
    pointer-events: none;
    z-index: 1;
    mask-image: linear-gradient(90deg, transparent 0%, #000 70px, #000 calc(100% - 70px), transparent 100%);
    -webkit-mask-image: -webkit-linear-gradient(left, transparent 0%, #000 70px, #000 calc(100% - 70px), transparent 100%);
}
#company .course .container svg {
    width: 1520px;
    max-width: unset;
}
#company .course .container svg .curve {
    filter: drop-shadow(16px 27px 2px rgba(0, 0, 0, 0.3));
}
#company .course .container svg .pillar image {
    animation: pillar 4s ease infinite;
}
#company .course .container svg .pillar image:nth-of-type(2),
#company .course .container svg .pillar image:nth-of-type(8),
#company .course .container svg .pillar image:nth-of-type(12),
#company .course .container svg .pillar image:nth-of-type(18),
#company .course .container svg .pillar image:nth-of-type(24) {
    animation-delay: 1s;
}
#company .course .container svg .pillar image:nth-of-type(5),
#company .course .container svg .pillar image:nth-of-type(11),
#company .course .container svg .pillar image:nth-of-type(15),
#company .course .container svg .pillar image:nth-of-type(21) {
    animation-delay: 2s;
}
#company .course .container svg .pillar image:nth-of-type(3),
#company .course .container svg .pillar image:nth-of-type(9),
#company .course .container svg .pillar image:nth-of-type(13),
#company .course .container svg .pillar image:nth-of-type(19),
#company .course .container svg .pillar image:nth-of-type(23) {
    animation-delay: 3s;
}
#company .course .container svg .pillar image:nth-of-type(4),
#company .course .container svg .pillar image:nth-of-type(10),
#company .course .container svg .pillar image:nth-of-type(14),
#company .course .container svg .pillar image:nth-of-type(20),
#company .course .container svg .pillar image:nth-of-type(22) {
    animation-delay: 3s;
}
@keyframes pillar {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
    100% {
        transform: translateY(0);
    }
}
#company .course .container svg .line {
    fill: none;
    stroke-width: 6px;
    fill-rule: evenodd;
    stroke: url(#linear-gradient1);
    stroke-dasharray: 0,1800;
    transition: all 1s ease;
}
#company .course .container svg .dot {
    opacity: 0;
    transition: all 0.4s ease;
}
#company .course .container svg .dot:nth-of-type(1) {
    transition-delay: 0.1s;
}
#company .course .container svg .dot:nth-of-type(2) {
    transition-delay: 0.2s;
}
#company .course .container svg .dot:nth-of-type(3) {
    transition-delay: 0.3s;
}
#company .course .container svg .dot:nth-of-type(4) {
    transition-delay: 0.4s;
}
#company .course .container svg .dot:nth-of-type(5) {
    transition-delay: 0.5s;
}
#company .course .container svg .dot:nth-of-type(6) {
    transition-delay: 0.6s;
}
#company .course .container svg .cls-2 {
    fill: url(#linear-gradient2);
}
#company .course .container svg .cls-3 {
    fill: url(#linear-gradient3);
}
#company .course .container svg .cls-4 {
    fill: url(#linear-gradient4);
}
#company .course .container svg .cls-5 {
    fill: url(#linear-gradient5);
}
#company .course .container svg .cls-6 {
    fill: url(#linear-gradient6);
}
#company .course .container svg .cls-7 {
    fill: url(#linear-gradient7);
}
#company .course .container .box {
    position: relative;
    z-index: 2;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: -webkit-linear-gradient(left, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
#company .course .container .list {
    width: 1520px;
    height: 592px;
    padding: 0 40px;
}
#company .course .container .list .enb {
    font-size: 1.5em;
}
#company .course .container .list > li {
    width: 14.28571429%;
    opacity: 0;
    transition: all 0.4s ease;
}
#company .course .container .list > li:nth-of-type(1) {
    transition-delay: 0.1s;
}
#company .course .container .list > li:nth-of-type(1) .swiper {
    margin: auto 5px 0;
}
#company .course .container .list > li:nth-of-type(2) {
    transition-delay: 0.2s;
}
#company .course .container .list > li:nth-of-type(2) .swiper {
    margin: auto 5px 256px;
}
#company .course .container .list > li:nth-of-type(3) {
    transition-delay: 0.3s;
}
#company .course .container .list > li:nth-of-type(3) .swiper {
    margin: 370px 5px auto;
}
#company .course .container .list > li:nth-of-type(4) {
    transition-delay: 0.4s;
}
#company .course .container .list > li:nth-of-type(4) .swiper {
    margin: auto 5px 250px;
}
#company .course .container .list > li:nth-of-type(5) {
    transition-delay: 0.5s;
}
#company .course .container .list > li:nth-of-type(5) .swiper {
    margin: 340px 5px auto;
}
#company .course .container .list > li:nth-of-type(6) {
    transition-delay: 0.6s;
}
#company .course .container .list > li:nth-of-type(6) .swiper {
    margin: 50px 5px auto;
}
#company .course .container .list > li:nth-of-type(7) {
    transition-delay: 0.7s;
}
#company .course .container .list > li:nth-of-type(7) .swiper {
    margin: 180px 5px auto;
}
#company .course .swiper-change {
    position: absolute;
    right: 20px;
    bottom: 0;
    z-index: 3;
}
#company .course .swiper-change .cc {
    width: 3em;
    height: 3em;
    opacity: 0.3;
    border-width: 2px;
}
#company .course .swiper-change .cc .flow {
    margin: -2px;
}
#company .course .swiper-change .cc:hover {
    opacity: 1;
}
#company .course .swiper-change .next {
    margin-left: 0.6rem;
}
#company .course.ready .container svg .line {
    stroke-dasharray: 1800;
}
#company .course.ready .container svg .dot {
    opacity: 1;
}
#company .course.ready .container .list > li {
    opacity: 1;
}
#company .course.disable .swiper-change .prev{
    pointer-events: none;
}
@media (max-width: 800px) {
    #company .course .container .trend,
    #company .course .container .box {
        margin-top: -100px;
    }
    #company .course .container .list {
        height: 500px;
    }
}
@media (min-width: 1025px){
    #company .course .caption {
        left: 1.5rem;
    }
    #company .course .swiper-change{
        right: 1.5rem;
    }
}
#company .culture .ul li {
    padding: 0 1.5em;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: bold;
    border-radius: 8px;
}
#company .culture .ul li + li {
    margin-top: 20px;
}
#company .culture .ul li .content {
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 6.6em;
}
@media (max-width: 800px) {
    #company .culture .ul li .content {
        display: block;
        padding: 1.5em 0;
        height: auto;
    }
}
#company .culture .ul li .flow {
    z-index: 1;
    pointer-events: none;
    border-radius: 8px;
    margin: -1px;
}
#company .culture .ul li .flow .bg {
    border-radius: 8px;
    height: 100%;
    border: 2px solid transparent;
    background-image: url("../images/culture.jpg")/*tpa=assets/index/images/culture.jpg*/;
    box-sizing: border-box;
    background-clip: content-box;
}
#company .culture .ul li .head {
    width: 3.6rem;
    flex-shrink: 0;
    min-width: 120px;
}
#company .culture .ul li .head .cc {
    width: 3em;
    height: 3em;
    background-color: #412dc6;
    border: 0 none;
    margin-right: 0.8em;
    flex-shrink: 0;
}
#company .culture .ul li .head img {
    width: 1.7em;
    height: 1.7em;
}
@media (max-width: 1024px) {
    #company .culture .ul li .head {
        font-size: 14px;
    }
}
#company .culture .ul li .headline {
    font-size: 1.5em;
    line-height: 1.35em;
}
@media (max-width: 800px) {
    #company .culture .ul li .headline {
        margin-top: 1em;
        font-size: 1.3em;
    }
}
#company .culture .ul li:hover {
    border-color: transparent;
}
#company .honor .masking {
    right: 0;
    left: auto;
    top: -100px;
}
#company .honor .swiper {
    text-align: center;
    margin: -0.3rem -0.3rem 0 0;
}
#company .honor .swiper .swiper-wrapper {
    flex-direction: unset;
}
#company .honor .swiper a {
    margin: 0.3rem 0.3rem 0 0;
    background-color: #182029;
    border-radius: 0.9em;
}
#company .honor .swiper a .img {
    padding-top: 60%;
}
#company .honor .swiper a .headline {
    padding-top: 10px;
    margin-top: 0.1rem;
    font-size: 0.9em;
}
#company .honor .swiper .flow {
    border-radius: 0.9em;
    z-index: 1;
    background-image: linear-gradient(-90deg, #422dc8, #18124d);
    background-image: -webkit-linear-gradient(right, #422dc8, #18124d);
}
#company .honor .swiper .flow .bg {
    border-radius: 0.8em;
    background-clip: content-box;
    border: 2px solid transparent;
    box-sizing: border-box;
    height: 100%;
    background-image: url("../images/b2.jpg")/*tpa=assets/index/images/b2.jpg*/;
}
#company .honor .swiper .content {
    z-index: 2;
    padding: 0.32rem;
}
@media (max-width: 960px) {
    #company .honor .swiper {
        margin: -16px -16px 0 0;
    }
    #company .honor .swiper a {
        margin: 16px 16px 0 0;
    }
    #company .honor .swiper .content {
        padding: 16px;
    }
}
#aboutWave {
    z-index: 1;
    pointer-events: none;
    height: 100px;
    overflow: visible;
}
#aboutWave .circuit {
    background-color: #010b12;
    opacity: 0.7;
    top: auto;
    height: 100vh;
    bottom: -0.8rem;
    margin-bottom: -50px;
    mask-image: linear-gradient(180deg, transparent 0%, transparent 65%, #000000 70%, #000000 90%, transparent 100%);
    -webkit-mask-image: -webkit-linear-gradient(top, transparent 0%, transparent 65%, #000000 70%, #000000 90%, transparent 100%);
}
#newsList .ul {
    margin: -1.5em -1.5em 0 0;
}
#newsList .ul li {
    width: 25%;
}
#newsList .ul .flow {
    z-index: 1;
    border-radius: 1em;
}
#newsList .ul .content {
    z-index: 2;
}
#newsList .ul .content .img {
    border-radius: 0.5em;
    padding-top: 64%;
}
#newsList .ul .content .title {
    line-height: 1.4;
    height: 2.8em;
    margin: 1em 0;
}
#newsList .ul .content .en {
    font-size: 0.7em;
    opacity: 0.5;
}
#newsList .ul .content .cc {
    width: 1.8em;
    height: 1.8em;
    border: 0 none;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: all 0.4s ease;
}
#newsList .ul .content .cc .icon {
    font-size: 12px;
}
#newsList .ul a {
    margin: 1.5em 1.5em 0 0;
    padding: 1.4em;
    border-radius: 1em;
    background-color: #182029;
}
#newsList .ul a:hover .content .cc {
    background-color: #fff;
    color: #412dc6;
}
@media (max-width: 1024px) {
    #newsList .ul li {
        width: 33.333333%;
    }
}
@media (max-width: 800px) {
    #newsList .ul li {
        width: 50%;
    }
}
@media (max-width: 480px) {
    #newsList .ul li {
        width: 100%;
    }
}
#detail .title {
    font-size: 2em;
}
#detail .hr {
    padding: 30px 0;
    margin: 0.5rem 0;
}
#detail .hr:after {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}
#detail .info {
    margin-top: 0.3rem;
    padding-top: 10px;
}
#detail .info .en {
    font-size: 0.875em;
    margin-right: 0.7rem;
}
#detail .info .back {
    line-height: 2.625em;
    padding: 0 1.25em;
}
#detail .info .back .char {
    font-size: 0.875em;
    margin-right: 1.5em;
}
#detail .info .back .icon {
    font-size: 1.5em;
}
@media (max-width: 800px) {
    #detail .info .back {
        padding: 0;
        width: 2.625em;
    }
    #detail .info .back .char {
        display: none;
    }
    #detail .info .back .icon {
        margin: 0 auto;
        font-size: 18px;
    }
}
#detail .page a {
    width: 40%;
}
#detail .page a .cc {
    width: 2.4em;
    height: 2.4em;
    margin-right: 0.24rem;
    flex-shrink: 0;
}
#detail .page a .char {
    flex: 1;
    -webkit-line-clamp: 1;
    height: 1.5em;
}
@media (min-width: 801px) {
    #detail .page a:last-child .char {
        text-align: right;
    }
    #detail .page a:last-child .cc {
        order: 2;
        margin: 0 0 0 0.24rem;
    }
}
@media (max-width: 800px) {
    #detail .page {
        display: block;
    }
    #detail .page a {
        width: auto;
    }
    #detail .page a:last-child {
        margin-top: 20px;
    }
}
#map {
    height: 6rem;
    min-height: 300px;
    border-radius: 1.25em;
}
#map .amap-marker .dot {
    font-size: 5.20833333vw;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #412dc6;
    border-radius: 50%;
    height: 0.12em;
    width: 0.24em;
    margin: -0.12em 0 0 -0.06em;
}
@media (max-width: 1024px) {
    #map .amap-marker .dot {
        font-size: 52px;
    }
}
#map .amap-marker .box {
    width: 2.8em;
    height: 0.9em;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-left: -1.4em;
    margin-bottom: 0.12rem;
}
#map .amap-marker .box:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #2c1f87;
    margin-left: -12px;
}
#map .amap-marker .box > img {
    max-width: 70%!important;
    max-height: 70%!important;
    filter: grayscale(1000%) brightness(1000%);
    -webkit-filter: grayscale(1000%) brightness(1000%);
}
#linkus .line {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
#linkus .contact .masking {
    right: 100px;
    left: auto;
    bottom: 100px;
    z-index: 0;
}
#linkus .contact .content .share {
    margin-left: 0.7rem;
}
@media (max-width: 800px) {
    #linkus .contact .content,
    #linkus .contact .content .caption {
        display: block;
    }
    #linkus .contact .content .share {
        margin: 20px auto 0;
    }
}
#linkus .recruit .right {
    flex: 1;
}
#linkus .recruit .right .ul {
    line-height: 2.8em;
    margin: -0.35rem -0.6rem 0.3rem 0;
    padding-bottom: 20px;
}
#linkus .recruit .right .ul li {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.6rem 0 0;
}
#linkus .recruit .right .ul li.half {
    width: 50%;
}
#linkus .recruit .right .ul .prop {
    white-space: nowrap;
    font-weight: bold;
    opacity: 0.8;
    margin-right: 6px;
}
#linkus .recruit .right .ul .put {
    flex: 1;
    transition: all 0.4s ease;
    background-color: #182029;
    padding: 0 1.5em;
    border-radius: 1.4em;
    min-height: 2.8em;
    position: relative;
}
#linkus .recruit .right .ul .put:has(.input:focus) {
    background-color: rgba(255, 255, 255, 0.2);
}
#linkus .recruit .right .ul .put .icon {
    position: absolute;
    right: 24px;
    font-size: 14px;
    opacity: 0.5;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
#linkus .recruit .right .ul .put.textarea {
    height: 7em;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1.4;
}
#linkus .recruit .right .ul .input {
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    font-size: 14px;
}
#linkus .recruit .right button {
    cursor: pointer;
}
@media (min-width: 1025px) {
    #linkus .recruit .left {
        order: 1;
        width: 5.4rem;
        margin-right: 0.6rem;
    }
    #linkus .recruit .right {
        order: 2;
    }
}
@media (max-width: 1024px) {
    #linkus .recruit .container {
        display: block;
    }
    #linkus .recruit .left {
        max-width: 540px;
        margin: 36px auto 0;
    }
}
@media (max-width: 800px) {
    #linkus .recruit .right .ul li.half {
        width: 100%;
    }
}
#tech .list1 .item,
#tech .list1 .item .fade,
#tech .list1 .item .content {
    border-radius: 8px;
}
#tech .list1 .item .fade {
    z-index: 1;
}
#tech .list1 .item .content {
    z-index: 2;
    padding: 1.25em;
}
#tech .list1 .ul {
    position: relative;
    z-index: 2;
}
#tech .list1 .masking {
    top: 50%;
    margin-top: 120px;
    transform: translate(-50%, -50%);
    z-index: 0;
}
#tech .list1 .caption h1{
    margin: 0 auto;
    text-align: center;
}
@media (min-width: 1561px) {
    #tech .list1 .caption{
        margin-top: 60px;
        z-index: 3;
    }
    #tech .list1 .caption h1{
        font-size: 30px;
        width: 4em;
        line-height: 1.35;
    }
    #tech .list1 .ul {
        margin: 120px auto 0;
        width: 490px;
        height: 490px;
    }
    #tech .list1 .ul:before {
        content: "";
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(180deg, #402dc4, #1b1455);
        background-image: -webkit-linear-gradient(top, #402dc4, #1b1455);
        border-radius: 50%;
        mask-image: repeating-radial-gradient(circle closest-side at 50% 50%, transparent 0%, transparent calc(100% - 70px), #000 calc(100% - 70px), #000 100%);
        -webkit-mask-image: repeating-radial-gradient(circle closest-side at 50% 50%, transparent 0%, transparent calc(100% - 70px), #000 calc(100% - 70px), #000 100%);
    }
    #tech .list1 .item {
        background-color: #182029;
        width: 246px;
        box-sizing: border-box;
        z-index: 2;
    }
    #tech .list1 .item,
    #tech .list1 .item .point,
    #tech .list1 .item .line {
        position: absolute;
        top: 50%;
    }
    #tech .list1 .item,
    #tech .list1 .item .point {
        transform: translateY(-50%);
    }
    #tech .list1 .item .title {
        display: none;
    }
    #tech .list1 .item .point {
        width: 14px;
        height: 14px;
        background-color: #5080f2;
        border-radius: 50%;
    }
    #tech .list1 .item .line {
        border-top: 1px dashed #fff;
    }
    #tech .list1 li {
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 2;
        border-radius: 50%;
        width: 160px;
        height: 160px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 23px;
        background-color: #182029;
        backdrop-filter: blur(20px);
        box-sizing: border-box;
        background-clip: content-box;
        margin: -80px 0 0 -80px;
        transition: all 0.4s ease;
    }
    #tech .list1 li .char {
        font-size: 24px;
        line-height: 1.1;
        width: 2em;
        font-weight: bold;
    }
    #tech .list1 li:nth-of-type(1) {
        left: 50%;
        top: 35px;
    }
    #tech .list1 li:nth-of-type(1) .item {
        top: 20px;
        left: 435px;
        transform: translateY(-100%);
    }
    #tech .list1 li:nth-of-type(1) .line {
        width: 325px;
        height: 26px;
        border-left: 1px dashed #fff;
        right: 100%;
    }
    #tech .list1 li:nth-of-type(2),
    #tech .list1 li:nth-of-type(3) {
        top: 180px;
    }
    #tech .list1 li:nth-of-type(2) {
        left: 40px;
    }
    #tech .list1 li:nth-of-type(3) {
        left: 450px;
    }
    #tech .list1 li:nth-of-type(4),
    #tech .list1 li:nth-of-type(5) {
        top: 400px;
    }
    #tech .list1 li:nth-of-type(4) {
        left: 100px;
    }
    #tech .list1 li:nth-of-type(5) {
        left: 390px;
    }
    #tech .list1 li:nth-of-type(2) .item,
    #tech .list1 li:nth-of-type(4) .item {
        right: 345px;
    }
    #tech .list1 li:nth-of-type(2) .point,
    #tech .list1 li:nth-of-type(4) .point {
        left: 100%;
        margin-left: 18px;
    }
    #tech .list1 li:nth-of-type(2) .line,
    #tech .list1 li:nth-of-type(4) .line {
        left: 100%;
        width: 152px;
    }
    #tech .list1 li:nth-of-type(3) .item,
    #tech .list1 li:nth-of-type(5) .item {
        left: 345px;
    }
    #tech .list1 li:nth-of-type(3) .line,
    #tech .list1 li:nth-of-type(5) .line {
        right: 100%;
        width: 152px;
    }
    #tech .list1 li:nth-of-type(1) .point,
    #tech .list1 li:nth-of-type(3) .point,
    #tech .list1 li:nth-of-type(5) .point {
        right: 100%;
        margin-right: 18px;
    }
    #tech .list1 li:hover {
        background-color: #412dc6;
    }
}
@media (max-width: 1560px) {
    #tech .list1 .caption{
        position: static;
        transform: none;
    }
    #tech .list1 .ul {
        max-width: 750px;
        margin: 0 auto;
    }
    #tech .list1 li {
        padding: 1em;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.4s ease;
    }
    #tech .list1 li + li {
        margin-top: 1em;
    }
    #tech .list1 li .char {
        font-weight: bold;
        font-size: 1.2em;
        margin: 0 auto 0 0;
        position: relative;
        z-index: 2;
        width: 7.5em;
    }
    #tech .list1 li .item .flow {
        margin: -1px;
    }
    #tech .list1 li .item .flow .bg {
        box-sizing: border-box;
        border-radius: 8px;
        height: 100%;
        border: 2px solid transparent;
        background-clip: content-box;
        background-image: url("../images/culture.jpg")/*tpa=assets/index/images/culture.jpg*/;
    }
    #tech .list1 li:hover {
        border-color: transparent;
    }
}
#tech .list2 li {
    background-color: #182029;
    border-radius: 10px;
    padding: calc(14px + 0.5rem);
}
#tech .list2 li h1 {
    font-size: 2em;
    padding-bottom: 20px;
    margin-bottom: 0.2rem;
}
#tech .list2 li + li {
    margin-top: calc(10px + 0.3rem);
}
@media (min-width: 801px) {
    #tech .list2 li .right {
        order: 2;
        width: 260px;
        margin-left: 0.8rem;
        text-align: right;
    }
    #tech .list2 li .left {
        order: 1;
        flex: 1;
    }
}
@media (max-width: 800px) {
    #tech .list2 li {
        display: block;
    }
    #tech .list2 li .right {
        margin: 0 auto 24px;
        text-align: center;
        width: 60%;
        max-width: 260px;
    }
}
#product1 .options {
    margin-top: 0.8rem;
}
#product1 .options a{
    margin: 0.3rem 0.8rem 0 0;
}
@media (min-width: 1025px) {
    #product1 .left,
    #product1 .right {
        width: 50%;
    }
    #product1 .left {
        box-sizing: border-box;
        padding-right: 0.6rem;
    }
}
@media (max-width: 1024px) {
    #product1 .main {
        display: block;
    }
    #product1 .right {
        margin: 30px auto 0;
        max-width: 640px;
    }
}
#product2 .caption h1 {
    margin: 0 auto;
}
#product2 .container {
    border-radius: 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
#product2 .container .options {
    height: 4em;
    border-radius: 0.8em;
    background-color: #182029;
    position: relative;
}
#product2 .container .ul {
    position: relative;
    z-index: 2;
    height: 100%;
}
#product2 .container .ul li {
    flex: 1;
    cursor: pointer;
}
#product2 .container .flow {
    z-index: 1;
    left: 0;
    right: auto;
    border-radius: 0.8em;
    transition: all 0.4s ease;
}
#product2 .container .content {
    max-width: 1000px;
    margin: 0.5rem auto;
    padding: 20px;
}
#product2 .container .content .item {
    display: none;
}
#product3 .caption h1 {
    margin: 0 auto;
}
#product3 .ul {
    margin: -1.5em -1.5em 0 0;
}
#product3 .ul li {
    box-sizing: border-box;
    padding: 1.5em 1.5em 0 0;
}
#product3 .ul a {
    height: 100%;
    box-sizing: border-box;
    border-radius: 0.8em;
    background-color: #182029;
}
#product3 .ul a .title {
    padding-bottom: 10px;
    margin-bottom: 0.1rem;
}
#product3 .ul a .flow {
    border-radius: 0.8em;
}
#product3 .ul a .content {
    z-index: 2;
}
#product3 .list2 li {
    width: 50%;
}
@media (max-width: 800px) {
    #product3 .list2 li {
        width: 100%;
    }
}
#product3 .list2 a {
    padding: 0.64rem 0.9rem;
}
@media (max-width: 600px) {
    #product3 .list2 a {
        padding: 24px;
    }
}
#product3 .list3 li {
    width: 33.3333333%;
}
@media (max-width: 1024px) {
    #product3 .list3 li {
        width: 50%;
    }
}
@media (max-width: 800px) {
    #product3 .list3 li {
        width: 100%;
    }
}
#product3 .list3 a {
    padding: 0.5rem 0.55rem;
}
#product3 .list3 a img {
    width: 2.3em;
    height: 2.3em;
    object-fit: contain;
    margin-bottom: 0.6em;
}
#product3 .list3 a .fade {
    background-image: linear-gradient(-90deg, #422dc8, #18124d);
    background-image: -webkit-linear-gradient(right, #422dc8, #18124d);
}
#product3 .list3 a .fade .bg {
    border-radius: 0.8em;
    background-clip: content-box;
    border: 2px solid transparent;
    box-sizing: border-box;
    height: 100%;
    background-image: url("../images/b2.jpg")/*tpa=assets/index/images/b2.jpg*/;
}
@media (max-width: 1024px) {
    #product3 .list3 a {
        padding: 24px;
    }
}
#product4 .bg {
    pointer-events: none;
    background-position: right center;
}
#product4 .main {
    z-index: 2;
    height: 21em;
}
#product4 .main .content {
    max-width: 660px;
}
#product5 .caption h1 {
    margin: 0 auto;
}
#product5 .ul li {
    background-color: #182029;
    overflow: hidden;
    border-radius: 0.8em;
}
#product5 .ul li + li {
    margin-top: calc(10px + 0.2rem);
}
#product5 .ul li .flow {
    border-radius: 0.8em;
    z-index: 1;
}
#product5 .ul li .container {
    z-index: 2;
}
#product5 .ul li .head {
    padding: 10px 0.9rem;
    height: 0.8rem;
    min-height: 40px;
    cursor: pointer;
}
#product5 .ul li .head .cc {
    transition: all 0.4s ease;
    width: 2em;
    height: 2em;
    background-color: rgba(255, 255, 255, 0.2);
    border: 0 none;
    line-height: 1.8;
}
#product5 .ul li .head .en {
    padding-top: 0.15em;
}
#product5 .ul li .head .title {
    margin: 0 auto  0 5px;
    padding-right: 2em;
    padding-left: 0.15rem;
}
#product5 .ul li .head .icon {
    transition: all 0.4s ease;
}
#product5 .ul li .content {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.7rem 0.9rem;
}
#product5 .ul li .content .tf {
    flex: 1;
    margin-top: -0.24rem;
}
#product5 .ul li .content .char {
    padding-right: 6px;
    margin: 0.24rem 0.44rem 0 0;
}
#product5 .ul li .content img {
    width: 6.4em;
    margin-left: 1em;
}
#product5 .ul li .content a:hover {
    text-decoration: underline;
}
#product5 .ul li.on .head .icon {
    transform: rotateZ(-180deg);