
@media screen and (max-width:850px)
{
.headerPC
	{
	display:				none;
	}

.headerPC img
	{
	/*
	width:					100%;
	*/
	}

.headerMB
	{
	z-index:				100;
	width:					100%;

	display:				flex;
	justify-content:		center;
	flex-wrap:				wrap;

	position:				fixed;
	top:					0px;
	box-shadow:				0px -3px 20px 0px #aaa;

	background-image:		url("../img/Costco/header-Background-MB.png?v=3");
	background-position:	center top;
	background-repeat:		no-repeat;
	/*
	display:				block;
	text-align:				center;
	
	background-color:		#BFF9FF;
	line-height:			60px;
	*/

	opacity:				100%;
	}

.BlockHint
	{
	z-index:				100;
	display:				none;
	width:					100%;

	position:				fixed;

	top:					370px;
	text-align:				center;
	height:					70px;

	/*
	background-color:		#BFF9FF;
	top:					380px;
	box-shadow:				0px -3px 20px 0px #aaa;
	line-height:			60px;
	background-image:		url("../img.perfect/Block4MB-background.png");
	background-position:	right;
	background-repeat:		no-repeat;
	*/

	opacity:				100%;
	}

body
	{
	/*
	min-height:				960px;
	*/
	}

main
	{
	margin-top:				0px;	/* 60px; */
	margin-bottom:			0px;

	background-image:		url("../img/Costco/main-Background-PC.360.png");
	background-position:	center bottom;
	background-repeat:		no-repeat;

	/*
	min-height:				740px;
	min-height:				1031px;
	background-image:		url("../img/main-PC-SeriesB-Background.400.jpg");
	display:				flex;
	justify-content:		center;
	flex-wrap:				wrap;
	background-size: 		100% 125%;
	*/
	}

.Main4PC
	{
	display:				none;
	}

.Main4MB
	{
	display:				block;
	}

.Main4PC > img,
.Main4MB > img
	{
	width:					100%;
	}

#BlockTool
	{
	width:					calc(100% - 8px - 1px * 2);
	margin:					0px 1px 5px 1px;				/*上右下左*/
	padding:				3px;

	justify-content:		space-around;
	align-items:			stretch;
	}

#BlockHelp
	{
	/*
	width:					calc(100% - 8px - 1px * 2);
	*/
	width:					360px;
	margin:					0px 1px 5px 1px;				/*上右下左*/

	justify-content:		space-around;
	align-items:			stretch;

	min-height:				290px;
	}

/*
--------------------------------------------------------------------------------------------------------------------------
*/

.B1
	{
	width:					99%;
	max-height:				440px;						/* added on 2023-05-26 , to fix LCS */

	padding-top:			3px;
	padding-bottom:			5px;

	border:					0px solid #00ffff;
	display:				flex;
	justify-content:		space-around;
	/*
	background-color:		#BFF9FF;
	*/
	}

.B2
	{
	width:					360px;

	display:				inline-block;
	float:					left;

	border:					0px solid #00ffff;
	/*
	height:					308px;
	background-color:		#BFF9FF;
	*/
	}

.B2Body
	{
	width:					100%;
	padding-top:			0px;
	}

.B2Popup
	{
	display:				none;
	justify-content:		space-around;

	position:				absolute;
	top:					40px;
	width:					calc(100% - 10px);
	height:					220px;
	border:					0px solid #ff0000;	

    background-color:		rgb(0, 0, 0);
    /*
    inset:					0px;
    */
    opacity:				0.6;
    z-index:				9998;
	}

.B2Inner
	{
	/*
	position:				absolute;
	left:					30%;
	height:					240px;
	*/
	z-index:				300;
	width:					100px;

	border:					1px solid #ffff00;	
	}

.ProductImg > img
	{
	width:					100%;
	}

.Product.active
	{
	color:					#FF0000;
	}

#Brands
	{
	padding-top:			0px;
	padding-bottom:			5px;
	/*
	background-image:		url("../img/Brand1/mainBrands-MB.ProductsA.png");
	*/
	}
.Brand
	{
	height:					55px;
	}

#ProductsA,
#ProductsB,
#ProductsC
	{
	/*
	height:					222px;
	*/
	}

.H1
	{
	display:				flex;
	justify-content:		left;
	flex-wrap:				wrap;
	width:					100%;
	margin:					0px;

	/*
	width:					48%;
	width:					calc(50% - 2px);
	height:					200px;
	*/
	border:					0px solid #cccccc;
	}

.H1-PC
	{
	display:				none;
	}

.H1-NB
	{
	display:				none;
	}

.H1-MB
	{
	display:				block;
	width:					100%;
	}

.H2
	{
	display:				flex;
	justify-content:		left;
	flex-wrap:				wrap;
	width:					100%;
	margin:					0px;

	/*
	width:					48%;
	width:					calc(50% - 2px);
	height:					200px;
	*/
	border:					0px solid #cccccc;
	}

#YMK
	{
	display:				block;
	width:					360px;
	height:					430px;
	margin:					1px;
	text-align:				center;
	border:					0px solid #0000ff;
	background-color:		#cccccc;
	}

#YMK-module
	{
	width:					360px;
	height:					430px;
	margin:					0px;
	text-align:				center;
	}

#ProductsD
	{
	width:					calc(100% - 4px);
	/*
	width:					100%;
	width:					calc(100% - 4px);
	*/
	padding-top:			10px;
	padding-bottom:			10px;
	/*
	width:					calc(100% - 4px);
	min-height:				100px;
	*/
	margin:					2px;

	background-color:		#ffcccc;

	display:				none;
	position:				relative;
	}

#ProductsDL
	{
	width:					20px;
	float:					left;
	background-color:		#cccccc00;
	}
#ProductsDC
	{
	width:					calc(100% - 21px);
	float:					left;
	background-color:		#cccccc00;
	}
#ProductsDR
	{
	width:					0px;
	float:					left;
	background-color:		#cccccc00;
	}

.BtnSliderToL
	{
	position:				absolute;
	z-index:				50;
	width:					30px;
	top:					10px;
	left:					0px;
	cursor:					pointer;
	background-color:		#ffcccc;
	}
.BtnSliderToR
	{
	position:				absolute;
	z-index:				50;
	width:					50px;
	top:					10px;
	right:					1px;
	cursor:					pointer;
	background-color:		#ffcccc;
	}

.BtnSliderToL > img,
.BtnSliderToR > img
	{
	width:					100%;
	}

.item > .Product
	{
	font-size:				12px;
	}

.owl-carousel .owl-item img
	{
	max-height:				250px;						/* added on 2023-05-26 , to fix LCS */

	aspect-ratio: attr(width) / attr(height);
	}

.H1 img
	{
	aspect-ratio: attr(width) / attr(height);
	}

/*
--------------------------------------------------------------------------------------------------------------------------
*/

.BtnJump
	{
	font-size:				14px;
	}

.LinkButtons
	{
	position:				relative;
	display:				flex;
	justify-content:		space-between;
	left:					116px;
	top:					192px;
	width:					189px;
	height:					56px;
	}
.LinkButtons > div
	{
	width:					55px;
	border:					1px solid #ff0000;
	cursor:					pointer;
	}

.footerPC
	{
	display:				none;
	}

.footerMB
	{
	text-align:				center;
	color:					#ffffff;
	height:					60px;
	line-height:			60px;
	}
}
