@charset "UTF-8";
/************************************************************
*Author: Ken Chang
************************************************************/
body {
	position:relative;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,segoe ui,Helvetica,Arial,sans-serif;
	font-size: 1rem;
	/* font-weight: 400; */
	/* Ken change to 1.2 to 避免多行會出現疊字*/
	line-height: 1.3;
	width: 100%;
	height: 100%;
	height: calc(var(--fixvh, 1vh) * 100); /* 解決手機 100vh 被下方控制bar吃掉高度的問題*/
	color: var(--clrbodytext);
	text-align: left;
	background-color: var(--mainBodyBGColor);
	overflow: hidden;
	/* scroll-behavior: smooth; */
}

/*將 input number模式時, 會出現預設上下spinner 隱藏*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 	-webkit-appearance: none;
 	margin: 0;
 	padding: 0;
 	border:  0;
}

input[type=number] {
	-moz-appearance: textfield;
}


/* 讓IE/Edge input type為password時, 不要顯示 eyes icon. */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

/* 
::-webkit-input-placeholder { color: red; }
Firefox 4-18瀏覽器專用
input::-moz-placeholder { color: red; }
Firefox 19+瀏覽器專用
input::-moz-placeholder{color:red;}
IE10瀏覽器專用
:-ms-input-placeholder{color: red;}
 */
.askcom_width-100per {
	width: 100%;
}

.askcom_flex-row {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  flex-direction: row;
  -ms-flex-direction: row;
}

.askcom_flex-column {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

/*重直置中*/
.askcom_alignitems-center {
	align-items: center;
}

.askcom_flex-wrap {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
  
.askcom_flex-nowrap {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

/*重直水平置中 nowrap*/
.askcom_flex-nowrap_HVcenter {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content:center;
	align-items: center;
}

/*重直置中 水平靠右nowrap*/
.askcom_flex-nowrap_HrVc {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content:  flex-end;
	align-items: center;
}

/*重直置中 水平靠右wrap*/
.askcom_flex-wrap_HrVc {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:  flex-end;
	align-items: center;
}

/*重直置中 水平靠左nowrap*/
.askcom_flex-nowrap_HlVc {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content:  flex-start;
	align-items: center;
}



/*重直水平置中 wrap*/
.askcom_flex-wrap_HVcenter {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
}

/*水平置中*/
.askcom_flex-justify-center {
	justify-content:center;
}

/*水平平均配置*/
.askcom_flex-justify-spacebtw {
	justify-content: space-between;
}

/* 參數: 水平位移, 垂直位移,  模糊半徑, 擴散距離, 顏色, 內陰影*/
/*  右下黑陰影 for 四方型 only*/
.askcom_shadowBlackLR{
	-webkit-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	-o-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
}

.askcom_shadowBlackLRSmall{
	-webkit-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	-o-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
}


/* 右下黑陰影 for 不規則圖 */
.askcom_dropshadowBlackLR {
    -webkit-filter: drop-shadow(.3rem .4rem .4rem var(--clrshadowBlack));
    filter: drop-shadow(.3rem .4rem .4rem var(--clrshadowBlack))
}

/*  右黑陰影*/
.askcom_shadowBlackR{
	-webkit-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	-o-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
}


/*  下黑陰影*/
.askcom_shadowBlackLower{
	-webkit-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	-o-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
}
/*  上黑陰影*/
.askcom_shadowBlackUpper{
	-webkit-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	-o-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
}

/*   中心點向外黑陰影*/
.askcom_shadowBlackCenter {
	-webkit-box-shadow: 0 0 .5rem var(--clrshadowBlack);
	-moz-box-shadow: 0 0 .5rem var(--clrshadowBlack);
	-o-box-shadow: 0 0 .5rem var(--clrshadowBlack);
	-ms-box-shadow: 0 0 .5rem var(--clrshadowBlack);
	box-shadow: 0 0 .5rem var (--clrshadowBlack);
}

/* 中心點向外黑陰影 for 不規則圖 */
.askcom_dropshadowBlackCenter {
	-webkit-filter: drop-shadow(0 0 .5rem var(--clrshadowBlack));
	filter: drop-shadow(0 0 .5rem var(--clrshadowBlack));
}



/*  右下白陰影*/
.askcom_shadowWhiteLR{
	-webkit-box-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
	-moz-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
	-o-box-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
	-ms-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);	
	box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
}

/*  下白陰影*/
.askcom_shadowWhiteLower{
	-webkit-box-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	-moz-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	-o-box-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	-ms-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
}

/*  上白陰影*/
.askcom_shadowWhiteUpper{
	-webkit-box-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	-moz-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	-o-box-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	-ms-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
}

/*   中心點向外白陰影*/
.askcom_shadowWhiteCenter {
	-webkit-box-box-shadow: 0 0 1rem var(--clrshadowWhite);
	-moz-box-shadow: 0 0 1rem var(--clrshadowWhite);
	-o-box-box-shadow: 0 0 1rem var(--clrshadowWhite);
	-ms-box-shadow: 0 0 1rem var(--clrshadowWhite);
	box-shadow: 0 0 1rem var(--clrshadowWhite);
}

/*  左亮白陰影*/
.askcom_shadowLighWhiteL{
	-webkit-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	-moz-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	-o-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	-ms-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
}



.askcom_sticky-top {
	position: -webkit-sticky; 
	position: sticky;
	top: 0;
	z-index: 1020;
}


.askcom_margin-allzero {
	margin: 0;
}

.askcom_border-allzero {
	border: 0;
}

.askcom_padding-allzero {
	padding: 0;
}

.askcom_fontsize-1-5rem {
	font-size: 1.5rem;
}


.askcom_btn {
	display: block;
	border: none;
	border-radius: 4px;
}

/* 參考  https://www.colorzilla.com/gradient-editor/  */
/*   灰 to 黑漸層, 左上到右下*/
.askcom_blackgradintULtoLR{
	background: -moz-linear-gradient(-45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(-45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(135deg,#606060 0%, #333333 24%, #212121 49%, #000000 79%);
}
/*   灰 to 黑漸層, 右上到左下*/
.askcom_blackgradintURtoLL{
	background: -moz-linear-gradient(45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(225deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
}

/*  灰 to 黑漸層, 右下到左上*/
.askcom_blackgradintRLtoUL{
	background: -moz-linear-gradient(135deg, #606060 0%, #333333 32%, #212121 53%, #000000 79% );
	background: -webkit-linear-gradient(135deg, #606060 0%, #333333 32%, #212121 53%, #000000 79% );
	background: linear-gradient(-45deg, #606060 0%, #333333 32%, #212121 53%, #000000 79%);
}


/* 灰 to 黑漸層, 由下到上*/
.askcom_blackgradinBtoT{
	background: -moz-linear-gradient(180deg, #606060 0%, #333333 4%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(180deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(0deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
}

/* 灰 to 黑漸層, 由上到下*/
.askcom_blackgradinTtoB{
	background: -moz-linear-gradient(180deg, rgb(0, 0, 0) 11%, #262626 55%, #404040 75%, #595959 84%, #7f7f7f 98%);
	background: -webkit-linear-gradient(180deg, #000000 11%, #262626 55%, #404040 75%, #595959 84%, #7f7f7f 98%);
	background: linear-gradient(0deg, #000000 11%, #262626 55%, #404040 75%, #595959 84%, #7f7f7f 98%);
}


/*  灰 to 黑漸層, 由左到右*/
.askcom_blackgradinLtoR{
	background: -moz-linear-gradient(-90deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(-90deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(90deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
}

.askcom_bordstyle{
	border-style: solid;
	border-width: .1rem;
	border-color: rgb(90, 90, 90, 1);
	border-radius: 0;
}


.askcom_ellipsis1row{
 	/*  字數超過, 出現省略字元*/
 	overflow: hidden;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; 
	-webkit-box-orient: vertical; 
	word-break: break-all;

}

.askcom_ellipsis2row{
 	/*  字數超過, 出現省略字元*/
 	overflow: hidden;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical; 
	word-break: break-all;
/*  	height: auto !important; */
 	white-space: normal;
}

.askcom_ellipsis3row{
 	/*  字數超過, 出現省略字元*/
 	overflow: hidden;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; 
	-webkit-box-orient: vertical; 
	word-break: break-all;
/*  	height: auto !important; */
}


.askcom_Dialogroot{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: calc(var(--fixvh, 1vh) * 100); /* 解決手機 100vh 被下方控制bar吃掉高度的問題*/
	overflow-x: auto;
	overflow-y: auto;
	z-index: var(--maxzindex);
}

.askcom_Dialogroot > .askcom_DialogWin{
	position: relative;
	background-color: var(--clrpopwinbackground);
	margin: 0;
	padding: 0;
	border: none;

}
/*  Ken Chang for RWD*/

/*33%,  25% (超過 3840px)*/
@media (min-width: 3840px) {
	.askcom_Dialogroot > .askcom_DialogWin{
		width: 80rem;
		height: 40rem;
	}
}

/*67%,  50% (2560~3840)*/
@media (max-width: 3840px) {
	.askcom_Dialogroot > .askcom_DialogWin {
		width:75rem;
		height: 40rem;
	}
}

/*75%, 80%,  90% (1920~2560)*/
@media (max-width: 2560px) {
	.askcom_Dialogroot > .askcom_DialogWin {
		width: 55rem;
		height: 30rem;
	}
}


/*100%, 110%,  125%, 150%, 175% (1024~1920) 橫式*/
@media (max-width: 1920px) {
	.askcom_Dialogroot > .askcom_DialogWin {
		width: 45rem;
		height:25rem;
	}	
}

/*200%  (768~1024)*/
@media (max-width: 1024px) {
	.askcom_Dialogroot > .askcom_DialogWin {
		width: 33rem;
		height: 20rem;
	}
}

/*(640以下, 直式)*/
@media (max-width: 640px) {
	.askcom_Dialogroot > .askcom_DialogWin {
		width:30em;
		height:18rem;
	}
}

/*480以下*/
@media (max-width: 480px) {
	.askcom_Dialogroot > .askcom_DialogWin {
		width: 95%;
		height: 15rem;
	}
}

/*320以下*/
@media (max-width: 320px) {
	.askcom_Dialogroot > .askcom_DialogWin {
		width: 95%;
		height: 15rem;
	}
}


.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinTop{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 16%;
	margin:0;
	padding:0;
	border: 0;
/* 	border-top-left-radius: inherit;
	border-top-right-radius: inherit; */
	color: var(--clrwhitetext);
	background-color:var(--clrpopwintitle);
}

.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinTop > .askcom_DialogWinIcon{
	position: relative;
	left: 0;
	margin-left: 1rem;
	margin-right: .5rem;
	width: 2.0rem;
	height: 2.0rem;
	border: none;
	outline: none;
}

.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinTop > .askcom_DialogWinIconNotice{
	/* background-color: navy;  */
	left: 0;
	width: 60%;
	height: auto;
	position: relative;
	font-size: var(--btnTextSize26);
}


.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinmsg{
	position: relative;
	width: 100%;
	height: 65%;
	/* background-color: navy; */
}

.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinmsg > .askcom_DialogWinmsgTitle{
	/*background-color: navy;*/
	display: inline-block;
	vertical-align: middle;
	left: 0;
	width: 100%;
	height: 25%;
	position: relative;
	word-break: break-all;
	text-align: center;
	font-weight: bold;
	font-size: var(--btnTextSize26);
	margin-top: 1.5rem;
	margin-bottom: .5rem;
}
.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinmsg > .askcom_DialogWinmsgText{
	/*background-color: orange;*/
	left: 0;
	position: relative;
	width: 85%;
	height: 55%;
	left: 50%;
	margin: .5rem 0 0 0;
	font-size: var(--btnTextSize22);
	transform: translateX(-50%); /* 減去自身 50% left */
	text-align: left;
	overflow: hidden;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-box;
	word-break: break-word;
	-webkit-line-clamp:5; /* 超過5行開始出現... */
	-webkit-box-orient: vertical;
	white-space:pre-wrap;
}

.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinmsg > .askcom_DialogIptDiv{
	background-color: rgba(17, 20, 33, 0);
	position: relative;	
	left: 50%;
	top: 0%;
	width: 90%;
	height: 40%;
	margin: 0 0 0 0;
	padding: 0 .0 0 0;
	border: none;
	transform: translateX(-50%); /* 減去自身 50% left */
	display: flex;
}

.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinmsg > .askcom_DialogIptDiv > .askcom_DialogIpt{
	position: relative;	
	background-color: rgba(117, 243, 33, 0);
	left: 0%;
	top: 0%;
	width: 95%;
	height: 50%;
	margin: 0 0 0 0;
	padding: 0 .25rem 0 .25rem;
	font-size: var(--btnTextSize20);
	border: 1px solid var(--clrlistborderline);
	border-radius: 6px;
	outline: none; /* 當focus時, 不會出現 border */
	ime-mode: disabled; /* 禁止切換輸入法 */
}
.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinmsg > .askcom_DialogIptDiv > .askcom_DialogIptErrText{
	background-color: rgba(117, 23, 33, 0);
	position: relative;	
	left: 0%;
	top: 0%;
	width: 90%;
	height: 20%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	font-size: var(--btnTextSize18);	
	color: var(--askred);
}

.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinBtnArea{
	/*background-color: red;*/
	position: relative;
	width: 100%;
	height: 14%;
	margin-top: 0;
	margin-bottom: 0;
/* 	border-top-style: solid;
	border-top-width: .5px;
	border-top-color: rgba(90, 90, 90, 1); */

}

.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinBtnArea > .askcom_DialogWinBtns{
	position: relative;
	background-color: var(--clrdialogbtubk);
	width: 12%;
	height: 75%;
	top: 0;
	margin-left: 4.5vmin;
	margin-right: 4.5vmin;
	margin-top: 0;
	margin-bottom: 0;
	/* border-radius: .4vmin; */
	color: var(--clrwhitetext);
	display: none;
	font-size: var(--btnTextSize22);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;	
}
.askcom_Dialogroot > .askcom_DialogWin > .askcom_DialogWinBtnArea > .askcom_DialogWinBtns:hover{
	cursor: pointer;
	color: var(--clrwhitetext);
	background-color: var(--askred);
}

/**************************************************************
* 動畫特效區
*Author: Ken Chang
**************************************************************/
/*  動畫 style I*/
@keyframes askeycom_btnfocus{
	0%{
			opacity: .70;
			-webkit-transform: scale(0.6, 0.6);
			-moz-transform: scale(0.6, 0.6);
			-ms-transform: scale(0.6, 0.6);
			-o-transform: scale(0.6, 0.6);
			transform: scale(0.6, 0.6);
	
	}
	20%{
		opacity: .40;
		-webkit-transform: scale(0.4, 0.4);
		-moz-transform: scale(0.4, 0.4);
		-ms-transform: scale(0.4, 0.4);
		-o-transform: scale(0.4, 0.4);
		transform: scale(0.4, 0.4);
	
	}
	40%{
		opacity: 0;
		-webkit-transform: scale(0.2, 0.2);
		-moz-transform: scale(0.2, 0.2);
		-ms-transform: scale(0.2, 0.2);
		-o-transform: scale(0.2, 0.2);
		transform: scale(0.2, 0.2);
	
	}
	60%{
		opacity: .40;
		-webkit-transform: scale(0.4, 0.4);
		-moz-transform: scale(04, 0.4);
		-ms-transform: scale(0.4, 0.4);
		-o-transform: scale(0.4, 0.4);
		transform: scale(0.4, 0.4);	
	}
	80%{
		opacity: .70;
		-webkit-transform: scale(0.6, 0.6);
		-moz-transform: scale(06, 0.6);
		-ms-transform: scale(0.6, 0.6);
		-o-transform: scale(0.6, 0.6);
		transform: scale(0.6, 0.6);	
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1.3, 1.6);
		-moz-transform: scale(1.3, 1.6);
		-ms-transform: scale(1.3, 1.6);
		-o-transform: scale(1.3, 1.6);
		transform: scale(1.3, 1.6);
	}
}



@keyframes askeycom_btnunfocus{
	0%{
		background: var(--clrbtnFocus);
		color: var(--clrbtnTextFocus);
		-webkit-transform: scale(1.3, 1.6);
		-moz-transform: scale(1.3, 1.6);
		-ms-transform: scale(1.3, 1.6);
		-o-transform: scale(1.3, 1.6);
		transform: scale(1.3, 1.6);
	}
	
	25%{
		background: var(--clrbtnFocus);
		color: var(--clrbtnTextFocus);
		-webkit-transform: scale(1.15, 1.4);
		-moz-transform: scale(1.15, 1.4);
		-ms-transform: scale(1.15, 1.4);
		-o-transform: scale(1.15, 1.4);
		transform: scale(1.15, 1.4);	
	}
	
		
	50%{
		background: var(--clrbtnFocus);
		color: var(--clrbtnTextFocus);
		-webkit-transform: scale(1.1, 1.3);
		-moz-transform: scale(1.1, 1.3);
		-ms-transform: scale(1.1, 1.3);
		-o-transform: scale(1.1, 1.3);
		transform: scale(1.1, 1.3);	
	}
	
	75%{
		background: var(--clrbtnUnFocus);
		color: var(--clrbtnTextUnFocus);
		-webkit-transform: scale(1.05, 1.2);
		-moz-transform: scale(1.05, 1.2);
		-ms-transform: scale(1.05, 1.2);
		-o-transform: scale(1.05, 1.2);
		transform: scale(1.05, 1.2);	
	}
	
	100%{
		background: var(--clrbtnUnFocus);
		color: var(--clrbtnTextUnFocus);
		-webkit-transform: scale(1.0, 1.0);
		-moz-transform: scale(1.0, 1.0);
		-ms-transform: scale(1.0, 1.0);
		-o-transform: scale(1.0, 1.0);
		transform: scale(1.0, 1.0);
	}
}


/* ********************************** 動畫 style II ****************************/
@keyframes askeycom_btnfocus_StyleII{
	0%{
			opacity: .70;
			-webkit-transform: scale(0.6, 0.6);
			-moz-transform: scale(0.6, 0.6);
			-ms-transform: scale(0.6, 0.6);
			-o-transform: scale(0.6, 0.6);
			transform: scale(0.6, 0.6);
	
	}
	20%{
		opacity: .40;
		-webkit-transform: scale(0.4, 0.4);
		-moz-transform: scale(0.4, 0.4);
		-ms-transform: scale(0.4, 0.4);
		-o-transform: scale(0.4, 0.4);
		transform: scale(0.4, 0.4);
	
	}
	40%{
		opacity: 0;
		-webkit-transform: scale(0.2, 0.2);
		-moz-transform: scale(0.2, 0.2);
		-ms-transform: scale(0.2, 0.2);
		-o-transform: scale(0.2, 0.2);
		transform: scale(0.2, 0.2);
	
	}
	60%{
		opacity: .40;
		-webkit-transform: scale(0.4, 0.4);
		-moz-transform: scale(04, 0.4);
		-ms-transform: scale(0.4, 0.4);
		-o-transform: scale(0.4, 0.4);
		transform: scale(0.4, 0.4);	
	}
	80%{
		opacity: .70;
		-webkit-transform: scale(0.6, 0.6);
		-moz-transform: scale(06, 0.6);
		-ms-transform: scale(0.6, 0.6);
		-o-transform: scale(0.6, 0.6);
		transform: scale(0.6, 0.6);	
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1.0, 1.0);
		-moz-transform: scale(1.0, 1.0);
		-ms-transform: scale(1.0, 1.0);
		-o-transform: scale(1.0, 1.0);
		transform: scale(1.0, 1.0);
	}
}

/* ********************************** Waiting Ball 動畫　Start****************************/
.askcom_WaitBall_circle {
  animation: 1.8s ease-in-out infinite both circle-animation;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  transform-origin: 50% 50%;
}




@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
}
  100% {
    transform: rotateZ(360deg)
  }
}


@keyframes circle-animation {
  0%,
  25% {
		stroke-dashoffset: 280;
    	transform: rotate(0);
	}

  50%,
  75% {
  	  stroke-dashoffset: 75;
 	   transform: rotate(45deg);
    }
    
    100%{
 	   stroke-dashoffset: 280;
 	   transform: rotate(360deg);
	}
}

/* ********************************** Waiting Ball 動畫　End****************************/



/* ********************************** Toggle Switch 動畫　Start****************************/
.askcom_switch {
	position: relative;
	display: inline-block;
    width: 2rem;
    height: 1rem;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
}

.askcom_switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }

/* The slider *//*off時,外框中間顏色*/
.askcom_switch_slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--fontColorDarkGray);
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  /*中心白球設定*/
  .askcom_switch_slider:before {
	position: absolute;
	content: "";
	height: 0.6rem;
	width: 0.6rem;
	left: 0.35rem;
	bottom: 0.2rem;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  /*checked時,外框中間顏色*/
  input:checked + .askcom_switch_slider {
	background-color: var(--fontColorBlue);
  }
  
  input:focus + .slaskcom_switch_sliderider {
	box-shadow: 0 0 1px #2196F3;
  }
  
  /*圓球移動距離*/
  input:checked + .askcom_switch_slider:before {
	-webkit-transform: translateX(0.8rem);
	-ms-transform: translateX(0.8rem);
	transform: translateX(0.8rem);
  }
  
  /* Rounded sliders *//*外框圓弧*/
  .askcom_switch_slider.askcom_switch_round {
	border-radius: 20px;
  }
  
  .askcom_switch_slider.askcom_switch_round:before {
	border-radius: 50%;
  }

/* ********************************** Toggle Switch 動畫　End****************************/


.mainDiv{
	position: relative;
	top: 0%;
	left: 0%;
	width: 100vw;
	height: 100vh;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	overflow:inherit;
}