@font-face {
    font-family: iconfont;
    src: url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype');
    font-display: swap
}

.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-skype:before {
    content: "\e87d"
}

.icon-wechat:before {
    content: "\e602"
}

.icon-telegram:before {
    content: "\e727"
}

.icon-broadcast:before {
    content: "\e61a"
}

.icon-facebook:before {
    content: "\e788"
}

.icon-whatsapp:before {
    content: "\e8ea"
}

.icon-youjian:before {
    content: "\e64b"
}

.icon-success:before {
    content: "\e631"
}

.icon-fail:before {
    content: "\e638"
}

.icon-tips:before {
    content: "\e60f"
}

.icon-youjiantou:before {
    content: "\e731"
}

.icon-clock:before {
    content: "\e60e"
}

.icon-arrow-down:before {
    content: "\e605"
}

.icon-close:before {
    content: "\e612"
}

.icon-alarm:before {
    content: "\e694"
}

.icon-order:before {
    content: "\e601"
}

.icon-more:before {
    content: "\e600"
}

.icon-notice:before {
    content: "\e6e5"
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    width: 100%;
    background-color: #191919
}

body {
    margin: 0 auto;
    max-width: 1920px;
    min-width: 1180px;
    width: 100%;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent
}

.jy-en-font {
    font-family: calib !important
}

ul {
    margin-bottom: 0;
    list-style: none
}

a {
    text-decoration: none;
    display: block;
    color: #fff
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-size: 28px;
    line-height: 156px;
    font-weight: 700
}

.vab {
    vertical-align: bottom
}

#backtop {
    display: none;
    position: relative;
    border-bottom: 1px solid #373737;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 40px;
    color: #fff
}

.fl {
    float: left
}

.tac {
    text-align: center !important
}

.clearfix:after {
    display: table;
    content: ''
}

.clearfix:after {
    clear: both
}

.help-for-middle {
    width: 0;
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.anim-trans {
    transition: all .6s cubic-bezier(.19, .65, .51, .93)
}

.minw {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden
}

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 80px;
    background-color: #fff;
    color: #000
}

.hdscroll {
    background-color: #fff
}

.header-wrap {
    position: relative;
    z-index: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 1180px;
    height: 100%
}

.header-wrap dt {
    position: absolute;
    right: 0;
    margin-left: 20px;
    cursor: pointer
}

.header-wrap span {
    padding: 5px;
    line-height: 30px
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-left: 50px
}

nav a {
    color: #1e1e1e
}

.jy-en-nav {
    padding-left: 30px
}

.jy-en-nav .jy-pc-nav li {
    margin-left: 20px
}

.jy-logo {
    display: inline-block;
    width: 80px;
    height: 62px;
    background-image: url(../images/logo.webp);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%
}

.jy-en-logo {
    background-image: url(../images/logo.webp)
}

.jy-pc-nav {
    display: flex;
    line-height: 40px
}

.jy-pc-nav li {
    position: relative;
    margin-left: 30px;
    cursor: pointer;
    font-weight: 550
}

.jy-pc-nav li:after {
    display: block;
    content: '';
    width: 0;
    height: 2px;
    background-color: #d70000;
    transition: all .3s cubic-bezier(.19, .65, .51, .93)
}

.jy-pc-nav .active a, .jy-pc-nav a:hover {
    color: #d70000
}

.jy-pc-nav li:hover:after {
    width: 100%
}

.jy-pc-nav .active:after {
    width: 100%
}

.lang-on {
    background-color: #d70000;
    border-radius: 3px
}

.jyshop-show::before {
    position: absolute;
    bottom: -19px;
    right: 16px;
    z-index: 1000;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #e6e6e6
}

.jy-contact .contact_wrap {
    padding: 30px 0;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, .1);
    background: #fff;
    text-align: center
}

.jy-contact .contact_wrap .subtit {
    margin: 20px 0;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #666
}

.jy-contact form {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    font-family: PingFangSC-Medium
}

.jy-contact form button, .jy-contact form input {
    outline: 0;
    height: 50px;
    border: 2px solid #cdcdcd;
    border-radius: 2px;
    font-size: 18px;
    color: #999;
    line-height: 20px
}

.jy-contact form input {
    margin-right: 20px;
    width: 302px;
    font-size: 14px;
    text-indent: 1em
}

.jy-contact form input:focus {
    border: 2px solid #000;
    caret-color: red
}

.jy-contact form button {
    width: 120px;
    border: none;
    color: #fff;
    background: #d70000;
    cursor: pointer
}

.jy-contact h1, .jy-contact h2 {
    margin: 0 0 18px;
    font-size: 22px;
    color: #070707;
    line-height: 1;
    text-align: center;
    font-weight: 700
}

.jy-contact article {
    margin: 0 auto;
    width: 400px
}

.jy-contact p {
    margin: 0 auto;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    line-height: 30px;
    color: #666
}

.jy-min-contact {
    display: none
}

.section-common-wrap .tit-wrap {
    display: flex;
    justify-content: center
}

.section-common-wrap .tit {
    font-family: PingFangSC-Medium;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.5;
    color: #2b2b2b;
    text-align: center
}

.section-common-wrap .tit::after {
    display: block;
    content: '';
    margin: 0 auto;
    width: 90px;
    height: 4px;
    background-color: #d70000
}

.section-common-wrap .main-wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 60px 0
}

.container {
    height: 50px;
    width: 40px;
    position: fixed;
    left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
    margin: auto;
    z-index: 100
}

.container::after {
    content: '';
    color: #fd3f31;
    font-weight: 700;
    position: absolute;
    bottom: -50px;
    left: -10px
}

.box {
    position: relative;
    height: 50px;
    width: 40px;
    animation: box 1.2s infinite linear
}

.border {
    background: #fd3f31;
    position: absolute
}

.border.one {
    height: 4px;
    top: 0;
    left: 0;
    animation: border-one 1.2s infinite linear
}

.border.two {
    top: 0;
    right: 0;
    height: 100%;
    width: 4px;
    animation: border-two 1.2s infinite linear
}

.border.three {
    bottom: 0;
    right: 0;
    height: 4px;
    width: 100%;
    animation: border-three 1.2s infinite linear
}

.border.four {
    bottom: 0;
    left: 0;
    height: 100%;
    width: 4px;
    animation: border-four 1.2s infinite linear
}

.line {
    height: 4px;
    background: #fd3f31;
    position: absolute;
    width: 0%;
    left: 25%
}

.line.one {
    top: 25%;
    width: 0%;
    animation: line-one 1.2s infinite linear
}

.line.two {
    top: 45%;
    animation: line-two 1.2s infinite linear
}

.line.three {
    top: 65%;
    animation: line-three 1.2s infinite linear
}

@keyframes border-one {
    0% {
        width: 0
    }
    10% {
        width: 100%
    }
    100% {
        width: 100%
    }
}

@keyframes border-two {
    0% {
        height: 0
    }
    10% {
        height: 0%
    }
    20% {
        height: 100%
    }
    100% {
        height: 100%
    }
}

@keyframes border-three {
    0% {
        width: 0
    }
    20% {
        width: 0%
    }
    30% {
        width: 100%
    }
    100% {
        width: 100%
    }
}

@keyframes border-four {
    0% {
        height: 0
    }
    30% {
        height: 0%
    }
    40% {
        height: 100%
    }
    100% {
        height: 100%
    }
}

@keyframes line-one {
    0% {
        left: 25%;
        width: 0
    }
    40% {
        left: 25%;
        width: 0%
    }
    43% {
        left: 25%;
        width: 50%
    }
    52% {
        left: 25%;
        width: 50%
    }
    54% {
        left: 25%;
        width: 0%
    }
    55% {
        right: 25%;
        left: auto
    }
    63% {
        width: 10%;
        right: 25%;
        left: auto
    }
    100% {
        width: 10%;
        right: 25%;
        left: auto
    }
}

@keyframes line-two {
    0% {
        width: 0
    }
    42% {
        width: 0%
    }
    45% {
        width: 50%
    }
    53% {
        width: 50%
    }
    54% {
        width: 0%
    }
    60% {
        width: 50%
    }
    100% {
        width: 50%
    }
}

@keyframes line-three {
    0% {
        width: 0
    }
    45% {
        width: 0%
    }
    48% {
        width: 50%
    }
    51% {
        width: 50%
    }
    52% {
        width: 0%
    }
    100% {
        width: 0%
    }
}

@keyframes box {
    0% {
        opacity: 1;
        margin-left: 0;
        height: 50px;
        width: 40px
    }
    55% {
        margin-left: 0;
        height: 50px;
        width: 40px
    }
    60% {
        margin-left: 0;
        height: 35px;
        width: 50px
    }
    74% {
        margin-left: 0
    }
    80% {
        margin-left: -50px;
        opacity: 1
    }
    90% {
        height: 35px;
        width: 50px;
        margin-left: 50px;
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .3
}

.bgwhite {
    background-color: #fff
}

.submitTip {
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 90%;
    height: 320px;
    max-height: 320px;
    padding-top: 80px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
    text-align: center;
    transition: all 3s
}

.submitTip h2 {
    margin-top: 20px;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 1
}

.submitTip .icon-fail, .submitTip .icon-success {
    font-size: 80px
}

.submitTip .success-color {
    color: #54962a
}

.submitTip .fail-color {
    color: #e43629
}

footer {
    padding-top: 58px;
    padding-bottom: 31px;
    width: 100%;
    background-color: #333
}

.ft-container {
    width: 100%;
    color: #ccc;
    text-align: left;
    line-height: 28px
}

.ft-container a {
    display: inline-block;
    color: #ccc
}

.ft-container a:hover {
    color: #fff
}

.ft-container th {
    color: #fff;
    font-weight: 700;
    line-height: 36px;
    text-align: left
}

.ft-container .lasttd {
    text-align: center
}

.ft-container td:first-child, .ft-container th:first-child {
    width: 206px
}

.ft-container .wspace {
    width: 280px
}

.ft-container td {
    font-size: 12px
}

.ft-container .qr {
    width: 72px;
    height: auto
}

.ft-container .foothr {
    padding: 36px 0
}

.ft-container .foothr span {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #969696
}

.ft-container .en-qq {
    transform: translateX(-24px)
}

.contact-box {
    position: fixed;
    right: 10px;
    bottom: 10%;
    max-width: 100%;
    z-index: 999
}

.contact-box .iconbtn {
    position: relative;
    margin-bottom: 10px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border: none;
    text-align: center;
    background-color: #139e12;
    border-radius: 8px
}

.contact-box .iconbtn .iconfont {
    line-height: 36px;
    font-size: 22px;
    color: #fff
}

.contact-box .iconbtn .icon-whatsapp {
    font-size: 26px
}

.contact-box .iconbtn .qr-wrap {
    position: absolute;
    right: 40px;
    display: none
}

.contact-box .iconbtn:hover .qr-wrap {
    display: block
}

.contact-email {
    max-width: 100%
}

.contact-email .contact_bottom {
    z-index: 10;
    position: fixed;
    right: 56px;
    bottom: 219px;
    width: 360px;
    max-width: calc(100vw - 92px);
    padding: 10px;
    border-radius: 18px;
    background-color: linen;
    opacity: 0;
    visibility: hidden;
    transition: all .6s cubic-bezier(.075, .82, .165, 1)
}

.contact-email .contact_bottom .tit {
    margin: 10px 0 20px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #2b2b2b;
    text-align: center
}

.contact-email .contact_bottom form {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto
}

.contact-email .contact_bottom button, .contact-email .contact_bottom input, .contact-email .contact_bottom textarea {
    margin-bottom: 18px;
    background: #fff;
    border-radius: 2px;
    width: 100%;
    height: 36px;
    border: 2px solid #cdcdcd;
    font-size: 14px;
    color: #999;
    text-indent: 1em
}

.contact-email .contact_bottom textarea {
    padding-top: 12px;
    height: 84px;
    resize: none
}

.contact-email .contact_bottom button {
    border: none;
    background: #139e12;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.contact-email .contact_bottom_show {
    opacity: 1;
    visibility: visible
}

.contact-icons {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between
}

.contact-icons .icon-wrap {
    width: calc(100% / 5);
    text-align: center
}

.contact-icons .icon-wrap .iconfont {
    font-size: 20px;
    color: #139e12
}

.contact-icons .icon-wrap img {
    max-width: 100%
}

.contact_add {
    position: fixed;
    z-index: 100;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 36%;
    max-width: calc(100% - 46px);
    width: 460px;
    padding: 10px;
    border-radius: 18px;
    background-color: linen;
    transition: all .4s cubic-bezier(.075, .82, .165, 1)
}

.contact_add .tip, .contact_add .tit {
    margin: 10px 0;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #2b2b2b;
    text-align: center
}

.contact_add .tip {
    font-size: 14px
}

.contact_add form {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto
}

.contact_add button, .contact_add input {
    margin-bottom: 10px;
    background: #fff;
    border-radius: 2px;
    width: 100%;
    height: 36px;
    border: 2px solid #cdcdcd;
    font-size: 14px;
    color: #999;
    text-indent: 1em
}

.contact_add textarea {
    padding-top: 12px;
    height: 84px;
    resize: none
}

.contact_add button {
    border: none;
    background: #139e12;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.swiper-adtxt {
    position: absolute;
    top: 0;
    right: 40px;
    width: 341px;
    max-width: calc(100vw - 50px);
    height: 36px;
    line-height: 36px;
    color: #fff;
    background-color: rgba(0, 0, 0, .4);
    padding: 0 1em;
    cursor: pointer;
    border-radius: 16px;
    user-select: none
}

.swiper-adtxt .swiper-wrapper {
    padding-left: 1.5em
}

.jy-recommend {
    min-height: 600px;
    background-color: #f2f2f2;
    color: #fff
}

.jy-recommend h6 {
    line-height: 240px;
    color: #1a1a1a
}

.jy-recommend .jy-en-h6 {
    line-height: 80px
}

.jy-recommend article {
    width: 640px;
    margin: 0 auto 60px;
    text-align: center;
    color: #000
}

.jy-recommend .group {
    display: flex;
    justify-content: space-around;
    width: 1046px;
    margin: 0 auto
}

.jy-recommend li {
    width: 320px;
    height: 352px;
    cursor: pointer;
    background-color: #fff;
    transition: all .6s cubic-bezier(.19, .65, .51, .93)
}

.jy-recommend li:hover {
    box-shadow: 8px 6px 13px #ccc
}

.jy-recommend figure {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 182px;
    padding: 16px;
    background: #000 linear-gradient(184deg, transparent 48%, transparent 40%, rgba(255, 255, 255, .55) 100%, rgba(255, 255, 255, .3) 43%, transparent 60%, transparent)
}

.jy-recommend figure img {
    width: 100%;
    transition: transform .3s
}

.jy-recommend figure img:hover {
    transform: scale(1.2)
}

.jy-recommend figcaption {
    padding-left: 2em;
    margin-top: 19px;
    height: 129px;
    background-color: #fff;
    color: #666;
    line-height: 22px
}

.gridtext {
    transition: all .6s ease;
    transform: translateY(-100px);
    opacity: 0
}

.toshow {
    transform: translateY(0);
    opacity: 1
}

.jy-banner {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 820px;
    background: url(../images/banner1.webp) center center no-repeat #000
}

.jy-banner .ban-info {
    width: 468px;
    color: #fff
}

.jy-banner .ban-tit {
    margin-bottom: 10px;
    font-size: 49px;
    line-height: 1
}

.jy-banner .ban-tit img {
    width: 153px
}

.jy-banner .ban-subtit {
    line-height: 40px
}

.jy-banner article {
    margin-top: 25px
}

.jy-banner label {
    font-size: 24px
}

.jy-banner p {
    display: inline-block;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0
}

article {
    font-size: 16px;
    font-weight: 400;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0
}

.jy-grid1 {
    padding-top: 100px;
    height: 400px;
    background-color: #f2f2f2;
    text-align: center;
    color: #333
}

.jy-grid1 h1 {
    line-height: 100px
}

.jy-grid1 article {
    display: inline-block;
    width: 864px;
    height: 47px
}

.jy-grid2 {
    padding-top: 100px;
    height: 600px;
    background: url(../images/k3a_bg.webp) center center no-repeat;
    text-align: center;
    color: #fff
}

.jy-grid2 h2 {
    line-height: 100px
}

.jy-grid2 article {
    display: inline-block;
    width: 864px;
    height: 78px;
    color: #fff
}

.jy-grid2 .group {
    margin: 76px auto 0;
    display: flex;
    justify-content: space-around;
    width: 900px;
    height: 121px;
    line-height: 30px
}

.jy-grid2 .group img {
    width: 86px;
    height: 86px
}

.jy-grid2 .group div {
    width: 20%
}

.jy-grid2 .jy-en-group {
    line-height: 20px
}

.jy-grid2 .jy-en-group figcaption {
    margin-top: 10px
}

.jy-grid3 {
    padding-top: 108px;
    height: 750px;
    background-color: #f2f2f2;
    text-align: center;
    color: #666
}

.jy-grid3 h3 {
    line-height: 100px;
    color: #333
}

.jy-grid3 article {
    display: inline-block;
    width: 864px;
    height: 75px
}

.jy-loop {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 868px;
    height: 360px
}

.jy-loop li {
    position: absolute;
    top: 0;
    left: 0;
    width: 520px;
    transition: transform .4s cubic-bezier(.19, .65, .51, .93);
    background-color: #fff
}

.jy-loop .loop-item1 {
    z-index: 2;
    transform: translateX(0) scale(1)
}

.jy-loop .loop-item2 {
    z-index: 3;
    transform: translate(174px, 0) scale(1.14)
}

.jy-loop .loop-item3 {
    z-index: 2;
    transform: translateX(348px) scale(1)
}

.jy-loop img {
    width: 100%
}

.jy-grid4 {
    padding-top: 100px;
    height: 600px;
    background-color: #d7d7d7;
    text-align: center;
    color: #fff;
    background: url(../images/ab_image_bg.webp) no-repeat;
    background-size: cover;
    overflow: hidden
}

.jy-grid4 article {
    transform: translate(314px, 80px)
}

.jy-grid4 article h4 {
    line-height: 80px
}

.jy-grid4 article p {
    display: inline-block;
    width: 453px;
    height: 48px;
    text-align: left
}

.jy-grid4 figure {
    transform: translate(-300px, -158px)
}

.jy-grid4 .jy-en-atl {
    width: 630px;
    margin: 0 auto
}

.jy-grid4 .jy-en-atl h4 {
    margin-bottom: 20px;
    line-height: 36px
}

.jy-grid4 .jy-en-figure {
    transform: translate(-300px, -194px)
}

.jy-grid5 {
    height: 670px;
    padding-top: 89px;
    background-color: #f2f2f2;
    text-align: center
}

.jy-grid5 h5 {
    line-height: 68px
}

.jy-grid5 article {
    color: #1a1a1a
}

.jy-grid5 figure {
    margin-top: 133px
}

.jy-grid5 figure img:last-child {
    margin-left: 50px
}

.jy-grid6 {
    height: 974px;
    padding-top: 70px;
    background-color: #fff
}

.jy-grid6 table {
    text-align: left;
    color: #666
}

.jy-grid6 td {
    width: 30%;
    vertical-align: top;
    line-height: 30px
}

.jy-grid6 th {
    width: 20%;
    line-height: 50px;
    font-size: 20px;
    color: #54c100;
    text-align: left
}

.jy-grid6 .tdhd {
    width: 20%;
    color: #333
}

.jy-en-grid6 {
    height: 1130px
}