/*@import url("AIBIUnit.css");*/
:root
{
	--scrollbar-width																		:8px;
	--scrollbar-track-width															:10px;
	--scrollbar-thumb-color															:#D7D7D7;
	--scrollbar-thumb-adius															:10px;
	--form-icon																					:linear-gradient(to bottom,#000000,#676767);
	--unit-bg																						:linear-gradient(to right,#000000,#676767);
	--unit-bg-pink																			:linear-gradient(to right,#EB0A68,#FEA1BE);
}
*::-webkit-scrollbar
{
	width:var(--scrollbar-width);
}
*::-webkit-scrollbar-track
{
	border-radius:var(--scrollbar-track-width);
}
*::-webkit-scrollbar-thumb
{
	background:var(--scrollbar-thumb-color);
	border-radius:var(--scrollbar-thumb-adius);
}
body{
	margin:0;
	overflow:hidden;
	position:relative;
	background:white;
	background-repeat:no-repeat;
	background-position:right bottom;
	/*background-image:radial-gradient(white,white,silver);*/
}
body *
{
	font-family:Tahoma,微軟正黑體;
	display:block;
}
html
{
	overflow-x:hidden;
	overflow-y:auto;
	height:100%;
}
form
{
	padding:0;
	margin:0;
}
@-webkit-keyframes circleRotate 
{
	0% 		{ -webkit-transform:rotate(0deg); 	}
	100% 	{ -webkit-transform:rotate(360deg); }
}
@keyframes circleRotate 
{
	0% 		{ transform: rotate(0deg); 					}
	100% 	{ transform: rotate(360deg); 				}
}
ul{
  display:block;
  list-style-type:disc;
  padding:0 0 0 20;
}
li{
  display:list-item;
  text-align:-webkit-match-parent;
}
p{
	margin:10 0 0 0;
	padding:0;
}
/********************************/
/********************************/
/********[Window Panel]**********/
/********************************/
/********************************/
[posi=WinPanel][pt=Close]
{
	position:absolute;
	top:5;
	right:5;
	width:30px;
	height:30px;
	font-size:22px;
	text-align:center;
}
[posi=WinPanel][pt=Title],[posi=WinPanel] [pt=Title]
{
	width:100%;
	padding:20 0;
	font-size:26px;
	font-weight:bold;
	text-align:center;
}
[posi=WinPanel][pt=Content]
{
	width:90%;
	margin:10 auto;
}
[pt=PanelComment]
{
	position:relative;
	margin:10 0;
}
[pt=PanelComment]>[pt=VISText]
{
	display:inline-block;
	width:40%;
}
[pt=PanelComment]>[pt=VISError]
{
	display:inline-block;
	width:60%;
	text-align:right;
	color:#FF8040;
	font-weight:bold;
}
[pt=PanelComment]>input
{
	width:100%;
	font-size:16px;
	margin:5 0 0 0;
	padding:0 0 0 40;
	line-height:35px;
	border-radius:20px;
	border:1px solid silver;
}
[pt=PanelComment]>label
{
	width:30px;
	height:30px;
	position:absolute;
	bottom:4;
	left:5;
	padding:5 0 0 0;
	color:white;
	font-size:20px;
	text-align:center;
	background:black;
	border-radius:50%;
	box-sizing:border-box;
}
[pt=Options]
{
	margin:20 0;
	font-weight:bold;
	display:grid;
	grid-template-columns:1fr 1fr;
}
[pt=Forget]
{
	text-align:right;
}
[pt=Divider]
{
	text-align:center;
	margin:10 0;
}
[pt=Button]
{
	padding:5 0;
	margin:10 0;
	color:white;
	border-radius:20px;
	display:flex;
	justify-content:center;
}
[pt=Button]>*
{
	display:inline-block;
}
[pt=Button]>[pt=Icon]
{
	width:26px;
	height:26px;
	padding:5 0 0 0;
	margin:0 10 0 0;
	text-align:center;
	color:black;
	background:white;
	border-radius:50%;
	box-sizing:border-box;
}
[for*=API]>[pt=Text]
{
	color:black;
	width:150px;
}
[pt=SMSCode]
{
	display:inline-block;
	min-width:100px;
	padding:5 10;
	color:white;
	font-size:14px;
	border-radius:20px;
	background:black;
}
[posi=DomLoading][pt=RoteCircle]
{
	width:13px;
	height:13px;
	margin:0 auto;
	border:3px solid white;
	border-radius:50%;
	border-top:3px solid gray;
	-webkit-animation:circleRotate 2s linear infinite;
	animation:circleRotate 2s linear infinite;
}
[posi=PanelMessage][pt=Content]
{
	width:90%;
	margin:200 auto 0 auto;
}
[posi=PanelMessage][pt=Icon]>img
{
	margin:0 auto 20 auto;
	max-width:150px;
	max-height:150px;
}
[posi=PanelMessage][pt=Text]
{
	width:100%;
	text-align:center;
	font-size:20px;
	font-weight:bold;
}
/********************************/
/********************************/
/*[Desktop Wrong Device Comment]*/
/********************************/
/********************************/
[posi=onDeviceError][pt=Container]
{
	width:100vw;
	height:100vh;
	color:#666666;
	background:#E2E2E2;
	display:flex;
	align-items:center;
	justify-content:center;
}
[posi=onDeviceError][pt=Content] img
{
	margin:0 auto;
	max-width:200px;
	max-height:200px;
}
/********************************/
/********************************/
/*****[Full,White Loading]*******/
/********************************/
/********************************/
[posi=Loading][pt=Container]
{
	position:absolute;
	top:0;
	left:0;
	z-index:99;
	width:100vw;
	height:100vh;
	background:white;
}
[posi=Loading][pt=RoteCircle]
{
	width:20px;
	height:20px;
	margin:30 auto;
	border:3px solid #E8E8E8;
	border-radius:50%;
	border-top:3px solid gray;
	-webkit-animation:circleRotate 2s linear infinite;
	animation:circleRotate 2s linear infinite;
}
[posi=Loading][pt=Logo]
{
	width:200px;
	margin:calc((100vh - 300px) / 2) auto 0 auto;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	border-radius:10px;
}
[posi=Loading][pt=Logo] img
{
	width:90%;
	height:90%;
	margin:0 auto;
	padding:5% 0 0 0;
}
/********************************/
/********************************/
/******[Full,Black Window]*******/
/********************************/
/********************************/
[posi=DialogMessage][pt=Content]
{
	position:absolute;
	width:80vw;
	height:100px;
	top:calc((100vh - 400px) / 2);
	left:10vw;
	z-index:100;
	background:white;
	border-radius:10px;
}
[posi=DialogMessage][pt=Display]
{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:40 0 30 0;
}
[posi=DialogMessage][pt=Icon]
{
	text-align:center;
	font-size:20px;
}
[posi=DialogMessage][pt=Text]
{
	color:#666666;
	font-size:16px;
}
[posi=ConfirmMessage][pt=Content],[posi=FullMessage][pt=Content]
{
	position:absolute;
	width:80vw;
	height:150px;
	top:calc((100vh - 400px) / 2);
	left:10vw;
	z-index:100;
	background:white;
	border-radius:10px;
}
[posi=ConfirmMessage][pt=Display],[posi=FullMessage][pt=Display]
{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:40 0 30 0;
}
[posi=ConfirmMessage][pt=Display]>*,[posi=ConfirmMessage][pt=Bottom]>*,[posi=FullMessage][pt=Display]>*
{
	display:inline-block;
}
[posi=ConfirmMessage][pt=Display]>[pt=Icon],[posi=FullMessage][pt=Display]>[pt=Icon]
{
	color:red;
	font-size:20px;
	padding:0 5;
}
[posi=ConfirmMessage][pt=Bottom]
{
	display:flex;
	align-items:center;
	justify-content:center;
}
[posi=ConfirmMessage][pt=Bottom]>*
{
	width:100px;
	color:white;
	font-weight:bold;
	background:#45860B;
	text-align:center;
	padding:5 0;
	margin:0 5;
	border-radius:20px;
}
[posi=ConfirmMessage][pt=Bottom]>[pt=ConfirmBtnN]
{
	background:#C40000;
}
[posi=BlackMask][pt=Container]
{
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:60;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.5);
}
[posi=BlackMask][pt=Content]
{
	position:absolute;
	top:5vh;
	left:5vw;
	width:90vw;
	height:80vh;
	background:white;
	border-radius:10px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=BlackMask][pt=RoteCircle]
{
	width:20px;
	height:20px;
	margin:30 auto;
	border:3px solid #E8E8E8;
	border-radius:50%;
	border-top:3px solid gray;
	-webkit-animation:circleRotate 2s linear infinite;
	animation:circleRotate 2s linear infinite;
}
[posi=BlackMask][pt=Logo]
{
	width:100px;
	margin:calc((100vh - 300px) / 2) auto 0 auto;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
/********************************/
/********************************/
/***********[Top Bar]************/
/********************************/
/********************************/
[posi=onTop][pt=Container]
{
	width:100vw;
	position:absolute;
	top:0;
	left:0;
	z-index:9;
}
[posi=onTop][pt=Conent]
{
	display:grid;
	grid-template-columns:auto 250px;
}
[posi=onTop][pt=TopLogo]
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  border-radius:0 0 50% 0;
	background:rgba(0,0,0,0.5);
	overflow:hidden;
}
[posi=onTop][pt=TopLogo] img
{
	max-width:95%;
	max-height:95%;
	margin:-50 0 0 0;
}
[posi=onTop][pt=TopIcon]
{
	position:relative;
	display:flex;
	align-items:flex-start;
	justify-content:flex-end;
	margin:10 10 0 0;
}
[posi=onTop][pt=TopIcon]>*
{
	display:inline-block;
	width:35px;
	height:35px;
	color:white;
	font-size:18px;
	text-align:center;
	padding:9 0 0 0;
	margin:0 0 0 5;
	background:rgba(0,0,0,0.5);
	border-radius:50%;
	box-sizing:border-box;
}
/********************************/
/********************************/
/********[Arrow Dialog]**********/
/********************************/
/********************************/
[posi=onTop][pt=EditPanel]
{
	position:absolute;
	width:200px;
	padding:10 0;
	top:65;
	left:calc((100vw - 200px) / 2);
  background:white;
  border-radius:10px;
	box-shadow:0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=onTop][pt=EditPanel]:after
{
	content:" ";
  position:absolute;
  right:50px;
  top:-15px;
  border-top:none;
  border-right:15px solid transparent;
  border-left:15px solid transparent;
  border-bottom:15px solid white;
}
[posi=onUserEditPanel][pt=Photo]
{
	margin:10 auto;
	display:flex;
	align-items:center;
	justify-content:center;
}
[posi=onUserEditPanel][pt=PhotoImg]
{
	width:50%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background-size:cover;
	background-repeat:no-repeat;
	border:2px solid silver;
	border-radius:50%;
}
[posi=onUserEditPanel][pt=Info],[posi=onUserEditPanel][pt=ToolBar]
{
	width:90%;
	margin:5 auto;
}
[posi=onUserEditPanel][pt=ToolBar]>*
{
	width:100%;
	height:35px;
	padding:10 0 0 0;
	color:white;
	font-size:18px;
	text-align:center;
	background:silver;
	border-radius:5px;
	box-sizing:border-box;
}
[posi=onUserEditPanel][pt=ToolBar]>*>*
{
	display:inline-block;
	vertical-align:middle;
}
[posi=onUserEditPanel][pt=ToolBar]>*>[pt=Text]
{
	font-size:14px;
	padding:0 0 0 5;
}
/********************************/
/********************************/
/********[Sliding Menu]**********/
/********************************/
/********************************/
[posi=onSlidingMenu][pt=Container]
{
	width:0;
	height:100vh;
	position:absolute;
	top:0;
	right:0;
	z-index:20;
	background:white;
}
[posi=onSlidingMenu][pt=Header]>*
{
	position:relative;
	width:70px;
	height:70px;
}
[posi=onSlidingMenu][pt=Logo]
{
	overflow:hidden;
	margin:50 auto 20 auto;
}
[posi=onSlidingMenu][pt=Logo] img
{
	max-width:90%;
	max-height:90%;
	padding:5% 0 0 0;
	margin:0 auto;
}
[posi=onSlidingMenu][pt=Close]
{
	position:absolute;
	top:5;
	left:5;
	width:50px;
	height:50px;
	color:#666666;
	font-size:28px;
	font-weight:bold;
}
[posi=onSlidingMenu][pt=MenuItems]
{
	width:80%;
	margin:0 auto;
}
[posi=onSlidingMenu][pt=Item]
{
	padding:5 0;
	border-bottom:1px solid silver;
}
[posi=onSlidingMenu][pt=ItemUsText]
{
	color:gray;
	font-size:12px;
	font-weight:bold;
}
winLoad[posi=Sliding][pt=Mask]
{
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	right:0;
	z-index:15;
	background:rgba(0,0,0,0.5);
}
/********************************/
/********************************/
/************[Index]*************/
/********************************/
/********************************/
[posi=onSlidingLink][pt=Container]
{
	position:fixed;
	bottom:20;
	right:10;
	z-index:8;
}
[posi=onSlidingLink][pt=Content]
{
	width:50px;
}
[posi=onSlidingLink][pt=Content]>*
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  border-radius:50%;
  border:2px solid white;
  color:white;
  font-size:28px;
 	display:flex;
	align-items:center;
  justify-content:center;
  margin:5 auto;
  box-shadow:0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=onSlidingLink][pt=Content]>[pt=ShopCart]
{
	position:relative;
	background:orange;
}
[posi=onSlidingLink][pt=Content]>[pt=OnlineService]
{
	background:#C40000;
}
[posi=onSlidingLink][pt=Content]>[pt=GoTop]
{
	background:#333333;
}
[posi=onSlidingLink][pt=Content]>[pt=MsgAdd]
{
  background:#01C203;
}
[posi=onSlidingLink][pt=Content]>[pt=FBLink]
{
  background:#3B5998;
}
[posi=onSlidingLink][pt=ShopNum]
{
	position:absolute;
	top:0;
	left:0;
	width:25px;
	height:25px;
	text-align:center;
	padding:3 0 0 0;
	font-size:12px;
	font-weight:bold;
	background:red;
	border-radius:50%;
	border:2px solid white;
	box-sizing:border-box;
}
[posi=onIndexMain][pt=Title]
{
	width:90%;
	margin:0 auto;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
[posi=onIndexMain][pt=IndexConent]
{
	width:90%;
	margin:0 auto;
	padding:105vw 0 30 0;
}
[posi=onIndexMain][pt=IndexConent] img,[posi=onIndexMain][pt=IndexConent] iframe
{
	position:relative !important;
	max-width:100% !important;
	min-height:200px;
	height:auto !important;
}
/********************************/
/********************************/
/**********[Advertise]***********/
/********************************/
/********************************/
[posi=onAdvertise][pt=Container]
{
	position:relative;
  background:silver;
}
[posi=onAdvertise][pt=Content]
{
	position:absolute;
	top:0;
	left:0;
}
[posi=onAdvertise][pt=Content]>*
{
	width:100vw;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	display:inline-block;
}
[posi=onAdvertise][pt=ImgLoader]
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
[posi=onAdvertise][pt=Control]
{
	position:absolute;
	top:150;
	left:5vw;
	z-index:50;
}
[posi=onAdvertise][pt=Control]>*
{
	width:10px;
	height:10px;
	margin:3 0;
	background-color:white;
	border-radius:50%;
}
/********************************/
/********************************/
/*********[Public Unit]**********/
/********************************/
/********************************/
[posi=onUnitAdvertise][pt=Content]
{
	position:absolute;
	top:0;
	left:0;
	z-index:-3;
}
[posi=onUnitAdvertise][pt=ADMask]
{
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	width:100vw;
	height:100vw;
	background:rgba(0,0,0,0.5);
}
[posi=onUnitAdvertise][pt=ADTextLoader]
{
	margin:25vh 0 0 0;
}
[posi=onUnitAdvertise][pt=ADTextTw],[posi=onUnitAdvertise][pt=ADTextUs]
{
	width:100%;
	text-align:center;
	font-size:28px;
	font-weight:bold;
	color:white;
}
[posi=onUnitAdvertise][pt=ADTextUs]
{
	font-size:14px;
}
[posi=onUnitMain][pt=Container]
{
	position:relative;
}
[posi=onUnitMain][pt=Content],[posi=onUnitContacts][pt=Content],[posi=onUnitEvents][pt=Content],[posi=onEditProfile][pt=Content],[posi=onUnitItemList][pt=Content],[posi=onUnitSubscription][pt=Content]
{
	position:static;
	z-index:5;
	width:100vw;
	margin:40vh 0 0 0;
	padding:0 0 300 0;
	background:white;
	border-radius:15px 15px 0 0;
	-webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
	box-shadow:0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=onUnitMain][pt=InsertText]
{
	width:85%;
	margin:0 auto;
	padding:30 0 0 0;
	line-height:1.5;
	font-family:Airal,微軟正黑體;
}
[posi=onUnitMain][pt=InsertText]
{
	line-height:1.5;
	font-family:Airal,微軟正黑體;
	/*word-break:break-all;*/
	text-align:justify;
}
[posi=onUnitMain][pt=InsertText] br
{
	display:block;
	margin:5 0 !important;
	line-height:10px !important;
}
[posi=onUnitMain][pt=InsertText] img,[posi=onUnitMain][pt=InsertText] iframe
{
	max-width:100%;
}
/********************************/
/********************************/
/***********[Events]*************/
/********************************/
/********************************/
[posi=onUnitEvents][pt=Fix]
{
	width:90%;
	margin:0 auto;
	padding:30 0;
}
[posi=onUnitEvents][pt=ItemContent]
{
	margin:10 auto;
}
[posi=onUnitEvents][pt=ItemTime]
{
	font-size:14px;
	text-align:right;
}
[posi=onUnitEvents][pt=ItemName]
{
	font-weight:bold;
	padding:5 0;
}
[posi=onUnitEvents][pt=ItemImage]
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background-size:cover;
	background-repeat:no-repeat;
}
[posi=onUnitEvents][pt=ItemText]
{
	width:95%;
	line-height:20px;
	margin:10 auto;
	text-align:justify;
}
[posi=onUnitEvents][pt=ItemText] img,[posi=onUnitEvents][pt=ItemText] iframe
{
	max-width:100% !important;
}
/********************************/
/********************************/
/******[Item List,Detial]********/
/********************************/
/********************************/
[posi=onUnitItemList][pt=Fix]
{
	width:90%;
	margin:0 auto;
	padding:30 0;
}
[posi=onUnitItemList][pt=openFilter]
{
	width:100%;
	height:40px;
	color:white;
	display:flex;
	align-items:center;
  justify-content:center;
	background:var(--form-icon);
	border-radius:10px;
}
[posi=onUnitItemList][pt=openFilter]>*
{
	display:inline-block;
}
[posi=onUnitItemList][pt=openFilter]>[pt=Icon]
{
	font-size:20px;
	padding:0 8 0 0;
}
[posi=onUnitItemList][pt=SearchBar]
{
	position:relative;
	margin:20 0 0 0;
}
[posi=onUnitItemList][pt=SearchBar]>label
{
	position:absolute;
	top:3;
	left:3;
	width:35px;
	height:35px;
	color:white;
	background:var(--form-icon);
	font-size:20px;
	border-radius:10px;
	display:flex;
	align-items:center;
  justify-content:center;
}
[posi=onUnitItemList][pt=SearchBar]>input
{
	width:100%;
	height:40px;
	padding:0 0 0 40;
	font-size:16px;
	border:1px solid silver;
	border-radius:10px;
}
[posi=onUnitItemList][pt=Title]
{
	padding:20 0 10 0;
	font-size:24px;
	font-weight:bold;
}
[posi=onUnitItemList][pt=TagContent]>*
{
	display:inline-block;
	padding:3 5;
	margin:0 5 0 0;
	color:black;
	font-size:16px;
	border:1px solid gray;
	border-radius:10px;
}
[posi=onUnitItemList][pt=tagItem][ItState=Disable]
{
	color:black
	background:white;
	border:1px solid black;
}
[posi=onUnitItemList][pt=tagItem][ItState=Enable]
{
	color:white;
	background:#C40000;
	border:1px solid #C40000;
}
[posi=onUnitItemList][pt=LisTitle]
{
	padding:20 0 10 0;
	font-size:18px;
}
[posi=onUnitItemList][pt=ListContent]
{
	display:grid;
	grid-template-columns:1fr 1fr;
	row-gap:10px;
}
[posi=onItemListContent][pt=ItemRow]
{
	width:95%;
	margin:0 auto;
	border-radius:5px;
	box-shadow:0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=onItemListContent][pt=ItemPhoto]
{
	padding:10 0;
}
[posi=onItemListContent][pt=ItemPhotoLoader]
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background-size:cover;
	background-repeat:no-repeat;
}
[posi=onItemListContent][pt=ItemName]
{
	padding:5 0 10 8;
	width:calc(50vw - 40px);
	white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
[posi=onItemDetial][pt=Content]
{
	width:100%;
	border-radius:10px;
	box-shadow:0 0 2px 2px rgba(0,0,0,0.1);
	padding:10 0;
}
[posi=onItemDetial][pt=ItemPhotoLoader]
{
	width:98%;
	margin:10 auto 3 auto;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background-size:cover;
	background-repeat:no-repeat;
}
[posi=onItemDetial][pt=ItemPhotoList]
{
	width:98%;
	margin:0 auto;
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
}
[posi=onItemDetial][pt=ItemIcon]
{
	width:100%;
	margin:0 auto;
}
[posi=onItemDetial][pt=ItemIcon]>*
{
	width:95%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background-size:cover;
	background-repeat:no-repeat;
}
[posi=onItemDetial][pt=ItemDetial]
{
	width:95%;
	margin:10 auto;
}
[posi=onItemDetial][pt=ItemName]
{
	padding:0 0 10 0;
	font-weight:bold;
}
[posi=onItemDetial][pt=ItemCode]
{
	color:silver;
	font-size:12px;
	font-weight:bold;
	padding:0 0 3 0;
}
[posi=onItemDetial][pt=ItemPrice]
{
	display:grid;
	grid-template-columns:1fr 1fr;
}
[posi=onItemDetial][pt=ItemPrice]>*
{
	padding:3 0;
}
[posi=onItemDetial][pt=Description]
{
	line-height:25px;
	/*text-align:justify;*/
}
[pt=AddToCart]
{
	color:white;
	background:#C40000;
	border-radius:5px;
	padding:10 0;
	margin:10 0 0 0;
	display:flex;
	align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
[pt=AddToCart]>*
{
	display:inline-block;
	padding:0 5 0 0
}
/********************************/
/********************************/
/***********[Shop Cart]**********/
/********************************/
/********************************/
[pt=itemHeader]
{
	display:grid;
	grid-template-columns:70% auto;
}
[pt=itemSubmit]
{
	width:100%;
	padding:10 0;
	text-align:center;
	color:white;
	background:#C40000;
	border-radius:5px;
}
[posi=onCartPanel][pt=itemList]
{
	width:100%;
	height:70%;
	overflow-x:hidden;
	overflow-y:auto;
	margin:10 0 0 0;
}
[posi=onCartPanel][pt=itemList] *
{
	font-size:14px;
	vertical-align:middle;
}
[posi=onCartPanel][pt=itemRow]
{
	width:95%;
	margin:10 auto 30 auto;
	background:#F6F6F6;
	border-radius:5px;
	box-shadow:0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=onCartPanel][pt=itemRow]>*
{
	width:95%;
	margin:0 auto;
	padding:10 0;
}
[posi=onCartPanel][pt=itemCode],[posi=onItemDetial][pt=itemTotal]
{
	padding:0 0 5 0;
}
[posi=onCartPanel][pt=PhotoLoader]
{
	width:95%;
	margin:0 auto;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background-size:cover;
	background-repeat:no-repeat;
	border-radius:5px;
}
[posi=onCartPanel][pt=ItemData]
{
	width:95%;
	margin:0 auto;
	padding:10 0;
	display:grid;
	grid-template-columns:80px auto;
}
[posi=onCartPanel][pt=ItemQuantity] input
{
	width:40px;
	height:23px;
	margin:0 0 0 10;
	text-align:center;
	border-radius:5px;
	border:1px solid silver;
}
[posi=onCartPanel][pt=ItemQuantity]>*
{
	display:inline-block;
}
[posi=onCartPanel][pt=ItemRemove]
{
	color:gray;
	font-size:18px;
	padding:0 0 0 20;
}
[posi=onPostAsePanel][pt=Content]
{
	width:100%;
}
[posi=onPostAsePanel][pt=Icon]
{
	margin:0 auto;
	width:60%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  display:flex;
	align-items:flex-end;
  justify-content:center;
}
[posi=onPostAsePanel][pt=Text]
{
	width:100%;
	text-align:center;
	padding:30 0;
}
/********************************/
/********************************/
/***********[CheckOut]***********/
/********************************/
/********************************/
[posi=onCheckOutPanel][pt=Content]
{
	height:80%;
	overflow-x:hidden;
	overflow-y:auto;
}
[posi=onCheckOutPanel][pt=PayCode]
{
	padding:0 0 10 0;
}
[posi=onCheckOutPanel][pt=PayContent]
{
	padding:10 0 20 0;
	background:#F2F2F2;
	border-radius:5px;
}
[posi=onCheckOutPanel][pt=PayContent] *
{
	font-size:14px;
}
[posi=onCheckOutPanel][pt=PayContent]>*
{
	width:95%;
	margin:0 auto;
}
[posi=onCheckOutPanel][pt=itemCode]
{
	color:gray;
	font-size:12px;
	font-weight:bold;
	padding:10 0 0 0;
}
[posi=onCheckOutPanel][pt=itemInfo]
{
	padding:10 0;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	border-bottom:1px gray solid;
}
[posi=onCheckOutPanel][pt=PayTotal]
{
	padding:10 0 0 0;
}
[posi=onCheckOutPanel][pt=PayTitle]
{
	padding:20 0 10 0;
	text-align:center;
	font-size:22px;
	font-weight:bold;
}
[posi=onCheckOutPanel][pt=Icon],[posi=onUnitContacts][pt=Text]
{
	display:inline-block;
}
[posi=onCheckOutPanel][pt=Icon]
{
	width:30px;
	text-align:center;
	font-size:18px;
}
[posi=onCheckOutPanel][pt=Text]
{
	font-size:16px;
}
[posi=onCheckOutPanel][pt=Title]
{
	font-size:18px;
	font-weight:bold;
	margin:30 0 20 0;
}
[posi=onCheckOutPanel][pt=Comment]
{
	position:relative;
	margin:10 0 0 0;
	font-weight:bold;
}
[posi=onCheckOutPanel][pt=Comment]>*
{
	display:inline-block;
}
[posi=onCheckOutPanel][pt=Comment]>[pt=Error]
{
	display:none;
	color:#FD6102;
	float:right;
  text-align:right;
}
[posi=onCheckOutPanel][pt=Comment]>label
{
	bottom:3;
	left:3;
	width:30px;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	position:absolute;
	padding:7 0 0 0;
	text-align:center;
	color:white;
	background:#666666;
	border-radius:50%;
	box-sizing:border-box;
}
[posi=onCheckOutPanel][pt=Comment][for=PayWay]
{
	position:relative;
}
[posi=onCheckOutPanel][pt=DropMenu][for=PayWay]
{
	position:absolute;
	top:58;
	left:0;
	z-index:9;
	width:calc(100% - 2px);
	padding:5 0;
	background:#F2F2F2;
	border-radius:10px;
	border:1px solid silver;
}
[posi=onCheckOutPanel][pt=DropMenu][for=PayWay]>*
{
	width:90%;
	margin:0 auto;
	padding:5 0;
	font-size:14px;
}
[posi=onCheckOutPanel][pt=Comment] input
{
	width:100%;
	height:36px;
	font-size:16px;
	padding:0 0 0 35;
	color:#666666;
	border:1px solid silver;
	border-radius:20px;
}
[posi=onCheckOutPanel][pt=Comment] input::placeholder,[posi=onCheckOutPanel][pt=Comment] textarea::placeholder
{
	color:silver;
	font-size:16px;
	font-weight:normal;
	padding:0;
}
[posi=onCheckOutPanel][pt=Comment] textarea
{
	width:100%;
	height:100px;
	padding:5 0 0 5;
	color:#666666;
	font-size:16px;
	border:1px solid silver;
	border-radius:10px;
}
[pt=PaySubmit]
{
	color:white;
	background:#C40000;
	border-radius:5px;
	padding:10 0;
	margin:10 0 0 0;
	display:flex;
	align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
[pt=PaySubmit]>*
{
	display:inline-block;
	padding:0 5 0 0
}
/********************************/
/********************************/
/*********[Payment List]*********/
/********************************/
/********************************/
[posi=onUnitSubscription][pt=PayItemList]
{
	width:95%;
	margin:0 auto;
	padding:20 0;
}
[posi=onPayItemList][pt=ItemRow]
{
	width:95%;
	display:grid;
	grid-template-columns:20px auto 140px;
	row-gap:10px;
}
[posi=onPayItemList][pt=ItemRow]>*
{
	font-size:14px;
}
[posi=onUnitSubscription][pt=Console]
{
	position:relative;
	width:95%;
	margin:0 auto;
	padding:30 0 10 0;
}
[posi=onUnitSubscription] input
{
	width:100%;
	height:36px;
	font-size:16px;
	padding:0 0 0 35;
	color:#666666;
	border:1px solid silver;
	border-radius:20px;
}
[posi=onUnitSubscription] label
{
	position:absolute;
	top:33;
	left:4;
	width:31px;
	height:31px;
	color:white;
	text-align:center;
	padding:7 0 0 0;
	background:var(--form-icon);
	border-radius:50%;
	box-sizing:border-box;
}
/********************************/
/********************************/
/*********[Contact Form]*********/
/********************************/
/********************************/
[posi=onUnitContacts][pt=Fix]
{
	width:80%;
	margin:10 auto;
}
[posi=onUnitContacts][pt=ComTwName]
{
	margin:0 0 5 0 !important;
	padding:30 0 0 0 !important;
	font-size:20px;
	font-weight:bold;
}
[posi=onUnitContacts][pt=ComUsName]
{
	margin:0 0 30 0 !important;
	font-size:14px;
	font-weight:bold;
}
[posi=onUnitContacts][pt=Header]>*
{
	margin:0 0 15 0;
}
[posi=onUnitContacts][pt=Icon],[posi=onUnitContacts][pt=Text]
{
	display:inline-block;
}
[posi=onUnitContacts][pt=Icon]
{
	width:30px;
	text-align:center;
	font-size:18px;
}
[posi=onUnitContacts][pt=Text]
{
	font-size:16px;
}
[posi=onUnitContacts][pt=Title]
{
	font-size:18px;
	font-weight:bold;
	margin:30 0 20 0;
}
[posi=onUnitContacts][pt=Comment]
{
	position:relative;
	margin:10 0 0 0;
	font-weight:bold;
}
[posi=onUnitContacts][pt=Comment]>*
{
	display:inline-block;
}
[posi=onUnitContacts][pt=Comment]>[pt=Error]
{
	display:none;
	color:#FD6102;
	float:right;
  text-align:right;
}
[posi=onUnitContacts][pt=Comment]>label
{
	bottom:3;
	left:3;
	width:30px;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	position:absolute;
	padding:7 0 0 0;
	text-align:center;
	color:white;
	background:#666666;
	border-radius:50%;
	box-sizing:border-box;
}
[posi=onUnitContacts][pt=Comment] input
{
	width:100%;
	height:36px;
	font-size:16px;
	padding:0 0 0 35;
	color:#666666;
	border:1px solid silver;
	border-radius:20px;
}
[posi=onUnitContacts][pt=Comment] input::placeholder,[posi=onUnitContacts][pt=Comment] textarea::placeholder
{
	color:silver;
	font-size:16px;
	font-weight:normal;
	padding:0;
}
[posi=onUnitContacts][pt=Comment] textarea
{
	width:100%;
	height:100px;
	padding:5 0 0 5;
	color:#666666;
	font-size:16px;
	border:1px solid silver;
	border-radius:10px;
}
[posi=onUnitContacts][pt=Submit]
{
	width:100%;
	color:white;
	background:black;
	text-align:center;
	padding:8 0;
	margin:20 0 0 0;
	border-radius:20px;
}
/********************************/
/********************************/
/**********[Profile]*************/
/********************************/
/********************************/
[posi=onEditProfile][pt=Fix]
{
	display:block;
	width:80%;
	margin:10 auto;
	border:1px solid rgba(0,0,0,0);
}
[posi=onEditProfile][pt=Title]
{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:0 0 20 0;
}
[posi=onEditProfile][pt=PFPhoto]
{
	position:relative;
	width:50%;
	margin:20 auto;
}
[posi=onEditProfile][pt=PFPDisplay]
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	border-radius:50%;
	background-color:silver;
	background-size:cover;
	background-repeat:no-repeat;
	border:3px solid white;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=onEditProfile][pt=PFPEdit]
{
	position:absolute;
	right:5;
	top:5;
	width:30px;
	height:30px;
	padding:7 0 0 0;
	text-align:center;
	color:white;
	background:gray;
	border-radius:50%;
	box-sizing:border-box;
}
[posi=onEditProfile][pt=Title]
{
	width:95%;
	margin:0 auto;
	padding:15 0 10 0;
	font-size:18px;
	font-weight:bold;
	text-align:center;
}
[posi=onEditProfile][pt=FormContent]
{
	width:95%;
	margin:0 auto;
}
[posi=onEditProfile][pt=FormContent] [pt=Comment]
{
	position:relative;
	margin:20 auto;
}
[posi=onEditProfile][pt=FormContent] [pt=Comment]>*
{
	display:inline-block;
}
[posi=onEditProfile][pt=FormContent] [pt=SingleRadio]
{
	width:100%;
	display:block;
}
[posi=SingleRadio][pt=Content]
{
	width:100%;
	display:grid;
	grid-template-columns:1fr 1fr;
	row-gap:10px;
}
[posi=SingleRadio][pt=Item]
{
	width:90%;
	padding:5 0 5 10;
	background:white;
	border-radius:20px;
	border:1px solid silver;
}
[posi=SingleRadio][pt=Item][itemMode=Enable]
{
	color:white;
	background:var(--form-icon);
	border:0;
}
[posi=SingleRadio][pt=Item]>*
{
	display:inline-block;
	padding:0 10 0 0;
}
[posi=onEditProfile][pt=SelectItem]
{
	width:100%;
	display:grid;
	grid-template-columns:80px auto;
}
[posi=onEditProfile][pt=Text]
{
	color:#1E8F9E;
	padding:0 0 0 10;
}
[posi=onEditProfile][pt=DPText]
{
	width:100%;
}
[posi=onEditProfile][pt=FormContent] label
{
	position:absolute;
	left:5;
	bottom:5;
	width:31px;
	height:31px;
	color:white;
	text-align:center;
	padding:7 0 0 0;
	background:var(--form-icon);
	border-radius:50%;
	box-sizing:border-box;
}
[posi=onEditProfile][pt=FormContent] input
{
	display:block;
	width:100%;
	height:40px;
	padding:0 0 0 40;
	font-size:16px;
	font-weight:normal;
	border:1px solid silver;
	border-radius:20px;
}
[posi=onEditProfile][pt=Bottom]
{
	width:95%;
	margin:0 auto 30 auto;
	padding:10 0 0 0;
}
[posi=onEditProfile][pt=Submit]
{
	width:100%;
	color:white;
	background:var(--form-icon);
	text-align:center;
	padding:8 0;
	margin:20 0 0 0;
	border-radius:20px;
}
[posi=onEditProfile][pt=Submit]>*
{
	display:inline-block;
	color:white;
}
[posi=onEditProfile][pt=Button]
{
	width:80px;
	padding:5 0 5 10;
	background:var(--form-icon);
	border-radius:20px;
}
[posi=onEditProfile][pt=Button]>*
{
	display:inline-block;
	color:white;
}
/*****************************/
/*****************************/
/*******[Photo Corpper]*******/
/*****************************/
/*****************************/
[posi=onPhotoCorpper][pt=Container]
{
	width:94%;
	height:calc(100% - 100px);
	margin:0 auto;
}
[posi=onPhotoCorpper][pt=Content]
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background:#F2F2F2;
  border:3px dashed gray;
  box-sizing:border-box;
}
[posi=onPhotoCorpper] label
{
	width:100%;
	height:100%;
	padding:calc((100% - 100px) / 2) 0 0 0;
	box-sizing:border-box;
}
[posi=onPhotoCorpper] label>*
{
	display:block;
	color:#666666;
	margin:5 auto;
	text-align:center;
}
[posi=onPhotoCorpper] label>[pt=Icon]
{
	font-size:48px;
}
[posi=onPhotoCorpper][pt=Editor]
{
	position:relative;
}
[posi=onPhotoCorpper] canvas
{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
[pt=ImageToolbar]
{
	width:40px;
	position:absolute;
	top:5;
	right:5;
	z-index:2;
}
[pt=ImageToolbar]>*
{
	display:block;
	width:40px;
	height:40px;
	color:white;
	margin:0 0 5 0;
	padding:7 0 0 0;
	text-align:center;
	font-size:20px;
	background:var(--form-icon);
	border-radius:50%;
	border:2px solid white;
	box-sizing:border-box;
}
/*****************************/
/*****************************/
/*******[Element Panel]*******/
/*****************************/
/*****************************/
[posi=WinPanel][pt=PanelContent]
{
	width:90%;
	height:calc(100% - 100px);
	margin:0 auto;
}
[posi=WinPanel][pt=PanelContent]::-webkit-scrollbar-thumb
{
	background:#666666;
	border-radius:var(--scrollbar-thumb-adius);
}
[posi=onElementPanel][pt=ItemRow]>*,[posi=onElementRelate][pt=NextItemRow]>*
{
	display:inline-block;
	padding:5 0 5 10;
}
[posi=onElementPanel][pt=ItemContent]
{
	display:none;
	width:85%;
	margin:5 0 5 10%;
	background:#F2F2F2;
	border-radius:10px;
}
[pt=ItemContent]>[posi=DomLoading][pt=Content]
{
	width:90%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	display:flex;
	align-items:center;
  justify-content:center;
}
/********************************/
/********************************/
/*********[Footer Bar]***********/
/********************************/
/********************************/
[posi=onFooter][pt=Container]
{
	/*
	position:absolute;
	bottom:0;
	left:0;
	z-index:6;
	*/
	width:100vw;
	padding:30 0 0 0;
	background:#666666;
	-webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}
[posi=onFooter][pt=Content]
{
	display:grid;
	grid-template-columns:90px 120px auto;
}
[posi=onFooter][pt=Logo]
{
	width:80px;
	margin:10 0 0 10;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  background:rgba(0,0,0,0.5);
  border-radius:10px;
  overflow:hidden;
}
[posi=onFooter][pt=Logo] img
{
	max-width:95%;
	max-height:95%;
	margin:0 auto;
	padding:5% 0 0 0;
	box-sizing:border-box;
}
[posi=onFooter][pt=Link]
{
	margin:10 0 0 10;
}
[posi=onFooter][pt=LinkItem]>*
{
	color:white;
	padding:0 0 8 0;
}
[posi=onFooter][pt=GoogleMap]
{
	width:calc(100% - 10px);
	margin:10 0 0 0;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
}
[posi=onFooter][pt=CopyRight]
{
	margin:30 0 0 0;
	padding:0 0 20 0;
}
[posi=onFooter][pt=CopyRightTw],[posi=onFooter][pt=CopyRightUs]
{
	padding:0 0 5 0;
	text-align:center;
	color:white;
	font-size:14px;
}
[posi=onFooter][pt=CopyRightUs]
{
	font-size:12px;
	font-weight:bold;
}
label[posi=IconFont],[IconFont=FAwesome]
{
	font-family:"FontAwesome";
}