/*메인*/ 


a { color:black;text-decoration: none;transition: transform all .3s linear;} 
a:hover, a:after , a:active , a:focus{ color:black; 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 {
    width: 100%;
    margin: 0 auto;
    padding: 3% 15%;
    box-sizing: border-box;
    background-color: white;
}

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

/*동영상*/
#main_video{position: relative;height: 58vw;}
#main_video .video-tag{position: relative;}
#main_video .video-tag .mainbackgroundvideo{position: fixed;
left: 0;right: 0;z-index: -9999;margin: auto;min-width: 75%;	
min-height: 38%;width: 100%;}


/*웰컴*/
.welcome {
    padding: 5% 15%;
    background: url(../../../Layouts/wjcjhp_2022_Layout/Images/main/2_welcome_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
}

.welcome h1{ font-size: 45px; font-family: 'Pretendard-Regular'; font-weight:bold; margin-bottom: 45px ;}
.welcome h2{font-size: 32px; line-height:1.2;      margin: 25px 0 ; font-weight: bold;}
.welcome h4{ font-size: 22px; line-height:1.6;  color:#88888a; font-weight: bold; }
.welcome p{ font-size: 14px;}

.welcome-icon > a {    background: #ebecf1;    padding: 4% 2%;    margin: 20px;}
.welcome-icon > a:hover {    transform:translateY(-10px); transition:all .3s linear;}
.welcome-icon {    margin-top: 50px;}

/*설교*/
.sermon {
    padding: 6% 0 0 ;
    background: url(../../../Layouts/wjcjhp_2022_Layout/Images/main/3_sermon_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
	align-items: flex-end;
}
.pastor_img{bottom:0}
.sermon h1{ font-size: 60px;   font-weight:bold;  color:white; margin-top: 30px;    line-height: 1.3;}
.sermon h3{font-size: 35px; line-height:1.2;   color:white;   margin: 10px 0 40px;  }
.sermon h4{ font-size: 22px; line-height:1.6;  color:white; font-weight: bold; }
.sermon p{ font-size: 23px; color:white; margin:0;}

.sb-1  {    margin: 70px 0;    padding: 0;}
.sb-2  {      padding: 0;}
.sb-2 > a{  width: 48%;   padding: 30px;    text-align: center;}
.sb-2 > a:nth-of-type(1) {    border: 1px solid white;    }
.sb-2 > a:nth-of-type(2) {   background:black;}
.sb-2  > a:hover {    transform:translateY(-5px); transition:all .3s linear;}
.sermon-left {    text-align: right;    padding: 0 0px;}
.sermon-middle{     padding: 0 0  150px; margin: auto 0;}
.sermon-right{     padding: 0px;
    margin: auto;
    padding-bottom: 70px;
    text-align: center;}
.sermon-right > a { margin:15px;}
 .sermon-right > a >img:hover { filter:brightness(0.5); transition:all .3s linear;}

/*소식*/
.news {
    padding: 2% 0 0;
    background: url(../../../Layouts/wjcjhp_2022_Layout/Images/main/4_news_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
}
.news h1{font-size:48px; font-weight:bold;}
.news-top  {    padding: 4%;    text-align: center;  position: relative;}
.news-top h1:before {
        content: '';
    border-top: 8px solid #00a0e8;
    padding: 30px;
    position: absolute;
    top: 20%;
    right: 48.5%;
}
/*메인슬라이드*/

.news-bottom {  overflow: hidden; }
.news-bottom .slider .move-btn {    background: rgba(0, 0, 0, 0);      padding: 0px 0px;}
.news-bottom .slider .move-btn:hover {background: rgba(0, 0, 0, 0.6);  transition:all .3s linear; }
.news .slider-dots{display:none;}

/*SNS등 아이콘*/
.sns {
    padding: 5% 13%;
    background: white;
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
}

.sns h4{    font-size: 20px;    font-weight: bold;    margin: 20px 0;}
.sns-icon > a { text-align:center;}
.sns-icon > a:hover {    transform:translateY(-10px); transition:all .3s linear;}

/*교우동정*/
.info {
    padding: 6% 13%;
    background: url(../../../Layouts/wjcjhp_2022_Layout/Images/main/6_familynews_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
}
.info>div{ height: 450px;}

.info h1{font-size: 48px;    color: white;    font-weight: bold;}
.info h4{    font-size: 22px;    color: white;    line-height: 3;}
.info p {
    margin: 0 5px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.info p >span {    float: right;}
.info-tab  a {    color: black;}
.info-tab  a:hover {    color: #3d61af; transition:all .1s linear;}
.info .info-left >img {    margin: 50px 0;}

.info-tab{border: 1px solid #c7cbd6;    border-left: 0px solid #c7cbd6; align-items: flex-start ; display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;}
.info .tab-content{position:relative;}
.info .tab-content2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: .3s all;
    height: 380px;
    color: white;
    font-size: 17px;
    margin: 15px 0;
}
.info-tab > li {
    background: white;
    padding: 15px;
    width: 16.67%;
    border-left: 1px solid #c7cbd6;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
}
.ib-1 {    padding: 18px 0px;    border-bottom: 1px solid #969698;}
.ib-1  a {    color: white;}

@keyframes aaa{
    from{left:-5px}to{left:5px;}
}
.info-left >a {display:block;}
.info-left >a:hover  { transform:translateX(10px); transition:all .3s linear;/*animation:aaa 0.4s  infinite alternate; -webkit-animation:aaa 0.4s  infinite alternate;*/}





/*갤러리*/
.gallery {
    padding: 3% 15% 7%;
    background: url(../../../Layouts/wjcjhp_2022_Layout/Images/main/7_gallery_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
}
.gallery h1{font-size:48px; font-weight:bold;}
.gallery-top  {    padding: 3%;    text-align: center;  position: relative;}
.gallery-top h1:before {
        content: '';
    border-top: 8px solid #00a0e8;
    padding: 30px;
    position: absolute;
    top: 20%;
    right: 48.5%;
}
.gallery-bottom {flex-wrap:wrap;}
.gallery-bottom .g-box { width: 33.33%;}
.gallery-bottom >div:nth-of-type(3), .gallery-bottom >div:nth-of-type(4),
.gallery-bottom >div:nth-of-type(5), .gallery-bottom >div:nth-of-type(6),
.gallery-bottom >div:nth-of-type(10), .gallery-bottom >div:nth-of-type(11){width: 16.67%;}
.g-box{position:relative;}
.g-box >a{display: block;    padding: 5px;}
.g-box img {
    max-width: 100%;
    width: 500px;
    height: 300px;
	background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
}


.g-box p {
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    color:white;
    width: 90%;
    text-align: center;
    word-break: keep-all;
    font-size: 16px;
    opacity:0;
}
.g-box:hover p{opacity:1; transition:all .3s linear;}
.g-box:hover img{filter:brightness(0.6); transition:all .3s linear;}

#dimodePage .page-actions { 
    background: white;
}

@media(max-width:1620px) {
	.sermon {    padding: 3% 0 0;}
     .sermon h1{    font-size: 45px; }
	 .sermon-right {    padding: 0px 5% 2%;}
	 .sermon-middle {    padding: 0 0 2%; }
	 .sb-1 {    margin: 40px 0; }
	 .sermon-left {     padding: 0px 0px;}
	 
	 .news-top h1:before, .gallery-top h1:before {     right: calc(50% - 30px);}
}

@media(min-width:1320px) {
    .container{width:1300px;}
}
@media(max-width:1199px) {
	
	.welcome {    padding: 5% 2%;}
	.sermon p {    font-size: 20px; }
	.sermon h1{    font-size: 35px; }
    .sermon h3 {    font-size: 25px; }
	
	.info-right  {    overflow: hidden;}
	.info h4 {     line-height: 2;}
    
}
@media(max-width:991px) {
	.sermon {flex-wrap: wrap;background-size: 130% calc(100% - 306px);    background-position: 45% 0%; background-color:white;}
	.sermon-right {    width:100%; display: flex;    justify-content: center;}
	.sermon-right> a{width: 290px;}
	 .sermon-middle {    width:60%; padding: 0px 29px; }
	 .sermon-left {     width:40%;}
	.sb-1 {    margin: 20px 0;}  
   .sb-2 > a {     padding: 10px; }
   .sermon h1{    font-size: 30px; }
   
   .sns h4 {    font-size: 15px;}

}
@media(max-width:767px) {
	.flex {flex-wrap: wrap;}
	.welcome-icon > a {     width: calc( 45% - 20px);}
	#dimodePage {    padding-top: 100px;}
    .sermon {flex-wrap: wrap;background-size: 130% calc(100% - 350px)  }
	.sermon-right {   height: 350px; padding: 20px 5%;}    
	
	.sermon p {    font-size: 15px; }
	.sermon h1{    font-size: 25px; margin-top: 10px; }
    .sermon h3 {    font-size: 20px; margin: 10px 0 10px; }
	
	.news h1 {    font-size: 40px;}
}

@media(max-width:500px) { 
	.welcome-icon > a {    width: calc( 50% - 20px); margin:10px;}
	.sermon {flex-wrap: wrap;background-size: 130% calc(100% - 350px - 600px);  }
	.sermon-right {    width:100%;   flex-wrap: wrap; height: 600px; }
	.sermon-right> a{width: 100%; text-align: center;}
	 .sermon-middle {    width:100%; padding: 50px 29px; height: 350px;     background-color: #1e2032;  }
	 .sermon-left {     width:100%;}
	 .sns h4 {    font-size: 15px;}
	 
	 /*.info>div {    height: 340px;}*/
	 
	 h1 {    font-size: 30px!important;}
	 h2 {    font-size: 20px!important;}
	 h4, p {    font-size: 15px!important;}
	 
	 .info-tab.tab2 a{font-size: 15px!important;}
	 .info-tab.tab2{display: flex;    flex-wrap: wrap;    justify-content: flex-start;}
     .info-tab > li{width:25%;}
	 .info-left  {    height: 65vw!important;}
	 
	 .gallery-bottom .g-box {    width: 100%;}
	 .g-box img{height:200px;}
	 .gallery-bottom >div:nth-of-type(3), .gallery-bottom >div:nth-of-type(4), 
	 .gallery-bottom >div:nth-of-type(5), .gallery-bottom >div:nth-of-type(6), 
	 .gallery-bottom >div:nth-of-type(10), .gallery-bottom >div:nth-of-type(11){ width: 50%;}
}