#slider,
#slider *{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
/* image-slider */
.image-slider{width:1122px;height:195px;margin:0 auto;background:url(../images/bg.png) no-repeat;padding:14px 16px 0px 16px;position:relative;}
.image-slider-back, .image-slider-forward{float:left;width:30px;height:60px;color:White;position:relative;top:32%;cursor:pointer;background: rgba(0,0,0,0.5);opacity: 0.5;}
.image-slider-back{background-image:url(../img/m2b/arrow-left.png);background-repeat:no-repeat;background-position:center;}
.image-slider-forward{background-image:url(../img/m2b/arrow-right.png);background-repeat:no-repeat;background-position:center;}
.image-slider-contents{width:1055px;height:200px;float:left;position:relative;overflow:hidden;}

.image-slider-contents .contents-wrapper{position:absolute; left:0;}
.image-slider-contents .outer{background-color:#fff;float:left;width:322px;height:186px;margin:0px 15px;cursor:pointer; position:relative;}
.spic{ width: 100%; height: 186px; text-align: center; color: #333; float: left; padding-top: 10px; }
.image-slider-contents img{width:120px;height:120px; margin:0 auto 5px;}
.spic a{ display:block; text-align:center;}
.spic a .spic-title{
    font-size: 16px;
    color: #333; 
    margin-bottom: 5px;
}
.spic a .spic-subtitle{
    color: #777; 
}
.hidden{display:none;}
.visible{display:block;}
.thumbnail-active{filter:alpha(opacity=100);opacity:1.0;cursor:pointer;}
.thumbnail-inactive{filter:alpha(opacity=20);opacity:0.2;cursor:pointer;}

.Preview{ position: fixed; width: 758px; height: auto; background-color: White; padding: 20px; border: solid 1px #eee;    box-shadow: 1px 1px 5px rgba(0,0,0,.2);z-index: 999999999;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}





.Preview .img-large{width:510px;z-index:1000; margin:0 auto;}
.Preview .img-large .left,.Preview .img-large .right{
    position:absolute;top:45%;width:30px;height:60px;z-index:1000;
    cursor:pointer;background-color: rgba(0,0,0,0.5);
}
.Preview .img-large .left{left:18px;background-image:url(../img/m2b/arrow-left.png);background-repeat:no-repeat;background-position:center;}
.Preview .img-large .right{right:18px;background-image:url(../img/m2b/arrow-right.png);background-repeat:no-repeat;background-position:center;}
.Preview .closed{position:absolute;right:5px;top:5px;width:26px;height:26px;background:url(../img/m2b/close.png) no-repeat center;float:right;cursor:pointer;z-index:2000;}
.Preview .img-large img{width:100%;}
.Preview .labels{width:100%;line-height:20px;float:left;position:absolute;bottom:0; left:0;padding:8px 0;background-color:rgba(0,0,0,0.5);;font-size:13px; text-align:left;color: #fff;}
.Preview .labels .spic-title,
.Preview .labels .spic-subtitle{
    display: inline;
    padding: 0 10px;
}
.box-mark{
    z-index:9999999; 
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    background: #000;
    display: none;
}
.outer{border:solid 1px #eee;}
@media screen and (max-width: 768px) {
    .image-slider{
		width: 382px;
	}
	.image-slider-contents{
		width: 345px;
	}
	.image-slider-contents .outer{
		width: 310px;
	}
    .image-slider-back, .image-slider-forward,
    .Preview .img-large .left, .Preview .img-large .right{
		width: 18px;
		height: 50px;
    }
    .Preview{
        width: 372px;
    }
    .Preview .img-large {
        width: 265px;
    }
    .Preview .img-large img {
        width: 275px;
        height: 275px;
    }
    .Preview .img-large .left{
        left: 10px;
    }
    .Preview .img-large .right {
        right: 10px;
    }
    .Preview .closed {
        width: 20px;
        height: 20px;
        background: url(../img/m2b/close-min.png) no-repeat center;
    }
}
@media screen and (max-width: 375px) {
    .image-slider{
		width: 365px;
    }
    .image-slider-contents{
		width: 305px;
	}
	.image-slider-contents .outer{
		width: 275px;
	}
    .Preview{
        width: 333px;
    }
}
@media screen and (max-width: 320px) {
    .image-slider{
		width: 300px;
	}
	.image-slider-contents{
		width: 260px;
	}
	.image-slider-contents .outer{
		width: 230px;
	}
    .Preview{
        width: 278px;
        left: 0 !important;
    }
    .Preview .img-large img {
        width: 255px;
        height: 255px;
    }
}