@charset "UTF-8";

/* SBC - Common Mega Menu */
.mega-menu-container ul {
	white-space: unset !important;
}
.main-mega-menu {
	padding-top: 7px;
	border-radius: 0 0 10px 10px;
}
.main-mega-menu ul li {
	margin-right: 0 !important;
	list-style: none;
}
.main-mega-menu .menu-content {
	display: inline-block;
	height: 100%;
	width: 100%;
	vertical-align: top;
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;
	padding-right: 36px;
	padding-bottom: 36px;
}
.main-mega-menu .menu-nav-stroke {
	position: absolute;
	top: 32px;
	left: 8px;
	height: calc(60vh - 64px);

	stroke-width: 1px;
	stroke: var(--Neutral-Colors-Gray-700, #E0E0E3);
	opacity: 0.35;
}

.main-mega-menu ul li a:hover .icon-hover {
	opacity: 1;
}

.main-mega-menu ul li a:hover .icon-origin {
	opacity: 0;
}

.main-mega-menu ul li a.hover .icon-hover {
	opacity: 1;
}

.main-mega-menu ul li a.hover .icon-origin {
	opacity: 0;
}

.main-mega-menu ul li .menu-icon div {
	background-size: contain;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

.main-mega-menu .nav {
	width: 1440px;
	height: 60vh;
	margin: 0 auto;
	position: relative;
	border-radius: 0 0 10px 10px;
	background: var(--Primary-Color-Deep-blue-100, #EEF7FF);
	border: none;
	padding-top: 32px;
	overflow: hidden;
}

.main-mega-menu .nav > ul {
	margin: 0;
	padding: 0;
	width: 280px;
	height: 100%;
	background-color: var(--Primary-Color-Deep-blue-100, #EEF7FF);
	border-right: var(--Neutral-Colors-Gray-400, #E0E0E3);
	border-radius: 0 0 0 10px;
	list-style-type: none;
	overflow: auto;
	padding-bottom: 32px;
	padding-left: 32px;
}

.main-mega-menu .nav li {
	display: block;
	padding: 0;
}

.main-mega-menu .nav a {
	display: block;
	color: var(--Neutral-Colors-Gray-800, #525255);
	text-decoration: none;
	font-weight: normal;
}
.main-mega-menu .nav a.h_nav_menu_link1 {
	color: var(--Neutral-Colors-Gray-800, #525255);
	font-family: Prompt;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.main-mega-menu .nav a.hover, .nav a:hover {
	color: #F79420;
}

.main-mega-menu .nav .l1-link {
	/* letter-spacing: 1px; */
	padding: 6px 12px;
	padding-right: 0;

	color: var(--Neutral-Colors-Gray-800, #525255);
	font-family: Prompt;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.main-mega-menu .nav .l1-link.hover {
	border-radius: 5px;
	background:var(--primary-color-deep-blue-800);
	color: #FFF;
	margin-right: 4px;
}

.main-mega-menu .nav ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 270px;
	width: calc(100% - 270px);
	height: 100%;
	border-radius: 0 0 10px 0;
	border-left: none;
	overflow: hidden;
	padding: 0;
}

.main-mega-menu .view-all-container {
	width: 100%;
	padding-bottom: 0;
	display: flex;
	justify-content: flex-end;
	align-content: center;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	gap: 8px;
	margin-top: 32px;
	margin-bottom: 12px;
	padding-right: 32px;
}
.main-mega-menu .view-all-container a {
	color: var(--Primary-Colors-Orange, #F79421);
	font-family: Prompt;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
}
.main-mega-menu .scrolling-container {
	height: calc(100% - 66px);
	overflow: auto;
}
.main-mega-menu .view-all-container.fixed-w,
.main-mega-menu .scrolling-container.fixed-w {
	width: calc(100% - 325px);
}
.main-mega-menu .nav ul::-webkit-scrollbar,
.main-mega-menu .scrolling-container::-webkit-scrollbar {
	width: 3px;
}
.main-mega-menu .nav ul::-webkit-scrollbar-thumb,
.main-mega-menu .scrolling-container::-webkit-scrollbar-thumb {
	border-radius: 20px;
	background:var(--primary-color-deep-blue-800);
}
.main-mega-menu .nav ul::-webkit-scrollbar-track,
.main-mega-menu .scrolling-container::-webkit-scrollbar-track {
	background-color: var(--Neutral-Colors-Gray-400, #E0E0E3);
}

.main-mega-menu .nav #h_nav_menu_link1:hover {
	color: #F79420;
}
.main-mega-menu .nav #h_nav_menu_link2:hover {
	color: #F79420;
}

.main-mega-menu .menu-item {
	display: inline-block;
	width: 100%;
	padding: 0px;
	padding-left: 46px;
	vertical-align: top;
	margin: 0 0 1em;
}

.main-mega-menu .menu-item ul {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: fit-content !important;
	border: none !important;
	border-radius: unset !important;
	left: 0 !important;
	font-weight: normal;
	letter-spacing: normal;
}

.main-mega-menu .menu-item .menu-head {
	letter-spacing: normal;
	margin: 0px;
	padding: 8px;
	padding-left: 0;
	padding-top: 10px;
	font-size: 16px !important;
}

.main-mega-menu .menu-item .menu-head a{
	padding: 0;
}

.main-mega-menu .menu-item ul li a {
	padding-bottom: 8px;
}


.main-mega-menu .promotion-content {
	height: 60vh;
	background-color: #fdfeff;
	position: absolute;
	top: 0;
	width: calc(100% - 845px);
	left: 846px;
	padding: 32px;
	padding-right: 0;
	overflow: hidden;
}
.brand-mega-menu .promotion-content {
	display: none;
}
.main-mega-menu .promotion-content .title {
	color:var(--primary-color-deep-blue-800);
	font-family: Prompt;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	padding-right: 32px;
	margin-bottom: 8px;
}
.main-mega-menu .promotion-content .scrolling-container {
	height: 100%;
	padding-bottom: 24px;
}
.main-mega-menu .promotion-content .content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
	height: 100%;
	padding-right: 32px;
	padding-bottom: 32px;
}
.main-mega-menu .promotion-content img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}
/* EBC - Common Mega Menu */

/* SBC - for All menu cate */
.main-mega-menu .all-cate.scrolling-container {
	margin-top: 32px;
	padding-left: 32px;
	padding-bottom: 32px;
	height: 100%;
}
.main-mega-menu .menu-all-cate li {
	display: inline-block !important;
	width: calc(100% / 3 - 10px);
}

.main-mega-menu ul li .menu-icon-big {
	position: relative;
	display: inline-block;
	padding-right: 5px;
	width: 50px;
	height: 50px;
	vertical-align: middle;
}

.main-mega-menu ul li .menu-icon-big .icon-origin {
	opacity: 1;
}

.main-mega-menu ul li .menu-icon-big .icon-hover {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity .1s;
}

.main-mega-menu ul li .menu-icon-big div {
	background-size: contain;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

.main-mega-menu .menu-all-cate .menu-head a {
	padding: 0;
	background: linear-gradient(#FF9900, #FF9111) no-repeat bottom left/2em 0.2ch;
	margin: 15px 10px;
	letter-spacing: normal;
}
/* EBC - for All menu cate */

/* SBC - Brand Menu */
.brand-mega-menu.main-mega-menu .container-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	padding-left: 42px;
	padding-top: 0;
}
.brand-mega-menu.main-mega-menu .container-list .container-item {
	width: 107px;
	height: 107px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 97px;
	border-radius: 10px;
	box-sizing: border-box;
	border: 1px solid #fff;
	transition: .2s;
}
.brand-mega-menu.main-mega-menu .container-list .container-item:hover {
	border: 1px solidvar(--primary-color-deep-blue-800);
}
/* EBC - Brand Menu */

/* SBC - Technician Menu */
.technician-mega-menu.main-mega-menu .scrolling-container {
	height: 100%;
	padding-bottom: 32px;
}
.technician-mega-menu.main-mega-menu .container-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	align-items: center;
	gap: 32px;
	padding: 0 32px;
}
.technician-mega-menu.main-mega-menu .container-list .container-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 248px;
	gap: 10px;
}
.technician-mega-menu.main-mega-menu .container-list .container-item img {
	width: 100%;
	border-radius: 10px;
}
.technician-mega-menu.main-mega-menu .container-list .container-item .technician-name {
	height: 20px;
	color: var(--Neutral-Colors-Gray-800, #525255);
	font-weight: normal;
	transition: .2s;
	text-align: center;
}
.technician-mega-menu.main-mega-menu .container-list .container-item:hover .technician-name {
	color: var(--Primary-Colors-Orange, #F79421);
}
.shoproom-mega-menu.main-mega-menu .scrolling-container {
	height: 100%;
	padding-bottom: 32px;
}
.shoproom-mega-menu.main-mega-menu .container-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	align-items: center;
	gap: 32px;
	padding: 0 32px;
}
.shoproom-mega-menu.main-mega-menu .container-list .container-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 248px;
	gap: 10px;
}
.shoproom-mega-menu.main-mega-menu .container-list .container-item img {
	width: 100%;
	border-radius: 10px;
}
.shoproom-mega-menu.main-mega-menu .container-list .container-item .technician-name {
	height: 20px;
	font-weight: 600;
	color: #4183c4;
	transition: .2s;
	text-align: center;
}
.shoproom-mega-menu.main-mega-menu .container-list .container-item:hover .technician-name {
	color: var(--Primary-Colors-Orange, #F79421);
}
/* EBC - Technician Menu */

/* SBC - Home Solution Menu */
.main-mega-menu.home-solution-mega-menu .container-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 32px;
	padding: 32px;
	padding-left: 42px;
	padding-top: 0;
}
.main-mega-menu.home-solution-mega-menu .container-list .container-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 248px;
	gap: 16px;
}
.main-mega-menu.home-solution-mega-menu .container-list .container-item .cover-image {
	border-radius: 10px;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;
	width: 100%;
	height: 186px;
	transition: .2s;
}
.main-mega-menu.home-solution-mega-menu .container-list .container-item .title {
	width: 100%;
	height: 47px;
	color: var(--primary-color-deep-blue-800);
	font-feature-settings: 'clig' off, 'liga' off;
	font-family: Prompt;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-overflow: ellipsis;
	overflow: hidden;
}
.main-mega-menu.home-solution-mega-menu .scrolling-container.fixed-w .container-list .container-item {
	/* width: 235px; */
	width: 168px;
}
.main-mega-menu.home-solution-mega-menu .scrolling-container.fixed-w .container-list .container-item .cover-image {
	height: 168px;
}
.main-mega-menu.home-solution-mega-menu .container-list .container-item:hover .cover-image {
	background-size: auto 110%;
}
.main-mega-menu.home-solution-mega-menu .container-list .container-item:hover .title {
	color: var(--Primary-Colors-Orange, #F79421);
}

.main-mega-menu.home-solution-mega-menu .scrolling-container .container-list .container-item.s2 .cover-image {
	display: flex;
	align-items: flex-end;
	position: relative;
	overflow: hidden;
}
.main-mega-menu.home-solution-mega-menu .scrolling-container .container-list .container-item.s2 .title {
	color: var(--White, #FFF);
	text-align: center;
	font-feature-settings: 'clig' off, 'liga' off;
	font-family: Prompt;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	height: 26px;
	margin-bottom: 8px;
	position: absolute;
	bottom: 0;
	z-index: 2;
	padding: 0 8px;
}
.main-mega-menu.home-solution-mega-menu .scrolling-container .container-list .container-item.s2 .cover-image .shadow::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background: linear-gradient(to top, rgba(81, 83, 86, 0.80), transparent);
	border-radius: 0 0 10px 10px;
	z-index: 1;
}
/* EBC - Home Solution Menu */

/* SBC - Promotions Menu */
.promotions-mega-menu.main-mega-menu nav {
	height: auto;
}
.promotions-mega-menu .header-menu-promotions-container {
	width: 100%;
	height: auto;
	padding: 32px;
	padding-top: 0;
	box-sizing: border-box;
	display: flex
}
.promotions-mega-menu .header-menu-promotions-container .promotions-menu {
	height: auto;
	width: 378px;
	box-sizing: border-box;
	border-right: 1px solid #d0d0d0
}
.promotions-mega-menu .header-menu-promotions-container .promotions-menu .promotions-header-text {
	font-size: 24px;
	font-weight: 600;
	color: #000;
	letter-spacing: 0!important
}
.promotions-mega-menu .header-menu-promotions-container .promotions-suggest {
	height: auto;
	width: 1062px;
	box-sizing: border-box
}
.promotions-mega-menu .header-menu-promotions-container .promotions-suggest .promotions-header-text {
	font-size: 24px;
	font-weight: 600;
	color: #000;
	letter-spacing: 0!important;
	width: 100%
}
.promotions-mega-menu .header-menu-promotions-container .promotions-list {
	display: flex;
	justify-content: space-between;
	align-content: center;
	flex-wrap: wrap;
	padding: 22px 32px 0 0;
	font-size: 16px;
	letter-spacing: 0 !important;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
.promotions-mega-menu .header-menu-promotions-container .promotions-list .promotion-count {
	color: #82929f;
	font-weight: normal;
}
.promotions-mega-menu .header-menu-promotions-container .promotions-suggest {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 24px;
	padding-left: 30px;
	align-content: flex-start;
	flex-direction: row;
	align-items: center;
}
.promotions-mega-menu .header-menu-promotions-container .promotions-suggest .promotions-suggest-item {
	box-sizing: border-box;
	width: 312px;
	height: 235px;
	background-color: #f6f6f6;
	border-radius: 8px;
	border: solid 1px #bbc7d0;
	transition: .2s;
	cursor: pointer;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.promotions-mega-menu .header-menu-promotions-container .promotions-suggest .promotions-suggest-item:hover {
	border: solid 1px #0867b2
}
/* EBC - Promotions Menu */

/* SBC - Override CSS Mega Menu */
#header-sticky .main-mega-menu {
	padding-top: 10px;
}
/* EBC - Override CSS Mega Menu */