@font-face {
    font-family: 'notoserifkr-medium';
    src: url('fonts/notoserifkr-medium.otf') format('opentype');
}
@keyframes move {
  from {
    transform: translateX(100px) scale(1.2);
    animation-timing-function: cubic-bezier(.2,0,.8,1);
  }
  to { transform: translateX(0px) scale(1); }
}
@keyframes rotation{
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes updown {0% {bottom: 0;}100% {bottom: 30px;}}
@keyframes updown {0% {bottom: 0;}100% {bottom: 30px;}}
@-webkit-keyframes updown2 {0% {bottom: 0;}100% {bottom: 15px;}}
@keyframes updown2 {0% {bottom: 0;}100% {bottom: 15px;}}
@-webkit-keyframes arrayR {0%,100% {-webkit-transform:translateX(0);}50% {-webkit-transform:translateX(25px);}}
@keyframes arrayR {0%,100% {transform:translateX(0);}50% {transform:translateX(25px);}}
@-webkit-keyframes arrayL {0%,100% {-webkit-transform:translateX(0);}50% {-webkit-transform:translateX(25px);}}
@keyframes arrayL {0%,100% {transform:translateX(0);}50% {transform:translateX(25px);}}
.notoserifkr{font-family: 'notoserifkr-medium';}
.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;}
.slider .slider-wrapper .slide p{width: 100%;}
.slider .slider-wrapper .slide .each-img img{width: 100%;}
.box{display:inline-block; position:relative; opacity:0; top:50px; }

:root{--gap:30px;--width1:30%;--width2:6;}
.black{color:#000;}
.white{color:#fff;}
a{color:inherit;text-decoration:none;}

.view-more {
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: middle;
    background: transparent;
    -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-more2 {
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: middle;
    background: transparent;
    -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;}

a:hover .view-more2: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;}

a .view-more2: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;}

/* ========================================================
   1. 웰컴 섹션 (#main2)
======================================================== */
#main2 { padding: 60px 0; background: #5F7E00; }
#main2 .container { margin: 0 auto; }
#main2 .main2T { text-align: center; margin-bottom: 20px; }
#main2 .main2T p { font-family: 'NanumSquare', sans-serif; font-size: 32px; font-weight: 400; color: #fff; margin: 0; }
#main2 .main2M { display: flex; align-items: stretch; border-left: 1px solid rgba(255, 255, 255, 0.25); border-right: 1px solid rgba(255, 255, 255, 0.25); }
#main2 .main2BT { flex: 1; padding: 32px 24px; text-align: center; color: #fff; }
#main2 .main2BT .title { margin: 0 0 20px 0; font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
#main2 .main2BT .desc { margin: 0 0 28px 0; font-family: 'NanumSquare', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; opacity: 0.85; word-spacing: -0.1em; }
#main2 .main2BT .btn { display: inline-block; padding: 12px 32px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 2px; font-family: 'NanumSquare', sans-serif; font-size: 18px; font-weight: 300; color: #fff; transition: background 0.3s ease, border-color 0.3s ease; }
#main2 .main2BT .btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.15); }
#main2 .separator { width: 1px; height: 140px; align-self: flex-end; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; }


/* ========================================================
   2. 예배와 말씀 (#main3) & 친교와 나눔 (#main4) 공통
======================================================== */
#main3, #main4 { padding: 60px 0; background: #fff; overflow: hidden; }
#main3 .container, #main4 .container { margin: 0 auto; }
#main3 .main3T, #main4 .main4T { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
#main3 .main3T h2, #main4 .main4T h2 { font-family: 'NanumSquare', sans-serif; font-size: 28px; font-weight: 600; color: #333; margin: 0; }
.nav-btns { display: flex; gap: 8px; }
.nav-btns button { display: flex; align-items: center; padding: 0; border: none; background: none; color: #D9D9D9; cursor: pointer; transition: color 0.35s ease-in-out; }
.nav-btns button:hover { color: #1F1F1F; }
.nav-btns button img { width: 32px; height: 33px; }

/* sermonM은 relative 포지션 필요 */
.sermonM {
    position: relative;
    display: block;
    overflow: hidden;
}

/* 오버레이 기본 상태: 숨김 */
.sermon-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
}

/* 호버 시 표시 */
.sermonM:hover .sermon-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* 제목 텍스트 스타일 */
.sermon-title {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;


    /* 긴 제목은 2줄까지만 표시 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* 성경 구절 */
.sermon-bible {
    display: block;
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
    margin-top: 5px;
}
/* 날짜 */
.sermon-date {
    display: block;
    color: rgba(255, 255, 255, 0.70);
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}



/* Swiper 적용 구간
   기존 가로 스크롤(flex, overflow) 속성 모두 제거 
*/
#main3 .main3M, #main4 .main4M { display: block; position: relative; width: 100%; overflow:hidden; }

/* Swiper 내부 슬라이드 (a태그) 넓이를 100%로 변경 (부모인 swiper-slide가 넓이를 결정함) */
#main3 .sermonM { display: block; width: 100%; }
#main3 .sermonBG { width: 100%; height: 218px; background: #1F1F1F center / cover no-repeat; transition: opacity 0.3s ease; }
#main3 .sermonM:hover .sermonBG { opacity: 0.8; }

#main4 .galleryM { display: block; width: 100%; overflow: hidden; }
#main4 .galleryBG { width: 100%; height: 218px; background: #1F1F1F center / cover no-repeat; transition: transform 0.3s ease-in-out; }
#main4 .galleryM:hover .galleryBG { transform: scale(1.2); }
/* galleryM에 relative 포지션 필요 */
.galleryM {
    position: relative;
    display: block;
    overflow: hidden;
}

/* 오버레이 기본 상태: 숨김 */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
}

/* 호버 시 표시 */
.galleryM:hover .gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* 날짜 */
.gallery-date {
    display: block;
    color: rgba(255, 255, 255, 0.70);
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

/* 제목 */
.gallery-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}


/* ========================================================
   3. 선교사 및 국내외 협력 기관 (#main5)
======================================================== */
#main5 { padding: 60px 0; background: #fff; }
#main5 .container { margin: 0 auto; }
#main5 .main5T h2 { margin: 0 0 32px 0; padding-bottom: 16px; border-bottom: 1px solid #E6E6E6; font-family: 'NanumSquare', sans-serif; font-size: 28px; font-weight: 600; color: #333; }
#main5 .main5M { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#main5 .col-title { margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid #1F1F1F; font-family: 'NanumSquare', sans-serif; font-size: 18px; font-weight: 600; color: #333; }
#main5 .column ul { font-family: 'NanumSquare', sans-serif; font-size: 14px; font-weight: 400; line-height: 2; color: #555; columns: 2; column-gap: 16px; list-style: none; padding: 0; margin: 0; }


/* ========================================================
   반응형 (Media Queries)
======================================================== */

/* 1. 해상도 1499px 이하 (작은 데스크톱/노트북) */
@media (max-width: 1499px) {
    #main2 .main2BT { padding: 32px 16px; }
}

/* 2. 해상도 1199px 이하 (가로형 태블릿) */
@media (max-width: 1199px) {
    #main2 .main2BT .title { font-size: 28px; }
    #main2 .main2BT .desc { font-size: 15px; }
    #main2 .main2BT .btn { font-size: 16px; padding: 10px 24px; }
    #main5 .column ul { columns: 1; } /* 텍스트 깨짐 방지용 1단락 변경 */
}

/* 3. 해상도 992px 이하 (세로형 태블릿) */
@media (max-width: 992px) {
    /* 웰컴 섹션 세로 정렬 */
    #main2 .main2M { flex-direction: column; border: none; padding: 0 40px; }
    #main2 .separator { width: 100%; height: 1px; align-self: center; }
    
    /* 하단 기관 1단 정렬 */
    #main5 .main5M { grid-template-columns: 1fr; }
}

/* 4. 해상도 767px 이하 (모바일) */
@media (max-width: 767px) {
	.slider.is-hero .move-btn{display:none;}
	.slider.is-hero .slider-dots{bottom:15px !important;}
    .slider.is-hero .slider-wrapper .slide.bg{background-position: -60px 20%!important;}
    /* 웰컴 섹션 모바일 최적화 */
    #main2 { padding: 0; }
    #main2 .main2T p { display: none; } /* 모바일에서는 최상단 문구 숨김 (원본 html 동일) */
    #main2 .main2M { padding: 0 38px; }
    #main2 .main2BT { padding: 32px 0; }
    #main2 .main2BT .btn { width: 180px; padding-left: 0; padding-right: 0; }

    /* 예배와 말씀, 친교와 나눔 최적화 */
    #main3, #main4 { padding: 30px 0; }
    #main3 .main3T, #main4 .main4T { padding: 0 16px; }
    #main3 .main3T h2, #main4 .main4T h2 { font-size: 20px; font-weight: 700; }
    
    /* 화살표 버튼 숨김 */
    .nav-btns { display: none; }

    /* 모바일 좌우 여백 설정 */
    #main3 .main3M, #main4 .main4M { padding: 0 16px; }

    /* 높이를 반응형 비율(16:9 등)로 변경, width는 100%이므로 지움 */
    #main3 .sermonBG, #main4 .galleryBG { height: auto; aspect-ratio: 16 / 9; }

    /* 선교사 및 국내외 협력 기관 최적화 */
    #main5 { padding: 30px 0; }
    #main5 .main5T { padding: 0 16px; }
    #main5 .main5T h2 { font-size: 20px; font-weight: 700; }
    #main5 .main5M { padding: 0 16px; }
    #main5 .col-title { font-size: 16px; }
    #main5 .column ul { font-size: 12.5px; word-spacing: -0.025em; }
}