@font-face {
    font-family: Franklin Gothic;
    src: url(../assets/fonts/Franklin\ Gothic.ttf);
    src: url(../assets/fonts/Franklin\ Gothic.eot);
    src: url(../assets/fonts/Franklin\ Gothic.eot?#iefix) format("embedded-opentype"), url(../assets/fonts/Franklin\ Gothic.woff) format("woff"), url(../assets/fonts/Franklin\ Gothic.ttf) format("truetype"), url(../assets/fonts/Franklin\ Gothic.svg#grablau) format("svg")
}

.c-white {
    color: #fff
}

.c-black {
    color: #000
}

.c-red {
    color: #ae0d0d
}

.bg-white {
    background-color: #fff
}

body,
html {
    min-height: 100vh
}

body {
    color: #616161;
    background-color: #000;
    font-family: Microsoft Yahei, Verdana, sans-serif
}

.header {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 7.291vw;
    min-height: 60px;
    padding: 0 40px
}

@media screen and (max-width:1199px) {
    .header {
        padding: 0 30px
    }
}

@media screen and (max-width:991px) {
    .header {
        padding: 0 15px
    }
}

.header:after,
.header:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%
}

.header:before {
    background-color: #000;
    z-index: 2;
    transform: translateY(-1.82291vw) rotate(-1.5deg) scaleX(1.05)
}

.header:after {
    background-color: #7f0f0b;
    z-index: 1;
    transform: translateY(-1.3125vw) rotate(-2deg) scaleX(1.05)
}

.header-wrapper {
    display: flex;
    position: relative;
    z-index: 3;
    height: 100%;
    align-items: center
}

.header-logo {
    margin-right: 40px
}

@media screen and (max-width:991px) {
    .header-logo {
        margin-right: 20px
    }
}

@media screen and (max-width:1199px) {
    .header-logo img {
        width: 220px
    }
}

@media screen and (max-width:991px) {
    .header-logo img {
        width: 100px
    }
}

.header-control {
    flex-grow: 1;
    position: relative;
    top: -.88vw
}

.header-lang {
    font-family: Microsoft Yahei, sans-serif;
    color: #828282;
    position: relative;
    top: -1.7vw
}

.header-lang a {
    font-size: 15px;
    line-height: 15px;
    transition: all .3s
}

@media screen and (max-width:767px) {
    .header-lang a {
        font-size: 12px
    }
}

.header-lang a:before {
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 0;
    height: 1px;
    background-color: #fff;
    margin-right: 10px;
    transition: all .3s
}

.header-lang a.current,
.header-lang a:hover {
    color: #fff
}

.header-lang a.current:before {
    width: 30px
}

@media screen and (max-width:991px) {
    .header-lang a.current:before {
        width: 15px
    }
}

.header .hamburger:hover>div,
.header .hamburger:hover>div:after,
.header .hamburger:hover>div:before {
    background-color: #fff
}

.footer {
    padding: 30px 10px;
    font-size: 14px;
    background-color: #0c0c0c;
    color: #4b4948;
    text-align: center
}

@media screen and (max-width:991px) {
    .footer {
        padding: 15px 10px
    }
}

.footer-content {
    position: relative
}

.footer-support {
    position: absolute;
    top: 0;
    right: 15px
}

@media (max-width:767px) {
    .footer-support {
        display: none
    }
}

.nav {
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 99;
    color: #4b4948;
    font-weight: 700;
    background-color: #000;
    transform: translateY(-100%);
    transition: all .8s ease
}

.nav.on {
    transform: translateY(0)
}

.nav.on .nav-item a {
    opacity: 1;
    transform: translateZ(0)
}

.nav.on .nav-item:first-child a {
    transition: color .2s ease, transform .8s .48s, opacity .8s .48s
}

.nav.on .nav-item:nth-child(2) a {
    transition: color .2s ease, transform .8s .64s, opacity .8s .64s
}

.nav.on .nav-item:nth-child(3) a {
    transition: color .2s ease, transform .8s .8s, opacity .8s .8s
}

.nav.on .nav-item:nth-child(4) a {
    transition: color .2s ease, transform .8s .96s, opacity .8s .96s
}

.nav-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 55px;
    padding: 0 5.72vw
}

@media screen and (max-width:1199px) {
    .nav-list {
        font-size: 48px
    }
}

@media screen and (max-width:991px) {
    .nav-list {
        font-size: 40px
    }
}

@media screen and (max-width:767px) {
    .nav-list {
        font-size: 28px;
        align-items: center
    }
}

.nav-item {
    margin: 1.953125vw
}

.nav-item a {
    display: inline-block;
    transition: all .3s;
    opacity: 0;
    transform: translate3d(0, 50px, 0)
}

.nav-item a:hover,
.pbanner {
    color: #fff
}

.pbanner {
    height: 780px;
    transform: skewY(-1deg);
    position: relative;
    top: 10px
}

@media screen and (max-width:1199px) {
    .pbanner {
        height: 600px
    }
}

@media screen and (max-width:991px) {
    .pbanner {
        height: 500px
    }
}

@media screen and (max-width:767px) {
    .pbanner {
        height: 300px
    }
}

.pbanner-content {
    position: relative;
    top: 18.2291vw
}

@media screen and (max-width:991px) {
    .pbanner-content {
        top: 30%
    }
}

@media screen and (min-width:2000px) {
    .pbanner-content {
        top: 13.2291vw
    }
}

.pbanner-title {
    font-weight: 700
}

.pbanner-title>* {
    display: inline-block;
    vertical-align: middle
}

.pbanner-title span {
    position: relative;
    font-size: 5.208vw;
    padding-bottom: 5px;
    border-bottom: 4px solid #fff
}

@media screen and (min-width:992px) {
    .pbanner-title span {
        font-size: 5.208vw
    }
}

@media screen and (max-width:991px) {
    .pbanner-title span {
        font-size: 30px
    }
}

@media screen and (max-width:767px) {
    .pbanner-title span {
        font-size: 22px
    }
}

.pbanner-title span:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 4px;
    background-color: #ad0d0e;
    transition: all .5s
}

.pbanner-title i {
    font-size: 3.125vw;
    color: #ad0d0e;
    margin-left: 15px
}

@media screen and (max-width:991px) {
    .pbanner-title i {
        font-size: 26px;
        margin-left: 5px
    }
}

@media (max-width:767px) {
    .pbanner-title i {
        display: none
    }
}

.pbanner-nav {
    font-size: 24px;
    margin-top: 1.5625vw;
    line-height: 1.4;
    font-weight: 700
}

@media screen and (max-width:991px) {
    .pbanner-nav {
        font-size: 20px;
        font-size: 16px
    }
}

@media screen and (max-width:767px) {
    .pbanner-nav {
        font-size: 14px
    }
}

.pbanner-nav li {
    transition: color .2s
}

.pbanner-nav a {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s
}

@media screen and (max-width:991px) {
    .pbanner-nav a {
        opacity: 1;
        visibility: visible;
        transform: translateZ(0)
    }
}

.pbanner-nav a.current,
.pbanner-nav a:hover {
    color: #ae0d0d
}

.pbanner-product {
    position: absolute;
    bottom: -130px;
    right: 0;
    width: 322px
}

.pbanner-product .slide {
    width: auto
}

.pbanner:hover .pbanner-nav a {
    opacity: 1;
    visibility: visible;
    transform: translateZ(0)
}

.pbanner:hover .pbanner-nav li:first-child a {
    transition-delay: .1s
}

.pbanner:hover .pbanner-nav li:nth-child(2) a {
    transition-delay: .2s
}

.pbanner:hover .pbanner-nav li:nth-child(3) a {
    transition-delay: .3s
}

.pbanner:hover .pbanner-nav li:nth-child(4) a {
    transition-delay: .4s
}

.pbanner:hover .pbanner-nav li:nth-child(5) a {
    transition-delay: .5s
}

.pbanner:hover .pbanner-nav li:nth-child(6) a {
    transition-delay: .6s
}

.pbanner:hover .pbanner-nav li:nth-child(7) a {
    transition-delay: .7s
}

.pbanner:hover .pbanner-title span:after {
    width: 100%
}

.i-bswiper {
    position: fixed;
    width: 100%;
    height: 100vh;
    cursor: url(../assets/images/cursor.png), default;
    background-color: #000
}

.i-bswiper-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px) grayscale(100%)
}

.i-bswiper-bg .slide {
    transition-delay: .25s
}

.i-bswiper-bg .slide:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .6)
}

.i-bswiper-content {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    transform: scale(.7) skewY(-2.5deg);
    transition: all .5s
}

.i-bswiper-text {
    padding: 0 8.59375vw;
    transform: skewY(-3.5deg)
}

.i-bswiper-title1,
.i-bswiper-title2 {
    transition: all .6s;
    opacity: 0;
    transform: translate3d(30%, 0, 0)
}

.i-bswiper-title1 {
    font-size: 105px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.5625vw;
    text-shadow: 10px 10px 15px rgba(0, 0, 0, .6)
}

@media screen and (max-width:1199px) {
    .i-bswiper-title1 {
        font-size: 70px
    }
}

@media screen and (max-width:767px) {
    .i-bswiper-title1 {
        font-size: 30px
    }
}

.i-bswiper-title2>span {
    font-size: 35px;
    background-color: #000;
    padding: 15px 20px;
    display: inline-block;
    transform: skewX(-12deg)
}

@media screen and (max-width:1199px) {
    .i-bswiper-title2>span {
        padding: 10px 15px;
        font-size: 30px
    }
}

@media screen and (max-width:991px) {
    .i-bswiper-title2>span {
        padding: 10px;
        font-size: 22px
    }
}

@media screen and (max-width:767px) {
    .i-bswiper-title2>span {
        font-size: 14px
    }
}

.i-bswiper-hint {
    position: absolute;
    z-index: 2;
    right: -50px;
    top: 50%;
    transform: rotate(90deg)
}

.i-bswiper-hint:after {
    content: "";
    width: 50px;
    height: 1px;
    background-color: #ae0d0d;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    animation: waggle 3s ease infinite
}

.i-bswiper-footer {
    position: absolute;
    bottom: 2.604vw;
    left: 50%;
    z-index: 2;
    white-space: nowrap;
    transform: translateX(-50%)
}

.i-bswiper-control {
    display: inline-block;
    vertical-align: middle;
    color: #ae0d0d;
    font-size: 40px;
    cursor: pointer;
    transition: all .3s
}

.i-bswiper-control:first-child:hover {
    transform: translateX(-5px)
}

.i-bswiper-control:last-child:hover {
    transform: translateX(5px)
}

.i-bswiper-pagination {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    font-size: 20px;
    color: #fff;
    display: none!important
}

.i-bswiper-pagination .current {
    position: relative;
    top: -10px;
    left: 10px
}

.i-bswiper-pagination .sum {
    position: relative;
    top: 10px;
    left: -10px
}

.i-bswiper-slide.active .i-bswiper-content {
    transform: scale(1) skewX(0)
}

.i-bswiper-slide.active .i-bswiper-title1,
.i-bswiper-slide.active .i-bswiper-title2 {
    opacity: 1;
    transform: translateZ(0)
}

.i-bswiper-slide.active .i-bswiper-title1 {
    transition-delay: .45s
}

.i-bswiper-slide.active .i-bswiper-title2 {
    transition-delay: .6s
}

.i-scroll {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 0 3.90625vw
}

.i-scroll,
.i-scroll-pic,
.i-scroll-pics,
.i-scroll-pitem {
    height: 100vh
}

.i-scroll-pics {
    height: 100%;
    z-index: -1
}

.i-scroll-pics,
.i-scroll-pitem {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.i-scroll-pitem {
    overflow: hidden
}

.i-scroll-pitem:first-child {
    z-index: 9
}

.i-scroll-pitem:nth-child(2) {
    z-index: 8
}

.i-scroll-pitem:nth-child(3) {
    z-index: 7
}

.i-scroll-pitem:nth-child(4) {
    z-index: 6
}

.i-scroll-pitem:nth-child(5) {
    z-index: 5
}

.i-scroll-pitem:nth-child(6) {
    z-index: 4
}

.i-scroll-pitem:nth-child(7) {
    z-index: 3
}

.i-scroll-pitem:nth-child(8) {
    z-index: 2
}

.i-scroll-pitem:nth-child(9) {
    z-index: 1
}

.i-scroll-pitem:nth-child(10) {
    z-index: 0
}

.i-scroll-nav {
    flex-grow: 1;
    height: auto;
    position: relative;
    top: 50%;
    font-size: 40px;
    color: hsla(0, 0%, 100%, .2)
}

@media screen and (max-width:1199px) {
    .i-scroll-nav {
        font-size: 36px
    }
}

@media screen and (max-width:991px) {
    .i-scroll-nav {
        font-size: 28px
    }
}

@media screen and (max-width:767px) {
    .i-scroll-nav {
        font-size: 18px
    }
}

.i-scroll-nitem {
    transition: margin .2s
}

.i-scroll-nav1 {
    position: relative;
    display: flex;
    align-items: flex-start;
    font-weight: 700
}

@media (max-width:767px) {
    .i-scroll-nav1 {
        margin: 15px
    }
}

.i-scroll-nav1 i {
    position: absolute;
    font-size: 40px;
    color: #bc0608;
    margin-top: -3px;
    top: 60%;
    right: 100%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all .3s
}

.i-scroll-nav1:after,
.i-scroll-nav1>* {
    align-self: center
}

.i-scroll-nav1:after {
    content: "";
    height: 1px;
    background-color: hsla(0, 0%, 100%, .2);
    flex-grow: 1;
    margin: 0 15px;
    opacity: 0
}

.i-scroll-nav1 a:hover {
    color: #fff
}

.i-scroll-nav2 {
    font-size: 18px;
    margin-top: 20px;
    opacity: 0;
    transition: opacity .3s;
    line-height: 1.6
}

@media screen and (max-width:991px) {
    .i-scroll-nav2 {
        margin-top: 5px
    }
    .i-scroll-nav2 li {
        float: none!important;
        display: block;
        margin: 5px 0!important
    }
}

@media screen and (max-width:767px) {
    .i-scroll-nav2 {
        display: none
    }
}

.i-scroll-nav2 li:not(:last-child) {
    margin-right: 15px
}

.i-scroll-nav2 .arrow {
    position: relative
}

.i-scroll-nav2 a:hover {
    color: #bc0608
}

.i-scroll-swiper {
    width: 25%;
    height: 100vh;
    align-self: center
}

.i-scroll-swiper .swiper-slide {
    height: 100vh !important;
}

@media screen and (max-width:991px) {
    .i-scroll-swiper {
        display: none
    }
}

.i-scroll-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .2s
}

.i-scroll-slide.active {
    opacity: 1;
    transition: all .6s
}

.i-scroll-caption {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-top: 2.6041vw
}

@media screen and (max-width:1199px) {
    .i-scroll-caption {
        font-size: 20px
    }
}

.i-scroll-more {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    color: #000;
    font-size: 16px
}

@media screen and (max-width:991px) {
    .i-scroll-more {
        display: none
    }
}

.i-scroll-more:after,
.i-scroll-more:before {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    transform: translate3d(50%, 50%, 0) rotate(45deg)
}

.i-scroll-more:before {
    width: 55vw;
    height: 55vw;
    min-width: 1000px;
    min-height: 1000px;
    background-color: rgba(0, 0, 0, .8);
    z-index: -1
}

.i-scroll-more:after {
    width: 15vw;
    height: 15vw;
    min-width: 400px;
    min-height: 400px;
    background-color: #8d0606;
    z-index: 0
}

.i-scroll-more .arrow {
    position: relative;
    left: 20px;
    margin-bottom: 20px
}

.i-scroll-more a {
    display: block;
    padding-right: 30px;
    padding-bottom: 30px;
    position: relative;
    z-index: 2
}

.i-scroll-more i {
    font-size: 50px
}

.i-scroll-nitem.active {
    color: #fff;
    font-size: 125%;
    margin-bottom: 2.083vw
}

.i-scroll-nitem.active .i-scroll-nav1 i,
.i-scroll-nitem.active .i-scroll-nav1:after,
.i-scroll-nitem.active .i-scroll-nav2 {
    opacity: 1
}

.i-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%
}

.i-footer-chunk {
    padding: 4.6875vw;
    background-color: #000
}

.i-footer-line {
    width: 30px;
    height: 2px;
    background-color: #4b4948;
    display: inline-block
}

.i-footer:before {
    content: "";
    position: absolute;
    height: 2.604vw;
    width: 1px;
    background-color: #550506;
    margin: auto;
    top: 0;
    left: 50%
}

@keyframes waggle {
    10% {
        transform: translateZ(0)
    }
    50% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translateZ(0)
    }
}

.about-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:767px) {
    .about-wrapper {
        min-height: 0;
        padding-top: 100px
    }
}

.about-line {
    display: block;
    background-color: #ae0d0d;
    width: 1px;
    height: 2.604vw;
    margin: 1.8vw auto 2.604vw
}

@media screen and (max-width:991px) {
    .pindex {
        padding-top: 10vw
    }
}

@media screen and (max-width:991px) {
    .pindex-wrapper {
        width: 100%!important
    }
}

.pindex-item {
    position: relative;
    float: left;
    width: 30vw;
    height: 100vh;
    transition: box-shadow .4s
}

@media screen and (max-width:1199px) {
    .pindex-item {
        width: 33.333vw
    }
}

@media screen and (max-width:991px) {
    .pindex-item {
        width: 100%!important;
        height: auto
    }
}

@media screen and (min-width:992px) {
    .pindex-item:hover {
        z-index: 2;
        box-shadow: 0 0 80px 40px rgba(0, 0, 0, .5)
    }
}

@media screen and (min-width:992px) {
    .pindex-item:hover .pindex-content {
        left: -1vw;
        right: -1vw;
        padding: 0 1vw
    }
    .pindex-item:hover .pindex-content:after {
        opacity: 0;
        visibility: hidden
    }
}

.pindex-item:hover .pindex-nav li {
    opacity: 1;
    transform: translateZ(0)
}

.pindex-item:hover .pindex-nav li:first-child {
    transition-delay: 0s
}

.pindex-item:hover .pindex-nav li:nth-child(2) {
    transition-delay: .1s
}

.pindex-item:hover .pindex-nav li:nth-child(3) {
    transition-delay: .2s
}

.pindex-item:hover .pindex-nav li:nth-child(4) {
    transition-delay: .3s
}

.pindex-item:hover .pindex-nav li:nth-child(5) {
    transition-delay: .4s
}

.pindex-item:hover .pindex-nav li:nth-child(6) {
    transition-delay: .5s
}

.pindex-item:hover .pindex-nav li:nth-child(7) {
    transition-delay: .6s
}

.pindex-item:hover .pindex-nav li:nth-child(8) {
    transition-delay: .7s
}

.pindex-item:hover .pindex-nav li:nth-child(9) {
    transition-delay: .8s
}

.pindex-item:hover .pindex-nav li:nth-child(10) {
    transition-delay: 1s
}

.pindex-item:hover .pindex-nav li:nth-child(11) {
    transition-delay: 1.1s
}

.pindex-item:hover .pindex-nav li:nth-child(12) {
    transition-delay: 1.2s
}

.pindex-item:hover .pindex-nav li:nth-child(13) {
    transition-delay: 1.3s
}

.pindex-item:hover .pindex-nav li:nth-child(14) {
    transition-delay: 1.4s
}

.pindex-item:hover .pindex-nav li:nth-child(15) {
    transition-delay: 1.5s
}

.pindex-item:hover .pindex-title i {
    opacity: 1
}

.pindex-content {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all .4s;
    align-items: flex-start
}

@media screen and (max-width:991px) {
    .pindex-content {
        position: static;
        padding: 30px 0
    }
}

.pindex-content:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    transition: all .2s
}

.pindex-text {
    position: relative;
    z-index: 2;
    color: #fff
}

@media screen and (min-width:992px) {
    .pindex-text {
        top: 12vw;
        padding: 0 4.16666vw
    }
}

@media screen and (max-width:991px) {
    .pindex-text {
        padding: 0 10vw
    }
}

.pindex-title {
    position: relative;
    margin-bottom: 6.25vw;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700
}

@media screen and (max-width:1199px) {
    .pindex-title {
        font-size: 40px
    }
}

@media screen and (max-width:991px) {
    .pindex-title {
        font-size: 30px
    }
}

@media screen and (max-width:767px) {
    .pindex-title {
        font-size: 22px
    }
}

.pindex-title i {
    position: absolute;
    top: -4px;
    right: 100%;
    font-size: 50px;
    color: #ae0d0d;
    opacity: 0;
    transition: all .3s
}

@media screen and (max-width:991px) {
    .pindex-title i {
        display: none
    }
}

.pindex-nav {
    font-size: 20px;
    /*font-weight: 700*/
}

.pindex-nav li {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: all .2s
}

@media (max-width:767px) {
    .pindex-nav li {
        opacity: 1!important;
        transform: translateZ(0)!important;
        font-weight: 100!important;
        line-height: 20px!important
    }
}

.pindex-nav li+li {
    margin-top: 1vw
}

.pindex-nav a {
    transition: none
}

.pindex-nav a:hover {
    color: #ae0d0d
}

@media (min-width:2000px) {
    .pindex-nav {
        font-size: 18px
    }
}

.pindex-shadow {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden
}

@media screen and (max-width:991px) {
    .pindex-shadow {
        display: none
    }
}

.pindex-shadow.on {
    transition: all .3s;
    opacity: 1;
    visibility: visible
}

.pdetail-product-tabs {
    float: right
}

.pdetail-product-tabs li {
    position: relative;
    cursor: pointer
}

.pdetail-product-tabs li.active:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #af1010
}

.pdetail-product-tabs li+li {
    margin-left: 2.6041vw
}

.pdetail-product-tabs img {
    width: 65px;
    height: 104px
}

.pdetail-des {
    margin-top: 5.2083vw
}

.pdetail-des-tabs {
    font-size: 0;
    color: #000;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 2.6041vw
}

.pdetail-des-tabs a {
    display: inline-block;
    font-size: 30px;
    padding: 15px 30px;
    margin-bottom: 5px
}

@media screen and (min-width:992px) {
    .pdetail-des-tabs a {
        font-size: 28px
    }
}

@media screen and (max-width:991px) {
    .pdetail-des-tabs a {
        font-size: 24px
    }
}

@media screen and (max-width:767px) {
    .pdetail-des-tabs a {
        font-size: 16px
    }
}

.pdetail-des-tabs a.active,
.pdetail-des-tabs a:hover {
    color: #ae0d0d;
    background-color: #f4f4f4
}

.pdetail-des-pic {
    width: 100%
}

.pdetail-des-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.6;
    margin: 10px 0
}

@media screen and (max-width:991px) {
    .pdetail-des-item {
        font-size: 14px
    }
}

@media screen and (max-width:767px) {
    .pdetail-des-item {
        flex-direction: column;
        align-items: left
    }
}

.pdetail-des-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: 30px;
    width: 30px;
    border: 3px solid #b00c0c;
    border-radius: 50%;
    color: #b00c0c;
    font-size: 16px;
    font-family: Microsoft Yahei, sans-serif;
    margin-right: 10px
}

@media screen and (max-width:767px) {
    .pdetail-des-icon {
        margin-bottom: 10px
    }
}

.pdetail-des-icon:after,
.pdetail-des-icon:before {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    background-color: #fff;
    transform: rotate(15deg)
}

.pdetail-des-icon:before {
    left: 0;
    top: 0
}

.pdetail-des-icon:after {
    right: 0;
    bottom: 0
}

.npdetail {
    background-color: #fff;
    overflow: hidden
}

.npdetail-wrapper {
    padding: 0 7.29167vw;
    width: 100%;
    margin: 0 auto
}

@media screen and (max-width:767px) {
    .npdetail-wrapper {
        padding: 0 15px
    }
}

@media screen and (min-width:2000px) {
    .npdetail-wrapper {
        width: 80%
    }
}

.npdetail-title-lager {
    font-size: 70px;
    color: #000;
    font-weight: 700
}

@media screen and (max-width:1439px) {
    .npdetail-title-lager {
        font-size: 60px
    }
}

@media screen and (max-width:1278px) {
    .npdetail-title-lager {
        font-size: 42px
    }
}

@media screen and (max-width:991px) {
    .npdetail-title-lager {
        font-size: 30px
    }
}

@media screen and (max-width:767px) {
    .npdetail-title-lager {
        font-size: 20px
    }
}

.npdetail-title-middle {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 60px;
    position: relative;
    padding-top: 5.20833vw;
    font-weight: 700
}

.npdetail-title-middle.white {
    color: #fff
}

@media screen and (max-width:1439px) {
    .npdetail-title-middle {
        font-size: 52px
    }
}

@media screen and (max-width:1278px) {
    .npdetail-title-middle {
        font-size: 36px
    }
}

@media screen and (max-width:991px) {
    .npdetail-title-middle {
        font-size: 26px
    }
}

@media screen and (max-width:767px) {
    .npdetail-title-middle {
        font-size: 18px
    }
}

.npdetail-title-middle:after {
    content: "";
    width: 30px;
    height: 3px;
    margin-left: 1.30208vw;
    background-color: #ae0d0d
}

.npdetail-title-small {
    font-size: 17px;
    color: #8d0606;
    font-weight: 700
}

.npdetail-title-small.mb {
    margin-bottom: 2.34375vw
}

@media screen and (max-width:991px) {
    .npdetail-title-small {
        font-size: 16px;
        padding-bottom: 10px
    }
}

.npdetail-r1 {
    height: 100vh;
    display: flex;
    align-items: center
}

@media screen and (max-width:767px) {
    .npdetail-r1 {
        height: auto;
        padding-top: 100px;
        padding-bottom: 20px
    }
}

.npdetail-r1-pic {
    margin-bottom: 20px
}

@media (max-width:767px) {
    .npdetail-r1-pic {
        display: none
    }
    .npdetail-r1-pic img {
        max-height: 150px
    }
}

.npdetail-r1-hr {
    display: block;
    width: 50px;
    height: 3px;
    background-color: #ae0d0d
}

.npdetail-marks {
    display: inline-flex;
    position: relative;
    font-size: 0;
    color: #000
}

.npdetail-marks:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #e8e8e8;
    transform: skewX(-15deg)
}

.npdetail-marks-item {
    display: inline-flex;
    position: relative;
    align-items: center;
    font-size: 14px;
    padding: 8px
}

@media (max-width:767px) {
    .npdetail-marks-item {
        font-size: 12px
    }
}

.npdetail-marks-icon {
    font-size: 26px;
    margin-right: 6px
}

.npdetail-r2 {
    position: relative;
    padding: 0 0 7.8125vw
}

.npdetail-r2-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.npdetail-performance {
    color: #fff;
    position: relative;
    z-index: 1
}

.npdetail-performance-item {
    display: flex;
    align-items: center
}

@media (min-width:768px) {
    .npdetail-performance-item {
        justify-content: flex-end
    }
}

.npdetail-performance-item:not(:last-child) {
    margin-bottom: 20px
}

@media screen and (max-width:991px) {
    .npdetail-performance-item:not(:last-child) {
        margin-bottom: 0
    }
}

.npdetail-performance-title {
    display: flex;
    align-items: center;
    font-size: 17px
}

@media (min-width:768px) {
    .npdetail-performance-title {
        width: 25%
    }
}

@media (max-width:767px) {
    .npdetail-performance-title {
        flex-grow: 1
    }
}

@media screen and (max-width:991px) {
    .npdetail-performance-title {
        font-size: 14px
    }
}

@media screen and (max-width:767px) {
    .npdetail-performance-title {
        font-size: 12px
    }
}

.npdetail-performance-icon {
    font-size: 34px;
    margin-right: 15px
}

@media screen and (max-width:1278px) {
    .npdetail-performance-icon {
        font-size: 28px
    }
}

@media screen and (max-width:991px) {
    .npdetail-performance-icon {
        font-size: 24px
    }
}

@media screen and (max-width:767px) {
    .npdetail-performance-icon {
        font-size: 22px
    }
}

.npdetail-performance-progress {
    width: 60%;
    background-color: #4f4f4f;
    padding: 1px
}

.npdetail-performance-progress-wrapper {
    position: relative;
    overflow: hidden;
    border: 2px solid #000
}

.npdetail-performance-progress-inner {
    background-color: #ae0d0d;
    width: 100%;
    transform: translate3d(-101%, 0, 0);
    height: 4px
}

.npdetail-performance-progress-inner.p010 {
    transform: translate3d(-90%, 0, 0)
}

.npdetail-performance-progress-inner.p020 {
    transform: translate3d(-80%, 0, 0)
}

.npdetail-performance-progress-inner.p030 {
    transform: translate3d(-70%, 0, 0)
}

.npdetail-performance-progress-inner.p040 {
    transform: translate3d(-60%, 0, 0)
}

.npdetail-performance-progress-inner.p050 {
    transform: translate3d(-50%, 0, 0)
}

.npdetail-performance-progress-inner.p060 {
    transform: translate3d(-40%, 0, 0)
}

.npdetail-performance-progress-inner.p070 {
    transform: translate3d(-30%, 0, 0)
}

.npdetail-performance-progress-inner.p080 {
    transform: translate3d(-20%, 0, 0)
}

.npdetail-performance-progress-inner.p090 {
    transform: translate3d(-10%, 0, 0)
}

.npdetail-performance-progress-inner.p0100,
.npdetail-performance-progress-inner.p100 {
    transform: translateZ(0)
}

.npdetail-performance-progress-line {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, .6)
}

.npdetail-performance-progress-line:first-child {
    left: 10%
}

.npdetail-performance-progress-line:nth-child(2) {
    left: 20%
}

.npdetail-performance-progress-line:nth-child(3) {
    left: 30%
}

.npdetail-performance-progress-line:nth-child(4) {
    left: 40%
}

.npdetail-performance-progress-line:nth-child(5) {
    left: 50%
}

.npdetail-performance-progress-line:nth-child(6) {
    left: 60%
}

.npdetail-performance-progress-line:nth-child(7) {
    left: 70%
}

.npdetail-performance-progress-line:nth-child(8) {
    left: 80%
}

.npdetail-performance-progress-line:nth-child(9) {
    left: 90%
}

.npdetail-r4,
.npdetail-r4-content {
    position: relative
}

.npdetail-r4-content:after,
.npdetail-r4-content:before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 2000px
}

.npdetail-r4-content:before {
    background-color: #ae0d0d;
    transform: skewX(-15deg);
    right: -25%
}

.npdetail-r4-content:after {
    background-color: #000;
    transform: skewX(-10deg);
    right: -22%
}

.npdetail-r4-text {
    position: relative;
    z-index: 1;
    padding-bottom: 3.125vw
}

.npdetail-r4-pic {
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
    height: 100%;
    background-image: url(../assets/images/npdetail/npdetail-r4-pic.jpg)
}

.npdetail-r5 {
    padding-bottom: 3.125vw
}

.npdetail-params-li.active .npdetail-params-list2 {
    display: block
}

.npdetail-params-li.active .npdetail-params-control:before {
    content: "\e609"
}

.npdetail-params-list1 {
    border-bottom: 1px solid #c9c9c9
}

.npdetail-params-item1 {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    font-size: 20px;
    border-top: 1px solid #c9c9c9
}

@media (max-width:767px) {
    .npdetail-params-item1 {
        font-size: 14px
    }
}

.npdetail-params-item1>span {
    flex-grow: 1;
    font-size: 40px;
    color: #333
}

.npdetail-params-control {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: 18px;
    background-color: #902424;
    color: #fff
}

.npdetail-params-control:before {
    content: "\e608"
}

.npdetail-params-list2 {
    display: none
}

.npdetail-params-item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid #c9c9c9;
    padding: 15px 0;
    font-size: 13px
}

.npdetail-params-item2 div,
.npdetail-params-item2 p {
    width: 33.33333%;
    padding: 2px;
    background-color: #f2f2f2;
    padding: 10px;
    border: 2px solid #fff;
    font-size: 22px;
    color: #333
}

@media (max-width:767px) {
    .npdetail-params-item2 div,
    .npdetail-params-item2 p {
        width: 100%
    }
}

.npdetail-params-item2 span {
    display: block;
    padding: 10px
}

@media (max-width:767px) {
    .npdetail-params-item2 {
        font-size: 10px
    }
}

.npdetail-r3-product {
    display: flex;
    justify-content: center
}

@media (max-width:767px) {
    .npdetail-r3-product {
        max-width: 300px;
        margin: 15px auto 0
    }
}

.npdetail-r3-product-wrapper {
    position: relative
}

.npdetail-r3-pic-details,
.npdetail-r3-product-marks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0
}

.npdetail-r3-product-marks {
    z-index: 10
}

.npdetail-r3-pic-details {
    z-index: 5
}

.npdetail-r3-product-marks-item {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000;
    cursor: pointer
}

@media (max-width:767px) {
    .npdetail-r3-product-marks-item {
        width: 15px;
        height: 15px
    }
}

.npdetail-r3-product-marks-item:before {
    content: "";
    width: 60%;
    height: 2px;
    background-color: #ff2b00
}

@media (max-width:767px) {
    .npdetail-r3-product-marks-item:before {
        height: 1px
    }
}

.npdetail-r3-product-marks-item:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    content: "";
    width: 2px;
    height: 60%;
    background-color: #ff2b00
}

@media (max-width:767px) {
    .npdetail-r3-product-marks-item:after {
        width: 1px
    }
}

.npdetail-r3-pic-details-item,
.npdetail-r3-pic-details-item img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    max-width: 100%
}

.npdetail-r3-pic-details-item-text {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000;
    padding: 20px 15px 15px;
    width: 500px;
    color: #fff;
    line-height: 2;
    transform: translate(-46%, -100%);
    border-radius: 10px;
    font-size: 16px
}

@media (max-width:767px) {
    .npdetail-r3-pic-details-item-text {
        width: 210px;
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.2
    }
}

.npdetail-r3-pic-details-item-text:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 15px solid transparent;
    border-top-color: #000
}

.npdetail-r3-pic-details-item-text span {
    position: absolute;
    line-height: 1;
    right: 5px;
    top: 5px;
    color: #ff2b00;
    font-size: 26px;
    cursor: pointer
}

.npdetail-r3-pic-details-item,
.npdetail-r3-product-marks {
    transition: all .3s
}

.npdetail-r3-product-marks.hidden {
    visibility: hidden;
    opacity: 0
}

.npdetail-r3-pic-details-item {
    opacity: 0
}

.npdetail-r3-pic-details-item.active {
    opacity: 1;
    z-index: 5
}

.plist {
    color: #000
}

.plist-item {
    position: relative
}

@media screen and (min-width:1440px) {
    .plist-item {
        width: 25%
    }
}

.plist-item figcaption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width:767px) {
    .plist-item figcaption {
        margin-top: 18px;
        font-size: 12px
    }
}

.plist-item:hover .plist-btn {
    transform: translate3d(-50%, -100%, 0);
    opacity: 1
}

.plist-btn {
    position: absolute!important;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -10%, 0);
    transition: all .6s;
    opacity: 0
}

@media (max-width:767px) {
    .plist-btn {
        display: none
    }
}

.plist-pic {
    position: relative;
    padding-bottom: 70%
}

.plist-pic img {
    max-height: 100%
}

.plist-pic img:nth-child(2) {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%)
}

.contact {
    padding-top: 12.76vw
}

@media screen and (max-width:767px) {
    .contact {
        padding-top: 100px
    }
}

.details {
    line-height: 1.7
}

.details div:not(:last-child),
.details img:not(:last-child),
.details p:not(:last-child),
.details table:not(:last-child) {
    margin-bottom: 15px
}

.btn-skew {
    position: relative;
    color: #000;
    padding: 12px 15px;
    font-size: 16px;
    overflow: hidden;
    background-color: #fff;
    font-weight: 700
}

@media (max-width:767px) {
    .btn-skew {
        padding: 8px 10px
    }
}

.btn-skew:after,
.btn-skew:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 110%;
    background-color: #ae0d0d
}

.btn-skew:before {
    transform: translate3d(-102%, 0, 0);
    transition: all .4s ease
}

.btn-skew:after {
    transform: translateZ(0);
    transition: all .4s ease .4s
}

.btn-skew .arrow,
.btn-skew span {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 1px;
    z-index: 2
}

.btn-skew span {
    left: 3px;
    transition: all .3s
}

.btn-skew .arrow {
    position: relative;
    top: 0
}

.btn-skew i {
    font-size: 20px;
    font-weight: 700
}

.arrow-parent:hover .arrow i:first-child {
    opacity: 0;
    transform: translate3d(10px, 0, 0)
}

.arrow-parent:hover .arrow i:last-child {
    opacity: 1;
    transform: translateZ(0);
    transition-delay: .15s
}

.arrow {
    position: relative
}

.arrow i {
    display: inline-block;
    /* vertical-align: top; */
    transition: transform .3s, opacity .3s
}

.arrow i:last-child {
    position: absolute;
    top: 5px;
    left: 0;
    opacity: 0;
    transform: translate3d(-10px, 0, 0)
}

.table table {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #d8d8d8
}

.table tr:nth-child(odd) {
    background-color: #fff
}

.table tr:nth-child(2n) {
    background-color: #f4f4f4
}

.table td,
.table th {
    padding: 15px 10px
}

.table th {
    color: #fff;
    background-color: #ae0d0d;
    font-size: 20px
}

.table td {
    font-size: 16px
}

.form-group {
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border-bottom: 2px solid #616161
}

.form-group-flex {
    display: flex
}

.form-group.other {
    height: 80px
}

.form-group-input {
    position: relative;
    z-index: 2;
    border: none;
    background-color: transparent;
    outline: none;
    height: 100%;
    color: #616161;
    font-size: 16px;
    width: 100%
}

.form-group-textarea {
    padding-top: 10px
}

.form-group-label {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    transition: all .3s
}

.form-group-verify {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10
}

.form-group .select2 {
    width: 100%
}

.form-group .select2 * {
    outline: none
}

.form-group .select2-container {
    flex-grow: 1
}

.form-group .select2-selection {
    background-color: transparent;
    border: none
}

.form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 50px
}

.form-group.no-empty .form-group-label {
    font-size: 80%;
    transform: translate3d(0, -50%, 0)
}

.com-plr {
    padding-left: 7.8125vw;
    padding-right: 7.8125vw
}

@media screen and (max-width:767px) {
    .com-plr {
        padding-left: 15px;
        padding-right: 15px
    }
}

.com-ptb {
    background-color: #fff;
    padding-top: 6.25vw;
    padding-bottom: 6.25vw
}

.comp-product-shadow {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%
}

@media screen and (max-width:767px) {
    .comp-product-shadow {
        display: none
    }
}

.slide-aside {
    text-align: left
}