.dongtai { width: 1200px; margin: 20px auto; padding:0; background:none; position: static; } .dongtai ul { margin:0; padding: 15px; background: #fff;} .dongtai ul li{ list-style-type: none; } .dongtai ul.dtlist>li {position: relative; padding:0 0 40px 120px; margin-bottom: 40px; border-bottom: 1px dashed #e5e5e5; box-sizing: content-box;} .dongtai ul.dtlist>li .dt-time {position: static; left:0; top:0; width: 85px; height: 92px; background: #ececec; padding:8px 0 0 15px; box-sizing: content-box;} .dongtai ul.dtlist>li .dt-time span{display: block; overflow: hidden; font-size: 16px; color:#666; line-height: 1.3; font-size: 16px;} .dongtai ul.dtlist>li .dt-time span.day{color:#c00; font-size: 36px; font-family: 'Arial'; line-height: 1.1; padding-bottom: 3px;} .dongtai ul.dtlist>li .dt-txt { font-size: 14px; color: #666; } .dongtai ul.dtlist>li .dt-txt h3{ font-size: 16px; font-weight: bold; color: #333; padding:6px 0 10px; line-height: 1.4;} .dongtai ul.dtlist>li .dt-txt .time-mob {display: none; font-size: 14px; color:#999;} .dongtai ul.imglist {width: 830px; margin-top: 20px; padding: 0; } .dongtai ul.imglist:after {content:''; display: block; height: 0; visibility: hidden; clear:both;} .dongtai ul.imglist >li {width: 260px; height: 195px; margin:5px 5px 0 0 ; display: inline-block; overflow:hidden;} .dongtai ul.imglist >li:nth-child(3n) { margin-right: 0!important;} .dongtai ul.imglist >li img {width: 100%; display: block;} .dypic-view-popup{ position: static;top:0; right:0; bottom:0; left:0; z-index: 9999999; margin:auto; width: 100%; height: 100%; display: table; } :root .dypic-view-popup { filter:none; } .dypic-viewPN {position: static; top:50%; margin-top:-45px; width: 60px; height: 90px; cursor:pointer; z-index: 10; filter:progid:DXImageTransform.Microsoft.gradient(enabled="true", startColorstr="#99000000", endColorstr="#99000000"); background-color:rgba(0,0,0,0.4); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABaCAYAAABzAJLvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3M0UzNEI5REFCMTFFNzhCOUU5NjQwNzczMzJBQkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3M0UzNEM5REFCMTFFNzhCOUU5NjQwNzczMzJBQkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjczRTM0OTlEQUIxMUU3OEI5RTk2NDA3NzMzMkFCQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjczRTM0QTlEQUIxMUU3OEI5RTk2NDA3NzMzMkFCQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt4mkpwAAAVFSURBVHja7JxriBVlGMfPulu6rrQapd3oomAUSGX3EqILEkUtRmAGhkJmVFSuEYFlil2U+tDFNPyyGpVkF5DC2j6laXe6LSaVZiVRSltidFlbd/q/8Aw9+zioZ/ecmWdm/n/4sWfPh7Mz72/PzHt53mmIoqjCFDdD2AQUzFAwQ8EMBTMUzFAwQ8EUzFAwQ8EMBTMUzFAwQ8EUzFAwQ8EMBTMU7Du9YB94EIyg4IHndNAJIsFLGqXdFoAl4GgKrj4Xgg4w2eGxdanXt4FlYCwFH3rawCpwnnqvw9HxTQfr1e/Xg5VgokvDoS7aEbPBz9H/+Rc8AlqdHecJ4KWof74CVzo7TjeCDwcLwR+qwXaDOWCot0YTjgRPgT51zDvATRS8f0MtA72qoX4CN4AhTuXGhH++B8A/6th/B+1e/jGzPoBTwMvmUrcFTHYuVtMAZoFuc2t5DIwqs+CzwHoj9115v5JDrgVbzfk8J/fr0gm+HGw2jRG+ySfmVG7MBeADc15vgVPLJHgq+FE1wD6wVO7FlQIQZK4zkj8CFxVdcKN0Pn5TJ/43mA+GF0RuzPGgw0j+BkwpquAWsBj8pU64W8a9TQWTGzMSLJErVJxfwC1FE3wMWCU9yzjfgraCitUMA3fK0CnOHhlaDS2C4HHgTTMZ8KF0RioloVHG9DtUG/SA5WkMo+rdo/xEnVSfyD6tRHL1WPkK0GU6l6+Ck/ImOMw+XSOXYT3wD2PC40ooV3Nmwtj/HXB2XgQfBm4GO9UJhI7V42BEyeXGhLH+K+a21SXfcNeCQ095HvjT9JTnyiWKcvv3sJfKvVgvVEzzKjhMUjxthgQ/gBsp84AraPMSVtDuruXQsVaXHLs2ulmmIyny4J2vW8Eu08NeUKth1GA/IPQAX09YMDiH8qpiiumU9sj4OXPBy43c0Hk4mcIGRJir/li15We1+NyGQT7KcJsqOAt1U/eCX1lZO+BcDdZK5WY3OCrroruR8rMPvEC5g0oTmCByQ/Z6qKrcrT5nFhhDTwNKs1z95qv3vvAguFO9ngpWgHH0VVVawcNCs7z3NVjsoWw2lKO8ZjpaG3NcdpM2Y8DKeg4xa1UjvNoc5OdgEgUetODQfjlCuc+5XmeynjEHu1UK0ShzfybIIoPO2/Wo3ar1XPQis7AfKhhmUGg/LgafplVwWI9C8PaE+dV2Wfguu9ywjLrNyH0WjM7TenCTbN/YZYrrHipgcV01TE/YdxXq1I7IY0VHg9RcbVcn1Cv36daSiW2UeeU9pi7rHllRynVN1iXgS3NJerFElR3NsqlO77sK3+KZRaqqPANsMJI7s6z2T3FR/0lz3tvTro1O6w+NTaj2fx9MLKjcY6UGLTJlOZcVeWdDOOnnPZx0CqXCb5jzfC+r2b20/2CoA37CnPz34LqCyA0SNyVsPhtfps1nLdLx2KsaYWfaWzrqwKUJOyZXZ71jMsud8XckDB3uy+lepTa5Eum42DGZ9fhwmkxnxgmPQnhU9vTkRe6MhKK5RV4mdTxUFV5lpu/CmHFF5ODxB4cwYzfH1IHH07JurkJeGmuSLDHqrIkyfvzBARguU6893hdWvC2hbUxYQhvvrNFGyf1VF/l/l8Xm7rwJjidE1hrJ4fEH5zs6xlwVNwy2bLYeGS31SDPVe1vk4aQuHg6oXm8Ct9eqQK4e8Sg4LkRbCO7Sx+pM8DrQLgVyFQquPi1gLrhf6q6HOTmuDfJztlxZKhTM8HHCDAUzFMxQMAUzFMxQMEPBDAUzFMxQMAUzFMxQMEPBDAUzFMxQMEPBFMwUIP8JMADqp+iI3FSAoAAAAABJRU5ErkJggg==); background-position: left top; } .dypic-viewPN.dypic-view-prev { left: 0; } .dypic-viewPN.dypic-view-next { right: 0; background-position: right; top;} .dypic-img-box { display: table-cell; vertical-align: middle; text-align: center; width:100%; filter:progid:DXImageTransform.Microsoft.gradient(enabled="true", startColorstr="#99000000", endColorstr="#99000000"); background-color:rgba(0,0,0,0.6); } .dypic-img-box img {max-width: 100%;display: none; opacity: 0; filter: alpha(opacity=0);} .dypic-img-box img.active {display: inline-block; opacity: 1; filter: alpha(opacity=100);} @media screen and (max-width:1200px) { .dongtai {width: 96%; margin:2%; box-sizing: content-box;} } @media screen and (max-width:950px) { .dongtai ul.imglist {width: 100%; } .dongtai ul.imglist >li {width: calc(33.3333% - 6px); height: auto; display: block; float: left; margin:8px 8px 0 0 ; -webkit-box-sizing: border-box;box-sizing: border-box;} } @media screen and (max-width:640px) { .dongtai {background: #f5f5f5; width: 100%; margin:0;} .dongtai ul.dtlist>li { padding:0 2% 2%; background: #fff; margin-bottom: 2%; border-bottom: 0;} .dongtai ul.dtlist>li .dt-time{display: none;} .dongtai ul.dtlist>li .dt-txt h3{ padding:6px 0 8px;} .dongtai ul.dtlist>li .dt-txt .time-mob {display: block; padding:0 0 6px;} .dongtai ul.imglist >li:nth-child(3n) { margin-right: 0;} .dongtai ul.imglist {width: 100%; margin-top: 2.2%; } }