/* Copyrights 2020 by 联安·上清阁. All rights reserved.
This project is an open source project
Open source address: https://gitee.com/lablog/SQG
When you use this project, please comply with GNU AFFERO GENERAL PUBLIC LICENSE. Please refer to the LICENSE document for details
If you find any problems or errors in this project, you can contact the author email: unscop@outlook.com */

.menu-wrap a {
	color: #b8b7ad;
}

.menu-wrap a:hover,
.menu-wrap a:focus{
	color: #4676fa;
}
.menu-wrap .navbar-nav li .active,
.menu-wrap .navbar-nav li .active:before{
	color: #4676fa; 
	-webkit-transform: scale(1);
	transform: scale(1);
}
.content-wrap {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.content {
	position: relative;
	background: #b4bad2;
}

.content::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
	transition: opacity 0.4s, transform 0s 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Menu Button */
.menu-button {
	position: absolute;
	z-index: 1000;
	width: 60px;
	height: 42px;
	border: none;
	font-size: 30px;
	color: #fff;
	background: transparent;
	top: 15px;
	right: 0;
	line-height: 42px;
	text-align: center;
}

/* Close Button */
.close-button {
	width: 45px;
	height: 45px;
	position: absolute;
	left: -45px;
	top: 4px;
	overflow: hidden;
	font-size: 25px;
	border: none;
	background: #fff;
	color: #000;
	line-height: 48px;
	box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.16), 0 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.logo-menu{
	padding: 15px 0;
}
.menu-bg .logo-menu{
	padding: 6px 0;
}
.menu-bg .menu-button{
	top: 5px;
	color: #333;
}

/* Menu */
.menu-wrap {
	position: fixed;
	z-index: 9999;
	width: 260px;
	right: 0;
	height: 100%;
	background: #fff;
	padding: 2.5em 1.5em 0;
	font-size: 1.15em;
	-webkit-transform: translate3d(320px,0,0);
	transform: translate3d(320px,0,0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.menu, 
.icon-list {
	height: 100%;
}

.icon-list {
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.icon-list a {
	color: #0d3559;
	display: block;
	padding: 0.8em;
	-webkit-transform: translate3d(0,500px,0);
	transform: translate3d(0,500px,0);
	position: relative;
}
.icon-list a:before{
	background: #4676fa;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: 10px;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	width: 20px;
}
.menu-wrap a:hover:before{
	-webkit-transform: scale(1);
	transform: scale(1);
}
.icon-list,
.icon-list a {	
	-webkit-transition: -webkit-transform 0s 0.4s;
	transition: transform 0s 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.icon-list a:nth-child(2) {
	-webkit-transform: translate3d(0,1000px,0);
	transform: translate3d(0,1000px,0);
}

.icon-list a:nth-child(3) {
	-webkit-transform: translate3d(0,1500px,0);
	transform: translate3d(0,1500px,0);
}

.icon-list a:nth-child(4) {
	-webkit-transform: translate3d(0,2000px,0);
	transform: translate3d(0,2000px,0);
}

.icon-list a:nth-child(5) {
	-webkit-transform: translate3d(0,2500px,0);
	transform: translate3d(0,2500px,0);
}

.icon-list a:nth-child(6) {
	-webkit-transform: translate3d(0,3000px,0);
	transform: translate3d(0,3000px,0);
}

.icon-list a span {
	margin-left: 10px;
	font-weight: 700;
}

/* Shown menu */
.show-menu .menu-wrap {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list,
.show-menu .icon-list a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list a {
	-webkit-transition-duration: 0.9s;
	transition-duration: 0.9s;
}

.show-menu .content::before {
	opacity: 1;
	-webkit-transition: opacity 0.8s;
	transition: opacity 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}