.header-nav{
	margin:10px auto; 
	display: flex;
	justify-content:space-between;
	height: 50px;
	line-height: 50px;
}
.nav-mask{
	display: none;
}
.nav-left{
	display: flex;
}
.nav-left .index a{
	display: flex;
	align-items: center;
}
.nav-left li{
	margin-right: 30px;
	font-size: 16px;
	font-weight: 500;
}
.nav-left img{
	width: 26px;
	height: 26px;
	margin-right: 5px;
}
.nav-right .btn{
	font-size: 16px;
	border: 1px solid #ccc;
	padding: 5px 15px;
	border-radius: 20px;
	color:#666;
}
.nav-right .btn.login-btn{
	color:#fff;
	background-color: #ff7c39;
	border: 1px solid #ff7c39;
}
.nav-right .msg{
	border: none;
	padding: 0;
	border-radius:0;
	position: relative;
}
.nav-right .btn.msg img{
	height: 26px;
}
.nav-right .exit-btn{
	margin-left: 10px;
	min-width: 5rem;
	padding: 5px;
}
.nav-right .btn.exit{
	background-color: #ff7c39;
	border: 1px solid #ff7c39;
	color:#fff;
	font-size: 14px;
	padding:6px 11px;
}
.nav-right .exit-btn img{
    height: 20px;
    vertical-align: sub;
}
.nav-right.mobile-menu{
	display:none;
}
.nav-left .logo{
	margin-right: 20px;
}
.nav-left .logo img{
	height: 100%;
	width: auto;
}
@media only screen and (max-width:768px) {
		#Nav:checked ~ .header-nav{
			transform: translateX(0);
		}
		#Nav:checked ~ .nav-mask{
			opacity: 1;
			visibility: visible;
		}
		.nav-mask{
			display: block;
			position: fixed;
			left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
			opacity: 0;
			visibility: hidden;
			background-color: rgba(0,0,0,0.5);
			z-index: 99;
			transition: 0.2s ease-out;
		}
		.header-nav{
			margin:0; 
			line-height: normal;
		    position: fixed;
		    z-index: 100;
		    top: 0;
		    right: 0;
		    width: 180px;
		    height: 100%;
		    background-color: #ffffff;
		    flex-direction:column;
		    transform: translateX(100%);
		    transition: 0.2s ease-out;
		    justify-content:flex-start;
		}

		.nav-left{
			display: block;
			width: 100%;
			flex-wrap: wrap;
			justify-content:space-between;
			margin:50px 0px 10px 0px;
		}
		.nav-left li{
			width: 100%;
			margin:0;
			margin-bottom: 10px;
			font-size: 16px;
			font-weight: 500;
			text-align: center;
		}
		
		.nav-left li a{
			display: block;
		    width: 80%;
		    margin: 0 auto;
		    padding: 10px 0;
		    position: relative;
		}
		.nav-left li.thispage a{
			color: #ff6602;
		}
		.nav-left li.thispage a:after{
			content: '';
		    width: 100px;
		    background: #ff6602;
		    height: 2px;
		    display: inline-block;
		    position: absolute;
		    bottom: 0px;
		    left: calc(50% - 50px);
		    border-radius: 2px;

		}
		.nav-left .index a{
			justify-content:center;
		}
		.nav-left img{
			width: 16px;
			height: 16px;
			margin-right: 0px;
		}
		.nav-right{
			width: 100%;
			padding:0px;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			align-items: center;
			flex-flow: column;

		}
		.nav-right .btn{
			font-size: 14px;
			margin:0;
			margin-top: 10px;

		}
		.nav-right .exit-btn{
			width: 50%;
			text-align: center;
		}
		.nav-right .btn.exit{
			padding:5px;
		}
		.mobile-menu {
			display: block;
			width: 30px;
			height: 30px;
			position: absolute;
			z-index: 999;
			top: 15px;
			right: 15px;
			transform: rotate(0deg);
			transition: .5s ease-in-out;
		}
		.mobile-menu span {
			display: block;
			position: absolute;
			height: 4px;
			width: 100%;
			background: #ff6602;
			border-radius: 10px;
			opacity: 1;
			left: 0;
			transform: rotate(0deg);
			transition: .25s ease-in-out;
		}
		.mobile-menu span:nth-child(1) {
			top: 0px;
		}
		.mobile-menu span:nth-child(2) {
			top: 10px;
		}
		.mobile-menu span:nth-child(3) {
			top: 20px;
		}
		#Nav:checked ~ .mobile-menu span:nth-child(1) {
			top: 10px;
			transform: rotate(135deg);
		}
		#Nav:checked ~ .mobile-menu span:nth-child(2) {
			opacity: 0;
			left: -60%;
		}
		#Nav:checked ~ .mobile-menu span:nth-child(3) {
			top: 10px;
			transform: rotate(-135deg);
		}
		
}