/****public****/
:root
{
	--gradient-black	:linear-gradient(to bottom,#000000,gray);
	--gradient-orange	:linear-gradient(to bottom,#FF8000,#FF972F);
	--gradient-blue		:linear-gradient(to bottom,#70BFEB,#209BE1);
	--faw							:"FontAwesome";
	--ci-color				:#669F4B;
}

/****desktop****/
@media only screen and (min-width: 769px) and (max-width: 1920px)
{
	body
	{
		background:#f2f2f2;
		height:100%;
		display:flex;
		flex-direction:column;
	}
	mainmenu
	{
		display:none !important;
		border:1px solid red;
	}
	/****top bar****/
	content[com=TopBlock]
	{
		width:100%;
		height:80px;
		background:rgb(102,159,75,0.8);
		position:absolute;
		top:0;
		left:0;
		z-index:5;
	}
	content[com=TopLogo]
	{
		margin:10 0 0 5;
		display:inline-block;
	}
	content[com=TopLogo]>content
	{
		display:inline-block;
	}
	content[com=TopLogo-title]
	{
		margin:0 0 0 10;
		vertical-align:top;
	}
	content[com=TopLogo-title]>content[com*=-CN]
	{
		font-size:22px;
		color:#FFF;
	}
	content[com=TopLogo-title]>content[com*=-EN]
	{
		font-size:14px;
		font-family:"Tahoma";
		color:#FFF;
	}
	content[com=TopLogo-photo]>img
	{
		max-height:60px;
		cursor:pointer;
	}
	/****top menu****/
	content[com=TopMenu]
	{
		position:absolute;
		bottom:0;
		left:600;
		z-index:10;
	}
	content[com=TopMenu]>content[com*=Menu-item]
	{
		display:inline-block;
		width:120px;
		padding:10 0;
		text-align:center;
		color:#FFF;
		font-size:18px;
		font-weight:bold;
		cursor:pointer;
	}
	content[com=TopMenu]>content[com*=Menu-item]:hover,
	content[com*=Footer-Menu-item]:hover
	{
		color:orange;
	}
	/****banner****/
	content[com=index-banner]
	{
		position:relative;
		width:100%;
		height:500px;
		background:#1C1C1C;
		-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
  	box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
	}
	content[com=textUp],
	content[com=textDown]
	{
		position:absolute;
		top:200;
		left:100;
		color:#FFF;
		font-size:28px;
		font-weight:bold;
		text-shadow:1px 1px 5px black;
	}
	content[com=textDown]
	{
		top:250;
		left:155;
	}
	content[com=index-banner-photo]>img
	{
		float:right;
	}
	/****body****/
	FrameBody
	{
		padding:0 0 50 0;
	}
	content[com=BodyBlock-1],
	content[com=BodyBlock-2]
	{
		width:80%;	
		margin:50 auto;
	}
	/****index items****/
	content[com=BlockSubject]
	{
		width:100%;
		text-align:center;
		color:black;
		font-size:28px;
		font-weight:bold;
		border-bottom:1px solid gray;
		padding:5 0;
	}
	content[com=BlockContent]
	{
		margin:50 auto;
		width:90%;
		text-align:center;
	}
	content[com*=BodyBlock1-Box-]
	{
		width:18%;
		display:inline-block;
		margin:10;
		vertical-align:top;
	}
	content[com*=BodyBlock1-Box-]>content[com=BodyBlock1-Photo]
	{
		width:100%;
		cursor:pointer;
		padding-bottom:100%;
		border-radius:255px;
		-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
  	box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
	}
	content[com*=BodyBlock1-Box-]>content[com=BodyBlock1-Subject]
	{
		padding:10 0 0 10;
		color:var(--ci-color);
		font-size:16px;
		font-weight:bold;
	}
	content[com=BodyBlock1-Memo]>content
	{
		display:inline-block;
	}
	content[cellmod=redmemo]
	{
		min-width:150px;
		font-size:14px;
		font-weight:bold;
		color:red !important;
	}
	content[cellmod=date]
	{
		font-size:14px;
		font-weight:bold;
		color:gray;
	}
	/****index bulletin****/
	content[com=BodyBlock-2]>content[com=BlockContent]
	{
		display:table;
	}
	content[com=BlockRow]
	{
		display:table-row;
	}
	content[com=BlockRow][hover=true]:hover
	{
		background:#DBDBDB;
		cursor:pointer;
	}
	content[com*=cell-]
	{
		color:var(--ci-color);
		padding:10;
		text-align:left;
		display:table-cell;
	}
	content[com=cell-1][ins=bf]::before
	{
		width:30px;
		content:attr(data-insert-icon);
		font-family:var(--faw);
	}
	/****item list****/
	content[com=inside-itemContent]>content[com*=inside-itemSubject]
	{
		width:100%;
		text-align:center;
		color:black;
		font-size:28px;
		font-weight:bold;
		border-bottom:1px solid gray;
		padding:5 0;
	}
	content[com=inside-itemExplain]
	{
		width:95%;
		margin:20 auto;
		line-height:25px;
	}
	content[com=inside-itemContent]>content[com=inside-itemList]
	{
		width:100%;
		display:table;
	}
	content[com=inside-itemList]>content[com=inside-data-no]
	{
		width:100%;
		text-align:center;
		color:red;
		font-size:28px;
		font-weight:bold;
		padding:100 0;
	}
	/****item detial****/
	content[com=inside-itemPhoto]
	{
		width:100%;
		text-align:center;
		margin:20 0;
	}
	content[com=inside-itemPhoto] img
	{
		margin:0 auto;
	}
	content[com=inside-itemInfobox]
	{
		width:98%;
		margin:10 auto;
		position:relative;
	}
	content[com=inside-itemSignup],
	content[com=inside-itemWorkdate],
	content[com*=inside-itemPrice-],
	content[com*=inside-itemIntro-]
	{
		padding:10 0;
	}
	content[com=inside-itemClose]
	{
		font-size:18px;
		font-weight:bold;
		color:red;
		padding:10 0;
	}
	content[com=number]
	{
		display:inline-block;
		color:red;
	}
	clickButton[com=Active_SignUp]
	{
		cursor:pointer;
		position:absolute;
		top:20;
		right:0;
		padding:50px;
		color:#FFF;
		background:-webkit-linear-gradient(-90deg, rgba(255,48,25,1) 0, rgba(207,4,4,1) 100%);
  	background:-moz-linear-gradient(180deg, rgba(255,48,25,1) 0, rgba(207,4,4,1) 100%);
  	background:linear-gradient(180deg, rgba(255,48,25,1) 0, rgba(207,4,4,1) 100%);
		border-radius:5px;
	}
	content[com*=inside-itemIntro-]
	{
		width:98%;
		margin:10 auto;
	}
	/****sign up****/
	clickButton[com=skw]
	{
		margin:0 10;
		padding:5 8;
		color:#FFF;
		display:inline-block;
		background:var(--ci-color);
		border-radius:5px;
		cursor:pointer;
	}
	clickButton[com=skw]::before
	{
		content:"\f002";
		color:#FFF;
		font-family:var(--faw);
		margin:0 3;
	}
	input[id=searchCourse]
	{
		width:50% !important;
		margin:20 0 0 0;
		font-size:16px;
		display:inline-block;
	}
	content[com=inside-memo]
	{
		width:70%;
		margin:50 auto;
	}
	content[com=signBlockContent]
	{
		width:70%;
		margin:50 auto;
		position:relative;
	}
	content[com=signBlockContent]>content
	{
		color:black;
		font-size:18px;
		margin:10 0;
	}
	content[com=signBlockContent]>clickButton[com=Active_Student]
	{
		cursor:pointer;
		position:absolute;
		top:0;
		right:0;
		padding:50px;
		color:#FFF;
		background:-webkit-linear-gradient(-90deg, rgba(255,48,25,1) 0, rgba(207,4,4,1) 100%);
  	background:-moz-linear-gradient(180deg, rgba(255,48,25,1) 0, rgba(207,4,4,1) 100%);
  	background:linear-gradient(180deg, rgba(255,48,25,1) 0, rgba(207,4,4,1) 100%);
		border-radius:5px;
	}
	content[com=info-Error]
	{
		width:100%;
		text-align:center;
		margin:100 0 50 0;
	}
	content[com=signUpStudent]
	{
		display:table;
		width:60%;
		margin:20 auto;
	}
	content[com=signUpStudent]>content[com*=signUpRow-]
	{
		display:table-row;
	}
	content[com=signUpStudent] content[com*=signUpCell-]
	{
		display:table-cell;
		padding:10 0;
		color:var(--ci-color);
	}
	content[com=signUpStudent] content[com=signUpCell-1]
	{
		vertical-align:middle;
		width:30px;
	}
	content[com=signUpCount]
	{
		padding:10;
		border-top:1px solid black;
	}
	form[id=formInSignUp] select
	{
		width:100%;
		height:50px;
		border:1px solid gray;
		border-radius:5px;
		padding:0 0 0 10;
		margin:50 0 0 0;
		font-size:16px;
	}
	content[com=container_submit]
	{
		margin:20 0;
		display:none;
	}
	content[com=project],content[com=projectData]
	{
		margin:5 0;
		display:inline-block;
	}
	content[com=project]
	{
		width:200px;
	}
	content[com=projectData]
	{
		width:calc(100% - 220px);
	}
	signUpButton
	{
		cursor:pointer;
		font-size:16px;
		margin:10 0 10 0;
		background:var(--ci-color);
		border-radius:3px;
		text-align:center;
		color:#FFF !important;
		padding:10 0 10 0;
	}
	imp[color=red]
	{
		color:red;
		display:inline-block;
	}
	/*
	iframe[id=ecpayFrame]
	{
		width:0;
		height:0;
		border:0px;
	}
	*/
	
	/****message list****/
	content[com=inside-banner]
	{
		position:relative;
		width:100%;
		height:300px;
		background:#1C1C1C;
		-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
  	box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
	}
	content[com=textCn],
	content[com=textEn]
	{
		position:absolute;
		top:130;
		left:100;
		color:#FFF;
		font-size:28px;
		font-weight:bold;
		text-shadow:1px 1px 5px black;
	}
	content[com=textEn]
	{
		top:165;
		left:105;
	}
	content[com=inside-banner-photo]>img
	{
		float:right;
	}
	content[com=inside-body]
	{
		width:75%;
		margin:50 auto;
	}
	/***message detial***/
	content[com=itemSubject]
	{
		padding:10 0;
		color:var(--ci-color);
		font-size:24px;
		text-align:left;
	}
	content[com=itemSubject]::before
	{
		content:attr(data-insert-icon);
		font-family:var(--faw);
		padding:0 5;
	}
	content[com=itemDetial]
	{
		width:100%;
		margin:20 0 0 0;
		text-align:left;
		border-bottom:1px solid gray;
	}
	content[com=itemDate]
	{
		padding:5 0;
		font-size:12px;
		font-family:"Tahoma";
		font-weight:bold;
		text-align:right;
	}
	content[com=itemDetial] img
	{
		max-width:100%;
		margin:0 auto;
	}
	/***student management***/
	content[com=manageBlockContent]>content[com=studentTable],
	content[com=manageBlockContent]>content[com=orderTable]
	{
		width:100%;
		margin:30 auto;
		display:table;
	}
	content[com=manageBlockContent] content[com*=studentRow-],
	content[com=manageBlockContent] content[com*=orderRow-]
	{
		display:table-row;
	}
	content[com=manageBlockContent] content[com*=studentCell-][port=title],
	content[com=manageBlockContent] content[com*=orderCell-][port=title]
	{
		color:gray;
		text-align:center;
		padding:10 0;
		border-bottom:1px solid gray;
	}
	content[com=manageBlockContent] content[com*=studentCell-],
	content[com=manageBlockContent] content[com*=orderCell-]
	{
		display:table-cell;
		color:var(--ci-color);
		padding:8 0;
		text-align:center;
	}
	content[com=manageBlockContent] content[com*=orderCell-2]
	{
		text-align:left;
	}
	/***contacts****/
	content[com*=cu-]
	{
		padding:5 0;
		text-align:left;
	}
	content[com=cu-company]
	{
		color:var(--ci-color);
		font-size:18px;
	}
	content[com=cu-map]>iframe
	{
		width:100%;
		border:1px solid #000;
	}
	content[com=BlockContent] formContent
	{
		margin:20 0;
	}
	formContent input[type=text],
	formContent input[type=number],
	input[id=searchCourse],
	formContent textarea
	{
		width:100%;
		height:33px;
		border:1px solid silver;
		border-radius:3px;
		padding:5 0 5 5;
		color:gray !important;
	}
	formContent textarea
	{
		height:100px;
	}
	formContent formElement[emid=canvas_captcha]>canvas
	{
		margin:10 0;
		background:#f2f2f2;
		border:1px solid black;
	}
	formContent>content[com=Notrequire],
	formContent>content[com=require]
	{
		padding:0 0 3 0;
		text-align:left;
	}
	formContent>content[com=require]::before
	{
		content:"*";
		color:red;
	}
	formContent clickButton
	{
		font-size:14px;
		margin:10 0 10 0;
		background:var(--ci-color);
		border-radius:3px;
		text-align:center;
		color:#FFF;
		padding:8 0 8 0;
	}
	formContent formError
	{
		display:none;
		font-size:12px;
		color:red;
		background:rgba(255,255,255,0.8);
		border-radius:0 0 5px 5px;
	}
	/***1 blocks***/
	content[com=InsideBlock]
	{
		width:90%;
		margin:30 auto;
	}
	content[com=InsideBlock]>content[com=BlockContent]
	{
		display:table;
	}
	/***2 blocks***/
	content[com=InsideBlock-1]
	{
		width:20%;
		padding:10 0;
	}
	content[com=InsideBlock-1]>content[com*=insideItem-]
	{
		width:80%;
		color:var(--ci-color);
		font-size:18px;
		letter-spacing:1pt;
		padding:10 0;
		cursor:pointer;
	}
	content[com=InsideBlock-1]>content[com*=insideItem-]::before
	{
		width:30px;
		content:attr(data-insert-icon);
		font-family:var(--faw);
		font-size:20px;
		padding:0 5 0 5;
	}
	content[com=InsideBlock-1]>content[com*=insideItem-]:hover
	{
		background:#DBDBDB;
	}
	content[com=inside-body]>content[com*=InsideBlock-]
	{
		display:inline-block;
		vertical-align:top;
	}
	content[com=InsideBlock-2]
	{
		width:70%;
	}
	content[com=inside-subject]
	{
		text-align:center;
		font-size:24px;
		font-weight:bold;
		color:#000;
		padding:10 0;
		border-bottom:1px solid #000;
	}
	content[com=inside-content]
	{
		margin:50 0;
	}
	content[com=inside-rules],
	content[com=rulesTitle]
	{
		width:90%;
		margin:10 auto 0 auto;
	}
	content[com=processBox],
	content[com=rulesTitle]
	{
		margin:30 auto 0 auto;
	}
	content[com=processBox]>content[com=processTitle],
	content[com=rulesTitle]
	{
		padding:15 0 10 0;
		font-size:18px;
		color:var(--ci-color);
	}
	
	content[com=inside-process]
	{
		width:90%;
		margin:0 auto;
	}
	content[com=processBox]
	{
		text-align:center;
	}
	content[com=processBox]>content[com*=circle-]
	{
		margin:0 10;
		width:16%;
		height:0;
		padding-bottom:16%;
		display:inline-block;
		background:#000;
		border:2px solid #FFF;
		border-radius:255px;
		-webkit-box-shadow:0 0 4px 2px rgba(0,0,0,0.2);
  	box-shadow:0 0 4px 2px rgba(0,0,0,0.2);
	}
	content[com=processBox]>content[com*=circle-][sBG=red]
	{
		background:#C40000;
	}
	content[com=processBox]>content[com*=circle-]>content[com=circle-text]
	{
		text-align:center;
		color:#FFF;
		padding:30% 0;
	}
	/****form elements****/
	content[com=BlockContent][port=login]
	{
		width:50%;
		margin:50 auto;
	}
	content[com=comment]
	{
		font-size:24px;
		font-weight:bold;
		color:black;
		margin:10 0;
	}
	formElement
	{
		text-align:left;
		margin:10 0 0 0;
	}
	input::-webkit-inner-spin-button
	{
		-webkit-appearance: none;
    margin:0;
	}
	formElement input[type=text],
	formElement input[type=password],
	formElement input[type=number]
	{
		width:100%;
		height:50px;
		border:1px solid gray;
		padding:0 0 0 10;
		font-size:16px;
		-moz-appearance:textfield;
	}
	formElement[emid=choiceArea] select
	{
		width:45%;
		height:50px;
		border:1px solid gray;
		border-radius:5px;
		margin:0 5 0 0;
		padding:5;
		font-size:18px;
		display:inline-block;
	}
	formElement[emid=stuEducation] select
	{
		width:100%;
		height:50px;
		border:1px solid gray;
		border-radius:5px;
		padding:0 0 0 10;
		font-size:16px;
	}
	formElement[emid=iAgree]>input[type=checkbox],
	formElement[emid=iAgree]>comment
	{
		display:inline-block;
	}
	formElement clickButton[id=formSubmit]
	{
		cursor:pointer;
		margin:20 0;
		padding:15 0;
		font-size:16px;
		color:white;
	}
	formContent content[com=dist][def=hide]
	{
		display:none;
	}
	formContent input[type=checkbox],
	formContent formElement>input[type=radio]
	{
		width:13px;
		height:13px;
		display:inline-block;
		vertical-align:top;
		padding:3 0 0 0;
	}
	formElement[emid=regSex],
	formElement[emid=regIdentity]
	{
		margin:25 0;
	}
	formElement[emid=regSex]::before
	{
		content:"請選擇您的性別";
		width:150px;
		display:inline-block;
	}
	formElement[emid=regIdentity]::before
	{
		content:"選擇進行註冊的身份別";
		width:200px;
		display:inline-block;
	}
	/****footer****/
	FrameFooter
	{
		width:100%;
		background:#1C1C1C;
	}
	FrameFooter>content[com=FooterBlock]
	{
		margin:20 auto;
		width:80%;
	}
	content[com=Footer-photo]>img
	{
		max-height:80px;
		margin:5 0;
	}
	content[com=Footer-title-CN]
	{
		font-size:16px;
		color:#FFF;
	}
	content[com=Footer-title-EN]
	{
		font-size:12px;
		font-family:"Tahoma";
		color:#FFF;
	}
	content[com=FooterBlock]>content
	{
		display:inline-block;
		vertical-align:top;
		margin:0 40;
	}
	content[com=Footer-Tel],
	content[com=Footer-Fax],
	content[com=Footer-Address]
	{
		padding:5px;
		font-size:18px;
		color:#FFF;
	}
	content[com=Footer-3]>content,
	content[com=Footer-4]>content
	{
		padding:5 0;
		color:#FFF;
	}
	content[com=Footer-5]>img
	{
		max-height:150px;
	}
	content[com*=Footer-Menu-item]
	{
		cursor:pointer;
	}
	/****form elements error message****/
	formError
	{
		padding:5 0 0 5;
		background:#f2f2f2 !important;
		text-align:left;
		height:30px;
		font-size:16px !important;
		color:red !important;
	}
}

/****mobile****/
@media only screen and (min-width:0px) and (max-width:768px)
{
	body
	{
		background:#f2f2f2;
	}
	/******[payment][history]******/
	content[com=paymentHistory]
	{
		width:95%;
		margin:20 auto 0 auto;
		padding:0 0 20 0;
	}
	content[com=paymentTime]
	{
		padding:3 0 0 0;
		font-size:12px;
		font-family:"Tahoma";
		color:silver;
	}
	content[com=paymentBody]
	{
		width:100%;
		padding:3 0 5 0;
	}
	content[com=paymentBody]>content
	{
		font-size:14px;
		display:inline-block;
	}
	content[com=paymentBody]>content[com=paymentItemNo]
	{
		width:50%;
		font-size:14px;
		font-weight:bold;
		color:var(--ci-color);
	}
	content[com=paymentBody]>content[com=paymentStatus]
	{
		width:100px;
		color:red;
		text-align:right;
		margin:0 5 0 0;
	}
	content[com=paymentBody]>content[com=paymentDetial]>clickButton[com=paymentDetial],
	commonDialog content[com=status]>clickButton[com=statusCancel]
	{
		background:var(--ci-color);
		border-radius:3px;
		color:white;
		padding:3 5 3 5;
	}
	content[com=projectName]
	{
		font-size:16px;
		font-weight:bold;
		color:var(--ci-color);
		padding:0 0 5 0;
		border-bottom:1px solid #f2f2f2;
	}
	content[com=paymentHistory],
	content[com=students]
	{
		min-height:200px;
	}
	content[com=unitMostLogin]
	{
		width:100%;
		color:red;
		font-size:16px;
		font-weight:bold;
		text-align:center;
		margin:40% 0 40% 0;
	}
	/******[payment][detial]******/
	commonDialog content[com=paymentContent]>content
	{
		padding:8 0 8 0;
		font-size:14px;
		border-bottom:1px solid #f2f2f2;
	}
	commonDialog content[com=itemNo],
	commonDialog content[com=itemName]
	{
		color:var(--ci-color);
		font-weight:bold;
	}
	commonDialog content[com=status]>content[com=statusText],
	commonDialog content[com=status]>clickButton[com=statusCancel]
	{
		margin:0 8 0 0;
		display:inline-block;
	}
	commonDialog content[com=locButton]
	{
		text-align:center;
		color:#FFF;
		background:var(--ci-color);
		padding:5 0;
		border-radius:5px;
	}
	/*****[student][list]*****/
	clickButton[com=appendStudent],
	clickButton[com=editStudent]
	{
		width:100%;
		padding:8 0;
		text-align:center;
		background:var(--ci-color);
		color:white;
		border-radius:5px;
	}
	clickButton[com=editStudent]
	{
		margin:5 0;
		width:150px;
	}
	content[com*=boxstudent-]
	{
		margin:10 auto;
		padding:10 0;
		width:95%;
		border-bottom:1px solid silver;
	}
	content[com*=boxstudent-] content[com*=TitleIn],
	content[com*=boxstudent-] content[com*=DataIn]
	{
		font-size:14px;
		height:30px;
		line-height:30px;
		display:inline-block;
	}
	content[com*=boxstudent-] content[com*=TitleIn]
	{
		width:80px;
	}
	content[com=textMessage]
	{
		text-align:center;
		color:red;
	}
	content[com=textMessage]::before
	{
		content:" ";
		width:0;
		height:200px;
		display:inline-block;
		vertical-align:middle;
	}
}