@keyframes move {
  from {
    transform: translateX(100px) scale(1.2);
    animation-timing-function: cubic-bezier(.2,0,.8,1);
  }
  to { transform: translateX(0px) scale(1); }
}
@-webkit-keyframes updown {
    0% {
    bottom: 0;
    }

    100% {
    bottom: 30px;
    }
}
.no-padding{padding-right:0; padding-left:0;}
.no-margin{margin-right:0; margin-left:0;}
/* common */
#main-slider{position:relative;}
.nav-tabs {border-bottom:none;}
.plus { position:absolute; top:0; right:0;}
.plus:hover { opacity:0.8; transition:0.3s all ease;}
.box{display:inline-block; position:relative; opacity:0; top:50px; }

:root{--gap:30px;--width:25%;--width1:25%;}

.slider,
.slider .slider-wrapper,
.slider .slider-wrapper .slide{height:inherit!important;}

/* 1. 공통 트랜지션 설정 (모든 객체에 부드러운 변화 적용) */
#main1 .main1L, 
#main1 .sermonT, 
#main1 .sermonBTN a, 
#main2 .NewsBOX, 
#main4 .contentSlide {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. 설교 섹션 (Main1) 이미지 확대 효과 */
#main1 .main1L:hover .main1LBG {
    transform: scale(1.03); /* 아주 살짝 커지는 느낌 */
    filter: brightness(0.9); /* 살짝 어두워지며 집중도 향상 */
}

/* 3. 설교 텍스트 및 버튼 효과 */
#main1 .sermonT:hover {
    padding-left: 60px !important; /* 오른쪽으로 미세하게 이동하는 느낌 */
}

#main1 .main1M .main1R .sermonBTN a:hover {
    filter: contrast(1.2); /* 색감을 좀 더 진하게 */
    transform: translateY(-5px); /* 위로 살짝 들림 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* 4. 커뮤니티 카드 (Main2) - Lift Up 효과 */
#main2 .main2M .NewsM .NewsBOX {
    border-radius: 10px; /* 부드러운 인상 */
    overflow: hidden;
}

#main2 .main2M .NewsM a:hover .NewsBOX {
    transform: translateY(-12px); /* 위로 부드럽게 들림 */
}

#main2 .main2M .NewsM a:hover .NewsBOX > img {
    transform: scale(1.1); /* 이미지 확대 */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#main3 .main3M{display: grid;grid-template-columns: repeat(auto-fill, minmax(var(--width), auto));}
#main3 .main3M .main3BOX{height:480px;color:rgba(255,255,255,.5);text-decoration:none;position:relative;}
#main3 .main3M .main3BOX .on{background-size:cover;background-repeat:no-repeat;background-position:center;opacity:0;display:none;width:100%;height:100%;position:absolute;transition: .3s all ease;}
#main3 .main3M .main3BOX .off{background-size:cover;background-repeat:no-repeat;background-position:center;opacity:1;display:block;width:100%;height:100%;position:absolute;transition: .3s all ease;}
#main3 .main3M .main3BOX:hover .on{opacity:1;display:block;}
#main3 .main3M .main3BOX:hover .off{opacity:0;display:none;}
#main3 .main3M .main3BOX .main3T{width:100%;text-align: center;position: absolute;top: 50%;right: 50%;transform: translate(50%,-50%);opacity:1;}
#main3 .main3M .main3BOX:hover .main3T{opacity:0;}
#main3 .main3M .main3BOX .main3T h1{margin: 0;font-size: 32px;letter-spacing:0px;color:#fff;}
#main3 .main3M .main3BOX .main3T hr{margin: 30px auto;width: 10%;}
#main3 .main3M .main3BOX .main3T h2{margin: 0;font-size: 24px;letter-spacing:1px;}


/* missing keyframes: spinspin 정의 */
@keyframes spinspin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 5. 갤러리 (Main4) - 기존 updown 유지하되 부드럽게 최적화 */
#main4 .main4M .gallerySD a{text-decoration:none;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover {
    filter: grayscale(0%); /* 호버 시 흑백 해제 (반대 설정 시) */
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}

.view-more {
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: middle;
    background: transparent;
    overflow: hidden;
    -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;
    font-weight: 100;
}

.view-more:hover:before {
-webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg);
transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top;
-ms-transform-origin: left top;transform-origin: left top;}

.view-more:before {
z-index: -1;content: "";display: block;width: 135%;height: 105%;position: absolute;left: 0;top: 0;
-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg);
-ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),  -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-backface-visibility: hidden;backface-visibility: hidden;}


#main1{background-color:#d7a8b3;}
#main1 .main1M{display:inline-flex;justify-content: space-between;width:100%;padding:90px 0; justify-content: center;}
#main1 .main1M .main1L{width:60%;}
#main1 .main1M .main1L .main1LBG{height: 480px;position: relative;background-position: center;background-size: contain;background-repeat: no-repeat;}
#main1 .main1M .main1L .main1LBG img{position: absolute;transform: translate(0,50%);bottom: 0%;right: 5%;}
#main1 .main1M .main1R{color:#fff;display: flex;flex-direction: column-reverse;justify-content: flex-end; align-items: center;}
#main1 .main1M .main1R .sermonT{padding:50px;color:#fff;text-decoration:none;display: flex;flex-direction: column;}
#main1 .main1M .main1R .sermonT h1{margin: 0 0 10px;font-size: 60px;line-height: 1.5;white-space: normal;word-wrap: break-word;display: -webkit-box;word-break: keep-all;-webkit-line-clamp: 1;overflow: hidden;-webkit-box-orient: vertical;font-weight:bold;}
#main1 .main1M .main1R .sermonT h5{margin: 0;line-height: 1.5;font-size: 17px;display: inline-flex;align-items: center;gap: 10px;}
#main1 .main1M .main1R .sermonT span{font-size:30px;}
#main1 .main1M .main1R .sermonBTN{width:100%;}
#main1 .main1M .main1R .sermonBTN a{display: inline-block;float: right;padding: 77.5px 77.5px;position:relative;color:#fff;}
#main1 .main1M .main1R .sermonBTN .more{background-color:#fff;}
#main1 .main1M .main1R .sermonBTN .youtuch{background-color:#e65a5a;}
#main1 .main1M .main1R .sermonBTN .more img{position:absolute;transform: translate(50%,-50%);right: 50%;top:35%;}
#main1 .main1M .main1R .sermonBTN .more h1{margin:0;position:absolute;transform: translate(50%,-50%);right: 50%;bottom: 25%;font-size:24px;color:#933147;}
#main1 .main1M .main1R .sermonBTN .youtuch img{position:absolute;transform: translate(50%,-50%);right: 50%;}
#main1 .main1M .main1R .sermonBTN .worship{background-color:#933147;}
#main1 .main1M .main1R .sermonBTN .worship h1{margin: 0;position: absolute;transform: translate(50%, -50%);right: 50%;font-size: 24px;width: 100%;text-align: center;line-height: 1.2;}


#main2 .main2M{display: inline-flex;width:100%;justify-content: center;padding:90px 0 75px;gap:180px;}
#main2 .main2M .worship{text-align:center;text-decoration:none;color:inherit;}
#main2 .main2M .worship > h1{margin: 0;font-size: 24px;text-align: center;padding-bottom: 30px;font-weight:bold;}
#main2 .main2M .worship .worshipL1{display:inline-flex;gap:20px;}
#main2 .main2M .worship .worshipLM{display: inline-block;position:relative;}
#main2 .main2M .worship .worshipLM .circle{position: absolute;width: 100%;transform: translate(50%,-50%);right: 50%;text-align:center;}
#main2 .main2M .worship .worshipLM .circle h1{margin: 0;font-size: 20px;width: 100%;text-align: center;font-weight: bold;letter-spacing: 1px;}

#main2 .main2M .main2R{display: inline-flex;gap: 100px;padding: 0 100px;}
#main2 .main2M .main2R .worship{text-align:center;text-decoration:none;}
#main2 .main2M .main2R .worship h1{padding-bottom: 40px;font-size: 24px;margin: 0;font-weight: bold;letter-spacing: 1px;word-break:keep-all;color:#000;}
#main2 .main2M .main2R .worship .worshipIMG{background-position:center;background-size:cover;background-repeat:no-repeat;padding:59px;display:inline-block;}
#main2 .main2M .main2R .worship:hover .worshipIMG{animation-name: updown;animation-duration: 1s;animation-duration: leaner;animation-iteration-count: infinite;animation-direction: alternate;animation-fill-mode: forwards;position:relative;}
#main2 .main2M .main2R .worship1 .worshipIMG{background-image: url('../images/3_time_04.png');}
#main2 .main2M .main2R .worship2 .worshipIMG{background-image: url('../images/3_time_live.png');}
#main2 .main2M .main2R .worship3 .youtubeON{background-image: url('../images/3_time_youtube_on.png');opacity:0;display:none;}
#main2 .main2M .main2R .worship3 .youtubeOFF{background-image: url('../images/3_time_youtube.png');opacity:1;display:block;}
#main2 .main2M .main2R .worship3:hover .youtubeON{opacity:1;display:block;}
#main2 .main2M .main2R .worship3:hover .youtubeOFF{opacity:0;display:none;}
#main2 .main2M .main2L .worshipL{text-align: center;}
#main2 .main2M .main2L .worshipL h1{padding-bottom: 40px;font-size: 24px;margin: 0;font-weight: bold;letter-spacing: 1px;word-break:keep-all;}
#main2 .main2M .main2L .worshipL .worshipLM{display: inline-flex;gap: 40px;}
#main2 .main2M .main2L .worshipL .worshipLM .worshipLIMG{background-position:center;background-size:cover;background-repeat:no-repeat;padding:59px;display:inline-block;}

#main4{padding: 90px 0 105px;background:#fff ;}
#main4 .main4T{}
#main4 .main4T h2{margin: 0;font-size: 31px;font-weight: bold;letter-spacing: 1px;word-spacing: 2px;color: #fff;line-height:2;}
#main4 .main4T h1{margin: 0;font-size: 52px;font-weight: bold;letter-spacing: 1px;word-spacing: 2px;color: #fff;line-height:1.5;font-family: 'notosanskr-medium';color:#e8bead;}
#main4 .main4M{overflow:hidden;padding:45px 0 0;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:30px;}
#main4 .main4M .gallerySD{overflow:hidden;}
#main4 .main4M .gallerySD .galleryT h1{margin:0 0 30px;font-size:32px;color:#000;font-family: 'notosanskr-medium';}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide{height:235px;text-decoration:none;color:#fff}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG{height:100%;transition: .3s all ease;background-repeat:no-repeat;background-position:center;background-size:cover;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover{filter: grayscale(50%);position: relative;animation-name: updown;animation-duration: 1s;animation-duration: leaner;animation-iteration-count: infinite;animation-direction: alternate;animation-fill-mode: forwards;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT{display: inline-flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;text-align: center;opacity:0;display:none;transition: .3s all ease;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT h1{margin: 0;font-size: 32px;line-height: 2;color:#fff;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT h5{margin: 0;font-size: 20px;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover .galleryIMG .galleryT{display:inline-flex; opacity:1;background-color:rgba(0,0,0,.5)}
#main4 .main4M .gallerySD .swiper-wrapper{height:inherit!important;}

/* =================================================/
/   홈페이지 호버 애니메이션 커스텀 (ptfgc2016)      /
/ ================================================= */

/* 1. 설교 섹션 (Main1): 이미지 줌 및 박스 부상 효과 */
#main1 .main1L {
    display: block;
    border-radius: 15px; /* 부드러운 곡선 */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#main1 .main1L:hover {
    transform: translateY(-12px); /* 위로 들림 */
}

#main1 .main1L .main1LBG {
    transition: transform 0.8s ease;
}

#main1 .main1L:hover .main1LBG {
    transform: scale(1.08); /* 배경 이미지 확대 */
}

#main1 .sermonBTN a {
    transition: all 0.3s ease-in-out;
}

#main1 .sermonBTN a:hover {
    filter: brightness(1.15); /* 더 밝게 */
    transform: scale(1.05);
}


/* 2. 예배 링크 (Main2): 아이콘 팝업 효과 */
#main2 .main2M .worship {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#main2 .main2M .worship:hover {
    transform: translateY(-15px); /* 아이콘 섹션 부상 */
}

#main2 .main2M .worship .worshipLM img {
    transition: all 0.4s ease;
}

#main2 .main2M .worship:hover .worshipLM img {
    transform: rotate(5deg) scale(1.1); /* 살짝 회전하며 확대 */
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.15));
}


/* 3. 안내 박스 (Main3): 텍스트 슬라이드 및 라인 확장 */
#main3 .main3M .main3BOX {
    overflow: hidden;
}

#main3 .main3M .main3BOX .main3T {
    transition: all 0.5s ease;
}

#main3 .main3M .main3BOX:hover .main3T {
    transform: translate(50%, -58%); /* 텍스트 위치 미세 조정 */
}

#main3 .main3M .main3BOX .main3T hr {
    transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    width: 20px; /* 기본 너비 작게 시작 */
}

#main3 .main3M .main3BOX:hover .main3T hr {
    width: 60px; /* 호버 시 길어지는 연출 */
    background-color: #fff;
}


/* 4. 하단 갤러리 (Main4): 오버레이 슬라이드 업 */
/* 기존 updown 애니메이션과 충돌 방지를 위해 hover 시 초기화 */
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
}

#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover {
    animation: none; /* 기존 둥둥 떠다니는 효과 제거 */
    transform: translateY(-8px);
    filter: none; /* 기존 grayscale 제거하여 선명하게 */
}

#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG {
    transition: transform 0.7s ease, filter 0.4s ease;
}

#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover .galleryIMG {
    transform: scale(1.15);
}

#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%) !important;
    display: flex !important;
    opacity: 0;
    transform: translateY(30px); /* 아래에서 대기 */
    transition: all 0.4s ease;
}

#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover .galleryIMG .galleryT {
    opacity: 1;
    transform: translateY(0); /* 위로 슥 올라옴 */
}

/* 5. 공통: 버튼 호버 시 반응 속도 최적화 */
a, button {
    transition: 0.2s all ease-in-out;
}

@media (max-width:1799px) {

}
@media (max-width:1599px) {
}

@media (max-width:1499px) {
    #main1 .main1M .main1L .main1LBG{height:310px;}
    #main1 .main1M .main1R .sermonT{padding:20px;}
    #main3 .main3M .main3BOX{height:310px;}
}

@media (max-width:1199px) {
    :root {--width: 50%;}
    #main1 .main1M{flex-direction: column; align-items: center;padding: 30px 0;}
    #main1 .main1M .main1L{margin: 0 0 4rem;}
    #main1 .main1M .main1L .main1LBG{height:355px;}
    #main1 .main1M .main1R .sermonBTN a{padding: 65.5px;}
    #main1 .main1M .main1R .sermonT h1{font-size:50px;}
    #main2 .main2M{gap:5rem;}
    #main4 {padding: 40px 0;}
    #main4 .main4M .gallerySD .contentSlideWrapper .contentSlide{height:190px;}
}

@media (max-width:992px) {
    #main1 .main1M .main1L {width: 80%;}
    #main1 .main1M .main1R .sermonT h1{font-size:42px;}
    #main4 .main4M{grid-template-columns: 1fr 1fr;}
}

@media (max-width:767px) {
    .row{margin:0;}
    #main1 .main1M .main1L {margin: 0 0 3rem;}
    #main1 .main1M .main1L .main1LBG {height: 180px;}
    #main1 .main1M .main1L .main1LBG img{width:50px;}
    #main1 .main1M .main1R .sermonBTN .more img{width: 20px;}
    #main1 .main1M .main1R .sermonBTN .more h1{bottom: 15%;font-size:17px;}
    #main1 .main1M .main1R .sermonBTN .worship h1{font-size:17px;}
    #main1 .main1M .main1R .sermonBTN a{padding:50px;}
    #main1 .main1M .main1R .sermonT h1{font-size:20px;}
    #main1 .main1M .main1R .sermonT span{font-size:17px;}
    #main2 .main2M {gap: 1rem;padding:20px 0;}
    #main2 .main2M .worship > h1{font-size:17px;}
    #main3 .main3M .main3BOX{height:200px;}
    #main3 .main3M .main3BOX .main3T h1{font-size:20px;}
    #main3 .main3M .main3BOX .main3T h2{font-size:17px;}
    #main4 {padding: 20px 0;}
    #main4 .main4M {padding: 20px 0 0;}
    #main4 .main4T h1{font-size:24px;}
    #main4 .main4M .gallerySD .galleryT h1{font-size:20px; margin: 0 0 10px;}
    #main4 .main4M .gallerySD .contentSlideWrapper .contentSlide{height:125px;}
    #main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT h1{font-size:17px;}
    #main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT h5{font-size:15px;}
}

@media (max-width:320px) {
}