@-webkit-keyframes array {0%,100% {-webkit-transform:translateX(0);}50% {-webkit-transform:translateX(-5px);}}
@keyframes array {0%,100% {transform:translateX(0);}50% {transform:translateX(-5px);}}


/* common */

.nav-tabs {
    border-bottom: none;
}

.plus {
    position: absolute;
    top: 0;
    right: 0;
}

    .plus:hover {
        opacity: 0.8;
        transition: 0.3s all ease;
    }

.box {
    display: inline-block;
    position: relative;
    opacity: 0;
    top: 50px;
}

/*sermon*/

#sermon{background-image: url('../images/sermon_background.png');background-size: cover;
background-position: 50% 50%;background-origin: border-box;background-repeat: no-repeat;}
#sermon .sermonFM{height:725px; position:relative;}
#sermon .sermonFM .sermonBG a .sermonBGM{position: absolute;top: 10%;right: 5%;text-align: center;width: 55%;
height: 70%;border: none;display: block;overflow: hidden;margin: 0 auto;
background-size: cover;background-position: 50% 50%;background-origin: border-box;background-repeat: no-repeat;}
#sermon .sermonFM .sermonBG a .sermonBGM img{position: absolute;top: 50%;text-align: center;border: none;
display: block;transform: translate(0,-50%);left: 45%;}
#sermon .sermonFM .sermonFMBG{background-color: #E0CDC2;background-position: bottom;background-size: 100%;
position: absolute;top: 40%; right: 2%;text-align: center;width: 55%; height: 70%;border: none;display: block;
transform: translate(0,-50%);}
#sermon .sermonFM .sermonBTN{position: absolute;left: 0;bottom: 10%;}
#sermon .sermonFM .sermonBTN .tab-dots{}
#sermon .sermonFM .sermonBTN .tab-dots li{margin: 0;}
#sermon .sermonFM .sermonBTN .tab-dots li a{margin: 0;padding: 55px 50px 35px; background-color:#3E2923;border:none; border-radius:0; text-decoration:none;}
#sermon .sermonFM .sermonBTN .tab-dots li a span{font-size:22px; color:#fff;}
#sermon .sermonFM .sermonBTN .tab-dots li a .btn-plus{position: absolute;top: 30%;left: 45%;
background: #FA9B00;width: 10px;height: 10px;border-radius: 50%;text-align: center;opacity: 0;
transition: all .3s linear;}
#sermon .sermonFM .sermonBTN .tab-dots li a:hover .btn-plus,
#sermon .sermonFM .sermonBTN .tab-dots li a:focus .btn-plus,
#sermon .sermonFM .sermonBTN .tab-dots li.active a .btn-plus{opacity:1;}

#sermon .sermonFM .documents{overflow:hidden;}
#sermon .sermonFM .documents .tab-content .sermonL{position: absolute;top: 40%;
left: 0%;text-align: center;border: none;display: block;transform: translate(0,-50%);}
#sermon .sermonFM .documents .tab-content .sermonR{position: absolute;top: 40%;
left: 35%;text-align: center;border: none;display: block;transform: translate(0,-50%);}
#sermon .sermonFM .documents .tab-content .sermonCHT h1{position: absolute;top: 20%;left: 5%;text-align: center;
border: none;display: block;transform: translate(0,-50%);color: #AB542E;font-weight: bold;letter-spacing: 0.5px;}
#sermon .sermonFM .documents .tab-content .sermonM{width: 27%;overflow: hidden;display: inline-block;
border: none;transform: translate(0,-50%);position: absolute;top: 40%;left: 5%;height:100%;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM{position: absolute;top: 50%;
text-align: center;width: 100%;border: none;display: block;transform: translate(0,-50%); display:none;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM.active{display:block;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a{text-decoration:none; color:#000;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a:hover,
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a:focus,
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a:hover h1,
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a:focus h1{font-weight:bold;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a:hover img,
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a:focus img{animation: array 1s ease-in-out infinite;
-webkit-animation: array 1s ease-in-out infinite;transition: all 1s;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMT h1
{margin: 0;word-break: keep-all;white-space: normal;line-height: 1.4;text-align: left;word-wrap: break-word;
display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;/*height: 2.8em;*/
font-size: 42px;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMT p
{margin: 0;letter-spacing: 0.5px;font-size: 22px;word-spacing: 2px;line-height: 2;}

#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMBTN{display: inline-block;
padding: 10px 15px;background-color: #000;position: absolute;right: 0;bottom: -65%;}
#sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMBTN span{font-size: 17px;
letter-spacing: 0.5px;color: #fff;margin: 0 5px;}

#quickmenu{height: 240px;}
#quickmenu div{height:100%;}
#quickmenu a{text-decoration:none; color:#000;}
#quickmenu .quickBTN{text-align:center;display: flex;position:relative;
flex-wrap: wrap;flex-direction: column;align-items: center;justify-content: center;}
#quickmenu a:hover .quickBTN,
#quickmenu a:focus .quickBTN{-webkit-transform: translate(0px,-25px);transform: translate(0px,-25px);transition: all 0.5s;}
#quickmenu .quickBTN h1{margin: 0;line-height: 2;font-size: 24px;font-weight: bold;letter-spacing: 0.5px;}
#quickmenu .quickBTN hr{position: absolute;top: 75%;text-align: center;
width: 0%;transition: 1s all;left: 30%;font-size: 20px;display: block;transform: translate(0,-50%);
letter-spacing: 1px;border: 1px solid;opacity: 0;border-color: #F99E2D;}
#quickmenu a:hover .quickBTN hr,
#quickmenu a:focus .quickBTN hr{width: 40%;opacity: 1;}

#notice{height:630px;background-image: url('../images/notice_background.png');position:relative;background-size: cover;
background-position: 50% 50%;background-origin: border-box;background-repeat: no-repeat;}
#notice .noticeT{display: inline-block;position: absolute;top: 10%;}
#notice .noticeT h1{color:#fff; letter-spacing:1px; font-weight:bold; font-size:48px; margin:0;}
#notice .noticeM{height:630px;display: flex;flex-direction: row;justify-content: center;align-items: center;}
#notice .noticeM .noticeBG{height:370px;margin-top: 100px;}
#notice .noticeM .noticeBG .noticeSM{height: 100%;background-color: #fff;position: relative;}
#notice .noticeM .noticeBG .noticeSM .noticeTB{height:100%;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeST{position: absolute;top: 10%;left: 10%;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeST h1{margin: 0;font-size: 30px;font-weight: bold;letter-spacing: 0.5px;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeST hr{border: 1px solid #F2B470;width: 50%;float: left;margin: 15px 0;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD{height:100%;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD .slick-list,
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD .slick-list .slick-track,
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD .slick-list .slick-track .slick-slide,
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD .slick-list .slick-track .slick-slide > div{height:100%;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a{text-decoration:none;color:#000; height:100%;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM{position: relative;top: 50%;
height: 45%;width: 100%;border: none;display: inline-block;transform: translate(0,-50%);}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM .noticeSDT{position: absolute;top: 30%;border: none;width:80%;
left: 10%;display: inline-block;transform: translate(0,-50%);}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM .noticeSDT h1{margin:0; word-break:keep-all;transition: all .2s;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a:hover .noticeSDM .noticeSDT h1,
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a:focus .noticeSDM .noticeSDT h1{font-weight:bold;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM .noticeREG{position: absolute;bottom: 10%;right: 15%;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM .noticeREG h5{margin:0;font-size:18px;letter-spacing:0.5px;transition: all .2s;}
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a:hover .noticeSDM .noticeREG h5,
#notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a:focus .noticeSDM .noticeREG h5{font-weight:bold;}
#notice .noticeM .noticeBG .noticeSM .noticeTB2 .noticeST hr{width:100%;}
#notice .noticeM .noticeBG .noticeBTN{display: inline-block;position: absolute;bottom: 15%;left: 15%;}
#notice .noticeM .noticeBG .noticeBTN .noticeL,
#notice .noticeM .noticeBG .noticeBTN .noticeR{display: inline-block; padding: 5px; cursor:pointer;}

#gallery{height: 615px;background-image: url(../images/gallery_background.png);position: relative;}
#gallery .galleryT{display: inline-block;position: absolute;top: 20%;}
#gallery .galleryT h1{color: #000;letter-spacing: 1px;font-weight: bold;font-size: 48px;margin: 0;}
#gallery #galleryM{width: 100%;padding: 30px 0;overflow:hidden;height: 615px;
display: flex;flex-direction: row;justify-content: center;align-items: center;
border-top: 1px solid rgba(255,255,255,.5);border-bottom: 1px solid rgba(255,255,255,.5);}
#gallery #galleryM .galleryW{margin-top:100px;}
#gallery #galleryM .galleryW .galleryC .contentSlideWrapper .contentSlide{text-decoration:none;}
#gallery #galleryM .galleryW .galleryC .galleryB{display: block;position: relative;height: 255px;overflow: hidden;
background-color: #000;margin: 0 auto;background-size: cover;background-position: 50% 50%;background-origin: border-box;background-repeat: no-repeat;}
#gallery #galleryM .galleryW .galleryC .contentSlideWrapper .contentSlide:hover .galleryB,
#gallery #galleryM .galleryW .galleryC .contentSlideWrapper .contentSlide:focus .galleryB{-webkit-transform: translate(-10px,-10px);
transform: translate(-10px,-10px);transition: all 0.5s;}
#gallery #galleryM .galleryW .galleryC .contentSlideWrapper .contentSlide::after{display: block;position: absolute;
z-index: -1;left: 0;top: 0;content: '';width: 100%;height: 100%;background: rgba(0,0,0,.3);box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);}
#gallery #galleryM .galleryW .galleryC .galleryB .galleryD{position: absolute;height: 100%;
width: 100%;background: rgba(0,0,0,0.7);z-index: 3;top: 0;left: 0;display: none;}
#gallery #galleryM .galleryW .galleryC .galleryB:hover .galleryD,
#gallery #galleryM .galleryW .galleryC .galleryB:focus .galleryD{display:block;}
#gallery #galleryM .galleryW .galleryC .galleryB .galleryD p{display: flex;
flex-direction: column;flex-wrap: wrap;justify-content: center;align-content: space-around;height: 100%;}
#gallery #galleryM .galleryW .galleryC .galleryB .galleryD p span{font-size: 20px;font-weight: 500;color: #fff;letter-spacing: 1px; text-align:center; word-break:keep-all;}
#gallery .galleryBTN{display: flex;float: left;width: 100%;justify-content: space-between;padding: 30px 0;}
#gallery .galleryBTN .galleryHF:hover img{animation: spinspin2 1s ease-out; -webkit-animation: spinspin2 1s ease-out;}

#gallery #galleryL{position: absolute;top: 58%;left: 7%;text-align: center;border: none;
display: block;transform: translate(0,-50%);padding: 40px 30px;float: left;
text-decoration: none;list-style: none;outline: none;
background-color: rgba(0,0,0,.5);z-index: 2;}
#gallery #galleryL img{position: absolute;top: 50%;text-align: center;
transform: translate(0,-50%);left: 35%;display: inline-block;}
#gallery #galleryL:hover img{animation: array2 1s ease-in-out infinite;
-webkit-animation: array2 1s ease-in-out infinite;transition: all 1s;}
#gallery #galleryR{position: absolute;top: 58%;right: 7%;text-align: center;border: none;
display: block;transform: translate(0,-50%);padding: 40px 30px;float: left;
text-decoration: none;list-style: none;outline: none;
background-color: rgba(0,0,0,.5);z-index: 2;}
#gallery #galleryR img{position: absolute;top: 50%;text-align: center;
transform: translate(0,-50%);left: 35%;display: inline-block;}
#gallery #galleryR:hover img{animation: array1 1s ease-in-out infinite;
-webkit-animation: array1 1s ease-in-out infinite;transition: all 1s;}
@media (min-width:1200px) and (max-width:1499px) {
}

@media (min-width:993px) and (max-width:1199px) {
    #sermon .sermonFM .documents .tab-content .sermonCHT h1,
    #sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMT h1{font-size:32px;}
    #sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMT p{font-size:20px;}

    #notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM .noticeSDT h1{font-size:32px;}
    #notice .noticeT h1,
    #gallery .galleryT h1{font-size:40px;}
}

@media (min-width:768px) and (max-width:992px) {
    #sermon .sermonFM{height:900px;}
    #sermon .sermonFM .documents .tab-content .sermonCHT h1{top: 52%;}
    #sermon .sermonFM .sermonBG a .sermonBGM{width: 90%;height:42%;top: 5%;}
    #sermon .sermonFM .sermonBTN .tab-dots li a{padding: 55px 25px 35px;}
    #sermon .sermonFM .documents .tab-content .sermonM{width: 80%;height: 25%;top: 65%;left: 10%;}
    #sermon .sermonFM .documents .tab-content .sermonL{top: 65%; left: 5%;}
    #sermon .sermonFM .documents .tab-content .sermonR{top: 65%; left: 90%;}
    #sermon .sermonFM .sermonFMBG{top: 20%;width: 90%;height: 35%;}
    #sermon .sermonFM .sermonBTN{left: 3%; bottom: 5%;}
    #notice{height: 1075px;}
    #notice .noticeT{left: 3%;top: 3%;}
    #notice .noticeM{display: inherit;
    flex-direction: inherit;
    justify-content: inherit;
    align-items: inherit;height:945px;margin-top:95px;}
    #notice .noticeM .noticeBG{height: 300px; margin-top: 15px;}
    #gallery .galleryT{top: 5%;}
    #gallery,
    #gallery #galleryM{height:475px;}
    #gallery #galleryM .galleryW{margin:0!important;}


}

@media (max-width:767px) {
    #sermon .sermonFM{height:500px;}
    #sermon .sermonFM .documents .tab-content .sermonCHT h1{top: 42%;margin: 10px 0;font-size: 24px;}
    #sermon .sermonFM .sermonBG a .sermonBGM{width: 90%;height:35%;top: 5%;}
    #sermon .sermonFM .documents .tab-content .sermonM{width: 80%;height: 30%;top: 63%;left: 10%;}
    #sermon .sermonFM .documents .tab-content .sermonL{top: 60%; left: 1%;max-width: 15px;}
    #sermon .sermonFM .documents .tab-content .sermonR{top: 60%;left: 95%;max-width: 15px;}
    #sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM{top:30%;}
    #sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMT h1{font-size:20px;}
    #sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMT p{font-size:17px;}
    #sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a .sermonMBTN span{font-size:15px;}
    #sermon .sermonFM .documents .tab-content .sermonM .sermonSD .sermonSDM a img{max-width:20px;}
    #sermon .sermonFM .sermonFMBG{top: 20%;width: 90%;height: 35%;}
    #sermon .sermonFM .sermonBTN{left: 2%; bottom: 5%;}
    #sermon .sermonFM .sermonBTN .tab-dots li a{padding: 30px 5px 15px;}
    #sermon .sermonFM .sermonBTN .tab-dots li a span{font-size:15px;}
    #sermon .sermonFM .sermonBTN .tab-dots li a .btn-plus{top:20%;}
    #quickmenu{height:300px;}
    #quickmenu .quickBTN{height:50%;}
    #quickmenu .quickBTN img{max-width:80px;}
    #quickmenu .quickBTN h1{font-size:17px;}
    #notice{height: 745px;}
    #notice .noticeT{left: 3%;top: 3%;}
    #notice .noticeT h1{font-size:24px;}
    #notice .noticeM{display: inherit;
    flex-direction: inherit;
    justify-content: inherit;
    align-items: inherit;height:665px;margin-top:75px;}
    #notice .noticeM .noticeBG{height: 200px; margin-top: 15px;}
    #notice .noticeM .noticeBG .noticeBTN{bottom: 5%;}
    #notice .noticeM .noticeBG .noticeSM .noticeTB .noticeST h1{font-size:17px;}
    #notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM .noticeSDT h1{font-size:17px;}
    #notice .noticeM .noticeBG .noticeSM .noticeTB .noticeSD a .noticeSDM .noticeREG h5{font-size:15px;}
    #gallery{position:relative;height:345px;}
    #gallery .galleryT{top: 0;padding:15px;position:relative;}
    #gallery .galleryT h1{font-size:24px;}
    #gallery #galleryM{height:100%;display:inline-block;width:100%;padding:15px!important;}
    #gallery #galleryM .galleryW{margin:0!important;}
}

@media (max-width:320px) {
}