
.Prod {
	padding-bottom: 50px; margin: 0 auto;
}
.Prod > section {
	position: relative;
}
.Prod .ListProd {	
	width:100%;   display: grid;  place-items: center; margin: 0 auto; text-align: center; padding: 50px 0 50px 0; font-size: 1rem; min-height: 500px; font-family: var(--d71);
}
.Prod .ListProd:first-child {	
	padding-top: 0;
}
.Prod .ListProd:last-child {
	*padding-bottom:  0; 
}

.Prod .ListProd >.row:not(.Name) {
	width: 100%; display: flex; display: -ms-flexbox; -ms-flex-align: center; align-items: center; margin: 0 auto;
}
.Prod.fullW-- .ListProd >.row:not(.Name) {
	max-width: none; -ms-flex-align: start; align-items: start;
}
.Prod .ListProd >.row > .pContent {
	padding: 0 0 0 10px; -webkit-overflow-scrolling:touch; 
}

.Prod .ListProd >.row > .pContent.f100{
	flex: 100%; padding: 0px;
}
.Prod .pContent .img-square3-{
	width: 640px !important;
}
.Prod.fullW-- .pContent .img-square3-{
	width: 770px !important;
}
.Prod.YY1 .pContent .img-square3-{
	width: 840px !important;
}
.Prod.fullW--.YY1 .pContent .img-square3-{
	width: 770px !important;
}
.Prod .pContent.f100 .img-square3-{
	width: 1300px !important;
}






.ListProd:not(.max-h-none) .pContent,
.ListProd:not(.max-h-none) .pImg,
.ListProd:not(.max-h-none) .pImg img,
.ListProd:not(.max-h-none) .pImg iframe {
	*max-height: 800px !important; *padding:0; 
}


.ListProd:not(.max-h-none) .pContent,
.ListProd:not(.max-h-none) .img-box,
.ListProd:not(.max-h-none) .pImg iframe {
	max-height: 800px !important;
}







.Prod .ListProd >.row > .pContent {
	flex: 50%;
}
.Prod .ListProd >.row > div.pImg  {
	flex: 50%; cursor: pointer;
}
.Prod .ListProd >.row > div.pImg.w100  {
	flex: 50%;
}
.Prod.fullW-- .ListProd >.row > .pContent {
	flex: 60%;
}
.Prod.fullW-- .ListProd >.row > div.pImg  {
	flex: 40%;
}
.Prod.fullW-- .ListProd >.row > div.pImg.w100  {
	flex: 40%;
}

.Prod.YY1 .ListProd >.row > .pContent {
	flex: 65%;
}
.Prod.YY1 .ListProd >.row > div.pImg  {
	flex: 35%; cursor: pointer;
}
.Prod.YY1 .ListProd >.row > div.pImg.w100  {
	flex: 35%;
}
.Prod.fullW--.YY1 .ListProd >.row > .pContent {
	flex: 60%;
}
.Prod.fullW--.YY1 .ListProd >.row > div.pImg  {
	flex: 40%;
}
.Prod.fullW--.YY1 .ListProd >.row > div.pImg.w100  {
	flex: 40%;
}


.Prod.YYY1 .slide {
	width: calc( var(--defaultWidth)*.5*.9 ) !important; height: 100% !important; padding: 25px ;
}
.Prod.YY1 .slide {/*YY1 大圖1增加文字內容寬度*/
	width: calc( var(--defaultWidth)*.35*.9 ) !important; height: 100% !important;
}



.ListProd >.row > div.pImg img , .ListProd >.row > div.pImg iframe {
	-webkit-overflow-scrolling:touch; 
}	
.Prod .ListProd >.row > div.pImg img {
	max-width: 100% ; max-height: 500px !important; 
}	
.Prod .ListProd.max-h-none >.row > div.pImg img {
	max-height: none !important; 
}
.Prod .ListProd >.row > div.pImg iframe {
	max-width: 100%; width: 1000px; max-height: 800px !important; 
}	
.Prod .ListProd.max-h-none >.row > div.pImg iframe {
	max-height: none !important; 
}	
.ListProd >.row > .pContent img,.ListProd >.row > .pContent iframe {
	max-width: 100%;
}
.ListProd .Name {
	font-weight: 500; font-size: 1.45rem; margin-bottom: 30px; cursor:pointer; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ListProd .Name:hover {
	text-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
.ListProd .Name >div{
	font-weight: 100; font-size: 1rem;
}
.ListProd .ContentTXT {
	font-size: 1.1rem; /*Edut65/Module/_in.aspx 要同步修改*/ 
}	
.ListProd >.row > .pContent table td {
	text-align: left; 
}
.Prod .bi-heart, .Prod .bi-heart-fill {
	position: absolute; top: 0; right: 0;
}

.kw-match { background: yellow }

@keyframes y 
 {
	0%  {
		opacity: 1
	}
	to  {
		opacity: 0; transform: translate3d(0,100%,0)
	}
}
.fadeOutDown  {
	animation-name: y
}
.off {
	display:inline-block; padding:0 5px; background-color:rgba(255,0,0,.365); color:#fff; font-size: 0.95rem !important;
}
@media only screen and (max-width: 992px)  {

	.Prod .slide {
		width: 90vw !important; height: 100% !important;
	}
	.Prod.YY1 .slide {
		width: 90vs !important; height: 100% !important;
	}
	.EE1 .pImg, .EE2 .pImg  {
		margin: 20px 27px 40px 27px !important;
	}
	.Prod {
		padding: 20px 0; overflow-x: hidden;  
	}
	.Prod > section {
		margin-bottom: 100px;
	}
	.Prod .ListProd {
		position: relative; top: 0; left: 0; transform: translate(0,0); width: 98%; padding: 15px 5px 50px 5px; min-height: auto; *margin-bottom: 100px; height: auto;
	}
	.Prod .ListProd:last-child {
		margin-bottom: 0;
	}
	.Prod .ListProd >.row:not(.Name) {
		width:100%; flex-wrap: wrap; padding: 0!important;  border-radius: 0px;
	}
	.Prod .ListProd >.row > div.pImg,.ListProd >.row > div.pImg.w100 {
		flex: 100%; order:1; padding:0!important;
	}
	.Prod .ListProd >.row > .pContent {
		max-height: none; flex: 100%; order:2; 
	}
	.Prod .ListProd >.row > .pContent > div > div > div {
		width:100%!important; padding: 20px 0!important; font-size: 0.9rem;
	}
	.Prod .ListProd >.row > div:not(.Name) {
		max-height: none; padding:0!important; 
	}
	.Prod .ListProd >.row {
		min-height: none; 
	}
	.Prod .ListProd .Name {
		width: 100%; font-size: 1.2rem; font-weight: 400; margin: 35px 0 35px 0; text-align: left; border-left: 2px solid; padding-left: 10px;
	}
	.ListProd .ContentTXT {
		font-weight: 200; 
	}	
	.ListProd  .img-rounded{
		border-radius: 0;
	}
	.col-md-12 {
		padding-right: 20px!important; padding-left: 20px!important;
	}
	
	.Prod.fullW-- .ListProd >.row:not(.Name) {
		-ms-flex-align: start; align-items: start;
	}
	.Prod .bi-heart, .Prod .bi-heart-fill {
		position: relative; top: 0; right: 0;
	}
	.Prod.YY1 .ListProd >.row > .pContent {
		flex: 100%;
	}
	.Prod.YY1 .ListProd >.row > div.pImg  {
		flex: 100%;
	}
	.Prod.YY1 .ListProd >.row > div.pImg.w100  {
		flex: 100%;
	}
	.Prod.fullW--.YY1 .ListProd >.row > .pContent {
		flex: 100%;
	}
	.Prod.fullW--.YY1 .ListProd >.row > div.pImg  {
		flex: 100%;
	}
	.Prod.fullW--.YY1 .ListProd >.row > div.pImg.w100  {
		flex: 100%;
	}
	.Prod .pContent.f100 .img-square3{
		width: 100% !important;
	}
	.Prod .pContent .img-square3{
		width: 100% !important;
	}
	.Prod.fullW-- .pContent .img-square3{
		width: 100% !important;
	}
	.Prod.YY1 .pContent .img-square3{
		width: 100% !important;
	}
	.Prod.fullW--.YY1 .pContent .img-square3{
		width: 100% !important;
	}
}
