﻿#loginForm { margin-top:50px!important; }

/* common */
body{-ms-word-break: keep-all;
word-break: keep-all;}
.main-title { padding: 5px 80px; border:2px solid #000; display:inline-block; font-size:27px; margin:0px 0px 45px; font-weight:bold; text-align:center; }
#main-section1 { padding:30px 0 40px; }
#main-section1 hr { width:100px; margin-bottom:15px; margin-top:15px; border-top:2px solid #fff;}
.ms-1-right-top2 hr, .ms-1-left-bottom1 hr { width:100px; margin-bottom:15px; margin-top:15px; border-top:2px solid #fff!important;}
#main-section1 .ms-1-right-top2 hr { margin-bottom:19px; }
.ms-1-right-top1 hr { border-top: 2px solid #000 !important; }


.ms-1-left-top { width:100%; aspect-ratio:585/666;  background: url(../Images/bg_1_20242.png); background-position:center top; background-size:cover; }
.main_indroduce { position:relative; top:7%; text-align:center; color:white; }
.main_indroduce h1 { color:#fff; font-size:40px; font-weight:bold; margin:0 0 5px;}
.main_indroduce p { font-size:22px; color:#000; margin:0; font-weight:bold; }
.main_indroduce a { display:inline-block; color:#000; font-size:17px; font-weight:bold;  width:200px;padding:8px ;  text-decoration:none; background:rgba(188,206,228,0.7); }
.main_indroduce a:hover { background:#fff; transition:0.2s all; }
.main_indroduce a span { font-weight:bold; position:relative; margin-left:10px; top:-3px;}




.ms-1-right-bottom h1 { color:#fff; font-size:45px; font-weight:bold; margin:0 0 25px; text-shadow: 2px 2px 5px #0000008a; }
.ms-1-right-bottom p { font-size:17px; color:#fff; margin:0; font-weight:bold; text-shadow: 2px 2px 5px #0000008a; }
.ms-1-right-bottom a span { font-weight:bold; position:relative; margin-left:10px; top:-3px;}


.ms1-box { padding:0px;}
.ms-1-left-bottom1 { background: url(../Images/bg_4.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; aspect-ratio:292/320;  overflow: hidden;}
.ms-1-left-bottom1 h4 { text-align:center; color:#fff; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-left-bottom1 h5 { color:#fff; font-size:17px; font-weight:normal; margin:20px 0 0; text-align:center; }
.ms-1-left-bottom1:hover { opacity:0.8; transition:0.3s;}
.ms-1-left-bottom2 { background: url(../Images/bg_5.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; text-align:center; color:#000; text-decoration:none; aspect-ratio:292/320;  overflow: hidden;}
.ms-1-left-bottom2:hover { opacity:0.8; transition:0.3s;}
.ms-1-left-bottom2 h4 { text-align:center; color:#fff; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-left-bottom2 h5 { color:#fff; font-size:17px; font-weight:normal; margin:20px 0 0; text-align:center; }
.ms-1-left-bottom2 h6 { margin-top:10px; font-weight:600; font-size:16px;}
.ms-1-right-bottom ul li img { float:left; margin-right:20px; }

.ms-1-right-top1 { background: url(../Images/bg_2.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; text-align:center; color:#000; text-decoration:none; aspect-ratio:292/320;  overflow: hidden;}
.ms-1-right-top2 { background: url(../Images/bg_3_20242.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; text-align:center; color:#000; text-decoration:none;  aspect-ratio:292/320; overflow: hidden;}
.ms-1-right-bottom { background: url(../Images/bg_6_20242.png); background-position:center; background-size: 100% 100%; padding: 55px 0; text-align:center; color:#fff; text-decoration:none;  aspect-ratio:585/666; clear:both;}
.ms-1-right-top1 h4 { text-align:center; color:#000; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-right-top2 h4 { text-align:center; color:#000; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-right-top1 h5 { color:#000; font-size:17px; font-weight:bold; margin:20px 0 0; }
.ms-1-right-top2 h5 { color:#000; font-size:17px; font-weight:bold; margin:20px 0 0; }
#main-section1 .ms-1-right-top2 hr { border-top: 2px solid #000 !important; }
.ms-1-right-top1 p { font-size:15px; margin:0px 0px 3px; }
.ms-1-right-top2 p { font-size:12px; margin:0px 0px 3px; }
.ms-1-right-top1:hover, .ms-1-right-top2:hover { opacity:0.8; transition:0.3s;}
.ms-1-right-bottom h2 { font-size: 45px; font-weight:bold; margin-top:10px; margin-bottom:2px; }
.ms-1-right-bottom .sermon-box { padding: 5px 35px; border:1px solid #fff; display:inline-block; font-size:16px; margin-top:15px;}
.ms-1-right-bottom .sermon-box:hover { background-color:#fff; transition:0.2s; color:#000;}
.ms-1-right-bottom ul { margin-top:50px; text-align:center; }
.ms-1-right-bottom ul li { text-align:center; display:inline-block; width:200px; margin: 0 15px 15px; color: #000; font-size: 17px; font-weight: bold; text-decoration: none; background: rgba(255, 255, 255, 0.7);}
.ms-1-right-bottom ul li a { color:#333; text-decoration:none; }
.ms-1-right-top1 ul { font-size:17px; color:#fff; font-weight:bold; max-width:220px; margin:15px auto; border:1px solid #fff; padding:10px; background-color: rgba(0,0,0,.3); }
.ms-1-right-top1 li { clear:both; overflow:hidden; padding:3px 0; }
.ms-1-right-top1 li p { float:left; font-size:17px!important; margin:0; }
.ms-1-right-top1 li span { float:right; font-size:17px!important; }
.mini a { display:inline-block; color:#000; font-size:17px; font-weight:bold;  width:100%;  padding: 15px 15px; text-decoration:none; background:rgba(255,255,255,0.1); }
.mini a:hover { background:#fff; transition:0.3s all; }}

#main-section2 { background-color:#F3F4F6; padding:50px 0px; }
#main-section2 .container { text-align:center; }
#main-section2 a { color: #4e4e4f; text-decoration:none;}
#main-section2 .ms2-box { padding: 0px 30px;}
#main-section2 .ms2-box h4 { float:left; font-size:20px; font-weight:bold; }
#main-section2 .ms2-box h5 { float:right; font-size:17px; font-weight:bold; }
#main-section2 ul { clear:both; margin-top:0px;}
#main-section2 li { font-size: 15px; padding:10px 0px 0px; border-bottom:1px solid #d4d4d4; text-align:left;}
#main-section2 li:hover p { color:#1DB0BD; transition:0.2s all; }
#main-section2 li p { display:inline-block; margin:0; width:74%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

#main-section2 li span{ float:right;}
.ms2-quick { position:relative; top:0px; font-size: 20px !important; font-weight: bold;}
.ms2-quick li { border:1px solid #000 !important; padding:14px!important; margin-bottom:10px;}
.ms2-quick li:hover { background:white; transition:0.3s; }

#main-section3 { padding:50px 0px; text-align:center; }
#main-section3 li { display:inline-block; margin:0 7px;}
#main-section3 li img { width:100%; max-height:270px; }
#main-section3 li img:hover { opacity:0.7; transition:0.3s;}
.g_text{text-align: center; font-size: 16px; color:#333 ;}

@media (min-width:1200px) and (max-width:1499px) {

}

@media (min-width:993px) and (max-width:1199px) {
    #main-section3 li { width:21%;}
    #main-section2 li p { width:65%; }
    .main_indroduce h1 { font-size:35px; }
    .ms-1-right-bottom h1 { font-size:35px; }
}


@media (min-width:768px) and (max-width:992px) {
        #main-section3 li { width:43%; margin-bottom:20px; }
        #main-section2 li p { width:50%; }
    .main_indroduce h1 { font-size:35px; }
    .ms-1-right-bottom h1 { font-size:35px; }
    #main-section2 .ms2-box { padding:0 15px; }
.ms-1-left-bottom1 h5{font-size: 14px;}
}

@media (max-width:767px) {
    .ms-1-left-bottom1 hr {    width: 100px;    margin-bottom: 15px;    margin-top: 15px;    border-top: 2px solid #fff!important;}
    .ms-1-right-top1 hr, .ms-1-left-bottom2 hr {    width: 100px;    margin-bottom: 15px;    margin-top: 15px;    border-top: 2px solid #000;}

    .ms-1-left { margin-bottom:15px!important; }
    .ms-1-rigth { margin:0!important; }
    #main-mobile > div > div { margin:0; }
    	#main-section1 { padding:0px 0px;}
        .main-title { font-size:17px; }
        #main-section3 li { margin: 0 0 15px;}
        .main_indroduce h1 { font-size:25px;}
        .main_indroduce p { font-size:17px;}
        .main_indroduce a { font-size:15px; }
        .ms-1-right-bottom h1 { font-size:25px;}
        .ms-1-right-bottom p { font-size:14px; }
		.ms-1-right-bottom ul { margin-top:60px; text-align:center; }
		.ms-1-right-bottom ul li {  padding: 8px 15px; }
        .ms-1-right-bottom a { font-size:15px; }
        .ms1-box { margin-top:0px; margin-bottom: 0; }
        .ms-1-right-top2 { margin-bottom:15px; }
		

        #main-section2 li { font-size:13px; }
        #main-section2 ul { margin-bottom:25px;}
		.ms-1-left-bottom1 h5{font-size: 14px; font-weight: normal;}
		.ms-1-left-bottom2 h5{font-size: 14px; font-weight: normal;}
		.ms-1-right-top1 h5{font-size: 14px; font-weight: normal;}
		.ms-1-right-top2 h5{font-size: 14px; font-weight: normal;}
.ms-1-right-top1 li p { float:left; font-size:14px!important; margin:0; }
.ms-1-right-top1 li span { float:right; font-size:14px!important; }
}
