.case .con h2 { font-size: 2rem; font-weight: bold; padding-top: 2.5rem; } .case .con h2 span { font-size: 1.8rem; color: #9f223d; margin-left: 0.8rem; position: relative; top: -0.1rem; } .case .con .case-choice { display: none; } .case .con .mobile-slider > ul { margin-top: 1rem; } .case .con .mobile-slider > ul > li { border-bottom: 1px dashed #e7e7e7; padding-bottom: 10px; } .case .con .mobile-slider > ul > li h3 { float: left; width: 6%; font-size: 0.8rem; color: #999; position: relative; top: 10px; } .case .con .mobile-slider > ul > li > ul { float: left; width: 88%; } .case .con .mobile-slider > ul > li > ul > li { float: left; width: 19%; height: 3rem; cursor: pointer; margin-right: 1%; margin-top: 10px; position: relative; } .case .con .mobile-slider > ul > li > ul > li span { width: 90%; display: block; font-size: 0.8rem; text-align: center; line-height: 1.5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .case .con .mobile-slider > ul > li > ul > li:hover { background: #9f223d; } .case .con .mobile-slider > ul > li > ul > li:hover span { color: #fff; } .case .con .mobile-slider > ul > li > ul > li.active { background: #9f223d; } .case .con .mobile-slider > ul > li > ul > li.active span { color: #fff; } .case .con .mobile-slider .mobile-btn { display: none; } .case .con .searchs { padding: 2rem 0 2.5rem; } .case .con .searchs .search-company { float: left; width: 42%; } .case .con .searchs .search-company input { width: 74%; float: left; height: 3rem; background: #edeef0; border: none; padding-left: 1rem; font-size: 0.7rem; } .case .con .searchs .search-company button { width: 26%; float: left; height: 3rem; background: #9f223d; color: #fff; font-size: 0.8rem; border: none; } .case .con .searchs a { float: left; line-height: 3rem; font-size: 0.7rem; text-decoration: underline; margin-left: 1.3rem; } .case-list { background: #edeef0; } .case-list .case-top { padding-top: 3rem; } .case-list .case-top h2 { font-size: 1.5rem; float: left; } .case-list .case-top p { float: right; font-size: 0.8rem; color: #999; } .case-list .case-top p span { color: #9f223d; } .case-list > ul { margin-top: 1rem; } .case-list > ul li { float: left; width: 23.4%; margin-top: 1.5rem; cursor: pointer; position: relative; background: #fff; } .case-list > ul li:not(:nth-child(4n)) { margin-right: 2.13333%; } .case-list > ul li .top { height: 0; padding-bottom: 46%; overflow: hidden; position:relative; } .case-list > ul li .top img { max-width: 90%; position: absolute; max-height: 85%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .case-list > ul li .bottom { height: 4rem; background: #fff; position: relative; } .case-list > ul li .bottom span { font-size: 0.9rem; font-weight: bold; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .case-list > ul li .more-text { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #9f223d; color: #fff; padding: 2.8rem 1.5rem; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .case-list > ul li .more-text p { font-size: 0.7rem; text-align: justify; color: #fff; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 4.5em; } .case-list > ul li .more-text h5 { font-size: 0.8rem; color: #fff; text-align: center; margin-top: 1.5rem; } .case-list > ul li .more-text h5 span { margin-left: 0.2rem; } .case-list > ul li:hover .more-text { opacity: 1; } .page-list { padding: 7% 0 8% 0; } .page-list ul { margin: 0 auto; text-align: center; font-size: 1rem; } .page-list ul li { width: 2.6rem; height: 2.6rem; line-height: 2.6rem; background-color: #fff; border: solid 1px #eaeaea; display: inline-block; font-size: 1rem; } .page-list ul li:not(:last-child) { margin-right: 1rem; } .page-list ul li a { color: #666; } .page-list ul li.pre-btn, .page-list ul li.next-btn { background-color: #f3f3f3; border: 1px solid #eaeaea; } .page-list ul li.pre-btn .iconfont, .page-list ul li.next-btn .iconfont { font-size: 1rem; } .page-list ul li.page-num.active { background-color: #9f223d; } .page-list ul li.page-num.active a { color: #fff; } .page-list ul li:hover { background-color: #9f223d; } .page-list ul li:hover a { color: #fff; } .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; } #videoPopup { position: fixed; width: 100%; height: 100%; top: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.4); display: none; } #videoPopup .video-box { width: 70%; position: absolute; left: 15%; top: 10%; } #videoPopup .video-box video { width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #videoPopup .video-box .close { position: absolute; right: 1rem; top: 1rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0, 0, 0, 0.1); cursor: pointer; text-align: center; } #videoPopup .video-box .close span { font-size: 0.8rem; line-height: 2rem; color: #fff; } #videoPopup .video-box .close:hover { background: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } .banner-product .text { top: 24%; } } @media screen and (max-width: 768px) { .banner .text { top: 30%; } .banner .text h2 { font-size: 18px; } .banner .text p { font-size: 13px; margin-top: 0.2rem; } .case { position: relative; } .case .con h2 { padding-top: 5.5rem; padding-bottom: 1rem; font-size: 16px; } .case .con h2 span { font-size: 16px; } .case .con .case-choice { display: block; position: absolute; right: 0; bottom: 12px; font-size: 13px; color: #666; width: 14%; } .case .con .case-choice span { position: relative; top: 2px; } .case .con .mobile-slider { position: fixed; right: 0; top: 0; background: #fff; width: 0; height: 100%; z-index: 999; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; overflow: hidden; } .case .con .mobile-slider > ul { padding: 10px 20px; } .case .con .mobile-slider > ul > li { border-bottom: none; } .case .con .mobile-slider > ul > li h3 { width: 100%; top: 0; font-size: 16px; padding-top: 1rem; } .case .con .mobile-slider > ul > li > ul { width: 100%; } .case .con .mobile-slider > ul > li > ul > li { width: 33.3333%; margin-right: 0; height: 3rem; } .case .con .mobile-slider > ul > li > ul > li span { font-size: 12px; } .case .con .mobile-slider > ul > li .right { width: auto; top: -2.2rem; left: -10px; } .case .con .mobile-slider .mobile-btn { display: block; position: absolute; bottom: 5.5rem; left: 0; width: 100%; } .case .con .mobile-slider .mobile-btn > div { width: 50%; height: 40px; float: left; text-align: center; line-height: 40px; font-size: 14px; } .case .con .mobile-slider .mobile-btn > div.confirm { background: #9f223d; color: #fff; } .case .con .mobile-slider .mobile-btn > div.reset { border-top: 1px solid #f2f2f2; } .case .con .mobile-slider.active { width: 66.666%; opacity: 1; } .case .con .searchs { position: absolute; top: 0; left: 0; padding: 1rem 10px; width: 100%; } .case .con .searchs .search-company { width: 100%; } .case .con .searchs .search-company button { font-size: 14px; } .case .con .searchs a { display: none; } .case .con .mobile-slider-mask { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; z-index: 103; display: none; } .case-list .case-top { padding-top: 1.5rem; } .case-list .case-top h2 { font-size: 16px; } .case-list .case-top p { font-size: 12px; } .case-list > ul { margin-top: 0; } .case-list > ul li { width: 48.5%; } .case-list > ul li:not(:nth-child(4n)) { margin-right: 0; } .case-list > ul li:nth-child(odd) { margin-right: 3%; } .case-list > ul li .more-text { padding: 1.5rem; } .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; } } /*# sourceMappingURL=case.css.map */