﻿/*메인*/
/*#dimodePage{display: block!important; transform:translateY(-100px);}
.main-section1, .main-section2, .main-section3, .main-section4, .main-section5, .main-section6{overflow:hidden;}
*/
.move-btn {background:rgba(0, 0, 0, 0)!important;}

.prev-btn{  left: 5%!important;}
.next-btn{     right: 5%!important;}

/*메인*/ 
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;
}

 
/*첫단*/
.first {
    padding: 5% 0%;
    width: 1315px;
    background: white;
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: center;
}

    .first a, .first a:hover, .first a:after, .first a:active, .first a:focus {
        color: white; display:block;
    }

.first h1{ font-size: 30px; font-family: 'Pretendard-Regular'; font-weight:bold; margin-bottom: 35px ;line-height:1.5; }
.first h2{font-size: 25px; line-height:1.2;      margin: 25px 0 ; font-weight: bold;}
.first h4{ font-size: 21px; line-height:1.6;    }
.first p{ font-size: 18px;}
.first hr{     border: 1px solid #87a3a7;    width: 55px;}

.ft-icon1 > div, .ft-icon2> div { margin:6px 0;height:366px; overflow: hidden;}

.first-top {    margin: 8px;}  
.ft101 {    background: url(../../../Layouts/dmchurch_Layout/Images/main/2.sermon_bg1.png);     text-align:left; }
.ft101 hr{margin: 15px 0 30px;}
.sermon-sbox1 {    width: 55%;     float: right;    background: #335c7ca3;    color:white;    padding: 3% 8% 12%;}

.ft102 {    background: url(../../../Layouts/dmchurch_Layout/Images/main/2.sermon_bg2.png);      color:white;}
.ft102 hr { border: 1px solid  #a0a0a0; margin-bottom: 32px;}
.sermon-sbox2 , .sermon-sbox3  {    padding: 20% 7%;}

.ft103 {    background: #335c7c;    color: white;} 
.ft103 hr {  margin-bottom: 32px;}
.ft103 img  {  padding: 9% 0 5%;}

.ft201 {    background: #5689a4;      color:white;}
.ft201 hr  { border: 1px solid  #87a3a7; margin-bottom: 32px;} 

.ft202 {      color:white;     padding: 0;    padding-right: 2px;}
.ft202 a{    display: flex !important;    align-items: center;    justify-content: center;}
.fi1, .fi2, .fi3, .fi4{background: #335c7c;   display:block; height:91px;  } 



.fi4, .fi1, .fi2{border-bottom:1px solid white;}
.fi1:hover{background: url(../../../Layouts/dmchurch_Layout/Images/main/2.nxt_hoverbg_3.jpg);  }
.fi2:hover{background: url(../../../Layouts/dmchurch_Layout/Images/main/2.nxt_hoverbg_1.jpg);   }
.fi3:hover{background: url(../../../Layouts/dmchurch_Layout/Images/main/2.nxt_hoverbg_2.jpg);    }
.fi4:hover{background: url('http://cms-dmchurch.dimode.co.kr/UserData/dmchurch/Layouts/dmchurch_Layout/Images/subtop6.jpg'); -webkit-background-size: ;
background-size:cover;   }
.ft202  h2 {color:white;      line-height: 1.37; ; margin:0;}

.ft203 {    background: #8d9ea6 ;    color:white; padding:25px 0!important;   }
.ft203 p {    margin: 10px 0 ;  text-align: left;}
.fi1, .fi2{}

.ft101, .ft102, .ft103, .ft201, .ft203{
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    padding: 0;
}
 .ft102, .ft103, .ft201, .ft202{width:315px;}
  .ft101, .ft203{width:642px; padding:0;}

.fb-icon >a{padding:0; display:block; position:relative;     width: calc(100% / 5 - 10px); }
.fb-icon h2{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; color:white;}

.first-bottom  {    margin-top: 60px;}


.songList-slide1 img {
    width: 90%;
    height: 100px;
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
}
.song .slick-list {     margin: 0 10%;}
.song .slick-prev1{left: 25px;}
.song .slick-next1{right: 25px;}

.ft203  hr { border: 1px solid #a4b1b7; margin-bottom: 40px;}


.sermon-sbox1 h1 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.ft201.col-sm-3  {    display: flex;    align-items: center;}
/* .sermon-sbox3  {    padding: 0% 5%;} */


/*환영*/
.welcome {
    padding: 2% 0;
    background: url(../../../Layouts/dmchurch_Layout/Images/main/3.welcome_bg.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
}
.welcome-left{width:60%;padding-left:300px;}
.welcome-right{width:40%;padding-right:300px;}
 
.welcome h1{ font-size: 40px;   font-weight:bold;  color:white; margin-top: 30px;    line-height: 1.3;}
.welcome h2{font-size: 22px; line-height:1.2;  font-weight:bold; text-align:center ;   padding: 36% 0;  }
.welcome h4{ font-size: 22px; line-height:1.6;  color:white; font-weight: bold; }
.welcome p{ font-size: 23px; color:white; margin:0;}
.welcome-icon  > a {
    width: 220px;
    height: 220px; 
    border-radius: 110px;
    display: block;
}
.welcome-icon > a:hover { transform:translateY(-5px); transition:all .2s linear; }
.welcome01{background: #0b509d; color:white;}
.welcome01:hover{  color:white;}
.welcome02{background: white; color:black;}

.welcome02 h2 {
    font-size: 19px; padding: 27% 0; line-height: 0.9;
}

 
/*주보 뉴스*/
.info {
    padding: 6% 15% 0;
}
.info-center {    background:#f9f9f9;     align-items: flex-start;}

.jubo{ background:#0b509d;     width: 260px;    height: 260px;    position: relative; padding: 40px 45px;}
.jubo   a{position:absolute; bottom:0; right:0;}


.jubo h1{   font-weight:bold;      font-size: 35px;    color: #90c7ff;}

.jubo h3{font-size: 35px; line-height:1.2;   color:white;   margin: 10px 0 40px;  }
.jubo h4{ font-size: 22px; line-height:1.6;  color:white; font-weight: bold; }
.jubo p{ font-size: 20px; color:white; margin:20px 0;}

.info1{position: initial!important;}
.infoList-slide >a {display:block;}
.infoList .slick-slide > div:nth-of-type(1), .infoList .slick-slide > div:nth-of-type(2){   border-bottom: 2px solid #ededed;}
.infoList {    width: 80%;    padding: 40px 45px; position: relative;     padding: 40px 165px 40px 45px;}
.slick-arrow{position:absolute; top:30px;  }
.slick-prev {    right: 100px;}
.slick-next {    right: 45px;}
.infoList h1{ font-size: 35px; color:#0b509d; font-weight:bold;  }
.infoList h1 a {color:#0b509d;}
.infoList p {    font-size: 22px;    color: black;    font-weight: bold;    margin: 25px 0;     overflow: hidden;}
.infoList p span{ font-size: 20px; color:#d9d9d9; margin:0;     overflow: hidden;}

 .infoList img{cursor:pointer;}


/*교육가훈련*/
.edu {
    padding: 6% 15%;
    align-items: flex-start;
}
.edu h1{font-weight:bold;     font-size: 33px;    color: black;}
.edu h4 {    font-size: 20px;    margin: 20px 0;}
.edu hr {    border-bottom: 3px solid;    width: 35px;    float: left;    margin: 10px 0px;}

.edu-right {width:67%;}
.edu-icon {flex-wrap:wrap;}
.edu-right h2 {    margin: 20px;     font-size: 25px;    font-weight: bold;}

.edu01 {background: url(../../../Layouts/dmchurch_Layout/Images/main/5.edu_1.png);}
.edu02 {background: url(../../../Layouts/dmchurch_Layout/Images/main/5.edu_2.png);}
.edu03 {background: url(../../../Layouts/dmchurch_Layout/Images/main/5.edu_3.png);}
.edu04 {background: url(../../../Layouts/dmchurch_Layout/Images/main/5.edu_4.png);}

.edu-icon > a {
    background-size: cover;
    background-position: 50% 50%;
    background-origin: content-box;
    background-repeat: no-repeat;
    text-align: left;
    height: 217px;
    color: white;
    padding: 5px;  
    margin: 5px 0;
}

.edu-icon > a:hover {
    filter:brightness(0.7);
    transition:all .2s linear;
}
 

/*교회행정*/
.center {
    padding: 5% 6%;
    background: url(../../../Layouts/dmchurch_Layout/Images/main/7.online_bg.png);
    background-size: cover;
    background-position: 50% 50%;
    background-origin: border-box;
    background-repeat: no-repeat;
    text-align: left;
    align-items: flex-start;
}

.center h1{font-weight:bold;     font-size: 33px;    color: black;}
.center h4 {    font-size: 20px;    margin: 20px 0;}

.center-right  {    width: 83%;}
.center-icon > a {    background: white;    height: 280px;     background-origin: content-box;       margin-left: 30px;text-align:center; padding: 17px;}
.center-icon > a:hover {    background: black;  transition:all .2s linear; }

.center-icon h2 {    font-size: 24px;    font-weight: bold;     height: 26%; line-height: 1.5;    margin-top: 19px;}     
.center-icon > a:hover h2,  .center-icon > a:hover h4  {   color: white;  transition:all .2s linear;}







/*서브탑*/
.sub-top { position: relative; height: 400px; width: 100%; top: 0px; z-index: 0; background-size: cover!important; background-position: 50% 50%!important;    -webkit-animation: zoomin 9s 1; animation: zoomin 9S 1;}
.sub-rel { position: relative; height: 400px; background: #000;}










#dimodePage .page-actions { 
    background: white;
}

@media(min-width:1320px) {
    .container{width:1300px;}
}

@media(max-width:1819px) { 
.welcome-left {    width: 50%;    padding-left: calc(50vw - 650px);}
.welcome-right {    width: 50%;    padding-right: calc(50vw - 650px);}
.welcome-icon{justify-content: flex-end;}
.welcome-icon > a {     margin: 10px; }

.edu-icon > a {     height: 10vw; }

.center-icon h2 {    font-size: 24px;     height: 5em; }
.center-icon > a {     height: 28em; }
}


@media(max-width:1319px) { 
	.first{width:100vw; padding: 5% 50px;}
	.ft101, .ft203 {    width: 49.2%; }
	.ft102, .ft103, .ft201, .ft202 {    width: 24%;}
	.first h2 {    font-size: 20px;}
	.first h1 {    font-size: 27px; }
	.ft202 h2 {     padding: ; }

.welcome-left {    width: 50%;    padding-left: 10vw;}
.welcome-right {    width: 50%;    padding-right: 10vw;}

.infoList {    width: 73%;     padding: 40px 13vw 40px 45px;}

.center-icon h2 {    font-size: 16px; }

}

@media(max-width:1199px) {
	.first{width:100vw; padding: 5% 50px;}
	.fb-icon h2 {     /*top: 1vw;*/}	
	 
}
@media(max-width:991px) {
	
	.flex {    flex-wrap: wrap;}
	.ft101, .ft203 {    width: 100%; }
	.ft102, .ft103, .ft201, .ft202 {    width: 49%;}
	.ft-icon1 > div, .ft-icon2> div {     height: 48vw;}
	.fi1, .fi2, .fi3, .fi4{ height:12vw;  } 
	.first h1 {    font-size: 35px;}
	.first h2 {    font-size: 30px;}
	.sermon-sbox1 {    width: 50%; }
	.ft202 h2 {     padding: 50px 8%; height: 16vw; }
	.songList-slide1 img {    width: 100%;    height: 40vw; }
	.slick-arrow {     top: 20vw;}
	.ft203 {height: calc(55vw + 150px)!important}
.fb-icon >a {width:40%; padding: 10px;}
.fb-icon{   justify-content: center;}
.first-bottom  {    padding: 0 0px;}
.infoList {    width: 100%; }
.infoList .slick-arrow {    top: 7vw;}
.jubo {     width: 100%; }

.edu-right {width: 100%; }
.edu-icon > a {     height: 17vw; }

.center-right{width:100%;}
.center-icon > a {     margin-left: 0px; width:24%;}
}

@media(max-width:850px) {
	.first h1 {    font-size: 30px;}
	.first h2 {    font-size: 25px;}
	
}



@media(max-width:767px) {
    /*모바일 플렉스*/
    .main-section6-wrap > .seciont6-line{display:flex;flex-direction:column;width: 100%;}
    .section6-1-left{order: 1;display: inline-block;width: 100%;}
    .section6-1-right{order: 2;display: inline-block;width: 100%;}
    .section6-2-left{order: 2;display: inline-block;width: 100%;}
    .section6-2-right{order: 1;display: inline-block;width: 100%;}
    .section6-3-left{order: 1;display: inline-block;width: 100%;}
    .section6-3-right{order: 2;display: inline-block;width: 100%;}
    .section6-4-left{order: 2;display: inline-block;width: 100%;}
    .section6-4-right{order: 1;display: inline-block;width: 100%;}

    /**/
    .section4-3-box1{margin-bottom:15px!important;}
    .section4-3-box2{margin-bottom:15px!important;}
    .section4-3-box3{margin-bottom:15px!important;}
    .section4-3-box4{margin-bottom:15px!important;}
    .ham-wrap, .notice-wrap{padding:0px!important;text-align:center;}
    .office-wrap{padding:0px!important;}
    .uuchunchung-box{padding:15px 0px;}
    .main-section1{display: flex;flex-direction: column;}
    .section2-1{padding-top:0px; word-break:keep-all;}
    .section2-2-title{margin:50px 0px 30px;}
    .section3-2-left,.section3-2-right{text-align:center;padding:30px 0px;}
    .notice-wrap{width:100%; left:0%; text-align:center;}
    .office-wrap{width:100%; right:0%; text-align:center;}
    .news-wrap{width:100%;right:0%; text-align:center;}
    .ham-wrap{width:100%;left:0%; text-align:center;}
	
	
	
	/**/
	
	.first h1 {    font-size: 24px;}
	.first h2 {    font-size: 20px;}
	.ft202 h2 {    padding: 6vw 8%; }
	.sermon-sbox2, .sermon-sbox3 {    padding: 13% 7%;}
	.fb-icon >a {width:50%;}
	.fb-icon h2 {    /*top: 4vw;*/}

.welcome h1 {    font-size: 30px; }
.welcome h2 {    font-size: 18px; }
	.welcome-icon > a {    width: 190px;    height: 190px; }
.center-icon > a {     margin-left: 0px; width:49%;     margin: 1vw 0;}
}

@media(max-width:600px) {
.first{ padding: 5% 0px;} 
.ft102, .ft103, .ft201, .ft202 {    width: 100%; }
.sermon-sbox1 {    width: 60vw; text-align: left;  height: 100%;}
.sermon-sbox2, .sermon-sbox3 {    padding: 3% 7%; width: 100%;}
.ft-icon1 > div, .ft-icon2> div { height: auto;}

.ft101 {background-position: 0 50%; aspect-ratio:646/369; height: unset;}
.ft101 hr ,.ft102 hr,.ft201 hr ,.ft103 hr {margin-bottom: 10px;}

.song .slick-list {    margin: 0px 17%;}

.welcome-left {    width: 100%;    padding: 2% 5vw;}
.welcome-right {    width: 100%;    padding-right: 0vw;}
.welcome-icon {    justify-content: center;}

.info {    padding: 6% 5% ;}
.edu {    padding: 6% 5%; }

.infoList p , .infoList p span {    font-size: 18px;}


.first h1{ font-size: 22px;font-weight:bold; margin-bottom: 10px ;line-height:1.2; }
.first h2{font-size: 18px; line-height:1.2;      margin: 10px 0 ; font-weight: bold;}
.first h4{ font-size: 16px; line-height:1.6;   margin: 0; }
.fb-icon h2 { margin:0;   }
.edu h1{ font-size: 24px;  }
.edu h2{font-size: 18px;}
.edu h4{ font-size: 16px;}
.first-bottom { margin-top: 20px;}
}



@media(max-width: 450px) { 
.fb-icon >a {width:100%;}
	.fb-icon h2 {   /* top: 9vw;*/}
.edu-icon > a {    height: 35vw; width:100%;}
}