*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box !important;

	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	text-shadow: none;
	box-shadow: none;    

	-webkit-font-smoothing:antialiased;
	text-rendering: optimizeLegibility;

}

body {
	font:14px/20px "helvetica","Droid Sans Mono","微軟正黑體","新細明體";
	letter-spacing:1.0px;
	overflow:hidden;

	/*-webkit-tap-highlight-color: rgba(255, 255, 255, 0);*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
	-webkit-text-size-adjust:none;
	-ms-touch-action: none;	

	-webkit-transform-style: preserve-3d;	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;    

	padding: 0;
	margin: 0;

	background:#f7f7f7;
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);	


}
.breakall {word-wrap:break-word;word-break:break-all; -ms-word-break: break-all; -webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;}
.hidden { display:none;}
.show { display:block;}
.txtcenter { text-align:center}
.dashed-line {border:0px solid #ccc;border-bottom:1px dashed #ccc;margin:8px 0px;padding:0;height:1px;}
.dotted-line {border:0px solid #ccc;border-bottom:1px dotted #ccc;margin:8px 0px;padding:0;height:1px;}
.blockui {z-index:999;position:absolute;left:0px;top:0px;right:0px;bottom:0px;background:#222;opacity:0.5;-webkit-transform: translateZ(0);-webkit-perspective: 500;-webkit-backface-visibility: hidden;}
.noscrollbar {overflow:hidden;}
.scroller {position:absolute;left:0;right:0;top:0;bottom:0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);	


	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;

	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-overflow-scrolling: touch;

	overflow:auto;
}
.scrolly {overflow:hidden;overflow-y:scroll;-webkit-user-select: none;-moz-user-select: none;-webkit-overflow-scrolling: touch;}
.scrollx {overflow:hidden;overflow-x:scroll;-webkit-user-select: none;-moz-user-select: none;-webkit-overflow-scrolling: touch;}

.lazybg { background-size:100% auto; background-position:center center; background-repeat:no-repeat; transition: background 300ms ease-in-out 200ms;}
.box-vertical-center {
	width: 100%; /* Firefox needs this */
	height: 100%; /* Height can be anything */
	display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;/* WebKit (Chrome & Safari) */
	display: -moz-box; -moz-box-pack: center; -moz-box-align: center;/* Firefox */
	display: -ms-box; -ms-box-pack: center; -ms-box-align: center;/* IE */
	display: box; box-pack: center; box-align: center;/* Native CSS */
}

.text-center { text-align: center}
.text-left { text-align:left}
.text-right { text-align:right}
.text-justify { text-align:justify}
.text-center-middle{
	text-align: center;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.text-white{color:#fff;}
.text-black{color:#000;}
.text-red{color:#f00;}
.text-blue{color:#003399;}
.text-green{color:#009900;}
.text-note{color:#aaa}
.text-lightgray{color:#eee}
.text-orange{color:#FF9900}

.no-corner {border-radius:0px;}
.corner {border-radius:10px;}
.corner-sm {border-radius:3px;}
.corner-lg {border-radius:10em;}
.corner-lg-xx {border-radius:999em;}
.corner-top-left {border-radius:0px;border-top-left-radius:3px;}
.corner-top-right {border-radius:0px;border-top-right-radius:3px;}
.corner-bottom-left {border-radius:0px;border-bottom-left-radius:3px;}
.corner-bottom-right {border-radius:0px;border-bottom-right-radius:3px;}

.pos-absolute {position:absolute;}
.pos-fixed {position:fixed;}
.pos-relative {position:relative;}

.pos-all {position:absolute;left:0;top:0;right:0;bottom:0;}
.pos-top {position:absolute;left:0;top:0;right:0;bottom:auto;}
.pos-bottom {position:absolute;left:0;top:auto;right:0;bottom:0;}
.pos-left {position:absolute;left:0;top:0;right:auto;bottom:0;}
.pos-right {position:absolute;left:auto;top:0;right:0;bottom:0;}
.pos-left-top {position:absolute;left:0;top:0;right:auto;bottom:auto;}
.pos-right-top {position:absolute;left:auto;top:0;right:0;bottom:auto;}
.pos-left-bottom {position:absolute;left:0;top:auto;right:auto;bottom:0;}
.pos-right-bottom {position:absolute;left:auto;top:auto;right:0;bottom:0;}
.pos-center-middle {position:absolute;left:50%;top:50%;right:auto;bottom:auto;}
.pos-center-left-middle {position:absolute;left:0;top:50%;right:auto;bottom:auto;}
.pos-center-right-middle {position:absolute;left:auto;top:50%;right:0;bottom:auto;}
.pos-center-top-middle {position:absolute;left:50%;top:0;right:auto;bottom:auto;}
.pos-center-bottom-middle {position:absolute;left:50%;top:auto;right:auto;bottom:0;}
.pos-centered {position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);}


.fixed-top {position:fixed;left:0;top:0;right:0;bottom:auto;}
.fixed-bottom {position:fixed;left:0;top:auto;right:0;bottom:0;}
.fixed-left {position:fixed;left:0;top:0;right:auto;bottom:0;}
.fixed-right {position:fixed;left:auto;top:0;right:0;bottom:0;}
.fixed-left-top {position:fixed;left:0;top:0;right:auto;bottom:auto;}
.fixed-right-top {position:fixed;left:auto;top:0;right:0;bottom:auto;}
.fixed-left-bottom {position:fixed;left:0;top:auto;right:auto;bottom:0;}
.fixed-right-bottom {position:fixed;left:auto;top:auto;right:0;bottom:0;}
.fixed-center-middle {position:fixed;left:50%;top:50%;right:auto;bottom:auto;}
.fixed-center-left-middle {position:fixed;left:0;top:50%;right:auto;bottom:auto;}
.fixed-center-right-middle {position:fixed;left:auto;top:50%;right:0;bottom:auto;}
.fixed-center-top-middle {position:fixed;left:50%;top:0;right:auto;bottom:auto;}
.fixed-center-bottom-middle {position:fixed;left:50%;top:auto;right:auto;bottom:0;}
.fixed-centered {position: fixed; top: 50%; left: 50%;transform: translate(-50%, -50%);}

.no-border {border:0 solid #ddd;}
.bordered {border:1px solid #ddd;}
.bordered-w2x {border-width:2px;}
.bordered-w3x {border-width:4px;}
.bordered-w1x {border-width:1px;}
.bordered-w0x {border-width:0px;}
.bordered-none {border:0px solid #ddd;}
.bordered-top {border:0 solid #ddd;border-top:1px solid #ddd;}
.bordered-bottom {border:0 solid #ddd;border-bottom:1px solid #ddd;}
.bordered-left {border:0 solid #ddd;border-left:1px solid #ddd;}
.bordered-right {border:0 solid #ddd;border-right:1px solid #ddd;}

.bordered-default{border-color: #ddd}
.bordered-info{border-color:#62a6df}
.bordered-primary{border-color:#5195ce}
.bordered-success{border-color:#3f903f}
.bordered-alert{border-color:#c22}
.bordered-warning{border-color:#f60}
.bordered-3d{border-width:1px 2px 2px 1px;}
.bordered-lightgray{border-color:#efefef;}
.bordered-dark{border-color:#444;}
.bordered-shadow{border:1px solid #eee;border-color:#eee #aaa #aaa #eee;}

.dashed-line { border-style:dashed;}
.dotted-line { border-style:dotted;}
.double-line { border-style:double;}


.bg-red { background-color:#f00;}
.bg-white { background-color:#fff;}
.bg-yellow { background-color:yellow;}
.bg-black { background-color:#000;}
.bg-dark { background-color:#666;}
.bg-gray { background-color:#ccc;}
.bg-blue {	background-color:#5195ce;}
.bg-apple {	background-color:#005DB3;}
.bg-gray {	background-color:#e6e6e6;}
.bg-green {	background-color:#5BC236;}
.bg-pink {background-color:#FFC0CB} 
.bg-purple {background-color:#ce4a92;} 

.bg-lightred { background-color:#FED7D7;}
.bg-lightyellow { background-color:#FFFFE0}
.bg-lightgray { background-color:#f1f1f1;}
.bg-lightdark { background-color:#ddd;}
.bg-lightblue {	background-color:#f1f5fe;}
.bg-lightskyblue {	background-color:#87CEFA;}
.bg-lightgreen { background-color:#98FB98}
.bg-lightpink { background-color:#FFB6C1}
.bg-lightpurple { background-color:#BA55D3}

/*blue code chart*/
.bg-lavender	{ background-color:#E6E6FA}
.bg-thistle	{ background-color:#D8BFD8}
.bg-plum	{ background-color:#DDA0DD}
.bg-violet	{ background-color:#EE82EE}
.bg-orchid	{ background-color:#DA70D6}
.bg-fuchsia	{ background-color:#FF00FF}
.bg-magenta	{ background-color:#FF00FF}
.bg-mediumorchid	{ background-color:#BA55D3}
.bg-mediumpurple	{ background-color:#9370DB}
.bg-blueviolet	{ background-color:#8A2BE2}
.bg-darkviolet	{ background-color:#9400D3}
.bg-darkorchid	{ background-color:#9932CC}
.bg-darkmagenta	{ background-color:#8B008B}
.bg-purple	{ background-color:#800080}
.bg-indigo	{ background-color:#4B0082}

/*green code chart*/
.bg-aliceblue	{ background-color:#F0F8FF}
.bg-lavender	{ background-color:#E6E6FA}
.bg-powderblue	{ background-color:#B0E0E6}
.bg-lightblue	{ background-color:#ADD8E6}
.bg-lightskyblue	{ background-color:#87CEFA}
.bg-skyblue	{ background-color:#87CEEB}
.bg-deepskyblue	{ background-color:#00BFFF}
.bg-lightsteelblue	{ background-color:#B0C4DE}
.bg-dodgerblue	{ background-color:#1E90FF}
.bg-cornflowerblue	{ background-color:#6495ED}
.bg-steelblue	{ background-color:#4682B4}
.bg-cadetblue	{ background-color:#5F9EA0}
.bg-mediumslateblue	{ background-color:#7B68EE}
.bg-slateblue	{ background-color:#6A5ACD}
.bg-darkslateblue	{ background-color:#483D8B}
.bg-royalblue	{ background-color:#4169E1}
.bg-blue	{ background-color:#0000FF}
.bg-mediumblue	{ background-color:#0000CD}
.bg-darkblue	{ background-color:#00008B}
.bg-navy	{ background-color:#000080}
.bg-midnightblue	{ background-color:#191970}

/*green code chart*/
.bg-lawngreen	{ background-color:#7CFC00}
.bg-chartreuse	{ background-color:#7FFF00}
.bg-limegreen	{ background-color:#32CD32}
.bg-lime	{ background-color:#00FF00}
.bg-forestgreen	{ background-color:#228B22}
.bg-green	{ background-color:#008000}
.bg-darkgreen	{ background-color:#006400}
.bg-greenyellow	{ background-color:#ADFF2F}
.bg-yellowgreen	{ background-color:#9ACD32}
.bg-springgreen	{ background-color:#00FF7F}
.bg-mediumspringgreen	{ background-color:#00FA9A}
.bg-lightgreen	{ background-color:#90EE90}
.bg-palegreen	{ background-color:#98FB98}
.bg-darkseagreen	{ background-color:#8FBC8F}
.bg-mediumseagreen	{ background-color:#3CB371}
.bg-lightseagreen	{ background-color:#20B2AA}
.bg-seagreen	{ background-color:#2E8B57}
.bg-olive	{ background-color:#808000}
.bg-darkolivegreen	{ background-color:#556B2F}
.bg-olivedrab	{ background-color:#6B8E23}

.fontsize-sm {font-size:90%;}
.fontsize-sm-2x {font-size:70%;}
.fontsize-lg {font-size:130%;}
.fontsize-lg-2x {font-size:200%;}
.fontsize-lg-3x {font-size:300%;}

.fontsize-dsm {font-size:90%; line-height:100%;}
.fontsize-dsm-2x {font-size:70%; line-height:100%;}
.fontsize-dlg {font-size:130%; line-height:130%;}
.fontsize-dlg-2x {font-size:200%; line-height:200%;}
.fontsize-dlg-3x {font-size:300%; line-height:300%;}

.no-padding-margin {padding:0px;margin:0px;}
.no-padding {padding:0px;}
.padding-default {padding:2px;}
.padding-lg {padding:5px;}
.padding-2x {padding:10px;}
.padding-3x {padding:20px;}

.no-margin {padding:0px;}
.margin-default {margin:2px;} 
.margin-lg {margin:5px;}
.margin-2x {margin:10px;}
.margin-3x {margin:20px;}

.lineheight-default {line-height:100%;} 
.lineheight-lg {line-height:120%;} 
.lineheight-2x {line-height:150%;} 
.lineheight-3x {line-height:200%;} 

.ellip {display: block;height: 100%;}
.ellip-line {display: inline-block;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;max-width: 100%;}
.ellip,.ellip-line {position: relative;overflow: hidden;}
.ellipsis {
	overflow : hidden; 
	display: block; 
	/*white-space: nowrap;*/
	text-overflow: ellipsis;
	display: -webkit-box;  
	-webkit-line-clamp: 1;  
	-webkit-box-orient: vertical;  
}
.ellipsis-2l{-webkit-line-clamp: 2;  }
.ellipsis-3l{-webkit-line-clamp: 3;  }
.ellipsis-4l{-webkit-line-clamp: 4;  }
.ellipsis-5l{-webkit-line-clamp: 5;  }
.ellipsis-6l{-webkit-line-clamp: 6;  }
.ellipsis-7l{-webkit-line-clamp: 7;  }
.ellipsis-8l{-webkit-line-clamp: 8;  }
.ellipsis-9l{-webkit-line-clamp: 9;  }
.ellipsis-10l{-webkit-line-clamp: 10;  }

.filter-shadow{
	-webkit-box-shadow: 0 0 8px -3px #888;
	-moz-box-shadow: 0 0 8px -3px  #888;
	-o-box-shadow: 0 0 8px -3px  #888;
	-ms-box-shadow: 0 0 8px -3px  #888;
	box-shadow: 0 0 8px -3px  #888;
}
.filter-shadow-sm{
	-webkit-box-shadow: 0 0 5px -1px #888;
	-moz-box-shadow: 0 0 5px -1px #888;
	-o-box-shadow: 0 0 5px -1px #888;
	-ms-box-shadow: 0 0 5px -1px #888;
	box-shadow: 0 0 5px -1px #888;
}
.filter-shadow-lg{
	-webkit-box-shadow: 0 0 10px -3px #888;
	-moz-box-shadow: 0 0 10px -3px  #888;
	-o-box-shadow: 0 0 10px -3px  #888;
	-ms-box-shadow: 0 0 10px -3px  #888;
	box-shadow: 0 0 10px -3px  #888;
}

/*--------------------*/
.appheader{background-color:#4a90ce;color:#fff;}
.appheader .navbar-brand {color:#fff;padding:8px 15px;}
.appdown-panel {position: relative;}
.appdown-panel .appdown-qrcode{width:62px;height:62px;position:absolute;right:25px;top:-15px;z-index:10;overflow:hidden;border:1px solid #fff;}
.appdown-panel .appdown-link{display:block;text-align:center;padding:0;}
.appdown-panel .appdown-link img{width:90%;margin:0px;}
.copyright {background:#efefef;position: relative;}
.copyright-body {text-align:center; font-size:80%;}