.main_con section{max-width:1300px; margin:130px auto;}
.main_con .in{max-width:1300px; margin:0 auto; padding:0;}
.main_con .titbox{display:flex; justify-content:space-between; align-items:center;}
.main_con h3{font-size:3.2em; margin-bottom:50px;}
a.more_btn{font-size:1.3em;  display: inline-flex; align-items: center; position:relative; font-weight:600; color:#777;}
a.more_btn::after{
    position: absolute;
    content: '';
    width: 35px;
    height: 35px;
    right: 0;
    border-radius: 50%;
    z-index: 9;
	border:2px solid #777;
}
 .arrow { position: relative; width:45px; height:10px;  display:inline-block ; left:0; margin-left:25px; z-index:99}
 .arrow::before {
  content:'';
  width:100%; 
  height:2px;
  position:absolute;
   top:4px;
  background:#777;
	right:17px;
}
 .arrow::after {
	position: absolute;
	top:0;
	content: '';
	width:8px; 
	height:8px; 
	border-top: 2px solid #777; 
	border-right: 2px solid #777;
	transform: rotate(45deg);  
	right:17px;
} 


a.more_btn:hover:after{animation:circleHover 0.7s both;}
@keyframes circleHover {
	0% {
		transform:scale(1); 
	}
	50% {
		transform:scale(1.4); 
	}
	100% {
		transform:scale(1); 
	}
}

@media (max-width:900px) {
    .main_con section{padding:0 3%; box-sizing:border-box; margin:80px 0;}
	.main_con .titbox{flex-direction:column; align-items: start; margin-bottom:30px;}
	.main_con h3{font-size:2em;}
}



.main1 .wrap{display:flex; gap:20px; flex-wrap:wrap;}
.main1 .wrap li {width:calc(25% - 15px); border-radius:20px; box-sizing:border-box; border:1px solid #ddd; overflow:hidden;   transition: box-shadow 0.2s ease, transform 0.2s ease, border 0.2s ease; cursor:pointer;}
.main1 .wrap li:hover{ border:1px solid var(--main_c); box-shadow: 0 0 0 4px var(--main_c); /* border처럼 보이도록 */  transform: scale(1.02); /* 약간의 확대 효과 추가 */}
.main1 .wrap li div{height:12vw; background-position:center; background-size:cover; background-repeat:no-repeat;}
.main1 .wrap li h4{font-size:1.2em; padding:20px; box-sizing:border-box; }
.main_con section.main1 a{margin-top:-30px;}

@media (max-width:900px) {
	.main1 .wrap li{width:calc(50% - 10px);}
	.main1 .wrap li div{height:30vw;}
	.main1 .wrap li h4{font-size:1em; padding:10px;}
}




.main_con section.main2{background:#f9f9f9; max-width:100%; padding:100px 0; box-sizing:border-box; margin:0;}
.main2 .in{display:flex; gap:40px;}
.main_con section.main2 h3{max-width:1300px; margin: 0 auto; margin-bottom:50px; flex-shrink: 0; width:400px;}
.main_con section.main2 .titbox{display:block;}
.main2 .wrap{border-top:3px solid #333; max-width:1300px; margin: 0 auto; width:100%;}
.main2 .wrap a{border-bottom:1px solid #333; display:flex; padding:20px 0; box-sizing:border-box; align-items:center; gap:30px;}
.main2 .wrap .date{padding:0 20px; box-sizing:border-box; text-align: center;}
.main2 .wrap .date b{font-size:1.9em; font-weight:700; text-align:Center; display:inline-block; width:100%; color:var(--main_c)}
.main2 .wrap .date span{font-size:.9em;}
.main2 .wrap p { 
	font-weight:700; 
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden;	
	font-size:1.3em;
	word-break: break-word;
 }

@media (max-width:900px) {
	.main2 .in{flex-direction:column; padding:0 3%; gap:0;}
	.main_con section.main2{padding:80px 0;}
	.main_con section.main2 h3{width:auto;}
	.main2 .wrap{font-size:.9em;}
	.main2 .wrap a{gap:10px;}
	.main2 .wrap .date{padding:0 10px;}

}


.main_con section.main3{ max-width:100%; padding:100px 0; box-sizing:border-box; margin:0; background:url("/common/img/main_bottom.png") center center / cover no-repeat, rgb(0 0 0 / 60%); background-blend-mode:multiply;}
.main_con section.main3 h3{color:#fff;}
.main3 .wrap{display:flex; gap:70px; }
.main3 .wrap > div{width:100%; background:#fff; padding:40px; box-sizing:border-box; border-radius:20px; box-shadow:7px 8px 0px 4px rgb(255 255 255 / 41%); position:relative;}
.main3 .wrap h4{font-size:2.3em; border-radius:10px; display:inline-block; position:relative;}
.main3 .wrap h4::after{position:absolute; content:''; width:7px; height:7px; border-radius:50%; top:-2px; right:-9px; background:var(--main_c);}
.main3 .wrap p{margin:10px 0 30px 0; font-size:1.1em; line-height:1.4; border-top:2px solid #333; padding-top:10px; box-sizing:border-box;}
.image-container {
  width: 90px; /* 원하는 크기로 설정 */
  height: 90px; /* 정사각형으로 유지 */
  overflow: hidden; /* 컨테이너 밖으로 나가는 이미지 숨김 */
  border-radius: 50%; /* 원형으로 만듦 */
  display: flex; /* 이미지 가운데 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: center; /* 수평 가운데 정렬 */
  background:#f0f0f0;
  position: absolute;
  bottom:20px;
  right:20px;
}

.image-container img {
  width: 60%; /* 이미지 크기를 컨테이너에 맞춤 */

}

@media (max-width:900px) {
	.main_con section.main3{padding:80px 3%;}
	.main3 .wrap{flex-direction:column; font-size:.9em; gap:40px;}
	.main3 .wrap > div{padding:20px;}
	.main3 .wrap h4{font-size:1.5em;}
	.image-container {width:60px; height:60px;}
}