@charset "UTF-8";

.main_sns{}
.main_sns ul{overflow:hidden;}
.main_sns ul li{float:left;width:23.87%;}
.main_sns ul li:nth-child(2){margin-left:1.5%;margin-right:0.75%;}
.main_sns ul li:nth-child(3){margin-left:0.75%;margin-right:1.5%;}
.main_sns ul li a{display:block;position:relative;}
.main_sns ul li a span.img{display:block;}

/* 대표 홈페이지 모바일에서 사이즈에서 SNS 영역 레이아웃이 깨지는 문제 해결 */
.main_sns ul li a span.img img{
  aspect-ratio: 4 / 3.5;  /* 원하는 비율로 고정 */
  width: 100%;  /* 이미지 짤리지 않도록 자동으로 부모 너비에 맞춤 */ 
  height: auto;  /* 이미지 짤리지 않도록 브라우저가 비율에 맞게 계산 */
  object-fit: fill;  /* 강제 비율 적용 */
}

/*  2025.08.13  */
.main_sns ul li a span.tit{display:block;line-height:1.5;margin-top:15px;height:45px;padding:0 15px;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;}
.main_sns ul li a i.date{display:block;line-height:1;padding:10px 15px;}

.main_sns ul li a:before{content:"";display:block;width:calc(100% - 10px);height:calc(100% - 10px);border:5px solid transparent;position:absolute;left:0;top:0;}
.main_sns ul li a:hover:before{border-color:#0066b3 ;transition: all 0.1s cubic-bezier(0.5, 0, 0.3, 1);}
.main_sns ul li a:after{content:"";display:block;width:45px;height:45px;position:absolute;right:0;bottom:0;background:#0066b3 url(/sites/kr/images/plus_2.png) center no-repeat;transform:scale(0);}
.main_sns ul li a:hover:after{transform:scale(1);transition: all 0.1s cubic-bezier(0.5, 0, 0.3, 1);}


@media only screen and (max-width:480px){
	.main_sns ul li{width:49%;margin-bottom:30px}
	.main_sns ul li:nth-child(2){margin-left:2%;margin-right:0;}
	.main_sns ul li:nth-child(3){margin:0;}
	.main_sns ul li:nth-child(4){margin-left:2%;margin-bottom:0}
}

/*
.main_sns ul li a:after{content:"";display:block;width:35px;height:35px;position:absolute;top:0;left:0;}
.main_sns ul li:nth-child(1) a:after{background:#003471 url(../../images/footer_sns_FB_w.png) no-repeat center;}
.main_sns ul li:nth-child(2) a:after{background:#4bb52e url(../../images/footer_sns_B_w.png) no-repeat center;}
.main_sns ul li:nth-child(3) a:after{background:#cb2026 url(../../images/footer_sns_YT_w.png) no-repeat center;}
.main_sns ul li:nth-child(4) a:after{background:#dc12ea url(../../images/footer_sns_IG_w.png) no-repeat center;}
*/