#w { display: block; max-width: 99%; min-width: 300px; margin: 0 auto; padding: 2px 3px; } #w-title { width: 50%; float: left; text-align: left; font-weight: bold; font-size: 22px; padding: 20px 8px; } #w-more { width: 50%; float: left; text-align: right; font-size: 17px; padding: 20px 8px; } .lg-slider { overflow: hidden; display: inline-block; width: 100%; position: relative; } .lg-slider .lg-wrapper { position: absolute; left: 0; } .lg-slider .lg-wrapper .slide { display: inline-block; padding: 0 8px; } .lg-slider .lg-wrapper .slide .slide-container { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); padding: 15px; background: #FBFBFB; color: #777777; font-family: "Open Sans", sans-serif; position: relative; } .lg-slider .lg-button-container { position: absolute; bottom: 0; text-align: center; width: 100%; } .lg-slider .lg-button-container .lg-previous, .lg-slider .lg-button-container .lg-next { background: #FFFFFF; display: inline-block; padding: 15px; font-size: 20px; color: #777777; cursor: pointer; font-family: FontAwesome; } .lg-slider .lg-button-container .lg-previous:hover, .lg-slider .lg-button-container .lg-next:hover { color: #AAAAAA; } .lg-slider .lg-button-container .material-icons{ line-height: 20px; } .lg-slider .lg-button-container .page-list{ cursor: pointer; } .lg-slider .lg-button-container .lg-previous:before { content: '\f053'; } .lg-slider .lg-button-container .lg-next:before { content: '\f054'; } .lg-slider .lg-wrapper .slide .slide-title { font-size: 18px; font-weight: bold; text-align: center; width: 100%; margin-bottom: 10px; height: 40px; } .lg-slider .lg-wrapper .slide .slide-comment { height: 135px; } .lg-slider .lg-wrapper .slide .slide-thumbnail { display: block; position: relative; margin-bottom: 10px; } .lg-slider .lg-wrapper .slide .slide-thumbnail img { display: block; width: 140px; margin: auto; } .lg-slider .lg-wrapper .slide .slide-thumbnail:hover img { opacity: 0.8; } .lg-slider .lg-wrapper .slide h3 { font-size: 1.95em; line-height: 1.25em; margin-bottom: 12px; } .lg-slider .lg-wrapper .slide h3 a { text-decoration: none; color: #333; } .lg-slider .lg-wrapper .slide h3 a:hover { text-decoration: underline; } .lg-slider .lg-wrapper .slide .slide-date { display: block; position: absolute; bottom: 0; right: 0; padding: 5px 15px 15px 5px; } .lg-slider .lg-wrapper .slide .slide-name { display: block; position: absolute; bottom: 0; left: 0; padding: 5px 5px 15px 15px; font-weight: bold; } .lg-slider .lg-wrapper .slide p { font-size: 1.2em; line-height: 1.55em; margin-bottom: 5px; } @media screen and (max-width: 660px) { h1 { font-size: 2.4em; line-height: 1.2em; } .lg-slider .lg-wrapper .slide h3 { font-size: 1.65em; } }