#banner
{
	@media(min-width:1200px)
	{
		overflow: hidden;
		position: relative;
		.slider
		{
			li
			{
				a
				{
					display: block;
					picture
					{
						display: block;
						width: 100%;
						img
						{
							width: 100%;
						}
					}
				}
			}
		}
		.product-menu
		{
			position: absolute;
			width:100%;
			top:50%;
			transform:translate(0%, -50%);
			left:0px;
			display: flex;
			ul.main
			{
				background-color: rgba(68,68,68,.5);

				background:#444444;
				padding:45px 0;
				position: relative;
				>li
				{
					margin-bottom: 0px;
					&:last-child
					{
						margin-bottom: 0px;
					}
					>a
					{
						color:$main-color;
						letter-spacing: 0.1rem;
						transition-duration:.5s;
						display: block;
						padding:15px 45px;
					}
					&:hover
					{
						>a
						{
							color:#fff;
						}
					}
					.child
					{
						display: none;
					}
					&:hover
					{
						.child
						{
							position: absolute;
							z-index: 1;
							top:0px;
							left:100%;
							padding-left:30px;
							display: block;
							min-height: 100%;
							>ul
							{
								display: flex;
								background-color: #444444;
								padding:45px;
								min-height:100%;
								>li
								{
									>a
									{
										padding:15px 0;
										display: block;
										width: 200px;
										color:rgba(171,171,171);
										transition-duration:.5s;
									}
									&:hover
									{
										>a
										{
											color:$main-color;
										}
									}
									ul
									{
										li
										{
											a
											{
												color:#fff;
												transition-duration:.5s;
												display: block;
												padding:15px 0;
												&:hover
												{
													
													color:$main-color;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}

		}
	}
	@media(max-width:1199px)
	{
		.slider
		{
			li
			{
				a
				{
					display: block;
					picture
					{
						display: block;
						img
						{
							display: block;
							width: 100%;
						}
					}
				}
			}
		}
		.product-menu
		{
			display: none;
		}
	}
	
}

#center-banner
{
	background:#F6F3D8;
	padding-top:50px;
	
	background-repeat: no-repeat;
	background-position: bottom center;
	position: relative;
	&::after
	{
		content: ' ';
		background-image:url('<?=getSystem("URLPrefix")?>webdata/tplimg/color_white_bg.svg');
		background-size:100%;
		width: 100%;
		height:17.35vw;
		position: absolute;
		bottom:0px;
		top:100%;
		left:0px;
	}
	li
	{
		position: relative;
		z-index: 1;
		margin-bottom: 50px;

		a
		{
			display: block;
			picture
			{
				display: block;
				img
				{
					display: block;
					width:100%;
				}
			}
		}
	}
}

#base-item
{
  position: relative;
  z-index:1;
  h2
  {
    margin-bottom:pxvw(40);
    a
    {
      color:$main-color;
      font-size:pxvw(30);
      font-weight:500;
      letter-spacing: pxvw(4);
    }
  }
  .item-group
  {
    display: flex;
    margin-bottom:pxvw(50);
		article
    {
      
      
      picture
      {
        display: block;
        width: 100%;
        position: relative;
        padding-top:100%;
        background-color: #fff;
        overflow: hidden;
        img
        {
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%, -50%);
          width: 100%;
          display: block;
        }
      }
      h3
      {
        margin-bottom:pxvw(10);
        a
        {
          color:#333;
          letter-spacing: 2px;
          font-size:16px;
					line-height: 25px;
          font-weight:500;
        }
      }
      span
      {
        display: block;
        color:#EA4949;
        font-weight: 500;
      }
    }
  }
	@media(min-width:768px)
	{
		.item-group
		{
			article
			{
				margin:0 pxvw(20);
      	width:calc((100% - 10.4vw) / 6);
				h3
				{
					a
					{
						font-size:pxvw(16);
          	line-height:pxvw(25);
					}
				}
				&:nth-child(6n)
				{
					margin-right:0px;
				}
				&:nth-child(6n + 1 )
				{
					margin-left: 0px;
				}
			}
		}
	}
	@media(max-width:767px)
	{
		h2
		{
			a
			{
				font-size:24px;
			}
		}
		.item-group
		{
			overflow-y:hidden;
			overflow-x:auto;
			article
			{
				margin-right:20px;
				&:last-child
				{
					margin-left:0px;
				}
				width:40vw;
				min-width:40vw;
			}
		}
		
	}
}

#center-item
{
	background-image:url('<?=getSystem("URLPrefix")?>webdata/tplimg/top-list-bg.png');
	background-repeat: no-repeat;
	background-size: 100%;
	padding-top:100px;
	.top-list
	{
		margin-bottom:pxvw(100);
		@media(min-width:768px)
		{
			display: grid;
			grid-template-columns: 20% 60% 20%;
			grid-template-areas: 
			"s1 s2 s3"
			"s4 s2 s5";
			li
			{
				a
				{
					display: block;
					picture
					{
						display: block;
						position: relative;
						padding-top:135.25%;
						overflow: hidden;
						img
						{
							position: absolute;
							top:50%;
							left:0px;
							transform:translate(0%, -50%);
							display: block;
							width:100%;
						}
					}
				}
				&:nth-child(1)
				{
					grid-area: s1;
					margin-bottom:pxvw(30);
				}
				&:nth-child(2)
				{
					grid-area: s4;
				}
				&:nth-child(3)
				{
					grid-area: s2;
					margin:0 pxvw(30);
					a
					{
						picture
						{
							padding-top:100%;
						}
					}
				}
				&:nth-child(4)
				{
					grid-area: s3;
					margin-bottom:pxvw(30);
				}
				&:nth-child(5)
				{
					grid-area: s5;
				}
			}
		}
		@media(max-width:767px)
		{
			li
			{
				a
				{
					display: block;
					picture
					{
						display: block;
						img
						{
							display: block;
							width: 100%;
						}
					}
				}
			}
		}
	}

	.center-list
	{
		margin-bottom:pxvw(100);
		@media(min-width:768px)
		{
			display: grid;
			grid-template-columns: 75% 25%;
			grid-template-areas: 
			"s1 s2"
			"s1 s3 ";
			
			>li
			{
				>picture
				{
					display: block;
					position: relative;
					padding-top:100%;
					img
					{
						width: 100%;
						position: absolute;
						top:50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
				&:nth-child(1)
				{
					grid-area: s1;
					margin-right:pxvw(30);
					>picture
					{
						padding-top:71.49%;
					}
				}
				&:nth-child(2)
				{
					margin-bottom:pxvw(30);
					grid-area: s2;
				}
				&:nth-child(3)
				{
					grid-area: s3;
				}
			}
		}
		@media(max-width:767px)
		{
			>li
			{
				>picture
				{
					display: block;
					img
					{
						display: block;
						width: 100%;
					}
				}
			}
		}

	}
	.bottom-list
	{

		display: flex;
		margin-bottom: pxvw(100);
		article
		{
			width: calc(50% - 0.781vw);
			margin:0 0.781vw;
			&:nth-child(2n)
			{
				margin-right: 0px;
			}
			&:nth-child(2n + 1)
			{
				margin-left: 0px;
			}
			picture
			{
				display: block;
				width: 100%;
				img
				{
					display: block;
					width: 100%;
				}
			}
			h3
			{
				a				
				{
					display: block;
					padding:10px 0;
					color:$main-color;
					font-size:20px;
					line-height: 30px;
					font-weight: 600;
					letter-spacing: 2px;
				}
			}
			p
			{
				font-size: 15px;
				line-height: 25px;
				letter-spacing: 2px;
				font-weight: 400;
			}
		}
		@media(min-width:768px)
		{
			article
			{
				h3
				{
					a				
					{
						font-size:pxvw(20);
						line-height: pxvw(30);
						letter-spacing: pxvw(2);
					}
				}
				p
				{
					font-size: pxvw(15);
					line-height: pxvw(25);
					letter-spacing: pxvw(2);
				}
			}
		}
		
		
	}
}

#foot-item
{
	background-image: url('<?=userimg($footItem->bg->data)?>');
	background-repeat: no-repeat;
	background-size: 100%;
	padding-top:pxvw(400);
	padding-bottom:pxvw(130);
	ul
	{
		display: flex;
		li
		{
			margin:0  1.2vw;
			width: calc(50% - 1.2vw);
			background-color: #fff;
			padding:pxvw(30);
			border-radius: 20px;
			box-shadow: 0 0 10px rgba(100,100,100,.5);
			background-repeat: no-repeat;

			&:nth-child(2n)
			{
				margin-right: 0px;
				background-image:url('<?=getSystem("URLPrefix")?>webdata/tplimg/br.png');
				background-position: right bottom;
			}
			&:nth-child(2n + 1)
			{
				margin-left:0px;
				background-image:url('<?=getSystem("URLPrefix")?>webdata/tplimg/bl.png');
				
			}
			picture
			{
				display: block;
				padding:0 pxvw(150);
				img
				{
					display: block;
					width: 100%;
				}
			}
			span
			{
				display: block;
				font-size: 16px;
				line-height: 25px;
				font-weight: 500;
				letter-spacing: 2px;
				&.t
				{
					color:#333;
					
				}
				&.p
				{
					color:#EA4949;
				}
			}
		}
	}
	@media(min-width:768px)
	{
		span
		{

			font-size: pxvw(16);
			line-height: pxvw(25);

			letter-spacing: pxvw(2);
			
		}
	}
}