.in_banner_bot { width: 100%; height: 3.85rem; overflow: hidden; position: relative; } .content { width: 100%; padding-bottom: 0.9375rem; position: relative; z-index: 3; background-color: white; } .content .box { width: 100%; } .content .box .top { width: 100%; position: relative; padding-top: 0.33rem; height: 2.5rem; } .content .box .top .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .content .box .top .img img { position: absolute; left: 0; top: -500px; bottom: -500px; margin: auto; width: 100%; } .content .box .top .nav { margin-left: 1.9575rem; position: relative; z-index: 2; } .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 .text { width: 73%; margin: 0 auto; margin-top: 0.6rem; position: relative; z-index: 2; } .content .box .top .text .title { font-size: 0.315rem; font-weight: bold; line-height: 0.51rem; color: #333333; } .content .box .top .text .information { width: 100%; margin-top: 0.4rem; } .content .box .top .text .information::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .top .text .information .time { float: left; padding-left: 0.1275rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; } .content .box .top .text .information .time::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0; left: 0; } .content .box .top .text .information .time span { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.12rem; } .content .box .top .text .information .quantity { float: left; margin-left: 0.5175rem; padding-left: 0.1275rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; } .content .box .top .text .information .quantity::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0; left: 0; } .content .box .top .text .information .quantity span { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.12rem; } .content .box .top .text .information .font { float: left; margin-left: 0.645rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; margin-top: -0.06rem; cursor: pointer; } .content .box .top .text .information .font span { font-size: 0.18rem; line-height: 0.18rem; font-weight: bold; color: #333333; margin-left: 0.12rem; } .content .box .top .text .information .font span b { font-size: 0.12rem; line-height: 0.12rem; color: #333333; margin-left: 0.02rem; } .content .box .top .text .information .phone { float: left; margin-left: 0.645rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; margin-top: -0.06rem; cursor: pointer; } .content .box .top .text .information .phone span { width: 0.135rem; height: 0.18rem; display: inline-block; margin-left: 0.12rem; } .content .box .top .text .information .phone span img { width: 100%; } .content .box .top .text .information .phone .img { width: 0px; height: 0px; background-color: white; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2); position: absolute; top: 50px; left: 0px; opacity: 0; transition: 0.2s; } .content .box .top .text .information .phone .img canvas { width: calc(100% - 28px); /* height: calc(100% - 24px); */ margin: 0 auto; display: block; padding-top: 14px; } .content .box .top .text .information .phone:hover .img { width: 148px; height: 148px; background-color: white; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2); position: absolute; top: 50px; left: 0px; opacity: 1; } .content .box .bottom { width: 73%; margin: 0 auto; position: relative; } .content .box .bottom::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .bottom .left { width: 73.428%; float: left; padding-top: 0.9rem; border-right: solid 1px #f4f4f4; } .content .box .bottom .left .text { width: 95.33%; } .content .box .bottom .left .text p { width: 100%; font-size: 0.135rem; line-height: 0.3rem; color: #333333; /* text-align: justify; */ } .content .box .bottom .left .text img { width: 100%; max-width: 100%; margin-top: 0.2rem; margin-bottom: 0.2rem; } .content .box .bottom .right-box { width: 2.33251rem; float: right; position: relative; } .content .box .bottom .right-box .right { width: 2.33251rem; padding-top: 0.9rem; position: absolute; top: 0; transition: padding-top 0.5s; } .content .box .bottom .right-box .right .title { font-size: 0.27rem; line-height: 0.27rem; color: #333333; } .content .box .bottom .right-box .right .first { margin-top: 0.2rem; width: 100%; padding-bottom: 0.2rem; border-bottom: solid 1px rgba(175, 175, 175, 0.4); } .content .box .bottom .right-box .right .first a { width: 100%; height: 100%; display: block; } .content .box .bottom .right-box .right .first a .img { width: 100%; overflow: hidden; display: block; } .content .box .bottom .right-box .right .first a .img img { width: 100%; transition: 0.5s; } .content .box .bottom .right-box .right .first a .h2 { font-size: 0.15rem; line-height: 0.24rem; color: #333333; margin-top: 0.2rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: 0.5s; } .content .box .bottom .right-box .right .first a:hover .img img { transform: scale(1.1); } .content .box .bottom .right-box .right .first a:hover .h2 { color: #ea222d; } .content .box .bottom .right-box .right .list { width: 100%; } .content .box .bottom .right-box .right .list .item { margin-top: 0.2rem; padding-bottom: 0.2rem; border-bottom: solid 1px rgba(175, 175, 175, 0.4); } .content .box .bottom .right-box .right .list .item a { font-size: 0.15rem; line-height: 0.24rem; color: #333333; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .content .box .bottom .right-box .right .list .item:hover a .h2 { color: #ea222d; } .content .box .bottom .right-box .right .button { width: 100%; height: 0.5rem; background-color: #ea222d; margin-top: 0.3rem; } .content .box .bottom .right-box .right .button a { width: 100%; height: 100%; display: block; font-size: 0.15rem; line-height: 0.5rem; color: #fff; text-align: center; } .content .box .bottom .right-box .right .button:hover { background-color: #d4151f; } .content .box .next { width: 73%; height: 1.0425rem; border: solid 1px #e0e0e0; margin: 0 auto; margin-top: 0.735rem; } .content .box .next a .next-left { width: 22.5%; float: left; font-size: 0.135rem; line-height: 1.0425rem; color: #333333; text-align: center; display: block; position: relative; border-right: solid 1px #e0e0e0; transition: 0.5s; } .content .box .next a .next-left::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; left: 0.87rem; top: 0.44rem; } .content .box .next a .next-right { float: right; width: calc(77.5% - 1px - 1.395rem); font-size: 0.18rem; font-weight: bold; line-height: 1.0425rem; color: #333333; padding-left: 0.6975rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: 0.5s; } .content .box .next:hover a .next-left { background-color: #F5F4F4; } .content .box .next:hover a .next-right { color: #ea222d; } @media screen and (max-width: 1020px) { .in_banner_bot { height: 5rem; } .content .box .top { width: 100%; position: relative; height: 3rem; } .content .box .top .img { height: 100%; } .content .box .top .img img { width: auto; height: 100%; position: absolute; top: 0; left: -300px; right: -300px; margin: auto; } .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 .text { width: 90%; margin: 0 auto; margin-top: 0.6rem; position: relative; z-index: 2; } .content .box .top .text .information .time { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .time::after { height: 0.21rem; } .content .box .top .text .information .time span { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .quantity { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .quantity::after { height: 0.21rem; } .content .box .top .text .information .quantity span { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .font { float: left; margin-left: 0.645rem; position: relative; font-size: 0.21rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; margin-top: -0.09rem; cursor: pointer; } .content .box .top .text .information .font span { font-size: 0.3rem; line-height: 0.3rem; } .content .box .top .text .information .font span b { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .phone { display: none; } .content .box .bottom { width: 90%; } .content .box .bottom .left { width: 100%; float: left; padding-top: 0.6075rem; border-right: 0; } .content .box .bottom .left .text { width: 100%; } .content .box .bottom .left .text p { width: 100%; font-size: 0.3rem; line-height: 2; color: #333333; text-align: justify; } .content .box .bottom .right { display: none; } .content .box .next { width: 90%; } .content .box .next a .next-left { font-size: 0.21rem; } .content .box .next a .next-left::after { content: ""; width: 0.0375rem; height: 0.21rem; background-color: #ea222d; position: absolute; left: 0.3rem; top: 0.42rem; } .content .box .next a .next-right { width: calc(77.5% - 1px - 0.6rem); font-size: 0.25rem; padding-left: 0.3rem; padding-right: 0.3rem; } } /*.in_banner_bot { width: 100%; height: 3.85rem; overflow: hidden; position: relative; } .content { width: 100%; padding-bottom: 0.9375rem; position: relative; z-index: 3; background-color: white; } .content .box { width: 100%; } .content .box .top { width: 100%; position: relative; padding-top: 0.33rem; height: 3.28501rem; } .content .box .top .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .content .box .top .img img { position: absolute; top: 0; left: -1000px; right: -1000px; margin: auto; height: 100%; } .content .box .top .nav { margin-left: 1.9575rem; position: relative; z-index: 2; } .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 .text { width: 73%; margin: 0 auto; margin-top: 1rem; position: relative; z-index: 2; } .content .box .top .text .title { font-size: 0.315rem; font-weight: bold; line-height: 0.51rem; color: #333333; height: 1rem; } .content .box .top .text .information { width: 100%; margin-top: 0.35rem; } .content .box .top .text .information::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .top .text .information .time { float: left; padding-left: 0.1275rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; } .content .box .top .text .information .time::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0; left: 0; } .content .box .top .text .information .time span { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.12rem; } .content .box .top .text .information .quantity { float: left; margin-left: 0.5175rem; padding-left: 0.1275rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; } .content .box .top .text .information .quantity::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0; left: 0; } .content .box .top .text .information .quantity span { font-size: 0.135rem; line-height: 0.135rem; color: #333333; margin-left: 0.12rem; } .content .box .top .text .information .font { float: left; margin-left: 0.645rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; margin-top: -0.06rem; cursor: pointer; } .content .box .top .text .information .font span { font-size: 0.18rem; line-height: 0.18rem; font-weight: bold; color: #333333; margin-left: 0.12rem; } .content .box .top .text .information .font span b { font-size: 0.12rem; line-height: 0.12rem; color: #333333; margin-left: 0.02rem; } .content .box .top .text .information .phone { float: left; margin-left: 0.645rem; position: relative; font-size: 0.12rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; margin-top: -0.06rem; cursor: pointer; } .content .box .top .text .information .phone span { width: 0.135rem; height: 0.18rem; display: inline-block; margin-left: 0.12rem; } .content .box .top .text .information .phone span img { width: 100%; } .content .box .top .text .information .phone .img { width: 0px; height: 0px; background-color: white; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2); position: absolute; top: 50px; left: 0px; opacity: 0; transition: 0.2s; } .content .box .top .text .information .phone .img canvas { width: calc(100% - 28px); /~ height: calc(100% - 24px); ~/ margin: 0 auto; display: block; padding-top: 14px; } .content .box .top .text .information .phone:hover .img { width: 148px; height: 148px; background-color: white; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2); position: absolute; top: 50px; left: 0px; opacity: 1; } .content .box .bottom { width: 73%; margin: 0 auto; position: relative; } .content .box .bottom::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .bottom .left { width: 73.428%; float: left; padding-top: 0.9rem; border-right: solid 1px #f4f4f4; min-height: 6.09002rem; } .content .box .bottom .left .text { width: 95.33%; } .content .box .bottom .left .text p { width: 100%; font-size: 0.135rem; line-height: 0.3rem; color: #333333; text-align: justify; } .content .box .bottom .left .text img { width: 100%; max-width: 100%; margin-top: 0.2rem; margin-bottom: 0.2rem; } .content .box .bottom .right-box { width: 2.33251rem; float: right; position: relative; } .content .box .bottom .right-box .right { width: 2.33251rem; padding-top: 0.9rem; position: absolute; top: 0; transition: padding-top 0.5s; } .content .box .bottom .right-box .right .title { font-size: 0.27rem; line-height: 0.27rem; color: #333333; } .content .box .bottom .right-box .right .first { margin-top: 0.2rem; width: 100%; padding-bottom: 0.2rem; border-bottom: solid 1px rgba(175, 175, 175, 0.4); } .content .box .bottom .right-box .right .first a { width: 100%; height: 100%; display: block; } .content .box .bottom .right-box .right .first a .img { width: 100%; height: 100%; overflow: hidden; display: block; position: relative; } .content .box .bottom .right-box .right .first a .img img { width: 100%; transition: 0.5s; position: absolute; top: -200px; bottom: -200px; left: 0; margin: auto; } .content .box .bottom .right-box .right .first a .h2 { font-size: 0.15rem; line-height: 0.24rem; color: #333333; margin-top: 0.2rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: 0.5s; } .content .box .bottom .right-box .right .first a:hover .img img { transform: scale(1.1); } .content .box .bottom .right-box .right .first a:hover .h2 { color: #ea222d; } .content .box .bottom .right-box .right .list { width: 100%; } .content .box .bottom .right-box .right .list .item { margin-top: 0.2rem; padding-bottom: 0.2rem; border-bottom: solid 1px rgba(175, 175, 175, 0.4); } .content .box .bottom .right-box .right .list .item a { font-size: 0.15rem; line-height: 0.24rem; color: #333333; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .content .box .bottom .right-box .right .list .item:hover a .h2 { color: #ea222d; } .content .box .bottom .right-box .right .button { width: 100%; height: 0.5rem; background-color: #ea222d; margin-top: 0.3rem; } .content .box .bottom .right-box .right .button a { width: 100%; height: 100%; display: block; font-size: 0.15rem; line-height: 0.5rem; color: #fff; text-align: center; } .content .box .bottom .right-box .right .button:hover { background-color: #d4151f; } .content .box .next { width: 73%; height: 1.0425rem; border: solid 1px #e0e0e0; margin: 0 auto; margin-top: 0.735rem; overflow: hidden; } .content .box .next a .next-left { width: 22.5%; float: left; font-size: 0.135rem; line-height: 1.0475rem; color: #333333; text-align: center; display: block; position: relative; border-right: solid 1px #e0e0e0; transition: 0.5s; } .content .box .next a .next-left::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; left: 0.87rem; top: 0.44rem; } .content .box .next a .next-right { float: right; width: calc(86% - 1px - 2.05rem); font-size: 0.18rem; font-weight: bold; line-height: 1.0425rem; color: #333333; /~ padding-left: 0.6975rem; ~/ overflow: hidden; margin-right: 0.6rem; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: 0.5s; } .content .box .next:hover a .next-left { background-color: #F5F4F4; } .content .box .next:hover a .next-right { color: #ea222d; } @media screen and (max-width: 1020px) { .in_banner_bot { height: 5rem; } .content .box .top { width: 100%; position: relative; height: 3rem; } .content .box .top .img { height: 100%; width: 100%; position: relative; } .content .box .top .img img { width: auto; height: 100%; position: absolute; top: -200px; bottom: -200px; left: 0; margin: auto; } .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 .text { width: 90%; margin: 0 auto; margin-top: 0.6rem; position: relative; z-index: 2; } .content .box .top .text .information .time { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .time::after { height: 0.21rem; } .content .box .top .text .information .time span { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .quantity { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .quantity::after { height: 0.21rem; } .content .box .top .text .information .quantity span { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .font { float: left; margin-left: 0.645rem; position: relative; font-size: 0.21rem; font-weight: bold; line-height: 0.135rem; color: #9a9a9a; margin-top: -0.09rem; cursor: pointer; } .content .box .top .text .information .font span { font-size: 0.3rem; line-height: 0.3rem; } .content .box .top .text .information .font span b { font-size: 0.21rem; line-height: 0.21rem; } .content .box .top .text .information .phone { display: none; } .content .box .bottom { width: 90%; } .content .box .bottom .left { width: 100%; float: left; padding-top: 0.6075rem; border-right: 0; } .content .box .bottom .left .text { width: 100%; } .content .box .bottom .left .text p { width: 100%; font-size: 0.25rem; line-height: 0.45rem; color: #333333; text-align: justify; } .content .box .bottom .right { display: none; } .content .box .next { width: 90%; } .content .box .next a .next-left { font-size: 0.21rem; } .content .box .next a .next-left::after { content: ""; width: 0.0375rem; height: 0.21rem; background-color: #ea222d; position: absolute; left: 0.3rem; top: 0.42rem; } .content .box .next a .next-right { width: calc(77.5% - 1px - 0.6rem); font-size: 0.25rem; padding-left: 0.3rem; padding-right: 0.3rem; } } */