.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; 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; } .sap-case { padding: 4rem 0 12rem; background: url(../img/solve/sap_bg.jpg) no-repeat right bottom; } .sap-case .con{ word-break: break-all; overflow-wrap: break-word; } .sap-case .con *{ text-wrap: unset !important; } .sap-case .con h2 { font-size: 1.6rem; font-weight: bold; margin-bottom: 2rem; } .sap-case .con p { font-size: 0.8rem; text-align: justify; margin-top: 1rem; width: 90%; line-height: 1.8; } .sap-case .con img { max-width: 100%!important; } .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: 53%; overflow: hidden; } .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; 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; } .power { position: relative; } .power img { width: 100%; } .power .text { position: absolute; width: 100%; top: 40%; color: #fff; text-align: center; } .power .text h2 { font-size: 2.3rem; font-weight: bold; } .power .text p { font-size: 0.8rem; margin-top: 0.4rem; } .main-product { background: #edeef0; padding-bottom: 7.4rem; } .main-product .title { text-align: center; padding: 3rem 0 5rem; } .main-product .title h2 { font-size: 2.3rem; display: inline-block; position: relative; } .main-product .title h2:before { content: '/'; position: absolute; font-size: 2.3rem; left: -40px; top: 0; color: #9f223d; } .main-product .title h2:after { content: '/'; position: absolute; font-size: 2.3rem; right: -30px; top: 0; color: #9f223d; } .main-product .con > ul li { float: left; width: 23.3%; } .main-product .con > ul li:not(:last-child) { margin-right: 2.2666%; } .main-product .con > ul li a { display: block; } .main-product .con > ul li .top { height: 0; padding-bottom: 65%; overflow: hidden; } .main-product .con > ul li .top img { width: 100%; } .main-product .con > ul li .bottom { text-align: center; background: #fff; height: 0; padding: 2rem 2rem 60%; } .main-product .con > ul li .bottom h2 { font-size: 1.3rem; } .main-product .con > ul li .bottom .line { width: 0.8rem; height: 1px; background: #9f223d; margin: 1rem auto; } .main-product .con > ul li .bottom p { font-size: 0.7rem; color: #666; } .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; } #bsWXBox { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } .sidebar-share { position: fixed; top: 30%; left: 2%; z-index: 100; } .sidebar-share .bdsharebuttonbox { position: relative; top: 0; left: 0; } .sidebar-share .bdsharebuttonbox .txt { font-size: 0.8rem; height: 1.5rem; line-height: 1.5rem; background: #f3f5f9; color: #333; text-align: center; } .sidebar-share .bdsharebuttonbox a { position: relative; background: none; padding-left: 0; width: 2.8rem; height: 2.8rem; line-height: 2.8rem; font-size: 2rem; margin: 0; display: block; background: #f3f5f9; margin-top: 4px; } .sidebar-share .bdsharebuttonbox a:before { content: '\e617'; font-family: 'iconfont'; color: #9f223d; font-size: 2rem; width: 100%; position: absolute; left: 0; top: 0; text-align: center; } .sidebar-share .bdsharebuttonbox a.bds_tsina:before { content: '\e699'; } .sidebar-share .bdsharebuttonbox a.bds_copy:before { content: '\e60c'; } .sidebar-share .bdsharebuttonbox a.bds_sqq:before { content: '\e612'; } .sidebar-share .bdsharebuttonbox a.erweima:before { content: '\e748'; } .sidebar-share .bdsharebuttonbox a:hover { color: #7a1d2f; opacity: 1; } .sidebar-share .bdsharebuttonbox a:hover:before { color: #7a1d2f; } .sidebar-share .bdsharebuttonbox .er { margin-top: 10px; position: relative; overflow: hidden; } .sidebar-share .bdsharebuttonbox .er #code { position: absolute; right: -150px; top: -30px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; border: 4px solid #fff; } .sidebar-share .bdsharebuttonbox .er #code:before { content: ''; width: 0; height: 0; border: 10px solid; border-color: transparent #fff transparent transparent; position: absolute; left: -22px; top: 50px; } .sidebar-share .bdsharebuttonbox .er:hover{ overflow: inherit; } .sidebar-share .bdsharebuttonbox .er:hover #code { opacity: 1; } .paper { background: url(../img/product/paper_bg.jpg) no-repeat; background-size: cover; padding: 3.5rem 0; } .paper p { font-size: 1.8rem; color: #fff; text-align: center; font-weight: bold; letter-spacing: 1px; } .paper p a { display: inline-block; width: 10rem; height: 3rem; border-radius: 30px; border: 1px solid #fff; text-align: center; line-height: 3rem; font-size: 0.8rem; color: #fff; margin-left: 2rem; } .paper p a:hover { border: 1px solid #7a1d2f; background: #7a1d2f; } #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%; } .sidebar-share { left: 2%; } .main-product .con > ul li .bottom { padding: 1.5rem 1.5rem 66%; } } @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; } .sidebar-share { left: 1%; } .main-product .con > ul li .bottom { padding: 1.5rem 1.5rem 80%; } } @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; } .sap-case { padding: 3rem 0 10rem; } .sap-case .con h2 { font-size: 16px; margin-bottom: 1rem; } .sap-case .con p { font-size: 13px; width: 100%; } .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; } .power .text { top: 24%; } .power .text h2 { font-size: 16px; } .power .text p { font-size: 13px; width: 80%; margin: 0.4rem auto 0; } .main-product { padding-bottom: 3rem; } .main-product .title { padding: 2rem 0 1.5rem; } .main-product .title h2 { font-size: 22px; } .main-product .title h2:before { font-size: 20px; } .main-product .title h2:after { font-size: 20px; } .main-product .con > ul li { width: 48.5%; margin-top: 1rem; } .main-product .con > ul li:not(:last-child) { margin-right: 0; } .main-product .con > ul li:nth-child(odd) { margin-right: 3%; } .main-product .con > ul li .bottom { padding: 1.5rem 1.5rem 100%; } .main-product .con > ul li .bottom h2 { font-size: 16px; } .main-product .con > ul li .bottom p { font-size: 13px; } .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; } .sidebar-share { left: auto; right: 1%; top: 44%; } .sidebar-share .bdsharebuttonbox .er #code { right: auto; left: -144px; top: -48px; } .sidebar-share .bdsharebuttonbox .er #code:before { border-color: transparent transparent transparent #fff; left: auto; right: -22px; } .paper { padding: 2.5rem 0; } .paper p { font-size: 16px; } .paper p a { margin-top: 1.5rem; font-size: 14px; margin-left: 0; display: block; margin: 18px auto 0; } } /*# sourceMappingURL=solve_sap.css.map */