#menu {position: fixed;top:0;right: 0;display: block;width: 110px;height: 100%;background-color: rgba(34,34,34,1);z-index: 1000;transition-duration: .5s;}
#menu div.mid {display: block;text-align: center;transition-duration: .5s;}
#menu div.mid img {display: block;margin: 100px auto 0;}
#menu div.mid a {position: absolute;bottom: 0;right: 0;}
#menu div.mid a:nth-child(2) {bottom: 75px;}
#menu div.mid a img {margin: 0;}
#menu div.open_menu {opacity: 0;position: fixed;top:0;right: 0;display: block;width: 120px;height: 100%;background-color: rgba(34,34,34,0.9);z-index: -1;transition-duration: .5s;}
#menu ul {opacity: 0;display: block;width: 250px;position: absolute;top:50px;left:40px;transition-duration: .5s;transition-timing-function: cubic-bezier(0,.7,.73,1.26);}
#menu ul li a {display: block;font-size: 16px;color: #fff;margin-bottom: 30px;}

#menu_out {display: none;width: 100%;height: 100%;position: fixed;top: 0;}

#panel-btn-icon_top {display: block;cursor: pointer;position: absolute;top: 30px;right: 35px;width: 39px;height: 43px;}
#panel-btn-icon_top p {display: block;position: relative;width: 38px;height: 3px;margin: 12px 0 0;background: #fff;transition-duration: .5s;}
#panel-btn-icon_top p:before, #panel-btn-icon_top p:after{display: block;content: "";position: absolute;top: 50%;left: 0;width: 38px;height: 3px;background: #fff;}
#panel-btn-icon_top p:before{margin-top: -12px;}
#panel-btn-icon_top p:after{margin-top: 9px;}
#panel-btn-icon_top p span {position: absolute;bottom: -33px;left:0px;font-size: 15px;color: #fff;}

#menu.open div.open_menu {width: 350px;opacity: 1;}
#menu.open ul {opacity: 1;transition-timing-function: cubic-bezier(.35,-0.22,.6,.76);}

#menu_out.open {display: block;}

#panel-btn-icon_top.open p {background: transparent;}
#panel-btn-icon_top.open p:before,#panel-btn-icon_top.open p:after{margin-top: 0;}
#panel-btn-icon_top.open p:before{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
#panel-btn-icon_top.open p:after{transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
#panel-btn-icon_top.open p span {opacity: 0;}


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

#menu {position: fixed;top:0;right: 0;display: block;width: 80px;height: 80px;background-color: rgba(34,34,34,0.95);z-index: 1000;transition-duration: .5s;overflow: hidden;}
#menu div.mid {display: none;text-align: center;transition-duration: .5s;}
#menu div.mid img {display: block;margin: 100px auto 0;}
#menu div.mid a {position: absolute;bottom: 0;right: 0;}
#menu div.open_menu {opacity: 0;position: fixed;top:0;right: 0;display: block;width: 0px;height: 55px;background-color: rgba(34,34,34,0.9);z-index: -1;transition-duration: .5s;}
#menu ul {opacity: 0;display: block;width: 250px;position: absolute;top:50px;left:40px;transform: translateX(80px);transition-duration: .5s;}
#menu ul li a {display: block;font-size: 16px;color: #fff;margin-bottom: 30px;}

#menu_out {display: none;width: 100%;height: 100%;position: fixed;top: 0;}

#panel-btn-icon_top {display: block;cursor: pointer;position: absolute;top: 20px;right: 20px;width: 39px;height: 43px;}
#panel-btn-icon_top p {display: block;position: relative;width: 38px;height: 3px;margin: 12px 0 0;background: #fff;transition-duration: .5s;}
#panel-btn-icon_top p:before, #panel-btn-icon_top p:after{display: block;content: "";position: absolute;top: 50%;left: 0;width: 38px;height: 3px;background: #fff;}
#panel-btn-icon_top p:before{margin-top: -12px;}
#panel-btn-icon_top p:after{margin-top: 9px;}
#panel-btn-icon_top p span {position: absolute;bottom: -33px;left:0px;font-size: 15px;color: #fff;}

#menu.open div.open_menu {width: 300px;height: 100%;opacity: 0.9;}
#menu.open {width: 300px;height: 100%;opacity: 0.9;}
#menu.open.mid div {opacity: 0;}
#menu.open ul {opacity: 1;transform: translateX(30px);}

#menu_out.open {display: block;}

#panel-btn-icon_top.open p {background: transparent;}
#panel-btn-icon_top.open p:before,#panel-btn-icon_top.open p:after{margin-top: 0;}
#panel-btn-icon_top.open p:before{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
#panel-btn-icon_top.open p:after{transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
#panel-btn-icon_top.open p span {opacity: 0;}

}