.menu-btn {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    z-index: 3;
}

.menu-btn .menu-btn__inner {
	content: 'MENU';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	width: 50px;
	height: 50px;
	cursor: pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.menu-btn .menu-btn__inner:before {
	content: 'MENU';
	position: absolute;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	left: -50px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: right;
	letter-spacing: 2px;
	font-size: 16px;
	font-family: Quattrocento Sans, sans-serif;
	color: #000;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	visibility: hidden;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.menu-btn .menu-btn__inner:hover:before {
	-webkit-transform: translateX(-10px);
	transform: translateX(-10px);
	visibility: visible;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.menu-btn .menu-btn__inner .menu-btn--bar1,
.menu-btn .menu-btn__inner .menu-btn--bar2 {
	position: absolute;
	top: 0;
	width: 15px;
	height: 2px;
	display: block;
	background: #fff;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.menu-btn .menu-btn__inner .menu-btn--bar1:before,
.menu-btn .menu-btn__inner .menu-btn--bar1:after,
.menu-btn .menu-btn__inner .menu-btn--bar2:before,
.menu-btn .menu-btn__inner .menu-btn--bar2:after {
	content: '';
	position: absolute;
	top: 9px;
	left: 0;
	width: 15px;
	height: 2px;
	background: #fff;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

.menu-btn .menu-btn__inner .menu-btn--bar1:after,
.menu-btn .menu-btn__inner .menu-btn--bar2:after {
	top: 18px
}

.menu-btn .menu-btn__inner .menu-btn--bar1 {
	left: 0
}

.menu-btn .menu-btn__inner .menu-btn--bar2 {
	right: 0
}

.menu-btn .menu-btn__inner:hover .menu-btn--bar1 {
	-webkit-transform: translateX(-3px);
	transform: translateX(-3px)
}

.menu-btn .menu-btn__inner:hover .menu-btn--bar2 {
	-webkit-transform: translateX(3px);
	transform: translateX(3px)
}

.menu-btn .menu-btn__inner:hover .menu-btn--bar1,
.menu-btn .menu-btn__inner:hover .menu-btn--bar2,
.menu-btn .menu-btn__inner:hover .menu-btn--bar1:after,
.menu-btn .menu-btn__inner:hover .menu-btn--bar1:before,
.menu-btn .menu-btn__inner:hover .menu-btn--bar2:after,
.menu-btn .menu-btn__inner:hover .menu-btn--bar2:before {
	background: #888
}

.menu-btn.is-prepend {
	z-index: 6;
	background:none;
	
}

.menu-btn.is-prepend .menu-btn__inner {
	-webkit-animation: btn-height 1s ease forwards;
	animation: btn-height 1s ease forwards;
}

.menu-btn.is-prepend .menu-btn__inner:before {
	content: '×CLOSE';
	color: #888;
	font-size:18px;
	visibility: visible;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.menu-btn.is-prepend .menu-btn__inner:hover:before {
	color: #fff;
	
}

.menu-btn.is-prepend .menu-btn__inner .menu-btn--bar1 {
	-webkit-transform: none;
	transform: none;
	-webkit-animation: bar1-top 1s ease forwards;
	animation: bar1-top 1s ease forwards
}

.menu-btn.is-prepend .menu-btn__inner .menu-btn--bar1:before {
	-webkit-animation: bar1-mid 1s ease forwards;
	animation: bar1-mid 1s ease forwards
}

.menu-btn.is-prepend .menu-btn__inner .menu-btn--bar1:after {
	-webkit-animation: bar1-bot 1s ease forwards;
	animation: bar1-bot 1s ease forwards
}

.menu-btn.is-prepend .menu-btn__inner .menu-btn--bar2 {
	-webkit-transform: none;
	transform: none;
	-webkit-animation: bar2-top 1s ease forwards;
	animation: bar2-top 1s ease forwards
}

.menu-btn.is-prepend .menu-btn__inner .menu-btn--bar2:before {
	-webkit-animation: bar2-mid 1s ease forwards;
	animation: bar2-mid 1s ease forwards
}

.menu-btn.is-prepend .menu-btn__inner .menu-btn--bar2:after {
	-webkit-animation: bar2-bot 1s ease forwards;
	animation: bar2-bot 1s ease forwards
}

@-webkit-keyframes bar1-top {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 30px
	}
	100% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(45deg);
		transform: translate3d(0, 14px, 0) rotate(45deg);
		width: 30px
	}
}

@keyframes bar1-top {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 30px
	}
	100% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(45deg);
		transform: translate3d(0, 14px, 0) rotate(45deg);
		width: 30px
	}
}

@-webkit-keyframes bar1-mid {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}

@keyframes bar1-mid {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}

@-webkit-keyframes bar1-bot {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}

@keyframes bar1-bot {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}

@-webkit-keyframes bar2-top {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 30px
	}
	100% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(-45deg);
		transform: translate3d(0, 14px, 0) rotate(-45deg);
		width: 30px
	}
}

@keyframes bar2-top {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(0);
		transform: translate3d(0, 14px, 0) rotate(0);
		width: 30px
	}
	100% {
		-webkit-transform: translate3d(0, 14px, 0) rotate(-45deg);
		transform: translate3d(0, 14px, 0) rotate(-45deg);
		width: 30px
	}
}

@-webkit-keyframes bar2-mid {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}

@keyframes bar2-mid {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -9px, 0) rotate(0);
		transform: translate3d(0, -9px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}

@-webkit-keyframes bar2-bot {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}

@keyframes bar2-bot {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0);
		transform: translate3d(0, 0, 0) rotate(0);
		width: 15px
	}
	50% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	75% {
		-webkit-transform: translate3d(0, -18px, 0) rotate(0);
		transform: translate3d(0, -18px, 0) rotate(0);
		width: 15px
	}
	100% {
		visibility: hidden;
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
}



.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	-webkit-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-transform: scale(.9);
	transform: scale(.9);
	visibility: hidden;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	z-index: 5
}

.modal.is-fadeIn {
	-webkit-transform: scale(1);
	transform: scale(1);
	visibility: visible;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.modal.is-fadeOut {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	visibility: hidden;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.modal .modal__inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	width: 100%;
	height: 100%;
	cursor: auto
}

.modal .modal__inner .modal__list {
	height: 100%
}

.modal .modal__inner .modal__list:after {
	content: "";
	clear: both;
	display: block
}

.modal .modal__inner .modal__list li {
	float: left;
	display: block;
	box-sizing: border-box;
	width: 25%;
	height: 37%;
	border-bottom: 1px solid #3a393b
}

.modal .modal__inner .modal__list li:nth-child(4n+2) {
	border-left: 1px solid #3a393b;
	border-right: 1px solid #3a393b
}

.modal .modal__inner .modal__list li:nth-child(4n) {
	border-left: 1px solid #3a393b
}

.modal .modal__inner .modal__list li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	font-family:"微软雅黑";
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 5px
}


.modal .modal__inner .modal__list li a span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	height: 20px;
	margin: auto;
	line-height: 20px;
	font-family:AVENIR-ROMAN;
}

.modal .modal__inner .modal__list li.cur a {
	pointer-events: none;
	background: #000
}

.modal .modal__inner .modal__sns {
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	width: 160px;
	margin: auto
}
#js-modal-li li a em{font-style:normal;font-weight:normal;}

/*导航代码修改*/
.modal__list li a .js-modal-i{position: absolute;top:0;bottom: 0;left: 0;right: 0; margin-top:-20px;display: block;margin: auto;height:20px;line-height:20px;}
.modal__list li a .js-modal-i p{font-size:14px;}
.modal__list li a .js-modal-i i{font-size:12px;color:#b5b5b5;display:block;}
.modal__list li a .js-modal-i em{display:inline-block;}
.modal .modal__inner .modal__list li a .js-modal-i{display:none;}
.modal .modal__inner .modal__list li a .js-modal-i i{-webkit-transition: all .5s ease;transition: all .5s ease;font-family:"微软雅黑";text-transform: uppercase;letter-spacing: 5px}
.modal .modal__inner .modal__list li a .js-modal-i i:hover{letter-spacing: 8px;}
.modal .modal__inner .modal__list li a:hover .js-modal-i{display:block}
.modal .modal__inner .modal__list li a:hover .js-modal-span{display:none;}

.icons__inner.inner1{background:url(../../images/icon_png.png) no-repeat -22px -6px;}
.icons__inner.inner2{background:url(../../images/icon_png.png) no-repeat -58px -6px;}
.icons__inner.inner3{background:url(../../images/icon_png.png) no-repeat -99px -6px;}
.icons__inner.inner1:hover{background:url(../../images/icon_png.png) no-repeat -22px -47px;}
.icons__inner.inner2:hover{background:url(../../images/icon_png.png) no-repeat -58px -47px;;}
.icons__inner.inner3:hover{background:url(../../images/icon_png.png) no-repeat -99px -47px;;}

.modal__sm{position:relative;left:0;bottom:20%;right:0;text-align:center;margin:auto;}
.modal__sm ul{overflow: hidden;position: absolute;top: -30px;left: 0;right: 0;margin: auto;}
.modal__sm ul li{width:123px;float:left;border-right:1px solid #bcbcbc;font-size:14px;}
.modal__sm ul li a{color:#bcbcbc;display:block;}
.modal__sm ul li._left{border:none;}
.modal__sm p{color:#bcbcbc;font-size:14px;}