﻿/* common */
.nav-tabs {border-bottom:none;}
.plus { position:absolute; top:0; right:0;}
.plus:hover { opacity:0.8; transition:0.3s all ease;}

/* main1 s */
.slider .move-btn{background:rgba(0,0,0,0)!important;}
.slider .slider-dots { bottom: 50px !important; }
.slider .slider-dots .each-dot.active{background:white!important;border-color:white!important;width:30px;border-radius:15px; transition:all 0.3s;}
.slider .slider-dots .each-dot{background:rgba(255,255,255,0.5)!important;}
#main-1 { margin:50px 0 0;}
#sermon {     display: flex;
    justify-content: flex-end;
    align-items: center;background:url(../Images/2_box01.jpg) no-repeat; background-position:left bottom; height:350px; background-size: cover; padding:25px 40px;}
#sermon h3 { /*font-size:26px;*/ color:#fff; margin:0px 0px 0px; display:inline-block; vertical-align: middle;   }
#sermon h5 { /*font-size:29px;*/ color:#fff; margin:0px 0px 20px; width:270px;  font-weight:normal;}
#sermon h4 { /*font-size:18px;*/ color:#fff; margin:45px 0px 15px;}
#sermon h6 { /*font-size:22px;*/ color:#fff; margin:10px 0px 0px;}
#sermon{position:relative;}
#sermon a {text-decoration:none; color:#fff;}
#sermon a:hover { opacity: 0.7;transition:0.3s all; }
#sermon .sermon-div{/*position:absolute;top: 50%;
    transform: translateY(-50%);right:0%;*/ width:50%; /*cursor:default;*/}
    #sermon .sermon-div h5 a {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
        transition: 0.3s all ease;
    }
#sermon .sermon-play-img { padding-left: 30px;  }
/* main1-right-1 */
.main-right-1 {
    
	background:url(../Images/) no-repeat; background-position:center; height:350px; background-size: 100% 100%; 
    height: 350px;
    padding: 25px;
    position: relative;
}
.main-right-1 ul { margin: 30px 0 0;}
.main-right-1 li { color:#fff; /*font-size:17px;*/ border-bottom:1px solid #e5e5e5; padding:4px 0; text-align:center; }
.main-right-1 h3 { /*font-size:30px;*/ color:#fff; margin:0px 0px 20px;}

/* main1-right-2 */

.main-right-2 { background-color: #297D99; padding:25px; position:relative; }
.main-right-2 h3 { /*font-size:30px;*/ color:#fff; margin:0px 0px 20px;}
.main-right-2 .main1-view { position:absolute; text-align:center; width:100%; top:40%; left:0; font-size:19px; color:#fff;}
.main-right-2 .main1-view a { padding:5px 15px; color:#fff; font-size:17px; border:1px solid #fff; margin:10px 0 0; display:inline-block; text-decoration:none; }
.main-right-2 .main1-view a:hover { background-color:#fff; color:#000; transition:0.3s all; }




#home a{color:white;}
#home h5{ font-weight:bold;}

#home li >a{display: flex;
    justify-content: space-between;
    align-items: center; padding: 7px 0;}

#home a:hover { opacity: 0.7;transition:0.3s all; text-decoration:none;}
 
/* main1 e */

/* main2 s */

#main-2 { margin: 25px 0px 80px 0; }
#main-2 .main2-left-top img { float:left; clear:both; margin:0px 20px 0px 0px;}
#main-2 .main2-left-top a { text-decoration:none; color:#333;}
#main-2 .main2-left-top strong { color:#000; }
#main-2 .main2-left-top p { font-size:23px; display:inline-block; margin:20px 0px 0px 0px; color:#979191; }
#main-2 .main2-left-top span { margin:0px 15px; font-size:18px;}
#main-2 .main2-left-top { overflow:hidden; margin:0 0 20px;}
#main-2 .main2-left-top small { font-size:17px;}

#main-2 .main2-gallery { overflow:hidden; border:1px solid #e5e5e5; height:351px; padding:40px;}
#main-2 .main2-gallery a { text-decoration:none; }
#main-2 .main2-gallery h5 {  color:#000; margin:0; font-weight:bold; display:inline-block; }
#main-2 .main2-gallery h5 span { color:#008fdb; }
#main-2 .main2-gallery .document-widget .gallery { text-align: center; width: 100%; font-size: 0; }
    #main-2 .main2-gallery .document-widget.gallery .document {
        width: 16.6%;
    }
#main-2 .main2-gallery .document img { height: 97px; }
#main-2 .main2-gallery .gallery .document a.title { padding: 20px 0 5px; text-align: center; text-decoration: none; color: #333; margin:0; font-size:17px;}
#main-2 .main2-gallery .document img:hover { opacity:0.7; transition:0.3s all; }
#main-2 .main2-gallery  .gallery .date { color:#000; font-size:15px; }
#main-2 .main2-gallery .pictures .gallery { width: 200%; white-space:nowrap; }
#main-2 .main2-gallery .arrow.right { position: absolute; right: 30px; top: 50%; margin-top:-16px; cursor: pointer; }
#main-2 .main2-gallery .arrow.left { position: absolute; left: 30px; top: 50%; margin-top:-16px; cursor: pointer; }
#main-2 .main2-gallery .pictures { width: 470px;   /*position: absolute;*/ top: 30%;    /* margin-top: -52px; left: 11%;*/ }
#main-2 .main2-gallery .latest-wrapper { position: relative; }




#main-2 .photo-bottom  {   width: 100%;   /*width:  1440px;*/}
#main-2 .photo{ width: 100%; display:flex!important; align-items: center; position:relative;}
#main-2 .photo .slick-track{ display: flex;    align-items: center;}
#main-2 .galleryList-slide{padding:5px;}
#main-2 .galleryList-slide >a{  display:block;     position: relative; } 
#main-2 .galleryList-slide >a:active{  border:0px; } 
   
#main-2 .galleryList-slide > a > img {
    width: 100%;
    aspect-ratio: 77 / 53;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;  
}



#main-2 .slick-arrow{cursor: pointer; width:13px;top:-10%; z-index: 99;display: flex !important;  position: absolute;
    align-items: center;
    justify-content: center; top:30%; transform:translateY(-50%);} 
#main-2 .slick-list{width:100%; overflow: hidden;} 
#main-2 .slick-prev{left:-25px;}
#main-2 .slick-next{right:-25px;}

 
#main-2 .photo_info {
    position: relative;
    bottom: 0; 
	    opacity: 1;
    width: 100%;
        text-align: center;
    padding: 20px 0 0;    color: white;
}

#main-2 .photo1 .photo_info {  color: black;
}



#main-2 .photo_info p {
    margin:0;
    line-height: 1.2;
    margin-top: 5px;  
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	font-size: 1rem;
	height:2.5rem;
}



#main-2 .galleryList-slide > a:hover .photo_info {  
	transition:all 0.3s linear;
  
}
 













.main2-right-1 { background-color: #105C96; height:350px; padding:25px; position:relative;}
.main2-right-1 h3 { font-size:30px; color:#fff; margin:0px 0px 20px;}
.main2-right-1 .main2-school { text-align:center; margin:40px 0 0;}
.main2-right-1 .main2-school p { color:#fff; margin:15px 0 0; font-size:15px;}
.main2-right-1 .main2-school h5 { color:#fff; margin:15px 0 0; font-size:17px; line-height: 25px;}
.main2-right-1 .main2-school h5 small { color:#fff; margin:20px 0 0;}

.main2-right-2 { background:url(../Images/banner3.jpg) no-repeat; background-position:center; height:350px; background-size: 100% 100%; padding:25px; position:relative; }
.main2-right-2 h3 { font-size:30px; color:#fff; margin:0px 0px 20px;}
.main2-right-2 .main2-view { position:absolute; text-align:center; width:100%; top:40%; left:0; font-size:19px; color:#fff;}
.main2-right-2 .main2-view a { padding:5px 15px; color:#fff; font-size:17px; border:1px solid #fff; margin:10px 0 0; display:inline-block; text-decoration:none; }
.main2-right-2 .main2-view a:hover { background-color:#fff; color:#000; transition:0.3s all; }

/* main3 s */

#main-3 { margin:25px 0px;}
#main-3 .main3-icon { text-align:center; width:100%; border: 1px solid #e5e5e5; padding:30px 0px;}
#main-3 .main3-icon a { text-decoration:none; color:#000; font-size:17px;}
#main-3 .main3-icon li { display:inline-block; padding:0px 33px; border-left:1px solid #e5e5e5;}
#main-3 .main3-icon li:hover { opacity:0.5; transition:0.2s all ease;}
#main-3 .main3-icon li p { margin:15px 0px 0px;}









/* main3 e */


/*특별행사, 목회일정*/
.next-generation-wrapper .next-generation {position:relative; padding: 45px;  height: 350px;}
.next-generation-wrapper .next-generation > .next-generation-title {margin-bottom:5px;color:white; display:block;text-decoration:none;  }
.next-generation-wrapper .next-generation > .next-generation-btn { float:right;}
.next-generation-wrapper .next-generation > .next-generation-btn > img { position:absolute;top:0;right:0;}
.next-generation-wrapper .next-generation.background-color3 .documents {margin-top: 20px;}
.next-generation-wrapper .next-generation.background-color4 .documents {margin-top: 20px;}
.next-generation-wrapper .next-generation .documents a{display:inline-block;padding-left:5px;padding-right:5px;width:100%;}
.next-generation-wrapper .next-generation .documents .generation_img {margin-bottom:20px; width:100%; height:130px;object-fit: contain;}

.next-generation-wrapper .next-generation .documents .tab-content p { font-size:16px; color:white; text-align:center; margin:0; }
.next-generation-wrapper .next-generation .documents .generation_date {word-break:keep-all; font-size:14px!important;color:#D7D9D8!important; }
.next-generation-wrapper .next-generation .nav-tabs > li{display:inline-block;text-align:center; float:inherit;}
.next-generation-wrapper .tab-dots {text-align:center; width: 100%;    position: absolute;  left: 0;  bottom: 15px;}
.next-generation-wrapper .tab-dots > li {margin-left:3px;margin-right:3px;}
.next-generation-wrapper .tab-dots > li > a {display: inline-block;width: 12px;height: 12px;background: #C8DFFF;cursor: pointer;border-radius: 50%; padding: 0;}
.next-generation-wrapper .tab-dots > li.active > a {background:#fff;}

/* 특별행사, 목회일정 css */
#main-quick { text-align:center;}
#main-quick a { text-decoration:none; color:#fff; }
#main-quick img { display:inline-block; margin-right:15px;}
#main-quick p { display:inline-block;vertical-align:middle; font-size:18px; margin:0;}
    #main-quick > div > div > a > div {
        padding: 35px 0px;
        border-right: 1px solid #fff;
        background-color: #013d85;
    }
#main-quick > div > div > a> div:hover { opacity:0.7; transition:0.4s all ease;}



/*메인 공지사항 성가대찬양*/
.bottom-latest .latest-wrapper {
    padding:70px 30px 30px;
    width: 100%;
    height: 100%;
    position: relative;
}
    .latest-third {
        overflow: hidden;
        padding: 0;
        position: relative;
        margin-bottom: 30px;
        height: 350px;
    }
.latest-wrapper a.latest-title {
     
    color: #eee;
    text-decoration: none;
}
.latest-wrapper a.latest-title2 { 
    color: #000;
    text-decoration: none;
}
.latest-wrapper a.latest-btn {
    position: absolute;
    right: 0;
    top: 0;
}
.background-color {
    background: url(../Images/2_box02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}
.background-color2 { 
	background: #fafafa;
}
.background-color3 {
    background: #3560af;
}
.background-color4 {
    background: #546285;
}


.background-color2 .latest-wrapper ul > li {
        border-bottom: 1px solid #d5d5d5;
    /*font-weight:700;*/ 
    
}
.latest-wrapper ul > li a{
    text-decoration:none;
}

.latest-wrapper ul > li > a > span.choir_title {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    width: 100%;
    padding-right: 15px;
    margin-top: 40px;
    word-break: keep-all;
    color: white;
    font-size: 26px;
}

    .latest-wrapper ul > li > a > span.choir_date {
        display: block;
        margin-bottom: 0px;
        font-size: 18px;
        color: white;
    }

.latest-third .latest-wrapper ul > li > a > span.community_title {
    
    color: black;
    text-decoration:none;
}
.latest-third .latest-wrapper ul > li > a > span.community_date {
     
    color: black;
    text-decoration: none;
	padding-right:10px;
}
.main-1-right .latest-wrapper .tab-content {
   /*position:absolute;
   top:50%; */    margin-top: 50px;
}
.main-1-right .latest-wrapper .tab-content2 {
    position: relative; 
    width:100%;
	top:15px;
	border-top: 1px solid #d5d5d5;
}
/* 성가대 찬양 css End*/
.font-color4 {
    color: #fff !important;
}
.latest-third .latest-wrapper ul > li > a > span.community_title {
    display: block;
    width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width:992px){
    #main-quick > div > div > a> div.col-md-2{
    	/*width:20%!important;*/
	}
	
	
	
	
}
@media (min-width:1200px) and (max-width:1499px) {
    .main-right-2 .tab-content li { width:200px;}
    .main-2-right2 .tab-content li { width:200px;}
    #main-3 .main3-icon li { padding:0px 33px;}
    #main-3 .main-3-right { padding:15px 20px;}
    #main-3 .main-3-right img { margin-right:15px;}
}

@media (min-width:992px) and (max-width:1199px) {
    .slider .slider-dots {
        bottom: 10px !important;
    }
    #sermon .sermon-div h5 {
        width:220px;
    }
    .latest-third .latest-wrapper ul > li > a > span.community_title {
        display: inline-block;
        width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bottom-latest .latest-wrapper {
        padding: 18px;
    }
    #main-2 .main2-gallery {
        padding: 28px;
    }
        #main-2 .main2-gallery .pictures {
            width: 368px;
            left: 12%;
        }
    #main-2 .main2-left-top p { font-size:18px; }
    #main-2 .main2-left-top small { font-size:15px; }
    .main2-right-1 .main2-school p { font-size:12px; }
    #main-slogan h3 { line-height:30px;}
    #main-3 .main3-icon li { padding:0px 20px;}
    #main-3 .main-3-right p { display:none;}
    #main-3 .main-3-right { text-align:center;}
    #main-3 .main-3-right img { float:none; margin:0px;}
    .main-right-2 .tab-content li { width:150px;}
    .main-2-right2 .tab-content li { width:150px;}
    .main-2-right1 a { font-size:18px;}
    #main-2 .main2-gallery .pictures .gallery {width:300%;}

    /*다음세대*/
    .next-generation-wrapper .next-generation { padding: 18px; }
    .next-generation-wrapper .next-generation .documents a {padding:0px;}
    .next-generation-wrapper .next-generation .documents .generation_img {margin-bottom:20px; height:100px;}
    .next-generation-wrapper .tab-dots > li {margin-left:0px!important;margin-right:0px!important;}
     #main-quick p { font-size:15px;}
    #main-quick img { margin-right:5px; }
	
	#main-2 .slick-prev {
		left: -15px;
	}
	#main-2 .slick-next {
		right: -15px;
	}
	
	

}

@media (min-width:768px) and (max-width:991px) {
    .slider .slider-dots {
        bottom: 10px !important;
    }
    #main-quick > div > div > a > div {
        border-bottom: 1px solid #fff;
        padding: 20px 0px;
    }
    #main-quick > div > div > a:nth-child(4) > div.col-md-2, #main-quick > div > div > a:nth-child(5) > div.col-md-2 {
        /*width:50%!important;
        border-top:1px solid #57728C;*/
    }
    #main-2 .main2-gallery {margin:0 0 50px;     height: initial;}
    #main-slogan h3 { line-height:30px;}
    #sermon { margin:0px 0px 15px;}
    .main-right-1 { margin:0px 0px 15px;}
    .main-2-left { text-align:center; margin:15px 0px;}
    #main-2 .main-2-left-top img { float:none;}
    #main-2 { margin:0px 0px 30px;}
    #main-3 .main3-icon li { padding:0px 21px;}
    #main-3 .main-3-right { margin:30px 0px 0px; text-align:center;}
    #main-3 .main-3-right img { float:none; margin-right:30px; }
    #main-2 .main2-left-top { text-align:center; }
    #main-2 .main2-gallery .pictures {  width: 630px;}
    #main-3 .main3-icon li { padding:0; width:20%; margin:15px 0;}
	
	
	#sermon {  
		height: auto;
		aspect-ratio: 58 / 35; 
	}
	#sermon .sermon-div {
    width: 43%;
	}
    
    /*다음세대*/
    .next-generation-wrapper .next-generation .documents a {padding-left:40px!important;padding-right:40px!important;}
}

@media (max-width:767px) {
    .slider .slider-dots {
        bottom: 10px !important;
    }
    #main-quick > div > div > a > div {
        border-bottom: 1px solid #fff;
        padding: 20px 0px;
    }
    .bottom-latest .latest-wrapper {
        padding: 20px;
    }
    /*#main-quick > div > div > a:nth-child(4)> div.col-md-2,#main-quick > div > div > a:nth-child(5)> div.col-md-2{
	width:50%!important;
	}*/
    #sermon .sermon-div {
        width: 55%; 
    }
    #sermon .sermon-play-img {
        padding-left: 20px;
        display:none;
    }
    #main-quick img {
        width: 25px!important;
    }
    .latest-third {
        height: 300px;
    }
    #main-quick > div > div > a> div { padding:15px 0; /*border-bottom: 1px solid #57728C;*/ }
	#main-quick img { display:none; margin:0 auto 10px; }
    #main-quick p { font-size:14px;}
    #main-1 { margin:25px 0;}
    #sermon {padding:15px;  }
    #main-2 .main2-left-top p { font-size:17px; margin:0;}
    #main-2 .main2-gallery .arrow.left { display:none; }
    #main-2 .main2-gallery .arrow.right { display:none; }
    #main-2 .main2-left-top small { font-size:14px; }
    .main2-right-2, .main2-right-1 { margin:15px 0 0;}
    #main-2 .main2-left-top { text-align:center; }
    #main-2 .main2-left-top img { float:none!important; margin:0 0 15px!important;}
    #main-2 .main2-gallery {position:relative; height: initial;}
    #main-2 .main2-gallery .pictures {
        /*width: 305px;*/
        top: 41%;
        /*left: 10%;*/
        width: calc(-120px + 100vw);
    }
    #main-3 .main3-icon li { padding:0 10px;}
    #main-slogan h1 { font-size:25px;}
    #main-slogan h1 span { font-size:13px; margin-right:15px; top:-3px;}
    #main-slogan h3 { font-size:16px; line-height:20px;}
    #main-3 .main-3-right { margin:15px 0px 0px; text-align:center;}
    #main-3 .main-3-right img { float:none;}
    #main-3 .main3-icon li { border-left:none; margin:20px 0px; width:32%;}
    #main-3, #main-2 {margin:15px 0px;}
    .main-2-right2 { margin:15px 0px 0px;}
    .main-2-right2 .tab-content ul { margin:25px 0px;}
    #main-3 .main3-icon li p { font-size:15px;}
    .main-2-right2 h3, .main-2-right1 h3, #sermon h3, #sermon h5, .main-right-1 h3, .main-right-2 h3 {   line-height: 35px;}
    #sermon h5{width:100%!important; margin-bottom:10px; line-height: 25px;}
    .main-2-left {text-align:center;}
    #main-2 .main-2-left-top img { float:none; margin:0px 0px 15px;}
    #main-2 .main-2-left-top p { font-size:22px;}
    #main-2 .main-2-left-top span { font-size:18px; margin:0px 5px;}
    #sermon h4, #sermon h6 { font-size:18px;}
    #sermon h4{margin:10px 0px 10px;}
    #sermon h6{margin: 10px 0px 0px;}
    #sermon, .main-right-1 { margin:0px 0px 15px;}
    
    /*다음세대*/
    .next-generation-wrapper .next-generation .documents a {position: absolute;text-align: center;width: 100%;top: 20%;left: 0;font-size: 19px;color: #fff;}
    .next-generation-wrapper .next-generation .nav-tabs {position:absolute;bottom:20px;left:50%; transform:translateX(-50%);}
    .next-generation-wrapper .next-generation .documents .generation_img {width:unset!important;}
	
	
	.next-generation-wrapper .next-generation {
		height: initial;
	}
}

@media (max-width:500px) {
    #main-2 .main2-gallery {
        padding:20px;
    }
    #main-2 .main2-gallery .pictures {
        
        top: 35%;
        width: calc(-0px + 100%);
    }
        #main-2 .main2-gallery .document-widget.gallery .document {
            width: 25%;
        }
		
		
	div#sermon {
	 
		aspect-ratio: 57 / 63;
		height: initial;
		display: flex	;
		align-items: flex-end;
	}	
	#sermon .sermon-div {
        width: 100%;
    }
	#sermon h3{display:none;}
	.latest-third {
        height: initial;
    }
}

