@charset "utf-8"; .product-head .pic { float: left; width: 67.28%; } .product-head .pic .pic-big { width: 100%; text-align: center; } .product-head .pic .pic-list { margin-top: 25px; } .product-head .pic .pic-list .swiper-wrapper { display: flex; } .product-head .pic .pic-list .item { border: solid 1px #dcdcdc; background: #fff; cursor: pointer; width: 30%; } .product-head .pic .pic-list .item.swiper-slide-thumb-active { border-color: #ccc; } .product-head .cont { overflow: hidden; padding-left: 45px; padding-top: 35px; } .product-head .cont h1 { font-size: 24px; font-weight: normal; color: #333333; line-height: 1.2; } .product-head .cont .des { font-size: 14px; line-height: 26px; color: #333333; margin-top: 90px; } .product-head .cont .zx-bar { margin-top: 180px; font-size: 0; } .product-head .cont .zx-bar .zx-btn { display: inline-block; vertical-align: middle; width: 187px; height: 44px; background-color: #d0251c; border-radius: 10px; line-height: 44px; text-align: center; font-size: 14px; color: #ffffff; margin-right: 15px; } .product-head .swiper-pagination { position: static; text-align: center; margin-top: 20px; } .product-head .swiper-pagination .swiper-pagination-bullet { width: 18px; height: 18px; background-color: #b5b5b5; opacity: 1; margin: 0 9px; } .product-head .swiper-pagination .swiper-pagination-bullet-active { background-color: #d0251c; } .product-body { padding-top: 80px; } .product-detail { width: 67.28%; } .product-rel { width: 29.5%; } .product-rel .tit-big { margin-bottom: 25px; } .fs32 { font-size: 32px; color: #333333; line-height: 1.2; } .product-rel-case .item { width: 31.98%; text-align: center; } .product-rel-case .item .tit { font-size: 16px; line-height: 24px; color: #333333; margin-top: 15px; } .product-rel ul li { text-align: center; margin-bottom: 30px; } .product-rel ul li .pic { background-color: #ffffff; border: solid 1px #dcdcdc; } .product-rel ul li .tit { font-size: 16px; color: #333333; margin-top: 20px; } .detail-cate { border-bottom: solid 1px #d2d2d2; font-size: 0; } .detail-cate li { position: relative; display: inline-block; font-size: 18px; color: #333; vertical-align: middle; line-height: 1; cursor: pointer; padding-bottom: 24px; margin-right: 50px; } .detail-cate li:after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 5px; background-color: #d0251c; opacity: 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .detail-cate li.on:after, .detail-cate li:hover:after { left: 0; opacity: 1; width: 100%; } .detail-item>.tit { font-size: 28px; line-height: 1; color: #666666; font-weight: bold; margin-bottom: 35px; } .detail-item { margin-top: 45px; } .product-ys-1 .item { display: flex; justify-content: space-between; background: #fff; margin-bottom: 10px; } .product-ys-1 .item:nth-child(2n+1) { flex-direction: row-reverse; } .product-ys-1 .item .pic, .product-ys-1 .item .cont { width: 50%; } .product-ys-1 .item .cont { display: flex; align-items: center; padding-left: 40px; padding-right: 40px; } .product-ys-1 .item .cont h4, .product-ys-2 h4 { font-size: 24px; line-height: 1.2; color: #000000; } .product-ys-1 .item .cont .sub, .product-ys-2 .sub { font-size: 18px; margin-top: 5px; color: #000000; } .product-ys-1 .item .cont .ys1-list, .product-ys-1 .item .cont .ys2-list { margin-top: 35px; width: 90%; } .product-ys-1 .item .cont .ys1-list li b { display: block; font-size: 18px; color: #d0251c; margin-bottom: 3px; } .product-ys-1 .item .cbox { width: 100%; } .product-ys-1 .item .cont .ys2-list { justify-content: flex-start; } .product-ys-1 .item .cont .ys2-list li { width: 106px; height: 34px; background-color: #cd241c; line-height: 34px; font-size: 14px; color: #ffffff; margin-right: 5px; margin-bottom: 3px; text-align: center; } .product-ys-2 { padding: 40px; margin-bottom: 10px; background: #fff; } .product-ys-2 h4 { text-align: center; } .product-ys-2 .sub { text-align: center; } .ys3-list { margin-top: 35px; } .ys3-list li { width: 116px; height: 134px; background: url(../images/product/bg-2.png) no-repeat center; line-height: 134px; position: relative; text-align: center; font-size: 18px; color: #ffffff; } .product-ys-3 .item { width: 49.6%; background: #fff; margin-bottom: 6px; padding-top: 30px; text-align: center; } .product-ys-3 .item h4 { font-size: 34px; line-height: 1; color: #333333; } .product-ys-3 .item .sub { font-size: 17px; color: #666666; margin-top: 3px; margin-bottom: 20px; } .product-ys-3 .item .pic { position: relative; overflow: hidden; } .product-ys-3 .item .pic .des { position: absolute; left: 0; bottom: 0; background-image: linear-gradient(to right,rgba(205, 36, 28, 1) , rgba(255, 255, 255, .1)); color: #fff; padding: 13px 25px; width: 100%; text-align: left; font-size: 17px; } .product-ys-4 { padding-top: 65px; text-align: center; } .product-ys-4 .tit { font-size: 32px; line-height: 1; color: #333333; } .product-ys-4 .sub { margin-top: 5px; font-size: 24px; color: #666666; } .product-ys-4 .item-1 { margin-top: 35px; padding: 65px 0 70px; color: #fff; background: url(../images/product/odm-tit-bg.jpg) no-repeat center; } .product-ys-4 .item-1 .t1 { font-size: 34px; line-height: 1.2; color: #ffffff; } .product-ys-4 .item-1 .t2 { font-size: 29px; line-height: 1.2; color: #ffffff; margin-bottom: 5px; margin-top: 45px; } .product-ys-4 .item-1 p { font-size: 61px; line-height: 1; color: #ffffff; } .product-ys-4 .item-2 { background: #fff; margin-top: 20px; padding-top: 60px; padding-bottom: 50px; } .product-ys-4 .item-2 ul { padding: 0 70px; margin-top: 40px; } .product-ys-4 .item-2 ul li { width: 171px; height: 171px; background-color: #313131; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 18px; } .product-ys-4 .item-2 ul li b { display: block; font-size: 24px; } .product-ys-4 .item-2 .zixun { display: inline-block; width: 236px; height: 53px; background-color: #d0251c; color: #fff; border-radius: 10px; line-height: 53px; text-align: center; font-size: 18px; margin-top: 40px; } /*案例详情*/ .case-title { font-size: 28px; font-weight: bold; line-height: 34px; color: #666666; padding-bottom: 25px; border-bottom: 1px solid #aaa; margin-bottom: 30px; } .case-title h1 { color: #333; font-weight: bold; } .case-detail { padding-bottom: 25px; border-bottom: 1px solid #aaa; } .case-page { margin-top: 20px; font-size: 16px; } .case-page .item { width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-page .item:last-child { text-align: right; } @media (max-width: 1600px) { .product-head .cont .zx-bar .zx-btn { width: 140px; } .product-ys-1 .item .cont { padding-left: 30px; padding-right: 30px; } .product-ys-1 .item .cont .ys1-list, .product-ys-1 .item .cont .ys2-list { width: 100%; } .product-ys-3 .item h4 { font-size: 28px; } .product-ys-4 .item-2 ul li { width: 160px; height: 160px; } } @media (max-width: 1280px) { .product-head .cont .zx-bar .zx-btn { width: 120px; } .product-head .cont .zx-bar { margin-top: 120px; } .product-ys-1 .item .cont { padding-left: 20px; padding-right: 20px; } .product-ys-1 .item .cont .ys2-list li { width: 96px; } .ys3-list li { width: 96px; height: 114px; background-size: contain; line-height: 114px; } .product-ys-3 .item .pic .des { font-size: 14px; } .product-ys-4 .item-2 ul li { width: 130px; height: 130px; font-size: 14px; } .product-ys-4 .item-2 ul li b { font-size: 20px; } } @media (max-width: 768px) { .product-head .pic, .product-detail, .product-rel { float: none; width: 100%; } .product-head .cont { overflow: hidden; padding-left: 0; padding-top: 20px; } .product-head .swiper-pagination { margin-top: 5px; } .product-head .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; } .product-head .cont h1 { font-size: 22px; } .product-head .cont .des { font-size: 14px; line-height: 1.5; margin-top: 20px; } .product-head .cont .zx-bar { margin-top: 30px; } .product-head .cont .zx-bar .zx-btn { width: 120px; height: 40px; line-height: 40px; font-size: 14px; margin-right: 10px; } .product-body { padding-top: 40px; } .detail-cate li { font-size: 16px; padding-bottom: 15px; margin-right: 20px; } .detail-cate li:hover { color: #666; } .detail-cate li:hover:after { opacity: 0; } .detail-item { margin-top: 30px; } .detail-item>.tit { font-size: 18px; margin-bottom: 20px; } .product-ys-1 .item .pic, .product-ys-1 .item .cont { width: 100%; } .product-ys-1 .item { flex-wrap: wrap; } .product-ys-1 .item .cont { padding-left: 15px; padding-right: 15px; padding: 20px 15px; } .product-ys-1 .item .cont h4, .product-ys-2 h4 { font-size: 20px; } .product-ys-1 .item .cont .sub, .product-ys-2 .sub { font-size: 16px; } .product-ys-1 .item .cont .ys1-list, .product-ys-1 .item .cont .ys2-list { margin-top: 20px; width: 100%; } .product-ys-1 .item .cont .ys1-list li b { font-size: 16px; } .product-ys-1 .item .cont .ys2-list { justify-content: space-between; } .product-ys-1 .item .cont .ys2-list li { width: 32%; margin-right: 0; margin-bottom: 5px; } .ys3-list { margin-top: 30px; } .product-ys-2 { padding: 30px 20px; } .ys3-list li { width: 80px; height: 100px; background-size: contain; line-height: 100px; font-size: 16px; } .product-ys-3 .item h4 { font-size: 18px; } .product-ys-3 .item .sub { font-size: 12px; margin-top: 10px; margin-bottom: 20px; } .product-ys-3 .item .pic .des { padding: 10px 10px; width: 100%; font-size: 12px; line-height: 1.5; } .product-ys-4 { padding-top: 30px; } .product-ys-4 .tit { font-size: 22px; } .product-ys-4 .sub { font-size: 16px; } .product-ys-4 .item-1 { margin-top: 20px; padding: 30px 0 30px; background-size: cover; } .product-ys-4 .item-1 .t1 { font-size: 18px; } .product-ys-4 .item-1 .t2 { font-size: 20px; margin-top: 30px; margin-bottom: 10px; } .product-ys-4 .item-1 p { font-size: 30px; } .product-ys-4 .item-2 { padding-top: 40px; padding-bottom: 40px; } .product-ys-4 .item-2 ul { padding: 0 20px; margin-top: 30px; } .product-ys-4 .item-2 ul li { width: 140px; height: 140px; font-size: 14px; margin-bottom: 20px; } .product-ys-4 .item-2 ul li b { font-size: 18px; } .product-ys-4 .item-2 .zixun { width: 200px; height: 45px; border-radius: 10px; line-height: 45px; font-size: 16px; margin-top: 20px; } .product-rel { margin-top: 40px; } .fs32 { font-size: 24px; } .case-page { margin-top: 20px; font-size: 14px; } .case-title { font-size: 20px; line-height: 1.3; padding-bottom: 20px; margin-bottom: 25px; } }