.banner { position: relative; } .banner img { width: 100%; } .banner .con { position: absolute; width: 100%; top: 34%; left: 0; } .banner .con .text { color: #fff; } .banner .con .text h2 { font-size: 2.4rem; font-weight: bold; letter-spacing: 1px; } .banner .con .text p { font-size: 0.8rem; margin-top: 0.6rem; } .banner .con .text .btn { margin: 2rem 0 1rem; } .banner .con .text .btn a { display: inline-block; padding: 0.9rem 2rem; border: 1px solid #fff; color: #fff; font-size: 0.8rem; } .banner .con .text .btn a.contact { margin-left: 1rem; } .banner .con .text .btn a:hover { background: #fff; color: #612023; } .banner .con .text h4 { font-size: 0.8rem; } .banner .con .text h4 span { margin-right: 0.4rem; font-size: 1rem; } .solve-news { background: #eceff0; } .solve-news .con .swiper-slide{ padding: 4.5rem 0; } .solve-news .con .swiper-slide a { display: block; } .solve-news .con .swiper-slide .left { float: left; width: 40.5%; } .solve-news .con .swiper-slide .left img { width: 100%; } .solve-news .con .swiper-slide .right { float: right; width: 53%; padding-top: 1rem; } .solve-news .con .swiper-slide .right h4 { font-size: 0.7rem; color: #9f223d; } .solve-news .con .swiper-slide .right h3 { font-size: 1.6rem; margin-top: 0.4rem; } .solve-news .con .swiper-slide .right p { font-size: 0.8rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 3em; margin: 0.6rem 0 2.5rem; } .solve-news .con .swiper-slide .right span { font-size: 0.8rem; color: #999; } .solve-news .con .swiper-pagination { left: -1%; } .solve-news .con .swiper-pagination .swiper-pagination-bullet { opacity: 0.4; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .solve-news .con .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; width: 1rem; border-radius: 3px; background: #9f223d; } .solve-list { padding-top: 3.5rem; padding-bottom: 4.5rem; } .solve-list .con > ul li { float: left; width: 23.4%; border: solid 1px #eceff0; margin-top: 1.4rem; position: relative; } .solve-list .con > ul li:not(:nth-child(4n)) { margin-right: 2.1333%; } .solve-list .con > ul li .top { height: 0; padding-bottom: 66%; overflow: hidden; padding-left: 11%; padding-right: 11%; padding-top: 10%; } .solve-list .con > ul li .top .tu { width: 3rem; height: 3rem; overflow: hidden; } .solve-list .con > ul li .top .tu img { width: 100%; height: 100%; } .solve-list .con > ul li .top h2 { font-size: 1.2rem; font-weight: bold; margin-top: 1rem; } .solve-list .con > ul li .top p { font-size: 0.8rem; margin-top: 0.4rem; } .solve-list .con > ul li a { display: block; height: 4rem; line-height: 4rem; border-top: solid 1px #eceff0; padding-left: 11%; padding-right: 11%; font-size: 0.8rem; color: #9f223d; } .solve-list .con > ul li a span { margin-left: 0.4rem; } .solve-list .con > ul li:hover { box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); } .solve-list .con > ul li:hover a { background: #9f223d; color: #fff; } .solve-list .con > ul li.hot:before { content: ''; background: url(../img/solve/hot_03.png) no-repeat; background-size: cover; position: absolute; top: -2px; right: -2px; width: 3.2rem; height: 3.2rem; } .solve-list .con > ul li.new:before { content: ''; background: url(../img/solve/new_03.png) no-repeat; background-size: cover; position: absolute; top: -2px; right: -2px; width: 3.2rem; height: 3.2rem; } .banner-product { position: relative; } .banner-product img { width: 100%; } .banner-product .text { width: 100%; position: absolute; left: 0; top: 30%; color: #fff; } .banner-product .text .con .middle h2 { font-size: 1.6rem; font-weight: bold; } .banner-product .text .con .middle p { font-size: 0.9rem; margin-top: 0.6rem; } .banner-product .text .con .middle .btn { margin-top: 3rem; } .banner-product .text .con .middle .btn > ul li { float: left; } .banner-product .text .con .middle .btn > ul li.more { width: 8rem; height: 2.5rem; border-radius: 26px; border: 1px solid #e5e5e5; text-align: center; cursor: pointer; } .banner-product .text .con .middle .btn > ul li.more a { color: #fff; font-size: 0.8rem; line-height: 2.5rem; display: block; } .banner-product .text .con .middle .btn > ul li.more span { font-size: 0.8rem; line-height: 2.5rem; } .banner-product .text .con .middle .btn > ul li.more:hover { background: #9f223d; border: none; } .banner-product .text .con .middle .btn > ul li.show { margin-left: 1rem; } .banner-product .text .con .middle .btn > ul li:last-child a { line-height: 2.5rem; color: #fff; text-decoration: underline; font-size: 0.8rem; margin-left: 2rem; } .banner-product .text .con .middle.right { float: right; } .client-case { background: #eceef0; padding-bottom: 6.5rem; } .client-case .title { text-align: center; padding: 4.5rem 0 3rem; } .client-case .title h2 { font-size: 2.3rem; display: inline-block; position: relative; } .client-case .title h2:before { content: '/'; position: absolute; font-size: 2.3rem; left: -40px; top: 0; color: #9f223d; } .client-case .title h2:after { content: '/'; position: absolute; font-size: 2.3rem; right: -30px; top: 0; color: #9f223d; } .client-case .con > ul li { float: left; width: 23.4%; margin-top: 1.5rem; } .client-case .con > ul li:not(:nth-child(4n)) { margin-right: 2.1333%; } .client-case .con > ul li a { display: block; } .client-case .con > ul li a .top { height: 0; padding-bottom: 46%; overflow: hidden; background: #fff; } .client-case .con > ul li a .top img { width: 100%; } .client-case .con > ul li a .bottom { background: #fff; padding: 1.5rem 1.5rem; } .client-case .con > ul li a .bottom h2 { font-size: 1.2rem; font-weight: bold; letter-spacing: 1px; margin-bottom: 1.2rem; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 1.5em; } .client-case .con > ul li a .bottom p { font-size: 0.7rem; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 6em; text-align: justify; margin-bottom: 1.5rem; } .client-case .con > ul li a .bottom h3 { font-size: 0.8rem; color: #a83953; } .client-case .con > ul li a .bottom h3 span { margin-right: 0.4rem; font-size: 1rem; position: relative; top: 0.1rem; } .client-case .con > ul li:hover a .top img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .client-case .con > ul li:hover a .bottom h3 { color: #7a1d2f; } .client-case .con .btn { margin: 4.5rem auto 0; width: 10rem; height: 3rem; border-radius: 30px; background: #fff; } .client-case .con .btn a { display: block; line-height: 3rem; text-align: center; font-size: 0.8rem; } .client-case .con .btn:hover { background: #9f223d; } .client-case .con .btn:hover a { color: #fff; } .appointment { background: #fff url(../img/solve/solve_bg.png) no-repeat; background-size: cover; } .appointment .con .right { float: right; width: 46%; padding-top: 6rem; } .appointment .con .right h2 { font-size: 1.6rem; color: #9f223d; font-weight: bold; letter-spacing: 1px; } .appointment .con .right span { font-size: 1.2rem; color: #999; letter-spacing: 1px; } .appointment .con .right form { margin-top: 1.5rem; } .appointment .con .right form > ul li { float: left; width: 48.5%; margin-top: 1rem; } .appointment .con .right form > ul li input { width: 100%; height: 2.9rem; border: none; background: #f3f3f5; padding-left: 1rem; font-size: 0.8rem; } .appointment .con .right form > ul li textarea { width: 100%; border: none; background: #f3f3f5; padding: 1rem; font-size: 0.8rem; } .appointment .con .right form > ul li.left { margin-right: 3%; } .appointment .con .right form > ul li:nth-child(n+7) { width: 100%; } .appointment .con .right form > ul li:last-child { width: 48.5%; position: relative; } .appointment .con .right form > ul li:last-child .verify-code { position: absolute; right: 0; background: none !important; } .appointment .con .right form > ul li:last-child .verify-change-code { display: none; } .appointment .con .right form .btn { margin: 2.2rem 0 6rem; } .appointment .con .right form .btn input { width: 7.9rem; height: 2.5rem; background: #95a2a9; border-radius: 26px; color: #fff; border: none; font-size: 0.8rem; } .appointment .con .right form .btn input:hover { background: #9f223d; } .appointment .con .right form .btn input:first-child { margin-right: 1rem; } #videoPopup { position: fixed; width: 100%; height: 100%; top: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.4); display: none; } @media screen and (max-width: 1366px) { .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } .solve-news .con .swiper-pagination { left: -0.5%; } } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .con { top: 17%; } .solve-news .con .swiper-slide .right p { margin-bottom: 2rem; } .solve-list .con > ul li .top { padding-bottom: 76%; } .banner-product .text { top: 24%; } } @media screen and (max-width: 768px) { .banner { height: 26rem; overflow: hidden; } .banner img { width: auto; } .banner .con { top: 12%; } .banner .con .text h2 { font-size: 16px; } .banner .con .text p { font-size: 13px; } .banner .con .text .btn a { font-size: 12px; } .banner .con .text .btn a.contact { margin-left: 0; margin-top: 1rem; } .banner .con .text h4 { font-size: 12px; } .solve-news { padding: 1.5rem 0; } .solve-news .con .swiper-slide .left { width: 100%; } .solve-news .con .swiper-slide .right { width: 100%; padding-bottom: 2rem; } .solve-news .con .swiper-slide .right h4 { font-size: 13px; } .solve-news .con .swiper-slide .right h3 { font-size: 16px; } .solve-news .con .swiper-slide .right p { font-size: 13px; } .solve-news .con .swiper-slide .right span { font-size: 12px; } .solve-news .con .swiper-pagination .swiper-pagination-bullet-active { width: 18px; border-radius: 7px; } .solve-list { padding-top: 0.5rem; padding-bottom: 2rem; } .solve-list .con > ul li { width: 48.5%; } .solve-list .con > ul li:not(:nth-child(4n)) { margin-right: 0; } .solve-list .con > ul li:nth-child(odd) { margin-right: 3%; } .solve-list .con > ul li .top{ padding-bottom: 150%; } .solve-list .con > ul li a span { margin-left: 0.2rem; font-size: 12px; } .solve-list .con > ul li .top h2 { font-size: 14px; } .solve-list .con > ul li .top p { font-size: 13px; } .solve-list .con > ul li a { font-size: 13px; } .banner-product { height: 220px; overflow: hidden; } .banner-product .dark-mask { display: block; } .banner-product img { width: auto; height: 100%; margin-left: -36%; } .banner-product .text .con .middle { padding-left: 10px; } .banner-product .text .con .middle h2 { font-size: 20px; } .banner-product .text .con .middle p { font-size: 13px; } .banner-product .text .con .middle.right { float: left; } .banner-product .text .con .middle .btn > ul li.more { height: 34px; } .banner-product .text .con .middle .btn > ul li.more a { font-size: 14px; line-height: 34px; } .banner-product .text .con .middle .btn > ul li.more span { font-size: 14px; line-height: 34px; } .banner-product .text .con .middle .btn > ul li:last-child a { line-height: 34px; font-size: 14px; } .client-case { padding-bottom: 3rem; } .client-case .title { padding: 1.5rem 0 0.5rem; } .client-case .title h2 { font-size: 22px; } .client-case .title h2:before { font-size: 20px; } .client-case .title h2:after { font-size: 20px; } .client-case .con > ul li { width: 48.5%; } .client-case .con > ul li:not(:nth-child(4n)) { margin-right: 0; } .client-case .con > ul li:nth-child(odd) { margin-right: 3%; } .client-case .con > ul li a .bottom h2 { font-size: 14px; margin-bottom: 1rem; } .client-case .con > ul li a .bottom p { font-size: 13px; } .client-case .con > ul li a .bottom h3 { font-size: 14px; } .client-case .con > ul li a .bottom h3 span { font-size: 16px; top: 1px; } .client-case .con .btn { margin: 2.5rem auto 0; } .client-case .con .btn a { font-size: 14px; } .appointment { background: none; } .appointment .con .right { width: 100%; padding-top: 2rem; } .appointment .con .right h2 { font-size: 18px; } .appointment .con .right span { font-size: 13px; } .appointment .con .right form { margin-top: 0.5rem; } .appointment .con .right form .btn input { width: 8rem; height: 3rem; font-size: 14px; } } /*# sourceMappingURL=solve.css.map */