body{
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.slide-bar a{display: block;width: 100%;height: 0.86rem;line-height: 0.86rem;text-indent: 0.2rem;}
/*屏幕宽度376-420之间*/
@media screen and (min-width: 376px) and (max-width: 420px){
	body.active>div{
	/* left: -270px; */
	/* transform: translate3d(-270px,0,0);
	-webkit-transform: translate3d(-270px,0,0);
	-moz-transform: translate3d(-270px,0,0);
	-ms-transform: translate3d(-270px,0,0);
	-o-transform: translate3d(-270px,0,0);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out; */
}
.wraper-page{position: absolute;top:0px;right: 0;bottom: 0px;left: 0;overflow: hidden;}
.slide-bar{position: fixed;top: -1px;bottom: -1px;background-color: #fff;width: 270px;z-index: 100;font-size: 13px;right: -270px;
	/* transform: translate3d(270px,0,0);
	-webkit-transform: translate3d(270px,0,0);
	-moz-transform: translate3d(270px,0,0);
	-ms-transform: translate3d(270px,0,0);
	-o-transform: translate3d(270px,0,0); */
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
}
/*屏幕宽度361-375之间*/
@media screen and (min-width: 361px) and (max-width: 375px){	
	body.active>div{
	/* left: -270px; */
	/* transform: translate3d(-270px,0,0);
	-webkit-transform: translate3d(-270px,0,0);
	-moz-transform: translate3d(-270px,0,0);
	-ms-transform: translate3d(-270px,0,0);
	-o-transform: translate3d(-270px,0,0);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out; */
}
.wraper-page{position: absolute;top:0px;right: 0;bottom: 0px;left: 0;overflow: hidden;}
.slide-bar{position: fixed;top: -1px;bottom: -1px;background-color: #fff;width: 270px;z-index: 100;font-size: 13px;right: -270px;
	/* transform: translate3d(270px,0,0);
	-webkit-transform: translate3d(270px,0,0);
	-moz-transform: translate3d(270px,0,0);
	-ms-transform: translate3d(270px,0,0);
	-o-transform: translate3d(270px,0,0); */
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
}
/*屏幕宽度321-361之间*/
@media screen and (min-width: 321px) and (max-width: 360px){
	
	body.active>dive{
	/* left: -270px; */
	/* transform: translate3d(-270px,0,0);
	-webkit-transform: translate3d(-270px,0,0);
	-moz-transform: translate3d(-270px,0,0);
	-ms-transform: translate3d(-270px,0,0);
	-o-transform: translate3d(-270px,0,0);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out; */
}
.wraper-page{position: absolute;top:0px;right: 0;bottom: 0px;left: 0;overflow: hidden;}
.slide-bar{position: fixed;top: -1px;bottom: -1px;background-color: #fff;width: 270px;z-index: 100;font-size: 13px;right: -270px;
	/* transform: translate3d(270px,0,0);
	-webkit-transform: translate3d(270px,0,0);
	-moz-transform: translate3d(270px,0,0);
	-ms-transform: translate3d(270px,0,0);
	-o-transform: translate3d(270px,0,0); */
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
}
/*屏幕宽度310-320之间*/
@media screen and (min-width: 310px) and (max-width: 320px){
	body.active>div{
	/* left: -270px; */
	/* transform: translate3d(-200px,0,0);
	-webkit-transform: translate3d(-200px,0,0);
	-moz-transform: translate3d(-200px,0,0);
	-ms-transform: translate3d(-200px,0,0);
	-o-transform: translate3d(-200px,0,0);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out; */
}
.wraper-page{position: absolute;top:0px;right: 0;bottom: 0px;left: 0;overflow: hidden;}
.slide-bar{position: fixed;top: -1px;bottom: -1px;background-color: #fff;width: 270px;z-index: 100;font-size: 13px;right: -270px;
	/* transform: translate3d(200px,0,0);
	-webkit-transform: translate3d(200px,0,0);
	-moz-transform: translate3d(200px,0,0);
	-ms-transform: translate3d(200px,0,0);
	-o-transform: translate3d(200px,0,0); */
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}

}
/*屏幕宽度421- 480之间*/
@media screen and (min-width: 421px)and (max-width: 480px){
	
body.active>div{
	/* left: -270px; */
	/* transform: translate3d(-270px,0,0);
	-webkit-transform: translate3d(-270px,0,0);
	-moz-transform: translate3d(-270px,0,0);
	-ms-transform: translate3d(-270px,0,0);
	-o-transform: translate3d(-270px,0,0);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out; */
}

.wraper-page{position: absolute;top:0px;right: 0;bottom: 0px;left: 0;overflow: hidden;}
.slide-bar{position: fixed;top: -1px;bottom: -1px;background-color: #fff;width: 270px;z-index: 100;font-size: 13px;right: -270px;
	/* transform: translate3d(270px,0,0);
	-webkit-transform: translate3d(270px,0,0);
	-moz-transform: translate3d(270px,0,0);
	-ms-transform: translate3d(270px,0,0);
	-o-transform: translate3d(270px,0,0); */
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
}
body.active>.slide-bar{
  right: 0;
}
body>div{
	left: 0;
	position: relative;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
body.active .head {
    left: -270px;
}
body.active>div{
	overflow-x: hidden;
}