.header_root_container {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 999;
	pointer-events: none;
}

/**
 * Top - desktop
 */
@media (min-width: 768px) {
	.top_container {
		width: 100%;
		height: calc(100vw / 1440 * 104);
		padding-right: calc(100vw / 1440 * 140);
		padding-left: calc(100vw / 1440 * 120);
		box-sizing: border-box;
		pointer-events: all;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top_container .left_container {
		display: flex;
		align-items: center;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.logo {
		width: calc(100vw / 1440 * 72);
		height: auto;
		cursor: pointer;
	}

	.top_container .menu_open {
		width: calc(100vw / 1440 * 34);
		height: calc(100vw / 1440 * 34);
		cursor: pointer;
	}

	.top_container .sub_menu_container {
		margin-left: calc(100vw / 1440 * 48);
	}

	.sub_menu_container .sub_menu {
		font-weight: 500;
		color: #999999;
		cursor: pointer;
	}

	.sub_menu_container .sub_menu:not(:first-child) {
		margin-left: calc(100vw / 1440 * 14);
	}

	.sub_menu_container .sub_menu.active {
		font-weight: 700;
		color: white;
	}

	.sub_menu_container .sub_menu.active.black {
		color: #111111;
	}

	.sub_menu_container .sub_menu.disable {
		cursor: initial;
	}
}

/**
 * Top - mobile
 */
@media (max-width: 767.98px) {
	.top_container {
		width: 100%;
		height: calc(100vw / 360 * 60);
		padding: 0 calc(100vw / 360 * 24);
		box-sizing: border-box;
		pointer-events: all;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top_container .left_container {
		display: flex;
		align-items: center;
	}

	.logo {
		width: calc(100vw / 360 * 50.4);
		height: auto;
		cursor: pointer;
	}

	.top_container .menu_open {
		width: calc(100vw / 360 * 24);
		height: calc(100vw / 360 * 24);
		cursor: pointer;
	}

	.top_container .sub_menu_container {
		margin-left: calc(100vw / 360 * 12.6);
	}

	.sub_menu_container .sub_menu {
		font-weight: 500;
		color: #999999;
		cursor: pointer;
	}

	.sub_menu_container .sub_menu:not(:first-child) {
		margin-left: calc(100vw / 360 * 8);
	}

	.sub_menu_container .sub_menu.active {
		font-weight: 700;
		color: white;
	}

	.sub_menu_container .sub_menu.active.black {
		color: #111111;
	}

	.sub_menu_container .sub_menu.disable {
		cursor: initial;
	}
}

/**
 * Menu - desktop
 */

@media (min-width: 768px) {
	.menu_root_container {
		display: none;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #000000;
		pointer-events: all;
		position: relative;
	}

	.menu_footer {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.menu_top_container {
		width: 100%;
		height: calc(100vw / 1440 * 104);
		padding-left: calc(100vw / 1440 * 120);
		padding-right: calc(100vw / 1440 * 140);
		box-sizing: border-box;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.menu_top_container .menu_close {
		width: calc(100vw / 1440 * 34);
		height: calc(100vw / 1440 * 34);
		cursor: pointer;
	}

	.menu_content_container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: calc((100vh - 478px) * 0.45 - (100vw / 1440 * 104));
	}

	.menu_content_container .menu_container {
		width: 100%;
		box-sizing: border-box;
		width: 960px;
		min-width: 960px;
		height: 478px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
	}

	.menu_col {
		color: white;
		background-repeat: no-repeat;
		background-size: contain;
		transition: all 0.3s ease;
		cursor: pointer;
		position: relative;
	}

	.menu_col .menu_default_link {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.menu_col .menu_depth2_container a {
		color: white;
		transition: all 0.3s ease;
	}

	.menu_col .menu_depth2_container {
		display: none;
		text-align: center;
		font-size: 16px;
		line-height: 22px;
		font-weight: 500;
	}

	.menu_col .menu_depth2_title {
		margin-top: 16px;
		z-index: 1010;
	}

	.menu_col .menu_depth2_title a:hover {
		color: #000000;
	}

	.menu_col.about .menu_depth2_title {
		width: 104px;
		margin-top: 20px;
	}

	.menu_col.about {
		width: 402px;
		height: 204px;
		background-image: url(../images/header/header_desktop_menu_about.svg);
	}

	.menu_col.brand {
		width: 422px;
		height: 204px;
		background-image: url(../images/header/header_desktop_menu_brand.svg);
	}

	.menu_col.we {
		width: 415px;
		height: 205px;
		background-image: url(../images/header/header_desktop_menu_culture.svg);
	}

	.menu_col.contact {
		width: 405px;
		height: 210px;
		background-image: url(../images/header/header_desktop_menu_contact.svg);
	}

	.menu_col:hover {
		transition: all 0.3s ease;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu_col:hover .menu_depth2_container {
		transition: all 0.3s ease;
	}

	.menu_col.about:hover {
		background-image: url(../images/header/header_desktop_menu_hover_about.svg);
	}

	.menu_col:hover .menu_depth2_container {
		display: flex;
		flex-direction: column;
	}

	.menu_col.about:hover .menu_depth2_container.about {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		width: 233px;
		justify-content: space-between;
	}

	.menu_col.brand:hover {
		background-image: url(../images/header/header_desktop_menu_hover_brand.svg);
	}

	.menu_col.we:hover {
		background-image: url(../images/header/header_desktop_menu_hover_culture.svg);
	}

	.menu_col.we:hover .menu_depth2_container.we {
		font-family: brandon-grotesque;
		font-weight: 900;
		font-size: 40px;
		line-height: 60px;
		margin-bottom: 16px;
	}

	.menu_col.contact:hover {
		background-image: url(../images/header/header_desktop_menu_hover_contact.svg);
	}

	.menu_col.contact:hover .menu_depth2_container.contact {
		font-family: brandon-grotesque;
		font-weight: 900;
		font-size: 40px;
		line-height: 60px;
		margin-bottom: 16px;
	}
}

/**
 * Menu - mobile
 */
@media (max-width: 767.98px) {
	.menu_root_container {
		display: none;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #111111;
		pointer-events: all;
	}

	.menu_top_container {
		width: 100%;
		height: calc(100vw / 360 * 60);
		padding: 0 calc(100vw / 360 * 24);
		box-sizing: border-box;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.menu_top_container .menu_close {
		width: calc(100vw / 360 * 24);
		height: calc(100vw / 360 * 24);
		cursor: pointer;
	}

	.menu_content_container {
		width: 100%;
		margin-top: calc(120px - 100vw / 360 * 60);
		display: flex;
	}

	.menu_content_container .menu_container {
		width: 100%;
		padding-left: calc(100vw / 360 * 24);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.menu_container .menu_col:not(:first-child) {
		margin-top: calc(100vw / 360 * 32);
	}

	.menu_col {
		color: white;
		transition: all 0.3s ease;
	}

	.menu_col a {
		color: white;
		transition: all 0.3s ease;
	}

	.menu_col.hover {
		color: #f74902;
	}

	.menu_col.hover a {
		color: #f74902;
	}

	.menu_col.non_hover {
		color: #555555;
	}

	.menu_col.non_hover a {
		color: #555555;
	}

	.menu_col .menu_title {
		font-family: brandon-grotesque;
		font-weight: 700;
		cursor: pointer;
	}

	.menu_col .menu_depth2_container {
		margin-top: calc(100vw / 360 * 12);
	}

	.menu_col .menu_depth2_title {
		font-weight: 400;
		cursor: pointer;
	}

	.menu_col .menu_depth2_title:not(:first-child) {
		margin-top: calc(100vw / 360 * 12);
	}
}