/*메인*/
#dimodePage{display: block!important; padding-top:0;} 
.page-content{    overflow: hidden;}
/*
.main-section1, .main-section2, .main-section3, .main-section4, .main-section5, .main-section6{overflow:hidden;}
*/

div#gnb-wrap.black {
    background: white;
}


.move-btn {background:rgba(0, 0, 0, 0)!important; width: 5vw;  max-width:74px;  /*opacity: 0.7;*/} 
.prev-btn{  left: 3%!important;}
.next-btn{     right: 3%!important;}


/*메인*/ 
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: 1370px;
	padding: 0;
    margin: 0 auto; 
}

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

/* */




/*섹션1*/

.main1 {
    padding: 5% 0 2.5%;
    background: linear-gradient(to bottom, white 37%, #e4eef4 37%);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
}

.main1 {
    padding: 50px  0;
    background: #f0f8fd;
	
    /* background: linear-gradient(to bottom, transparent 25%, white 25%), #f5fafb ; */
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%; 
} 

.main1 .mainContainer  {    /*max-width: 1170px;*/    display:flex;flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 70px;}
 
.main1 .sermon-top   {    display:flex;   } 
.main1 .sermon-top h4  {    margin: 20px 0 10px;
    text-align: left;   } 
.main1  .sermon-top >div {
    display: flex;  width: 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.main1 .sermon_info {
    color: #000000cc;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
	padding: 0;
}


 .main1 .sermon_info_total{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sermon-more:hover{}



 
.main1 .sermon_img  >div span:nth-of-type(2) {
     font-weight: bold;
} 
.sermon .sermon_img  >div  hr {
    width: 25px;
    text-align: left;
    margin: 0;
}
.main1 .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;
} 
.main1 .sermon_img:hover  >div   {
      filter: grayscale(0%);
}

.main1 .sermon-more {
    transition: all .3s linear; font-weight:bold;
}
.main1 .sermon-more:hover {
    transition: all .3s linear; color:#bba28e;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}

.main1 .sermon-bottom  { 
    justify-content: center;
	display:flex;
	margin-top:60px;
}
.main1 .sermon-bottom a { 
    display: flex; 
    width: max-content;align-items: center;
	    justify-content: space-between;
    gap: 10px; transition: all .2s linear; font-weight:bold;
    font-weight: bold;
}

.main1 .sermon-bottom a:hover{ 
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;}


 

/*섹션2*/

.main2 {
    padding: 110px  0 60px;
    background: #ffff; 
     background: url(../Images/main/4_bg_bg.jpg) no-repeat;   background-size: contain;
    background-position:  top;
    background-repeat: no-repeat; 
}
 

.main2 .worship-bottom {
    width: 100%;
} 
.main2 .worship-box {
    width: 100%;     overflow: hidden; 
} 
.main2 .slick-list { width: 100%;}
 
.main2 .main2-bottom   {       justify-content: space-between; display:flex; width:100%;      aspect-ratio: 117 / 51;   width: 100%;
    padding: 50px 45px;
    margin: 10px 0;
    background: white; } 

.main2 .main2-bottom .worship-box .worshiptime {   width: 100%;  display: flex;      flex-direction: row;    align-items: center;  justify-content: space-between; } 


.main2 .main2-bottom   .worship-left { aspect-ratio: 650/401; width: 650px; }
.main2 .main2-bottom   .worship-right img{ aspect-ratio: 436/401;  }
.main2 .main2-bottom   .worship-right{ padding-top:40px; }


#main2 .time-b-l {
    display: flex;
    justify-content: space-between;
     
}


#main2 .time-b-l >div > div {
    margin-bottom: 1.5rem;
}

#main2 .timetable-title{font-weight:bold;     width: 45%;}
#main2 .time_title {
    line-height: 1;
}

#main2 .worship-left-info hr {
    margin: 25px 0;
    color: black;
    border-top: 3px solid;
}

 

.main2  .slick-arrow {    position: absolute; cursor: pointer;}
.main2  .slick-next1.slick-arrow {    right: -20px;}  
.main2  .slick-prev1.slick-arrow {    left: -20px;}

.main2 .slick-arrow img{filter: opacity(0.5); 	transition:all 0.3s linear;}
.main2 .slick-arrow:hover img{filter: opacity(1); 
	 }








/*  */

.main3 {
    padding:120px 0 110px;
    /* background: linear-gradient(to bottom, #e4eef4 47%, #fff 47%); */
	background: #374766;
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
}

.main3 h1{ /*font-size: 56px;*/ font-weight:500;  color: #fff; margin: 0 0 80px;}
.main3 h4{ /*font-size: 24px;*/    line-height: 1.2;    color: #fff;       margin: 25px 0;}
.main3 h4 span{/* font-size: 19px;   */  } 
.main3 h3{ /*font-size: 48px;*/    line-height: 1;    color: #fff;       margin: 25px 0;}  
.main3 p{/*font-size: 20px;*/ line-height:1.5;   color:#fff;   margin:   0 ;   }
.main3 hr{width: 400px;   color: #b7d7ec;    margin: 0;    text-align: left;}
.main3-bottom h4 {         margin: 0;    margin-top: 15px;}

.main3-top {
	background: #2c5594;
	    display: flex;
    align-items: center;
    justify-content: space-between;
border-radius: 20px;  
}

.main3-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;    padding-top: 15px;
} 
.main3-bottom  >div {
	    display: flex;
    align-items: center;
    flex-direction: column;
    background: #677489;
    width: calc(100% / 6 - 100px / 6);
    border-radius: 20px;
    /* height: 150px; */
    aspect-ratio: 1;
    justify-content: center;
}
.main3-top-right {
     width: 60%;
} 
.main3-top-left  {
    padding: 100px;
width: 40%;
}

.main3-top-right-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.main3-top-right-icons >div { 
        width: calc(100% / 3);
    background-repeat: no-repeat !important;
    max-width: 270px;
    aspect-ratio: 270 / 294;
	position:relative;
    filter: brightness(1.3);
} 
.main3-bottom >div:hover {
     background: #fff; transition: all .5s ease-in-out;
}
.main3-bottom >div:hover img  {
	filter: invert(100%);
     transition: all .5s ease-in-out;
} 
.main3-bottom >div:hover h4  {
	color: #000;
     transition: all .5s ease-in-out; 
} 


/*  */
 


 


@media(max-width:1820px) {
 


}


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


@media(max-width:1399px) {  

	.mainContainer{width:1170px;}
	
	.main1-top-right >div {     height: calc(50% - 10px);}
	.main1-center >div {     padding: 40px;}
	.main1-bottom-left  >div {    width: 50%;}


	.main2-top-left {    padding: 50px;}
	.main2-top-right-icons >div {     aspect-ratio: 270 / 340; background-position: 50% !important; }
	.main2 h1 {margin-bottom:20px;}

	.sec1 >div > a {    height: 160px;}



	.main3-left , .main3-right{    width: 50%;}
	.main3-left-top >div, .main3-left-bottom >div{width: 50%; padding: 10px;}

.main4-bottom >div {     padding: 0 70px;}

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

	.mainContainer{width:970px;}

	.main1-bottom-right-right {    padding: 30px;}
	.main1-center >div {        padding: 30px;    }
 	.main1-top-right {    padding: 30px 0!important;}	

	.news  {    padding: 15px;  }

	.sec1 >div > a {    height: 140px;}
    .main4-bottom >div , .main4-top{     padding: 0 40px;}

}

@media(max-width:991px) { 
	.mainContainer{width:750px;}

    .main1-top-left{ 	margin-right: 0px; border-radius: 0;
    background-position: 50%;
    background-size: cover;  }  
	.main1-top-right{     margin-left: 0px; }
	.main1-bottom { padding-top: 30px;} 
	.main1-bottom > div{padding: 20px 10px;}
	.main1-bottom-right-left {     border-radius: 20px 0 0 20px; background-size: cover; background-repeat:no-repeat;}


	.main1-center {    display: flex;    flex-direction: column;}
	.main1-center >div{     height: initial; width:100%;              border-radius: 20px;              margin: 10px 0;}

	/* .news  {      width: calc(100% / 3 - 5px);} */
	/* .news-img {    width: 50px;} */
	/* .news-info {     width: calc(100% - 80px);} */
 
	.main2-bottom >div {     width: 16%;}
	.main2-bottom .mb >div {    width: 13vw;    height: 13vw;}
	.main2 .mb img{width: 6vw;}

	.mtri a > div {     padding: 10px;}
	.main2-top-left {        padding: 30px;    }
	.main2-top  {     flex-direction: column;}
	.main2-top >div { width:100%}



 .main3 .mainContainer >div{    width: 100%;}
.main3 .mainContainer {height:initial;}

.main3 .mainContainer {    flex-direction: column;} 
.main3-right {     align-items: center;}

.main4-top-title{margin-bottom:30px;}
.main4-top-icons > div {     width: 15.666%;}

.main4-bottom >div, .main4-top {        padding: 0 20px;    }

	.sec1 >div > a {    height: 90px;}
	.main4-right {    padding-left: 20px;}
	.main4-left {    padding-right: 20px;}

	.main3 , .main5 {    padding: 6% 0%;}

	.main5 .container >div >div >div:nth-of-type(1) {    padding: 35px;}
	.main5 .container >div >div {     height: 260px;}
	
}


@media(max-width:767px) {

	#dimodePage{  padding-top:80px;} 

	.mainContainer{width:calc(100vw - 60px);} 
	.main1-bottom-right-left{height:initial; aspect-ratio: 1;             background-size: contain;}
	.main1-bottom-right-right h4 {     padding-bottom: 30px;}

 
	.main1-top-right-top .sbtitle >div {    text-align: center; text-underline-offset: 10px; }
	.sermon-play {    float: right;    max-width: 7vw;}
	.sermon-info {    margin: 0;}
	 
	
	.main2-top-right-icons >div {background-size: cover!important;}

	.main2 .mtri1 {     border-radius: 0 0 0 20px; }
	.main2 .mtri3 {    border-radius: 0 0   20px 0;}
	    .mtri a > div {        padding: 30px;    }
	.main2-bottom >div{        margin-bottom:5px;     }
	.main4-bottom{ flex-direction: column;}

	.main4-bottom >div{    width:100%;        margin-bottom: 30px;    }

.main3-left >div{    flex-direction: column;}
.main3-left >div> div {    width: 100%;}

.main4-bottom {    padding: 0 !important;}
.main4-top{margin-bottom:30px;}
	.news-img {    width: 9vw;}
	.news-img2 {    width: 3vw;             padding-left: 15px;}
	.news-info {     width: 100%; height: 5rem; padding: 15px 0;}
	.news {    flex-direction: column;    display: flex;     align-items: flex-start;               padding: 20px 25px 15px; } 

	.main4 .container {flex-direction:column;}
	.main4 .container >div{ width: 100%; padding: 30px;}


.main4-top-icons {    flex-wrap: wrap; justify-content: center;}
.main4-top-icons >div {   width:30%;max-width:150px;         margin : 5px;}
.main4-top {    border-radius: 20px; background-position:50%;}
.main4-top-title {justify-content: center;}
.main3-right >div {     padding-bottom: 0px;}



	.sec1 >div {     width: 50%;}
	.sec1 >div > a {
            height: auto;
            width: 100%;
            aspect-ratio: 1.8;
            padding: 10px;
            margin: 0 !important;
        } 

	.main1-top-left {            padding: 30px;        }
	
	.main5 .container >div >div {     height: 230px;}
	.main5 .container >div >div {     margin: 10px;}
	
}

@media(max-width:567px) {   


	.mainContainer{width:calc(100vw - 30px);}

	a.mb.mb14.col-xs-3 >img {    max-width: 10vw;}
	.main1-top-right-icons h4 {   font-size: 0.8rem;}
	a.mb.mb14.col-xs-3{padding:5px ;}
 
	.main1-bottom-right  {     flex-direction: column;}
	.main1-bottom-right> div {   width:100%;}
        .main1-bottom-right-left {             background-size: cover;  border-radius: 20px 20px 0 0; aspect-ratio: 2;  background-position: 50% 30%;  }
.main1 h2 {      margin-bottom: 20px; }
.main1-bottom-right-right {    display: flex;    flex-wrap: wrap; align-items: center;}
.main1-bottom-right-right p {   width:100%;}
.main1-bottom-right-right h4 {   width:70%;         padding: 0;}


.main2-bottom >div { height:initial; padding: 20px 0px;}
.mtri a > div {        padding: 10px;    }

.main3-right-bottom > a {padding:20px 0}


.main4-top-icons >div {   width:calc(50% - 10px);}
.main4-bottom >div {            margin-bottom: 15px;        }
	/* .main1 h1{ font-size: 3vw;;  }  */
	/* .main1 h4{              font-size: 2.5vw;     } */
	/* .main1 p{ font-size: 3.5vw; } */
	/* .main1 h4 {    font-size: 2.5vw;} */
	/* .main1 h3 {            font-size: 3.5vw;       } */
	/* .main3 p {            font-size: 2.5vw;        } */
	/* .main3 h4 {            font-size: 3vw;        } */
	/* .main4 h2 {    font-size: 7vw;} */
	/* .main5 h4{ font-size: 3vw;    } */
	/* .main5 p  {     font-size: 2.5vw;      } */


	/* .main1-bottom > div >a {     justify-content: space-between; padding: 0 10px;} */
	/* /* .main1-top-right-top .sbtitle {            font-size: 3vw;    } */  
	/* .main1 .mb11 img , .main1 .mb12 img,.main1 .mb13 img{            max-width: 2vw;        } */
 
	/* .main1-top-right >div {padding: 15px;} */
	/* .main1-bottom{flex-wrap: wrap;} */
	/* /* .main1-bottom > div{   width: calc(50% - 5px);        margin: 5px 0;} */  
	/* .main1-bottom {        padding-top: 10px;    } */
	/* .main1-bottom > div {            padding: 0;         } */



 






	.news {                 padding: 20px 15px 15px;  } 
	.news-info { height: 20vw; 	}
 	/* .main3n {     flex-direction: column;} */
	/* .news-img {    width: 12vw; min-width: 50px;} */
	/* .news-img2 {    width: 6vw; min-width: 20px;} */
	/* .news-info {     width: calc(100% - 18vw  );} */

	.main4-left .sec1 > div:not(:first-child) {		display:none;	}
	.main4-left .sec1 >div {            width: 100%;        }
	.main4-right .sec1 > div:nth-child(n+3) {  /*display:none;*/}


	.main2-bottom .mb >div {            width: 20vw;            height: 20vw;        }
	.main2 .mb img {            width: 10vw;        }

	.main2-bottom{flex-wrap: wrap;}
	.main2-bottom >div {     width: 33%;}
	.sec1 >div > a {             padding: 5px;        }
	
	.main5 .container >div >div {                height: 42vw;}
	.main5 .container >div >div {     margin: 5px; width: 100%;}
	/* .main5 .container >div {     flex-direction: column;}  */
	.main5 {    padding: 10% 0%;}

	.main4 .text-left {     padding-bottom: 5px;}
	.main5 .container >div >div >div:nth-of-type(1) {            padding: 20px;        }
	.main5 .container >div >div >div >a > img {     max-width: 5vw;}

    .main5 .container .main5-top >div >div:nth-of-type(2) {  position: absolute;    /* z-index: 0; */    width: 63%;    right: 0;  }	
	.main5 .container .main5-bottom >div >div:nth-of-type(2) {  position: absolute;   padding:15px;    width: 42%;    right: 0; text-align: right; }
}