/*메인*/
#dimodePage{/*display: block!important; transform:translateY(-100px);*/}
.main-section1, .main-section2, .main-section3, .main-section4, .main-section5, .main-section6{overflow:hidden;}
.container{width:1500px; padding-right: 0; padding-left: 0;}

 


/* 슬라이드 */
.slider .move-btn {background:none!important;    padding: 42px 50px!important;}

video.s1-video {    transform: translateY(-8vw); width: 100vw;}
#mainSlider p{max-height:930px;}
.slide {    height: 48vw!important;}

/*section1 - 설교단*/

#main1 .row {    padding: 7% 0;}
#main1 .row >div{padding:0 15px; height:450px;background-size: contain;    background-position: 50% 50%;    background-origin: border-box;    background-repeat: no-repeat;}
#main1 .main1-1{/*background: url(/UserData/jj21/Layouts/jj21_Layout/Images/2.sermon_bg.png); */      padding: 0px!important; }
#main1 .main1-2-top{background: #789db9; height:160px; }
#main1 .main1-2-bottom{background: url(/UserData/jj21/Layouts/jj21_Layout/Images/choir_bg.png); height:275px; }
#main1 .row .main1-2 >div{padding:20px; background-size: cover;    background-position: 50% 50%;    background-origin: border-box;    background-repeat: no-repeat;}

.sermon-sbox4{border-bottom: 0px solid!important;}

#main1 .main1-3{background: url(/UserData/jj21/Layouts/jj21_Layout/Images/live_bg.png); }
.main1-1 >div {
    /*width: 45%;
    position: absolute;
    right: 13px;
    padding: 30px 20px;
    background: #07326fb0;*/
    overflow: hidden;
    height: 450px;
}
.main1-1  >div > a {    color: white; display:block; text-decoration:none; font-size: 17px; }
.main1-1  >div > a:hover img {    position: relative;    animation: aaa 0.4s infinite alternate; }
.main1-1 h2 {    font-size: 27px; margin-bottom: 75px;}
.main1-1 h4:nth-of-type(2) {    text-align: right; margin-bottom: 25px;}
.embed-responsive-16by9 {     height: 450px;}


.m1-title {    font-weight: bold;    font-size: 26px;    margin: 50px;}
.main1-2{    display: flex;    flex-direction: column;    justify-content: space-between;}
.main1-2 .m1-title{color:white;}
.main1-2  a{text-decoration:none; color:white; font-weight:bold; }
.main1-2  p{margin: 10px; font-size: 14px;}
.main1-2  .main1-2-bottom > div {    padding: 0 15px;}
.main1-2  .main1-2-bottom > div >div {    padding: 5px 0px; text-align: center;}
.main1-2 .main1-2-bottom > div >div:hover {    transform: translateY(-5px);transition: .3s all;}
.main1-2 .main1-2-bottom img{max-width:75px;}
.main1-2  .main1-2-top{text-align:left;}
.main1-2  .main1-2-top   a {padding: 10px 0; border-bottom:1px solid white;} 
.main1-2 .main1-2-top   a >img {    float: right;    margin-right: 20px;}
.main1-2  .main1-2-top  a:hover img {    position: relative;    animation: aaa 0.4s infinite alternate; }
.main1-2  .main1-2-top  a {    color: white; display:block; text-decoration:none; font-size: 17px; }
.main1-2{    display: flex;    flex-direction: column;    justify-content: space-between;}
.main1-2 .m1-title {     margin: 25px 0 40px; text-align: center;}


.main1-3{text-align:center;}
.main1-3 .m1-title{color:#093671;}
.main1-3 a{    font-size: 21px;    font-weight: bold;    color: #0b3571; text-decoration: none;}
.main1-3 a img {    margin-top: 30px;}
.main1-3 a:hover img {
    position: relative;
    animation: aaa 0.4s infinite alternate;
}

 
/*section2 - 진주갤러리*/
.main2T h1 {    font-size: 35px;    font-weight: bold;}
.main2T {    height: 100px;    margin: 80px 0 0px;}
.main2T ul{    display: flex;    flex-direction: row;    justify-content: flex-end;}
.main2T li {
    border: 1px solid black;
    padding: 15px 30px;

    text-align: center;
    font-size: 21px;
    font-weight: bold;

}
.main2T li a{ text-decoration:none; color:black;}
.main2T li.active{ background:#061e38;  }
.main2T li.active a{  color:white;}
#main2 {    background-image: linear-gradient(to bottom, #f0f4f7 40%, white 40%);     height: 1000px;}
#main2 .main2M  #next1 >a{}
#main2 .tab-content{ position:relative;}
#main2 .tab-content >div{ position:absolute; width: 100%;}
#main2 .tab-content2{display:none; transition: .3s all;}
#main2 .galleryIMG {    background-size: cover;    width: 100%;    height: 280px;}
#main2 .galleryT h4{color: black;    font-size: 23px;    font-weight: bold; margin: 20px 0 10px; overflow:hidden;      text-overflow:ellipsis;      white-space:nowrap;}
#main2 .galleryT p{    color: #b9b9b9;    font-size: 15px;   font-weight: bold;}
#main2 .galleryT img{   float:right;}
#main2 .galleryT:hover img {    position: relative;    animation: aaa 0.4s infinite alternate; }
#main2 .galleryT {    padding-bottom: 50px;}
#main2 a{text-decoration:none;}
.more{font-size: 30px; padding: 0 20px 0 30px;}

/*section3 - 주일학교소개*/
#main3  {padding: 7% 0;}
#main3 .main3M {
    background: url(/UserData/jj21/Layouts/jj21_Layout/Images/6.church_school_bg_3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 520px;
}
.m3-left {    width: 32%;    background: rgb(24, 143, 215,0.9 );    height: 520px;     padding: 50px 35px;}
.m3-left h1{color:white; font-weight:bold;}
.m3-left .col-xs-6 { float: initial; padding: 0 5px;}
.m3-left .col-xs-6 a{
	display:block; 
    border: 1px solid white;
    padding: 15px 0px;
    text-align: center;
    background: #ffffff14;
    border-radius: 36px;
    margin: 5px 0;
}
.m3-left > div {    display: flex;    flex-wrap: wrap;     margin-top: 160px;}
.m3-left a{    text-decoration: none;   color: white;     font-weight: bold;}
.m3-left a:hover{    background: #fff; color:black; transition: .3s all;}

/*section4- 교회안내*/
#main4  {
	padding: 4% 0 2%;
    background: url(/UserData/jj21/Layouts/jj21_Layout/Images/8.info_bg.png);
    background-repeat: no-repeat;
    background-size: cover; 
}
#main4 .row {    text-align: center;}
.main4T h1{font-size:38px; font-weight:bold;}
.main4T h3{ font-weight:bold;}
.main4M {    padding: 20px 25%; display: flex;}
.main4B {    padding: 50px 2%; display: flex;}
.main4M >div, .main4B >div {    float: initial;}
.main4M a {
    border: 2px solid #061e38;
    padding: 15px;
    display: block;
	border-radius: 36px;
	text-decoration: none;   
	color: #061e38; 
	font-size: 20px;
    font-weight: bold;
}
.main4M a:hover { color:white; }
.main4M a img{   margin-left:10px;}
.main4M a img:nth-of-type(2){  display:none;}
.main4M a:hover {  background:#061e38;}
.main4M a:hover img:nth-of-type(1){  display:none;}
.main4M a:hover img:nth-of-type(2){  display:initial;}

.main4B a {text-decoration: none;   	color: #000; font-size: 20px;    font-weight: bold; }
.main4B a p{padding:15px 0;}
.main4B div:hover  {    transform: translateY(-5px);transition: .3s all;}



/*section5 - 선교와 교제*/
#main5  {
	padding: 3% 0; 
    background: url(/UserData/jj21/Layouts/jj21_Layout/Images/9.mission_bg.png);
    background-repeat: no-repeat;
    background-size: cover; 
}
.main5L h1{font-size:38px; font-weight:bold; color:white;}
.main5L h3{ font-weight:normal;color:white;}
.main5RT {    padding-left: 200px;     display: flex;}
.main5RT a {
    background: white; 
    display: block;
    padding: 55px 0;
    text-align: center;
    border-radius: 80px;
	font-weight: bold;
	text-decoration: none;  
	color:black;
}
.main5RT a:hover {    background: #86bbe7; 	color:white;transition: .3s all;}
.main5RB >div {
    display: flex;
    flex-direction: row;
    padding: 20px;
    font-size: 20px;
    color: white;
    justify-content: space-between;
    border-bottom: 1px solid white;
}
.main5RB {    margin-top: 50px;}
.main5RB >div a{
    text-decoration: none;  
	color:white;
}
.main5RB >div >div:hover a{ 
	color:#bdd1ff; transition: .3s all;
}

.modal {z-index:2050 !important ;}
.modal-backdrop{z-index:1040 !important ;}
#myModal2025 .modal-dialog {
  width: 1000px; /* 원하는 픽셀 크기로 지정 */
  max-width: 90%; /* 화면이 작을 때 반응형 고려 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /* Bootstrap 기본 여백 제거 */
 
}

.Video_Box{ width:100%;}



@media(max-width:1520px) {
    .container{width:1270px;}
	.slider .move-btn {     max-width: 23vw;}
	#main1 .main1-3 { 
		background-size: cover!important;
		width: calc(25% - 15px);
		margin-left: 15px;
	}
	.main1-2 .main1-2-bottom img { max-width: 52px;	}
	.main5RT {    padding-left: 85px;}

}

@media(max-width:1320px) {
    .container{width:1170px;}
	.main5RT { padding-left: 40px;}
	.main5RB >div {     padding: 16px;    font-size: 17px;}
}

@media(max-width:1199px) {
	.container{width:960px;} 
	#main1 .row >div {     height: 350px; }
	#main1 .main1-2-top {     height: 135px;}
	#main1 .main1-2-bottom {     height: 200px;}
	#main1 .row .main1-2 >div {    padding: 10px;}
	.main1-2 .main1-2-bottom img { max-width: 35px;	}
	.embed-responsive-16by9 {    height: 350px;}
	.main1-2 .m1-title {    margin: 25px 0 15px;}
	.main1-2 p {    margin: 5px;    font-size: 12px;}
	.main1-2 .main1-2-top a {     font-size: 13px;}
	.m1-title {     font-size: 26px;    margin: 40px 30px;}
	.main1-3 a {    font-size: 15px; }
	
	#main2 .galleryT h4 {     font-size: 20px;}
	#main2 .galleryT img {     max-width: 30px;}
	.main2T li {     font-size: 18px; }
	
	.main4M {    padding: 20px 15%; }
	
	.main5RT { padding-left: 10px;}
	.main5RB >div {     padding: 15px;    font-size: 15px;}

}
@media(max-width:991px) {
	.container{width:730px;}
	
	#main1 .row >div {     height: 250px; }
	#main1 .main1-2-top {     height: 85px;}
	#main1 .main1-2-bottom {     height: 150px;}
	#main1 .row .main1-2 >div {    padding: 5px;}
	.main1-2 .main1-2-bottom img { max-width: 20px;	}
	.embed-responsive-16by9 {    height: 250px;}
	.main1-2 .m1-title {    margin: 25px 0 15px;}
	.main1-2 p {    margin: 5px;    font-size: 10px;} 
	.m1-title {     font-size: 15px;    margin: 30px 20px;}
	.main1-3 a {    font-size: 10px;   }
	.main1-2 .main1-2-top a >img {     max-width: 15px;}
	.main1-2 .main1-2-top a {    font-size: 10px; padding: 5px;}
	
	#main2 .galleryT h4 {     font-size: 16px;}
	#main2 .galleryT img {     max-width: 30px;}
	.main2T li {     font-size: 15px; }
	#main2 .galleryIMG {     height: 180px;}
	#main2 {     height: 820px;}
	
	.m3-left h1 {     font-size: 33px;}
	.m3-left .col-xs-6 {width:100%;}
	.m3-left > div {     margin-top: 80px;}
	
	.main4B a p {     font-size: 15px;}
	.main4M {    padding: 20px 5%;      flex-wrap: wrap;}
	.main4M a {     font-size: 17px;}
	.main4B {     flex-wrap: wrap;}
	
	.main5L.col-sm-6.col-xs-12 {    width: 35%;}
	.main5R.col-sm-6.col-xs-12 {    width: 65%;}
	.main5L h1 {    font-size: 33px;}
	.main5L h3  {     font-size: 20px;    line-height: 1.5; word-break: keep-all;}
	.main4T h3 {     word-break: keep-all;}
	.main5RT a {     padding: 45px 0;}

}
@media(max-width:767px) {
	.container{width:90vw;}
    /*모바일 플렉스*/
	.main1-1 >div {     height: 48vw;}
	#main1 .row >div {     padding:15px 0; height:330px;}
	#main1 .main1-2-top {     height: 135px;}
	#main1 .main1-2-bottom {     height: 150px;}
	#main1 .row .main1-2 >div {    padding: 13px;}
	.main1-2 p {    margin: 5px;    font-size: 13px;}  
	.main1-2 .main1-2-bottom img { max-width: 35px;	}
	.embed-responsive-16by9 {    height: 48vw;}
	.main1-2 .m1-title {    margin: 10px 0;} 
	.m1-title {     font-size: 25px;    margin: 10px 20px;}
	.main1-3 a {    font-size: 18px;   }
	.main1-2 .main1-2-top a >img {     max-width: 20px;}
	.main1-2 .main1-2-top a {    font-size: 15px; padding: 7px;}
	#main1 .main1-3 {    margin: 0;      width: 100%;    height: 150px !important;}
	#main1 .main1-1 {       height: 48vw!important;}
	.main1-3 a img {    margin-top: 10px;}
	.main2T li {     padding: 7px 0 ; }
	#main2 {     height: 750px;} 
	.m3-left {    width: 100%; }
	.m3-left .col-xs-6 {width:50%;}
	
	#main3 .main3M {     height: 235px;}
	.m3-left {     height: 235px;    padding: 10px 25px;}
	
	.main4M >div{margin: 5px 0; padding: 0px 5px;}
	.main4M {    padding: 20px 0%; }
	.main5L.col-sm-6.col-xs-12 {    width: 100%;}
	.main5R.col-sm-6.col-xs-12 {    width: 100%; padding-top: 50px;}
	.main5RT a {    padding: 55px 0;}
	.main5RB >div {     padding: 15px;    font-size: 17px; flex-wrap: wrap; }
	.main5RB {     margin-top: 10px;  }
	 
	.main4B a p {    font-size: 12px;}
	.main4M a {    font-size: 15px; padding: 15px 5px;}
	.main4M a img {    max-width: 4vw;     margin-left: 0;}
	
	.main4T h1, .m3-left h1, .main5L h1, .main2T h1 {    font-size: 28px; text-align: center;}
	.main4T h3 , .main5L h3{    font-size: 17px; margin-top: 10px; margin-bottom: 20px; text-align: center;}
	 
	.main2T {     margin: 30px 0; }
	#main2 .galleryT {   padding-bottom: 10px;}
	#main2 .galleryIMG {    height: 100px;}
	
	#main3 {    padding: 0% 0;}
	#main3 .container {    width: 100vw;    margin: 0;    padding: 0;}
	.m3-left > div {    margin-top: 25px;}
	.Video_Box{max-width:100%;}
}

@media(max-width:467px) { 
	.mobilebr {display:block;}

	.main2T .col-xs-6 {    width: 100%;}
	.main2T li {     margin: 0 10px;     display: flex;    flex-wrap: nowrap; padding: 10px;    word-break: keep-all;}
	div#next1 >a {    width: 100%;}
	div#next2 >a {    width: 100%;}
	#main2 {     height: 715px; overflow: hidden;} 
	.main4B {  padding: 25px 2%; }	
	
	.main5RT {     flex-wrap: wrap;}
	.main5RT a {    padding: 20px 0;    margin: 0px;}
	.main5RB >div {     padding: 0px;    font-size: 17px; border-bottom: 0px; }
	.main5RB >div >div {    padding:5px 0px; margin: 0 2%;text-align: center;  width: 45%;    font-size: 13px; border-bottom: 1px solid #f0f0f0;}
	
	.main4M a {  font-size: 12px; padding:  5px;}
	.main4B a p {    padding: 5px 0; word-break: keep-all;}
	
	.main5RT {    padding-left: 0; padding-bottom:15px;}
	.main5RT >div {    padding: 0px 5px;}
	.main5RT >div > a{    font-size: 12px;}
	.main5R.col-sm-6.col-xs-12 {    padding: 15px 0;}
	
	#main3 {    padding-top: 5%;}
	.main4B >div {padding: 0 10px;}
	
	.main5L h3 {     text-align:center; }
 

}