@charset "utf-8";
/* CSS Document */


.mui-off-canvas-right {
	position:fixed;
	z-index: 15;
	top: 0;
	bottom: 0;
	right: 0;
	visibility: visible;
	box-sizing: content-box;
	width: 70%;
	min-height: 100%;
        background: #fff;
	
	
}

.gd_div{
	position: absolute;
	top: 0;
	bottom: 0;
    width:100%;
	
	background: #fff;
	margin-top:8% !important;
	   
	overflow-y:auto;
	
	
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-left.mui-transitioning,


.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active>.mui-off-canvas-left,


.mui-scroll-wrapper {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    
    width: 100%;
}
.mui-scroll {
    position: absolute;
    z-index: 9;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.mui-off-canvas-backdrop {
	position:absolute;
	z-index: 9;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	transition: background 350ms cubic-bezier(.165, .84, .44, 1);
	background: rgba(0, 0, 0, .4);
	box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
	
}
.body_div{ width: 100%; position: static; display: block; overflow: hidden;top:0; bottom: 0;
}
.sx_title {
    margin: 0px 5px 10px 10px;
}
.sx_nr { width: 90%; margin: auto; overflow: hidden; margin-bottom: 20px; padding-top:10%;}
.sx_menu { margin-right: -10%;}
.off{display: block; height: 90px; overflow: hidden;}
.on {height: auto;}
.sx_menu h3{ float: left; width:100%;font-size:1.4rem; color:#474646; margin-top: 5%;}
.sx_menu label{display:table;  font-size:1.2rem;  float: left;  margin:4% 2% 0 0; width: 42%; height: 40px;  text-align: center;border-radius:5px; }
.sx_menu label span{ vertical-align:middle; display:table-cell; }
.sx_menu2{ width:100%;}
.sx_menu2 h3{ float: left; width:100%;font-size:1.4rem; color:#474646; margin-top: 5%;}
.sx_menu2 label{display:table;  font-size:1.2rem;  float: left;  margin:4% 0 0 0; width: 100%; height: 40px;  text-align: center;border-radius:5px; }
.sx_menu2 label span{ vertical-align:middle; display:table-cell; }
.sx_fg{ float: 100%; height:5px; background: #f8f8f8; border-top:#e5e5e5 1px solid ;}
.more_off{ background:url(../img/more.jpg) no-repeat; float: right; background-size:15% ; background-position:2% ; font-size: 1.2rem; display: block; width: 20%; padding-left: 6%;}
.more_on{ background:url(../img/more3.png) no-repeat;float: right; background-size:15% ; background-position:2% ; font-size: 1.2rem; display: none; width: 20%; padding-left: 6%;color: #F07800;}
.sx_but_div{ position:absolute; z-index: 5; background: #fff; width: 100%; bottom: 0px;}
.sx_but1,.sx_but2{ width: 50%; height: 50px;  text-align: center; float: left; font-size: 1.4rem; font-weight: bold;}
.sx_but1{ color:#666; background:#F3F3F3;}
.sx_but2{ background: #EC971F; color: #fff;}
@media screen and (min-width: 300px) and (max-width: 360px) {
 	 	 .sx_menu {height: 90px;  margin-right: -10%; }
 }
@media screen and (min-width: 365px) and (max-width: 467px) {
 .sx_menu {height: 90px;  margin-right: -10%; }
 	 	
 }
@media screen and (min-width: 467px) and (max-width: 570px) {
 	 	 .sx_menu {height: 100px;  margin-right: -10%; }
 }
@media screen and (min-width: 570px) and (max-width: 600px) {
 	 .sx_menu label{height: 40px;}
 	 .sx_menu {height: 110px; }
 }
 @media screen and (min-width: 600px) and (max-width: 645px) {
 	 .sx_menu label{height: 50px;  }
 	  .sx_menu label span{font-size:1.0rem;} 
 	  .sx_menu {height: 120px; margin-right: -10%; }
	
 }
 @media screen and (min-width: 645px)and (max-width: 700px) {
 .sx_menu label{height: 70px;}
    .sx_menu {height: 150px;  margin-right: -10%;}
 }

@media screen and (min-width: 700px) and (max-width: 800px) {
	 .sx_menu label{height: 70px;  }
	    .sx_menu {height: 150px;  margin-right: -20%;}
}
@media screen and (min-width: 800px) and (max-width: 900px) {
	 .sx_menu label{height: 70px;}
	    .sx_menu {height: 170px; margin-right: -20%; }
}
@media screen and (min-width: 900px) and (max-width: 1000px) {
	 .sx_menu label{height: 70px;}
	    .sx_menu {height: 180px; margin-right: -20%; }
}

@media screen and (min-width: 1000px) and (max-width: 1300px) {
	 .sx_menu label{height: 70px;}
	    .sx_menu {height: 180px; margin-right: -20%; }
}
@media screen and (min-width: 1300px) and (max-width: 1600px) {
	 .sx_menu label{height: 70px;}
	    .sx_menu {height: 200px;  margin-right: -20%;}
}
 @media screen and (min-width: 1600px) {
 	.sx_menu label{height: 70px;  }
 	   .sx_menu {height: 230px; margin-right: -20%; }
}