@charset "utf-8";
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/*Footer*/
footer {
	position: relative;
	overflow: hidden;
	padding: 90px 0 80px;
	background-color: #274001;
	color: #F0F2BB;
}

.ft-wrap {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	column-gap: 150px;
}

.col, .cols {
	flex: 0 1 320px;
	min-width: 300px;
}

.col {
	text-align: center;
}

.col h3, .cols h3 {
	margin: 0 0 14px;
	font-family: "Open Sans", sans-serif;
	font-size: 32px;
	font-weight: 700;
}

.social {
	display: flex;
	column-gap: 16px;
	margin-top: 10px;
	justify-content: center;
}

.social img {
	width: 48px;
	height: 48px;
	display: block;
}

ul.linklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.linklist a{
	color: #FFFFFF;
	text-decoration: none;
	display: inline-block;
	font-family: "Noto Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	margin: 6px 0;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size .22s ease, opacity .22s ease;
}

ul.linklist a:hover {
	background-size: 100% 2px;
	opacity: .95;
}

a.linklist {
	color: #FFFFFF;
	text-decoration: none;
	display: inline-block;
	font-family: "Noto Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	margin: 6px 0;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size .22s ease, opacity .22s ease;
}

a.linklist:hover {
	background-size: 100% 2px;
	opacity: .95;
}

.cols ul.linklist a{
	font-size: 14px;
	margin: 5px 0;
}

.cols p{
	font-size: 14px;
}

@media (max-width: 1024px){
	.ft-wrap{
		width: 90%;
		flex-direction: column;
		align-items: center;
		grid-row-gap: 28px;
		column-gap: 0;
	}
	
	.col, .cols{
		min-width: 0;
		width: 100%;
		flex-basis: auto;
	}
	
	footer{ padding: 60px 0 50px; }
	.col h3 { font-size: 26px; }
	
	.cols {
		text-align: center;
		margin-top: 50px;
	}
}


@media (max-width: 768px){
	.ft-wrap{
		width: 90%;
		flex-direction: column;
		align-items: center;
		grid-row-gap: 28px;
		column-gap: 0;
	}
	
	.col, .cols{
		min-width: 0;
		width: 100%;
		flex-basis: auto;
	}
	
	footer{ padding: 60px 0 50px; }
	.col h3 { font-size: 26px; }
	
	.cols {
		text-align: center;
		margin-top: 50px;
	}
}