@charset "utf-8";
@import url(../css/common.css?v=1287577);

.con {
    width: 85.41%;
    margin: 0 auto;
}

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

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

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

/*头部样式*/
header {
    z-index: 999;
    background-color: #000;
    padding: .0599rem 0;
    transition: all ease-in-out .3s;
}

.header-logo {
    width: .4323rem;
    height: .0781rem;
    background-image: url(../images/logo.png);
}

nav {
    margin-left: .5885rem;
    margin-right: .4635rem;
}

nav>ul>li>a {
    color: #f5f5f7;
    opacity: .8;
    font-size: .0729rem;
    margin: 0 .2083rem;
}

nav>ul>li>a:hover,
nav>ul>li>a.active {
    color: #ffffff;
    opacity: 1;
}

.header-search a span {
    color: #f5f5f7;
    font-size: .0833rem;
    line-height: 1;
    opacity: 1;
}



.header-search a span:hover {
    color: #ffffff;
    opacity: 1;
}

header.header-active {
    background-color: #f5f5f7;
}

header.header-active .header-logo {
    background-image: url(../images/logo01.png);
}

header.header-active nav>ul>li>a {
    color: #333;
    opacity: .8;
}

header.header-active .header-search a span {
    color: #000;
}

header.header-active nav>ul>li>a:hover,
header.header-active nav>ul>li>a.active,
header.header-active .header-search a span:hover {
    color: #000;
    opacity: 1;
}




/*搜索框样式*/
.search-sub-box {
    background: transparent;
    top: .3rem;
}

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

.pro-list-page-search {
    background-color: #fff;
    line-height: .2604rem;
    width: 2.0208rem;
}

.pro-page-form-box input[type=text] {
    font-size: 14px;
    line-height: 1;
    flex: 1;
    line-height: .2604rem;
    padding: 0 .0938rem;
    width: 100%;
}

.pro-page-form-box input[type=submit] {
    background-color: #000;
    color: #fff;
    width: .3646rem;
    height: .2604rem;
    background-image: url(../images/keep/serach-ico.png);
    background-repeat: no-repeat;
    background-size: .1563rem .1563rem;
    background-position: center center;
}



/*首页样式*/
.banner .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    bottom: .1042rem;
    left: 0;
}

.banner .swiper-pagination .swiper-pagination-bullet {
    background-color: #fff;
    border-radius: 0;
    width: .0625rem;
    height: .0625rem;
    display: block;
    opacity: 1;
    margin: 0 .040rem;
    border-radius: 50%;
}

.banner .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #000;
    opacity: 1;
    width: .0625rem;
    height: .0625rem;
}

.ba-txt {
    width: 37.75%;
}

.ba-txt h4 em {
    text-align: center;
    color: #fff;
    font-size: .401rem;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Circular Std';
}

.ba-txt h4 span {
    color: #fff;
    text-align: center;
    font-size: .5833rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    font-family: 'Circular Std';
}

.ba-txt p {
    color: #fff;
    text-align: center;
    font-size: .125rem;
    margin-top: .1406rem;
    margin-bottom: .1875rem;
    line-height: 1;
}

.index-btn {
    background: #00BEBE;
    border-radius: .1302rem;
    color: #fff;
    padding: .0938rem .1719rem;
    line-height: 1;
    transition: all .3s cubic-bezier(0,0,.5,1);
    cursor: pointer;
    font-size: .0833rem;
    font-family: 'HarmonyOS Sans';
}

.index-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.2);
    color: #fff;
}

.index-cate {
    background-color: #f5f5f7;
    padding: .0625rem 0 0;
}

.index-cate-item {
    margin-bottom: .0625rem;
    width: 50%;
    padding-left: .0313rem;
    padding-right: .0313rem;
    
}
.index-cate-item img{
    transition: all .3s cubic-bezier(0,0,.5,1);
}
.index-cate-item:hover img{
    transform: scale3d(1.02,1.02,1.02);
}

.index-cate-con {
    padding-top: .1563rem;
}

.index-cate-con h4 {
    color: #000000;
    font-size: .1979rem;
    margin-bottom: .0885rem;
}

.index-cate-con h4 em {
    font-weight: 400;
    margin-left: .0521rem;
}

.index-cate-con p {
    color: #333;
    opacity: 0.5;
    font-size: .0938rem;
    line-height: 1;
    margin-bottom: .0781rem;
}

.index-cate-item:nth-child(1),
.index-cate-item:nth-child(2) {
    width: 100%;
    padding: 0;
}

.index-cate-item:nth-child(1) .index-cate-con h4,
.index-cate-item:nth-child(2) .index-cate-con h4 {
    font-size: .2604rem;
    margin-bottom: .1146rem;
}

.index-cate-item:nth-child(1) .index-cate-con p,
.index-cate-item:nth-child(2) .index-cate-con p {
    font-size: .1042rem;
    margin-bottom: .0938rem;
}

.index-cate-item:nth-child(3) .index-cate-con h4 {
    color: #fff;
}

.index-cate-item:nth-child(3) .index-cate-con p {
    color: #fff;
    opacity: 0.4;
}

.index-cate-item:nth-child(3),
.index-cate-item:nth-child(5) {
    padding-left: .0625rem;
    padding-right: .0313rem;
}

.index-cate-item:nth-child(4),
.index-cate-item:nth-child(6) {
    padding-right: .0625rem;
    padding-left: .0313rem;
}

.index-cate-item:nth-child(3) .index-btn,
.index-cate-item:nth-child(5) .index-btn,
.index-cate-item:nth-child(4) .index-btn,
.index-cate-item:nth-child(6) .index-btn {
    padding: .0625rem .0885rem;
    border-radius: .0938rem;
    font-size: .0729rem;
}



/*底部样式*/

.sc {
    padding: .5104rem 0 .4323rem;
}

.sc-l {
    padding: .1667rem .8542rem .1667rem 0;
}

.sc-l>h4 {
    font-size: .1823rem;
    margin-bottom: .3438rem;
}

.sc-l-item span {
    display: block;
    font-size: .1042rem;
    font-weight: bold;
    margin-bottom: .1094rem;
    line-height: 1;
}

.sc-l-item p {
    font-weight: 400;
    font-size: .0938rem;
    color: #535353;
    line-height: .1458rem;
    opacity: 0.8;
}

.sc-r {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    padding-left: .7708rem;
}

.sc-r-item {
    margin-right: .4427rem;
}

.sc-r-item:last-child {
    margin-right: 0;
}

.sc-r-item-ico {
    width: .5729rem;
    height: .5729rem;
}

.sc-r-item h4 {
    font-size: .1042rem;
    color: #000;
    margin-top: .1927rem;
    margin-bottom: .1667rem;
}

.sc-r-item p {
    font-size: .0885rem;
    color: #000000;
    opacity: 0.7;
    margin-bottom: .0833rem;
    line-height: 1;
}

.sc-r-item p:nth-child(4) {
    margin-bottom: 0;
    line-height: .1198rem;
}

.sc-r-item .index-btn {
    padding: .0625rem .1094rem;
    border-radius: .0938rem;
    font-size: .0729rem;
    margin-top: .1927rem;
}

footer,
.sc {
    background: #fff;
}

footer {
    border-top: .0729rem solid #f5f5f7;
    padding-top: .5052rem;
}

.footer-con {
    margin-bottom: .9375rem;
}

.footer-item {
    margin-right: .7188rem;
}

.footer-item h4 {
    font-size: .0833rem;
    color: #000000;
    margin-bottom: .1875rem;
    text-transform: uppercase;
}

.footer-item-list a {
    font-size: .0781rem;
    color: #7C7C7C;
    margin-bottom: .0885rem;
    line-height: 1;
}

.footer-item-list a:last-child {
    margin-bottom: 0;
}

.footer-item-list a:hover {
    color: #000;
}

.footer-copyright {
    padding-bottom: .1979rem;
}

.footer-copyright p {
    font-size: .0729rem;
    color: #000000;
    line-height: 1;
    opacity: 0.5;
}

.footer-logo {
    width: 2.3333rem;
    bottom: -.5729rem;
    right: .6563rem;
}

.footer-zi {
    width: 2.849rem;
    right: 2.6198rem;
    bottom: -0.0469rem;
}

/*about*/
.ab1 {
    padding: .7135rem 0 .4948rem;
}

.ab-top h4 {
    font-size: .2865rem;
    line-height: .3177rem;
    font-family: 'HarmonyOS Sans Medium';
}

.ab-top p {
    font-size: .0938rem;
    opacity: 0.7;
    line-height: .1406rem;
    font-family: 'HarmonyOS Sans';
}

.ab1-top p {
    width: 63.29%;
}

.ab1-con {
    margin-top: .4531rem;
}

.ab2-con p {
    width: 38%;
    font-size: .2865rem;
    line-height: .3646rem;
    font-weight: bold;
    font-family: 'HarmonyOS Sans Medium';
}

.ab3 {
    padding: .4688rem 0 .401rem;
}

.ab3-top p {
    width: 36.37%;
    line-height: .1563rem;
    font-family: 'HarmonyOS Sans';
    opacity: 0.8;
    font-size: .1042rem;
}

.ab3-swiper {
    margin: .3958rem 0 0;
    overflow: unset;
}

.ab3-item-txt {
    margin-top: .2188rem;
}

.ab3-item-txt h4 {
    font-size: .1875rem;
    font-family: 'HarmonyOS Sans';
}

.ab3-item-txt p {
    font-size: .1094rem;
    opacity: 0.7;
    margin-top: .0833rem;
    line-height: 1;
}

.ab3-fy {
    margin-top: .4063rem;
}

.ab3-fy div {
    margin-right: .0938rem;
    background-color: #f5f5f7;
    width: .2083rem;
    height: .2083rem;
    background-color: #e2e2e5;
}
.ab3-fy div i{
    color: #636365;
}

.ab3-fy div:hover {
    background-color: #00BEBE;
    color: #fff;
}
.ab3-fy div:hover i{
    color: #fff;
}

.ab4-con {
    width: 45%;
}

.ab4-con h4 {
    font-size: .2865rem;
    color: #fff;
    margin-top: .7031rem;
    margin-bottom: .1979rem;
    text-transform: uppercase;
}

.ab4-con p {
    font-size: .1458rem;
    color: #fff;
    width: 90%;
}
.ab5{
    background-color: #fff;
}
.ab5
.ab5-con p {
    font-size: .2344rem;
    line-height: .2917rem;
    font-weight: bold;
    margin-top: .9115rem;
    margin-left: .5625rem;
}

.ab6 {
    padding: .4844rem 0 .5573rem;
    background-color: #f5f5f7;
}

.ab6-con {
    margin-top: .2604rem;
}

.ab6-item {
    width: 49.26%;
}

.ab6-txt {
    margin-top: .2604rem;
}

.ab6-txt h4 {
    font-size: .1458rem;
    margin-bottom: .125rem;
}

.ab6-txt p {
    font-size: .1042rem;
    color: #6e6e6e;
    width: 85%;
}

.ab7 {
    padding: .3958rem 0 .4635rem;
}

.ab7-swiper {
    margin: .3125rem 0 0;
    width: 87.43%;
    overflow: unset;
}
.ab7-swiper .swiper-slide{ 
    margin-right: .1198rem !important;
}

/*service*/
.se-top-con p {
    color: #fff;
    font-weight: 500;
    font-size: .1563rem;
    margin-bottom: .1042rem;
    margin-top: .9375rem;
    font-family: 'HarmonyOS Sans Medium';
    line-height: 1;
}

.se-top-con h4 {
    color: #fff;
    font-family: 'Basis Grotesque Pro';
    width: 100%;
    font-size: .3906rem;
}

.se-box {
    padding: .6146rem 0 0;
}

.se-top {
    margin-bottom: .3073rem;
}

.se-top h4 {
    font-size: .2865rem;
    width: 40%;
    line-height: .3177rem;
    font-family: 'HarmonyOS Sans';
}
.se1{
    padding-left: .7292rem;
    padding-bottom: .1042rem;
}
.se1-swiper{
    overflow: unset;
    margin: 0;
    width: 8.6563rem;
}

.se1-swiper .swiper-slide{ 
    margin-right: .099rem !important;
}





.se2 {
    padding-top: .4583rem;
    background-color: #f5f5f7;
}
.se2-top{
    margin-bottom: .3385rem;
}
.se2-item {
    width: 49.39%;
    background-color: #fff;
    padding: .3385rem .6458rem .2604rem;
}

.se2-item p {
    font-family: 'HarmonyOS Sans Medium';
    font-size: .1667rem;
    color: #1D1D1F;
    margin-bottom: .4271rem;
}

.se3 {
    background-color: #f5f5f7;
    padding-top: .4688rem;
    padding-bottom: .3958rem;
}

.se3-top h4 {
    width: 100%;
}

.se3-item {
    width: 24.39%;
}

.se4-con h4 {
    color: #fff;
    font-size: .3906rem;
    margin-top: 1.9115rem;
}

.se5-item {
    width: 48.47%;
}

.se5-item-con {
    padding: .4375rem .3438rem;
}

.se5-item-con h4 {
    color: #fff;
    font-size: .2083rem;
    font-family: 'HarmonyOS Sans Medium';
}

.se5-item-con p {
    font-size: .1458rem;
    color: #fff;
    margin-top: .1563rem;
    width: 2.375rem;
}
.se5-item:last-child .se5-item-con p{
    width: 2.6042rem;
}

.se6 {
    background-color: #f5f5f7;
    padding-bottom: .4531rem;
    padding-top: .5521rem;
}
.se6-swiper{
    overflow: unset;
    margin: 0;
    width: 100%;
}
.se6-swiper .swiper-slide{ 
    margin-right: .125rem !important;
}




/*advantage*/
.ad-top-con{
    padding-left: .1771rem;
}
.ad-top-con h4 {
    color: #fff;
    font-size: .5208rem;
    text-transform: uppercase;
    font-family: 'Basis Grotesque Pro';
    line-height: .4583rem;
}

.ad-top-con p {
    color: #fff;
    font-size: .1563rem;
    line-height: 1;
    font-weight: bold;
    margin-top: .1042rem;
}

.ad-top-con span {
    font-size: .0938rem;
    color: #FFFFFF;
    display: block;
    margin-top: .2604rem;
}

.ad-box {
    padding: .625rem 0 0;
}

.ad-tit h4 {
    font-size: .2865rem;
    line-height: 1.2;
    width: 60%;
}

.ad-tit p {
    font-size: .1458rem;
    color: #6e6e73;
    margin-top: .1042rem;
}

.ad-tit {
    margin-bottom: .3125rem;
}

.ad1 {
    padding: .4115rem 0 0;
}

.ad1-item {
    width: 24.3%;
    background-color: #fff;
    padding: .2813rem 0 .1979rem;
}

.ad1-item img {
    width: 1.526rem;
    margin: 0 auto;
    transition: all .3s cubic-bezier(0,0,.5,1);
}

.ad1-item:hover img{
    transform: scale3d(1.02,1.02,1.02);
}

.ad1-item h4 {
    font-size: .1667rem;
    color: #000000;
}

.ad1-item p {
    font-size: .1042rem;
    opacity: 0.7;
    margin-top: .0938rem;
    line-height: 1;
    margin-bottom: .1042rem;
}

.ad1-item span {
    margin-bottom: .1771rem;
}

.ad1-item .index-btn {
    font-size: .0729rem;
    border-radius: .1094rem;
    padding: .0781rem .0938rem;
}
.ad2{
    padding: .9375rem 0 0;
}
.ad2-fy div,
.ad5-fy div {
    background-color: #e6e6ea;
    margin-left: .0781rem;
    width: .2083rem;
    height: .2083rem;
}
.ad2-fy div i,
.ad5-fy div i{
    color: #656567;
    font-size: .1302rem;
    font-weight: bold;
}

.ad2-fy div:hover,
.ad5-fy div:hover {
    background-color: #00BEBE;
    color: #fff;
}
.ad2-fy div:hover i,
.ad5-fy div:hover i{
    color: #fff;
}

.ad2-tit h4{
    margin-bottom: .1042rem;
}
.ad2-tit{
    margin-bottom: .1563rem;
}
.ad2-tit p{
    font-size: .1823rem;
    color: #6E6E73;
    font-family: 'Basis Grotesque Pro';
    margin-top: 0;
}

.ad2-swiper{
    overflow: unset;
    margin: 0;
    width: 100%;
}
.ad2-swiper .swiper-slide{ 
    margin-right: .1146rem !important;
}
.ab2-item-pic{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 145%;
}
.ad2-txt {
    padding: .2083rem .1823rem;
}

.ad2-txt p {
    color: #fff;
    font-size:.1146rem;
    opacity: 0.7;
    font-family: 'HarmonyOS Sans';
}

.ad2-txt h4 {
    color: #fff;
    font-size: .1458rem;
    line-height: .1667rem;
    width: 80%;
    margin-top: .0885rem;
    font-family: 'HarmonyOS Sans Medium';
    font-weight: 500;
}

.ad3 {
    background-color: #fff;
    padding: .8281rem 0 ;
    margin-top: .4688rem;
}

.ad3-l {
    width: 54%;
}

.ad3-r {
    width: 45%;
}

.ad3-r-i {
    margin-bottom: .15rem;
}

.ad3-r-i:last-child {
    margin-bottom: 0;
}

.ad4{
    padding: .6094rem 0 0;
}
.ad4-item {
    width: 24%;
    background-color: #fff;
    padding: .4063rem .3906rem;
}

.ad5 {
    padding-bottom: .625rem;
}

/*产品首页*/
.product-top {
    padding-top: .4688rem;
    padding-bottom: .2604rem;
}
.product-top .product-top-tit h4 {
    font-family: 'Basis Grotesque Pro';
    font-weight: bold;
    font-size: .224rem;
    color: #1D1D1F;
    line-height: .2552rem;
    margin-top: 0;
}

.product-tit h4 em {
    color: #6E6E73;
    opacity: 0.8;
}

.prodcut-top-list a {
    margin-bottom: .0938rem;
}

.product-top-list-ico {
    width: .1823rem;
    height: .1823rem;
    background: #fff;
    margin-right: .0521rem;
}

.product-top-list-ico {
    font-size: .1042rem;
}

.product-top-list-txt p {
    font-size: .0729rem;
    margin-bottom: .0365rem;
    font-family: "BasisGrotesquePro";
    line-height: 1;
    font-weight: 400;
}

.product-top-list-txt span {
    color: #00BEBE;
    font-size: .0781rem;
    text-decoration: underline;
    font-family: "BasisGrotesquePro";
    line-height: 1;
    font-weight: 400;
}

.product1 {
    padding-bottom: .2604rem;
    padding-left: .1771rem;
}

.prodcut1-item {
    margin-right: .4688rem;
    opacity: 0.8;
    transition: all .3s cubic-bezier(0,0,.5,1);
}

.prodcut1-item img {
    width: .4167rem;
    margin: 0 auto;
}

.prodcut1-item p {
    font-size: .0833rem;
    margin-top: .0521rem;
    font-family: "BasisGrotesquePro";
    width: 100%;
}

.prodcut1-item:hover {
    opacity: 1;
}

.prodcut1-item.on {
    opacity: 1;
}

.product-se {
    padding-bottom: .625rem;
}

.product-se-tit {
    margin-bottom: .2344rem;
}

.product-se-tit h4 {
    font-size: .1354rem;
    font-family: "BasisGrotesquePro";
}

.product-se-tit h4 em {
    color: #6E6E73;
}

.product2-se-swiper {
    width: 90%;
    overflow: unset;
    margin: 0;
}

.product2-item h4 {
    padding: .2344rem .2135rem;
    width: 80%;
    font-size: .1458rem;
    line-height: .1719rem;
    font-family: 'HarmonyOS Sans Medium';
}

.product2-se-fy div,
.product-se-fy div,
.se6-fy div {
    top: 50%;
    transform: translateY(-50%);
    z-index: 111;
    background-color: #ccc;
    width: .2917rem;
    height: .2917rem;
    color: #000;
    opacity: 0.5;
}

.product2-se-fy div i,
.product-se-fy div i,
.se6-fy div i {
    font-size: .1563rem;
}

.product2-se-prev,
.product-se-prev,
.se6-prev {
    left: -0.5677rem;
}

.product2-se-next,
.product-se-next,
.se6-next {
    right: -0.3125rem;
}


.product2-se-fy div:hover,
.product-se-fy div:hover {
    background-color: #00BEBE;
    color: #fff;
}

.product3 {
    padding-left: .7292rem;
}

.product-se-con {
    width: 8.6875rem;
}

.product-se-swiper {
    overflow: unset;
    margin: 0;
    width: 8.6875rem;
}

.product-item {
    background-color: #fff;
    padding: .224rem .1979rem .3385rem;
    /* 原有样式 */
    transition: box-shadow .3s cubic-bezier(0,0,.5,1), transform .3s cubic-bezier(0,0,.5,1);
    box-shadow: 2px 4px 12px #00000014;
    /* 新增 */
    backface-visibility: hidden;
    transform: translateZ(0);
}

.product-item h4 {
    font-size: .1667rem;
    font-family: 'HarmonyOS Sans Medium';
    margin-bottom: .0521rem;
    font-weight: 500;
}

.product-item p {
    font-size: .0938rem;
    margin-bottom: .0521rem;
    font-weight: bold;
    line-height: 1;
    font-family: 'HarmonyOS Sans';
}

.product-item span {
    opacity: 0.7;
    font-size: .0833rem;
    margin-bottom: .0521rem;
    display: block;
}

.product-item img {
    width: 95%;
    margin: 0 auto;
}

.product-item:hover {
    box-shadow: 2px 4px 16px #00000029;
    transform: translateZ(0) scale(1.01);
}

.product-item-tag {
    color: #fff;
    background-color: #00BEBE;
    border-radius: .0964rem;
    font-size: .0625rem;
    padding: .0729rem .0781rem;
    right: .1146rem;
    bottom: .1406rem;
    line-height: 1;
    text-transform: uppercase;
}



/*产品列表*/
.product-page-top {
    margin-top: .5208rem;
    margin-bottom: .4167rem;
}

.product-nav-item {
    margin-right: .1042rem;
    font-size:  .0833rem;
    border-bottom: 1px solid transparent;
    opacity: 1;
    background-color: transparent;
    transition: all .3s cubic-bezier(0,0,.5,1);
    border: 1px solid #000;
    padding: .0677rem  .0833rem;
    border-radius: .2083rem;
    
}

.product-top-tit h4 {
    font-family: "Basis Grotesque Pro";
    font-weight: bold;
    font-size: .1354rem;
    color: #1D1D1F;
    margin-top: .3542rem;
}

.prrduct-page-list-con {
    margin-top: .1563rem;
}

.product-nav-item.on,.product-nav-item:hover {
    border: 1px solid #00BEBE;
    color: #fff;
    background-color: #00BEBE;
}

.prrduct-page-list-con .product-item {
    width: 24%;
    margin-bottom: .1563rem;
}

/* 如果最后一行是3个元素 */
.prrduct-page-list-con .product-item:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}

/* 如果最后一行是2个元素 */
.prrduct-page-list-con .product-item:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

.prrduct-page-list-con .product-item {
    padding: .2188rem .1927rem;
}

.prrduct-page-list-con .product-item h4 {
    font-size: .1667rem;
    margin-bottom: .0833rem;
}

.prrduct-page-list-con .product-item p {
    font-size: .0938rem;
    margin-bottom: .0833rem;
    transition: box-shadow .3s cubic-bezier(0,0,.5,1), transform .3s cubic-bezier(0,0,.5,1);
}

.prrduct-page-list-con .product-item span {
    font-size: .0833rem;
    margin-bottom: .1302rem;
}

.prrduct-page-list-con .product-item .product-item-tag {
    font-size: .0625rem;
    padding: .0573rem .0729rem;
    border-radius: .099rem;
    right: .1042rem;
    bottom: .1042rem;
}


/*分页查询样式*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination li a,
.pagination li span {
    width: 30px;
    height: 30px;
    margin: 0 8px;
    background-color: #000;
    color: #fff;
    display: flex;
    font-size: 14px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.pagination li.active a,
.pagination li.active span {
    background-color: #999;
}

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

.pro-tip {
    color: #ccc;
    font-size: .1563rem;
    margin-top: .2083rem;
    margin-bottom: .4688rem;
}

.pro-main-page {
    margin: .3125rem auto;
}

/*详情样式*/
.product-show-top {
    margin-top: .5156rem;
    margin-bottom: .3906rem;
}

.product-detaile-top-tit h4 {
    font-size: .224rem;
    margin: .1302rem 0 .1198rem;
    font-family: 'HarmonyOS Sans Medium';

}

.product-detaile-top-tit p {
    font-size: .1042rem;
    opacity: 0.7;
    font-family: 'HarmonyOS Sans';
    font-weight: 400;

}

.product-show-pic {
    width: 5.2083rem;
    border: 1px solid #DCDCDC;
}

.product-show-swiper {
    width: 70%;
    padding: 0;
}

.product-show-fy div {
    background-color: #DCDCDC;
    top: 50%;
    transform: translateY(-50%);
    width: .2708rem;
    height: .2708rem;
}

.product-show-fy div i {
    font-size: .1302rem;
    color: #626263;
}

.product-show-fy div:hover {
    background-color: #00BEBE;
    color: #fff;
}
.product-show-fy div:hover i{
    color: #fff;
}

.product-show-prev {
    left: .1042rem;
}

.product-show-next {
    right: .1042rem;
}

.product-show-pagination {
    position: static;
    width: 100%;
    margin-bottom: .1719rem;
}

.product-show-pagination .swiper-pagination-bullet {
    background-color: #000;
}

.product-show-pagination .swiper-pagination-bullet-active {
    background-color: #00BEBE;
}

.product-show-info {
    width: 2.375rem;
    margin-left: .4167rem;
}

.product-show-info-tit h4 {
    font-size: .1458rem;
    margin-bottom: .1719rem;
    font-family: "BasisGrotesquePro";
    font-weight: 600;
}

.product-show-info-tit h4 em {
    color: #6E6E73;
}

.product-show-info-txt {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: .1667rem .1563rem;
    margin-bottom: .3125rem;
}

.product-show-info-txt p {
    font-size: .0938rem;
    margin-bottom: .0521rem;
    font-family: 'HarmonyOS Sans';
    opacity: 0.8;
}

.product-show-info-txt p:last-child {
    margin-bottom: 0;
}

.product-show-detail {
    margin-top: .5208rem;
}

.product-show-list-tit {
    margin-bottom: .2396rem;
}

.product-show-list-tit h4 {
    font-size: .224rem;
    font-family: 'HarmonyOS Sans Medium';
}


.product-show-detail-swiper {
    overflow: unset;
    width: 100%;
    margin: 0;
}

.product-show-detail-item {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    padding-bottom: 2.151rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer;
}
.product-show-detail-swiper .swiper-slide { 
    margin-right: .1563rem !important;
}
.show-pic{
    position: relative;
}
.product-show-detail-item::after, .show-pic::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-show-detail-item:hover::after,.show-pic:hover::after{
    opacity: 1;
}



.product-show-list {
    margin-top: .5677rem;
    padding: .375rem 0 .3906rem;
    background-color: #f5f5f7;
}

.product-show-list-swiper{
    overflow: unset;
    margin: 0;
}




/*blog*/
.news-page {
    padding: .4688rem 0;
    background: #f5f5f7;
}

.news-box {
    width: 6.7917rem;
    margin: 0 auto;
}

.news-top-nav a,
.news-top-nav em {
    color: #000;
    font-size: .0938rem;
    margin-bottom: .1198rem;
    line-height: 1;
}

.news-top-nav em {
    margin: 0 .0781rem;
}

.news-top-nav a:hover {
    color: #00BEBE;
}

.news-top-l h4 {
    font-size: .2604rem;
}

.news-top-r {
    background-color: #fff;
    padding: .0365rem 0;
}

.news-top-r-item {
    margin: 0 .0521rem;
    color: #000;
    font-size: .1042rem;
    padding: .1198rem .2083rem;
}

.news-top-r-item:hover,
.news-top-r-item.on {
    background-color: #00BEBE;
    color: #fff;
}

.news-con-list {
    margin-top: .5625rem;
}


.news-item-txt {
    margin-top: .1563rem;
}

.news-item-txt h4 {
    font-size: .1354rem;
    margin-bottom: .1042rem;
    font-weight: 600;
    line-height: 1.3;
}

.news-item-txt p {
    font-size: .0938rem;
    margin-bottom: .1563rem;
}

.news-item-btn {
    background-color: #00BEBE;
    color: #fff;
    padding: .1042rem .1302rem;
}

.news-item-btn span {
    font-size: .0938rem;
}

.news-item-btn em {
    font-size: .1042rem;
}

.news-item {
    width: 32%;
    background-color: #fff;
    border-radius: .1563rem;
    padding: .1823rem .1927rem;
    margin-bottom: .1563rem;
}

.news-item .news-item-pic {
    margin-bottom: .1042rem;
}

.news-item .news-item-txt {
    flex: 1;
}

.news-item .news-item-btn {
    border: 1px solid #00BEBE;
    transition: all ease-in-out 0.3s;
}

.news-item:hover .news-item-txt h4 {
    color: #00BEBE;
}


/*blog详情*/
.news-show {
    background-color: #f5f5f7;
}

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

.news-show-top-l {
    width: 40%;
}

.news-top-nav a,
.news-top-nav em {
    color: #666;
    font-size: .0938rem;
    margin-bottom: .1979rem;
}

.news-top-nav em {
    margin: 0 .0781rem;
}

.news-top-nav a:hover {
    color: #000;
}

.news-top-time span {
    opacity: 0.8;
    font-size: .0938rem;
    font-weight: 400;
    margin: .2083rem 0;
}

.news-top-time span:first-child {
    margin-right: .2083rem;
}

.news-show-top-r {
    width: 48%;
}

.news-show-top-r-btn {
    background-color: #00BEBE;
    color: #fff;
    width: .5208rem;
    height: .5208rem;
    transition: all ease-in-out .3s;
}

.news-show-top-r-btn span {
    font-size: .2083rem;
}

.news-show-top-r:hover .news-show-top-r-btn {
    transform: scale(0.9, 0.9);
}

.news-top-sc a {
    margin-right: .1042rem;
    transition: all ease-in-out 0.3s;
}

.news-top-sc a:hover {
    transform: translateY(-10px);
}

.news-top-sc a span {
    font-size: .1302rem;
}

.news-show-con {
    margin: .4688rem 0 0;
    padding-bottom: .4688rem;
}

.news-show-con-l,
.news-show-con-r {
    background-color: #fff;
    padding: .1823rem;
}

.news-show-con-l {
    width: 70%;
}

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

.news-show-con-detail img {
    width: auto;
    max-width: 100%;
    margin-bottom: .0781rem;
}

.news-show-con-r {
    width: 25%;
}

.news-show-con-r h4 {
    font-size: .1563rem;
}

.news-show-con-list-item {
    margin-top: .1563rem;
}

.news-show-pic {
    margin-bottom: .0781rem;
}

.news-show-con-list-item-tit {
    font-size: .0866rem;
}

.news-show-con-list-item:hover .news-show-con-list-item-tit {
    color: #00BEBE;
}

.news-show-tit {
    font-size: .2344rem;
    line-height: 1.3;
}


/*cookie 弹窗*/
.cookie-tc {
    background-color: #fff;
    bottom: 10%;
    right: .1042rem;
    width: 2.9583rem;
    border-radius: .4167rem .4167rem 0 .4167rem;
    padding: .2604rem;
    display: none;
    z-index: 999;
}

.cookie-con h4 {
    font-size: .1458rem;
    margin-bottom: .1302rem;
}

.cookie-con p {
    font-size: .0866rem;
    opacity: 0.8;
    margin-bottom: .2083rem;
}

.cookie-btn span,
.cookie-btn em {
    font-size: .0866rem;
    width: 45%;
    padding: .1042rem 0;
    cursor: pointer;
}

.cookie-btn span {
    background-color: #000;
    color: #fff;
}

.cookie-btn em {
    background: #e8e8e8;
    color: #000;
}

.cookie-btn span:hover {
    background-color: #e8e8e8;
    color: #000;
}

.cookie-btn em:hover {
    background-color: #000;
    color: #fff;
}



/*sc-nav*/
.sc-nav {
    bottom: 18%;
    right: .1302rem;
    z-index: 999;
}

.sc-nav-ico {
    width: .2604rem;
    height: .2604rem;
    margin-bottom: .0521rem;
}

.sc-nav-ico span {
    color: #fff;
    font-size: .1302rem;
    line-height: 1;
}

.sc-nav-item:nth-child(1) .sc-nav-ico {
    background: #000;
}

.sc-nav-item:nth-child(2) .sc-nav-ico {
    background: #49E670;
}

.sc-nav-item:nth-child(3) .sc-nav-ico {
    background: #49E670;
}

.sc-nav-item:nth-child(4) .sc-nav-ico {
    background: #3068C7;
}

.sc-nav-item:nth-child(5) .sc-nav-ico {
    background: #3068C7;
}

.sc-nav-item:nth-child(6) .sc-nav-ico {
    background: #000000;
}

.sc-nav-qr {
    top: 0;
    right: .3646rem;
    width: .6771rem;
    height: .6771rem;
    display: none;
    background-color: #fff;
    padding: .0521rem;
}

.sc-nav-qr.on {
    display: block;
}

.sc-nav-txt {
    width: .9375rem;
    height: auto;
}

.sc-nav-txt p {
    font-size: .0938rem;
    text-align: center;
}


/* 搜索弹窗样式优化 */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.search-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    min-width: 500px;
    text-align: center;
}

.search-title {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

.pro-page-form-box {
    display: flex;
    align-items: center;
    border: 2px solid #e0e0e0;
    border-radius: 40px;
    overflow: hidden;
    padding: 5px;
    transition: border-color 0.3s ease;
}

.pro-page-form-box:focus-within {
    border-color: #000;
}

.pro-page-form-box input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 20px;
    font-size: 16px;
    background: transparent;
    line-height: 1;
}

.pro-page-form-box input[type="submit"] {
    width: 50px;
    height: 50px;
    background: #000;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    transition: background-color 0.3s ease;
}

.pro-page-form-box input[type="submit"]:hover {
    background-color: #333;
}

.close-search {
    font-size: 20px;
    cursor: pointer;
    display: block;
    margin: 0 auto .1042rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .search-modal-content {
        min-width: 90%;
        padding: 20px;
    }

    .search-title {
        font-size: 20px;
    }
}

/* 添加到页面的<style>标签内或外部CSS文件中 */

.ab2-play{
    cursor: pointer;
    color: #fff;
    border: 2px solid #fff;
    width: .2708rem;
    height: .2708rem;
}
.ab2-play i{
   color: #fff;
   font-size: .1563rem;
}