body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, img, div { margin: 0; padding: 0; border: 0; } body, html { height: 100%; width: 100%; font-family: 'Microsoft YaHei'; } .list-body { display: flex; flex-direction: column; } input { outline: none; } ul, ol { list-style-type: none; } a { text-decoration: none; } .box { width: 1400px; max-width: 86%; margin: 0 auto; } .head { height: 140px; background-color: #992325; flex-shrink: 0; } .head-main { height: 100%; display: flex; align-items: center; } .logo { display: block; flex-shrink: 0; } .logo img { width: 270px; height: auto; display: block; } .nav { padding-top: 20px; display: flex; flex-grow: 1; justify-content: space-between; margin-left: 80px; } .nav-li { position: relative; flex-grow: 1; text-align: center; } .nav-li>a { font-size: 18px; color: #fff; padding: 8px 0; display: block; transition: background-color .3s; } .nav-li>a:hover { background: rgba(255, 255, 255, 0.2); } .nav-ul2 { position: absolute; z-index: 9; width: 140%; left: -20%; display: none; box-shadow: 0 0 4px #ccc; padding: 8px 0; background-color: #fff; } .nav-ul2 li {} .nav-ul2 li a { color: #992325; display: block; text-align: center; font-size: 16px; padding: 8px 0; transition: background-color .3s; } .nav-ul2 li a:hover { background: rgba(100, 100, 100, 0.3); } .banner { overflow: hidden; height: 30vw; position: relative; } .banner .swiper-slide { background-size: cover; background-position: center; background-repeat: no-repeat; } .banner>.swiper-pagination-bullets { bottom: 20px; } .banner>.swiper-pagination-bullets .swiper-pagination-bullet { background-color: #fff; opacity: 1; width: 40px; height: 5px; border-radius: 0; } .banner>.swiper-pagination-bullets .swiper-pagination-bullet-active { background-color: #992325; } .xyjj-main { overflow: hidden; padding-top: 40px; background: #f3f4f9 url(../img/index_bgt.png) no-repeat center top; background-size: 100% auto; position: relative; } .xyjj-before { position: absolute; height: 100%; width: calc(50% - 300px); background: url(../img/xyjj_before.png) no-repeat center center; background-size: cover; } .xyjj-after { position: absolute; margin-top: 100px; height: calc(100% - 140px); right: 0; width: 50%; background: url(../img/xyjj_after.png) no-repeat center center; background-size: cover; border-left: 530px solid #fff; } .xyjj-main .box { position: relative; z-index: 1; } .index-title { font-size: 26px; color: #050505; line-height: 100px; height: 100px; text-align: center; font-weight: bold; position: relative; } .index-title .more { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; height: 26px; margin: auto; line-height: 26px; color: #ad2c30; border: 1px solid #ad2c30; font-size: 14px; text-align: center; font-weight: normal; } .xyjj-bg { display: flex; } .xyjj-img { flex-grow: 1; flex-shrink: 0; margin: 40px 0; padding-top: 28%; margin-left: 30px; background-size: cover; background-position: center; } .xyjj-text { width: 53.5%; padding: 40px; padding-left: 80px; box-sizing: border-box; font-size: 18px; color: #fff; line-height: 46px; text-indent: 2em; display: flex; align-items: center; } .xyjj-text a { color: #fff; } .notice-main { background: #f3f4f9 url(../img/notice.png) no-repeat top center; background-size: cover; padding-top: 40px; padding-bottom: 120px; } .notice { padding: 16px 10px 80px; overflow: hidden; position: relative; } .notice .swiper-slide { padding: 28px 18px; background-color: #fff; box-sizing: border-box; box-shadow: 0 0 10px 0px #b4b4b4; display: flex; align-items: center; transition: background-color .3s; } .notice-date { color: #c3070a; text-align: center; display: flex; flex-direction: column; align-items: center; } .notice-date p { font-size: 22px; } .notice-date p:last-child { font-size: 18px; } .notice-date .split { width: 20px; height: 1px; background-color: #c3070a; transform: rotate(-15deg); margin: 6px 0; } .notice .swiper-slide a { display: block; line-height: 32px; height: 64px; font-size: 18px; color: #050505; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-left: 20px; transition: color .3s; } .notice .swiper-slide:hover { background-color: #f6f6f6; } .notice .swiper-slide:hover a { color: #c3070a; } .notice>.swiper-pagination-bullets .swiper-pagination-bullet { background-color: #fff; opacity: 1; width: 10px; height: 10px; } .notice>.swiper-pagination-bullets .swiper-pagination-bullet-active { background-color: #992325; } .news-main { position: relative; background-color: #f3f4f9; } .news-before { position: absolute; height: calc(100% - 50px); width: calc(50% - 130px); background: url(../img/news_before.png) no-repeat center center; background-size: cover; } .news-after { position: absolute; height: calc(100% + 20px); width: calc(50% + 130px); background-image: url(../img/news_after.png), url(../img/news_db.png); background-repeat: no-repeat, no-repeat; background-position: 540px bottom, left top; background-color: #fff; right: 0; top: -70px; border-top: 3px solid #9e1d21; box-sizing: border-box; } .news-main .box { position: relative; z-index: 1; transform: translateY(-50px); } .news-bg { display: flex; } .news-img { flex-grow: 1; overflow: hidden; position: relative; padding-bottom: 80px; } .news-img .swiper-slide { padding-top: 60%; height: 0; background-size: cover; background-position: center; } .news-img .swiper-slide a { display: block; position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .news-img .swiper-slide p { display: block; position: absolute; height: 50px; line-height: 50px; width: 100%; left: 0; bottom: 0; background-color: rgba(0, 0, 0, .4); color: #fff; padding: 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; font-size: 18px; } .news-img .swiper-button-next { bottom: 10px; height: 60px; width: 40px; top: auto; right: 0; font-size: 16px; --swiper-navigation-size: 26px; color: #c3070a; } .news-img .swiper-button-prev { bottom: 10px; height: 60px; width: 40px; top: auto; right: 40px; left: auto; --swiper-navigation-size: 26px; color: #c3070a; } .news-text { flex-shrink: 0; width: 50%; box-sizing: border-box; margin-left: 40px; } .news-ul {} .news-ul li { display: flex; align-items: center; margin-bottom: 32px; padding-left: 26px; } .news-date { width: 64px; height: 64px; flex-shrink: 0; position: relative; margin-right: 26px; } .news-date-t { position: absolute; left: 0; top: 0; width: 38px; height: 38px; line-height: 38px; font-size: 22px; color: #fff; background-color: #9e1d21; border-radius: 50%; text-align: center; } .news-date-split { position: absolute; left: 9px; top: 35px; width: 58px; height: 1px; background-color: #6e6e6e; transform: rotate(-45deg); } .news-date-b { position: absolute; right: 0; bottom: 0; color: #6e6e6e; font-size: 14px; text-align: right; } .news-text-bg { flex-grow: 1; flex-shrink: 0; width: 0; } .news-text-bg a { font-size: 20px; line-height: 32px; color: #333333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; transition: all 0.3s; } .news-text-bg p { font-size: 12px; margin-top: 6px; color: #666666; line-height: 22px; height: 44px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: all 0.3s; } .news-ul li:hover .news-text-bg a { color: #c3070a; } .news-text .more { display: block; width: 60px; height: 26px; margin-left: auto; line-height: 26px; color: #ad2c30; border: 1px solid #ad2c30; font-size: 14px; text-align: center; font-weight: normal; } .sxzx-main { background-color: #f3f4f9; padding-bottom: 30px; } .sxzx-title { font-size: 26px; color: #050505; line-height: 100px; height: 100px; font-weight: bold; position: relative; display: flex; justify-content: space-between; } .sxzx-swiper-btn { position: relative; width: 100px; display: flex; justify-content: space-between; align-items: center; font-weight: normal; --swiper-navigation-size: 26px; } .sxzx-prev, .sxzx-next { width: 40px; height: 40px; position: static; margin: 0; justify-content: center; align-items: center; border: 1px solid #aa292d; border-radius: 50%; color: #aa292d; } .aspect-list { overflow: hidden; max-width: 1920px; padding: 18px 14px 28px; margin: 0 auto; } .aspect-swiper .swiper-slide { width: 380px; } .aspect-list-img { width: 100%; height: 0; position: relative; display: block; overflow: hidden; padding-bottom: 60%; } .aspect-list-img .aspect-img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; background-position: center; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .aspect-list-text-bg { padding: 0 8px; margin: 8px 0; border-left: 2px solid #d27376; } .aspect-list-text { color: #383838; font-size: 16px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; display: block; height: 28px; line-height: 28px; margin-bottom: 6px; font-weight: bold; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .aspect-list-text-t { font-size: 14px; color: #747474; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; display: block; height: 26px; line-height: 26px; padding-left: 24px; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .aspect-list-text-t { background: url(../img/time1.png) no-repeat left center; background-size: auto 70%; } .aspect-swiper .swiper-slide:hover .aspect-img { width: 120%; height: 120%; left: -10%; top: -10%; } .aspect-swiper .swiper-slide:hover .aspect-list-text, .aspect-swiper .swiper-slide:hover .aspect-list-text-t, .aspect-swiper .swiper-slide:hover .aspect-list-text-b { color: #9e1d21; } .aspect-swiper .swiper-slide:hover .aspect-list-text-t { background: url(../img/time.png) no-repeat left center; background-size: auto 70%; } .link-ul { width: 70%; display: flex; flex-wrap: wrap; padding-bottom: 20px; } .link-ul li { width: 33%; color: #000000; font-size: 16px; line-height: 40px; } .link-ul li a { color: #000000; } .link-ul li a:hover { color: #9e1d21; } .link-title { font-size: 26px; color: #050505; line-height: 80px; height: 80px; margin-top: 30px; font-weight: bold; } .footer-bg { background-color: #a32527; flex-shrink: 0; } .footer-main { display: flex; padding: 28px 0; align-items: center; position: relative; } .footer-logo { width: 36%; } .footer-logo img { display: block; } .footer-bq { line-height: 32px; color: #fff; font-size: 14px; } .footer-ma { position: absolute; right: 0; top: -98%; display: flex; flex-direction: column; align-items: center; } .footer-ma img { display: block; width: 380px; box-shadow: 0 0 8px #ccc; } .footer-ma p { font-size: 16px; color: #fff; line-height: 42px; } .list-body .footer-ma { position: static; margin-left: auto; margin-right: 20px; } .list-body .footer-ma img { width: 380px; box-shadow: 0 0 0 #ccc; } .list-banner { height: 18vw; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; } .list-main { flex-shrink: 0; flex-grow: 1; display: flex; align-items: flex-start; } .list-l-nav { width: 250px; flex-shrink: 0; background-color: #eff2fb; transform: translateY(-100px); margin-right: 32px; } .list-l-nav-title { height: 100px; line-height: 100px; font-size: 28px; color: #fff; display: block; text-align: center; box-sizing: border-box; background-color: #a32527; } .list-l-nav-ul { padding: 0 18px; } .list-l-nav-item { font-size: 16px; color: #222; text-align: center; transition: all 0.3s; border-bottom: 1px dashed #bac3d2; } .list-l-nav-item:last-child { border-bottom: 0; } .list-l-nav-item a { color: #222; display: block; width: 100%; padding: 20px 20px; text-align: left; font-size: 18px; transition: all 0.3s; } .list-l-nav-item:hover a { color: #a32527; } .list-l-nav-item.active a { color: #a32527; } .list-box { width: 0; flex-grow: 1; padding-bottom: 20px; } .address { display: flex; align-items: center; padding: 30px 0; border-bottom: 2px solid #eef2fb; margin-bottom: 20px; } .address .address-title { font-size: 22px; font-weight: 600; color: #212529; } .address-list { color: #212529; font-size: 16px; display: flex; align-items: center; vertical-align: middle; margin-left: auto; } .address-list a { text-decoration: none; color: #212529; } .address-list span { margin: 0 4px; } .list-ul li { display: flex; justify-content: space-between; padding: 20px 32px; border-bottom: 1px dashed #e5e5e5; transition: all .3s; } .list-ul .list-left { margin-right: 32px; font-family: "Candara"; width: 80px; flex-shrink: 0; } .list-ul .number { font-size: 40px; line-height: 40px; margin-bottom: 6px; color: #a32527; font-family: "Candara"; text-align: center; } .list-ul .list-time { font-size: 16px; line-height: 26px; height: 26px; color: #a32527; background: url(../img/related.png) no-repeat; background-size: 100% 100%; width: 100%; text-align: center; } .list-ul .list-right { flex-grow: 1; } .list-right a { display: block; font-size: 16px; line-height: 28px; width: 100%; color: #222; margin-bottom: 8px; transition: color .3s; } .list-right .list-txt { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #333; opacity: 0.65; line-height: 22px; height: 44px; overflow: hidden; } .list-ul li:hover { background-color: #fbfbfb; box-shadow: 0px 4px 8px #fbfbfb; } .list-ul a:hover { color: #a32527; } .list-img { display: flex; flex-wrap: wrap; justify-content: space-between; } .list-img li { width: 23%; padding-top: 0; box-sizing: border-box; margin-bottom: 2%; } .list-img li:last-child:nth-child(4n + 2) { margin-right: 51.3332%; } .list-img li:last-child:nth-child(4n + 3) { margin-right: 25.6666%; } .list-img li a { width: 100%; display: block; } .list-img a { display: block; height: 0; width: 100%; padding-top: 70%; position: relative; overflow: hidden; } .list-img .list-img-bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all .3s; } .list-img p { position: absolute; bottom: -50px; padding: 0 12px; background-color: rgba(0, 0, 0, .4); color: #fff; line-height: 50px; height: 50px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; transition: bottom .3s; } .list-img a:hover .list-img-bg { left: -7%; top: -7%; width: 114%; height: 114%; } .list-img a:hover p { bottom: 0; } .leader-tit { padding: 0 10px; border-left: 5px solid #AE2323; font-size: 18px; line-height: 18px; margin: 10px 0; } .leader-name { padding: 10px 0; border-bottom: 1px dotted #7C7C7C; } .leader-name a { padding: 0 15px 0 0; color: #3A3A3A; transition: all 0.3s; } .content-title { margin-top: 40px; padding-bottom: 20px; } .content-title h4 { font-size: 20px; line-height: 1; color: #333; text-align: center; margin-bottom: 19px; } .content-title p { font-size: 14px; line-height: 1; color: #888888; text-align: center; margin: 0; margin-top: 20px; padding-top: 10px; padding-bottom: 14px; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .list-main { min-height: 500px; flex-grow: 0; } }