.banner { position: relative; } .banner img { width: 100%; } .banner .text { position: absolute; width: 100%; top: 46%; color: #fff; } .banner .text h2 { text-align: center; font-size: 2.3rem; font-weight: bold; letter-spacing: 1px; } .banner .text p { text-align: center; font-size: 1.2rem; letter-spacing: 1px; margin-top: 0.6rem; } .sub-nav { height: 4rem; border-bottom: 1px solid #ddd; overflow: hidden; position: relative; top: 0; background: #fff; width: 100%; border-top: 1px solid #ddd; z-index: 100; } .sub-nav .content .left { float: left; } .sub-nav .content .left h6 { line-height: 4rem; font-size: 1.3rem; font-weight: bold; } .sub-nav .content .left h6 span { font-size: 1rem; color: #9f223d; margin-left: 1rem; position: relative; top: -0.1rem; } .sub-nav .content .right { float: right; } .sub-nav .content .right > ul li { float: left; width: 4.6rem; height: 4rem; text-align: center; position: relative; } .sub-nav .content .right > ul li a { line-height: 4rem; font-size: 0.8rem; display: block; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 2rem; } .sub-nav .content .right > ul li:before { content: ''; width: 0; height: 3px; background: #9f223d; position: absolute; bottom: 0; left: 0; } .sub-nav .content .right > ul li.active:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li.active a { color: #9f223d; } .sub-nav .content .right > ul li:hover:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li:hover a { color: #9f223d; } .news-con { background: #edeef0; padding-top: 3.2rem; } .news-con .swiper-container { position: relative; } .news-con .swiper-container .swiper-wrapper .swiper-slide { position: relative; } .news-con .swiper-container .swiper-wrapper .swiper-slide img { width: 100%; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text { position: absolute; background: #fff; width: 30%; top: 16%; left: 8%; padding: 2rem; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text h2 { font-size: 1.6rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 3em; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text p { font-size: 0.8rem; color: #999; margin: 1.5rem 0 2.5rem; text-align: justify; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 4.5em; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text .more { width: 7.8rem; height: 2.5rem; background: #9f223d; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text .more a { display: block; font-size: 0.8rem; line-height: 2.5rem; text-align: center; color: #fff; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text .more:hover { background: #7a1d2f; } .news-con .swiper-container > ul { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 100; } .news-con .swiper-container > ul li { float: left; height: 3rem; width: 33.3333333%; background: none; position: relative; text-align: center; cursor: pointer; } .news-con .swiper-container > ul li span { width: 96%; font-size: 0.8rem; color: #fff; 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%); } .news-con .swiper-container > ul li.active { background: rgba(158, 34, 63, 0.8); } .news-con .swiper-container .swiper-pagination { display: none; } .news-list { background: #edeef0; padding-top: 3rem; } .news-list .con > ul li { margin-top: 1.5rem; } .news-list .con > ul li .left { float: left; width: 35.5%; height: 0; padding-bottom: 24%; overflow: hidden; } .news-list .con > ul li .left img { width: 100%; } .news-list .con > ul li .right { float: left; width: 64.5%; height: 0; padding-bottom: 24%; overflow: hidden; background: #fff; padding-left: 2.5rem; padding-right: 2.5rem; position: relative; } .news-list .con > ul li .right h3 { font-size: 0.7rem; color: #9f223d; margin-top: 2.5rem; } .news-list .con > ul li .right h2 { font-size: 1.6rem; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 1.5em; margin: 0.6rem 0; } .news-list .con > ul li .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-bottom: 3.5rem; } .news-list .con > ul li .right span { font-size: 0.8rem; color: #999; } .news-list .con > ul li .right h4 { position: absolute; bottom: 2.5rem; right: 2.5rem; width: 7.8rem; height: 2.5rem; background: #9f223d; cursor: pointer; color: #fff; font-size: 0.8rem; text-align: center; line-height: 2.5rem; } .news-list .con > ul li:hover .left img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .news-list .con > ul li:hover .right h4 { background: #7a1d2f; } .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; } .page-list { padding: 7% 0 8% 0; } .page-list ul { margin: 0 auto; text-align: center; font-size: 0; } .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.page-total{ width: auto; padding: 0 10px; } .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;color: #fff; } .page-list ul li:hover a { color: #fff; } @media screen and (max-width: 1366px) { .news-con .swiper-container .swiper-wrapper .swiper-slide .text { top: 12%; left: 6%; } .news-list .con > ul li .right h3 { margin-top: 1.5rem; } .news-list .con > ul li .right h4 { bottom: 1.2rem; } } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text { top: 8%; } .news-list .con > ul li .right h2 { font-size: 1.4rem; } .news-list .con > ul li .right h2 { margin: 0.2rem 0; } .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; } .sub-nav .content .left { display: none; } .sub-nav .content .right { width: 100%; } .sub-nav .content .right > ul li { width: 20%; } .sub-nav .content .right > ul li a { font-size: 12px; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 0; } .news-con { padding-top: 2rem; } .news-con .swiper-container { padding: 0; } .news-con .swiper-container .swiper-wrapper .swiper-slide { height: 300px; overflow: hidden; } .news-con .swiper-container .swiper-wrapper .swiper-slide img { width: auto; height: 100%; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text { width: 80%; left: 10%; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text h2 { font-size: 16px; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text p { font-size: 13px; margin: 1rem 0 2rem; } .news-con .swiper-container .swiper-wrapper .swiper-slide .text .more a { font-size: 14px; } .news-con .swiper-container > ul { display: none; } .news-con .swiper-container .swiper-pagination { display: block; bottom: 18px; } .news-con .swiper-container .swiper-pagination .swiper-pagination-bullet { background: #fff; } .news-con .swiper-container .swiper-pagination .swiper-pagination-bullet-active { background: #9f223d; } .news-list { padding-top: 1rem; } .news-list .con > ul li .left { width: 100%; padding-bottom: 68%; } .news-list .con > ul li .right { width: 100%; padding-bottom: 54%; } .news-list .con > ul li .right h3 { font-size: 12px; } .news-list .con > ul li .right h2 { font-size: 16px; } .news-list .con > ul li .right p { font-size: 13px; } .news-list .con > ul li .right span { font-size: 12px; } .news-list .con > ul li .right h4 { font-size: 14px; bottom: 1.6rem; } .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=info_news.css.map */