.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; border-bottom: solid 2px #f6f6f6; } .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 .title { font-size: 0.36rem; line-height: 0.36rem; color: #333333; margin-top: 0.8625rem; text-align: center; } .content .box .top .honor { width: 73%; margin: 0 auto; margin-top: 0.555rem; } .content .box .top .honor::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .top .honor .top-box { width: 100%; margin-top: 0.6075rem; } .content .box .top .honor .top-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .top .honor .top-box .left { width: 45.57%; float: left; height: 2.55751rem; background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); border: solid 1px #eee3cb; position: relative; } .content .box .top .honor .top-box .left .en { font-family: "DIN-Regular"; font-size: 0.15rem; line-height: 0.15rem; letter-spacing: -0.0075rem; color: #d5d5d5; margin-top: 0.3825rem; margin-left: 0.3rem; } .content .box .top .honor .top-box .left .title { font-size: 0.3rem; font-weight: bold; line-height: 0.45rem; letter-spacing: 0.0015rem; color: #b49a7f; margin-left: 0.3rem; margin-top: 0.795rem; text-align: left; } .content .box .top .honor .top-box .left .icon { width: 0.975rem; position: absolute; top: 0.3375rem; right: 0.5175rem; } .content .box .top .honor .top-box .left .icon img { width: 100%; } .content .box .top .honor .top-box .right { width: 52.857%; float: right; } .content .box .top .honor .top-box .right .right-top { width: 100%; height: 1.2rem; background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); border: solid 1px #eee3cb; overflow: hidden; position: relative; } .content .box .top .honor .top-box .right .right-top .title { font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; color: #b49a7f; margin-left: 0.375rem; margin-top: 0.315rem; text-align: left; } .content .box .top .honor .top-box .right .right-top .en { font-family: "DIN-Regular"; font-size: 0.15rem; line-height: 0.15rem; letter-spacing: -0.0075rem; color: #d5d5d5; margin-top: 0.285rem; margin-left: 0.375rem; } .content .box .top .honor .top-box .right .right-top .icon { width: 0.765rem; position: absolute; top: -0.15rem; right: 0.57rem; } .content .box .top .honor .top-box .right .right-top .icon img { width: 100%; } .content .box .top .honor .top-box .right .right-bottom { margin-top: 0.145rem; width: 100%; height: 1.2rem; background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); border: solid 1px #eee3cb; overflow: hidden; position: relative; } .content .box .top .honor .top-box .right .right-bottom .title { font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; color: #b49a7f; margin-right: 0.3975rem; margin-top: 0.2925rem; text-align: right; } .content .box .top .honor .top-box .right .right-bottom .en { font-family: "DIN-Regular"; font-size: 0.15rem; line-height: 0.15rem; letter-spacing: -0.0075rem; color: #d5d5d5; margin-top: 0.24rem; margin-right: 0.3975rem; text-align: right; } .content .box .top .honor .top-box .right .right-bottom .icon { width: 0.8775rem; position: absolute; top: 0.36rem; left: 0.4575rem; } .content .box .top .honor .top-box .right .right-bottom .icon img { width: 100%; } .content .box .top .honor .result { width: 100%; margin-top: 0.6525rem; } .content .box .top .honor .result .list { width: 100%; } .content .box .top .honor .result .list::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .top .honor .result .list .item { width: 47.428%; height: 1.275rem; float: left; margin-right: 5.144%; margin-bottom: 0.33rem; background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); position: relative; } .content .box .top .honor .result .list .item:nth-child(2n+2) { margin-right: 0; } .content .box .top .honor .result .list .item .en { font-family: "DIN-Regular"; font-size: 0.15rem; line-height: 0.15rem; letter-spacing: -0.0075rem; color: #d5d5d5; margin-top: 0.3825rem; margin-left: 0.3rem; } .content .box .top .honor .result .list .item .title { font-size: 0.18rem; font-weight: bold; line-height: 0.20rem; color: #ea222d; margin-left: 0.3rem; margin-top: 0.18rem; margin-right: 0.8625rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: left; } .content .box .top .honor .result .list .item .icon { width: 0.4425rem; position: absolute; top: 0.3375rem; right: 0.3075rem; } .content .box .top .honor .result .list .item .icon img { width: 100%; } .content .box .bottom { width: 100%; height: 7.42502rem; margin-top: 0.585rem; position: relative; } .content .box .bottom .title { font-size: 0.36rem; line-height: 0.36rem; color: #333333; text-align: center; } .content .box .bottom .img { position: absolute; left: 0; bottom: 0; width: 100%; } .content .box .bottom .img img { width: 100%; } .content .box .bottom .left { width: 73%; margin: 0 auto; margin-top: 0.7275rem; position: relative; } .content .box .bottom .left .swiper1 { position: absolute; top: 0; left: 0; width: 2.80501rem; box-shadow: 0px 0px 0.225rem 0px rgba(0, 0, 0, 0.05); border: solid 0.045rem #eae3d1; } .content .box .bottom .left .swiper1 .swiper-slide { width: 100%; } .content .box .bottom .left .swiper1 .swiper-slide .swiper-box { width: 100%; overflow: hidden; } .content .box .bottom .left .swiper1 .swiper-slide .swiper-box .img { width: 2.80501rem; height: 3.97501rem; position: relative; bottom: auto; } .content .box .bottom .left .swiper1 .swiper-slide .swiper-box .img img { width: 100%; } .content .box .bottom .left .icon { width: 0.3825rem; height: 0.51rem; float: left; position: absolute; top: 0; left: 3.26251rem; } .content .box .bottom .left .icon img { width: 100%; } .content .box .bottom .left .swiper2 { width: 7.27502rem; height: 0.51rem; position: absolute; top: 0; left: 3.26251rem; } .content .box .bottom .left .swiper2 .swiper-slide { width: 100%; height: 100%; } .content .box .bottom .left .swiper2 .swiper-slide::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .bottom .left .swiper2 .swiper-slide .text { width: 6.57752rem; float: right; } .content .box .bottom .left .swiper2 .swiper-slide .text .time { font-family: "Arial"; font-size: 0.225rem; font-weight: bold; line-height: 0.225rem; letter-spacing: -0.0075rem; color: #ea222d; } .content .box .bottom .left .swiper2 .swiper-slide .text .p { font-size: 0.135rem; line-height: 0.135rem; color: #333333; padding-left: 0.18rem; margin-top: 0.15rem; position: relative; } .content .box .bottom .left .swiper2 .swiper-slide .text .p::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0; left: 0; } .content .box .bottom .left .swiper3 { width: 7.27502rem; height: 2.30251rem; position: absolute; top: 1.785rem; left: 3.26251rem; } .content .box .bottom .left .swiper3 .swiper-slide { width: 25%; height: 2.30251rem; } .content .box .bottom .left .swiper3 .swiper-slide .img { width: calc(100% - 0.09rem); box-shadow: 0px 0px 0.225rem 0px rgba(0, 0, 0, 0.05); border: solid 0.045rem #eae3d1; } .content .box .bottom .left .swiper3 .swiper-slide .img img { width: 100%; } .content .box .bottom .left .swiper-button-next, .content .box .bottom .left .swiper-button-prev { position: absolute; top: 1.155rem; width: 0.12rem; height: 0.21rem; margin-top: 0; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; transition: 0.3s; } .content .box .bottom .left .swiper-button-next::after, .content .box .bottom .left .swiper-button-prev::after { font-size: 0.21rem; } .content .box .bottom .left .swiper-button-next:hover, .content .box .bottom .left .swiper-button-prev:hover { color: #ea222d; } .content .box .bottom .left .swiper-button-next { right: 0; left: auto; } .content .box .bottom .left .swiper-button-prev { right: 0.765rem; left: auto; } .content .box .bottom .left .line1 { width: 5.97751rem; height: 0.0075rem; opacity: 0.3; background-color: #c5af7c; position: absolute; top: 1.26rem; left: 3.26251rem; } .content .box .bottom .left .line2 { width: 0.015rem; height: 0.15rem; position: absolute; top: 1.185rem; right: 0.4425rem; background-color: #ea222d; } .page { width: 100%; height: 0.15rem; padding-top: 0.585rem; padding-bottom: 0.7275rem; text-align: center; display: flex; justify-content: center; } .page > div { height: 0.135rem; font-size: 0.135rem; font-weight: bold; color: #333333; line-height: 0.14rem; flex-shrink: 0; cursor: pointer; transition: all 0.5s; } .page > div:hover { color: #EA222D; } .page > div:first-of-type { padding-right: 0.1275rem; border-right: 0.0375rem solid #EA222D; margin-right: 0.375rem; padding-bottom: 0rem; } .page > div:last-of-type { padding-left: 0.1275rem; border-left: 0.0375rem solid #EA222D; margin-left: 0.375rem; padding-bottom: 0rem; } .page > div .red_:nth-child(1) { margin-right: 0; } .page > .page_num { margin: 0 0.13rem; padding-bottom: 0.0675rem; } .page .page_active { color: #EA222D; border-bottom: 2px solid #EA222D; } @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 .honor { width: 90%; padding-bottom: 5vw; } .content .box .top .honor .top-box .left { width: 100%; height: 2rem; } .content .box .top .honor .top-box .left .en { font-size: 0.25rem; line-height: 0.25rem; } .content .box .top .honor .top-box .left .title { margin-top: 0.2rem; } .content .box .top .honor .top-box .right { width: 100%; margin-top: 0.3rem; float: right; } .content .box .top .honor .top-box .right .right-top { height: 2rem; } .content .box .top .honor .top-box .right .right-top .title { font-size: 0.315rem; line-height: 0.315rem; margin-top: 0.4rem; } .content .box .top .honor .top-box .right .right-top .en { font-size: 0.25rem; line-height: 0.25rem; } .content .box .top .honor .top-box .right .right-top .icon { width: 1rem; top: auto; bottom: -0.05rem; } .content .box .top .honor .top-box .right .right-bottom { margin-top: 0.3rem; height: 2rem; } .content .box .top .honor .top-box .right .right-bottom .title { font-size: 0.315rem; line-height: 0.315rem; margin-top: 0.4rem; } .content .box .top .honor .top-box .right .right-bottom .en { font-size: 0.25rem; line-height: 0.25rem; } .content .box .top .honor .top-box .right .right-bottom .icon { width: 1rem; } .content .box .top .honor .result { width: 100%; margin-top: 0.5rem; } .content .box .top .honor .result .list .item { width: 100%; height: 1.5rem; float: left; margin-right: 0; margin-bottom: 0.5rem; background-color: #ffffff; position: relative; } .content .box .top .honor .result .list .item .en { font-family: "DIN-Regular"; font-size: 0.25rem; line-height: 0.25rem; letter-spacing: -0.0075rem; color: #d5d5d5; margin-top: 0.3825rem; margin-left: 0.3rem; } .content .box .top .honor .result .list .item .title { font-size: 0.3rem; font-weight: bold; line-height: 0.35rem; color: #e84127; margin-left: 0.3rem; margin-top: 0.18rem; margin-right: 0.8625rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .content .box .bottom { width: 100%; height: 10rem; } .content .box .bottom .left .line1 { display: none; } .content .box .bottom .left .line2 { display: none; } .content .box .bottom .left .swiper2 { display: none; } .content .box .bottom .left .swiper3 { display: none; } .content .box .bottom .left { width: 90%; margin: 0 auto; margin-top: 0.5rem; position: relative; } .content .box .bottom .left .swiper1 { position: absolute; top: 0; left: 10%; width: 80%; } .content .box .bottom .left .swiper1 .swiper-slide .swiper-box .img { width: 100%; height: auto; position: relative; bottom: auto; } .content .box .bottom .left .swiper-button-prev { right: auto; left: 0; } .content .box .bottom .img { position: absolute; left: 0; bottom: 0; width: 100%; height: 6.06002rem; } .content .box .bottom > .img > img { height: 100%; position: absolute; top: 0; left: -200px; right: -200px; margin: auto; } .content .box .bottom .left .swiper-button-next, .content .box .bottom .left .swiper-button-prev { position: absolute; top: 4rem; } .content .box .bottom .left .swiper-button-next::after, .content .box .bottom .left .swiper-button-prev::after { font-size: 0.3rem; } .page { width: 100%; height: 0.3rem; padding-top: 0.375rem; padding-bottom: 0.8rem; text-align: center; display: flex; justify-content: center; } .page > div { height: 0.3rem; font-size: 0.3rem; font-weight: bold; color: #333333; line-height: 0.3rem; flex-shrink: 0; cursor: pointer; } }