﻿/************************************************************
*Author: Ken Chang
************************************************************/
@charset "UTF-8";

:root {
	--askred: rgba(229, 21, 19, 1);
	--clrbackgroundwhite: rgba(255, 255, 255, 1);
	--clrfunsbarbackground: rgba(46, 46, 46, 1); /*left funtion bar color*/
	--clraskGraybackground: rgba(244, 244, 244, 1); /* askey website DNA gary block color*/
	--clrpopwinbackground: rgba(255, 255, 255, 1); /*Pop window背景色*/
	--clrpopwintitle: rgba(64, 64, 64, 1); /*Pop window背景色*/
	--clrtimebackground: rgba(49, 49, 49, .8);
	--clrtipwinbackground: var(--askred);
	--clrlistbackground: rgba(255, 255, 255, 1);
	--clrlistbackgroundgray: rgba(230, 230, 230, 1);
	--clrlistcatalogbackgroundgray: rgba(64, 64, 64, 1);
	--clrlistborderline: rgba(120, 120, 120, 1);
	--clrlistborderlinelightgray: rgba(220, 220, 220, 1);
	--clrcatalogbackgroundgray: rgba(64, 64, 64, 1);
	--clrcatalogtitletext: rgb(216, 216, 216);
	--clrgraytext: rgb(150, 150, 150);
	--clrtitlegraytext: rgb(190, 190, 190);
	--clrgreentext: rgb(17, 205, 24);
	--clrdarkgraytext: rgb(64, 64, 64);
	--clrwhitetext: rgba(255, 255, 255, 1);
	--clrshadowBlack: rgba(0, 0, 0, 1);
	--clrshadowWhite: rgba(150, 150, 150, 1);
	--clrshadowLighWhite: rgba(200, 200, 200, 1);
	--clrshadowBlue: rgba(42, 172, 185, 1);
	--clrshadowGreen: rgb(16, 207, 107);
	--clrredtext: var(--askred);
	--clrblacktext: rgba(0, 0, 0, 1);
	--clrdevOnlinetext: var(--clrDevOn);
	--clrdevOfflinetext: var(--clrtitlegraytext);
	--clrdialogbtnbk: rgba(64, 64, 64, 1);
	--clrDevMgrbk: rgb(30, 30, 30);
	--clrDevMgrlist2nrowbk: rgb(20, 20, 20);
	--clrDevOn: rgba(5, 186, 44, 1);
	--clrDevOff: rgba(0, 0, 0, 1);
	--clrdialogbtnhoverbk: var(--lineargradientRedval);
	--clrlist2nrow: rgba(240, 240, 240, 1);
	--clrlist2nrowopacity09: rgba(218, 218, 218, 0.92);
	--clrtopbarbackg: rgb(16, 16, 16);
	--clrscrollbar: var(--clrDevOn);
	--clrtiptext: var(--clrwhitetext);
	--clrhoverbk: rgba(255,135,0,1);
	--clrhoverBluebk: rgba(33, 150, 243, 1);
	--clrInputgraybk: rgba(40, 40, 40, 1);
	--clrpageudhoverbk: rgb(87, 87, 87);
	--maxzindex: 1000;
	--maxzindex1: 999;
	--maxzindex2: 998;
	--maxzindex3: 997;
	--tipmsgzindex: 996;
	--fixvh: 100; /*修正手機browser 下方工具列吃掉 100vh實際可以的高度.*/
	--blurval: 5px;
	--opacityval: .87;
	--radiusval: .2vmax;
	--lineargradientRedval: linear-gradient(0deg,rgba(130, 0, 0, 1) 0%, rgba(115, 0, 0, 1) 11%, rgba(125, 0, 0, 1) 21%, rgba(135, 0, 0, 1) 31%, rgba(155, 0, 0, 1) 41%, rgba(180, 0, 0, 1) 51%, rgba(205, 0, 0, 1) 62%, rgba(225, 0, 0, 1) 73%, rgba(235, 0, 0, 1) 85%, rgba(255, 0, 0, 1) 100%);
	--lineargradientGreenval: linear-gradient(0deg, rgb(25, 83, 0), rgb(64, 223, 0, 1), rgb(76, 224, 3, 1));
	--lineargradientGrayval: linear-gradient(0deg, rgb(22 22 22), rgb(42 42 42), rgb(68 68 68), rgb(84 84 84));
	--lineargradientOrangeval: linear-gradient(0deg, rgb(53, 28, 0), rgb(166, 90, 0), rgb(240, 130, 0), rgb(255, 139, 4));


	--btnTextSize48: 37px;
	--btnTextSize46: 31px;
	--btnTextSize44: 29px;
	--btnTextSize42: 27px;
	--btnTextSize36: 25px;
	--btnTextSize30: 23px;
	--btnTextSize26: 21px;
	--btnTextSize24: 19px;
	--btnTextSize22: 17px;
	--btnTextSize21: 16px;
	--btnTextSize20: 15px;
	--btnTextSize19: 14px;
	--btnTextSize18: 13px;
	--btnTextSize16: 11px;	
}


/*  Ken Chang for RWD*/

/*33%,  25% (超過 3840px)*/
/* @media (min-width: 3840px) { */
/* 	:root { */
/* 		--btnTextSize46: 3.6vmax; */
/* 		--btnTextSize44: 3.4vmax; */
/* 		--btnTextSize42: 3.2vmax; */
/* 		--btnTextSize36: 2.6vmax; */
/* 		--btnTextSize30: 2.0vmax; */
/* 		--btnTextSize26: 1.6vmax; */
/* 		--btnTextSize24: 1.4vmax; */
/* 		--btnTextSize22: 1.2vmax; */
/* 		--btnTextSize20: 1.0vmax; */
/* 		--btnTextSize18: .8vmax; */
/* 		--btnTextSize16: .6vmax; */
/* 		--btnTextSize14: .3vmax; */
/* 	} */
/* } */

/*67%,  50% (2560~3840)*/
/* @media (max-width: 3840px) { */
/* 	:root { */
/* 		--btnTextSize46: 3.5vmax; */
/* 		--btnTextSize44: 3.8vmax; */
/* 		--btnTextSize42: 3.1vmax; */
/* 		--btnTextSize36: 2.5vmax; */
/* 		--btnTextSize30: 1.9vmax; */
/* 		--btnTextSize26: 1.5vmax; */
/* 		--btnTextSize24: 1.3vmax; */
/* 		--btnTextSize22: 1.1vmax; */
/* 		--btnTextSize20: .9vmax; */
/* 		--btnTextSize18: .7vmax; */
/* 		--btnTextSize16: .5vmax; */
/* 		--btnTextSize14: .2vmax; */
/* 	} */
/* } */

/*75%, 80%,  90% (1920~2560)*/
/* @media (max-width: 2560px) { */
/* 	:root { */
/* 		--btnTextSize46: 3.2vmax; */
/* 		--btnTextSize44: 3.1vmax; */
/* 		--btnTextSize42: 2.8vmax; */
/* 		--btnTextSize36: 2.3vmax; */
/* 		--btnTextSize30: 1.9vmax; */
/* 		--btnTextSize26: 1.5vmax; */
/* 		--btnTextSize24: 1.3vmax; */
/* 		--btnTextSize22: 1.1vmax; */
/* 		--btnTextSize20: .9vmax; */
/* 		--btnTextSize18: .78vmax; */
/* 		--btnTextSize16: .68vmax; */
/* 	} */
/* } */

/*100%, 110%,  125%, 150%, 175% (1024~1920)*/
/* @media (max-width: 1920px) { */
/* 	:root { */
/* 		--btnTextSize46: 3.0vmax; */
/* 		--btnTextSize44: 2.8vmax; */
/* 		--btnTextSize42: 2.5vmax; */
/* 		--btnTextSize36: 2.0vmax; */
/* 		--btnTextSize30: 1.5vmax; */
/* 		--btnTextSize26: 1.3vmax; */
/* 		--btnTextSize24: 1.1vmax; */
/* 		--btnTextSize22: .9vmax; */
/* 		--btnTextSize20: .75vmax; */
/* 		--btnTextSize18: .65vmax; */
/* 		--btnTextSize16: .55vmax; */
/* 	}	 */
/* } */





/*200%  (768~1024)*/
/* @media (max-width: 1024px) { */
/* 	:root { */
/* 		--btnTextSize46: 6.0vmax; */
/* 		--btnTextSize44: 4.vmax; */
/* 		--btnTextSize42: 2.7vmax; */
/* 		--btnTextSize36: 2.2vmax; */
/* 		--btnTextSize30: 1.8vmax; */
/* 		--btnTextSize26: 1.4vmax; */
/* 		--btnTextSize24: 1.2vmax; */
/* 		--btnTextSize22: 1.0vmax; */
/* 		--btnTextSize20: .8vmax; */
/* 		--btnTextSize18: .65vmax; */
/* 		--btnTextSize16: .55vmax; */
/* 	} */
/* } */

/*250% ~ 500% (425~768)*/
/* @media (max-width: 768px) { */
/* 	:root { */
/* 		--btnTextSize46: 2.6vmax; */
/* 		--btnTextSize44: 2.4vmax; */
/* 		--btnTextSize42: 2.2vmax; */
/* 		--btnTextSize36: 2.0vmax; */
/* 		--btnTextSize30: 1.8vmax; */
/* 		--btnTextSize26: 1.6vmax; */
/* 		--btnTextSize24: 1.4vmax; */
/* 		--btnTextSize22: 1.2vmax; */
/* 		--btnTextSize20: 1vmax; */
/* 		--btnTextSize18: .78vmax; */
/* 		--btnTextSize16: .65vmax; */
/* 	} */
/* } */

/*(375~425)*/
/* @media (max-width: 425px) {	 */
/* 	:root { */
/* 		--btnTextSize46: 2.4vmax; */
/* 		--btnTextSize44: 2.2vmax; */
/* 		--btnTextSize42: 2.0vmax; */
/* 		--btnTextSize36: 1.8vmax; */
/* 		--btnTextSize30: 1.6vmax; */
/* 		--btnTextSize26: 1.4vmax; */
/* 		--btnTextSize24: 1.2vmax; */
/* 		--btnTextSize22: .9vmax; */
/* 		--btnTextSize20: .8vmax; */
/* 		--btnTextSize18: .78vmax; */
/* 		--btnTextSize16: .65vmax; */
/* 	} */
/* } */

/* (375以下)*/
/* @media (max-width: 375px) { */
/* 	:root { */
/* 		--btnTextSize46: 2.4vmax; */
/* 		--btnTextSize44: 2.4vmax; */
/* 		--btnTextSize42: 2.2vmax; */
/* 		--btnTextSize36: 1.4vmax; */
/* 		--btnTextSize30: 1.3vmax; */
/* 		--btnTextSize26: 1.2vmax; */
/* 		--btnTextSize24: 1.0vmax; */
/* 		--btnTextSize22: .8vmax; */
/* 		--btnTextSize20: .6vmax; */
/* 		--btnTextSize18: .5vmax; */
/* 	} */
/* } */
