.in_banner_bot { width: 100%; height: 3.85rem; overflow: hidden; position: relative; } .content { width: 100%; position: relative; z-index: 3; background-color: white; } .content .box { width: 100%; } .content .box .top { width: 100%; padding-top: 0.33rem; background-color: #fff; } .content .box .top .nav { margin-left: 1.9575rem; } .content .box .top .nav nav ul::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .top .nav nav ul li { float: left; font-size: 0.105rem; line-height: 0.105rem; color: #a8a8a8; } .content .box .top .nav nav ul li a { color: #a8a8a8; } .content .box .top .nav nav ul li:nth-of-type(2n) { margin: 0 0.135rem; } .content .box .top .nav nav ul li.active a { color: #333; } .content .box .top-box .title { font-size: 0.36rem; line-height: 0.36rem; color: #333; padding-top: 1.065rem; text-align: center; } .content .box .top-box .en { width: 0.44rem; margin: 0 auto; font-family: "Arial"; font-size: 0.18rem; font-weight: bold; line-height: 0.18rem; color: #333; position: relative; text-align: center; margin-top: 0.105rem; } .content .box .top-box .en::after { content: ""; width: 0.0375rem; height: 0.15rem; background-color: #ea222d; position: absolute; top: 0.01rem; left: -0.1275rem; } .content .change { margin-top: 0.4725rem; height: 1.245rem; width: 100%; position: relative; z-index: 2; background-color: #EFEFEF; display: flex; justify-content: center; align-items: flex-start; } .content .change .changeNav { width: 33.33%; height: 1.245rem; border-right: 1px solid #fff; display: block; text-align: center; font-size: 0.195rem; font-weight: bold; color: #333333; transition: all 0.5s; cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; } .content .change .changeNav:last-of-type { border: none; } .content .change .changeNav::after { content: ""; display: block; height: 0; width: 100%; background-color: #DE272A; position: absolute; z-index: -1; bottom: 0; transition: all 0.5s; } /* .content .change a:hover { height: 118px; line-height: 118px; background-color: #DE272A; color: #fff; } */ .content .change .active { width: 40%; color: #fff!important; } .content .change .active::after { height: 100%; } .content .img-box { width: 100%; height: 6.0001rem; position: relative; } .content .img-box .Swiper1 { width: 100%; height: 100%; overflow: hidden; } .content .img-box .Swiper1 .swiper-img { width: 100%; height: 100%; position: relative; } .content .img-box .Swiper1 .swiper-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .content .img-box .Swiper1 .swiper-img .cover { width: 100%; height: 3.1050rem; background-image: linear-gradient(to top, #000, transparent); position: absolute; bottom: 0; left: 0; } .content .img-box .Swiper1 .swiper-img .text { width: 5.1376rem; position: absolute; bottom: 0.63rem; left: 1.095rem; } .content .img-box .Swiper1 .swiper-img .text .title { text-align: left; font-size: 0.36rem; font-weight: bold; color: #FFFFFF; line-height: 0.4rem; } .content .img-box .Swiper1 .swiper-img .text .intro { min-height: 0.5rem; margin-top: 0.3rem; font-size: 0.135rem; color: #FFFFFF; line-height: 0.27rem; } .content .img-box .Swiper1 .prev1, .content .img-box .Swiper1 .next1 { width: 0.5rem; height: 0.5rem; background-color: #fff; box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2); border-radius: 50%; font-weight: bold; color: #ea222d; transition: all 0.5s; } .content .img-box .Swiper1 .prev1:hover, .content .img-box .Swiper1 .next1:hover { background-color: #ea222d; color: #fff; } .content .img-box .Swiper1 .prev1::after, .content .img-box .Swiper1 .next1::after { font-size: 0.165rem; } .content .img-box .Swiper1 .prev1 { top: auto; bottom: 0.6675rem; left: auto; right: 2.6rem; } .content .img-box .Swiper1 .next1 { top: auto; bottom: 0.6675rem; left: auto; right: 1.935rem; } .content .img-box .Swiper1 .one { text-align: right; padding-right: 0.975rem; box-sizing: border-box; bottom: 0.6675rem; } .content .img-box .Swiper1 .one .dangqian{ font-size: 0.39rem; font-family: Arial; font-weight: bold; color: #FFFFFF; } .content .img-box .Swiper1 .one .zongshu { margin-left: 0.05rem; font-size: 0.225rem; font-family: Arial; font-weight: bold; color: #FFFFFF; opacity: 0.2; } .content .box .bottom { width: 100%; height: 7.71752rem; margin-top: 0.7125rem; position: relative; overflow: hidden; } .content .box .bottom .bg-img { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .content .box .bottom .bg-img img { width: 100%; } .content .box .bottom .bottom-box { position: relative; } .content .box .bottom .bottom-box .title { font-size: 0.36rem; line-height: 0.36rem; color: #ffffff; padding-top: 0.9225rem; text-align: center; } .content .box .bottom .bottom-box .en { width: 0.44rem; margin: 0 auto; font-family: "Arial"; font-size: 0.18rem; font-weight: bold; line-height: 0.18rem; color: #ffffff; position: relative; text-align: center; margin-top: 0.105rem; } .content .box .bottom .bottom-box .en::after { content: ""; width: 0.0375rem; height: 0.15rem; background-color: #ea222d; position: absolute; top: 0.01rem;; left: -0.1275rem; } .content .box .bottom .bottom-box .swiper { width: 8.5rem; height: 4.32rem; float: right; margin-right: 5%; margin-top: 0.675rem; } .content .box .bottom .bottom-box .swiper .swiper-slide { width: 100%; height: 100%; overflow: hidden; position: relative; } .content .box .bottom .bottom-box .swiper .swiper-slide .img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .content .box .bottom .bottom-box .swiper .swiper-slide .img img { width: 100%; transition: 0.5s; } .content .box .bottom .bottom-box .swiper .swiper-slide:hover .img img { transform: scale(1.1); } .content .box .bottom .bottom-box .swiper .swiper-slide .img .cover { width: 100%; height: 50%; background-image: linear-gradient(to top, black -30%, transparent); position: absolute; bottom: 0; } .content .box .bottom .bottom-box .swiper .swiper-slide .img .intro { width: 90%; left: 50%; transform: translateX(-50%); position: absolute; bottom: 0.3rem; color: #fff; font-size: 0.13rem; line-height: 0.2rem; } .content .box .bottom .bottom-box .pagination1-box { display: inline-block; margin-left: 5%; margin-top: 0.675rem; width: 4rem; height: 4.32rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 { display: inline-block; position: static; width: 4rem; height: 4.32rem; overflow: auto; background-color: rgba(0, 0, 0, 0.2); } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1::-webkit-scrollbar { width: 0.045rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.2); border-radius: 0.015rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1::-webkit-scrollbar-thumb { border-radius: 0.015rem; background: #ea222d; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box { width: 100%; height: 1.065rem; border-bottom: solid 0.015rem rgba(159, 159, 159, 0.1); position: relative; transition: 0.5s; cursor: pointer; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a { width: 100%; height: 100%; display: block; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .icon-left { width: 0.2325rem; height: 0.2775rem; float: left; margin-left: -0.375rem; margin-top: 0.42rem; transition: 0.5s; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .icon-left img { width: 100%; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .text { position: absolute; float: left; left: 0.36rem; top: 0.36rem; transition: 0.5s; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .text .city { display: block; font-family: "Arial"; font-size: 0.18rem; font-weight: bold; line-height: 0.18rem; color: #ffffff; opacity: 0.5; text-align: left; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .text .name { display: block; font-size: 0.15rem; line-height: 0.15rem; color: #ffffff; text-align: left; margin-top: 0.105rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .icon-right { position: absolute; right: 0.2025rem; bottom: 0.33rem; width: 0.135rem; height: 0.15rem; transition: 0.5s; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .icon-right img { width: 100%; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a:hover { background-color: #ea222d; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a:hover .icon-left { margin-left: 0.375rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a:hover .text { left: 0.8325rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a:hover .icon-right { opacity: 0; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a.active { background-color: #ea222d; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a.active .icon-left { margin-left: 0.375rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a.active .text { left: 0.8325rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a.active .icon-right { opacity: 0; } @media screen and (max-width: 1020px) { .in_banner_bot { height: 5rem; } .content .box .top .nav { margin-left: 5%; margin-top: 0.3rem; } .content .box .top .nav nav ul li { float: left; font-size: 0.25rem; line-height: 0.25rem; color: #a8a8a8; } .content .box .top-box .title { font-size: 0.42rem; line-height: 0.42rem; color: #333; padding-top: 1.065rem; text-align: center; } .content .change .changeNav { padding: 0 0.2rem; width: 33.33%; height: 1.245rem; border-right: 1px solid #fff; display: block; text-align: center; font-size: 0.25rem; font-weight: bold; color: #333333; transition: all 0.5s; cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; } .content .img-box .Swiper1 .swiper-img .text { width: 3.5rem; position: absolute; bottom: 0.63rem; left: 5%; } .content .img-box .Swiper1 .swiper-img .text .intro { min-height: 0.5rem; margin-top: 0.3rem; font-size: 0.23rem; color: #FFFFFF; line-height: 0.35rem; } .content .img-box .Swiper1 .swiper-img .cover { width: 100%; height: 100%; background-image: linear-gradient(to top, #000 -60%, transparent); position: absolute; bottom: 0; left: 0; } .content .img-box .Swiper1 .prev1, .content .img-box .Swiper1 .next1 { width: 0.6rem; height: 0.6rem; background-color: #fff; box-shadow: 0px 0px 21px 0px rgb(0 0 0 / 20%); border-radius: 50%; font-weight: bold; color: #ea222d; transition: all 0.5s; } .content .img-box .Swiper1 .one { text-align: right; padding-right: 0.5rem; box-sizing: border-box; bottom: 0.6675rem; } .content .img-box .Swiper1 .next1 { top: auto; bottom: 0.6675rem; left: auto; right: 1.6rem; } .content .img-box .Swiper1 .prev1 { top: auto; bottom: 0.6675rem; left: auto; right: 2.4rem; } .content .box .bottom { width: 100%; height: 8.5rem; margin-top: 0.855rem; position: relative; overflow: hidden; } .content .box .bottom .bottom-box .title { font-size: 0.42rem; line-height: 0.42rem; color: #ffffff; padding-top: 0.9225rem; text-align: center; } .content .box .bottom .bg-img img { position: absolute; height: 100%; width: auto; top: 0; left: -1000px; right: -1000px; margin: auto; } .content .box .bottom .bottom-box .pagination1-box { margin-left: 5%; margin-top: 0.3rem; width: 90%; height: 1.3rem; display: inline-block; overflow-y: auto; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 { display: inline-block; position: static; width: 100%; height: 1.1rem; overflow: hidden; background-color: rgba(0, 0, 0, 0.2); } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box { width: 2.8rem; height: 1.08rem; border-bottom: solid 0.015rem rgba(159, 159, 159, 0.1); position: relative; transition: 0.5s; cursor: pointer; float: left; overflow: hidden; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .text .city { font-size: 0.24rem; line-height: 0.24rem; } .content .box .bottom .bottom-box .pagination1-box .swiper-pagination1 .swiper-box a .text .name { font-size: 0.21rem; line-height: 0.21rem; } .content .box .bottom .bottom-box .swiper { width: 90%; height: 3.8rem; float: right; margin-right: 5%; margin-top: 0.3rem; } .content .box .bottom .bottom-box .swiper .swiper-slide .img .cover { width: 100%; height: 50%; background-image: linear-gradient(to top, black -40%, transparent); position: absolute; bottom: 0; } .content .box .bottom .bottom-box .swiper .swiper-slide .img .intro { width: 90%; left: 50%; transform: translateX(-50%); position: absolute; bottom: 0.5rem; color: #fff; font-size: 0.25rem; line-height: 0.3rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } }