﻿

.slider .slider-wrapper .slide img{width:100%;}
.slider .move-btn.next-btn {background: url(../Images/sermon_right_button.png)no-repeat; z-index: 10;}
.slider .move-btn.prev-btn {background: url(../Images/sermon_left_button.png)no-repeat;z-index: 10;}
.slider .move-btn {width: 0; margin: 0 10px;}



/* ms + slide txt */
#main-section1 > div > div > div > .ms {position: relative; top: 0; left: 0; width: 100%; margin: 0 auto;}
.sermonIntro {
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
    color: #000;
    transform: translateY(-50%);
    /*transform: translate(-50%, -50%);*/
}
.sermonIntro a {display: block;  color: #000;}
.sermonIntro h2 {font-weight: bold; font-size: 4rem;}
.sermonIntro p {font-size: 2.4rem; text-transform: uppercase;}
.sermonIntro .sermon-bot {
    text-align: left;
    width: 100%;
    margin: 0 auto;
    padding: 35px;
    box-sizing: border-box;
}
.sermonIntro .sermon-bot h3 {font-weight: bold; word-break: keep-all; line-height: 1.4;}
.sermonIntro .sermon-bot p {font-size: 1.7rem; font-weight: 600;}
.sermonIntro .sermon-bot p.date { margin-top: 35px;}
.sermonIntro .sermon-bot p.date img {margin-left: 35px; transition: all .3s ease-in-out; cursor: pointer;} 
.sermonIntro .sermon-bot p.date img:hover {transform: translateX(10px);}

/* ms1 l */
#main-section1 { padding:50px 0px;}
#main-section1 hr {width: 10%; margin: 10px auto; border: 0.5px solid; margin-bottom: 15px;}
.ms-1-left-bottom1 hr {border-color:#000;}
.ms1-box { padding:0px;}
.ms-1-left-top { width:100%; /*height:666px; background: url(../Images/introduction.png); background-position:center; background-size: 100% 100%;*/ }
.main_indroduce { position:relative; top:13%; text-align:center; color:white; }
.main_indroduce span:first-child { font-size:42px; font-weight:bold; letter-spacing:3px; }
.main_indroduce span:nth-child(3) { font-size:19px; }
.main_indroduce div { margin-top:24px; }
.main_indroduce div span:first-child { font-size: 15px; font-weight: bold; border:1px solid white; padding:10px 75px; }
.main_indroduce div a { text-decoration:none; color:white; }
.main_indroduce div span:hover { background-color:white; color:black; transition: 0.3s;}
.ms-1-left-bottom1 {
    width: 100%;
    background: url(../Images/location.png);
    background-position: 50% 50%;
    background-size: cover;
    padding: 30px 10px;
    text-align: center;
    height: 339px;
    color: #000;
    position: relative;
    font-weight: bold;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
.ms-1-left-bottom1 a {color:#fff; text-align: center;margin: 0px;font-size: 22px;letter-spacing: 0px;display: inline-block;width: 100%;text-decoration: none;}
.ms-1-left-bottom1 h4 { text-align:center; margin:0px; font-size:22px; letter-spacing:0px;}
.ms-1-left-bottom1 h5{text-align: center;font-size: 15px;margin: 10px 0 5px;}
.ms-1-left-bottom1 ul { text-align:center;}
.ms-1-left-bottom1 ul li {font-size:22px; letter-spacing: 0;}
.ms-1-left-bottom1 ul li span { text-align:left; position:absolute; left:55%; }
.ms-1-left-bottom2 {
    background: url(../Images/bulletin.png);
    background-position: 50% 50%;
    background-size: cover;
    padding: 30px 10px;
    text-align: center;
    color: #000;
    text-decoration: none;
    height: 339px;
    font-weight: bold;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
.ms-1-left-bottom1:hover,
.ms-1-left-bottom2:hover { opacity:0.8;}
.ms-1-left-bottom2 h4 {text-align: center;margin: 0px;font-size: 22px;letter-spacing: 1px; }
.ms-1-left-bottom2 h5 { margin:0px; font-weight:bold; font-size:20px;}
.ms-1-left-bottom2 h6 {margin-top: 10px;font-size: 17px;letter-spacing: 0; line-height:1.4;}
.ms-1-left-bottom2 .ms-1-left-bottom2_btn{margin-top: 25px;}
.ms-1-left-bottom2 .ms-1-left-bottom2_btn .cont_btn{padding: 10px 65px;font-size: 16px;font-weight: bold;color: #fff;border: solid 1px #fff;}
.ms-1-right-bottom ul li img { margin-right:10px; position:relative;bottom:3px;}

/* ms1 r */
.ms-1-right-top1 {
    background: url(../Images/worship_time.png);
    background-position: center;
    background-size: 100% 100%;
    padding: 30px 10px;
    height: 340px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: relative;
    text-align: center;
    transition: all .3s ease-in-out;
}
.ms-1-right-top2 {
    background: url(../Images/online_sns.png);
    background-position: center;
    background-size: 100% 100%;
    padding: 30px 10px;
    height: 340px;
    text-align: center;
    position: relative;
    transition: all .3s ease-in-out;
}
.ms-1-right-top2 a {color: #fff;font-weight: bold;}
.ms-1-right-top2:hover,
.ms-1-right-top1:hover { opacity:0.8;}
.ms-1-right-top1 .ms-1-right-top1-1{padding: 30px 10px;height: 170px;float: left;width: 100%; background-position:center; background-size: 100% 100%; background-repeat: no-repeat;}
.ms-1-right-top1 .live-on-img{background-image: url(../Images/5_education_bg_2_on.png);}
.ms-1-right-top1 .live-off-img{background-image: url(../Images/5_education_bg_2_off.png);}
.ms-1-right-top1 .ms-1-right-top1-2{padding: 30px 10px;height: 170px;float: right;width: 100%; background: url(../Images/5_education_bg_1.png); background-position:center; background-size: 100% 100%;}
.ms-1-right-top1 .ms-1-right-top1-1 h4,.ms-1-right-top1 .ms-1-right-top1-2 h4 { text-align: center;color: #fff;margin: 0px;font-size: 22px;letter-spacing: 0px;  }
.ms-1-right-top1 h6{text-align: center;color: #fff;margin: 0px;font-size: 17px;letter-spacing: 0px; line-height:1.4;}
.ms-1-right-bottom {
    width: 100%;
    background: url(../Images/youtube_channel.png);
    background-position: 50% 50%;
    background-size: cover;
    padding: 100px 40px;
    text-align: center;
    text-decoration: none;
    height: 665px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.ms-1-right-bottom a {
	display: block;
    width: 100%;
    height: 100%;
	cursor: pointer;
	color: #000;
	}
.ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents hr {color: #000;}
.ms-1-right-top2 .ms-1-right-top2-1{padding: 30px 10px;height: 170px;float: left;width: 100%;background: url(../Images/3_location_bg_1.png); background-position:center; background-size: 100% 100%;}
.ms-1-right-top2 .ms-1-right-top2-2{padding: 30px 10px;height: 170px;float: right;width: 100%; background: url(../Images/3_location_bg_2.png); background-position:center; background-size: 100% 100%;}
.ms-1-right-top2 .ms-1-right-top2-1 h4,.ms-1-right-top2 .ms-1-right-top2-2 h4 { text-align: center;color: #fff;margin: 0px;font-size: 22px;letter-spacing: 0px;  }
.ms-1-right-top2 h6{text-align: center;color: #fff;margin: 0px;font-size: 17px;letter-spacing: 0px; line-height:1.4;}
.ms-1-right-top1 h4 { text-align: center;margin: 0px;font-size: 20px;letter-spacing: 0px;  }
.ms-1-right-top1 p {margin-top: 10px;font-size: 17px;letter-spacing: 0;text-align:center;}
.ms-1-right-top2 h4 { text-align: center;margin: 0px;font-size: 20px;letter-spacing: 0px;  }
.ms-1-right-top2 p { margin-top: 10px;font-size: 18px;letter-spacing: 0;text-align:center;}
.ms-1-right-top2 img{margin-top: 30px;}
.ms-1-right-top1 .ms-1-right-top1-1 p,.ms-1-right-top1 .ms-1-right-top1-2 p,
.ms-1-right-top2 .ms-1-right-top2-1 p,.ms-1-right-top2 .ms-1-right-top2-2 p {    margin-top: 10px;
font-size: 22px;color: #fff;letter-spacing: 1px;}
.ms-1-right-top1 .ms-1-right-top1-1 hr,.ms-1-right-top1 .ms-1-right-top1-2 hr,
.ms-1-right-top2 .ms-1-right-top2-1 hr,.ms-1-right-top2 .ms-1-right-top2-2 hr{color:#fff;}
.ms-1-right-top1 > a > .ms-1-right-top1-1:hover,.ms-1-right-top1 > a > .ms-1-right-top1-2:hover,
.ms-1-right-top2 > a > .ms-1-right-top2-1:hover,.ms-1-right-top2 > a > .ms-1-right-top2-2:hover,.ms-1-right-top1 > ms-1-right-top1-1:hover
{ opacity:0.8; transition:0.3s;}
.ms-1-right-bottom .ms-1-right-bottom1 .sermon-title{font-size: 40px;font-weight: bold;color: #fff;letter-spacing: 5px;}
.ms-1-right-bottom h2 { font-size: 45px; font-weight:bold; margin-top:10px; margin-bottom:2px; }
.ms-1-right-bottom .sermon-box { padding: 10px 40px; border:1px solid #fff; display:inline-block; font-size:16px; margin-top:15px;margin-bottom: 30px;}
.ms-1-right-bottom .sermon-box:hover { background-color:#fff; transition:0.2s; color:#000;}
.ms-1-right-bottom ul li {text-align: left;font-size: 15px;margin-bottom: 10px;width: 55%;margin-left: 130px;text-overflow: ellipsis;
    white-space: nowrap; overflow: hidden;}
.ms-1-right-bottom ul li:nth-child(1){font-size: 24px;white-space: normal;
line-height: 1.4;height: 4em;text-align: left;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 3;
-webkit-box-orient: vertical;overflow: hidden;}
.ms-1-right-bottom ul li:nth-child(2){font-size: 16px;}
.ms-1-right-bottom ul li:nth-child(3){font-size: 20px;}
.ms-1-right-bottom ul li:nth-child(4){font-size: 20px;}
.ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents a {width: 100%; position:relative; color: #000; text-align: center;}
.ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents p.title {font-size: 4rem; font-weight: bold;}
.ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents p.title2 {font-size: 2.5rem;}
.ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents .sermon-btn{margin-top:15px; position:relative; display:inline-block; opacity:0.7;}
.ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents .sermon-btn:hover,
.ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents .sermon-btn:focus{opacity:1; transition: 0.2s all;}


/* ms 2 */
#main-section2 { width: 100%; overflow: hidden; background-color:#eee; padding:40px 0px; }
#main-section2 .container { text-align:center; padding: 0;}
.main-title {padding: 5px 35px;border: 1px solid #000;display: inline-block;font-size: 2.2rem; margin-bottom:40px;font-weight: bold; text-align: center;letter-spacing: 1px;}
#main-section2 a { color: #4e4e4f; transition: all .2s ease-in-out;}
#main-section2 a:hover li{font-weight:bold;}
#main-section2 .ms2-box { padding: 0px 20px;}
#main-section2 .ms2-box h4 { float:left; font-size:2rem; font-weight:bold; }
#main-section2 .ms2-box h5 { float:right; font-weight:bold; margin:15px 0;}
#main-section2 ul { clear:both; margin-top:50px; position: relative; top: 0; left: 0; overflow: hidden;}
#main-section2 li { 
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; position: relative; top: 0; display: flex; justify-content: space-between; font-size: 1.6rem; padding: 10px 5px 0; border-bottom:1px solid #d4d4d4; text-align:left;}
#main-section2 li p:nth-of-type(1) { width: 70%; display: block; margin:0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
#main-section2 li p:nth-of-type(2) { position:relative; right: 0; float: right; /*margin-right: 10px;*/}
#main-section2 li:hover { background-color:rgba(255,255,255,0.5); transition:0.3s; border-radius:1px; }
.ms2-quick > a > li { padding: 13px!important; margin-bottom: 10px; border: 1px solid #d4d4d4; transition: all .2s ease-in-out;}
.ms2-quick li:hover { background:white; }

/* ms 3 */
#main-section3 { width: 100%; margin: 0 auto; overflow: hidden; padding:40px 20px; box-sizing: border-box;}
#main-section3 div.swiper-container .gallery .swiper-slide { }
#main-section3 div.swiper-container .gallery .swiper-slide a {display: inline-block; width: 100%; height: 100%;}
#main-section3 div.swiper-container .gallery .swiper-slide a img { display: block; width: 100%; height: 185px; transition: all .25s ease-in-out;} 
#main-section3 div.swiper-container .gallery .swiper-slide a img:hover { opacity: .8;}




@media (max-width:1499px) {
    .ms-1-right-bottom ul li{width: 55%; margin-left: 110px;}
    .sermonIntro .sermon-bot {left: 0;}
    #main-section2 {padding: 40px 20px;}
}



@media (max-width:1199px) {
	.sermonIntro { width: 70%}

    .ms-1-left-bottom1 .ms-1-table tbody tr td {font-size: 15px;}
    .ms-1-right-bottom2 {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }
    .ms-1-right-bottom2 .sermon-title {font-size: 2rem; color: #333; font-weight: bold; white-space: nowrap;}
    .ms-1-right-bottom {
        /* height: unset; */
        overflow: hidden;
        background-size: cover;
        background-position-y: 55%;
        position: relative;
        top: 0;
        left: 0;
    }
    
    .sermonIntro h2,
    .ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents p.title {font-size: 3rem;}
    .sermonIntro p,
    .ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents p.title2 {font-size: 2rem;}
    .ms-1-right-bottom ul li{width: 75%; margin-left: 80px;}

    .ms-1-left-bottom2 h6 {font-size:16px;}
    .ms-1-left-bottom2 .ms-1-left-bottom2_btn .cont_btn {padding: 10px 30px;}
    #main-section3 .galley-main .gallery-div a .gallery-img{width: 220px; height: 160px;}
    
}

@media (max-width:991px) {


    .ms2-quick li { padding: 11px!important; }

	
    .ms-1-right-bottom ul li {margin-left: 185px;}
	
    .sermon-title {color: white; font-weight: bold;}

    #main-section3 .galley-main .gallery-div{width:50%; text-align:center;}
    #main-section3 .galley-main .gallery-div a .gallery-img{width: 340px; height: 230px;}

}

@media (max-width:767px) {
	.sermonIntro .sermon-bot {padding: 0 20px;}

	.ms2-quick li { padding: 11px!important; }
    .ms-1-left-bottom1,S
    .ms-1-left-bottom2 {background-position: 0 30%; padding: 50px;}
    .ms-1-right-top1,
    .ms-1-right-top2, .ms-1-left-bottom2 {padding: 50px 25px;}


    #main-section2 .ms2-box{padding: 0px 10px; padding-top: 20px;}
    .ms-1-right-bottom ul li{margin-left: 185px;}
  
    #main-section3 .galley-main .gallery-div{width:100%; text-align:center;}
    #main-section3 .galley-main .gallery-div a .gallery-img{width: 340px; height: 230px;}
    .ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents p:nth-child(1) string{font-size:30px; float:left;}
    .ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents p{font-size:18px;width: 60%;word-break: keep-all;}
    .ms-1-right-bottom .ms-1-right-bottom1 .ms-1-right-bottom1-contents .sermon-btn{margin-top: 85px;}
    .ms-1-left-bottom1 img{transform: translate(125%,-50%);}
    #main-section1 {padding: 20px 15px;}
    #main-section2 li span{margin-right: 0px;}



   
}


@media (max-width: 414px) {
    .ms-1-right-bottom {
        height: 340px !important;
        background-position: 50% 75%;
        padding: 0;
    }

    .ms-1-right-top2 .sns {display: flex; justify-content: space-around;}
    /*.sermonIntro {top: 50%;}*/
	.sermonIntro {top: 45%; padding: 0;}
    .sermonIntro .sermon-bot p {font-size: 1.4rem; word-break: keep-all;}
    .ms-1-right-bottom2 .sermon-title, .sermonIntro h2, .sermonIntro .sermon-bot h3, .ms-1-left-bottom1 p.title {font-size: 1.7rem;}
    .sermonIntro > p:nth-of-type(1), .sermonIntro .sermon-bot > p:nth-of-type(1) {font-size: 1.3rem;}
    .sermonIntro .sermon-bot p.date img { margin-left: 10px;}
	/* #main-section3 div.swiper-container .gallery .swiper-slide {width: auto!important;} */


}
