﻿@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:30px;}

body *{font-family:'Noto Sans CJK KR';}
.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%;}
.slider .slider-dots .each-dot{width:20px!important;height:20px!important;background-color:rgba(255,255,255,.5)!important;transition:0.3s all ease;border:none!important;}
.slider .slider-dots .each-dot.active{width:55px!important;height:20px!important;background-color:#fff!important;transition:0.3s all ease;border-radius:50px;border:1px solid #fff!important;}
.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;}



.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;}

a:hover .view-more: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;}

#main-1 .main1M{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
#main-1 .main1M .main1Q {position: relative;padding: 60px 0;background: linear-gradient(0deg, rgba(73,82,143,1) 0%, rgba(103,113,182,1) 100%);border-right: 1px solid #fff;}
#main-1 .main1M .main1Q:hover{position: relative;animation-name: updown;animation-duration: 1s;animation-duration: leaner;
animation-iteration-count: 1;animation-direction: alternate;animation-fill-mode: forwards;}
#main-1 .main1M .main1Q .main1QM{display:inline-flex;justify-content: center;align-items: center;flex-direction: row;gap:15px;position:absolute;transform: translate(50%, -50%);top: 50%;right: 50%;width:100%;}
#main-1 .main1M .main1Q .main1QM h1{margin:0;font-size: 19px;color: #FFF;}

#main-2{padding:105px 0 55px;}
#main-2 .main2M{display:grid; grid-template-columns: 1fr 1fr;gap:25px;}
#main-2 .main2M .main2L{height:350px;position:relative;padding:25px;background-color:#F1C7BA;overflow:hidden;}
#main-2 .main2M .main2L:before{content:'';position: absolute;bottom: -6%;left: 10%;background-image: url(../images/004_sermon_pastor.png);width: 50%;height: 95%;background-repeat: no-repeat;background-position: center;}
#main-2 .main2M .sermonM{color: #000;position:relative;height:100%;}
#main-2 .main2M .sermonM > h2{margin: 0;font-size: 32px;padding-bottom: 45px;}
#main-2 .main2M .sermonM .main2LT{position:absolute;right: 0;top: 0;text-align:right;display: flex;flex-direction: column;align-items: flex-end;}
#main-2 .main2M .sermonM .main2LT h1{margin: 0 0 25px;font-size: 36px;display: -webkit-box;
word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;width: 55%;}
#main-2 .main2M .sermonM .main2LT h5{margin: 10px 0;font-size: 17px;}
#main-2 .main2M .sermonM .main2LT h3{margin: 0;font-size: 17px;line-height: 1.5;}
#main-2 .main2M .sermonM .main2LT h3 span{font-size: 24px;word-break: keep-all;}
#main-2 .main2M .sermonM .serminBT{padding: 46.5px;display: inline-block;position: absolute;bottom: 0;right: 0;}
#main-2 .main2M .sermonM .serminBT .on,
#main-2 .main2M .sermonM .serminBT .off{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;height:100%;position:absolute;right:0;top:0;}
#main-2 .main2M .main2R{display: grid;grid-template-columns: 1fr 1fr;gap: 25px;}
#main-2 .main2M .main2R .main2RL{height:350px;padding: 30px 20px;background-color:#99B097;position: relative;display: flex;flex-direction: column;justify-content: space-between;}
#main-2 .main2M .main2R .main2RL > a{font-size:28px;padding:0 0 60px;display: inline-block;color:#fff;}
#main-2 .main2M .main2R .main2RL ul li{display:flex;justify-content: space-between;}
#main-2 .main2M .main2R .main2RL ul li span{font-size:15px;color: rgba(255, 255, 255, .85);line-height: 2;}
#main-2 .main2M .main2R .main2RR{height:350px;padding: 30px 20px;background-color:#D3BFED;position: relative;}
#main-2 .main2M .main2R .main2RR > a{font-size:28px;padding:0 0 40px;display: inline-block;color:#000;}
#main-2 .main2M .main2R .main2RR ul a{padding: 0 10px;display: inline-block;width: 100%;border-bottom: 1px solid #000;}
#main-2 .main2M .main2R .main2RR ul a li{}
#main-2 .main2M .main2R .main2RR ul a li h1{margin: 0 0 5px;font-size: 17px;color: rgba(0, 0, 0, .81);}
#main-2 .main2M .main2R .main2RR ul a li h5{margin: 0;font-size: 17px;color: rgba(0, 0, 0, .81);}
#main-2 .main2M .main2R more{position: absolute;top:0;right:0;padding:15px;}
#main-2 .main2M .main2R more img{position: absolute;top:0;right:0;}


#main-3 .main3M{display:grid; grid-template-columns: 1fr 1fr;gap:25px;padding-bottom:85px;}
#main-3 .main3M .main3L{overflow:hidden;padding:45px;border: 1px solid #E8E8E8;position:relative;}
#main-3 .main3M .main3L .main3LT{padding-bottom:35px;}
#main-3 .main3M .main3L .main3LT h1{margin: 0;font-size: 28px;color:#2e2f2f;padding: 0 0 60px;}
#main-3 .main3M .main3L .main3LM{}
#main-3 .main3M .main3L .main3LM .GalleryS{overflow:hidden;}
#main-3 .main3M .main3L .main3LM .GalleryS .contentSlide .galleryIMG{height:105px;background-repeat:no-repeat;background-position:center;background-size:cover;}
#main-3 .main3M .main3L .main3LM .GalleryS .contentSlide .galleryT{text-align:center;padding-top: 20px;}
#main-3 .main3M .main3L .main3LM .GalleryS .contentSlide .galleryT h1{margin: 0;font-size: 16px;line-height:1.5;word-break: keep-all;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;overflow:hidden;}
#main-3 .main3M .main3L .main3LM .GalleryS .contentSlide .galleryT h5{margin: 0;font-size: 17px;line-height:1.5;}
#main-3 .main3M .main3L .GalleryPTN{cursor: pointer;position: absolute;transform: translate(0, -50%);top: 57%;left: 2%;padding: 20px 10px;background-repeat: no-repeat;background-position: center;}
#main-3 .main3M .main3L .GalleryNTN{cursor: pointer;position: absolute;transform: translate(0, -50%);top: 57%;right: 2%;padding: 20px 10px;background-repeat: no-repeat;background-position: center;}
#main-3 .main3M .main3R{display: grid;grid-template-columns: 1fr 1fr;gap: 25px;}
#main-3 .main3M .main3R .main3RL{overflow:hidden;padding:20px;background-color:#E7AA66;position:relative;}
#main-3 .main3M .main3R .main3RL > a{font-size:28px;color:#fff;}
#main-3 .main3M .main3R .main3RL .main3RLM{overflow:hidden;}
#main-3 .main3M .main3R .main3RL .main3RLM .SongS{padding:15px 0;overflow:hidden;}
#main-3 .main3M .main3R .main3RL .main3RLM .SongS a .songIMG{height: 130px;background-repeat: no-repeat;background-position: center;background-size: cover;aspect-ratio: 16 / 9;}
#main-3 .main3M .main3R .main3RL .main3RLM .SongS a .songT{text-align:center;padding:25px 0 0;}
#main-3 .main3M .main3R .main3RL .main3RLM .SongS a .songT h1{margin:0;font-size:17px;line-height:1.5;color:#fff;}
#main-3 .main3M .main3R .main3RL .main3RLM .SongS a .songT h5{margin:0;font-size:17px;line-height:1.5;color:#fff;}
#main-3 .main3M .main3R .main3RL .SongSPA{text-align:center;}
#main-3 .main3M .main3R .main3RL .SongSPA .swiper-pagination-bullet{background-color:#ffffff!important;opacity:.4!important;width:12px!important;height:12px!important;}
#main-3 .main3M .main3R .main3RL .SongSPA .swiper-pagination-bullet-active{background-color:#ffffff!important;opacity:1!important;}
#main-3 .main3M .main3R .main3RL more{position: absolute;top:0;right:0;padding:15px;}
#main-3 .main3M .main3R .main3RL more img{position: absolute;top:0;right:0;}
#main-3 .main3M .main3R .main3RR {padding:15px;background-color:#57639A;position:relative;}
#main-3 .main3M .main3R .main3RR > a{font-size:28px;color:#fff;}
#main-3 .main3M .main3R .main3RR ul{padding:40px 0 0;}
#main-3 .main3M .main3R .main3RR ul a{}
#main-3 .main3M .main3R .main3RR ul a li{border-bottom:1px solid #fff;padding:0 5px;}
#main-3 .main3M .main3R .main3RR ul a li h1{margin:0;font-size:17px;line-height:1.5;color:#fff;}
#main-3 .main3M .main3R .main3RR ul a li h5{margin:0;font-size:16px;line-height:1.5;color:#fff;}
#main-3 .main3M .main3R .main3RR more{position: absolute;top:0;right:0;padding:15px;}
#main-3 .main3M .main3R .main3RR more img{position: absolute;top:0;right:0;}

@media(min-width:1200px) {
    .container {
        width: 1180px;
    }
}

@media (max-width:1699px) {
}

@media (max-width:1499px) {
}

@media (max-width:1199px) {
    #main-slider{padding-top:90px;}
    #main-1 .main1M .main1Q .main1QM{flex-direction: column;}
    #main-2 .main2M {grid-template-columns: 1fr;}
    #main-2 .main2M .main2L:before{left: -5%;}
    #main-2 .main2M .sermonM h3 span {font-size: 20px;}
    #main-3 .main3M {grid-template-columns: 1fr;}
    #main-3 .main3M .main3R .main3RL .main3RLM .SongS a .songIMG{height:inherit;width:100%;}
    #main-3 .main3M .main3L .main3LM .GalleryS .contentSlide .galleryIMG{height:215px;}
}

@media (max-width:992px) {
    #main-slider{padding-top:90px;}
    #main-1 .main1M .main1Q .main1QM{flex-direction: column;}
    #main-2 {padding: 40px 0 20px;}
    #main-2 .main2M .main2L:before{left: 0;}
    #main-3 .main3M .main3R{order:1;}
    #main-3 .main3M .main3L{order:2;}
    #main-3 .main3M .main3L .main3LM .GalleryS .contentSlide .galleryIMG{height:200px;}
}

@media (max-width:767px) {
    #main-slider{padding-top:90px;}
    #main-1 .main1M {grid-template-columns: 1fr 1fr;}
    #main-1 .main1M .main1Q {padding: 30px 0;}
    #main-1 .main1M .main1Q:nth-child(1),
    #main-1 .main1M .main1Q:nth-child(2){border-bottom:1px solid #fff;}
    #main-1 .main1M .main1Q .main1QM{flex-direction: row;}
    #main-1 .main1M .main1Q .main1QM img{width:25%;}
    #main-1 .main1M .main1Q .main1QM h1{font-size:15px;}
    #main-2 {padding: 20px 0;}
    #main-2 .main2M .sermonM h2 {font-size: 17px;padding-bottom: 10px;}
    #main-2 .main2M .sermonM h1 {font-size: 20px;margin-bottom: 10px;}
    #main-2 .main2M .sermonM h3 span {font-size: 15px;}
    #main-2 .main2M .main2L {height: 350px;padding:20px;}
    #main-2 .main2M .main2L:before{width: 55%;height: 95%;bottom: -11%;}
    #main-2 .main2M .main2R {height: inherit;padding:20px;grid-template-columns: 1fr;}
    #main-2 .main2M .main2R .main2RL{height:inherit;}
    #main-2 .main2M .main2R .main2RL > a{font-size: 20px;padding: 0 0 20px;}
    #main-2 .main2M .main2R .main2RR{height:inherit;}
    #main-2 .main2M .main2R .main2RR > a{font-size: 20px;padding: 0 0 20px;}
    #main-2 .main2M .main2R .main2RR ul{line-height:1.5;}
    #main-3 .main3M{padding-bottom: 20px;}
    #main-3 .main3M .main3R{grid-template-columns: 1fr;}
    #main-3 .main3M .main3R .main3RL{height: inherit;padding: 15px;}
    #main-3 .main3M .main3R .main3RR{height: 305px;padding: 15px;}
    #main-3 .main3M .main3R .main3RR ul{padding: 20px 0 0;}
    #main-3 .main3M .main3R .main3RL > a,
    #main-3 .main3M .main3R .main3RR > a {font-size: 20px;padding-bottom: 15px;}
    #main-3 .main3M .main3R .main3RL ul a,
    #main-3 .main3M .main3R .main3RR ul a {width: 100%;}
    #main-3 .main3M .main3L{padding:15px;}
    #main-3 .main3M .main3L .main3LT h1 {font-size: 20px;padding-bottom: 10px;}
}

@media (max-width:320px) {
}
