@charset "utf-8";

@import url("/css/style.css?1");

/*=== 메인 모션 ===*/
.photo_area_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개의 열을 가진 그리드 */
    gap: 5px; /* 이미지 간격 설정 */
    width: 1030px; /* 전체 너비를 1030px로 설정 */
    margin: 0 auto; /* 가운데 정렬 */
}

.photo_area_box a {
    display: block;
    position: relative;
    width: 100%; /* 부모 요소의 너비를 100%로 설정 */
    height: auto; /* 높이 자동으로 조정 */
}

.photo_thum_img {
    width: 100%; /* 이미지를 부모 요소의 너비에 맞게 조정 */
    height: 229px; /* 이미지의 높이를 160px로 고정 */
    object-fit: cover; /* 이미지를 자르지 않고 부모 요소에 꽉 채우도록 설정 */
}
	
.photo_area_box a:hover .photo_over_title,
.photo_area_box a:hover .photo_over_date {
    display: block;
}

.main_top_left_menu_box{
}
.sub_link_01_icon, .sub_link_02_icon, .sub_link_03_icon, .sub_link_04_icon {
    transition: transform 0.5s ease; /* 변환 효과를 부드럽게 적용 */
}

.main_contents_sub_link_01:hover .sub_link_01_icon {
    transform:rotateY(360deg);
}
.main_contents_sub_link_02:hover .sub_link_02_icon {
    transform:rotateY(360deg);
}
.main_contents_sub_link_03:hover .sub_link_03_icon {
    transform:rotateY(360deg);
}
.main_contents_sub_link_04:hover .sub_link_04_icon {
    transform:rotateY(360deg);
}
.main_menu_01{
 animation: animation_sp1 0.5s 0.1s forwards;
 opacity: 0;
}

.main_menu_02{
 animation: animation_sp2 0.5s 0.2s forwards;
 opacity: 0;
}

.main_menu_03{
 animation: animation_sp3 0.5s 0.3s forwards;
 opacity: 0;
}

.main_menu_04{
 animation: animation_sp4 0.5s 0.4s forwards;
 opacity: 0;
}

.main_menu_05{
 animation: animation_sp5 0.5s 0.5s forwards;
 opacity: 0;
}

.main_menu_06{
 animation: animation_sp6 0.5s 0.6s forwards;
 opacity: 0;
}

@keyframes animation_sp1 {
 from {  opacity: 0.15;  transform: translateX(-150px);  }
 to {
 opacity: 1; /* 투명도 끝 부분 값 */

 transform-origin: 50% 50%;
 transform: scale(1);
 }
}

@keyframes animation_sp2 {
 from {  opacity: 0.15;  transform: translateX(-150px);  }
 to {
 opacity: 1; /* 투명도 끝 부분 값 */

 transform-origin: 50% 50%;
 transform: scale(1);
 }
}
@keyframes animation_sp3 {
 from {  opacity: 0.15;  transform: translateX(-150px);  }
 to {
 opacity: 1; /* 투명도 끝 부분 값 */

 transform-origin: 50% 50%;
 transform: scale(1);
 }
}
@keyframes animation_sp4 {
 from {  opacity: 0.15;  transform: translateX(-150px);  }
 to {
 opacity: 1; /* 투명도 끝 부분 값 */

 transform-origin: 50% 50%;
 transform: scale(1);
 }
}
@keyframes animation_sp5 {
 from {  opacity: 0.15;  transform: translateX(-150px);  }
 to {
 opacity: 1; /* 투명도 끝 부분 값 */

 transform-origin: 50% 50%;
 transform: scale(1);
 }
}
@keyframes animation_sp6 {
 from {  opacity: 0.15;  transform: translateX(-150px);  }
 to {
 opacity: 1; /* 투명도 끝 부분 값 */

 transform-origin: 50% 50%;
 transform: scale(1);
 }
}

.main_news, .main_weekly, .main_senior_pastor_sermon, .main_sermon_pastor_Lee, .main_senior_pastor_sermon_info{opacity:0;}
.main_news.active {opacity:1; transition: 1s 0.4s;}
.main_weekly.active {opacity:1; transition: 1s 0.6s;}
.main_weekly.active {opacity:1; transition: 1s 0.7s;}
.main_senior_pastor_sermon.active {opacity:1; transition: 1s 0.8s;}
.main_senior_pastor_sermon_info.active {opacity:1; transition: 1s 0.9s;}
.main_sermon_pastor_Lee.active {opacity:1; transition: 1s 1.0s;}

.main_menu_01_img {
	content: url('../image/main/main_icon_menu_01.png');
    transition: content 0.5s ease; /* 부드러운 전환을 위한 트랜지션 */
}
.main_menu_01:hover .main_menu_01_img {
	content: url('../image/main/main_icon_menu_01_over.png');
	transform:rotateY(360deg);
}
 
.main_menu_02_img {
	content: url('../image/main/main_icon_menu_02.png');
    transition: content 0.5s ease; /* 부드러운 전환을 위한 트랜지션 */
}
.main_menu_02:hover .main_menu_02_img {
	content: url('../image/main/main_icon_menu_02_over.png');
	transform:rotateY(360deg);
}
 
.main_menu_03_img {
	content: url('../image/main/main_icon_menu_03.png');
    transition: content 0.5s ease; /* 부드러운 전환을 위한 트랜지션 */
}
.main_menu_03:hover .main_menu_03_img {
	content: url('../image/main/main_icon_menu_03_over.png');
	transform:rotateY(360deg);
}
 
.main_menu_04_img {
	content: url('../image/main/main_icon_menu_04.png');
    transition: content 0.5s ease; /* 부드러운 전환을 위한 트랜지션 */
}
.main_menu_04:hover .main_menu_04_img {
	content: url('../image/main/main_icon_menu_04_over.png');
	transform:rotateY(360deg);
}
 
.main_menu_05_img {
	content: url('../image/main/main_icon_menu_05.png');
    transition: content 0.5s ease; /* 부드러운 전환을 위한 트랜지션 */
}
.main_menu_05:hover .main_menu_05_img {
	content: url('../image/main/main_icon_menu_05_over.png');
	transform:rotateY(360deg);
}
 
.main_menu_06_img {
	content: url('../image/main/main_icon_menu_06.png');
    transition: content 0.5s ease; /* 부드러운 전환을 위한 트랜지션 */
}
.main_menu_06:hover .main_menu_06_img {
	content: url('../image/main/main_icon_menu_06_over.png');
	transform:rotateY(360deg);
}

   .main_sermon_pastor_Lee:hover, .main_senior_pastor_sermon_info:hover {
        animation: shake 0.5s ease infinite; /* shake 애니메이션을 적용하고 무한 반복합니다 */
    }

    /* shake 애니메이션 */
    @keyframes shake {
        0% { transform: translateX(0); } /* 초기 위치 */
        25% { transform: translateX(-5px); } /* 왼쪽으로 약간 이동 */
        75% { transform: translateX(5px); } /* 오른쪽으로 약간 이동 */
        100% { transform: translateX(0); } /* 초기 위치로 돌아옴 */
    }
[data-trigger]{
	opacity:0;
	position: relative;
	top:20px;
	transition: 0.5s ease-out;
}

[data-trigger].visible{
	opacity:1;
	top:0px;
}

.image-container {
    position: relative;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
}

.image-container img:hover {
    transform: translate(calc(random() * 100vw - 50%), calc(random() * 100vh - 50%));
}




/*=== 서브상단 이미지 부분 네비게이션 모션 ===*/ 
@keyframes nav_slideIn {
  from {
    transform: translateX(20%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.nav_sub {
  animation: nav_slideIn 2s ease-out;
}
.nav_title {
  animation: nav_slideIn 1s ease-out;
}
.nav_title2 {
  animation: nav_slideIn 1s ease-out;
}