@charset "utf-8";
/* ===================首页样式========================== */

.inbanner{width: 100%;overflow: hidden;max-height: 650px; position: relative;}
.inbanner-img{width: 100%;position: relative;}
.inbanner-img-pc,.banner-img-mb{width: 100%;object-fit: cover;}
.inbanner-img-pc{display: block;}
.inbanner-img-mb{display: none;}
.inbanner .swiper-pagination{bottom: 30px;z-index: 2;}
.inbanner .swiper-pagination-bullet {width: 42px;height: 3px;border-radius: 0;background: #535353;opacity: 1;margin: 0 2px !important;transition: all .4s ease;}
.inbanner .swiper-pagination-bullet-active {opacity: 1;background: #fff100;width: 40px;height: 3px;border-radius: 0;}
.inbannerbox-prev,.inbannerbox-next{width: 33px;height: 55px; background: url('../images/index/Arrlft.png') no-repeat;position: absolute;left:14%;top: 38%;z-index: 3;transition: all .4s ease;cursor: pointer;}
.inbannerbox-next{transform: rotate(180deg); left:auto;right: 14%;}
.inbanner .inbannerbox-prev:hover,.inbanner .inbannerbox-next:hover{background: url(../images/index/ArrY.png) no-repeat;}
/* 菜单栏 */
.inmenu{width: 100%;padding: 58px 0;border-bottom: 1px solid #ededed;}
.inmenu-item{width: 100%;}
.inmenu-item li{width:23.46%;float: left;margin: 0 1%;cursor: pointer;position: relative;}
.inmenu-item li:first-child{margin-left: 0;position: relative;}
.inmenu-item li:first-child i{width: 42px;height:42px;border-radius: 50%;border: 2px solid #fff; background:url('../images/public/video..png') no-repeat center;position: absolute;left:0;top: 0;right: 0;bottom: 0;margin: auto; text-align: center;line-height: 42px;cursor: pointer;z-index: 66666;}
.inmenu-item li:first-child i:hover{filter: contrast(86%)}
.inmenu-item li:last-child{margin-right: 0;}
.inmenu-img{width: 100%;overflow: hidden;border-radius: 8px;max-height: 209px;}
.inmenu-img img{max-width: 100%;max-height: 100%; object-fit: cover;transition: all .6s ease;}
.inmenu-item li:hover .inmenu-img img{transform: scale(1.2);}
.inmenu-cont{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 2;}
.inmenu-cont h2{font-size: 16px;color:#fff;font-weight: bold;opacity: 0;transition: all .6s ease;}
.inmenu-item li::after{content: '';width: 100%;height: 100%;background-color: rgba(0, 0, 0, .0);position: absolute;left: 0;top: 0;border-radius: 8px;}
.inmenu-item li:hover .inmenu-cont h2{opacity: 1;}
.inmenu-item li:hover::after{background-color: rgba(0, 0, 0, .6)}
/* 产品菜单 */
.inprod{width: 100%;padding: 65px 0 102px;}
.inprod-menu{ width: 100%;padding: 0 166px;}
.inprod-menu ul{width: 100%;display: flex;justify-content: center;align-items: center;}
.inprod-menu li{float: left; width: 14.28%;height: 150px;border-radius: 5px;}
.inprod-menu li.ontrue{background-color: #fff100;}
.inprod-menuiten{display: block; width:100%;height: 150px;text-align: center;padding-top: 20px;}
.inprod-menuimg{width: 100%;height: 100px;}
.inprod-menuimg img{max-width: 100%;max-height: 100%;object-fit: cover;}
.inprod-menucont{width: 100%;}
.inprod-menucont h2{font-size: 14px;color: #222222;}
/* 产品列表 */
.inprod-item{width: 100%;margin-top: 40px;}
.inprod-item ul{margin-left: -2%;display: none;}
.inprod-item ul.ontrue{display: block;}
.inprod-item li{float: left;width: 18%;margin-left: 2%;box-shadow: 5px 0 54px rgba(0, 0, 0, .07);margin-bottom: 30px;opacity: 0;}
.inprod-item ul.ontrue li{animation: toTop 1s ease both;}
@keyframes toTop{0%{opacity: 0;transform: translateY(80px);}100%{opacity: 1;transform: translateY(0);}}
.inprod-itemcont{display: block;width: 100%;position: relative;}
.inprod-itemcont::after{content: "";width: 0%;height: 3px;background-color: #fff100; position: absolute;left: 0;bottom: 0;transition: all .4s ease;}
.inprod-item  li:hover .inprod-itemcont::after{width: 100%;right: auto;left: 0;}
.inprod-img{width: 100%;height: 258px;overflow: hidden;}
.inprod-img img{width: 100%;height:100%;object-fit: cover;transition: all .4s ease;transform: scale(0.96);}
.inprod-item li:hover .inprod-img img{transform: scale(1);}
.inprod-cont{width: 100%;text-align: center;padding: 10px 20px;}
.inprod-cont h2{font-size: 14px;color: #222222;line-height: 24px;height: 54px;}
.inprod-cont span{font-size: 14px;color: #999999;line-height: 24px;height: auto;display: inline-block;}

/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900/1024/1200) */
}

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */
    .inbannerbox-prev,.inbannerbox-next{left: 8%;}
    .inbannerbox-next{right: 8%;left: auto;}
    .inprod {padding: 60px 0 68px;}
    .inprod-cont {padding: 10px 18px;}
}

@media all and (max-width:1439px) {
    /* 1360 × (768) */
}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */
}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
    .inprod-cont {padding: 10px 8px;}
    .inprod-img {height: 188px; display: flex;justify-content: center;}
    .inprod-img img{max-width: 100%;max-height:100%;width:unset;height: unset;}
    .inprod-menu {padding: 0 88px;}
}

@media all and (max-width:1151px) {
    /* 1024 × (600/768) */
    .inprod-menu{padding: 0 48px;}
    .inprod {padding: 60px 0 60px;}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .inbanner .swiper-pagination{bottom: 12px;}
    .inmenu{padding: 38px 0;}
    .inprod-menu{padding: 0 18px;}
    .inprod{padding: 38px 0 30px;}
    .inprod-item li {width: 31%;}
    .inprod-cont span {height: 25px;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .inbanner{min-height: 220px;}
    .inbanner-img-pc{display: none;}
    .inbanner-img-mb{display: block;width: 100%;min-height: 220px; object-fit: cover;}
    .inbanner .swiper-pagination{bottom: 6px;}
    .inbannerbox-prev,.inbannerbox-next{left: 4%;}
    .inbannerbox-next{right: 4%;left: auto;}
    .inmenu-cont h2{opacity: 1;}
    .inmenu-item li::after {background-color: rgba(0, 0, 0, 0.3);}
    .inprod-menuimg {height: 88px;}
    .inprod-cont h2 {line-height: 22px;}
    .inmenu-item li{width: 48.46%;margin-bottom: 10px;}
    .inmenu-item li:nth-child(even){margin-right: 0;}
    .inmenu-item li:nth-child(odd){margin-left: 0;}
    .inprod-menu ul{flex-wrap: wrap;}
    .inprod-menu li{width: 33.28%;}
    .inprod-menu li:first-child{width: 100%;}
    .inprod-item li{width: 48%;}
  
}