.bk-4{ background: #f4f4f4; } .pd-40{ padding-top: 40px; } .position{ height: 60px; display: flex; justify-content: space-between; } .position ul{ flex: 1; display: flex; height: 100%; } .position ul li{ height: 100%; } .position ul li a{ height: 100%; display: flex; align-items: center; color: #333; font-size: 16px; padding: 0 20px; } .position ul li a:hover, .position ul li.active a{ background: #333; color: #fff; } .position .cur{ color: #666; font-size: 16px; display: flex; height: 100%; align-items: center; } .position .cur a{ color: #666; } .position .cur a:hover{ color: #ec1b24; } .product-list { padding-bottom: 40px; } .product-list .product-list-content{ display: flex; justify-content: space-between; } .product-list .pro-nav{ width: 240px; } .product-list .pro-nav .menu-list-title{ height: 90px; background-color: #000000; color: #fff; border-top-right-radius: 20px; padding: 25px 0 0 25px; display: flex; flex-direction: column; } .product-list .pro-nav .menu-list-title h2{ font-size: 24px; margin-bottom: 8px; } .product-list .pro-nav .menu-list-title span{ color: rgba(255, 255, 255, .8); font-size: 16px; } .product-list .pro-nav ul{ border-top: 1px solid #d9d9d9; } .product-list .pro-nav ul li{ background-color: #000000; font-size: 16px; } .product-list .pro-nav ul li .nav-top { display: flex; align-items: center; justify-content: space-between; cursor: pointer; height: 56px; color: #fff; border-bottom: 1px solid #d9d9d9; } .product-list .pro-nav ul li .nav-top a{ color: #fff; font-size: 18px; display: flex; height: 100%; align-items: center; width: 100%; padding: 0 25px; } .product-list .pro-nav ul li .nav-top .icon{ width: 16px; height: 16px; fill: currentColor; overflow: hidden; color: #fff; font-weight: bold; transition: transform .5s; margin-right:25px; } .product-list .pro-nav ul li .nav-top h3{ font-size: 18px; margin-left:25px; } .product-list .pro-nav ul li .pro-nav-title{ display: none; padding: 12px 0; background-color: #444444; } .product-list .pro-nav ul li .pro-nav-title a{ display: flex; align-items: center; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 30px; position: relative; padding-left: 30px; } .product-list .pro-nav ul li .pro-nav-title .icon{ width: 12px; height: 12px; fill: currentColor; overflow: hidden; color: rgba(255, 255, 255, .8); font-weight: bold; margin-right: 8px; } .product-list .pro-nav ul li.active .nav-top, .product-list .pro-nav ul li .nav-top:hover{ background: #ec1b24; } .product-list .pro-nav ul li.active .nav-top .icon, .product-list .pro-nav ul li .nav-top:hover .icon{ transform: rotate(90deg); } .product-list .pro-nav ul li .pro-nav-title a:hover .icon, .product-list .pro-nav ul li .pro-nav-title a.on .icon{ color: #ec1b24; } .product-list .pro-nav ul li .pro-nav-title a.on, .product-list .pro-nav ul li .pro-nav-title a:hover{ color: #ec1b24; } .product-list .pro-nav ul li.active .pro-nav-title{ display: block; } .tel-contaioner{ background: #000000; padding: 25px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .tel-contaioner span{ position: relative; display: flex; } .tel-contaioner span .icon1{ width: 32px; height: 32px; fill: currentColor; overflow: hidden; color: #ec1b24; font-weight: bold; } .tel-contaioner span .icon2{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: flex; margin: auto; width: 14px; height: 14px; fill: currentColor; overflow: hidden; color: #fff; font-weight: bold; } .tel-contaioner strong{ color: #ec1b24; font-size: 24px; margin: 6px 0 10px; } .tel-contaioner p{ color: rgba(255, 255, 255, .6); font-size: 14px; } .product-list .product-list-container{ flex: 1; margin-left: 20px; } .product-list .product-list-container .product-list-info{ display: flex; justify-content: space-between; height: 90px; align-items: center; } .product-list .product-list-container .product-list-info div{ display: flex; align-items: center; } .product-list .product-list-container .product-list-info div .icon{ width: 16px; height: 16px; fill: currentColor; overflow: hidden; color: #333; font-weight: bold; margin-right: 12px; } .product-list .product-list-container .product-list-info div h3{ color: #333; font-size: 24px; } .product-list .product-list-container .product-list-info form{ width: 240px; display: flex; justify-content: space-between; border: 1px solid #bfbfbf; color: #bfbfbf; border-radius: 18px; height: 36px; padding: 0 9px; } .product-list .product-list-container .product-list-info form input{ flex: 1; color: #595959; background: none; border: none; outline: none; color: rgba(0, 0, 0, .6); font-size: 14px; } .product-list .product-list-container .product-list-info form button{ width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border: none; outline: none; background: none; cursor: pointer; } .product-list .product-list-container .product-list-info form .icon{ width: 16px; height: 16px; fill: currentColor; overflow: hidden; color: rgba(0, 0, 0, .6); font-weight: bold; } .product-list .product-list-container ul{ display: flex; flex-wrap: wrap; } .product-list .product-list-container ul li{ width: 32.6%; margin-left: 1.1%; margin-bottom: 1.1%; } .product-list .product-list-container ul li:nth-child(3n+1){ margin-left: 0; } .product-list .product-list-container ul li .img{ height: 3rem; display: flex; justify-content: center; align-items: center; border: 1px #e3e3e3 solid; transition: 0.5s; background: #fff; } .product-list .product-list-container ul li .img img{ max-width: 90%; max-height: 90%; } .product-list .product-list-container ul li h4 { font-size: 16px; color: #333; margin-top: 20px; text-align: center; } .product-list .product-list-container ul li:hover .img { -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } .product-list .product-list-container ul li:hover h4 { color: #ec1b24; } .pagination-box { margin-top: 40px; text-align: center; line-height: 32px; color: #595959; font-size: 14px; } .pagination-box select { margin: 0 8px; } .pagination-box a, .pagination-box span { display: inline-block; width: 32px; height: 32px; line-height: 30px; border: 1px solid #e2e2e2; border-radius: 2px; text-align: center; margin-right: 8px; cursor: pointer; vertical-align: top; color: #333; } .pagination-box a:last-child, .pagination-box span:last-child { margin-right: 0; } .pagination-box a.active, .pagination-box span.active, .pagination-box a.current, .pagination-box span.current, .pagination-box a:hover, .pagination-box span:hover { background-color: #000000; border-color: #000000; color: #fff; } .pagination-box select { height: 32px; border: 1px solid #e2e2e2; box-sizing: border-box; } .pagination-box .prev_disabled, .pagination-box .next_disabled { background-color: transparent !important; border-color: #e2e2e2 !important; color: #e2e2e2 !important; cursor: no-drop; } .pagination-box .prev::before, .pagination-box .prev_disabled::before { content: '<'; } .pagination-box .next::before, .pagination-box .next_disabled::before { content: '>'; } /* 产品详情 start */ .product-detail-section .product-detail-content{ display: flex; justify-content: space-between; } .product-detail-section .product-detail-content .carousel{ width: 40%; height: 4.4rem; } .product-detail-section .product-detail-content .carousel .swiper-container1{ height: 100%; border: 1px #efefef solid; } .product-detail-section .product-detail-content .carousel .swiper-slide{ height: 4rem; display: flex; align-items: center; justify-content: center; } .product-detail-section .product-detail-content .carousel .swiper-slide img{ max-width: 96%; max-height: 96%; } .product-detail-section .product-detail-content .carousel .swiper-button-prev1, .product-detail-section .product-detail-content .carousel .swiper-button-next1{ width: 30px; height: 30px; background: #333; } .product-detail-section .product-detail-content .carousel .swiper-button-next, .product-detail-section .product-detail-content .carousel .swiper-button-prev{ --swiper-navigation-size: 16px;/* 设置按钮大小 */ --swiper-theme-color: #fff;/* 设置Swiper风格 */ } .product-detail-section .product-detail-content .carousel .swiper-pagination-bullet-active{ background: #ec1b24; } .product-detail-section .product-detail-content .product-detail-info{ width: 55%; } .product-detail-section .product-detail-content .product-detail-info h2{ color: #ec1b24; font-size: 24px; margin: 54px 0 14px; } .product-detail-section .product-detail-content .product-detail-info h4{ color: #999; font-size: 14px; } .product-detail-section .product-detail-content .product-detail-info .product-describe{ padding-top: 20px; margin-top: 20px; border-top: 1px #ccc solid; color: #666; font-size: 16px; line-height: 26px; } .product-detail-section .product-detail-content .product-detail-info a{ display: flex; width: 160px; height: 40px; justify-content: center; align-items: center; background: #ec1b24; font-size: 16px; color: #fff; margin-top: .46rem; } .product-detail-section .product-detail-content .product-detail-info .icon{ width: 16px; height: 16px; fill: currentColor; overflow: hidden; color: #fff; margin-left: 6px; } .proxq-conb{ margin:30px auto 0; padding-bottom: 40px; display: flex; justify-content: space-between; } .proxq-conb .left{ width: 74%; } .proxq-conb .left .tit{ border-top: 2px solid #333; color: #333; font-size: 24px; padding: 12px 0; position: relative; box-sizing: border-box; } .proxq-conb .left .tit::before{ content: ''; position: absolute; left: 0; top: -2px; height: 2px; width: 120px; background: #ec1b24; } .proxq-conb .left .con{ padding: .4rem .3rem; color: #666; font-size: 16px; line-height: 26px; background: #fff; } .proxq-conb .left .con img{ max-width: 100%; } .proxq-conb .right{ width: 24%; } .proxq-conb .right .tit{ border-top: 2px solid #333; color: #333; font-size: 24px; padding: 12px 0; position: relative; box-sizing: border-box; } .proxq-conb .right .tit::before{ content: ''; position: absolute; left: 0; top: -2px; height: 2px; width: 120px; background: #ec1b24; } .proxq-conb .right .con ul li{ margin-bottom: 20px; } .proxq-conb .right .con ul li .img{ height: 2.5rem; display: flex; justify-content: center; align-items: center; border: 1px #e3e3e3 solid; transition: 0.5s; background: #fff; } .proxq-conb .right .con ul li .img img{ max-width: 90%; max-height: 90%; } .proxq-conb .right .con ul li h4 { font-size: 16px; color: #333; margin-top: 20px; text-align: center; } .proxq-conb .right .con ul li:hover div { -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } .proxq-conb .right .con ul li:hover h4 { color: #ec1b24; } .news-section1{ background: #f4f4f4; padding: 40px 0; } .news-section1 .news-content{ display: flex; justify-content: space-between; } .news-section1 .news-content .menu-list{ width: 240px; } .news-section1 .news-content .menu-list .menu-list-title{ height: 90px; background-color: #000000; color: #fff; border-top-right-radius: 20px; padding: 25px 0 0 25px; display: flex; flex-direction: column; } .news-section1 .news-content .menu-list .menu-list-title h2{ font-size: 24px; margin-bottom: 8px; } .news-section1 .news-content .menu-list .menu-list-title span{ color: rgba(255, 255, 255, .8); font-size: 16px; } .news-section1 .news-content .menu-list ul{ border-top: 1px solid #d9d9d9; background: #fff; } .news-section1 .news-content .menu-list ul li{ font-size: 16px; } .news-section1 .news-content .menu-list ul li a { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0 25px; height: 56px; color: #333; border-bottom: 1px solid #d9d9d9; } .news-section1 .news-content .menu-list ul li:last-child a { border-bottom: none; } .news-section1 .news-content .list-container{ flex: 1; margin-left: 30px; } .news-section1 .news-content .list-container ul{ margin-top: 40px; } .news-section1 .news-content .list-container ul li{ margin-bottom: 10px; display: flex; padding: 10px 0 10px 20px; box-sizing: border-box; background: #fff; } .news-section1 .news-content .list-container ul li a{ width: 100%; display: flex; align-items: center; justify-content: space-between; } .news-section1 .news-content .menu-list h3{ color: #333; font-size: 24px; margin: 30px 0 12px; } .news-section1 .news-content .menu-list ul li.active span, .news-section1 .news-content .menu-list ul li:hover span{ color: #ec1b24; } .news-section1 .news-content ol li{ margin-bottom: 12px; } .news-section1 .news-content ol li .img{ height: 180px; display: flex; justify-content: center; align-items: center; border: 1px #e3e3e3 solid; transition: 0.5s; background: #fff; } .news-section1 .news-content ol li .img img{ max-width: 90%; max-height: 90%; } .news-section1 .news-content ol li h4 { font-size: 16px; color: #333; margin-top: 20px; text-align: center; } .news-section1 .news-content ol li:hover div { -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } .news-section1 .news-content ol li:hover h4 { color: #ec1b24; } .news-section1 .list-container ul li a{ display: flex; justify-content: space-between; padding: 20px 0; overflow: hidden; } .news-section1 .list-container ul li .new-info{ flex: 1; margin-right: .3rem; } .news-section1 .list-container ul li .new-info h3 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; transition: transform .5s; } .news-section1 .list-container ul li .new-info p { margin-top: 14px; font-size: 14px; color: #666; transition: transform .5s; } .news-section1 .list-container ul li .time{ display: flex; flex-direction: column; width: 180px; height: 80px; text-align: center; border-left: 1px solid #d9d9d9; padding-top: 8px; } .news-section1 .list .time b { font-size: 42px; color: #000000; } .news-section1 .list .time p { font-size: 16px; color: #595959; margin-top: 10px; } .news-section1 .list-container ul li:hover .new-info h3, .news-section1 .list-container ul li:hover .new-info p { transform: translateX(10px); } .news-section1 .list-container ul li:hover .new-info h3{ color: #ec1b24; } .news-section1 .main-container{ background: #fff; flex: 1; margin-left: 50px; padding: 50px 20px; } .news-section1 .main-container .news-title{ padding-bottom: 20px; border-bottom: 1px #cecece solid; } .news-section1 .main-container .news-title h2{ color: #333; font-size: 24px; margin-bottom: 14px; } .news-section1 .main-container .news-title p{ color: #666; font-size: 14px; margin-bottom: 16px; } .news-section1 .main-container .news-title p a{ color: #666; font-size: 14px; } .news-section1 .main-container .news-title p a:hover{ color: #ec1b24; } .news-section1 .news-detail-container{ padding: 20px 0; color: #666; font-size: 16px; line-height: 26px; } .news-section1 .news-detail-container img{ max-width: 100%; } .news-detail-section1 .page-shar { padding: 20px 0; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; display: flex; justify-content: space-between; align-items: center; } .news-detail-section1 .page-shar ul{ flex: 1; } .news-detail-section1 .page-shar ul li{ color: #8c8c8c; font-size: 14px; line-height: 30px; } .news-detail-section1 .page-shar ul li a{ color: #333; } .news-detail-section1 .page-shar ul li a:hover{ color: #ec1b24; } .news-detail-section1 .relation-news h2{ color: #333; font-size: 24px; padding: 16px 0; position: relative; } .news-detail-section1 .relation-news h2::before{ content: ''; position: absolute; left: 0; width: 30px; height: 2px; background: #ec1b24; bottom: 0; } .news-detail-section1 .relation-news ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top:20px; } .news-detail-section1 .relation-news ul li{ width: 48%; } .news-detail-section1 .relation-news ul li a{ display: block; color: #666; font-size: 16px; line-height: 24px; margin-bottom: 14px; } .news-detail-section1 .relation-news ul li a:hover{ color: #ec1b24; } .contact-page{ background: #f4f4f4; } .contact-page .contact-1{ display: flex; justify-content: space-between; } .contact-page .contact-1 .left{ flex: 1; padding:40px 1rem 20px 20px; box-sizing: border-box; background: #fff; } .contact-page .contact-1 .left h2{ color: #333; font-size: 24px; padding-bottom: 18px; padding-left: 18px; border-bottom: 1px #cecece solid; margin-bottom: 18px; } .contact-page .contact-1 .contact-content{ padding: 0 18px; color: #666; font-size: 16px; line-height: 30px; } .contact-page .contact-1 .btns{ margin-top: 60px; } .contact-page .contact-1 .btns a{ width: 160px; height: 36px; border: 1px #ec1b24 solid; color: #333; font-size: 14px; display: flex; justify-content: center; align-items: center; position: relative; border-radius: 4px; overflow: hidden; z-index: 2; } .contact-page .contact-1 .btns .icon{ width: 16px; height: 16px; fill: currentColor; overflow: hidden; color: #333; margin-right: 4px; } .contact-page .contact-1 .btns a::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ec1b24; transition: .5s; z-index: -1; } .contact-page .contact-1 .btns a:hover::before{ width: 100%; } .contact-page .contact-1 .btns a:hover{ color: #fff; z-index: 2; position: relative; } .contact-page .contact-1 .btns a:hover .icon{ color: #fff; z-index: 2; } .contact-page .contact-1 .map{ width: 48%; height: 480px; } .contact-page .BMap_bubble_content{ color: #333; font-size: 14px; line-height: 30px; } .message { padding: .7rem 0 0.9rem; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #f4f4f4; } .message h2 { font-size: 30px; color: #333; margin-bottom: 6px; } .message>span { width: 20px; height: 2px; background: #db0d0d; } .message form{ margin-top: 40px; } .message form .mte { display: flex; justify-content: space-between; } .message form .mte div { width: 32%; display: flex; justify-content: space-between; align-items: center; border: 1px #dcdcdc solid; margin-bottom: 20px; background: #fff; } .message form .mte div span { width: 50px; margin-right: 14px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-right: 2px #dcdcdc solid; } .message form .mte div span .icon { width: 16px; height: 16px; fill: currentColor; overflow: hidden; color: #333; } .message form .mte div input { flex: 1; font-size: 16px; color: #333; line-height: 50px; border: none; background: none; } .message form .fxl { width: 100%; height: 140px; border: 1px #dcdcdc solid; padding: 14px 0; box-sizing: border-box; font-size: 16px; color: #333; display: flex; justify-content: space-between; background: #fff; } .message form .fxl span { width: 50px; height: 16px; margin-right: 14px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-right: 2px #dcdcdc solid; } .message form .fxl span .icon { width: 16px; height: 16px; fill: currentColor; overflow: hidden; color: #333; } .message form .fxl textarea { flex: 1; font-size: 16px; color: #333; line-height: 16px; border: none; resize: none; } .message form input::-webkit-input-placeholder { color: #666; font-family: "微软雅黑"; } .message form input:-moz-placeholder { color: #666; font-family: "微软雅黑"; } .message form input::-moz-placeholder { color: #666; font-family: "微软雅黑"; } .message form input:-ms-input-placeholder { color: #666; font-family: "微软雅黑"; } .message form textarea::-webkit-input-placeholder { color: #666; font-family: "微软雅黑"; } .message form textarea:-moz-placeholder { color: #666; font-family: "微软雅黑"; } .message form textarea::-moz-placeholder { color: #666; font-family: "微软雅黑"; } .message form textarea:-ms-input-placeholder { color: #666; font-family: "微软雅黑"; } .message form .con-btn { width: 360px; height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 18px; color: #fff; border: none; background: #ff0000; cursor: pointer; transition: 0.4s; margin: 20px auto 0; border-radius: 6px; } .message form .con-btn:hover { color: rgba(255, 255, 255, 0.7); } /*关于我们 start*/ .about{ padding: 40px 0; } .about .content{ color: #333; font-size: 16px; line-height: 30px; } .about .content img{ max-width: 100%; } /*关于我们 end*/ .honor { padding: 40px 0; } .honor ul{ display: flex; flex-wrap: wrap; } .honor ul li{ width: 24.4%; margin-left: .8%; margin-bottom: .8%; background: #fff; } .honor ul li:nth-child(4n+1){ margin-left: 0; } .honor ul li .img { width: 100%; height: 400px; border: 1px solid #d9d9d9; background-color: #fff; overflow: hidden; display: flex; justify-content: center; align-items: center; } .honor ul li .img img{ max-width: 100%; max-height: 100%; transition: .5s; } .honor ul li h3{ color: #333; font-size: 16px; margin-top: 14px; text-align: center; } .honor ul li:hover .img img{ transform: scale(1.04); } .factory { padding: 40px 0; } .factory ul{ display: flex; flex-wrap: wrap; } .factory ul li{ width: 24.4%; margin-left: .8%; margin-bottom: .8%; background: #fff; } .factory ul li:nth-child(4n+1){ margin-left: 0; } .factory ul li .img { width: 100%; height: 2.8rem; overflow: hidden; position: relative; } .factory ul li .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-width: auto; min-height: auto; width: 100%; height: 100%; transform: none; transition: transform .5s ease; } .factory ul li:hover .img img{ transform: scale(1.04); } .factory ul li h3{ color: #333; font-size: 16px; margin-top: 14px; text-align: center; } .partner ul li .img { height: 160px; } .search { padding-top: 80px; } .search form{ display: flex; width: 60%; justify-content: space-between; border: 1px solid #bfbfbf; height: 50px; border-radius: 6px; overflow: hidden; margin: auto; } .search form .key{ flex: 1; color: #595959; background: none; border: none; outline: none; color: rgba(0, 0, 0, .6); font-size: 14px; padding-left: 10px; } .search form .sub{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: none; outline: none; background: #333; color: #fff; cursor: pointer; } .download-list{ padding: 40px 0 60px; } .download-list ul { display: flex; flex-wrap: wrap; justify-content: space-between!important; } .download-list ul li { width: 49.5%; margin-bottom: 1%; box-sizing: border-box; background: #fff; transition: .5s; position: relative; } .download-list ul li::before { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #ef1818; transition: .5s; } .download-list ul li a{ display: flex; position: relative; align-items: center; padding: 36px .2rem 36px .5rem; } .download-list ul li a .icon{ width: 36px; height: 36px; fill: currentColor; overflow: hidden; color: #666; } .download-list ul li div { display: flex; flex-direction: column; margin-left: 20px; } .download-list ul li div h3 { color: #666; font-size: 18px; margin-bottom: 10px; } .download-list ul li div p { color: #999; font-size: 14px; } .download-list ul li:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .2); } .download-list ul li:hover::before { width: 100%; }