/*메인*/ 
#dimodePage { 
    overflow: hidden;
}

#mainSlider {
    padding-top: 100px;
}



a { color:black;text-decoration: none;transition: all .3s linear;} 
a:hover, a:after , a:active , a:focus{ text-decoration: none; }
#dimodePage{display: block!important;}

h1, h2, h3, h4, p{word-break:keep-all;}

 

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

.mainContainer {
    /*font-family: 'Noto Sans KR', sans-serif;*/
    width: 1410px;
	padding: 0;
    margin: 0 auto; 
}

.flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}


@keyframes MoveUpDown {
    0%, 100% {
        transform: translateY(0rem);
    }

    50% {
        transform: translateY(1rem);
    }
}


#mainSlider { position: relative;}
#mainSlider .each-img {    margin: 0;}
#mainSlider .each-img > img {    width:100vw; }



/*인트로 아이콘부분*/

.intro {
    height: 200px;
    background-color: #2056ae;
    position: absolute;
    bottom: -100px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
	display: flex;
    align-items: center;
    justify-content: center;
}
.mainIntroContainer{
	display: flex;
    justify-content: center;
    align-items: center;
}


.intro-center{    width: 85%; }

.intro-center >div{	width:calc(100% / 7);	border-right: 2px solid #4c79c0;	height: 80px;}
.intro-center >div:last-child{ 	border-right: 0px  ;}
.intro-center >div img{	transform: translateY(-5px);}
.intro-center >div p{	margin-top: 5px; color:white;}

.intro-center >div:hover img{-webkit-animation: jello-horizontal 0.9s both;	        animation: jello-horizontal 0.9s both;}
.intro-center >div:hover p{-webkit-animation: jello-horizontal 0.9s both;	        animation: jello-horizontal 0.9s both;}

 


/*section1*/

#main1{overflow:visible;}
 

.sermon{
	padding: calc(100px + 160px) 0 160px; 
    background: url(../../../Layouts/ujpc_Layout/Images/main/2_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
	
	
}

.sermon h2{font-size: 46px; color:white;}

.main1-top { 
    align-items: flex-end;
	padding-bottom: 120px;
}

.main1-top-left {
    height: 410px;
    aspect-ratio: 77 / 41;
    max-width: 770px;
	background-repeat: no-repeat;
    padding: 45px;
    position: relative;
    background-size: cover;
}

.main1-top-left > a  {
    display:block;
}
.main1-top-left > a h2    {
         text-align: left;
}
.main1-top-left > a h2 span {
     color: #ffffff75; font-family: 'Noto Sans', serif;  letter-spacing: -1px;
}
.main1-top-left > a img {
    position: absolute;
    bottom: 45px;
    right: 45px;
}

.main1-top-right {
	color:white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main1-top-right p{
	font-size: 24px;
} 
.main1-top-right .sl {
    text-align: left;
}

.main1-top-right-icons {
    display: flex;
    align-items: center;    justify-content: flex-start;gap:30px;
    padding-top: 60px;
}
.main1-top-right-icons > a {
    display: block;
	color: white;
    width: calc(25% - 90px / 4);
    max-width: 120px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    border-radius: 25px;
}

.main1-top-right-icons p {
    font-size: 20px;
    margin: 0;
}


.m1b {
    display: flex;
    justify-content: space-between;
}

.m1b >div {
    background-repeat: no-repeat;
    display: flex;
    background-position: center;
    max-width: 415px;
    aspect-ratio: 415 / 248;
    align-items: center;
    justify-content: center;
}

.m1b-title h2 span{color: rgba(255, 255, 255, 0.46); font-family: 'Noto Sans', serif; letter-spacing: -1px;}

.m1b-title{    margin-bottom: 50px;}
.m1b a {    color: white;}
.m1b a h4 {    font-size: 27px; font-weight: bold;}
.m1b a p{     font-size: 18px;}


.main1-top-right-icons > a:hover{ background:white; color:black;}
.main1-top-left > a img:hover{-webkit-animation: jello-horizontal 0.9s both;	        animation: jello-horizontal 0.9s both;}



 /*section2*/
 

#main2{
	padding: 180px 0;
    background: url(../../../Layouts/ujpc_Layout/Images/main/04_ng_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat; 
	
	
}

.next h2{font-size: 50px; color:black; margin-bottom:40px; font-weight: 600;}

.next h2 span{font-size: 46px; font-weight: 300;  color: rgba(0, 0, 0, 0.46); font-family: 'Noto Sans', serif; letter-spacing: -1px;}

.main2-top { 
    flex-direction: column;
    align-items: flex-start;
	padding-bottom: 80px;
}
.m2t-detail {
        font-size: 21px;
    font-weight: 600;
}
 
.m2b-1 >div {
    width: calc(100% / 6 - 200px / 6);
    background: #222f47;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.m2b-1  a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m2b-1  h4{
    color: white;
    font-size: 25px;
}


 

 /*section3*/
 

#main3{
	padding: 125px 0;
    background: url(../../../Layouts/ujpc_Layout/Images/main/05_gallery_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
	
	
}

.gallery h2{font-size: 50px; color:black; margin-bottom:40px; font-weight: 600;}
.gallery h2 span{font-size: 46px; font-weight: 300;  color: rgba(0, 0, 0, 0.46); font-family: 'Noto Sans', serif; letter-spacing: -1px;}

.main3-top { 
    flex-direction: column;
    align-items: flex-start;
	padding-bottom: 35px;
}

.main3container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}

.main3-bottom {
    width: 100%;
}

.photo{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.photo img {
    max-width: 340px;
       width: 340px;
    aspect-ratio: 340 / 233;
	display: block;background-size: cover;
}


 .gallery .galleryList-slide >a {  position: relative;  }  
.gallery .galleryList-slide >a:focus{  border:none; }  
.gallery .galleryList-slide a:hover >img{    filter: brightness(0.5); transition:all .5s linear;}
.gallery .galleryList-slide >a >p{    top: 50%;   color:white; text-align:center;
    left: 50%;   position: absolute;   opacity: 0;  
    transform: translate(-50%, -50%); }
.gallery .galleryList-slide >a:hover >p{     opacity: 1;        }
 

 .swiper-pagination1 {
        width: 100%;
    position: initial;
    display: flex;
    flex-direction: row;
        margin: 45px 5px 0;
    justify-content: center;
}
 

 .swiper-pagination1 >li { 
    margin: 0 10px; 
    height: 15px; 
	width: 15px; 
    border-radius: 10px; 
    background: #202020; 
    border: 1px solid #202020; 
	opacity:0.5;
} 

.swiper-pagination1 .slick-active {
    width: 25px;
    border-radius: 20px; 
	opacity:1;
}
.swiper-pagination1 >li >button{
    display:none;
}















@media(max-width:1499px) { 
.intro_container {   width: 70vw;}
.nb-1.flex >div {    padding: 10px;}
  
  .intro {    position: absolute;        left: 50%;    z-index: 99;    transform: translateX(-50%);}
  
  
 .mainContainer {     width: 1170px;  }
  .main1-top-right {    padding: 0 30px;}
  .main1-top-right-icons > a {     min-width: 110px;}
  
  .sermon {    padding: calc(100px + 70px) 0 70px;}
  
  .m1b >div {     width: calc(100% /3 - 15px);}
  #main2 , #main3{    padding: 100px 0;}

.photo img {     width: calc(1170px / 4 - 15px);}


}


@media(max-width:1199px) { 
	 .mainContainer {     width: 970px;  }
	.intro_container {    width: 990px;}

	.sermon h2, .next h2, .next h2 span, .gallery h2, .gallery h2 span {    font-size: 37px; }
.m1b a h4 {    font-size: 24px;}
.m2b-1 h4 {     font-size: 20px;}

.m1b a p {    font-size: 16px;}
.m1b-title {    margin-bottom: 30px;}
	/* .nb-1 >div >a {      padding: 38% 0;} */

	.next h1 {    font-size: 50px;}
	 .intro-center >div p {
		font-size: 16px;
		font-weight: bold;
		 
	}


#main2, #main3 {    padding: 50px 0;}
.main2-top {     padding-bottom: 40px;}
.main3-top{     padding-bottom: 0px;}
.photo img {     width: calc(970px / 4 - 15px);}

}
@media(max-width:991px) { 
	.sermon h2 , .next h2, .next h2 span, .gallery h2, .gallery h2 span{			font-size: 30px;		}
	.main1-top-right p {    font-size: 19px;}



	.mainContainer {     width: 750px;  }
	.intro_container {    width: 690px;}
	.intro-center >div p{font-size:15px;}
	.intro-center >div {            width: 18%;
        /* height: 108px; */
        padding: 1px;
        margin: 1%;}
	.st-1 {    transform: translateY(40px);}
	.st-2 {    padding: 22px 20px;   transform: translateY(10px);}
	.nb-1 >div >a {            width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;}
 
.m1b a h4 {    font-size: 22px;}
.m1b a p {    font-size: 14px;}

.m2b-1 >div {    width: calc(100% / 6 - 100px / 6);}





	.next h1 , .gallery h1 span{    font-size: 40px;}
	.next h2 {    font-size: 26px;}
	.gallery h2 {    font-size: 19px; }
	
	.main1-top {    flex-wrap: wrap;}
	.main1-top >div{width:50%;}

	.sermon {    padding: calc(100px + 50px) 0 50px;}

.photo img {     width: calc(750px / 4 - 15px);}

}
@media(max-width:767px) {
	#mainSlider {		 padding-top: 0;  	}
	.mainContainer {     width: calc(100% - 30px);  }
	.m1b {     flex-wrap: wrap;}
	.m2b-1 { flex-wrap: wrap;	}
	.m2b-1 >div { width:calc(100% / 3 - 15px);}

	.sermon {        padding: 50px 10px;    }
	.main1-top {     padding-bottom: 50px;}
	.main1-top.flex.aos-init.aos-animate { 
		flex-direction: column;
		align-items: center;
	}
	.main1-top >div {        width: 100%;         background-size: cover;   }
	.main1-top-right {        padding: 15px 0;    }

	.main1-top-left {
		height: auto; 
		 aspect-ratio: 2 / 1;  padding: 15px 30px;
		
	}
.main1-top-right-icons { 
    align-items: center;
    justify-content: center; 
    padding-top: 15px;
}
.main1-top-left > a img {
    width:10vw; aspect-ratio:1; bottom: 5vw;
    right: 5vw;
}
.main1-top-left > a h2{margin: 0;}


.m1b {     flex-direction: column; align-items: center;}
.m1b >div {    width:100%;     aspect-ratio: 2;    margin: 10px 0;}

    .m1b-title {
        margin-bottom: 10px; text-align:center;
    }
 

    /*모바일 플렉스*/ 
	#dimodePage {      padding-top: 70px;}
	.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 > div h4 {
        font-size: 18px;
		word-break: keep-all;
    }
	.photo_container.flex {    flex-direction: column;}
	.gallery .galleryList-slide > a > img {     height: 43vw;}

    /* 
	.mainIntroContainer {     flex-wrap: wrap;}*/
	.intro-center {     flex-wrap: wrap; justify-content: center;}
	.intro {
        position: relative;
        bottom: 0; 
		height:auto;padding: 15px 0;
    }
	.intro-center >div {
		width: 23%;
		border: 0px;
		margin: 15px 0;
	}

.m2b-1 >div {        width: calc(100% / 3 - 15px);  /*max-width:150px;*/ margin:10px 0; }
.m2t-detail p{font-size: 14px;}
.m2b-1 h4 {        font-size: 15px;    }
    #main2 {
        padding: 20px 0;
    }
	#main3 {
		padding: 20px 15px;
	}
.photo img {        width: calc(100vw - 30px); max-width:700px;   }

.swiper-pagination1 { 
    flex-wrap: wrap;
}
.swiper-pagination1 >li {margin:10px;}
.swiper-pagination1{margin-top:15px;}

}

@media(max-width:567px) {
     .sermon-top  {    display: flex;    flex-direction: column;}
	.main1-top-left > a h2{margin: 0;}
	.main1-top-left {   padding: 15px 15px;			}
	.main1-top-right p {        font-size: 15px;    }
	.main1-top-right .sl {     padding: 0 15px;}
	.next h2 {margin-bottom: 20px;}
	.main2-top{padding-bottom:20px;}


	 /* .nb-1.flex {    flex-wrap: wrap;} */
	 .next h1, .sermon h2, .next h2 span, .gallery h2, .gallery h2 span {    font-size: 20px;}
	 .next h1 span{    font-size: 20px;     letter-spacing: 4px;}
	.next h2 , .gallery h1{    font-size: 20px; word-break:keep-all;}
    .st-2 > div > a {
        margin: 0px 2px !important;
    }
    .sermon-top{
        height:421px;
    }
    .next h1 > div {
        font-size: 35px !important;
    }

    .playb {
        position: absolute !important;
        top: 38% !important;
        left: 70% !important;
    }
    .playa {
        position: absolute !important;
        top: 58% !important;
        left: 70% !important;
    }
	
	
	/**/
	.intro-center {    width: 100%;}
	.intro-center >div p {        font-size: 13px;    }


.m2b-1 >div {        width: calc(100% / 3 - 5px); margin: 5px 0;}

}