.banner { position: relative; height: 100vh; } .banner .focus { height: 100%; z-index: 99; } .banner .focus .swiper-slide img { object-fit: cover; font-family: 'object-fit: cover;'; transition: all 6s linear; transform: scale(1.2, 1.2); height: auto; min-height: 100%; } .banner .focus .swiper-slide-active img, .banner .focus .swiper-slide-duplicate-active img { transition: 7s linear; transform: scale(1, 1); } /* .banner .focus .swiper-slide img{object-fit: none;width:100%;} */ .banner .focus .swiper-slide .container { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -60%); -webkit-transform: translate(-50%, -60%); bottom: auto; } .banner .focus .swiper-slide .container .pro_txt p { font-size: 54px; margin: 0; color: #fff; text-shadow: rgba(48, 51, 58, .5) 0px 2px 6px; line-height: 1.3; font-weight: bold; } .banner .focus .swiper-slide .container .pro_txt p.en { font-size: 16px; color: rgba(255, 255, 255, .67); margin: 0; margin-top: 20px; text-shadow: rgba(48, 51, 58, .5) 0px 2px 6px; text-transform: uppercase; } .banner .focus .swiper-slide a { display: block; width: 100%; height: 100%; } .banner .focus .container.poa { left: 50%; bottom: 1.4rem; z-index: 5; transform: translateX(-50%); -webkit-transform: translateX(-50%); height: .5rem; transition: bottom .4s; -webkit-transition: bottom .4s; } .banner .focus .swiper-slide a { display: block; } .banner .swiper-button-next, .banner .swiper-button-prev { width: .7rem; height: .7rem; margin-top: 0; background-color: #10335D; opacity: 1; border-radius: 50%; box-sizing: border-box; transition: all .4s; -webkit-transition: all .3s; top: auto; top: 0; } .banner .swiper-button-next i, .banner .swiper-button-prev i { font-size: .36rem; color: #fff; } .banner .swiper-button-prev { right: 90px; left: auto; } .banner .swiper-button-next { right: 0; left: auto; } .banner .swiper-pagination { left: 0; right: auto; text-align: left; font-size: .24rem; color: #fff; bottom: 0; font-family: engFont; } .banner .swiper-pagination .swiper-pagination-current { font-size: .42rem; font-weight: bold; font-family: engFontB; } .banner .swiper-button-next:hover, .banner .swiper-button-prev:hover { background: #E67817; } .banner.on .focus .container.poa { bottom: 156px; } section .container { position: relative; } .poa { position: absolute; } .swiper-button-next:after, .swiper-button-prev:after { display: none; } .swiper-backface-hidden .swiper-slide { overflow: hidden; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .5; } .news-about-box { min-height: 10.24rem; background-image: url(../images/index-bg1.jpg); background-repeat: no-repeat; background-position: top center; position: relative; z-index: 100; } .news-about-box .container { position: absolute; top: -1rem; transform: translateX(-50%); -webkit-transform: translateX(-50%); left: 50%; } .news-about-box .container .news-box { background-color: #fff; border-radius: .08rem; width: 9.11rem; } .news-about-box .container .news-box .head { padding: .2rem; border-bottom: 1px solid #EFEFEF; margin-bottom: .1rem; } .news-box .head .tabs li { margin-right: .7rem; font-size: .15rem; color: #222222; position: relative; cursor: pointer; } .news-box .head .tabs li.active, .news-box .head .tabs li:hover { color: #10335D; } .news-box .head .tabs li.active::after, .news-box .head .tabs li:hover::after { position: absolute; content: ''; width: .24rem; height: .05rem; border-radius: .03rem; background-color: #10335D; left: 50%; margin-left: -.12rem; bottom: -0.3rem; } .news-box .news-list { display: none; padding: .2rem; } .news-box .head .more { background-color: #ECF3F9; color: #8496AB; border-radius: .18rem; } .news-box .head .more:hover { background-color: #E67817; color: #fff; } .news-box .head .more i { width: .3rem; height: .3rem; } .news-box .news-list .list { flex: 1; } .tj-news { margin-right: .26rem; width: 6.11rem; } .tj-news .item { display: flex; } .tj-news .item .left { margin-right: .28rem; flex: 1; } .tj-news .item .right { width: 2.95rem; height: 2rem; border-radius: .06rem; overflow: hidden; } .tj-news .item .right img { width: 100%; height: 100%; object-fit: fill; } .news-box .news-list .item .date { font-size: .2rem; color: #8697AA; font-weight: normal; display: flex; align-items: baseline; } .news-box .news-list .item .date p { margin: 0; padding: 0; font-family: engFont; } .news-box .news-list .item .date .day { font-size: .34rem; font-weight: bold; color: #10335D; margin-right: .08rem; font-family: engFontB; } .news-box .news-list .item .title { font-size: .16rem; color: #222222; margin: .25rem 0; } .news-box .news-list .item .summary { font-size: .14rem; color: #888; } .news-box .news-list .item:hover .title { color: #10335D; } .news-box .list .item { border-bottom: 1px solid #F5F5F5; display: block; margin-bottom: .2rem; padding-bottom: .2rem; } .news-box .list .item:last-child { border-bottom: 0; margin-bottom: 0rem; padding-bottom: 0rem; } .news-box .list .item .title { margin: 0; } .video-box { width: 4.7rem; height: 3.5rem; border-radius: .08rem; overflow: hidden; position: relative; cursor: pointer; } .video-box .paly-btn { position: absolute; z-index: 3; color: #fff; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); left: 50%; top: 50%; text-align: center; } .video-box .paly-btn i { font-size: .6rem; } .video-box .paly-btn p { font-size: .22rem; margin: 0; } .video-box img { position: absolute; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; -webkit-transition: all .3s; transform: scale(1); -webkit-transform: scale(1); } .video-box .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(16, 51, 93, 0.5); z-index: 2; transition: all 0.3s; -webkit-transition: all .3s; } .video-box:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); } .video-box:hover .overlay { background-color: rgba(16, 51, 93, 0.7); } .about-box { margin-top: .7rem; } .about-box .left { width: 5.6rem; margin-right: .9rem; } .title h2 { font-size: .38rem; color: #222222; margin: 0; } .title h2 span { color: #10335D; } .title p { font-size: .19rem; color: #10335D; margin: 0; text-transform: uppercase; } .about-box .text-content { margin: .5rem 0; } .sub-nav-list { padding: .2rem 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-color: rgba(16, 51, 93, 15%); display: flex; } .sub-nav-list .item { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #10335D; font-size: .14rem; } .sub-nav-list .item .iconfont { font-size: .32rem; width: .67rem; height: .67rem; background-color: #E5F0F9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: .1rem; } .sub-nav-list .item p { margin: 0; } .sub-nav-list .item:hover .iconfont { background-color: #E67817; color: #fff; } .sub-nav-list .item.youdeniu .iconfont.active { display: none; } .sub-nav-list .item.youdeniu:hover .iconfont.active { display: flex; } .sub-nav-list .item.youdeniu:hover .iconfont.normal { display: none; } .whln { margin: 1.05rem 0; display: flex; overflow: hidden; border-radius: .08rem; } .whln .item { position: relative; flex: 1; height: 3.38rem; transition: all 0.3s; -webkit-transition: all .3s; overflow: hidden; } .whln .item .img { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .img img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(16, 51, 93, 50%); z-index: 2; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .title { position: absolute; z-index: 3; color: #fff; margin-left: .3rem; margin-top: .65rem; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .title h3 { font-size: .24rem; margin: 0; font-weight: 100; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .title p { text-transform: uppercase; font-size: .17rem; margin: 0; display: none; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .title .text-content { font-size: .15rem; margin: 0; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .iconfont { position: absolute; z-index: 3; color: #fff; } .whln .item .icon-24gl-arrowRight { display: none; right: .6rem; font-size: .4rem; color: #10335D; top: .6rem; transition: all 0.3s; -webkit-transition: all .3s; } .whln .item .iconfont.icon { bottom: .3rem; margin-left: .3rem; font-size: .5rem; transition: all 0.3s; -webkit-transition: all .3s; } .page-box { background-image: url(../images/page-box-bg.jpg); background-repeat: no-repeat; background-position: bottom center; min-height: 4.3rem; padding-top: 3.8rem; } .page-box { /* margin-top: 3.8rem; */ } .ZeRen { /* padding-bottom: 1.8rem; */ height: 7rem; } .ZeRen .title { text-align: center; padding-top: .7rem; } .ZeRen-list { display: flex; margin: .5rem 0; justify-content: space-between; } .ZeRen-list>.item { background-color: rgba(255, 255, 255, 60%); border-radius: .06rem; width: 49%; } /* .ZeRen-list>.item:nth-child(1) { margin-right: .2rem; } .ZeRen-list>.item:nth-child(2) { margin-left: .2rem; } */ .ZeRen-list>.item .head { border-bottom: 1px solid #EFEFEF; height: 2rem; padding: 0 .45rem; box-sizing: border-box; } .ZeRen-list>.item .head .left { margin-right: .4rem; padding-right: .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #EFEFEF; height: 100%; width: 1.58rem; float: left; } .ZeRen-list>.item .head .left .iconfont { width: .7rem; height: .7rem; background-color: #10335D; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: .4rem; margin-bottom: .25rem; } .ZeRen-list>.item .head .left h4 { color: #10335D; font-size: .17rem; margin: 0; } .ZeRen-list>.item .head .right { display: flex; align-items: center; height: 100%; } .ZeRen-list>.item .foot { padding: .2rem .35rem; display: flex; position: relative; } .ZeRen-list>.item .foot .prev-next .swiper-button-next, .ZeRen-list>.item .foot .prev-next .swiper-button-prev { color: #10335D } .ZeRen-list>.item .foot .prev-next .iconfont { font-size: .26rem; } .ZeRen-list>.item .foot .prev-next .swiper-button-prev { right: .7rem; left: auto; } .ZeRen-list>.item .foot .prev-next .swiper-button-next { right: .3rem; left: auto; } .ZeRen-list>.item .foot .more i { background-color: unset; width: auto; height: auto; font-size: .25rem; color: #E67817; } .news-list .item a { font-size: .2rem; color: #222222; font-weight: bold; } .news-list .item .date { font-size: .16rem; color: #999; font-weight: bold; } .page-box .navCard { display: flex; overflow: hidden; border-radius: .08rem; height: 2.65rem; position: absolute; bottom: -1.33rem; background-color: #fff; transform: translateX(-50%); -webkit-transform: translateX(-50%); left: 50%; } .page-box .navCard .item { position: relative; } .page-box .navCard .item .img { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; transition: all 0.3s; -webkit-transition: all .3s; overflow: hidden; } .page-box .navCard .item .img img { width: 100%; transition: all 0.3s; -webkit-transition: all .3s; } .page-box .navCard .item:hover .img img { transform: scale(1.1); -webkit-transform: scale(1.1); } .page-box .navCard .item .head, .page-box .navCard .item .foot { position: absolute; z-index: 2; } .page-box .navCard .item .head { left: .4rem; top: .6rem; } .page-box .navCard .item .head .title h2 { margin-bottom: .15rem; } .page-box .navCard .item .foot { left: .4rem; bottom: .5rem; } .page-box .navCard .item .foot .iconfont { font-size: .28rem; color: #10335D; width: .45rem; height: .45rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s; -webkit-transition: all .3s; } .page-box .navCard .item.LianXi:hover .foot .iconfont, .page-box .navCard .item.JiaRu:hover .foot .iconfont { background-color: #10335D; } .page-box .navCard .item.RenCai:hover .foot { background-color: #E67817; } .page-box .navCard .item:hover .foot .iconfont { color: #fff; } .page-box .navCard .item .head .title h2 { font-size: .3rem; } .page-box .navCard .item.LianXi { flex: 3; } .page-box .navCard .item.JiaRu { flex: 2; background-color: #E67817; } .page-box .navCard .item.JiaRu .head .title h2, .page-box .navCard .item.JiaRu .head .title p, .page-box .navCard .item.JiaRu .foot .iconfont { color: #fff; } .page-box .navCard .item.RenCai .head .title h2, .page-box .navCard .item.RenCai .head .title p { color: #fff; } .page-box .navCard .item.RenCai .head .title h2 { font-size: .26rem; font-weight: normal; margin-bottom: .2rem; } .page-box .navCard .item.RenCai .head .title p { font-size: .14rem; padding-right: 2.8rem; } .page-box .navCard .item.RenCai .foot { right: .3rem; top: .8rem; left: auto; width: .45rem; height: .45rem; display: flex; align-items: center; justify-content: center; background-color: #fff; color: #10335D; border-radius: 50%; } .page-box .navCard .item.RenCai { flex: 5; } .footer { margin-top: 2.5rem !important; } @media (any-hover: hover) { .whln .item:hover { flex: 2; } .whln .item:hover .overlay { background-color: rgba(16, 51, 93, 0%); } .whln .item:hover .title { color: #10335D; } .whln .item:hover .title h3 { font-weight: bold; font-size: .36rem } .whln .item:hover .title p { display: block; } .whln .item:hover .title .text-content { margin-top: .5rem; } .whln .item:hover .iconfont.icon { /* display: none; */ margin-left: -0.5rem; opacity: 0; } .whln .item:hover .icon-24gl-arrowRight { display: block; right: .3rem; } } @media screen and (max-width:768px) { .news-about-box .container { position: unset; top: unset; transform: unset; -webkit-transform: unset; left: unset; } .news-about-box .container>.flex { flex-direction: column; flex-wrap: wrap; } .news-about-box .container .news-box { width: auto; margin: .2rem; } .news-box .head .tabs li { margin-right: .4rem; font-size: .3rem; } .news-box .news-list { flex-direction: column; flex-wrap: wrap; } .tj-news { margin-right: 0; margin-bottom: .5rem; width: auto; } .video-box { margin: .2rem; box-sizing: border-box; width: auto; } .video-box .paly-btn i { font-size: 1rem; } .video-box .paly-btn p { font-size: .32rem; } .about-box { margin: .2rem; } .about-box .left { width: auto; margin-right: 0; } .about-box>.flex { flex-direction: column; } .about-box .right img { width: 100%; } .whln { flex-wrap: wrap; } .whln .item { width: calc(100%/2); flex: auto; height: 2.8rem; } .page-box { margin-top: -.5rem; padding-top: 0; } /* .ZeRen { padding-bottom: .5rem; } */ .ZeRen-list { flex-direction: column; } .ZeRen-list>.item { width: 100%; margin-bottom: .2rem; } .ZeRen-list>.item .head { padding: 0 .25rem; height: 2.4rem; } .ZeRen-list>.item .head .left { width: 2rem; margin-right: .2rem; padding-right: .2rem; } .ZeRen { padding-bottom: 9.3rem; } .page-box .navCard { transform: translateX(-50%); -webkit-transform: translateX(-50%); left: 50%; width: calc(100%/1 - .4rem); flex-direction: column; height: 8rem; bottom: -1.7rem; } .page-box .navCard .item { height: 2.65rem; overflow: hidden; flex: 1 !important; } .page-box .navCard .item.RenCai { flex: 1; } .page-box .navCard .item .img img { height: 100%; object-fit: cover; } .news-box .news-list .item .date { font-size: .3rem; } .news-box .news-list .item .date .day { font-size: .4rem; } .news-box .news-list .item .title { font-size: .3rem; } .news-box .news-list .item .summary { font-size: .28rem; } .tj-news .item .right { width: 2.5rem; height: 2.5rem; } .sub-nav-list .item .iconfont { font-size: .5rem; width: .85rem; height: .85rem; } .sub-nav-list .item { font-size: .28rem; } .whln .item .title h3 { font-size: .4rem; } .whln .item .title { margin-top: .45rem; } .whln .item .title .text-content { font-size: .3rem; } .whln .item .iconfont.icon { bottom: .2rem; font-size: .7rem; } .title h2 { font-size: .5rem; } .title p { font-size: .38rem } .ZeRen-list>.item .head .left .iconfont { width: 1rem; height: 1rem; font-size: .6rem; } .ZeRen-list>.item .head .left h4 { font-size: .30rem; text-align: center; } .news-list .item a { font-size: .3rem; } .ZeRen-list>.item .foot .prev-next .iconfont { font-size: .36rem; } .page-box .navCard .item .head .title h2,.page-box .navCard .item.RenCai .head .title h2 { font-size: .45rem; } .page-box .navCard .item .head { top: .4rem; } .page-box .navCard .item .foot { bottom: .2rem; } .page-box .navCard .item .foot .iconfont { font-size: .48rem; } .page-box .navCard .item.RenCai .head .title p { font-size: .28rem; padding-right: 1rem; } }