footer.footer {
	position: relative;
	padding-top: 50px;
	overflow: hidden;
	background-size: contain;
	box-shadow: 0px 0px 10px rgba($color: #000, $alpha: .3);
	z-index: 100;
	.container{
		position: relative;
	}
	.logoGroup{
		margin-top: 10px;
		.logo{
			width:170px;
			img{
				width:100%;
			}
		}
		p{
			padding-top: 5px;
			text-align: right;
			color: #888;
			font-size: 12px;
		}
	}
	.fTitle{
		font-family: 'Jost';
		font-size: 28px;
		color: map-get($cisColor, third);
		padding-bottom: 5px;
		border-bottom: 1px #ddd solid;
		margin-bottom: 25px;
	}
	.site_link,.info_link,.share_link{
		display: flex;
		margin-left: auto;	
		a{
			color: map-get($cisColor, third);
			font-weight: bold;
			transition: all .3s;
			&:hover{
				color: map-get($cisColor, master);
			}
		}		
	}
	.site_link{
		flex-direction: column;
		a+a{
			margin-top: 10px;
		}	
	}
	.info_link{
		align-items: flex-start;
		flex-direction: column;
		font-size: 14px;
		max-width: 360px;
		a{
			display: flex;
			align-items: flex-start;
			margin-bottom: 10px;
		}	
		i,svg{
			color: map-get($cisColor, master);
			margin-top: 4px;
			margin-right: 6px;
		}
	}
	.share_link{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
		a{			
			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				width:30px;
				height: 30px;
				border-radius: 50%;
				font-size: 16px;
				color: #fff;
				background-color: map-get($cisColor, second);
				margin:10px 4px 0;
				transition: all .3s;		
				&.fb:hover{
					background-color: #4b75bd;
				}
				&.line:hover{
					background-color: #03c832;
				}
				&.yt:hover{
					background-color: #fb0004;
				}
				&.ins:hover{
					background-color: #a665c3;
				}
				&.ss:hover{
					padding: 5px;
					background-color: #fff;
					img{
						width:25px;
						height: 25px;
					}
				}
				&:hover{					
					transform: scale(1.1);
				}
			}
		}
	}
	.topBtn{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width:40px;
		height: 40px;
		top:0px;
		right:15px;
		font-size: 22px;
		color: #fff;
		border-radius: 50%;
		background-color: map-get($cisColor, master);
		cursor: pointer;
		transition: all .3s;
		&:hover{
			transform: scale(1.1);
			.bg{
				transform: rotate(90deg);
			}
		}
	}
	.copyright {	
		position: relative;		
		font-size: 14px;
		letter-spacing: 1.2px;	
		text-align: center;
		padding: 6px 0;
		color: #ddd;
		background-color: map-get($cisColor, second);
	}
	.dotCircle{
		position: absolute;
		width:350px;
		height:350px;
		&.left{
			left:-350px;
			bottom:-100px;
			transform: rotate(180deg);
		}
		&.right{
			right:-350px;
			top:-100px;
		}
		img{
			width:100%;
		}
	}
}

/* ==============================================  media  ============================================ */

@media (max-width: 992px) {
	footer.footer {
		.logoGroup{
			width:100%;
			text-align: center;
			margin-bottom:20px;
			.logo{
				width:140px;
				margin: 0 auto;
			}
		}
		.fTitle{
			font-size: 28px;
			margin-top: 15px;
			margin-bottom: 15px;
			text-align: center;
		}
		.site_link,.share_link{
			justify-content: center;
			max-width: initial;
		}
		.share_link{
			margin-bottom: 30px;
		}
		.site_link{
			flex-direction: row;
			margin: 20px 0;
			a+a{
				margin-top: 0;
				margin-left: 15px;
			}
		}
		.info_link{
			margin: 20px auto;
		}
		.topBtn{
			position: relative;
			margin: 10px auto 0px;
			right:initial;
		}
	}
}

@media (max-width: 768px) {

}

@media (max-width: 480px) {
	footer.footer {
		.info_link{
			font-size: 12px;
		}
		.site_link{
			flex-wrap: wrap;
			a{
				flex: 0 0 45%;
				text-align: center;
				padding-bottom: 10px;
			}
			a+a{
				margin-left: 0px;
			}
		}
		.copyright {	
			font-size: 0.8rem;
			letter-spacing: -0.2px;
		}
	}
}