section.container { margin: 0 auto 75px; } section.container div.top { background: #f1f1f1; overflow: hidden; } section.container div.top div.wrapper { margin: 75px auto 90px; } section.container div.top div.left div.swiper-container { border-radius: 12px 0 12px 0; -webkit-box-shadow: 11px 11px 0 #00a783; box-shadow: 11px 11px 0 #00a783; } section.container div.top div.wrapper a.item { display: block; width: 100%; height: 0; padding-top: 61.255411255%; background: #353535 no-repeat center / cover; position: relative; overflow: hidden; } section.container div.top div.wrapper a.item span.info { display: block; position: absolute; left: 50px; bottom: 80px; width: 70%; max-width: 500px; color: #fff; } section.container div.top div.wrapper a.item span.info small { display: block; font-size: 18px; font-family: 'Montserrat-Medium'; } section.container div.top div.wrapper a.item span.info span.title { display: block; margin-top: 8px; font-size: 20px; line-height: 1.4; } section.container div.top div.wrapper div.swiper-container:after { content: ''; display: block; width: 31px; height: 12px; position: absolute; left: 50px; bottom: 30px; z-index: 2; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAMBAMAAABowns/AAAAA3NCSVQICAjb4U/gAAAAD1BMVEX///////////////////+Rd1MVAAAABXRSTlMARIi7/xMIGx0AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAJ0lEQVQImWNgQABGIwZUwOSigCai4kSUEhckAFaCIYDXVNIVgJ0OAD5xCsMzrf2ZAAAAAElFTkSuQmCC') no-repeat right center; } section.container div.top div.wrapper div.pagination { position: absolute; right: 45px; left: auto; width: auto; bottom: 24px; z-index: 2; } section.container div.top div.wrapper .swiper-pagination-bullet { width: 17px; height: 17px; margin: 0 6px; background: #fff; } section.container div.top div.right { height: 100%; position: absolute; right: 0; top: 0; } section.container div.top div.wrapper div.info-wrapper { background: #fff; height: 100%; position: relative; padding: 50px 40px 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 12px 0 12px 0; } section.container div.top div.right div.info { overflow: hidden; height: 100%; position: relative; } section.container div.top div.right div.info a.title { display: block; font-size: 20px; line-height: 26px; max-height: 108px; overflow: hidden; } section.container div.top div.right div.info span.dot { display: block; width: 22px; height: 4px; background: #00a783; margin: 35px 0; } section.container div.top div.right div.info div.desc { font-size: 14px; line-height: 25px; max-height: 120px; overflow: hidden; } section.container div.top div.right div.info div.bottom { position: absolute; bottom: 0; width: 100%; overflow: hidden; } section.container div.top div.right div.info div.bottom span.date { float: left; color: #222; opacity: 0.2; text-align: center; } section.container div.top div.right div.info div.bottom span.date b { display: block; font-size: 50px; line-height: 0.8; font-weight: bold; font-family: 'Montserrat-Medium'; } section.container div.top div.right div.info div.bottom span.date small { font-size: 16px; line-height: 1; font-family: 'DINAlternate'; margin-top: 5px; } section.container div.top div.right div.info div.bottom a.more { display: block; width: 60px; height: 60px; line-height: 60px; text-align: center; color: #fff; border-radius: 0 12px 0 12px; float: right; background: #00a783; } section.container div.top div.right div.info div.bottom a.more i { font-size: 18px; font-weight: bold; } section.container div.container-list { padding: 95px 0 30px; background: #fff; } section.container div.container-list div.wrapper { overflow: hidden; } section.container div.container-list a.item { display: block; overflow: hidden; position: relative; border-radius: 12px 0 12px 0; } section.container div.container-list a.item span.thumb { display: block; height: 0; padding-top: 57.33333333333333%; overflow: hidden; position: relative; background: #353535 no-repeat center / cover; } section.container div.container-list a.item span.thumb img { display: block; width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; } section.container div.container-list a.item span.info { display: block; background: #f6f6f6; overflow: hidden; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; padding: 25px 30px 35px 25px; } section.container div.container-list a.item span.info small.date { font-size: 16px; line-height: 1; color: #222; opacity: 0.2; font-family: 'DINAlternate'; } section.container div.container-list a.item span.info span.title { display: block; font-size: 18px; line-height: 1.3; height: 56px; overflow: hidden; margin-top: 15px; } section.container div.container-list a.item span.info span.dot { display: block; margin-top: 8px; width: 31px; height: 12px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAMBAMAAABowns/AAAAA3NCSVQICAjb4U/gAAAAD1BMVEX////FxcXFxcXFxcXFxcViw4hYAAAABXRSTlMARIi7/xMIGx0AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAJ0lEQVQImWNgQABGIwZUwOSigCai4kSUEhckAFaCIYDXVNIVgJ0OAD5xCsMzrf2ZAAAAAElFTkSuQmCC') no-repeat right center; } section.container div.container-list a.item:hover { -webkit-box-shadow: 4px 4px 8px #f6d4d4; box-shadow: 4px 4px 8px #f6d4d4; } section.container div.container-list a.item:hover span.info { background: #00a783; color: #fff; } section.container div.container-list a.item:hover span.info small.date { color: #fff; opacity: 0.5; } section.container div.container-list a.item:hover span.info span.dot { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAMBAMAAABowns/AAAAA3NCSVQICAjb4U/gAAAAD1BMVEX///////////////////+Rd1MVAAAABXRSTlMARIi7/xMIGx0AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAJ0lEQVQImWNgQABGIwZUwOSigCai4kSUEhckAFaCIYDXVNIVgJ0OAD5xCsMzrf2ZAAAAAElFTkSuQmCC'); } section.container div.container-wrapper { background: #f1f1f1; overflow: hidden; position: relative; padding: 94px 0; } section.container div.container-wrapper div.header { position: relative; } div.container-wrapper div.header { padding-bottom: 35px; margin-bottom: 35px; border-bottom: 2px solid rgba(0, 0, 0, 0.2); } div.container-wrapper div.header h1 { font-size: 32px; line-height: 46px; margin-right: 100px; } div.container-wrapper div.header div.date { font-size: 16px; font-family: 'Montserrat-Medium'; margin-top: 5px; } div.container-wrapper div.header div.bshare-custom { position: absolute; right: 0; top: 0; width: 72px; overflow: hidden; } div.container-wrapper div.header div.bshare-custom a { display: block; background: none !important; padding: 0; width: 26px; height: 26px; float: left; line-height: 26px; text-align: center; color: #787878; text-decoration: none; position: relative; margin: 0 0 0 10px; } div.container-wrapper div.header div.bshare-custom a:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } div.container-wrapper div.header div.bshare-custom a i { font-size: 24px; } div.container-wrapper div.header div.bshare-custom a:hover { color: #00a783; } div.container-wrapper div.wrapper > div.body { font-size: 18px; line-height: 1.7; overflow: hidden; position: relative; } div.container-wrapper div.wrapper > div.body * { max-width: 100% !important; } div.container-wrapper div.wrapper > div.body p { margin-bottom: 25px; } div.container-wrapper div.wrapper div.prevnext { margin-top: 75px; padding-top: 40px; border-top: 2px solid rgba(0, 0, 0, 0.2); } div.container-wrapper div.wrapper div.prevnext div.back { text-align: center; } div.container-wrapper div.wrapper div.prevnext div.next { text-align: right; } div.container-wrapper div.wrapper div.prevnext a.item label { display: block; height: 56px; line-height: 56px; padding-left: 15px; font-size: 16px; font-weight: bold; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA4BAMAAAAcHoWHAAAAA3NCSVQICAjb4U/gAAAAHlBMVEX////pAADpAADpAADpAADpAADpAADpAADpAADpAACYbrRLAAAACnRSTlMAESIzRFVmd4iZu4Nz1gAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAC1SURBVCiRfdPLFYMgFARQHqSBLJRsYwkxHUBKIB1oSsAOMB2YbvMxizdzDri7Z/zAYzSmcQnyCLJn4AC0yAFoL8AR6JBXoAvAGDUPUadyg7RLOpWUdNpNOpX7pNN+1pQHsM+zelYWoF81ZQH6rSjKc9vT/c2nV4ufmwu+ij5Usl6kX4GSYZG0hf8GQ2X7PJzf6GJ1sN+xRzyUUD8yPlDjkGZsVoWKxDWjEnJFqcBcbyo//xrmDRwMX1iVJfoGAAAAAElFTkSuQmCC') no-repeat left center; } div.container-wrapper div.wrapper div.prevnext div.next a.item label { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA4BAMAAAAcHoWHAAAAA3NCSVQICAjb4U/gAAAAHlBMVEX////pAADpAADpAADpAADpAADpAADpAADpAADpAACYbrRLAAAACnRSTlMAESIzRFVmd4iZu4Nz1gAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACtSURBVCiRfdLBCYMwFMbxdANHiJ0gGAd4tHoXihNUdAEhDtBDFvDQbduDwvs/JLn9+EwweZ9zXDfDiqzJe0XWJOI/GzJ6siFbD8YH084j7Z5M+4C0fzEdA9LxzXQO5EQuovfOy0puQn7IPGimvOuTt/wdyP2K597j4/NkHJWy4GT+RpLSFaR0fT6OeboA6mePdihmZBhoy3GrrlxUxYOmZiyhqSgLbOptyu8K6wdSBVuQq/D69gAAAABJRU5ErkJggg==') no-repeat right center; padding: 0 15px 0 0; } div.container-wrapper div.wrapper div.prevnext a span { display: block; padding: 0 15px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div.container-wrapper div.wrapper div.prevnext a.back label { display: block; text-align: center; padding-top: 18px; height: 56px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.container-wrapper div.wrapper div.prevnext a.back label i { display: block; width: 17px; height: 4px; background: #000; margin: 0 auto 7px; } div.container-wrapper div.wrapper div.prevnext a.back:hover label i { background: #00a783; } @media screen and (max-width:1400px) {} @media screen and (max-width:1199px) { section.container div.top div.wrapper a.item span.info { left: 20px; bottom: 50px; } section.container div.top div.wrapper a.item span.info span.title { font-size: 22px; } section.container div.top div.wrapper div.swiper-container:after { left: 20px; bottom: 20px; } section.container div.top div.wrapper div.pagination { bottom: 14px; right: 20px; } section.container div.top div.wrapper div.info-wrapper { padding: 20px; } section.container div.top div.right div.info a.title { font-size: 22px; } section.container div.top div.right div.info span.dot { margin: 15px 0; } section.container div.container-list a.item span.info { padding: 25px; } div.container-wrapper div.header h1 { font-size: 28px; } } @media screen and (max-width:991px) { section.container div.top div.wrapper a.item span.info small { font-size: 16px; } section.container div.top div.wrapper a.item span.info span.title { font-size: 20px; margin-top: 0; } section.container div.top div.right div.info a.title { font-size: 20px; line-height: 30px; max-height: 60px; } section.container div.top div.right div.info div.desc { font-size: 16px; line-height: 28px; max-height: 84px; } section.container div.top div.right div.info div.bottom span.date b { font-size: 36px; } section.container div.top div.right div.info div.bottom a.more { width: 48px; height: 48px; line-height: 48px; } section.container div.container-list { padding: 50px 0 20px; } section.container div.container-list a.item span.info { padding: 15px; } section.container div.container-list a.item span.info span.title { font-size: 18px; height: 82px; } section.container div.container-list a.item span.info span.dot { margin-top: 0px; } section.container div.container-wrapper { padding: 60px 0; } } @media screen and (max-width: 767px) { section.container { margin-bottom: 45px; } section.container div.top div.wrapper { margin: 45px 10px; } section.container div.top div.left div.swiper-container { -webkit-box-shadow: none; box-shadow: none; } section.container div.top div.wrapper a.item { padding-top: 45%; } section.container div.top div.wrapper a.item span.info { width: 90%; } section.container div.top div.wrapper a.item span.info span.title { font-size: 18px; } section.container div.top div.right, section.container div.top div.wrapper div.info-wrapper { position: relative; height: auto; } section.container div.top div.right div.info div.desc, section.container div.top div.right div.info a.title { max-height: initial; } section.container div.top div.right div.info div.bottom { position: static; margin-top: 20px; } section.container div.top div.right div.info div.bottom span.date b { font-size: 28px; } section.container div.top div.right div.info div.bottom a.more { width: 40px; height: 40px; line-height: 40px; } .layui-col-space25 { margin: -5px; } .layui-col-space25>* { padding: 5px; } div.container-wrapper div.header { padding-bottom: 25px; margin-bottom: 25px; border-width: 1px; } div.container-wrapper div.header h1 { font-size: 24px; line-height: 36px; } div.container-wrapper div.wrapper div.prevnext { margin-top: 45px; padding-top: 25px; border-width: 1px; } div.container-wrapper div.wrapper div.prevnext a { text-align: left !important; display: block; height: 36px; line-height: 36px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } div.container-wrapper div.wrapper div.prevnext a label { display: inline !important; background: none !important; height: auto !important; line-height: auto !important; padding: 0 !important; } div.container-wrapper div.wrapper div.prevnext a span { display: inline; } div.container-wrapper div.wrapper div.prevnext div.back { display: none; } } @media screen and (max-width:479px) { section.container { margin-bottom: 25px; } section.container div.top div.wrapper a.item span.info span.title { text-shadow: 0 0 1px #000; } section.container div.top div.wrapper { margin-top: 20px; margin-bottom: 20px; } section.container div.top div.wrapper a.item { padding-top: 60%; } section.container div.top div.right { margin-top: -10px; } section.container div.container-list { padding: 25px 0; } section.container div.container-list a.item span.info { padding: 10px; } section.container div.container-list a.item span.info small.date { font-size: 14px; } section.container div.container-list a.item span.info span.title { font-size: 16px; line-height: 20px; height: 60px; margin-top: 8px; } section.container div.container-list a.item span.info span.dot { margin-top: 20px; } div.container-wrapper div.header h1 { font-size: 24px; line-height: 30px; margin: 0; } div.container-wrapper div.header div.date { overflow: hidden; margin-top: 12px; } div.container-wrapper div.header div.bshare-custom { position: static; float: right; margin-top: -4px; } div.container-wrapper div.wrapper > div.body { font-size: 16px; } }