@font-face {
font-family: 'gotfontbook';
	src: url('cms/font/muli/Muli.ttf');
}
@font-face {
font-family: 'gotfontbold';
	src: url('cms/font/muli/Muli-Bold.ttf');
}
@font-face {
font-family: 'gotfontlight';
	src: url('cms/font/muli/Muli-Light.ttf');
}


body, html {
	margin:0px;
	-webkit-text-size-adjust:none;
}


/*************************************************************************************** small screen */
	#DesktopMenuWrapper {
		display:none;
	}
	#MobileMenuWrapper {
		display:block;
	}
	
	.OrangeBannerTitle {
		font-size:24px;
		line-height:24px;
	}

	.TopBannerTitle {
		font-size:20px;
		line-height:20px;
	}

	.SubTitleFont {
		font-size:12px;
	}

	.SubTitleBox {
		width:95%;
	}

	#BottomNavWrapper {
		display:none;
	}
	#MobileBottomNavWrapper {
		display:block;
	}

	#TopBannerPC {
		display:none;
	}

	#TopBannerMobile {
		display:block;
	}

	#TopBannerImageMobile {
		height:90px;
	}

	#TopBannerTitleOneLineMobile {
		padding:36px 0px 0px 0px;
	}

	#TopBannerTitleTwoLineMobile {
		padding:24px 0px 0px 0px;
	}

	.TopBannerContentFontMobile {
		font-size:12px;
		line-height:14px;
	}

/*************************************************************************************** medium screen */
@media screen and (min-width: 500px) {
	#DesktopMenuWrapper {
		display:none;
	}
	#MobileMenuWrapper {
		display:block;
	}
	
	.OrangeBannerTitle {
		font-size:24px;
		line-height:24px;
	}

	.TopBannerTitle {
		font-size:24px;
		line-height:24px;
	}

	.SubTitleFont {
		font-size:13px;
	}

	.SubTitleBox {
		width:95%;
	}

	#BottomNavWrapper {
		display:none;
	}
	#MobileBottomNavWrapper {
		display:block;
	}

	#TopBannerPC {
		display:none;
	}

	#TopBannerMobile {
		display:block;
	}

	#TopBannerImageMobile {
		height:130px;
	}
	
	#TopBannerTitleOneLineMobile {
		padding:50px 0px 0px 0px;
	}

	#TopBannerTitleTwoLineMobile {
		padding:40px 0px 0px 0px;
	}

	.TopBannerContentFontMobile {
		font-size:14px;
		line-height:16px;
	}
}

/*************************************************************************************** large screen */
@media screen and (min-width: 875px) {
	#DesktopMenuWrapper {
		display:block;
	}
	#MobileMenuWrapper {
		display:none;
	}
	
	.OrangeBannerTitle {
		font-size:36px;
		line-height:36px;
	}

	.TopBannerTitle {
		font-size:36px;
		line-height:36px;
	}

	.SubTitleFont {
		font-size:14px;
	}

	.SubTitleBox {
		width:75%;
	}

	#BottomNavWrapper {
		display:block;
	}
	#MobileBottomNavWrapper {
		display:none;
	}

	#TopBannerPC {
		display:block;
	}

	#TopBannerMobile {
		display:none;
	}

	#TopBannerImageMobile {
		height:130px;
	}
	
	#TopBannerTitleOneLineMobile {
		padding:50px 0px 0px 0px;
	}

	#TopBannerTitleTwoLineMobile {
		padding:40px 0px 0px 0px;
	}

	.TopBannerContentFontMobile {
		font-size:14px;
		line-height:16px;
	}
}


/*************************************************************************************** web core - start */
/*****************************************************************************/
/******************************************************* orange banner title */
.OrangeBannerBox {
	position:relative;
	top:0px;
	left:0px;
	width:95%;
	max-width:875px;
	
	background-color:rgb(255,203,29);
	margin:auto;
}

/* res */
.OrangeBannerTitle {
	font-family: 'gotfontbold', sans-serif;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	text-align:center;
}
/******************************************************* orange banner title */
/*****************************************************************************/

/****************************************************************************/
/******************************************************* image banner title */
/* res */
.TopBannerTitle {
	font-family: 'gotfontbold', sans-serif;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	text-align:center;
	text-shadow: 0px 0px 10px rgba(20,20,20,0.9);
}

.TopBannerTitleBox {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	margin:auto;
}

.SubTitleDashBox {
	position:relative;
	top:0px;
	left:0px;
	width:100%
	margin:auto;
	padding:8px 0px 8px 0px;

	font-family: 'gotfontbook', sans-serif;
	font-style:normal;
	font-weight:normal;
	font-size:17px;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	text-align:center;

	text-shadow: 0px 0px 10px rgba(20,20,20,0.9);
}

/* res */
.SubTitleFont {
	font-family: 'gotfontbook', sans-serif;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	text-align:center;
	text-shadow: 0px 0px 10px rgba(20,20,20,0.9);
}

/* res */
.SubTitleBox {
	position:relative;
	top:0px;
	left:0px;
	margin:auto;
}

/* res */
#TopBannerPC {
	position:relative;
	top:0px;
	left:0px;
	width:95%;
	max-width:875px;

	margin:auto;
}

#TopBannerImagePC {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:30vw;
	max-height:280px;
	min-height:150px;

	background-color:rgb(80,80,80);
}

#TopBannerImageBasePC {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
}
#TopBannerImageBasePC2 {
	position:absolute;
	
	top: 50%;
    left: 50%;
	width: 100%;
	
	-moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* res */
#TopBannerMobile {
	position:relative;
	top:0px;
	left:0px;
	width:95%;
	max-width:875px;

	margin:auto;
}

.TopBannerContentBoxMobile {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	background-color:rgb(255,172,28);
}

/* res */
#TopBannerImageMobile {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	background-color:rgb(80,80,80);
}

/* res */
#TopBannerTitleOneLineMobile {
	position:relative;
	top:0px;
	left:0px;
}

/* res */
#TopBannerTitleTwoLineMobile {
	position:relative;
	top:0px;
	left:0px;
}

.TopBannerContentMobile {
	position:relative;
	top:0px;
	left:0px;
	width:95%;
	padding:20px 0px;
	margin:auto;
}

/* res */
.TopBannerContentFontMobile {
	font-family: 'gotfontbook', sans-serif;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	text-align:left;
}
.TopBannerContentFontMobile a {
	color:rgb(255,255,255);
	text-decoration:underline;
}
.TopBannerContentFontMobile a:hover {
	color:rgb(255,255,255);
	text-decoration:none;
}
/******************************************************* image banner title */
/****************************************************************************/

.Space10 {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:10px;
}
.Space20 {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:20px;
}
.Space30 {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:30px;
}
.Space40 {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:40px;
}
.Space50 {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:50px;
}
.Space60 {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:60px;
}
/**************************************************************************** web core - end */



/*************************************************************************************** desktop top menu - start */
#DesktopMenuWrapper {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
}

#DesktopMenuShadow {
	position:absolute;
	top:60px;
	left:0px;
	width:100%;
	height:9px;
}

#DesktopMenuBase {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:60px;
	background-color:rgb(255,255,255);
}

#DesktopMenuBase2 {
	position:relative;
	top:0px;
	left:0px;
	width:875px;
	height:60px;
	margin:auto;
}

.DesktopMenuLogo {
	position:absolute;
	top:19px;
	left:0px;
}

#FacebookBox {
	position:absolute;
	top:20px;
	right:255px;
	width:21px;
	height:21px;
	background-repeat:no-repeat;
	background-image:url("cms/image/common/facebook-off.png");
	cursor:pointer;
}
#FacebookBox:hover {
	background-repeat:no-repeat;
	background-image:url("cms/image/common/facebook-on.png");
}

#DesktopSearch {
	position:absolute;
	top:0px;
	right:0px;
	width:241px;
	height:60px;
}

#DesktopSearchField {
	position:absolute;
	top:18px;
	left:0px;
	width:198px;
	height:25px;
}

#DesktopSearchIcon {
	position:absolute;
	top:18px;
	right:0px;
	width:37px;
	height:25px;
}

.OurStoryButton {
	position:absolute;
	top:0px;
	left:174px;
}
#OurStoryMenuTop {
	position:absolute;
	top:0px;
	left:0px;

	line-height:60px;
	text-align:left;
	
	font-style:normal;
	font-weight:normal;
	color:rgb(83,82,82);
	letter-spacing:0px;
	text-decoration:none;

	white-space:nowrap;
	cursor:pointer;
}

#OurStoryMenuBox {
	position:absolute;
	top:60px;
	left:-15px;
	width:160px;
	background-color:rgb(255,255,255);
	display:none;
}

.MenuOurStoryFonten {
	position:relative;
	top:0px;
	left:0px;
	width:160px;
	
	cursor:pointer;
	display:block;

	font-family: 'gotfontbold', sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;
	background-color:rgb(255,255,255);
}
.MenuOurStoryFonten:hover {
	color:rgb(255,255,255);
	text-decoration:none;
	background-color:rgb(255,172,28);
}

/*********************************************************************************************** collection button */

.CollectionsButton {
	position:absolute;
	top:0px;
	left:275px;
}
#CollectionsMenuTop {
	position:absolute;
	top:0px;
	left:0px;
	
	line-height:60px;
	text-align:left;
	
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;

	white-space:nowrap;
	cursor:pointer;
}
#CollectionsMenuBox {
	position:absolute;
	top:60px;
	left:-15px;
	width:120px;
	background-color:rgb(255,255,255);
	display:none;
}

.MenuCollectionFonten {
	position:relative;
	top:0px;
	left:0px;
	width:120px;
	
	cursor:pointer;
	display:block;

	font-family: 'gotfontbold', sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;
	background-color:rgb(255,255,255);
}
.MenuCollectionFonten:hover {
	color:rgb(255,255,255);
	text-decoration:none;
	background-color:rgb(255,172,28);
}

.MenuCollectionFonten:hover > .MenuCollectionPopup {
	display:block;
}

.MenuCollectionPopup {
	position:absolute;
	top:0px;
	left:120px;
	/*width:120px;
	height:100px;*/
	background-color:rgb(255,255,0);
	display:none;

	-webkit-transition: display 0.2s;
}

.MenuCollectionFont2en {
	position:relative;
	top:0px;
	left:0px;

	padding:0px 15px;
	
	cursor:pointer;
	display:block;

	font-family: 'gotfontbold', sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;
	background-color:rgb(255,255,255);
}
.MenuCollectionFont2en:hover {
	color:rgb(255,255,255);
	text-decoration:none;
	background-color:rgb(255,172,28);
}

/*********************************************************************************************** media button */

.MediaButton {
	position:absolute;
	top:0px;
	left:391px;
}
#MediaMenuTop {
	position:absolute;
	top:0px;
	left:0px;
	line-height:60px;
	text-align:left;
	
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;

	white-space:nowrap;
	cursor:pointer;
}

.StoreButton {
	position:absolute;
	top:0px;
	left:391px;
	/*left:461px;*/
}
#StoreMenuTop {
	position:absolute;
	top:0px;
	left:0px;
	width:120px;
	line-height:60px;
	text-align:left;
	
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;
	
	white-space:nowrap;
	cursor:pointer;
}
#StoreMenuBox {
	position:absolute;
	top:60px;
	left:-15px;
	width:180px;
	background-color:rgb(255,255,255);
	display:none;
}

.MenuStoreFonten {
	position:relative;
	top:0px;
	left:0px;
	width:180px;
	
	cursor:pointer;
	display:block;

	font-family: 'gotfontbold', sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;
	background-color:rgb(255,255,255);
}
.MenuStoreFonten:hover {
	color:rgb(255,255,255);
	text-decoration:none;
	background-color:rgb(255,172,28);
}


.LanguageButton {
	position:absolute;
	top:0px;
	left:520px;
	line-height:60px;
	text-align:left;
}
.LanguageButtonText {
	font-family: 'gotfontbold', sans-serif;
	font-style:normal;
	font-weight:normal;
	font-size:12px;
	letter-spacing:0px;
	color:rgb(83,82,82);
	text-decoration:none;
}
.LanguageButtonTextEn {
	font-family: 'gotfontbold', sans-serif;
	font-style:normal;
	font-weight:normal;
	font-size:12px;
	letter-spacing:0px;
	color:rgb(255,172,28);
	text-decoration:none;
}
.LanguageButtonTextEn a {
	color:rgb(83,82,82);
	text-decoration:none;
}
.LanguageButtonTextEn a:hover {
	color:rgb(255,172,28);
	text-decoration:none;
}

.LanguageButtonTextSc {
	font-family:"simhei", "Microsoft JhengHei", sans-serif;
	font-style:normal;
	font-weight:normal;
	font-size:12px;
	letter-spacing:0px;
	color:rgb(255,172,28);
	text-decoration:none;
}
.LanguageButtonTextSc a {
	color:rgb(83,82,82);
	text-decoration:none;
}
.LanguageButtonTextSc a:hover {
	color:rgb(255,172,28);
	text-decoration:none;
}

.LanguageButtonMobile {
	position:absolute;
	top:16px;
	right:76px;
	cursor:pointer;
}


input.SearchInput {
	background:url('cms/image/common/search-bg.jpg') no-repeat left top;

	border-style:none;
	
	font-family: 'arial', sans-serif;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
	color:rgb(180,180,180);
	letter-spacing:0px;
	line-height:25px;

	width:198px;
	height:25px;

	padding:0px 0px 0px 10px;
}
/**************************************************************************** desktop top menu - end */


/*************************************************************************************** mobile top menu - end */
#MobileMenuWrapper {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
}

#MobileMenuTopNav {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:60px;
}

#MobileMenuBase2 {
	position:relative;
	top:0px;
	left:0px;
	width:95%;
	height:60px;
	margin:auto;
}

#MobileMenuButtonNormal {
	position:absolute;
	top:5px;
	right:0px;
	width:50px;
	height:50px;
	cursor:pointer;
}

#MobileMenuButtonClose {
	position:absolute;
	top:5px;
	right:0px;
	width:50px;
	height:50px;
	cursor:pointer;
}

#MobileMenuPopUpWrapper {
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	background-color:rgb(255,255,255);
	overflow:hidden;
	display:none;
}

.MobileMenuPageButtonBox {
	position:relative;
	top:0px;
	left:0px;
	width:95%;
	margin:auto;

	font-family: 'gotfontlight', sans-serif;
	font-size:28px;
	font-style:normal;
	font-weight:300;
	letter-spacing:0px;
	color:rgb(0,0,0);
	text-decoration:none;
	text-align:center;
	
	line-height:50px;
	cursor:pointer;
}

#MobileOurStory {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:0px;
	background-color:rgb(80,80,80);
}

#MobileStoreList {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:0px;
	background-color:rgb(80,80,80);
}

.MobileMenuPageButtonBox2 {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	margin:auto;

	font-family: 'gotfontlight', sans-serif;
	font-size:20px;
	font-style:normal;
	font-weight:300;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	text-align:center;

	line-height:36px;
	cursor:pointer;
}
/**************************************************************************** mobile top menu - end */


/*************************************************************************************** desktop bottom - start */
#BottomNavWrapper {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:54px;
}

#BottomNavBase {
	position:relative;
	top:0px;
	left:0px;
	width:875px;
	height:22px;
	margin:auto;
}

#DesktopBottomCopyright {
	position:absolute;
	top:0px;
	left:0px;
	line-height:22px;
	text-align:left;
}

.CopyrightFont2en {
	font-family: 'arial', sans-serif;
	font-size:10px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(0,0,0);
	text-decoration:none;
}
.CopyrightFont2en a {
	color:rgb(0,0,0);
	text-decoration:underline;
}
.CopyrightFont2en a:hover {
	color:rgb(255,172,28);
	text-decoration:underline;
}

#DesktopBottomButton {
	position:absolute;
	top:0px;
	right:0px;
	line-height:22px;
	text-align:right;
}

.BottomNavFont2en {
	font-family: 'arial', sans-serif;
	/*font-family: 'Noto Sans', sans-serif;
	font-family: 'Noto Serif', serif;*/
	font-size:10px;
	font-style:normal;
	font-weight:bold;
	letter-spacing:0px;
	color:rgb(0,0,0);
	text-decoration:none;
	-webkit-text-size-adjust:none;
}
.BottomNavFont2en a {
	color:rgb(0,0,0);
	text-decoration:none;
}
.BottomNavFont2en a:hover {
	color:rgb(255,172,28);
	text-decoration:none;
}
/**************************************************************************** desktop bottom - end */


/*************************************************************************************** mobile bottom - start */
#MobileBottomNavWrapper {
	position:relative;
	width:100%;
	text-align:center;
	padding:30px 0px;
}
/*************************************************************************************** mobile bottom - start */



.CenterContent {
	position:absolute;
	
	top: 50%;
    left: 50%;
	width: 100%;
	
	-moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}








/******************************************************/
input.Input1 {
	border-style:solid;
	border-width:1px;
	border-color:rgb(255,92,28);
	
	width:351px;
	height:35px;

	outline:none;
	
	font-family:'Microsoft JhengHei UI','Microsoft JhengHei', Sans-Serif;
	font-size:13px;
	font-style:normal;
	font-weight:normal;
	color:rgb(100,100,100);
	line-height:35px;
	letter-spacing:0px;
	text-align:left;

	margin:0px;
	padding:0px 10px;
}
/******************************************************/
/*input.Input2 {
	border-style:solid;
	border-width:1px;
	border-color:rgb(219,219,219);
	
	width:351px;
	height:35px;

	outline:none;
	
	font-family:'Microsoft JhengHei UI','Microsoft JhengHei', Sans-Serif;
	font-size:13px;
	font-style:normal;
	font-weight:normal;
	color:rgb(100,100,100);
	line-height:35px;
	letter-spacing:0px;
	text-align:left;

	margin:0px;
	padding:0px 10px;
}*/
/******************************************************/
input#AutSubmitButton {
	background-color:rgb(60,60,60);

	border-style:solid;
	border-width:1px;
	border-color:rgb(255,255,255);

	width:137px;
	height:32px;

	outline:none;
	
	font-family:'Microsoft JhengHei UI','Microsoft JhengHei', Sans-Serif;
	font-size:14px;
	font-style:normal;
	font-weight:normal;
	color:rgb(255,255,255);
	line-height:30px;
	letter-spacing:0px;
	text-align:center;

	margin:0px
	padding:0px;

	cursor:pointer;

	-webkit-appearance: none;
    border-radius: 0;
}
/******************************************************/
/*textarea.Textarea1 {
	border-style:solid;
	border-width:1px;
	border-color:rgb(219,219,219);
	
	width:351px;
	height:80px;

	font-family:'Microsoft JhengHei UI','Microsoft JhengHei', Sans-Serif;
	font-size:13px;
	font-style:normal;
	font-weight:normal;
	color:rgb(100,100,100);
	line-height:13px;
	letter-spacing:0px;
	text-align:left;

	margin:0px;
	padding:10px 10px;
}*/


.ErrorFont1en {
	font-family: 'gotfontbook', sans-serif;
	/*font-family: 'Noto Sans', sans-serif;
	font-family: 'Noto Serif', serif;*/
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	-webkit-text-size-adjust:none;
}
.ErrorFont1ct {
	font-family:'Microsoft JhengHei UI','Microsoft JhengHei', Sans-Serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0px;
	color:rgb(255,255,255);
	text-decoration:none;
	-webkit-text-size-adjust:none;
}




















/* ********************************************************** DebugFont */
.DebugFont {
	font-family:"arial", sans-serif;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:1px;
	color:rgb(255,255,255);
	text-decoration:none;
}
.DebugFont a {
	color:rgb(255,255,255);
	text-decoration:none;
}
.DebugFont a:hover {
	color:rgb(255,255,255);
	text-decoration:none;
}