*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0
}

body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, small, u, i, center, dl, dt, dd, ol, ul, li, sub, sup, tt, var, del, dfn, ins, kbd, q, s, samp, strike, applet, object, iframe, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, blockquote, pre, a, abbr, acronym, address, big, cite, code, mark, audio, video, input, textarea, select {
    margin: 0;
    padding: 0
}

div, p, span, i, em {
    white-space: inherit !important
}

a {
    color: #333;
    outline: none;
    text-decoration: none
}

a:hover {
    color: var(--main-color)
}

ol, ul {
    list-style: none
}

img {
    border: 0;
    width: auto;
    height: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    width: 100%
}

input[type='reset'], input[type='button'], input[type='submit'], input[type='radio'] {
    cursor: pointer;
    outline: none
}

input[type='checkbox'], input[type='radio'] {
    position: relative;
    vertical-align: middle;
    margin: -2px 5px 1px
}

textarea, input[type='email'], input[type='date'], input[type='password'], input[type='text'] {
    padding: 0;
    color: #616161;
    outline: none
}

html, body {
    position: relative;
    scroll-behavior: smooth
}

html {
    font-size: 10px
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 10px !important
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 8px !important
    }
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.eot');
    src: url('../fonts/Oswald-Regular.otf');
    src: url('../fonts/Oswald-Regular.ttf');
    src: url('../fonts/Oswald-Regular.woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Oswald-Bold';
    src: url('../fonts/Oswald-Bold.eot');
    src: url('../fonts/Oswald-Bold.woff');
    src: url('../fonts/Oswald-Bold.ttf');
    src: url('../fonts/Oswald-Bold.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold_0.eot');
    src: url('../fonts/Roboto-Bold_0.otf');
    src: url('../fonts/Roboto-Bold_0.ttf');
    src: url('../fonts/Roboto-Bold_0.woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular_0.eot');
    src: url('../fonts/Roboto-Regular_0.otf');
    src: url('../fonts/Roboto-Regular_0.ttf');
    src: url('../fonts/Roboto-Regular_0.woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'POPPINS-REGULAR';
    src: url('../fonts/POPPINS-REGULAR.eot');
    src: url('../fonts/POPPINS-REGULAR.otf');
    src: url('../fonts/POPPINS-REGULAR.ttf');
    src: url('../fonts/POPPINS-REGULAR.woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

:root {
    --main-color: #b11823;
    --sub-color: #cb333b;
    --font-family-1: "Roboto";
    --font-family-2: "Roboto-Bold";
    --font-family-3: "Oswald";
    --font-family-4: "POPPINS-REGULAR";
    --font-family-5: "Oswald-Bold"
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-thumb {
    height: 0;
    opacity: .5;
    background: rgba(0, 0, 0, 0.08);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--main-color)
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--main-color)
}

.f-l {
    float: left
}

.f-r {
    float: right
}

.dw {
    top: -10rem;
    width: 1px;
    z-index: -1;
    position: absolute
}

.clearfix:after {
    clear: both;
    height: 0;
    content: "";
    line-height: 0;
    font-size: 0;
    display: block
}

.vcenter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: auto
}

.hid {
    text-overflow: ellipsis;
    white-space: nowrap
}

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

.ellipsis1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.ellipsis2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.ellipsis3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3
}

.ellipsis4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4
}

.ellipsis5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes dong {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes dong {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeInUp2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUp2 {
    -webkit-animation-name: fadeInUp2;
    animation-name: fadeInUp2
}

@-webkit-keyframes fadeInUp3 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp3 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUp3 {
    -webkit-animation-name: fadeInUp3;
    animation-name: fadeInUp3
}

@-webkit-keyframes fadeInDown2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInDown3 {
    -webkit-animation-name: fadeInDown3;
    animation-name: fadeInDown3
}

@-webkit-keyframes fadeInDown3 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown3 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInDown2 {
    -webkit-animation-name: fadeInDown2;
    animation-name: fadeInDown2
}

@-webkit-keyframes fadeInLeft {
    from {
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft {
    from {
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeft2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeft2 {
    -webkit-animation-name: fadeInLeft2;
    animation-name: fadeInLeft2
}

@-webkit-keyframes fadeInRight2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRight2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRight2 {
    -webkit-animation-name: fadeInRight2;
    animation-name: fadeInRight2
}

.scrollArrow {
    -webkit-animation-name: scrollArrow;
    animation-name: scrollArrow
}

.scrollArrow1 {
    -webkit-animation-name: scrollArrow1;
    animation-name: scrollArrow1
}

@-webkit-keyframes titFadeup1 {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes titFadeup1 {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
    100% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes titFadeup1_1 {
    0% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0
    }
}

@keyframes titFadeup1_1 {
    0% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 50%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0
    }
}

@-webkit-keyframes imgScale {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes imgScale {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes fadeInup {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInup {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes fadeInup1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, 60px);
        transform: translate(-50%, 60px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

@keyframes fadeInup1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, 60px);
        transform: translate(-50%, 60px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

@-webkit-keyframes fadeInleft {
    0% {
        width: 0
    }
    100% {
        opacity: 1;
        width: 100%
    }
}

@keyframes fadeInleft {
    0% {
        width: 0
    }
    100% {
        opacity: 1;
        width: 100%
    }
}

.fadeInleft {
    -webkit-animation: fadeInleft 1.1s ease-in-out both .1s;
    animation: fadeInleft 1.1s ease-in-out both .1s
}

.titFadeup1 {
    -webkit-animation: titFadeup1 1.1s ease-in-out both .1s;
    animation: titFadeup1 1.1s ease-in-out both .1s
}

.titFadeup2 {
    -webkit-animation: titFadeup1 1.1s ease-in-out both .2s;
    animation: titFadeup1 1.1s ease-in-out both .2s
}

.fadeInup1 {
    -webkit-animation: fadeInup 1.1s ease-in-out both .2s;
    animation: fadeInup 1.1s ease-in-out both .2s
}

.fadeInup2 {
    -webkit-animation: fadeInup 1.1s ease-in-out both .3s;
    animation: fadeInup 1.1s ease-in-out both .3s
}

.fadeInup3 {
    -webkit-animation: fadeInup 1.1s ease-in-out both .4s;
    animation: fadeInup 1.1s ease-in-out both .4s
}

.fadeInUpimg {
    -webkit-animation: imgScale 1.2s ease-in-out both .2s;
    animation: imgScale 1.2s ease-in-out both .2s
}

@-webkit-keyframes bmove1 {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bmove1 {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes scrollArrow {
    0% {
        opacity: 0;
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scrollArrow {
    0% {
        opacity: 0;
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes scrollArrow1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scrollArrow1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

body {
    color: #333;
    background: #fff;
    margin: 0 auto;
    font-size: 1.6rem;
    line-height: 1.5;
    font-family: var(--font-family-1);
    word-wrap: normal
}

img {
    border: 0;
    max-width: 100%;
    vertical-align: top
}

.vcenter {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    vertical-align: middle
}

.clearfix:after {
    clear: both;
    height: 0;
    content: "";
    line-height: 0;
    font-size: 0;
    display: block
}

.container {
    width: 100%;
    margin: 0 auto;
    max-width: 158rem
}

@media (max-width: 1200px) {
    .container {
        padding: 0 20px !important;
        max-width: 640px !important
    }
}

.header {
    z-index: 99;
    position: relative;
    background: #ffd000;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.header .info {
    color: #fff;
    height: 6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #0d0d0d;
    font-family: var(--font-family-2)
}

.header .share a {
    margin: 0 .7rem;
    display: inline-block
}

.header .share a:first-child {
    margin-left: 0
}

.header .share svg {
    width: 2.2rem;
    height: 2.2rem;
    fill: #fff;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease
}

.header .share a:hover svg {
    fill: var(--sub-color)
}

.header .rihgt {
    width: 70%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.header .rihgt span {
    vertical-align: middle;
    display: inline-block
}

.header .rihgt a {
    color: #fff;
    display: inline-block;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease
}

.header .rihgt a:hover {
    text-decoration: underline
}

.header .rihgt .search {
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    position: relative
}

.header .rihgt .search input {
    border: 0;
    color: #fff;
    width: 39rem;
    font-size: 1.6rem;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    font-family: var(--font-family-2);
    padding-right: 4rem;
    padding-left: 1.5rem;
    height: 4.2rem;
    line-height: 4.2rem;
    background: #505050
}

.header .rihgt .search input:focus {
    width: 41rem
}

.header .rihgt .search input::-webkit-input-placeholder {
    color: #fff
}

.header .rihgt .search input:-moz-placeholder {
    color: #fff;
    opacity: 1
}

.header .rihgt .search input::-moz-placeholder {
    color: #fff;
    opacity: 1
}

.header .rihgt .search input:-ms-input-placeholder {
    color: #fff
}

.header .rihgt .searchBtn {
    top: .8rem;
    right: 1.5rem;
    position: absolute
}

.header .rihgt .searchBtn svg {
    fill: #fff
}

.header .rihgt .member span {
    padding-left: 4rem;
    display: inline-block
}

.header .rihgt .member img {
    max-height: 2rem;
    margin-right: .5rem
}

.header .rihgt .shop {
    margin-left: 4rem;
    position: relative
}

.header .rihgt .shop svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: #fff
}

.header .rihgt .shop sup {
    z-index: 3;
    background: #0d0d0d;
    margin-left: -0.8rem;
    margin-top: -0.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    text-align: center;
    line-height: 1.6rem;
    position: relative;
    border: solid 1px #fff;
    vertical-align: top;
    display: inline-block
}

.header .rihgt .shop a:hover svg {
    fill: var(--sub-color)
}

.header .rihgt .shop .shop-list {
    z-index: 9;
    color: #000;
    top: -1.5rem;
    right: -21.1rem;
    font-size: 1.8rem;
    padding: 2.5rem 2rem;
    width: 34rem;
    background: #fff;
    position: absolute;
    display: none;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    font-family: var(--font-family-2)
}

.header .rihgt .shop .shop-list dl {
    padding: 0 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header .rihgt .shop .shop-list dt {
    width: 45%
}

.header .rihgt .shop .shop-list dd {
    width: 50%;
    padding-bottom: 2rem;
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header .rihgt .shop .shop-list dd .price {
    font-size: 2rem;
    color: var(--sub-color)
}

.header .rihgt .shop .shop-list .introduction {
    line-height: 2rem;
    margin-top: 3rem
}

.header .rihgt .shop .shop-list .btn-1 {
    margin-top: 2rem
}

.header .rihgt .shop .shop-list .btn-1 a {
    width: 100%;
    display: block;
    position: relative;
    text-align: center;
    line-height: 4.8rem;
    background: var(--sub-color);
    font-family: var(--font-family-1)
}

.header .rihgt .shop .shop-list .btn-1 a:before {
    content: "";
    width: 0;
    left: 0;
    top: 0;
    height: 100%;
    position: absolute;
    -webkit-transition: all 334ms linear;
    transition: all 334ms linear;
    background: var(--main-color)
}

.header .rihgt .shop .shop-list .btn-1 span {
    z-index: 2;
    position: relative
}

.header .rihgt .shop .shop-list .btn-1:hover a:before {
    width: 100%
}

.header .rihgt .shop .shop-list .btn-2 {
    margin-top: 2rem;
    text-align: center
}

.header .rihgt .shop .shop-list .btn-2 a {
    color: #000;
    display: block;
    text-transform: uppercase
}

.header .rihgt .shop .shop-list .btn-2 a:hover {
    color: var(--sub-color)
}

.header .rihgt .shop .close {
    top: 2rem;
    right: 1rem;
    position: absolute
}

.header .rihgt .shop .close svg {
    fill: #000;
    width: 2rem;
    height: 2rem
}

.header .rihgt .shop .close:hover {
    fill: var(--sub-color)
}

.header .rihgt .language {
    position: relative;
    font-size: 1.2rem;
    margin-left: 4rem
}

.header .rihgt .language img {
    margin-right: .5rem;
    max-height: 1.8rem
}

.header .rihgt .language i {
    margin-top: .3rem;
    vertical-align: top;
    margin-left: .5rem;
    width: .8rem;
    height: .8rem;
    font-style: normal;
    display: inline-block;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: solid 1px #fff;
    border-bottom: solid 1px #fff
}

.header .rihgt .language .drop {
    left: 50%;
    top: 2.2rem;
    z-index: 100;
    padding: 3rem 0;
    display: none;
    width: 14rem;
    position: absolute;
    border-radius: 1rem;
    -webkit-transform: translateX(-60%);
    transform: translateX(-60%);
    -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95)
}

.header .rihgt .language .drop:before {
    content: "";
    top: -0.6rem;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-bottom: solid .8rem #fff;
    border-left: solid .8rem transparent;
    border-right: solid .8rem transparent
}

.header .rihgt .language .drop a {
    color: #666;
    display: block;
    text-align: center;
    font-size: 1.6rem
}

.header .rihgt .language .drop a:hover {
    color: var(--main-color)
}

.header .rihgt .language:hover .drop {
    display: block
}

.header .container {
    max-width: 168rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header .listbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 8rem;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header .logo {
    width: 20%;
    position: relative
}

.header .logo img {
    max-height: 6rem
}

.header .logo .img2 {
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute
}

@media (max-width: 1024px) {
    .header {
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        position: fixed
    }

    .header .info {
        display: none
    }

    .header .logo {
        width: auto
    }

    .header .listflex {
        height: 60px;
        position: relative
    }
}

.common-nav {
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.common-nav .listNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.common-nav .listNav > li {
    font-family: var(--font-family-2);
    font-size: 2.2rem;
    padding: 0 5.2rem;
    text-align: center;
    position: relative
}

.common-nav .listNav > li > a {
    z-index: 1;
    color: #000;
    height: 8rem;
    line-height: 3rem;
    padding: 2.5rem 0;
    display: inline-block;
    position: relative;
    vertical-align: middle
}

.common-nav .listNav > li > a > span {
    display: inline-block;
    overflow: hidden;
    height: 3rem;
    line-height: 3rem;
    position: relative
}

.common-nav .listNav > li > a .txt-1 {
    display: block;
    -webkit-transition: .5s;
    transition: .5s
}

.common-nav .listNav > li > a .txt-2 {
    display: block;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: .5s;
    transition: .5s;
    color: #fff
}

.common-nav .listNav > li:hover > a:after, .common-nav .listNav > li.active > a:after {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.common-nav .listNav > li:hover > a > span::after, .common-nav .listNav > li.active > a > span::after {
    width: 100%
}

.common-nav .listNav > li:hover > a .txt-1, .common-nav .listNav > li.active > a .txt-1 {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.common-nav .listNav > li:hover > a .txt-2, .common-nav .listNav > li.active > a .txt-2 {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.common-nav .listNav > li:hover > a:hover:after, .common-nav .listNav > li.active > a:hover:after {
    left: 0;
    opacity: 1;
    width: 100%
}

.common-nav .listNav > li.active {
    background: #000
}

.common-nav .listNav > li.active > a:after {
    left: 0;
    opacity: 1;
    width: 100%
}

.common-nav .listNav > li:last-child {
    margin-right: 0
}

.common-nav .listNav > li:last-child > a span {
    padding-right: 0
}

.common-nav .listNav > li > .child {
    display: block;
    width: 22rem;
    text-align: left;
    position: absolute;
    z-index: 999;
    top: 8rem;
    left: 50%;
    font-size: 1.6rem;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0) translateX(-50%);
    transform: scaleY(0) translateX(-50%);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    color: #333
}

.common-nav .listNav > li > .child a {
    color: #666
}

.common-nav .listNav > li > .child > .list {
    text-align: center;
    border-radius: 2rem;
    padding: 3rem 0;
    background: #fff;
    position: relative;
    -webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05)
}

.common-nav .listNav > li > .child > .list a {
    width: 100%;
    display: block;
    height: auto;
    line-height: 2.4rem;
    padding: .5rem 2.5rem;
    border-radius: 1rem;
    position: relative
}

.common-nav .listNav > li > .child > .list a:hover {
    text-decoration: none;
    color: var(--main-color)
}

.common-nav .listNav > li > .child > .list-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 6rem 2rem 6rem 2rem;
    background: #fafafa
}

.common-nav .listNav > li > .child > .list-2 > li {
    width: 50%;
    padding: 0 6rem
}

.common-nav .listNav > li > .child > .list-2 .title {
    color: var(--main-color);
    border-bottom: 1px var(--main-color) solid;
    padding-bottom: 1rem;
    margin-bottom: 1rem
}

.common-nav .listNav > li > .child > .list-2 .title a {
    color: var(--main-color);
    display: block;
    line-height: 3rem;
    height: 3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.common-nav .listNav > li > .child > .list-2 .list a {
    color: #212121;
    line-height: 3.6rem;
    height: 3.6rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.common-nav .listNav > li > .child > .list-2 .list a:hover {
    color: var(--main-color)
}

.common-nav .listNav > li > .child.show {
    display: block;
    -webkit-transform: scaleY(1) translateX(-50%);
    transform: scaleY(1) translateX(-50%)
}

.common-nav .listNav > li > .child-2 {
    left: 0;
    z-index: 10;
    width: 100%;
    display: none;
    top: 14rem;
    background: #fff;
    -webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
    position: absolute
}

.common-nav .listNav > li > .child-2 .list {
    padding: 3rem 0 5rem 0;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 158rem
}

.common-nav .listNav > li > .child-2 .list li {
    width: 20%;
    padding: 0 3rem
}

.common-nav .listNav > li > .child-2.show {
    display: block
}

@media (max-width: 1024px) {
    .common-nav {
        display: none
    }
}

.fixed {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed
}

.fixed .info {
    display: none
}

.fixed .listNav > li > .child-2 {
    top: 8rem
}

.banner {
    height: 100%;
    clear: both;
    overflow: hidden;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 9
}

.banner .swiper-container {
    height: 100%
}

.banner .swiper-slide {
    width: 100% !important;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top
}

.banner img {
    vertical-align: top;
    display: inline-block;
    width: 100%
}

.banner .pc {
    display: block
}

.banner .ph {
    display: none
}

.banner .box {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%
}

.banner .text {
    color: #fff;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: left;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute
}

.banner .text .t-1 {
    font-size: 7.9rem;
    line-height: 8rem;
    font-family: var(--font-family-2);
    text-shadow: 3px 0 3px rgba(0, 0, 0, 0.36)
}

.banner .swiper-pagination {
    width: 100%;
    bottom: 6rem
}

.banner .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0;
    position: relative;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.3);
    width: 4.5rem;
    height: .2rem;
    margin: 0 .8rem
}

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

.banner .swiper-slide-active .text .t-1 {
    -webkit-animation: 1.6s fadeInUp2 ease;
    animation: 1.6s fadeInUp2 ease
}

@media (max-width: 1024px) {
    .banner {
        margin-top: 60px
    }

    .banner .text .t-1 {
        font-size: 4rem;
        line-height: 4rem
    }
}

@media (max-width: 640px) {
    .banner .pc {
        display: none
    }

    .banner .ph {
        display: block
    }
}

.index-button a {
    color: #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 0 4.5rem;
    min-width: 13rem;
    height: 5.2rem;
    font-size: 2.4rem;
    line-height: 5.2rem;
    background: var(--sub-color);
    font-family: var(--font-family-2);
    display: inline-block
}

.index-button a:after {
    content: "";
    width: 0;
    height: 100%;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    position: absolute;
    background: var(--main-color);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease
}

.index-button span {
    z-index: 2;
    position: relative
}

.index-button:hover a {
    color: #fff
}

.index-button:hover a:after {
    width: 100%
}

.index-title {
    color: #000;
    font-size: 5.8rem;
    line-height: 6rem;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;
    font-family: var(--font-family-2)
}

@media (max-width: 640px) {
    .index-title {
        font-size: 30px;
        line-height: 30px
    }
}

.index-about {
    padding: 10rem 0
}

.index-about svg:not(:root) {
    overflow: hidden
}

.index-about .map-lines {
    position: absolute;
    top: 2rem;
    left: 1.5rem;
    z-index: 10;
    fill: none;
    width: 134.3rem;
    height: 67rem;
    -webkit-stroke: #ec6f79;
    -moz-stroke: #ec6f79;
    -ms-stroke: #ec6f79;
    -o-stroke: #ec6f79;
    stroke: #ec6f79;
    -webkit-stroke-width: 1px;
    -moz-stroke-width: 1px;
    -ms-stroke-width: 1px;
    -o-stroke-width: 1px;
    stroke-width: 1px
}

.index-about .map-line {
    fill: none;
    stroke: #ec6f79;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
    -webkit-animation: animation-line 5s ease-in;
    animation: animation-line 5s ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.index-about .cls-2 {
    stroke: #4196d2
}

@-webkit-keyframes stroke {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes stroke {
    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes animation-line {
    0% {
        stroke-dashoffset: var(--l)
    }
    14.28571% {
        stroke-dashoffset: 0
    }
    61.42857% {
        stroke-dashoffset: 0
    }
    85.71429% {
        stroke-dashoffset: calc(-1 * var(--l))
    }
    to {
        stroke-dashoffset: calc(-1 * var(--l))
    }
}

@keyframes animation-line {
    0% {
        stroke-dashoffset: var(--l)
    }
    14.28571% {
        stroke-dashoffset: 0
    }
    61.42857% {
        stroke-dashoffset: 0
    }
    85.71429% {
        stroke-dashoffset: calc(-1 * var(--l))
    }
    to {
        stroke-dashoffset: calc(-1 * var(--l))
    }
}

.index-about .list {
    padding-top: 7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.index-about .numlist {
    width: 22%
}

.index-about .numlist li {
    padding-top: 5rem
}

.index-about .numlist li .counter {
    font-size: 8.2rem;
    line-height: 8.2rem
}

.index-about .numlist li .title-1 {
    color: var(--main-color);
    font-family: var(--font-family-3);
    padding-bottom: .5rem;
    border-bottom: solid 1px #d6d6d6
}

.index-about .numlist li .title-1 sup {
    vertical-align: top;
    font-size: 5rem;
    line-height: 6rem
}

.index-about .numlist li .title-1 sub {
    font-size: 1.6rem;
    vertical-align: middle;
    display: inline-block;
    padding-bottom: 1rem;
    font-family: var(--font-family-1)
}

.index-about .numlist li .title-2 {
    color: #000;
    margin-top: 1rem;
    letter-spacing: .1rem;
    line-height: 3rem;
    font-size: 2.9rem
}

.index-about .numlist li:first-child {
    padding-top: 0
}

.index-about .map-box {
    width: 78%;
    color: #000;
    font-size: 1.8rem;
    font-family: var(--font-family-2);
    position: relative
}

.index-about .map-box .warp {
    position: relative;
    width: 109%
}

.index-about .map-box .warp .pic img {
    max-height: 67rem
}

.index-about .map-box .dot {
    z-index: 4;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    position: absolute;
    background: var(--main-color);
    -webkit-box-shadow: -0.5rem 0 .7rem 0 rgba(221, 0, 17, 0.3);
    box-shadow: -0.5rem 0 .7rem 0 rgba(221, 0, 17, 0.3)
}

.index-about .map-box .dot-1 {
    top: 13.1rem;
    left: 18.2rem
}

.index-about .map-box .dot-2 {
    top: 16.1rem;
    left: 10.4rem
}

.index-about .map-box .dot-3 {
    top: 26.1rem;
    left: 7.2rem
}

.index-about .map-box .dot-4 {
    top: 33.4rem;
    left: 18.1rem
}

.index-about .map-box .dot-5 {
    top: 26.4rem;
    left: 23.4rem
}

.index-about .map-box .dot-6 {
    top: 16.5rem;
    left: 19.9rem
}

.index-about .map-box .dot-7 {
    top: 19.2rem;
    left: 28.7rem
}

.index-about .map-box .dot-8 {
    top: 27.4rem;
    left: 36.8rem
}

.index-about .map-box .dot-9 {
    top: 46.5rem;
    left: 57.5rem
}

.index-about .map-box .dot-10 {
    top: 9.9rem;
    left: 89rem
}

.index-about .map-box .dot-11 {
    top: 18.2rem;
    left: 99.4rem
}

.index-about .map-box .dot-12 {
    top: 28.2rem;
    left: 108.4rem
}

.index-about .map-box .dot-13 {
    top: 38.6rem;
    left: 119rem
}

.index-about .map-box .dot-14 {
    top: 42.1rem;
    left: 129.5rem
}

.index-about .map-box .dot-15 {
    top: 52.8rem;
    left: 123.8rem
}

.index-about .map-box .dot-16 {
    top: 53.6rem;
    left: 117.9rem
}

.index-about .map-box .dot-17 {
    top: 60.1rem;
    left: 113.3rem
}

.index-about .map-box .dot-18 {
    top: 22.7rem;
    left: 60.2rem
}

.index-about .map-box .add-1 img, .index-about .map-box .add-2 img, .index-about .map-box .add-3 img {
    max-height: 3rem
}

.index-about .map-box .add-1 {
    z-index: 2;
    line-height: 2rem;
    top: 36.5rem;
    left: 44rem;
    position: absolute
}

.index-about .map-box .add-1 p {
    margin-left: -11rem
}

.index-about .map-box .add-2 {
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 2rem;
    top: 32.6rem;
    left: 46rem;
    position: absolute
}

.index-about .map-box .add-3 {
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 2rem;
    top: 23.4rem;
    left: 51rem;
    position: absolute
}

.index-about .map-line-box {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    position: absolute
}

.index-about .map-line-box .tu {
    display: none
}

.index-about .map-line-box img {
    max-height: 67rem
}

.index-about .ph-map {
    display: none
}

.index-about .button {
    margin-top: -5rem;
    position: relative;
    margin-left: 37rem
}

.index-about .button a {
    color: #fff;
    padding: 0 1.5rem;
    font-size: 2.4rem;
    min-width: 19rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    position: relative;
    background: var(--main-color);
    display: inline-block
}

.index-about .button a:before {
    content: "";
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-transition: all 334ms linear;
    transition: all 334ms linear;
    position: absolute;
    background: var(--sub-color)
}

.index-about .button i {
    font-style: normal;
    font-family: "宋体";
    font-weight: 700;
    padding-left: 1rem
}

.index-about .button span {
    z-index: 3;
    position: relative
}

.index-about .button:hover a:before {
    width: 100%
}

@media (max-width: 1024px) {
    .index-about {
        padding: 50px 0
    }

    .index-about .list {
        display: block;
        padding-top: 0
    }

    .index-about .numlist {
        width: 100%
    }

    .index-about .numlist ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .index-about .numlist li {
        padding-top: 30px !important
    }

    .index-about .numlist li .title-1 {
        border-bottom: 0
    }

    .index-about .numlist li .title-1 sup {
        font-size: 40px;
        line-height: 40px
    }

    .index-about .numlist li .counter {
        font-size: 40px;
        line-height: 40px
    }

    .index-about .numlist li .title-2 {
        margin-top: 0;
        font-size: 16px;
        line-height: 24px
    }

    .index-about .map-box {
        text-align: center;
        width: 100%
    }

    .index-about .map-box .warp {
        display: none
    }

    .index-about .map-box .ph-map {
        display: block;
        margin-top: 30px
    }

    .index-about .button {
        margin-left: 0;
        margin-top: 30px
    }
}

.index-culture {
    padding: 3rem 0;
    background: #ffd000
}

.index-culture .container {
    max-width: 192rem
}

.index-culture ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.index-culture li {
    color: #000;
    padding: 0 2.3rem;
    font-size: 4rem;
    font-style: italic;
    text-transform: uppercase;
    font-family: var(--font-family-2)
}

.index-culture li:nth-child(2n) {
    color: #fff
}

@media (max-width: 640px) {
    .index-culture li {
        padding: 0;
        font-size: 24px
    }
}

.index-product {
    padding: 10rem 0;
    background: #f7f7f7
}

.index-product .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1.3rem
}

.index-product .list li {
    padding: 0 1.3rem;
    margin-top: 6rem;
    width: 50%
}

.index-product .list li .item {
    overflow: hidden
}

.index-product .list li .box {
    display: block;
    width: 100%;
    padding: 3rem;
    height: 43.8rem;
    background-size: cover;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.index-product .list li .logo img {
    max-height: 7.6rem
}

.index-product .list li .title-1 {
    font-size: 5.5rem;
    line-height: 6rem;
    font-weight: 700;
    font-family: "微软雅黑";
    color: #41ca4a;
    margin-top: 1.5rem;
    -webkit-text-stroke: #fff 1px
}

.index-product .list li .title-2 {
    color: #fff;
    font-size: 5.5rem;
    line-height: 6rem;
    font-family: var(--font-family-2)
}

.index-product .list li .arrow {
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: 2.4rem;
    width: 3.7rem;
    height: 3.7rem;
    font-family: "宋体";
    line-height: 3.7rem;
    background: var(--sub-color);
    margin-top: 4.5rem
}

.index-product .list li:nth-child(2) .title-1 {
    color: var(--sub-color)
}

.index-product .list-2 {
    margin-top: 3rem
}

.index-product .list-2 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.2rem
}

.index-product .list-2 li {
    width: 20%;
    padding: 0 .2rem
}

.index-product .list-2 li .item {
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    background: #fff;
    padding: 1.5rem;
    padding-top: 1rem
}

.index-product .list-2 li .icon {
    margin: 0 auto;
    max-width: 20rem;
    position: relative
}

.index-product .list-2 li .icon img {
    max-height: 15rem
}

.index-product .list-2 li .icon .img2 {
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    position: absolute
}

.index-product .list-2 li .title {
    margin-top: 1rem;
    font-family: var(--font-family-2);
    padding: 0 1.5rem;
    text-align: center;
    font-size: 2rem;
    height: 3rem;
    line-height: 3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

@media (min-width: 1025px) {
    .index-product .list li:hover .box {
        padding-top: 6rem
    }

    .index-product .list li:hover .arrow {
        margin-top: 1rem
    }

    .index-product .list-2 li:hover .item {
        background: var(--sub-color)
    }

    .index-product .list-2 li:hover .icon .img1 {
        opacity: 0
    }

    .index-product .list-2 li:hover .icon .img2 {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .index-product .list-2 li:hover .title {
        color: #fff
    }
}

@media (max-width: 1024px) {
    .index-product {
        padding: 50px 0
    }

    .index-product .list li {
        width: 100%;
        margin-top: 30px
    }

    .index-product .list-2 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .index-product .list-2 ul {
        width: 1200px
    }
}

@media (max-width: 640px) {
    .index-product .list li .box {
        height: 260px
    }

    .index-product .list li .arrow {
        margin-top: 0
    }

    .index-product .list li .title-1, .index-product .list li .title-2 {
        font-size: 30px;
        line-height: 40px
    }
}

.index-video {
    overflow: hidden;
    padding: 13rem 0;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center
}

.index-video .index-title {
    color: var(--sub-color)
}

.index-video .text {
    color: #fff;
    margin-top: 5rem;
    line-height: 3.2rem;
    font-size: 1.8rem;
    text-align: center
}

.index-video .text a {
    color: var(--sub-color);
    text-decoration: underline
}

.index-video .list {
    margin-top: 7rem
}

.index-video .list .swiper-container {
    overflow: inherit
}

.index-video .list .item {
    position: relative
}

.index-video .list .item .btn {
    top: 50%;
    left: 50%;
    opacity: .7;
    z-index: 3;
    position: absolute;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.index-video .list .item .btn img {
    max-height: 7rem
}

.index-video .list .pic {
    border-radius: 2rem;
    overflow: hidden;
    position: relative
}

.index-video .list .pic img {
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease
}

.index-video .list .pic:before {
    top: 0;
    left: 0;
    z-index: 2;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    background: rgba(0, 0, 0, 0.44)
}

.index-video .list .pic:after {
    content: "";
    display: block;
    padding-bottom: 58%
}

.index-video .item:hover .btn {
    opacity: 1
}

.index-video .item:hover .pic:before {
    background: rgba(0, 0, 0, 0)
}

@media (max-width: 1024px) {
    .index-video {
        padding: 50px 0
    }

    .index-video .list {
        margin-top: 30px
    }

    .index-video .list .swiper-container {
        overflow: hidden
    }
}

.index-buy {
    padding: 11rem 0
}

.index-buy .list {
    margin-top: 3rem
}

.index-buy .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1rem
}

.index-buy .list li {
    width: 25%;
    padding: 1rem
}

.index-buy .list li .pic {
    overflow: hidden;
    border-radius: 1rem;
    position: relative
}

.index-buy .list li .pic img {
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    border-radius: 1rem
}

.index-buy .list li .pic:after {
    content: "";
    display: block;
    padding-bottom: 34.55497382%
}

.index-buy .list li:hover .pic img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

@media (max-width: 1024px) {
    .index-buy {
        padding: 50px 0
    }
}

.index-how {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 17rem
}

.index-how .list {
    margin-top: 5rem
}

.index-how .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 5.5rem
}

.index-how .list li {
    padding: 0 2rem;
    width: 33.333%
}

.index-how .list li .item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    height: 56rem;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    border-radius: 1rem
}

.index-how .list li .item:before {
    top: 0;
    left: 0;
    z-index: 1;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    background: rgba(0, 0, 0, 0.3)
}

.index-how .list li .item .box {
    padding: 0 2rem;
    padding-bottom: 11rem;
    width: 100%;
    color: #fff;
    z-index: 2;
    position: relative;
    text-align: center;
    text-transform: uppercase
}

.index-how .list li .item .icon img {
    max-height: 9rem;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease
}

.index-how .list li .item .title {
    margin-top: 6rem;
    font-size: 4.2rem;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    font-family: var(--font-family-2)
}

.index-how .list li .item .view {
    margin-top: 2rem;
    font-size: 2rem
}

.index-how .list li .item .view svg {
    fill: #fff;
    margin-left: 1rem;
    vertical-align: top;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease
}

@media (min-width: 1025px) {
    .index-how .list li:hover .item:before {
        background: rgba(0, 0, 0, 0.4)
    }

    .index-how .list li:hover .item .icon img {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    .index-how .list li:hover .item .view svg {
        margin-left: 2rem
    }
}

@media (max-width: 1024px) {
    .index-how {
        padding-bottom: 50px
    }

    .index-how .list ul {
        padding-left: 0;
        padding-right: 0
    }

    .index-how .list li {
        padding-left: 0;
        padding-right: 0;
        margin-top: 20px;
        width: 100%
    }

    .index-how .list li .item {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 220px
    }

    .index-how .list li .item .box {
        padding-bottom: 0
    }

    .index-how .list li .item .title {
        margin-top: 0;
        font-size: 24px;
        line-height: 30px
    }

    .index-how .list li .item .view {
        margin-top: 0
    }

    .index-how .list li:first-child {
        margin-top: 0
    }
}

.index-news {
    overflow: hidden;
    padding: 12rem 0;
    padding-bottom: 17rem;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center
}

.index-news .container {
    max-width: 192rem
}

.index-news .list {
    position: relative;
    margin: 0 -12rem;
    margin-top: 5rem
}

.index-news .list .item {
    position: relative;
    overflow: hidden;
    background: #fff;
    margin-bottom: 6rem;
    border-radius: 1rem
}

.index-news .list .item:before {
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1;
    position: absolute;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    background: var(--main-color)
}

.index-news .list .pic {
    z-index: 2;
    overflow: hidden;
    border-radius: 1rem;
    position: relative
}

.index-news .list .pic img {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: all 700ms linear;
    transition: all 700ms linear;
    border-radius: 1rem
}

.index-news .list .pic:after {
    content: "";
    display: block;
    padding-bottom: 66%
}

.index-news .list .text {
    z-index: 2;
    position: relative;
    padding: 3rem;
    padding-top: 2.5rem
}

.index-news .list .text .time {
    color: #a6a6a6
}

.index-news .list .text .title {
    margin-top: 1rem;
    font-family: var(--font-family-2);
    height: 7.8rem;
    font-size: 2.2rem;
    line-height: 2.8rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3
}

.index-news .list .text .view {
    margin-top: 3.5rem;
    font-family: var(--font-family-2);
    color: #d71c26
}

.index-news .list .text .view i {
    padding-left: 1rem;
    font-weight: 700;
    font-family: "宋体";
    font-style: normal
}

.index-news .swiper-button-prev {
    left: 47.5%
}

.index-news .swiper-button-next {
    right: 47.5%
}

.index-news .swiper-button-prev, .index-news .swiper-button-next {
    top: auto;
    margin-top: auto;
    color: #8d8d8d;
    overflow: hidden;
    width: 4.5rem;
    height: 4.5rem;
    background: #f6f6f6;
    border: solid 1px #d5d5d5
}

.index-news .swiper-button-prev:after, .index-news .swiper-button-next:after {
    z-index: 4;
    font-size: 1.4rem;
    font-weight: 700
}

.index-news .swiper-button-prev:before, .index-news .swiper-button-next:before {
    top: 0;
    opacity: 0;
    left: -1rem;
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    background: var(--main-color)
}

.index-news .swiper-button-prev:hover, .index-news .swiper-button-next:hover {
    color: #fff;
    border-color: var(--main-color)
}

.index-news .swiper-button-prev:hover:before, .index-news .swiper-button-next:hover:before {
    left: 0;
    width: 100%;
    opacity: 1
}

@media (min-width: 1025px) {
    .index-news .list li:hover .item:before {
        height: 100%
    }

    .index-news .list li:hover .pic img {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    .index-news .list li:hover .text .time, .index-news .list li:hover .text .title, .index-news .list li:hover .text .view {
        color: #fff
    }
}

@media (max-width: 1024px) {
    .index-news {
        padding: 50px 0
    }

    .index-news .list {
        margin-left: 0;
        margin-right: 0
    }

    .index-news .list .item {
        margin-bottom: 0
    }

    .index-news .swiper-button-prev, .index-news .swiper-button-next {
        bottom: auto;
        top: 20%;
        margin-top: 0
    }

    .index-news .swiper-button-prev {
        left: 0
    }

    .index-news .swiper-button-next {
        right: 0
    }
}

.index-process {
    color: #fff;
    padding: 3rem 0;
    background: #373737
}

.index-process ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.index-process li {
    position: relative
}

.index-process li:before {
    top: 50%;
    right: -23%;
    position: absolute;
    content: "";
    width: 1px;
    height: 3rem;
    background: #aeaeae;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.index-process li .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.index-process li .item .icon img {
    max-height: 5rem;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.index-process li .item .text {
    padding-left: 1.5rem
}

.index-process li .item .title-1 {
    font-size: 2.6rem;
    line-height: 3rem;
    font-family: var(--font-family-2)
}

.index-process li .item .title-2 {
    font-size: 1.8rem;
    line-height: 2.4rem
}

.index-process li:last-child:before {
    display: none
}

.index-process li:hover .item .icon img {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

@media (max-width: 1024px) {
    .index-process li {
        padding: 10px
    }

    .index-process li:before {
        display: none
    }
}

.footer {
    background: url(../images/footer-bg.jpg) no-repeat top left;
    background-size: cover;
    padding-top: 7rem
}

.footer .container {
    max-width: 173rem
}

.footer .list .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer .list .contact {
    width: 19%;
    font-size: 1.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-family-4)
}

.footer .list .contact a {
    color: rgba(255, 255, 255, 0.7)
}

.footer .list .contact a:hover {
    color: #fff
}

.footer .list .contact .logo img {
    max-height: 7rem
}

.footer .list .contact .title:nth-child(2) {
    font-size: 2.3rem
}

.footer .list .contact .title {
    position: relative;
    padding-right: 1rem;
    padding-left: 4.7rem;
    margin-top: 2.5rem
}

.footer .list .contact .title .icon {
    top: .2rem;
    left: 0;
    position: absolute
}

.footer .list .contact .title .icon img {
    max-height: 2rem
}

.footer .list .contact .button-1, .footer .list .contact .button-2 {
    margin-top: 1.2rem
}

.footer .list .contact .button-1 a, .footer .list .contact .button-2 a {
    overflow: hidden;
    color: #000;
    display: block;
    position: relative;
    font-size: 2rem;
    text-align: center;
    line-height: 5.6rem;
    font-family: var(--font-family-2);
    background: #ffd000
}

.footer .list .contact .button-1 a:before, .footer .list .contact .button-2 a:before {
    top: 0;
    left: -3rem;
    content: "";
    width: 0;
    opacity: 0;
    height: 100%;
    position: absolute;
    background: var(--sub-color);
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear
}

.footer .list .contact .button-1 a span, .footer .list .contact .button-2 a span {
    z-index: 3;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.footer .list .contact .button-1 img, .footer .list .contact .button-2 img {
    margin-right: 1rem;
    max-height: 2rem
}

.footer .list .contact .button-1:hover a:before, .footer .list .contact .button-2:hover a:before {
    left: 0;
    opacity: 1;
    width: 100%
}

.footer .list .contact .button-1 {
    margin-top: 3rem
}

.footer .list .menu {
    width: 54%;
    padding-left: 7rem
}

.footer .list .menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.footer .list .menu li {
 flex:1;
    font-size: 2.1rem;
    font-family: var(--font-family-2)
}

.footer .list .menu li .title {
    padding-bottom: 3rem
}

.footer .list .menu li .title a {
    font-size: 2.9rem;
    color: #ffd000
}

.footer .list .menu li .drop a {
    display: block;
    margin-top: 2.5rem;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease;
    color: rgba(255, 255, 255, 0.6)
}

.footer .list .menu li .drop a:hover {
    color: #fff
}

.footer .list .menu li:first-child {
     
}

.footer .list .message {
    width: 25%
}

.footer .list .message dl {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--font-family-2)
}

.footer .list .message dt .time {
    line-height: 6rem;
    font-size: 6rem;
    color: #ffd000;
    vertical-align: top;
    display: inline-block;
    font-family: var(--font-family-3)
}

.footer .list .message dt .time i {
    font-style: normal;
    font-size: 2rem;
    vertical-align: top
}

.footer .list .message dt .year {
    color: #fff;
    margin-top: 1rem;
    letter-spacing: .2rem;
    padding: 0 1.3rem;
    border-radius: 3rem;
    height: 2rem;
    line-height: 1.8rem;
    background: #ffd000;
    display: inline-block
}

.footer .list .message dd {
    line-height: 2.7rem;
    padding-top: 1rem;
    padding-left: 2.5rem;
    font-size:1.9rem;
}

.footer .list .subscribe {
    position: relative;
    margin-top: 5.5rem
}

.footer .list .subscribe input {
    color: #fff;
    font-size: 2rem;
    font-family: var(--font-family-2);
    padding-left: 2.4rem;
    padding-right: 11rem;
    border: 0;
    width: 100%;
    height: 6.6rem;
    line-height: 6.6rem;
    background: #363636
}

.footer .list .subscribe .btn {
    top: 0;
    right: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 9rem;
    position: absolute;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease;
    background: #ffd000
}

.footer .list .subscribe .btn svg {
    fill: #fff;
    width: 2.4rem;
    height: 2.4rem
}

.footer .list .subscribe .btn:hover {
    background: var(--sub-color)
}

.footer .list .share {
    padding-top: 8rem
}

.footer .list .share .title {
    color: #fff;
    font-size: 2rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px rgba(255, 255, 255, 0.2)
}

.footer .list .share ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer .list .share li {
    padding-top: 2.5rem
}

.footer .list .share li svg {
    width: 3rem;
    height: 3rem;
    fill: #fff;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.footer .list .share li:hover svg {
    fill: var(--sub-color)
}

.footer .copy {
    margin-top: 7rem;
    font-size: 1.4rem;
    padding: 2rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-family-2);
    border-top: solid 1px rgba(255, 255, 255, 0.25)
}

.footer .copy a {
    float: right;
    color: rgba(255, 255, 255, 0.7)
}

.footer .copy a:hover {
    color: #fff
}

@media (max-width: 1024px) {
    .footer {
        padding-bottom: 70px
    }

    .footer .list .contact, .footer .list .message {
        width: 100%
    }

    .footer .list .contact dl, .footer .list .message dl {
        display: none
    }

    .footer .list .menu {
        display: none
    }

    .footer .list .subscribe {
        margin-top: 10px
    }

    .footer .list .share {
        display: none
    }

    .footer .copy {
        font-size: 14px
    }

    .footer .copy a {
        float: none
    }
}

.inside-banner {
    position: relative
}

.inside-banner .pc img {
    width: 100%
}

.inside-banner .ph {
    display: none
}

.inside-banner .text {
    left: 0;
    width: 100%;
    z-index: 3;
    bottom: 24rem;
    font-family: var(--font-family-2);
    position: absolute
}

.inside-banner .title-1 {
    color: #fff;
    font-size: 9rem;
    line-height: 9rem;
    text-transform: uppercase
}

.inside-banner .title-2 {
    color: #fff;
    padding-top: 1rem;
    font-size: 2rem;
    text-transform: uppercase
}

.inside-banner .title-3, .inside-banner .title-4 {
    color: #fff;
    text-align: center
}

.inside-banner .title-3 {
    margin-top: -17rem;
    position: relative;
    font-size: 5.8rem;
    line-height: 6rem;
    text-transform: uppercase
}

.inside-banner .title-4 {
    font-size: 2.2rem;
    margin-top: 2.5rem;
    font-family: var(--font-family-1)
}

@media (max-width: 1024px) {
    .inside-banner {
        margin-top: 60px
    }

    .inside-banner .text {
        bottom: 40px
    }
}

@media (max-width: 640px) {
    .inside-banner .text {
        display: none
    }

    .inside-banner .pc {
        display: none
    }

    .inside-banner .ph {
        display: block
    }
}

.inside-current {
    font-family: var(--font-family-2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 2rem;
    font-weight: normal;
    margin-top: -10rem;
    height: 10rem;
    line-height: 10rem;
    position: relative;
    text-transform: uppercase;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.inside-current a {
    color: rgba(255, 255, 255, 0.8)
}

.inside-current a:hover {
    color: #fff
}

.inside-current svg {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: .6rem;
    vertical-align: middle
}

.inside-current i {
    padding: 0 1rem;
    display: inline-block;
    font-style: normal;
    font-family: "宋体"
}

@media (max-width: 1024px) {
    .inside-current {
        display: none
    }
}

.inside-warp {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 9rem 0 0 0
}

.inside-warp .text-warp .index-title {
    text-align: left
}

.inside-warp .text-warp .title-2 {
    color: #000;
    margin-top: 3rem;
    font-size: 3.2rem;
    line-height: 4rem;
    position: relative;
    margin-bottom: 4rem;
    font-family: var(--font-family-2)
}

.inside-warp .text-warp .line {
    height: 1px;
    background: #ccc
}

@media (max-width: 1024px) {
    .inside-warp {
        padding-top: 50px
    }

    .inside-warp .text-warp .title-2 {
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 20px
    }
}

.inside-about {
    padding: 10rem 0
}

.inside-about .text-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-about .text-left {
    font-size: 4.2rem;
    color: var(--main-color);
    font-family: var(--font-family-2)
}

.inside-about .text-right {
    color: #000;
    font-size: 2.5rem;
    text-align: right
}

.inside-about .text-right .year {
    font-size: 8.2rem;
    line-height: 9rem;
    color: var(--main-color);
    font-family: var(--font-family-3)
}

.inside-about .text-item {
    padding-top: 2rem;
    font-size: 2rem;
    line-height: 3.6rem
}

.inside-about .text-item p {
    margin-top: 1.5rem
}

.inside-about .numlist ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-about .numlist li {
    padding-top: 7rem
}

.inside-about .numlist li .counter {
    font-size: 8rem;
    line-height: 8rem
}

.inside-about .numlist li .title-1 {
    color: var(--main-color);
    font-family: var(--font-family-3);
    padding-bottom: .5rem
}

.inside-about .numlist li .title-1 sup {
    vertical-align: top;
    font-size: 5rem;
    line-height: 6rem
}

.inside-about .numlist li .title-1 sub {
    font-size: 2rem;
    vertical-align: bottom;
    display: inline-block;
    font-family: var(--font-family-2)
}

.inside-about .numlist li .title-2 {
    color: #000;
    margin-top: 1rem;
    line-height: 2.4rem;
    font-size: 2rem
}

.inside-about .numlist li .title-2 span {
    display: block
}

.inside-about .listbox {
    position: relative;
    margin-top: 10rem
}

.inside-about .listbox .big-img {
    overflow: hidden;
    height: 68rem
}

.inside-about .listbox .big-img .item {
    position: relative
}

.inside-about .listbox .big-img .item .text {
    left: 0;
    width: 100%;
    color: #fff;
    padding: 0 12rem;
    top: 37rem;
    position: absolute
}

.inside-about .listbox .big-img .item .t-1 {
    font-size: 4.2rem;
    line-height: 5rem;
    text-shadow: .3rem 0 .7rem rgba(0, 0, 0, 0.35);
    font-family: var(--font-family-2)
}

.inside-about .listbox .big-img .item .t-2 {
    font-size: 2rem;
    text-shadow: .3rem 0 .7rem rgba(0, 0, 0, 0.35)
}

.inside-about .listbox .small-img {
    width: 100%;
    margin-top: 1rem;
    padding-left: 11.5rem;
    padding-right: 46rem;
    bottom: 5rem;
    overflow: hidden;
    position: absolute
}

.inside-about .listbox .small-img .pic {
    position: relative;
    margin-bottom: 2rem
}

.inside-about .listbox .small-img .swiper-slide {
    margin-left: -2rem;
    position: relative
}

.inside-about .listbox .small-img .swiper-slide .item {
    z-index: 3;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 3.5rem;
    position: absolute
}

.inside-about .listbox .small-img .swiper-slide .videobtn {
    position: relative;
    margin: 0 auto;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5)
}

.inside-about .listbox .small-img .swiper-slide .videobtn:after {
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    border-left: solid 1rem var(--main-color);
    border-top: solid .6rem transparent;
    border-bottom: solid .6rem transparent
}

.inside-about .listbox .small-img .swiper-slide .bt {
    padding-left: 2.5rem;
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
    font-family: "微软雅黑";
    color: var(--main-color);
    -webkit-text-stroke: #fff .1px
}

.inside-about .listbox .small-img .swiper-container {
    overflow: initial
}

@media (max-width: 1024px) {
    .inside-about {
        padding: 50px 0
    }

    .inside-about .text-box {
        display: block
    }

    .inside-about .text-right {
        text-align: left;
        margin-top: 20px
    }

    .inside-about .numlist ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .inside-about .numlist li {
        padding-top: 20px;
        width: 50%
    }

    .inside-about .numlist li .counter {
        font-size: 40px;
        line-height: 40px
    }

    .inside-about .numlist li .title-1 sup {
        font-size: 30px;
        line-height: 30px
    }

    .inside-about .listbox .big-img {
        height: auto
    }

    .inside-about .listbox .big-img .item .text {
        display: none
    }

    .inside-about .listbox .small-img {
        display: none
    }
}

.inside-about-2 {
    padding: 17rem 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center
}

.inside-about-2 .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.6rem
}

.inside-about-2 .list li {
    width: 33.333%;
    padding: .6rem
}

.inside-about-2 .list li .item {
    position: relative
}

.inside-about-2 .list li .item .pic {
    overflow: hidden;
    position: relative
}

.inside-about-2 .list li .item .pic:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    content: "";
    display: block;
    padding-bottom: 83.78378378%;
    background: rgba(0, 0, 0, 0.2)
}

.inside-about-2 .list li .item .num {
    top: 3rem;
    left: 2rem;
    z-index: 3;
    position: absolute;
    color: transparent;
    color: #54575a;
    font-size: 4.2rem;
    font-family: var(--font-family-2);
    -webkit-text-stroke: #fff 1px
}

.inside-about-2 .list li .item .text {
    bottom: 0;
    left: 0;
    width: 100%;
    text-transform: capitalize;
    color: #fff;
    z-index: 3;
    position: absolute;
    padding: 2rem
}

.inside-about-2 .list li .item .text .tit {
    min-height: 8rem;
    font-size: 3.2rem;
    line-height: 3.2rem;
    font-family: var(--font-family-2)
}

.inside-about-2 .list li .item .text .txt {
    font-size: 2rem;
    line-height: 2.4rem;
    height: 7.2rem;
    overflow: auto
}

@media (max-width: 1024px) {
    .inside-about-2 {
        padding: 50px 0
    }

    .inside-about-2 .list li {
        width: 50%
    }

    .inside-about-2 .list li .item .num {
        top: 15px
    }

    .inside-about-2 .list li .item .text .tit {
        font-size: 20px;
        line-height: 24px;
        min-height: 48px
    }
}

@media (max-width: 480px) {
    .inside-about-2 .list li {
        width: 100%
    }
}

#certify .swiper-slide {
    margin: 0 auto;
    width: 910px;
    height: 540px;
    background: #fff
}

#certify .swiper-slide .pic img {
    opacity: .7
}

@media (max-width: 1440px) {
    #certify .swiper-slide {
        width: 660px;
        height: 400px
    }
}

@media (max-width: 1024px) {
    #certify .swiper-slide {
        height: auto
    }
}

#certify .swiper-slide-active .pic img {
    opacity: 1
}

#certify {
    z-index: 10;
    margin: 0 auto;
    padding-top: 21rem;
    max-width: 142.5rem;
    position: relative
}

#certify .swiper-button-prev, #certify .swiper-button-next {
    margin-top: auto;
    z-index: 10;
    margin-top: -3.5rem;
    width: 4rem;
    height: 4rem;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    color: #fff;
    text-align: center;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

#certify .swiper-button-prev:after, #certify .swiper-button-next:after {
    font-size: 0
}

#certify .swiper-button-prev {
    left: 17%;
    background: url(../images/prev-h.png) no-repeat center center var(--main-color);
    background-size: cover
}

#certify .swiper-button-next {
    right: 17%;
    background: url(../images/next-h.png) no-repeat center center var(--main-color);
    background-size: cover
}

@media (max-width: 1600px) {
    #certify .swiper-button-prev {
        left: 8%
    }

    #certify .swiper-button-next {
        right: 8%
    }
}

@media (max-width: 1440px) {
    #certify .swiper-button-prev {
        left: 18.5%
    }

    #certify .swiper-button-next {
        right: 18.5%
    }
}

@media (max-width: 1300px) {
    #certify .swiper-button-prev {
        left: 15%
    }

    #certify .swiper-button-next {
        right: 15%
    }
}

@media (max-width: 1024px) {
    #certify {
        padding-top: 40px
    }

    #certify .swiper-button-prev, #certify .swiper-button-next {
        width: 40px;
        height: 40px
    }

    #certify .swiper-button-prev {
        left: 0
    }

    #certify .swiper-button-next {
        right: 0
    }
}

.inside-team .container {
    margin: 0 auto;
    position: relative;
    max-width: 192rem
}

.inside-team .index-title {
    color: #fff;
    top: 10rem;
    left: 0;
    width: 100%;
    z-index: 11;
    text-align: center;
    position: absolute
}

.inside-team .menuBg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    position: absolute
}

.inside-team .listBg li {
    display: none;
    height: 91rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center
}

.inside-team .listBg li.active {
    display: block
}

@media (max-width: 1024px) {
    .inside-team {
        padding: 50px 0
    }

    .inside-team .menuBg {
        display: none
    }

    .inside-team .index-title {
        color: #333;
        top: auto;
        left: auto;
        position: relative
    }
}

.inside-history {
    padding-bottom: 10rem;
    padding-top: 7rem
}

.inside-history .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-history .left {
    width: 40%;
    position: relative
}

.inside-history .left .swiper-container {
    height: 62.6rem
}

.inside-history .left .menuTabs .item {
    position: relative;
    padding-top: 2px;
    padding-right: 6rem;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #4b4b4b;
    line-height: 2.6rem;
    font-size: 2rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.inside-history .left .menuTabs .item:after {
    right: 0;
    top: 0;
    position: absolute;
    content: "";
    width: 4rem;
    height: 15.6rem;
    background: url(../images/line.png) no-repeat top left;
    background-size: cover
}

.inside-history .left .menuTabs .item:before {
    top: 0;
    right: 0;
    content: "";
    width: 4rem;
    height: 1px;
    position: absolute;
    background: #999
}

.inside-history .left .menuTabs .item .title {
    width: 70%;
    height: 7.8rem;
    overflow: auto
}

.inside-history .left .menuTabs .item .year {
    width: 30%;
    text-align: right;
    color: #5c5c5c;
    font-size: 2.8rem;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease;
    font-family: var(--font-family-5);
    position: relative;
    line-height: 1.8rem
}

.inside-history .left .menuTabs .swiper-button-prev, .inside-history .left .menuTabs .swiper-button-next {
    opacity: 0;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
    top: auto;
    margin-top: auto;
    bottom: 6rem;
    color: #666
}

.inside-history .left .menuTabs .swiper-button-prev:after, .inside-history .left .menuTabs .swiper-button-next:after {
    font-size: 3.4rem
}

.inside-history .left .menuTabs .swiper-button-prev:hover, .inside-history .left .menuTabs .swiper-button-next:hover {
    color: var(--sub-color)
}

.inside-history .left .menuTabs .swiper-button-prev {
    left: auto;
    right: 6rem
}

.inside-history .left .menuTabs .swiper-slide-thumb-active .item:before {
    background: var(--sub-color)
}

.inside-history .left .menuTabs .swiper-slide-thumb-active .item .title {
    color: var(--sub-color)
}

.inside-history .left .menuTabs .swiper-slide-thumb-active .item .year {
    text-align: right;
    line-height: 7rem;
    font-size: 8rem;
    color: var(--sub-color)
}

.inside-history .right {
    width: 55.5%
}

@media (max-width: 1024px) {
    .inside-history {
        padding: 50px 0
    }

    .inside-history .container {
        display: block
    }

    .inside-history .left {
        width: 100%
    }

    .inside-history .left .menuTabs .item {
        display: block
    }

    .inside-history .left .menuTabs .item .title {
        width: 100%;
        height: auto;
        margin-top: 30px
    }

    .inside-history .left .menuTabs .swiper-container {
        height: auto
    }

    .inside-history .left .menuTabs .swiper-slide-thumb-active .item .title {
        color: #333
    }

    .inside-history .right {
        width: 100%;
        margin-top: 30px
    }
}

.inside-honor {
    position: relative;
    padding: 11rem 0 17rem 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom
}

.inside-honor:after {
    left: 0;
    bottom: 0;
    content: "";
    width: 100%;
    height: 21rem;
    position: absolute;
    background: url(../images/honor-line.png) no-repeat top center
}

.inside-honor .container {
    z-index: 2;
    max-width: 192rem;
    position: relative
}

.inside-honor .nr {
    margin-top: 6rem;
    position: relative
}

.inside-honor .swiper-wrapper {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    min-height: 34rem
}

.inside-honor .swiper-slide {
    cursor: pointer
}

.inside-honor .swiper-slide .pic {
    position: relative;
    overflow: hidden;
}

.inside-honor .swiper-slide .pic:after {
    content: "";
    display: block;
    padding-bottom: 48.855%;
}

.inside-honor .swiper-slide-active .pic:after {
    padding-bottom: 69.3%;
}

.inside-honor .swiper-slide .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    text-align: center;
    color: var(--sub-color);
    font-family: var(--font-family-2);
    font-size: 2.4rem;
    margin-bottom: 3rem;
    display: none;
    min-height: 11.4rem;
}

.inside-honor .swiper-pagination {
    width: auto;
    position: relative;
    bottom: -9rem
}

.inside-honor .swiper-pagination-bullet {
    margin: 0 .5rem;
    width: 1.2rem;
    height: 1.2rem
}

.inside-honor .swiper-pagination-bullet-active {
    background: var(--sub-color)
}

.inside-honor .swiper-slide-active {
    text-align: center
}

.inside-honor .swiper-slide-active .pic {
}

@media (max-width: 640px) {
    .inside-honor .swiper-slide-active .pic {
        width: 270px;
        height: 187px;
        margin: 0 auto
    }
}

.inside-honor .swiper-slide-active {
}

.inside-honor .swiper-slide-active .title {
    display: block
}

.inside-honor .swiper-prev, .inside-honor .swiper-next {
    background: none;
    width: auto;
    height: auto;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    top: 2.4rem
}

.inside-honor .swiper-prev .icon, .inside-honor .swiper-next .icon {
    color: #fff;
    width: 4rem;
    height: 4rem;
    font-size: 4rem;
    line-height: 2.6rem;
    text-align: center;
    display: inline-block;
    background: var(--sub-color);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2)
}

.inside-honor .swiper-prev .icon {
    background: url(../images/prev-h.png) no-repeat center center var(--sub-color);
    background-size: cover
}

.inside-honor .swiper-prev .icon:hover {
    background-color: var(--main-color)
}

.inside-honor .swiper-next .icon {
    background: url(../images/next-h.png) no-repeat center center var(--sub-color);
    background-size: cover
}

.inside-honor .swiper-next .icon:hover {
    background-color: var(--main-color)
}

.inside-honor .swiper-prev {
    left: 17rem
}

.inside-honor .swiper-next {
    text-align: right;
    right: 17rem
}

.inside-honor .title-1 {
    padding-top: 6rem;
    line-height: 2rem;
    font-size: 2rem;
    color: #333;
    max-width: 50rem;
}

.inside-honor .swiper-button-disabled {
    cursor: initial
}

@media (max-width: 1024px) {
    .inside-honor {
        background-image: none !important;
        padding: 0 0 130px 0;
        margin-bottom: 0
    }

    .inside-honor .swiper-prev, .inside-honor .swiper-next {
        top: 60%
    }

    .inside-honor .swiper-prev {
        left: 10px
    }

    .inside-honor .swiper-next {
        right: 10px
    }

    .inside-honor .swiper-slide .title {
        font-size: 16px;
        line-height: 24px;
        margin: 20px 0
    }

    .inside-honor .nr {
        margin-top: 0
    }

    .inside-honor .txt {
        display: none
    }
}

.inside-product {
    background: #f7f7f7
}

.inside-product .title {
    color: #000;
    font-weight: normal;
    line-height: 4rem;
    font-size: 3.2rem;
    padding-top: 4rem;
    font-family: var(--font-family-2)
}

.inside-product .brand .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1.5rem
}

.inside-product .brand .list li {
    width: 50%;
    margin-top: 2rem;
    padding: 0 1.5rem
}

.inside-product .brand .list li .item {
    overflow: hidden;
    font-size: 2.2rem;
    height: 13rem;
    background-size: cover
}

.inside-product .brand .list li .item a {
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease;
    padding: 2rem 4rem
}

.inside-product .brand .list li .logo img {
    max-height: 7rem
}

.inside-product .brand .list li .tit {
    height: 2.4rem;
    line-height: 2.4rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.inside-product .brand .list li:hover .tit {
    text-decoration: underline
}

.inside-product .category ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.8rem
}

.inside-product .category li {
    width: 20%;
    padding: 0 .8rem;
    margin-top: 1.6rem
}

.inside-product .category li .item {
    position: relative
}

.inside-product .category li .item .tit {
    top: 50%;
    left: 50%;
    z-index: 2;
    color: #fff;
    padding: 1rem;
    text-align: center;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease;
    font-family: var(--font-family-2);
    text-transform: uppercase;
    font-size: 4rem;
    line-height: 4.4rem;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.inside-product .category li .item .pic {
    position: relative;
    height: 27.8rem;
    background-size: cover
}

.inside-product .category li .item .pic:before {
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    background: rgba(0, 0, 0, 0.63)
}

.inside-product .category li:hover .item .pic:before {
    background: rgba(0, 0, 0, 0.5)
}

.inside-product .category li:hover .item .tit {
    color: var(--sub-color)
}

.inside-product .listpro {
    padding-bottom: 8rem;
    padding-top: 6rem
}

.inside-product .listpro ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1rem
}

.inside-product .listpro li {
    width: 25%;
    padding: 1rem
}

.inside-product .listpro li .item {
    border: solid 1px #fff;
    background: #fff;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.inside-product .listpro li .pic {
    overflow: hidden;
    position: relative
}

.inside-product .listpro li .pic img {
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease
}

.inside-product .listpro li .pic:after {
    content: "";
    display: block;
    padding-bottom: 79.36507937%
}

.inside-product .listpro li .text {
    padding: 3rem
}

.inside-product .listpro li .text .info {
    font-size: 1.6rem;
    color: #666;
    font-family: var(--font-family-2)
}

.inside-product .listpro li .text .tit {
    color: #000;
    line-height: 4rem;
    height: 4rem;
    font-size: 2.8rem;
    margin-top: 1rem;
    font-family: var(--font-family-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.inside-product .listpro li .text .tit a {
    display: block;
    color: #000
}

.inside-product .listpro li .text .tit a:hover {
    color: var(--main-color)
}

.inside-product .listpro li .text .tag {
    overflow: auto;
    height: 29.2rem;
    font-size: 1.8rem;
    margin-top: 1rem
}

.inside-product .listpro li .text .tag span, .inside-product .listpro li .text .tag p {
    color: #000;
    padding-left: 1.5rem;
    display: block;
    position: relative;
    margin-top: 1rem
}

.inside-product .listpro li .text .tag span:before, .inside-product .listpro li .text .tag p:before {
    top: 1rem;
    left: 0;
    content: "";
    width: .4rem;
    height: .4rem;
    background: #000;
    position: absolute;
    border-radius: 50%
}

.inside-product .listpro li .text .price {
	width: 100%;
    font-size: 2.6rem;
    margin-top: 3rem;
    color: var(--sub-color);
    font-family: var(--font-family-2);
	text-align: center;
}

.inside-product .listpro li .text .btnbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 2rem
}

.inside-product .listpro li .text .btn-1, .inside-product .listpro li .text .btn-2 {
    width: 100%;
    color: #3f3f3f;
    font-size: 2rem;
    text-align: center;
    height: 4.5rem;
    line-height: 4.3rem;
    border: solid 1px #d5d5d5;
    font-family: var(--font-family-2)
}

.inside-product .listpro li .text .btn-1:hover, .inside-product .listpro li .text .btn-2:hover {
    color: #fff;
    border-color: var(--sub-color) !important;
    background: var(--sub-color) !important
}

.inside-product .listpro li .text .btn-1 {
    background: #f6f6f6
}

.inside-product .listpro li .text .btn-2 {
    background: #fff;
    border-color: var(--sub-color);
    color: var(--sub-color)
}

@media (min-width: 1025px) {
    .inside-product .listpro li:hover .item {
        background: #fcfcfc;
        border-color: var(--main-color)
    }

    .inside-product .listpro li:hover .pic img {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
}

@media (max-width: 1024px) {
    .inside-product .brand .list li {
        width: 100%
    }

    .inside-product .category li {
        width: 50%
    }

    .inside-product .listpro li {
        width: 50%
    }

    .inside-product .listpro li .text .tag {
        display: none
    }

    .inside-product .listpro li .text .price {
        margin-top: 15px
    }

    .inside-product .listpro li .text .btnbox {
        margin-top: 0;
        display: block
    }

    .inside-product .listpro li .text .btn-1, .inside-product .listpro li .text .btn-2 {
        margin-top: 15px;
        display: block;
        width: 100%
    }
}

@media (max-width: 480px) {
    .inside-product .category li .item .pic {
        height: 150px
    }

    .inside-product .category li .item .tit {
        font-size: 20px;
        line-height: 30px
    }

    .inside-product .listpro li {
        width: 100%
    }

    .inside-product .listpro li .text {
        text-align: center
    }
}

.inside-proshow {
    padding-bottom: 9rem
}

.inside-proshow .inside-current {
    margin-top: 0;
    font-size: 1.6rem;
    color: #666
}

.inside-proshow .inside-current a {
    color: #666
}

.inside-proshow .inside-current a:hover {
    color: var(--main-color)
}

.inside-proshow .inside-current svg {
    margin-bottom: .6rem;
    width: 2rem;
    height: 2rem;
    fill: #666
}

.inside-proshow .listbox .container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-proshow .listbox .left {
    position: relative;
    width: 48%
}

.inside-proshow .listbox .left .big-img {
    position: relative;
    background: #f5f5f5
}

.inside-proshow .listbox .left .big-img .pic {
    overflow: hidden;
    position: relative
}

.inside-proshow .listbox .left .big-img .pic:after {
    content: "";
    display: block;
    padding-bottom: 92%
}

.inside-proshow .listbox .left .big-img .swiper-button-prev, .inside-proshow .listbox .left .big-img .swiper-button-next {
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    top: auto;
    bottom: 0;
    font-size: 0;
    color: #332c2b;
    width: 5rem;
    height: 5rem;
    margin-top: auto
}

.inside-proshow .listbox .left .big-img .swiper-button-prev:after, .inside-proshow .listbox .left .big-img .swiper-button-next:after {
    font-size: 0
}

.inside-proshow .listbox .left .big-img .swiper-button-prev {
    background: url(../images/prev.png) no-repeat center center #dcdcdc;
    background-size: cover
}

.inside-proshow .listbox .left .big-img .swiper-button-prev:hover {
    background: url(../images/prev-h.png) no-repeat center center var(--main-color);
    background-size: cover
}

.inside-proshow .listbox .left .big-img .swiper-button-next {
    background: url(../images/next.png) no-repeat center center #dcdcdc;
    background-size: cover
}

.inside-proshow .listbox .left .big-img .swiper-button-next:hover {
    background: url(../images/next-h.png) no-repeat center center var(--main-color);
    background-size: cover
}

.inside-proshow .listbox .left .big-img .swiper-button-prev {
    left: auto;
    right: 5.2rem
}

.inside-proshow .listbox .left .big-img .swiper-button-next {
    right: 0
}

.inside-proshow .listbox .left .small-img {
    position: relative;
    margin-top: 1rem;
    padding: 0 4rem
}

.inside-proshow .listbox .left .small-img .pic {
    position: relative;
    cursor: pointer;
    border: solid 1px #d9d8d7
}

.inside-proshow .listbox .left .small-img .pic:after {
    content: "";
    display: block;
    padding-bottom: 92%
}

.inside-proshow .listbox .left .small-img .swiper-slide-thumb-active .pic {
    border-color: var(--sub-color)
}

.inside-proshow .listbox .left .small-img .swiper-button-prev, .inside-proshow .listbox .left .small-img .swiper-button-next {
    top: 0;
    margin-top: 0;
    height: 100%;
    width: 3rem;
    background-color: #ebebeb
}

.inside-proshow .listbox .left .small-img .swiper-button-prev:after, .inside-proshow .listbox .left .small-img .swiper-button-next:after {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 0
}

.inside-proshow .listbox .left .small-img .swiper-button-prev:hover, .inside-proshow .listbox .left .small-img .swiper-button-next:hover {
    background-color: var(--sub-color)
}

.inside-proshow .listbox .left .small-img .swiper-button-prev {
    left: 0
}

.inside-proshow .listbox .left .small-img .swiper-button-prev:after {
    background: url(../images/prev.png) no-repeat center center;
    background-size: cover
}

.inside-proshow .listbox .left .small-img .swiper-button-prev:hover:after {
    background: url(../images/prev-h.png) no-repeat center center;
    background-size: cover
}

.inside-proshow .listbox .left .small-img .swiper-button-next {
    right: 0
}

.inside-proshow .listbox .left .small-img .swiper-button-next:after {
    background: url(../images/next.png) no-repeat center center;
    background-size: cover
}

.inside-proshow .listbox .left .small-img .swiper-button-next:hover:after {
    background: url(../images/next-h.png) no-repeat center center;
    background-size: cover
}

.inside-proshow .listbox .right {
    width: 49%
}

.inside-proshow .listbox .right .title {
    color: #000;
    font-size: 4.7rem;
    line-height: 6rem;
    font-weight: normal;
    font-family: var(--font-family-2)
}

.inside-proshow .listbox .right .title-2 {
    margin-top: 5rem;
    line-height: 6rem;
    font-size: 2.2rem;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: var(--font-family-2)
}

.inside-proshow .listbox .right .title-2 .price {
    color: var(--sub-color);
    font-size: 5rem
}

.inside-proshow .listbox .right .button {
    padding-bottom: 5rem;
    border-bottom: solid 1px #aeaeae;
    margin-top: 5rem
}

.inside-proshow .listbox .right .button a {
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease;
    text-align: center;
    display: block;
    color: #fff;
    height: 7.2rem;
    line-height: 7.2rem;
    font-size: 3.2rem;
    font-family: var(--font-family-2);
    background: var(--main-color)
}

.inside-proshow .listbox .right .button:hover a {
    background: var(--sub-color)
}

.inside-proshow .listbox .right .text {
    color: #000;
    padding-top: 2rem;
    font-size: 2.4rem
}

.inside-proshow .listbox .right .text p, .inside-proshow .listbox .right .text span {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 1.5rem;
    display: block
}

.inside-proshow .listbox .right .text p:before, .inside-proshow .listbox .right .text span:before {
    top: 1.6rem;
    left: 0;
    content: "";
    width: .5rem;
    height: .5rem;
    background: #000;
    position: absolute;
    border-radius: 50%
}

.inside-proshow .listbox .right .share {
    bottom: 0;
    color: #332c2b;
    font-size: 2rem;
    position: absolute;
    font-family: var(--font-family-2)
}

.inside-proshow .listbox .right .share a {
    border-radius: .3rem;
    margin-left: .5rem;
    line-height: 3.5rem;
    text-align: center;
    width: 4rem;
    height: 4rem;
    background: #332c2b;
    display: inline-block;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease
}

.inside-proshow .listbox .right .share a:hover {
    background: var(--sub-color)
}

.inside-proshow .listbox .right .share svg {
    vertical-align: middle;
    width: 2rem;
    height: 2rem;
    fill: #fff
}

@media (max-width: 1024px) {
    .inside-proshow {
        padding-top: 110px;
        padding-bottom: 0
    }

    .inside-proshow .listbox .container {
        display: block
    }

    .inside-proshow .listbox .left, .inside-proshow .listbox .right {
        width: 100%
    }

    .inside-proshow .listbox .right {
        margin-top: 30px
    }

    .inside-proshow .listbox .right .title {
        font-size: 24px;
        line-height: 30px
    }

    .inside-proshow .listbox .right .share {
        display: none
    }

    .inside-proshow .listbox .right .title-2 .price {
        font-size: 24px
    }
}

.inside-promenu {
    left: 0;
    top: 8rem;
    z-index: 7;
    position: -webkit-sticky;
    position: sticky;
    background: #dedede;
    height: 8rem;
    line-height: 8rem
}

.inside-promenu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.inside-promenu li {
    width: 33.333%;
    font-family: var(--font-family-2);
    position: relative;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    font-size: 2.2rem;
    text-align: center
}

.inside-promenu li a {
    display: block;
    color: #000
}

.inside-promenu li:after {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    content: "";
    width: 1px;
    height: 100%;
    left: 0;
    position: absolute;
    background: #fff
}

.inside-promenu li:first-child:after {
    display: none
}

.inside-promenu .cur {
    background: #fff
}

@media (max-width: 1024px) {
    .inside-promenu {
        top: auto;
        left: auto;
        margin-top: 50px;
        position: relative
    }
}

@media (max-width: 640px) {
    .inside-promenu {
        background: transparent;
        border-bottom: 0;
        height: auto;
        line-height: 60px
    }

    .inside-promenu li {
        margin-left: -1px;
        margin-top: -1px;
        background: transparent;
        border: solid 1px #eee !important;
        font-size: 14px;
        width: 50%
    }

    .inside-promenu li:after {
        display: none
    }
}

.inside-summarize {
    position: relative;
    padding-top: 10rem
}

.inside-summarize .title {
    font-size: 5rem;
    line-height: 6rem;
    font-family: var(--font-family-2)
}

.inside-summarize .text {
    padding-top: 3rem;
    font-size: 2rem;
    line-height: 3.2rem
}

.inside-summarize .text p {
    margin-bottom: 1rem
}

@media (max-width: 1024px) {
    .inside-summarize {
        padding-top: 50px
    }

    .inside-summarize .title {
        font-size: 24px;
        line-height: 30px
    }

    .inside-summarize .text {
        font-size: 16px;
        line-height: 24px
    }
}

.inside-specification {
    position: relative;
    padding-top: 10rem
}

.inside-specification .title {
    font-size: 5rem;
    line-height: 6rem;
    font-family: var(--font-family-2)
}

.inside-specification .table {
    z-index: 2;
    position: relative;
    margin-top: 6rem;
    font-family: var(--font-family-2);
    font-size: 2rem
}

.inside-specification .table tr:nth-child(odd) {
    background: #f4f5f7
}

.inside-specification .table td {
    width: 50%;
    padding: 1.4rem
}

.inside-specification .table td:first-child {
    color: #999;
    padding-left: 11rem
}

.inside-specification .tu {
    right: 0;
    bottom: 0;
    position: absolute
}

.inside-specification .tu img {
    max-height: 59rem
}

@media (max-width: 1024px) {
    .inside-specification {
        padding-top: 50px
    }

    .inside-specification .title {
        font-size: 24px;
        line-height: 30px
    }

    .inside-specification .table {
        margin-top: 30px;
        overflow-x: auto
    }

    .inside-specification .table table {
        width: 1000px
    }

    .inside-specification .table td:first-child {
        padding-left: 30px
    }

    .inside-specification .tu {
        display: none
    }
}

.inside-provideo {
    position: relative;
    padding-bottom: 10rem;
    padding-top: 10rem
}

.inside-provideo .box {
    position: relative
}

.inside-provideo .box .pic {
    position: relative
}

.inside-provideo .box .pic:before {
    top: 0;
    left: 0;
    z-index: 2;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.inside-provideo .box .text {
    color: #fff;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 7rem;
    position: absolute
}

.inside-provideo .box .vbtn {
    margin-bottom: 6rem;
    text-align: center
}

.inside-provideo .box .vbtn img {
    max-height: 7rem;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease
}

.inside-provideo .box .title-1 {
    line-height: 7rem;
    font-size: 6rem;
    text-transform: uppercase;
    font-family: var(--font-family-2)
}

@media (max-width: 1024px) {
    .inside-provideo {
        padding: 50px 0
    }

    .inside-provideo .box .text {
        padding: 15px
    }

    .inside-provideo .box .vbtn {
        margin-bottom: 0
    }

    .inside-provideo .box .vbtn img {
        max-height: 40px
    }

    .inside-provideo .box .title-1 {
        font-size: 20px;
        line-height: 30px;
        text-align: center
    }
}

.inside-xg-product {
    padding-top: 7rem
}

.inside-xg-product .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: var(--font-family-2)
}

.inside-xg-product .box h2 {
    font-size: 5rem;
    line-height: 5rem
}

.inside-xg-product .box a {
    color: #000;
    font-size: 2.8rem
}

.inside-xg-product .box a:hover {
    color: var(--sub-color)
}

.inside-xg-product .box img {
    margin-top: -0.3rem;
    margin-right: 1rem;
    max-height: 5rem
}

.inside-xg-product .listpro ul {
    margin: 0;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.inside-xg-product .listpro li {
    width: auto;
    padding-left: 0;
    padding-right: 0
}

@media (max-width: 1024px) {
    .inside-xg-product .box {
        text-align: center;
        display: block
    }

    .inside-xg-product .box h2 {
        font-size: 24px;
        padding-bottom: 10px
    }

    .inside-xg-product .listpro {
        padding: 20px 0 40px 0
    }
}

.inside-news {
    padding: 0;
    padding-bottom: 9rem
}

.inside-news .container {
    max-width: 158rem
}

.inside-news .list {
    margin: 0;
    overflow: hidden;
    padding-top: 7rem
}

.inside-news .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -2.1rem
}

.inside-news .list li {
    padding: 0 2.1rem;
    padding-top: 4rem;
    width: 33.333%
}

.inside-news .list li .item {
    margin-bottom: 0;
    background: #f1f1f1
}

.inside-news .list li .text .time {
    font-size: 1.8rem;
    font-family: var(--font-family-2)
}

.inside-news .list li .text .title {
    margin-top: 1.5rem;
    font-size: 2.4rem;
    line-height: 3.2rem;
    height: 9.6rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3
}

.inside-news .list li .text .view {
    font-size: 1.8rem
}

@media (max-width: 1024px) {
    .inside-news {
        padding-bottom: 50px
    }

    .inside-news .list {
        padding-top: 0
    }

    .inside-news .list li {
        width: 50%
    }
}

@media (max-width: 480px) {
    .inside-news .list li {
        width: 100%
    }
}

.inside-news-show {
    background: #f7f7f7
}

.inside-news-show .inside-current {
    margin-top: 0;
    font-size: 1.6rem;
    color: #666
}

.inside-news-show .inside-current a {
    color: #666
}

.inside-news-show .inside-current a:hover {
    color: var(--main-color)
}

.inside-news-show .inside-current svg {
    margin-bottom: .6rem;
    width: 2rem;
    height: 2rem;
    fill: #666
}

.inside-news-show .nr {
    background: #fff;
    font-size: 1.8rem;
    line-height: 3.2rem;
    padding: 6rem 11rem;
    padding-bottom: 0
}

.inside-news-show .nr .info {
    color: #555;
    font-size: 2.2rem;
    font-family: var(--font-family-2)
}

.inside-news-show .nr .title {
    font-size: 5.5rem;
    line-height: 6.5rem;
    font-weight: normal;
    padding-top: 2rem;
    font-family: var(--font-family-2)
}

.inside-news-show .nr .share {
    border-bottom: solid 1px #dbdcde;
    padding-bottom: 2rem;
    margin-top: 4rem
}

.inside-news-show .nr .share a {
    margin-left: 1rem;
    vertical-align: middle;
    text-align: center;
    line-height: 4.8rem;
    width: 5rem;
    height: 5rem;
    background: #332c2b;
    display: inline-block;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease
}

.inside-news-show .nr .share a:hover {
    background: var(--sub-color)
}

.inside-news-show .nr .share a:first-child {
    margin-left: 0
}

.inside-news-show .nr .share svg {
    fill: #fff;
    width: 2.4rem;
    height: 2.4rem;
    text-align: center;
    vertical-align: middle
}

.inside-news-show .nr .text {
    padding-top: 4rem
}

.inside-news-show .nr .text .mar-20 {
    margin-top: 2rem
}

.inside-news-show .nr .text .t-1 {
    color: #000;
    margin-top: 3rem;
    font-size: 2.6rem;
    font-family: var(--font-family-2)
}

@media (max-width: 1024px) {
    .inside-news-show {
        background: #fff;
        padding-top: 120px
    }

    .inside-news-show .nr {
        padding: 0;
        font-size: 16px;
        line-height: 24px
    }

    .inside-news-show .nr .title {
        font-size: 24px;
        line-height: 30px
    }
}

.inside-tags {
    margin-top: 6rem;
    font-size: 2rem;
    font-family: var(--font-family-2);
    padding: 2rem 3rem;
    background: #f7f7f7
}

.inside-tags a {
    padding-right: 2rem;
    display: inline-block
}

.inside-tags a:first-child {
    padding-right: 0
}

.inside-prev-next {
    text-align: center;
    font-size: 3.2rem;
    line-height: 7rem;
    margin-top: 10rem;
    font-family: var(--font-family-2)
}

.inside-prev-next a {
    margin: 0 3rem;
    display: inline-block
}

.inside-prev-next .fh {
    color: #fff;
    padding: 0 1rem;
    min-width: 16.7rem;
    background: var(--sub-color);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease
}

.inside-prev-next .fh:hover {
    background: var(--main-color)
}

@media (max-width: 1024px) {
    .inside-prev-next {
        text-align: left;
        font-size: 20px;
        line-height: 30px;
        margin: 30px 0
    }

    .inside-prev-next a {
        margin: 0 5px
    }

    .inside-prev-next .fh {
        min-width: 60px
    }
}

.inside-xg-news {
    padding-bottom: 8rem;
    background-color: #f7f7f7;
    background-image: none !important
}

.inside-xg-news .container {
    max-width: 158rem
}

.inside-xg-news .list {
    margin-left: 0;
    margin-right: 0
}

.inside-xg-news .list .item {
    margin-bottom: 0;
    background: #f1f1f1
}

.inside-join {
    position: relative;
    padding-bottom: 12rem;
    padding-top: 7rem;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat
}

.inside-join .tu {
    top: 0;
    left: 0;
    position: absolute
}

.inside-join .tu img {
    width: 100%
}

.inside-join .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-join .left {
    z-index: 9;
    width: 45%;
    position: relative
}

.inside-join .left .t-1 {
    font-size: 8.5rem;
    line-height: 9rem;
    color: var(--sub-color);
    font-family: var(--font-family-2)
}

.inside-join .left .t-4 {
    margin-top: 2rem;
    font-size: 6rem;
    line-height: 7rem;
    color: var(--sub-color);
    font-family: var(--font-family-2)
}

.inside-join .left .t-4 span {
    display: block
}

.inside-join .left .t-2 {
    color: #333;
    font-family: var(--font-family-2);
    padding-bottom: 3rem;
    margin-top: 4rem;
    font-size: 3.2rem;
    line-height: 4.2rem
}

.inside-join .left .t-3 {
    width: 95%;
    color: #555;
    line-height: 3rem;
    font-size: 1.8rem;
    margin-top: 2rem
}

.inside-join .right {
    width: 55%
}

@media (max-width: 1024px) {
    .inside-join {
        padding: 50px 0
    }

    .inside-join .container {
        display: block
    }

    .inside-join .left, .inside-join .right {
        width: 100%
    }

    .inside-join .left .t-1 {
        font-size: 40px;
        line-height: 50px
    }

    .inside-join .left .t-2 {
        font-size: 20px;
        line-height: 30px;
        margin-top: 30px
    }

    .inside-join .left .t-3 {
        width: 100%;
        font-size: 14px;
        line-height: 26px
    }

    .inside-join .left .t-4 {
        font-size: 30px;
        line-height: 30px
    }

    .inside-join .right {
        display: none
    }
}

.inside-joinSearch {
    overflow: hidden;
    background-color: var(--sub-color);
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 5rem
}

.inside-joinSearch .container {
    position: relative;
    padding-right: 24rem
}

.inside-joinSearch .text {
    max-width: 98rem
}

.inside-joinSearch .title {
    font-size: 4.8rem;
    font-weight: 700;
    font-family: var(--font-family-2)
}

.inside-joinSearch .info {
    font-size: 2rem;
    line-height: 3rem
}

.inside-joinSearch .btnDiv {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.inside-joinSearch .btnDiv .circle1 {
    display: block;
    width: 60rem;
    height: 60rem;
    border-radius: 50%;
    border: 1rem rgba(255, 255, 255, 0.1) solid;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: .5s;
    transition: .5s
}

.inside-joinSearch .btnDiv .circle1::before {
    content: "";
    display: block;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    border: 1rem rgba(255, 255, 255, 0.1) solid;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.inside-joinSearch .btnDiv .circle1::after {
    content: "";
    display: block;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    border: 1rem rgba(255, 255, 255, 0.1) solid;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.inside-joinSearch .btnDiv a {
    font-size: 1.8rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 18rem;
    line-height: 5rem;
    border-radius: 2.5rem;
    text-align: center;
    padding: 0 1rem;
    background: #fff;
    color: #09281f
}

.inside-joinSearch .btnDiv a .icon {
    width: 2.4rem;
    height: 2.4rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: .3rem
}

.inside-joinSearch .btnDiv a svg {
    width: 100%;
    height: 100%;
    fill: #989898
}

.inside-joinSearch .btnDiv a:hover {
    background: #fff;
    color: var(--main-color)
}

.inside-joinSearch .btnDiv a:hover svg {
    fill: var(--main-color)
}

.inside-joinSearch:hover .btnDiv .circle1 {
    width: 120vw;
    height: 120vw
}

@media screen and (max-width: 1024px) {
    .inside-joinSearch {
        padding: 40px 0
    }

    .inside-joinSearch .container {
        padding-right: 0
    }

    .inside-joinSearch .text {
        width: 100%;
        max-width: 100%
    }

    .inside-joinSearch .title {
        font-size: 24px;
        line-height: 1
    }

    .inside-joinSearch .info {
        font-size: 14px;
        margin-top: 20px
    }

    .inside-joinSearch .btnDiv {
        display: none;
        position: static;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        padding-top: 20px
    }

    .inside-joinSearch .btnDiv > a {
        padding: 0 15px;
        min-width: 140px;
        line-height: 40px;
        border-radius: 20px
    }

    .inside-joinSearch .btnDiv > a .icon {
        width: 24px;
        height: 24px;
        margin-right: 5px
    }
}

.inside-job {
    padding: 9rem 0;
    background: #f7f7f7
}

.inside-job .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.inside-job .list li {
    width: 100%
}

.inside-job .list .liDiv {
    width: 100%;
    margin-bottom: 5rem
}

.inside-job .list .liDiv:last-child {
    margin-bottom: 0
}

.inside-job .list .liDiv:last-child {
    margin-bottom: 0
}

.inside-job .list .box {
    display: block;
    min-height: 100%;
    background-color: #fff;
    padding-bottom: 2rem;
    padding: 0 6.5rem 6.5rem 6.5rem;
    position: relative
}

.inside-job .list .title {
    color: #000;
    font-family: var(--font-family-2);
    text-transform: uppercase;
    font-size: 3.2rem;
    line-height: 4rem;
    margin-bottom: 3rem;
    padding-right: 5rem;
    position: relative
}

.inside-job .list .hd {
    padding-top: 5rem;
    display: block;
    position: relative
}

.inside-job .list .hd .icon {
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background-color: #efefef;
    position: absolute;
    top: 5rem;
    right: 0;
    color: var(--main-color)
}

.inside-job .list .hd .icon svg {
    width: 1.6rem;
    height: 1.6rem
}

.inside-job .list .hd:hover .title {
    color: var(--main-color)
}

.inside-job .list .hd:hover .icon {
    background-color: var(--main-color);
    color: #fff
}

.inside-job .list .hd .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 2rem;
    line-height: 2
}

.inside-job .list .hd .info .div-1 {
    color: #333;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px #e1e1e1 solid;
    padding-top: 1.5rem;
    padding-bottom: 1rem
}

.inside-job .list .hd .info .span-1 {
    display: inline-block;
    width: 14rem
}

.inside-job .list .hd .info .span-2 {
    display: inline-block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 2rem
}

.inside-job .list .bd {
    display: none;
    color: #333;
    padding-top: 6rem;
    font-size: 1.8rem;
    line-height: 2
}

.inside-job .list .bd .bt {
    color: #222;
    font-weight: 400;
    font-size: 2.6rem;
    margin-bottom: 1.5rem
}

.inside-job .list .text p {
    padding-bottom: 1rem
}

.inside-job .list .send {
    padding-top: 2rem
}

.inside-job .list .send a {
    color: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 16rem;
    line-height: 6.8rem;
    border-radius: 6rem;
    background: var(--sub-color);
    padding: 0 3rem;
    text-align: center;
    font-size: 1.8rem
}

.inside-job .list .send a:hover {
    background-color: var(--main-color)
}

.inside-job .list .send a .icon {
    max-height: 2.6rem;
    margin-right: 1rem
}

.inside-job .list .active .box {
    -webkit-box-shadow: 0 .01rem .05rem #ddd;
    box-shadow: 0 .01rem .05rem #ddd
}

.inside-job .list .active .hd .icon {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background-color: var(--main-color);
    color: #fff
}

@media screen and (max-width: 1024px) {
    .inside-job {
        padding-top: 40px;
        padding-bottom: 60px
    }

    .inside-job .page-more {
        padding-top: 50px
    }

    .inside-job .nr {
        margin-top: 0;
        padding-left: 0
    }

    .inside-job .list {
        padding-left: 0
    }

    .inside-job .list .box {
        padding: 20px 20px;
        border-radius: 5px
    }

    .inside-job .list .hd {
        padding: 0 0 20px 0
    }

    .inside-job .list .hd .icon {
        width: 36px;
        height: 36px;
        top: 0
    }

    .inside-job .list .hd .icon svg {
        width: 15px;
        height: 15px
    }

    .inside-job .list .hd .title {
        font-size: 16px;
        line-height: 30px;
        height: 30px;
        padding-left: 10px;
        margin-bottom: 10px
    }

    .inside-job .list .hd .title::after {
        width: 2px;
        height: 16px;
        top: 7px
    }

    .inside-job .list .hd .info {
        padding-left: 10px;
        font-size: 14px
    }

    .inside-job .list .hd .info .div-1 {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .inside-job .list .hd .info .span-1 {
        width: 90px
    }

    .inside-job .list .liDiv {
        margin-bottom: 20px
    }

    .inside-job .list .bd {
        font-size: 14px;
        padding: 20px 10px 20px 10px
    }

    .inside-job .list .bd .bt {
        font-size: 16px
    }

    .inside-job .list .send {
        padding-top: 0
    }

    .inside-job .list .send a {
        min-width: 160px;
        line-height: 46px;
        padding: 0 20px;
        font-size: 14px;
        border-radius: 30px
    }

    .inside-job .list .active .box {
        -webkit-box-shadow: 0 0 5px 0 #ddd inset;
        box-shadow: 0 0 5px 0 #ddd inset
    }
}

.inside-joinSearch .btnDiv {
    width: 18rem
}

.inside-joinSearch input {
    border: 0;
    font-size: 1.8rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    line-height: 5rem;
    border-radius: 3rem;
    text-align: left;
    padding: 0 1rem;
    padding-left: 4.5rem;
    background: #fff;
    color: #09281f
}

.inside-joinSearch label {
    top: 1.5rem;
    left: 1.5rem;
    position: absolute
}

.inside-joinSearch svg {
    fill: #999
}

@media (max-width: 1024px) {
    .jobSearch .btnDiv {
        display: none
    }
}

.inside-contact {
    padding: 8rem 0
}

.inside-contact ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -7rem
}

.inside-contact li {
    width: 25%;
    color: #000;
    padding: 0 7rem
}

.inside-contact li .icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 24rem;
    text-align: center;
    background: #f6f6f6
}

.inside-contact li .icon img {
    max-height: 14rem;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.inside-contact li .title-1 {
    font-size: 1.8rem;
    margin-top: 2rem
}

.inside-contact li .title-2 {
    padding-right: 3rem;
    font-size: 2.2rem;
    line-height: 3rem;
    margin-top: 1.5rem;
    font-family: var(--font-family-2)
}

.inside-contact li:hover .icon img {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

@media (max-width: 1024px) {
    .inside-contact {
        padding: 0 0 50px 0
    }

    .inside-contact ul {
        margin: 0 -10px
    }

    .inside-contact li {
        padding: 0 10px;
        padding-top: 30px;
        width: 50%
    }

    .inside-contact li .title-2 {
        padding-right: 0
    }
}

@media (max-width: 480px) {
    .inside-contact li {
        width: 100%
    }
}

.inside-locations {
    padding: 6rem 0;
    background: #f6f6f6
}

.inside-locations ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1.2rem
}

.inside-locations li {
    padding: 0 1.2rem;
    margin-top: 4rem;
    width: 33.3333%
}

.inside-locations li .text {
    background: #fff;
    padding: 3rem;
    font-size: 2rem;
    line-height: 3rem;
    position: relative
}

.inside-locations li .text:after {
    content: "";
    bottom: 0;
    left: 0;
    width: 0;
    height: .4rem;
    position: absolute;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    background: var(--main-color)
}

.inside-locations li .t-1 {
    padding-bottom: 1rem;
    font-family: var(--font-family-2);
    font-size: 2.4rem;
    position: relative;
    text-transform: uppercase
}

.inside-locations li .t-2 {
    margin-top: 1.5rem;
    padding-left: 3.3rem;
    position: relative
}

.inside-locations li .t-2 svg {
    left: 0;
    top: .4rem;
    fill: #a3a3a3;
    width: 2rem;
    height: 2rem;
    position: absolute
}

.inside-locations li .t-3 {
    font-size: 1.6rem;
    margin-top: 4rem
}

.inside-locations li:hover .text:after {
    width: 100%
}

.inside-locations li:hover .t-3 a {
    color: var(--main-color)
}

@media (max-width: 1024px) {
    .inside-locations {
        padding: 50px 0
    }

    .inside-locations li {
        width: 100%
    }

    .inside-locations li .pic img {
        width: 100%
    }
}

.inside-ditu {
    overflow: hidden;
    position: relative
}

.inside-ditu .pic img {
    width: 100%
}

.inside-ditu .item {
    top: 50%;
    left: 50%;
    z-index: 3;
    -webkit-transform: translate(-35%, -30%);
    transform: translate(-35%, -30%);
    position: absolute
}

.inside-ditu .text {
    position: relative;
    background: #fff;
    max-width: 55.5rem;
    border-radius: 1rem;
    font-size: 2rem;
    padding: 2.5rem 3rem;
    font-family: var(--font-family-2)
}

.inside-ditu .text:after {
    content: "";
    top: 50%;
    right: -2.4rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    border-left: solid 3.4rem #fff;
    border-top: solid 2.4rem transparent;
    border-bottom: solid 2.4rem transparent
}

.inside-ditu .text .logo {
    padding-bottom: 1rem
}

.inside-ditu .text .logo img {
    max-height: 5rem
}

.inside-ditu .text .title {
    font-weight: normal;
    font-size: 2.8rem;
    line-height: 3rem;
    padding-bottom: 1rem
}

.inside-ditu .text .add {
    top: 50%;
    right: -12rem;
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.inside-ditu .text .add img {
    max-height: 11rem
}

@media (max-width: 1024px) {
    .inside-ditu .item {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

@media (max-width: 640px) {
    .inside-ditu .item {
        top: auto;
        left: auto;
        position: relative;
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    .inside-ditu .text {
        max-width: 100%
    }
}

.inside-message {
    padding-bottom: 8rem;
    padding-top: 7.5rem;
    position: relative;
}

.inside-message ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
    margin-top: 4rem;
}

.inside-message li {
    width: 33.333%;
    padding: .5rem
}

.inside-message li .iinput, .inside-message li .iselect, .inside-message li .itextarea {
    position: relative
}

.inside-message li .iinput label, .inside-message li .iselect label, .inside-message li .itextarea label {
    top: 2.4rem;
    left: 1.8rem;
    position: absolute;
    color: var(--sub-color)
}

.inside-message li .iinput input, .inside-message li .iselect input, .inside-message li .itextarea input, .inside-message li .iinput select, .inside-message li .iselect select, .inside-message li .itextarea select, .inside-message li .iinput textarea, .inside-message li .iselect textarea, .inside-message li .itextarea textarea {
    width: 100%;
    border: 0;
    color: #5f6e7b;
    font-size: 2rem;
    padding: 0 3rem;
    border-radius: 1rem;
    line-height: 6.7rem;
    height: 6.7rem;
    background: #fff;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease;
    font-family: var(--font-family-1)
}

.inside-message li .iinput input:focus, .inside-message li .iselect input:focus, .inside-message li .itextarea input:focus, .inside-message li .iinput section:focus, .inside-message li .iselect section:focus, .inside-message li .itextarea section:focus, .inside-message li .iinput textarea:focus, .inside-message li .iselect textarea:focus, .inside-message li .itextarea textarea:focus {
    background: rgba(0, 0, 0, 0.05)
}

.inside-message li .iinput select, .inside-message li .iselect select, .inside-message li .itextarea select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../images/arrow-2.png) no-repeat center right 2rem #fff
}

.inside-message li .iinput textarea, .inside-message li .iselect textarea, .inside-message li .itextarea textarea {
    height: 20rem;
    line-height: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.inside-message li .iinput textarea::-webkit-input-placeholder, .inside-message li .iselect textarea::-webkit-input-placeholder, .inside-message li .itextarea textarea::-webkit-input-placeholder, .inside-message li .iinput input::-webkit-input-placeholder, .inside-message li .iselect input::-webkit-input-placeholder, .inside-message li .itextarea input::-webkit-input-placeholder {
    color: #5f6e7b
}

.inside-message li .iinput textarea::-moz-placeholder, .inside-message li .iselect textarea::-moz-placeholder, .inside-message li .itextarea textarea::-moz-placeholder, .inside-message li .iinput input::-moz-placeholder, .inside-message li .iselect input::-moz-placeholder, .inside-message li .itextarea input::-moz-placeholder {
    color: #5f6e7b
}

.inside-message li .iinput textarea::--moz-placeholder, .inside-message li .iselect textarea::--moz-placeholder, .inside-message li .itextarea textarea::--moz-placeholder, .inside-message li .iinput input::-moz-placeholder, .inside-message li .iselect input::-moz-placeholder, .inside-message li .itextarea input::-moz-placeholder {
    color: #5f6e7b
}

.inside-message li.li-2 {
    width: 66.666%
}

.inside-message li.li-3, .inside-message li.li-4 {
    width: 100%
}

.inside-message li.li-4 {
    margin-top: 3rem
}

.inside-message li.li-4 .submit-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-message li.li-4 .button a {
    font-size: 2.2rem;
    display: inline-block;
    padding: 0 1.5rem;
    text-align: center;
    min-width: 16rem;
    color: #fff;
    height: 5.4rem;
    line-height: 5.4rem;
    border-radius: .5rem;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    background: var(--sub-color);
    font-family: var(--font-family-2)
}

.inside-message li.li-4 .button a:hover {
    background: var(--main-color)
}

@media (max-width: 1024px) {
    .inside-message {
        padding: 20px 0 50px 0
    }

    .inside-message ul {
        margin-left: 0;
        margin-right: 0
    }

    .inside-message li {
        padding: 0;
        padding-top: 15px;
        width: 100% !important
    }

    .inside-message li.li-4 {
        margin-top: 0
    }

    .inside-message li.li-4 .button {
        margin-top: 15px
    }

    .inside-message li.li-4 .button a {
        min-width: 100%
    }

    .inside-message li.li-4 .submit-box {
        display: block
    }

    .inside-message li .verifyDiv {
        width: 100%
    }
}

.inside-service {
    padding-bottom: 8rem
}

.inside-service .text-box {
    color: #000;
    padding: 5rem 0;
    line-height: 3.2rem;
    font-size: 2rem
}

.inside-service .list ul {
    margin: 0 -1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.inside-service .list li {
    width: 50%;
    padding: 1.5rem
}

.inside-service .list li .item {
    position: relative
}

.inside-service .list li .pic {
    overflow: hidden;
    position: relative
}

.inside-service .list li .pic:after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))
}

.inside-service .list li .pic img {
    -webkit-transition: all 600ms linear;
    transition: all 600ms linear;
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.inside-service .list li .text {
    color: #fff;
    z-index: 4;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4.5rem;
    padding-bottom: 6rem;
    position: absolute;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    text-transform: uppercase;
    font-family: var(--font-family-2)
}

.inside-service .list li .text .title-1 {
    font-size: 4.8rem;
    line-height: 5rem
}

.inside-service .list li .text .title-2 {
    margin-top: 1.5rem;
    font-size: 1.8rem
}

.inside-service .list li:hover .pic img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.inside-service .list-2 {
    margin-top: 8rem
}

.inside-service .list-2 ul {
    margin: 0 -10px
}

.inside-service .list-2 li {
    width: 33.333%;
    padding: 0 10px
}

.inside-service .list-2 li .text {
    padding: 30px
}

.inside-service .list-2 li .text .title-1 {
    font-size: 3.1rem;
    line-height: 4rem
}

.inside-service .list-2 li .text .title-2 {
    font-size: 1.2rem;
    margin-top: .5rem
}

@media (max-width: 1024px) {
    .inside-service {
        padding-bottom: 50px
    }

    .inside-service .text-box {
        line-height: 24px;
        font-size: 16px;
        padding-top: 30px;
        padding-bottom: 0
    }

    .inside-service .list {
        margin-top: 20px
    }

    .inside-service .list li {
        width: 100%
    }
}

.inside-video li {
    margin-top: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-video li .left-video {
    width: 63%;
    position: relative
}

.inside-video li .left-video .pic {
    border-radius: 1rem;
    position: relative
}

.inside-video li .left-video .pic img {
    border-radius: 1rem
}

.inside-video li .left-video .pic:before {
    top: 0;
    left: 0;
    z-index: 2;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.inside-video li .left-video .text {
    color: #fff;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4rem;
    position: absolute
}

.inside-video li .left-video .vbtn {
    margin-bottom: 4rem;
    text-align: center
}

.inside-video li .left-video .vbtn img {
    max-height: 6rem;
    -webkit-transition: all 334ms ease;
    transition: all 334ms ease
}

.inside-video li .left-video .title-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    height: 14rem;
    line-height: 7rem;
    font-size: 6.5rem;
    text-transform: uppercase;
    font-family: var(--font-family-2)
}

.inside-video li .right-text {
    width: 33.5%
}

.inside-video li .right-text .title-1 {
    font-size: 4rem;
    line-height: 4.2rem;
    font-weight: normal;
    font-family: var(--font-family-2)
}

.inside-video li .right-text .title-2 {
    color: #555;
    overflow: auto;
    height: 21rem;
    font-size: 2rem;
    line-height: 3rem;
    margin-top: 9rem
}

.inside-video li:first-child {
    margin-top: 0
}

.inside-video li:hover .left-video .pic:before {
    background: rgba(0, 0, 0, 0.3)
}

.inside-video li:hover .left-video .vbtn img {
    opacity: .8
}

@media (max-width: 1024px) {
    .inside-video {
        padding-top: 30px
    }

    .inside-video li {
        display: block
    }

    .inside-video li .left-video, .inside-video li .right-text {
        width: 100%
    }

    .inside-video li .left-video .title-1 {
        font-size: 20px;
        height: 48px;
        line-height: 24px
    }

    .inside-video li .left-video .vbtn {
        margin-bottom: 10px
    }

    .inside-video li .right-text {
        margin-top: 30px
    }

    .inside-video li .right-text .title-1 {
        font-size: 24px;
        line-height: 30px
    }

    .inside-video li .right-text .title-2 {
        height: auto;
        margin-top: 20px
    }
}

.inside-download {
    padding: 8rem 0
}

.inside-download .rightNr {
    width: 100%
}

.inside-download .rightNr li {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    font-family: var(--font-family-2);
    margin-top: 2rem;
    position: relative;
    -webkit-box-shadow: .3rem 0 .9rem rgba(0, 0, 0, 0.03);
    box-shadow: .3rem 0 .9rem rgba(0, 0, 0, 0.03);
    height: 10rem;
    line-height: 10rem;
    font-size: 2rem;
    padding-left: 4rem;
    padding-right: 7rem;
    background: #fff
}

.inside-download .rightNr li a {
    color: #3c3c3c;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.inside-download .rightNr li .icon {
    margin-top: 2.2rem;
    height: 5.2rem;
    vertical-align: top;
    display: inline-block;
    margin-right: 2rem
}

.inside-download .rightNr li .icon img {
    vertical-align: top;
    max-height: 5.2rem
}

.inside-download .rightNr li .dow {
    right: 3rem;
    top: 1rem;
    position: absolute
}

.inside-download .rightNr li .dow svg {
    height: 4rem;
    width: 4rem;
    fill: #999
}

.inside-download .rightNr li:first-child {
    margin-top: 0
}

@media (min-width: 1025px) {
    .inside-download .rightNr li:hover a {
        color: var(--main-color)
    }
}

@media (max-width: 1024px) {
    .inside-download {
        padding-top: 30px
    }

    .inside-download .rightNr {
        width: 100%;
        float: none;
        margin-top: 30px
    }

    .inside-download .rightNr li {
        padding-right: 40px;
        padding-left: 20px
    }

    .inside-download .rightNr li .icon {
        margin-right: 10px
    }

    .inside-download .rightNr li .dow {
        right: 10px
    }
}

.inside-reg-message {
    margin-top: -28rem;
    padding-bottom: 10rem;
    position: relative
}

.inside-reg-message .back {
    z-index: 10;
    top: -11.1rem;
    left: 10rem;
    display: inline-block;
    position: relative
}

.inside-reg-message .back a {
    line-height: 4rem;
    font-size: 2.8rem;
    color: var(--main-color);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s;
    font-family: var(--font-family-2)
}

.inside-reg-message .back a:hover {
    color: var(--sub-color);
    text-decoration: underline
}

.inside-reg-message .back .icon svg {
    vertical-align: top;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    margin-right: 1rem
}

.inside-reg-message .nr {
    background: #f7f7f7;
    border-radius: .5rem;
    margin-top: 3rem;
    overflow: hidden;
    max-width: 111rem;
    margin-left: auto;
    margin-right: auto;
    padding: 7rem 7rem;
    -webkit-box-shadow: 0 1.5rem 3.5rem 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 1.5rem 3.5rem 0 rgba(0, 0, 0, 0.08)
}

.inside-reg-message .titleBig {
    font-family: var(--font-family-2);
    text-transform: uppercase;
    color: #383838;
    font-size: 4.8rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 3rem
}

.inside-reg-message .list-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.inside-reg-message .list-form li {
    width: 100%;
    clear: both;
    padding: 0 2rem 3rem 2rem
}

.inside-reg-message .list-form li:last-child {
    padding-bottom: 0
}

.inside-reg-message .list-form li.li-1 {
    width: 100%
}

.inside-reg-message .list-form li.li-1 .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-reg-message .list-form li.li-1 .editDiv {
    width: 31%
}

.inside-reg-message .list-form li.li-1 .text-check {
    color: #4c4a4a;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 1.8rem;
    padding-top: 1rem;
    font-family: var(--font-family-2)
}

.inside-reg-message .list-form li.li-1 .text-check span {
    margin-top: 1rem;
    margin-right: 5rem;
    display: inline-block
}

.inside-reg-message .list-form li.li-1 .text-check span:first-child {
    margin-right: 0
}

.inside-reg-message .list-form li.li-1 .text-check input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
    opacity: .5
}

.inside-reg-message .list-form li.li-1 .text-check input[type="checkbox"] {
    opacity: 1;
    accent-color: var(--sub-color)
}

.inside-reg-message .list-form li.li-2, .inside-reg-message .list-form li.li-first {
    width: 100%
}

.inside-reg-message .list-form li.li-first .box {
    width: 48%
}

.inside-reg-message .list-form .box {
    display: block;
    position: relative
}

.inside-reg-message .list-form .text-select, .inside-reg-message .list-form .text-form, .inside-reg-message .list-form .textarea-form {
    width: 100%;
    color: #333;
    border: 0;
    font-family: var(--font-family-1);
    border-radius: .8rem;
    font-size: 1.6rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 2rem;
    padding-right: 2rem;
    background: #fff;
    -webkit-transition: .5s;
    transition: .5s
}

.inside-reg-message .list-form .text-select::-webkit-input-placeholder, .inside-reg-message .list-form .text-form::-webkit-input-placeholder, .inside-reg-message .list-form .textarea-form::-webkit-input-placeholder {
    color: #999
}

.inside-reg-message .list-form .text-select:-ms-input-placeholder, .inside-reg-message .list-form .text-form:-ms-input-placeholder, .inside-reg-message .list-form .textarea-form:-ms-input-placeholder {
    color: #999
}

.inside-reg-message .list-form .text-select:-moz-placeholder, .inside-reg-message .list-form .text-form:-moz-placeholder, .inside-reg-message .list-form .textarea-form:-moz-placeholder {
    color: #999
}

.inside-reg-message .list-form .text-select:placeholder, .inside-reg-message .list-form .text-form:placeholder, .inside-reg-message .list-form .textarea-form:placeholder {
    color: #999
}

.inside-reg-message .list-form .text-select:focus, .inside-reg-message .list-form .text-form:focus, .inside-reg-message .list-form .textarea-form:focus {
    color: #000
}

.inside-reg-message .list-form .text-form, .inside-reg-message .list-form .text-select {
    height: 6.2rem;
    line-height: 6rem
}

.inside-reg-message .list-form .text-select {
    color: #999;
    background: url(../images/arrow-3.png) no-repeat center right 2rem #fff
}

.inside-reg-message .list-form .textarea-form {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    height: 13.2rem;
    line-height: 3rem;
    vertical-align: top
}

.inside-reg-message .list-form .selectDiv {
    width: 100%
}

.inside-reg-message .list-form .bt {
    color: #333;
    line-height: 4rem;
    font-family: var(--font-family-2)
}

.inside-reg-message .list-form .xh {
    color: #f00;
    margin-right: .5rem
}

.inside-reg-message .list-form .tishi {
    color: #7a7a7a;
    font-size: 1.6rem;
    padding-top: 1.5rem
}

.inside-reg-message .list-form .agree {
    padding-top: 1rem;
    font-size: 1.4rem;
    color: #212121;
    line-height: 3rem
}

.inside-reg-message .list-form .agree .checkboxDiv {
    margin-right: 1rem
}

.inside-reg-message .list-form .a-1 {
    color: var(--main-color)
}

.inside-reg-message .list-form .yanzheng-btn {
    padding-top: 1rem
}

.inside-reg-message .list-form .yanzheng-btn .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.inside-reg-message .list-form .verifyDiv {
    width: 40% !important
}

.inside-reg-message .list-form .submit {
    border: 0;
    color: #fff;
    font-size: 2rem;
    height: 5.2rem;
    line-height: 5.2rem;
    min-width: 21.8rem;
    text-transform: uppercase;
    font-family: var(--font-family-2);
    background: var(--sub-color)
}

.inside-reg-message .list-form .submit:hover {
    background: var(--main-color)
}

@media screen and (max-width: 1024px) {
    .inside-reg-message {
        margin-top: 0;
        padding-top: 50px;
        padding-bottom: 50px
    }

    .inside-reg-message .back {
        display: none
    }

    .inside-reg-message .nr {
        background: transparent;
        margin-top: 0;
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .inside-reg-message .list-form {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 20px
    }

    .inside-reg-message .list-form li {
        padding-bottom: 10px;
        width: 100% !important;
        clear: both
    }

    .inside-reg-message .list-form li:last-child {
        padding-bottom: 0
    }

    .inside-reg-message .list-form .text-select, .inside-reg-message .list-form .text-form, .inside-reg-message .list-form .textarea-form {
        border: solid 1px #ccc;
        font-size: 14px;
        padding-left: 15px;
        padding-right: 15px
    }

    .inside-reg-message .list-form .text-select:focus, .inside-reg-message .list-form .text-form:focus, .inside-reg-message .list-form .textarea-form:focus {
        -webkit-box-shadow: 0 0 1rem 0 rgba(83, 81, 159, 0.3);
        box-shadow: 0 0 1rem 0 rgba(83, 81, 159, 0.3)
    }

    .inside-reg-message .list-form .textarea-form {
        padding-top: 12px;
        padding-bottom: 15px;
        height: 130px;
        line-height: 30px
    }

    .inside-reg-message .list-form .tishi {
        font-size: 14px;
        padding-top: 10px
    }

    .inside-reg-message .list-form .bt {
        line-height: 40px;
        font-size: 16px
    }

    .inside-reg-message .list-form .xh {
        margin-right: 5px
    }

    .inside-reg-message .list-form .submit, .inside-reg-message .list-form .reset {
        font-size: 16px;
        min-width: 100%;
        line-height: 40px;
        margin-left: auto;
        margin-right: auto
    }

    .inside-reg-message .list-form .agree {
        font-size: 14px;
        line-height: 1.5
    }

    .inside-reg-message .list-form .yanzheng-btn {
        padding-top: 10px
    }

    .inside-reg-message .list-form li.li-first .box {
        width: 100% !important
    }
}

@media (max-width: 640px) {
    .inside-reg-message .list-form li.li-1 .box {
        display: block
    }

    .inside-reg-message .list-form li.li-1 .editDiv {
        width: 100%;
        margin-top: 10px
    }

    .inside-reg-message .list-form .yanzheng-btn .box {
        display: block
    }

    .inside-reg-message .list-form .yanzheng-btn .box .btnDiv {
        margin-top: 20px
    }

    .inside-reg-message .list-form .verifyDiv {
        width: 100% !important
    }
}

.inside-message-2 {
    margin-top: 0
}

.inside-message-2 .nr {
    max-width: 128rem
}

.inside-message-2 .list-form li {
    width: 50%
}

.inside-register {
    padding-bottom: 10rem
}

.inside-register .power .text {
    color: #555;
    margin: 0 auto;
    padding-top: 2rem;
    max-width: 123rem;
    font-size: 2rem;
    line-height: 3.2rem;
    text-align: center
}

.inside-register .power .text p {
    padding-top: 1rem
}

.inside-register .power .text .f-28 {
    margin-top: 3rem;
    font-size: 2.8rem;
    color: var(--sub-color);
    font-family: var(--font-family-2)
}

.inside-register .power .list {
    padding-top: 4.5rem
}

.inside-register .power .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -2.4rem
}

.inside-register .power .list li {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2.4rem
}

.inside-register .power .list li .item {
    width: 100%;
    min-height: 100%;
    background: #f5f5f5
}

.inside-register .power .list li .pic {
    overflow: hidden
}

.inside-register .power .list li .pic img {
    -webkit-transition: all 700ms linear;
    transition: all 700ms linear
}

.inside-register .power .list li .nr {
    padding: 3.5rem;
    padding-bottom: 4rem
}

.inside-register .power .list li .nr .title-1 {
    color: #000;
    line-height: 4rem;
    font-size: 3.4rem;
    font-family: var(--font-family-2)
}

.inside-register .power .list li .nr .title-2 {
    color: #555;
    margin-top: 1.5rem;
    font-size: 2.4rem;
    line-height: 3rem
}

@media (min-width: 1025px) {
    .inside-register .power .list li:hover .pic img {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
}

.inside-register .process {
    padding: 9rem 0
}

.inside-register .process .index-title {
    text-align: left
}

.inside-register .process .info {
    color: #000;
    font-size: 2.4rem;
    margin-top: 2rem
}

.inside-register .process .list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1rem
}

.inside-register .process .list li {
    margin-top: 5rem;
    padding: 0 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 33.333%
}

.inside-register .process .list li .item {
    width: 100%;
    color: #000;
    min-height: 100%;
    padding: 4rem;
    padding-bottom: 5.5rem;
    padding-top: 2.4rem;
    border-radius: 1rem;
    background: #f5f5f5
}

.inside-register .process .list li .num span {
    color: #fff;
    height: 4rem;
    line-height: 4rem;
    min-width: 6.4rem;
    display: inline-block;
    text-align: center;
    font-size: 2.2rem;
    border-radius: 3rem;
    background: var(--sub-color);
    font-family: var(--font-family-2)
}

.inside-register .process .list li .title-1 {
    min-height: 8.8rem;
    line-height: 4.4rem;
    font-size: 3.6rem;
    margin-top: 6rem;
    font-family: var(--font-family-2)
}

.inside-register .process .list li .title-2 {
    font-size: 2.4rem;
    line-height: 3rem;
    margin-top: 5rem
}

.inside-register .become {
    padding-top: 3rem
}

.inside-register .become .info {
    color: #000;
    padding-top: 1rem;
    font-size: 2.2rem;
    text-align: center;
    font-family: var(--font-family-2)
}

.inside-register .become .button {
    margin-top: 4rem;
    text-align: center
}

.inside-register .become .button a {
    color: #fff;
    font-size: 2.4rem;
    min-width: 21.8rem;
    height: 5.2rem;
    line-height: 5.2rem;
    display: inline-block;
    position: relative;
    background: var(--sub-color);
    font-family: var(--font-family-2)
}

.inside-register .become .button a:before {
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    position: absolute;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    background: var(--main-color)
}

.inside-register .become .button span {
    z-index: 2;
    position: relative
}

.inside-register .become .button:hover a:before {
    width: 100%
}

@media (max-width: 1024px) {
    .inside-register {
        padding-bottom: 50px
    }

    .inside-register .power .index-title {
        text-align: left
    }

    .inside-register .power .text {
        max-width: 100%;
        text-align: left
    }

    .inside-register .power .list li {
        width: 100%
    }

    .inside-register .power .list li .nr .title-1 {
        font-size: 20px;
        line-height: 30px
    }

    .inside-register .power .list li .nr .title-2 {
        font-size: 16px;
        line-height: 24px
    }

    .inside-register .process {
        padding: 30px 0
    }

    .inside-register .process .list li {
        width: 100%
    }

    .inside-register .become {
        padding-top: 0
    }

    .inside-register .list-2 {
        margin-top: 30px
    }

    .inside-register .list-2 li {
        width: 100%;
        margin-top: 20px
    }

    .inside-register .list-2 li .text .title-2 {
        font-size: 14px
    }

    .inside-register .list-2 li:first-child {
        margin-top: 0
    }
}

@media (max-width: 640px) {
    .inside-register .process .list li .item {
        padding: 30px
    }

    .inside-register .process .list li .title-1 {
        margin-top: 20px;
        font-size: 24px;
        line-height: 30px;
        min-height: auto
    }
}

.inside-faq {
    padding: 3rem 0 7rem 0
}

.inside-faq .left {
    float: left;
    position: -webkit-sticky;
    position: sticky;
    width: 33%;
    background: #f4f4f4;
    padding-top: 3rem;
    padding-bottom: 10rem;
    top: 7rem
}

.inside-faq .left ul li {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 9rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding-left: 5.2rem
}

.inside-faq .left ul li:before {
    content: "";
    top: 3.8rem;
    left: -2rem;
    position: absolute;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    border-left: solid 1rem #fff;
    border-top: solid .6rem transparent;
    border-bottom: solid .6rem transparent
}

.inside-faq .left ul li a {
    font-size: 2.6rem;
    color: #000
}

.inside-faq .left ul .active {
    font-family: var(--font-family-2);
    background: var(--sub-color)
}

.inside-faq .left ul .active:before {
    left: 1rem
}

.inside-faq .left ul .active a {
    color: #fff
}

.inside-faq .right {
    float: right;
    width: 67%
}

.inside-faq .right .show .info1 {
    display: none
}

.inside-faq .right .job2 .span-01 {
    display: block
}

.inside-faq .right .job2 dl {
    padding: 0 4.5rem;
    overflow: hidden
}

.inside-faq .right .job2 dt {
    overflow: hidden;
    padding-left: 0;
    cursor: pointer;
    font-size: 2.6rem;
    color: #040300;
    padding: 3rem 0;
    border-bottom: solid 1px #e3e3e3;
    -webkit-transition: all .5s;
    transition: all .5s;
    position: relative;
    padding-right: 8rem
}

.inside-faq .right .job2 dt:after {
    content: "";
    right: 2.7rem;
    top: 3.7rem;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: solid .2rem #4c4c4c;
    border-bottom: solid .2rem #4c4c4c
}

.inside-faq .right .job2 dd {
    height: 0;
    color: #808080;
    font-weight: 100;
    font-size: 2rem;
    line-height: 3.2rem;
    overflow: hidden
}

.inside-faq .right .job2 dd .nr {
    margin-top: 0;
    padding-top: 4rem;
    padding-bottom: 6rem;
    position: relative
}

.inside-faq .right .job2 dd .nr p {
    margin-bottom: 1rem
}

.inside-faq .right .job2 .cur {
    background: #fafafa
}

.inside-faq .right .job2 .cur dt {
    border-color: #fafafa
}

.inside-faq .right .job2 .cur dt:after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.inside-faq .right .job2 .cur dd {
    height: auto
}

.inside-faq .right .job2 .cur dd .nr {
    padding-top: 0
}

@media (max-width: 1024px) {
    .inside-faq {
        padding: 40px 0
    }

    .inside-faq .nr {
        margin-top: 0
    }

    .inside-faq .left {
        float: left;
        position: relative;
        width: 100%;
        padding-bottom: 20px;
        padding-top: 0;
        margin-bottom: 20px;
        top: auto
    }

    .inside-faq .left ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .inside-faq .left ul li {
        min-height: auto;
        width: 100%
    }

    .inside-faq .left ul li:before {
        display: none
    }

    .inside-faq .left ul li a {
        display: block;
        padding: 15px 0;
        font-size: 16px;
        line-height: 20px
    }

    .inside-faq .right {
        width: 100%
    }

    .inside-faq .right .show .info1 {
        display: none
    }

    .inside-faq .right .job2 .listbox {
        margin-bottom: 20px
    }

    .inside-faq .right .job2 dl {
        padding: 0;
        background-color: #fff
    }

    .inside-faq .right .job2 dt {
        font-size: 16px;
        line-height: 24px;
        padding-right: 34px
    }

    .inside-faq .right .job2 dd {
        height: 0;
        font-size: 16px;
        line-height: 24px
    }

    .inside-faq .right .job2 dd .nr {
        padding: 30px
    }

    .inside-faq .right .job2 dd .nr p {
        margin-bottom: 5px
    }

    .inside-faq .right .job2 .cur dt {
        padding: 30px;
        padding-bottom: 0
    }

    .inside-faq .right .job2 .cur dd {
        height: auto
    }

    .inside-faq .right .job2 .cur dd .nr {
        padding-top: 20px
    }
}

.inside-shoppingEnd {
    padding: 17rem 0;
    text-align: center
}

.inside-shoppingEnd .icon svg {
    width: 14rem;
    height: 14rem
}

.inside-shoppingEnd .title-1, .inside-shoppingEnd .title-2 {
    font-weight: normal;
    font-family: var(--font-family-2)
}

.inside-shoppingEnd .title-1 {
    font-size: 8.4rem;
    line-height: 9rem;
    padding-top: 2.5rem
}

.inside-shoppingEnd .title-2 {
    font-size: 3.2rem;
    padding-top: 1rem
}

.inside-shoppingEnd .index-button {
    margin-top: 5rem
}

.inside-page {
    text-align: center;
    padding-top: 8rem
}

.inside-page a {
    vertical-align: top;
    width: 3.5rem;
    height: 3.5rem;
    color: #c4c4c4;
    font-size: 1.8rem;
    text-align: center;
    line-height: 3.1rem;
    margin: 0 1rem;
    display: inline-block;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    border: solid .2rem #b2b2b2;
    font-family: var(--font-family-2)
}

.inside-page a:hover, .inside-page .cur {
    color: #fff;
    border-color: var(--main-color);
    background: var(--main-color)
}

.inside-page .prev, .inside-page .next {
    border: 0;
    line-height: 3.5rem;
    color: #767676;
    font-size: 2.4rem;
    font-weight: 700;
    font-family: "宋体";
    display: inline-block;
    position: relative
}

.inside-page .prev:hover, .inside-page .next:hover {
    background: transparent;
    color: var(--main-color)
}

@media (max-width: 1024px) {
    .inside-page {
        padding: 40px 0 0 0
    }

    .inside-page .prev, .inside-page .next {
        width: auto;
        border-radius: 0
    }

    .inside-page a {
        line-height: 30px;
        width: auto;
        height: auto;
        padding: 0 10px;
        border-radius: 0;
        margin: 0
    }

    .inside-page span {
        display: none
    }
}

.inside-map {
    font-family: var(--font-family-2);
    padding: 6.5rem 0
}

.inside-map li {
    padding: 1.5rem 0
}

.inside-map li h3 {
    font-size: 2.4rem
}

.inside-map li .drop {
    font-size: 2rem;
    padding-top: 1.5rem
}

.inside-map li .drop a {
    display: inline-block;
    padding-right: 1.5rem
}

#searchPopup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    z-index: 9999
}

#searchPopup .searchBox {
    color: #fff;
    padding-right: 0;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
    top: 13rem;
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s
}

#searchPopup .searchBox.fadeIn {
    top: 10rem;
    opacity: 1;
    z-index: 999
}

#searchPopup .searchBox .container {
    width: 100%;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#searchPopup .searchBox input {
    -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    border: 1px #fff solid;
    background: #fff;
    color: #333;
    width: 40%;
    padding: 0 10px;
    font-size: 1.4rem;
    height: 6rem;
    line-height: 5.8rem
}

#searchPopup .searchBox input:focus {
    color: #333
}

#searchPopup .searchBox .btn {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    height: 6rem;
    width: 6rem;
    background: var(--main-color);
    text-align: center;
    display: inline-block
}

#searchPopup .searchBox .btn svg {
    width: 3rem;
    height: 3rem;
    margin: 1.5rem
}

#searchPopup .searchBox .btn .cls-1 {
    fill: #fff
}

#searchPopup .searchBox .btn .cls-2 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px
}

#searchPopup .searchBox .btn:hover {
    background: var(--main-color)
}

#searchPopup .searchBox .close {
    display: none
}

#searchPopup .searchBox2.fadeIn {
    top: 9.5rem
}

.verifyDiv {
    width: 25%;
    vertical-align: middle;
    position: relative
}

.verify {
    height: 5.2rem;
    background-color: #e8e8e8;
    position: relative
}

.verify .drag-btn {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px #e5e5e5 solid;
    width: 5.2rem;
    height: 5.2rem;
    line-height: 5rem;
    background: #fff url(../images/drag-arrow.svg) no-repeat center center;
    background-size: 2rem 2rem;
    z-index: 2;
    cursor: move
}

.verify .suc-drag-btn {
    background: #fff url(../images/drag-success.svg) no-repeat center center;
    background-size: 2rem 2rem
}

.verify .drag-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 5.2rem;
    line-height: 5rem;
    background-color: #e8e8e8;
    color: #666;
    text-align: center
}

.verify .fix-tips, .verify .verify-msg {
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    height: 100%;
    color: #666;
    z-index: 1;
    font-size: 1.6rem;
    line-height: 5.2rem;
    padding-left: 5rem;
    text-align: center
}

.verify .verify-msg {
    padding-left: 0;
    padding-right: 5rem
}

.verify .verify-msg {
    background-color: #7ac23c;
    color: #fff;
    display: none
}

.videoWindow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000000;
    display: none
}

.videoWindow video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132rem;
    height: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    max-height: 70%;
    max-width: 80%
}

.videoWindow i {
    display: block;
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    background: url(../images/onlineClose.png) no-repeat center center;
    background-size: contain;
    cursor: pointer
}

.navPhoneBtn {
    display: inline-block;
    cursor: pointer;
    float: right;
    text-align: right;
    display: none
}

.navPhoneBtn span {
    display: block;
    width: 20px;
    height: 2px;
    margin-bottom: 3px;
    position: relative;
    background: #fff;
    border-radius: 0;
    z-index: 1;
    -webkit-transform-origin: 20px;
    transform-origin: 20px;
    -webkit-animation: fadeIn2 1.8s linear infinite;
    animation: fadeIn2 1.8s linear infinite;
    -webkit-transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1), -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1), -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s, transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s, transform .5s cubic-bezier(.77, .2, .05, 1), -webkit-transform .5s cubic-bezier(.77, .2, .05, 1), -webkit-transform .5s cubic-bezier(.77, .2, .05, 1)
}

.navPhoneBtn span:nth-last-child(2) {
    width: 15px !important;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: width .5s ease;
    transition: width .5s ease
}

.navPhoneBtn span:last-child {
    margin-bottom: 0
}

.navPhoneBtn.close, .navPhoneBtn.closeMember {
    opacity: 1;
    z-index: 10
}

.navPhoneBtn.close span, .navPhoneBtn.closeMember span {
    opacity: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.navPhoneBtn.close span:nth-last-child(3), .navPhoneBtn.closeMember span:nth-last-child(3) {
    opacity: 1;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.navPhoneBtn.close span:nth-last-child(2), .navPhoneBtn.closeMember span:nth-last-child(2) {
    width: 0;
    opacity: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: width .5s;
    transition: width .5s
}

.navPhoneBtn.close span:last-child, .navPhoneBtn.closeMember span:last-child {
    margin-bottom: 0
}

@media (max-width: 1024px) {
    .navPhoneBtn {
        display: block;
        right: 20px !important;
        margin-right: 0;
        position: absolute
    }
}

.common-navM .transparent {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    display: none
}

.common-navM .navMCon {
    background-color: #fff;
    width: 80%;
    min-width: 140px;
    max-width: 440px;
    height: 100%;
    border-left: 1px rgba(0, 0, 0, 0.1) solid;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 2;
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    right: auto;
    right: -100%;
    -webkit-transition: all .5s;
    transition: all .5s
}

.common-navM .navMWrap {
    overflow-y: auto;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 70px
}

.common-navM.open .transparent {
    display: block
}

.common-navM.open .closeBtn {
    display: block
}

.common-navM.open .navMCon {
    right: 0
}

.common-navM .mSearch {
    margin-top: 40px
}

.common-navM .closeBtn {
    opacity: 1 !important;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #666 !important;
    position: absolute;
    z-index: 999;
    right: 20px;
    top: 20px
}

.common-navM .closeBtn:before, .common-navM .closeBtn:after {
    content: "";
    display: block;
    background: #666;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.common-navM .closeBtn:before {
    width: 20px;
    height: 1px
}

.common-navM .closeBtn:after {
    width: 1px;
    height: 20px
}

.common-navM .titleBig {
    text-align: center;
    padding: 10px 0;
    display: none
}

.common-navM .navMWrap > .list em {
    font-style: initial
}

.common-navM .navMWrap > .list .title {
    padding: 10px 0 10px 10px;
    text-indent: 0;
    position: relative
}

.common-navM .navMWrap > .list .title .icon {
    width: 40px;
    height: 40px;
    margin: auto;
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.common-navM .navMWrap > .list .title .icon:before, .common-navM .navMWrap > .list .title .icon:after {
    content: "";
    margin: auto;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.common-navM .navMWrap > .list .title .icon:before {
    width: 10px;
    height: 10px;
    border-top: 1px #aaa solid;
    border-right: 1px #aaa solid
}

.common-navM .navMWrap > .list .title em {
    font-style: initial
}

.common-navM .navMWrap > .list .has .title .icon {
    display: block
}

.common-navM .navMWrap > .list .active > .title .icon:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.common-navM .navMWrap > .list > li > .title {
    font-size: 18px
}

.common-navM .navMWrap > .list > li > .child > .list > li {
    text-indent: 24px;
    font-size: 16px
}

.common-navM .navMWrap > .list > li > .child > .list > li > .child {
    font-size: 14px
}

.common-navM .navMWrap > .list > li > .child > .list > li > .child .title {
    padding-left: 20px
}

.common-navM .navMWrap > .list > li > .child > .list > li > .title {
    padding-left: 20px;
    position: relative
}

.common-navM .navMWrap > .list > li > .child > .list > li > .title:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #999;
    position: absolute;
    top: 26px;
    left: 10px
}

.common-navM .navMWrap > .list .tb {
    width: 20px;
    height: 20px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: absolute;
    top: 7px;
    left: 0
}

.common-navM .child {
    padding: 0 0 20px 0;
    display: none;
    position: relative
}

.common-navM .child a {
    color: #666;
    display: block;
    line-height: 28px;
    padding: 5px 0;
    -webkit-transition: all .5s;
    transition: all .5s;
    position: relative
}

.common-navM .child a:hover {
    color: #000;
    margin-left: 10px
}

.common-navM .mSearch {
    padding: 10px 0;
    text-align: left;
    overflow: hidden;
    border-bottom: #f3f3f3 1px solid;
    position: relative
}

.common-navM .mSearch .btn {
    width: 26px;
    height: 26px;
    font-size: 0;
    padding: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px
}

.common-navM .mSearch .btn .icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    vertical-align: top
}

.common-navM .mSearch input {
    height: 40px;
    line-height: 38px;
    border: 0;
    vertical-align: middle;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: all .4s cubic-bezier(.11393, .8644, .14684, 1);
    transition: all .4s cubic-bezier(.11393, .8644, .14684, 1);
    opacity: 1;
    width: 100%;
    padding: 5px 40px 5px 15px;
    border-radius: 2px;
    font-size: 14px;
    background-color: #fff;
    position: static;
    left: 0;
    right: 0
}

.common-navM .other {
    padding: 10px
}

.common-navM .read {
    padding-top: 10px;
    padding-bottom: 10px
}

.common-navM .read .btn-1 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 5px;
    line-height: 40px;
    height: 40px;
    border-radius: 5px;
    background: -webkit-gradient(linear, left top, right top, from(#bf2d32), to(#a61f24));
    background: linear-gradient(to right, #bf2d32, #a61f24);
    color: #fff;
    text-align: center;
    font-size: 16px;
    position: relative
}

.common-navM .read .btn-1 .icon-1 {
    width: 30px;
    height: 30px;
    margin-left: 5px
}

.common-navM .read .btn-1 .icon-2 {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #fff url(../images/arrow-right-1.png) no-repeat center center;
    background-size: 20px;
    margin-left: 20px
}

.common-navM .list > li > .child > .list {
    padding-top: 20px
}

.common-navM .list > li > .child > .list > li > .title {
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0
}

.common-navM .list > li > .child > .list > li > .title::before {
    top: 18px !important
}

.common-navM .languageBtn {
    padding: 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 0;
    column-gap: 0
}

.common-navM .languageBtn > div {
    width: auto
}

.common-navM .languageBtn .col-2 {
    width: 50%
}

.common-navM .languageBtn .col-3 {
    width: 33.33333333%
}

.common-navM .languageBtn .col-4 {
    width: 25%
}

.common-navM .languageBtn .col-5 {
    width: 20%
}

.common-navM .languageBtn .col-6 {
    width: 16.66666667%
}

.common-navM .languageBtn a {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    text-align: center;
    border: 1px #eee solid;
    margin-right: -1px;
    margin-top: -1px;
    background: #fff
}

.menuFooterM {
    display: none;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px 0 rgba(154, 141, 141, 0.6);
    box-shadow: 0 0 10px 0 rgba(154, 141, 141, 0.6);
    text-align: center;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0
}

.menuFooterM .list {
    font-family: var(--font-family-2);
    -ms-flex-pack: distribute;
    justify-content: space-around;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.menuFooterM .list.active .icon {
    background-color: var(--main-color)
}

.menuFooterM .list .icon {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    margin: auto
}

.menuFooterM .list .icon svg {
    fill: #9d9d9d;
    width: 20px;
    height: 20px;
    margin: 5px
}

.menuFooterM .list .title {
    line-height: 20px
}

.menuFooterM .list .active .title {
    color: var(--main-color)
}

.menuFooterM .list .active .icon {
    background: var(--main-color)
}

.menuFooterM .list .active .icon svg {
    fill: #fff
}

.menuFooterM .list li:nth-child(2) {
    padding-left: 30px
}

@media screen and (max-width: 1024px) {
    .menuFooterM {
        display: block
    }
}

.inside-joinSearch svg {
    fill: #999;
    width: 2.2rem;
    height: 2.2rem;
}

.inside-about .listbox .small-img .swiper-slide .videobtn {
    display: none;
}

.inside-about .listbox .small-img .swiper-slide:hover .videobtn {
    display: block;
}

.inside-about-2 {
    position: relative;
}

.inside-about-2 .index-title {
    color: #fff;
    top: 6rem;
    left: 0;
    width: 100%;
    z-index: 11;
    text-align: center;
    position: absolute;
}

.inside-contact-2 {
    padding: 4rem 0;
}

.inside-contact-2 .container {
    display: flex;
}

.inside-contact-2 .left {
    width: 40%;
    padding-right: 2rem;
}

.inside-contact-2 .left .text .t-1 {
    font-size: 3.6rem;
    margin-bottom: 2rem;
    font-weight: bold;
}

.inside-contact-2 .left .text .t-2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.inside-contact-2 .left .text .t-2 svg {
    margin-right: 5px;
}

.inside-contact-2 .left .text .t-b {
    font-size: 2.4rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.inside-contact-2 .right {
    width: 60%;
}

.banner .text-2 {
    top: 13%;
    text-align: center;
    color: #fff;
}

.banner .text-2 .t-1 {
    font-size: 9.8rem;
    line-height: 10rem;
}

.inside-locations li .text {
    min-height: 34rem;
}