ul.navigation{
	width: 100%;
	padding:0;
}

.navigation li {
	position: relative;
	color: white;
	list-style-type: none;
	border-bottom: 1px solid rgba(255,255,255,.15);
	margin-top: 7px;
    padding-bottom: 7px;
}


.navigation li:before{
	display: block;
	width: 22px;
	height: 22px;
	filter: invert(100%);
	position: absolute;
	top: 20px;
	left: 25px;
}

.navigation li.mu01:before{	content: url(../images/common/icon_mu_dash.svg);}
.navigation li.mu02:before{	content: url(../images/common/icon_mu_info.svg);}
.navigation li.mu03:before{	content: url(../images/common/icon_mu_user.svg);}
.navigation li.mu04:before{	content: url(../images/common/icon_mu_order.svg);}
.navigation li.mu05:before{	content: url(../images/common/icon_mu_benefit.svg);}
.navigation li.mu06:before{	content: url(../images/common/icon_mu_card.svg);}
.navigation li.mu07:before{	content: url(../images/common/icon_mu_pay.svg);}

.navigation > li:after{
	display: block;
	width: 22px;
	height: 22px;
	filter: invert(100%);
	content: url(../images/common/icon_arrow-down.svg);
	position: absolute;
	top: 20px;
	right: 30px;
	transition-duration:0.3s;
}

.navigation li:nth-child(1):after,
.navigation.shop li:nth-child(2):after{display: none;}
.navigation.shop li:nth-child(1):after{	display: block;}
.navigation > li.active:after{	transform: rotate(-180deg);}

.navigation li a {
	display: block;
	font-size: 1.25rem;
	font-weight: 200;
	color: rgba(255,255,255,1);
	text-decoration:none;
	padding: 22px 0 22px 60px;
	transition-duration:0.3s;
}

.navigation li:fitst-child:hover > a {margin-top: 0;}

.navigation > li.active > a {
	width:95%;
	background-color: rgba(255,255,255,.15);
	border-radius: 0 30px 30px 0;
	border: none;
}

ul.navigation > li ul {display:none;}

.navigation li > ul li {
	padding: 0;
	border:none;
	margin: 0 0 10px;
}

.navigation li > ul li a{
	display: inline-block;
	font-size: 1.05rem;
	padding: 5px;
	border-bottom:1px solid rgba(255,255,255,.0);
	transition-duration:0.5s;
}

.navigation li > ul li a:hover,
.navigation li > ul li a.nowMn{text-decoration: underline;}

.navigation li > ul {padding: 20px 55px;}

/* =========================== media-980 ============================= */

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

	ul.navigation{ 
		width:90%;
		margin:0 auto !important;
	}

	.navigation li,
	ul.navigation > li ul {filter: invert(100%);}
	
	.navigation li.active > a {	
		background: none;
		 margin-top: 0;	
	}
	
	.navigation li > ul {padding: 0 55px 30px;}

}