/*********************************************************** SMALL SCREEN */
	#menu-wrapper {
		width: 0px;
	}
	#menu-wrapper-m {
		width: 100%;
	}
	
	#menu-top-spacing-mobile {
		display: block;
	}
	
	#menu-button-box-pc {
		right: 30px;
		display: none;
	}
	.menu-button-box-pc-top {
		top: calc((70px - 36px) / 2);
	}
	.menu-button-box-pc-top-promotion {
		top: calc(((70px - 36px) / 2) + 20px);
	}
	#menu-button-box-index-m {
		right: 30px;
		display: block;
	}
	.menu-button-box-index-m-top {
		top: calc((70px - 36px) / 2);
	}
	.menu-button-box-index-m-top-promotion {
		top: calc(((70px - 36px) / 2) + 30px);
	}
	
	#menu-top-bar-m {
		display: block;
	}
	
	#menu-top-bar-t2-m {
		display: block;
	}

/*********************************************************** MEDIUM SCREEN */
@media screen and (min-width: 800px) {
	#menu-wrapper {
		width: 100%;
	}
	#menu-wrapper-m {
		width: 0px;
	}
	
	#menu-top-spacing-mobile {
		display: none;
	}
	
	#menu-button-box-pc {
		right: 30px;
		display: block;
	}
	.menu-button-box-pc-top {
		top: 40px;
	}
	.menu-button-box-pc-top-promotion {
		top: 60px;
	}
	#menu-button-box-index-m {
		right: 80px;
		display: none;
	}
	.menu-button-box-index-m-top {
		top: 100px;
	}
	.menu-button-box-index-m-top-promotion {
		top: 120px;
	}
	
	#menu-top-bar-m {
		display: none;
	}
	
	#menu-top-bar-t2-m {
		display: none;
	}
}


/*********************************************************** LARGE SCREEN */
@media screen and (min-width: 1380px) {
	#menu-wrapper {
		width: 100%;
	}
	#menu-wrapper-m {
		width: 0px;
	}
	
	#menu-top-spacing-mobile {
		display: none;
	}
	
	#menu-button-box-pc {
		right: calc((100vw - 1380px) / 2 + 30px);
		display: block;
	}
	.menu-button-box-pc-top {
		top: 40px;
	}
	.menu-button-box-pc-top-promotion {
		top: 60px;
	}
	#menu-button-box-index-m {
		right: calc((100vw - 1380px) / 2 + 80px);
		display: none;
	}
	.menu-button-box-index-m-top {
		top: 100px;
	}
	.menu-button-box-index-m-top-promotion {
		top: 120px;
	}
	
	#menu-top-bar-m {
		display: none;
	}
	
	#menu-top-bar-t2-m {
		display: none;
	}
}


/****************************************************************************** Menu Mobile Top Moving Bar */
#menu-top-bar-m {
	position: fixed;
	top: -70px;
	left: 0px;
	width: 100%;
	height: 70px;
	margin: 0px;
	
	z-index: 100000;
}

#menu-top-bar-t2-m {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 70px;
	margin: 0px;
	
	z-index: 100000;
}

#menu-top-spacing-mobile {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 70px;
	background: transparent;
}

.menu-top-bar-inner-mobile {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 70px;
	background: white;
}

.menu-top-bar-logo-m {
	position: absolute;
	bottom: 12px;
	left: 24px;
	width: calc(46px * (220 / 120));
	height: 46px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/menu-top-logo-mobile.svg");
}

#menu-button-box-m {
	position: absolute;
	top: calc((70px - 36px) / 2);
	right: 30px;
	width: 36px;
	height: 36px;
	
	margin: 0px;
	background: transparent;
	cursor: pointer;
}
/*#menu-button-box-m:hover .menu-button-line-mobile {
	top: 50%;
	
	-webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg);
}
#menu-button-box-m:hover .menu-button-line-mobile-2 {
	top: 50%;
	
	-webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg); 
    -o-transform:rotate(-45deg);
}*/

.menu-button-close-box-m {
	position: absolute;
	top: calc((70px - 28px) / 2);
	right: 34px;
	width: 28px;
	height: 28px;
	
	margin: 0px;
	opacity: 0.8;
	cursor: pointer;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/icon-close.svg");
}

/* ONLY for index page */
#menu-button-box-index-m {
	position: fixed;
	width: 36px;
	height: 36px;
	
	margin: 0px;
	z-index: 99993;
	cursor: pointer;
}
/*#menu-button-box-index-m:hover .menu-button-line-mobile {
	top: 50%;
	
	-webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg);
}
#menu-button-box-index-m:hover .menu-button-line-mobile-2 {
	top: 50%;
	
	-webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg); 
    -o-transform:rotate(-45deg);
}*/


/****************************************************************************** Menu content wrapper - PC */
#menu-wrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	background: transparent;
	margin: 0px;
	
	z-index: 99999;
	display: none;
	
	overflow: hidden;
}

#menu-background {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
}

#menu-main-container-back {
	position: absolute;
	top: 0px;
	right: 450px;
	width: 320px;
	height: 100%;
	background: white;
	margin: 0px;
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	border-color: rgb(210, 210, 210);
	border-style: solid;
	border-width: 0px 0px 0px 1px;
}

#menu-main-container {
	position: absolute;
	top: 0px;
	right: -450px;
	width: 450px;
	height: 100%;
	background: white;
	margin: 0px;
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	border-color: rgb(210, 210, 210);
	border-style: solid;
	border-width: 0px 0px 0px 1px;
}

#menu-pc-logo {
	position: absolute;
	top: 100px;
	width: 100px;
	height: calc(100px * (236/156));
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/logo-tg-vertical.svg");
	
    left: 50%;

	-moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#menu-pc-media-container {
	position: absolute;
	top: 310px;
	width: 28px;
	height: 202px;
	margin: 0px;
	
	left: 50%;

	-moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.menu-pc-lang-container-1 {
	position: absolute;
	top: 560px;
	width: 155px;
	height: 20px;
	margin: 0px;
	
	left: 50%;

	-moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	
	display: flex;
	flex-wrap: wrap;
}
.menu-pc-lang-container-2 {
	position: absolute;
	top: 600px;
	width: 101px;
	height: 20px;
	margin: 0px;
	
	left: 50%;

	-moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	
	display: flex;
	flex-wrap: wrap;
}

.menu-pc-lang {
	position: relative;
	width: 50px;
	height: 20px;
	margin: 0px;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	color: #AAAAAA;
	letter-spacing: 0px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	
	display: inline-block;
}

.menu-pc-lang-2 {
	position: relative;
	width: 50px;
	height: 20px;
	margin: 0px;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	color: #AAAAAA;
	letter-spacing: 0px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	
	display: inline-block;
	
	-webkit-transition: color 0.35s;
	transition: color 0.35s;
}
.menu-pc-lang-2:hover {
	color: rgb(70, 70, 70);
}

.menu-pc-lang-line {
	position: relative;
	width: 1px;
	height: 20px;
	margin: 0px;
	
	display: inline-block;
	background: rgb(200, 200, 200);
}

.menu-nav-box {
	position: relative;
	left: 70px;
	width: calc(100% - 110px - 20px);
	margin: 8px auto 8px 110px;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	color: #525252;
	letter-spacing: 1px;
	line-height: 28px;
	text-align: left;
	text-decoration: none;
	
	cursor: pointer;
	
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.menu-nav-box-2 {
	position: relative;
	left: 70px;
	width: calc(100% - 220px);
	margin: 14px auto;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	color: #959595;
	letter-spacing: 1px;
	line-height: 28px;
	text-align: left;
	text-decoration: none;
	
	cursor: pointer;
}

#menu-nav-box-extend-pc {
	position: relative;
	width: calc(100% - 110px - 30px);
	margin: 0px auto 0px 110px;
	
	display: none;
	overflow: hidden;
}
#menu-nav-box-extend-inner-pc {
	position: relative;
	width: 100%;
	margin: 0px;
	
	display: block;
}

.menu-nav-box-extend-inner {
	position: relative;
	width: 100%;
	margin: auto;
	
	display: flex;
	flex-wrap: wrap;
}

.menu-nav-box-extend-button {
	position: relative;
	min-width: 100px;
	height: 28px;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 15px;
	font-style: normal;
	font-weight: 300;
	color: #525252;
	letter-spacing: 1px;
	line-height: 28px;
	text-align: left;
	text-decoration: none;
	
	display: inline-block;
	margin: 0px 30px 0px 0px;
}

#menu-close-button {
	position: absolute;
	top: 80px;
	right: 80px;
	width: 30px;
	height: 30px;
	
	cursor: pointer;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/icon-close.svg");
}

#menu-nav-box-cart {
	position: absolute;
	top: 3px;
	left: -45px;
	width: 24px;
	height: 24px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/icon-cart.svg");
}

#menu-nav-box-member {
	position: absolute;
	top: 3px;
	left: -45px;
	width: 24px;
	height: 24px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/icon-member.svg");
}


/****************************************************************************** Menu content wrapper - mobile */
#menu-wrapper-m {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	background: transparent;
	margin: 0px;
	
	z-index: 99995;
	display: none;
	
	overflow: hidden;
}

#menu-wrapper-inner-m {
	position: absolute;
	top: 0px;
	left: 100%;
	width: 100%;
	height: 100%;
	background: white;
	margin: 0px;
}

.menu-main-container-m {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% - 150px);
	background: transparent;
	margin: 0px auto 0px 120px;
}

.menu-main-button-m {
	position: relative;
	width: 190px;
	margin: 6px auto;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 19px;
	font-style: normal;
	font-weight: 300;
	color: #525252;
	letter-spacing: 1px;
	line-height: 28px;
	text-align: left;
	text-decoration: none;
	
	cursor: pointer;
	
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.menu-main-extend-container-m {
	position: relative;
	width: 100%;
	margin: 16px auto;
	
	display: none;
}

.menu-main-extend-button-m {
	position: relative;
	width: 190px;
	margin: 6px auto;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	color: #525252;
	letter-spacing: 1px;
	line-height: 28px;
	text-align: left;
	text-decoration: none;
}

.menu-sub-container-m {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% - 100px);
	max-width: 320px;
	background: transparent;
	margin: 0px auto;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.menu-sub-button-m {
	position: relative;
	width: calc((100% / 2) - 10px);
	max-width: 150px;
	margin: 6px auto;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	color: #525252;
	letter-spacing: 1px;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	
	display: inline-block;
	
	cursor: pointer;
}

.menu-lang-container-m {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% - 100px);
	max-width: 320px;
	background: transparent;
	margin: 0px auto;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.menu-lang-button-m {
	position: relative;
	width: calc((100% / 4) - 4px);
	max-width: 60px;
	margin: 6px auto;
	
	font-family: halcom, sans-serif;
	/*font-family: 'Noto Sans SC', sans-serif;*/
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	color: #AAAAAA;
	letter-spacing: 0px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	
	display: inline-block;
}
.menu-lang-button-m-text {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	color: #AAAAAA;
	letter-spacing: 0px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
}

.menu-lang-button-line-m {
	position: relative;
	width: 1px;
	height: 20px;
	
	margin: 6px 0px;
	background: #AAAAAA;
	
	display: inline-block;
}

.menu-social-container-m {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% - 100px);
	max-width: 320px;
	background: transparent;
	margin: 0px auto;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.menu-social-button-m {
	position: relative;
	width: 30px;
	height: 30px;
	
	margin: 4px 24px;
	display: inline-block;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#menu-social-button-fb-m {
	background-image: url("../assets/images/common/icon-fb-m.svg");
	
}
#menu-social-button-instr-m {
	background-image: url("../assets/images/common/icon-instr-m.svg");
	
}
#menu-social-button-wc-m {
	background-image: url("../assets/images/common/icon-wc-m.svg");
}
#menu-social-button-wp-m {
	background-image: url("../assets/images/common/icon-whatsapp-m.svg");
}


/****************************************************************************** Menu open-close button - PC */
#menu-button-box-pc {
	position: fixed;
	width: 36px;
	height: 36px;
	
	margin: 0px;
	z-index: 100096;
}

#menu-button-box {
	position: absolute;
	width: 100%;
	height: 100%;
	
	margin: 0px;
	background: transparent;
	cursor: pointer;
}
/*#menu-button-box:hover .menu-button-line-white {
	left: 3px;
	
	-webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg);
}
#menu-button-box:hover .menu-button-line-white-2 {
	left: -3px;
	
	-webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg); 
    -o-transform:rotate(-45deg);
}*/

.menu-button-line-white {
	position: absolute;
	top: 35%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: white;
	margin: 0px;
	overflow: hidden;
}
.menu-button-line-white-2 {
	position: absolute;
	top: 65%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: white;
	margin: 0px;
	overflow: hidden;
}

.menu-button-line-white-i {
	position: absolute;
	top: 0px;
	left: -100%;
	width: 100%;
	height: 1px;
	background: rgb(40, 40, 40);
	margin: 0px;
}
.menu-button-line-white-i-2 {
	position: absolute;
	top: 0px;
	left: -100%;
	width: 100%;
	height: 1px;
	background: rgb(40, 40, 40);
	margin: 0px;
}

.menu-button-line-mobile {
	position: absolute;
	top: 35%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(150, 150, 150);
	margin: 0px;
}
.menu-button-line-mobile-2 {
	position: absolute;
	top: 65%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(150, 150, 150);
	margin: 0px;
}


/****************************************************************************** Others */
.menu-lang-current {
	font-style: bold;
	font-weight: 700;
	color: rgb(110, 110, 110);
}


/****************************************************************************** Products Menu */
.menu-nav-box-plus {
	position: absolute;
	top: 0px;
	left: calc(50% - 0.5px);
	width: 1px;
	height: 100%;
	
	background: rgb(170, 170, 170);
	overflow: hidden;
}
.menu-nav-box-minus {
	position: absolute;
	top: calc(50% - 0.5px);
	left: 0px;
	width: 100%;
	height: 1px;
	
	background: rgb(170, 170, 170);
	overflow: hidden;
}

.menu-nav-box-minus-holder {
	position: absolute;
	top: 8px;
	left: -42px;
	width: 16px;
	height: 16px;
}

.menu-nav-box-minus-holder-m {
	position: absolute;
	top: 6px;
	left: -42px;
	width: 18px;
	height: 18px;
}

.menu-nav-box-plus-i {
	position: absolute;
	top: -100%;
	left: 0px;
	width: 100%;
	height: 100%;
	
	background: black;
}
.menu-nav-box-minus-i {
	position: absolute;
	top: 0px;
	left: -100%;
	width: 100%;
	height: 100%;
	
	background: black;
}