﻿/* style s */
/* style e */

#header {
    height: 40px;
}


.page-actions.btn-group { position:absolute; bottom:0px; right:0px; }


#main-section1 { position:relative; background:#ececec; }
#main-section1-inner { margin-top:30px; }
#main-section1-inner div div div > img:nth-child(2){position: absolute; left: 14px; bottom: 4px;}


.w2 {  display:none; cursor:pointer; }
#ms1i-third .w2:first-child, #ms1i-forth .w2:first-child { display:block; }

#main-section2 { padding:30px 0px; }
#main-section2 .row {  }
#main-section2 .row .col-xs-12 .ms2-box { height:100%; border:10px solid #D9E6EF; position:relative; cursor:pointer; transition:all ease 0.3s; }

#main-section2 .row .col-xs-12 .ms2-box:hover { border-color:#09A4C3; }

.circle { text-align:center; position:absolute; bottom:-25px; width:100%; }
.circle span { color:#fff; font-size:30px; font-weight:600; font-family:NanumBarunGothic; background:#000; padding:23px 15px; border-radius:50%; transition:all ease 0.3s; }

#main-section2 .row .col-xs-12 .ms2-box:hover .circle span { background:#09A4C3; }

#widget-sermon-img { /*height:100%;*/ height:375px;}

#widget-sermon { top:50px; right:40px; }
#widget-sermon p { color:#fff; }
#widget-sermon p.bdate, #widget-sermon p.btitle, #widget-sermon p.bbible{color:black;}
#widget-sermon p.bdate { font-size:16px;}
#widget-sermon p.btitle { font-size:32px;}
#widget-sermon p.bbible { font-size: 18px;  position:relative; left:4px;}
#widget-sermon p.viewbtn { border: 1px solid #dddddf; background:#a0a1a8; text-align: center; width: 139px; font-size: 19px; padding: 5px 0px; margin-top:30px; margin-left:140px;}
#widget-sermon button {  transition:all ease 0.3s; color:#fff; border:1px solid #B7BDBD; color:#FFFFFF; background:#878A8F;  padding:5px 40px; font-size:16px; }



.r0 { margin-bottom:30px; }
.r0 > div{height: 186.8px;}
.r0 > div img{height:100%;}

.r1 { display:flex; }
.r1 > div{height: 158.27px;}
.r1 > div > img{height:100%;}
.r1 div .viewbtn{position:relative; top:16px;}

.sfl, .sfr { font-size:80px; color:#fff; position:absolute; top:50%; z-index:10; margin-top:-40px; cursor:pointer; }
.sfl { left:5%; }
.sfr { right:5%;}

.main-board-wiget td a { color:#fff; text-decoration:none; }

.w1_sub { width:70%; margin:0 auto; top:20px; left:15%; display:none; }
.w1_sub table { width:100%; border:0px; }
.w1_sub table td { text-align:center; padding:5px 0px; transition:all ease 0.2s; }
.w1_sub table td:hover { background:RGBA(2,55,67,0.3); }
.w1_sub table td a { color:#fff; text-decoration:none; font-size:20px; font-family:NanumBarunGothic; font-weight:400; }


.btitle { 
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    -moz-binding: url(ellipsis.xml#ellipsis);
    max-width : 300px;
}

.sermon-table {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:0 15px;
}
.sermon-table table {
    width:100%;
    border:0;
}
.sermon-table table td {
    background:#525252;
    width:25%;
}

.sermon-table table td:hover{
    background:#333;
}

.sermon-table table td.active {
    background:#000;
}

.sermon-table table td a {
    display:inline-block;
    text-decoration:none;
    color:#fff;
    width:100%;
    padding:12px 0;
    text-align:center;
}

.sermon-table table td a span {
    vertical-align:middle;
    margin-left:10px;
}

#main-sermon-play { max-width: 100%; position: relative; margin: 0px auto; margin-top:24px; display: block; }


#main-section0 { margin-top:30px; }

#main-section0 div .border
{border: 1px solid #a0a0a0; position: absolute; left: 59px; top: 50%; margin-top:-92px; 
 color: white; background: rgba(0,0,0,0.4); text-align:center; padding: 45px; padding-bottom: 25px;}

#main-section0 div:nth-child(2) .border{padding-right:25px; padding-left:25px; white-space:nowrap;}
/*#main-section0 div:nth-child(4) .border{left:65px;}*/

#main-section0 div .border span:first-child{ font-size:26px; }

#main-section0 div .border span a{
    text-decoration:none;
    color:white;
}

#main-section0 div .border div span{
    width: 25px;
    display: block;
    border: 1px solid #938f8b;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -12px;
}



#main-section0 div div div{ position:relative;}

#main-section0 div div div img{width:100%;}

a{text-decoration:none; color:white;}



@media(max-width:1600px)
{
    #main-section1-inner { position:relative; margin-top:50px; }
}


@media(max-width:1200px){


    #main-section0 div .border{
        border: 1px solid #ede3de;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        background: rgba(0,0,0,0.4);
        text-align: center;
        padding: 25px;
        padding-bottom: 25px;
        top: 50%;
        margin-top: -70px;
    }

    #main-section0 div .border span:first-child{
        font-size:26px; white-space:nowrap;
    }

    
}

@media(max-width:991px){
    .sermon-table img {
        display:none;
    }

    #main-section1-inner div div div > img:nth-child(2){
        position: absolute;
        left: 20px;
    /*bottom: 74px;*/
        width:50%;
        /*height:353px;*/
        height:90%;
    }

    #widget-sermon{
            top: 100px;
        right: 25px;
        width:50%;
    }

    #gnb{
        float: left;
        padding: 30px 0px;
        margin-left: 10px;
    }

    #gnb-wrap img{
        height:30px;
    }

    #gnb > li{
        padding: 0px 3px;
    }

     #main-section0 div .border{
        border: 1px solid #ede3de;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        background: rgba(0,0,0,0.4);
        text-align: center;
        /*padding: 4px;*/
     }

     #widget-sermon p.viewbtn{margin:inherit;}
}

@media(max-width:768px)
{
    #main-section1-inner { position:relative; margin-top:15px; }
    #gnb-wrap .container a img { margin:15px 0px; }
    .swiper-pagination { bottom:10px !important; }
    #widget-sermon-img { height:inherit; }
    .col-xs-12.col-sm-6 { margin-bottom:15px; }
    .col-xs-12.col-sm-6 img { width:100%; }
    #sitemap-wrap { display:none; }
    #footer p { font-size:12px; }
    .r0 { margin-bottom:0px; }
    .r1 { display:inherit; }
    #main-section2 { padding:0px 0px 15px; }
    .col-xs-12.col-sm-3 { margin-bottom: 50px; }
    #widget-sermon { top:6px; right:15px; width:45%; }
    #widget-sermon p.bdate { font-size:12px; }
    #widget-sermon p.btitle { font-size:18px; width:100%; }
    #widget-sermon p.bbible { font-size:14px; }
    #widget-sermon button { font-size:12px; padding:3px 20px;}
    #main-sermon-play { width:60px; }


    
    .col-xs-6.col-sm-3:nth-child(odd) { padding-right:10px;}
    .col-xs-6.col-sm-3:nth-child(even) { padding-left:10px;}
    .ms2-box { margin-bottom:30px;      background-size: cover; }
    .ms2bc-title { font-size:32px; margin-top:5px; margin-bottom:5px; }
    .sermon-table table td { text-align:center; }
    .sermon-table table td a { font-size:12px;}
    #main-section1 > .container { padding:0px; }
    .r0 > div, .r1 >div { height:150px; overflow:hidden; margin-bottom:15px;}
    .r0 > div:first-child, .r1 >div:first-child{padding-right: 0;}
    .w1_sub table td a { font-size:20px; }

    #main-section1-inner div div div > img:nth-child(2){position: absolute; left: 20px; bottom: 3px; max-width:37.9%; height:90%;}

    #widget-sermon p.viewbtn{
        border: 1px solid #c1c1c1;
        text-align: center;
        width: 109px;
        font-size: 19px;
        padding: 5px 0px;
        background: #86898d;
        margin-top: -5px;
    }

    #widget-sermon {
        top:50%;
        right: 15px;
        margin-top:-73px;
    }

    #main-section0 div .border{border: 1px solid #ede3de; position: absolute; left: 50%; transform:translateX(-50%); color: white; background: rgba(0,0,0,0.4); text-align:center; padding:55px; margin-top:-33%;}

    .slider .slider-wrapper .slide img{
        height: 179px;
    }
}

@media(max-width:350px){
    .w1{
        top: 20px;
        left: 22px;
    }
    .w1 .wtitle{font-size:16px;}
}
