.w1360 {

    width: 13.6rem;

    margin: 0 auto;

    position: relative;

    font-size: 0;
}



@media (max-width: 1440px) {

    .w1360 {

        width: 90%;
    }
}

@media (max-width: 800px) {

    .w1360 {

        width: 94%;
    }
}

.w1080 {

    width: 10.8rem;

    margin: 0 auto;

    position: relative;

    font-size: 0;
}



@media (max-width: 1440px) {

    .w1080 {

        width: 90%;
    }
}

@media (max-width: 800px) {

    .w1080 {

        width: 94%;
    }
}

:root {

    --themes: #0069c7;
}



header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 50;

    transition: all ease 0.5s;
}

header .hop {

    width: 100%;

    display: flex;

    justify-content: space-between;

    transition: all ease 0.5s;

    min-height: 0.9rem;

    align-items: center;

    padding: 0 0.5rem;
}

header .rav {

    width: auto;

    display: inline-block;

    vertical-align: middle;

    padding-left: 0.4rem;

    font-size: 0;

    display: flex;

    align-items: center;
}

header .rav .search {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    text-align: center;

    cursor: pointer;

    position: relative;

    width: 16px;

    height: 40px;
}

header .rav .search .sc {

    display: inline-block;

    vertical-align: middle;

    width: 100%;

    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);

    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: 15px;

    height: 15px;

    display: block;

    cursor: pointer;

    z-index: 1;

    filter: grayscale(1000%) brightness(2000%);
}

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;

    text-align: left;

    z-index: 3;

    margin-left: 0.3rem;
}

header .rav .languages .lauges {

    width: 100%;

    display: inline-block;

    vertical-align: middle;

    position: relative;
}

header .rav .languages .lauges .lashow {

    width: 100%;

    position: relative;

    cursor: pointer;

    font-size: 0;

    line-height: 40px;

    white-space: nowrap;

    height: 40px;
}

header .rav .languages .lauges .lashow .ac {

    display: inline-block;

    vertical-align: middle;

    width: 19px;

    margin-right: 0.1rem;
}

header .rav .languages .lauges .lashow .ac img {

    width: 100%;

    display: block;
}

header .rav .languages .lauges .lashow .ac img:first-child {

    display: block;
}

header .rav .languages .lauges .lashow .ac img:last-child {

    display: none;
}

header .rav .languages .lauges .lashow .am {color: #fff;display: inline-block;vertical-align: middle;width: auto;min-width: 40px;padding: 0 0.14rem;line-height: 1.8;font-weight: bold;background-color: #fff;border-radius: 0.9em;color: #000;text-align: center;}

header .rav .languages .lauges .language {

    position: absolute;

    z-index: 20;

    top: 100%;

    width: 100%;

    display: none;

    width: 60px;

    width: 1rem;

    left: 50%;

    transform: translateX(-50%);
}

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;

    transform: translate(-105%, 0) skew(-20deg);

    background: var(--themes);

    z-index: 1;

    animation: outHover 0.5s ease 1 forwards;
}

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 {

    animation-name: onHover;
}

@keyframes onHover {

    from {

        transform: translate(-110%, 0) skew(-20deg);
    }

    to {

        transform: translate(0, 0) skew(-20deg);
    }
}

@keyframes outHover {

    from {

        transform: translate(0, 0) skew(-20deg);
    }

    to {

        transform: translate(110%, 0) skew(-20deg);
    }
}

header .rav .rd {

    display: inline-block;

    vertical-align: middle;

    width: 16px;

    margin-left: 0.3rem;

    cursor: pointer;
}

header .rav .rd img {

    width: 100%;

    display: block;
}

header .rav .rd img:first-child {

    display: block;
}

header .rav .rd img:last-child {

    display: none;
}

header .rav .menu {

    display: inline-block;

    vertical-align: middle;

    width: 20px;

    height: 20px;

    cursor: pointer;

    position: relative;

    display: none;
}

header .rav .menu img {

    width: 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 .logo {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    font-size: 0;

    white-space: nowrap;
}

header .logo .log {

    /*width: 1.69rem;

      width: 108px;*/

    display: inline-block;

    vertical-align: middle;
}

header .logo .log a,
header .logo .log img {width: auto;display: inline-block;height: .9rem;}

header .logo .log img:first-child {

    display: block;
}

header .logo .log img:last-child {

    display: none;
}

header nav {width: 100%;display: block;text-align: right;flex: 1;}

header nav .natem {

    width: auto;

    display: inline-block;

    vertical-align: middle;

    position: relative;

    text-align: center;

    font-size: 0;
}

header nav .natem .nas {

    width: auto;

    display: inline-block;

    position: relative;

    margin: 0 0.1rem;
}

header nav .natem .nas a {

    display: inline-block;

    line-height: 0.9rem;

    color: #fff;

    position: relative;

    padding: 0 0.1rem;

    transition: all ease 0.5s;
}

header nav .natem .nas:after {

    content: ' ';

    position: absolute;

    left: 50%;

    bottom: 0rem;

    transform: translateX(-50%);

    opacity: 0;

    background-color: #fff;

    transition: all ease 0.5s;

    width: 0;

    height: 0.02rem;
}

header nav .natem .navuls {

    width: 2.2rem;

    width: auto;

    position: absolute;

    z-index: 101;

    left: calc(50%);

    top: 100%;

    transform: translateX(-50%);

    display: none;
}

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;

    border-top: solid 1px rgba(255, 255, 255, 0.15);

    background-color: rgba(255, 255, 255, 0.8);
}

header nav .natem .navuls ul li .ns {

    width: 100%;

    display: inline-block;

    vertical-align: middle;

    line-height: 3;

    color: #333;

    text-align: left;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

    padding: 0 0.1rem;

    position: relative;

    text-align: center;
}

header nav .natem .navuls ul li .theul {

    width: 100%;

    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: #fff;

    font-weight: bold;
}

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 .longul {

    width: 100%;

    position: fixed;

    z-index: 101;

    left: calc(50%);

    top: 0.9rem;

    left: 0;

    border-top: solid 1px rgba(255, 255, 255, 0.15);

    padding: 0.4rem 0;

    background-color: var(--themes);

    display: none;
}

header nav .natem .longul .longlist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    text-align: left;
}

header nav .natem .longul .longlist .logem {

    display: inline-block;

    vertical-align: middle;

    width: calc(290 / 1320 * 100%);

    margin-right: calc(52 / 1320 * 100%);

    margin-bottom: 0.4rem;

    transition: all ease 0.5s;

    top: 0;

    position: relative;
}

header nav .natem .longul .longlist .logem a {

    width: 100%;

    display: block;

    font-size: 0;
}

header nav .natem .longul .longlist .logem .imgs {

    display: inline-block;

    vertical-align: middle;

    width: calc(1rem);

    margin-right: 0.2rem;

    position: relative;

    overflow: hidden;
}

header nav .natem .longul .longlist .logem .imgs .img {

    width: 100%;

    padding-top: 100%;

    transition: all ease 0.5s;
}

header nav .natem .longul .longlist .logem .rom {

    display: inline-block;

    vertical-align: middle;

    width: calc(100% - 1.2rem);
}

header nav .natem .longul .longlist .logem .rom .rx {

    width: 100%;

    color: #fff;

    line-height: 1.5;
}

header nav .natem .longul .longlist .logem:nth-child(4n) {

    margin-right: 0;
}

header nav .natem .longul .longlist .logem:hover {

    top: -0.1rem;
}

header nav .natem.has-nav .nas .xs {

    display: inline-block;
}

header nav .natem.on .nas:after {

    opacity: 1;

    width: 100%;
}

header nav .natem:hover .nas:before {

    opacity: 1;
}



header.white {

    background-color: #fff;
}

header.white .rav .search .sc img:first-child {

    display: none;
}

header.white .rav .search .sc img:last-child {

    display: block;
}

header.white .rav .languages .lauges .lashow .am {

    color: #000;

    background-color: var(--themes);

    color: #fff;
}

header.white .rav .rd img:first-child {

    display: none;
}

header.white .rav .rd img:last-child {

    display: block;
}

header.white .logo .log img:first-child {

    display: none;
}

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

header.white nav .natem .nas a {

    color: #000;
}

header.white nav .natem.on .nas a {

    color: var(--themes);
}

header.white nav .natem.on .nas:after {

    opacity: 1;

    width: 100%;

    background-color: var(--themes);
}

header.white nav .natem:hover .nas a {

    color: var(--themes);
}

header.white nav .natem:hover .nas:after {

    opacity: 1;

    width: 100%;

    background-color: var(--themes);
}

@media(max-width: 1200px){
    header .logo .log a,
    header .logo .log img{height: 0.6rem;}
    header nav .natem .nas{margin: 0;}
}
@media (max-width: 900px) {
    header.white nav .natem .nas a{font-size: 12px;}
}
@media (max-width: 800px) {

    header {

        background-color: #fff;
    }

    header .hop {

        align-items: center;

        padding: 0.1rem 3%;

        height: calc(40px + 0.2rem);
    }

    header .blace {

        position: fixed;

        z-index: -1;

        width: 100%;

        height: 100%;

        left: 0;

        top: 0;

        z-index: 450;

        display: none;

        background-color: rgba(0, 0, 0, 0.5);
    }

    header nav {

        width: 100%;

        width: 5rem;

        position: fixed;

        right: -100%;

        top: 0;

        left: auto;

        height: 100vh;

        background-color: #fff;

        margin-right: 0;

        overflow: auto;

        z-index: 500;

        transition: all ease 1.2s;

        padding-left: 0.1rem;

        padding: 0.1rem;

        display: block;

        text-align: left;

        opacity: 0;

        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 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 .njm {

        background-color: #fff;

        border-top: none;
    }

    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.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 .logo .log a,
    header .logo .log img{height: 40px;}
    header .logo .log img:first-child {

        display: none;
    }

    header .logo .log img:last-child {

        display: block;
    }

    header .rav .rd img:first-child {

        display: none;
    }

    header .rav .rd img:last-child {

        display: block;
    }

    header .rav .menu {

        width: 30px;

        height: 30px;

        display: inline-block;

        margin-left: 0.15rem;
    }

    header .rav .menu img {

        width: 100%;

        display: block;
    }

    header .rav .menu .clk {

        line-height: 30px;
    }

    header .rav .searcom {

        width: 80px;

        background-color: #f8f8f8;
    }

    header .rav .searcom .input input {

        color: #333;
    }

    header .rav .searcom .input input::-webkit-input-placeholder,

    header .rav .searcom .input textarea::-webkit-input-placeholder {

        color: rgba(0, 0, 0, 0.5);
    }

    header .rav .searcom .input input:-moz-placeholder,

    header .rav .searcom .input textarea:-moz-placeholder {

        color: rgba(0, 0, 0, 0.5);
    }

    header .rav .searcom .input input::-moz-placeholder,

    header .rav .searcom .input textarea::-moz-placeholder {

        color: rgba(0, 0, 0, 0.5);
    }

    header .rav .searcom .input input:-ms-input-placeholder,

    header .rav .searcom .input textarea:-ms-input-placeholder {

        color: rgba(0, 0, 0, 0.5);
    }

    header .rav .search {

        width: 20px;

        display: inline-block;

        margin-right: 5px;
    }

    header .rav .search .sc {

        width: 15px;

        height: 15px;
    }

    header .rav .search .sc img:first-child {

        display: none;
    }

    header .rav .search .sc img:last-child {

        display: block;
    }

    header .rav .sechom {

        width: 100vw;

        position: fixed;

        left: 0;

        top: calc(40px + 0.2rem);

        padding: 0.15rem;
    }

    header .rav .search .sc img:first-child {

        display: none;
    }

    header .rav .search .sc img:last-child {

        display: block;
    }

    header .rav .languages .lauges .lashow .ac img:first-child {

        display: none;
    }

    header .rav .languages .lauges .lashow .ac img:last-child {

        display: block;
    }

    header .rav .languages .lauges .lashow .am {

        color: #000;
    }

    header .rav .languages .lauges .lashow:after {

        background-image: url("../images/x2.png");

        background-size: 100%;
    }

    header .rav .languages .lauges .language {

        width: 1.5rem;
    }

    header .hot {

        border-bottom: solid 1px rgba(0, 0, 0, 0.08);
    }

    header .hot .hom .hkr .tc img:first-child {

        display: none;
    }

    header .hot .hom .hkr .tc img:last-child {

        display: block;
    }

    header .hot .hom .hkr .tm {

        color: #222;
    }



    header.menu-state .rav .menu img {

        opacity: 0;
    }

    header.menu-state nav {

        opacity: 1;

        right: 0;
    }

    header.menu-state .blace {

        opacity: 1;
    }
}
@media(max-width: 400px){
    header .logo .log a,
    header .logo .log img{height: 36px;}
}
@media(max-width: 380px){
    header .logo .log a,
    header .logo .log img{height: 32px;}
}
@media(max-width: 340px){
    header .logo .log a,
    header .logo .log img{height: 28px;}
}
.banner {

    width: 100%;

    position: relative;
}

.banner .swiper-slide {

    width: 100%;

    position: relative;
}

.banner .swiper-slide .imgs.pcm {

    width: 100%;

    position: relative;

    overflow: hidden;

    display: block;
}

.banner .swiper-slide .imgs.pcm .img {

    width: 100%;

    padding-top: 50%;
}

.banner .swiper-slide .imgs.phm {

    width: 100%;

    position: relative;

    overflow: hidden;

    display: none;
}

.banner .swiper-slide .imgs.phm .img {

    width: 100%;

    padding-top: 50%;
}

.banner .swiper-slide .box {

    position: absolute;

    z-index: 6;

    top: 50%;

    transform: translate(-50%, -50%);

    left: 50%;

    width: 10rem;

    max-width: 80%;

    text-align: center;
}

.banner .swiper-slide .box .bit {

    width: 100%;

    color: #fff;

    line-height: 1.2;

    text-align: center;

    margin-top: 0.15rem;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.banner .swiper-slide .box .bit p {

    color: #fff;

    line-height: 1.2;

    position: relative;

    z-index: 2;
}

.banner .swiper-slide .box .lx {

    width: 100%;

    font-size: 0;

    margin: 0.2rem 0 0.5rem;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.banner .swiper-slide .box .lx span {

    display: inline-block;

    vertical-align: middle;

    width: 0.3rem;

    height: 0.05rem;

    background-color: #fff;
}

.banner .swiper-slide .box .eim {

    width: 100%;

    color: #fff;

    line-height: 1.2;

    margin-top: 0.3rem;

    font-weight: bold;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.banner .swiper-slide .box .eim p {

    color: #fff;

    line-height: 1.2;

    position: relative;

    z-index: 2;
}

.banner .swiper-slide .box .more {

    width: 100%;

    margin-top: 0.55rem;

    font-size: 0;

    text-align: center;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.banner .swiper-slide .box .more a {

    display: inline-block;

    vertical-align: middle;

    background-color: #fff;

    color: #333;

    border-radius: 1.2em;

    line-height: 2.4;

    position: relative;

    top: 0;

    transition: all ease 0.5s;

    width: auto;

    padding: 0 0.3rem;
}

.banner .swiper-slide .box .more a:hover {

    background-color: var(--themes);

    color: #fff;
}

.banner .swiper-slide .box .vob {

    width: 100%;

    font-size: 0;

    margin-top: 0.5rem;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.banner .swiper-slide .box .vob a {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    background-color: #fff;

    padding: 0 0.45rem;

    color: #000;

    cursor: pointer;

    line-height: 3;
}

.banner .swiper-slide .box .vob a:hover {

    background-color: var(--themes);

    color: #fff;
}

.banner .swiper-slide .videoc {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    display: block;

    z-index: 4;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 1;

    transition: all ease 0.5s;

    z-index: 5;
}

.banner .swiper-slide .videoc .vom {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 3;
}

.banner .swiper-slide .videoc .vom .bxg {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.banner .swiper-slide-active .box .bit,
.banner .swiper-slide-active .box .more,
.banner .swiper-slide-active .box .eim,
.banner .swiper-slide-active .box .vob,
.banner .swiper-slide-active .box .lx {

    opacity: 1;

    transform: translate3d(0, 0, 0);
}

.banner .swiper-pagination {

    bottom: 0.6rem;
}

.banner .swiper-pagination-bullet {

    display: inline-block;

    vertical-align: middle;

    width: 8px;

    height: 8px;

    background-color: #fff;

    opacity: 0.5;

    transition: all ease 0.5s;

    margin: 0 0.05rem !important;
}

.banner .swiper-pagination-bullet-active {

    opacity: 1;
}

.banner .btn {

    position: absolute;

    bottom: 0;

    width: 0.29rem;

    cursor: pointer;

    z-index: 2;

    top: 50%;

    height: 0.51rem;

    font-size: 0;

    display: inline-block;

    vertical-align: middle;

    transform: translateY(-50%);
}

.banner .btn img {

    width: 100%;

    display: block;
}

.banner .btn img:first-child {

    display: block;
}

.banner .btn img:last-child {

    display: none;
}

.banner .btn:hover img:first-child {

    display: none;
}

.banner .btn:hover img:last-child {

    display: block;
}

.banner .bl {

    left: 0.6rem;
}

.banner .br {

    right: 0.6rem;
}

.banner .ric {

    position: absolute;

    right: 0.6rem;

    bottom: 0.6rem;

    width: 0.5rem;

    height: 0.5rem;

    border-radius: 50%;

    background-color: #fff;

    z-index: 3;

    cursor: pointer;

    transition: all ease 0.5s;
}

.banner .ric img {

    width: 100%;

    display: block;
}

.banner .ric:hover {

    transform: scale(1.1);
}



@media (max-width: 800px) {

    .banner .swiper-slide .box .bit {

        font-size: 12px;
    }

    .banner .swiper-slide .box .lx {

        margin: 0.15rem 0 0.3rem;
    }

    .banner .swiper-slide .box .eim {

        font-size: 16px;
    }

    .banner .swiper-slide .box .more a {

        font-size: 12px;
    }

    .banner .bl {

        left: 0.05rem;
    }

    .banner .br {

        right: 0.05rem;
    }

    .banner .swiper-pagination {

        bottom: 0.2rem;
    }
}

footer {

    width: 100%;

    padding: 0.7rem 0;

    background-color: #fff;
}

footer .fotm {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;
}

footer .fotm .fol {

    display: inline-block;

    vertical-align: middle;

    width: calc(420 / 1360 * 100%);
}

footer .fotm .fol .fogo {

    width: 100%;

    font-size: 0;
}

footer .fotm .fol .fogo a {

    display: inline-block;

    vertical-align: middle;

    /*          width: 108px; */
}

footer .fotm .fol .fogo a img {

    width: 100%;

    display: block;
}

footer .fotm .fol .fim {

    width: 100%;

    color: #000;

    line-height: 1.2;

    font-weight: bold;

    margin-top: 0.24rem;
}

footer .fotm .fol .fim p {

    color: #000;

    line-height: 1.2;

    font-weight: bold;
}

footer .fotm .fol .leom {

    width: 100%;

    margin-top: 0.8rem;
}

footer .fotm .fol .leom .lam {

    width: 100%;

    max-width: 4rem;
}

footer .fotm .fol .leom .lam a {

    width: 100%;

    display: block;

    background-color: #f5f5f5;

    border-radius: 0.3rem;

    padding: 0 0.3rem;
}

footer .fotm .fol .leom .lam .em {

    display: inline-block;

    vertical-align: middle;

    width: calc(100% - 10px);

    color: #000;

    line-height: 0.6rem;

    font-weight: bold;
}

footer .fotm .fol .leom .lam .ic {

    display: inline-block;

    vertical-align: middle;

    width: 10px;
}

footer .fotm .fol .leom .lam .ic img {

    width: 100%;

    display: block;
}

footer .fotm .fol .leom .lam .ic img:first-child {

    display: block;
}

footer .fotm .fol .leom .lam .ic img:last-child {

    display: none;
}

footer .fotm .fol .leom .lam+.lam {

    margin-top: 0.14rem;
}

footer .fotm .fol .leom .lam:hover a {

    background-color: var(--themes) !important;
}

footer .fotm .fol .leom .lam:hover .em {

    color: #fff;
}

footer .fotm .fol .leom .lam:hover .ic img:first-child {

    display: none;
}

footer .fotm .fol .leom .lam:hover .ic img:last-child {

    display: block;
}

footer .fotm .fol .share {

    width: 100%;

    font-size: 0;

    margin-top: 0.34rem;
}

footer .fotm .fol .share .am {

    display: inline-block;

    vertical-align: middle;

    width: 20px;

    position: relative;

    margin-right: 0.12rem;
}

footer .fotm .fol .share .am a,
footer .fotm .fol .share .am img {

    width: 100%;

    display: block;
}

footer .fotm .fol .share .am .codm {

    position: absolute;

    left: 50%;

    width: 1.2rem;

    transform: translateX(-50%);

    background-color: #fff;

    padding: 0.1rem;

    border-radius: 0.05rem;

    bottom: calc(100% + 0.1rem);

    display: none;

    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09);
}

footer .fotm .fol .share .am:hover .codm {

    display: block;
}

footer .fotm .for {

    display: inline-block;

    vertical-align: middle;

    width: calc(720 / 1360 * 100%);

    display: flex;

    flex-wrap: wrap;

    align-content: space-between;
}

footer .fotm .for .fop {

    width: 100%;

    font-size: 0;

    display: flex;
    gap: 10%;

    justify-content: space-between;
}

footer .fotm .for .fop .flist {

    display: inline-block;

    vertical-align: top;

    width: auto;
}

footer .fotm .for .fop .flist .fit {

    width: 100%;

    font-size: 0;

    margin-bottom: 0.1rem;
}

footer .fotm .for .fop .flist .fit a {

    display: inline-block;

    vertical-align: middle;

    color: #000;

    line-height: 1.4;

    font-weight: bold;

    transition: all ease 0.5s;
}

footer .fotm .for .fop .flist .fit a:hover {

    color: var(--themes);
}

footer .fotm .for .fop .flist .ful {

    width: 100%;
}

footer .fotm .for .fop .flist .ful a {

    width: 100%;

    display: inline-block;

    vertical-align: top;

    color: #666;

    font-weight: bold;

    transition: all ease 0.5s;

    line-height: 2;

    line-height: 1.5;

    padding: 0.025rem 0;
}

footer .fotm .for .fop .flist .ful a:hover {

    color: var(--themes);
}

footer .fotm .for .fop .flist .ful div {

    width: 100%;

    display: inline-block;

    vertical-align: middle;

    color: #666;

    line-height: 2;

    transition: all ease 0.5s;
}

footer .fotm .for .fop .flist:nth-child(3n) {

    margin-right: 0;
}

footer .fotm .for .fop .flist.long {

    flex: 2;
}

footer .fotm .for .fob {

    width: 100%;

    display: block;
}

footer .fotm .for .epoom {

    width: 100%;

    display: block;
}

footer .fotm .for .epoom .epim {

    width: 100%;

    display: block;

    padding: 0.15rem 0;

    color: #000;

    line-height: 1.5;

    font-weight: bold;

    border-top: solid 1px rgba(0, 0, 0, 0.1);
}

footer .fotm .for .epoom .epim:last-child {

    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

footer .fotm .for .link {

    width: 100%;

    margin-top: 0.2rem;

    font-size: 0;
}

footer .fotm .for .link a {

    display: inline-block;

    vertical-align: middle;

    color: #999;

    line-height: 1.25;

    font-weight: bold;

    margin-right: 0.2rem;

    margin-bottom: 0.1rem;

    border-bottom: solid 1px #999;
}

footer .fotm .for .link a:hover {

    color: var(--themes);

    border-bottom: solid 1px var(--themes);
}

footer .fotm .for .xim {

    width: 100%;

    color: #999;

    font-weight: bold;

    line-height: 1.5;
}



footer.gray {

    background-color: #f7f7f7;
}

footer.gray .fotm .fol .leom .lam a {

    background-color: #fff;
}



@media (max-width: 800px) {

    footer {

        padding: 0.6rem 0 0.2rem;
    }

    footer .fotm {

        width: 100%;
    }

    footer .fotm .fol {

        width: 100%;
    }

    footer .fotm .fol .fogo a {

        width: 80px;
    }

    footer .fotm .fol .leom {

        margin-top: 0.3rem;
    }

    footer .fotm .fol .leom .lam {

        max-width: 100%;
    }

    footer .fotm .fol .leom .lam .em {

        line-height: 3;
    }

    footer .fotm .for {

        width: 100%;

        margin-top: 15px;
    }

    footer .fotm .for .fop {

        width: 100%;

        flex-wrap: wrap;
    }

    footer .fotm .for .fop .flist {

        width: 100%;

        border-bottom: solid 1px rgba(0, 0, 0, 0.1);

        position: relative;
    }

    footer .fotm .for .fop .flist .fit {

        width: 100%;

        margin-bottom: 0;

        padding: 0.25rem 0;

        margin-left: 0;
    }

    footer .fotm .for .fop .flist .fit a {

        font-size: 16px;
    }

    footer .fotm .for .fop .flist .ful {

        width: 100%;

        font-size: 0;

        padding-bottom: 0.15rem;

        display: none;

        height: auto;
    }

    footer .fotm .for .fop .flist .ful a {

        line-height: 2;
    }

    footer .fotm .for .fop .flist:last-child {

        border: none;
    }

    footer .fotm .for .fop .flist:first-child {

        border-top: none;

        border-top: solid 1px rgba(0, 0, 0, 0.1);
    }

    footer .fotm .for .fop .flist.has-ful:after {

        content: " ";

        display: inline-block;

        width: 10px;

        height: 6px;

        background-image: url("../images/x.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.4rem;

        color: #333;

        border: none;

        transition: all ease 0.5s;
    }

    footer .fotm .for .fop .flist.has-ful.show:after {

        content: " ";

        transform: translateX(0) rotate(180deg);
    }
}

.modular {

    width: 100%;
}

.modular .mitop {

    width: 100%;

    margin-bottom: 0.55rem;

    text-align: center;

    margin-top: 1.4rem;
}

.modular .mitop .mit {

    width: 100%;

    text-align: center;

    color: #000;

    font-weight: bold;

    line-height: 1.2;
}

.modular .mitop .mir {

    width: 100%;

    text-align: center;

    color: #fff;

    line-height: 1.6;

    margin-bottom: 0.2rem;
}

.modular .mitop .mir p {

    color: #fff;

    line-height: 1.6;
}

.modular .mitop .mip {

    width: 100%;

    color: #000;

    line-height: 1.5;

    margin-top: 0.25rem;
}

.modular .mitop .mip p {

    color: #000;

    line-height: 1.5;
}

.modular .more {

    width: 100%;

    font-size: 0;

    margin-top: 0.6rem;

    text-align: center;
}

.modular .more a {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    padding: 0 0.3rem;

    line-height: 3;

    font-weight: bold;

    border-radius: 1.5em;

    background-color: #fff;

    color: #333;

    transition: all ease 0.5s;
}

.modular .more a.gray {

    background-color: #f7f7f7;
}

.modular .more a:hover {

    background-color: var(--themes);

    color: #fff;
}

.modular .more a+a {

    margin-left: 0.2rem;
}

.modular .more .atn {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    padding: 0 0.3rem;

    line-height: 3;

    font-weight: bold;

    border-radius: 1.5em;

    background-color: #fff;

    color: #333;

    transition: all ease 0.5s;
}



.modular.white .mitop .mir,
.modular.white .mitop .mit {

    color: #fff;
}

.modular.white .mitop .mir p,
.modular.white .mitop .mit p {

    color: #fff;
}



.newom {

    width: 100%;

    padding: 1.4rem 0;

    background-color: #f7f7f7;
}

.newom .swiper-slide {

    width: 100%;
}

.newom .swiper-slide a {

    width: 100%;

    display: block;
}

.newom .swiper-slide .imgs {

    width: 100%;

    position: relative;

    overflow: hidden;
}

.newom .swiper-slide .imgs .img {

    width: 100%;

    padding-top: 55.625%;

    transition: all ease 0.5s;
}

.newom .swiper-slide .mie {

    width: 100%;

    margin: 0.14rem 0 0.1rem;

    color: #7b7b7b;

    font-weight: bold;

    line-height: 1.4;
}

.newom .swiper-slide .xim {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.4;

    height: 4.2em;
}

.newom .swiper-slide:hover .imgs .img {

    transform: scale(1.1);
}

.newom .swiper-slide:hover .xim {

    width: 100%;

    color: var(--themes);
}



.Technology {

    width: 100%;

    padding: 1.4rem 0;
}

.Technology .teinp {

    width: 100%;

    color: #fff;

    line-height: 1.75;

    text-align: center;
}

.Technology .teinp p {

    color: #fff;

    line-height: 1.75;
}

.Technology .datom {

    width: 100%;

    font-size: 0;

    margin-top: 1.2rem;
}

.Technology .datom .datm {

    display: inline-block;

    vertical-align: top;

    width: 50%;

    position: relative;

    text-align: center;
}

.Technology .datom .datm .dum {

    width: 100%;

    font-size: 0;
}

.Technology .datom .datm .dum span {

    display: inline-block;

    vertical-align: middle;

    color: #fff;

    font-weight: bold;

    line-height: 1.2;
}

.Technology .datom .datm .eim {

    width: 100%;

    color: #fff;

    line-height: 1.5;
}

.Technology .datom .datm .lx {

    position: absolute;

    right: 0;

    top: 50%;

    width: 1px;

    height: 100%;

    display: block;

    transform: translateY(-50%);

    background-color: rgba(255, 255, 255, 0.1);
}



.solutions {

    width: 100%;

    padding: 1.4rem 0 0;
}

.solutions .showtem {

    width: 100%;

    position: relative;
}

.solutions .showse {

    width: 100%;

    position: relative;

    left: 0;

    top: 0;

    z-index: 2;
}

.solutions .imgs {

    width: 100%;

    position: relative;

    overflow: hidden;
}

.solutions .imgs .img {

    width: 100%;

    height: 7rem;

    display: block;

    transition: all ease 0.5s;
}

.solutions .sox {

    position: absolute;

    left: calc(280 / 1920 * 100%);

    top: 30%;

    transform: translateY(-50%);

    z-index: 3;
}

.solutions .sox .sit {

    width: 100%;

    color: #fff;

    line-height: 1.5;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.solutions .sox .sinp {

    width: 100%;

    color: #fff;

    line-height: 1.6;

    margin-top: 0.15rem;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.solutions .sox .sinp p {

    color: #fff;

    line-height: 1.6;
}

.solutions .sox .more {

    text-align: left;

    opacity: 0;

    transform: translate3d(0, 25%, 0);

    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s, box-shadow .3s;
}

.solutions .shom {

    width: 100%;

    position: relative;

    transition: all ease 0.5s;
}

.solutions .shom.swiper-slide-active .sox .sit,
.solutions .shom.swiper-slide-active .sox .sinp,
.solutions .shom.swiper-slide-active .sox .more {

    opacity: 1;

    transform: translate3d(0, 0, 0);
}

.solutions .shnavs {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    bottom: 0.5rem;

    z-index: 2;
}

.solutions .shnavs .swiper-wrapper.center {

    justify-content: center;
}

.solutions .shnavs .swiper-slide {

    display: inline-block;

    vertical-align: middle;

    width: auto;
}

.solutions .shnavs .swiper-slide a {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    padding: 0 0.3rem;

    background-color: #fff;

    color: #333;

    font-weight: bold;

    line-height: 2.5;

    border-radius: 1.25em;
}

.solutions .shnavs .swiper-slide+.swiper-slide {

    margin-left: 0.15rem;
}

.solutions .shnavs .swiper-slide.on a {

    background-color: var(--themes);

    color: #fff;
}



@media (max-width: 800px) {

    .solutions .sox {

        left: 3%;
    }
}

.products {

    width: 100%;

    padding: 1.4rem 0 0.8rem;
}

.products .mitop {

    margin-bottom: 0.15rem;
}

.products .propers {

    width: 100%;

    position: relative;
}

.products .propers .swiper-container {

    z-index: 2;

    position: relative;

    padding-bottom: 0.5rem;

    padding: 0.5rem 0;
}

.products .propers .swiper-slide {

    width: 100%;
    height: auto;
}

.products .propers .swiper-slide .sopem {

    width: 100%;
    height: 100%;

    position: relative;

    background-color: #f7f7f7;

    padding: 0.65rem;
}

.products .propers .swiper-slide .sol {

    display: inline-block;

    vertical-align: middle;

    width: calc(766 / 1012 * 100%);

    position: absolute;

    z-index: 2;

    right: calc(-146 / 1012 * 100%);

    bottom: -0.3rem;
}

.products .propers .swiper-slide .sol .img {

    width: 100%;

    padding-top: 56.0%;
}

.products .propers .swiper-slide .sor {

    width: 100%;

    max-width: 4.1rem;
}

.products .propers .swiper-slide .sor .sir {

    width: 100%;

    color: #000;

    line-height: 1.5;

    margin-bottom: 0.2rem;
}

.products .propers .swiper-slide .sor .xit {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.2;
}

.products .propers .swiper-slide .sor .sim {

    width: 100%;

    color: #7b7b7b;

    line-height: 1.6;

    margin-top: 0.1rem;

    height: 1.5rem;

    overflow: auto;
}

.products .propers .swiper-slide .sor .sim::-webkit-scrollbar {

    width: 4px;

    height: 4px;

    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.products .propers .swiper-slide .sor .sim::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 10px rgba(3, 108, 250, 0.3);

    background: rgba(3, 108, 250, 0.3);

    scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
}

.products .propers .swiper-slide .sor .sim::-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);
}

.products .propers .swiper-slide .sor .sim p {

    color: #7b7b7b;

    line-height: 1.6;
    word-break: keep-all;
}

.products .propers .swiper-slide .sor .more {

    text-align: left;
}

.products .propers .btn {

    position: absolute;

    z-index: 5;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    width: 0.5rem;

    height: 0.5rem;

    border-radius: 50%;

    background-color: #f7f7f7;

    cursor: pointer;
}

.products .propers .btn img {

    width: 100%;

    display: block;
}

.products .propers .btn img:first-child {

    display: block;
}

.products .propers .btn img:last-child {

    display: none;
}

.products .propers .btn:hover {

    background-color: var(--themes);
}

.products .propers .btn:hover img:first-child {

    display: none;
}

.products .propers .btn:hover img:last-child {

    display: block;
}

.products .propers .bl {

    left: calc(350 / 1920 * 100%);
}

.products .propers .br {

    right: calc(350 / 1920 * 100%);
}



@media (max-width: 800px) {

    .products .propers .btn {

        background-color: #fff;

        top: 30%;

        width: 0.7rem;

        height: 0.7rem;
    }

    .products .propers .bl {

        left: calc(10 / 1920 * 100%);
    }

    .products .propers .br {

        right: calc(10 / 1920 * 100%);
    }

    .products .propers .swiper-slide .sol {

        position: relative;

        right: 0;

        bottom: 0;

        width: 100%;
    }

    .products .propers .swiper-slide .sor {

        width: 100%;

        margin-top: 0.3rem;

        max-width: 100%;
    }

    .products .propers .swiper-slide .more {

        margin-top: 0.2rem;
    }
}

.nanner {

    width: 100%;

    position: relative;
}

.nanner .imgs {

    width: 100%;

    position: relative;

    overflow: hidden;
}

.nanner .imgs .img {

    width: 100%;

    padding-top: 44.27%;
}

.nanner .nox {

    position: absolute;

    left: calc((100% - 13.6rem) / 2);

    z-index: 2;

    top: 50%;

    transform: translateY(-50%);
}

.nanner .nox .nit {

    width: 100%;

    color: #fff;

    font-weight: bold;

    line-height: 1.5;
}

.nanner .nox .nix {

    width: 100%;

    color: #fff;

    line-height: 1.5;
}



@media (max-width: 1780px) {

    .nanner .nox {

        left: 5%;
    }
}

@media (max-width: 800px) {

    .nanner .nox {

        left: 3%;
    }

    .nanner .nox .nit {

        font-size: 18px;
    }

    .nanner .nox .nix {

        font-size: 14px;
    }
}

.crumbs {

    width: 100%;

    background-color: transparent;

    position: relative;

    background-color: #f7f7f7;
}

.crumbs .column {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    font-size: 0;

    position: relative;
}

.crumbs .column .colum {

    width: auto;

    font-size: 0;

    display: inline-block;

    vertical-align: middle;

    z-index: 2;

    position: relative;
}

.crumbs .column .colum .home {

    display: inline-block;

    vertical-align: middle;

    width: 18px;

    margin-right: .1rem;

    position: relative;

    top: -0.02rem;
}

.crumbs .column .colum .home img {

    width: 100%;

    display: block;
}

.crumbs .column .colum .sm {

    display: inline-block;

    vertical-align: middle;

    color: #999;

    line-height: 3;
}

.crumbs .column .colum a {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    color: #333;

    line-height: 0.9rem;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.crumbs .column .colum a span {

    display: inline-block;

    color: #333;

    line-height: 3;

    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 .cul {

    display: inline-block;

    vertical-align: middle;

    flex: 1;

    z-index: 2;

    position: relative;
}

.crumbs .column .cul .swiper-slide {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    margin-right: 0.4rem;

    position: relative;
}

.crumbs .column .cul .swiper-slide a {

    display: inline-block;

    vertical-align: middle;

    color: #333;

    line-height: 0.9rem;

    width: auto;

    transition: all ease 0.5s;
}

.crumbs .column .cul .swiper-slide a span {

    display: inline-block;

    vertical-align: middle;

    position: absolute;

    bottom: 0rem;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 0.02rem;

    background-color: var(--themes);

    transition: all ease 0.5s;

    opacity: 0;
}

.crumbs .column .cul .swiper-slide:after {

    content: ' ';

    position: absolute;

    left: 0;

    right: 0;

    width: 100%;

    height: 2px;

    background-color: var(--themes);

    opacity: 0;

    transition: all ease 0.5s;

    bottom: 0;
}

.crumbs .column .cul .swiper-slide.on a,
.crumbs .column .cul .swiper-slide:hover a {

    color: #000;
}

.crumbs .column .cul .swiper-slide.on:after,
.crumbs .column .cul .swiper-slide:hover:after {

    opacity: 1;
}

.crumbs .column .cul .swiper-scrollbar {

    background-color: rgba(0, 0, 0, 0.1);

    left: 0;

    right: 0;

    width: 100%;

    bottom: 0;

    display: none;
}

.crumbs .column .cul .swiper-scrollbar-drag {

    background-color: var(--themes);
}

.crumbs .column .cul.pbs .swiper-container {

    padding-bottom: 0.15rem;
}

.crumbs .column .cul.pbs .swiper-scrollbar {

    display: block;
}

.crumbs .column.xl {

    justify-content: space-between;

    font-size: 0;

    align-items: center;
}

.crumbs .crumb.fixed {

    position: fixed;

    top: 1rem;

    left: 0;

    right: 0;

    width: 100%;

    z-index: 10;

    background-color: #f7f7f7;
}



.crumbs.no:after {

    display: none;
}



@media (max-width: 800px) {

    .crumbs .w1360 {

        width: 100%;
    }

    .crumbs .column .colum {

        padding: 0 3%;

        border-bottom: solid 1px #eee;
    }

    .crumbs .column .cul {

        padding: 0 3%;
    }

    .crumbs .column .cul .swiper-wrapper {

        justify-content: flex-start;
    }

    .crumbs .column .cul .swiper-slide {

        margin-right: 0.2rem;
    }
}

.haves {

    width: 100%;

    padding: 1.4rem 0;
}



@media (max-width: 800px) {

    .haves {

        padding: 1.8rem 0;
    }
}

.faqoms {

    width: 100%;

    padding: 1.4rem 0;
}

.faqoms .faqlist {

    width: 100%;

    font-size: 0;
}

.faqoms .faqlist .faqom {

    width: 100%;
}

.faqoms .faqlist .faqom .faop {

    width: 100%;

    font-size: 0;

    display: flex;

    align-items: center;

    padding: 0.45rem;

    background-color: #f7f7f7;

    position: relative;
}

.faqoms .faqlist .faqom .faop .fim {

    display: inline-block;

    vertical-align: middle;

    width: calc(100% - 20px);

    color: #000;

    font-weight: bold;

    line-height: 1.5;

    position: relative;

    z-index: 2;

    padding-right: 0.15rem;
}

.faqoms .faqlist .faqom .faop .rc {

    width: 20px;

    display: inline-block;

    vertical-align: middle;

    position: relative;

    z-index: 2;

    transition: all ease 0.5s;

    cursor: pointer;
}

.faqoms .faqlist .faqom .faop .rc img {

    width: 100%;

    display: block;
}

.faqoms .faqlist .faqom .faop .rc img:first-child {

    display: block;
}

.faqoms .faqlist .faqom .faop .rc img:last-child {

    display: none;
}

.faqoms .faqlist .faqom .faop .bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    z-index: 1;

    transition: all ease 0.5s;
}

.faqoms .faqlist .faqom .facont {

    width: 100%;

    padding: 0.5rem;

    border: solid 1px rgba(0, 0, 0, 0.08);

    display: none;

    border-top: none;
}

.faqoms .faqlist .faqom .facont .finp {

    width: 100%;

    color: #000;

    line-height: 1.6;
}

.faqoms .faqlist .faqom .facont .finp p {

    color: #000;

    line-height: 1.6;
}

.faqoms .faqlist .faqom.show .faop .bg {

    opacity: 1;
}

.faqoms .faqlist .faqom.show .faop .fim {

    color: #fff;
}

.faqoms .faqlist .faqom.show .faop .rc {

    transform: rotate(180deg);
}

.faqoms .faqlist .faqom.show .faop .rc img:first-child {

    display: none;
}

.faqoms .faqlist .faqom.show .faop .rc img:last-child {

    display: block;
}

.faqoms .faqlist .faqom+.faqom {

    margin-top: 0.24rem;
}



.whos {

    width: 100%;

    padding: 1.4rem 0;
}

.whos .teinp {

    width: 100%;

    color: #000;

    line-height: 1.75;

    text-align: center;
}

.whos .teinp p {

    color: #000;

    line-height: 1.75;
}

.whos .datom {

    width: 100%;

    font-size: 0;

    margin-top: 1.2rem;
}

.whos .datom .datm {

    display: inline-block;

    vertical-align: top;

    width: 50%;

    position: relative;

    text-align: center;
}

.whos .datom .datm .dum {

    width: 100%;

    font-size: 0;
}

.whos .datom .datm .dum span {

    display: inline-block;

    vertical-align: middle;

    color: #000;

    font-weight: bold;

    line-height: 1.2;
}

.whos .datom .datm .eim {

    width: 100%;

    color: #000;

    line-height: 1.5;
}

.whos .datom .datm .lx {

    position: absolute;

    right: 0;

    top: 50%;

    width: 1px;

    height: 100%;

    display: block;

    transform: translateY(-50%);

    background-color: rgba(0, 0, 0, 0.1);
}



.panner {

    width: 100%;
}

.panner .img {

    width: 100%;

    display: block;
}

.panner .img img {

    width: 100%;

    display: block;
}



.cultures {

    width: 100%;

    padding: 1.4rem 0;
}

.cultures .cultlis {

    width: 100%;

    font-size: 0;
}

.cultures .cultlis .culom {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;
}

.cultures .cultlis .culom .imgs {

    display: inline-block;

    vertical-align: middle;

    width: calc(800 / 1360 * 100%);

    position: relative;

    overflow: hidden;
}

.cultures .cultlis .culom .imgs .img {

    width: 100%;

    padding-top: 62.5%;

    transition: all ease 0.5s;
}

.cultures .cultlis .culom .reom {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    padding: 0.3rem 0.8rem;

    background-color: #f7f7f7;

    width: calc(535 / 1360 * 100%);
}

.cultures .cultlis .culom .reom .rit {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.4;
}

.cultures .cultlis .culom .reom .rip {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.6;

    margin-top: 0.14rem;
}

.cultures .cultlis .culom .reom .rip p {

    color: #000;

    line-height: 1.6;
}

.cultures .cultlis .culom+.culom {

    margin-top: 0.6rem;
}

.cultures .cultlis .culom:nth-child(2n) {

    flex-direction: row-reverse;
}



.certificates {

    width: 100%;

    padding: 1.4rem 0;
}

.certificates .certiper {

    width: 100%;
}

.certificates .swiper-slide {

    width: 100%;
}

.certificates .swiper-slide a {

    width: 100%;

    display: block;
}

.certificates .swiper-slide .imgs {

    width: 100%;

    position: relative;

    overflow: hidden;
}

.certificates .swiper-slide .imgs .img {

    width: 100%;

    padding-top: 84.375%;

    transition: all ease 0.5s;
}

.certificates .swiper-slide .pom {

    width: 100%;

    position: relative;

    padding: 0.65rem 0.5rem 0.5rem;
}

.certificates .swiper-slide .pom .hei {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    display: block;

    z-index: 1;
}

.certificates .swiper-slide .pom .him {

    width: 100%;

    text-align: center;

    color: #000;

    line-height: 1.5;

    height: 3em;

    position: relative;

    z-index: 2;
}

.certificates .swiper-slide:hover .imgs .img {

    transform: scale(1.1);
}



.paths {

    width: 100%;

    padding: 1.4rem 0;
}

.paths .yearper {

    width: 100%;

    position: relative;
}

.paths .yearper .lx {

    position: absolute;

    top: calc(0.16rem - 0.5px);

    left: 0;

    width: 100%;

    background-color: rgba(255, 255, 255, 0.5);

    height: 1px;

    z-index: 1;
}

.paths .yearper .swiper-container {

    z-index: 2;

    position: relative;
}

.paths .yearper .swiper-slide {

    width: 100%;

    font-size: 0;

    cursor: pointer;
}

.paths .yearper .swiper-slide .point {

    display: block;

    margin: 0 auto;

    width: 0.32rem;

    position: relative;
}

.paths .yearper .swiper-slide .point .pc {

    width: 100%;

    display: block;

    transition: all ease 0.5s;

    opacity: 0;

    position: relative;

    z-index: 3;
}

.paths .yearper .swiper-slide .point .pc img {

    width: 100%;

    display: block;
}

.paths .yearper .swiper-slide .point .pi {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 0.12rem;

    height: 0.12rem;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;

    transition: all ease 0.5s;

    opacity: 1;

    background-color: rgba(255, 255, 255, 0.5);
}

.paths .yearper .swiper-slide .yim {

    width: 100%;

    text-align: center;

    color: #fff;

    line-height: 1.5;

    margin-top: 0.1rem;
}

.paths .yearper .swiper-slide.on .point .pi,
.paths .yearper .swiper-slide:hover .point .pi {

    opacity: 0;
}

.paths .yearper .swiper-slide.on .point .pc,
.paths .yearper .swiper-slide:hover .point .pc {

    opacity: 1;
}

.paths .enamper {

    width: 100%;

    margin-top: 0.7rem;

    padding-left: calc((100% - 13.6rem) / 2);
}

.paths .enamper .swiper-slide {

    width: 100%;
}

.paths .enamper .swiper-slide a {

    width: 100%;

    display: block;

    padding: 0.4rem;

    background-color: #fff;
}

.paths .enamper .swiper-slide .ym {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.2;
}

.paths .enamper .swiper-slide .kx {

    width: 100%;

    height: 1px;

    background-color: rgba(0, 0, 0, 0.08);

    margin: 0.14rem 0;
}

.paths .enamper .swiper-slide .sim {

    width: 100%;

    color: #000;

    line-height: 1.5;

    height: 4.5em;
}

.paths .enamper .swiper-slide .imgs {

    width: 100%;

    position: relative;

    overflow: hidden;

    margin-top: 0.14rem;
}

.paths .enamper .swiper-slide .imgs .img {

    width: 100%;

    padding-top: 56.42%;

    transition: all ease 0.5s;
}

.paths .enamper .swiper-slide:hover .imgs .img {

    transform: scale(1.1);
}



@media (max-width: 1440px) {

    .paths .enamper {

        padding-left: 5%;
    }
}

@media (max-width: 800px) {

    .paths .enamper {

        padding-left: 3%;
    }
}

.contacte {

    width: 100%;

    /* padding: 1.4rem 0; */
}

.contacte .contlist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;
}

.contacte .contlist .covem {

    display: inline-block;

    vertical-align: top;

    width: calc(665 / 1360 * 100%);

    background-color: #f7f7f7;

    padding: 0.7rem 0.6rem;

    margin-right: calc(29 / 1360 * 100%);

    margin-bottom: 0.25rem;

    cursor: pointer;
}

.contacte .contlist .covem .vic {

    display: block;

    margin: 0 auto 0.15rem;

    width: 1rem;

    height: 1rem;

    border-radius: 50%;

    position: relative;

    z-index: 2;

    padding: 0.1rem;
}

.contacte .contlist .covem .vic .vc {

    width: 100%;

    height: 100%;

    display: block;

    border-radius: 50%;

    background-color: var(--themes);
}

.contacte .contlist .covem .vic .vc img {

    width: 100%;

    display: block;
}

.contacte .contlist .covem .vic .vc img:first-child {

    display: block;
}

.contacte .contlist .covem .vic .vc img:last-child {

    display: none;
}

.contacte .contlist .covem .ems {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.2;

    text-align: center;

    position: relative;

    z-index: 2;
}

.contacte .contlist .covem .ems p {

    color: #000;

    line-height: 1.2;
}

.contacte .contlist .covem .emd {

    width: 100%;

    color: #000;

    line-height: 1.5;

    font-weight: bold;

    text-align: center;

    position: relative;

    z-index: 2;

    margin-top: 0.1rem;
}

.contacte .contlist .covem .emd p {

    color: #000;

    line-height: 1.2;
}

.contacte .contlist .covem .bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    opacity: 0;

    transition: all ease 0.5s;
}

.contacte .contlist .covem:nth-child(2n) {

    margin-right: 0;
}

.contacte .contlist .covem.long {

    width: 100%;

    margin-right: 0;
}

.contacte .contlist .covem:hover .bg {

    opacity: 1;
}

.contacte .contlist .covem:hover .vic {

    background-color: rgba(255, 255, 255, 0.1);
}

.contacte .contlist .covem:hover .vic .vc {

    background-color: #fff;
}

.contacte .contlist .covem:hover .vic .vc img:first-child {

    display: none;
}

.contacte .contlist .covem:hover .vic .vc img:last-child {

    display: block;
}

.contacte .contlist .covem:hover .ems,
.contacte .contlist .covem:hover .emd {

    color: #fff;
}

.contacte .contlist .covem:hover .ems p,
.contacte .contlist .covem:hover .emd p {

    color: #fff;
}

.contacte .message {

    width: 100%;

    /* margin-top: 1.4rem; */
}

.contacte .message .mesoom {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    flex-direction: row-reverse;
}

.contacte .message .mesoom .mel {

    display: inline-block;

    vertical-align: middle;

    width: calc(665 / 1360 * 100%);

    position: relative;

    overflow: hidden;
}

.contacte .message .mesoom .mel .img {

    width: 100%;

    padding-top: 100%;

    transition: all ease 0.5s;
}

.contacte .message .mesoom .mer {

    display: inline-block;

    vertical-align: middle;

    width: calc(665 / 1360 * 100%);

    background-color: #f7f7f7;

    padding: 0.6rem;
}

.contacte .message .mesoom .mer form {

    width: 100%;

    display: block;
}

.contacte .message .mesoom .mer .input {

    width: 100%;

    margin-bottom: 0.2rem;
}

.contacte .message .mesoom .mer .input input {

    width: 100%;

    display: block;

    background-color: #fff;

    border: none;

    line-height: 3;

    height: 3em;

    color: #000;

    padding: 0 0.2rem;
}

.contacte .message .mesoom .mer .text {

    width: 100%;

    display: block;

    margin-bottom: 0.2rem;
}

.contacte .message .mesoom .mer .text textarea {

    width: 100%;

    display: block;

    background-color: #fff;

    border: none;

    line-height: 1.5;

    color: #000;

    padding: 0.2rem 0.2rem;
}

.contacte .message .mesoom .mer .sub {

    width: 100%;

    font-size: 0;
}

.contacte .message .mesoom .mer .sub .stn {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    padding: 0 0.4rem;

    line-height: 3;

    height: 3em;

    border-radius: 1.5em;

    border: none;

    background-color: var(--themes);

    color: #fff;

    cursor: pointer;
}



.newpms {

    width: 100%;

    padding: 1.4rem 0;
}

.newpms .newlist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;
}

.newpms .newlist .netam {

    display: inline-block;

    vertical-align: top;

    width: calc(435 / 1360 * 100%);

    margin-right: calc(27 / 1360 * 100%);

    margin-bottom: 0.27rem;
}

.newpms .newlist .netam a {

    width: 100%;

    display: block;
}

.newpms .newlist .netam .imgs {

    width: 100%;

    position: relative;

    overflow: hidden;
}

.newpms .newlist .netam .imgs .img {

    width: 100%;

    padding-top: 55.625%;

    transition: all ease 0.5s;
}

.newpms .newlist .netam .mie {

    width: 100%;

    margin: 0.14rem 0 0.1rem;

    color: #7b7b7b;

    font-weight: bold;

    line-height: 1.4;
}

.newpms .newlist .netam .xim {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.4;

    height: 4.2em;
}

.newpms .newlist .netam:nth-child(3n) {

    margin-right: 0;
}

.newpms .newlist .netam:hover .imgs .img {

    transform: scale(1.1);
}

.newpms .newlist .netam:hover .xim {

    width: 100%;

    color: var(--themes);
}



.pages {

    width: 100%;

    padding: 0.22rem 0 0.25rem;

    font-size: 0;

    text-align: center;

    margin-top: 0.2rem;

    position: relative;

    z-index: 2;
}

.pages .page {

    display: inline-block;

    vertical-align: middle;

    width: 0.4rem;

    height: 0.4rem;

    line-height: 0.4rem;

    text-align: center;

    color: #000;

    background-color: #fff;

    border-radius: 50%;

    margin: 0 0.07rem 0.1rem;

    position: relative;

    overflow: hidden;
}

.pages .page.ltn {

    background-color: #f5f5f5;

    background-image: url("../images/b3.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    margin-right: 0.1rem;
}

.pages .page.rtn {

    background-color: #f5f5f5;

    background-image: url("../images/b4.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    margin-left: 0.1rem;
}

.pages .page.on:after {

    opacity: 1;
}

.pages .page.ltn:hover {

    background-image: url("../images/b5.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: var(--themes) !important;
}

.pages .page.on.ltn {

    background-image: url("../images/b5.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: var(--themes) !important;
}

.pages .page.on.rtn {

    background-image: url("../images/b6.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: var(--themes) !important;
}

.pages .page.rtn:hover {

    background-image: url("../images/b6.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: var(--themes) !important;
}

.pages .page.auto {

    width: auto;

    padding: 0 0.02rem;

    height: auto;

    font-weight: bold;

    line-height: 1.2;

    border-radius: 0;
}

.pages .page.auto:hover,
.pages .page.auto.on {

    border-bottom: solid 1px #000;
}



@media (max-width: 900px) {

    .pages .page {

        width: 0.8rem;

        height: 0.8rem;

        line-height: 0.8rem;

        font-size: 16px;

        margin: 0 0.1rem 0.1rem;
    }
}

.details {

    width: 100%;

    padding: 1.4rem 0;
}

.details .detail {

    width: 100%;
}

.details .dit {

    width: 100%;

    color: #000;

    font-weight: bold;

    line-height: 1.2;

    margin-bottom: 0.5rem;
}

.details .share {

    width: 100%;

    border-top: solid 1px rgba(0, 0, 0, 0.08);

    border-bottom: solid 1px rgba(0, 0, 0, 0.08);

    padding: 0.2rem 0;

    font-size: 0;
}

.details .share .km {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    color: #000;

    line-height: 1.5;

    margin-right: 0.1rem;
}

.details .share .am {

    display: inline-block;

    vertical-align: middle;

    width: 20px;

    position: relative;

    margin-right: 0.12rem;
}

.details .share .am a,
.details .share .am img {

    width: 100%;

    display: block;
}

.details .share .am .codm {

    position: absolute;

    left: 50%;

    width: 1.2rem;

    transform: translateX(-50%);

    background-color: #fff;

    padding: 0.1rem;

    border-radius: 0.05rem;

    bottom: calc(100% + 0.1rem);

    display: none;

    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09);
}

.details .share .am:hover .codm {

    display: block;
}

.details .shinp {

    width: 100%;

    color: #000;

    line-height: 1.75;

    margin: 0.7rem 0;
}

.details .shinp p {

    color: #000;

    line-height: 1.75;
}

.details .sob {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;
}

.details .sob .sem {

    display: inline-block;

    vertical-align: middle;

    width: auto;
}

.details .sob .sem a {

    display: inline-block;

    vertical-align: middle;

    color: #000;

    line-height: 1.5;
}

.details .sob .sem a span {

    display: inline-block;

    vertical-align: middle;

    width: 6px;

    position: relative;

    top: -0.03rem;
}

.details .sob .sem a span img {

    width: 100%;

    display: block;
}

.details .sob .sem a span img:first-child {

    display: block;
}

.details .sob .sem a span img:last-child {

    display: none;
}

.details .sob .sem.mid a span {

    width: 14px;
}

.details .sob .sem:hover a {

    color: var(--themes);
}

.details .sob .sem:hover a span img:first-child {

    display: none;
}

.details .sob .sem:hover a span img:last-child {

    display: block;
}



.resources {

    width: 100%;

    padding: 1.4rem 0;

    overflow: hidden;
}

.resources .mitop {

    margin-bottom: 0.8rem;
}

.resources .vaenper {

    width: 100%;

    font-size: 0;

    position: relative;
}

.resources .vaenper .vram {

    display: inline-block;

    vertical-align: top;

    width: calc(172 / 1360 * 100%);

    margin-right: calc(25 / 1360 * 100%);

    position: relative;
}

.resources .vaenper .vram a {

    width: 100%;

    display: block;
}

.resources .vaenper .vram .vb {

    width: 100%;

    display: block;
}

.resources .vaenper .vram .vbs {

    width: 100%;

    display: block;

    position: relative;
}

.resources .vaenper .vram .vbs .vb1 {

    width: 100%;

    height: 100%;

    opacity: 1;

    transition: all ease 0.5s;

    display: block;
}

.resources .vaenper .vram .vbs .vb1 img {

    width: 100%;

    display: block;
}

.resources .vaenper .vram .vbs .vb2 {

    width: 100%;

    height: 100%;

    opacity: 0;

    display: none;

    transition: all ease 0.5s;
}

.resources .vaenper .vram .vbs .vb2 img {

    width: 100%;

    display: block;
}

.resources .vaenper .vram .vim {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    text-align: center;

    justify-content: center;

    color: #fff;

    line-height: 1.6;

    transition: all ease 0.5s;

    opacity: 0;

    z-index: 3;

    height: 100%;
}

.resources .vaenper .vram .vim p {

    color: #fff;

    line-height: 1.6;

    width: 100%;
}

.resources .vaenper .vram .vd {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    display: block;

    z-index: 3;

    overflow: hidden;

    opacity: 1;
}

.resources .vaenper .vram .vd .img {

    width: 100%;

    height: 100%;

    display: block;

    transition: all ease 0.5s;
}

.resources .vaenper .vram:nth-child(13n+1) {

    margin-left: calc(98 / 1360 * 100%);
}

.resources .vaenper .vram:nth-child(13n+13) {

    margin-right: 0;
}

.resources .vaenper .vram:hover .vbs .vb1 {

    display: none;
}

.resources .vaenper .vram:hover .vbs .vb2 {

    display: block;

    opacity: 1;
}

.resources .vaenper .vram:hover .vim {

    opacity: 1;
}

.resources .vaenper .vram:hover .vd {

    opacity: 0;
}



@media (max-width: 800px) {

    .resources .vaenper .vram {

        width: calc(493 / 1680 * 100%);

        margin-right: calc(99 / 1680 * 100%) !important;
    }

    .resources .vaenper .vram:nth-child(13n+1) {

        margin-left: 0;
    }

    .resources .vaenper .vram:nth-child(5n+1),
    .resources .vaenper .vram:nth-child(5n+1) {

        margin-left: calc(248 / 1680 * 100%);
    }

    .resources .vaenper .vram:nth-child(5n+5) {

        margin-right: 0 !important;
    }
}

.volutions {

    width: 100%;

    padding: 1.4rem 0 0.8rem;
}

.volutions .vmgs {

    width: 100%;
    position: relative;
}

.volutions .vmgs .img {

    width: 100%;

    display: block;
}

.vmgs-list{width: 100%;position: absolute;left: 0;top: 0;z-index: 3;}
.vmgs-item{min-width: 1.25em;height: 1.25em;line-height: calc(1.25em - 2px);padding: 0 0.3em;text-align: center;border-radius: 0.625em;border: 1px solid var(--themes);color: var(--themes);font-weight: bold;display: inline-block;position: absolute;cursor: pointer;transform: translate(-50%,-50%);}
@media(max-width: 750px){
    .vmgs-item{width: .3rem;height: .3rem;min-width: .3rem;padding: 0 0.05rem;font-size:0.24rem;line-height: calc(0.3rem - 2px);}
}
.volutions .volulist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    margin-top: 0.6rem;
}

.volutions .volulist .volum {

    display: inline-block;

    vertical-align: top;

    width: calc(650 / 1360 * 100%);

    margin-right: calc(59 / 1360 * 100%);

    margin-bottom: 0.6rem;
    scroll-margin-top: 0.9rem;
}

.volutions .volulist .volum a {

    width: 100%;

    height: 100%;

    display: flex;

    flex-wrap: wrap;

    padding: 0.6rem;

    background-color: #f7f7f7;

    align-content: space-between;
}

.volutions .volulist .volum .vtop,
.volutions .volulist .volum .somp {

    width: 100%;

    display: block;
}

.volutions .volulist .volum .somp {

    margin-top: .2rem;
}

.volutions .volulist .volum .imgs {

    width: 100%;

    position: relative;

    overflow: hidden;
}

.volutions .volulist .volum .imgs .img {

    width: 100%;

    padding-top: 54.36%;

    transition: all ease 0.5s;
}

.volutions .volulist .volum .vop {

    width: 100%;

    font-size: 0;
}

.volutions .volulist .volum .vop .vum {

    display: inline-block;

    vertical-align: top;

    width: 2em;

    height: 2em;

    line-height: 2em;

    text-align: center;

    border: solid 2px var(--themes);

    background-color: transparent;

    border-radius: 50%;

    margin-right: 0.2rem;

    color: var(--themes);
}

.volutions .volulist .volum .vop .vem {

    display: inline-block;

    vertical-align: top;

    width: calc(100% - 2em - 0.2rem);

    color: #000;

    font-weight: bold;

    line-height: 2;
}

.volutions .volulist .volum .vim {

    width: 100%;

    color: #666;

    line-height: 1.5;

    margin-top: 0.24rem;
}

.volutions .volulist .volum .more {

    width: 100%;

    font-size: 0;

    text-align: left;
}

.volutions .volulist .volum .more span {

    display: inline-block;

    vertical-align: middle;
}

.volutions .volulist .volum:nth-child(2n) {

    margin-right: 0;
}

.volutions .volulist .volum:hover .vop .vum {

    background-color: var(--themes);

    color: #fff;
}

.volutions .volulist .volum:hover .more .atn {

    background-color: var(--themes);

    color: #fff;
}

.volutions .soliust {

    width: 100%;

    margin-top: 0.7rem;
}

.volutions .soliust .solum {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    padding: 0.6rem 0;

    border-bottom: solid 1px rgba(0, 0, 0, 0.08);
}

.volutions .soliust .solum .sel {

    display: inline-block;

    vertical-align: top;

    width: calc(420 / 1360 * 100%);

    color: #000;

    line-height: 1.5;

    font-weight: bold;
}

.volutions .soliust .solum .sel p {

    color: #000;

    line-height: 1.5;
}

.volutions .soliust .solum .ser {

    display: inline-block;

    vertical-align: top;

    width: calc(860 / 1360 * 100%);

    color: #666;

    line-height: 1.6;
}

.volutions .soliust .solum .ser p {

    color: #666;

    line-height: 1.6;
}

.volutions .soliust .solum:first-child {

    padding-top: 0;
}

.volutions .soliust .solum:last-child {

    border-bottom: none;

    padding-bottom: 0;
}

@media(max-width: 800px){
    .volutions .volulist .volum {scroll-margin-top: calc(40px + 0.2rem);}
}

.rightnav {

    position: fixed;

    z-index: 10;

    right: 0;

    top: 60%;

    transform: translateY(-50%);
}

.rightnav .ritm {

    position: relative;

    width: 0.5rem;

    height: 0.5rem;

    display: block;

    background-color: var(--themes);
}

.rightnav .ritm a,
.rightnav .ritm img {

    width: 100%;

    display: block;
}

.rightnav .ritm .codm {

    position: absolute;

    right: calc(100% + 0.1rem);

    width: 1.3rem;

    padding: 0.1rem;

    background-color: var(--themes);

    top: 50%;

    transform: translateY(-50%);

    display: none;
}

.rightnav .ritm .lesm {

    position: absolute;

    right: calc(100% + 0.1rem);

    width: auto;

    padding: 0.15rem;

    background-color: var(--themes);

    top: 50%;

    transform: translateY(-50%);

    white-space: nowrap;

    display: none;

    color: #fff;

    line-height: 1.5;
}

.rightnav .ritm+.ritm {

    margin-top: 2px;
}

.rightnav .ritm:hover .codm,
.rightnav .ritm:hover .lesm {

    display: block;
}



@media (max-width: 800px) {

    .rightnav .ritm {

        width: 0.7rem;

        height: 0.7rem;
    }
}