@charset "UTF-8";

div.imgBox {
	float:left;
    width: 360px;
}
/* #image_box
--------------------------- */
.image_box {
	overflow: hidden;
    margin: 0 auto;
    width: 360px;
    height: 360px;
    text-align: left;
    position: relative;
	margin-bottom:15px;
}
.image_box ul {
    top: 0;
    left: 0;
    height: 360px;
    position: absolute;
    overflow: hidden;
}
.image_box ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
 .image_box li img {
    width: 100%;
}
 
 /*
#image_box #moveprev {
    top: 0;
    left: -30px;
    width: 30px;
    height: 400px;
    background: transparent url(../img/moveprev.jpg) no-repeat left top;
    position: absolute;
    cursor: pointer;
}
 
#image_box #movenext {
    top: 0;
    right: -30px;
    width: 30px;
    height: 400px;
    background: transparent url(../img/movenext.jpg) no-repeat left top;
    position: absolute;
    cursor: pointer;
}
*/
 
 
 
/* #thumbBtn
--------------------------- */
.thumbBtn {
    margin: 10px auto;
    width: 360px;
    height: 106px;
    text-align: center;
}
.thumbBtn ul {
    width: 360px;
    height: 106px;
}
.thumbBtn ul li {
	position:relative;
    width: 106px !important;
    height: 106px;
    float: left;
    cursor: pointer;
    display: inline;
    background: #FFF;
	display: flex;
	justify-content: center;
  	flex-wrap: wrap;
	align-items: center;
}
.thumbBtn li + li{
	margin-left:21px;
}
.thumbBtn ul li.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
.thumbBtn li img {
	/*display:block;*/
}
.thumbBtn li.active span{
	position:absolute;
	top:0;
	left:0;
    border:3px solid #d3ccc3;
    display:block;
	margin:0;
    width:106px;
    height:106px;
}
.thumbBtn li span{
	margin: 0;
	box-sizing: border-box;
}
 
/* =======================================
    ClearFixElements
======================================= */
.image_box ul:after,
.thumbBtn ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
.image_box ul,
.thumbBtn ul {
    display: inline-block;
    overflow: hidden;
}



@media screen and (min-width: 0px) and (max-width: 768px) {/*SP*/

div.imgBox {
	float: none;
    width: 250px !important;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 0px auto 20px;
}
/* #image_box
--------------------------- */
.image_box {
	text-align: left;
    height: 250px;
    position: relative;
    margin: 0 auto 15px;
}
.image_box ul{
	width:250px;
}
.image_box li{
	width: 250px;
	display: block;
}
.image_box li img {
	width: 250px;
    height: auto;
    display: block;
}
.flickmask{
	margin: 0 auto;
	z-index: 1;
	width: 100%;
}


/* #thumbBtn
--------------------------- */
.thumbBtn {
    margin:0 auto;
    width:65px;
	height:auto;
    text-align: center;
}
.thumbBtn ul {
    width: 100% !important;
    height: auto;
}
.thumbBtn ul li {
	position:relative;
    width: 15px !important;
    height: 15px;
    /*float: left;*/
    float: none;
    cursor: pointer;
    /*display: inline;*/
    display: inline-block;
	background:#d2d2d2;
	border-radius:50%;
}
.thumbBtn li + li{
	/*margin-left:10px;*/
	margin-left: 0;
}
.thumbBtn li.active{
	background:#70b539;
}
.thumbBtn li img {
	display:none;
}
.thumbBtn li.active span{
	display:none;
}
.thumbBtn li span{
	display:none;
}

}