/*메인*/
/*#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;}








#mainSlider {position: relative; opacity: 0.999;}
.intro_container{	width:1160px;}
.intro {    position: absolute;    bottom: 25%;    left: 50%;    z-index: 99;    transform: translateX(-50%);}
.intro-center >div {    width: 145px;    height: 145px;    border: 1px solid #ccc;     background: white;    padding: 25px; }
.intro-center >div p {    font-size: 16px;	font-weight:bold;	color:black;}

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

/*section1*/

#main1{overflow:visible;}

.sermon{
	padding: 0%;
	padding-bottom: 4%;
    background: url(../../../Layouts/sionsung_Layout/Images/2.sermon_bg_1.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
	
	
}
.sermon h2 {
    font-size: 45px;
    color: white;
    font-weight: bold;
    text-align: left;
}
.sermon h2 span {
    font-family: 'Noto Sans', serif; 
    color: white;
    font-weight: 500; 
}
.st-2 {        padding: 40px 15px;}
.st-2 >div {    text-align: left; display:flex; padding-top: 20px;}
/* .st-2 >div >a {    margin: 20px 20px 0 0; display: block; margin: 0px 10px;}  */
.st-1  {    transform: translateY(-100px);}

.sb-1 h2 {    padding: 0 15px; margin-bottom: 40px;}
.sb-2 >div >a {    text-align: left;    color: white; display:block; transform: translateY(-40px); width: 73%;}
.sb-2 >div >a p {    font-size: 16px;}
.sb-2 >div >a h4 {    font-size: 26px; line-height: 1.4; margin-bottom: 0;}
.sb-2 >div >a h4 span {    font-size: 18px; color:#8ba6e4; font-weight: bold; }
.sb-2 >div >a h4 img  {    float:right;     margin-top: 10px;}


 /*section2*/
 

.next{
	padding: 2% 5%;
    background: url(../../../Layouts/sionsung_Layout/Images/3.nxt_bg_1.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
	
	
}
.next h1 {
    font-size: 60px;
    color: white;
    font-weight: bold;
	letter-spacing: 2px;	
	line-height:1.5;
}
.next h1 span {
    font-family: 'Noto Sans', serif;  
    font-weight: 500;
    font-size: 38px;
    letter-spacing: 7px;
	color: white;
}
.next h2 {
    font-size: 32px;
    color: white; 
}
 
.nb-1 >div h4 {    
	color: black;    
	font-size: 24px; 
	font-weight: bold;
} 
.nb-1 >div >a {    
	display: block;
	/*border: 2px solid black;*/
	border-radius: 125px;
    background: rgba(255,255,255,1);
	padding: 25% 0;    
	/*height: 250px;    
	width: 250px; */
}
.nb-1 >div >a:hover {
    background: #337ab7;
    transition: 0.3s;
    color: #fff;
}
.nb-1 >div >a:hover h4 {
    color: #fff;
}
.nb-1 >div   {padding: 0 30px;}
.next-bottom  {    padding: 5%;}



 /*section3*/
 

.gallery{
	padding: 6% 0% 8%;
    background: url(../../../Layouts/sionsung_Layout/Images/4.gallery_bg_1.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
	
	
}

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

.gallery h1 {
	/*font-family: 'Noto Sans', serif;*/
	font-family: 'NanumSquare', sans-serif;
    font-size: 52px;
    font-weight: 600; 	
	line-height:1.5;
	color: #86a4df;
    font-weight: 500;    margin-top: 0;
	
}
.gallery h1 span {
     font-family: 'NanumSquare', sans-serif;
    font-size: 52px;
    color: white;	
}
.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;
    position: absolute;
    top: 47%;
    left: 50%; 
    transform: translate(-50%, -50%);
    color: white;
} 
.gallery .galleryList-slide a:hover >img{    filter: brightness(0.5); transition:all .5s linear;}
.gallery .galleryList-slide >a:hover >p{  visibility:visible;}
.gallery .galleryList-slide > a > img {
    width: 100%;
    height: 14vw;  
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;  
	 box-shadow: 5px 5px 10px 0 #111;
}

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


 .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: #ccc;
    border: 1px solid #ccc;
}

.swiper-pagination1 .slick-active {
    width: 40px;
    border-radius: 20px;
    background: white;
    border: 1px solid white;
}
.swiper-pagination1 >li >button{
    display:none;
}


@media(max-width:1499px) { 
.intro_container {    width: 990px;}
 
.nb-1.flex >div {    padding: 0 20px;}

.next h1 {    font-size: 55px;}
.next h2 {    font-size: 28px;}
.sermon h2 span {font-size: 40px;}
.gallery h1 span{font-size: 45px;}
.sb-2 >div >a p {    font-size: 15px;}
.gallery h2 {    font-size: 21px;}
}

@media(max-width:1430px) { 
	.intro_container {    width: 990px;}
	.pt-1 , .photo-left {    padding: 0;}
	.st-2 {    padding: 40px 20px;}
	.serbtn {
		position: absolute;
		left: 68% !important;
		bottom: 50% !important;
		z-index: 10;
	}
}

@media(max-width:1199px) { 
.intro_container {    width: 990px;}
.pt-1 , .photo-left {    padding: 0;}
.st-2 {    padding: 40px 20px;}
.serbtn {
    position: absolute;
    left: 68% !important;
    bottom: 50% !important;
	z-index: 10;
}


.nb-1 >div >a {      padding: 38% 0;}

.next h1 {    font-size: 45px;}
.next h2 {    font-size: 24px;}
.sermon h2 {    font-size: 37px; }
.sermon h2 span {font-size: 34px;}
.gallery h1 span{font-size: 40px;}
.sb-2 >div >a p {    font-size: 13px;}
.gallery h2 {    font-size: 18px;}
.nb-1 >div h4{font-size: 23px;}

}
@media(max-width:991px) { 
	.intro_container {    width: 690px;}
	.intro-center >div p{font-size:15px;}
	.intro-center >div {    width: 14%;    height: 108px;      padding: 6px;}
	.st-2 >div >a {
		margin: 0 2px;
        min-height: 60px;
        min-width: 60px;
		
	} 
	.st-1 {    transform: translateY(-10%);}
	.st-2 {    padding: 25px  20px;}
	.nb-1 >div >a {    padding: 31% 0;}
	
	.serbtn {
    position: absolute;
    left: 68% !important;
    bottom: 41% !important;
	z-index: 10;
}
	.next h1 , .gallery h1 span{    font-size: 35px;}
	.next h2 {    font-size: 21px;}
	.sermon h2 {    font-size: 32px; }
	.sermon h2 span {font-size: 30px;}
	.gallery h1 span{font-size: 30px;} 
	.gallery h2 {    font-size: 17px; }
	.gallery h1 {     font-size: 45px;    line-height: 1.2;}

}
@media(max-width:767px) {
    /*모바일 플렉스*/ 
	#dimodePage {    padding-top: 80px;}
	.intro-center {display:none;}
	
	.sb-2 >div {    max-width: 480px;}
	.sb-2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
	} 
	.nb-1.flex >div {    padding: 0 5px;}

	.serbtn {
    position: absolute;
    left: 68% !important;
    bottom: 45% !important;
	z-index: 10;
}
	.photo_container.flex {    flex-direction: column;}
	.gallery .galleryList-slide > a > img {     height: 43vw;}
	
	.next h1 , .gallery h1 span{    font-size: 30px;}
	.next h2, .gallery h2, .nb-1 >div h4, .sb-2 >div >a h4  {    font-size: 17px;}
	.sermon h2 {    font-size: 30px; }
	.sermon h2 span {font-size: 25px;}
	.gallery h1 span{font-size: 25px;}  
	.gallery h1 {     font-size: 40px; }

    /**/ 
}

@media(max-width:567px) {
	.st-1 {    transform: translateY(30px);}
     .sermon-top  {    display: flex;    flex-direction: column;}
	 .nb-1.flex {    flex-wrap: wrap;}
	 .photo_container {    transform: translateX(30px);}
	 .nb-1.flex >div {    padding: 5px ;}
	 
	 .next h1, .sermon h2 {    font-size: 26px;}
	 .sermon h2 span {font-size: 24px;}
	 .next h1 span{    font-size: 20px;     letter-spacing: 4px;}
	.next h2 , .gallery h1{    font-size: 18px; word-break:keep-all;}
	.sb-1 h2 {     margin-bottom: 15px;}
	.gallery h1 {     line-height: 1.5;}
	.photo-right  {    padding: 0;}
	.live-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    width: 60px;
    width: 90px;
    height: 60%;

    background-color: #6f8fcf;   /* 파란 배경 */
    border-radius: 14px;

    text-decoration: none;
    transition: all 0.2s ease;
}
.live-btn2 {

    /* width: 90px; */
    /* height: 100%; */
	    min-height: 60px !important;
        min-width: 60px!important;
    margin: 5px;
    border: 3px solid #ffffff;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
}

	
}
.serbtn {
    position: absolute;
    left: 42%;
    bottom: 10%;
}
.live-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    width: 70px;
	    margin: 5px;
    /* height: 60%; */

    background-color: #6f8fcf;   /* 파란 배경 */
    border-radius: 14px;

    text-decoration: none;
    transition: all 0.2s ease;
}

/* 이미지 크기 */
.live-btn img {
    width: 36px;
    height: auto;
}

/* hover 효과 */
.live-btn:hover {
    background-color: #4f73c0;
    transform: translateY(-2px);
}

.live-btn2 {

    /* width: 90px; */
    /* height: 100%; */
	    min-height: 70px;
        min-width: 70px;
    margin: 5px;
    border: 3px solid #ffffff;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
}

/* =========================================
   1430px 이하부터 세로 구조로 변경
========================================= */
@media (max-width: 1430px) {

    .sermon-top {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .sermon-top .st-1,
    .sermon-top .st-2 {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    /* 이미지가 위에 오도록 */
    .sermon-top .st-1 {
        order: 1;
    }

    .sermon-top .st-2 {
        order: 2;
        padding: 0 20px;
    }

    /* 이미지 자연스럽게 보이게 */
    .sermon-top .st-1 img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}
/* =========================================
   1430px 이하 이미지 비율 조정
========================================= */
@media (max-width: 1430px){

    .sermon-top .st-1 img {
        width: 100%;
        height: 420px;          /* 이미지 높이 제한 */
        object-fit: cover;
        border-radius: 12px;
    }

    /* 텍스트 영역 상단 여백 */
    .sermon-top .st-2 {
        margin-top: 20px;
        padding: 0 20px 40px;
    }

    /* LIVE + 버튼 그룹 간격 */
    .st-2 > div {
        margin-top: 30px;
        gap: 40px;
		justify-content: center;
    }

    /* 버튼 균형 */
    .live-btn,
    .live-wrap {
        margin-bottom: 10px;
    }
}

/* =========================================
   모바일 Sermon 영역 크기 정리
========================================= */
@media (max-width: 767px){

    /* 전체 좌우 여백 */
    .sermon_container {
        padding: 0 20px;
    }

    /* 이미지 카드 크기 */
    .sermon-top .st-1 img {
        width: 100%;
        height: 200px;        /* ← 여기로 크기 안정 */
        object-fit: cover;
        border-radius: 18px;
    }

    /* 플레이 버튼 크기 */
    .serbtn {
        width: 70px;
        height: 70px;
    }

    /* 타이틀 간격 */
    .sermon-top .st-2 {
        margin-top: 25px;
    }

    .st-2 h2 {
        font-size: 26px;
        line-height: 1.3;
    }

    /* 버튼들 정렬 */
    .st-2 > div {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 20px;
    }

    .live-wrap,
    .live-btn {
        flex: 0 0 calc(33.333% - 10px);
        text-align: center;
    }

}

/* =========================================
   모바일 설교 버튼 1줄 유지
========================================= */
@media (max-width: 767px){

    .st-2 > div {
        flex-wrap: nowrap;              /* 줄바꿈 방지 */
        overflow-x: auto;               /* 가로 스크롤 허용 */
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding-bottom: 10px;
    }

    .live-wrap,
    .live-btn {
        flex: 0 0 auto;                 /* 자동 줄어들지 않게 */
    }

    /* 스크롤바 숨기기 */
    .st-2 > div::-webkit-scrollbar {
        display: none;
    }
}
/* =========================================
   모바일 설교 버튼 반응형 비율 축소
========================================= */
@media (max-width: 767px){

    /* 버튼 전체를 한 줄 유지 */
    .st-2 > div {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
		
    }

    /* LIVE 버튼 */
    .live-btn img {
        width: 18vw;          /* 화면 기준으로 줄어듦 */
        max-width: 40px;
        min-width: 25px;
    }

    /* 일반 버튼 박스 */
   

    /* 버튼 안 텍스트 줄간격 */
    .live-btn2 span {
        line-height: 1.2;
    }
}
@media (max-width: 767px){

    .st-2 > div {
        display: flex;
        flex-wrap: nowrap;
        gap: 2%;
    }

    .live-wrap,
    .live-btn {
        flex: 1;
        display: flex;
		aspect-ratio: 1 / 1;
        justify-content: center;
		width: 100%;
    }

    /* LIVE 버튼 */
    .live-btn img {
        width: 70%;           /* 100% → 80% 로 줄임 */
        height: auto;
    }

    /* 일반 버튼 */
    .live-wrap .live-btn2 {
        width: 100%;           /* 살짝 안쪽으로 줄임 */
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: clamp(11px, 2.6vw, 14px);  /* 글자 살짝 축소 */
        border-width: 1.5px;                  /* 테두리 얇게 */
        border-radius: 16px;
    }

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

    .st-2 > div {
        display: flex;
        flex-wrap: nowrap;
        gap: 2%;
    }

    /* 모든 버튼 동일 flex */
    .live-wrap,
    .live-btn {
        flex: 1;
        display: flex;
    }

    /* LIVE 버튼 박스 강제 통일 */
    .live-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        background: #6f8fcf;
    }

    /* LIVE 안 이미지 제거하고 크기 고정 */
    .live-btn img {
        width: 35%;
        height: auto;
    }

    /* 일반 버튼 */
    .live-wrap .live-btn2 {
        width: 100%;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(11px, 2.5vw, 14px);
        border-radius: 16px;
    }
}
@media (max-width: 767px){

    .st-2 > div {
        display: flex;
        flex-wrap: nowrap;
        gap: 0%;
    }

    /* 모든 버튼 동일 비율 */
    .live-wrap,
    .live-btn {
        flex: 1;
        display: flex;
    }

    /* LIVE + 일반 버튼 동일 박스 모델 */
    .live-btn,
    .live-wrap .live-btn2 {

        width: 100%;
        aspect-ratio: 1 / 1;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;   /* 🔥 중요 */
        padding: 0;               /* 🔥 패딩 제거 */
        margin: 0;

        border-radius: 18px;
    }

    /* LIVE 배경 */
    .live-btn {
        background: #6f8fcf;
        border: none;
		        max-height: 60px !important;
        max-width: 60px !important;
    }

    /* 일반 버튼 */
    .live-wrap .live-btn2 {
        border: 2px solid #fff;
        font-size: clamp(11px, 2.5vw, 14px);
    }

    /* LIVE 아이콘 */
    .live-btn img {
        width: 38%;
        height: auto;
    }
}