/* header-nav-box ------------------------- 椤堕儴瀵艰埅 */ /* footer-modules ------------------------- 搴曢儴瀵艰埅 */ /* left-btns-modules ---------------------- 宸﹁竟鎸夐挳 */ /* news-list-modules ---------------------- 鏂伴椈鍒楄〃 */ .theme-color{ color: #F97800 !important; } .theme-bg-color{ background-color: #F97800 !important; } body { display: -ms-flexbox !important; display: flex !important; -ms-flex-direction: column !important; flex-direction: column !important; min-height: 100vh; } /* 椤堕儴瀵艰埅 */ .top-nav-height{ padding-top: 3rem; } .header-nav-modules .header-nav{ line-height: 3rem; background-color: rgba(255,255,255,1); /* border-bottom: 1px solid #ddd; */ font-size: 0.75rem; } .header-nav-modules .header-nav .icon-logo{ width: 4.9rem; height: 1.1rem; } .header-nav-modules .header-nav .item-nav.active{ position: relative; color: #F97800; } .header-nav-modules .header-nav .item-nav:hover{ color: #F97800; } .header-nav-modules .header-nav .item-nav.active::after{ position: absolute; left: 0; right: 0; bottom: 0; margin: auto; content: ''; display: block; width: 1rem; height: 2px; background-color: #F97800; border-radius: 1px; } .header-nav-modules .second-nav-list{ left: 0; right: 0; bottom: 0; transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); background-color: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); } .header-nav-modules .second-nav-list .sec-nav-item{ border-top: 1px solid #f4f4f4; line-height: 2.5; font-size: 0.7rem; } .header-nav-modules .second-nav-list .sec-nav-item:first-child{ border-top: none; } .header-nav-modules .second-nav-list .sec-nav-item.active{ color: #f94b16; } .header-nav-modules .second-nav-list .sec-nav-item:hover{ color: #f94b16; } .header-nav-modules .header-nav [withSecondNav]:hover [secondNav]{ display: block !important; } .index-page .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ width: 1.85rem; height: 0.15rem; border-radius: 0; background-color: rgba(98, 98, 98, 1); } .index-page .swiper-pagination-bullet-active{ width: 1.85rem; height: 2px; background-color: red; } .index-page .swiper-container-horizontal>.swiper-pagination-bullets, .index-page .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 20px; } .index-page .swiper-button-next::after, .index-page .swiper-button-prev::after{ position: absolute; left: 0; top: 0; right: 1rem; bottom: 0; margin: auto; display: block; content: ''; width: 1.5rem; height: 1.5rem; border-top: 0.1rem solid #f94b16; border-right: 0.1rem solid #f94b16; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .index-page .swiper-button-next, .index-page .swiper-container-rtl .swiper-button-prev{ right: 0; padding: 2rem 2rem 2rem 0; border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; background-color: rgba(0, 0, 0, 0.1); background-image: none; } .index-page .swiper-button-prev::after{ left: 0.7rem; right: initial; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .index-page .swiper-button-prev, .index-page .swiper-container-rtl .swiper-button-next{ left: 0; padding: 2rem 0 2rem 2rem; border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; background-color: rgba(0, 0, 0, 0.1); background-image: none; } /* 2020-03-06 cxx */ .video-modules .video-header::after{ content: ''; display: block; width: 0.5rem; height: 0.5rem; border-right: 1px solid #333; border-top: 1px solid #333; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .video-modules .video-body-list{ margin-right: -0.75rem; } .video-modules .video-body-list .video-item{ padding-bottom: 60%; cursor: pointer; } .video-modules .video-body-list .video-item::after{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; display: block; background-color: rgba(0, 0, 0, 0); transition: all 0.4s; -webkit-transition: all 0.4s; } .video-modules .video-body-list .video-item .icon-play{ left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; color: #fff; line-height: 1; transition: all 0.4s; -webkit-transition: all 0.4s; } .video-modules .video-body-list .video-item .icon-play::after{ position: absolute; z-index: -1; top: -0.25rem; left: -1rem; right: -1rem; bottom: -0.25rem; content: ''; display: block; border-radius: 1rem; border: 1px solid #fff; background-color: transparent; transition: all 0.4s; -webkit-transition: all 0.4s; } .video-modules .video-body-list .video-item:hover::after { background-color: rgba(0, 0, 0, 0.2); } .video-modules .video-body-list .video-item:hover .icon-play{ color: #333; } .video-modules .video-body-list .video-item:hover .icon-play::after{ background-color: #fff;; } .diagon-center-video{ top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); } .diagon-center-video .video-box{ padding-bottom: 50%; } /* 搴曢儴瀵艰埅 */ .footer-modules{ font-size: 0.7rem; color: #394050; } .footer-modules .nav-list{ padding: 3rem 0; line-height: 3; } .footer-modules .nav-list .title{ font-size: 0.8rem; color: #333; font-weight: bolder; } .footer-modules .icon-QR{ width: 5rem; height: 5rem; } /* 宸﹁竟鎸夐挳 */ .left-btns-modules{ left: 0; top: 50%; transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); width: 3rem; } .left-btns-modules .icon-server-box{ height: 3rem; background-color: #f94b16; } .left-btns-modules .icon-server-box .icon-server{ left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 1.3rem; height: 1.3rem; } .left-btns-modules .top-box .icon-top{ width: 0.6rem; height: 0.35rem; } /* 鏂伴椈鍒楄〃 */ .news-list-modules .news-list{ margin-top: 10rem; margin-right: -1.5rem; } .news-list-modules .news-list .item-news{ margin-right: 1.5rem; margin-bottom: 2.75rem; } .news-list-modules .news-list .item-news .news-img{ padding-bottom: 58%; } .news-list-modules .news-list .item-news .footer-mess-box{ padding: 1.5rem; box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.14); } .news-list-modules .news-list .item-news .footer-mess-box .title{ font-size: 1.2rem; } .page-nav-list-modules{ margin: 1.5rem 0 4.25rem 0; line-height: 2rem; } .page-nav-list-modules .item-nav{ margin: 0.4rem; width: 2rem; height: 2rem; border: solid thin #eaeaea; } .page-nav-list-modules .item-nav::after{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transform: translate3d(-0.1rem, 0, 0) rotate(45deg); -webkit-transform: translate3d(-0.1rem, 0, 0) rotate(45deg); content: ''; display: block; width: 0.5rem; height: 0.5rem; border-right: 1px solid #333; border-top: 1px solid #333; } .page-nav-list-modules .item-nav.rotate180{ transform: rotate(180deg); -webkit-transform: rotate(180deg); } .page-nav-list-modules .item-paginate{ background-color: #f4f4f4; width: 2rem; } .page-nav-list-modules .item-paginate.active{ background-color: #F97800 !important; color: #fff; } /* 鏂伴椈鍐呭涓讳綋 */ .news-details-modules{ margin-top: 4rem; margin-bottom: 4rem; } .news-details-modules .big-title{ margin-bottom: 2rem; font-size: 1.3rem; } .news-details-modules img{ display: inline-block; } /* 鍏充簬鎴戜滑 */ .aboutUs-page .big-title{ font-size: 2.7rem; color: #000000; } .aboutUs-page .center-txt{ left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); } .aboutUs-page .center-txt .title{ font-size: 1.8rem; } .aboutUs-page .center-txt .txt{ font-size: 0.9rem; } /* 宸濈敯浠嬬粛 */ .aboutUs-page .introduce-modules .swiper-img-box{ width: 76%; } .aboutUs-page .introduce-modules .swiper-pagination{ width: auto !important; bottom: 0; left: 50%; transform: translate3d(0, 50%, 0); -webkit-transform: translate3d(0, 50%, 0); } .aboutUs-page .introduce-modules .swiper-pagination-bullet{ display: block; width: 2.8rem; height: 2.25rem; line-height: 2.25rem; color: #f3851a; text-align: center; background-color: #fff; border-radius: 0; margin: 0; opacity: 1; } .aboutUs-page .introduce-modules .swiper-pagination-bullet-active{ background-color: #f3851a; color: #fff; } .aboutUs-page .introduce-modules .introduce-txt-box{ width: 70%; min-height: 10rem; margin-left: auto; margin-top: 2rem; margin-bottom: 2rem; } /* 宸濈敯鐨勭悊蹇 */ .aboutUs-page .idea-modules{ margin-bottom: 5.4rem; } .aboutUs-page .idea-modules .item-idea{ margin-right: 1rem; background-color: #f5f7fb; border-radius: 0.36rem; } .aboutUs-page .idea-modules .item-idea .idea-img{ width: 5rem; height: 5rem; } /* 宸濈敯鐨勮崳瑾 */ .aboutUs-page .honer-modules{ padding-bottom: 4.7rem; } .aboutUs-page .honer-modules .swiper-button-next, .aboutUs-page .honer-modules .swiper-button-prev{ position: absolute; top: 50%; width: 1rem; height: 1.86rem; margin-top: -0.93rem; z-index: 10; cursor: pointer; background-size: 1rem 1.86rem; background-position: center; background-repeat: no-repeat; } .aboutUs-page .honer-modules .swiper-button-prev, .aboutUs-page .honer-modules .swiper-container-rtl .swiper-button-next{ left: -2.5rem; background-image: url('/public/index/icon/icon-com-left-big.png'); } .aboutUs-page .honer-modules .swiper-button-next, .aboutUs-page .honer-modules .swiper-container-rtl .swiper-button-prev{ right: -2.5rem; background-image: url('/public/index/icon/icon-com-right-big.png'); } /* 鍙戝睍鍘嗙▼ */ .develop-modules .develop-list{ margin-left: 4rem; } .develop-modules .develop-list::before{ position: absolute; left: 0.26rem; top: 1.4rem; bottom: 0; margin: auto; content: ''; display: block; width: 1px; background-color: #ddd; } .develop-modules .develop-list .time{ font-size: 1.4rem; color: #ff8409; } .develop-modules .develop-list .time::before{ position: absolute; left: 0; top: 0; bottom: 0; margin: auto; content: ''; display: block; width: 0.57rem; height: 0.57rem; border-radius: 50%; background-color: #ff8409; } .develop-modules .develop-list .title{ font-size: 1.1rem; color: #000000; } .develop-modules .develop-list .item-develop{ margin-right: 1.8rem; margin-bottom: 1.8rem; } .develop-modules .look-more{ margin-top: 3rem; margin-bottom: 3rem; font-size: 0.9rem; color: #d9501c; } .develop-modules .look-more::after{ margin-left: 0.4rem; content: ''; display: block; width: 0.57rem; height: 0.57rem; border-top: 1px solid #d9501c; border-right: 1px solid #d9501c; transform: translate3d(0, -40%, 0) rotate(135deg); -webkit-transform: translate3d(0, -40%, 0) rotate(135deg); transition: all 0.4s; -webkit-transition: all 0.4s; } .develop-modules .look-more.active::after{ transform: translate3d(0, 0%, 0) rotate(-45deg); -webkit-transform: translate3d(0, 0%, 0) rotate(-45deg); } /* 浜у搧涓績 */ .productCategory-page .center-list .item-product{ padding-bottom: 52%; } .productCategory-page .center-list .item-product .item-product-entry{ right: 7%; top: 0; bottom: 0; margin: auto; width: 12.61rem; height: 8.71rem; } .productCategory-page .center-list .item-product img:nth-child(2){ display: none; } .productCategory-page .center-list .item-product:hover img:nth-child(2), .productCategory-page .center-list .item-product.active img:nth-child(2), .productCategory-page .center-list .active .item-product img:nth-child(2) { display: block; } .productCategory-page .search-input{ background-color: #f4f4f4; } .productCategory-page .search-input .input-box{ padding: 1rem; } .productCategory-page .search-input .search-btn{ text-align: center; line-height: 3; font-weight: 0.7rem; color: #fff; } /* 浜у搧鍒楄〃 */ .productList-page .category-list-modules{ border-bottom: 1px solid #eee; } .productList-page .category-list-modules .center-list{ width: 80%; margin: 2rem auto !important; } .productList-page .category-list-modules .center-list .item-product{ margin-right: 2rem; } .productList-page .nav-category-modules .active{ position: relative; /* font-weight: bolder; */ color: #F97800; } .productList-page .nav-category-modules .active::before{ position: absolute; left: 0; top: -1px; right: 0; margin: auto; content: ''; display: block; /* width: 50%; */ height: 1px; background-color: #F97800; } .product-list-modules .product-list{ min-height: 50vh; } .product-list-modules .item-product{ transition: all 0.4s; -webkit-transition: all 0.4s; margin-bottom: 1.5rem; } .product-list-modules .item-product:hover{ background-color: #f4f4f4; border-radius: 0.2rem; } .product-list-modules .active-icon .item-product::after{ position: absolute; left: 0; bottom: 0; right: 0; margin: auto; content: ''; display: block; width: 0; height: 0; border: 0.5rem solid transparent; border-bottom: 0.5rem solid #53565f; } /* 浜у搧淇℃伅 */ .prodcut-info-modules .right-box{ margin-left: auto; } .prodcut-info-modules .right-box-top{ padding-bottom: 1.5rem; border-bottom: 1px solid #eee; } .prodcut-info-modules .left-box .product-sm-img-list .col{ max-width: 20%; } .prodcut-info-modules .left-box .product-sm-img-list .col.active .item-img{ border: 1px solid #F97800; } .prodcut-info-modules .right-box .btn-list{ margin-right: -0.5rem; } .prodcut-info-modules .right-box .btn-list .item-btn{ line-height: 2.4; font-size: 0.7rem; border: 1px solid #ccc; border-radius: 1rem; } .prodcut-info-modules .right-box .btn-list .item-btn.active{ background-color: #ef902e; border: solid 1px #ef902e; color: #fff; } .prodcut-info-modules.user-case{ position: relative; padding-left: 0; padding-right: 0; } .prodcut-info-modules.user-case::after{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; display: block; margin-left: calc((50vw - 50%) * (-1)); margin-right: calc((50vw - 50%) * (-1)); background-color: #53565f; /* z-index: -1; */ } /* 鎶€鏈敮鎸佸垪琛 */ .support-list-modules .title{ background: linear-gradient(-36deg, rgba(252, 137, 30, 1), rgba(250, 97, 19, 1)); color: #fff; } .support-list-modules .detail-list{ border-left: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4; } .support-list-modules .detail-list .item-cateory{ border-bottom: 1px solid #d4d4d4; } .support-list-modules .icon-download{ width: 0.9rem; height: 0.9rem; } .support-list-modules .detail-list .item-cateory.active{ position: relative; } .support-list-modules .detail-list .item-cateory.active::after{ position: absolute; top: 0; right: 0.75rem; bottom: 0; margin: auto; display: block; content: ''; width: 0.6rem; height: 0.6rem; background: linear-gradient(-36deg, rgba(252, 137, 30, 1), rgba(250, 97, 19, 1)); border-radius: 50%; } /* 2020-03-06 cxx */ .video-modules .video-header::after{ content: ''; display: block; width: 0.5rem; height: 0.5rem; border-right: 1px solid #333; border-top: 1px solid #333; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .video-modules .video-body-list{ margin-right: -0.75rem; } .video-modules .video-body-list .video-item{ padding-bottom: 60%; cursor: pointer; } .video-modules .video-body-list .video-item::after{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; display: block; background-color: rgba(0, 0, 0, 0); transition: all 0.4s; -webkit-transition: all 0.4s; } .video-modules .video-body-list .video-item .icon-play{ left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; color: #fff; line-height: 1; transition: all 0.4s; -webkit-transition: all 0.4s; font-size: 1rem; visibility: hidden; } .video-modules .video-body-list .video-item .icon-play::after{ position: absolute; z-index: -1; top: -0.25rem; left: -1rem; right: -1rem; bottom: -0.25rem; content: ''; display: block; border-radius: 1rem; border: 1px solid #fff; background-color: transparent; transition: all 0.4s; -webkit-transition: all 0.4s; visibility: hidden; } .video-modules .video-body-list .video-item:hover::after { background-color: rgba(0, 0, 0, 0.2); } .video-modules .video-body-list .video-item:hover .icon-play{ visibility: visible; color: #333; } .video-modules .video-body-list .video-item:hover .icon-play::after{ visibility: visible; background-color: #fff; } /* 2020/07/08 */ /* .video-modules .nav-title{ left: 0; top: 0; background-color: #fff; line-height: 3; font-size: 1rem; } */ .diagon-center-video{ top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); margin-left: initial; margin-right: initial; } .diagon-center-video .video-box{ padding-bottom: 50%; /* border: 1px solid red; */ }