@charset "utf-8"; html{font-size:100px;} html,body{width:100%;background-color: #fff;} .swiper{ height: auto; min-height: 12rem; } .swiper img{ width: 100%; height: auto; } .swiper-paginationbg{ width: 100%; height: 0.03rem; box-sizing: border-box; padding: 0 1.6rem; position: absolute; bottom: 1.17rem; z-index: 10; } .swiper-pagination{ width: 100%; height: 0.03rem; display: flex; position: static; } .swiper-pagination .swiper-pagination-bullet{ width: 33.3333%; border-radius: 0; height: 100%; background-color: rgba(255, 255, 255, 0.3); } .swiper .swiper-slide{ width: 100%; height: 12rem; position: relative; } .swiper .swiper-slide div{ width: 100%; height: auto; position: absolute; box-sizing: border-box; padding: 0 1.6rem; top: 5.35rem; line-height: 0.82rem; color: #fff; font-size: 0.61rem; white-space: pre; } .swiper .swiper-button-next,.swiper .swiper-button-prev{ width: 0.24rem; height: 0.43rem; } .swiper .swiper-button-next:after,.swiper .swiper-button-prev:after{ font-size: 0.5rem; } .bannernumbg{ width: 100%; height: 0.56rem; position: absolute; bottom: 1.7rem; left: 0; box-sizing: border-box; padding: 0 1.6rem; z-index: 9; color: #fff; line-height: 0.56rem; font-size: 0.21rem; } .bannernum{ font-size: 0.4rem; } .top{ width: 100%; height: 1.35rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 1.6rem; position: fixed; top: 0; left: 0; z-index: 20; } .top .logo{ display: block; width: 4.05rem; height: 0.81rem; background: url(../images/logo.png) 0 0 no-repeat; background-size: 100% 100%; margin-top: 0.27rem; } .top:hover,.topfix{ background-color: #fff; border-bottom: 1px solid #ccc; } .nav{ display: flex; flex: 1; height: 1.35rem; justify-content: flex-end; } .nav li{ margin-right: 0.35rem; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 0.2rem; } .nav li a{ text-decoration: none; } .nav li .a1{ color: #fff; font-size: 0.21rem; } .nav li .subnav{ width: 100%; height: 0; overflow: hidden; position: fixed; top: 1.35rem; box-sizing: border-box; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center; transition: all .36s; } .nav li .subnav a{ font-size: 0.18rem; color: #333; margin: 0 0.2rem; } .nav .subnavbtn:hover .subnav{ height: 0.5rem; } .top:hover .logo,.topfix .logo{ background: url(../images/logo_cs.png) 0 0 no-repeat; background-size: 100% 100%; } .top:hover .nav li .a1,.topfix .nav li .a1{ color: #333; } .nav li::after{ content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 4px; background: #001eb4; transform: translate(-50%); transition: all .36s; } .nav li:hover::after{ width: 60%; } .about-box{ width: 100%; height: auto; min-height: 8.17rem; box-sizing: border-box; padding: 0 1.6rem; } .about-text{ width: 100%; min-height:4.6rem; border-bottom: 1px solid #f4f4f4; display: flex; justify-content: space-between; } .about-text-left{ width: 4rem; height: 100%; overflow: hidden; } .about-text-left h1{ display: block; line-height: 0.53rem; font-size: 0.4rem; color: #333; margin-top: 0.91rem; } .about-text-left a{ font-size: 0.19rem; color: #999; line-height: 0.24rem; margin-top: 1.25rem; display: block } .about-text-left a:hover{ text-decoration:underline; } .about-text-right{ width: 10.6rem; height: auto; line-height: 0.41rem; margin-top: 0.94rem; font-size: 0.21rem; color: #333; } .about-icon{ width: 100%; height: 1.8rem; margin-top: 0.9rem; display: flex; } .about-icon div{ width: 25%; height: 1.8rem; } .about-icon div i{ display: block; width: 1.07rem; height: 1.07rem; border-radius: 50%; border: 1px solid #BCBCBC; box-sizing: border-box; margin: 0 auto; } .about-icon div:nth-child(1) i{ background:url(../images/icon1.png) center center no-repeat; background-size: 0.63rem 0.59rem; } .about-icon div:nth-child(2) i{ background:url(../images/icon2.png) center center no-repeat; background-size: 0.59rem 0.59rem; } .about-icon div:nth-child(3) i{ background:url(../images/icon3.png) center center no-repeat; background-size: 0.52rem 0.59rem; } .about-icon div:nth-child(4) i{ background:url(../images/icon4.png) center center no-repeat; background-size: 0.59rem 0.57rem; } .about-icon div span{ display: block; width: 100%; height: 0.34rem; line-height: 0.34rem; font-size: 0.21rem; color: #333; margin-top: 0.38rem; text-align: center; } .product-box{ height: 8.4rem; background: url(../images/pic111.jpg) 0 0 no-repeat; background-size: 100% 5.77rem; overflow: hidden; position: relative; } .product-box-title{ width: 100%; height: 0.41rem; margin-top: 1rem; color: #fff; text-align: center; font-size: 0.4rem; } .product-box-cont{ width: 100%; height: 4.83rem; margin-top: 0.6rem; box-sizing: border-box; padding-left: 1.6rem; display: flex; justify-content: space-between; } .product-box-cont-left{ width: 5.44rem; height: 4.83rem; line-height: 0.4rem; font-size: 0.21rem; color: #fff; } .product-box-cont-listbg{ width: 11rem; height: 4.83rem; overflow: hidden; position: relative; } .product-box-list{ width: 1600px; height: 4.83rem; position: absolute; left: 0; top: 0; } .product-box-list li{ width: 3.91rem; margin-right: 0.4rem; height: 4.82rem; background-color: #1167AE; float: left; } .product-box-list li a{ text-decoration: none; color: #fff; } .product-box-list li .img{ width: 100%; height: 3.73rem; overflow: hidden; position: relative; } .product-box-list li .img img{ width: 100%; height: 100%; } .product-box-list li .img div{ width: 100%; max-height: 100%; height: auto; position: absolute; bottom: -100%; background-color: rgba(17, 103, 174, 0.8); left: 0; box-sizing: border-box; padding: 0.37rem 0.28rem 0.11rem 0.28rem; line-height: 0.32rem; font-size: 0.19rem; } .product-box-list li .text{ display: block; height: 1.08rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 0.2rem; } .product-box-list li .text span{ color: #fff; box-sizing: border-box; font-size: 0.21rem; text-align: center; line-height: 0.3rem; } .product-box-list li:hover .img div{ bottom: 0; top: auto; } .product-box-list li:hover .text span{ text-decoration: underline; font-weight: bold; } .product-box-btnleft{ width: 0.24rem; height: 0.43rem; position: absolute; top: 6.42rem; left:1.6rem; z-index: 2; background: url(../images/btnleft.png) 0 0 no-repeat; background-size: 100% 100%; } .product-box-btnleft:hover{ background: url(../images/btnlefth.png) 0 0 no-repeat; background-size: 100% 100%; } .product-box-btnright{ width: 0.24rem; height: 0.43rem; z-index: 2; position: absolute; top: 6.42rem; left:2.22rem; background: url(../images/btnright.png) 0 0 no-repeat; background-size: 100% 100%; } .product-box-btnright:hover{ background: url(../images/btnrighth.png) 0 0 no-repeat; background-size: 100% 100%; } .news-box{ width: 100%; height: 8.22rem; box-sizing: border-box; padding: 0 1.6rem; } .news-box-title{ width: 100%; height: 0.5rem; display: flex; justify-content: space-between; align-items: center; } .news-box-title dt{ font-size: 0.4rem; font-weight: bold; color: #333; line-height: 0.5rem; } .news-box-title dd{ height: 0.5rem; } .news-box-title dd a{ display: block; list-style: 0.5rem; font-weight: 0.19rem; color: #999; text-decoration: underline; } .news-box-title dd a:hover{ text-decoration: underline; } .news-newslist{ width: 100%; height: 6.5rem; margin-top: 0.46rem; display: flex; justify-content: space-between; } .news-newslist li{ width: 5.07rem; height: 6.5rem; } .news-newslist li a{ text-decoration: none; color: #333; } .news-newslist li h2{ width: 100%; height: 0.51rem; line-height: 0.51rem; display: flex; } .news-newslist li .sp1{ font-size: 0.4rem; color: #999; } .news-newslist li .sp2{ font-size: 0.19rem; margin-left: 0.2rem; color: #999; } .news-newslist li h1{ display: block; width: 100%; height: 0.66rem; line-height: 0.33rem; font-size: 0.21rem; color: #333; margin-top: 0.32rem; word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; } .news-newslist li h3{ font-size: 0.19rem; color: #999; margin-top: 0.08rem; height: 0.66rem; line-height: 0.33rem; word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-newslist li .pic{ width: 5.07rem; height: 2.34rem; overflow: hidden; margin-top: 0.33rem; } .news-newslist li .pic img{ width: 100%; height: 100%; } .news-newslist li .sp3{ margin-top: 0.33rem; font-size: 0.19rem; color: #333; height: 0.26rem; display:inline-block; position:relative ; } .news-newslist li .sp3::after{ content: ''; position: absolute; bottom: 0; left: 0; z-index: 99; width: 100%; transition: all 0.35s; border-bottom: 1px solid #1167AE; transform: scale(0, 1); } .news-newslist li:hover .sp3::after{ transform: scale(1, 1); } .news-newslist li:hover{ box-sizing: border-box; padding-top: 0.16rem; } .news-newslist li:hover h2 .sp1,.news-newslist li:hover h1{ color: #1167AE; } .news-newslist li:hover .sp3{ color: #1167AE; } .friend-box{ height: auto; box-sizing: border-box; padding: 0 1.6rem 1rem 1.6rem; background-color: #f8f8f8; overflow: hidden; } .friend-box-title{ display: block; line-height: 0.53rem; font-size: 0.4rem; height: 1.06rem; color: #333; margin-top: 0.97rem; } .friendlistbg{ width: 100%; height: auto; overflow: hidden; margin-top: 0.57rem; } .friendlist{ width: 100%; height: auto; display: flex; flex-wrap: wrap; } .friendlist li{ width: 3.07rem; height: 1.47rem; margin-right: 0.14rem; } .friendlist li img{ width: 100%; height: 100%; } .friendlist li:nth-child(5n){ margin-right: 0; } .friendlist li:hover img{ } /* .swipera .swiper-slide div.block{width: 100%;height: 100%;opacity: 0;position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.4);color: #fff;display: flex;align-items: center;justify-content: center;} .swipera .swiper-slide div a{display: block;width: 100%;height: 100%;position: relative;} .swipera .swiper-slide div a::before{ content: ''; position: absolute; bottom: 10px; top: 10px; left: 10px; right: 10px; z-index: 99; transition: all 0.35s; border-left: 1px solid #fff; border-right: 1px solid #fff; transform: scale(1, 0); } .swipera .swiper-slide a::after{ content: ''; position: absolute; bottom: 10px; top: 10px; left: 10px; right: 10px; z-index: 99; transition: all 0.35s; border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: scale(0, 1); } .swipera .swiper-slide div:hover .block{opacity: 1;} .swipera .swiper-slide div:hover a::before{ transform: scale(1, 1); } .swipera .swiper-slide div:hover a::after{ transform: scale(1, 1); } */ .bottom{ box-sizing: border-box; padding: 0 1.6rem; display: flex; height: 4.8rem; overflow: hidden; justify-content: space-between; border-top: 1px solid #f8f8f8; } .bottom .btlogo{ width: 4.05rem; height: 0.81rem; background: url(../images/logo_cs.png) 0 0 no-repeat; background-size: 100% 100%; margin-top: 0.79rem; } .btnav{ margin-top: 1.05rem; display: flex; } .btnav li{ max-width: 4rem; width: auto; margin-right: 0.2rem; padding-left: 0.2rem; padding-right: 0.36rem; } .btnav li a{ text-decoration: none; color: #333; } .btnav li .a1{ display: block; height: 0.28rem; line-height: 0.28rem; font-size: 0.21rem; color: #333; margin-bottom: 0.2rem; } .btnav li .a2{ display: block; line-height: 0.38rem; font-size: 0.19rem; color: #6e6e6e; } .footer{ height: 0.67rem; background-color:#1167AE; display: flex; align-items: center; justify-content: center; color: #98C3E6; font-size: 0.19rem; } .footer a{ text-decoration: none; color: #98C3E6; } .pagebanner{ height: 5.33rem; box-sizing: border-box; padding: 0 1.6rem; } .pagebanner1{ background: url(../images/pagebanner1.png) center 0 no-repeat; background-size: 100% auto; overflow: hidden; } .pagebanner2{ background: url(../images/pagebanner2.png) center 0 no-repeat; background-size: 100% auto; overflow: hidden; } .pagebanner3{ background: url(../images/pagebanner3.png) center 0 no-repeat; background-size: 100% auto; overflow: hidden; } .pagebanner4{ background: url(../images/pagebanner4.png) center 0 no-repeat; background-size: 100% auto; overflow: hidden; } .pagebanner5{ background: url(../images/pagebanner5.png) center 0 no-repeat; background-size: 100% auto; overflow: hidden; } .pagebanner-title{ width: 100%; height: 0.67rem; line-height: 0.67rem; margin-top: 2.87rem; font-size: 0.61rem; color: #fff; } .aboutpage-desc{ box-sizing: border-box; padding: 0 1.6rem; display: flex; justify-content: space-between; overflow: hidden; min-height: 7.77rem; } .aboutpage-desc-left{ width: 8.8rem; height: auto; overflow: hidden; } .aboutpage-desc-left h1{ display: block; width: 100%; height: 0.44rem; margin-top: 1rem; font-size: 0.4rem; color: #333; } .aboutpage-desc-left span{ display: block; width: 100%; line-height: 0.4rem; margin-top: 0.4rem; font-size: 0.21rem; color: #999; } .aboutpage-desc-logo{ width: 4.05rem; height: 0.81rem; background: url(../images/logo_cs.png) 0 0 no-repeat; background-size: 100% 100%; margin-top: 0.5rem; margin-bottom: 0.4rem; } .aboutpage-desc-right{ width: 6.4rem; height: 100%; box-sizing: border-box; padding-top: 1rem; display: flex; align-items: center; justify-content: center; } .aboutpage-desc-right img{ width: 100%; height: 4.8rem; } .aboutoage-map{ height: 9.2rem; background:#1167AE url(../images/map.jpg) center center no-repeat; background-size: 100% auto; overflow: hidden; } .aboutoage-map-title{ width: 100%; height: .41rem; margin-top: 1.02rem; text-align: center; color: #fff; font-weight: bold; font-size: 0.4rem; } .aboutpage-history{ height: 7.24rem; box-sizing: border-box; padding: 0 1.6rem } .aboutpage-history-title{ width: 100%; height: 0.5rem; line-height: 0.5rem; margin-top: 0.96rem; font-size: 0.4rem; color: #333; } .aboutpage-history-year{ width: 100%; display: flex; height: 0.7rem; margin-top: 0.45rem; align-items: center; justify-content: space-between; position: relative; } .aboutpage-history-year .year{ width: 0.7rem; height: 0.7rem; border-radius: 50%; box-sizing: border-box; border:1px solid #F1F1F1; display: flex; align-items: center; justify-content: center; font-size: 0.21rem; color: #999; position: relative; background-color: #fff; z-index: 1; } .aboutpage-history-year .s{ background-color: #1167AE; border:1px solid #1167AE; color: #fff; } .aboutpage-history-year::after{ content: ""; width: 100%; height: 1px; background-color: #F5F5F5; position: absolute; top: 50%; } .aboutpage-history-swiper{ width: 100%; margin-top: 0.47rem; height: 3.63rem; overflow: hidden; } .swiperb{ width: 100%; height: 100%; position: relative; } .swiperb .swiper-slide{ position: relative; } .swiperb .swiper-slide .zindex0{ position:absolute; z-index: 0; left: 0; top: 0; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 2.67rem; color: #F4F4F4; font-weight: bold; height: 100%; } .swiperb .swiper-slide .zindex1{ position:absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .swiperb .swiper-slide .zindex1 h1{ display: block; width: 100%; height: 0.36rem; line-height: 0.36rem; text-align: center; font-size: 0.21rem; color: #1167AE; } .swiperb .swiper-slide .zindex1 span{ display: block; width: 100%; height: 0.35rem; line-height: 0.35rem; text-align: center; font-size: 0.19rem; color: #333; } .swiperb-btnleft{ width: 0.24rem; height: 0.43rem; position: absolute; top: 50%; margin-top: -0.215rem; left:0; z-index: 2; background: url(../images/btnleft.png) 0 0 no-repeat; background-size: 100% 100%; } .swiperb-btnleft:hover{ background: url(../images/btnlefth.png) 0 0 no-repeat; background-size: 100% 100%; } .swiperb-btnright{ width: 0.24rem; height: 0.43rem; position: absolute; top: 50%; z-index: 2; margin-top: -0.215rem; right:0rem; background: url(../images/btnright.png) 0 0 no-repeat; background-size: 100% 100%; } .swiperb-btnright:hover{ background: url(../images/btnrighth.png) 0 0 no-repeat; background-size: 100% 100%; } .aboutpage-bottom{ width: 100%; height: 6.33rem; background-color: #f8f8f8; overflow: hidden; } .aboutpage-bottom-gruop{ width: 100%; height: 50%; border-bottom: 1px solid #E9E9E9; box-sizing: border-box; padding: 0 1.6rem; overflow: hidden; } .aboutpage-bottom .aboutpage-bottom-gruop:nth-last-child(1){ border: none; } .aboutpage-bottom-gruop .aboutpage-bottom-gruop-title{ width: 100%; height: 0.41rem; font-size: 0.4rem; color: #333; margin-top: 1.03rem; } .aboutpage-bottom-gruop-list{ width: 100%; height: 0.4rem; margin-top: 0.38rem; display: flex; } .aboutpage-bottom-gruop-list div{ margin-right: 1.76rem; height: 0.4rem; display: flex; align-items: center; } .aboutpage-bottom-gruop-list div i{ display: block; width: auto; height: 0.4rem; margin-right: 0.18rem; } .aboutpage-bottom-gruop-list div span{ font-size: 0.21rem; color: #333; } .mission div:nth-child(1) i{ display: block; width: 0.35rem; height: 0.4rem; background: url(../images/icon5.png) 0 center no-repeat; background-size: 100% 100%; } .values div:nth-child(1) i{ display: block; width: 0.39rem; height: 0.4rem; background: url(../images/icon6.png) 0 center no-repeat; background-size: 100% 100%; } .values div:nth-child(2) i{ display: block; width: 0.36rem; height: 0.4rem; background: url(../images/icon7.png) 0 center no-repeat; background-size: 100% 100%; } .values div:nth-child(3) i{ display: block; width: 0.49rem; height: 0.4rem; background: url(../images/icon8.png) 0 center no-repeat; background-size: 100% 100%; } .pagecontent{ width: 100%; height: auto; box-sizing: border-box; padding: 0 1.6rem; } .connect-title{ width: 100%; height: auto; } .connect-title h1{ display: block; height: 0.42rem; line-height: 0.42rem; margin-top: 1rem; font-size: 0.4rem; color: #333; } .connect-title span{ display: block; height: 0.34rem; line-height: 0.34rem; margin-top: 0.43rem; font-size: 0.21rem; color: #333; } .connect-list{ width: 100%; height: auto; display: flex; margin-top: 0.64rem; flex-wrap: wrap; } .connect-list li{ width: 50%; height: 2.67rem; display: flex; margin-bottom: 0.53rem; } .connect-list li .pic{ width: 2.67rem; height: 2.67rem; } .connect-list li .pic img{ width: 100%; height: 100%; } .connect-list li .cont{ margin-left: 0.3rem; height: 100%; } .connect-list li .cont h1{ width: 100%; display: block; height: 0.36rem; line-height: 0.36rem; margin-top: 0.18rem; font-size: 0.27rem; color: #333; font-weight: bold; } .connect-list li .cont h2{ width: 100%; display: block; height: 0.68rem; line-height: 0.34rem; margin-top: 0.13rem; font-size: 0.19rem; color: #333; margin-top: 0.25rem; font-weight: bold } .connect-list li .cont span{ display: block; width: 100%; height: 0.66rem; line-height: 0.33rem; font-size: 0.19rem; color: #333; margin-top: 0.28rem; } .product-list{ width: 100%; height: auto; display: flex; margin-top: 0.82rem; flex-wrap: wrap; } .product-list li{ width: 5.07rem; margin-right: 0.3rem; height: 5.89rem; background-color: #1167AE; float: left; margin-bottom: 0.4rem; } .product-list li:nth-child(3n){ margin-right: 0; } .product-list li a{ text-decoration: none; color: #fff; } .product-list li .img{ width: 100%; height: 4.8rem; overflow: hidden; position: relative; } .product-list li .img img{ width: 100%; height: 100%; } .product-list li .img div{ width: 100%; max-height: 100%; height: auto; position: absolute; bottom: -100%; background-color: rgba(17, 103, 174, 0.8); left: 0; box-sizing: border-box; padding: 0.37rem 0.28rem 0.11rem 0.28rem; line-height: 0.32rem; font-size: 0.19rem; } .product-list li .text{ display: block; height: 1.09rem; display: flex; align-items: center; box-sizing: border-box; padding: 0 0.5rem; justify-content: center; } .product-list li .text span{ color: #fff; text-align: center; box-sizing: border-box; font-size: 0.21rem; line-height: 0.3rem; } .product-list li:hover .img div{ bottom: 0; top: auto; } .product-list li:hover .text span{ text-decoration: underline; font-weight: bold; } .prodpage-title{ width: 100%; height: 0.54rem; line-height: 0.54rem; margin-top: 0.98rem; display: flex; justify-content: space-between; } .prodpage-title dt{ font-size: 0.4rem; color: #333; } .prodpage-title dd a{ padding-left: 0.48rem; height: 0.54rem; font-size: 0.19rem; color: #999; background: url(../images/back.png) 0 center no-repeat; background-size: 0.29rem 0.24rem; text-decoration: none; } .prodpage{ width: 100%; height: auto; overflow: hidden; margin-top: 0.27rem; } .prodpage img{ max-width: 100%; height: auto; } .news-nav{ width: 100%; height: 0.68rem; margin-top: 0.91rem; display: flex; } .news-nav a{ line-height: 0.68rem; margin-right: 0.64rem; font-size: 0.27rem; color: #999; text-decoration: none; } .news-nav .s,.news-nav a:hover{ font-size: 0.4rem; color: #1167AE; font-weight: bold; border-bottom: 1px solid #1167AE; } .newslist-list{ width: 100%; height: auto; margin-top: 0.46rem; display: flex; flex-wrap: wrap; } .newslist-list li{ width: 5.07rem; height: 6.1rem; margin-right: 0.35rem; position: relative; box-sizing: border-box; } .newslist-list li:nth-child(3n){ margin-right: 0; } .newslist-list li a{ text-decoration: none; color: #333; } .newslist-list li h2{ width: 100%; height: 0.51rem; line-height: 0.51rem; margin-top: 0.4rem; display: flex; justify-content: space-between; align-items: center; } .newslist-list li .sp1{ font-size: 0.4rem; color: #999; } .newslist-list li .sp2{ font-size: 0.19rem; margin-left: 0.2rem; flex: 1; color: #999; } .newslist-list li h1{ display: block; width: 100%; height: 0.66rem; line-height: 0.33rem; font-size: 0.21rem; color: #333; margin-top: 0.38rem; word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; } .newslist-list li h3{ font-size: 0.19rem; color: #999; margin-top: 0.08rem; height: 0.66rem; line-height: 0.33rem; word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .newslist-list li .pic{ width: 5.07rem; height: 2.85rem; overflow: hidden; } .newslist-list li .pic img{ width: 100%; height: 100%; } .newslist-list li h2 .sp3{ font-size: 0.19rem; color: #333; opacity: 0; display: inline-block; height: 0.51rem; transition: all 0.35s; position:relative; } .newslist-list li:hover{ padding-top: 0.16rem; } .newslist-list li:hover h1,.newslist-list li:hover h2 .sp3,.newslist-list li:hover h2 .sp1{ color: #1167AE; } .newslist-list li:hover h2 .sp3{ opacity: 1; } .newslist-list .sp3::after{ content: ''; position: absolute; bottom: 0; left: 0; z-index: 99; width: 100%; transition: all 0.85s; border-bottom: 1px solid #1167AE; transform: scale(0, 1); } .newslist-list:hover .sp3::after{ transform: scale(1, 1); } .topbg{ width: 100%; height: 1.35rem; } .newspage{ /* background: url(../images/newspagebg.jpg) 0 0 repeat-x; background-size: auto 7.64rem; */ overflow: hidden; } .newspage h2{ width: 100%; display: block; height: 0.36rem; line-height: 0.36rem; margin-top: 0.99rem; font-size: 0.27rem; color: #333; } .newspage h1{ width: 100%; display: block; height: auto; line-height: 0.8rem; margin-top: 0.63rem; font-size: 0.53rem; color: #1167AE; font-weight: bold; } .newspage h3{ width: 100%; box-sizing: border-box; padding-left: 0.32rem; background: url(../images/time.png) 0 center no-repeat; background-size: 0.23rem 0.23rem ; font-size: 0.19rem; color: #999; } .newspage .content{ width: 100%; height: auto; overflow: hidden; margin-top: 0.75rem; font-size: 0.19rem; } .newspage-bottom{ width: 100%; margin-top: 0.5rem; } .newspage-bottom span{ display: flex; height: 0.47rem; display: flex; align-items: center; font-size: 0.19rem; } .newspage-bottom span i{ display: block; width: 0.11rem; height: 0.11rem; background-color: #1167AE; border-radius: 50%; } .newspage-bottom span a:hover{ text-decoration: underline; } .language{ width: auto; padding: 0 0.1rem; height: 0.35rem; position: relative; background-color: #fff; border: 1px solid #ccc; font-size: 0.19rem; color: #333; border-radius: 0.175rem; text-align: center; line-height: 0.35rem; box-sizing: border-box; } .langlist{ position: absolute; top: 0.35rem; left: 50%; margin-left: -0.5rem; width: 1rem; background-color: #fff; height: 0; box-sizing: border-box; overflow: hidden; } .langlist li{ width: 100%; height: 0.4rem; line-height: 0.4rem; text-align: center; } .langlist li{ width: 100%; height: 0.4rem; line-height: 0.4rem; text-align: center; color: #333; } .language:hover .langlist{ height: 1.2rem; box-sizing: border-box; border: 1px solid #ccc; } .wrap{ width: 100%; height: 100%; position: fixed; z-index: 200; display: flex; align-items: center; justify-content: center; display: none; } .wrap .notice{ width: 200px; padding: 10px 20px; font-size: 16px; display: inline-block; color: #333; text-align: center; background-color: #fff; border: 1px solid #ccc; } .pageindex{ width: 100%; height: 1rem; } .pagination{ width: 100%; height: 1rem; display: flex; justify-content: center; } .pagination li{ width: 0.4rem; height: 0.4rem; margin: 0 0.1rem; } .pagination li a{ background-color: #fff; border: 1px solid #ccc; font-size: 0.2rem; box-sizing: border-box; color: #ccc; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; } .pagination .disabled span{ width: 100%; height: 100%; display: flex; font-size: 0.2rem; align-items: center; justify-content: center; background-color: #666; color: #fff; box-sizing: border-box; border: 1px solid #666; font-size: 0.2rem; text-align: center; } .pagination .active span{ background-color: #1167AE; border: 1px solid #1167AE; box-sizing: border-box; color: #fff; font-size: 0.2rem; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .pagination li a:hover{ background-color: #1167AE; border: 1px solid #1167AE; box-sizing: border-box; color: #fff; }