.pc-container { width: 100% } .pc-container .banner img { width: 100%; height: 100% } .pc-container .offer { width: 100%; height: 169px; background: no-repeat; background-size: 100% 100%; overflow: hidden } .pc-container .offer ul { margin-left: 240px; margin-top: 30px } .pc-container .offer ul li { width: 254px; height: 100%; display: block; float: left } .pc-container .offer ul li:nth-child(2) { width: 250px } .pc-container .offer ul li:nth-child(3) { width: 230px } .pc-container .offer ul li:nth-child(4) { width: 225px } .pc-container .offer ul li p { text-align: center; color: #fff; font-size: 20px; letter-spacing: 1px } .pc-container .offer ul li img { width: 82px; height: 88px; margin-top: 10px; cursor: pointer } .pc-container .offer ul li .price-btn { margin-left: 30px } .pc-container .offer ul li .question { width: 150px; margin: 0 auto } .pc-container .offer ul li .question span { height: 28px; width: 73px; line-height: 28px; font-size: 16px; color: #fff; display: inline-block; background-color: #b10211; text-align: center; margin-top: 6px; border-radius: 5px; cursor: pointer } .pc-container .offer ul li .question span:nth-child(1) { width: 150px; display: block; margin-top: 18px } .pc-container .offer ul li .question .spanactive { color: #df2328; background-color: #fff } .pc-container .four-link { width: 1005 } .pc-container .four-link img { height: 146px; width: 25%; display: block; float: left; cursor: pointer } .pc-container .six-adsense { width: 100%; overflow: hidden } .pc-container .six-adsense .title { width: 569px; height: 104px; display: block; margin: 65px auto 70px } .pc-container .six-adsense ul { width: 100% } .pc-container .six-adsense ul li { display: block; width: 595px; height: 251px; float: left; margin-bottom: 30px; cursor: pointer } .pc-container .six-adsense ul li:nth-child(2n) { margin-left: 10px } .pc-container .six-adsense ul li img { width: 100%; height: 100% } .pc-container .six-adsense .adv-link { width: 432px; margin: 0 auto; padding-top: 10px; overflow: hidden } .pc-container .six-adsense .adv-link span { display: block; width: 215px; height: 45px; line-height: 45px; font-size: 22px; color: #535252; text-align: right; float: left; cursor: pointer; letter-spacing: 3px } .pc-container .six-adsense .adv-link span:nth-child(1) { border-right: 1px solid #535252; text-align: left } .pc-container .process { margin-top: 60px } .pc-container .process .process-title { display: block; width: 535px; height: 79px; margin: 0 auto } .pc-container .process .number-list-inner li { margin-top: 35px } .pc-container .process .number-list-inner li .title, .pc-container .process .number-list-inner li .subtitle { color: #616161 } .pc-container .process .number-list-inner li .icon { width: 45px; height: 45px; padding: 25px } .pc-container .process .number-list-inner li .icon img { width: 100% } .pc-container .process .number-list-inner li .icon4 img { padding-top: 5px } .pc-container .price-quotation { margin-top: 40px; margin-bottom: 10px; height: 130px; width: 100%; background: no-repeat; background-size: 100% 100% } .pc-container .price-quotation img { display: block; float: right; margin-top: 40px; margin-right: 180px; cursor: pointer } .pc-container .price-quotation2 { width: 100%; height: 341px } .pc-container .price-quotation2 .p-left { width: 50%; height: 100%; float: left; position: relative; overflow: hidden } .pc-container .price-quotation2 .p-left img, .pc-container .price-quotation2 .p-left .mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: .5s } .pc-container .price-quotation2 .p-left .mask { height: 99.8%; background: rgba(0, 0, 0, 0.6); top: 0 } .pc-container .price-quotation2 .p-left .mask p { text-align: center; color: #ccc7c5; font-size: 22px; margin-top: 140px; font-weight: 300 } .pc-container .price-quotation2 .p-left .mask p:nth-child(2) { margin-top: 0px; color: #fff; font-size: 28px; letter-spacing: 1px } .pc-container .price-quotation2 .p-left:hover .mask { top: -100% } .pc-container .price-quotation2 .video-tab .video-play-box { width: 50%; position: relative } .pc-container .price-quotation2 .video-tab .video-play-box video { width: 100%; height: 100% } .pc-container .price-quotation2 .video-tab .video-play-box img { width: 100%; height: 100%; position: absolute; top: 0; left: 0 } .pc-container .price-quotation2 .video-tab .video-play-box .vedio-btn { width: 47px; height: 47px; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer } .pc-container .number-list-inner { margin: 0 } .pc-container .number-list-inner li { width: 170px } .pc-container .number-list-inner li .subtitle { font-size: 13px } .case-list-warp { width: 1120px; height: 535px; background: no-repeat; background-size: 100% 100%; margin: 20px auto; overflow: hidden } .case-list-warp .case-slide-warp { width: 751px; margin-top: 95px; margin-right: 35px; float: right; } .case-list-warp .case-slide-warp .swiper-container { height: 340px; display: block; overflow: hidden } .case-list-warp .case-slide-warp .swiper-slide { width: 100% } .case-list-warp .case-slide-warp .swiper-slide .figure { width: 548px; height: 340px; line-height: 306px; text-align: center; background: #fff } .case-list-warp .case-slide-warp .swiper-slide .figure img { height: 340px; width: 100% } .case-list-warp .case-slide-warp .swiper-slide .figure .swiper-lazy-preloader { left: 36% } .case-list-warp .case-slide-warp .swiper-slide .content { width: 169px; height: 100%; background: #fff; padding: 0 17px; position: absolute; top: 0; right: 0 } .case-list-warp .case-slide-warp .swiper-slide .content .title { line-height: 33px; font-size: 28px; font-weight: 500; padding: 30px 0px 20px 0px; text-align:center; } .case-list-warp .case-slide-warp .swiper-slide .content .subtitle { line-height: 16px; font-size: 12px; font-weight: 400; color: #999 } .case-list-warp .case-slide-warp .swiper-slide .content .user-list { line-height: 30px; margin-bottom: 20px; text-align: center; overflow: hidden; clear: both } .case-list-warp .case-slide-warp .swiper-slide .content .user-list .icon { width: 30px; height: 30px; vertical-align: middle; border-radius: 50%; float: left } .case-list-warp .case-slide-warp .swiper-slide .content .user-list .name { width: 100%; height: 30px; display: block; text-align: center; vertical-align: middle; font-size: 20px; padding: 10px 0px; color: #ee3200; } .case-list-warp .case-slide-warp .swiper-slide .content .text { text-align: center; font-size: 20px; font-weight: 400; color: #666; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden } .case-list-warp .case-slide-warp .swiper-slide .content .text i{font-style: normal;margin-top:10px;display: block;font-weight: bold;font-size: 25px;color: #ee0000;} .case-list-warp .case-slide-warp .swiper-slide .content .btn-bar { width: 170px; position: absolute; bottom: 20px; left: 50%; margin: 0 -85px; font-size: 13px } .case-list-warp .case-slide-warp .swiper-slide .content .btn-bar .news-btn:hover { background: #333; border-color: #333; color: #fff } .news-btn{width: 78px;height: 27px;line-height: 27px;text-align: center;font-size: 12px;border: 1px solid #333; color:#333;font-weight: 400;display: inline-block;cursor: pointer;} .news-btn.red{color: #fff;border:1px solid transparent;background: linear-gradient(260deg, #fd4825 0%, #dc0000 100%);} .case-list-warp .case-slide-warp .swiper-slide .content .btn-bar .news-btn.red:hover { background: #e33f3d; border-color: #e33f3d } .case-list-warp .case-slide-warp .swiper-button-next, .case-list-warp .case-slide-warp .swiper-button-prev { width: 20px; top: 0; height: 340px; margin: 0; background: no-repeat center; right: 203px; opacity: 0 } .case-list-warp .case-slide-warp .swiper-button-next.swiper-button-prev, .case-list-warp .case-slide-warp .swiper-button-prev.swiper-button-prev { background: no-repeat center; left: 0 } .case-list-warp .case-slide-warp .swiper-button-next:hover { background: no-repeat center } .case-list-warp .case-slide-warp .swiper-button-prev:hover { background: no-repeat center } .case-list-warp .case-slide-warp .swiper-container-horizontal>.swiper-pagination-bullets, .case-list-warp .case-slide-warp .swiper-pagination-custom, .case-list-warp .case-slide-warp .swiper-pagination-fraction { width: 548px; bottom: 13px } .case-list-warp .case-slide-warp .swiper-pagination-bullet { width: 6px; height: 6px; border: 2px solid #fff; margin: 2px 4px; opacity: 1!important; background: transparent } .case-list-warp .case-slide-warp .swiper-pagination-bullet-active { width: 10px; height: 10px; border: 3px solid #fdd9dd; margin: 0 4px; background: #ea3335 } .case-list-warp .case-slide-warp:hover .swiper-button-next, .case-list-warp .case-slide-warp:hover .swiper-button-prev { opacity: 1 } .case-list-warp .case-slide-warp .slide-caption { width: 543px; padding-top: 13px; display: block } .case-list-warp .case-slide-warp .slide-caption .title { line-height: 24px; font-size: 16px; color: #fff } .case-list-warp .case-slide-warp .slide-caption .sub-theme { line-height: 24px; font-size: 16px; font-weight: 400; float: right; } .case-list-warp .case-slide-warp .slide-caption .sub-theme a { color: #fff; } .case-list-warp .case-slide-warp .slide-caption .sub-theme a:hover { color: #dc1414 } .case-list-warp .case-slide-warp .slide-caption .sub-theme .line { height: 13px; margin: 0 13px; background: #ccc !important; display: inline-block; vertical-align: middle; width: 1px !important } .case-list-warp .other-caption-bar { width: 180px; margin-top: 352px; margin-left: 62px } .case-list-warp .other-caption-bar .more-btn { width: 180px; height: 50px; line-height: 50px; display: block; text-align: center; margin: 20px auto 0; font-weight: 500; font-size: 16px; color: #fff; position: relative; border-radius: 4px; border: 0; cursor: pointer; background: linear-gradient(260deg, #fd4825 0, #dc0000 100%) } .trends-comment-warp { margin-bottom: 60px; margin-top: 45px } .trends-comment-warp .model-warp { width: 380px; margin-right: 29px; background: #fff; overflow: hidden; transition: all .3s; box-shadow: 0 3px 6px rgba(102, 102, 102, 0.16) } .trends-comment-warp .model-warp:nth-child(3) { margin-right: 0 } .trends-comment-warp .model-warp .caption-bar { line-height: 28px; font-size: 20px; font-weight: 600; color: #333; display: block; padding: 22px 20px 14px } .trends-comment-warp .model-warp .caption-bar .caption { font-size: 20px; font-weight: 600; vertical-align: middle } .trends-comment-warp .model-warp .caption-bar .caption .sub { font-size: 13px; padding-left: 5px; vertical-align: middle } .trends-comment-warp .model-warp .swiper-slide { background: #fff; opacity: 0 } .trends-comment-warp .model-warp .content-slide .swiper-container { height: 412px } .trends-comment-warp .model-warp .content-slide .swiper-slide { float: left\0; cursor: pointer } .trends-comment-warp .model-warp .content-slide .pic { width: 340px; height: 191px; line-height: 191px; text-align: center; margin: 0 0 5px 20px; overflow: hidden } .trends-comment-warp .model-warp .content-slide .pic img { width: 100%; height: 100% } .trends-comment-warp .model-warp .content-slide .caption-price { line-height: 22px; font-size: 16px; font-weight: 600; margin: 10px 20px 0; color: #333 } .trends-comment-warp .model-warp .content-slide .caption-price .price { color: #dc1414 } .trends-comment-warp .model-warp .content-slide .current-date { line-height: 17px; color: #999; font-weight: 400; display: block; font-size: 12px; margin: 10px 20px 0px } .trends-comment-warp .model-warp .content-slide .current-date.des { font-weight: 300; letter-spacing: 1px } .trends-comment-warp .model-warp .content-slide .text { width: 342px; height: 40px; line-height: 22px; font-size: 13px; font-weight: 400; color: #666; margin: 0 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden } .trends-comment-warp .model-warp .content-slide .department { padding-bottom: 10px; border-bottom: 1px solid #eee; display: block; margin: 0 20px 52px; position: absolute; bottom: 0; left: 0; width: 342px } .trends-comment-warp .model-warp .content-slide .department dt .icon { width: 40px; height: 40px } .trends-comment-warp .model-warp .content-slide .department dt img { width: 100%; height: 100%; border-radius: 50% } .trends-comment-warp .model-warp .content-slide .department dd { width: 280px; line-height: 18px; float: right; color: #333 } .trends-comment-warp .model-warp .content-slide .department dd.title { line-height: 22px; font-size: 16px; font-weight: 600 } .trends-comment-warp .model-warp .content-slide .department dd.subtitle { font-size: 12px; font-weight: 300; color: #999; letter-spacing: 1px } .trends-comment-warp .model-warp .content-slide .swiper-button-next, .trends-comment-warp .model-warp .content-slide .swiper-button-prev { width: 20px; top: 0; height: 240px; background: no-repeat center; right: 0; opacity: 0 } .trends-comment-warp .model-warp .content-slide .swiper-button-next.swiper-button-prev, .trends-comment-warp .model-warp .content-slide .swiper-button-prev.swiper-button-prev { background: no-repeat center; left: 0 } .trends-comment-warp .model-warp .content-slide .swiper-button-next:hover { background: no-repeat center } .trends-comment-warp .model-warp .content-slide .swiper-button-prev:hover { background: no-repeat center } .trends-comment-warp .model-warp .content-slide .swiper-container-horizontal>.swiper-pagination-bullets, .trends-comment-warp .model-warp .content-slide .swiper-pagination-custom, .trends-comment-warp .model-warp .content-slide .swiper-pagination-fraction { bottom: 23px } .trends-comment-warp .model-warp .content-slide .swiper-pagination-bullet { width: 6px; height: 6px; border: 2px solid #2f2f2f; margin: 2px 4px; background: transparent } .trends-comment-warp .model-warp .content-slide .swiper-pagination-bullet-active { width: 10px; height: 10px; border: 3px solid #fdd9dd; margin: 0 4px; background: #ea3335 } .trends-comment-warp .model-warp .content-slide:hover .swiper-button-next, .trends-comment-warp .model-warp .content-slide:hover .swiper-button-prev { opacity: 1 } .trends-comment-warp .model-warp .content-slide:hover .swiper-button-next { background: no-repeat center } .trends-comment-warp .model-warp .content-slide:hover .swiper-button-prev { background: no-repeat center } .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 121; background: rgba(0, 0, 0, 0.6) } .popup .main { position: absolute; z-index: 122; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 479px; height: 373px } .popup .main .close-btn { width: 35px; height: 34px; position: absolute; right: -15px; top: -15px; z-index: 2; cursor: pointer } .popup .main .close-btn img { width: 100%; height: 100% } .popup .main .pop-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0 } .popup .main .content { position: absolute; display: block; width: 293px; height: auto; left: 50%; transform: translatex(-50%); top: 115px } .popup .main .content p { font-size: 18px; color: #252525; letter-spacing: 1px } .popup .main .content input { width: 100%; height: 31px; font-size: 14px; margin-top: 6px; text-indent: 10px; border: 1px solid #333 } .popup .main .content .pop-btn { width: 100%; height: 36px; line-height: 36px; text-align: center; background-color: #d60000; border: 1px solid #d60000; color: #fff; margin: 20px auto 0; font-size: 18px; cursor: pointer } #popup1 .main p { margin-top: 14px } #popup2 .main { width: 479px; height: 480px } #popup2 .main .content { top: 340px; width: 340px } #popup2 .main .pop-btn { width: 290px } #popup3 .main { width: 423px; height: 390px } #popup3 .main .content { top: 195px; width: 293px } #popup3 .main .content input { margin-top: 14px; text-indent: 50px } #popup3 .main .content span { position: absolute; left: 10px; font-size: 16px } #popup3 .main .content .namespan { top: 20px } #popup3 .main .content .phonespan { top: 67px } #popup4 .main { width: 479px; height: 428px } #popup4 .main .content { top: 166px; width: 294px } #popup4 .main .content input { text-indent: 10px } #popup4 .main .content .name { width: 110px; margin-right: 6px } #popup4 .main .content .phone { width: 170px } #popup4 .main .content .beihun-type { width: 100%; margin: 12px 0 6px 16px } #popup4 .main .content .beihun-type span { width: 90px; height: 33px; display: inline-block; line-height: 33px; font-size: 14px; color: #252525; border: 1px solid #333; margin-right: 10px; text-align: center; cursor: pointer } #popup4 .main .content .beihun-type .spanactive { color: #fff; background: #ff6464; border: 1px solid #ff6464 } #popup4 .main .content .pop-btn { margin-top: 15px }