:root {
	--MainColorGreen: rgb(74, 148, 159);
	--MainColorGold: rgb(249, 211, 102);
	--MainColorRed: rgb(243, 87, 87);
	--MainColorBlue: rgb(30, 157, 235);
	--MainColorPink: rgb(255, 53, 133);
	--MenuColor: rgba(14, 88, 99, 1);
	--DataWidth: 95%;
	--DataWidthS: 80%;
	--DataMobWidth: 95%;
	--DataMobWidthS: 85%;
	--DataMaxWidth: 2200px;
	--borderTB: 1px solid rgb(100, 100, 100);
	--MainColorTxt: rgb(30, 30, 30);
	--MainColorTxt2: rgb(60, 60, 60);
	--MainColorTxt3: rgb(110, 110, 110);
	--bgBlackColor: rgba(205, 205, 205, 0.5);
	--bgWhiteColor: rgba(255, 255, 255, 0.6);
	--bgBlackContent: rgba(247, 247, 247, 1);
	--bgWhiteContent: rgba(252, 252, 252, 1);
}

body {
	/*background-image: url("/Image/test-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;*/
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	width: 100%;
	max-width: var(--DataMaxWidth);
	margin-left: auto;
	margin-right: auto;
	font-size: 18px;
	color: var(--MainColorTxt);
	line-height: 1.6;
}

.bgPic1 {
	background-color: var(--bgWhiteColor);
	background-image: url("/Image/bg/bg7.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.bgPic2 {
	background-color: var(--bgWhiteColor);
	background-image: url("/Image/bg/bg14.JPG");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.UnderLine {
	width: 100%;
	height: 1px;
	background-color: rgb(200, 200, 200);
	margin-top: 5px;
	margin-bottom: 5px;
}

.BlankSpaceHome {
	height: 20px;
}

.BlankSpace {
	height: 50px;
}

.BlankSpaceS {
	height: 15px;
}

.BlankSpaceL {
	height: 35px;
}

.DataContent, .DataContentS, .DataContentSS, .DataContentSSS, .DataInContainer, .DataInContainerS {
	max-width: var(--DataMaxWidth);
	width: var(--DataWidth);
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
}

.DataInContainer {
	width: 94%;
	
}

.DataInContainerS {
	width: 80%;
}

.DataContentWhite, .DataContentBlack, .DataContentWhiteS, .DataContentBlackS, .DataContentWhiteSS, .DataContentBlackSS, .DataContentBlue {
	width: var(--DataWidth);
	background-color: var(--bgWhiteContent);
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	border: 1px solid rgb(210, 210, 210);
	padding-top: 12px;
	padding-bottom: 12px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.DataContentBlack, .DataContentBlackS, .DataContentBlackSS {
	background-color: var(--bgBlackContent);
	border: 1px solid rgb(220, 220, 220);
}

.DataContentBlue {
	background-color: rgb(5, 60, 90);
	border: none;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0);
}

.DataContentS {
	width: var(--DataWidthS);
}

.DataContentWhiteS, .DataContentBlackS, .DataContentSS {
	width: 65%;
}

.DataContentWhiteSS, .DataContentBlackSS, .DataContentSSS {
	width: 45%;
}

.bgBlack, .bgWhite, .bgBlack2, .bgBlack3, .bgBlue, .bgWYellow, .bgWRed, .bgWGreen, .bgLine {
	width: 100%;
	background-color: var(--bgBlackColor);
	-webkit-backdrop-filter: blur(5px); /*blur bg*/
	backdrop-filter: blur(5px); /*blur bg*/
}

.bgWhite {
	background-color: var(--bgWhiteColor);
}

.bgBlack2 {
	background-color: var(--bgBlackContent);
}

.bgBlack3 {
	background-color: var(--MainColorTxt);
}

.bgBlue {
	background-color: rgb(0,49,83);
}

.bgWYellow {
	background-color: rgb(250, 250, 230);
}

.bgWRed {
	background-color: rgb(255, 135, 110);
}

.bgWGreen {
	background-color: rgb(235, 255, 245);
}

.bgLine {
	background-color: rgb(23, 196, 100);
}



.TbContent, .TbContentNoPad, .TbCode, .TbBorder, .TBContentCol, .TbContainMenu, .TBtoCol {
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
	width: 100%;
	background-color: none;
	overflow-x: auto;
}

.TbContainMenu {
	width: auto;
	background-color: rgb(250, 250, 250);
	border: var(--borderTB);
	border-color: rgb(220, 220, 220);
	box-shadow: rgba(100, 100, 100, 0.3) 0px 4px 12px;
	z-index: 3;
	display: none;
}


.TbCode {
	margin-top: 5px;
	margin-bottom: 5px;
	border-top: var(--borderTB);
	border-bottom: var(--borderTB);
}

.TbBorder {
	width: auto;
}

.TbContent td, .TbCode td, .TBContentCol td, .TbContainMenu td {
	padding-bottom: 5px;
	padding-top: 5px;
	color: var(--MainColorTxt);
}

.TbContainMenu td {
	padding-bottom: 3px;
	padding-top: 3px;
	
}

.TbContentNoPad td {
	padding: 0;
	margin: 0;
	color: var(--MainColorTxt);
}

.TbBorder td {
	border: var(--borderTB);
	padding: 10px;
	font-size: 16px;
	color: var(--MainColorTxt);
}

.borderbottom {
	border-bottom: var(--borderTB);
}

.AutoWidthCell, .AutoWidthCellNoPad, .AutoWidthCellLeft, .AutoWidthCellRight {
	width: 1%;
	white-space: nowrap;
	padding-right: 10px;
	padding-left: 10px;
}

.AutoWidthCellNoPad {
	padding: 0px;
}

.AutoWidthCellLeft {
	padding-left: 0px;
}

.AutoWidthCellRight {
	padding-right: 0px;
}

.ContainMenu, .ContainMenuBlur {
	width: 100%;
	border: none;
	background-color: var(--MainColorTxt2);
	margin: 0;
	padding: 0;
	border-bottom: 0px solid rgb(225, 225, 225);
	max-width: var(--DataMaxWidth);
}

.ContainMenuBlur {
	position: fixed;
	z-index: 1;
	-webkit-backdrop-filter: blur();
	backdrop-filter: blur(8px);
	top: 0px;
}

.flexMenu {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
	height: auto;
	border: none;
	margin: auto;
	padding: 0;
}

.SeperateMenu {
	margin-top: auto;
	margin-bottom: auto;
	width: 1px;
	height: 22px;
	background-color: rgb(180, 180, 180);
}

.MobileMenuHead {
	display: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.MobileMenu {
	max-width: var(--DataMaxWidth);
	width: var(--DataWidthS);
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
}

.nav__icon {
	width: 27px;
	height: 25px;
	margin-right: 0px;
	margin-bottom: auto;
	margin-top: auto;
	position: relative;
	cursor: pointer;
	z-index: 9;
}

	.nav__icon span {
		transition: all .3s;
		display: inline-block;
		background: rgb(230, 230, 230);
		position: absolute;
		right: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
	}

		.nav__icon span:nth-of-type(1) {
			top: 5px;
		}

		.nav__icon span:nth-of-type(2) {
			top: 12px;
		}

		.nav__icon span:nth-of-type(3) {
			top: 19px;
		}

	.nav__icon.active span:nth-of-type(1) {
		-webkit-transform: translateY(7px) rotate(-45deg);
		transform: translateY(7px) rotate(-45deg);
	}

	.nav__icon.active span:nth-of-type(2) {
		opacity: 0;
	}

	.nav__icon.active span:nth-of-type(3) {
		-webkit-transform: translateY(-7px) rotate(45deg);
		transform: translateY(-7px) rotate(45deg);
	}

.AlignSelfCenter {
	align-self: center;
	
}

.btLogo {
	outline: none;
	border: none;
	width: 45px;
	height: auto;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	background-color: transparent;
	cursor: pointer;
	vertical-align: middle;
}

	.btLogo:hover {
		opacity: 0.6;
	}

.btMenu, .btMenuFocus, .btMain, .btGeneral, .btMobMenu, .btMobMenuFocus, .lbLang {
	font-size: 16px;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	border: none;
	color: rgb(210, 210, 210);
	text-align: center;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	background-color: transparent;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-top: auto;
	margin-bottom: auto;
}

.btMenuFocus, .btMobMenuFocus {
	padding-bottom: 3px;
	color: rgb(255, 255, 255);
	border-bottom: 4px solid rgb(240, 240, 240);
	pointer-events: none;
}

.btMain, .btGeneral {
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 25px;
	padding-right: 25px;
	background-color: var(--MainColorGreen);
	border-radius: 25px;
	color: white;
}

.btGeneral {
	font-size: 16px;
	font-weight: normal;
	background-color: var(--MainColorTxt2);
}

	.btMain:hover, .btGeneral:hover, .lbLang:hover {
		opacity: 0.9;
	}

	.btMenu:hover {
		color: rgb(255, 255, 255);
	}

.lbHomeBlue, .lbHomeGold, .lbHome, .lbHomePage, .lbTopicBlue, .lbTopicGold, .lbTopic, .lbTopicB, .lbHeadBlue, .lbHeadGold, .lbHeadB, .lbHead, .lbtxt, .lbtxtB, .lbSubTopic, .lbSubTopicB, .lbtxtCondition, .lbtxtConditionB, .lbtxtS, .lbtxtSB, .lbSubHome, .lbSubHomeB {
	font-size: 76px;
	color: var(--MainColorGreen);
	font-weight: bold;
	cursor: default;
}

.lbHomeGold, .lbTopicGold, .lbHeadGold {
	color: var(--MainColorGold);
}

.lbHome, .lbTopic, .lbTopicB, .lbHead, .lbHeadB, .lbtxtS, .lbtxtSB, .lbHomePage {
	color: var(--MainColorTxt);
}

.lbTopicBlue, .lbTopicGold, .lbTopic, .lbTopicB {
	font-size: 38px;
	font-weight: normal;
	/*background-color: var(--MainColorGreen);
	padding: 10px;
	color: white;
	border-radius: 50px;
	padding-left: 25px;
	padding-right: 25px;*/
}

.lbHeadBlue, .lbHeadGold, .lbHead, .lbHeadB {
	font-size: 22px;
	font-weight: normal;
}

.lbSubHome, .lbSubHomeB {
	font-size: 60px;
	font-weight: normal;
	color: var(--MainColorTxt);
}

.lbSubTopic, .lbSubTopicB {
	color: var(--MainColorTxt);
	font-size: 24px;
	font-weight: normal;
}

.lbTopicB, .lbHeadB, .lbSubTopicB, .lbtxtConditionB, .lbtxtSB, .lbSubHomeB {
	font-weight: bold;
}

.lbtxt, .lbtxtB {
	font-size: 18px;
	color: var(--MainColorTxt);
}

.lbtxt, .lbtxtS, .lbtxtCondition {
	font-weight: normal;
}

.lbtxtS, .lbtxtSB {
	color: var(--MainColorTxt2);
}

.lbtxtCondition, .lbtxtConditionB {
	color: var(--MainColorTxt3);
}

.lbtxtCondition, .lbtxtConditionB, .lbtxtS, .lbtxtSB {
	font-size: 14px;
}

.linkCustomer {
	font-size: 14px;
	color: var(--MainColorBlue);
	text-decoration: none;
}

.linkHome {
	color: var(--MainColorBlue);
	text-decoration: none;
}

.linkHome:hover {
	text-decoration: underline;
}


.ImFull {
	width: 100%;
	border-radius: 10px;
	min-height: 100%;
	margin: auto;
	display: block;	
}

.ImBG {
	width: 50%;
	height: auto;
	opacity: 0.25;
}

.ImLang {
	width: 20px;
	height: auto;
	vertical-align: middle;
	padding: 0;
	filter: grayscale(0%);
}

.ImProduct, .ImProduct2, .ImProduct3, .ImProduct4, .ImProduct4Center, .ImProduct5, .ImProduct5Center, .ImProduct6, .ImProduct7, .ImProduct7Center, .ImProduct8, .ImProduct8Center, .ImProduct9, .ImProduct10, .ImProduct11, .ImProduct12, .ImProduct13, .ImProductLogo, .ImProductDisplay, .ImProductDisplay2 {
	padding: 0;
	height: auto;
	margin: 0;
	width: 45%;
	display: block;
}

.ImProduct2 {
	width: 55%;
	border-radius: 10px;
}


.ImProduct3, .ImProduct12 {
	width: 20%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
}

.ImProduct4, .ImProduct4Center {
	border-radius: 10px;
	width: 35%;
}

.ImProduct4Center, .ImProduct7Center, .ImProduct8Center, .ImProduct5Center {
	margin-left: auto;
	margin-right: auto;
}

.ImProduct5, .ImProduct5Center {
	width: 55%;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.ImProduct6, .ImProductLogo {
	width: 10vw;
	max-width: 180px;
}

.ImProduct7, .ImProduct7Center {
	border-radius: 10px;
	width: 30%;
}

.ImProduct8, .ImProduct8Center {
	border-radius: 10px;
	width: 16%;
}

.ImProduct9 {
	width: 45%;
	border-radius: 10px;
}

.ImProduct10, .ImProduct13 {
	border-radius: 10px;
	width: 65%;
}

.ImProduct11 {
	border-radius: 10px;
	width: 40%;
}

.ImProduct12 {
	margin-left: 0;
	margin-right: 0;
}

.ImProductLogo {
	margin-left: auto;
	margin-right: auto;
}

.ImProductDisplay, .ImProductDisplay2 {
	width: 45%;
	border-radius: 10px;
}

.ImProductDisplay2 {
	width: 45%;
	border-radius: 0px;
}


.ImFooter {
	width: 16px;
	height: auto;
	vertical-align: middle;
	padding: 0;
	filter: grayscale(100%);
}



.PicContainer {
	position: relative;
	background-color: transparent;
	padding: 0;
	margin: 0;
	height: 100%;
}


.txtCenter, .txtRight, .txtLeft {
	position: absolute;
	text-align: center;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: transparent;
}

.txtRight {
	text-align: right;
	padding-right: 5%;
}

.txtLeft {
	text-align: left;
	padding-left: 5%;
}

.blurRight, .blurLeft, .blurCenter {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	vertical-align: middle;
	background: linear-gradient(to left, 
		rgba(50, 50, 50, 1) 0%, 
		rgba(50, 50, 50, 0.95) 20%, 
		rgba(50, 50, 50, 0.9) 30%, 
		rgba(50, 50, 50, 0.85) 35%, 
		rgba(50, 50, 50, 0.8) 40%, 
		rgba(50, 50, 50, 0.7) 45%,
		rgba(50, 50, 50, 0) 60%
	);
	border-radius: 10px;
}

.blurLeft {
	background: linear-gradient(to right, 
		rgba(50, 50, 50, 1) 0%, 
		rgba(50, 50, 50, 0.95) 20%, 
		rgba(50, 50, 50, 0.9) 30%, 
		rgba(50, 50, 50, 0.85) 35%, 
		rgba(50, 50, 50, 0.8) 40%, 
		rgba(50, 50, 50, 0.7) 45%,
		rgba(50, 50, 50, 0) 60%
	);
}

.blurCenter {
	background: linear-gradient(to top, 
		rgba(50, 50, 50, 0) 0%, 
		rgba(50, 50, 50, 0.1) 10%, 
		rgba(50, 50, 50, 0.4) 20%,  
		rgba(50, 50, 50, 0.5) 30%, 
		rgba(50, 50, 50, 0.7) 40%, 
		rgba(50, 50, 50, 1) 45%,
		rgba(50, 50, 50, 1) 55%,
		rgba(50, 50, 50, 0.7) 60%, 
		rgba(50, 50, 50, 0.5) 70%, 
		rgba(50, 50, 50, 0.4) 80%, 
		rgba(50, 50, 50, 0.1) 90%,  
		rgba(50, 50, 50, 0) 100%
	);
}

.lbtGeneral, .lbtFull, .lbtLang, .lbtHome, .lbtHomeOrange, .lbtHomeBlue, .lbtHomePink, .lbtHomeGreen {
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	border: 0px solid rgb(220, 220, 220);
	border-radius: 10px;
	padding: 0;
	background-color: transparent;
	text-decoration: none;
	display: block;
	width: 49%;
	margin: 0;
	margin-bottom: 10px;
	margin-top: 10px;
	height: auto;
	box-shadow: 1px 1px 5px 2px rgb(150, 150, 150);
}

.lbtHome {
	background-color: white;
	box-shadow: 1px 1px 5px 2px rgb(200, 200, 200);
}

.lbtFull, .lbtHomeOrange, .lbtHomeBlue, .lbtHomePink, .lbtHomeGreen {
	width: 100%;
}

.lbtHomeOrange {
	box-shadow: 1px 1px 5px 2px rgba(200, 200, 200, 1);
	border: 0px solid rgb(100, 100, 100);
	/*background: radial-gradient( ellipse 100% 100% at left center, Bisque 35%, #F09678 );*/
	background: radial-gradient( ellipse 100% 100% at left center, Bisque 25%, #F09678 );
}

.lbtHomeBlue {
	box-shadow: 1px 1px 5px 2px rgba(200, 200, 200, 1);
	border: 0px solid rgb(100, 100, 100);
	background: linear-gradient( to top left, HoneyDew, PowderBlue 40%, #64B4FA );
}

.lbtHomePink {
	box-shadow: 1px 1px 5px 2px rgba(200, 200, 200, 1);
	border: 0px solid rgb(100, 100, 100);
	/*background: linear-gradient( to top right, #FEE1E1, #FDC0D1, #FC9FA6 );*/
	background: linear-gradient( to top right, #FFEEDD 20%, #F6B7B7, #FF7474 );
}

.lbtHomeGreen {
	box-shadow: 1px 1px 5px 2px rgba(200, 200, 200, 1);
	border: 0px solid rgb(100, 100, 100);
	/*background: radial-gradient( ellipse 100% 70% at right center, #FCFDE9, #CBFCEC 55%, #58EECA );*/
	background: linear-gradient( to  left, #FCFDE9 12%, #CBFCEC, #58EECA );
}

.lbtLang {
	border-radius: 0px;
	width: auto;
	padding: 0;
	margin: 0;
	margin-top: auto;
	margin-bottom: auto;
	box-shadow: none;
	vertical-align: middle;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	z-index: 3;
}

	.lbtGeneral:hover, .lbtFull:hover, .lbtLang:hover {
		opacity: 0.7;
	}

.flexItem, .flexItem2, .flexItem3 {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: space-around;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1800px;
	height: auto;
	border: none;
	margin: auto;
}

.flexItem2 {
	justify-content: space-between;
}

.flexItem3 {
	align-items: flex-start;
	justify-content: flex-start;
}

.flexProduct, .flexProduct2, .flexProduct3, .flexProduct4 {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	border: none;
	margin: auto;
	align-items: flex-start;
}

.flexProduct2 {
	align-items: stretch;
}

.flexProduct3 {
	justify-content: space-around;
	align-items: center;
}

.flexProduct4 {
	align-items: center;
}



.masonryProduct, .masonryProduct2 {
	column-count: 2;
	column-gap: 10px;
	background-color: rgba(150, 150, 130, 1);
	padding: 10px;
	border-radius: 10px;
	padding-bottom: 0;
}

.masonryProduct2 {
	column-count: 4;
	column-gap: 10px;
	background-color: rgb(45, 150, 165);
	border-radius: 10px;
	padding-bottom: 10px;
	height: auto;
}

.ImMasonry {
	max-width: 100%;
	display: block;
	border-radius: 0px;
}

.figure {
	margin: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	margin-bottom: 10px;
	break-inside: avoid;
}

	.figure > img {
		grid-row: 1 / -1;
		grid-column: 1;
	}

	.figure a {
		color: black;
		text-decoration: none;
	}

.figcaption {
	grid-row: 2;
	grid-column: 1;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 0px;
	color: white;
	padding: .2em .5em;
	justify-self: start;
}

.NoSpace, .NoSpace2 {
	line-height: 1;
}

.NoSpace2 {
	letter-spacing: -8px;
}

.LowSpace {
	line-height: 1.2;
}

.DisableScroll {
	overflow: hidden;
}

.hidden {
	display: none;
}

.btSubMenu, .btSubMenuFocus {
	background-color: rgba(255, 255, 255, 0);
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 25px;
	padding-right: 10px;
	font-size: 16px;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	border: none;
	color: var(--MainColorTxt3);
	text-align: right;
	vertical-align: middle;
	margin: 0;
}

	.btSubMenu:hover {
		background-color: rgb(235, 235, 235);
	}

.btSubMenuFocus {
	color: var(--MainColorTxt);
	pointer-events: none;
	text-decoration: underline;
}


.TransparentModal {
	display: none;
	position: fixed; /* Stay in place */
	z-index: 2; /* Sit on top */
	left: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(1, 220, 220, 0); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(0px); /*blur bg*/
	backdrop-filter: blur(0px); /*blur bg*/
}

.ContainProduct {
	width: 50%;
}

.ContainProduct2 {
	width: 40%;
}

.ContainProduct3 {
	width: 30%;
}

.ContainProduct4 {
	width: 65%;
}

.ContainProduct5 {
	width: 55%;
}

.ContainProduct6 {
	width: 30%;
}

.SeperateProduct {
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
}

.ShowNHide {
	display: block;
}


.HideNShow {
	display: none;
}

.lbBanner {
	color: var(--bgWhiteContent);
	font-weight: normal;
	font-size: 16px;
	cursor: default;
	padding: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: var(--MainColorTxt);
	border-radius: 5px;
}

.TxtOnIm {
	background-image: url("/Image/bg/bg10.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	/* Below is not needed */
}

.lbTxtOnIm, .lbTxtOnImS {
	font-weight: bold;
	font-size: 120px;
	cursor: default;
	letter-spacing: -12px;
}

.lbTxtOnImS {
	font-size: 70px;
	letter-spacing: -12px;
}

.typewriter {
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: 4px solid white; /* The typwriter cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	animation: typing 6s steps(8, end) infinite, blink-caret 1.2s step-end infinite;
	width: auto;
}

/* The typing effect */
@keyframes typing {
	from {
		width: 0
	}

	to {
		width: 100%
	}
}

/* The typewriter cursor effect */
@keyframes blink-caret {
	from, to {
		border-color: transparent
	}

	50% {
		border-color: darkorange;
	}
}



.prev, .next {
	position: absolute;
	cursor: pointer;
	width: auto;
	color: rgb(100, 100, 100);
	font-weight: bold;
	font-size: 23px;
	transition: 0.6s ease;
	user-select: none;
	top: 40%;
	background-color: rgba(240, 240, 240, 0.2);
	padding-right: 12px;
	padding-left: 12px;
	height: 20%;
	margin: 0;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.next {
	right: 0;
	/*border-radius: 15px 0 0 15px;*/
}

	.prev:hover, .next:hover {
		background-color: rgba(240, 240, 240, 0.65);
		color: black;
	}


.FullHeight {
	width: 100%;
	/*height: 95vh;*/
	height: 55vh;
	/*filter: grayscale(80%);
	border-radius: 10px;*/
}

.slideshow-container {
	max-width: 2200px;
	width: 100%;
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	height: 55vh;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}




/* Basic styles for the slideshow container */
.slideshow {
	position: relative;
	width: 100%;
	/*max-width: 1000px; /* Adjust the width as needed */
	height: 55vh; /* Adjust the height as needed */
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: rgb(55, 55, 55);
	background-color: rgb(255, 255, 255);
}

.slides {
	display: flex;
	transition: transform 1s ease-in-out;
}

.slide {
	min-width: 100%;
	transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/*.slide img {
		width: 100%;
		height: 100%;
	}*/


.dots {
	/*position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);*/
	display: flex;
	gap: 10px;
	background-color: white;
	width: 100%;
	justify-content: center;
	padding-top: 12px;
	padding-bottom: 12px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(150, 150, 150, 0.5);
	cursor: pointer;
	transition: background-color 0.3s;
}

	.dot.active {
		background-color: rgba(50, 50, 50, 1);
	}




@media screen and (max-width: 1150px) {

	

	body, .lbtxt, .lbtxtB, .btGeneral {
		font-size: 17px;
	}


	.lbtxtCondition, .lbtxtConditionB, .lbtxtS, .lbtxtSB, .linkCustomer {
		font-size: 13px;
	}

	.lbSubTopic, .lbSubTopicB {
		font-size: 23px;
	}

	.ImBG {
		width: 55%;
	}

	.lbHomeBlue, .lbHomeGold, .lbHome, .lbHomePage {
		font-size: 58px;
	}

	.lbSubHome, .lbSubHomeB {
		font-size: 40px;
	}

	.NoSpace2 {
		letter-spacing: -6px;
	}

	.lbTopicBlue, .lbTopicGold, .lbTopic, .lbTopicB {
		font-size: 32px;
	}

	.lbHeadBlue, .lbHeadGold, .lbHead, .lbHeadB {
		font-size: 19px;
	}

	.btMain {
		font-size: 16px;
	}

	.DataContentWhiteSS, .DataContentBlackSS {
		width: 55%;
	}

	.lbTxtOnIm {
		font-size: 110px;
		letter-spacing: -11px;
	}

	.DataContentSSS {
		width: 55%;
	}
}


@media screen and (max-width: 850px) {
	/*iPad Pro - iPad*/

	.FullHeight, .slideshow-container, .slideshow {
		height: 35vh;
	}

	.ShowNHide {
		display: none;
	}


	.HideNShow {
		display: block;
	}

	.lbtHomeOrange {
		background: radial-gradient( ellipse 100% 100% at bottom center, Bisque 40%, #F09678 );
	}

	.lbtHomeBlue {
		background: linear-gradient( to top, HoneyDew, PowderBlue 40%, #64B4FA );
	}

	.lbtHomeGreen {
	
		background: linear-gradient( to bottom right, #FCFDE9 12%, #CBFCEC, #58EECA );
	}

	.ImProductLogo {
		width: 14vw;
	}

	body, .lbtxt, .lbtxtB, .btGeneral {
		font-size: 16px;
	}

	.lbtxtCondition, .lbtxtConditionB, .lbtxtS, .lbtxtSB, .linkCustomer {
		font-size: 12px;
	}

	.lbSubTopic, .lbSubTopicB {
		font-size: 22px;
	}

	.BlankSpace {
		height: 40px;
	}

	.BlankSpaceL {
		height: 30px;
	}

	.DataContent, .DataContentWhite, .DataContentBlack, .DataInContainer {
		width: var(--DataMobWidth);
	}

	.DataContentS {
		width: var(--DataMobWidthS);
	}

	.flexMenu {
		flex-direction: column;
		padding: 0;
		margin: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.TBtoCol tr {
		display: flex;
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		flex-direction: column;
		flex-wrap: wrap;
	}

	.TBtoCol td {
		width: 100%;
		position: relative;
		margin: auto;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.SeperateMenu {
		display: none;
	}

	.MobileMenuHead {
		display: block;
		background-color: transparent;
		
	}

	.MobileMenu {
		width: 100%;
		position: fixed;
		display: block;
		height: 0;
		transition: 1s;
		background-color: rgb(250, 250, 250);
		z-index: 3;
		overflow: auto;
	}

	.AlignSelfCenter {
		display: none;
	}

	.TbContainMenu {
		width: var(--DataMobWidthS);
		z-index: 0;
		background-color: transparent;
		box-shadow: none;
		border: none;
		border-bottom: 1px solid rgb(210, 210, 210);
	}

		.TbContainMenu td {
			padding-bottom: 5px;
			
		}

	.btMobMenu, .btMobMenuFocus, .btMenu, .btMenuFocus, .lbtLang, .lbLang {
		width: var(--DataMobWidthS);
		font-size: 15px;
		color: var(--MainColorTxt);
		text-align: left;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 1px solid rgb(210, 210, 210);
	}

	.btMenuFocus {
		color: var(--MainColorGreen);
		font-weight: bold;
		
	}

	.btMenu:hover {
		color: var(--MainColorTxt3);
	}

	.btSubMenu:hover {
		background-color: transparent;
		color: var(--MainColorTxt3);
	}

	.lbtLang, .lbLang {
		padding-bottom: 5px;
		border-bottom: 0px solid rgb(210, 210, 210);
		pointer-events: none;
	}

	.lbLang {
		padding: 0;
	}

	.btSubMenu, .btSubMenuFocus {
		text-align: left;
		font-size: 15px;
		width: 100%;
		background-color: transparent;
		padding: 0;
		margin-left: 30px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	

	.ImLang {
		width: 20px;
	}

	.ImBG {
		width: 65%;
	}

	.lbHomeBlue, .lbHomeGold, .lbHome, .lbHomePage {
		font-size: 42px;
	}

	.lbSubHome, .lbSubHomeB {
		font-size: 35px;
	}

	.NoSpace2 {
		letter-spacing: -5px;
	}

	.lbTopicBlue, .lbTopicGold, .lbTopic, .lbTopicB {
		font-size: 28px;
	}

	.lbHeadBlue, .lbHeadGold, .lbHead, .lbHeadB {
		font-size: 17px;
	}

	.btMain, .btGeneral {
		/*font-size: 15px;*/
		padding-top: 8px;
		padding-bottom: 8px;
		padding-left: 20px;
		padding-right: 20px;
	}


	.DataContentWhiteSS, .DataContentBlackSS {
		width: 65%;
	}

	.ContainProduct, .ContainProduct2, .ContainProduct4, .ContainProduct5, .ContainProduct6 {
		width: 100%;
	}

	.ContainProduct3 {
		width: 90%;
	}

	.ImProduct, .ImProductDisplay, .ImProductDisplay2 {
		width: 45vw;
		margin-left: auto;
		margin-right: auto;
	}

	.ImProductDisplay, .ImProductDisplay2 {
		width: 60vw;
		margin-left: auto;
		margin-right: auto;
	}

	.ImProduct2 {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.ImProduct4, .ImProduct9, .ImProduct10, .ImProduct4Center, .ImProduct11, .ImProduct13 {
		width: 35vw;
		margin-left: auto;
		margin-right: auto;
	}

	.ImProduct12 {
		width: 25vw;
		margin-left: auto;
		margin-right: auto;
	}

	.ImProduct5, .ImProduct5Center, .ImProduct7, .ImProduct7Center, .ImProduct9, .ImProduct11 {
		width: 65%;
	}

	.ImProduct10 {
		width: 75%;
	}


	.ImProduct13 {
		width: 100%;
	}

	.ImProduct8, .ImProduct8Center {
		width: 30%;
	}

	.SeperateProduct {
		width: 100%;
		height: 20px;
		
	}

	.lbBanner {
		font-size: 15px;
		padding: 10px;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.lbTxtOnIm {
		font-size: 90px;
		letter-spacing: -10px;
	}
}

@media screen and (max-width: 800px) {
	.DataContentWhiteS {
		width: 80%;
	}
}


@media screen and (max-width: 650px) {
	/*iPad  Mini*/

	
	body, .lbtxt, .lbtxtB, .btGeneral {
		font-size: 15px;
	}

	.lbtxtCondition, .lbtxtConditionB, .lbtxtS, .lbtxtSB, .linkCustomer {
		font-size: 11px;
	}

	.lbSubTopic, .lbSubTopicB {
		font-size: 20px;
	}


	.DataContentS, .DataContentWhiteS, .DataContentBlackS, .DataContentWhiteSS, .DataContentBlackSS, .DataContentSS, .DataContentSSS {
		width: 90%;
	}

	.ImBG {
		width: 80%;
	}

	.lbHomeBlue, .lbHomeGold, .lbHome, .lbHomePage {
		font-size: 33px;
	}

	.lbSubHome, .lbSubHomeB {
		font-size: 26px;
	}

	.NoSpace2 {
		letter-spacing: -4px;
	}

	.lbTopicBlue, .lbTopicGold, .lbTopic, .lbTopicB {
		font-size: 26px;
	}

	.lbHeadBlue, .lbHeadGold, .lbHead, .lbHeadB, .btMain {
		font-size: 14px;
	}

	.btMain, .btGeneral {
		/*font-size: 14px;*/
		padding-top: 6px;
		padding-bottom: 6px;
		padding-left: 17px;
		padding-right: 17px;
	}



	.lbtGeneral, .lbtHome {
		width: 100%;
	}


	.BlankSpaceS {
		height: 12px;
	}

	.BlankSpace {
		height: 35px;
	}

	.BlankSpaceL {
		height: 25px;
	}

	.ImFooter {
		width: 15px;
	
	}

	.ImProduct {
		width: 55vw;
	}

	.ImProductDisplay, .ImProductDisplay2 {
		width: 70vw;		
	}

	.ImProduct4, .ImProduct4Center, .ImProduct12 {
		width: 40vw;
	}

	.ImProduct5, .ImProduct5Center, .ImProduct7, .ImProduct7Center, .ImProduct9, .ImProduct10, .ImProduct11 {
		width: 82%;
	}

	.ImProduct13 {
		width: 85%;
	}

	.ImProduct8, .ImProduct8Center {
		width: 35%;
	}

	.lbBanner {
		padding: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 13px;
	}

	.lbTxtOnIm {
		font-size: 70px;
		letter-spacing: -7px;
	}


	.FullHeight, .slideshow-container, .slideshow {
		height: 30vh;
	}

	.prev, .next {
		font-size: 16px;
		padding-right: 7px;
		padding-left: 7px;
	}
}

@media screen and (max-width: 450px) {
	/*iPhone Pro Max -> iPhone*/

	.FullHeight, .slideshow-container, .slideshow {
		height: 25vh;
	}

	.DataContentS, .DataContentWhiteS, .DataContentBlackS, .DataContentSS, .DataContentSSS {
		width: 92%;
	}

	.BlankSpace {
		height: 30px;
	}

	.BlankSpaceL {
		height: 15px;
	}


	.btMobMenu, .btMobMenuFocus, .btMenu, .btMenuFocus, .lbtLang, .lbLang {
		font-size: 14px;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.lbtLang, .lbLang {
		padding-bottom: 5px;
	}

	.btSubMenu, .btSubMenuFocus {
		font-size: 14px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.ImBG {
		width: 85%;
	}

	.lbHomeBlue, .lbHomeGold, .lbHome {
		font-size: 26px;
	}

	.lbHomePage {
		font-size: 19px;
	}

	.lbSubHome, .lbSubHomeB {
		font-size: 19px;
	}

	.NoSpace2 {
		letter-spacing: -3px;
	}

	.lbTopicBlue, .lbTopicGold, .lbTopic, .lbTopicB {
		font-size: 25px;
	}

	.lbHeadBlue, .lbHeadGold, .lbHead, .lbHeadB, .btMain {
		font-size: 14px;
	}

	.ImProduct {
		width: 75vw;
		
	}

	.ImProductDisplay, .ImProductDisplay2 {
		width: 95%;
	}

	.ImProduct2 {
		width: 92%;
	}

	.ImProduct4, .ImProduct4Center {
		width: 55vw;
	}

	.ImProduct8, .ImProduct8Center {
		width: 45%;
	}

	.lbBanner {
		padding-top: 1px;
		padding-bottom: 1px;
	}

	.lbTxtOnIm {
		font-size: 55px;
		letter-spacing: -6px;
	}

	.lbSubTopic, .lbSubTopicB {
		font-size: 16px;
	}

}


@media screen and (max-width: 350px) {
	/*iPhone 5*/

	body, .lbtxt, .lbtxtB, .btGeneral {
		font-size: 15px;
	}

	.lbtxtCondition, .lbtxtConditionB, .lbtxtS, .lbtxtSB, .linkCustomer {
		font-size: 10px;
	}

	.lbSubTopic, .lbSubTopicB {
		font-size: 14px;
	}

	.DataInContainerS {
		width: 85%;
	}

	
	.ImBG {
		width: 85%;
	}

	.lbHomeBlue, .lbHomeGold, .lbHome {
		font-size: 22px;
	}

	.lbHomePage {
		font-size: 18px;
	}

	.lbSubHome, .lbSubHomeB {
		font-size: 17px;
	}

	.NoSpace2 {
		letter-spacing: -2px;
	}

	.lbTopicBlue, .lbTopicGold, .lbTopic, .lbTopicB {
		font-size: 22px;
	}

	.lbHeadBlue, .lbHeadGold, .lbHead, .lbHeadB, .btMain {
		font-size: 13px;
	}

	.ImFooter {
		width: 13px;
	}

	.lbBanner {
		font-size: 12px;
	}
}