/* ************************** * =COMMON ************************** */ .b-slider { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; width: 725px; height: 360px; } .b-slider-list { position: absolute; display: block; overflow: hidden; margin: 0; padding: 0; width: 725px; height: 360px; list-style: none; } .b-slider-item { position: absolute; z-index: 50; float: left; overflow: hidden; margin: 0; padding: 0; width: 725px; height: 360px; } .m-slider-current { z-index: 100; } .b-slider-item__img, .b-slider-item__title, .b-slider-item__text { position: absolute; } .b-slider-item__img { top: 0; left: 0; text-decoration: none; } .b-slider-item__link { } .b-slider-item__title { bottom: 10px; left: 10px; width: 500px; color: #333; text-transform: uppercase; text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff; letter-spacing: -5px; font-size: 65px; font-family: Calibri; line-height: 0.8em; } .b-slider-item__text { position: absolute; top: 150px; left: 300px; display: inline-block; display: none; margin: -10px; padding: 10px; max-width: 300px; border-radius: 10px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 5px #fff; color: #555; line-height: 1.5em; } /* ************************** * =NAV ************************** */ .b-slider-nav { position: absolute; width: 100%; top: 10px; height: 30px; left: 0; z-index: 500; display: block; margin: 0; padding: 0; list-style-type: none; text-align: center; } .b-slider-nav-button { display: inline-block; margin: 5px; width: 16px; height: 16px; border-radius: 8px; background: #ddd; color: transparent; text-align: center; font-weight: bold; font-size: 8px; line-height: 16px; cursor: pointer; } .b-slider-nav-button:hover { background: #eee; } .m-slider-nav-current_button { background: #fff; } .b-slider-nav-prev, .b-slider-nav-next { position: absolute; top: 0; z-index: 500; padding-right: 20px; padding-left: 20px; color: #000; text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff; font-size: 50px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 360px; opacity: 0.5; cursor: pointer; } .b-slider-nav-prev:hover, .b-slider-nav-next:hover { opacity: 0.8; } .b-slider-nav-prev { left: 0; padding-left: 0; } .b-slider-nav-next { right: 0; padding-right: 0; }