﻿#loginForm { margin-top:50px!important; }


.ms-1-left-top .slider .move-btn {display:block;}
.ms-1-left-top .slider .slider-dots .each-dot.active{ background: #ffffff; border-color: #ffffff; width:25px; border-radius:10px; opacity:1; transition:all ease-in-out .35s;}
.ms-1-left-top .slider .slider-dots .each-dot { background:#cecece; border-color:#cecece; opacity:0.7;}
/* common */

.main-title { padding: 5px 80px; border:2px solid #000; display:inline-block; font-size:27px; margin:0px 0px 55px; font-weight:bold; text-align:center; }
#main-section1 { padding:30px 0 40px; }
.ms-1-right-top2 hr { width:100px; margin-bottom:15px; margin-top:15px; border-top:2px solid #000;}
#main-section1 hr { width:45px; margin-bottom:20px; margin-top:15px; border-top:2px solid #fff;}
#main-section1 .ms-1-right-top1 hr { border-top:1.5px solid #000;}
#main-section1 .ms-1-left-bottom1 hr { width:100px; margin-bottom:30px; margin-top:15px; border-top:2px solid #fff; }
#main-section1 .ms-1-right-top2 hr { margin-bottom:19px; border-top:1px solid #fff; }

.main_indroduce { position:relative; top:15%; text-align:center; color:white; }
.main_indroduce h1 { color:#000; font-size:45px; font-weight:bold; margin:0 0 5px;}
.main_indroduce p { font-size:17px; color:#fff; margin:20px 0 0; text-align:left; padding:0 94px; }
.main_indroduce a { display:inline-block; color:#fff; font-size:17px; font-weight:bold; padding:8px 60px; margin-top:30px; text-decoration:none; background:#414A71; }
.main_indroduce a:hover { background:#fff; transition:0.2s all; color: #414A71; }
.main_indroduce a span { font-weight:bold; position:relative; margin-left:10px; top:-3px;}

.ms1-box { padding:0px;}
.ms-1-left-bottom1 { background: url(../Images/3_bg.png); background-position:center; background-size: 100% 100%; padding: 30px 0px; height:320px; }
.ms-1-left-bottom1 h4 { text-align:center; color:#fff; margin:0px; padding:3px; font-weight:bold; font-size:19px; }

.ms-1-left-bottom1:hover { opacity:0.8; transition:0.3s;}
.ms-1-left-bottom2 {
    background: url(../Images/4_bg.png);
    background-position: center;
    background-size: 100% 100%;
    padding: 30px 0px;
    text-align: center;
    color: #000;
    text-decoration: none;
    height: 320px;
}
#main-section1 .ms-1-left-bottom2 hr {border-top: 2px solid #000;}
.ms-1-left-bottom2 ul { border:2px solid #000; padding:10px 15px; font-size:15px; text-align:left; width: 235px;margin: 15px auto; transform: skew(-0.05deg);}
.ms-1-left-bottom2 ul li span { float:right; }
.ms-1-left-bottom2 ul li { overflow:hidden; padding:1px 0;}
.ms-1-left-bottom2 .generation {display: flex; flex-direction: column;  justify-content: center; align-items: center; grid-gap: 10px;}
.ms-1-left-bottom2 .generation a {background: rgba(255,255,255,0.7); width: 60%; padding: 5px; text-decoration: none; color: #000; transition: all .2s;}
.ms-1-left-bottom2 .generation a:hover { background: rgba(255,255,255,1); }
.ms-1-left-bottom2 h4 { text-align:center; color:#000; padding:3px; margin:0px; font-weight:bold; font-size:18px; }
.ms-1-left-bottom2 h5 { margin:0px; font-weight:normal; font-size:17px; line-height:25px;}
.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-bottom .gate2M { display: grid; grid-template-columns: 1fr 1fr; padding: 50px; gap: 15px;}
.ms-1-right-bottom a:hover {background: rgba(255, 255, 255, 1);}
.ms-1-right-top1 { background: url(../Images/5_bg.png); background-position:center; background-size: 100% 100%; padding: 30px 0px; text-align:center; color:#fff; text-decoration:none; height:320px;}
.ms-1-right-top1 table {border: none; display:flex; justify-content: center;}
.ms-1-right-top1 table td {padding: 3px; color: #000;}
.ms-1-right-top1 h5 { color:#000; font-size:20px; font-weight:normal; margin:0 0 0; font-weight:bold;}
.ms-1-right-top1 h4 { text-align:center; color:#000; margin:15px 0; font-weight:bold; font-size:19px; }


.ms-1-right-top1 .praise-box h3 { font-size:19px; color:#333; margin:0; font-weight:bold; }
.ms-1-right-top1 .praise-box h1 { margin:20px 0; font-size:30px; color:#333; font-weight:bold; }
.ms-1-right-top1 p { font-size:15px; margin:0px 0px 3px; }
.ms-1-right-top2 { background: url(../Images/6_bg.png); background-position:center; background-size: 100% 100%; padding: 30px 0px; text-align:center; color:#fff; text-decoration:none; height:320px;}
.ms-1-right-top2 > div { padding:30px 40px;}
.ms-1-right-top2 > div > ul { padding:10px 20px; background:rgba(255,255,255,.7); border:1px solid #000; }
.ms-1-right-top2 > div > ul > li { color:#000; font-size:14px; margin:5px 0; text-align:left;}
.ms-1-right-top2 > div > ul > li > span { float:right;}
.ms-1-right-top2 h4 { text-align:center; color:#fff; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-right-top2 h5 { color:#000; font-size:17px; font-weight:normal; margin:20px 0 0; line-height:25px; }
.ms-1-right-top2 p { font-size:12px; margin:0px 0px 3px; }
.ms-1-right-bottom { background: url(../Images/7_bg.png); background-position:left; background-size: cover; padding: 50px 0; text-align:center; color:#fff; text-decoration:none; height:692px; clear:both;}
.ms-1-right-bottom a { text-decoration:none; }
.ms-1-right-bottom a { background: rgba(255,255,255,0.7); color: #000; padding: 15px; transition: all .2s;}
.ms-1-right-bottom a h1 {font-size: 17px; margin: 0px;}
.sermon-box { width:435px; float:right; margin:60px auto 0;  padding:35px 25px; text-align:right; position:relative; }
.sermon-box ul { margin-top:30px; }
.sermon-box li { font-size:17px; color:#333; padding:3px 0; }
.sermon-box h5 { font-size:26px; color:#000; font-weight:bold; margin:0; }
.sermon_box_padding {
    padding-top: 50px;
}
.sermon-box p {
    color: #000;
    font-size: 1.3em;
    font-weight: normal;
}




    .sermon-box #sermonMore {
        position: absolute;
        right: 30px;
        bottom: 30px;
        font-size: 16px;
        padding: 0;
    }

.ms-1-right-bottom h3 {
    color: #000;
    font-size: 3em;
    font-weight: bold;
}
#main-section1 .ms-1-right-bottom hr {border-top: 2px solid #000;}
.ms-1-right-bottom h4 {
     color: #000;
    font-size: 20px;
}


.swiper-slide-next {
    background: url(../Images/common/slider_right.png) no-repeat;
    background-size: 50% auto;
    background-position: center;
}

.swiper-slide-prev {
    background: url(../Images/common/slider_left.png) no-repeat;
}

.ms-1-left-top .slider .slider-dots .each-dot.active {
    width: 10px;
}

.ms-1-left-top .slider .slider-dots .each-dot {
    background: #4E2910;
    border-color: #4E2910;
    opacity: 0.7;
}

.slider .slider-wrapper .slide img {
    position: relative;
    width: 100%;
}

.slider .slider-wrapper .slide p {
    height: 100%;
}


.slider .move-btn {
    background: none !important;
}

.sermon-box .button a {
    z-index: 1;
    padding: 8px 6px;
    font-size: 21px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000;
    width: 39%;
    position: relative;
    display: inline-block;
    transition: .5s all;
}

    .sermon-box .button a:hover {
        background: transparent;
        overflow: hidden;
    }

        .sermon-box .button a:hover:before {
            width: 120%;
            transform: translateX(0) skewX(-17.62deg);
            transform-origin: left top;
            background-color: #AB8C70;
        }

.sermon-box .button a:before{
    z-index: -1;
    content: "";
    display: block;
    width: 0%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateX(-101%) skewX(-17.62deg);
    transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: rgba(0,0,0,0);
}


#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:40px;}
#main-section2 li { font-size: 15px; padding:10px 0px 0px; border-bottom:1px solid #d4d4d4; text-align:left;}
#main-section2 li:hover p { color:#81c6ff; transition:0.2s all; }
#main-section2 li p { font-family:NanumBarunGothic; display:inline-block; margin:0; width:74%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#main-section2 li span{ float:right;}
.ms2-quick li { border:1px solid #000 !important; padding:14px!important; margin-bottom:10px;}
.ms2-quick li:hover { background:white; transition:0.3s; }
.ms2-quick { margin-top:45px!important; }

#main-section3 { padding:40px 0px 70px; text-align:center; }
#main-section3 li { display:inline-block; margin:0 13px; width:270px; }
#main-section3 li img { width:100%; max-height:270px; }
#main-section3 li img:hover { opacity:0.7; transition:0.3s;}
.paddingno { padding-right: 0px !important; padding-left: 0px !important;}
.photo a { display: block;}
.photo a img { background-position: 50%; width: 270px; height: 200px; background-size: cover;  }
.photo .p1 { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; color: white; font-size: 20px; width: 80%; word-break: keep-all;}
.photo .p2 { display: none; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); z-index: 2; color: white; font-size: 18px;}
.photo a:hover p { display: block;}
.photo a:hover img { filter: brightness(0.7); transition: all 0.2s ease-out;}
@media (min-width:1200px) and (max-width:1499px) {
	.main_indroduce p { padding:0 80px; }
    #main-section3 li {
        width: 263px;
    }
    .slider .slider-wrapper .slide img {
        height: 100%;
    }

    .slider .slider-wrapper .slide p {
        height: 100%;
    }

}

@media (min-width:993px) and (max-width:1199px) {
    .sermon-box h5 {
        font-size: 20px;
    }
    .main_indroduce p {
        padding: 0 30px;
    }

    .sermon-box p {
        font-size: 1.5em;
    }
    #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; }
    .slider .slider-wrapper .slide img {
        height: 100%;
    }
}


@media (min-width:768px) and (max-width:992px) {
	.ms-1-right-top1 .praise-box{width:325px;}
	#main-section3 li { width:48%; margin: 0 5px 15px; }
	#main-section2 li p { width:50%; }
	.main_indroduce h1 { font-size:35px; }
	.ms-1-right-bottom h1 { font-size:35px; }
	.main_indroduce p { padding:0 100px; font-size:22px; }
}

@media (max-width:767px) {
    .sermon-box .button a {
        width: 50%;
    }

    .ms-1-right-bottom h3 {
        font-size: 2.5em;
    }
    .ms-1-right-top1 .praise-box h1 {
        font-size: 20px;
    }
	
	.main_indroduce img { max-width:210px; }
	.ms-1-right-top1 .praise-box { height:auto;}
	.ms-1-right-top1 h5 { font-size:17px; }
	.ms-1-right-top1 .praise-box h3 { font-size:17px; }
	
	.ms-1-left-bottom1 hr { width: 100px; margin-bottom: 15px;  margin-top: 15px;  }
	.ms-1-right-top1 hr, .ms-1-left-bottom2 hr { width: 100px; margin-bottom: 15px; margin-top: 15px; border-top: 2px solid #000;}
	#main-section2 .ms2-box { padding:0 20px; }
	.ms-1-left { margin-bottom:15px!important; }
	.ms-1-rigth { margin:0!important; }
	#main-mobile > div > div { margin:0; }
	#main-section1 { padding:0px 15px;}
	.main-title { font-size:17px; margin-bottom:30px; }
	#main-section3 li { margin: 0 0 15px;}
	.ms-1-left-top .main_indroduce{ top:5%;}
	.main_indroduce h1 { font-size:25px;}
	.main_indroduce p { font-size:15px; padding:0 15px;}
	.main_indroduce a { font-size:15px; margin-top:15px; }
	.ms-1-right-bottom h1 { font-size:25px;}
	.ms-1-right-bottom p { font-size:15px; }
	.ms-1-right-bottom a { font-size:15px; }
	.ms1-box { margin-top:15px; }
	.ms-1-right-top2 { margin-bottom:15px; }
	.ms-1-left-top { height: auto; }
	.ms-1-right-bottom { height:390px; }
	#main-section2 li { font-size:13px; }
	#main-section2 ul { margin-bottom:25px;}
	#main-section2 .ms2-box h4 { font-size:17px; }
	#main-section2 { padding:30px 0; }
	#main-section3 { padding:30px 0; }
	.ms-1-right-bottom { padding:30px 15px; margin-bottom:15px; }
	.ms-1-right-bottom > img { max-width:120px; }
    .sermon-box {
        width: 100%;
        margin: 20px auto 0;
        background: rgba(255,255,255,0.7);
        padding: 20px 10px;
    }

    .sermon_box_padding {
        padding-top: 20px;
    }
    .sermon-box h5 {
        font-size: 18px;
    }
	.sermon-box ul { margin-top:15px; text-align:right;}
	.sermon-box #sermonMore { display:none; }
	.sermon-box li { font-size:15px; padding:1px 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
	.ms-1-right-top2 > div{ padding:30px 25px;}
	
}
