.header_style2{
	#meganav{
		display: table;
		margin: 0 auto;
		float: none;
		padding-left: 50px;
		>li {   
	        >a{
	            color: #222;
	            padding: 19px 50px 19px 0;        
	        }                
	        &.active,
	        &:hover{
	        	> a{
	        		color: @theme-color;       		
	        	}
	        }
			> .dropdown-menu{
				top: 60px;
			}	        
		}		
	}
}

.header_style3{
	#meganav{
		>li {   
	        >a{
	            color: #fff;
	            padding: 10px 50px 10px 0;        
	        }                
			> .dropdown-menu{
			}	        
		}		
	}
}

.cms-index-index{      
    &.home_style3{
        .menu-nav-ver .menu-nav-list{
        	display: block;
        	box-shadow: none;
        }
    }  
}

/*css menu ver*/
.menu-nav-ver{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 270px;
	&:before{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #222;
		opacity: 0.1;
	} 
	.menu-nav-ver-title{
		color: #fff;
		padding: 15px 20px;
		text-transform: uppercase;
		position: relative;
		z-index: 1;
		line-height: 100%;
		background: @theme-color;
		height: 50px;
		i{
			margin-right: 10px;
			font-size: 17px;
			float: left;
		}
		span{
			font-size: 114.29%;
			font-weight: bold;
			float: left;
			margin-top: 2px;
		}
	}
	.menu-nav-list{
		position: absolute;
		left: 0;
		top: 50px;
		padding: 0;
		float: left;
		width: 100%;
		z-index: 9;	
		background: #fff;
		box-shadow: 0 1px 3px #ccc;
		display: none;
		> li.level-1{
			float: left;
			width: 100%;	
			padding: 0 20px;	
			position: relative;	
			> a{
				display: block;
				border-bottom: 1px solid #f3f3f3;
				position: relative;		
				color: #666;
				font-size: 100%;			
				.menu-title{
					padding: 8px 0 9px;
					display: inline-block;
				}
			}
	        &.parent{
	            > a{
	                > span:first-child{
	                	width: 100%;
	                    &:after{
	                        content: "\f105";
	                        font-family:FontAwesome;
	                        padding-left: 6px;
	                        display: inline-block;
	                        padding-right: 3px;
	                        float: right;
	                        font-size: 14px;
	                    }
	                }
	            }
	        }			
			&:hover{
				> a{
					color: @theme-color;
				}
			}

			&:hover>a,
			&:focus>a,
			>a:hover,
			>a:focus{
				color: @theme-color;
			}
			&:last-child{
				>a{
					border: none;
				}
			}
			.dropdown-menu{
				left: 100%;
				top: 0;
				border-radius: 0;
				margin: 0;
				box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
				border: none;
				min-width: 200px;
			}	
			&:hover>.dropdown-menu,
			>a:hover+.dropdown-menu{
				display: block;
				.opacity(1);
				visibility: visible;
			}									
		}
	}
	&:hover{
		cursor: pointer;
		.menu-nav-list{
			display: block;
		}
	}
}

.menu-nav-ver,
#meganav{
	float: left;
	>li {
	    float: left;
	    position: relative;	    
        >a{
            display: block;
            position: relative;
            font-size: 100%;
            text-transform: uppercase;
            font-weight: bold;
            color: #fff;
            padding: 14px 50px 14px 0;
            &:before{
				position: absolute;
				content: "";
				top: 100%;
				left: 0;
				width: 100%;
				height: 50px;
				background: transparent;
            }   
            >span{
            	position: relative;
            	z-index: 1;
            }         
        }
        &.parent{
            > a{
                > span:first-child{
                    &:after{
                        content: "\f107";
                        font-family:FontAwesome;
                        padding-left: 6px;
                        display: inline-block;
                        padding-right: 3px;
                        float: right;
                        font-size: 14px;
                        font-weight: normal;
                        display: none;
                    }
                }
            }
        }
        &:before{
        	position: absolute;
            content: "";
            left: 0;
            top: 100%;
            width: 100%;
            height: 100%;
    		background: transparent;
			opacity: 0.1;
			display: none;
        }                
        &.active,
        &:hover{
        	> a{
        		color: @theme-color;       		
        	}
        }

		> .dropdown-menu{
			display: none;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
			top: 50px;
			display: block;
			margin: 0;
			padding: 10px 20px;
			position: absolute;
			z-index: 1050;
			visibility: hidden;
			.opacity(1);
		    font-size: 100%;
		    border-radius: 0;
		    border: none;
		    border-top: 2px solid @theme-color;
		}

		&:hover>.dropdown-menu,
		>a:hover+.dropdown-menu{
			display: block;
			.opacity(1);
			visibility: visible;
		}
		> ul{
			padding-left: 0;
		}

		&.dropdown-full{
			position: static;

			> .dropdown-menu{
				position: absolute;
				left: 0;
				right: 0;
			}
		}
	}	

	.level-2,	
	.level-3{		
		position: relative;	
		>a{
			padding: 4px 0;
			float: left;
			width: 100%;
		}		
		&.parent{
			&:before{
				position: absolute;
				top: 0;
				right: -30px;
				content: "";
				height: 100%;
				width: 30px;
				background: transparent;
			}			
			&:after{
				position: absolute;
				content: "\f105";
				font-family: FontAwesome;
				top: 5px;
				right: 0;
				font-size: 14px;
			}
			> a{
				display: block;
				font-size: 100%;	
				font-weight: normal;
				text-transform: none;
				font-size: 100%;		
			}			
			.dropdown-menu{
				position: absolute;
				border: none;
				top: 0;
				left: 100%;
				margin-left: 15px;
				display: none;
				border-radius: 0;
				padding: 10px 20px;
				min-width: 200px;
				box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
				>ul{
					display: inline-block;
					width: 100%;
					li{						
						a {
							display: block;
						}
					}
				}
			}
			&:hover{
				> .dropdown-menu{
					display: block;
				}
				&:after{
					color: @theme-color;
				}
			}
			
		}
	}

	.static-width,
	.dropdown-full{
		> .dropdown-menu{
			padding: 20px 0 20px 30px;
		}
		.level-2,	
		.level-3{			
			>.dropdown-menu{
				display: block;
				position: static;
				border: 0;
				padding: 0;
				margin: 0;
				max-width: 100%;
				min-width: 100px;
				font-size: 100%;
				.clearfix();
			}		
			&.parent{
				&:after{
					display: none;
				}
				> a{
					display: block;
					font-size: 100%;	
					font-weight: normal;
					text-transform: uppercase;
					font-size: 100%;
					margin-bottom: 10px;
					padding: 0;	
					border-bottom: 1px solid @border-color;		
					padding-bottom: 15px;	
					width: 100%;	
					height: 36px;
					position: relative;
					&:before{
						position: absolute;
						content: "";
						right: 0;
						top: 0;
						height: 40px;
						width: 30px;
						background: #fff;
					} 	
					>span.menu-title{
						float: left;
					}
					>span.menu-icon{
						font-size: 12px;
						font-weight: normal;
						text-transform: uppercase;
						color: #fff;												
						display: inline-block;
						width: 50px;
						height: 20px;
						>i{
							float: left;
							width: 100%;
							height: 100%;
							border-radius: 3px;
							font-style: normal;
							text-align: center;
							line-height: 100%;
							padding: 4px 0;
							margin-left: 10px;
						}
						.hot{
							background: #f05656;
							&:before{
								content: "hot";
							} 
						}
						.sale{
							background: #1bbc9b;
							&:before{
								content: "sale";
							} 
						}
					}							
				}				
				.dropdown-menu{
					float: none;
					box-shadow: none;

					>ul{
						display: inline-block;
						width: 100%;
						li{						
							a {
								display: block;
							}
						}
					}
					.dropdown-content{
						img{
							max-width: 100%;
							padding-right: 30px;
						}
										
					}
				}
				
			}
		}

		.level-3{
			>.dropdown-menu{
				>ul{
					>li{
						> a{
							padding: 4px 0;
							&:hover{
								color: @theme-color;
							}
						}
					}
				}
			}		
		}

		.mcols-12 > .mcol-9{
			&.parent{
				> a{
					display: none;
				}
			}
		}
	}


	.level-3{}

	.mcols-2,
	.mcols-3,
	.mcols-4,
	.mcols-5,
	.mcols-6,
	.mcols-7,
	.mcols-8,
	.mcols-9,
	.mcols-10,
	.mcols-11,
	.mcols-12{
		display: block;
		.clearfix();
		
		> li{
			float: left;
			width: 100%;
		}
	}



	//css level 3
	.mcol-3 .mcol-1{ width: 100%/3; float: left;}
	.mcol-3 .mcol-2{ width: 200%/3; float: left;}
	.mcol-3 .mcol-3{ width: 100%; float: left;}
	
	.mcol-4 .mcol-1{ width: 25%; float: left;}
	.mcol-4 .mcol-2{ width: 50%; float: left;}
	.mcol-4 .mcol-3{ width: 75%; float: left;}
	.mcol-4 .mcol-4{ width: 100%; float: left;}

	
	.mcols-2 > .mcol-1{ width: 50%; }
	.mcols-2 > .mcol-2{ width: 100%; }
	
	.mcols-3 > .mcol-1{ width: 100%/3; }
	.mcols-3 > .mcol-2{ width: 200%/3; }
	.mcols-3 > .mcol-3{ width: 100%; }

	.mcols-4 > .mcol-1{ width: 25%; }
	.mcols-4 > .mcol-2{ width: 50%; }
	.mcols-4 > .mcol-3{ width: 75%; }
	.mcols-4 > .mcol-4{ width: 100%; }
	
	.mcols-5 > .mcol-1{ width: 20%; }
	.mcols-5 > .mcol-2{ width: 40%; }
	.mcols-5 > .mcol-3{ width: 60%; }
	.mcols-5 > .mcol-4{ width: 80%; }
	.mcols-5 > .mcol-5{ width: 100%; }
	
	.mcols-6 > .mcol-1{ width: 100%/6; }
	.mcols-6 > .mcol-2{ width: 200%/6; }
	.mcols-6 > .mcol-3{ width: 300%/6; }
	.mcols-6 > .mcol-4{ width: 400%/6; }
	.mcols-6 > .mcol-5{ width: 500%/6; }
	.mcols-6 > .mcol-6{ width: 100%; }
	
	.mcols-7 > .mcol-1{ width: 100%/7; }
	.mcols-7 > .mcol-2{ width: 200%/7; }
	.mcols-7 > .mcol-3{ width: 300%/7; }
	.mcols-7 > .mcol-4{ width: 400%/7; }
	.mcols-7 > .mcol-5{ width: 500%/7; }
	.mcols-7 > .mcol-6{ width: 600%/7; }
	.mcols-7 > .mcol-7{ width: 100%; }
	
	.mcols-8 > .mcol-1{ width: 100%/8; }
	.mcols-8 > .mcol-2{ width: 25%; }
	.mcols-8 > .mcol-3{ width: 300%/8; }
	.mcols-8 > .mcol-4{ width: 50%; }
	.mcols-8 > .mcol-5{ width: 500%/8; }
	.mcols-8 > .mcol-6{ width: 75%; }
	.mcols-8 > .mcol-7{ width: 700%/8; }
	.mcols-8 > .mcol-8{ width: 100%; }
	
	.mcols-9 > .mcol-1{ width: 100%/9; }
	.mcols-9 > .mcol-2{ width: 200%/9; }
	.mcols-9 > .mcol-3{ width: 300%/9; }
	.mcols-9 > .mcol-4{ width: 400%/9; }
	.mcols-9 > .mcol-5{ width: 500%/9; }
	.mcols-9 > .mcol-6{ width: 600%/9; }
	.mcols-9 > .mcol-7{ width: 700%/9; }
	.mcols-9 > .mcol-8{ width: 800%/9; }
	.mcols-9 > .mcol-9{ width: 100%; }
	
	.mcols-10 > .mcol-1{ width: 10%; }
	.mcols-10 > .mcol-2{ width: 20%; }
	.mcols-10 > .mcol-3{ width: 30%; }
	.mcols-10 > .mcol-4{ width: 40%; }
	.mcols-10 > .mcol-5{ width: 50%; }
	.mcols-10 > .mcol-6{ width: 60%; }
	.mcols-10 > .mcol-7{ width: 70%; }
	.mcols-10 > .mcol-8{ width: 80%; }
	.mcols-10 > .mcol-9{ width: 90%; }
	.mcols-10 > .mcol-10{ width: 100%; }
	
	.mcols-11 > .mcol-1{ width: 100%/11; }
	.mcols-11 > .mcol-2{ width: 200%/11; }
	.mcols-11 > .mcol-3{ width: 300%/11; }
	.mcols-11 > .mcol-4{ width: 400%/11; }
	.mcols-11 > .mcol-5{ width: 500%/11; }
	.mcols-11 > .mcol-6{ width: 600%/11; }
	.mcols-11 > .mcol-7{ width: 700%/11; }
	.mcols-11 > .mcol-8{ width: 800%/11; }
	.mcols-11 > .mcol-9{ width: 900%/11; }
	.mcols-11 > .mcol-10{ width: 1000%/11; }
	.mcols-11 > .mcol-11{ width: 100%; }
	
	.mcols-12 > .mcol-1{ width: 100%/12; }
	.mcols-12 > .mcol-2{ width: 200%/12; }
	.mcols-12 > .mcol-3{ width: 300%/12; }
	.mcols-12 > .mcol-4{ width: 400%/12; }
	.mcols-12 > .mcol-5{ width: 500%/12; }
	.mcols-12 > .mcol-6{ width: 600%/12; }
	.mcols-12 > .mcol-7{ width: 700%/12; }
	.mcols-12 > .mcol-8{ width: 800%/12; }
	.mcols-12 > .mcol-9{ width: 900%/12; }
	.mcols-12 > .mcol-10{ width: 1000%/12; }
	.mcols-12 > .mcol-11{ width: 1100%/12; }
	.mcols-12 > .mcol-12{ width: 100%; }		
}