/* 测试是否一致 */ /* body { opacity: 0.6; } ::-webkit-scrollbar { width: 0; } html { width: 1920px; background: top left no-repeat url(../images/1.jpg) !important; } */ .bannercenter::before { content: ''; display: block; width: 100%; height: 136px; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, .5); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); /* Firefox 3.6 - 15 */ background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); z-index: 1; } .bannercenter { position: relative; } .bannercenter a { position: relative; display: block; } .bannertxt { position: absolute; left: 0; bottom: 40px; width: 100%; } .bannerPic { padding-bottom: 43.75%; /* padding-bottom: 36.75%; */ } .slicktxt { width: 75%; position: relative; padding-left: 31px; box-sizing: border-box; font-weight: bold; /* text-shadow: 10px 15px 50px rgba(0, 0, 0, .34); */ } .slicktxt::before { content: ''; display: block; width: 21px; height: 29px; overflow: hidden; position: absolute; left: 0; top: calc(50% - 14.5px); background: url(../images/txtvb.png) no-repeat; background-size: 100% 100%; } .banner .slick-dots { width: auto; bottom: 40px; right: 13%; } .banner .slick-dots li { margin: 0 10px; width: 30px; height: 20px; } .banner .slick-dots li button { width: 30px; height: 20px; border-radius: 0; background: none; background: url(../images/dot.png) no-repeat; } .banner .slick-dots li.slick-active button { background: url(../images/dota.png) no-repeat; } .banner .slick-prev { width: 55px; height: 55px; background: url(../images/prev.png) no-repeat; margin: 0; left: calc(100% - 215px); margin-top: -67.5px; } .banner .slick-next { width: 55px; height: 55px; background: url(../images/next.png) no-repeat; margin: 0; right: 160px; margin-top: 12.5px; } main { display: block; } .mode1 { overflow: hidden; padding-bottom: 52px; box-sizing: border-box; background: url(../images/block1bg.png) no-repeat center; background-size: cover; } .mode1l { width: 60.5%; } .mode1r { width: calc(40% - 60px); } .title { margin: 60px 0 20px; position: relative; overflow: hidden; } .more { display: inline-block; vertical-align: middle; padding: 11px 20px; box-sizing: border-box; background: #fff; color: #999; box-shadow: 10px 15px 50px rgba(0, 0, 0, .04); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: absolute; right: 0; top: calc(50% - 20.5px); } @-webkit-keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .more:hover, .more:focus, .more:active { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .titl { display: inline-block; } .top { margin-bottom: 7px; } .top>a { font-weight: bold; padding-left: 14px; color: #162f6c; line-height: 1.15; box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; } .top i { display: inline-block; vertical-align: middle; width: 30px; height: 30px; } .entit { color: #999; } .part1l { width: 446px; background: #fff; padding: 10px; padding-bottom: 66px; box-sizing: border-box; display: block; } .mode1Pic { padding-bottom: 56.34%; } .part1article { line-height: 1.44; height: 2.88em; overflow: hidden; color: #333; margin: 18px 75px 10px 20px; } .part1summary { line-height: 18px; height: 36px; overflow: hidden; color: #999; margin: 0 20px; } .part1Bot { position: relative; } .date { position: absolute; top: -47px; right: -10px; display: flex; width: 65px; height: 89px; justify-content: center; background: #162f6c; flex-wrap: wrap; align-items: center; text-align: center; } .day { line-height: 1.2; text-align: center; display: block; /* margin: 0 auto; */ } .year { line-height: 2; text-align: center; } .part1r { padding: 26px 30px 7px; /* margin-top: 45px; */ box-sizing: border-box; position: relative; background: url(../images/part1r.png) no-repeat top; background-size: cover; } .part1rr { position: relative; margin-left: 466px; } .part1r li { margin-bottom: 26px; } .part1r li:hover a { transform: translateX(5px); } .part1r li:hover .part1txt { color: #162f6c; } .part1r a { display: block; padding-bottom: 28px; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, .1); transition: all .3s ease-in-out; } .part1top { position: relative; padding-left: 18px; box-sizing: border-box; } .part1top::before { content: ''; display: block; width: 7px; height: 100%; background: url(../images/lin1.png) no-repeat; position: absolute; left: 0; top: 0; } .part1rr::before { content: ''; display: block; width: 102px; height: 30px; background: url(../images/part1be.png) no-repeat; position: absolute; left: calc(50% - 51px); bottom: -11px; } .date2 { line-height: 1; color: #162f6c; margin-bottom: 10px; } .part1txt { line-height: 1.5; color: #222; } .mode1r { width: calc(39.5% - 60px); } .notificationUl li { margin-bottom: 10px; } .notificationUl li a { display: block; padding: 25px 10px 25px 28px; box-sizing: border-box; background: url(../images/book.png) no-repeat left; background-size: cover; position: relative; overflow: hidden; transition: all .3s ease-in-out; } .notificationUl li:hover a { transform: translateX(5px); } .notificationUl li:hover .noticarticle { color: #162f6c; } .notificationUl li a .date { position: static; } .notificationUl li a::before { content: ''; display: block; width: calc(100% - 56px); height: 11px; background: url(../images/line.png) no-repeat left; position: absolute; background-size: 100%; left: 28px; bottom: 1px; } .noticarticle { color: #222; line-height: 1.44; height: 2.88em; overflow: hidden; margin-right: 95px; margin-top: 8px; } /* mode2 */ .mode2 { padding-bottom: 79px; box-sizing: border-box; } .mode2Ul li { margin-bottom: 9px; } .mode2Ul li a { display: block; padding: 22px 30px 26px; box-sizing: border-box; position: relative; transition: all .3s ease-in-out6; } .mode2Ul li.on a::before { content: ''; display: block; width: 121px; height: 103px; background: url(../images/mode2l.png) no-repeat; background-size: cover; position: absolute; right: 20px; bottom: 20px; } .mode2Ul li.on .mode2larticle p { font-weight: bold; font-size: 1.8rem; } .mode2Ul li.on a { padding-top: 27px; box-shadow: 10px 15px 50px rgba(22, 47, 108, .06); } .mode2Ul li:nth-child(odd) a { background: #fff; border: 1px solid rgba(0, 0, 0, .06); } .mode2Ul li:nth-child(even) a { background: #f2f4f7; } .mode2Ul li.on .mode2larticle { padding-bottom: 26px; box-sizing: border-box; margin-bottom: 12px; } .mode2larticle { position: relative; } .mode2Ul li.on .mode2larticle::before { content: ''; display: block; width: calc(100% - 103px); height: 1px; background: rgba(0, 0, 0, .06); position: absolute; left: 0; bottom: 0; } .mode2larticle p { line-height: 1.44; color: #222; font-size: 1.6rem; } .mode2larticle .date2 { display: inline-block; margin-left: 10px; line-height: 2.17; margin-bottom: 0; } .clock { padding-left: 20px; line-height: 2; color: #999; box-sizing: border-box; position: relative; margin-bottom: 7px; } .clock::before { content: ''; display: block; width: 11px; height: 11px; position: absolute; background: url(../images/clock.png) no-repeat; left: 0; top: calc(50% - 5.5px); } .adress::before { background: url(../images/map.png) no-repeat; height: 14px; top: calc(50% - 7px); } .mode2rUl { margin: 0 -10px; overflow: hidden; } .mode2rUl li { margin-bottom: 20px; width: 50%; float: left; } .mode2rUl li a { display: block; margin: 0 10px; } .mode2Pic { height: 200px; /* padding-bottom: 85.1%; */ background: url(../images/mode2r.png) no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; } .cricle { width: 86px; height: 86px; border-radius: 50%; /* line-height: 86px; */ text-align: center; border: 2px solid rgba(255, 255, 255, .3); } .cricle>i { display: inline-block; height: 33px; width: 34px; margin: 26px 0; transition: all .3s ease-in-out; } .mode2rUl li a:hover .cricle>i { transform: rotate(360deg); } .mode2rarticle { margin-top: 20px; line-height: 1; text-align: center; color: #222; } .mode2rUl li:nth-child(1) .cricle { background: #162f6c; } .mode2rUl li:nth-child(2) .cricle { background: #75461a; } .mode2rUl li:nth-child(3) .cricle { background: #136c80; } .mode2rUl li:nth-child(4) .cricle { background: #162f6c; } @media screen and (max-width: 1460px) { .banner .slick-dots { right: 6%; } .banner .slick-prev { left: calc(100% - 100px); } .banner .slick-next { right: 47px; } } @media screen and (max-width: 1300px) { .banner .slick-dots { right: 3%; } } @media screen and (max-width: 1201px) { .banner .slick-dots { right: 8%; } .part1l { width: 370px; } .part1rr { margin-left: 390px; } .part1r a { padding-bottom: 16px; } .part1r { padding: 32px 14px 7px; } .mode1r { width: calc(39.5% - 30px); } .notificationUl li a { padding: 17px 10px 17px 28px; } } @media screen and (max-width: 1100px) { .banner .slick-dots { right: 6%; } } @media screen and (max-width:997px) { .banner .slick-dots { right: 30px; } .navout::before { display: none; } .mode1l, .mode1r { width: 100%; float: none; } } @media screen and (max-width: 767px) { .bannercenter::before { height: 52px; } .slicktxt::before { height: 20px; top: calc(50% - 10px); } .banner .slick-dots { right: 15px; bottom: 17px; } .banner .slick-prev { left: calc(100% - 55px); } .banner .slick-next { right: 0; margin-top: -19.5px; } .bannertxt { bottom: 17px; } .slicktxt { font-size: 1.8rem; width: 60%; } .part1l { width: 100%; float: none; } .part1rr { margin-left: 0px; margin-top: 20px; } .part1r li { margin-bottom: 16px; } } @media screen and (max-width: 479px) { .banner .slick-dots li { margin: 0 0px; } .banner .slick-dots li button { transform: scale(.7); } .noticarticle { margin-right: 75px; } .notificationUl li a { padding: 17px 10px 17px 18px; } .title { margin: 40px 0 18px; } .part1l { padding-bottom: 33px; } .mode2 { padding-bottom: 10px; box-sizing: border-box; } }