/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1000px) {
	div.mainscrollbarimgwrap{position:relative; margin:0 auto; width:720px;}
	div.mainscrollbarimgbox{float:left; width:100%; border:#000 solid 1px;}
	div.mainscrollbarimg{position:relative;width:720px; height:540px;}
	div.mainscrollbarimg img{max-height: 100%; max-width: 100%;width: 99%;height: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
	div.mainscrollbarcontrol{float:left; width:80%; margin:15px 10% 15px 10%; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	div.mainscrollbarimgwrap{float:left; width:100%;}
	div.mainscrollbarimgbox{float:left; width:100%; border:#000 solid 1px;}
	div.mainscrollbarimg{position:relative; width:100%; }
	div.mainscrollbarimg img{max-height: 100%; max-width: 100%;width: 99%;height: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
	div.mainscrollbarcontrol{float:left; width:90%; margin:15px 5% 15px 5%;}
}

/* ==========================================================================
   Share CSS
   ========================================================================== */

.mainscrollbarslider {-webkit-appearance:none; width:100%; height:10px; background: #d3d3d3; outline: none; opacity: 0.7; transition: opacity .2s;}
.mainscrollbarslider:hover {opacity: 1;}
.mainscrollbarslider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;width:10px;height: 25px;background: #333333;cursor: pointer; border:none;}
.mainscrollbarslider::-moz-range-thumb {width:10px;height: 25px;background: #333333;cursor: pointer; border:none;}