/*

TABLE OF CONTENTS

00 PAGE STYLING (REMOVABLE)
01 MENU BAR
   1. Mega Menu Bar
   2. Mega Menu Trigger Button
   3. Mega Menu Carousel Buttons
02 DROP DOWN CONTAINER
03 DROP DOWN SCROLLBARS
04 COLUMNS GRID
05 CONTENT & TYPOGRAPHY
   1. Basic Typography 
   2. Lists
   3. Paragraphs with Icons 
   4. Paragraphs with borders 
   5. Tables
   6. Inline Images 
06 DROP DOWN TABS
07 CONTACT FORM
08 MOBILE DEVICES
09 BRAND SORT

*/



/*  _______________________________________

	00 PAGE STYLING (REMOVABLE)
    _______________________________________  */



/*  _______________________________________

    01 MENU BAR
    _______________________________________  */




/* 1. Mega Menu Bar */

.megamenu_container {

	position:relative;
	z-index:2;
}

.megamenu_fixed {

	height:44px;
	position:fixed;
	top:0;
	z-index:2;	
}

.megamenu {
	font-size:11px;
	list-style:none;
	padding-left:11px;
	margin:0;
	background-color:#000;
	border-right:1px solid #404040;
	float: left;

}
	.megamenu > li {
		display:inline;
		border:none;
		margin:10px 1px;
		padding: 10px 7px;
		cursor:pointer;

		-webkit-transition: background-color 0.3s ease-out;
		-moz-transition: background-color 0.3s ease-out;
		-o-transition: background-color 0.3s ease-out;
		-ms-transition: background-color 0.3s ease-out;
		transition: background-color 0.3s ease-out;
	}

		.megamenu > li:hover {
			background-color:#E8B34F;
			color : #fff!important;
			
		}



		.megamenu li.noactive {
			background:none;
		}

		/*.megamenu_container .megamenu > li:first-child {
			-webkit-border-radius:3px 0 0 3px;
			-moz-border-radius:3px 0 0 3px;
			border-radius:3px 0 0 3px;	
			border-left:none;
		} */

		/*.megamenu > li:last-child {
			-webkit-box-shadow: 1px 0 0 #242424;
			-moz-box-shadow: 1px 0 0 #242424;
			-o-box-shadow: 1px 0 0 #242424;
			box-shadow: 1px 0 0 #242424;
		}*/


		.megamenu > li a {
			display: block;
			text-decoration:none;
			font-size : 12px;
			color:#747474;
			padding: 0 7px;
			text-decoration: none;
			/*transition: background 0.4s, color 0.4s;
			-o-transition: background 0.4s, color 0.4s;
			-ms-transition: background 0.4s, color 0.4s;
			-moz-transition: background 0.4s, color 0.4s;
			-webkit-transition: background 0.4s, color 0.4s;*/
		}
			.megamenu > li a:hover,.megamenu > li.current > a{
			 background: #E8B34F;
			 color : #fff;

			}
			

		.megamenu > li a:focus {
			outline:none;
			color : #fff;

		}
		.megamenu > li .drop {
			line-height:45px;
			text-transform:uppercase;
			outline:0;
			text-decoration:none;

		}

		.megamenu > li .drop:hover {
			color:#fff;
			}

		.megamenu > li .drop {
			margin : 0 auto;
			padding : 0 6px;
		}

		.megamenu > li .drop:hover {
			cursor:pointer;
		}
		.megamenu li.megamenu_button {
			display: none;
			cursor: pointer;
			-webkit-transition: none;
			-moz-transition: none;
			-o-transition: none;
			-ms-transition: none;
			transition: none;
			background-color:transparent;
		}
		.megamenu li.megamenu_button_active {
			background-color:#000000;
			-webkit-border-radius:3px 3px 0 0;
			-moz-border-radius:3px 3px 0 0;
			border-radius:3px 3px 0 0;	
		}
		.megamenu li.megamenu_button span {
			background-image:url("../img/down.png");
			background-repeat: no-repeat;
			background-position:98% 17px;
			padding:12px 20px 12px 0;
			color:#ffffff;
			text-shadow:1px 1px 1px #000000;
		}
		.megamenu li.megamenu_button_active span {
			background-image:url("../img/up.png");
			background-position:98% 16px;
		}

/* 2. Mega Menu Trigger Button */

/* 3. Mega Menu Carousel Buttons */

/*  _______________________________________

    02 DROP DOWN CONTAINER
    _______________________________________  */


.megamenu > li .megamenu_fullwidth div:after{
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 10px;
	background: transparent;	
}
.megamenu > li .megamenu_fullwidth div:before{
	content: '';
	position: absolute;
	bottom: 100%;
	left: 100px;
	/*border-right: 5px solid transparent;
	border-bottom: 5px solid rgba(145,145,145,0.5);
	border-left: 5px solid transparent;*/
}




.megamenu > li .megamenu_fullwidth {
	position:absolute;
	top:46px;
	left:-9999em;
	z-index:9998;
	float:left;
	width: 1168px;
	margin:0 0 40px 0px;
	padding:18px 0 18px 1px;
	background:#fff;
	/*box-shadow: 0 0 4px rgba(0,0,0,.3);
	 opacity: 1;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-o-transition: -o-transform 0.4s, opacity 0.4s;
	-ms-transition: -ms-transform 0.4s, opacity 0.4s;
	-moz-transition: -moz-transform 0.4s, opacity 0.4s;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s; */
}

.megamenu > li:hover .megamenu_fullwidth {
	left:0;
}





/* megamenu_fullwidth Category */
.megamenu  .megamenu_fullwidth1:after{
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 10px;
	background: transparent;	
}
.megamenu  .megamenu_fullwidth1:before{
	content: '';
	position: absolute;
	bottom: 100%;
	left: 92px;
	border-right: 5px solid transparent;
	border-bottom: 5px solid rgba(145,145,145,0.5);
	border-left: 5px solid transparent; 
}




.megamenu > li .megamenu_fullwidth1 {
	position:absolute;
	top:46px;
	left:-9999em;
	z-index:9998;
	float:left;
	width: 1168px;
	border:1px solid  #404040;
	background:#000;
	opacity: 1;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-o-transition: -o-transform 0.4s, opacity 0.4s;
	-ms-transition: -ms-transform 0.4s, opacity 0.4s;
	-moz-transition: -moz-transform 0.4s, opacity 0.4s;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s; */
}

.megamenu > li:hover .megamenu_fullwidth1 {
	left:0;
}




/*  _______________________________________

    03 DROP DOWN SCROLLBARS
    _______________________________________  */




.megamenu > li .megamenu_scrollbars {
	width:1168px;
	height:600px;
	border: 1px solid #ededed;
	margin:0;
	padding:0;
	background:#fff;
	 opacity: 1;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-o-transition: -o-transform 0.2s, opacity 0.2s;
	-ms-transition: -ms-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

	

}
.megamenu_scrollbars .megamenu_scroller_container {
	position : relative;
	width : 100%;
	height : 100%;
	overflow : hidden;
	
}

.megamenu > li .megamenu_scrollbars:after{
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 10px;
	background: transparent;	
}
.megamenu > li .megamenu_scrollbars:before{
	content: '';
	position: absolute;
	bottom: 100%;
	left: 172px;
	border-right: 5px solid transparent;
	border-bottom: 5px solid rgba(145,145,145,0.5);
	border-left: 5px solid transparent;
}



.megamenu_scrollbars .megamenu_scroller_container .megamenu_scroll_area {
	position : absolute;
	overflow : scroll;
	overflow-x : hidden;
	top : -60px;
	right : 0;
	bottom : 0;
	left : 0;
}



/*  _______________________________________

    04 COLUMNS GRID
    _______________________________________  */




.megamenu .col_1,
.megamenu .col_2,
.megamenu .col_3,
.megamenu .col_4,
.megamenu .col_5,
.megamenu .col_6,
.megamenu .col_7,
.megamenu .col_8,
.megamenu .col_9,
.megamenu .col_10,
.megamenu .col_11,
.megamenu .col_12 {
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
}

.megamenu .col_126 {
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
}

.megamenu .col_135 {
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 12px;
	height : 190px;
}


.megamenu .col_126 {width:126px;}
.megamenu .col_85 {width:113px;}
.megamenu .col_1 {width:50px;}
.megamenu .col_2 {width:130px;}
.megamenu .col_3 {width:210px;}
.megamenu .col_4 {width:290px;}
.megamenu .col_5 {width:370px;}
.megamenu .col_6 {width:450px;}
.megamenu .col_7 {width:530px;}
.megamenu .col_8 {width:610px;}
.megamenu .col_9 {width:690px;}
.megamenu .col_10 {width:770px;}
.megamenu .col_11 {width:850px;}
.megamenu .col_12 {width:930px;}

.megamenu .col_nomargins {
	margin:0;
}
.megamenu .col_nomargin_left {
	margin-left:0;
}
.megamenu .col_nomargin_right {
	margin-right:0;
}

.megamenu .clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 18px;
}




/*  _______________________________________

    05 CONTENT & TYPOGRAPHY
    _______________________________________  */




/* 1. Basic Typography */

.megamenu .category_bg {
	text-align : left;
	border-bottom:1px dotted #838383;
	text-shadow: none;
	font-weight : bold;
	color: #252525;
	display : inline-block;
	width : 135px;
	}



.megamenu .black_bg {
	background-color:#000000;
	padding:4px 6px 4px 6px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;	
}
.megamenu p, 
.megamenu h1, 
.megamenu h2, 
.megamenu h3, 
.megamenu h4, 
.megamenu h5, 
.megamenu h6 {
	padding:0;
	margin:0;
	font-weight: normal;
	color:#ffffff;
	text-shadow:1px 1px 1px #000000;
	margin-bottom:10px;
}
.megamenu p {
	font-size:12px;
}


.megamenu h1 {
	font-size:32px;
}
.megamenu h2 {
	font-size:28px;
}
.megamenu h3 {
	font-size:24px;
}
.megamenu h4 {
	font-size:18px;
}
.megamenu h5 {
	font-size:16px;
}
.megamenu h6 {
	font-size:14px;
	text-transform:uppercase;
}

/* 2. Lists */

.megamenu > li ul,
.megamenu > li ol {
	padding:0 0 0 18px;
	margin:0 0 18px 0;
}
.megamenu > li ul {
	list-style:disc;
}
.megamenu > li ol {
	list-style:decimal;
}
.megamenu > li ul li,
.megamenu > li ol li {
	font-size:12px;
	line-height:22px;
	position:relative;
	color:#dddddd;
}

/* 3. Paragraphs with Icons */

.megamenu .calendar, 
.megamenu .note, 
.megamenu .help, 
.megamenu .delete, 
.megamenu .favorite, 
.megamenu .lock, 
.megamenu .archive, 
.megamenu .briefcase, 
.megamenu .search, 
.megamenu .user {
	padding-left:36px; 
	margin-bottom:18px;
}
.megamenu .calendar {background:url("../img/icons/calendar.png") no-repeat 0 4px}
.megamenu .note {background:url("../img/icons/note.png") no-repeat 0 5px}
.megamenu .archive {background:url("../img/icons/archive.png") no-repeat 0 4px}
.megamenu .search {background:url("../img/icons/search.png") no-repeat 0 4px}
.megamenu .help {background:url("../img/icons/help.png") no-repeat 0 4px}
.megamenu .delete {background:url("../img/icons/delete.png") no-repeat 0 5px}
.megamenu .favorite {background:url("../img/icons/favorite.png") no-repeat 0 4px}
.megamenu .lock {background:url("../img/icons/lock.png") no-repeat 0 4px}
.megamenu .briefcase {background:url("../img/icons/briefcase.png") no-repeat 0 5px}
.megamenu .user {background:url("../img/icons/user.png") no-repeat 0 4px}

/* 4. Paragraphs with borders */

.megamenu .dark, 
.megamenu .brown, 
.megamenu .yellow, 
.megamenu .red, 
.megamenu .blue, 
.megamenu .green {
	padding-left:15px; 
	color:#cccccc; 
	margin-bottom:18px;
}
.megamenu .dark {border-left:#3B3B3B solid 7px}
.megamenu .brown {border-left:#8D8767 solid 7px}
.megamenu .yellow {border-left:#DBA742 solid 7px}
.megamenu .red {border-left:#C05D48 solid 7px}
.megamenu .blue {border-left:#52878B solid 7px}
.megamenu .green {border-left:#B0BD85 solid 7px}
.megamenu .table_light, 
.megamenu .table_dark {
	width:100%;
	padding:0;
	margin:6px 0 18px 0;
	font-size:12px;
}

/* 5. Tables */

.megamenu table {
	border-spacing: 0;
	border-collapse: collapse;
}
.megamenu .table_light th, 
.megamenu .table_dark th {
	text-align:left; 
	padding:12px 9px 12px 9px; 
	font-weight:bold; 
	font-size:12px;
}
.megamenu .table_light {
	border:1px solid #cbcbcb;
	border-bottom:none;
}
	.megamenu .table_light th {
		color:#3A3A3A; 
		border-bottom:1px solid #cbcbcb; 
		background:#F5F5F5;
	}
	.megamenu .table_light td {
		border-bottom:1px solid #cbcbcb; 
		background:#fff; 
		padding:12px 9px 12px 9px; 
		color:#888;
	}

.megamenu .table_dark {
	border:1px solid #000; 
	border-bottom:none;
}
	.megamenu .table_dark th {
		color:#FFF; 
		border-bottom:1px solid #000; 
		background:#0D0D0D;
	}
	.megamenu .table_dark td {
		border-bottom:1px solid #000; 
		background:#0F0F0F; 
		padding:12px 9px 12px 9px; 
		color:#DDD;
	}

/* 6. Inline Images */

.megamenu img {
	border:none;
}
.megamenu .inline_img {
	border: 1px solid #000000;
	-webkit-box-shadow: 0 1px 1px #000000;
	-moz-box-shadow: 0 1px 1px #000000;
	-o-box-shadow: 0 1px 1px #000000;
	box-shadow: 0 1px 1px #000000;
	padding:4px;
	background:#F4F4F4;
	margin-bottom:18px;
}
.megamenu .megamenu_fullwidth .img_list {
	list-style:none;
	margin:0;
	padding:0;
}
.megamenu .megamenu_fullwidth .img_list li {
	float:left;
	position:relative;
	margin-right:15px;
	margin-left:15px;
	margin-bottom:15px;
	border : 1px solid #f2f2f2
}

.megamenu .megamenu_fullwidth1 .img_list {
	list-style:none;
	margin:0;
	padding:0;
}
.megamenu .megamenu_fullwidth1 .img_list li {
	float:left;
	position:relative;
	margin-right:15px;
	margin-left:15px;
	margin-bottom:15px;
	border : 1px solid #f2f2f2
}



.megamenu iframe {
	border:none;
}



/*  _______________________________________

    06 DROP DOWN TABS
    _______________________________________  */




.megamenu_tabs .megamenu_tabs_panels {
	top:0;
	margin: 0 0 15px 0;
	background:#fff
}
.megamenu_tabs ul {
	list-style: none;
}
.megamenu_tabs_hide {
	position:relative;
	left:0;
	top:0;
	display:none;
}
.megamenu_tabs .megamenu_tabs_nav {
	width:97%;
	float:left;
	height:30px;
	margin:18px 0;
	padding-left : 193px;
}
.megamenu_tabs .megamenu_tabs_nav li {
	display: inline;
	float:left;
	width:auto;
	white-space:nowrap;
	margin-right:11px;
	padding : 7px 0;
}
.megamenu_tabs .megamenu_tabs_nav li a {

	color: #ffffff;
	position:relative;
	float:left;
	background-color: #222222;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	/*text-shadow: 0 1px 1px #04655f;*/

	font: bold 11px Sans-Serif;
	text-transform:none;
	padding: 5px 7px;
	margin:0;
	background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
	background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
	background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
	background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
	background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.megamenu_tabs li a.current,
.megamenu_tabs li a.current:hover {
	background-color: #d14419;
	top:1px;

}
.megamenu_tabs .megamenu_tabs_nav li a:hover,
.megamenu_tabs .megamenu_tabs_nav li a:focus {
	background-color: #d14419;
}




/*  _______________________________________

    09 메인메뉴 브랜드 All sort
    _______________________________________  */

	
		.mainmenu-Brandsort_left {
		width:10%; 
		display:inline-block;
		float: left;
		color:#000; 
		font-size:2em; 
		border-right:2px solid #CCC;
		text-align:left;
		padding-left:25px;
		margin-right:25px;
		}

		.mainmenu-Brandsort_right {
		width:80%!important;
		display:inline-block!important;
		float: right!important;
		padding-right:65px!important;
		background-color:#ff0000!important;
		
		}

		.mainmenu-Brandsort_right .main_brand_list {
		display: inline-block!important;
		float:left!important;
		font-size:1em!important; 
		padding-right:55px!important;
		background-color:#ff0000!important;
		}





		.mainmenu-Brandsort_left {
				width:10%; 
				display:block;
				float: left;
				font-size:2em; 
				border-right:2px solid #e4e4e4;
				text-align:left;
				padding-left:25px;
				margin: 20px 25px 15px 0;
				}
		
		 #mainmenu-Brandsort_right {
				width:85%!important;
				display:inline-block!important;
				padding-right:0px!important;
				margin: 20px 0 15px 0;
			   
				}
	   #brand_divider {
		   position : absolute;
			border-bottom : 1px solid #e5e5e5;
		   width : 80%;
		   right : 46px;
		   }

		   
		
	 .main_brand_list {
			display: block!important;
			float:left!important;
			padding-right:5px!important;
			width:130px;
			overflow: hidden;
			color:#252525;
			font-shadow:none;
			line-height : 14px!important;
			}
			
	 .liheight { height :45px!important; }		

	   .main_brand_list a:hover, .main_brand_list a:hover p {
			   color:#fff!important;

			   }
	   .main_brand_list  p {
		   text-shadow: none!important;
		   color:#252525;
		   }