@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,#1E8F9E,#6EC225);
	--unit-bg																						:linear-gradient(to right,#1E8F9E,#6EC225);
	--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;
}
li
{
  display:list-item;
  text-align:-webkit-match-parent;
}
/********************************/
/********************************/
/***[Desktop Device Redirect]****/
/********************************/
/********************************/
[posi=RedirEPS][pt=Container]
{
	width:100vw;
	height:100vh;
}
[posi=RedirEPS][pt=Content]>*
{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 0 15 0;
}
[posi=RedirEPS][pt=Icon]
{
	width:100px;
	height:100px;
	padding:8;
	margin:50 auto 20 auto;
	background:linear-gradient(to bottom,#FFFFFF,#E0E0E0);
	border:2px solid white;
	border-radius:50%;
	-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=RedirEPS][pt=Icon]>img
{
	max-width:80px;
	max-height:80px;
}
[posi=RedirEPS][pt=Text]
{
	color:gray;
}
[posi=RedirEPS][pt=Button]
{
	cursor:pointer;
	width:180px;
	padding:5 10;
	margin:0 auto;
	color:white;
	text-align:center;
	background:orange;
	border-radius:5px;
	border:1px solid #FDA502;
}
/********************************/
/********************************/
/*****[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:100px;
	margin:calc((100vh - 200px) / 2) auto 0 auto;
	background-image:url("../images/AIBILogo.png");
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
/********************************/
/********************************/
/******[Full,Black Window]*******/
/********************************/
/********************************/
[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:39;
	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;
	background-image:url("../images/AIBILogo.png");
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
/******************************************************/
/******************************************************/
/********[User Login,Register,Reset Password]**********/
/******************************************************/
/******************************************************/
[posi=BlackMask][pt=InsertDom]
{
	display:none;
	width:100%;
}
[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=WinPanel][pt=Close]
{
	position:absolute;
	top:5;
	right:5;
	width:30px;
	height:30px;
	font-size:22px;
	text-align:center;
}
[posi=WinPanel][pt=Title],[posi=SETPW][pt=Title]
{
	width:100%;
	padding:20 0;
	font-size:26px;
	font-weight:bold;
	text-align:center;
}
[posi=WinPanel][pt=TabContainer]
{
	width:85%;
	margin:0 auto;
	background:#E2E2E2;
	padding:5;
	display:grid;
	grid-template-columns:1fr 1fr;
	border-radius:5px;
}
[posi=WinPanel][pt=Tab]
{
	width:85%;
	font-weight:bold;
	text-align:center;
	background:white;
	padding:5 0;
	border-radius:5px;
}
[posi=WinPanel][pt=Tab][statEm=Disable]
{
	background:#E2E2E2;
}
[posi=WinPanel][pt=TabContent]
{
	width:85%;
	margin:15 auto 0 auto;
}
[pt=VISComment]>*,[pt=EPSComment]>*,[pt=Comment]>*
{
	display:inline-block;
	font-weight:bold;
	padding:5 0;
}
[pt=VISText],[pt=EPSText],[pt=Comment]>[pt=Text]
{
	width:50%;
}
[pt=VISError],[pt=EPSError],[pt=Comment]>[pt=Error]
{
	display:none;
	width:50%;
	color:#FF8000;
	text-align:right;
}
[posi=WinPanel][pt=TabContent] input
{
	width:100%;
	height:40px;
	color:#666666;
	font-weight:normal;
	font-size:16px;
	padding:0 0 0 8;
	border:1px solid gray;
	border-radius:5px;
}
[pt=VISubmit],[pt=EPSubmit],[pt=Submit]
{
	width:100%;
	color:white;
	background:black;
	text-align:center;
	padding:8 0;
	margin:20 0 0 0;
	border-radius:20px;
}
[pt=VISHtmlText][HId="1"]>*,[pt=EPSHtmlText][HId="1"]>*
{
	display:inline-block;
	width:50%;
	font-weight:bold;
	margin:15 0 0 0;
	padding:5 0;
}
[pt=VISHtmlText][HId="1"]>[pt=VISTextRight],[pt=EPSHtmlText][HId="1"]>[pt=EPSTextRight]
{
	text-align:right;
}
[pt=VISHtmlText][HId="2"]>[pt=VISText]
{
	width:100%;
	padding:8 0;
	text-align:center;
}
[pt=VISHtmlText][HId="3"]>[pt=VISText],[pt=EPSHtmlText][HId="3"]>[pt=EPSText],[pt=HtmlText][HId="3"]>[pt=Text]
{
	font-size:14px;
	padding:5 10;
	margin:10 0;
	color:white;
	text-align:center;
	background:black;
	border-radius:20px;
	border:1px solid gray;
}
[HId="2"]>[posi=EPSLogin][pt=EPSText]
{
	margin:10 auto;
	width:100%;
	color:red;
	font-size:14px;
}
[pt=GoogleAPI],[pt=FacebookAPI]
{
	width:100%;
	padding:10 0;
	margin:0 0 15 0;
	border-radius:8px;
	border:1px solid #666666;
}
[pt=GoogleAPI]>*,[pt=FacebookAPI]>*
{
	display:inline-block;
	color:#666666;
	font-size:14px;
	vertical-align:middle;
}
[pt=GoogleAPI]>[pt=Text],[pt=FacebookAPI]>[pt=Text]
{
	width:50%;
}
[pt=GoogleAPI]>[pt=Icon],[pt=FacebookAPI]>[pt=Icon]
{
	margin:0 5 0 calc((100vw - 180px) / 2);
	font-size:20px;
}
[pt=GoogleAPI]>[pt=Icon]
{
	color:#EA4335;
}
[pt=FacebookAPI]>[pt=Icon]
{
	color:#45568E;
}
[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;
}

/********************************/
/********************************/
/***********[Top Bar]************/
/********************************/
/********************************/
[posi=onTop][pt=Container]
{
	position:absolute;
	top:0;
	left:0;
	z-index:9;
	width:100vw;
	padding:8 0;
	background:rgba(0,0,0,0.2);
}
[posi=onTop][pt=Content]
{
	width:100vw;
	display:grid;
	grid-template-columns:80px auto 80px;
}
[posi=onTop][pt=Content]>[pt=SearchIcon]
{
	width:100%;
	text-align:center;
	font-size:20px;
	color:white;
	padding:8 0 0 0;
}
[posi=onTop][pt=Title]
{
	text-align:center;
	font-size:28px;
	font-weight:bold;
	color:white;
}
[posi=onTop][pt=TopIcon]
{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	margin:0 10 0 0;
}
[posi=onTop][pt=TopIcon]>*
{
	font-size:20px;
	color:white;
	display:inline-block;
	margin:0 5 0 5;
}
[posi=onTopIcon][pt=Bell]
{
	position:relative;
}
[posi=onTopIcon][pt=BellCount]
{
	position:absolute;
	top:0;
	left:-5;
	width:16px;
	height:16px;
	padding:1 0 0 0;
	text-align:center;
	background:#C40000;
	font-size:12px;
	font-weight:bold;
	border-radius:50%;
	box-sizing:border-box;
}
/********************************/
/********************************/
/********[Bell Message]**********/
/********************************/
/********************************/
[posi=onContactMsg][pt=Content]
{
	width:95%;
	height:80%;
	margin:0 auto;
	overflow-x:hidden;
	overflow-y:auto;
}
[posi=onContactMsg][pt=Item]
{
	display:grid;
	grid-template-columns:80px auto;
	border-bottom:1px solid #CACACA;
	padding:0 0 10 0;
}
[posi=onContactMsg][pt=Item]:first-child
{
	border-radius:10px 10px 0 0;
}
[posi=onContactMsg][pt=Item]:last-child
{
	border-radius:0 0 10px 10px;
	border:0;
}
[posi=onContactMsg][pt=Photo]
{
	width:60px;
	margin:10 auto;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	background:gray;
	border-radius:50%;
	color:white;
	font-size:18px;
	font-weight:bold;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
[posi=onContactMsg][pt=TimeLocation]
{
	color:silver;
	font-size:12px;
	text-align:right;
	padding:5 5 5 0;
}
[posi=onContactMsg][pt=VisitMobile],[posi=onContactMsg][pt=VisitName],[posi=onContactMsg][pt=VisitEmail]
{
	color:#666666;
	font-size:14px;
	padding:0 0 0 5;
}
[posi=onContactMsg][pt=VisitMessage]
{
	width:100%;
	grid-column:1/3;
	color:#666666;
	font-size:14px;
	padding:5 10;
}
/********************************/
/********************************/
/**********[Advertise]***********/
/********************************/
/********************************/
[posi=Advertise][pt=Container]
{
	position:relative;
  background:silver;
}
[posi=Advertise][pt=Content]
{
	position:absolute;
	top:0;
	left:0;
}
[posi=Advertise][pt=Content]>*
{
	width:100vw;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	display:inline-block;
}
[posi=Advertise][pt=ImgLoader]
{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
[posi=Advertise][pt=Control]
{
	position:absolute;
	top:80;
	left:5vw;
	z-index:9;
}
[posi=Advertise][pt=Control]>*
{
	width:10px;
	height:10px;
	margin:3 0;
	background-color:white;
	border-radius:50%;
}
/********************************/
/********************************/
/*******[Index Main Page]********/
/********************************/
/********************************/
[posi=IndexMain][pt=Container]
{
	position:absolute;
	left:0;
	bottom:0;
	width:100vw;
	height: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=IndexMain][pt=Content]
{
	width:90vw;
	margin:30 auto 0 auto;
}
[posi=IndexMain][pt=MainIcon]
{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	align-items:center;
	justify-content:center;
}
[posi=IndexMain][pt=MainIconItem] [pt=Icon]
{
	width:80%;
	font-size:24px;
	text-align:center;
	aspect-ratio:1/1;
	object-fit:cover;
  object-position:center;
  border-radius:5px;
  border:1px solid silver;
  padding:20 0 0 0;
  box-sizing:border-box;
}
[posi=IndexMain][pt=MainIconItem] [pt=Text]
{
	font-size:12px;
	text-align:center;
	color:gray;
	padding:5 0;
}
/********************************/
/********************************/
/*********[Footer Bar]***********/
/********************************/
/********************************/
[posi=Footer][pt=Container]
{
	position:fixed;
	bottom:0;
	left:0;
	z-index:9;
}
[posi=Footer][pt=Content]
{
	position:relative;
	width:100vw;
	display:grid;
	grid-template-columns:1fr 1fr 2fr 1fr 1fr;
	-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=Footer][pt=Content]>*
{
	width:100%;
	text-align:center;
	background:white;
}
[posi=Footer][pt=Display]
{
	width:100%;
	margin:10 0;
}
[posi=Footer][pt=LOGO]
{
	position:absolute;
	left:calc((100vw - 90px) / 2);
	bottom:5;
	z-index:19;
	padding:8;
	background:linear-gradient(to bottom,#FFFFFF,#E0E0E0);
	border:2px solid white;
	border-radius:50%;
	-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=Footer][pt=LOGO] img
{
	margin:0 auto;
	max-width:80px;
	max-height:80px;
}
[posi=Footer][pt=Icon]
{
	font-size:20px;
	padding:0 0 5 0;
}
[posi=Footer][pt=Text]
{
	font-size:14px;
}
/*****************************/
/*****************************/
/*******[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;
}
/*****************************/
/*****************************/
/*******[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;
}
label[posi=IconFont],[IconFont=FAwesome]
{
	font-family:"FontAwesome";
}