@keyframes shimmer {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(0%); }
}


/* 
left.asp 
*/
.side_menu >ul >li > a,
.side_menu >ul >li dt > a { 
	font-size: 0;
}
.side_menu >ul >li > a> span,
.side_menu >ul >li dt > a> span{ 
	display: inline-block; font-size: 0.95rem;
}
.Skeleton .side_menu >ul >li >a> span,
.Skeleton .side_menu >ul >li dt > a> span{ 
	position:relative; overflow: hidden
}

.Skeleton .side_menu >ul >li >a> span::after,
.Skeleton .side_menu >ul >li dt > a> span::after{ 
	width: 200%; 
	height: 100%; 
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: 
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 
		),
		linear-gradient(lightgray 100%, transparent 0);

	background-repeat: no-repeat;
	
	background-size: 
		50px 100%,
		100% 100%;

	background-position: 
		0 0,
		0 0;

	animation: shimmer-format 0.9s infinite;
	transform: translateX(-50%);
}

/* 
product_scale.asp 
*/
.Skeleton .div-square{ 
	position:relative; overflow: hidden
}

.Skeleton .div-square::after{ 
	width: 200%; 
	height: 100%; 
	content: '';
	position: absolute;
	top: 0;
	left: 0;  

	background-image: 
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 
		),
		linear-gradient(lightgray 100%, transparent 0);

	background-repeat: no-repeat;
	
	background-size: 
		50px 100%,
		100% 100%;

	background-position: 
		0 0,
		0 0;

	animation: shimmer-format 0.9s infinite;
	transform: translateX(-50%);
}

/* 
product_b_4.asp 
*/

.Skeleton .ListProd .Name, 
.Skeleton .ListProd .ContentTXT, 
.Skeleton .ListProd .slide { 
	position:relative; overflow: hidden
}
.Skeleton .ListProd .Name::after, 
.Skeleton .ListProd .ContentTXT::after, 
.Skeleton .ListProd .slide::after { 
	width: 200%; 
	height: 100%; 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #c3c3c3 50%, #f0f0f0 75%);
    animation: shimmer 1.1s infinite;
	transform: translateX(-50%);
}



/* 
product_scale.nocover.asp
*/		
.Skeleton .ListProd .pBox{ 
	position:relative; overflow: hidden; visibility: hidden;
}
.Skeleton .ListProd .pBox::after { 
	visibility: visible !important;
	width: 200%; 
	height: 100%; 
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	animation: shimmer 1.1s infinite;
	transform: translateX(-50%);
}



/* 
32.asp
*/
.Skeleton #News .panel-heading ul,  #News.Skeleton .panel-body{ 
	position:relative; overflow: hidden; visibility: hidden;
}
.Skeleton #News .panel-body{ 
	position:relative; overflow: hidden; visibility: hidden;
}
.Skeleton #News .panel-heading ul::after,  #News.Skeleton .panel-body::after{
	visibility: visible !important;
	width: 100%; 
	height: 100px; 
	content: '';
	position: absolute;
	top: 20px;
	left: 32px;  
	
	background-image: 
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 
		), 
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 
		), 
		linear-gradient(lightgray 20px, transparent 0), 
		linear-gradient(lightgray 20px, transparent 0);

	background-repeat: no-repeat;

	background-size: 
		50px 20px,
		50px 20px,
		80% 100px, 
		100% 100px;

	background-position: 
		0 0, 
		0 30px,
		0 0, 
		0 30px;

	animation: shimmerNews 0.9s infinite;
}

@keyframes shimmerNews {
	to {
		opacity: 1; 
		background-size: 
		80% 20px,
		100% 20px,
		80% 100px, 
		100% 100px;
	}
}


/* 
4.asp
*/	
.Skeleton #Contact .map{ 
	position:relative; overflow: hidden; visibility: hidden;
}

.Skeleton #Contact .map::after{ 
	visibility: visible !important;
	width: 100%; 
	height: 100%; 
	content: '';
	position: absolute;
	top: 0;
	left: 0;  

	background-image: 
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 
		),
		linear-gradient(lightgray 100%, transparent 0);

	background-repeat: no-repeat;
	
	background-size: 
		50px 100%,
		100% 100%;

	background-position: 
		0 0,
		0 0;

	animation: shimmer-format 0.9s infinite;
}

@keyframes shimmer-format {
	to {
		opacity: 1; 
		background-size: 
		100% 100%,
		100% 100%;
	}
}

  
.Skeleton #Contact .form, .Skeleton #Contact .C, .Skeleton #Contact .G { 
	position:relative; overflow: hidden; visibility: hidden;
}

.Skeleton #Contact .form::after {
	visibility: visible !important;
	content: '';
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	height: 100%;

	background-image: 
		/* shimmer 條 */
		linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5)),
		linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5)),
		linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5)),
		linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5)),
		linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5)),

		/* 灰底條 */
		linear-gradient(lightgray 100%, transparent 0),
		linear-gradient(lightgray 100%, transparent 0),
		linear-gradient(lightgray 100%, transparent 0),
		linear-gradient(lightgray 100%, transparent 0),
		linear-gradient(lightgray 100%, transparent 0);

	background-repeat: no-repeat;

	background-size: 
		50px 50px,
		50px 50px,
		50px 50px,
		50px 115px,
		50px 50px,

		98% 50px,
		98% 50px,
		98% 50px,
		98% 115px,
		98% 50px;

	background-position:
		0 0,
		0 65px,   /* 50 + 15 */
		0 130px,  /* 50 + 15 + 50 + 15 */
		0 195px,  /* ... */
		0 325px,

		0 0,
		0 65px,
		0 130px,
		0 195px,
		0 325px;

	animation: shimmer1 1.2s infinite;
}

@keyframes shimmer1 {
	to {
		opacity: 1; 
		background-size: 
		98% 50px,
		98% 50px,
		98% 50px,
		98% 115px,
		98% 50px,

		98% 50px,
		98% 50px,
		98% 50px,
		98% 115px,
		98% 50px;
	}
}





.Skeleton #Contact .C::after, .Skeleton #Contact .G::after{  
	visibility: visible !important;
	width: 50%; 
	height: 15px; 
	content: '';
	position: absolute;
	top: 0;
	left: 0;  

	background-image: 
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 
		), 
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 
		), 
		linear-gradient(lightgray 15px, transparent 0), 
		linear-gradient(lightgray 15px, transparent 0);

	background-repeat: no-repeat;
	
	background-size: 
		50px 15px,
		50px 15px,
		80% 100px, 
		100% 100px;

	background-position: 
		0 0, 
		0 25px,
		0 0, 
		0 25px;

	animation: shimmer 0.9s infinite;
}

@keyframes shimmer {
	to {
		opacity: 1; 
		background-size: 
		80% 20px,
		100% 20px,
		80% 100px, 
		100% 100px;
	}
}