#head
{
  z-index:1000;
}

#product-menu
{
	
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px; 
	letter-spacing: 0.8px;
  z-index:1000;
	color:#fff;
	h4
	{
		display: flex;
		width: 220px;
		background-color: #444;   
		span
		{
			flex:1;
			padding:10px;
		}
		label
		{
			width: 46px;
			line-height:46px;
			text-align: center;;
			position: relative;
			i
			{
				transition-duration:.5s;
			}
			input
			{
				position: absolute;
				top:0px;
				left:0px;
				width: 100%;
				height:46px;
				margin:0px;
				border:0px;
				padding:0px;
				cursor: pointer;
				opacity: 0;
			}
			&:has(input:checked)
			{
				i
				{
					transform:rotate(-90deg);
				}
			}
		}
	}
	
	@media(min-width:1500px)
	{
		padding-left:calc(50% - 745px);
	}
	@media(max-width:1499px)
	{
		padding-left:10px;
	}

	@media(min-width:1200px)
	{
		padding-right:10px;
		position: absolute;
		top:143px;

		nav
		{
			background-color: #666;
			padding-left:10px;
			display: grid;
			grid-template-rows: 1fr;
			transition: .5s grid-template-rows ease;
			position: relative;
			>ul
			{
				overflow: hidden;
				>li
				{
					a
					{
						color:#fff;
						display: block;
						padding:10px 0;
						white-space:nowrap;
						transition-duration:.5s;
						&:hover
						{
							color:$main-color;
						}
					}
					&:has(>div)
					{
						display: flex;
						a
						{
							flex:1;
						}
					}
					label
					{
						text-align: center;
						width:46px;
						line-height:46px;
					}
					>div
					{
						display: none;
						position: absolute;
						top:0px;
						left:100%;
						width: auto;
						padding-left:20px;
						min-height:100%;
						a
						{
							padding:10px;
							width: 120px;
						}
						>ul
						{
							background-color: #666;
							overflow: hidden;
							>li
							{
								>a
								{
									background-color: #444;
									max-width:120px;
								}
								&:has(ul)
								{
									display: flex;
									ul
									{
										flex:1;
									}
								}
							}
							li
							{
								ul
								{
									display: flex;
								}
							}
						}
					}
					&:hover,&.active
					{
						>div
						{
							display: block;
						}
					}
				}
			}

		}
		&:has(input:checked)
		{
			nav
			{
				grid-template-rows: 0fr;
			}
		}
	}
	@media(max-width:1199px)
	{
		display: none;
	}
}

#banner
{
	
	overflow: hidden;
	.silder
	{
		display: flex;
		
		li
		{
			min-width:100%;
			a
			{
				display: block;
				picture
				{
					display: block;
					img
					{
						display: block;
						width: 100%;
					}
				}	
			}
		}
	}
		
}


#top-bg
{
	top:50vw;
}

#center-banner
{
	padding-top:24px;
	padding-bottom:24px;
	
	li
	{
		padding:24px 0;
		a
		{
			display: block;
			picture
			{
				display: block;
				img
				{
					display: block;
					width: 100%;
				}
			}
		}
	}
	@media(max-width:1199px)
	{
		padding-top:12px;
		padding-bottom:12px;
		li
		{
			padding:12px 0;
		}
	}
	
}

#best-item
{
	padding-top:24px;
	
	h2
	{
		margin-bottom:48px;
		a
		{
			color:$main-color;
			font-size: 32px;
			font-weight: 400;
			line-height: 48px; /* 150% */
			letter-spacing: 1.6px;
		}
	}
	.item-list
	{
		display: flex;
		overflow-y:auto;
		padding-bottom:50px;
		article
		{
			
			margin:0 10px;
			min-width: calc(100% / 6);
			picture
			{
				display: block;
				margin-bottom:16px;
				img
				{
					display: block;
					width: 100%;
				}
			}
			&:first-child
			{
				margin-left: 0px;	
			}
			&:last-child
			{
				margin-right:0px;
			}
		}
		h3
		{
			font-size: 16px;
			font-weight: 400;
			line-height: 26px; /* 162.5% */
			letter-spacing: 0.8px;
			margin-bottom:10px;
			a
			{
				color:#444;
				transition-duration:.5s;
				&:hover
				{
					color:$main-color;
				}
			}
			
		}
		.price
		{
			display: flex;
			color:#EA4949;
			font-size: 16px;
			font-weight: 400;
			line-height: 26px; /* 162.5% */
			letter-spacing: 0.8px;
		}
	}
	@media(max-width:767px)
	{
		h2
		{
			a
			{
				font-size: 28px;
				font-style: normal;
				font-weight: 400;
				line-height: 42px; /* 150% */
				letter-spacing: 1.4px;
			}
		}
		.item-list
		{
			article
			{
				min-width: calc(60%);
			}
		}
	}
}

#center-bg
{
	padding-top:50px;
	padding-bottom:50px;
	background-image: url('<?=getSystem("URLPrefix")?>webdata/tplimg/bg.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
	@media(max-width:768px)
	{
		background-position: center center;
		background-size: auto;
	}
	.top-list
	{
		margin-bottom:100px;
		h2
		{
			margin-bottom:50px;
			a
			{
				color:$main-color;
				font-size: 32px;
				font-weight: 400;
				line-height: 48px; /* 150% */
				letter-spacing: 1.6px;
				transition-duration:.5s;
				&:hover
				{
					color:#fff;
				}
			}
		}
		ul
		{
			display: grid;
			li
			{
				overflow: hidden;
				a
				{
					display: block;
					picture
					{
						display: block;
						img
						{
							display: block;
							width: 100%;
						}
					}
				}
				&:nth-child(1)
				{
						grid-area: s1;
				}
				&:nth-child(2)
				{
					grid-area:s2;
					width: 100%;
					height:100%;
				}
				&:nth-child(3)
				{
					grid-area: s3;
				}
				&:nth-child(4)
				{
					grid-area: s4;
				}
				&:nth-child(5)
				{
						grid-area: s5;
				}
			}

		}
		@media(min-width:980px)
		{
			ul
			{
				grid-template-columns: 22.13% 55.7% 22.13%;
				grid-template-areas: 
				"s1 s2 s3"
				"s4 s2 s5";
				li
				{
					&:nth-child(1)
					{
						padding-right:11.44%;
						margin-bottom:12.65%;
					}

					&:nth-child(3)
					{
						padding-left:11.44%;
						margin-bottom:12.65%;
					}
					&:nth-child(4)
					{
						padding-right:11.4%;
					}
					&:nth-child(5)
					{
						padding-left: 11.4%;
					}
				}
			}
		}
		@media(max-width:979px)
		{
			margin-bottom: 200px;
			h2
			{
				a
				{
					font-size: 28px;
					font-weight: 400;
					line-height: 42px; /* 150% */
					letter-spacing: 1.4px;
				}
			}
			ul
			{
				grid-template-columns: 50% 50%;
				grid-template-areas: 
				"s1 s3"
				"s2 s2"
				"s4 s5";
				li
				{
					&:nth-child(1)
					{
						padding-right: 8px;
						margin-bottom:16px;
					}
					&:nth-child(3)
					{
						margin-bottom:16px;
						padding-left:8px;
					}
					&:nth-child(4)
					{
						padding-top:16px;
						padding-right: 8px;
					}
					&:nth-child(5)
					{
						padding-left:8px;
						padding-top:16px;
					}
				}
			}
		}
	}
	.center-list
	{
		margin-bottom: 48px;
		h2
		{
			margin-bottom: 48px;
			a
			{
				font-size: 32px;
				font-weight: 400;
				line-height: 48px; /* 150% */
				letter-spacing: 1.6px;
				color:#fff;
			}
		}
		>ul
		{
			display: grid;
			grid-template-columns: 75.46% 24.54%;
			grid-template-areas: 
			"s1 s2"
			"s1 s3";
			>li
			{
				position: relative;
				&:nth-child(1)
				{
					grid-area: s1;
					padding-right:4.24%;
				}
				&:nth-child(2)
				{
					grid-area:s2;
					margin-bottom:10.59%;
				}
				&:nth-child(3)
				{
					grid-area:s3;
				}
				>picture
				{
					display: block;
					img
					{
						display: block;
						width: 100%;
					}
				}
				ul
				{
					li
					{
            >div
            {
              position: absolute;
							background-clip: padding-box;
							border:10px solid rgba(255,255,255,.5);
							border-radius: 15px;
							width:350px;
							background-color: #fff;
							display: none;
							a
							{
								display: flex;
								align-items:center;
								picture
								{
									width: 150px;
									img
									{
										display: block;
										width: 100%;
									}
								}
								>div
								{
									padding:10px;
									font-size: 16px;
									font-weight: 400;
									line-height: 28px; /* 155.556% */
									letter-spacing: 0.9px;
									color:#444;
									span
									{
										display: block;
									}
								}
							}
            }
						i
						{
              cursor: pointer;
							position: absolute;
							background-color: rgba(255,255,255,1);
							border-radius: 100%;
							display: block;
							padding: 5px;
              border:5px solid rgba(255,255,255,.5);
              background-clip: padding-box;
              transition-duration:.5s;
              &:hover
              {
                border-color:rgba(255,255,255,1);
              }
						}
						&:hover
						{
							>div
							{
								display: block;
							}
						}
					}
				}
			}
		}
		@media(max-width:979px)
		{
			h2
			{
				margin-bottom: 24px;
				a
				{
					font-size: 28px;
					font-weight: 400;
					line-height: 42px; /* 150% */
					letter-spacing: 1.4px;
				}
			}
			>ul
			{
				display: block;
				>li
				{
					&:nth-child(1)
					{
						padding-right:0px;
						margin-bottom:24px;
					}
					&:nth-child(2)
					{
						margin-bottom: 24px;
						padding-right: 0px;
					}
					&:nth-child(3)
					{
						padding-left: 0px;
						margin-bottom:24px;
					}
					ul
					{
						display: flex;						
						overflow-y:auto;
						li
						{							
							>div
							{
								min-width:300px;
								display: block;
								position:static;
								a
								{
									picture
									{
										width:100px;
									}
								}
								
							}
						}
					}
				}
			}
		}
	}
	.bottom-list
	{
		h2
		{
			margin-bottom:50px;
			a
			{
				color:$main-color;
				font-size: 32px;
				font-weight: 400;
				line-height: 48px; /* 150% */
				letter-spacing: 1.6px;
				transition-duration:.5s;
				&:hover
				{
					color:#fff;
				}
			}
		}
		>div
		{
			article
			{
				picture
				{
					margin-bottom:24px;
					display: block;
					img
					{
						display: block;
						width: 100%;
					}
				}
				h3
				{
					margin-bottom:16px;
					a
					{
						color:$main-color;
						transition-duration:.5s;
						&:hover
						{
							color:#444;
						}
					}
				}
				p
				{
					font-size: 16px;
					font-weight: 400;
					line-height: 26px; /* 162.5% */
					letter-spacing: 0.8px;
					color:#444;
				}
			}
		}
		@media(min-width:768px)
		{
			>div
			{
				display: flex;
				article
				{
					flex:1;
					width:48.4%;
					margin: 0 1.6%;
					&:nth-child(2n)
					{
						margin-right:0px;
					}
					&:nth-child(2n + 1)
					{
						margin-left:0px;
					}
				}
			}
		}
		@media(max-width:767px)
		{
			h2
			{
				a
				{
					font-size: 28px;
					font-weight: 400;
					line-height: 42px; /* 150% */
					letter-spacing: 1.4px;
				}
			}
			>div
			{
				article
				{
					margin-bottom:30px;
				}
			}
		}
	}
}

#foot-item
{
	background-image:url('<?=userimg($footItem->bg->data)?>');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position:top  center;
	
	ul
	{
		li
		{
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 2px 2px 5px rgba(0,0,0,.5);
			overflow: hidden;
			a
			{
				background-color: #fff;
				display: block;
				picture
				{
					margin-bottom:16px;
					display: block;
					img
					{
						display: block;
						width:100%;
					}
				}
				>span
				{
					display: block;
					&.t
					{
						font-size: 18px;
						font-weight: 400;
						line-height: 28px; /* 155.556% */
						letter-spacing: 0.9px;
						color:#000;
					}
					&.p
					{
						font-size: 16px;
						font-weight: 400;
						line-height: 26px; /* 162.5% */
						letter-spacing: 0.8px;
						color:#ea4949;
					}
				}
			}
		}
	}
	@media(min-width:768px)
	{
    padding-top:21.4%;
		padding-left:16%;
		padding-right:16%;
		padding-bottom:5%;
		ul
		{
			display: flex;
			li
			{
				margin:0 2%;
				width:48%;
				&:nth-child(2n)
				{
					margin-right:0px;
				}
				&:nth-child(2n + 1)
				{
					margin-left:0px;
				}
				a
				{
					padding:5% 11%;
				}
			}
		}
	}
	@media(max-width:767px)
	{
		background-image:url('<?=userimg($footItem->mobileBg->data)?>');
    padding-top:50%;
    padding-bottom:50px;
    ul
    {
      display: flex;
      overflow-x:auto;
      li
      {
        margin:10px;
        min-width:250px;
        padding:10px;
      }
    }
	}
}