﻿


/* common */



/*메인*/
#dimodePage{display: block!important;     margin-top: 0;} 

div#gnb-wrap.black {    background: #5d5249e0;}



@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, a:focus {
    color: black;
    text-decoration: none;
outline: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;
}

.mainContainer {
    width: 100%;
    margin: 0 auto;
    padding: 90px 0;
    box-sizing: border-box;
    background-color: #ffffff;
	word-break:keep-all;
}


/*슬라이더*/
#main  {
    /*margin-top:95px;*/
}
#main .dimode-slider .slider-dots {
    bottom: 50px;
}
    #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;
}

#main .dimode-slider .move-btn {
    background: none !important;
    top: 50%!important;
	transform: translateY(-50%);
	    max-width: 6vw;
	margin-top: 0;
}
.next-btn {
    right: 5% !important;
    /* display: none; */
}
.prev-btn {
    left: 5% !important;
    /* display: none; */
}

.each-img img {
    width: 100%;
}

.icon {
      display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;

}

#mainSlider .slider .move-btn{display:none;}


.icon .section6-img  {
    width: 120px;
    aspect-ratio: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;    border-radius: 89px;
}  
.icon >div a p{
    margin-top:15px;    color: #445d49;
}  


.main_title{padding: 0 0 70px; line-height: 1;}





/*뉴섹션1 */

.welcomenew {
    padding: 110px  0;
    background: #eeeae4; 
     /* background: linear-gradient(to bottom, transparent 50%, white 50%), #e6e7e8 ;   */
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%; 
} 

.welcomenew_container  {    max-width: 1170px;}
 
.welcomenew .welcome-top   {       justify-content: space-between; display:flex; width:100%;      aspect-ratio: 117 / 60;
    padding: 50px 35px;
    margin: 10px 0;
    background: white; } 


.welcomenew .welcome-top .welcome-t-left{    display:flex;      width: calc(575 / 1170 * 100%); flex-direction: column;
    align-items: flex-start;    gap: 120px; } 
.welcomenew .welcome-top .welcome-t-left a{padding:0;}
.welcomenew .welcome-top .welcome-t-left .welcome-t-left-info  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.welcomenew .welcome-top .welcome-t-left .welcome-t-left-info span  {     color:#888888;}
 


.welcomenew .welcome-top .welcome-t-right{    display:flex;      width: calc(410 / 1170 * 100%);  }  
.welcomenew .welcome-bottom  >div {        display: flex;    justify-content: space-between; margin:30px 0 0;  }  
.welcomenew .welcome-bottom  >div >a:hover img {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
.welcomenew .welcome-bottom  >div >a h4 {
	color: #000; margin-bottom:20px; margin-top: 30px;
}
.welcomenew .welcome-bottom  >div >a p {
	color: #00000099;
}


 

/*섹션1*/

.sermon {
    padding: 130px  0;
    background: #ffff;
	
    /* background: linear-gradient(to bottom, transparent 25%, white 25%), #f5fafb ; */
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%; 
} 

.sermon_container  {    max-width: 1170px;}
 
.sermon .sermon-top   {    display:flex;   } 
.sermon .sermon-top h4  {    margin: 0;   } 
.sermon  .sermon-top >div {
    display: flex;  width: 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.sermon .sermon_info {
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
	padding: 25px 0 15px;
}
 
.sermon .sermon_img  >div span:nth-of-type(2) {
     font-weight: bold;
} 
.sermon .sermon_img  >div  hr {
    width: 25px;
    text-align: left;
    margin: 0;
}
.sermon .sermon_img  >div   {
    display: flex;
    flex-direction: column; gap: 15px; filter: grayscale(50%);
	aspect-ratio: 16/9;
    background-size: cover;
    padding: 50px 35px;
    color: white;   transition: all .3s linear;
} 
.sermon .sermon_img:hover  >div   {
      filter: grayscale(0%);
}

.sermon .sermon-more {
    transition: all .3s linear; font-weight:bold;
}
.sermon .sermon-more:hover {
    transition: all .3s linear; color:#bba28e;
}

.sermon .sermon-bottom  { 
    justify-content: center;
	display:flex;
	margin-top:60px;
}
.sermon .sermon-bottom a { 
    display: flex;
    padding: 15px 35px;
    border: 1px solid black;
    width: max-content;align-items: center;
	    justify-content: space-between;
    gap: 10px; transition: all .2s linear; font-weight:bold;
    font-weight: bold;
}

.sermon .sermon-bottom a:hover{background:#000; color:white;}



/*섹션2*/

.welcome {
    padding: 110px  0;
    background: #ffff; 
     background: linear-gradient(to bottom, transparent 50%, white 50%), #e6e7e8 ;  
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%; 
} 

.welcome_container  {    max-width: 1170px;}
 
.welcome .welcome-top   {       justify-content: space-between; display:flex; width:100%;      aspect-ratio: 117 / 60;
    padding: 50px 35px;
    margin: 10px 0;
    background: white; } 


.welcome .welcome-top .welcome-t-left{    display:flex;      width: calc(575 / 1170 * 100%); flex-direction: column;
    align-items: flex-start;    gap: 120px; } 
.welcome .welcome-top .welcome-t-left a{padding:0;}
.welcome .welcome-top .welcome-t-left .welcome-t-left-info  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.welcome .welcome-top .welcome-t-left .welcome-t-left-info span  {     color:#888888;}
 


.welcome .welcome-top .welcome-t-right{    display:flex;      width: calc(410 / 1170 * 100%);  }  
.welcome .welcome-bottom  >div {        display: flex;    justify-content: space-around; margin:20px 0 ;  }  
.welcome .welcome-bottom  >div >a:hover img {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
.welcome .welcome-bottom  >div >a h4 {
	color: #3d3d3d;
}




/*섹션3*/

.next {
    padding: 110px  0;
    background: #ffff; 
     background: url(../Images/main/4_bg_bg.jpg) no-repeat;   background-size: contain;
    background-position:  top;
    background-repeat: no-repeat; 
}
.next_title{color:white;    padding-bottom: 25px;} 
.next_more{color:white;   font-weight:bold;  padding-bottom: 60px;} 
.next_container  {    max-width: 1170px;}
.ng-bottom {
    width: 100%;
} 
.next .next-bottom   {       justify-content: space-between; display:flex; width:100%;      aspect-ratio: 117 / 51;
    padding: 50px 45px;
    margin: 10px 0;
    background: white; } 


.next .next-bottom .next-box {     word-break: keep-all;      position: relative;  display: flex;    flex-direction: row;    align-items: center;    } 
.next .next-bottom .next-box .ngs {     display: flex;      flex-direction: row;    align-items: center;  justify-content: space-between; } 
.next .next-bottom .next-box  .ngs-left{     display: flex;
    width: calc(410 / 1080 * 100%);
    background: #e6e7e8;
    align-items: flex-start;
    justify-content: center;
    aspect-ratio: 1;
    padding-top: 25px;}
.next .next-bottom .next-box  .ngs-right{ display:flex;       flex-direction: column;
    align-items: flex-start;   width: calc(565 / 1080 * 100%);     gap: 60px; }
 
.next .next-bottom .next-box  .ngs-right .ngs-right-info-title{font-weight:bold;}
.next .next-bottom .next-box  .ngs-right-info  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.next .next-bottom .next-box  .ngs-title{margin-top:25px;}

.next .slick-arrow {    position: absolute; cursor: pointer;}
.next  .slick-next1.slick-arrow {    right: -100px;}  
.next  .slick-prev1.slick-arrow {    left: -100px;}

.next .slick-arrow img{filter: opacity(0.5); 	transition:all 0.3s linear;}
.next .slick-arrow:hover img{filter: opacity(1); 
	 }

.ngs-more {
  transition: opacity 0.4s linear;
}
.ngs-more.fade {
  opacity: 0;
} 




/*섹션4*/

.grow {
    padding: 110px  0;
    background: #ffff; 
     background: url(../Images/main/5_bg.jpg) no-repeat;   background-size: cover;
    background-position:  top;
    background-repeat: no-repeat; 
}
.grow_container  {      max-width: 1360px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;} 


.grow .grow_container >div { 
  color:#fff;
  text-align:center; width: calc( 640 / 1360 * 100%);
}
.fostering__title, .mission__title {
    margin: 1rem 0 2rem;
}


 
.grow   .fostering__hero, .grow   .mission__hero{
  position:relative;
  max-width:640px;
  margin:0 auto 25px;
  overflow:hidden;
  border-radius:6px;
}
.grow  .fostering__hero img, .grow   .mission__hero img{
  width:100%; 
  object-fit:cover;
  display:block;
  filter:grayscale(30%);  
}
 
.grow  .fostering__label, .grow  .mission__label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:14px;
  letter-spacing:.2em;
  font-weight:700;
}
.grow   .fostering__label::after, .grow   .mission__label::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:1px;
  height:28px;
  background:#fff;
  transform:translateX(-50%);
  opacity:.9;
} 
  
.grow   .fostering__cards{
  display:flex; 
  gap:20px;
  max-width:640px;
  margin:0 auto;     justify-content: space-between;
height:160px;
  
} 
.grow   .fostering-card{
      display: flex;
    border-radius: 4px;
    transition: transform .2s 
ease, box-shadow .2s 
ease, background .2s;
    justify-content: center;
    align-items: center;
    flex-direction: column;   padding: 2rem;width: calc(50% - 5px);
}
.grow  .fostering-card__title{
  margin:0 0 10px;  
}
.grow  .fostering-card__desc{
  margin:0;  
  opacity:.95;
} 
.grow  .fostering-card--solid{
  background:#111;
  color:#fff;
}
.grow  .fostering-card--solid:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
} 
.grow  .fostering-card--outline{
  background:rgba(0,0,0,.0);
  border:1px solid rgba(255,255,255,.65);
  color:#fff;
}
.grow  .fostering-card--outline:hover{
  transform:translateY(-2px); border:0px solid rgba(255,255,255,.65);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
	background:#111;
  color:#fff;
}









/*갤러리 섹션 5*/


#main5 .photo{ width: 100%; display:flex!important; align-items: center; }
#main5 .photo .slick-track{ }
#main5 .galleryList-slide{padding:15px;}
#main5 .galleryList-slide >a{  display:block;     position: relative; } 
#main5 .galleryList-slide >a:active{  border:0px; } 
   
#main5 .galleryList-slide > a > img {
    width: 100%;
    aspect-ratio: 326 / 266;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;  
}



#main5 .slick-arrow{cursor: pointer; width:5%;top:-10%; z-index: 99;display: flex !important;  position: absolute;
    align-items: center;
    justify-content: center; top:50%; transform:translateY(-50%);} 
#main5 .slick-list{width:100%; } 
#main5 .slick-prev{left:-100px;}
#main5 .slick-next{right:-100px;}

 

#main5 .photo_info {
    position: absolute;
    bottom: 0; 
	    opacity: 0;
    width: 100%;
    padding: 1rem;     color: white;
}
#main5 .photo_info >p {margin-bottom:0px;}
	
	
	
#main5 .galleryList-slide > a:hover .photo_info { 
    background:rgba(0,0,0,0.3);
	    opacity: 1;
	backdrop-filter: blur(2px);
	transition:all 0.3s linear;
  
}

#main5 .slick-arrow img{filter: opacity(0.5); 
	transition:all 0.3s linear;}

#main5 .slick-arrow:hover img {filter: opacity(1);  }   

 

 
 

#main6 { background-color:#F6F2EF; padding:50px 0px; }
#main6  .main6MT { flex-wrap: wrap; align-content: unset; justify-content: center; display: flex; width: 100%; gap: 60px;}
#main6  .main6MT  a img{ text-decoration: none; display: inline-block; position: relative; top: 0;}
/* #main6  .main6MT a:hover img { top: -15px; transition: .3s top;}  */
.main6-icon {
  transition: opacity 0.8s linear;
}
.main6-icon.fade {
  opacity: 0;
} 
 

@media(max-width:1499px)   {
    #main5 .slick-next {		right: -50px;	}
	#main5 .slick-prev{left:-50px;}
	.next .slick-next1.slick-arrow{		right: -45px;	}
	.next .slick-prev1.slick-arrow{left:-45px;}
}

@media(max-width:1199px)   {
    .next .next-bottom {    aspect-ratio: initial;}
	.next .next-bottom .next-box .ngs-left {     width: calc(450 / 1080 * 100%);         padding: 25px;}
	 
	.sermon, .welcomenew, .next{padding: 70px 0;}
	.next_more{padding-bottom: 30px;}
	.next .next-bottom {     margin: 0px 0;}
	
	#main5 .galleryList-slide{padding: 10px;}
	
	.grow .fostering-card {     padding: 0rem;}
}

@media(max-width:991px)   {
	#dimodePage { 		margin-top: 80px;	}
	
	.welcomenew .welcome-bottom >div >a h4 { margin:1rem 0;}
	.main_title {    padding: 0 0 1.5rem;}
	.sermon .sermon_info {     padding: 1rem 0 0.5rem;}
	.next .next-bottom .next-box .ngs-right-info { gap: 0.5rem;}
	
	.grow{padding: 70px 0;}
	.next {     background-size: auto 20rem;}
}

@media(max-width:767px) {
 
	.grow .fostering__cards {     gap: 0.5rem; }
	
	#main5 .slick-next {		right: -1.5rem;	}
	#main5 .slick-prev{left:-1.5rem;}

	.next .slick-next1.slick-arrow{		right: -2rem; width: 5%;	}
	.next .slick-prev1.slick-arrow{left:-2rem; width: 5%;}	
	
	
	
	
	.sermon .sermon-top, .grow_container , .next .next-bottom .next-box .ngs{     flex-direction: column;     row-gap: 2rem;}
	.sermon .sermon-top >div, .grow .grow_container >div , .next .next-bottom .next-box .ngs > div{     width: 100%;}
	.next .slick-slide img {     width: 100%;}
	
	.welcome-bottom.tab-content >div a{width : 33%;}
	.welcomenew .welcome-bottom >div { 
		justify-content: space-between; 
		flex-wrap: wrap;
	}
	
	#main6 .main6MT {     gap: 2vw;}


}

@media(max-width:440px) { 
	#dimodePage { 		margin-top: 60px;	}


	    .next .next-bottom .next-box .ngs-left {         padding: 1rem;    } 
		.next .next-bottom .next-box  .ngs-title{margin-top: 0;}
		.next .next-bottom .next-box  .ngs-right{     gap: 2rem;    }
		.next .next-bottom   {    padding: 2rem;}
		
		.sermon, .welcomenew, .next, .grow {padding: 3rem 0;}
		.gallery{padding: 4rem 0;}
}

 