/*메인*/
/*#dimodePage{display: block!important; transform:translateY(-100px);}*/
.flex{display: flex; justify-content: space-between;}
a:hover { color: black; text-decoration: none; }

section {overflow:hidden; display:block;}


/* ===== MAIN SLIDER ===== */
#mainSlider {position: relative; opacity: 0.999;}

.intro { position: absolute; bottom: 25%; left: 50%; z-index: 99; transform: translateX(-50%);}
.intro-center{gap:100px; justify-content: center;}
.intro-center > div {
    width: 155px;
    aspect-ratio: 1;
    border: 1px solid #ccc;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.intro-center > div:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 30px rgba(46,64,112,0.18);
}
.intro-center > div img {
    transition: transform 0.3s ease;
}
.intro-center > div:hover img {
    transform: scale(1.1);
}
.intro-center > div p {
    font-size: 16px;
    font-weight: bold;
    color: black;
    transition: color 0.3s ease;
}
.intro-center > div:hover p {
    color: #2e4070;
}

#mainSlider .each-img { margin: 0;}
#mainSlider .each-img img { width: 100%;}


/* ===== SECTION 1 : SERMON ===== */
#main1{overflow:visible;}

.sermon{
    padding: 0%;
    padding-bottom: 0%;
    background: url(../../../Layouts/jnchurch_Layout/Images/004_bg.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
}

.sermon .sermon_container {
    display: flex;
    flex-direction: column;
    gap: 140px;
    justify-content: center;
    transform: translateY(-145px);
}

.sermon h2 {
    font-size: 50px;
    color: #2e4070;
    font-weight: bold;
    text-align: left;
    line-height: 1.2;
}
.sermon h2 span {
    font-family: 'GmarketSans';
    font-size: 40px;
    color: #122456cc;
    opacity: 0.8;
    font-weight: 500;
}

/* st-2 버튼 영역 */
.st-2 { padding: 40px 70px;}
.st-2 > div { text-align: left; display:flex; padding-top: 40px; gap: 30px;}
.st-2 > div > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    aspect-ratio: 1;
    width: 120px;
    border: 4px solid;
    border-radius: 25px;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.st-2 > div > a:hover {
    transform: scale(1.08);
}
.st-2 > div > a:nth-of-type(1) {
    border: 4px solid #b71c27;
    background: #b71c27;
    color: white;
}
.st-2 > div > a:nth-of-type(2) {
    border: 4px solid #2e4070;
    color: #2e4070;
}
.st-2 > div > a:nth-of-type(2):hover {
    background: #2e4070;
    color: white;
}

/* LIVE 버튼 (클래스 기반으로 분리) */
.live-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.live-btn:hover {
    transform: scale(1.08);
}

/* 생방송 ON - pulse 무한 */
.live-btn.live-on {
    animation: livePulse 2s infinite;
}
.live-btn.live-on:hover {
    transform: scale(1.08);
    animation: none;
    box-shadow: 0 0 0 6px rgba(183,28,39,0.25);
}

/* 생방송 OFF - pulse 없음, hover 확대만 */
.live-btn.live-off {
    animation: none;
}

@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(183,28,39,0.55); }
    50%       { box-shadow: 0 0 0 14px rgba(183,28,39,0); }
}

/* st-1 이미지 + 버튼 링크 영역 */
.st-1 {
    transform: translateY(-55px);
    position: relative;
    overflow: visible;
}

/* 배경 이미지 링크 */
.st-1 > a:not(.sermon-btn-link) {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.st-1 > a:not(.sermon-btn-link) > img {
    display: block;
    width: 100%;
    transition: transform 0.5s ease, filter 0.5s ease;
}
.st-1 > a:not(.sermon-btn-link):hover > img {
    transform: scale(1.04);
    filter: brightness(0.75);
}

/* 버튼 링크 */
.st-1 > a.sermon-btn-link {
    position: absolute;
    bottom: -50px;
    right: 55px;
    cursor: pointer;
    display: block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}
.st-1 > a.sermon-btn-link > img {
    display: block;
}
.st-1:hover > a.sermon-btn-link {
    transform: translateY(-12px) scale(1.08);
    filter: drop-shadow(0 10px 18px rgba(46,64,112,0.35));
}
.st-1 > a.sermon-btn-link:hover {
    transform: translateY(-16px) scale(1.12);
    filter: drop-shadow(0 14px 24px rgba(41,70,147,0.55));
}

/* sb-2 카드 영역 */
.sb-1 h2 { padding: 0 15px; margin-bottom: 40px;}
.sb-2 > div > a {
    text-align: left;
    color: #2e4070;
    position: absolute;
    width: 67%;
    bottom: -25%;
    left: 25px;
    transition: opacity 0.3s ease;
}
.sb-2 > div > a p { font-size: 16px;}
.sb-2 > div > a h4 { font-size: 32px; line-height: 1.4; margin-bottom: 0;}
.sb-2 > div > a h4 span { font-size: 17px; color:#2e4070b3; opacity:0.7;}
.sb-2 > div > a h4 img { float:right; margin-top: 10px;}
.sb-2 > div { position: relative; transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease; border-radius: 8px; overflow: visible;}
.sb-2 > div:hover {
    transform: translateY(-10px) scale(1.03);
    z-index: 2;
}
.sb-2 > div img {
    transition: filter 0.3s ease, transform 0.3s ease;
    display: block;
    width: 100%;
}
.sb-2 > div:hover img {
    filter: brightness(0.88);
    transform: scale(1.03);
}
.sb-2 > div:hover > a { opacity: 1;}
.sb-2 > div > a h4 span.plus {
    float: right;
    font-size: 30px;
    margin-top: 5px;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}
.sb-2 > div:hover > a h4 span.plus {
    transform: rotate(90deg);
    color: #2e4070;
}


/* ===== SECTION 2 : NEXT (사역과 공동체) ===== */
.next{
    padding: 100px 0;
    background: url(../../../Layouts/jnchurch_Layout/Images/006_community_bg.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
}
.next h1 {
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.5;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 40%,
        #aad4ff 50%,
        #ffffff 60%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}
.next h1 span {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-size: 38px;
}
.next h2 {
    font-size: 32px;
    color: black;
}

@keyframes shimmer {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}

.nb-1 > div h4 {
    color: #294693;
    font-size: 40px;
    font-weight: bold;
}
.nb-1 > div > a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 224px;
    background: rgba(255,255,255,0.7);
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}
.nb-1 > div > a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99,166,242,0.35);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.55s ease, height 0.55s ease, opacity 0.55s ease;
    opacity: 0;
}
.nb-1 > div > a:hover::before {
    width: 120%;
    height: 120%;
    opacity: 1;
}
.nb-1 > div > a:hover {
    background: rgba(99,166,242,0.5);
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(41,70,147,0.25);
    color: #fff;
    transition: 0.3s;
}
.nb-1 > div > a:hover h4 { color: #fff;}
.nb-1 { gap: 110px; justify-content: center;}
.nb-1 > div { padding: 0 30px;}
.next-bottom { padding: 80px 0;}


/* ===== SECTION 3 : GALLERY ===== */
.gallery{
    padding: 130px 0;
    background: url(../../../Layouts/jnchurch_Layout/Images/007_gallety_bg.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: left;
}

.photo_container { transform: translateX(14%);}

.gallery h1 {
    font-family: 'GmarketSans';
    font-size: 45px;
    line-height: 1.5;
    color: #2e4070;
    font-weight: 500;
    margin-top: 0;
}
.gallery h1 span {
    font-family: 'NanumSquare', sans-serif;
    font-size: 52px;
    color: #2e4070;
    font-weight: bold;
    position: relative;
    display: inline-block;
}
.gallery h1 span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 3px;
    background: #2e4070;
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gallery:hover h1 span::after {
    width: 100%;
}
.gallery h2 { font-size: 23px; color: white;}

.gallery .galleryList-slide { padding: 15px 0;}
.gallery .galleryList-slide > a { display:block; position: relative; margin: 0 15px;}
.gallery .galleryList-slide > a:focus { border:none;}
.gallery .galleryList-slide > a > p {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -30%);
    color: white;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.gallery .galleryList-slide > a:hover > p {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
}
.gallery .galleryList-slide > a > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
    transition: transform 0.5s ease, filter 0.5s ease;
}
.gallery .galleryList-slide a:hover > img {
    filter: brightness(0.45);
    transform: scale(1.08);
}

.photo { flex-direction: column-reverse;}
.gallery .slick-list { width: 100%;}


/* ===== SWIPER PAGINATION ===== */
.swiper-pagination1 {
    width: 100%;
    position: initial;
    display: flex;
    flex-direction: row;
    margin: 15px 5px;
}
.swiper-pagination2 {
    margin-top: 10%;
    width: 31vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.swiper-pagination1 > li {
    margin: 0 10px;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: #c2c2c2;
    border: 1px solid #c2c2c2;
}
.swiper-pagination1 .slick-active {
    width: 40px;
    border-radius: 20px;
    background: white;
    border: 1px solid white;
}
.swiper-pagination1 > li > button { display:none;}





/* ============================================
   반응형 보강 - layout.main.css
   PC 표준 (1400px↑) 영역은 건드리지 않음
   브레이크포인트: 1399 / 1199 / 1023 / 767 / 467
   1rem = 18px (PC 기준, 1023↓부터 자동 축소)
   ============================================ */

@media(max-width:1399px) {
    .intro_container {
        width: 100vw;
        max-width: 66vw;
        padding: 0 1.6rem;
    }

    .intro-center { gap: 3.8rem; }
    .intro-center > div { width: 7.7rem; }

    /* 설교 */
    .sermon .sermon_container {
        gap: 5.5rem;
        transform: translateY(-6.6rem);
    }
    .sermon h2 { font-size: 2.4rem; }
    .sermon h2 span { font-size: 1.9rem; }

    .st-2 { padding: 1.6rem 2.7rem; }
    .st-2 > div { gap: 1.4rem; padding-top: 1.6rem; }
    .st-2 > div > a {
        width: 6rem;
        font-size: 1rem;
    }

    .st-1 > a.sermon-btn-link {
        right: 2.2rem;
        bottom: -2.5rem;
    }
    .st-1 > a.sermon-btn-link img { max-width: 6.6rem; }

    /* 카드 */
    .sb-2 > div > a h4 { font-size: 1.7rem; }
    .sb-2 > div > a h4 span { font-size: 0.9rem; }
    .sb-2 > div > a p { font-size: 0.85rem; }
    .sb-2 > div > a { bottom: -40%;        height: 9rem; }

    /* next */
    .next { padding: 4.5rem 0; }
    .next h1 { font-size: 2.7rem; }
    .next h1 span { font-size: 1.8rem; }
    .next h2 { font-size: 1.5rem; }

    .nb-1 { gap: 4.4rem; }
    .nb-1 > div h4 { font-size: 2rem; }

    /* gallery */
    .gallery { padding: 5.5rem 0; }
    .gallery h1 { font-size: 2.3rem; }
    .gallery h1 span { font-size: 2.6rem; }
    .photo_container { transform: translateX(8%); }
}

@media(max-width:1199px) {
    .intro_container { max-width: 66vw; }

    .intro { bottom: 18%; }
    .intro-center { gap: 2.7rem; }
    .intro-center > div { width: 7.2rem; }

    /* 설교 */
    .sermon .sermon_container {
        gap: 4rem;
        transform: translateY(-5.5rem);
    }
    .sermon h2 { font-size: 2rem; }
    .sermon h2 span { font-size: 1.6rem; }

    .st-2 { padding: 1.1rem 1.6rem; }
    .st-2 > div { gap: 1.1rem; padding-top: 1.1rem; }
    .st-2 > div > a {
        width: 5.5rem;
        font-size: 0.95rem;
    }

    .st-1 > a.sermon-btn-link {
        right: 1.6rem;
        bottom: -2.2rem;
    }
    .st-1 > a.sermon-btn-link img { max-width: 6rem; }

    /* 카드 */
    .sb-2 > div > a h4 { font-size: 1.5rem; }
    .sb-2 > div > a h4 span { font-size: 0.85rem; }
    .sb-2 > div > a p { font-size: 0.8rem; }
    .sb-2 > div > a {         height: 7.5rem; left: 1rem; }

    /* next */
    .next { padding: 4rem 0; }
    .next h1 { font-size: 2.4rem; }
    .next h1 span { font-size: 1.6rem; }
    .next h2 { font-size: 1.4rem; }

    .nb-1 { gap: 3.3rem; }
    .nb-1 > div { padding: 0 0.8rem; }
    .nb-1 > div h4 { font-size: 1.7rem; }

    /* gallery */
    .gallery { padding: 5rem 0; }
    .gallery h1 { font-size: 2rem; }
    .gallery h1 span { font-size: 2.3rem; }
    .photo_container { transform: translateX(5%); }
}

@media(max-width:1023px) {
    .intro_container { 
        padding: 0 1rem;
    }

    /* 인트로 아이콘 */
    .intro { bottom: 12%; }
    .intro-center {
        gap: 1rem;
        flex-wrap: wrap;
    }
    .intro-center > div {
        width: 6.5rem;
        height: 6.5rem;
        padding: 0.5rem;
    }
    .intro-center > div img { max-width: 40%; }
    .intro-center > div p { font-size: 0.8rem; }

    /* 설교 */
    .sermon { padding-top: 0; }
    .sermon .sermon_container {
        gap: 3rem;
        transform: translateY(-3.5rem);
    }
    .sermon-top.flex {
        flex-direction: column;
        gap: 1.8rem;
    }
    .st-1 {
                transform: translateY(-25px);
        width: 100%;
    }
    .st-1 > a.sermon-btn-link {
         right: calc(20px + 45px);
        bottom: -44px;
    }
    .st-1 > a.sermon-btn-link img { max-width: 5.5rem; }
    .st-2 {
        width: 100%;
        padding: 1.1rem 1rem 0;
    }
    .st-2 > div {
        gap: 1rem;
        padding-top: 1.1rem;
    }
    .st-2 > div > a {
        width: 5.3rem;
        font-size: 0.9rem;
        border-width: 3px;
    }
    .sermon h2 { font-size: 1.8rem; }
    .sermon h2 span { font-size: 1.4rem; }

    /* 카드 */
    .sb-2 { gap: 1.6rem; }
    .sb-2 > div { margin-bottom: 1.6rem; }
    .sb-2 > div > a {
        position: relative; 
        left: 0;
        bottom: 4rem;
        width: 9rem;
        padding: 1rem 0.8rem 0.3rem;
    }
    .sb-2 > div > a h4 { font-size: 1.4rem;         width: 13rem;}
    .sb-2 > div > a h4 span.plus { font-size: 1.4rem; }

    /* next */
    .next {
        padding: 4rem 0;
        background-attachment: scroll;
    }
    .next h1 { font-size: 2.1rem; }
    .next h1 span { font-size: 1.4rem; }
    .next h2 { font-size: 1.2rem; }
    .next-bottom { padding: 2.7rem 0; }
    .nb-1 { gap: 1.6rem; }
    .nb-1 > div h4 { font-size: 1.4rem; }
    .nb-1 > div > a { padding: 28% 0; }

    /* gallery */
    .gallery {
        padding: 4rem 0;
        background-attachment: scroll;
    }
    .gallery h1 { font-size: 1.7rem; }
    .gallery h1 span { font-size: 2rem; }
    .gallery h2 { font-size: 1rem; }
    .photo_container {
        transform: translateX(0);
        padding: 0 1rem;
    }
    .photo-left { margin-bottom: 1.4rem; }

    /* 페이지네이션 */
    .swiper-pagination2 { width: 100%; margin-top: 5%; }
    .swiper-pagination1 > li {
        height: 0.8rem;
        width: 0.8rem;
        margin: 0 0.4rem;
    }
    .swiper-pagination1 .slick-active { width: 1.7rem; }
}

@media(max-width:991px) {

.sb-2 > div > a h4 {      width: 9.5rem;} 
}



@media(max-width:767px) {
    #dimodePage { padding-top: 4.5rem; }

    /* 인트로 아이콘 숨김 */
    .intro-center { display: none; }

    /* 메인 슬라이더 */
    #mainSlider .each-img img {
        min-height: 13rem;
        object-fit: cover;
    }

    /* 설교 */
    .sermon { padding: 1.7rem 0 2.7rem; }
    .sermon .sermon_container {
        gap: 5rem;
        transform: translateY(0);
        padding: 0 1rem;
    }
    .sermon-top.flex { gap: 1.1rem; }
    .sermon h2 {
        font-size: 1.5rem;
        line-height: 1.3;text-align: center;
    }
    .sermon h2 span { font-size: 1.2rem; }

    .st-1 > a.sermon-btn-link {
                right: calc(15px + 45px);
        bottom: -33px;
    }
    .st-1 > a.sermon-btn-link img { max-width: 4.4rem; }

    .st-2 { padding: 0.6rem 0 0; }
    .st-2 > div {
        gap: 0.7rem;
        padding-top: 0.9rem;
        justify-content: center;
    }
    .st-2 > div > a {
        width: 5rem;
        font-size: 0.85rem;
        border-width: 3px;
        border-radius: 1.1rem;
    }
    .live-btn img { max-width: 1.4rem; }

    /* 카드 */
    .sb-2 {
        flex-direction: column;
        align-items: center;    display: flex;
    }
    .sb-2 > div {
        max-width: calc(100vw - 50px);
        width: 100%;
        margin-bottom: 1.2rem;
		height: calc(2rem + (100vw - 50px) * 0.7);
        margin: 0;
    }
    .sb-2 > div img { width: 100%; } 
    .sb-2 > div > a p { font-size: 0.8rem;padding: 0 15px; }
	.sb-2 > div > a h4 {  margin:0; font-size: 1.3rem;          width: calc(100vw * 0.75 - 50px * 0.75); padding: 0 15px;}
       

	.sb-2 > div > a {
        /* bottom: 18%; */    bottom: 4.0rem; 
    }



    /* next */
    .next { padding: 2.7rem 1rem; }
    .next h1 {
        font-size: 1.7rem;
        letter-spacing: 1px;
    }
    .next h1 span {
        font-size: 1.1rem;
        letter-spacing: 3px;
    }
    .next h2 { font-size: 1.1rem; }
    .next-bottom { padding: 1.7rem 0; }
    .nb-1 {
        gap: 1.1rem;
        flex-wrap: wrap;
    }
    .nb-1 > div {
        padding: 0 0.6rem;
        flex: 1 1 40%;
    }
    .nb-1 > div h4 { font-size: 1.2rem; }
    .nb-1 > div > a { padding: 30% 0; }

    /* gallery */
    .gallery { padding: 2.7rem 0; }
    .gallery h1 { font-size: 1.4rem; }
    .gallery h1 span { font-size: 1.7rem; }
    .photo_container.flex { flex-direction: column; }
    .photo-left {
        text-align: left;
        padding: 0 1.1rem;
    }
    .gallery .galleryList-slide > a > img {
        height: 50vw;
        aspect-ratio: auto;
    }
    .gallery .galleryList-slide > a > p { font-size: 0.85rem; }







 










}

@media(max-width:467px) {
	
	.sermon .sermon_container {  gap: 3rem;}
	
	
    .sermon-top { display: flex; flex-direction: column; }
    .sermon h2 { font-size: 1.4rem;         margin-top: 0;}
    .sermon h2 span { font-size: 1.1rem; }

    .st-2 > div { gap: 0.5rem; }
    .st-2 > div > a {
        width: 4.7rem;
        font-size: 0.8rem;
        border-width: 2px;
        border-radius: 0.9rem;
    }

    .sb-2 > div > a h4 { font-size: 1.2rem;        padding: 0 7px ; width: calc(100vw * 0.7 - 30px * 0.7);}
	.sb-2 > div > a p{   padding: 0 7px }
	.sb-2 > div > a {
          bottom: 3.0rem; 
        padding: 0;
    }
	.sb-2 > div {        max-width: 100%;}
	
	.st-1 > a.sermon-btn-link {
         right: calc(2.2rem + 15px);
        bottom: -2.2rem;
    }
	
	

    .next h1 { font-size: 1.4rem; }
    .next h1 span {
        font-size: 0.95rem;
        letter-spacing: 2px;
    }
    .next h2 {
        font-size: 1rem;
        word-break: keep-all;
    }
    .nb-1 > div {   }
    .nb-1 > div > a { padding: 25% 0; }
    .nb-1 > div h4 { font-size: 1.1rem; }

    .gallery h1 { font-size: 1.2rem; }
    .gallery h1 span { font-size: 1.5rem; }
    .gallery .galleryList-slide > a > img { height: 60vw; }




 

}