﻿/* style s */
/* style e */
.slider .slider-dots .each-dot.active {
    background: #007aff !important;
    border-color: #007aff !important;
}
#main-section1 .slider .move-btn {
    background: unset;
    position: absolute;
    top: 50%;
    margin-top: -40px;
    cursor: pointer;
    padding: unset;
}
    #main-section1 .slider .move-btn.prev-btn {
    left:5%;
    }
    #main-section1 .slider .move-btn.next-btn {
        right: 5%;
    }
    .slider .slider-dots .each-dot {
        width: 8px !important;
        height: 8px !important;
    }


#sitemap-wrap { background:#E9F4FA; margin-top:30px; }
#sitemap > li { float:left; padding:0px 20px; }
.page-actions.btn-group { position:absolute; bottom:0px; right:0px; }


#main-section1 { position:relative; background:#ececec; }
#main-section1-inner { width: 100%; overflow: hidden; margin: 30px auto;}

#ms1i-third .w2:first-child, #ms1i-forth .w2:first-child { display:block; }

/*#widget-sermon-img { height:100%; }*/

.r0 { margin-bottom: 20px; }
.r1 { display:flex; }

.sfl, .sfr { font-size:80px; color:#fff; z-index:10;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 : 200px;
}

.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; }

/* bootstrap */
.row {margin-right: -10px; margin-left: -10px;}
.col-sm-6, .col-sm-12 {padding-left: 10px; padding-right: 10px;}

.title {font-size: 2.5rem; margin: 0;}
.title2 {font-size: 2rem; margin: 0;}

.box {display: block; opacity: 1; transition: all .25s ease-in-out;}
.box > img {box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; width: 100%;}
.box:hover, #s2 div ul li:hover {opacity: .75;}

#main-section1-inner > div > div > div:nth-child(1).box:hover {opacity: 1;}


/* S2 */
#s2 {width: 100%;margin: 0 auto 80px;overflow: hidden;}
#s2 div div.flex {justify-content: space-between;}
#s2 div ul li {
    width: 100%;
    height: 190px;
    background-position: 100% 100% !important;
    background-size: cover !important;
    overflow: hidden;
    position: relative; 
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
#s2 div ul li:nth-child(2) {margin: 0 15px;} 
#s2 div ul li p {font-family: 'yg-jalnan';}
#s2 div ul li a {
    display: block;
    text-align: center;
    color: #000;
    font-weight: bold;
    transition: all .3s ease-in-out;
    position: relative;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    /*padding: 20px 10px;*/
    z-index: 1;
}



/* responsive */
@media(max-width:1600px){ #main-section1-inner { position:relative; margin-top:50px; }}

@media(max-width:1199px){
    /* default */

    .w1 .wtitle, .w2 .sermonBox li a p {font-size: 1.7rem;}
    .weng {font-size: 1.4rem;}

    .w2 .wtitle {font-size: 2.2rem; letter-spacing: .5px;}
    .w2 .sermonBox li a h3.sermon {font-size: 2rem; display: block; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}

}

@media(max-width: 992px) {
    /* default */ 
    .r0 { margin-bottom: 15px; }
    .w1 .wtitle, notice-title a h3 {font-size: 1.8rem;}
    .weng, .notice-title p {font-size: 14px;}
    #main-section1-inner {margin: 25px auto;}

    .w1, .w2 {left: 0; top: 0; padding: 20px 35px; box-sizing: border-box; width: 100%; overflow: hidden;}
    .w2 .sermonBox {margin-top: 20px; width: 100%;}
    .w2 .sermonBox li a { white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}

    #s2 {margin-bottom: 30px;}
   #s2 div ul li p {font-size: 16px;}
}

@media(max-width: 768px) {
    /* default */ 
    #main-section1 .slider .move-btn { display: none;}
    #main-section1-inner { position:relative; margin:25px auto 0; }
    /*#gnb-wrap .container a img { margin:15px 0px; }*/
    #widget-sermon-img { height:inherit; margin-bottom: 15px;}
    .col-xs-12 .col-sm-6 { margin-bottom:15px; }
    .col-xs-12.col-sm-6 > img { width:100%; }

    .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:30px; right:35px; }
    #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: 200px;*/ overflow:hidden; margin-bottom: 15px; }
    .r0 > div img, .r1 > div img {/*object-fit: cover;*/ /*height: 100%;*/}
    .w1_sub table td a { font-size:20px; }



    /* togethershinil */
    .col-xs-12.col-sm-6 > img { height: 200px; object-fit: cover;}
    #s2 {margin:0 auto 40px;}
    .w2 .sermonBox li a img {width: auto;}
    #s2 div ul li {height: 135px; padding: 0;}
    #s2 div ul li p.title2 {display: none;}
    #s2 div ul li p, 
    .w2 .sermonBox li a p {font-size: 14px;}
    .w2 .sermonBox li a h3.sermon {margin-top: 0;}
}