@charset "UTF-8";

.w1520 {
    width: 15.2rem;
    margin: 0 auto;
    position: relative;
    font-size: 0;
    max-width: 100%;
}

@media (max-width: 1540px) {
    .w1520 {
        width: 90%;
    }
}

@media (max-width: 800px) {
    .w1520 {
        width: 94%;
    }
}

:root {
    --themes: #009bde;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 20;
    background-color: #fff;
    transition: all ease 0.5s;
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
}

header .hop {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

header .lopm {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

header .lopm .logo {
    display: inline-block;
    vertical-align: middle;
    width: 2.41rem;
}

header .lopm .logo a,
header .lopm .logo img {
    width: 100%;
    display: block;
}

header .lopm .logo img:first-child {
    display: block;
}

header .lopm .logo img:last-child {
    display: none;
}

header .rav {
    display: inline-block;
    vertical-align: middle;
    width: 2.7rem;
    font-size: 0;
    position: relative;
}

header .rav:after {
    content: ' ';
    position: absolute;
    width: 1px;
    background-color: #eee;
    left: -0.3rem;
    top: 0;
    z-index: 2;
    height: 100%;
    display: none;
}

header .rav .atn {
    display: inline-block;
    vertical-align: middle;
}

header .rav .atn a {
    display: inline-block;
    vertical-align: middle;
    line-height: 1rem;
    color: #111;
    padding-right: 0.3rem;
}

header .rav .atn a:hover {
    color: var(--themes);
}

header .rav .langs {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    width: auto;
}

header .rav .langs .lan {
    display: inline-block;
    vertical-align: middle;
    color: #111;
    line-height: 1.5;
    font-weight: bold;
}

header .rav .langs .lan .lx {
    display: inline-block;
    vertical-align: middle;
    color: #111;
    margin: 0 0.1rem;
}

header .rav .langs .lan:nth-child(2n) .lx {
    display: none;
}

header .rav .langs .lan.on {
    color: var(--themes);
}

header .rav .menu {
    display: none;
}

header .rav .search {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin-left: 0.35rem;
    width: 0.2rem;
    height: 1rem;
}

header .rav .search .sc {
    display: inline-block;
    vertical-align: middle;
    width: 0.2rem;
    min-width: 16px;
    min-height: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

header .rav .search .sc img {
    width: 100%;
    display: block;
}

header .rav .search .sc img:first-child {
    display: block;
}

header .rav .search .sc img:last-child {
    display: none;
}

header .rav .sechom {
    position: absolute;
    z-index: 3;
    right: 0;
    width: 4rem;
    background-color: #fff;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09);
    padding: 0.1rem;
    top: 100%;
    display: none;
}

header .rav .sechom form {
    width: 100%;
    display: block;
    font-size: 0;
}

header .rav .sechom .input {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 2.4em - 0.2rem);
    border: solid 1px #e5e5e5;
    margin-right: 0.2rem;
}

header .rav .sechom .input .int {
    width: 100%;
    display: block;
    background-color: #fff;
    line-height: 2.4;
    height: 2.4em;
    color: #111;
    padding: 0 0.1rem;
    border: none;
    background-color: #fff;
}

header .rav .sechom .stn {
    display: inline-block;
    vertical-align: middle;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background-color: var(--themes);
    position: relative;
}

header .rav .sechom .stn img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 21px;
    width: 0.22rem;
    height: 0.21rem;
    display: block;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%) brightness(400%);
}

header .rav .sechom .stn input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
}

header .rav .languages {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    margin: 0 0.1rem;
    text-align: left;
    margin-right: 0rem;
}

header .rav .languages .lauges {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

header .rav .languages .lauges .lashow {
    width: 100%;
    color: #333;
    position: relative;
    cursor: pointer;
    font-size: 0;
    padding-right: 12px;
}

header .rav .languages .lauges .lashow .ac {
    display: inline-block;
    vertical-align: middle;
    width: 0.2rem;
    height: 0.2rem;
    min-width: 16px;
    min-height: 16px;
    margin-right: 0.1rem;
    display: none;
}

header .rav .languages .lauges .lashow .ac img {
    width: 100%;
    display: block;
}

header .rav .languages .lauges .lashow .am {
    color: #333;
    line-height: 0.8rem;
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

header .rav .languages .lauges .lashow:after {
    content: ' ';
    position: absolute;
    right: 0rem;
    top: calc(49% + 0.015rem);
    transform: translateY(-50%);
    background-image: url("/static/en/images/x.png");
    width: 9px;
    height: 6px;
    background-size: 100%;
}

header .rav .languages .lauges .lashow:hover .am {
    color: var(--themes);
}

header .rav .languages .lauges .language {
    position: absolute;
    z-index: 10;
    top: 100%;
    width: 100%;
    display: none;
    width: 60px;
    width: 1rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 0.1rem 0.1rem;
    overflow: hidden;
}

header .rav .languages .lauges .language .latem {
    width: 100%;
}

header .rav .languages .lauges .language .latem a {
    width: 100%;
    display: block;
    color: #333;
    padding: 0 0.1rem;
    line-height: 3;
    text-align: center;
    position: relative;
    background: #efefef;
    overflow: hidden;
}

header .rav .languages .lauges .language .latem a span {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
}

header .rav .languages .lauges .language .latem a:after {
    content: "";
    position: absolute;
    width: 140%;
    height: 100%;
    left: -10%;
    top: 0;
    z-index: -1;
    background: #fff;
    z-index: 1;
}

header .rav .languages .lauges .language .latem a:hover {
    color: #fff;
}

header .rav .languages .lauges .language .latem a:hover span {
    color: #fff;
}

header .rav .languages .lauges .language .latem a:hover:after {
    background-color: var(--themes);
}

header .rav .languages .lauges .language .latem:last-child {
    border-radius: 0 0 0.1rem 0.1rem;
    overflow: hidden;
}

header nav {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
    text-align: center;
}

header nav .natem {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: center;
    font-size: 0;
}

header.white nav .natem {
    display: none;
}

header nav .natem .nas {
    width: auto;
    display: inline-block;
    position: relative;
    margin: 0 0.15rem;
}

header nav .natem .nas a {
    display: inline-block;
    line-height: 1rem;
    color: #333;
    position: relative;
}

header nav .natem .nas:after {
    content: ' ';
    position: absolute;
    left: 50%;
    bottom: 0rem;
    transform: translateX(-50%);
    opacity: 0;
    width: 100%;
    height: 0.03rem;
    transition: all ease 0.5s;
    background-color: var(--themes);
}

header nav .natem .navuls {
    width: 2.2rem;
    width: 1.8rem;
    position: absolute;
    z-index: 101;
    left: calc(50%);
    top: 100%;
    transform: translateX(-50%);
    background-color: white;
    display: none;
    overflow: hidden;
}

header nav .natem .navuls ul {
    width: 100%;
}

header nav .natem .navuls ul li {
    width: 100%;
    position: relative;
}

header nav .natem .navuls ul li .njm {
    width: 100%;
    font-size: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

header nav .natem .navuls ul li .ns {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    line-height: 3;
    color: #222;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 0.1rem;
    position: relative;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
}

header nav .natem .navuls ul li .theul {
    width: 100%;
    background-color: #fff;
    display: none;
}

header nav .natem .navuls ul li .theul li {
    width: 100%;
    font-size: 0;
}

header nav .natem .navuls ul li .theul li .xn {
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 2.5;
    padding: 0 0.2rem;
}

header nav .natem .navuls ul li .theul li .xn:hover {
    color: #333;
}

header nav .natem .navuls ul li:hover .ns {
    background-color: var(--themes);
    color: #fff;
}

header nav .natem .navuls ul li.has-the:after {
    content: "+";
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    position: absolute;
    background: none;
    right: 0;
    left: auto;
    transform: translateX(0);
    top: 0.05rem;
    font-size: 20px;
    color: #333;
    border: none;
    display: none;
}

header nav .natem .navuls ul li.has-the.show:after {
    content: "-";
}

header nav .natem.on .nas a {
    color: var(--themes);
    font-weight: bold;
}

header nav .natem:hover .nas a {
    color: var(--themes);
    font-weight: bold;
}

header.white {
    background-color: transparent;
    box-shadow: none;
}

header.white .lopm .logo img:first-child {
    display: none;
}

header.white .lopm .logo img:last-child {
    display: block;
}

header.white nav {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
    text-align: center;
}

header.white .rav:after {
    display: none;
}

header.white .rav .atn a {
    color: #fff;
}

header.white .rav .langs .lan {
    color: #fff;
}

header.white .rav .langs .lan .lx {
    color: #fff;
}

header.white .rav .search .sc img:first-child {
    display: none;
}

header.white .rav .search .sc img:last-child {
    display: block;
}

@media (max-width: 1260px) {
    header .rav {
        width: auto;
    }
}

@media (max-width: 800px) {
    header nav {
        width: 100%;
        position: fixed;
        right: 0;
        top: calc(0.9rem);
        left: auto;
        height: calc(100vh - 0.9rem);
        background-color: #fff;
        margin-right: 0;
        overflow: auto;
        z-index: 500;
        transition: transform .3s;
        padding: 0rem 0.2rem;
        display: block;
        text-align: left;
        display: none;
        border-top: solid 1px #e5e5e5;
    }

    header nav .natem {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        width: auto;
        width: 100%;
        padding: 0.1rem 0;
        opacity: 0;
        transform: translate(-10px, -30px);
        transition: all .8s ease;
    }

    header.white nav .natem {
        display: inline-block;
    }

    header nav .natem .nas {
        width: auto;
        display: inline-block;
        text-align: left;
        width: 100%;
        margin: 0;
    }

    header nav .natem .nas a {
        width: auto;
        display: inline-block;
        vertical-align: middle;
        line-height: 2.5;
        color: #333;
        font-weight: bold;
        font-family: 'Alibaba-PuHuiTi-Bold';
        padding: 0 0.3rem;
        position: relative;
    }

    header nav .natem .nas .ik {
        display: none !important;
    }

    header nav .natem .nas a:hover {
        color: var(--themes);
        background-color: transparent;
    }

    header nav .natem .navuls {
        width: 100%;
        position: relative;
        z-index: 101;
        left: 0%;
        top: 0%;
        transform: translateX(0%);
        background: #fff;
        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09);
        display: none;
        text-align: left;
    }

    header nav .natem .navuls ul {
        width: 100%;
        padding: 0.1rem 0.2rem;
    }

    header nav .natem .navuls ul li {
        width: 100%;
        display: block;
        position: relative;
        margin-bottom: 0;
    }

    header nav .natem .navuls ul li .ns {
        width: auto;
        display: inline-block;
        vertical-align: middle;
        line-height: 3;
        color: #333;
        text-align: left !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 0.2rem;
        background: #fff;
        position: relative;
    }

    header nav .natem .navuls ul li .ns:hover {
        color: var(--themes);
    }

    header nav .natem .navuls ul li+li {
        border-top: solid 1px #eee;
    }

    header nav .natem .navuls ul li:hover .ns {
        background-color: transparent;
        color: var(--themes);
    }

    header nav .natem .navuls ul li.has-the:after {
        display: block;
    }

    header nav .natem:before {
        display: none !important;
    }

    header nav .natem .prosubnav {
        display: none;
    }

    header nav .natem.on .nas:after {
        display: none;
    }

    header nav .natem.has-nav .nas .xs {
        display: none;
    }

    header nav .natem.has-nav:after {
        content: "+";
        display: inline-block;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        position: absolute;
        background: none;
        right: 0;
        left: auto;
        transform: translateX(0);
        top: 0.05rem;
        font-size: 20px;
        color: #333;
        border: none;
    }

    header nav .natem.has-nav.show:after {
        content: "-";
    }

    header nav .natem.animate {
        opacity: 1;
        transform: translate(0, 0);
    }

    header .rav {
        flex: 1;
        text-align: right;
        border-left: none;
    }

    header .rav .sechom {
        width: 100vw;
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    header .rav .menu {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        margin-left: 0.1rem;
        cursor: pointer;
        position: relative;
    }

    header .rav .menu img {
        width: 100%;
        height: 100%;
        display: block;
    }

    header .rav .menu .clk {
        width: 100%;
        height: 100%;
        text-align: center;
        color: #333;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }

    header .rav .menu img:first-child {
        display: none;
    }

    header .rav .menu img:last-child {
        display: block;
    }

    header.menu-state .rav .menu img {
        opacity: 0;
    }

    header.white nav {
        display: none;
    }

    header.white .rav .menu .clk {
        color: #fff;
    }

    header.white .rav .menu img:first-child {
        display: block;
    }

    header.white .rav .menu img:last-child {
        display: none;
    }
}

footer {
    width: 100%;
    background-color: #515151;
    padding: 0.8rem 0;
}

footer .ftop {
    width: 100%;
}

footer .fop {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 0.6rem;
}

footer .fop .fit {
    width: 100%;
    font-size: 0;
    margin-bottom: 0.2rem;
}

footer .fop .fit a {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1.4;
    font-weight: bold;
    transition: all ease 0.5s;
    padding: 0.06rem 0;
}

footer .fop .fit a:hover {
    color: var(--themes);
}

footer .fop .fpl {
    display: inline-block;
    vertical-align: middle;
    width: calc(900 / 1520 * 100%);
}

footer .fop .fpl .flist {
    display: inline-block;
    vertical-align: top;
    width: calc(180 / 900 * 100%);
    padding-right: 0.2rem;
    text-align: left;
}

footer .fop .fpl .flist .ful {
    width: 100%;
    padding-right: 0.2rem;
}

footer .fop .fpl .flist .ful a {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    color: rgba(255, 255, 255, 0.5);
    transition: all ease 0.5s;
    line-height: 2;
    line-height: 1.5;
    padding: 0.05rem 0;
}

footer .fop .fpl .flist .ful a:hover {
    color: #fff;
}

footer .fop .fpl .flist .ful div {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.5);
    line-height: 2;
    transition: all ease 0.5s;
}

footer .fop .fpr {
    display: inline-block;
    vertical-align: middle;
    width: calc(500 / 1520 * 100%);
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer .fop .fpr .prl {
    display: inline-block;
    vertical-align: middle;
}

footer .fop .fpr .prl .pul {
    width: 100%;
}

footer .fop .fpr .prl .pul .pli {
    width: 100%;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

footer .fop .fpr .prl .pul .pli+.pli {
    margin-top: 0.08rem;
}

footer .fop .fpr .prl .pul .um {
    display: inline-block;
    color: var(--themes);
    font-weight: bold;
}

footer .fop .fpr .prr {
    display: inline-block;
    vertical-align: middle;
}

footer .fop .fpr .prr .codem {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    text-align: center;
}

footer .fop .fpr .prr .codem .am {
    display: block;
    width: 1.3rem;
    margin: 0 auto 0.1rem;
    min-width: 100px;
}

footer .fop .fpr .prr .codem .am img {
    width: 100%;
    display: block;
}

footer .fop .fpr .prr .codem .em {
    width: 100%;
    text-align: center;
    color: #fff;
    line-height: 1.5;
}

footer .fbot {
    width: 100%;
    font-size: 0;
}

footer .fob {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.28rem 0;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
}

footer .fob .fm {
    display: inline-block;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.5;
}

footer .fob .share {
    display: inline-block;
    vertical-align: middle;
}

footer .fob .share .am {
    display: inline-block;
    vertical-align: middle;
    width: 0.22rem;
    height: 0.22rem;
    min-width: 18px;
    min-height: 18px;
    position: relative;
    margin: 0 0.1rem;
    opacity: 0.5;
    transition: all ease 0.5s;
}

footer .fob .share .am a,
footer .fob .share .am img {
    width: 100%;
    display: block;
}

footer .fob .share .am .code {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 0.1rem);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.05rem;
    background-color: #fff;
    padding: 0.06rem;
    display: none;
}

footer .fob .share .am:hover {
    opacity: 1;
}

footer .fob .share .am:hover .code {
    display: block;
}

@media (max-width: 800px) {
    footer {
        padding: 0.2rem 0;
    }

    footer .fop {
        padding-bottom: 0.2rem;
    }

    footer .fop .fpl {
        width: 100%;
        margin-bottom: 0.3rem;
    }

    footer .fop .fpl .flist {
        width: 100%;
        border-bottom: solid 1px rgba(255, 255, 255, 0.15);
        position: relative;
    }

    footer .fop .fpl .flist .fit {
        width: 100%;
        margin-bottom: 0;
        padding: 0.3rem 0;
    }

    footer .fop .fpl .flist .lx {
        display: none;
    }

    footer .fop .fpl .flist .ful {
        width: 100%;
        font-size: 0;
        padding-bottom: 0.15rem;
        display: none;
    }

    footer .fop .fpl .flist .ful a {
        line-height: 2;
    }

    footer .fop .fpl .flist.has-ful:after {
        content: " ";
        display: inline-block;
        width: 12px;
        height: 7px;
        background-image: url("/static/en/images/x1.png");
        background-position: center;
        background-size: 100% 100%;
        text-align: center;
        position: absolute;
        right: 0.2rem;
        left: auto;
        transform: translateX(0) rotate(0deg);
        top: 0.5rem;
        color: #333;
        border: none;
        transition: all ease 0.5s;
    }

    footer .fop .fpl .flist.has-ful.show:after {
        content: " ";
        transform: translateX(0) rotate(180deg);
    }

    footer .fop .fpr {
        width: 100%;
    }
}

.banner {
    width: 100%;
    position: relative;
}

.banner .swiper-slide {
    width: 100%;
    display: block;
    position: relative;
}

.banner .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.banner .swiper-slide .imgs .img {
    width: 100%;
    height: 100vh;
}

.banner .swiper-slide .box {
    position: absolute;
    left: calc(200 / 1920 * 100%);
    z-index: 4;
    top: calc(50% + 0.5rem);
    transform: translateY(-50%);
}

.banner .swiper-slide .box .bit {
    width: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 1.3;
    opacity: 0;
    transform: translate3d(35%, 0, 0);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.banner .swiper-slide .box .bit p {
    color: #fff;
    line-height: 1.3;
}

.banner .swiper-slide .box .sinp {
    width: 100%;
    color: #fff;
    line-height: 1.5;
    margin: 0.3rem 0 0.55rem;
    opacity: 0;
    transform: translate3d(35%, 0, 0);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.banner .swiper-slide .box .sinp p {
    color: #fff;
    line-height: 1.5;
}

.banner .swiper-slide .box .more {
    width: 100%;
    font-size: 0;
    opacity: 0;
    transform: translate3d(35%, 0, 0);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.banner .swiper-slide .box .more a {
    display: inline-block;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
    line-height: 1.5;
    transition: all ease 0.5s;
}

.banner .swiper-slide .box .more a:hover {
    color: #fff;
}

.banner .swiper-slide-active .box .bit,
.banner .swiper-slide-active .box .sinp,
.banner .swiper-slide-active .box .more {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.banner .swiper-pagination {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0.5rem;
}

.banner .swiper-pagination-bullet {
    display: inline-block;
    vertical-align: middle;
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 50%;
    margin-left: 0.2rem;
    background-color: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.banner .swiper-pagination-bullet-active {
    background-color: #fff;
}

.banner .bannav {
    position: absolute;
    right: calc(200 / 1920 * 100%);
    z-index: 5;
    top: calc(42% + 0.5rem);
    transform: translateY(-50%);
    width: 2.7rem;
    border: solid 1px #eee;
    border-radius: 0.1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 0.15rem 0;
    opacity: 0;
    transition: all ease 1s;
}

.banner .bannav .nitem {
    width: 100%;
    font-size: 0;
    padding: 0.2rem 0;
}

.banner .bannav .nitem a {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    position: relative;
    color: #fff;
    line-height: 3;
}

.banner .bannav .nitem a:after {
    content: ' ';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    bottom: 0;
    transition: all ease 0.5s;
    height: 0.02rem;
    border-radius: 0.01rem;
    background-color: #fff;
}

.banner .bannav .nitem a:hover:after {
    width: 100%;
}

.banner .videoc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 4;
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
    transition: all ease 0.5s;
    z-index: 5;
}

.banner .videoc .vom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.banner:hover .bannav {
    opacity: 1;
}

@media (max-width: 1540px) {
    .banner .bannav {
        right: 5%;
    }
}

@media (max-width: 800px) {
    .banner .swiper-slide .imgs .img {
        height: 60vh;
    }
}

.modular {
    width: 100%;
}

.modular .netop {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.modular .netop .nel {
    display: inline-block;
    vertical-align: middle;
}

.modular .netop .nel .cnt {
    width: 100%;
    color: #222;
    font-weight: bold;
}

.modular .netop .nel .emt {
    width: 100%;
    color: #666;
    font-weight: bold;
    line-height: 1.5;
}

.modular .netop .ner {
    display: inline-block;
    vertical-align: middle;
}

.modular .netop .ner .more {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.modular .netop .ner .more a {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    padding: 0 0.26rem;
    color: #fff;
    line-height: 3.2;
    border-radius: 1.6em;
    transition: all ease 0.5s;
}

.modular .netop .ner .more a span {
    display: inline-block;
    vertical-align: middle;
    width: 0.32rem;
    height: 0.32rem;
    position: relative;
    top: -0.02rem;
    border-radius: 50%;
    margin-left: 0.45rem;
    background-color: rgba(255, 255, 255, 0.2);
}

.modular .netop .ner .more a span img {
    width: 100%;
    display: block;
}

.modular .netop .ner .more a:hover {
    transform: scale(1.05);
}

.modular .netop .ner .ninp {
    display: inline-block;
    vertical-align: top;
    width: 7.5rem;
    max-width: 100%;
    word-break: break-word;
    color: #444;
    line-height: 1.5;
}

.modular .netop .ner .ninp p {
    color: #444;
    line-height: 1.5;
}

.modular .mitop {
    width: 100%;
    margin-bottom: 0.45rem;
}

.modular .mitop .mit {
    width: 100%;
    color: #222;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}

.modular .mitop .mip {
    width: 100%;
    color: #666;
    line-height: 1.6;
    text-align: center;
    margin-top: 0.15rem;
}

.modular .mitop .mip p {
    color: #666;
    line-height: 1.6;
}

#fp-nav ul li {
    margin: 10px auto;
}

#fp-nav ul li a {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

#fp-nav ul li a span {
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

#fp-nav ul li a.active span {
    width: 14px;
    height: 14px;
    margin: 0;
    background-color: var(--themes);
}

#fp-nav ul li:hover a span {
    margin: 0 !important;
}

@media (max-width: 800px) {
    #fp-nav {
        display: none;
        opacity: 0;
        z-index: -999;
    }
}

.newtem {
    width: 100%;
    padding: 0.5rem 0;
}

.newtem .netpm {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.newtem .netpm .ntl {
    display: inline-block;
    vertical-align: middle;
    width: calc(730 / 1520 * 100%);
}

.newtem .netpm .ntl a {
    width: 100%;
    display: block;
}

.newtem .netpm .ntl .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.newtem .netpm .ntl .imgs .img {
    width: 100%;
    padding-top: 68.49%;
    transition: all ease 0.5s;
}

.newtem .netpm .ntl .nom {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.newtem .netpm .ntl .nom .nl {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
    font-weight: bold;
    color: #111;
    line-height: 1.5;
}

.newtem .netpm .ntl .nom .time {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
}

.newtem .netpm .ntl .nom .time span {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.newtem .netpm .ntl .nom .time span img {
    width: 100%;
    display: block;
}

.newtem .netpm .ntl:hover .imgs .img {
    transform: scale(1.1);
}

.newtem .netpm .ntl:hover .nom .nl {
    color: var(--themes);
}

.newtem .netpm .ntr {
    display: inline-block;
    vertical-align: middle;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: calc(730 / 1520 * 100%);
}

.newtem .netpm .ntr .ntrlis {
    width: 100%;
    font-size: 0;
}

.newtem .netpm .ntr .ntrlis .ntrm {
    display: inline-block;
    vertical-align: top;
    width: calc(350 / 730 * 100%);
    margin-right: calc(29 / 730 * 100%);
}

.newtem .netpm .ntr .ntrlis .ntrm a {
    width: 100%;
    display: block;
}

.newtem .netpm .ntr .ntrlis .ntrm .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.newtem .netpm .ntr .ntrlis .ntrm .imgs .img {
    width: 100%;
    padding-top: 68.57%;
    transition: all ease 0.5s;
}

.newtem .netpm .ntr .ntrlis .ntrm .imgs .time {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    padding: 0.2rem;
    color: #fff;
    line-height: 1.5;
}

.newtem .netpm .ntr .ntrlis .ntrm .imgs .time span {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    margin-right: 0.1rem;
}

.newtem .netpm .ntr .ntrlis .ntrm .imgs .time span img {
    width: 100%;
    display: block;
}

.newtem .netpm .ntr .ntrlis .ntrm .rom {
    width: 100%;
    padding: 0.22rem 0;
    color: #111;
    line-height: 1.5;
}

.newtem .netpm .ntr .ntrlis .ntrm:nth-child(2n) {
    margin-right: 0;
}

.newtem .netpm .ntr .ntrlis .ntrm:hover .imgs .img {
    transform: scale(1.1);
}

.newtem .netpm .ntr .ntrlis .ntrm:hover .rom {
    color: var(--themes);
}

.newtem .netpm .ntr .ntblis {
    width: 100%;
}

.newtem .netpm .ntr .ntblis .nli {
    width: 100%;
    padding: 0.3rem 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.newtem .netpm .ntr .ntblis .nli a {
    width: 100%;
    display: flex;
    align-items: center;
}

.newtem .netpm .ntr .ntblis .nli .name {
    display: inline-block;
    vertical-align: middle;
    color: #111;
    line-height: 1.5;
    flex: 1;
}

.newtem .netpm .ntr .ntblis .nli .time {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
}

.newtem .netpm .ntr .ntblis .nli .time span {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.newtem .netpm .ntr .ntblis .nli .time span img {
    width: 100%;
    display: block;
}

.newtem .netpm .ntr .ntblis .nli:first-child {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}

.newtem .netpm .ntr .ntblis .nli:hover .name {
    color: var(--themes);
}

.histoys {
    width: 100%;
    padding: 1rem 0 0;
    position: relative;
    z-index: 3;
}

.histoys .histoy {
    width: 100%;
    position: relative;
}

.histoys .histoy .swiper-container {
    padding: 0.5rem 0;
}

.histoys .histoy .swiper-slide {
    width: 100%;
    font-size: 0;
    position: relative;
    top: 0.4rem;
    transition: all ease 0.5s;
}

.histoys .histoy .swiper-slide .lix {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    margin-right: 0.24rem;
    transition: all ease 0.5s;
}

.histoys .histoy .swiper-slide .rem {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 0.24rem - 18px);
}

.histoys .histoy .swiper-slide .rem .rmg {
    width: 100%;
    margin-bottom: 0.2rem;
}

.histoys .histoy .swiper-slide .rem .rmg .mg {
    width: 100%;
    display: block;
}

.histoys .histoy .swiper-slide .rem .year {
    width: 100%;
    color: var(--themes);
    font-weight: bold;
    line-height: 1.5;
}

.histoys .histoy .swiper-slide .rem .sinp {
    width: 100%;
    margin-top: 0.2rem;
    color: var(--themes);
    line-height: 1.5;
}

.histoys .histoy .swiper-slide .rem .sinp p {
    color: var(--themes);
    line-height: 1.5;
}

.histoys .histoy .swiper-slide-active {
    position: relative;
    top: 0.4rem;
}

.histoys .histoy .swiper-slide-active .lix {
    background-image: url("/static/en/images/l1.png");
    background-size: 100%;
    height: 2.76rem;
    background-repeat: no-repeat;
}

.histoys .histoy .swiper-slide-active+.swiper-slide {
    position: relative;
    top: 0.1rem;
}

.histoys .histoy .swiper-slide-active+.swiper-slide .lix {
    background-image: url("/static/en/images/l2.png");
    background-size: 100%;
    height: 3rem;
    background-repeat: no-repeat;
}

.histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide {
    position: relative;
    top: -0.2rem;
}

.histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide .lix {
    background-image: url("/static/en/images/l3.png");
    background-size: 100%;
    height: 3.3rem;
    background-repeat: no-repeat;
}

.histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide+.swiper-slide {
    position: relative;
    top: -0.5rem;
}

.histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide+.swiper-slide .lix {
    background-image: url("/static/en/images/l4.png");
    background-size: 100%;
    height: 3.74rem;
    background-repeat: no-repeat;
}

.histoys .histoy .btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all ease 0.5s;
}

.histoys .histoy .btn img {
    width: 100%;
    display: block;
}

.histoys .histoy .btn img:first-child {
    display: block;
}

.histoys .histoy .btn img:last-child {
    display: none;
}

.histoys .histoy .btn:hover {
    background-color: #fff;
}

.histoys .histoy .btn:hover img:first-child {
    display: none;
}

.histoys .histoy .btn:hover img:last-child {
    display: block;
}

.histoys .histoy .bl {
    left: -0.5rem;
}

.histoys .histoy .br {
    right: -0.5rem;
}

@media (max-width: 1600px) {
    .histoys .histoy .bl {
        left: 0.75rem;
    }

    .histoys .histoy .br {
        right: 0.75rem;
    }
}

@media (max-width: 800px) {
    .histoys .histoy .bl {
        left: 0.95rem;
    }

    .histoys .histoy .br {
        right: 0.95rem;
    }
}

.areas {
    width: 100%;
    padding: 0.5rem 0;
}

.areas .areaper {
    width: 100%;
    position: relative;
}

.areas .areaper .swiper-container {
    padding-bottom: 0.4rem;
}

.areas .areaper .swiper-slide {
    width: calc(368 / 1920 * 100%);
    display: inline-block;
    vertical-align: top;
    transition: all ease 0.5s;
    position: relative;
    overflow: hidden;
    margin-right: calc(19 / 1920 * 100%);
}

.areas .areaper .swiper-slide a {
    width: 100%;
    display: block;
}

.areas .areaper .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.areas .areaper .swiper-slide .imgs .img {
    width: 100%;
    height: 5.4rem;
    transition: all ease 0.5s;
}

.areas .areaper .swiper-slide .psm {
    position: absolute;
    bottom: calc((-1.5em) - 1.26rem);
    left: 0;
    background-color: rgba(19, 162, 231, 0.85);
    border-radius: 0 0.2rem 0 0;
    transition: all ease 0.5s;
    width: 100%;
    padding: 0.2rem;
    z-index: 3;
}

.areas .areaper .swiper-slide .psm .pit {
    width: 100%;
    color: #fff;
    text-align: center;
    line-height: 1.5;
}

.areas .areaper .swiper-slide .psm .psmlist {
    width: 100%;
    font-size: 0;
    margin-top: 0.2rem;
}

.areas .areaper .swiper-slide .psm .psmlist .pivm {
    display: inline-block;
    vertical-align: middle;
    /* width: calc(250 / 600 * 100%); */
    width: 100%;
    /* margin-right: calc(10 / 600 * 100%); */
    margin-bottom: 0.1rem;
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 0.1rem;
    text-align: center;
    color: #fff;
    padding: 0 0.2rem;
    line-height: 3.2;
}

.areas .areaper .swiper-slide.on {
    width: calc(756 / 1920 * 100%);
}

.areas .areaper .swiper-slide.on .psm {
    width: calc(715 / 730 * 100%);
    padding: 0.4rem 0.6rem;
    bottom: 0;
}

.areas .areaper .swiper-slide.on .psm .pit {
    text-align: left;
}

.areas .areaper .swiper-scrollbar-drag {
    background-color: var(--themes);
}

.areas .areaper .btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(51, 51, 51, 0.2);
    transition: all ease 0.5s;
}

.areas .areaper .btn img {
    width: 100%;
    display: block;
}

.areas .areaper .btn img:first-child {
    display: block;
}

.areas .areaper .btn img:last-child {
    display: none;
}

.areas .areaper .btn:hover {
    background-color: #fff;
}

.areas .areaper .btn:hover img:first-child {
    display: none;
}

.areas .areaper .btn:hover img:last-child {
    display: block;
}

.areas .areaper .bl {
    left: 0.8rem;
}

.areas .areaper .br {
    right: 0.8rem;
}

@media (max-width: 1600px) {
    .areas .areaper .swiper-slide.on .psm {
        padding: 20px;
    }

    .areas .areaper .bl {
        left: 0.75rem;
    }

    .areas .areaper .br {
        right: 0.75rem;
    }
}

@media (max-width: 800px) {
    .areas .areaper .swiper-slide.on .psm {
        padding: 20px;
    }

    .areas .areaper .bl {
        left: 0.95rem;
    }

    .areas .areaper .br {
        right: 0.95rem;
    }
}

.briefs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
}

.briefs .brl {
    width: calc(1410 / 1920 * 100%);
    display: inline-block;
    vertical-align: middle;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.briefs .brl .brtom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 0.5rem 1rem 0.5rem calc(200 / 1920 * 100%);
    flex: 5.2;
}

.briefs .brl .brtom .betp {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.briefs .brl .brtom .betp .bpl {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
}

.briefs .brl .brtom .betp .bpl .binp {
    width: 100%;
    color: #444;
    word-break: break-word;
    line-height: 1.7;
}

.briefs .brl .brtom .betp .bpl .binp p {
    color: #444;
    line-height: 1.7;
}

.briefs .brl .brtom .betp .bpr {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1rem;
}

.briefs .brl .brtom .betp .bpr .more {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.briefs .brl .brtom .betp .bpr .more a {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    padding: 0 0.26rem;
    color: #fff;
    line-height: 3.2;
    border-radius: 1.6em;
    transition: all ease 0.5s;
}

.briefs .brl .brtom .betp .bpr .more a span {
    display: inline-block;
    vertical-align: middle;
    width: 0.32rem;
    height: 0.32rem;
    position: relative;
    top: -0.02rem;
    border-radius: 50%;
    margin-left: 0.45rem;
    background-color: rgba(255, 255, 255, 0.2);
}

.briefs .brl .brtom .betp .bpr .more a span img {
    width: 100%;
    display: block;
}

.briefs .brl .brtom .betp .bpr .more a:hover {
    transform: scale(1.05);
}

.briefs .brl .brbom {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem calc(200 / 1920 * 100%);
    flex: 4;
    display: flex;
    /* align-items: center; */
    position: relative;
}

.briefs .brl .brbom .brob {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.briefs .brl .brbom .brob:after {
    content: ' ';
    z-index: 3;
    position: absolute;
    width: 1px;
    height: 100%;
    left: calc((200 / 1920 * 100%) + 1.3rem);
    background-color: rgba(255, 255, 255, 0.2);
    top: 0;
}

.briefs .brl .brbom .brob .bbl {
    display: inline-block;
    vertical-align: middle;
    width: 1.3rem;
    position: relative;
    z-index: 4;
}

.briefs .brl .brbom .brob .bbl .bitn {
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    padding: 0.08rem 0;
    cursor: pointer;
    position: relative;
}

.briefs .brl .brbom .brob .bbl .bitn:after {
    content: ' ';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 3;
    width: 0.07rem;
    height: 0.2rem;
    border-radius: 0.035rem;
    background-color: var(--themes);
    opacity: 0;
    transition: all ease 0.5s;
}

.briefs .brl .brbom .brob .bbl .bitn.on {
    color: #fff;
    font-weight: bold;
}

.briefs .brl .brbom .brob .bbl .bitn.on:after {
    opacity: 1;
}

.briefs .brl .brbom .brob .bbr {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 1.3rem);
    padding-left: 0.35rem;
    padding-top: 0.08rem;
}

.briefs .brl .brbom .brob .bbr .biem {
    width: 100%;
    display: none;
}

.briefs .brl .brbom .brob .bbr .biem.on {
    display: block;
}

.briefs .brl .brbom .brob .bbr .sinp {
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    word-break: break-all;
}

.briefs .brl .brbom .brob .bbr .sinp p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
}

.briefs .brr {
    width: calc(510 / 1920 * 100%);
    display: inline-block;
    vertical-align: middle;
    padding: 0.4rem 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.briefs .brr .leftper {
    width: 100%;
    height: 100%;
    display: block;
}

.briefs .brr .leftper .swiper-slide {
    width: 100%;
    border-bottom: solid 1px rgba(255, 255, 255, 0.15);
    padding: 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.briefs .brr .leftper .swiper-slide .lum {
    width: 100%;
    font-size: 0;
}

.briefs .brr .leftper .swiper-slide .lum .xt {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
}

.briefs .brr .leftper .swiper-slide .lum .pd {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.briefs .brr .leftper .swiper-slide .lum .pd .d1,
.briefs .brr .leftper .swiper-slide .lum .pd .d2 {
    width: 100%;
    color: #fff;
    line-height: 1.5;
}

.briefs .brr .leftper .swiper-slide .lum .pd .d1 {
    font-weight: bold;
}

.briefs .brr .leftper .swiper-slide .xum {
    width: 100%;
    color: #fff;
    line-height: 1.5;
}
@media(min-width: 801px){
    .briefs .brr .leftper .swiper-container {
        height: calc(100% - 0.8rem);
    }
    .briefs .brr .leftper .swiper-slide {
      width: 100% !important;
    }
  }

@media (max-width: 800px) {
    .briefs {
        height: auto;
    }

    .briefs .brl {
        width: 100%;
    }

    .briefs .brl .brtom {
        padding: 20px;
    }

    .briefs .brl .brtom .betp .bpl {
        width: 100%;
    }

    .briefs .brl .brtom .betp .bpr {
        width: 100%;
        margin-left: 0;
        margin-top: 0.3rem;
    }

    .briefs .brl .brbom {
        padding: 20px;
    }

    .briefs .brl .brbom .brob:after {
        left: calc(20px + 2rem);
    }

    .briefs .brl .brbom .brob .bbl {
        width: 2rem;
    }

    .briefs .brl .brbom .brob .bbr {
        width: calc(100% - 2rem);
    }

    .briefs .brr {
        width: 100%;
        padding: 20px 5px;
    }

    .briefs .brr .leftper .swiper-wrapper{
      align-items: stretch;
    }

    .briefs .brr .leftper .swiper-slide {
      padding: 0.2rem 0;
      border-top: solid 1px rgba(255, 255, 255, 0.15);
      height: auto;
      align-content: flex-start;
    }
    .briefs .brr .leftper .swiper-slide .lum .pd{
      vertical-align: top;
    }
    .briefs .brr .leftper .swiper-slide .lum .pd .d1{
      line-height: 1;
    }
    .briefs .brr .leftper .swiper-slide .lum .xt{
      min-height: 1.5em;
    }
}

.nancont {
    width: 100%;
    position: relative;
}

.nanber {
    width: 100%;
    position: relative;
}

.nanber .imgs {
    width: 100%;
    position: relative;
}

.nanber .imgs .img {
    width: 100%;
    padding-top: 31.25%;
}

.nanber .nox {
    position: absolute;
    z-index: 4;
    left: calc(200 / 1920 * 100%);
    top: 50%;
    transform: translateY(-50%);
    width: 70%;
    z-index: 2;
}

.nanber .nox .cm {
    width: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
}

.nanber .nox .em {
    width: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 1.5;
    margin-top: .0rem;
}

@media (max-width: 1540px) {
    .nanber .nox {
        left: 5%;
        width: 90%;
    }
}

@media (max-width: 800px) {
    .nanber .nox {
        left: 3%;
        width: 94%;
    }
}

.crumbs {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    border-top: solid 1px rgba(255, 255, 255, 0.2);
}

.crumbs .column {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.crumbs .column .colum {
    width: auto;
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}

.crumbs .column .colum .home {
    display: inline-block;
    vertical-align: middle;
    width: .2rem;
    height: .2rem;
    min-width: 18px;
    min-height: 18px;
    margin-right: .1rem;
    position: relative;
    top: -0.02rem;
}

.crumbs .column .colum .home img {
    width: 100%;
    display: block;
}

.crumbs .column .colum .home img:first-child {
    display: block;
}

.crumbs .column .colum .home img:last-child {
    display: none;
}

.crumbs .column .colum .sm {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: .8rem;
}

.crumbs .column .colum a {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    color: #fff;
    line-height: .8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.crumbs .column .colum a span {
    display: inline-block;
    color: #fff;
    line-height: .8rem;
    position: relative;
    margin: 0 .08rem;
}

.crumbs .column .colum a span img {
    width: 100%;
    display: block;
}

.crumbs .column .colum a:hover {
    color: var(--themes);
}

.crumbs .column .colum a:last-child span {
    display: none;
}

.crumbs .column .cur {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    text-align: right;
}

.crumbs .column .cur .swiper-slide {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.crumbs .column .cur .swiper-slide a {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    line-height: .8rem;
    color: #fff;
    position: relative;
    padding: 0 0.3rem;
}

.crumbs .column .cur .swiper-slide.on a {
    color: #fff;
    background-color: var(--themes);
}

.crumbs .column .cuper {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    height: 3.2em;
    position: relative;
}

.crumbs .column .cuper .swiper-container {
    height: 10rem;
}

.crumbs .column .cuper .swiper-slide {
    display: inline-block;
    vertical-align: middle;
    margin: 0 .15rem;
    width: auto;
    height: 3.2em;
}

.crumbs .column .cuper .swiper-slide .coem {
    width: 100%;
    padding: 0 0.15rem;
}

.crumbs .column .cuper .swiper-slide .coem .ns {
    display: inline-block;
    vertical-align: middle;
}

.crumbs .column .cuper .swiper-slide .coem a {
    display: inline-block;
    vertical-align: middle;
    color: #666;
    line-height: 3.2em;
}

.crumbs .column .cuper .swiper-slide .coem .xm {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.12rem;
    width: 12px;
    transition: all ease 0.5s;
    display: none;
}

.crumbs .column .cuper .swiper-slide .coem .xm img {
    width: 100%;
    display: block;
}

.crumbs .column .cuper .swiper-slide .coem .xm img:first-child {
    display: block;
}

.crumbs .column .cuper .swiper-slide .coem .xm img:last-child {
    display: none;
}

.crumbs .column .cuper .swiper-slide .coem.on {
    background-color: var(--themes);
}

.crumbs .column .cuper .swiper-slide .coem.on a {
    color: #fff;
}

.crumbs .column .cuper .swiper-slide .coem.on .xm {
    transform: rotate(180deg);
}

.crumbs .column .cuper .swiper-slide .coem.on .xm img:first-child {
    display: none;
}

.crumbs .column .cuper .swiper-slide .coem.on .xm img:last-child {
    display: block;
}

.crumbs .column .cuper .swiper-slide .nspul {
    width: auto;
    position: absolute;
    z-index: 101;
    left: 50%;
    top: 100%;
    min-width: 100%;
    transform: translateX(-50%);
    background-color: var(--themes);
    display: none;
    box-shadow: -6px -8px 28px 4px rgba(0, 53, 97, 0.11);
}

.crumbs .column .cuper .swiper-slide .nspul .pli {
    width: 100%;
    text-align: center;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
}

.crumbs .column .cuper .swiper-slide .nspul .pli a {
    width: 100%;
    display: block;
    color: rgba(255, 255, 255, 0.5);
    line-height: 3;
    transition: all ease 0.5s;
    padding: 0 0.1rem;
    white-space: nowrap;
}

.crumbs .column .cuper .swiper-slide .nspul .pli a:hover {
    color: #fff;
}

.crumbs .column .cuper .swiper-slide.has-the .coem .xm {
    display: inline-block;
}

@media (max-width: 800px) {
    .crumbs {
        position: relative;
        border: none;
    }

    .crumbs .column .cur .swiper-slide a {
        color: #333;
    }

    .crumbs .column .colum {
        text-align: right;
    }

    .crumbs .column .colum a {
        color: #333;
    }

    .crumbs .column .colum a span {
        color: #333;
    }

    .crumbs .column .colum .home img:first-child {
        display: none;
    }

    .crumbs .column .colum .home img:last-child {
        display: block;
    }
}

.newcont {
    width: 100%;
    padding: 1rem 0 0.5rem;
}

.newcont .newlist {
    width: 100%;
}

.newcont .newlist .necom {
    width: 100%;
    padding: 0.25rem 0;
    border-bottom: solid 1px #dfedf7;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.newcont .newlist .necom .imgs {
    display: inline-block;
    vertical-align: middle;
    width: calc(435 / 1520 * 100%);
    position: relative;
    overflow: hidden;
}

.newcont .newlist .necom .imgs a {
    width: 100%;
    display: block;
}

.newcont .newlist .necom .imgs .img {
    width: 100%;
    padding-top: 56.32%;
    transition: all ease 0.5s;
}

.newcont .newlist .necom .imgs:hover .img {
    transform: scale(1.1);
}

.newcont .newlist .necom .cems {
    display: inline-block;
    vertical-align: middle;
    width: calc(1000 / 1520 * 100%);
}

.newcont .newlist .necom .cems .time {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
}

.newcont .newlist .necom .cems .time span {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.newcont .newlist .necom .cems .time span img {
    width: 100%;
    display: block;
}

.newcont .newlist .necom .cems .xt {
    width: 100%;
    display: block;
    color: #111;
    font-weight: bold;
    line-height: 1.6;
    margin: 0.1rem 0;
}

.newcont .newlist .necom .cems .xt:hover {
    color: var(--themes);
}

.newcont .newlist .necom .cems .xm {
    width: 100%;
    color: #999;
    line-height: 1.7;
    margin: 0.15rem 0;
}

.newcont .newlist .necom .cems .more {
    width: 100%;
    margin-top: 0.1rem;
}

.newcont .newlist .necom .cems .more a {
    display: inline-block;
    vertical-align: middle;
    color: var(--themes);
    line-height: 1.5;
    transition: all ease 0.5s;
}

.newcont .newlist .necom .cems .more a span {
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    position: relative;
    top: -0.01 rem;
    margin-left: 0.05rem;
}

.newcont .newlist .necom .cems .more a span img {
    width: 100%;
    display: block;
}

.newcont .newlist .necom .cems .more a:hover {
    transform: scale(1.1);
}

.newcont .newpers {
    width: 100%;
    font-size: 0;
    position: relative;
    margin-bottom: 0.2rem;
}

.newcont .newpers .swiper-container {
    padding-bottom: 0.4rem;
}

.newcont .newpers .swiper-slide {
    width: 100%;
    background-color: #eff9ff;
    font-size: 0;
}

.newcont .newpers .swiper-slide .imgs {
    display: inline-block;
    vertical-align: middle;
    width: calc(665 / 1520 * 100%);
    position: relative;
    overflow: hidden;
}

.newcont .newpers .swiper-slide .imgs a {
    width: 100%;
    display: block;
}

.newcont .newpers .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 56.32%;
    transition: all ease 0.5s;
}

.newcont .newpers .swiper-slide .imgs:hover .img {
    transform: scale(1.1);
}

.newcont .newpers .swiper-slide .eom {
    display: inline-block;
    vertical-align: middle;
    width: calc(855 / 1520 * 100%);
    padding: 0.4rem 0.9rem;
}

.newcont .newpers .swiper-slide .eom .time {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
}

.newcont .newpers .swiper-slide .eom .time span {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.newcont .newpers .swiper-slide .eom .time span img {
    width: 100%;
    display: block;
}

.newcont .newpers .swiper-slide .eom .xt {
    width: 100%;
    display: block;
    color: #111;
    font-weight: bold;
    line-height: 1.6;
    margin: 0.1rem 0;
}

.newcont .newpers .swiper-slide .eom .xt:hover {
    color: var(--themes);
}

.newcont .newpers .swiper-slide .eom .xm {
    width: 100%;
    color: #999;
    line-height: 1.7;
    margin: 0.15rem 0;
}

.newcont .newpers .swiper-slide .eom .more {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-top: 0.25rem;
}

.newcont .newpers .swiper-slide .eom .more a {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    padding: 0 0.2rem;
    color: #fff;
    line-height: 2.8;
    border-radius: 1.4em;
    transition: all ease 0.5s;
}

.newcont .newpers .swiper-slide .eom .more a span {
    display: inline-block;
    vertical-align: middle;
    width: 0.32rem;
    height: 0.32rem;
    position: relative;
    top: -0.02rem;
    border-radius: 50%;
    margin-left: 0.35rem;
    background-color: rgba(255, 255, 255, 0.2);
}

.newcont .newpers .swiper-slide .eom .more a span img {
    width: 100%;
    display: block;
}

.newcont .newpers .swiper-slide .eom .more a:hover {
    transform: scale(1.05);
}

.newcont .newpers .swiper-pagination {
    bottom: 0;
}

.newcont .newpers .swiper-pagination-bullet {
    background-color: #999;
    opacity: 1;
}

.newcont .newpers .swiper-pagination-bullet-active {
    background-color: var(--themes);
    width: 12px;
    height: 12px;
}

@media (max-width: 800px) {
    .newcont {
        padding: 0.5rem 0;
    }

    .newcont .newlist {
        width: 100%;
    }
}

.pages {
    width: 100%;
    padding: 0.4rem 0;
    font-size: 0;
    text-align: center;
}

.pages .page {
    display: inline-block;
    vertical-align: middle;
    width: 0.48rem;
    height: 0.48rem;
    line-height: calc(0.48rem - 1px);
    text-align: center;
    color: #666;
    background-color: #fff;
    margin: 0 0.07rem;
    border-radius: 0.225rem;
    box-sizing: border-box;
}

.pages .page.ltn {
    background-image: url("/static/en/images/b5.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.pages .page.rtn {
    background-image: url("/static/en/images/b6.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.pages .page.on {
    background-color: var(--themes);
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    box-shadow: 0px 10px 30px 0px rgba(0, 65, 62, 0.1);
}

.pages .page.ltn:hover {
    background-color: #fff;
    background-image: url("/static/en/images/b3.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.pages .page.on.ltn {
    background-color: #fff;
    background-image: url("/static/en/images/b3.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.pages .page.on.rtn {
    background-color: #fff;
    background-image: url("/static/en/images/b4.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.pages .page.rtn:hover {
    background-color: #fff;
    background-image: url("/static/en/images/b4.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.pages .page.auto {
    width: auto;
    padding: 0 0.3rem;
    border-radius: 0.225rem;
}

.pages .page:hover {
    background-color: var(--themes);
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    box-shadow: 0px 10px 30px 0px rgba(0, 65, 62, 0.1);
}

@media (max-width: 900px) {
    .pages .page {
        width: 0.8rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 0.4rem;
    }

    .pages .page.auto {
        border-radius: 0.4rem;
    }
}

.details {
    width: 100%;
    padding: 1rem 0;
    position: relative;
    z-index: 4;
}

.details .detail {
    width: 100%;
    position: relative;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.details .detail .del {
    display: inline-block;
    vertical-align: top;
    width: calc(1140 / 1520 * 100%);
}

.details .detail .del .dit {
    width: 100%;
    color: #000;
    line-height: 1.3;
    font-weight: bold;
    margin-bottom: 0.15rem;
}

.details .detail .del .dim {
    width: 100%;
    font-size: 0;
    padding: 0.1rem 0;
}

.details .detail .del .dim .pm {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
    margin-right: 0.24rem;
}

.details .detail .del .dim .share {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.details .detail .del .dim .share .sm {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
}

.details .detail .del .dim .share .am {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
    position: relative;
    width: 0.2rem;
    height: 0.2rem;
    min-width: 18px;
    min-height: 18px;
    margin-right: 0.12rem;
}

.details .detail .del .dim .share .am a {
    width: 100%;
    display: block;
}

.details .detail .del .dim .share .am .comd {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 1.3rem;
    padding: 0.08rem;
    background-color: #fff;
    border-radius: 0.05rem;
    display: none;
}

.details .detail .del .dim .share .am .comd img {
    width: 100%;
    display: block;
}

.details .detail .del .dim .share .am:hover .comd {
    display: block;
}

.details .detail .del .dinp {
    width: 100%;
    padding: 0.3rem 0;
    margin: 0.25rem 0;
    border-top: solid 1px #e1eef8;
    border-bottom: solid 1px #e1eef8;
    color: #666;
    line-height: 1.75;
}

.details .detail .del .dinp p {
    color: #666;
    word-break: break-word;
    line-height: 1.75;
}

.details .detail .del .dot {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.details .detail .del .dot .dol {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
    padding-right: 0.3rem;
}

.details .detail .del .dot .dol .dtn {
    width: 100%;
    display: block;
    color: #333;
    line-height: 1.8;
    padding: 0.04rem 0;
}

.details .detail .del .dot .dol .dtn:hover {
    color: var(--themes);
}

.details .detail .del .dot .dor {
    display: inline-block;
    vertical-align: middle;
}

.details .detail .del .dot .back {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    color: #fff;
    line-height: 2.8;
    border-radius: 1.4em;
    padding: 0 0.24rem;
}

.details .detail .del .dot .back span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.1rem;
    width: 0.18rem;
    margin-left: 0.25rem;
}

.details .detail .del .dot .back span img {
    width: 100%;
    display: block;
}

.details .detail .der {
    display: inline-block;
    vertical-align: top;
    width: calc(285 / 1520 * 100%);
}

.details .detail .der .rop {
    width: 100%;
    font-size: 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}

.details .detail .der .rop .rt {
    display: inline-block;
    vertical-align: middle;
    color: #000;
    font-weight: bold;
    line-height: 1.5;
}

.details .detail .der .rop .em {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.5;
}

.details .detail .der .rop .em:hover {
    color: var(--themes);
}

.details .detail .der .derlist {
    width: 100%;
}

.details .detail .der .derlist .drem {
    width: 100%;
    font-size: 0;
    margin-bottom: 0.3rem;
}

.details .detail .der .derlist .drem a {
    width: 100%;
    display: block;
}

.details .detail .der .derlist .drem .imgs {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.details .detail .der .derlist .drem .imgs .img {
    width: 100%;
    padding-top: 66.66%;
    transition: all ease 0.5s;
}

.details .detail .der .derlist .drem .rod {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 0.2rem;
    background-color: #eff9ff;
    border-top: solid 2px var(--themes);
}

.details .detail .der .derlist .drem .rod .rm {
    width: 100%;
    color: #222;
    line-height: 1.5;
    max-height: 3em;
}

.details .detail .der .derlist .drem .rod .time {
    width: 100%;
    color: #999;
    line-height: 1.5;
    margin-top: 0.1rem;
}

.details .detail .der .derlist .drem:hover .imgs .img {
    transform: scale(1.1);
}

.details .detail .der .derlist .drem:hover .rod .rm {
    color: var(--themes);
}

.details .detail .der.fixed {
    width: 2.85rem;
    position: fixed;
    right: 50%;
    margin-right: -7.6rem;
    top: 1rem;
}

.details .detail .der.bot {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 0;
    top: auto;
    width: 2.85rem;
}

@media (max-width: 1420px) {
    .details .detail .der.fixed {
        width: 2.7rem;
        margin-right: -45%;
    }

    .details .detail .der.bot {
        position: absolute;
        right: 0;
        bottom: 0;
        margin-right: 0;
        top: auto;
        width: 2.7rem;
    }
}

@media (max-width: 800px) {
    .details {
        padding: 0.5rem 0;
    }
}

.casesd {
    width: 100%;
    padding: 1rem 0 1rem;
}

.casesd .casedlis {
    width: 100%;
    font-size: 0;
}

.casesd .casedlis .casem {
    width: 100%;
    font-size: 0;
    background-color: #fff;
}

.casesd .casedlis .casem a {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.casesd .casedlis .casem .imgs {
    display: inline-block;
    vertical-align: middle;
    width: calc(456/ 1520 * 100%);
    position: relative;
    overflow: hidden;
}

.casesd .casedlis .casem .imgs .img {
    width: 100%;
    padding-top: 75%;
    transition: all ease 0.5s;
}

.casesd .casedlis .casem .oem {
    display: inline-block;
    vertical-align: middle;
    width: calc(1054 / 1520 * 100%);
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.casesd .casedlis .casem .oem .eml {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
}

.casesd .casedlis .casem .oem .eml .eit {
    width: 100%;
    color: #111;
    line-height: 1.5;
    padding-left: 0.12rem;
    position: relative;
    font-weight: bold;
}

.casesd .casedlis .casem .oem .eml .eit:after {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.04rem;
    height: 0.2rem;
    background-color: var(--themes);
}

.casesd .casedlis .casem .oem .eml .eim {
    width: 100%;
    color: #999;
    line-height: 1.5;
    margin-top: 0.2rem;
}

.casesd .casedlis .casem .oem .eml .eim p {
    color: #999;
    line-height: 1.5;
}

.casesd .casedlis .casem .oem .emm {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.8rem;
    width: 1px;
    background-color: rgba(188, 215, 231, 0.5);
    height: 1rem;
    transform: rotate(30deg);
}

.casesd .casedlis .casem .oem .emr {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.casesd .casedlis .casem .oem .emr .more {
    display: inline-block;
    vertical-align: middle;
    color: var(--themes);
    line-height: 1.5;
}

.casesd .casedlis .casem .oem .emr .more span {
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    margin-left: 0.05rem;
    position: relative;
    top: -0.01rem;
}

.casesd .casedlis .casem .oem .emr .more span img {
    width: 100%;
    display: block;
}

.casesd .casedlis .casem:hover {
    background-color: #eff9ff;
}

.casesd .casedlis .casem:hover .imgs .img {
    transform: scale(1.1);
}

.casesd .casedlis .casem+.casem {
    margin-top: 0.3rem;
}

@media (max-width: 800px) {
    .casesd {
        padding: 0.5rem 0;
    }
}

.cetails {
    width: 100%;
    padding: 1rem 0;
}

.cetails .cetalper {
    width: 100%;
    position: relative;
}

.cetails .cetalper .swiper-slide {
    width: 100%;
}

.cetails .cetalper .swiper-slide a {
    width: 100%;
    display: block;
}

.cetails .cetalper .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.cetails .cetalper .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 61.90%;
    transition: all ease 0.5s;
}

.cetails .cetalper .swiper-slide .sim {
    width: 100%;
    text-align: center;
    color: #222;
    line-height: 1.6;
    margin-top: 0.2rem;
}

.cetails .cetalper .swiper-slide:hover .imgs .img {
    transform: scale(1.1);
}

.cetails .cetalper .swiper-slide:hover .sim {
    color: var(--themes);
}

.cetails .cetalper .btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(0, 155, 222, 0.2);
    transition: all ease 0.5s;
}

.cetails .cetalper .btn img {
    width: 100%;
    display: block;
}

.cetails .cetalper .btn img:first-child {
    display: block;
}

.cetails .cetalper .btn img:last-child {
    display: none;
}

.cetails .cetalper .btn:hover {
    background-color: var(--themes);
}

.cetails .cetalper .btn:hover img:first-child {
    display: none;
}

.cetails .cetalper .btn:hover img:last-child {
    display: block;
}

.cetails .cetalper .bl {
    left: -0.5rem;
}

.cetails .cetalper .br {
    right: -0.5rem;
}

@media (max-width: 800px) {
    .cetails .cetalper .bl {
        left: 0rem;
    }

    .cetails .cetalper .br {
        right: 0rem;
    }
}

.forms {
    width: 100%;
    padding: 0.9rem 0;
}

.forms .form {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.forms .form .fol {
    display: inline-block;
    vertical-align: top;
    width: calc(700 / 1520 * 100%);
}

.forms .form .fol .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.forms .form .fol .imgs .img {
    width: 100%;
    padding-top: 68.57%;
}

.forms .form .for {
    display: inline-block;
    vertical-align: top;
    width: calc(740 / 1520 * 100%);
}

.forms .form .for form {
    width: 100%;
    display: block;
}

.forms .form .for .input {
    width: 100%;
    display: block;
    background-color: #fff;
    margin-bottom: 10px;
}

.forms .form .for .input .int {
    width: 100%;
    display: block;
    padding: 0 0.2rem;
    color: #666;
    line-height: 3;
    height: 3em;
    border: none;
    background-color: transparent;
}

.forms .form .for .input.yzm {
    display: flex;
}

.forms .form .for .input.yzm .yzm {
    display: inline-block;
    vertical-align: middle;
    height: 3em;
}

.forms .form .for .input.yzm .yzm img {
    height: 100%;
    display: block;
}

.forms .form .for .input.yzm .int {
    flex: 1;
    display: inline-block;
    vertical-align: middle;
}

.forms .form .for .text {
    width: 100%;
    margin-bottom: 10px;
}

.forms .form .for .text .area {
    width: 100%;
    border: none;
    padding: 0.2rem;
    line-height: 1.5;
    color: #666;
    background-color: #fff;
}

.forms .form .for .sub {
    width: 100%;
    font-size: 0;
    margin-top: 0.3rem;
}

.forms .form .for .sub .stn {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    color: #fff;
    line-height: 3;
    height: 3em;
    padding: 0 0.7rem;
    cursor: pointer;
    border: none;
    border-radius: 1.5em;
}

.contacts {
    width: 100%;
    padding: 0.8rem 0;
}

.contacts .cont {
    width: 100%;
    font-size: 0;
    margin-bottom: 0.3rem;
}

.contacts .cont .citem {
    display: inline-block;
    vertical-align: middle;
    width: 25%;
    text-align: center;
    padding: 0.2rem 0;
}

.contacts .cont .citem .ic {
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background-color: rgba(0, 155, 222, 0.2);
    margin: 0 auto 0.14rem;
}

.contacts .cont .citem .ic img {
    width: 100%;
    display: block;
}

.contacts .cont .citem .pm {
    width: 100%;
    text-align: center;
    color: #111;
    line-height: 1.5;
}

.contacts .cont .citem .codm {
    width: 1.27rem;
    display: block;
    margin: 0 auto 0.2rem;
}

.contacts .cont .citem .codm img {
    width: 100%;
    display: block;
}

.joins {
    width: 100%;
    padding: 0.8rem 0;
}

.joins .livelist {
    width: 100%;
    font-size: 0;
}

.joins .livelist .livem {
    display: inline-block;
    vertical-align: top;
    width: calc(487 / 1520 * 100%);
    margin-bottom: 0.3rem;
    margin-right: calc(29 / 1520 * 100%);
    margin-bottom: 0.3rem;
}

.joins .livelist .livem a {
    width: 100%;
    display: block;
}

.joins .livelist .livem .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.joins .livelist .livem .imgs .img {
    width: 100%;
    padding-top: 75%;
    transition: all ease 0.5s;
}

.joins .livelist .livem .vom {
    width: 100%;
    font-size: 0;
    padding: 0.05rem 0;
}

.joins .livelist .livem .vom:before {
    content: ' ';
    position: absolute;
    bottom: 0;
    height: 0.02rem;
    width: 100%;
    z-index: 1;
    left: 0;
    background-color: #e5f0f8;
}

.joins .livelist .livem .vom:after {
    content: ' ';
    position: absolute;
    bottom: 0;
    height: 0.02rem;
    width: 0%;
    z-index: 3;
    left: 0;
    background-color: var(--themes);
    transition: all ease 0.5s;
}

.joins .livelist .livem .vom .em {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 5px);
    padding-right: 0.2rem;
    color: #222;
    line-height: 3;
}

.joins .livelist .livem .vom .rc {
    display: inline-block;
    vertical-align: middle;
    width: 5px;
}

.joins .livelist .livem .vom .rc img {
    width: 100%;
    display: block;
}

.joins .livelist .livem:nth-child(3n) {
    margin-right: 0;
}

.joins .livelist .livem:hover .imgs .img {
    transform: scale(1.1);
}

.joins .livelist .livem:hover .vom .em {
    color: var(--themes);
}

.joins .livelist .livem:hover .vom:after {
    width: 100%;
}

.joins .more {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-top: 0.25rem;
    text-align: center;
}

.joins .more a {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    padding: 0 0.2rem;
    color: #fff;
    line-height: 2.8;
    border-radius: 1.4em;
    transition: all ease 0.5s;
}

.joins .more a span {
    display: inline-block;
    vertical-align: middle;
    width: 0.32rem;
    height: 0.32rem;
    position: relative;
    top: -0.02rem;
    border-radius: 50%;
    margin-left: 0.35rem;
    background-color: rgba(255, 255, 255, 0.2);
}

.joins .more a span img {
    width: 100%;
    display: block;
}

.joins .more a:hover {
    transform: scale(1.05);
}

.joins .litem {
    width: 100%;
}

.joins .litem+.litem {
    margin-top: 1rem;
}

.inlets {
    width: 100%;
    position: relative;
    padding: 0.8rem 0;
}

.inlets .inletlis {
    width: 100%;
    font-size: 0;
}

.inlets .inletlis .intem {
    display: inline-block;
    vertical-align: top;
    width: calc(750 / 1520 * 100%);
    margin-right: calc(19 / 1520 * 100%);
    margin-bottom: 0.2rem;
    box-shadow: 0px 0px 30px 0px rgba(0, 155, 222, 0.04);
}

.inlets .inletlis .intem a {
    width: 100%;
    display: block;
    position: relative;
    top: 0;
    transition: all ease 0.5s;
    background-color: #fff;
    padding: 0.6rem 0.5rem;
}

.inlets .inletlis .intem .eml {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 100px);
    padding-right: 0.2rem;
}

.inlets .inletlis .intem .eml .et {
    width: 100%;
    color: #222;
    line-height: 1.5;
}

.inlets .inletlis .intem .eml .ep {
    width: 100%;
    color: #111;
    line-height: 1.5;
    margin-top: 0.1rem;
}

.inlets .inletlis .intem .emr {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}

.inlets .inletlis .intem .emr img {
    width: 100%;
    display: block;
}

.inlets .inletlis .intem:nth-child(2n) {
    margin-right: 0;
}

.inlets .inletlis .intem:hover a {
    top: -0.1rem;
}

.devices {
    width: 100%;
    padding: 0.8rem 0;
}

.devices .devpers {
    width: 100%;
    font-size: 0;
    text-align: center;
}

.devices .devpers .denav {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    background-color: #fff;
    padding: 0.1rem;
    border-radius: calc(1.5em + 0.1rem);
}

.devices .devpers .denav .swiper-slide {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    font-size: 0;
}

.devices .devpers .denav .swiper-slide a {
    display: inline-block;
    vertical-align: middle;
    line-height: 3;
    padding: 0 0.45rem;
    color: #444;
    border-radius: 1.5em;
}

.devices .devpers .denav .swiper-slide.on a {
    background-color: var(--themes);
    color: #fff;
}

.devices .devcont {
    width: 100%;
    margin-top: 0.6rem;
}

.devices .devcont .deitm {
    width: 100%;
    display: none;
}

.devices .devcont .deitm.on {
    display: block;
}

.devices .devcont .devlist {
    width: 100%;
    font-size: 0;
}

.devices .devcont .devlist .devam {
    display: inline-block;
    vertical-align: top;
    width: calc(487 / 1520 * 100%);
    margin-bottom: 0.3rem;
    margin-right: calc(29 / 1520 * 100%);
    background-color: #eff9ff;
}

.devices .devcont .devlist .devam a {
    width: 100%;
    display: block;
    padding: 0.5rem 0.3rem;
}

.devices .devcont .devlist .devam .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.devices .devcont .devlist .devam .imgs .img {
    width: 100%;
    padding-top: 61.90%;
    transition: all ease 0.5s;
}

.devices .devcont .devlist .devam .vom {
    width: 100%;
    margin-top: 0.2rem;
    text-align: center;
}

.devices .devcont .devlist .devam .vom .vt {
    width: 100%;
    color: #111;
    height: 3em;
    line-height: 1.5;
    overflow : hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word;
    white-space: pre-wrap;
}

.devices .devcont .devlist .devam .vom .vim {
    width: 100%;
    text-align: center;
    color: #999;
    line-height: 1.5;
    height: 3em;
    margin: 0.14rem 0 0.24rem;
}

.devices .devcont .devlist .devam .vom .add {
    width: 100%;
    text-align: center;
    line-height: 1.5;
    margin-top: 0.15rem;
    color: rgba(136, 136, 136, 0.4);
}

.devices .devcont .devlist .devam:nth-child(3n) {
    margin-right: 0;
}

.devices .devcont .devlist .devam:hover {
    background-color: var(--themes);
}

.devices .devcont .devlist .devam:hover .imgs .img {
    transform: scale(1.1);
}

.devices .devcont .devlist .devam:hover .vom .vt,
.devices .devcont .devlist .devam:hover .vom .vim {
    color: #fff;
}

.devices .devcont .devlist .devam:hover .vom .add {
    color: #fff;
}

.tetails {
    width: 100%;
    padding: 0.8rem 0;
}

.tetails .tetail {
    width: 100%;
    font-size: 0;
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.tetails .tetail .tel {
    display: inline-block;
    vertical-align: middle;
    width: calc(680 / 1520 * 100%);
    background-color: #fff;
}

.tetails .tetail .tel .petop {
    width: 100%;
    position: relative;
    border-bottom: solid 1px #eaf6fc;
}

.tetails .tetail .tel .petop .swiper-slide {
    width: 100%;
    position: relative;
}

.tetails .tetail .tel .petop .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tetails .tetail .tel .petop .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 75%;
    transition: all ease 0.5s;
}

.tetails .tetail .tel .pebot {
    width: 100%;
    position: relative;
    padding: 0.2rem;
}

.tetails .tetail .tel .pebot .swiper-container {
    width: calc(100% - 0.8rem);
    display: block;
    margin: 0 auto;
}

.tetails .tetail .tel .pebot .swiper-slide {
    width: 100%;
    position: relative;
    cursor: pointer;
    opacity: 0.5;
    transition: all ease 0.5s;
}

.tetails .tetail .tel .pebot .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tetails .tetail .tel .pebot .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 68.75%;
    transition: all ease 0.5s;
}

.tetails .tetail .tel .pebot .swiper-slide.on {
    opacity: 1;
}

.tetails .tetail .tel .pebot .btn {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    opacity: 0.7;
    transition: all ease 0.5s;
    cursor: pointer;
}

.tetails .tetail .tel .pebot .btn img {
    width: 100%;
    display: block;
}

.tetails .tetail .tel .pebot .btn:hover {
    opacity: 1;
}

.tetails .tetail .tel .pebot .bl {
    left: calc(0.4rem + 4px);
}

.tetails .tetail .tel .pebot .br {
    right: calc(0.4rem + 4px);
}

.tetails .tetail .ter {
    width: calc(760 / 1520 * 100%);
    display: inline-block;
    vertical-align: middle;
}

.tetails .tetail .ter .tir {
    width: 100%;
    color: #111;
    font-weight: bold;
    line-height: 1.5;
    word-wrap: break-word;
    margin-bottom: 0.3rem;
}

.tetails .tetail .ter .vtem {
    width: 100%;
}

.tetails .tetail .ter .vtem .lvrom {
    width: 100%;
}

.tetails .tetail .ter .vtem .lvrom .tic {
    width: 100%;
    color: #111;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.tetails .tetail .ter .vtem .lvrom .tic span {
    display: inline-block;
    vertical-align: middle;
    width: 0.24rem;
    min-width: 20px;
    margin-right: 0.1rem;
}

.tetails .tetail .ter .vtem .lvrom .tic span img {
    width: 100%;
    display: block;
}

.tetails .tetail .ter .vtem .lvrom .tinp {
    width: 100%;
    color: #666;
    line-height: 2;
    word-break: break-word;
}

.tetails .tetail .ter .vtem .lvrom .tinp p {
    color: #666;
    word-break: break-word;
    line-height: 2;
}

.tetails .tetail .ter .vtem .lvrom .liuls {
    width: 100%;
    border: solid 1px #d9e7ef;
}

.tetails .tetail .ter .vtem .lvrom .liuls .li {
    width: 100%;
    color: #666;
    line-height: 1.5;
    padding: 0.15rem 0.2rem;
}

.tetails .tetail .ter .vtem .lvrom .liuls .li+.li {
    border-top: solid 1px #d9e7ef;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd {
    width: 100%;
    font-size: 0;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr {
    width: 100%;
    display: flex;
    border: solid 1px #d4e2e9;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr+.tr {
    border-top: none;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .td {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tdm {
    width: 100%;
    color: #666;
    line-height: 1.5;
    padding: 0.1rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr.heac {
    background-color: var(--themes);
    border: solid 1px var(--themes);
    border-right: rgba(217, 231, 239, 0.2);
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr.heac .tdm {
    color: #fff;
}

.tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom+.vrom .tr {
    border-left: none;
}

.tetails .tetail .ter .vtem .lvrom+.lvrom {
    margin-top: 0.35rem;
}

.relateds {
    width: 100%;
    padding: 0.8rem 0;
}

.relateds .repeers {
    width: 100%;
    font-size: 0;
    position: relative;
}

.relateds .repeers .swiper-container {
    padding-bottom: 0.4rem;
}

.relateds .repeers .repem {
    display: inline-block;
    vertical-align: top;
    width: calc(360 / 1520 * 100%);
    margin-right: calc(26 / 1520 * 100%);
    border: solid 1px #e8eff4;
    background-color: #fff;
}

.relateds .repeers .repem a {
    width: 100%;
    display: block;
    padding: 0.3rem;
}

.relateds .repeers .repem .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.relateds .repeers .repem .imgs .img {
    width: 100%;
    padding-top: 75%;
    transition: all ease 0.5s;
}

.relateds .repeers .repem .eim {
    width: 100%;
    text-align: center;
    color: #111;
    line-height: 1.7;
    margin-top: 0.2rem;
    height: 3.4em;
}

.relateds .repeers .repem:nth-child(4n) {
    margin-right: 0;
}

.relateds .repeers .swiper-pagination {
    bottom: 0;
}

.relateds .repeers .swiper-pagination-bullet {
    background-color: #cde9fb;
    opacity: 1;
    width: 10px;
    height: 10px;
}

.relateds .repeers .swiper-pagination-bullet-active {
    background-color: var(--themes);
}

.jionsd {
    width: 100%;
    font-size: 0;
    padding: 0.8rem 0;
}

.jionsd .jsond {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.jionsd .jsond .jsl {
    display: inline-block;
    vertical-align: top;
    width: calc(1140 / 1520 * 100%);
}

.jionsd .jsond .jsl .jotop {
    width: 100%;
    font-size: 0;
    margin-bottom: 0.5rem;
}

.jionsd .jsond .jsl .jotop .jol {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.jionsd .jsond .jsl .jotop .jol .select {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    border: none;
    text-align: left;
    position: relative;
    width: auto;
    margin-right: 0.3rem;
    margin-bottom: 0.1rem;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 0;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .select-value {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    line-height: 3em;
    height: 3em;
    color: #333;
    cursor: pointer;
    background-color: transparent;
    padding-right: 0.3rem;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con select {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 0;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con select option {
    color: #666;
    font-size: .16rem;
    line-height: 2.5;
    background: #fff;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .seluls {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 100%;
    max-height: 360px;
    overflow: auto;
    display: none;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff;
    z-index: 123;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    overflow: auto;
    /*滚动条里面小方块*/
    /*滚动条里面轨道*/
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .seluls .option {
    width: 100%;
    color: #666;
    line-height: 2.5;
    background: #fff;
    cursor: pointer;
    padding: 0 0.15rem;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .seluls .option:hover {
    background-color: var(--themes);
    color: #fff;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .seluls .option+.option {
    border-top: solid 1px #ddd;
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .seluls::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .seluls::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 155, 222, 0.3);
    background: rgba(0, 155, 222, 0.3);
    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.jionsd .jsond .jsl .jotop .jol .select .select-con .seluls::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

.jionsd .jsond .jsl .jotop .jol .select .select-con:after {
    display: inline-block;
    content: "";
    position: absolute;
    right: .1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 7px;
    height: 4px;
    background-image: url("/static/en/images/xx.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.jionsd .jsond .jsl .jotop .jol .wxm {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3rem;
    margin-bottom: 0.1rem;
    line-height: 1.5;
    color: #999;
}

.jionsd .jsond .jsl .jotop .jol .searchm {
    display: inline-block;
    vertical-align: middle;
    width: 5rem;
    border: solid 1px #e5e5e5;
    overflow: hidden;
    border-radius: 1.6em;
    background-color: #fff;
}

.jionsd .jsond .jsl .jotop .jol .searchm .sem {
    width: 100%;
    font-size: 0;
    display: flex;
    padding-left: 0.2rem;
    align-items: center;
}

.jionsd .jsond .jsl .jotop .jol .searchm .sem .pic {
    display: inline-block;
    vertical-align: middle;
    width: 0.2rem;
    height: 0.2rem;
    width: 20px;
    height: 20px;
    margin-right: 0.14rem;
}

.jionsd .jsond .jsl .jotop .jol .searchm .sem .pic img {
    width: 100%;
    height: 100%;
    display: block;
}

.jionsd .jsond .jsl .jotop .jol .searchm .sem .int {
    flex: 1;
    display: inline-block;
    vertical-align: middle;
    height: 3.2em;
    line-height: 3.2;
    border: none;
    background-color: transparent;
}

.jionsd .jsond .jsl .jotop .jol .searchm .sem .stn {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.jionsd .jsond .jsl .jotop .jol .searchm .sem .stn .ins {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    cursor: pointer;
    padding: 0 0.3rem;
    background-color: var(--themes);
    color: #fff;
    line-height: 3.2;
    height: 3.2em;
    border: none;
}

.jionsd .jsond .jsl .recrtlis {
    width: 100%;
}

.jionsd .jsond .jsl .recrtlis .ril {
    width: 100%;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle {
    width: 100%;
    padding: 0.22rem 0;
    cursor: pointer;
    border-bottom: solid 1px #e1eef8;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .rit {
    width: 100%;
    color: #111;
    font-weight: bold;
    line-height: 1.5;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .recom {
    width: 100%;
    margin-top: 0.05rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rel {
    display: inline-block;
    vertical-align: middle;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rel .sm {
    display: inline-block;
    vertical-align: middle;
    color: #999;
    line-height: 1.6;
    margin-right: 0.3rem;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer {
    display: inline-block;
    vertical-align: middle;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer .time {
    width: 100%;
    color: #999;
    line-height: 1.5;
    margin-top: 0.06rem;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer .time span {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    position: relative;
    top: -0.01rem;
    margin-right: 0.05rem;
}

.jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer .time span img {
    width: 100%;
    display: block;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp {
    width: 100%;
    background-color: #eff9ff;
    position: relative;
    padding: 0.5rem;
    display: none;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    border: solid 0.1rem;
    left: 0.3rem;
    bottom: 100%;
    border-color: transparent transparent #eff9ff transparent;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .rules {
    width: 100%;
    font-size: 0;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem {
    width: 46%;
    margin-right: 8%;
    margin-bottom: 0.3rem;
    display: inline-block;
    vertical-align: top;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem .rit {
    width: 100%;
    color: #222;
    line-height: 1.5;
    margin-bottom: 0.15rem;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem .pul {
    width: 100%;
    color: #666;
    line-height: 1.7;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem .pul p {
    color: #666;
    line-height: 1.7;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem:nth-child(2n) {
    margin-right: 0;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .remd {
    width: 100%;
    font-size: 0;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .remd a {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    color: #fff;
    line-height: 3.2;
    border-radius: 1.6em;
    padding: 0 0.4rem;
    transition: all ease 0.5s;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .remd a span {
    display: inline-block;
    vertical-align: middle;
    width: 0.19rem;
    position: relative;
    top: -0.01rem;
    margin-left: 0.1rem;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .remd a span img {
    width: 100%;
    display: block;
}

.jionsd .jsond .jsl .recrtlis .ril .reconp .remd a:hover {
    transform: scale(1.05);
}

.jionsd .jsond .jsl .recrtlis .ril:first-child .ritle {
    border-top: solid 1px #e1eef8;
}

.jionsd .jsond .jsl .recrtlis .ril.show .ritle {
    border-bottom: solid 1px transparent;
}

.jionsd .jsond .jsl .recrtlis .ril.show .ritle .recom {
    display: none;
}

.jionsd .jsond .jsr {
    display: inline-block;
    vertical-align: top;
    width: calc(285 / 1520 * 100%);
}

.jionsd .jsond .jsr .jir {
    width: 100%;
    color: #222;
    line-height: 1.5;
    padding-bottom: 0.2rem;
    border-bottom: solid 1px #e1eef8;
}

.jionsd .jsond .jsr .jir span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    margin-right: 0.06rem;
}

.jionsd .jsond .jsr .jir span img {
    width: 100%;
    display: block;
}

.jionsd .jsond .jsr .jsrlist {
    width: 100%;
}

.jionsd .jsond .jsr .jsrlist .jitm {
    width: 100%;
    display: block;
    border-bottom: solid 1px #e1eef8;
}

.jionsd .jsond .jsr .jsrlist .jitm a {
    width: 100%;
    display: block;
    padding: 0.25rem 0;
}

.jionsd .jsond .jsr .jsrlist .jitm .jm {
    width: 100%;
    color: #111;
    line-height: 1.5;
}

.jionsd .jsond .jsr .jsrlist .jitm .time {
    width: 100%;
    color: #999;
    line-height: 1.5;
    margin-top: 0.06rem;
}

.jionsd .jsond .jsr .jsrlist .jitm .time span {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    position: relative;
    top: -0.01rem;
    margin-right: 0.05rem;
}

.jionsd .jsond .jsr .jsrlist .jitm .time span img {
    width: 100%;
    display: block;
}

.jionsd .jsond .jsr .jsrlist .jitm .time span img:first-child {
    display: block;
}

.jionsd .jsond .jsr .jsrlist .jitm .time span img:last-child {
    display: none;
}

.jionsd .jsond .jsr .jsrlist .jitm:hover .jm {
    color: var(--themes);
}

.jionsd .jsond .jsr .jsrlist .jitm:hover .time {
    color: var(--themes);
}

.jionsd .jsond .jsr .jsrlist .jitm:hover .time span img:first-child {
    display: none;
}

.jionsd .jsond .jsr .jsrlist .jitm:hover .time span img:last-child {
    display: block;
}

.jionsd .jsond .jsr.fixed {
    width: 2.85rem;
    position: fixed;
    right: 50%;
    margin-right: -7.6rem;
    top: 1rem;
}

.jionsd .jsond .jsr.bot {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 0;
    top: auto;
    width: 2.85rem;
}

@media (max-width: 1420px) {
    .jionsd .jsond .jsr.fixed {
        width: 2.7rem;
        margin-right: -45%;
    }

    .jionsd .jsond .jsr.bot {
        position: absolute;
        right: 0;
        bottom: 0;
        margin-right: 0;
        top: auto;
        width: 2.7rem;
    }
}

.services {
    width: 100%;
    padding: 0.8rem 0;
}

.services .serpers {
    width: 100%;
}

.services .serpers .swiper-slide {
    width: 100%;
}

.services .serpers .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.services .serpers .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 89.28%;
    transition: all ease 0.5s;
}

.services .serpers .swiper-slide .som {
    width: 100%;
    padding: 0.3rem;
    background-color: #f0f9ff;
}

.services .serpers .swiper-slide .som .sim {
    width: 100%;
    color: #222;
    line-height: 1.5;
    height: 4.5em;
}

.services .serpers .swiper-slide .som .num {
    width: 100%;
    color: #d6e8f4;
    line-height: 1.5;
    margin-top: 0.08rem;
}

.services .serpers .swiper-slide:hover .imgs .img {
    transform: scale(1.1);
}

.services .serpers .swiper-slide:hover .som {
    background-color: var(--themes);
}

.services .serpers .swiper-slide:hover .som .sim,
.services .serpers .swiper-slide:hover .som .num {
    color: #fff;
}

.targets {
    width: 100%;
    padding: 1rem 0;
}

.targets .targpers {
    width: 100%;
}

.targets .targpers .swiper-slide {
    width: 100%;
}

.targets .targpers .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.targets .targpers .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 56.37%;
    transition: all ease 0.5s;
}

.targets .targpers .swiper-slide .xom {
    width: 100%;
    padding: 0.25rem 0;
    border-bottom: solid 1px #ddeef8;
}

.targets .targpers .swiper-slide .xom .xit {
    width: 100%;
    color: #222;
    line-height: 1.5;
}

.targets .targpers .swiper-slide .xom .xim {
    width: 100%;
    font-size: 0;
    margin-top: 0.08rem;
}

.targets .targpers .swiper-slide .xom .xim .km {
    display: inline-block;
    vertical-align: top;
    margin-right: 0.3rem;
    width: auto;
    color: #666;
    line-height: 1.5;
}

.targets .targpers .swiper-slide:hover .imgs .img {
    transform: scale(1.1);
}

.targets .targpers .swiper-slide:hover .xom {
    border-bottom: solid 1px var(--themes);
}

.targets .targpers .swiper-slide:hover .xom .xit {
    color: var(--themes);
}

.certificate {
    width: 100%;
    padding: 0.8rem 0;
}

.certificate .certper {
    width: 100%;
}

.certificate .certper .swiper-slide {
    width: 100%;
    background-color: #fff;
}

.certificate .certper .swiper-slide a {
    width: 100%;
    display: block;
    padding: 0.35rem;
}

.certificate .certper .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.certificate .certper .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 67.57%;
    transition: all ease 0.5s;
}

.certificate .certper .swiper-slide .vom {
    width: 100%;
    font-size: 0;
    padding-top: 0.2rem;
}

.certificate .certper .swiper-slide .vom .vt {
    display: inline-block;
    vertical-align: middle;
    color: #666;
    line-height: 1.5;
    width: calc(100% - 20px);
    padding-right: 0.1rem;
    color: #666;
}

.certificate .certper .swiper-slide .vom .ic {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
}

.certificate .certper .swiper-slide .vom .ic img {
    width: 100%;
    display: block;
}

.systems {
    width: 100%;
    padding: 0.8rem 0;
    overflow: hidden;
}

.systems .systper {
    width: 100%;
    position: relative;
}

.systems .systper:after {
    content: ' ';
    position: absolute;
    width: 15.29rem;
    height: 1.11rem;
    z-index: 1;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 72.2%;
    background-image: url("/static/en/images/bg15.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: repeat-x;
}

.systems .systper .swiper-container {
    position: relative;
    z-index: 2;
}

.systems .systper .swiper-slide {
    width: 100%;
    z-index: 3;
}

.systems .systper .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.systems .systper .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 67.2%;
    transition: all ease 0.5s;
}

.systems .systper .swiper-slide .sim {
    width: 100%;
    text-align: center;
    color: #666;
    line-height: 1.5;
    height: 4.5em;
    margin-top: 0.5rem;
}

@media (max-width: 800px) {
    .systems .systper:after {
        top: 59.2%;
    }
}

.researchs {
    width: 100%;
    position: relative;
}

.researchs .hei {
    width: 100%;
    position: relative;
}

.researchs .hei .ght {
    width: 100%;
    padding-top: 39.58%;
}

.researchs .imglist {
    width: 100%;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}

.researchs .imglist .item {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
    transition: all ease 0.8s;
}

.researchs .imglist .item.on {
    z-index: 3;
    opacity: 1;
}

.researchs .imglist .item.on .rox .rod {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.researchs .imglist .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.researchs .imglist .imgs .img {
    width: 100%;
    height: 100%;
    display: block;
}

.researchs .imglist .rox {
    position: absolute;
    z-index: 3;
    left: calc(200 / 1920 * 100%);
    top: 50%;
    transform: translateY(-50%);
    width: 5.6rem;
}

.researchs .imglist .rox .rod {
    width: 100%;
    opacity: 0;
    transform: translate3d(35%, 0, 0);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.researchs .imglist .rox .rc {
    width: 0.45rem;
    height: 0.45rem;
    display: block;
}

.researchs .imglist .rox .rc img {
    width: 100%;
    display: block;
}

.researchs .imglist .rox .rit {
    width: 100%;
    color: #fff;
    line-height: 1.5;
    margin: 0.1rem 0;
}

.researchs .imglist .rox .sinp {
    width: 100%;
    color: #fff;
    line-height: 1.6;
    max-height: 10em;
    overflow: auto;
}

.researchs .imglist .rox .sinp p {
    color: #fff;
    line-height: 1.6;
}

.researchs .resnav {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    background-color: rgba(17, 17, 17, 0.4);
}

.researchs .resnav .swiper-wrapper{
  align-items: stretch;
}

.researchs .resnav .swiper-slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    height: auto;
}

.researchs .resnav .swiper-slide .sol {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
}

.researchs .resnav .swiper-slide .sol .xs {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    margin-right: 0.1rem;
}

.researchs .resnav .swiper-slide .sol .dm {
    display: inline-block;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.researchs .resnav .swiper-slide .sor {
    display: inline-block;
    vertical-align: middle;
}

.researchs .resnav .swiper-slide.on,
.researchs .resnav .swiper-slide:hover {
    background-color: var(--themes);
}

.researchs .resnav .swiper-slide+.swiper-slide {
    border-left: solid 1px rgba(255, 255, 255, 0.2);
}
@media(max-width: 900px){
    .researchs .hei .ght{padding-top: 320px;}
    .researchs .imglist .rox{top: 20px;transform: translate(0,0);}
  }

.guarantee {
    width: 100%;
    position: relative;
    padding: 0.8rem 0;
}

.guarantee .guarpers {
    width: 100%;
}

.guarantee .guarpers .swiper-slide {
    width: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.guarantee .guarpers .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.guarantee .guarpers .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 143.71%;
    transition: all ease 0.5s;
}

.guarantee .guarpers .swiper-slide .vom {
    position: absolute;
    transition: all ease 0.8s;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    z-index: 2;
    left: 0;
    height: calc(1.5em + 0.8rem);
    padding: 0.4rem;
}

.guarantee .guarpers .swiper-slide .vom .vit {
    width: 100%;
    color: #fff;
    line-height: 1.5;
    text-align: center;
}

.guarantee .guarpers .swiper-slide .vom .vinps {
    width: 100%;
    margin-top: 0.4rem;
    color: #fff;
    line-height: 1.6;
    max-height: 2rem;
    overflow: auto;
}

.guarantee .guarpers .swiper-slide .vom .vinps p {
    color: #fff;
    line-height: 1.6;
}

.guarantee .guarpers .swiper-slide .vom .vinps::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.guarantee .guarpers .swiper-slide .vom .vinps::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.3);
    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.guarantee .guarpers .swiper-slide .vom .vinps::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

.guarantee .guarpers .swiper-slide.on .vom {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    background-color: var(--themes);
}

.channels {
    width: 100%;
    overflow: hidden;
}

.channels .chans {
    width: 100%;
    padding: 0.8rem 0;
}

.channels .chaem {
    width: 100%;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* align-items: center; */
}

.channels .chaem .cml {
    display: inline-block;
    vertical-align: middle;
    width: calc(633 / 1520 * 100%);
    position: relative;
    overflow: hidden;
}

.channels .chaem .cml .img {
    width: 100%;
    padding-top: 57.03%;
}

.channels .chaem .cmr {
    display: inline-block;
    vertical-align: middle;
    width: calc(800 / 1520 * 100%);
}

.channels .chaem .cmr .cir {
    width: 100%;
    color: #222;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 0.2rem;
}

.channels .chaem .cmr .pc {
    width: 100%;
    color: #222;
    line-height: 1.5;
    margin: 0.24rem 0 0.2rem;
}

.channels .chaem .cmr .cmrlist {
    width: 100%;
    font-size: 0;
}

.channels .chaem .cmr .cmrlist .cirm {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 0.8rem) / 5);
    position: relative;
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
    cursor: pointer;
}

.channels .chaem .cmr .cmrlist .cirm::after {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(100% - 1px);
    transform: translateX(-50%);
    width: 15px;
    height: 8px;
    background-image: url("/static/en/images/i8.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: none;
}

.channels .chaem .cmr .cmrlist .cirm .hei {
    width: 100%;
    padding-top: 100%;
}

.channels .chaem .cmr .cmrlist .cirm .com {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    border: solid 1px #d4e8f6;
}

.channels .chaem .cmr .cmrlist .cirm .com .rc {
    width: 0.4rem;
    height: 0.4rem;
    margin: 0 auto 0.1rem;
}

.channels .chaem .cmr .cmrlist .cirm .com .rc img {
    width: 100%;
    display: block;
}

.channels .chaem .cmr .cmrlist .cirm .com .cm {
    width: 100%;
    text-align: center;
    color: #222;
    line-height: 1.5;
    max-height: 3em;
}

.channels .chaem .cmr .cmrlist .cirm:nth-child(5n) {
    margin-right: 0;
}

.channels .chaem .cmr .cmrlist .cirm.on {
    border: solid 1px var(--themes);
}

.channels .chaem .cmr .cmrlist .cirm.on::after {
    display: block;
}

.channels .chaem .cmr .cmron {
    width: 100%;
    margin-top: 0.4rem;
}

.channels .chaem .cmr .cmron .cmrem {
    width: 100%;
    display: none;
}

.channels .chaem .cmr .cmron .cmrem.on {
    display: block;
}

.channels .chaem .cmr .cmron .cinp {
    width: 100%;
    color: #666;
    line-height: 1.75;
}

.channels .chaem .cmr .cmron .cinp p {
    color: #666;
    line-height: 1.75;
}

.channels .chaem .cmr .cmron .pind {
    width: 100%;
    font-size: 0;
    max-width: 450px;
    min-height: 0.8rem;
}

.channels .chaem .cmr .cmron .pind .pli {
    width: 47%;
    color: #666;
    line-height: 1.75;
    display: inline-block;
    vertical-align: top;
    margin-right: 6%;
    position: relative;
    padding-left: 0.11rem;
}

.channels .chaem .cmr .cmron .pind .pli::after {
    content: ' ';
    position: absolute;
    left: 0;
    width: 0.04rem;
    height: 0.04rem;
    background-color: #ddd;
    top: calc(0.875em - 0.02rem);
}

.channels .chaem .cmr .cmron .pind .pli:nth-child(2n) {
    margin-right: 0;
}

.channels .chans:nth-child(2n) .chaem .cmr .cmrlist .cirm::after {
    background-image: url("/static/en/images/i7.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.industrys {
    width: 100%;
    padding: 0.8rem 0;
}

.industrys .induper {
    width: 100%;
}

.industrys .induper .swiper-slide {
    width: 100%;
    position: relative;
}

.industrys .induper .swiper-slide a {
    width: 100%;
    display: block;
}

.industrys .induper .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.industrys .induper .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 100%;
    transition: all ease 0.5s;
}

.industrys .induper .swiper-slide .xit {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f0f9ff;
    border-radius: 0 0.2rem 0 0;
    text-align: center;
    padding: 0.3rem 0.3rem;
    color: #222;
}

.industrys .induper .swiper-slide:hover .imgs .img {
    transform: scale(1.1);
}

.industrys .induper .swiper-slide:hover .xit {
    background-color: var(--themes);
    color: #fff;
}

.counts {
    width: 100%;
    padding: 0.8rem 0;
}

.counts .citop {
    width: 100%;
    margin-bottom: 0.5rem;
}

.counts .citop .mip {
    width: 100%;
    color: #222;
    line-height: 1.6;
    text-align: center;
}

.counts .citop .mip p {
    color: #222;
    line-height: 1.6;
}

.counts .counper {
    width: 100%;
}

.counts .counper .swiper-slide {
    width: 100%;
    padding: 0.3rem;
    background-color: #e9f5fe;
    border: solid 1px #c6e2f6;
}

.counts .counper .swiper-slide .sop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.22rem;
}

.counts .counper .swiper-slide .sop .sm {
    display: inline-block;
    vertical-align: middle;
    color: #222;
    font-weight: bold;
    line-height: 1.5;
}

.counts .counper .swiper-slide .sop .nux {
    display: inline-block;
    vertical-align: middle;
    color: rgba(186, 220, 245, 0.3);
    line-height: 1.3;
    font-weight: bold;
}

.counts .counper .swiper-slide .sinp {
    width: 100%;
    color: #666;
    line-height: 1.6;
    overflow: auto;
    height: 8em;
}

.counts .counper .swiper-slide .sinp p {
    color: #666;
    line-height: 1.6;
}

.counts .counper .swiper-slide .sinp::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.counts .counper .swiper-slide .sinp::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.3);
    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.counts .counper .swiper-slide .sinp::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

.counts .counper .swiper-slide+.swiper-slide {
    border-left: none;
}

.counts .counper .swiper-slide:hover {
    background-color: var(--themes);
}

.counts .counper .swiper-slide:hover .sop .sm,
.counts .counper .swiper-slide:hover .sop .num {
    color: #fff;
}

.counts .counper .swiper-slide:hover .sinp {
    color: #fff;
}

.counts .counper .swiper-slide:hover .sinp p {
    color: #fff;
}

.counts .xunper {
    width: 100%;
    margin-top: 0.5rem;
}

.counts .xunper .swiper-slide {
    width: 100%;
}

.counts .xunper .swiper-slide a {
    width: 100%;
    display: block;
}

.counts .xunper .swiper-slide .imgs {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.counts .xunper .swiper-slide .imgs .img {
    width: 100%;
    padding-top: 57.45%;
    transition: all ease 0.5s;
}

.counts .xunper .swiper-slide .som {
    width: 100%;
    background-color: #fff;
    color: #666;
    line-height: 1.5;
    text-align: center;
    padding: 0.15rem 0.2rem;
}

.counts .xunper .swiper-slide:hover .imgs .img {
    transform: scale(1.1);
}

.counts .xunper .swiper-slide:hover .som {
    background-color: var(--themes);
    color: #fff;
}

.visions {
    width: 100%;
    padding: 0.8rem 0;
}

.visions .vision {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}

.visions .vision .vsl {
    display: inline-block;
    vertical-align: middle;
    width: calc(611 / 1520 * 100%);
    position: relative;
    overflow: hidden;
}

.visions .vision .vsl .img {
    width: 100%;
    padding-top: 79.90%;
}

.visions .vision .vsr {
    display: inline-block;
    vertical-align: middle;
    width: calc(760 / 1520 * 100%);
}

.visions .vision .vsr .vir {
    width: 100%;
    color: #222;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

.visions .vision .vsr .finp {
    width: 100%;
    color: #444;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

.visions .vision .vsr .finp p {
    color: #444;
    line-height: 1.5;
}

.visions .vision .vsr .vsrlist {
    width: 100%;
    font-size: 0;
}

.visions .vision .vsr .vsrlist .vsim {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 0.2rem) / 3);
    margin-right: 0.1rem;
    margin-bottom: 0.1rem;
    padding: 0.34rem 0.3rem;
    background-color: #fff;
    font-size: 0;
}

.visions .vision .vsr .vsrlist .vsim .vml {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 0.44rem);
    padding-right: 0.1rem;
}

.visions .vision .vsr .vsrlist .vsim .vml .vt {
    width: 100%;
    color: #222;
    line-height: 1.5;
    font-weight: bold;
}

.visions .vision .vsr .vsrlist .vsim .vml .vb {
    width: 100%;
    color: #666;
    line-height: 1.5;
}

.visions .vision .vsr .vsrlist .vsim .vmr {
    display: inline-block;
    vertical-align: middle;
    width: 0.44rem;
    height: 0.44rem;
    opacity: 1;
}

.visions .vision .vsr .vsrlist .vsim .vmr img {
    width: 100%;
    display: block;
}

.visions .vision .vsr .vsrlist .vsim:nth-child(3n) {
    margin-right: 0;
}

.visions .vision .vsr .vsrlist .vsim:hover {
    background-color: var(--themes);
}

.visions .vision .vsr .vsrlist .vsim:hover .vml .vt,
.visions .vision .vsr .vsrlist .vsim:hover .vml .vb {
    color: #fff;
}

.visions .vision .vsr .vsrlist .vsim:hover .vmr {
    opacity: 0.2;
}

.customized {
    width: 100%;
    padding: 1rem 0;
}

.customized .ciu {
    width: 100%;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 0.5rem;
}

.customized .ciu p {
    color: #fff;
    line-height: 1.5;
}

.customized .custm {
    width: 100%;
    font-size: 0;
}

.customized .custm .cmg {
    width: 7.5rem;
    display: block;
    margin: 0 auto;
    position: relative;
    width: calc(750 / 1520 * 100%);
}

.customized .custm .cmg .img {
    width: 100%;
    padding-top: 60%;
}

.customized .custm .cmg .txtlist {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3;
}

.customized .custm .cmg .txtlist .tiem {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    min-width: 3rem;
    max-width: 4rem;
    background-color: #badcf5;
    padding: 0.2rem 0.3rem;
    color: #444;
    font-weight: bold;
    line-height: 1.5;
    /* white-space: nowrap; */
    word-break: break-word;
    position: absolute;
    cursor: pointer;
    z-index: 2;
}

.customized .custm .cmg .txtlist .tiem:after {
    content: ' ';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: solid 0.05rem;
    border-color: transparent transparent transparent #badcf5;
}

.customized .custm .cmg .txtlist .tiem:nth-child(2n):after {
    left: auto;
    right: 100%;
    border: solid 0.05rem;
    border-color: transparent #badcf5 transparent transparent;
}

.customized .custm .cmg .txtlist .tiem:nth-child(1) {
    right: calc(100% + 15%);
    top: 5%;
}

.customized .custm .cmg .txtlist .tiem:nth-child(2) {
    left: calc(100% + 15%);
    top: 5%;
}

.customized .custm .cmg .txtlist .tiem:nth-child(3) {
    right: calc(100% + 3%);
    bottom: 25%;
}

.customized .custm .cmg .txtlist .tiem:nth-child(4) {
    left: calc(100% + 3%);
    bottom: 25%;
}

.customized .custm .cmg .txtlist .tiem:hover {
    background-color: var(--themes);
    color: #fff;
}

.customized .custm .cmg .txtlist .tiem:hover:after {
    border: solid 0.05rem;
    border-color: transparent transparent transparent var(--themes);
}

.customized .custm .cmg .txtlist .tiem:nth-child(2n):hover:after {
    border: solid 0.05rem;
    border-color: transparent var(--themes) transparent transparent;
}

@media (max-width: 800px) {
    .customized .custm .cmg {
        width: 100%;
    }

    .customized .custm .cmg .txtlist {
        width: 100%;
        position: relative;
        margin-top: 0.3rem;
    }

    .customized .custm .cmg .txtlist .tiem {
        width: 47%;
        margin-right: 6%;
        position: relative;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        border-radius: 0.3rem;
        margin-bottom: 0.2rem;
    }

    .customized .custm .cmg .txtlist .tiem:after {
        display: none;
    }

    .customized .custm .cmg .txtlist .tiem:nth-child(2n) {
        margin-right: 0;
    }
}

.rightnav {
    position: fixed;
    z-index: 10;
    right: 0.1rem;
    top: 60%;
    transform: translateY(-50%);
}

.rightnav .ritm {
    display: block;
    width: 0.56rem;
    height: 0.56rem;
    position: relative;
    background-color: #fff;
    box-shadow: 0px 0px 30px 0px rgba(0, 155, 222, 0.08);
}

.rightnav .ritm a,
.rightnav .ritm img {
    width: 100%;
    display: block;
}

.rightnav .ritm img:first-child {
    display: block;
}

.rightnav .ritm img:last-child {
    display: none;
}

.rightnav .ritm .forms {
    position: absolute;
    top: 0;
    right: calc(100% + 0.1rem);
    background-color: #fff;
    width: 6rem;
    padding: 0.4rem;
    display: none;
}

.rightnav .ritm .forms .vit {
    width: 100%;
    color: #444;
    line-height: 1.5;
    margin-bottom: 0.12rem;
}

.rightnav .ritm .forms .row {
    width: 100%;
    font-size: 0;
}

.rightnav .ritm .forms .row .input {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 0.1rem;
    position: relative;
}

.rightnav .ritm .forms .row .input .sin {
    width: 100%;
    display: block;
    padding: 0 0.14rem;
    color: #999;
    line-height: 3;
    height: 3em;
    background-color: #fff;
    border: solid 1px #eee;
    padding-right: 0.2rem;
}

.rightnav .ritm .forms .row .input .vc {
    display: inline-block;
    vertical-align: middle;
    color: var(--themes);
    line-height: 1.5;
    position: absolute;
    right: 0.1rem;
    top: 0;
    line-height: 3;
}

.rightnav .ritm .forms .row .input:nth-child(2n) {
    margin-right: 0;
}

.rightnav .ritm .forms .row .input.w100 {
    width: 100%;
    margin-right: 0;
}

.rightnav .ritm .forms .text {
    width: 100%;
}

.rightnav .ritm .forms .text .area {
    width: 100%;
    display: block;
    padding: 0.14rem;
    color: #999;
    line-height: 1.5;
    background-color: #fff;
    border: solid 1px #eee;
    margin-bottom: 0.1rem;
}

.rightnav .ritm .forms .sub {
    width: 100%;
    font-size: 0;
}

.rightnav .ritm .forms .sub .stn {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--themes);
    color: #fff;
    line-height: 3;
    width: auto;
    padding: 0 0.5rem;
    cursor: pointer;
    height: 3em;
    border: none;
}

.rightnav .ritm .forms:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: solid 0.05rem;
    left: 100%;
    top: 0.2rem;
    border-color: transparent transparent transparent #fff;
}

.rightnav .ritm .tellom {
    position: absolute;
    top: 0;
    right: calc(100% + 0.1rem);
    background-color: #fff;
    width: auto;
    padding: 0.25rem;
    display: none;
}

.rightnav .ritm .tellom .tit {
    width: 100%;
    color: #444;
    line-height: 1.5;
    margin-bottom: 0.12rem;
    white-space: nowrap;
}

.rightnav .ritm .tellom .tinp {
    width: 100%;
    color: #666;
    line-height: 1.5;
    white-space: nowrap;
}

.rightnav .ritm .tellom .tinp p {
    color: #666;
    line-height: 1.5;
}

.rightnav .ritm .tellom:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: solid 0.05rem;
    left: 100%;
    top: 0.2rem;
    border-color: transparent transparent transparent #fff;
}

.rightnav .ritm .sharm {
    position: absolute;
    top: 0;
    right: calc(100% + 0.1rem);
    background-color: #fff;
    width: 4rem;
    padding: 0.25rem;
    display: none;
}

.rightnav .ritm .sharm .dit {
    width: 100%;
    color: #444;
    line-height: 1.5;
    margin-bottom: 0.12rem;
    white-space: nowrap;
}

.rightnav .ritm .sharm .ticons {
    width: 100%;
    font-size: 0;
}

.rightnav .ritm .sharm .ticons .titm {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin-right: 4%;
}

.rightnav .ritm .sharm .ticons .titm .re {
    width: 100%;
    color: #999;
    line-height: 1.5;
}

.rightnav .ritm .sharm .ticons .titm .sul {
    width: 100%;
}

.rightnav .ritm .sharm .ticons .titm .sul a {
    width: 100%;
    display: block;
    color: #444;
    line-height: 1.5;
    padding: 0.05rem 0;
}

.rightnav .ritm .sharm .ticons .titm .sul a span {
    display: inline-block;
    vertical-align: middle;
    width: 0.18rem;
    height: 0.18rem;
    margin-right: 0.1rem;
}

.rightnav .ritm .sharm .ticons .titm .sul a span img {
    width: 100%;
    display: block;
}

.rightnav .ritm .sharm .ticons .titm:nth-child(2n) {
    margin-right: 0;
}

.rightnav .ritm .sharm:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: solid 0.05rem;
    left: 100%;
    top: 0.2rem;
    border-color: transparent transparent transparent #fff;
}

.rightnav .ritm:hover {
    background-color: var(--themes);
}

.rightnav .ritm:hover img:first-child {
    display: none;
}

.rightnav .ritm:hover img:last-child {
    display: block;
}

.rightnav .ritm.on .forms {
    display: block;
}

.rightnav .ritm.on .tellom {
    display: block;
}

.rightnav .ritm+.ritm {
    margin-top: 0.04rem;
}

@media (max-width: 800px) {
    .rightnav .ritm {
        width: 0.8rem;
        height: 0.8rem;
    }

    .rightnav .ritm .forms {
        top: 50%;
        transform: translateY(-50%);
    }
}

.videoc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 4;
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
    transition: all ease 0.5s;
    z-index: 2;
}

.videoc .vom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}