@font-face {
    font-family: 'notosanskr-bold_0';
    src: url('webfont/notosanskr-bold_0.otf') format('opentype');
}
@font-face {
    font-family: 'notosanskr-regular_0';
    src: url('webfont/notosanskr-regular_0.otf') format('opentype');
}
@font-face {
    font-family: 'notoserifkr-light';
    src: url('webfont/notoserifkr-light.otf') format('opentype');
}
@keyframes move {
    from {
        transform: translateX(100px) scale(1.2);
        animation-timing-function: cubic-bezier(.2,0,.8,1);
    }

    to {
        transform: translateX(0px) scale(1);
    }
}
@-webkit-keyframes updown {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 30px;
    }
}

@-webkit-keyframes spinspin {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform:rotate(180deg);}}
@keyframes spinspin {0% {transform: rotate(0deg);}100% {transform:rotate(180deg);}}

:root{--gap1:55px;--gap2:65px;--gap3:80px;}

body *{font-family: 'notosanskr-regular_0';}
.notosanskrBold{font-family: 'notosanskr-bold_0';}
.notosanskrLight{font-family: 'notoserifkr-light';}

/* common */
a{text-decoration:none!important;color:inherit;}
#main-slider{position:relative;}
.nav-tabs {border-bottom:none;}
.plus { position:absolute; top:0; right:0;}
.plus:hover { opacity:0.8; transition:0.3s all ease;}
.slider .move-btn{top:50%!important;}
.slider .slider-wrapper .slide p{display: flex;}
.slider .slider-wrapper .slide img{width: 100%;}
.box{display:inline-block; position:relative; opacity:0; top:50px; }
.flexBox{display: inline-flex;flex-direction: column;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;text-align:center;}
.black{color:#000!important;text-decoration:none;}
.white{color:#fff!important;text-decoration:none;}

#main-slider .mainQM{position: absolute;top: 65%;text-align: center;width: 100%;transform: translate(0,-50%);
display: inline-flex;justify-content: center;align-items: center;gap:var(--gap1);}
#main-slider .mainQM a{padding: 72.5px;position: relative;display: inline-block;background-color: rgba(255, 255, 255, .7);text-decoration:none;color:#000;}
#main-slider .mainQM a:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main-slider .mainQM a .QM{position: absolute;top: 50%;left: 0;
text-align: center;width: 100%;transform: translate(0,-50%);display: inline-flex;flex-direction: column;gap: 10px;}
#main-slider .mainQM a .QM .QIMG{display: inline-block;}
#main-slider .mainQM a .QM h1{margin: 0;font-size: 18px; font-weight:bold;}

#main-1{background-repeat:no-repeat;background-position:center;background-size:cover;}
#main-1 .main1TM{display: inline-flex;align-items: flex-end;margin: -85px 0 0;gap:var(--gap2);width:100%;position:relative;padding:0 0 150px;}
#main-1 .main1TM .sermonBG{display: inline-block;float: left;width: 54%;position:relative;}
#main-1 .main1TM .sermonBG a .sermonPLAY{position: absolute;border-radius: 50%;display: inline-flex;
width: 100px;height: 100px;background-color: #B1092D;right: 5%;bottom: 0;transform: translate(0,50%);
flex-wrap: nowrap;justify-content: center;align-items: center;}
#main-1 .main1TM .sermonM{display: inline-block;float: left;width: 42%;}
#main-1 .main1TM .sermonM .sermonMPLAY{display:inline-flex;gap:30px;}
#main-1 .main1TM .sermonM > a:nth-child(1) h1{margin: 0;font-size: 50px;width: 100%;color:#fff;
word-break: break-word;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;float: left;}
#main-1 .main1TM .sermonM > a:nth-child(1) h5{margin: 0;line-height: 1.5;font-size: 50px;color:#A4A4A4;padding:0 0 35px;}
#main-1 .main1TM .sermonM .sermonMPLAY .Live{padding: 57px;position: relative;border: 3px solid #000;border-radius: 15px;display:inline-block;background-color:#000;}
#main-1 .main1TM .sermonM .sermonMPLAY .Live img{display: inline-block;position: absolute;top: 50%;left: 50%;text-align: center;transform: translate(-50%, -50%);}
#main-1 .main1TM .sermonM .sermonMPLAY .Weekend{padding: 57px;position: relative;border: 3px solid #fff;border-radius: 15px;display:inline-block;}
#main-1 .main1TM .sermonM .sermonMPLAY .Weekend:before{background-color:#fff;}
#main-1 .main1TM .sermonM .sermonMPLAY .Weekend:hover h1{color:#000; transition:0.3s all ease;}
#main-1 .main1TM .sermonM .sermonMPLAY .Weekend h1{display: inline-block;font-size: 20px;line-height: 1.3;font-weight: bold;margin:0;
color: #fff;position: absolute;top: 50%;left: 0;text-align: center;width: 100%;transform: translate(0,-50%);}

#main-1 .main1TM .sermonM .sermonMPLAY .Friday{padding: 57px;position: relative;border: 3px solid #fff;border-radius: 15px;display:inline-block;}
#main-1 .main1TM .sermonM .sermonMPLAY .Friday:before{background-color:#fff;}
#main-1 .main1TM .sermonM .sermonMPLAY .Friday:hover h1{color:#000; transition:0.3s all ease;}
#main-1 .main1TM .sermonM .sermonMPLAY .Friday h1{display: inline-block;font-size: 20px;line-height: 1.3;font-weight: bold;margin:0;
color: #fff;position: absolute;top: 50%;left: 0;text-align: center;width: 100%;transform: translate(0,-50%);}

#main-1 .main1BM .main1BT{margin: 0 0 45px;display: flex;align-items: center;gap:20px;}
#main-1 .main1BM .main1BT h1{margin: 0;font-size: 50px;color:#fff;
word-break: break-word;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;float: left;}
#main-1 .main1BM .main1BT h5{margin: 0;line-height: 1.5;font-size: 50px;color:#A4A4A4;}
    /*
#main-1 .main1BM .main1BT h1{margin: 0;line-height: 2;font-size: 48px;color:#A4A4A4;}
#main-1 .main1BM .main1BT h1 strong{color:#fff;}
    */
#main-1 .main1BM .NewsM{width:100%;display: inline-flex;gap:var(--gap3);padding: 0 0 115px;}
#main-1 .main1BM .NewsM a{width: calc(100% / 3);display: inline-block;}
#main-1 .main1BM .NewsM a:hover .more img{animation: spinspin 1s ease-out; -webkit-animation: spinspin 1s ease-out;top:0%;}
#main-1 .main1BM .NewsM .NewsBOX > img{width:100%;}
#main-1 .main1BM .NewsM .NewsBOX .NewsSBOX{width: 78%;position: relative;margin: -40px 0 0;}
#main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT{margin-left: 40px;}
#main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT h7{font-size: 20px;display: inline-block;margin: 0;line-height: 1.5;color:#b6d8fc;}
#main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT h1{margin: 0;font-size: 32px;line-height: 1.5;color:#fff;}
#main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT h5{font-size: 17px; margin: 0;color:#fff;letter-spacing:0px;word-break: keep-all;}
#main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .more{position: absolute;right: 5%;top: 5%;transform: translate(0,0%);}
.slider .slider-dots{bottom:10% !important;}
#main-2{background-repeat:no-repeat;background-position:center;background-size:cover;color:#000;}
#main-2 .main2T h2{margin: 0;text-align: center;font-size: 35px;letter-spacing: 5px;line-height: 2;padding:80px 0 0;}
#main-2 .main2T h1{margin: 0;text-align: center;font-size: 60px;font-weight:bold;}
#main-2 .main2T h5{margin: 0;text-align: center;font-size: 30px;line-height:3;}
#main-2 .main2M{display: inline-flex;width: 100%;justify-content: center;gap: 40px;padding: 90px 0 185px;}
#main-2 .main2M a{padding: 102px;position: relative;display: inline-block;border: 3px solid #000;border-radius: 50%;}
#main-2 .main2M a:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main-2 .main2M .view-more:before{background-color:rgba(0,0,0,1);}
#main-2 .main2M a h1{position: absolute;top: 50%;margin:0;font-size:32px;color:#000;
text-align: center;width: 100%;border: none;display: block;transform: translate(-50%,-50%);}
#main-2 .main2M a:hover h1{color:#fff;}

#main-3{position: relative;width: 100%;overflow: hidden;height: 620px;display: inline-block;float: left;}
#main-3 .main3M{overflow:hidden;padding: 120px 0 0;}
#main-3 .main3M > .container{position: absolute;right: -10%;top: 50%;transform: translate(0,-50%);}
#main-3 .main3M .main3L{overflow:hidden;position:relative;}
#main-3 .main3M .main3L .main3S{padding:85px 0 10px;}
#main-3 .main3M .main3L .main3S .swiper-slide{box-shadow: 7px 7px 5px rgba(0,0,0,0.3);}
#main-3 .main3M .main3L .main3S .swiper-slide a{display: inline-block;width: 100%;overflow: hidden;float:left;}
#main-3 .main3M .main3L .main3S .swiper-slide a .galleryIMG {display: inline-flex;width: 100%;
position: relative;height: 270px;overflow: hidden;
margin: 0 auto;background-size: cover;background-position: 50% 50%;background-origin: border-box;background-repeat: no-repeat;align-items: center;justify-content: center;}
#main-3 .main3M .main3L .main3S .swiper-slide:hover .galleryIMG{transform:scale(1.2); transition:0.3s all ease;}
#main-3 .main3M .main3L .main3S .swiper-slide a .galleryIMG .galleryT h1{margin: 0;line-height: 1.5;font-size: 24px;}
#main-3 .main3M .main3L .main3S .swiper-slide a .galleryIMG .galleryT h5{margin: 0;font-size: 20px;}
#main-3 .main3M .main3L .main3S .swiper-slide .galleryT{opacity: 0;width: 100%;height: 100%;display: inline-flex;color:#fff;
align-items: center;justify-content: center;flex-direction: column;}
#main-3 .main3M .main3L .main3S .swiper-slide:hover .galleryT{opacity:1; transition:0.3s all ease;background-color:rgba(0,0,0,.5);}

#main-3 .main3M .main3L .main3P{display: inline-flex;justify-content: space-between;gap: 15px;position: absolute;top:10%;}
#main-3 .main3M .main3L .main3P .swiper-pagination-bullet-active{background-color:#fff!important;width:40px!important; transition:0.3s all ease;}
#main-3 .main3M .main3L .main3P .swiper-pagination-bullet{background-color:#C2C2C2;width:20px;height:20px;opacity:1;border-radius:15px; transition:0.3s all ease;}

#main-3 .main3M .main3R{}
#main-3 .main3M .main3R h1{margin: 0;font-size: 64px;line-height: 1.5;color:#fff;}
#main-3 .main3M .main3R h2{margin: 0;color: #878787;line-height: 1;font-size: 54px;font-weight:bold;}
#main-3 .main3M .main3R h5{margin: 0;font-size: 24px;line-height: 2.5;color:#fff;}

.view-more {
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: middle;
    background: transparent;
    overflow: hidden;
    -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;
    font-weight: 100;
}

.view-more:hover:before {
-webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg);
transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top;
-ms-transform-origin: left top;transform-origin: left top;}

.view-more:before {
z-index: -1;content: "";display: block;width: 135%;height: 105%;position: absolute;left: 0;top: 0;
-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg);
-ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
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);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),  -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-backface-visibility: hidden;backface-visibility: hidden;}

@media(min-width:1440px) {
    .container {
        width: 1440px;
    }
}

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

@media (max-width:1499px) {
    :root{--gap2: 25px;}
    #main-1 .main1TM{margin: -45px 0 0;}
    #main-1 .main1TM .sermonM .sermonMPLAY{gap: 10px;}
    #main-1 .main1TM .sermonM > a:nth-child(1) h1{font-size:38px;}
    #main-1 .main1TM .sermonM > a:nth-child(1) h5{font-size:36px;}
    #main-1 .main1BM .main1BT h1{font-size:38px;}
    #main-1 .main1BM .main1BT h5{font-size:36px;}
    #main-2 .main2M{gap:30px;}
    #main-2 .main2M a{padding:80px;}
    #main-2 .main2T h1{font-size:52px;}
    #main-2 .main2M a h1{font-size:27px;}
    #main-3 .main3M > .container{right:-15%;}
    #main-3 .main3M .main3R h1{font-size:42px;}
}
@media (max-width:1199px) {
    :root {--gap1: 25px;--gap2: 20px;--gap3: 25px;}
    #main-slider .mainQM a{padding:70px;}
    #main-1 .main1TM{margin: -20px 0 0;padding: 0 0 100px;}
    #main-1 .main1TM .sermonM > a:nth-child(1) h1{font-size:32px;}
    #main-1 .main1TM .sermonM > a:nth-child(1) h5{font-size:28px;}
    #main-1 .main1TM .sermonM .sermonMPLAY .Weekend,
    #main-1 .main1TM .sermonM .sermonMPLAY .Live{padding:47px;}
    #main-1 .main1BM .main1BT h1{font-size:32px;}
    #main-1 .main1BM .main1BT h5{font-size:28px;}
    #main-1 .main1BM .NewsM{padding: 0 0 60px;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX{width: 80%;margin: -20px 0 0;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT h7{font-size:17px;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT h1{font-size:28px;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT h5{font-size:15px;}
    #main-2 .main2M{padding: 50px 0 100px;flex-wrap: wrap;}
    #main-2 .main2M a{padding:95px;}
    #main-2 .main2T h2{font-size:36px;}
    #main-2 .main2T h1{font-size:48px;}
    #main-2 .main2T h5{font-size:24px;line-height:2.5;}
    #main-2 .main2M a h1{font-size:20px;}
    #main-3 .main3M{padding: 60px 0 0;}
    #main-3 .main3M .main3R{order: 1;padding: 0 15px;display: inline-flex;flex-wrap: wrap;align-items: center;}
    #main-3 .main3M .main3R h1{margin-right:15px;}
    #main-3 .main3M .main3R h2{width:100%;}
    #main-3 .main3M > .container{position:relative;right: 0;order:2;transform:inherit;}
}

@media (max-width:992px) {
    #main-slider .mainQM{top:80%;}
    #main-slider .mainQM a{padding:50px;}
    #main-slider .mainQM a .QM h1{font-size:15px;}
    #main-1 .main1TM{flex-wrap: wrap;justify-content: center;padding: 0 0 50px;}
    #main-1 .main1TM .sermonBG{width:90%;margin: 0 0 50px;}
    #main-1 .main1TM .sermonM{width:100%;}
    #main-1 .main1TM .sermonM .sermonMPLAY .Weekend, 
    #main-1 .main1TM .sermonM .sermonMPLAY .Live{padding:55px;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX{width:100%;margin: -15px 0 0;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .more{right: 30%;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT{margin-left: 15px;}
    #main-2 .main2T h2{padding: 35px 0 0;}
    #main-2 .main2M{padding: 25px 0 50px;gap:25px;}
    #main-2 .main2M a{padding:90px;}
    #main-3 .main3M > .container{padding:0!important;}
}

@media (max-width:767px) {
    .row{margin:0;}
    :root {--gap2: 5px;}
    #main-slider .mainQM{display:none;}
    #main-1 .main1TM{padding:0 0 20px;}
    #main-1 .main1TM .sermonBG{margin:0 0 20px;}
    #main-1 .main1TM .sermonBG a .sermonPLAY{width:70px;height:70px;}
    #main-1 .main1TM .sermonM > a:nth-child(1) h1{font-size:24px;}
    #main-1 .main1TM .sermonM > a:nth-child(1) h5{font-size:20px;padding: 0 0 20px;}
    #main-1 .main1TM .sermonM .sermonMPLAY{gap: 15px;flex-wrap: wrap;}
    #main-1 .main1TM .sermonM .sermonMPLAY .Weekend, 
    #main-1 .main1TM .sermonM .sermonMPLAY .Live{padding: 50px;}
    #main-1 .main1TM .sermonM .sermonMPLAY .Friday h1{font-size:17px;}
    #main-1 .main1TM .sermonM .sermonMPLAY .Live h1,
    #main-1 .main1TM .sermonM .sermonMPLAY .Weekend h1{font-size:17px;}
    #main-1 .main1TM .sermonM .sermonMPLAY .Weekend, 
    #main-1 .main1TM .sermonM .sermonMPLAY .Live{padding:50px;}
    #main-1 .main1BM .main1BT {margin: 0 0 20px;align-items: flex-start;flex-direction: column;gap:0;}
    #main-1 .main1BM .main1BT h1{font-size:24px;line-height:1.3;}
    #main-1 .main1BM .main1BT h1 strong{display:block;}
    #main-1 .main1BM .main1BT h5{font-size:20px;}
    #main-1 .main1BM .NewsM{flex-wrap: wrap;padding: 0 0 20px;}
    #main-1 .main1BM .NewsM a{width:100%;}
    #main-1 .main1BM .NewsM .NewsBOX .NewsSBOX .NewsT h1{font-size:20px;}
    #main-2 .main2T h2{padding:20px; font-size:20px;}
    #main-2 .main2T h1{font-size:24px;}
    #main-2 .main2T h5{font-size:17px;}
    #main-2 .main2M{flex-wrap: wrap;gap: 10px;}
    #main-2 .main2M a{padding:14%;}
    #main-2 .main2M a h1{font-size:15px;}
    #main-3{height:inherit; padding:0 0 20px;}
    #main-3 .main3M{padding:20px 0 0;}
    #main-3 .main3M .main3R h2{font-size:24px;}
    #main-3 .main3M .main3R h1{font-size:24px;}
    #main-3 .main3M .main3R h5{font-size:17px;}
    #main-3 .main3M .main3L .main3P{top:5%;}
    #main-3 .main3M .main3L .main3S{padding:50px 0 10px;}
    #main-3 .main3M .main3L .main3P .swiper-pagination-bullet{width: 15px;height: 15px;}
    #main-3 .main3M .main3L .main3P .swiper-pagination-bullet-active{width: 30px!important;}
    #main-3 .main3M > .container{padding:0!important;transform: inherit;}
}

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