.main > .container { height: 714px; background: url(/uploads/image/lxiicon/bookbg.png) no-repeat; padding: 20px 20px 30px 310px; overflow: auto; } .headline h1 a { font-size: 30px; color: #054976; display: block; width: 92%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 auto; } .headline p { font-size: 16px; width: 70%; margin: 5px auto 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* bner news */ .bner-news { overflow: hidden; margin-top: 12px; margin-bottom: 12px; } .bner { position: relative; width: 488px; height: 310px; overflow: hidden; float: left; } .imgs { width: 2440px; overflow: auto; } .imgs li { float: left; position: relative; width:488px; height:314px; } .imgs li img {width:100%;height:100%;} .imgs span { position: absolute; bottom: 0; left: 0; padding-left: 25px; padding-right: 140px; height: 40px; line-height: 40px; font-size: 16px; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #fff; background: rgba(0, 0, 0, .3); } .icon-left, .icon-right { width: 42px; height: 66px; position: absolute; top: 50%; margin-top: -33px; } .icon-left { left: 0; background: url(/uploads/image/lxi/move_lf.png) no-repeat; } .icon-right { right: 0; background: url(/uploads/image/lxi/move_rf.png) no-repeat; } .inds { position: absolute; right: 15px; bottom: 12px; } .inds span { width: 10px; height: 10px; border-radius: 50%; display: block; float: left; margin-right: 10px; background: #fff; } .inds .dis { background: #4477e7; } .news { float: right; width: 360px; height: 310px; position: relative; } .news-nav { overflow: auto; font-size: 20px; border-bottom: 1px solid #b0b0b0; } .news-nav li { float: left; padding: 0 5px; } .news-nav li a { display: block; padding-bottom: 10px; color: #000; } .news-nav .dis a { color: #054976; border-bottom: 2px solid #054976; } .news-lists { font-size: 16px; } .news-lists li { margin: 15px 0; } .news-lists p { padding-left: 25px; width: 70%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background: url(/uploads/image/lxiicon/dian.png) no-repeat 2px 12px; } .news-lists span { float: right; color: #999; } .news-lists ul, .news-more li { display: none; } .news-lists .dis, .news-more .dis { display: block; } .news-more { position: absolute; right: 0; top: 5px; } .news-more li a { color: #969696; } .news-more li a:hover { color: red; } /* 林芝要闻 区县要闻 */ .lzyw, .qxyw { width: 48%; position: relative; } /* 政务公开 政务互动 */ .zw, .zw-box { display: flex; justify-content: space-between; } .zw { width: 288px; height: 88px; border: 1px solid #3b83a4; } .zw p { width: 28%; height: 100%; font-size: 16px; color: #fff; text-align: center; padding-top: 15px; } .zwgk p { background: #3b83a4; } .zwhd p { background: #ee8a62; } .zw p img { display: block; margin: 0 auto 5px; } .zw ul { width: 72%; display: flex; justify-content: space-between; flex-wrap: wrap; } .zw ul li { width: 50%; padding-left: 20px; line-height: 25px; background: url(/uploads/image/lxi/lf.png) no-repeat 8px 10px; } .zw-imgs { position: relative; } .zw-imgs ul li { display: none; } .zw-imgs ul .dis { display: block; } .zw-imgs div { position: absolute; bottom: 10px; right: 10px; } .zw-imgs div span { padding: 5px; background: #000; color: #fff; cursor: pointer; } .zw-imgs div .dis { background: #c90101; } /* 动画 */ .zwhd p:hover img { animation: overturn 2s; -moz-animation: overturn 2s; /* firefox */ -webkit-animation: overturn 2s; /* safari 和 chrome */ -o-animation: overturn 2s; /* opera */ } @media screen and (max-width: 768px) { .main > .container { background: #fff; padding: 10px 10px 0; height: auto; } .bner { width: 100%; height: auto; margin-bottom: 10px; } .headline h1 a { font-size: 24px; } .news, .lzyw, .qxyw { width: 100%; height: auto; } .lzyw, .qxyw { margin-bottom: 10px; } .news-nav { font-size: 18px; } .zw { width: 100%; margin-bottom: 10px; } .zw-box { flex-wrap: wrap; } .zw-imgs { width: 100%; height: auto; margin-bottom: 10px; } .zw-imgs img { width: 100%; } .news-lists p { width: 60%; } .news-lists li { margin: 10px 0; } .news-nav li {padding:0;} .imgs li { width:100%; height:auto; } }