@charset "utf-8"; .offcanvas_menu { display: none; } .off_canvars_overlay { width: 100%; height: 100%; position: fixed; z-index: 9998; opacity: 0; visibility: hidden; cursor: pointer; background: #000; top: 0; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .off_canvars_overlay.active { opacity: 0.5; visibility: visible; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .offcanvas_menu_wrapper { width: 290px; height: 100vh; background: #FFFFFF; position: fixed; z-index: 9999; top: 0; left: 0; padding: 50px 15px 30px; overflow: auto; margin-left: -300px; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .offcanvas_menu_wrapper.active { margin-left: 0; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .canvas_close { position: absolute; top: 10px; right: 13px; } .canvas_close a { font-size: 18px; font-weight: 500; width: 32px; display: block; text-align: center; height: 32px; line-height: 30px; border: 1px solid #e6e6e6; -webkit-transition: 0.35s; -moz-transition: 0.35s; -ms-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; border-radius: 100%; color: #000000; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .offcanvas-social { margin-bottom: 30px; } .offcanvas-social ul li { display: inline-block; } .offcanvas-social ul li a { height: 40px; line-height: 38px; text-align: center; width: 40px; color: #e62129; border: 1px solid #e6e6e6; -webkit-transition: 0.35s; -moz-transition: 0.35s; -ms-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; border-radius: 50px; margin: 0 5px; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; display: inline-block; } .offcanvas_main_menu li { position: relative; } .offcanvas_main_menu li span.menu-expand { position: absolute; right: 0; top: 8px; } .offcanvas_main_menu li a { font-size: 14px; font-weight: 500; display: block; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px solid #e6e6e6; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .offcanvas_main_menu li ul.sub-menu { padding-left: 20px; display: none; } .offcanvas_footer { margin-top: 50px; padding-bottom: 50px; } .offcanvas_footer i { width: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; margin-right: 10px; } .headbox_top .item { position: relative; height: 100%; } .headbox_top .item::after { content: ''; display: block; width: 30px; height: 4px; background: #e62129; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: 0.35s; -moz-transition: 0.35s; -ms-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; display: none; } .headbox_top .item.actived { font-weight: 600; color: #333333; } .headbox_top .item:hover > ::after, .headbox_top .item.actived::after { display: block; } .footer { height: 125px; background: #ededed; } .banner-center { left: 50%; top: 0; transform: translateX(-50%); z-index: 998; height: 100%; } .banner .swiper-pagination-progressbar { width: 150px; height: 4px; margin-top: 40%; } .banner .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #e62129 !important; } .title_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .xian { width: 260px; height: 1px; background: #333; position: relative; margin-top: 20px; } .xian::after { position: absolute; content: " "; display: block; width: 40px; height: 10px; background: #333; left: 50%; top: 50%; transform: translate(-50%, -50%); } .product_item { border: 1px solid #333; cursor: pointer; border-bottom: 0; } .product_item img { width: 400px; height: 298px; } .product_item_bt { height: 65px; background: #333333; color: #FFFFFF; text-align: center; line-height: 65px; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; padding: 0 10px; } .apply_list_item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; margin-bottom: 75px; } .apply_list_item:hover .apply_list_item_right { background: #e62129; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .honor { margin-top: 75px; } .touch { background: #f5f5f5; } .form .inputs input { width: 100%; border: 1px solid #666666; font-size: 16px; height: 42px; line-height: 42px; padding: 0 15px; } .form textarea { width: 100%; height: 135px; padding: 15px; margin-top: 20px; } .form .btns { width: 120px; height: 45px; /* Center slide text vertically */ /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #333333; color: #FFFFFF; margin-top: 10px; } .lianxi { margin-top: 60px; padding-bottom: 60px; } .banners { height: 300px; } .xian_banner { width: 50px; height: 4px; background: #cccccc; } .produce_title { height: 60px; background: #f5f5f5; font-size: 24px; color: #333333; padding-left: 25px; line-height: 60px; position: relative; } .produce_title::after { position: absolute; display: block; content: " "; background: #e62129; width: 6px; height: 25px; left: 0; top: 50%; transform: translateY(-50%); } .produce_item { width: 300px; cursor: pointer; margin-right: 34px; margin-top: 30px; } .produce_item .top { height: 225px; /* Center slide text vertically */ /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border: 1px solid #ededed; border-bottom: 0; } .produce_item .top img { width: 280px; height: 200px; } .bottems { background: #333333; height: 60px; line-height: 60px; color: #FFFFFF; text-align: center; padding-left: 20px; padding-right: 20px; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; font-size: 16px; } .produce_item:hover .bottems { transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; background: #e62129; } .produce_list { margin-top: 45px; } .banner_title .titles { padding-top: 60px; } .screen_menu { background: #f7f7f7; border: 1px solid #e6e6e6; padding-top: 25px; padding-left: 25px; padding-right: 25px; padding-bottom: 15px; } .screen_menu_right a { display: block; padding: 0 20px; height: 30px; line-height: 30px; margin-right: 20px; margin-bottom: 10px; } .screen_menu_right a.active { background: #4d4d4d; color: #FFFFFF; } .screen_menu_right { flex: 1; } .screen_menu .f16 { width: 139px; text-align: right; } .prduct_content { padding-top: 55px; } .prduct_content_top { height: 50px; line-height: 50px; background: #f7f7f7; border: 1px solid #e6e6e6; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } .prduct_content_top .f14 { flex: 1; text-align: center; } .prduct_content_c { padding-top: 15px; padding-bottom: 15px; border: 1px solid #e6e6e6; border-top: 0; cursor: pointer; } .prduct_content_c:hover { background: #e8f2f8; } .xiayiye { padding: 40px 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } .xiayiye a { border: 1px solid #ededed; height: 36px; line-height: 36px; padding: 0 12.5px; display: inline-block; margin: 0 5px; } .xiayiye a:hover { background: #e62129; color: #FFFFFF; } .xiayiye input { width: 52px; height: 36px; border: 1px solid #ededed; margin: 0 10px; } .xiayiye button { height: 36px; line-height: 36px; background: #f4f5f7; border: 0 !important; font-size: 14px; color: #666666; padding: 0 10px; } .dian_s { width: 6px; height: 6px; background: #666666; border-radius: 50%; } .content-s { padding-top: 55px; padding-bottom: 50px; } .contens_footer_top { background: #f7f7f7; height: 55px; line-height: 55px; border-bottom: 1px solid #e6e6e6; padding: 0 20px; } .contens_footer { border: 1px solid #e6e6e6; } .contens_content { padding: 40px 55px; } .contens_content img { width: 100%; } .field_item { width: 300px; margin-right: 35px; margin-bottom: 35px; } .field_item:hover .f16 { color: #e62129; } .field_item .con { width: 100%; height: 200px; border: 1px solid #e6e6e6; } .field_box_t { padding-top: 60px; } .progress_title { height: 80px; line-height: 80px; border-bottom: 1px solid #e6e6e6; } .progress_title a { margin: 0 45px; display: block; } .progress_title a.active { color: #e62129; } .progress_s { background: #e62129; width: 42%; height: 4px; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; } .news-top_item { width: 290px; cursor: pointer; } .news-top_item .imgbox { height: 160px; } .news-top { background: #f7f7f7; } .fa-sort-up { transform: rotate(90deg); } .see-more { width: 130px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 10px 0; margin-top: 30px; } .news-top_item:hover .bag1 { background: #e62129; color: #FFFFFF; } .news-top_item:hover .bag1 .fa-sort-up { color: #FFFFFF; } .news-top_item:hover .bag1 .f16 { color: #FFFFFF; } .news-top_item:hover .bag1 .f18 { color: #FFFFFF; } .news-top_item:hover .bag1 .see-more { color: #FFFFFF; } .news_list_item .imgbox { width: 240px; height: 140px; } .news_list_item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; cursor: pointer; } .news_list { padding-left: 50px; padding-right: 50px; padding-top: 35px; } .news_list_item { margin-bottom: 35px; } .news_list_item .f15 { height: 45px; } .news_list_item:hover .f22 { color: #e62129; font-weight: bold; } .conmone { position: relative; } .conmone::after { position: absolute; display: block; content: " "; width: 2px; height: 12px; background: #e6e6e6; left: 12px; top: 50%; transform: translateY(-50%); } .conmone::before { position: absolute; display: block; content: " "; width: 2px; height: 12px; background: #e6e6e6; right: 12px; top: 50%; transform: translateY(-50%); } .news-content_left_top { padding-bottom: 40px; border-bottom: 1px solid #e6e6e6; } .news-content_left-content { padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #e6e6e6; } .next-s:hover { color: #e62129; } .content_right { background: #fafafa; padding: 0 20px; } .yuandian { width: 5px; height: 5px; background: #666; border-radius: 50%; margin-top: 10px; margin-right: 10px; } .news-content_right-item { padding-top: 25px; padding-bottom: 25px; border-bottom: 1px solid #e6e6e6; } .news-content_right-item:hover .f15 { color: #e62129; } .news-content_right-item:hover .yuandian { background: #e62129; } .search-boxs { padding: 50px 50px 0; height: 215px; top: 85px; left: 50%; width: 1300px; background: #fff; position: fixed; transform: translateX(-50%); z-index: 999; } .search-boxs .title { font-size: 32px; } .search-boxs input { height: 60px; line-height: 60px; width: 100%; font-size: 14px; border: none; } .search-item { margin-right: 30px; } .form .btns:hover { background: #e62129; } .btns_s { padding: 0 15px; height: 30px; line-height: 30px; background: #4d4d4d; color: #FFFFFF; } .none{ display: none; }