body, html {
width: 100%;
height: 100%
}
.slider {
height: 100%;
overflow: hidden;
position: relative
}
.slider .slider-wrapper {
position: absolute;
width: 90000px;
height: 100%
}
.slider section {
float: left;
max-width: 100%;
height: 100%
}
.slider section img {
min-width: 100%;
height: 100%
}
.slider .control {
position: absolute;
display: block;
width: 100px;
height: 100%;
background-color: rgba(0,0,0,0.3)
}
.slider .control.right {
right: 0
}
.hover-img-effect section {
width: 1200px;
height: 400px;
margin: 120px auto 0
}
.hover-img-effect section .img-full {
float: left;
width: 600px;
height: 400px;
position: relative
}
.hover-img-effect section .img-full:hover .loupe-glass, .hover-img-effect section .img-full:focus .loupe-glass {
display: block
}
.hover-img-effect section .img-full .loupe-glass {
width: 50px;
height: 50px;
background-color: rgba(0,0,0,0.4);
position: absolute;
display: none;
z-index: 9999;
left: 0;
top: 0
}
.hover-img-effect section .img-full img {
width: 600px;
height: 400px
}
.hover-img-effect section .loupe {
float: left;
width: 600px;
height: 400px;
overflow: hidden;
position: relative
}
.hover-img-effect section .loupe img {
width: 600px;
height: 400px;
-webkit-transform: scale(2.4);
-ms-transform: scale(2.4);
transform: scale(2.4);
position: absolute
}