﻿@font-face {
    font-family: 'notoserifkr-medium';
    src: url('fonts/notoserifkr-medium.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;
    }
}
.notoserifkr{font-family: 'notoserifkr-medium';}
.no-padding{padding-right:0; padding-left:0;}
.no-margin{margin-right:0; margin-left:0;}
/* common */
#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;}
.box{display:inline-block; position:relative; opacity:0; top:50px; }

:root{--gap:30px;--width:25%;--width1:25%;}

.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;}


#mainSlider{padding-top:115px;display:inline-flex;}
#main1{background-color:#22344B;}
#main1 .main1M{display:inline-flex;width:100%;padding:90px 0;     justify-content: center;}
#main1 .main1M .main1L{width:50%;}
#main1 .main1M .main1L .main1LBG{height: 460px;position: relative;background-position: center;background-size: cover;background-repeat: no-repeat;}
#main1 .main1M .main1L .main1LBG img{position: absolute;transform: translate(0,50%);bottom: 0%;right: 5%;}
#main1 .main1M .main1R{color:#fff;display: flex;flex-direction: column-reverse;justify-content: space-between;     align-items: center;}
#main1 .main1M .main1R .sermonT{padding:50px;color:#fff;text-decoration:none;}
#main1 .main1M .main1R .sermonT h1{margin: 0;font-size: 42px;line-height: 2;}
#main1 .main1M .main1R .sermonT h5{margin: 0;line-height: 1.5;font-size: 17px;display: inline-flex;align-items: center;gap: 10px;}
#main1 .main1M .main1R .sermonT span{font-size:27px;}
#main1 .main1M .main1R .sermonBTN a{display: inline-block;float: right;padding: 77.5px 170px;position:relative;}
#main1 .main1M .main1R .sermonBTN .more{background-color:#D7A58B;}
#main1 .main1M .main1R .sermonBTN .dawn{background-color:#fff;}
#main1 .main1M .main1R .sermonBTN .jubo{background-color:#837872;}
#main1 .main1M .main1R .sermonBTN .more img{position:absolute;transform: translate(50%,-50%);right: 50%;}
#main1 .main1M .main1R .sermonBTN .dawn img{position:absolute;transform: translate(50%,-50%);right: 50%;}
#main1 .main1M .main1R .sermonBTN .jubo h1{position:absolute;transform: translate(0,-50%);width:100%;color:#fff;font-size:24px;margin:0;display:inline-block;right: 0;text-align:center;}

#main2 .main2M{display: inline-flex;width:100%;justify-content: center;padding:90px 0 75px;gap:80px;}
#main2 .main2M .worship{text-align:center;}
#main2 .main2M .worship > h1{margin: 0;font-size: 24px;text-align: center;padding-bottom: 30px;font-weight:bold;}
#main2 .main2M .worship .worshipL1{display:inline-flex;gap:20px;}
#main2 .main2M .worship .worshipLM{padding: 56px;border: 4px solid #000;border-radius: 50%;display: inline-block;position:relative;}
#main2 .main2M .worship .worshipLM .circle{position: absolute;width: 100%;transform: translate(50%,-50%);right: 50%;text-align:center;}
#main2 .main2M .worship .worshipLM .circle h1{margin: 0;font-size: 20px;width: 100%;text-align: center;font-weight: bold;letter-spacing: 1px;}




#main2 .main2M .main2R{display: inline-flex;gap: 100px;padding: 0 100px;}
#main2 .main2M .main2R .worship{text-align:center;text-decoration:none;}
#main2 .main2M .main2R .worship h1{padding-bottom: 40px;font-size: 24px;margin: 0;font-weight: bold;letter-spacing: 1px;word-break:keep-all;color:#000;}
#main2 .main2M .main2R .worship .worshipIMG{background-position:center;background-size:cover;background-repeat:no-repeat;padding:59px;display:inline-block;}
#main2 .main2M .main2R .worship:hover .worshipIMG{animation-name: updown;animation-duration: 1s;animation-duration: leaner;animation-iteration-count: infinite;animation-direction: alternate;animation-fill-mode: forwards;position:relative;}
#main2 .main2M .main2R .worship1 .worshipIMG{background-image: url('../images/3_time_04.png');}
#main2 .main2M .main2R .worship2 .worshipIMG{background-image: url('../images/3_time_live.png');}
#main2 .main2M .main2R .worship3 .youtubeON{background-image: url('../images/3_time_youtube_on.png');opacity:0;display:none;}
#main2 .main2M .main2R .worship3 .youtubeOFF{background-image: url('../images/3_time_youtube.png');opacity:1;display:block;}
#main2 .main2M .main2R .worship3:hover .youtubeON{opacity:1;display:block;}
#main2 .main2M .main2R .worship3:hover .youtubeOFF{opacity:0;display:none;}
#main2 .main2M .main2L .worshipL{text-align: center;}
#main2 .main2M .main2L .worshipL h1{padding-bottom: 40px;font-size: 24px;margin: 0;font-weight: bold;letter-spacing: 1px;word-break:keep-all;}
#main2 .main2M .main2L .worshipL .worshipLM{display: inline-flex;gap: 40px;}
#main2 .main2M .main2L .worshipL .worshipLM .worshipLIMG{background-position:center;background-size:cover;background-repeat:no-repeat;padding:59px;display:inline-block;}

#main3 .main3M{display: grid;grid-template-columns: repeat(auto-fill, minmax(var(--width), auto));}
#main3 .main3M .main3BOX{height:480px;color:rgba(255,255,255,.5);text-decoration:none;position:relative;}
#main3 .main3M .main3BOX .on{background-size:cover;background-repeat:no-repeat;background-position:center;opacity:0;display:none;width:100%;height:100%;position:absolute;transition: .3s all ease;}
#main3 .main3M .main3BOX .off{background-size:cover;background-repeat:no-repeat;background-position:center;opacity:1;display:block;width:100%;height:100%;position:absolute;transition: .3s all ease;}
#main3 .main3M .main3BOX:hover .on{opacity:1;display:block;}
#main3 .main3M .main3BOX:hover .off{opacity:0;display:none;}
#main3 .main3M .main3BOX .main3T{width:100%;text-align: center;position: absolute;top: 50%;right: 50%;transform: translate(50%,-50%);opacity:1;}
#main3 .main3M .main3BOX:hover .main3T{opacity:0;}
#main3 .main3M .main3BOX .main3T h1{margin: 0;font-size: 32px;letter-spacing:0px;color:#fff;}
#main3 .main3M .main3BOX .main3T hr{margin: 30px auto;width: 10%;}
#main3 .main3M .main3BOX .main3T h2{margin: 0;font-size: 24px;letter-spacing:1px;}

#main4 .main4T{padding:65px 0 0;}
#main4 .main4T h2{margin: 0;font-size: 32px;font-weight: bold;letter-spacing: 1px;word-spacing: 2px;color: #878787;line-height:1.5;}
#main4 .main4T h1{margin: 0;font-size: 62px;font-weight: bold;letter-spacing: 1px;word-spacing: 2px;color: #000;line-height:1.5;}
#main4 .main4M{padding:65px 0 130px; overflow:hidden;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide{height:235px;/*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/text-decoration:none;color:#fff}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG{height:100%;transition: .3s all ease;background-repeat:no-repeat;background-position:center;background-size:cover;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover{filter: grayscale(50%);position: relative;animation-name: updown;animation-duration: 1s;animation-duration: leaner;animation-iteration-count: infinite;animation-direction: alternate;animation-fill-mode: forwards;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT{display: inline-flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;text-align: center;opacity:0;display:none;transition: .3s all ease;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT h1{margin: 0;font-size: 32px;line-height: 2;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide .galleryIMG .galleryT h5{margin: 0;font-size: 20px;}
#main4 .main4M .gallerySD .contentSlideWrapper .contentSlide:hover .galleryIMG .galleryT{display:inline-flex; opacity:1;background-color:rgba(0,0,0,.5)}
#main4 .main4M .gallerySD .swiper-wrapper{height:inherit!important;}


@media (max-width:1799px) {

}
@media (max-width:1599px) {
    #main2 .main2M{gap: 25px;}
}

@media (max-width:1499px) {
    #main3 .main3M .main3BOX{height: 375px;}
}

@media (max-width:1199px) {
    #main2 .main2M {padding: 50px 0 50px;gap: 75px;flex-wrap: wrap;}
    #main3 .main3M .main3BOX{height: 260px;}
}

@media (max-width:992px) {
    #main1 .main1M {padding: 50px 0;}
    #main1 .main1M{flex-direction: column;}
    #main1 .main1M .main1L{width:100%;padding-bottom:50px;}
    #main1 .main1M .main1R {width: 100%;}
    #main1 .main1M .main1R .sermonT h1{font-size:38px;}
    #main1 .main1M .main1R .sermonT span{font-size:24px;}
    #main1 .main1M .main1R .sermonBTN a {padding: 65.5px;}
    #main3 .main3M .main3BOX .main3T h1{font-size:24px;}
    #main3 .main3M .main3BOX .main3T h2{font-size:20px;}
    #main4 .main4T h2{font-size:24px;}
    #main4 .main4T h1{font-size:48px;}
    :root {--width: 50%;}
}

@media (max-width:767px) {
    #mainSlider {padding-top: 70px;}
    #main1 .main1M{padding: 20px 0;}
    #main1 .main1M .main1L {padding-bottom: 30px;}
    #main1 .main1M .main1L .main1LBG {height: 200px;}
    #main1 .main1M .main1L .main1LBG img{width:50px;}
    #main1 .main1M .main1R .sermonBTN a {padding: 40px;}
    #main1 .main1M .main1R .sermonBTN a img{max-width:60px;}
    #main1 .main1M .main1R .sermonBTN .jubo h1{font-size:17px;}
    #main1 .main1M .main1R .sermonT{padding: 15px;}
    #main1 .main1M .main1R .sermonT h1{font-size:24px;}
    #main1 .main1M .main1R .sermonT span{font-size:17px;}
    #main2 .main2M{gap: 20px;padding: 20px 0px;}
    #main2 .main2M .worship .worshipLM {padding: 45px;}
    #main2 .main2M .worship > h1{font-size: 17px;padding-bottom: 15px;}
    #main2 .main2M .worship .worshipLM .circle h1{font-size:15px;}
    #main3 .main3M .main3BOX {height: 180px;}
    #main3 .main3M .main3BOX .main3T h1 {font-size: 20px;}
    #main3 .main3M .main3BOX .main3T h2 {font-size: 17px;}
    #main3 .main3M .main3BOX .main3T hr {margin: 15px auto;}
    #main4 .main4T {padding: 20px 0 0;}
    #main4 .main4T h1{font-size:24px;}
    #main4 .main4T h2{font-size:17px;}
    #main4 .main4M {padding: 20px 0 30px;}
}

@media (max-width:320px) {
}
