/* CSS crunched with Crunch - http://crunchapp.net/ */ /*--------------------------------------------------- LESS Elements 0.9 --------------------------------------------------- A set of useful LESS mixins More info at: http://lesselements.com ---------------------------------------------------*/ .main-banner { margin: 0 auto 40px auto; width: 1180px; height: 400px; position: relative; } .main-banner > ul { list-style: none; } .main-banner > ul li { display: block; } .main-banner > ul li > a, .main-banner > ul li > a > img { display: block; overflow: hidden; } .main-banner > a { display: block; position: absolute; width: 45px; height: 45px; text-align: center; color: #293437; } .main-banner > .left-arrow { left: -45px; top: 178px; } .main-banner > .right-arrow { right: -45px; top: 178px; } .main-banner > a > i { font-size: 24px; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); filter: alpha(opacity=50); position: relative; top: 10px; } .main-banner:hover > a > i { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter: alpha(opacity=100); } .main-banner > a:hover { background: #293437; color: #ffffff; } .banner-steps { position: absolute; bottom: -25px; left: 0; right: 0; margin: 0 auto; text-align: center; } .banner-steps > a { display: inline-block; width: 10px; height: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #b7c0c7; margin: 0 3px; -moz-opacity: 0.6; -khtml-opacity: 0.6; -webkit-opacity: 0.6; opacity: 0.6; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); filter: alpha(opacity=60); } .banner-steps > a:hover { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter: alpha(opacity=100); } .banner-steps > a.active { background: #293437; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter: alpha(opacity=100); } @media screen and (max-width: 1200px) { .main-banner { width: 960px; } .main-banner > ul li > a > img { width: auto; height: 100%; } } @media screen and (max-width: 980px) { .main-banner { display: none; } }