/* .in_banner_bot { width: 100%; height: 3.85rem; overflow: hidden; position: relative; } */ .nav_father { width: 100%; position: relative; background-color: #fff; z-index: 4; } .nav_father> { width: 100%; height: 3.4275rem; background: url(../img/infomback.png) no-repeat; background-size: 100% 100%; } .nav_father nav { width: 73%; height: 0.75rem; line-height: 0.75rem; margin: 0 auto; } .nav_father nav ul { width: 100%; height: 100%; } .nav_father nav ul li { display: inline-block; font-size: 0.105rem; font-weight: 400; color: #A8A8A8; } .nav_father nav ul li:nth-of-type(2n) { margin: 0 0.135rem; } .nav_father nav ul li:last-of-type { color: #333; } .nav_father .nav { width: 100%; height: 3.4275rem; background: url(../img/inform_bg01.png) no-repeat; background-size: 100% 100%; } .nav_father .center_box { width: 10.5rem; height: 2.565rem; margin: auto; box-shadow: 0px 0px 0.225rem 0px rgba(0, 0, 0, 0.1); margin-top: 0.75rem; background-color: #fff; padding: 0.54rem 0.435rem; box-sizing: border-box; position: relative; cursor: pointer; } .nav_father .center_box>.date { width: 1.515rem; height: 0.465rem; line-height: 0.465rem; text-align: center; background-color: #333; font-size: 0.135rem; font-weight: 400; color: #FFFFFF; box-sizing: border-box; position: absolute; z-index: 2; top: -0.23rem; right: 0.45rem; } .nav_father .center_box>.date>.red_ { width: 0.0375rem; height: 0.135rem; margin-top: -0.02rem; margin-right: 0.1rem; } .nav_father .center_box>.date>.date_back { width: 100%; height: 0%; background-color: #EA222D; position: absolute; z-index: -1; top: 0; left: 0; transition: all 0.7s; } .nav_father .center_box>.title p { width: 100%; font-size: 0.165rem; font-weight: 400; color: #333333; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 0.25rem; } .nav_father .center_box>.red_box { width: 100%; height: 0.3rem; border-bottom: 1px solid #E0E0E0; margin-top: 0.465rem; padding-bottom: 0.18rem; box-sizing: border-box; font-size: 0.12rem; font-weight: bold; color: #9A9A9A; position: relative; } .nav_father .center_box>.red_box>.red_ { width: 0.0375rem; height: 0.135rem; margin-top: -0.04rem; margin-right: 0.05rem; transition: all 0.7s; } .nav_father .center_box>.red_box>span:nth-of-type(3) { color: #333; } .nav_father .center_box>.red_box>.redbox_bot { width: 0%; height: 1px; background-color: #333; position: absolute; bottom: 0; transition: all 1s; } .nav_father .center_box>.content { width: 100%; height: 0.5rem; margin-top: 0.2025rem; font-size: 0.12rem; font-weight: 400; color: #A8A8A8; line-height: 0.24rem; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .nav_father .center_box:hover .date_back { height: 100%; } .nav_father .center_box:hover .date>.red_ { background-color: #fff; } .nav_father .center_box:hover .redbox_bot { width: 100%; } .main_father { width: 100%; position: relative; background-color: #fff; z-index: 3; } .main { width: 73%; margin: auto; padding-top: 1.2675rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; } .main .center_box { flex-shrink: 0; width: 4.86rem; height: 3.075rem; background-color: #F5F4F4; display: inline-block; margin-bottom: 0.585rem; padding: 0.54rem 0.435rem; padding-top: 0.945rem; box-sizing: border-box; position: relative; cursor: pointer; } .main .center_box:hover { background-color: #fff; box-shadow: 0px 0px 0.225rem 0px rgba(0, 0, 0, 0.1); transition: all 0.5s; } .main .center_box:nth-of-type(2n) { margin-right: 0.195rem; } .main .center_box>.date { width: 1.515rem; height: 0.465rem; line-height: 0.465rem; text-align: center; background-color: #333; font-size: 0.135rem; font-weight: 400; color: #FFFFFF; box-sizing: border-box; position: absolute; z-index: 2; top: 0.255rem; right: -0.195rem; } .main .center_box>.date>.red_ { width: 0.0375rem; height: 0.135rem; margin-top: -0.02rem; margin-right: 0.1rem; } .main .center_box>.date>.date_back { width: 100%; height: 0%; background-color: #EA222D; position: absolute; z-index: -1; top: 0; left: 0; transition: all 0.7s; } .main .center_box>.title { height: 0.4875rem; } .main .center_box>.title p { width: 100%; font-size: 0.165rem; line-height: 0.25rem; font-weight: 400; color: #333333; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .main .center_box>.red_box { width: 100%; height: 0.3rem; border-bottom: 1px solid #E0E0E0; margin-top: 0.285rem; padding-bottom: 0.18rem; box-sizing: border-box; font-size: 0.12rem; font-weight: bold; color: #9A9A9A; position: relative; } .main .center_box>.red_box>.red_ { width: 0.0375rem; height: 0.135rem; margin-top: -0.04rem; margin-right: 0.05rem; } .main .center_box>.red_box>span:nth-of-type(3) { color: #333; } .main .center_box>.red_box>.redbox_bot { width: 0%; height: 1px; background-color: #333; position: absolute; bottom: 0; transition: all 1s; } .main .center_box>.content { width: 100%; margin-top: 0.2025rem; font-size: 0.12rem; font-weight: 400; color: #A8A8A8; line-height: 0.24rem; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .main .center_box:hover .date_back { height: 100%; } .main .center_box:hover .date>.red_ { background-color: #fff; } .main .center_box:hover .redbox_bot { width: 100%; } .page { width: 100%; height: 0.15rem; padding-top: 0.375rem; padding-bottom: 0.78rem; 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: 0; } .page>div:last-of-type { padding-left: 0.1275rem; border-left: 0.0375rem solid #EA222D; margin-left: 0.375rem; padding-bottom: 0; } .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:1024px) { .nav_father>.nav { width: 100%; height: 1.5rem; background: url(''); } .nav_father>.nav nav { width: 90%; height: 1.5rem; line-height: 1.5rem; margin: 0 auto; } .nav_father>.nav nav ul li { font-size: 0.25rem; } .nav_father .center_box { display: none; } .main { width: 90%; margin: auto; padding-top: 0rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; } .main .center_box { flex-shrink: 0; width: 100%; height: 5rem; background-color: rgb(245, 244, 244); display: inline-block; margin-bottom: 0.5rem; padding: 0.945rem 0.435rem 0.54rem; box-sizing: border-box; position: relative; } .main .center_box>.date { width: 2rem; height: 0.6rem; line-height: 0.6rem; text-align: center; background-color: rgb(51, 51, 51); font-size: 0.2rem; font-family: "Microsoft YaHei"; font-weight: 400; color: rgb(255, 255, 255); box-sizing: border-box; position: absolute; z-index: 2; top: 0.5rem; right: 0rem; } .main .center_box>.date>.red_ { width: 0.0375rem; height: 0.2rem; margin-top: -0.02rem; margin-right: 0.2rem; } .main .center_box>.title { margin-top: 0.5rem; height: 0.8rem; } .main .center_box>.title p { width: 100%; font-size: 0.3rem; font-family: "Microsoft YaHei"; font-weight: 400; color: rgb(51, 51, 51); display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 0.4rem; } .main .center_box>.red_box { width: 100%; height: 0.6rem; border-bottom: 1px solid rgb(224, 224, 224); padding-bottom: 0.2rem; box-sizing: border-box; font-size: 0.22rem; font-family: "Microsoft YaHei"; font-weight: bold; color: rgb(154, 154, 154); position: relative; } .main .center_box>.red_box>.red_ { width: 0.0375rem; height: 0.2rem; margin-top: -0.04rem; margin-right: 0.05rem; } .main .center_box>.content { width: 100%; margin-top: 0.4rem; font-size: 0.26rem; font-family: "Microsoft YaHei"; font-weight: 400; color: rgb(168, 168, 168); line-height: 0.35rem; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .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; } }