@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.78;
}

a {
    font-size: 0.0938rem;
}

h1 {
    font-size: .2865rem;
    /*55px*/
    font-weight: 500;
}

h2 {
    font-size: .2344rem;
    /*50px*/
    font-weight: 500;
}

h3 {
    font-size: .2083rem;
    /*40px*/
    font-weight: 500;
}

h4 {
    font-size: .1563rem;
    /*30px*/
    font-weight: 500;
}

h5 {
    font-size: .1146rem;
    /*22px*/
    font-weight: 400;
}

h6 {
    font-weight: 500;
    font-size: .1042rem;
    /*20px*/
}

.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: 79.16%;
    margin: 0 auto;
}

.big-con {
    width: 91.14%;
    margin: 0 auto;
}

.small-con {
    width: 75%;
    margin: 0 auto;
}

.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: #fff;
}

.header-con {
    padding-left: .7969rem;
    padding-right: .7969rem;
}

.logo img {
    width: 1.2969rem;
    height: 0.1719rem;
}

.header-right {
    flex: 1;
}

.header-menu {
    margin-right: .6406rem;
    margin-left: .6406rem;
}

.header-menu>span {
    display: none;
}

nav>ul>li>a {
    color: #000;
    font-size: 0.0938rem;
    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-search-btn {
    margin-right: .0833rem;
}

.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.5rem;
    right: 2rem;
    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 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.header-lang {
    padding: 0 .1094rem;
    margin-right: .0625rem;
    height: .1719rem;
}

.header-lang span {
    font-size: .0833rem;
    color: #555555;
    line-height: 1;
    margin-right: .0625rem;
}

.header-lang i {
    font-size: .0833rem;
    color: #555555;
    line-height: 1;
}

.header-website {
    padding: 0 .0677rem;
    height: .1719rem;
}

.header-website span {
    font-size: .0833rem;
    color: #555555;
    line-height: 1;
    margin-left: .0365rem;
}

.header-website i {
    font-size: .1042rem;
    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 .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-ba-item{
    overflow: hidden;
    height: 4rem;
}

.index-ba-item video{
    display: flex;
    height: 100%;
    background-color: #fff;
    align-items: center;
    width: 100%;
}

.index-ba-btn{
    background-color: var(--main-color);
    width: .5rem;
    height: .5rem;
}
.index-ba-btn:hover{ 
    background-color: var(--main-color);
    transform: translateY(-.05rem);
}
.index-ba-btn span{
    color: #fff;
    font-size: .2rem;
}

.index-box {
    padding: .5208rem 0;
}

.index-cate {
    padding: .7604rem 0 .8125rem;
}

.index-tit h1 {
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.index-cate-con {
    margin-top: .3646rem;
}

.index-cate-swiper {
    height: 2.4rem;
}

.index-cate-name {
    margin-top: .2188rem;
}

.index-cate-name h4 {
    font-weight: 500;
    font-size: .125rem;
    line-height: 1;
    transition: all 0.3s ease-out;
}

.index-cate-swiper .swiper-wrapper {
    align-items: flex-start;
}

.index-cate-swiper .swiper-slide {
    transition: all 0.3s ease-out;
}

.index-cate-swiper .swiper-slide-active {
    width: 2.9375rem !important;
}

.index-cate-swiper .swiper-slide-active .index-cate-name h4 {
    font-size: .1563rem;
    font-weight: 600;
}

.index-cate-btn {
    background-color: var(--main-color);
    color: #fff;
    width: .6979rem;
    height: .6979rem;
    right: .125rem;
    bottom: -.6979rem;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.index-cate-btn span {
    font-size: .1042rem;
    color: #fff;
    margin-bottom: .0208rem;
    transform: rotate(-45deg);
    line-height: 1;
}

.index-cate-btn p {
    font-size: .0938rem;
    color: #fff;
    opacity: 1;
    line-height: 1;
}

.index-cate-item:hover .index-cate-btn {
    bottom: .0521rem;
    opacity: 1;
}

.index-cate-item:hover .index-cate-name h4 {
    color: var(--main-color);
}

.index-cate-fy .fy-btn {
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background-color: var(--main-color-gray);
}

.index-cate-fy .fy-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}

.index-cate-prev {
    left: -0.3854rem;
}

.index-cate-next {
    right: -0.3854rem;
}

.index-ab {
    background-color: var(--main-color-bg);
    padding: .5625rem 0 .6823rem;
}

.index-ab-top p {
    font-weight: 400;
    width: 3.7865rem;
    font-size: .0938rem;
}

.index-ab-con {
    margin-top: .5rem;
}

.index-ab-tit h1 {
    line-height: 1;
}

.index-ab-con-l {
    width: 2.224rem;
    transition: all 0.4s ease-in-out;
}

.index-ab-con-l-i {
    background-color: #fff;
    padding: .1563rem .2083rem;
    margin-bottom: .0729rem;
}

.index-ab-con-l-i:last-child {
    margin-bottom: 0;
}

.index-ab-con-l-i h2 {
    line-height: 1;
    color: var(--main-color);
    margin-bottom: .0781rem;
    font-weight: 600;
}

.index-ab-con-l-i p {
    font-size: .0833rem;
    line-height: 1;
    color: #8B8B8B;
}

.index-ab-con-l-i:hover {
    background-color: var(--main-color);
}

.index-ab-con-l-i:hover h2,
.index-ab-con-l-i:hover p {
    color: #fff;
}

.index-ab-list {
    margin-top: .5625rem;
}

.index-ab-swiper .swiper-slide {
    width: 1.8906rem;
}

.index-ab-i {
    padding-bottom: 1.3333rem;
}

.index-ab-con-r {
    width: 5.3333rem;
}

.index-ab-con-r-btn {
    background-color: var(--main-color);
    width: .6615rem;
    height: .6615rem;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.index-ab-con-r:hover .index-ab-con-r-btn{ 
    opacity: 1;
    right: -0.2344rem;
    top: -0.2344rem;
}

.index-ab-con-r-btn span{
    color: #fff;
    font-size: .2083rem;
    transform: rotate(-45deg);
    font-weight: bold;
   
}


.index-ab-fy .fy-btn {
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.index-ab-prev {
    left: -0.3854rem;
}

.index-ab-next {
    right: -0.3854rem;
}

.index-pro {
    padding: 1.10156rem 0 .9167rem;
}

.index-pro-con-l {
    width: 2.7083rem;
}

.index-pro-tit h1 {
    width: 1.9219rem;
    line-height: 1.2;
}

.index-pro-tit img {
    width: .5417rem;
}

.index-pro-con-r {
    width: 4.4271rem;
}



.index-pro-con-l p {
    margin-top: .25rem;
}

.index-pro-con-l a {
    margin-top: .875rem;
    background-color: var(--main-color);
    color: #fff;
    padding: 0.1042rem .2083rem;
    font-size: .1042rem;
    font-weight: 500;
    border-radius: .0885rem;
}

.index-pro-con-l a:hover {
    transform: translateY(-0.0521rem);
}

.index-pro-swiper {
    width: 2.2865rem;
}

.index-pro-i-pic {
    padding-bottom: 1.6406rem;
    margin-bottom: .2708rem;
}

.index-pro-i p {
    font-weight: 400;
    margin-bottom: .1563rem;
}

.index-pro-i>span {
    color: var(--main-color);
    font-size: .0938rem;
}

.index-pro-i:hover>span {
    text-decoration: underline;
}

.index-pro-i-btn {
    background: #fff;
    width: .3958rem;
    height: .3958rem;
    left: 50%;
    transform: translateX(-50%);
    bottom: -.3958rem;
    opacity: 0;
}

.index-pro-i-btn span {
    color: var(--main-color);
    font-size: .1615rem;
}

.index-pro-i:hover .index-pro-i-btn {
    opacity: 1;
    bottom: -0.1927rem;
}

.index-ch {
    background-color: var(--main-color);
    padding: .4792rem 0 .401rem;
}

.index-ch-tit h1 {
    color: #fff;
    margin-bottom: .2083rem;
}

.index-ch-tit p {
    width: 3.7135rem;
    color: #fff;
}

.index-ch-list {
    margin-top: .5208rem;
}

.index-ch-i {
    width: 1.5208rem;
    background-color: rgba(255, 255, 255, 0.35);
    margin-right: .1146rem;
    padding: .2083rem .1042rem;
    box-shadow: inset 0px 3px 7px 0px rgb(0 0 0 / 35%);
}

.index-ch-i-pic {
    background-color: var(--main-color);
    width: .2604rem;
    height: .2604rem;
    margin-right: .0781rem;
}

.index-ch-i-pic img {
    width: .1458rem;
}

.index-ch-i h5 {
    color: #fff;
    font-weight: 500;
}

.index-ch-i-des {
    color: #fff;
    margin-top: .1042rem;
    font-size: .0833rem;
}

.index-ch-hema {
    width: 2.7865rem;
    bottom: -0.6354rem;
}

.index-bt {
    background: linear-gradient(0deg, #D9F2EB 1%, #FFFFFF 88%);
}

.index-te {
    padding: .8854rem 0 .6813rem;
}

.index-te-l {
    width: 5.3125rem;
}

.index-te-l-con {
    width: 1.3021rem;
    left: .2344rem;
    bottom: .1719rem;
}

.index-te-l-con p {
    color: #fff;
    margin-bottom: .1719rem;
    font-size: .0833rem;
    opacity: 1;
}

.index-te-l-con span {
    border: 2px solid #FEFFFF;
    font-weight: 400;
    font-size: .1042rem;
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.46);
    padding: .1042rem .1771rem;
}

.index-te-r {
    background-color: var(--main-color);
    width: 2.4688rem;
    padding: .1563rem .1302rem;
}

.index-te-r-l {
    margin-right: .1458rem;
}

.index-te-r-l span {
    background-color: rgba(255, 255, 255, 0.46);
    color: #fff;
    border: 2px solid #FEFFFF;
    padding: .0521rem .1146rem;
    font-size: .1042rem;
}

.index-te-r-l h4 {
    font-weight: 300;
    margin-top: .3125rem;
    color: #fff;
    line-height: 1.4;
}

.index-te-r-l h4::after {
    width: .151rem;
    height: .0208rem;
    background: #FFFFFF;
    border-radius: .0104rem;
    content: '';
    display: block;
    margin-top: .2813rem;
}

.index-te-r-r {
    width: 1.026rem;
    padding-bottom: 1.7656rem;
}
.index-faq{
    padding: 0  0 .5208rem;
}
.index-faq-l {
    width: 4.0938rem;
}

.index-faq-list {
    margin-top: .1979rem;
}

.index-faq-i {
    background-color: #fff;
    padding: .1458rem .1875rem;
    margin-bottom: .0938rem;
    border: 1px solid #E5E5E5;
}

.index-faq-i-tit p {
    margin-right: .1563rem;
    font-weight: 500;
    font-size: .1042rem;
    opacity: 1;
}

.index-faq-i-tit span {
    font-weight: 500;
    font-size: .1042rem;
}

.index-faq-i-con {
    width: 90%;
    display: none;
}

.index-faq-i-con p {
    margin-top: .25rem;
    opacity: 0.65;
}

.index-faq-i.on .index-faq-i-con {
    display: block;
}

.index-faq-r-con {
    width: 2.8229rem;
    padding-top: .1458rem;
}

.index-faq-form {
    margin-top: .1823rem;
}

.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);
}

/*footer*/
footer {
    background-color: var(--main-color);
}

.footer-top {
    padding-top: .4583rem;
    padding-bottom: .2135rem;
}

.footer-top-l {
    width: 2.4063rem;
}

.footer-top-l img {
    width: 1.849rem;
}

.footer-top-txt {
    margin-top: .3125rem;
}

.footer-top-txt p {
    color: #F4F1ED;
    font-size: .0833rem;
    margin-bottom: .0781rem;
    opacity: 1;
    line-height: 1.3;
}

.footer-top-website {
    margin-top: .2813rem;
}

.footer-top-website a {
    background-color: #fff;
    padding: .026rem .1563rem;
}

.footer-top-website a:hover {
    transform: translateY(-0.0521rem);
}

.footer-top-website a img:first-child {
    width: .5rem;
}

.footer-top-website a img:nth-child(3) {
    width: .3438rem;
}

.footer-top-website a span.iconfont {
    font-size: .1927rem;
}

.footer-top-website a span:last-child {
    font-weight: 400;
    font-size: .0729rem;
    color: #6F6F6F;
}

.footer-top-website>p {
    font-size: 13px;
    color: #fff;
    margin-top: .0521rem;
    opacity: 1;
}

.footer-con-l-item {
    margin-left: .6771rem;
}

.footer-con-l-item h5 {
    margin-bottom: .1875rem;
    font-weight: 500;
    font-size: .125rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
}

.footer-con-l-item a {
    font-size: .0938rem;
    opacity: 0.78;
    margin-bottom: .0781rem;
    color: #fff;
    line-height: 1;
}

.footer-con-l-item a:hover {
    opacity: 1;
}

.footer-top-sc {
    margin-top: .3646rem;
}

.footer-top-sc a {
    width: .1823rem;
    height: .1823rem;
    margin-right: .0885rem;
    background-color: #fff;
}

.footer-top-sc a span {
    font-size: .0938rem;
    color: var(--main-color);
}

.footer-top-sc a:hover {
    background-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-0.0521rem);
}

.footer-top-sc a:hover span {
    color: #fff;
}

.footer-bt {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: .1563rem 0;
}

.footer-bt p {
    font-size: .0729rem;
    color: #fff;
}

.footer-bt a {
    font-size: .0729rem;
    color: #fff;
}

.footer-bt a:hover {
    text-decoration: underline;
}


.pf-nav {
    bottom: 30%;
    right: .1302rem;
    z-index: 999;
}

.pf-nav-ico {
    width: .3177rem;
    height: .3177rem;
    margin-bottom: .0885rem;
    background: linear-gradient(-56deg, #0F9D76 0%, #2EC79C 99%);
    box-shadow: 0px 1px 9px 2px rgba(11, 91, 68, 0.16);
}

.pf-nav-ico span {
    color: #fff;
    font-size: .1302rem;
    line-height: 1;
}

.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-con-l {
    width: 1.901rem;
    height: 2.8177rem;

    border-radius: .9219rem;
    border: .0625rem solid #FFFFFF;
    padding-bottom: 0;
    margin-right: -0.3125rem;
}

.ab-top-con-r {
    width: 1.2604rem;
    height: 2rem;
    border-radius: .599rem;
    border: .0625rem solid #FFFFFF;
    padding-bottom: 0;
}

.ab-top-btn {
    background-color: var(--main-color);
    width: .4583rem;
    height: .4583rem;
    transition: all .3s ease-in-out;
}

.ab-top-btn span {
    color: #fff;
    font-size: .1667rem;
}

.ab-top-btn:hover {
    transform: translateY(-0.0521rem);
}

.ab1 {
    margin-top: -0.6979rem;
}

.ab1-con-l {
    width: 2.6354rem;
}

.ab1-con-r {
    width: 4.7396rem;
}

.ab-tit h1 {
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.ab1-tit h1 {
    margin-right: .0885rem;
    line-height: 0.7;
}

.ab1-tit p {
    font-size: .1667rem;
    opacity: 1;
    line-height: 1;
}

.ab1-con-txt {
    margin-top: .2865rem
}

.ab1-con-txt p {
    margin-bottom: .1563rem;
    line-height: .1302rem;
}

.ab1-con-txt p:last-child {
    margin-bottom: 0;
}

.ab1-list {
    margin-top: .4583rem;
    gap: .1042rem;
}

.ab1-list-item {
    background-color: var(--main-color-gray);
    padding: .2604rem .3646rem;
}

.ab1-list-item img {
    width: .2813rem;
}

.ab1-list-item h2 {
    font-weight: 700;
    margin: .1719rem 0 .0208rem;
    line-height: 1;
}

.ab1-list-item p {
    line-height: 1;
    font-size: .1146rem;
}

.ab2 {
    padding: .7292rem 0;
}

.ab-top>span {
    border: 1px solid var(--main-color);
    padding: .0625rem .2083rem;
    color: var(--main-color);
    font-size: .1146rem;
    margin-bottom: .2083rem;
}

.ab2-con {
    margin-top: .5573rem;
}

.ab2-con-l {
    width: 4.6771rem;
}

.ab2-con-r {
    flex: 1;
    margin-left: .5521rem;
}

.ab2-con-r-item {
    margin-bottom: .1563rem;
    width: 2.4635rem;
}

.ab2-con-r-item:last-child {
    margin-bottom: 0;
}

.ab2-con-r-item .a-box {
    background-color: var(--main-color);
    z-index: -1;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.ab2-con-r-item:hover .a-box {
    transform: rotate(-5deg);
    opacity: 1;
}

.ab2-con-r-txt {
    width: 2.3802rem;
    margin: 0 auto;
    background-color: #fff;
    padding: .1563rem .1406rem;
    border: 1px solid var(--main-color);
}

.ab2-con-r-txt span {
    background-color: var(--main-color-light);
    padding: .0521rem;
    font-size: .0938rem;
    line-height: 1;
    color: var(--main-color);
    text-transform: uppercase;
}

.ab2-con-r-txt h4 {
    font-size: .1354rem;
    font-weight: 700;
    margin-top: .1771rem;
    margin-bottom: .1042rem;
    line-height: 1;
}

.ab2-con-r-txt p {
    font-weight: 400;
    font-size: .0833rem;
    opacity: 0.54;
    line-height: .1146rem;
}

.ab3-con {
    margin-right: 1.0417rem;
}

.ab3-con-l {
    width: 2.9792rem;
    border: .0156rem solid #FFFFFF;
    margin-right: .2604rem;
}

.ab3-con-l .ab3-con-l-pic {
    padding-bottom: 1.7969rem;
}

.ab3-con-l .a-box {
    background-color: rgba(0, 0, 0, 0.5);
}

.ab3-con-ico {
    width: .4271rem;
    height: .4271rem;
    border: .0417rem solid #FFFFFF;
}

.ab3-con-ico span {
    color: #fff;
    font-size: .1771rem;
}

.ab3-con-r-item {
    background-color: transparent;
    width: .875rem;
    padding: .0938rem .1042rem;
    transition: all .3s ease-in-out;
}

.ab3-con-r-item p {
    font-weight: 600;
    color: #fff;
    opacity: 1;
}

.ab3-con-r-item:hover,
.ab3-con-r-item.on {
    background-color: #fff;
}

.ab3-con-r-item:hover p,
.ab3-con-r-item.on p {
    color: var(--main-color);
}

.ab4 {
    padding: .625rem 0 .9375rem;
}

.ab4-list {
    margin-top: .3958rem;
    gap: 0;
    margin-bottom: .625rem;
}

.ab4-list-item-tit {
    width: .4688rem;
    height: .4688rem;
    background-color: var(--main-color);
}

.ab4-list-item-tit h3 {
    color: #fff;
    line-height: 1;
    font-weight: 600;
}

.ab4-list-item-line {
    border-top: 1px solid #D0D5DA;
}

.ab4-list-item h4 {
    margin-top: .1875rem;
    margin-bottom: .1563rem;
    line-height: 1;
    font-size: .1458rem;
}

.ab4-list-item p {
    font-size: .0833rem;
    width: 90%;
    font-weight: 400;
}

.ab4-bg {
    padding-bottom: 2.8698rem;
}

.ab4-con-txt h3 {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: .1823rem;
    font-weight: 600;
}

.ab4-con-txt p {
    color: #fff;
    font-size: .0833rem;
    width: 65%;
    text-align: center;
    margin-bottom: .4219rem;
}

.ab4-con-txt a {
    background-color: #fff;
    padding: .0521rem .1458rem;
}

.ab4-con-txt a:hover {
    background-color: var(--main-color);
    transform: translateY(-.0521rem);
}

.ab4-con-txt a span {
    font-size: .0938rem;
    line-height: 1;
}

.ab4-con-txt a i {
    font-size: .1042rem;
    margin-left: .0521rem;
}

.ab4-con-txt a:hover span,
.ab4-con-txt a:hover i {
    color: #fff;
}

.ab4-pic {
    gap: .0625rem;
    margin-top: .3125rem;
}

.ab4-pic-item {
    padding-bottom: 1.401rem;
}

.ab5 {
    background-image: url("../images/ab5-bg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    padding: .5625rem 0;
}

.ab5-top span {
    border: 1px solid #fff;
    color: #fff;
}

.ab5-tit h1 {
    color: #fff;
}

.ab5-list {
    margin-top: .5208rem;
    gap: .1146rem;
}

.ab5-pic {
    border: .0625rem solid #FFFFFF;
}

.ab5-txt {
    padding: .1302rem .1563rem;
}

.ab5-txt h4 {
    margin-bottom: .1563rem;
    font-weight: 600;
}

.ab5-txt p {
    font-size: .0833rem;
}

.ab6 {
    padding-bottom: .8594rem;
}

.ab6-con-l {
    width: 3.0521rem;
    margin-right: .6042rem;
}

.ab6-tit h1 {
    margin-bottom: .2604rem;
    line-height: 1.2;
}

.ab6-con-l p {
    margin-bottom: .276rem;
}

.ab6-fy .fy-btn {
    margin-right: .1042rem;
}

.ab6-con-r {
    height: 2.3438rem;
}

.ab6-con-swiper {
    padding: .1042rem;
}

.ab6-con-swiper .swiper-wrapper {
    align-items: center;
}

.ab6-con-swiper .swiper-slide {
    background-color: #fff;
    padding: .0938rem;
    transition: all .5s ease-in-out;
}

.ab6-con-swiper .ab6-con-swiper-pic {
    background-size: 100% 100%;
    padding-bottom: 139%;
    transition: all .5s ease-in-out;
}

.ab6-con-swiper .swiper-slide-active {
    width: 1.5781rem !important;
}

.ab6-bt {
    margin-top: .4167rem;
    gap: .1667rem;
}

.ab6-bt-item {
    background-color: #fff;
    padding: .2396rem;
}

.ab6 .con {
    background: url("../images/world-bg.png") no-repeat;
    background-position: bottom right;
    background-size: 4.9427rem;
}

.ab7 {
    background-color: var(--main-color-gray);
    padding: .5833rem 0;
}

.ab7-top p {
    width: 90%;
    margin: .2031rem auto;
}

.ab7-con {
    margin-top: .3542rem;
    height: 3.0729rem;
}

.ab7-item:nth-child(1) {
    padding-bottom: 3.0729rem;
    width: 33.94%;
}

.ab7-item:nth-child(2) {
    padding-bottom: 1.5156rem;
    width: 30.85%;
}

.ab7-item:nth-child(3) {
    padding-bottom: 1.5156rem;
    width: 30.85%;
}

.ab7-item:nth-child(4) {
    width: 33.81%;
    padding-bottom: 3.0729rem;
}

.ab8-r{
    height: 4rem;
    overflow: hidden;
}

.ab8-l {
    width: 2.3438rem;
    margin-right: 1.276rem;
}


.ab8-tit {
    margin-bottom: .2083rem;
}

.ab8-r-con {
    padding: .5rem .1042rem .7188rem 0;
    overflow: auto;
}

.ab8-item {
    margin-bottom: .5208rem;
}

.ab8-year {
    width: .5208rem;
    height: .5208rem;
    background: var(--main-color);
}

.ab8-year h4 {
    color: #fff;
    font-size: .1458rem;
    line-height: 1;
}

.ab8-item:last-child {
    margin-bottom: 0;
}

.ab8-line {
    border-top: 1px dashed var(--main-color);
    width: .1875rem;
    margin: 0 .0625rem;
    height: 2px;
}

.ab8-txt {
    background-color: var(--main-color);
    padding: .2083rem .1979rem;
}

.ab8-txt p {
    display: flex;
    align-items: flex-start;
    color: #fff;
    margin-bottom: .0781rem;
    width: 100%;
    justify-content: flex-start;
}

.ab8-txt p:last-child {
    margin-bottom: 0;
}

.ab8-txt p::before {
    content: '';
    display: block;
    background-color: #fff;
    margin-right: .052rem;
    border-radius: 50%;
    width: .035rem;
    height: .035rem;
    margin-top: .052rem;
}

.ab8-txt p em {
    flex: 1;
}

.ab8-item:nth-child(2n-1) .ab8-txt {
    background-color: var(--main-color-light);

}

.ab8-item:nth-child(2n-1) .ab8-txt p::before {
    background-color: var(--main-color);
}

.ab8-item:nth-child(2n-1) .ab8-txt p {
    color: var(--main-color);
}

.ab8-r::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    border-left: 1px dashed var(--main-color);
    left: .2604rem;
}

/*service*/
.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;
}

.se1 {
    padding: .8333rem 0;
}

.se-tit h1 {
    line-height: 1;
    font-weight: 700;
    margin-bottom: .1875rem;
}

.se-tit p {
    width: 60%;
    margin: 0 auto;
}

.se1-con {
    margin-top: .401rem;
    gap: .0833rem;
}

.se1-item {
    background-color: #fff;
    margin-bottom: .1042rem;
}

.se1-item-con {
    padding: .3229rem .3646rem;
}

.se1-item-con h4 {
    font-size: .125rem;
    margin-bottom: .1406rem;
    font-weight: 800;
}

.se1-item:hover {
    background-color: var(--main-color);
}

.se1-item:hover .se1-item-con h4,
.se1-item:hover .se1-item-con p {
    color: #fff;
}

.se2 {
    background-color: var(--main-color-bg);
    padding: .5313rem 0 .599rem;
}

.se2-con {
    margin-top: .3385rem;
    gap: .1042rem;
}

.se2-item {
    background-color: #fff;
    padding: .349rem .2188rem;
}

.se2-tit p {
    width: 80%;
}

.se2-item-top {
    border-bottom: 1px solid var(--main-color);
    padding-bottom: .1771rem;
}

.se2-item-ico {
    background-color: var(--main-color);
    width: .6146rem;
    height: .6146rem;
    margin-right: .1563rem;
}

.se2-item-ico span {
    font-size: .3229rem;
    color: #fff;
}

.se2-item-top h4 {
    font-size: .1354rem;
    font-weight: 800;
}

.se2-item-con {
    padding: .4167rem .1354rem 0;
}

.se3 {
    padding: .8333rem 0;
}

.se3-txt {
    margin-left: .4479rem;
}

.se3-txt h1 {
    font-weight: 700;
    line-height: 1;
    margin-bottom: .4688rem;
}

.se3-list p {
    margin-bottom: .0781rem;
}

.se3-list p::before {
    content: '';
    display: block;
    width: .0313rem;
    height: .0313rem;
    background-color: #000;
    border-radius: 50%;
    margin-right: .0781rem;
    opacity: 0.7;
}

.se4-list {
    margin-top: .4688rem;
    gap: .1458rem;
    margin-bottom: 1.1458rem;
}

.se4-item {
    background-color: var(--main-color-bg);
    padding: .6042rem 0 .4323rem;
}

.se4-item img {
    width: .4688rem;
    margin: 0 auto 0.2865rem;
}

.se4-item h1 {
    font-style: italic;
    color: #E6E8ED;
    font-size: 1.6rem;
    line-height: 0.6;
    z-index: 0;
    font-weight: 600;
}

.se4-item h4 {
    font-weight: 400;
    font-size: .1458rem;
}

.se4-item:hover {
    background-color: var(--main-color);
}

.se4-item:hover h4 {
    color: #fff;
}

.se4-item:hover h1 {
    color: #598E80;
}


/*blog*/
.nav-bar {
    padding: .401rem 0 .2552rem;
}

.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: .4167rem 0 .625rem;
}

.news-con {

    gap: .2083rem;
}

.news-item {
    background-color: var(--main-color-gray);
}

.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;
}

.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;
}

.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-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;
}

/*products*/
.product-top {
    padding: .3385rem 0 .5521rem;
}

.product-top-bar {
    margin-bottom: .1042rem;
}

.product-top-bar a {
    font-size: 14px;
    color: #2E2E2E;
    opacity: 0.7;
}

.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-bottom: .625rem;
}

.product-list-side {
    background-color: #fff;
    width: 1.4323rem;
}

.product-list-side-tit h5 {
    line-height: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: .2083rem;
    font-weight: 600;
    font-size: .125rem;
}


.product-list-side-item {
    margin-top: .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: .0677rem;
}

.product-list-list-item {
    background-color: #fff;
    margin-bottom: .0781rem;
    border: 1px solid #EEEEEE;
    padding: .3906rem .2604rem;
}

.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%;
}

.product-list-list-item-txt {
    padding-top: .2604rem;
}

.product-list-list-item-txt p {
    font-size: .0833rem;
    padding-top: .0833rem;
}

.product-list-list-item-txt h5 {
    font-weight: bold;
    font-size: .125rem;
}

.product-list-list-item span {
    font-size: 12px;
    color: #fff;
    background-color: var(--main-color);
    padding: .0417rem .0625rem;
    right: .0781rem;
    top: .0781rem;
}


/*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: 100%;
    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: .2604rem 0.2604rem .3854rem;
}

.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;
}
