@import url(common.css);

::-webkit-scrollbar {
    width: .0208rem;
    height: .0521rem;
}

::-webkit-scrollbar-thumb {
    background: #555;
}

::-webkit-scrollbar-track {
    background: #ddd;
}

p {
    font-size: 0.0938rem;
    opacity: 0.8;
}

a {
    font-size: 0.0938rem;
}

h1 {
    font-size: .2865rem;
    /*55px*/
}

h2 {
    font-size: .2604rem;
    /*50px*/

}

h3 {
    font-size: .1979rem;
    /*40px*/

}

h4 {
    font-size: .1563rem;
    /*30px*/

}

h5 {
    font-size: .1146rem;
    /*22px*/

}

h6 {
    font-size: .1042rem;
    /*20px*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    line-height: 1;
}

.br5 {
    border-radius: .026rem;
}

.br10 {
    border-radius: .0521rem;
}

.br15 {
    border-radius: .0781rem;
}

.br20 {
    border-radius: .1042rem;
}

.br30 {
    border-radius: .1563rem;
}

.br40 {
    border-radius: .2083rem;
}

.br50 {
    border-radius: .2604rem;
}

.con {
    width: 100%;
    padding: 0 .8333rem;
}

.big-con {
    width: 100%;
    padding: 0 .5rem;
}

.small-con {
    width: 100%;
    padding: 0 1rem;
}

.fy-btn {
    background-color: #fff;
    width: .2604rem;
    height: .2604rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    color: #000;
    font-weight: bold;
}

.fy-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}

/*header*/
header {
    padding: 0;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
    position: absolute;
}

.header-con {
    padding-left: .8333rem;
    padding-right: .8333rem;
    border-bottom: 1px solid transparent;
}

.logo img {
    width: .4323rem;
    height: 0.2604rem;
}

.header-right {
    flex: 1;
}

.header-menu {
    margin-right: .6rem;
    margin-left: 0.9rem;
}

.header-menu>span {
    display: none;
}

nav>ul>li>a {
    color: #000;
    font-size: .0833rem;
    line-height: 1;
    padding: .1563rem 0;
    display: block;
    position: relative;
    font-weight: 500;
    text-transform: uppercase;
}

nav>ul>li>a::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    border-radius: 4px;
    background-color: #000;
    transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
}

nav>ul>li>a.on,
nav>ul>li>a:hover {
    color: var(--main-color);
}

nav>ul>li>a.on::after,
nav>ul>li>a:hover::after {
    width: 100%;
    background-color: var(--main-color);
}

header.on {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    position: fixed;
}
header.on .header-con{
    border-bottom: 1px solid #ccc;
}

.header-chat-btn {
    background-color: var(--main-color);
    color: #fff;
    font-weight: 500;
    font-size: .0729rem;
    padding: .0833rem .1458rem;
    margin-right: .1563rem;
}

.header-chat-btn:hover {
    color: #fff;
    transform: translateX(-0.0521rem);
}

.header-search-btn {
    margin-right: .1563rem;
}

.header-cart-btn {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding-right: .1406rem;
    margin-right: .1354rem;
}

.header-search-btn span,
.header-cart-btn span {
    font-size: .1146rem;
    line-height: 1;
    padding-top: .026rem;
    padding-bottom: 0.026rem;
    display: block;
}

.header-search-btn span:hover,
.header-search-btn span:hover {
    color: var(--main-color);
}

.header-search-form {
    top: 0.4rem;
    right: .8333rem;
    z-index: 10;
}

.header-search-box {
    background-color: #fff;
    padding: 0;
    width: 1.6667rem;
}

.header-search-box input[type=text] {
    font-size: 0.0938rem;
    width: 100%;
    padding: 0 .1563rem;
    display: block;
}

.header-search-box input[type=text]::placeholder {
    color: #666;
    font-family: 'HarmonyOS Sans';
}

.search-btn {
    background-color: var(--main-color);
    border: none;
    outline: none;
    padding: 0.0521rem .1302rem;
}

.search-btn span {
    font-size: .1563rem;
    color: #fff;
    line-height: 1;
}

.header-btn {
    border: 1px solid transparent;
    background-color: transparent;
}

.header-lang {
    padding: 0 .1094rem;
    margin-right: .0625rem;
    height: .1719rem;
}

.header-lang span {
    font-size: .0833rem;
    color: #000;
    line-height: 1;
    margin-right: .0625rem;

}

.header-lang i {
    font-size: .0833rem;
    color: #000;
    line-height: 1;
}



.header-btn:hover {
    background-color: var(--main-color);
}

.header-btn:hover span,
.header-btn:hover i {
    color: #fff;
}

.header-lang-list {
    background: #fff;
    width: 100%;
}

.header-lang-i {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: .0781rem 0;
    color: #333;
    cursor: pointer;
}

.header-lang-i span {
    color: #333;
    font-size: .0885rem;
    display: block;
    line-height: 1;
    padding-left: .125rem;
}

.header-lang-i.on span,
.header-lang-i:hover span {
    color: var(--main-color);
}


/*Index*/
.index-ba-con {
    width: 3.5rem;
}

.index-ba-con h1 {
    line-height: .3281rem;
}

.index-ba-con p {
    opacity: 0.9;
    margin: .1875rem 0 .3281rem;
}

.index-ba-btn {
    margin-right: .0781rem;
    padding: .1042rem .1875rem;
    font-size: .0885rem;
    border: 1px solid transparent;
    color: #fff;
    background-color: var(--main-color);
}

.index-ba-btn:hover {
    transform: translateY(-0.05rem);
    color: #fff;
}

.index-ba-fa-btn {
    background-color: transparent;
    color: #000;
    border: 1px solid rgba(0, 0, 0, .5);
}

.index-ba-fa-btn:hover {
    background-color: var(--main-color);
    color: #fff;
    border: 1px solid var(--main-color);
}

.index-ba .index-ba-pagination {
    bottom: .1042rem;
    left: 0;
    z-index: 1;
}

.index-ba .index-ba-pagination .swiper-pagination-bullet {
    background-color: #eee;
    width: .05rem;
    height: .05rem;
    display: block;
    opacity: 1;
    margin: 0 .040rem;
    border-radius: 50%;
}

.index-ba .index-ba-pagination .swiper-pagination-bullet-active {
    background-color: var(--main-color);
    opacity: 1;
    width: 0.06rem;
    height: 0.06rem;
}

.index-box {
    padding: .5208rem 0;
}

.index-num-item h2 {
    margin-bottom: .1042rem;
}

.index-num-item p {
    text-transform: uppercase;
    font-size: .0781rem;
    line-height: 1;
}

.index-tit span {
    display: flex;
    align-items: center;
}

.index-tit span::before {
    content: '';
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--main-color);
    width: .0313rem;
    height: .0313rem;
}

.index-tit span em {
    font-size: .0781rem;
    line-height: 1;
    margin-left: .026rem;
    font-weight: 550;
    text-transform: uppercase;
}

.index-tit h2 {
    margin: 0.1563rem 0 .125rem;
}

.index-tit p {
    width: 60%;
    color: #0D0D0D;
    opacity: 0.7;
    text-align: center;
}

.index-cate-con {
    margin-top: .5313rem;
    padding-left: .8333rem;
    padding-right: .8333rem;
    width: 100%;
    overflow: hidden;
}

.index-cate-list {
    width: 100%;
}

.index-cate-list .swiper-slide {
    transition: all ease-in-out 0.3s !important;
}

.index-cate-list .swiper-slide-active {
    transition: all ease-in-out 0.3s !important;
    width: 2.6615rem !important;
    border-radius: .7813rem .7813rem .7813rem .2604rem;
}

.index-cate-item:hover {
    width: 2.6615rem !important;
    border-radius: .7813rem .7813rem .7813rem .2604rem;
}

.index-cate-pic {
    padding-bottom: 3.5052rem;
}

.index-cate-item .a-box {
    background-color: rgba(0, 0, 0, .2);
}

.index-cate-info {
    padding-bottom: .1719rem;
    padding-left: .1979rem;
    margin-bottom: -0.4688rem;
    transition: all ease-in-out 0.3s;
}

.index-cate-info h3 {
    color: #fff;
    width: 60%;
    line-height: .2292rem;
}

.index-cate-info p {
    color: #fff;
    font-size: .0729rem;
    line-height: 1;
    opacity: 1;
    margin: .1198rem 0 .151rem;
}

.index-cate-btn {
    background-color: #fff;
    padding: .1042rem .1406rem;
    color: #000;
}

.index-cate-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}

.index-cate-btn span {
    font-size: .0729rem;
    margin-right: .1042rem;
    line-height: 1;
}

.index-cate-btn i {
    font-size: .0729rem;
    line-height: 1;
}

.index-cate-item:hover .index-cate-info,
.index-cate-list .swiper-slide-active .index-cate-info {
    margin-bottom: 0;
}

.index-ab {
    background: #FFFFFF;
    border-radius: 1.5469rem 1.9323rem 1.1615rem 1.5469rem;
}

.index-ab-pic {
    padding-bottom: 3.8125rem;
}

.index-ab-con {
    width: 2.9271rem;
}

.index-ab-con h2 {
    line-height: .2865rem;
    font-size: .2083rem;
}

.index-ab-con p {
    text-align: left;
    width: 100%;
}

.index-btn {
    background-color: var(--main-color);
    color: #fff;
    font-weight: bold;
    padding: .1042rem .2396rem;
    text-transform: capitalize;
    margin-top: .3385rem;
}

.index-btn:hover {
    color: #fff;
    transform: translateY(-0.05rem);
}

.index-fa-con {
    margin-top: .4844rem;
}

.index-fa-con-l {
    width: 5.6406rem;
    margin-right: .4479rem;
    border-radius: 1.0417rem 1.0417rem 1.0417rem .5208rem;
    padding-bottom: 3.5573rem;
}

.index-fa-con-r h3 {
    font-weight: 500;
    line-height: .2448rem;
}

.index-fa-con-r p {
    margin: .25rem 0 1rem;
}

.index-fa-item {
    width: 1rem;
    margin-right: .1198rem;
}

.index-show {
    background-color: var(--main-color-gray);
}

.index-show-tit {
    width: 4rem;
    margin-right: 1.1rem;
}

.index-show-tit h2 {
    line-height: .3281rem;
}

.index-show-tit p {
    text-align: left;
    width: 100%;
}

.index-show-tit a {
    margin-top: 0;
}

.index-show-con {
    margin-top: .4323rem;
    gap: .1927rem;
}

.index-show-item {
    padding-bottom: 1.8rem;
}

.index-why-con {
    margin-top: .5rem;
}

.index-why-swiper {
    margin: 0 auto;
    width: 5.7rem;

}

.index-why-swiper .swiper-wrapper {
    align-items: center;
}

.index-why-swiper .swiper-slide {
    transform: scale(0.7, 0.7);
    transition: all ease-in 0.4s;
}

.index-why-pic {
    padding-bottom: 2.5729rem;
}

.index-why-item .a-box {
    background-color: rgba(0, 0, 0, .15);
}

.index-why-txt h5 {
    color: #fff;
    padding-bottom: .2604rem;
}

.index-why-swiper .swiper-slide-active {
    transform: scale(1, 1);
}

.index-why-swiper .swiper-slide-active .index-why-item {
    border-radius: .4rem .6rem .6rem .6rem;
}

.index-why-line {
    background-color: rgba(0, 0, 0, .2);
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.index-why-fy .fy-btn {
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: .4167rem;
    height: .4167rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
}

.index-why-fy .fy-btn span {
    font-size: .0833rem;
    line-height: 1;
    opacity: 1;
    font-weight: 400;
}

.index-why-fy .fy-btn:hover {
    background-color: var(--main-color);
    color: #fff;
    border: 1px solid var(--main-color);
}

.index-why-prev {
    left: 1.3rem;
}

.index-why-next {
    right: 1.3rem;
}

.index-market-bg {
    padding-bottom: 3.8021rem;
    border-radius: .4167rem;
}

.index-market-tit {
    width: 2.7604rem;
}

.index-market-tit p {
    text-align: left;
    width: 100%;
}

.index-market-bt {
    margin-top: -0.5rem;
}

.index-market-bt-con {
    gap: .349rem;
}

.index-market-bt-item {
    background-color: #fff;
    padding: .2917rem 0;
}

.index-market-bt-item h3 {
    color: var(--main-color);
    margin-bottom: .0521rem;
}

.index-market-bt-item p {
    font-size: .0729rem;
    text-transform: capitalize;
}

.index-ce-con {
    margin-top: .5rem;
}

.index-ce-item {
    padding-bottom: .3646rem;
    width: 6%;
    background-position: center center;
    background-size: contain;
    background-color: #fff;
}


/*footer*/
.ready {
    margin-top: .5208rem;
    z-index: 1;
}

.ready-con {
    padding-top: .4688rem;
}

.ready-con-box {
    background-color: var(--main-color);
    border-radius: .5208rem .9375rem .9375rem .625rem;
    padding: .3958rem .5833rem .3646rem;
}

.ready-con-txt {
    width: 3.0417rem;
}

.ready-con-txt h1 {
    color: #fff;
    font-size: .25rem;
    line-height: .3281rem;
    margin-bottom: .0885rem;
}

.ready-con-txt p {
    color: #fff;
    font-size: 0.0938rem;
    margin-bottom: .2292rem;
}

.ready-btn a {
    margin-right: .1042rem;
    border: 1px solid #fff;
    font-weight: bold;
    font-size: .0885rem;
    padding: .1042rem .2083rem;
    color: #fff;
    background-color: transparent;
}

.ready-btn a::after {
    content: '→';
    opacity: 0;
    margin-left: .0521rem;
    color: var(--main-color);
    font-size: .0885rem;
    transition: all ease-in 0.4s;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: .1563rem;
    transform: translateY(-50%);
}

.ready-btn a:hover {
    background-color: #fff;
    color: var(--main-color);
    transform: translateY(-0.05rem);
}

.ready-btn a:hover span {
    margin-right: .1042rem;
}

.ready-btn a:hover::after {
    opacity: 1;
}

.ready-con-zi {
    opacity: 0.1;
    width: 3.151rem;
    bottom: -0.151rem;
    right: 0.2rem;
}

.ready-con-kf {
    width: 1.5104rem;
    bottom: -0.5208rem;
    right: 1.0677rem;
}


footer {
    background-color: var(--main-color-bg);
    padding-top: 1.3rem;
    margin-top: -0.8542rem;
    z-index: 0;
}

.footer-top {
    padding-bottom: .2135rem;
}

.footer-top-l {
    width: 2.0833rem;
}

.footer-top-l img {
    width: .7917rem;
}

.footer-top-txt p {
    font-size: .0833rem;
    margin-top: .1927rem;
}

.footer-con-l-item {
    margin-right: .5208rem;
}

.footer-con-l-item h5,
.footer-top-r-ca h5 {
    margin-bottom: .1771rem;
    font-weight: 600;
    font-size: .1146rem;
    text-transform: uppercase;
    line-height: 1;
}

.footer-con-l-item a {
    font-size: .0938rem;
    opacity: 0.78;
    margin-bottom: .0781rem;
    line-height: 1;
}

.footer-con-l-item a:hover {
    opacity: 1;
}

.footer-top-r-ca p a,
.footer-top-r-ca p {
    font-weight: 600;
    opacity: 1;
    line-height: 1.8;
}

.footer-top-r-qr {
    margin-top: 0.2604rem;
}

.footer-top-r-qr img {
    width: .4948rem;
    height: .4948rem;
    margin-right: .0677rem;
}

.footer-top-r-qr p {
    width: .7031rem;
    font-size: .0833rem;
    opacity: 0.7;
    font-weight: 500;
}

.footer-bt {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: .1563rem 0;
}

.footer-top-sc a {
    width: .1823rem;
    height: .1823rem;
    margin-right: .0885rem;
}

.footer-top-sc a span {
    font-size: .0938rem;

}

.footer-top-sc a:hover {
    background-color: var(--main-color);
    transform: translateY(-0.05rem);

}

.footer-top-sc a:hover span {
    color: #fff;
}

.footer-bt p {
    font-size: .0729rem;
}

.pf-nav {
    bottom: 1.3rem;
    right: .0833rem;
    z-index: 999;
    background-color: #fff;
    padding: .26rem .0521rem 0;
}

.pf-nav-tit {
    height: 0.5rem;
    width: .2604rem;
}

.pf-nav-title {
    background-color: var(--main-color);
    color: #fff;
    font-size: .0833rem;
    padding: .0833rem .1042rem;
    transform: rotate(90deg);
    width: .7083rem;
    right: -.224rem;
}


.pf-nav-ico span {
    color: #000;
    font-size: .1302rem;
    line-height: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: .0781rem;
    margin-top: .0781rem;
}

.pf-nav-txt {
    background-color: #fff;
    padding: 0.0781rem;
    right: 0.35rem;
    width: 1.2rem;
    z-index: 2;
}

.pf-nav-txt p {
    font-size: 0.0833rem;
    text-align: center;
}


/*about*/
.ab-top-header-txt {
    width: 3.4688rem;
}

.ab-top-header-txt h1 {
    line-height: .3125rem;
    color: #fff;
}

.ab-top-header-txt p {
    margin: .2135rem 0 .276rem;
    color: #fff;
}

.ab-top-header-txt .v-btn {
    border: 1px solid #fff;
    color: #fff;
    padding: .0938rem .1406rem;
}

.ab-top-header-txt .v-btn:hover {
    background-color: #fff;
    color: var(--main-color);
}

.ab-top-header-txt .v-btn i {
    margin-right: .0885rem;
    width: .2083rem;
    height: .2083rem;
    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, .3);
    font-size: .1042rem;
}

.ab-top-header-txt .v-btn:hover i {
    background-color: rgba(0, 0, 0, .3);
    line-height: 1;
}

.ab-top-header-txt .v-btn span {
    font-size: .0938rem;
    line-height: 1;
}

.ab1-con h2 {
    width: 50%;
    margin-bottom: .1875rem;
    line-height: 1.3;
}

.ab1-con p {
    margin-bottom: .125rem;
    color: #313131;
}

.ab1-bt-con {
    border-radius: 1.2969rem;
}

.ab1-bt-con-pic {
    padding-bottom: 2.9531rem;
}

.ab1-bt-con-txt {
    width: 2.2396rem;
    margin-left: .8958rem;
}

.ab1-bt-con-txt h3 {
    line-height: 1.3;
    font-size: .1458rem;
}

.ab1-bt-con-txt a {
    padding: .1rem .2396rem;
    background-color: var(--main-color);
    color: #fff;
    margin-top: .2604rem;
}

.ab1-bt-con-txt a:hover {
    transform: translateY(-0.05rem);
    color: #fff;
}

.ab1-bt-con-txt a i {
    font-size: .2604rem;
    margin-right: .1042rem;
    line-height: 1;
}

.ab1-bt-con-txt a span {
    font-size: 0.1146rem;
    line-height: 1;
}

.ab1-bt-pic {
    width: 1.2292rem;
    height: 1.2292rem;
    padding-bottom: 0;
    border: .0208rem solid #fff;
    bottom: -0.3229rem;
    right: .2865rem;
}

.ab1-num {
    margin-top: .6667rem;
}

.ab1-num .index-num-item h2 {
    color: var(--main-color);
}

.ab2 {
    background-color: var(--main-color-gray);
}

.ab2-con {
    margin-top: .4271rem;
}

.ab2-item {
    width: 20.68%;
    transition: all ease 0.4s;
}

.ab2-item.on {
    width: 56.81%;
}

.ab2-item .a-box {
    background-color: rgba(0, 0, 0, .2);
}

.ab2-item-pic {
    padding-bottom: 3.0104rem;
}

.ab2-item-txt {
    padding-bottom: .2292rem;
    padding-left: .224rem;
    transition: all ease 0.4s;
    margin-bottom: -0.46rem;
}

.ab2-item.on .ab2-item-txt {
    margin-bottom: 0;
}

.ab2-item-txt h5 {
    color: #fff;
    margin-bottom: .0729rem;
    line-height: 1.3;
}

.ab2-item-txt p {
    color: #fff;
    font-size: .0833rem;
}

.ab3-con {
    margin-top: .599rem;
}

.ab3-swiper {
    width: 5.7292rem;
}

.ab3-year {
    background-color: var(--main-color);
    color: #fff;
    width: .5208rem;
    height: .5208rem;
    margin-right: .1458rem;
}

.ab3-txt {
    background-color: #fff;
    padding: .1875rem;
    flex: 1;
}

.ab3-txt h6 {
    margin-bottom: .1042rem;
    line-height: 1.3;
}

.ab3-txt p {
    font-size: .0833rem;
}

.ab3-pic {
    padding-bottom: 1.2292rem;
    width: 100%;
    margin-top: .1354rem;
}

.ab3-line {
    border-top: 1px dashed rgba(0, 0, 0, .3);
    width: 100%;
    height: 1px;
    left: 0;
    top: .2604rem;
}

.ab4-con {
    background-image: url(../images/ab4-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: .4792rem .4271rem;
}

.ab4-con-l {
    width: 3.1927rem;
    padding-top: .2083rem;
}

.ab4-tit span em {
    color: #fff;
}

.ab4-tit h2 {
    color: #FFF;
}

.ab4-tit p {
    width: 90%;
    color: #fff;
    text-align: left;
}

.ab4-con-r {
    width: 3.6979rem;
}

.ab4-con-r-item {
    color: #fff;
    margin-bottom: .0521rem;
    background-color: rgba(255, 255, 255, .1);
    padding: .2292rem;
}

.ab4-con-r-item h5 {
    color: #fff;
}

.ab4-con-r-item p {
    font-size: .0833rem;
    margin-top: .1563rem;
    color: #fff;
    display: none;
}

.ab4-con-r-item:last-child {
    margin-bottom: 0;
}

.ab4-con-r-item.on p {
    display: block;
}

.ab5 {
    margin-top: .5208rem;
    background-color: var(--main-color-gray);
}

.ab5-con {
    margin-top: .4688rem;
    gap: .4167rem;
}

.ab5-item {
    padding-bottom: 1.9063rem;
}

.ab6 {
    padding-bottom: 0;
}

.ab6-tit {
    width: 3.5313rem;
}

.ab6-tit h2 {
    line-height: 1.3;
}

.ab6-top p {
    width: 3.6458rem;
}

.ab6-swiper {
    margin-top: .4688rem;
}

.ab6-item {
    padding-bottom: 2.8177rem;
}

/*factory*/
.fa-top-header-txt h1 {
    color: #fff;
    margin-bottom: .1198rem;
}

.fa-top-header-txt p {
    color: #fff;
    width: 3.6458rem;
}

.fa1-con-l {
    width: 3.4rem;
}

.fa1-con-l h2 {
    margin-bottom: .2083rem;
    line-height: 1.3;
    font-size: .2344rem;
}

.fa1-con-r {
    width: 3rem;
}

.fa1-con-r .index-num-item {
    width: 48.5%;
    margin-bottom: 0.4167rem;
}

.fa1-con-r .index-num-item h2 {
    color: var(--main-color);
}

.fa-bg {
    background: #F7F7F7;
    border-radius: .4167rem;
}
.fa2-con{
    margin-top: .3906rem;
}
.fa2-con-l{
    width: 3.2969rem;
    background-color: #fff;
    padding: .5052rem .3385rem;
    margin-right: -0.1563rem;
    z-index: 1;
}
.fa2-item{
    margin-bottom: .2292rem;
}
.fa2-item:last-child{
    margin-bottom: 0;
}
.fa2-item h6{ 
    margin-bottom: .0521rem;
}
.fa2-con-r{
    z-index: 0;
}
.fa2-con-r-pic{ 
    padding-bottom: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
}

.fa3-tit h2{
    width: 60%;
    line-height: 1.3;
}
.fa3-con{
    margin-top: 0.3646rem;
    gap: .1406rem;
}
.fa3-item-pic{
    padding-bottom: 1.7083rem;
}
.fa4-con-l{
    width: 3.2rem;
}
.fa4-tit h2{
    line-height: 1.3;
}
.fa4-tit p{
    text-align: left;
    width: 100%;
}
.fa4-con-r{
    width: 4.3542rem;
}
.fa4-con-r-pic{ 
    padding-bottom: 2.7188rem;
}
.fa4-bt{
    margin-top: .4271rem;
    gap: .1042rem;
}

.fa4-bt-item-pic{
    padding-bottom: 1.4583rem;
}
.fa5-tit p{
    width: 50%;
}
.fa5-con{
    margin-top: .4375rem;
}
.fa5-item{
    width: 32%;
}
.fa5-item-pic{
    padding-bottom:1.7038rem;
}
.fa5-item h6{
    margin-top: .1563rem;
    font-weight: 500;
}
.fa6-con-l{
    width: 4.1667rem;
}
.fa6-tit h2{
    line-height: 1.3;
    font-size: .2344rem;
}
.fa6-tit p{
    width: 100%;
    text-align: left;
}
.fa6-bt{
    margin-top: .4375rem;
    gap: .0521rem;
}
.fa6-con-r{
    width: 3.5208rem;
}

.fa7-con-l{
    width: 3.5208rem;
}
.fa7-con-r{
    width: 4.1667rem;
}
.fa7-tit h2,.fa8-tit h2{
    font-size: .2344rem;
    line-height: 1.3;
}
.fa7-tit p{
    width: 100%;
    text-align: left;
}
.fa8-tit{
    width: 2.8646rem;
}

.fa8-con .fa8-txt{
    width: 4rem;
}
.fa8-con .fa8-txt p{
    margin-bottom: .2rem;
}
.fa8-bt{
    margin-top: .4167rem;
}
.fa8-bt-item{
    width: 32%;
    background-color: #fff;
}
.fa8-bt-item-pic{ 
    padding-bottom: 2.6rem;
}
.fa8-bt-item h6{
    padding: .1875rem 0;
}
.fa9{
    margin-bottom: 0.2rem;
}
.fa9-tit h2{
    font-size: .1823rem;
    width: 3.5156rem;
    line-height: 1.5;
}
.fa9-swiper{
    margin-top: .4167rem;
    width: 100%;
    height: 2.2rem;
}
.fa9-swiper .swiper-wrapper{
    align-items: flex-end;
}

.fa9-swiper .swiper-slide .fa9-item-pic{
    padding-bottom: 3rem;
    background-position: 1% 0;
    background-size: 130%;
}

.fa9-fy{
    z-index: 1;
}
.fa9-fy .fy-btn{
    background-color: var(--main-color-gray);
}
.fa9-fy .fy-btn:hover{
    background-color: var(--main-color);
    color: #fff;
}
.fa9-fy .fa9-prev{
    margin-right: .0521rem;
}
.fa9-item-ico{
    background-color: var(--main-color);
    color: #fff;
    width: .2708rem;
    height: .2708rem;
    font-size: .1042rem;
    bottom: .1563rem;
    left: .1563rem;
    opacity: 0;
}
.fa9-item:hover .fa9-item-ico{
    opacity: 1;
}


/*blog*/
.nav-bar {
    padding: .2rem 0 .2552rem;
    margin-top: .4167rem;
}

.nav-bar-con a,
.nav-bar-con em {
    font-size: .0938rem;
    margin-right: 0.05rem;
    line-height: 1;
    text-transform: uppercase;
}

.nav-bar-con a:hover {
    color: var(--main-color);
}

.news {
    margin: 1rem 0 .625rem;
}

.news-con {

    gap: .2083rem;
}
.news-con-tit{
    margin-bottom: .5rem;
}
.news-item {
    background-color: var(--main-color-gray);
}
.news-item .a-box i{
    background-color: var(--main-color);
    color: #fff;
    width: .2604rem;
    height: .2604rem;
    font-size: .1042rem;
    opacity: 0;
    transform: translateY(100%);
    transition: all ease-in-out 0.3s;
}
.news-item:hover .a-box i{
    transform: translateX(0);
    opacity: 1;
}

.news-item-pic {
    padding-bottom: 1.9271rem;
}

.news-item-txt {
    padding: .1042rem .1563rem;
}

.news-item-txt em {
    opacity: 0.78;
    font-size: .0833rem;
    margin-bottom: .06rem;
}

.news-item-txt h6 {
    font-size: .1042rem;
    margin-bottom: .08rem;
}

.news-item-txt p {
    -webkit-line-clamp: 2;
}

.news-item-ico {
    width: .2604rem;
    height: .2604rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: .1042rem;
}

.news-item-ico span {
    font-size: .1042rem;
}

.news-item:hover {
    transform: translateY(-0.0521rem);
}

.news-item:hover .news-item-txt h6 {
    color: var(--main-color);
}

.news-item:hover .news-item-ico {
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.news-item:hover .news-item-ico span {
    color: #fff;
}

.show-top {
    padding-bottom: 3.2188rem;
}

.show-top-con {
    padding-bottom: .6927rem;
}

.show-top-con-txt {
    margin-bottom: 0.2083rem;
}

.show-top-con-txt a,
.show-top-con-txt em {
    color: #fff;
    opacity: 0.7;
    margin-right: .026rem;
}

.show-top-con-txt a:hover {
    opacity: 1;
}

.show-top-con h1 {
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}

.news-show-top {
    background-color: #ccc;
    padding: 0.6rem 0 .3125rem;
}

.news-show-top .show-top-con {
    padding-bottom: 0;
}

.news-show-top .show-top-con-txt a,
.news-show-top .show-top-con-txt em {
    color: #000;
}

.news-show-top .show-top-con h1 {
    color: #000;
    font-size: .2083rem;
}

.news-show-con {
    padding: 0.4688rem 0;
}

.news-show-con-l {
    width: 70%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: .2604rem;
}

.news-show-con-l-con p {
    margin-bottom: .1042rem;
    opacity: 1;
}

.news-show-con-l-con img {
    display: block;
    width: auto;
    margin: 0 auto .1042rem;
}

.news-show-con-r {
    width: 25%;
    padding: .1823rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.news-show-con-r-list {
    margin-top: .2604rem;
}

.news-show-con-r-list .index-show-item {
    margin-bottom: .1563rem;
}

.news-show-con-r-list .index-show-pic {
    padding-bottom: 53%;
    margin-bottom: .1042rem;
}

.news-show-con-r-list .index-show-item:hover p {
    color: var(--main-color);
}

/*pagination*/
.nodata {
    min-height: 60vh;
    margin: 0 auto;
}

.nodata-text h4 {
    opacity: 0.78;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
}

.pagination li a,
.pagination li span {
    width: .2344rem;
    height: .2344rem;
    margin: 0 .0417rem;
    background-color: var(--main-color-gray);
    color: #000;
    display: flex;
    font-size: .0833rem;
    border-radius: .026rem;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.pagination li a:hover,
.pagination li span:hover,
.pagination li.active a,
.pagination li.active span {
    background-color: var(--main-color);
    color: #fff;
}

.pagination li.disabled a,
.pagination li.disabled span {
    background-color: #ccc;
    cursor: no-drop;
    color: #666;
}

.pagination li.disabled:hover a,
.pagination li.disabled:hover span {
    color: #666;
    background-color: #ccc;
}


/*contact*/
.contact-top-con {
    margin-right: .7969rem;
}
.se-top-con {
    width: 2.6042rem;
    margin-bottom: .5208rem;
}

.se-top-con h1 {
    color: #fff;
    margin-bottom: .2813rem;
    font-size: .375rem;
    line-height: 1;
    font-weight: 700;
    text-align: right;
}

.se-top-con p {
    color: #fff;
    text-align: right;
}



.ca1 {
    padding: .5521rem 0;
}

.ca1-item {
    width: 2.2188rem;
}

.ca1-ico {
    background-color: var(--main-color);
    width: .6198rem;
    height: .6198rem;
}

.ca1-ico span {
    color: #fff;
    font-size: .3125rem;
}

.ca1-txt h4 {
    font-weight: bold;
    font-size: .1354rem;
    margin-top: .1979rem;
    line-height: 1;
    margin-bottom: .1042rem;
}

.ca1-txt p {
    font-size: .1042rem;
}

.ca2 {
    background-color: var(--main-color-bg);
    padding: .625rem 0;
}
.ca2-con{
    margin-top: .4167rem;
}
.ca2-tit h3 {
    font-weight: 600;
    font-size: .2083rem;
}

.ca2-form .ca2-se {
    width: 32%;
    margin-bottom: .1719rem;
}

.ca2-form .ca2-se:nth-child(4) {
    width: 100%;
}

.ca2-form .index-faq-btn {
    width: 1.2813rem;
}


.index-faq-se input,
.index-faq-se textarea {
    background-color: #fff;
    padding: .1563rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .0521rem;
    margin-bottom: .0729rem;
    width: 100%;
    font-size: .0833rem;
}

.index-faq-se input:focus,
.index-faq-se textarea:focus {
    border: 1px solid var(--main-color);
}

.index-faq-se textarea {
    height: 1.0938rem;
}

.index-faq-se span {
    opacity: 0.5;
    font-size: .0833rem;
    left: .1563rem;
    top: .1563rem;
}

.index-faq-se span.on {
    font-size: .0729rem;
    top: .0521rem;
    left: .0521rem;
}

.index-faq-btn {
    background-color: var(--main-color);
    color: #fff;
    font-size: .1042rem;
    padding: .1563rem 0;
    margin-top: .1042rem;
}

.index-faq-btn:hover {
    transform: translateY(-0.0521rem);
}


/*products*/
.product-top {
    margin-top: .4167rem;
    padding: .3385rem 0;
    background-color: var(--main-color-gray);
}

.product-top-bar {
    margin-bottom: .1406rem;
}

.product-top-bar a {
    font-size: 14px;
    color: #2E2E2E;
    opacity: 0.7;
    text-transform: uppercase;
}

.product-top-bar a:hover {
    color: var(--main-color);
}

.product-top-bar em {
    margin: 0 .0313rem;
    font-size: .0833rem;
    color: #2E2E2E;
    opacity: 0.7;
}

.product-top-tit h1 {
    font-weight: 600;
    color: #2E2E2E;
    line-height: 1;
    font-size: .2344rem;
}


.product-list {
    padding-top: .5208rem;
    padding-bottom: .625rem;
}

.product-list-side {
    background-color: #fff;
    width: 1.7552rem;
}


.product-list-side-item {
    margin-bottom: .2135rem;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: .1042rem;
}


.product-list-side-item-top h6 {
    font-weight: bold;
}

.product-list-side-item-top span {
    font-size: .0938rem;
}

.product-list-side-item-top:hover h5,
.product-list-side-item-top:hover span {
    color: var(--main-color);
}

.product-list-side-item-con {
    display: none;
    margin-top: .1979rem;
}

.product-list-side-item-con a {
    margin-bottom: .1042rem;
    opacity: 0.9;
}

.product-list-side-item-con a span {
    font-size: .0938rem;
}

.product-list-side-item-con a.on span,
.product-list-side-item-con a:hover span {
    color: var(--main-color);
}

.product-list-side-item.on .product-list-side-item-con {
    display: flex;
}

.product-list-list {
    flex: 1;
    margin-left: .3646rem;
}

.product-list-list-con {
    gap: .1146rem;
}

.product-list-list-item {
    background-color: var(--main-color-gray);
}

.product-list-list-item:hover {
    transform: translateY(-0.026rem);
    box-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.05);
}

.product-list-list-item .pic {
    padding-bottom: 100%;
    background-size: 120% 120%;
}

.product-list-list-item-txt {
    padding: .2083rem .1563rem;
}

.product-list-list-item-txt p {
    font-size: .0833rem;
    margin-bottom: .0521rem;
}

.product-list-list-item-txt h5 {
    font-weight: bold;
}

.product-list-list-item span {
    font-size: 12px;
    color: #fff;
    background-color: var(--main-color);
    padding: .0417rem .0625rem;
    right: .0781rem;
    top: .0781rem;
}

.pro-bt-top p{
   width: 2.9688rem;
}
.pro-bt-top h1{
    width: 2.2396rem;
    line-height: 1.3;
}
.pro-bt-swiper{
    margin-top: .4583rem;
}
.pro-bt-item-pic{
    padding-bottom: 2.6354rem;
}

.pro-bt-item-txt span{
    color: #fff;
    padding: .1146rem .1823rem;
    background-color: rgba(0, 0, 0, .15);
    margin-bottom: .1458rem;
    opacity: 0;
}
.pro-bt-item:hover .pro-bt-item-txt span{
    opacity: 1;
}
.pro-bt-item:hover .fa9-item-ico{
     opacity: 1;
}
.pro-bt-fy .fy-btn{
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}
.pro-bt-fy .pro-prev{
    left: .05rem;
}

.pro-bt-fy .pro-next{
    right: .05rem;
}

/*product-show*/
.product-show-top {
    margin-bottom: 0.5208rem;
}

.product-show-top-l {
    width: 50%;
}

.product-show-top-l-swiper {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.product-show-top-l-swiper .swiper-pagination .swiper-pagination-bullet {
    opacity: 0.8;
    background-color: #000;
}

.product-show-top-l-swiper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--main-color);
}

.product-show-top-l-pic {
    padding-bottom: 100%;
    width: 90%;
    background-size: 100%;
}

.product-show-top-r-thumb-swiper {
    margin-top: .1198rem;
    margin-bottom: 0;
}

.product-show-top-r-thumb-swiper .swiper-slide {
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.product-show-top-r-thumb-swiper .swiper-slide-thumb-active {
    border: 2px solid var(--main-color);
}

.product-show-top-r-pic {
    width: 100%;
    height: .4948rem;
    padding-bottom: 0;
    background-size: contain;
}

.product-show-top-r {
    width: 44.07%;
}

.product-show-top-r-tit {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: .1563rem;
}

.product-show-top-r-tit h1 {
    font-weight: bold;
    margin-top: .2813rem;
}

.product-show-top-r-tit p {
    font-size: 0.1146rem;
    margin-top: .2083rem;
}

.product-show-top-r-cer {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: .1563rem;
}

.product-show-top-r-cer h5 {
    margin-top: .2969rem;
    font-weight: 500;
    font-size: .1354rem;
    text-transform: uppercase;
    margin-bottom: .125rem;
}

.product-show-top-r-cer-item {
    width: .3542rem;
    margin-right: .125rem;
}

.product-show-top-di p {
    font-size: .0833rem;
    margin-bottom: .0729rem;
    line-height: 1;
}

.product-show-top-di span {
    font-size: .0938rem;
}

.product-show-top-r-cart {
    margin-top: .2292rem;
}

.product-show-top-r-cart p {
    opacity: 1;
}

.product-show-top-t-num>div {
    border: 2px solid rgba(0, 0, 0, 0.4);
    width: .3229rem;
    height: .3229rem;
}

.num-jian {
    border-radius: .0521rem 0 0 .0521rem;
}

.num-jia {
    border-radius: 0 .0521rem .0521rem 0;
}

.product-show-top-t-num span {
    font-size: .1042rem;
    line-height: 1;
}

.product-show-top-t-num input {
    width: .3229rem;
    height: .3229rem;
    border-top: 2px solid rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: .1042rem;
    display: block;
}

.product-show-top-r-cart-btn {
    background-color: var(--main-color);
    color: #fff;
    font-size: .1042rem;
    padding: .125rem .4479rem;
}

.product-show-top-r-cart-btn:hover {
    color: #fff;
    transform: translateY(-0.0521rem);
}

.product-show-nav {
    background-color: var(--main-color-gray);
}

.product-show-nav-list {
    padding: .1927rem .8333rem .1354rem;
}

.product-show-nav-item-link {
    font-weight: 600;
    font-size: .0938rem;
    text-transform: uppercase;
    margin-right: .4688rem;
    opacity: 0.7;
    border-bottom: .0156rem solid transparent;
    padding-bottom: .0833rem;
    line-height: 1;
}

.product-show-nav-item-link:hover,
.product-show-nav-item-link.on {
    color: var(--main-color);
    opacity: 1;
    border-bottom: .0156rem solid var(--main-color);
}


.product-show-con {
    padding: 0.6771rem 0;
    background-color: #fff;
}

.product-show-con .con {
    padding: 0 .8333rem;
}

.product-show-con-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .4531rem;
}

.product-show-con-item-top {
    margin-right: .7552rem;
    width: 1.1979rem;
}

.product-show-con-item-top h6 {
    font-weight: 600;
    font-size: .1823rem;
    line-height: 1;
}


.product-show-con-item-con {
    flex: 1;
}

.product-show-con-item-pics {
    border: 1px solid #D4D4D4;
}

.product-show-con-item-pics img {
    margin: 0 auto;
}

.product-show-con-item-detail p {
    margin-bottom: .0781rem;
    font-size: .0938rem;
}

.product-show-con-item-download {
    width: 48%;
    padding: .1042rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .2604rem;
}

.product-show-con-item-download p {
    font-size: .1042rem;
    opacity: 1;
}

.product-show-con-item-download:hover p {
    color: var(--main-color);
}

.product-show-con-item-download em {
    margin-right: .0781rem;
}

.product-show-con-item-download span {
    font-size: .1042rem;
    font-weight: bold;
}

.product-show-con-item-video {
    border: 1px solid #D4D4D4;
}

.product-show-con-item-video video {
    width: 100%;
    height: 2.2rem;
    background-color: #000;
    display: flex;
}

.product-show-list-top h1 {
    font-weight: bold;
}

.product-show-bt {
    padding: 0.3646rem 0;
    background-color: var(--main-color-gray);
}

.product-show-list {
    margin-top: .3125rem;
    gap: .1042rem;
}

.product-show-list .product-list-list-item {
    border-radius: .1042rem;
    padding: 0;
    background-color: #fff;
}

.product-show-list .product-list-list-item .product-list-list-item-txt p {
    font-size: .099rem;
}

.product-show-nav {
    background-color: var(--main-color-gray);
  
    z-index: 1;
    
    transition: all 0.3s ease;
    
}


.product-show-nav.fixed {
    position: fixed;
    top: 0.4rem;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 可选：添加阴影增加层次感 */
}

body.has-fixed-nav {
    padding-top: 60px;
}




.headcart {
    position: absolute;
    right: 0.1458rem;
    top: .3444rem;
    width: 2.2135rem;
    padding: .1302rem;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15);
    border-radius: .1042rem;
    z-index: 99;
}

.headcart::after {
    content: "";
    position: absolute;
    right: .151rem;
    top: -0.125rem;
    display: block;
    border-bottom: .0625rem solid #fff;
    border-top: .0625rem solid transparent;
    border-left: .0625rem solid transparent;
    border-right: .0625rem solid transparent;
}



.headcart-order {
    display: block;
    width: 95%;
    line-height: .2604rem;
    margin: 5% auto 0;
    font-size: .0938rem;
    color: #fff;
    text-align: center;
    border-radius: .0417rem;
    background-color: var(--main-color);
    cursor: pointer;
}

.headcart-order:hover {
    background-color: #000;
}

.headcart ul {
    max-height: 1.3385rem;
    overflow-y: scroll;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.headcart .node {
    padding: .4688rem 0;
}

.headcart ul li {
    position: relative;
    padding: .0417rem 0;
    border-bottom: 1px solid #eee;
}

.headcart ul li:last-child {
    border-bottom: 0;
}

.headcart ul li a {
    width: 80%;
}

.head-pro {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head-pro-img {
    width: 30%;
    margin-right: .0521rem;
}

.head-pro-text {
    flex: 1;
    margin-right: 15%;
    margin-left: 2%;
}

.head-pro-text h4 {
    font-size: .1042rem;
}

.headcart ul li span {
    font-size: .0938rem;
    margin-right: .0521rem;
}

.headcart h3 {
    font-weight: normal;
    font-size: .1042rem;
    margin-bottom: .1042rem;
}

.node {
    width: 100%;
    padding: .7813rem 0;
    text-align: center;
}

.node h3 {
    font-weight: bold;
}

.order-mask {
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 4;
}

.order-con {
    background-color: #fff;
    z-index: 9999;
    width: 3.3646rem;
    min-height: 1.9271rem;
    right: .1563rem;
    top: 50%;
    transform: translate(0, -50%);
    padding: 0.2344rem;
}

.order-tit h4 {
    font-size: .1042rem;
}

.order-tit span {
    font-size: .1563rem;
    line-height: 1;
}

.order-product>h4 {
    font-size: .1042rem;
    margin-top: .1563rem;
}

.order-product-list {
    overflow-y: auto;
    height: 1.3021rem;
    margin-top: 0.1042rem;
}

.order-product-list a {
    margin-bottom: .1042rem;
}

.order-product-list a .order-product-img {
    width: .5208rem;
    height: .5208rem;
    margin-right: .1042rem;
}

.order-product-text h4 {
    font-size: .1042rem;
    margin-bottom: .0521rem;
}

.order-product-text p {
    line-height: 1;
    font-size: .0885rem;
    color: rgba(0, 0, 0, 0.6);
}

.order-form {
    margin-top: .1563rem;
}

.order-form .order-section {
    margin-bottom: .1042rem;
}

.order-form .order-section span {
    font-size: .0885rem;
    margin-bottom: .0521rem;
}

.order-form .order-section input {
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: .0885rem;
    padding: .0729rem .0521rem;
}

.order-btn {
    background-color: #000;
    color: #fff;
    font-size: .1042rem;
    line-height: 1;
    padding: .1042rem 0;
    cursor: pointer;
}

/*下拉菜单*/
.header-nav-box{
    background-color: #fff;
    display: none;
}

/* 当 header 拥有 show-nav 类时显示 */
header.show-nav .header-nav-box {
    display: block;
}

.header-nav-box-con{
    padding: .4167rem 0 .4167rem;
}
.header-nav-list{
    border-right: 1px solid rgba(0, 0, 0, .2);
    padding-right: .1042rem;
    width: 1.6667rem;
}
.header-nav-item{
    margin-bottom: .1302rem;
}
.header-nav-item h5{
    border-bottom: .0156rem solid transparent;
    padding-bottom: .0521rem;
}
.header-nav-item.on h5,
.header-nav-item h5:hover{
    border-bottom: .0156rem solid var(--main-color);
    color: var(--main-color);
}


.header-nav-con{
    flex: 1;
    margin-left: .3281rem;
    margin-right: .5729rem;
}
.header-nav-item-list{
    margin-top: .1875rem;
    display: none;
}
.header-nav-item-list.on{
    display: flex;
}

.header-nav-item-list a{
    width: 48.5%;
    margin-bottom: .1042rem;
    font-size: .0833rem;
    line-height: 1.3;
    opacity: 0.7;
}
.header-nav-item-list a:hover{
    color: var(--main-color);
    opacity: 1;
}

.header-nav-r{
    width: 2.4479rem;
    background-color: var(--main-color);
}
.header-nav-r-text{
    padding: .1406rem .1667rem;
}
.header-nav-r-text h5{
    color: #fff;
    margin-bottom: .1042rem;
}
.header-nav-r-text p{
    color: #fff;
    opacity: 1;
    font-size: .0833rem;
    line-height: 1;
}
.header-nav-r-text i{
    width: .1563rem;
    height: .1563rem;
    background-color: #fff;
    color: #000;
    font-size: .0833rem;
    line-height: 1;
}
.header-nav-r:hover .header-nav-r-text i{
    color: var(--main-color);
}

/*catalogues*/
.catalogues{
    margin-top: .4167rem;
    padding: 0.2688rem 0;
    background-color: var(--main-color-gray);
}
.catalogues-list{
   gap: .2688rem;
}
.catalogues-item{
    margin-bottom: .3646rem;
}
.catalogues-item-img{
    background-color: #fff;
    padding: .1563rem;
}
.catalogues-item-pic{
    padding-bottom: 2rem;
}
.catalogues-item-img  .a-box{
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
}
.catalogues-item-img:hover .a-box{
    opacity: 1;
}
.catalogues-item-img  .a-box a{
    padding: .0938rem .1563rem;
    background-color: #fff;
    color: #000;
    font-size: .0938rem;
    margin:0 auto .1042rem;
    width: 100%;
}
.catalogues-item-img  .a-box a:hover{
    background-color: var(--main-color);
    color: #fff;
}
.catalogues-item-img  .a-box a span{
    margin-right: .0521rem;
}
.catalogues-item-txt p{
    margin-top: .1042rem;
}