body
{
  padding-top:97px;
  @media(max-width:1199px)
  {
    padding-top:50px;
  }
}

.more-btn
{
	display: inline-block;
	padding:0 30px 0 40px;
	color:#666;
	border-radius: 50px;
	border:2px solid $main-color;
	position: relative;
	line-height:56px;
	height:60px;

	overflow:hidden;
	span
	{
		position: relative;
		z-index:1;
	}
	&::before
	{
		transition-duration:0.5s;
		position: absolute;
		top:calc(50% - 4px);
		left:20px;
		content:' ';
		width:8px;
		height:8px;
		background:$main-color;
		border-radius: 100%;
		display: block;
		transform:scale(1);
	}
	&::after
	{
		transition-duration:0.5s;
		position: absolute;
		top:calc(50% - 4px);
		left:20px;
		content:' ';
		width:8px;
		height:8px;
		background:#fff;
		border-radius: 100%;
		display: block;
		opacity: 0;
	}
	&:active
	{
			color:#fff;
	}
	&:hover
	{
		transition-duration:0.5s;
		background-color: $main-color;
		color:#fff;
		&::before
		{
			transform:scale(100);
		}
		&::after
		{
			background-color: #fff;
			opacity: 1;
		}
	}
}
#head
{
	@media(max-width:1199px)
	{
		padding-bottom:0px;
	}
}
#body
{
	#top-note
	{
		padding-bottom:50px;
		h1
		{
			font-size:2em;
			margin-bottom:20px;
			line-height: 130%;
			font-weight: 400;
			letter-spacing: 2px;
		}
		p
		{
			margin-bottom:50px;
			font-size:16px;
			line-height:30px;

		}
		@media(max-width:767px)
		{
			padding-bottom:20px;
			p
			{
				margin-bottom: 20px;
			}
		}
		ul
		{
			display: flex;
			li
			{
				a
				{
					color:$main-color;
				}
			}
			@media(min-width:980px)
			{
				li
				{
					padding-right:40px;
					a
					{
						padding-right:50px;
						position: relative;
						&::after
						{
							content:' ';
							width:40px;
							height:1px;
							background:$main-color;
							top:50%;
							right:0px;
							position: absolute;
						}
					}
				}
			}
			@media(max-width:979px)
			{
				flex-wrap: wrap;
				li
				{
					width: calc(100% / 3);
					padding:10px;
					a
					{
						padding:5px;
						border-radius: 5px;
						line-height: 130%;
						display: block;
						text-align: center;
						background: $main-color;
						color:#fff;
					}
				}
			}
		}
	}

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

	#about
	{
		padding-top:100px;
		padding-bottom:100px;
		.title
		{
			h2
			{
				font-size:20px;
				margin-bottom:10px;
				line-height:40px;
				letter-spacing: 4px;
				@media(min-width:980px)
				{
					span
					{
						position: relative;
						&::after
						{
							content:' ';
							width:100px;
							height:1px;
							background-color: #000;
							position: absolute;
							top:50%;
							right:-110px;
						}
					}
				}
				@media(max-width:979px)
				{
					position: relative;
					span
					{
						background-color: #fff;
						position: relative;
						z-index:1;
						padding-right:10px;
					}
					&::after
					{
						content:' ';
						width:100%;
						height:1px;
						background-color: #000;
						position: absolute;
						top:50%;
						left:0px;
					}
				}
			}
			.en-title
			{
				display: block;
				margin-bottom:50px;
				font-weight:300;
			}
		}
		.description
		{
			p
			{
				line-height:30px;
				color:#333;
				font-size:15px;
				margin-bottom:50px;
			}
		}
		.btn
		{
			@media(max-width:979px)
			{
				text-align:center;
			}
		}

		@media(min-width:980px)
		{
			display: flex;
			.title
			{
				width:50%;
			}
			.description
			{
				width:50%;
			}
		}
		@media(max-width:979px)
		{
			padding-bottom:50px;
		}
	}




	#gallery
	{
		padding-top:100px;
		padding-bottom:100px;
    transform:translateY(200px);
    transition-duration:0.5s;
		.header
		{
			margin-bottom:50px;
			.title
			{
				h2
				{
					font-size:20px;
					letter-spacing: 4px;
					margin-bottom:10px;
					@media(min-width:980px)
					{
						span
						{
							position: relative;
							&::after
							{
								content:' ';
								width:100px;
								height:1px;
								background-color: #000;
								position: absolute;
								top:50%;
								right:-110px;
							}
						}
					}
					@media(max-width:979px)
					{
						position: relative;
						span
						{
							background-color: #fff;
							position: relative;
							z-index:1;
							padding-right:10px;
						}
						&::after
						{
							content:' ';
							width:100%;
							height:1px;
							background-color: #000;
							position: absolute;
							top:50%;
							left:0px;
						}
					}
				}
				.en-title
				{
					display: block;
					margin-bottom:50px;
				}
			}
			.description
			{
				line-height:30px;
				color:#333;
				font-size:15px;
				margin-bottom:50px;
			}
			@media(min-width:768px)
			{
				display: flex;
				.title
				{
					flex:1;
				}
				.description
				{
					padding-left:20px;
					width: 40%;
				}
			}
		}

		.article-list
		{
			margin-bottom: 20px;
			display: flex;
			article
			{
				picture
				{
					width:100%;
					margin-bottom:20px;
					display: block;
					overflow: hidden;
					border-radius:50px;
					img
					{
            transition-duration:0.5s;
						display: block;
						width:100%;
					}
          &:hover
          {
            img
            {
              transform:scale(1.2);
            }
          }
				}
				h3
				{
					line-height:40px;
					letter-spacing: 2px;
					margin-bottom:10px;
					a
					{
						color:#333;
						font-size:18px;
					}
				}
				p
				{
					color:#666;
					line-height:30px;
					font-size:15px;
				}
			}
			@media(min-width:980px)
			{
				flex-wrap:wrap;
				article
				{
					width:calc((100% - 80px) / 3);
					margin:0 20px 80px 20px;
					&:nth-child(3n)
					{
						margin-right:0px;
					}
					&:nth-child(3n + 1)
					{
						margin-left:0px;
					}
				}
			}
			@media(max-width:979px)
			{
				overflow-y:auto;
				article
				{
					width:85vw;
					min-width:85vw;
					margin-right:20px;
					&:last-child
					{
						margin-right:0px;
					}
				}
			}

		}
		.more
		{
				text-align: center;
		}
		@media(max-width:979px)
		{
			padding-top:50px;
			padding-bottom:50px;
		}
	}


	#product
	{
		padding-top:100px;
		padding-bottom:100px;
		background: #f1f1f1;
		h2
		{
			font-size:20px;
			margin-bottom:10px;
			letter-spacing: 4px;
			position: relative;
			span
			{
				position: relative;
			}
			@media(min-width:980px)
			{
				span
				{
					&::after
					{
						content:' ';
						width:100px;
						height:1px;
						background-color: #000;
						position: absolute;
						top:50%;
						right:-110px;
					}
				}
			}
			@media(max-width:979px)
			{
				span
				{
					background-color: #f1f1f1;
					position: relative;
					z-index:1;
					padding-right:10px;
				}
				&::after
				{
					content:' ';
					width:100%;
					height:1px;
					background-color: #000;
					position: absolute;
					top:50%;
					left:0px;
				}
			}
		}
		.en-title
		{
			display: block;
			margin-bottom:50px;
		}
		.article-list
		{
			article
			{
				background:#fff;
				border-radius: 5px;
				box-shadow: 10px 10px 10px rgba(200,200,200,.5);
				h3
				{
					a
					{
						display: flex;
						justify-content:space-between;
						align-items:center;
						padding:10px 20px;
						color:#000;
						font-size:18px;
						line-height:36px;
						letter-spacing: 2px;
            transition-duration:0.5s;
						i
						{
							color:$main-color;
						}
            &:hover
            {
              color:$main-color;
            }
					}
				}
				picture
				{
					display: block;
					background-color: #999;
					position: relative;
          overflow: hidden;
					&::after
					{
						content:' ';
						padding-top:60%;
						display: block;
					}
					img
					{
						z-index: 1;
						position: absolute;
						top:0px;
						left:0px;
						width:100%;
						display: block;
						width:100%;
            transition-duration:0.5s;
					}

          &:hover
          {
            img
            {
              transform:scale(1.2);
            }
          }
				}
				p
				{
					padding:10px 20px;
					line-height:30px;
					font-size:15px;
					color:#666;
				}
			}
			@media(min-width:980px)
			{
				display: flex;
				flex-wrap:wrap;
				article{
					width: calc((100% - 80px) / 3);
					margin:0 20px 40px 20px;
					&:nth-child(3n)
					{
						margin-right:0px;
					}
					&:nth-child(3n + 1)
					{
						margin-left: 0px;;
					}
				}

			}
			@media (min-width:768px) and (max-width:979px)
			{
				display: flex;
				flex-wrap:wrap;
				article{
					width: calc(50% - 10px);
					margin:0 5px 30px 5px;
					&:nth-child(2n)
					{
						margin-right:0px;
					}
					&:nth-child(2n + 1)
					{
						margin-left: 0px;;
					}
				}
			}
			@media(max-width:767px)
			{
				article
				{
					margin-bottom:30px;
				}
			}
		}
		.more
		{
				text-align:center;
				padding-top:50px;
		}

	}


	#service
	{
		padding-top:100px;
		padding-bottom:100px;
//		background:#F5F5F5;
		h2
		{
			font-size:20px;
			letter-spacing: 4px;
			font-size:1.2em;
			margin-bottom:10px;
			@media(min-width:980px)
			{
				span
				{
					position: relative;
					&::after
					{
						content:' ';
						width:100px;
						height:1px;
						background-color: #000;
						position: absolute;
						top:50%;
						right:-110px;
					}
				}
			}
			@media(max-width:979px)
			{
				position: relative;
				span
				{
					background-color: #F5F5F5;
					position: relative;
					z-index:1;
					padding-right:10px;
				}
				&::after
				{
					content:' ';
					width:100%;
					height:1px;
					background-color: #000;
					position: absolute;
					top:50%;
					left:0px;
				}
			}
		}
		.en-title
		{
			display: block;
			margin-bottom:50px;
		}

		.article-list
		{

			article
			{
				background-color: #fff;
				padding:40px;
				position: relative;
				.icon
				{
					text-align:center;
					display: flex;
					justify-content:center;
					align-items:center;
					i
					{
						color:$main-color;
						font-size:80px;
					}
				}

				h3
				{
					text-align: center;
					margin-bottom: 30px;
					font-weight: 500;
				}
				p
				{
					line-height:21px;
					color:#666666;
					font-size:15px;
					margin-bottom:50px;
				}
				.more
				{

					a
					{
						color:#fff;
            background-color: $main-color;
            padding:4px 8px;
            border-radius: 5px;
					}
				}
			}
			@media(min-width:980px)
			{
				display: flex;
				flex-wrap: wrap;
				article
				{
					width: calc((100% - 80px) / 3);
					margin:0 20px 40px 20px;
					&:nth-child(3n)
					{
						margin-right: 0px;
					}
					&:nth-child(3n + 1)
					{
						margin-left: 0px;
					}
					.icon
					{
						margin-bottom:30px;
					}
					.more
					{
						position: absolute;
						bottom:20px;
						left:40px;
					}
				}
			}
			@media(max-width:979px)
			{
				article
				{
					display: flex;
					padding:20px 10px;
					margin-bottom:20px;
					.icon
					{
						width:70px;
						height:50px;
						i
						{
							font-size:30px;
							margin:0px;
						}
					}
					.data
					{
						flex:1;
						h3
						{
							text-align:left;
							margin-bottom:10px;
						}
						p
						{
							margin-bottom:10px;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		.more-service
		{
			text-align:center;
			padding-top:50px;
			a
			{
				display: inline-block;
				padding:20px 30px;
				color:#fff;
				background-color: $main-color;
				border-radius: 50px;
			}
		}
	}
}