*, *:before, *:after{ box-sizing: border-box;}
body, div, ul, li, a{ padding: 0; margin: 0;}
ul{ list-style-type: none;}

body{ font-size: 15px; background: #bbb;}
.clearfix:after{ content: ''; display: block; clear: both;}
.mask{ overflow: hidden;}
.text-center{ text-align: center;}
.btn{ background: none; border: 0; cursor: pointer; outline: none;}
.btn-next {}

h1{ text-shadow: 1px 1px #FFF; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 3em;}
.slider-wrap{ position: relative; margin: 1em auto; width: 690px;}
.slider-wrap .mask{ background: #fff;}
.slider-list{ position: relative; left: 0; transition: left .5s;}
.slider-list li{ float: left; width: 200px; margin: 1em;}
.slider-list img{ display: block;}
.slider-wrap > .btn{ position: absolute; top: 0; color: #fff; font-size: 2em; background: rgba(0,0,0,.4); line-height: 180px; padding: 0 .2em;}
.slider-wrap > .btn:hover{ background: #000;}
.slider-wrap .btn-prev{ left: 0;}
.slider-wrap .btn-next{ right: 0;}
.slider-wrap .pager{ margin: 1em 0;}
.pager .btn { width: 3em; height: .4em; text-indent: -9999px; background: #fff; margin: 0 4px;}
.pager .btn:hover{ background: #eee;}
.slider-wrap .js-btn-active,
.slider-wrap .js-btn-active:hover { background: #0da4d3;}