.footer {
    background: var(--bgColor01);
    color: var(--font01);
}

.in-footer {
  padding: 6.0rem 0;
}

span.f_line{
	display: inline-block;
    content: "";
    width: 1px;
    height: 10px;
    background: #848484;
    margin: 0 5px;
}

.footer_wrap{
	width:100%;
	margin:0 auto;
}

.footer_wrap .f_logo{
	max-width:120px;
	margin:0 auto 20px;
}

.footer_wrap .f_logo img{
	width:100%;
	height: 100%;
	display:block;
}

.footer_wrap .family_site{
	position:relative;
	width:100%;
	max-width:160px;
	margin:0 auto 30px;
	border:1px solid var(--font01);
	border-radius:9999px;
	padding:15px 0;
}

.footer_wrap .family_site .custom-select.util {
  position: absolute;
  top: 0;
  width:100%;
  height:0;
  transform: translateY(-100%);
  font-size: 1.6rem;
  color: var(--primary);
  background-color:var(--bgWhite);
  border-radius: 0.8rem;
  z-index: 999;
}

.footer_wrap .family_site .custom-select.util.active {
  height: 20rem;
  padding: 0.8rem;
  transition: height 0.3s;
  /*box-shadow: 0px 0px 24px 4px var(--emphasis);*/
}

.footer_wrap .family_site .custom-select.util.active > ul {
  height: 100%;
}

.footer_wrap .family_site .custom-select.util > ul > li {
  width: 100%;
  padding: 1.2rem 0.8rem;
}

.footer_wrap .family_site .custom-select.util > ul > li > a {
  display: block;
}


.footer_wrap .family_site .site_name{
	position:relative;
	display:block;
	width:80%;
	margin:0 auto;
	font-size:1.4rem;
	color:var(--font01);
	cursor:pointer;
}

.footer_wrap .family_site .site_name:after{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	right:0;
	content:'';
	width:7px;
	height:4px;
	background:url("../../../../image/icon/family_site_arrow.png") no-repeat;
}

.footer_wrap .footer_menu_txt{
	font-size:1.6rem;
	color:var(--font01);
}

.footer_wrap .footer_info{ font-size:1.4rem; color:var(--font01);}

.footer_wrap .copyright{
	margin-top:30px;
	text-align:center;
	font-size:1.2rem;
	color:#9C9C9C;
}

.trans-footer-info {
	width: 100%;
	display:none;
	justify-content: center;
	align-items: center;
}

.trans-footer-info .trans-info {
	display: flex;  
	height:6.0rem; 
	text-align: center;
	justify-content: center;
	align-items: center;
}

.trans-footer-info .trans-info > span {
	color: #999999;
	font-size: 1.7rem;
}

/* width 680px까지 지원 */
@media screen and (max-width: 768px) {
  
	.footer_menu_wrap{
		width:100%;
		height:70px;
		background-color:#ececec;
	}

	.footer_menu_wrap .footer_menu_txt{
		color:#6B6B6B;
		font-size:1.6rem;
	}

	span.f_line2 {
		display: inline-block;
		content: "";
		width: 1px;
		height: 10px;
		background: #cccccc;
		margin: 0 5px;
	}
	
	.footer_wrap{
		width:calc(100% - 30px);
		margin:0 auto;
	}

	.footer_wrap .footer_menu_txt{
		font-size:1.4rem;
		color:var(--font01);
	}

	.footer_wrap .footer_info{ font-size:1.0rem; color:var(--font01);}

	.footer_wrap .copyright{
		margin-top:30px;
		text-align:center;
		font-size:1.0rem;
		color:#9C9C9C;
	}
  
  /* 680px ~ 320px 구간만 적용 */
  @media screen and (min-width: 320px) {

		

  }

}

/* width 1024px까지 지원 */
@media screen and (max-width: 1024px) {

	
	
	.footer_menu_wrap{
		width:100%;
		height:70px;
		background-color:#ececec;
	}

	.footer_menu_wrap .footer_menu_txt{
		color:#6B6B6B;
		font-size:1.6rem;
	}

	.footer_menu_wrap{
		width:100%;
		height:70px;
		background-color:#ececec;
	}

	.footer_menu_wrap .footer_menu_txt{
		color:#6B6B6B;
		font-size:1.6rem;
	}

	span.f_line2 {
		display: inline-block;
		content: "";
		width: 1px;
		height: 10px;
		background: #cccccc;
		margin: 0 5px;
	}
	
	.footer_wrap{
		width:calc(100% - 30px);
		margin:0 auto;
	}

	.footer_wrap .footer_menu_txt{
		font-size:1.4rem;
		color:var(--font01);
	}

	.footer_wrap .footer_info{ font-size:1.2rem; color:var(--font01);}

	.footer_wrap .copyright{
		margin-top:30px;
		text-align:center;
		font-size:1.0rem;
		color:#9C9C9C;
	}
	
	/* 681px ~ 1024px 구간만 적용 */
	@media screen and (min-width: 767px) {
		

	}

}


/* width 1456px까지 지원 */
@media screen and (max-width: 1499px) {

  /* 1025px ~ 1456px 구간만 적용 */
  @media screen and (min-width: 1025px) {

  }

}


/* width 1920px까지 지원 */
@media screen and (max-width: 1920px) {

  /* 1457px ~ 1920px 구간만 적용 */
  @media screen and (min-width: 1500px) {
  	
  }

}

/* width 1921px이상 지원 */
@media screen and (min-width: 1921px) {
  
	

}