@charset "utf-8";
/* =====================内页样式======================== */
/* 分页 */
.paging{width: 100%;font-size: 0;text-align: center;user-select: none;}
.paging-menu, .paging-menu a, .paging-menu li, .paging-menu li > span, .paging-skip, .paging-hint, .paging-skip input, .paging-skip button{display: inline-block;vertical-align: middle;}
.paging-menu a, .paging-menu li > span{width: 50px;height: 50px;line-height: 50px;box-shadow: 0px 0px 19.6px 0.4px rgba(85, 98, 151, 0.1);margin: 5px;font-size: 16px;color: #59545d;transition: all .4s ease;border-radius: 50%;background-color: #fff;}
.paging-menu a:hover, .paging-menu a.active, .paging-menu li.active > span , .paging a.on{border-color: #004ea1;background-color: #004ea1;color: #fff;}
.paging-skip{margin-left: 8px;}
.paging-hint{font-size: 14px;color: #999;font-weight: 300;margin: 0 8px;}
.paging-hint:first-of-type{margin: 0;}
.paging-skip input{width: 54px;text-align: center;height: 38px;border: 1px solid #e1e1e1;font-size: 14px;color: #666;border-radius: 3px;transition: all .4s ease;}
.paging-skip input:focus{border-color: #004ea1;}
.paging-skip button{color: #555;font-size: 14px;padding: 0 18px;border: 1px solid #e1e1e1;transition: all .4s ease;height: 38px;background: #fff;cursor: pointer;border-radius: 3px;}
.paging-skip button:hover{background-color: #004ea1;color: #fff;border-color: #004ea1;}
.paging-hint span{color: #004ea1;}
@media all and (max-width:1000px) {.paging-menu a{margin: 4px 2px;width: 40px;height: 40px;font-size: 13px;line-height: 40px;}.paging-skip{width: 100%;margin-left: 0;}}

/* 内页公共 */
.proBan-bg{overflow: hidden;}
.proBan-bg img{width: 100%;min-height: 250px;animation: proBan-bg 2s linear forwards;transform: scale(1.3);}
.proBan-con{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.proBan-con .title{text-transform: uppercase;font-weight: 700;animation: proBan-text .5s linear forwards;opacity: 0;}
@keyframes proBan-bg {0%{transform: scale(1.3);}100%{transform: scale(1);}}
@keyframes proBan-text {0%{opacity: 0; transform: translateY(80px);}100%{opacity: 1; transform:translateY(0);}}
.product .proNav{flex-wrap: wrap;justify-content: flex-start;}
.proNav{margin-left: -20px;}
.proNav-item{min-width: 130px;margin:20px 0 0 20px; padding: 8px 30px;border: 2px solid #004ea1;position: relative;border-radius: 40px;overflow: hidden;transition: all .4s ease;}
.proNav-item::after{content: "";position: absolute; left: -40px;bottom: -80px;width: 400px;height: 400px;border-radius: 50%;transform: scale(0);transform-origin: left bottom;background: #004ea1;transition: all .6s ease;}
.proNav-item span{position: relative;z-index: 2;}
.proNav-item:hover,.proNav-item.active{color: #fff;}
.proNav-item:hover::after,.proNav-item.active::after{transform: scale(1);}
/* 产品中心 */
.proList{justify-content: space-between;}
.proList::after{content: "";width: 31.5%;}
.proItem{width: 31.5%;}
.proImg{height: 350px;border-radius: 10px;background: #f5f5f5;}
.proImg img{max-width: 70%;max-height: 70%;transition: all .4s ease;}
.proCon{padding-left: 20px;}
.proCon .more{width: 140px;height: 40px;border-radius: 30px;border: 2px solid #222;}
.proItem:hover .proImg img{transform: scale(1.08);}
.proItem:hover .proCon .title{color: #004ea1;}
.proItem:hover .proCon .more{background: #004ea1;border-color: #004ea1;color: #fff;}

@media all and (max-width:1590px) {
    .proImg{height: 270px;}
    .proNav-item{font-size: 15px;padding: 5px 15px;}
}

/* ------------------------手机端-------------------------- */
@media all and (max-width:680px) {
    /* 移动终端 360 适配 */
    .proItem{width: 100%;}
    .proImg{height: 250px;}
    .proCon{padding-left: 10px;}
    .proCon .more{margin-top: 20px;}
    .proNav-box{overflow-x: auto;}
    .proNav{margin-left: 0;flex-wrap: nowrap;white-space: nowrap;}
    .product .proNav{flex-wrap: nowrap;}
    .proNav-item{min-width: unset;overflow: visible;margin: 0 10px !important;padding: 6px 20px;width: auto;}
    .proNav-item::after{display: none;}
    .proNav-item.active,.proNav-item:hover{background: #004ea1;}

    .pages-pagination .swiper-pagination-bullet{width: 10px;height: 10px;}

}