.main_container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 박스 사이의 간격 */
  padding: 5px;
  height: 50vh;
  transition: all .5s;
}

.left-box, .right-box {
  border-radius: 20px; /* 둥근 테두리 */
  position: relative; /* 버튼 위치를 위한 설정 */
  overflow: hidden; /* 이미지가 둥근 테두리 밖으로 넘치지 않게 설정 */
  height: 100%;
  background-size: cover;
  background-position: center;
/*  display: flex;
  justify-content: center;
  align-items: center;*/
  transition: all .5s;
}
.left-box {
 display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 각 박스 크기 설정 */
.left-box {
  flex: 1; /* 1/3 크기 */
  background-image: url('../images/side_main.jpg'); /* 왼쪽 박스 배경 이미지 */
}

.right-box {
  flex: 2; /* 2/3 크기 */
}

.right-box .owl-carousel .m1 {
  height: 50vh;
  background-size: cover; /* 이미지가 박스 크기에 맞춰 꽉 차게 */
  background-position: center; /* 이미지를 중앙에 위치 */
  background-repeat: no-repeat; /* 이미지 반복 금지 */
  background-image: url('../images/main01.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
}

.right-box .owl-carousel .m2 {
  height: 50vh;
  background-size: cover; /* 이미지가 박스 크기에 맞춰 꽉 차게 */
  background-position: center; /* 이미지를 중앙에 위치 */
  background-repeat: no-repeat; /* 이미지 반복 금지 */
  background-image: url('../images/main02.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
}

.right-box .owl-carousel .m3 {
  height: 50vh;
  background-size: cover; /* 이미지가 박스 크기에 맞춰 꽉 차게 */
  background-position: center; /* 이미지를 중앙에 위치 */
  background-repeat: no-repeat; /* 이미지 반복 금지 */
  background-image: url('../images/main03.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
}

@media (max-width: 768px) {
	.right-box .owl-carousel .m1 {
	  height: 70vh;
	  background-size: cover; /* 이미지가 박스 크기에 맞춰 꽉 차게 */
	  background-position: center; /* 이미지를 중앙에 위치 */
	  background-repeat: no-repeat; /* 이미지 반복 금지 */
	  background-image: url('../images/main01m.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
	}

	.right-box .owl-carousel .m2 {
	  height: 70vh;
	  background-size: cover; /* 이미지가 박스 크기에 맞춰 꽉 차게 */
	  background-position: center; /* 이미지를 중앙에 위치 */
	  background-repeat: no-repeat; /* 이미지 반복 금지 */
	  background-image: url('../images/main02m.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
	}

	.right-box .owl-carousel .m3 {
	  height: 70vh;
	  background-size: cover; /* 이미지가 박스 크기에 맞춰 꽉 차게 */
	  background-position: center; /* 이미지를 중앙에 위치 */
	  background-repeat: no-repeat; /* 이미지 반복 금지 */
	  background-image: url('../images/main03m.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
	}
}

/* 더보기 버튼 스타일 */
.text-right{
text-align:right;
}
.text-left{
text-align:left;
}
.text-right{
text-align:right;
}
.more-btn-outline {
  padding: 10px 20px;
  background-color: rgba(255,255,255,0.9);
  color: #265a44;
  border: 1px solid #265a44;
  border-radius: 20px;
  cursor: pointer;
	font-size:0.9em;
}
.more-btn-outline:hover {
  background-color: #265a44;
  color: #fff;
}

.more-btn {
  padding: 10px 20px;
  background-color: #265a44;
  color: #fff;
  border: 0;
  border-radius: 20px;
  cursor: pointer;

}
.more-btn:hover {
  background-color: rgba(255, 255, 255, 1);
  color: #265a44;
  border: 0px solid #265a44;;
}

.leftbtn {
	margin-top:10px;
}

.rightbtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}


/* 동일한 크기의 4개의 박스 레이아웃 */
.four-box-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px;
  height:23vh;
  margin-top: 10px;
}

.four-box-container .box {
  flex: 1;
  min-width: calc(25% - 20px); /* 한 줄에 4개의 박스를 위해 25% 너비에서 간격 고려 */
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  text-align: center;
  background: rgba(0,0,0,0);
  position: relative; /* 자식 요소의 절대 위치를 위한 설정 */
  transition: all 0.7s ease;
}
.four-box-container .box a {
  position: absolute;
  width:100%;
  height: 100%;
  z-index:10;
}

.four-box-container .box:hover {
 background: #265a44;
}

/* 추가 */
.four-box-container .box .menu1 {
  background-image: url('../images/main_menu01.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
}

.four-box-container .box .menu2{
  background-image: url('../images/main_menu02.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
}

.four-box-container .box .menu3{
  background-image: url('../images/main_menu03.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
}

.four-box-container .box .menu4{
  background-image: url('../images/main_menu04.jpg?v=1'); /* 오른쪽 박스 배경 이미지 */
}

.four-box-container .box .bgs {
width:100%;
height:100%;
transition: all .5s ease; /* 트랜지션 추가 */

}

.four-box-container .box .menu1,
.four-box-container .box .menu2,
.four-box-container .box .menu3,
.four-box-container .box .menu4 {
width:100%;
height:100%;
  background-size: cover; /* 기본 크기를 100%로 변경 */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
  transition: all 0.5s ease; /* 트랜지션을 특정 속성으로 제한 */
}

.four-box-container .box:hover .menu1,
.four-box-container .box:hover .menu2,
.four-box-container .box:hover .menu3,
.four-box-container .box:hover .menu4{
  transform:scale(1.25) rotate(5deg); /* 이미지 확대 */
  opacity:0.2;
}

.four-box-container .bgs {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;

  transition: all .5s ease; /* 트랜지션 추가 */
}

.four-box-container .box:hover .bgs {
  background: #000;
  opacity: 0.3; /* 롤오버 시 투명도 증가 */
}

/* 모바일 환경에서 한 줄에 2개씩 배치 */
@media (max-width: 768px) {


  .four-box-container {
    flex-wrap: wrap; /* 한 줄에 더 많은 박스가 있을 때 줄바꿈을 허용 */
    gap: 10px; /* 모바일에서 간격을 줄일 수 있음 */
	height:300px
	 }

  .four-box-container .box {
    flex: 1 1 calc(50% - 10px); /* 한 줄에 2개씩 배치되도록 50% 너비 */
    height: auto; /* 모바일에서도 높이 유지 */
  }



}

/* 모바일 환경 (480px 이하)에서의 스타일 */
@media (max-width: 768px) {
  .main_container {
    flex-direction: column;
    gap: 10px; /* 모바일에서는 간격을 조금 줄일 수 있습니다 */
	height:auto;
  }

  .left-box, .right-box {
    flex: none;
    width: 100%;

  }

  /* 모바일에서 왼쪽 박스를 아래로 배치 */
  .left-box {
    order: 2;
    height: auto;
  }

  .right-box {
    order: 1;
    height: 400px;
  }
  .mobile_hidden {
  	display:none;
  }
}
.txtbox {
width:100%;
border: 1px solid rgba(0, 0, 0, 0.05);
text-align: left;
padding: 25px;
background: rgba(255, 255, 255, 0.75);
margin: 10px;
border-radius: 20px;
position:relative;
}
.txtbox .boxtitle {
color:#265a44;
font-size:2em;
line-height:1.3em;
}
.txtbox .boxsubtitle {
color:#265a44;
font-size:1.7em;
}
.txtbox .boxtxt {
margin-top:10px;
}

/* 모바일 환경에서 한 줄에 2개씩 배치 */
@media (max-width: 768px) {

.txtbox .boxtitle {
font-size:1.7em;
line-height:1.3em;
}
.txtbox .boxsubtitle {
font-size:1.5em;
}
}

.fboxtitle{
  position: absolute;
  width:100%;
  top: 50%; /* 상단에서 50% */
  left: 50%; /* 왼쪽에서 50% */
  transform: translate(-50%, -50%);
border-radius: 20px;
padding:10px 20px;
color:#fff;
font-size: 1.2em;
text-shadow: 1px 0 4px rgba(100, 100, 100, 0.9);
}

.fboxtext {
  position: absolute;
  right: 20px; /* 오른쪽 하단에서 10px 안쪽 */
  bottom: 15px; /* 하단에서 10px 위 */
  font-size: 18px; /* 내용 폰트 크기 */
  text-align: left; /* 텍스트 오른쪽 정렬 */
  line-height: 1.4; /* 텍스트 줄 간격 */
  text-shadow: 1px 0 4px rgba(100, 100, 100, 0.9);
}
.mfboxtext {
display:none;
}
@media (max-width: 768px) {
.fboxtitle{
  position: absolute;
  width:100%;
  top: 20px; /* 상단에서 50% */
  left: 50%; /* 왼쪽에서 50% */
  transform: translate(-50%, -0);
border-radius: 20px;
padding:10px 20px;
color:#fff;
font-size: 1em;
text-shadow: 1px 0 4px rgba(100, 100, 100, 0.9);
}

.fboxtext {
  position: absolute;
  right: 0px; /* 오른쪽 하단에서 10px 안쪽 */
  width:100%;
  bottom: 20px; /* 하단에서 10px 위 */
  font-size: 18px; /* 내용 폰트 크기 */
  text-align: center; /* 텍스트 오른쪽 정렬 */
  line-height: 1.3; /* 텍스트 줄 간격 */
font-size: .8em;
  text-shadow: 1px 0 4px rgba(100, 100, 100, 0.9);
}
.mfboxtext {
display:block;
}
.fboxtext {
display:none;
}
.fboxtitle{
  top: 50%; /* 상단에서 50% */
  left: 50%; /* 왼쪽에서 50% */
  transform: translate(-50%, -50%);
}
.mfboxtext {
line-height: 1.2em;
margin-top:5px;
font-size: .8em;
}
}