/*메인*/

.pretendardB{font-family: 'PRETENDARD-BOLD';}
.pretendardR{font-family: 'PRETENDARD-REGULAR';}
.pretendardEB{font-family: 'PRETENDARD-EXTRABOLD';}
.nanumBrg{font-family: 'nanumsquareneo-brg';}
.nanumCbd{font-family: 'nanumsquareneo-cbd';}
.nanumDeb{font-family: 'nanumsquareneo-deb';}

.freesentation4{font-family: 'freesentation-4Regular';}
.freesentation7{font-family: 'freesentation-7Bold';}
.freesentation8{font-family: 'freesentation-8ExtraBold';}

.fontsize61{font-size: 61px;} 
.fontsize36{font-size: 36px;}
.fontsize32{font-size: 32px;} 
.fontsize22{font-size: 22px;}
.fontsize26{font-size: 26px;}
.fontsize24{font-size: 24px;}
.fontsize19{font-size: 19px;}
.fontsize18{font-size: 18px;}
.fontsize16{font-size: 16px;}
.fontsize13{font-size: 13px;}

.no-padding {    padding-right: 0;    padding-left: 0;}
.no-margin{margin:0;}
#topbar_m {
    background: rgba(18, 37, 71, 0.4);
}
    #dimodePage {
    display: block !important;
} 
@keyframes aaa {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bbb {
    from {
        top: -10px
    }

    to {
        top: -2px;
    }
}

a {
    color: black;
    text-decoration: none;
    transition: transform all .3s linear;
}

a:hover {
    color: black;
    text-decoration: none;
}

 

#main {
    width: 100%;
    height: 100%; 
}

#section {
    /*font-family: 'Noto Sans KR', sans-serif;*/
    font-family: NanumSquare, sans-serif;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
	font-family: 'PRETENDARD-REGULAR';
}

.mainContainer {
    width: 100%;
    margin: 0 auto;
    padding: 70px 0;
    box-sizing: border-box;
    background-color: white;
}


/*슬라이더*/
#mainSlider  {
    /*margin-top:95px;*/
}
#mainSlider .dimode-slider .slider-dots {
    bottom: 140px;
}
/*
#main .dimode-slider .slider-dots .each-dot {
	margin: 0 5px;
	height: 16px;
	width: 16px;
	border: 1px solid #000;
}
#main .dimode-slider .slider-dots .each-dot.active { width: 42px; border-radius: 10px; background: black; border: 1px solid #000; }
    
 
#main .dimode-slider .slider-wrapper .slick-list .slick-track .slide > div > h1 {
    font-size: 4.2vw;
    padding-top: 7%;
    letter-spacing: 3px;
    font-weight: bold;
    text-align: left;
    font-family: ui-sans-serif;
}
#main .dimode-slider .slider-wrapper .slick-list .slick-track .slide {
    width:100%!important;
}
*/

#mainSlider .move-btn {    background: none !important;  }
#mainSlider .next-btn {    right: 5% !important;}
#mainSlider .prev-btn {    left: 5% !important;} 





/*main0*/

#main0 {
    background: #FBEEF4;
    position: relative;
    padding-top: 40px;
}

    #main0 .phrase_container {
        background: url(../Images/main/2_bg.png);
        position: absolute;
        left: 50%;
        top: 25px;
        transform: translateX(-50%);
        background-repeat: no-repeat;
        aspect-ratio: 1439 / 203;
        border-radius: 40px;
        background-size: cover;
        align-items: center;
        z-index: 2;
    }
#main0 .phrase_container .title{font-weight:bold;}

#main0 .phrase_container .info   { 
    align-items: flex-start;
    gap: 60px;
}

#main0 .phrase_container .info .phrase_text { 
    flex-direction: column;
    justify-content: center;
	gap:15px;
}
#main0 .phrase_container .info .phrase_text p { 
    color:#00000085;
} 

#main0  .welcome_container.container  {
    padding: 210px 0px 120px;
    flex-direction: column;
    align-items: center;
}

#main0 .maintitle.welcome-title > p {
    color: #3974b9;    margin-bottom: 20px;
    font-family: 'KoPubBatangLight';
}
#main0 .maintitle.welcome-title > h4 {
    color: #3b4371; font-weight: 800;
}
#main0 .welcome-bottom {
    padding: 60px; align-items: center;
}
#main0 .welcome-bottom a  >h4  { 
	transition:all .2s linear;
} 
#main0 .welcome-bottom a:hover >h4  {
    text-decoration:underline;text-underline-offset: 10px;
}






/*main1*/

#main1{background:#C0D7F0; position:relative; padding-top:0;}

#main1 .sermon_container { 
    align-items: flex-end;
    transform: translateY(-70px);
}

#main1 .sermon-left .sermon_info {
    /*이의호 주임 251118수정*/
    /*aspect-ratio: 351 / 241;*/
    aspect-ratio: 16 / 9;
    width: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
	color: white;
    padding: 50px; 
    flex-direction: column;
    align-items: flex-start;    gap: 60px;
	border-radius: 20px;
}

.topbar.fixeddown {
    top: -150px !important;
}

.topbar.fixedup {
    top: 0px !important;
}

#main1 .sermon-left .sermon_info img{
    position: absolute;
    bottom: 0;
    right: 0; 
}
#main1 .sermon-left .sermon_info >h4{
    font-weight:bold;
}


#main1 .sermon-left .sermon_info:hover img{-webkit-animation: shake-horizontal 2.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-horizontal 2.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite  both;}

#main1 .sermon-right  img{
    /*max-width:320px;*/     border-radius: 20px;aspect-ratio: 16 / 9;
}


#main1 .sermon-right {
    /*justify-content: center;*/
}


#main1 .sermon-right  a > h4{
    color:#3b4371; font-weight:bold;
}
#main1 .sermon-right .sermon_info {
    color:#00000085;
}
#main1 .sermon-right  a  { 
    display: flex;
    flex-direction: column; padding: 0 20px;
}
#main1 .sermon-right .sermon_info h4{
    margin-bottom:0;
}

#main1 .sermon-r1 {
    border-right:2px solid #7a97b057;
}




/*main2*/

#main2{background:#fff; position:relative; padding: 110px  0; }



#main2 .news_container.container.flex {
    justify-content: space-between;
}


#main2 .news-left { flex-direction: column;
    align-items: center;
    gap: 80px;
    justify-content: flex-start;
}

#main2 .news-left a > h4{color:#3b4371; font-weight:bold; margin-top: 20px;}
#main2 .news-left a > p{color:#3b437166 ;}


#main2 .news-left .hover {
    width: 55px;
    aspect-ratio: 1; 
    background: rgba(173, 201, 240, 0.5);
    border-radius: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
	opacity:0;
	transition: all .2s linear;
}

#main2 .news-left a:hover .hover { 
	opacity:1; 
	
}

#main2 .news-right  { 
    justify-content: flex-end;
}
#main2 .news-right  >div {
    /*width: calc(100% * 4 / 9);*/ 
    flex-direction: column;
	    align-items: flex-end; 
    justify-content: flex-start;
    gap: 70px;
}

#main2 .news-right  >div >div {
    background-repeat: no-repeat !important;
    background-size: cover !important;
	    aspect-ratio: 41 / 46;
    max-width: 410px;
    border-radius: 30px;     width: 100%;
	padding: 20px;
	    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 50px;
    align-content: space-between
}
#main2  .news-r2  {
    margin-top: 140px;
}


#main2    .news-title  span {
    color: #3b437166;
}

#main2    .news-title  >p {
    font-weight: bold;
}

#main2   .news-menus {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#main2   .news-menus a{ 
    width: 55%; color:#384270;
	    display: flex;
    padding: 5px 0;
	transition:all .2s linear;
	border-bottom: 1px solid #ffffff00; 
	    align-items: center;
    justify-content: space-between;
}
#main2   .news-menus a:hover {
    border-bottom: 1px solid #384270; 
}
#main2   .news-menus a  .hover{
    opacity:0;
	
	transition: all .2s linear;
}
#main2   .news-menus a:hover .hover{
    opacity:1;
	-webkit-animation: shake-horizontal 2.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-horizontal 2.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite  both;
}

#main2 .news-right  .news-r11 { 
    gap: 75px; 
}

#main2 .news-right  .news-r11 .news-menus a,
#main2 .news-right  .news-r21 .news-menus a{ 
    width: 48%;  
}

#main2 .news-r21 .news-menus { 
    flex-direction: column;
    align-items: flex-start;
}


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

@media(max-width:1199px) {
	.fontsize61{font-size: 2.5rem;} 
	.fontsize36{font-size: 2rem;}
	.fontsize32{font-size: 2rem;} 
	.fontsize26{font-size: 1.5rem;}
	.fontsize24{font-size: 1rem;}
	.fontsize22{font-size: 1rem;}
	.fontsize19{font-size: 1rem;}
	.fontsize16{font-size: 1rem;}
	.fontsize13{font-size: 0.6rem;}
     
}

@media(max-width:991px) {
    #main0 .phrase_container .info {
        gap: 10px !important;
    }
    #main0 .phrase_container .info img{
        width:10px;
    }
}

@media(max-width:767px) {
    .container {
        width: 95%;
    }
    .phrase_text > h4{
        font-size:1.15rem;
    }
    .phrase_container > .fontsize36 {
        font-size: 1.3rem;
    }
    #footer > .container .foot_info > .flex{
       display:block;
    }
    #footer > .container .foot_info {
        display: block;
    }
    #footer > .container {
        width: 100%;
    }

    #main2 .news-right > div > div {
        background-repeat: no-repeat !important;
        background-size: cover !important;
        aspect-ratio: 41 / 46;
        max-width: 410px;
        border-radius: 30px;
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
        align-content: space-between
    }
    #main0 .phrase_container {
        top: -15px;
    }
    #main0 .welcome-bottom {
        padding: 10px 0px;
        align-items: center;
    }
    /* 전체 줄 정렬 및 간격 조정 */
    .phrase_container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
    }

        /* 왼쪽 박스 (생명의 말씀) */
        .phrase_container .title {
            flex: 0 0 30%; /* 기존 col-md-3(25%) → 35% 로 확장 */
            max-width: 30%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            padding:0px;
        }

        /* 오른쪽 박스 */
        .phrase_container .info {
            flex: 0 0 65%;
            max-width: 65%;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 텍스트 영역 */
        .phrase_container .phrase_text {
            flex: 1;
        }

        /* 이미지 크기 조정 */
        .phrase_container img {
            width: 30px;
            height: auto;
        }
}

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

/* ------------------------------------
   SECTION 1 — SERMON LAYOUT (반응형)
--------------------------------------*/


@media(max-width:1199px) {


    /* 전체 컨테이너 */
    .sermon_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 40px;
    }

    /* 큰 카드(sermon-left)  */
    .sermon-left {
        width: 100%;
    }

        .sermon-left .sermon_info {
            width: 100%;
            padding-top: 56%; /* 16:9 비율 유지 */
            background-size: cover;
            background-position: center;
            border-radius: 20px;
        }

    /* 작은 카드 2개 나란히 배치 */
    .sermon-right {
        display: flex;
        flex-wrap: nowrap;
        gap: 25px;
        width: 100%;
    }

        /* 각 작은 카드 박스 */
        .sermon-right > .sermon-r1,
        .sermon-right > .sermon-r2 {
            flex: 1;
            min-width: 0; /* flex 박스 수축 허용 */
        }

    /* 작은 카드 이미지 */
    .sermon-video img {
        width: 100%;
        height: auto;
        border-radius: 14px;
        object-fit: cover;
    }

    /* 작은 카드 텍스트 정리 */
    .sermon_info {
        margin-top: 10px;
    }
}
/* ------------------------------
   반응형 세트
--------------------------------*/

/* 태블릿 (작아질 때 적당히 줄어듦) */
@media (max-width: 1024px) {
    .sermon-right {
        gap: 20px;
    }
}

/* 모바일 — 작은 카드가 자동으로 아래로 떨어짐 */
@media (max-width: 768px) {
    .sermon-right {
        flex-direction: column;
    }

        .sermon-right > .sermon-r1,
        .sermon-right > .sermon-r2 {
            width: 100%;
        }
}

@media(max-width:1499px) {


    /* 전체 컨테이너 */
    .sermon_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 40px;
    }

    /* 큰 카드(sermon-left)  */
    .sermon-left {
        width: 100%;
    }

        .sermon-left .sermon_info {
            width: 100%;
            padding-top: 56%; /* 16:9 비율 유지 */
            background-size: cover;
            background-position: center;
            border-radius: 20px;
        }

    /* 작은 카드 2개 나란히 배치 */
    .sermon-right {
        display: flex;
        flex-wrap: nowrap;
        gap: 25px;
        width: 100%;
    }

        /* 각 작은 카드 박스 */
        .sermon-right > .sermon-r1,
        .sermon-right > .sermon-r2 {
            flex: 1;
            min-width: 0; /* flex 박스 수축 허용 */
        }

    /* 작은 카드 이미지 */
    .sermon-video img {
        width: 100%;
        height: auto;
        border-radius: 14px;
        object-fit: cover;
    }

    /* 작은 카드 텍스트 정리 */
    .sermon_info {
        margin-top: 10px;
    }
}

    /* ==========================================
   SECTION2 — NEWS 전체 레이아웃
========================================== */

    .news_container {
        display: flex;
        flex-wrap: nowrap;
        gap: 40px;
    }

    /* 왼쪽 두 개 아이콘 (온라인헌금/모바일헌금) */
    .news-left {
        display: flex;
        flex-direction: column;
        gap: 60px;
        align-items: center;
        justify-content: flex-start;
    }

    /* 오른쪽 카드 4개 묶음 */
    .news-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 35px;
        width: 100%;
    }

    #main1 > .container {
        width: 80%;
    }

    /* 각 카드 스타일 */
    /*.news-r11, .news-r12,
.news-r21, .news-r22 {
    background-size: cover;
    background-position: center;
    border-radius: 22px;
    padding: 30px;
    min-height: 290px;
    color: #333;
}*/


    /* ------------------------------
   📱 모바일 (≤ 768px)
-------------------------------- */
    @media (max-width: 768px) {
        #main1 > .container {
            width: 100%;
        }

        #main2 .news-r2 {
            margin-top: 70px;
        }
        #main0 .welcome_container.container {
            padding: 170px 0px 50px;
        }
        .mainContainer {
            padding: 0px 0;
        }
        .news_container {
            flex-direction: column;
            gap: 60px;
        }

        .news-left {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 30px;
        }

        #main2 {
            padding: 0px 0;
        }
            .news-left > div {
                /*width: 48%;*/
                text-align: center;
            }

        .news-right {
            grid-template-columns: 1fr; /* 1열로 */
            gap: 25px;
        }

        .news-r11, .news-r12,
        .news-r21, .news-r22 {
            min-height: 250px;
        }
    }


    /* ------------------------------
   📱 태블릿 (769px ~ 1024px)
-------------------------------- */
    @media (min-width: 769px) and (max-width: 1024px) {

        .news_container {
            flex-direction: column;
            align-items: center;
        }

        .news-left {
            flex-direction: row;
            gap: 40px;
        }

        .news-right {
            grid-template-columns: 1fr 1fr; /* 2×2 유지 */
            width: 100%;
            max-width: 900px;
            gap: 30px;
        }
    }


    /* ------------------------------
   💻 PC (≥ 1025px)
-------------------------------- */
    @media (min-width: 1025px) {

        .news_container {
            flex-direction: row;
        }

        .news-left {
            width: 25%;
        }

        .news-right {
            width: 75%;
        }
    }

/* ===== 헤더 기본 상태 (처음: 투명) ===== */
#topbar_m {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, top 0.3s ease-in-out;
}

    /* 메뉴 글자 기본 색 (투명 배경용) */
    #topbar_m #gnb > li > a {
        color: #ffffff;
        transition: color 0.3s ease;
    }

    /* ===== 스크롤 시 ===== */
    #topbar_m.is-scrolled {
        background: rgba(18, 37, 71, 0.4); /* 현재 사이트 톤에 맞춤 */
    }

        /* 스크롤 시 메뉴 글자 */
        /*#topbar_m.is-scrolled #gnb > li > a {
            color: #ffffff;
        }*/