﻿.direct-popup .visible-popups > .each { max-width:700px!important; }
#fp-nav.right { right:25px; }
.fullpage-mouse { position: fixed; bottom: 7%; z-index: 50; left: 50%; display: block; transform: translate(-50%, 0); }
.fullpage-mouse img { animation: MoveUpDown 1.2s ease-in-out infinite; position: relative; z-index: 10; }
@keyframes MoveUpDown { 0%, 100% { transform: translateY(0rem); } 50% { transform: translateY(1rem);}}



.main-title{  margin:30px 0 0;  font-weight:bold;  }
.containerwide{width: 100%;}

#fp-nav { background: transparent; z-index:0!important;  top:50%!important; display:inline-block; height:15%;}
#fp-nav ul li, .fp-slidesNav ul li { margin:25px 7px; }
#fp-nav ul li:last-child { display:none; }
#fp-nav ul li .fp-tooltip { color:#333!important; opacity:1!important; width:115px!important; text-align:left; font-size:16px; top:-5px;     transform: skew(-0.05deg); }
#fp-nav ul li.white .fp-tooltip { color:#fff!important; }
#fp-nav ul li.white a span, .fp-slidesNav ul li.white a span { background: #fff; }
#fp-nav ul li.white a.active { border: 1px solid #fff; }
#fp-nav ul li a.active { border: 1px solid #000; text-decoration: none; padding: 15px; border-radius: 100%; top: -10px; left: -9px; position:relative; transition:.3s all; }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { width:4px; height:4px; margin: -2px 0 0 -2px; }




#section-1 { position:relative; }
#section-1 > div > img:first-child { width:100%; height:100%; }
#section-1 .text-center {  position:absolute; top:50%; left:50% ; transform:translate(-50%, -50%); }
#slideText { -webkit-animation: zoomin 9s 1; animation: zoomin 9S 1; }
@-webkit-keyframes zoomin { 0% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); }}
.dimode-slider .each-img{height:100%;     margin: 0;}
.dimode-slider .each-img img {    /*object-fit: fill; */   height: 100%; object-fit: cover;     height: 100vh;
    width: 100vw; }
#section-1 #main {    height: inherit;    overflow: hidden;}


#section-2 { color:#fff; position:relative; background:url(../Images/main/2_welcome_bg_2.jpg) no-repeat; background-position:center; /*background-size:100% 100%;*/background-size:cover; }
#section-2 h1 {  margin:0;  margin:2rem  0; }
 
#section-2 h2 {  margin:0;    }
.section-2-box { margin-top:5rem; }
.section-2-box a { color:#fff; text-decoration:none; display:inline-block; position:relative; top:0; }
.section-2-box a:hover { top:-15px; transition:.3s top; } 
.section-2-box p { margin: 1rem 0; font-weight:bold; } 
.section-2-box .row  >div a >div {
    background: white;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px; 
    border-radius: 79px;
}
.section-2-box .row  {
    display: flex;
    justify-content: space-between;
}




#section-3 { position:relative; background:url(../Images/main/3_sermon_bg.jpg) no-repeat; background-position:center; background-size:100% 100%; }
#section-3 a { text-decoration:none; } 
#section-3 > .fp-tableCell{     display: flex;    flex-direction: column;    justify-content: flex-end;} 
#section-3  .fp-tableCell .containerwide .row{    display: flex;     align-items: center;       justify-content: flex-start; gap: 105px;} 
#section-3 .sermon-mainbox{       gap: 2rem; display: flex;     align-items: center;    justify-content: center;} 
 
 
#section-3 .section3-desc h4{    margin: 1.5rem 0;  font-weight: bold;}
#section-3 .section3-desc p {    margin-bottom: 2rem ;   font-weight: bold;  text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; width: 100%; }
#section-3 .section3-desc span {   transform: skew(-0.05deg);   }
 
#section-3 .sermon-listbox .itembox1{background:url(../Images/main/3_cont_bg_1_2.png) no-repeat;}
#section-3 .sermon-listbox .itembox2{background:url(../Images/main/3_cont_bg_2_2.png) no-repeat;}
#section-3 .sermon-listbox .itembox3{background:url(../Images/main/3_cont_bg_3_2.png) no-repeat;}
#section-3 .sermon-listbox .itembox4{background:url(../Images/main/3_cont_bg_4_2.png) no-repeat;}
#section-3 .sermon-listbox .sermon-itembox{background-size:cover;     aspect-ratio: 13 / 12;    width: 264px;    display: flex;    align-items: center;    justify-content: center;    flex-direction: column;    color: white;    border-radius: 15px;}
#section-3 .sermon-listbox {    display: grid;    grid: 1fr 1fr;    grid-template-columns: 1fr 1fr;    row-gap: 22px;    column-gap: 25px;}
#section-3 .sermon-listbox .sermon-itembox a {color:white;     display: flex; transition:.3s all;     flex-direction: column;    align-items: center;    gap: 5px;}
#section-3 .sermon-listbox .sermon-itembox a  div  { gap: 5px; display: flex; align-items: center;}	
#section-3 .sermon-listbox .sermon-itembox a h4 {    display: flex;    align-items: center;    gap: 5px;}


#section-3 .sermon-listbox .sermon-itembox a:hover div  {	-webkit-animation: jello-horizontal 0.9s both;	        animation: jello-horizontal 0.9s both;}	
#section-3  .section3-box  {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.section3-button  {
    display: flex; 
    gap: 1rem;
}
.section3-button a {
    background: transparent;
    padding: 0.7rem 1.2rem;
    border-radius: 35px;
    color: #123a27;
    border: 1px solid #123a27;
    display: flex; 
    align-items: center;
    width: 50%;
    justify-content: space-between;
}






#section-4 { position:relative; background:url(../../../Layouts/sdfc_Layout/Images/4_notice_bg.png) no-repeat;    background: white; background-position:center; background-size:100% 100%; }
#section-4 a { text-decoration:none; }  
#section-4 .containerwide{ margin-top: 130px; }



#section-4 .row >div { 
    align-items: center;
    justify-content: space-between;    transform: translateX(calc(12.5vw ));
}
 
#section-4 .noContainer{position: relative;  }  
#section-4 .slick-track{
    display: flex;
    align-items: center;
    justify-content: space-between;    transform: translateX(calc(-8vw + 15px));
}


#section-4 .album-bottom.flex {    width:  1450px;}  
#section-4 .galleryList-slide{padding:15px;}
#section-4 .galleryList-slide >a{  display:block;     position: relative; } 
#section-4 .galleryList-slide >a:active{  border:0px; }  
/* #section-4 .galleryList-slide >a:hover > img {    filter: brightness(0.4);} */
#section-4 .galleryList-slide >a:hover .overlay{  opacity:1;  } 


   
#section-4 .galleryList-slide > a > img {
    width: 100%;
    aspect-ratio: 44/35; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;  
    object-fit: cover;
	transition: all .2s linear;
}

 
 
#section-4 .slick-dots li button {
  width: 10px;  
  background-color: #418461; /* 비활성 점 색상 */
   opacity: 0.5;
      aspect-ratio: 1;
    border: none;
    border-radius: 50%;
}

#section-4 .slick-dots li.slick-active button {
  opacity: 1;
}

/* 점 간격 조정 */
#section-4 .slick-dots li {
  margin: 0 5px;
}




#section-4 .slick-dots{    cursor: pointer; 
    top: calc(-35px - 33px);
    position: absolute;
    z-index: 99;
    display: flex ; 
    align-items: center; 
    justify-content: center;}



#section-4 .slick-arrow{    cursor: pointer; 
    top: calc(-35px - 33px);
    position: absolute;
    z-index: 99;
    display: flex ;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    background: #418461;
    aspect-ratio: 1;
    width: 50px; 
    border-radius: 50px;
    justify-content: center;}
#section-4 .slick-prev{  right:calc(25vw + 50px + 1rem + 30px);}
#section-4 .slick-next {   right:calc(25vw + 30px);  }
#section-4 .slick-list{width:100%; } 


#section-4  .row{     overflow: visible;     position: relative;    top: 0px;     }
#section-4  .overlay {
    position: absolute; 
    bottom: 0;
    left: 0;
    display: flex; transition: all .2s linear;
    flex-direction: column;
    align-items: flex-start; color:white;
	opacity:0; width: 100%;     background: #00000075; padding: 1rem;
}
#section-4  .overlay  hr{    margin: 0;    border-top: 1px solid white;    width: 30%;}
#section-4   .overlay-info {    padding: 15px 10px; }
#section-4   .overlay-text {    padding: 5px 10px; }
#section-4  .overlay-date {    padding: 5px 10px; }
#section-4  .overlay img  {    margin: 0 auto;}
 #section-4 .image-link:hover .overlay 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;}
 
#section-4 .view-more {
  display: inline-block; 
  color: #fff;
  font-size: 17px;
  border: 1px solid #123a27;
  text-decoration: none;
  overflow: hidden;
  vertical-align: middle;
  background: #123a27;
  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;  
    padding: 0.7rem 1.5rem;
    border-radius: 35px;
}

#section-4 .view-more:hover {
  background: #fff;
  color: #123a27;
}

#section-4 .vm{padding-top:3rem;}
 





/* .footer { background:#fff; } */
/* .footer ul { padding:20px 0; border-bottom:1px solid #cecece; } */
/* .footer li { display:inline-block; font-size:17px; color:#989898; border-right:1px solid #cecece; } */
/* .footer li:last-child { border-right:none; } */
/* .footer li a { color:#989898; text-decoration:none; padding:0 50px; } */
/* .footer li a:hover { color:#70AE62; transition:.3s color; } */
/* .footer .footer-bottom { font-size:15px; padding:40px 0; color:#989898; transform: skew(-0.05deg);} */
/* .footer .footer-bottom a { text-decoration:none; color:#989898; } */




@media (max-width:1799px) { 
	
	#section-3 .fp-tableCell .containerwide .row {    margin-right: 125px;     gap: 3rem; width: 100%; height: 80vh;}
	#section-3 .sermon-listbox .sermon-itembox {     width: 100%;}
	
	#section-3 .sermon-listbox {     margin-right: 6rem;}
}
 


@media (min-width:1200px) and (max-width:1499px) {
    #section-2 .section2-desc { padding:25px 15px; }
	.section-image >img { min-width:360px;     max-height: 200px;}
	
	.section-2-box .container {    width: calc(100vw - 440px);}
	
	.section-2-box .row >div a >div {     width: 7rem;}
	.section-2-box p{font-size: 1rem;}
	.section-2-box {    margin-top: 3rem;}
	  
	#section-3 .sermon-mainbox {     width: 60%;}
	#section-3 .sermon-listbox {     width: calc(100vw - 70%); bottom: 20%;
        position: relative;         margin-right: 8rem;}
	#section-3 .fp-tableCell .containerwide .row {         gap: 1rem;}
	#section-3 .fp-tableCell .containerwide .row { 
		align-items: flex-end;
	}
	
	.main_sermon {
		width: 40%;padding-bottom: 18%;
	}
	.section3-button a { 
		padding: 0.5rem;
		font-size: 0.7rem;
	}
	.section3-button { 
		gap: 0.5rem;
	}
	
	#section-3 .sermon-listbox { 
		row-gap: 0.5rem;
		column-gap: 0.5rem;
	}




}

@media (min-width:993px) and (max-width:1199px) {
   
    #section-2 .section2-desc .section2-bible { display:none; }
    #section-2 .section2-desc .section2-date { float:left; }
	.section-image >img { min-width:293.33px; max-height: 165px;}
	
  
    #section-4 li div.section4-box-cont p { width:700px; }
    .footer li a { padding:0 30px; }
	
	
	
	
	.section-2-box .container {    width: calc(100vw - 440px);}
	.section-2-box .row >div a >div {     width: 6rem;}
	.section-2-box p{font-size: 1rem;}
	.section-2-box {    margin-top: 3rem;}
	
	
	#section-3 .sermon-mainbox {
		gap: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column-reverse;        width: 45%;
	}
	.sermon-mainbox >div {		height: 40vh;	}
	.section3-button a { 
		padding: 0.5rem;
		font-size: 0.7rem;
	}
	.section3-button { 
		gap: 0.5rem;
	}
	    #section-3 .sermon-mainbox {
        gap: 0rem;}
	
	#section-3 .sermon-listbox { 
		row-gap: 0.5rem;
		column-gap: 0.5rem;
	}
	.pastor_img img {
		width: 60%;
	}
	
	.sermon-mainbox >div { 
        text-align: right;
    }
	    #section-3 .sermon-listbox {         width: 50%;   margin-right: 8rem;  }
	    #section-3 .fp-tableCell .containerwide .row {         gap: 2rem;}
	 #section-3 .section3-box {     gap: 1rem;}   
}

@media (min-width:768px) and (max-width:992px) {
	#fp-nav { display:none!important; }
    #slideText { max-width:300px; } 
    #section-2 .section2-desc .section2-bible { display:none; }
    #section-2 .section2-desc .section2-date { float:left; }
    #section-2 .section2-desc { padding:25px 20px; }
	.section-image >img { min-width:220px; max-height: 123px;}
	
    
    .section-3-box { margin-top:50px; } 
    #section-4 li div.section4-box-cont p {   width:500px; }
    .footer li a { padding:0 15px; }
	
	
	.section-2-box .container {    width: calc(100vw - 50px);}
	.section-2-box .row >div a >div {     width: 7rem;}
	.section-2-box p{font-size: 1rem;}
	.section-2-box {    margin-top: 3rem;}
	
	.pastor_img {    display: none;}
	
	#section-3 > .fp-tableCell{    justify-content: center; gap: 2rem;}
	#section-3 .fp-tableCell .containerwide .row {
        margin-right: 125px;
        gap: 3rem;
        width: 100%;
        height: auto;
        justify-content: space-between;
    }
	#section-3 .sermon-listbox {
        margin-right: 0;
    }
	
	.section3-button a { 
		padding: 0.5rem;
		font-size: 0.7rem;
	}
	#section-4 .slick-arrow {     top: calc(-35px - 50px);}
	
	
}

@media (max-width: 767px) {
    #section-2 h3 {   }
    #section-2 h1 {   margin:15px;          word-break: keep-all;}
    #section-2 .view-more { padding:10px 40px; margin-bottom:15px; }
    #section-2 .section2-desc p {   margin-bottom:5px; }
    #section-2 .section-image { display:none; }
    #section-2 .section2-desc .section2-bible { display:none; }
    #section-2 .section2-desc .section2-date { float:left; }
    #section-2 .section2-desc { padding:10px 15px; }
    #section-2 .section2-box { margin-top:15px; }
    #section-2 .view-more {   }
    #section-3 h3 {   }
    #section-3 h1 {   margin:15px; }
    #section-3 h2 {  }
    .section-3-box span { display:none; }
    .section-3-box { margin-top:30px; }
    .section-3-box img { max-width:90px; }
    .section-3-box p {  margin:10px 0;}
    #section-4 h3 {   }
    #section-4 h1 { margin:15px; }
    #section-4 .view-more { padding:10px 40px; margin-bottom:10px;  }
    #section-4 ul { padding:0 15px; }
    #section-4 li img { display:none; }
    #section-4 li div.section4-box-cont { margin-top:0; margin-left:15px; width:75%; }
    #section-4 li div.section4-box-cont p {  width:100%; line-height:26px; transform: skew(-0.05deg); }
    #section-4 li div.section4-box-date p {   transform: skew(-0.05deg);}
    #section-4 li div.section4-box-date p strong {  }
    #section-4 li { padding:0px; }
    .footer li {  transform: skew(-0.05deg); margin:5px 0; }
    .footer ul { padding:10px 0; }
    .footer li a { padding:0 15px; }
    .footer .footer-bottom { font-size: 14px; padding: 15px 15px; color: #989898; transform: skew(-0.05deg); }
    #section-2, #section-3, #section-4 { background-size:auto 100%; }
    #fp-nav { display:none; }
	
	
	.section-2-box .container {    width: calc(100vw - 50px);}
	.section-2-box .row >div a >div {        width: 100%;    }
	.section-2-box p{font-size: 1rem; margin: 0.5rem 0;}
	.section-2-box {    margin-top: 3rem;}
	.section-2-box a img{max-width: 4rem;}
	 .section-2-box .row >div {        width: 20%;     }
	.section-2-box a { 		width: 100%;	}
	
	
	#section-3 .fp-tableCell .containerwide .row {
   
        gap: 1rem;
	}
	    #section-3 .sermon-listbox {
        margin-right: 0;
    }
	#section-3 .sermon-listbox { 
		row-gap: 0.5rem;
		column-gap: 0.5rem;
	} 
	.pastor_img {    display: none;}
	
	#section-3 > .fp-tableCell{    justify-content: center; gap: 2rem;}
	#section-3 .fp-tableCell .containerwide .row {
        margin-right: 125px;
        gap: 3rem;
        width: 100%;
        height: auto;
        justify-content: space-between;
    }
	#section-3 .sermon-listbox {
        margin-right: 0;
    }
	
	.section3-button a { 
		padding: 0.5rem;
		font-size: 0.7rem;
	}
	#section-4 .slick-arrow {     top: calc(-35px - 50px);}
	#section-3 .fp-tableCell .containerwide .row { 
		flex-direction: column;         gap: 2rem; margin-right:0;
	}
	#section-3 .section3-box{gap: 2rem;}
	#section-3 .sermon-listbox {     grid-template-columns: 1fr 1fr 1fr 1fr;	}
	
	#section-3 .sermon-listbox .sermon-itembox {     padding: 1rem;	}
	#section-3 .sermon-mainbox{width:100%;}
	.main_sermon {
		width: 100%; max-width: 500px;
	}
	
}


@media (max-width: 467px) {
     
	.section-2-box .row {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.section-2-box .row >div{
		width: 33%; padding-top:1rem;
	}
	
	#section-3 .sermon-listbox {     grid-template-columns: 1fr 1fr  ;	padding-top: 2rem;}
	
	.main_sermon {
		width: 100%; max-width: 300px;
	}
	#section-3 .fp-tableCell .containerwide .row { 
        gap: 0rem;       margin: 0rem;
    }
	
	#section-3 > .fp-tableCell { 
        gap: 0rem;
    }
	
	#section-4 .slick-next {
		right: calc(25vw + 0px);
	}
	#section-4 .slick-prev {
		right: calc(25vw + 50px + 1rem + 0px);
	}
	
	#section-4 .galleryList-slide {
		padding: 5px;
	}
	
}