/* common */
.sp-block{display:none;}
.sp-inline{display:none;}
.pc-block{display:block;}
.pc-inline{display:inline;}

.spmenu {display:block;position:fixed;right:0;top:0;width:50px;height:50px;overflow:hidden;padding:15px 0 0 12px;background:none;z-index:99999;cursor:pointer;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.spmenu .bar1, .spmenu .bar2, .spmenu .bar3 {display:block;height:2px;background:#222;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.bar1 {width:26px;margin:0 0 7px 0;}
.bar2 {width:18px;margin:0 0 7px 0;}
.bar3 {width:26px;margin:0;}


.sp-nav {display:block;position:fixed;top:0;right:-260px;width:260px;height:100%;overflow-y:auto;margin:53px 0 0 0;background:rgba(255,119,0,0.9);z-index:99999;
transform: translate(0,0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.sp-wrap {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/*.menu-on {transform:translate(-240px,0);}*/
.menu-on .bar1 {transform-origin:0% 50%;transform:rotate(45deg);}
.menu-on .bar2 {background-color:transparent;}
.menu-on .bar3 {transform-origin:0% 50%;transform:rotate(-45deg);}

.menu-on-default {transform: translate(-260px,0);}

.sp-nav ul {}
.sp-nav ul li {position:relative;padding:0 0 0 10px;border-bottom:1px solid rgba(255,255,255,0.2);cursor:pointer}
.sp-nav ul li a {display:block;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.sp-nav ul li a:hover {color:#222;background:rgba(0,0,0,0.6);}
.sp-nav ul li ul {max-height:0;overflow:hidden;
transition: 0.2s;
}
.sp-nav ul li.on > ul {max-height:1000px;
transition: 1s;
}
.sp-nav ul li ul {margin:0;}
.sp-nav ul li ul li {border-bottom:none}
.sp-nav ul li ul li:last-child {margin:0 0 10px 0;}



.cross {display:block;position:absolute;right:10px;top:21px;width:20px;height:20px;margin:-4px 0 0 0;text-align:left;}
.cross .bar_b1, .cross .bar_b2 {display:block;width:15px;height:1px;background:#fff;cursor:pointer;transition: all 0.3s ease-in-out;}
.cross .bar_b1 {margin:9px 0 0 0;}
.cross .bar_b2 {margin:-1px 0 0 0;transform-origin:50% 50%;transform:rotate(90deg);} 

.sp-nav ul li.on .bar_b1 {background-color:transparent;}
.sp-nav ul li.on .bar_b2 {background-color:#fff;transform-origin:50% 50%;transform:rotate(180deg);} 


@media screen and (max-width: 1024px){
.sp-block{display:block;}
.sp-inline{display:inline;}
.pc-block{display:none;}
.pc-inline{display:none;}
}