@charset "utf-8";

.button { display: block; padding:0 30px; width:100%;height:auto;}
.button div { position: relative; float:left; max-width: 296px; height: auto;}
.button div a > img{ width: 100%;}

.button div .hoverImg,.baseArea .button div .indexImg { position:absolute; top:-5px; left:-8px; z-index:10; width: 107%;}

.buttonIo {display:none;}


@media only screen and (max-width: 925px) {

.button {display: block;position:  relative; padding: 0; width:100%;height:auto;}
.button div { position: relative; float:left; width: 33%; height:auto}
.button div .hoverImg,.baseArea .button div .indexImg {display: none;}
.button div{ max-width: 100%; height: auto;}

.button div img { width:100%;}

}

@media only screen and (max-width: 600px) {

 
.button { display: none; position: absolute; top:0; right:0; padding: 0 0 10% 0; width:100%;height:100vh; background:rgba(0,0,0,0.8); z-index: 20}	
.button div { position: relative; float:none; margin: 0 10% 0 0; width: 90%;height:auto}
	
.buttonIo {display:none; position:relative; vertical-align: middle; color: #fff; padding:5px 0 5px 5px; background: #000; /*top: 0.02% ; right: 2%; z-index: 999;*/}	
.buttonIo img{display:inline-block; vertical-align: middle; margin-right: 5px; width: 26px;}	
	
}