@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); }
}
@keyframes rotation{
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes updown {0% {bottom: 0;}100% {bottom: 30px;}}
@keyframes updown {0% {bottom: 0;}100% {bottom: 30px;}}
@-webkit-keyframes updown2 {0% {bottom: 0;}100% {bottom: 15px;}}
@keyframes updown2 {0% {bottom: 0;}100% {bottom: 15px;}}
@-webkit-keyframes arrayR {0%,100% {-webkit-transform:translateX(0);}50% {-webkit-transform:translateX(25px);}}
@keyframes arrayR {0%,100% {transform:translateX(0);}50% {transform:translateX(25px);}}
@-webkit-keyframes arrayL {0%,100% {-webkit-transform:translateX(0);}50% {-webkit-transform:translateX(25px);}}
@keyframes arrayL {0%,100% {transform:translateX(0);}50% {transform:translateX(25px);}}
.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;}
.slider .slider-wrapper .slide p{width: 100%;}
.slider .slider-wrapper .slide .each-img img{width: 100%;}
.box{display:inline-block; position:relative; opacity:0; top:50px; }

:root{--gap:30px;--width1:30%;--width2:6;}
.black{color:#000;}
.white{color:#fff;}
a{color:inherit;text-decoration:none;}

.slider .slider-dots{display: inline-flex;justify-content: center;gap: 10px;}
.slider .slider-dots .each-dot{width:20px!important;height:20px!important;background-color:#fff!important;transition:0.3s all ease;}
.slider .slider-dots .each-dot.active{width:15px!important;height:15px!important;background-color:rgba(0,0,0,0.5)!important;transition:0.3s all ease;margin-bottom:30px;border: none !important;border-radius:15px!important;}

.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-more2 {
    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;}

a:hover .view-more2: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 .view-more2: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;}
.direct-popup .visible-popups > .each > .bottom span{font-size:17px!important;}

#main2 {padding: 4vw 0 3.5vw;}
#main2 .main2T{margin:  0 0 2.9vw;}
#main2 .main2T h1{margin:0;font-size: 2rem;text-align:center;word-break:keep-all;}
#main2 .main2M{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
#main2 .main2M .main2BT{position: relative;display: flex;flex-direction: column;align-items: center;gap: 1.5vw;margin:0;text-decoration:none;}
#main2 .main2M .main2BT:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main2 .main2M .main2BT h1{margin:0;font-size:1rem;color:#000;font-family: 'pretendard-regular';}
#main2 .main2M .main2BT .circle{padding: 1.55vw;display: inline-block;position: relative;}
#main2 .main2M .main2BT .circle .on,
#main2 .main2M .main2BT .circle .off{position:absolute;top:0;right:0;width:100%;height:100%;background-repeat: no-repeat;background-position: center;background-size: cover;}

#main3{position:relative;padding: 8vw 0 2vw;}
#main3 .main3T{padding: 0 0 3vw;display: flex;justify-content: space-between;align-items: flex-end;text-decoration:none;color:#000;}
#main3 .main3T h1{margin:0;font-size:3rem;}
#main3 .main3T .main3HF{display: flex;align-items: flex-end;gap: .5vw;}
#main3 .main3T .main3HF h3{margin:0;font-size:1rem;}
#main3 .main3T .main3HF img{padding: 7px;background-color: #000;border-radius: 50%;}
#main3 .main3M{display: grid;grid-template-columns: 1fr 1fr 1fr;gap:30px;}
#main3 .main3M .sermonM{}
#main3 .main3M .sermonM .sermonBG{ position: relative;width: 100%;padding-bottom: 56.25%;height: 0;overflow: hidden;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main3 .main3M .sermonM .sermonT{}
#main3 .main3M .sermonM .sermonT h3{margin:0;font-size:1rem;line-height:2;}
#main3 .main3M .sermonM .sermonT h1{margin:0;font-size:1.1rem;font-weight:bold;}
#main3 .main3M .sermonM .sermonT h5{margin:0;font-size:.9rem;line-height:2;}

#main4{padding: 3vw 0 8.5vw;}
#main4 .main4T{display: inline-block;padding: 0 0 3vw;color:#000;}
#main4 .main4T h1{margin:0;font-size:3rem;}{margin:0;font-size:3rem;}
#main4 .worshipM{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:30px;}
#main4 .worshipM .worshipBG{position: relative;height: 18vw;background-repeat: no-repeat;background-position: center;background-size: cover;transition:0.3s all ease;}
#main4 .worshipM .worshipBG:hover{filter: grayscale(0%);}
#main4 .worshipM .worshipBG h1{margin:0;font-size:1.5rem;position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;color:#fff;}


#main5{padding: 7.5vw 0 8vw;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main5 .main5T{display: inline-block;margin: 0 0 3vw;}
#main5 .main5T h2{margin:0 0 .95vw;font-size:1.3rem;color:#fff;}
#main5 .main5T h1{margin:0;font-size:3rem;color:#fff;}
#main5 .main5M{display: flex;justify-content: center;}
#main5 .main5M .ngM{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 40px;width:100%;}
#main5 .main5M .ngM .ngBT{display: flex;flex-direction: column;align-items: center;position:relative;height:11.5vw;}
#main5 .main5M .ngM .ngBT:last-child{grid-column: span 2;}
#main5 .main5M .ngM .ngBT .ngBTM{position: absolute;transform: translate(0, -50%);top: 50%;color:#fff;}
#main5 .main5M .ngM .ngBT:nth-child(2) .ngBTM,
#main5 .main5M .ngM .ngBT:nth-child(4) .ngBTM{color:#000;}
#main5 .main5M .ngM .ngBT:nth-child(2) .ngBTM hr,
#main5 .main5M .ngM .ngBT:nth-child(4) .ngBTM hr{border-color:#000;}
#main5 .main5M .ngM .ngBT .ngBTM h1{margin: 0;width: 100%;font-size: 1.35rem;text-align:center;font-weight:bold;}
#main5 .main5M .ngM .ngBT .ngBTM hr{width: 1.2vw;}
#main5 .main5M .ngM .ngBT .ngBTM h5{margin: 0;width: 100%;font-size: 1rem;text-align:center;line-height:1.5;}

#main6{padding: 7.5vw 0;background-color:#fff;}
#main6 .main6T{margin: 0 0 2.9vw;text-align:center;}
#main6 .main6T h2{margin:0 0 .95vw;font-size:1.3rem;color:#fff;}
#main6 .main6T h1{margin:0;font-size:3rem;color:#000;}
#main6 .main6M{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: .77vw;}
#main6 .main6M .npBT{aspect-ratio: 29 / 55;position:relative;background-repeat: no-repeat;background-position: center;background-size: contain;}
#main6 .main6M .npBT:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main6 .main6M .npBT .npBG{position: absolute;transform: translate(-50%, -50%);top: 25%;left: 50%;padding: 4vw;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: contain;border-radius: 50%;}
#main6 .main6M .npBT .npBTM{position: absolute;transform: translate(-50%, 0%);left: 50%;top: 45%;width: 100%;display: flex;flex-direction: column;gap: 1.3vw;}
#main6 .main6M .npBT .npBTM h1{margin: 0;font-size: 1.7rem;width: 100%;text-align: center;color:#5b3228;font-weight:bold;letter-spacing:.1vw;}
#main6 .main6M .npBT .npBTM h5{margin: 0;font-size: 1rem;width: 100%;text-align: center;line-height: 1.4;color:#000000;word-break:keep-all;}
#main6 .main6M .npBT h6{position: absolute;transform: translate(-50%, -50%);top: 85%;left: 50%;margin: 0;padding: 0 0 .3vw;font-size: .9rem;border-bottom: 1px solid #000;color:#202020; transition:0.3s all ease;}
#main6 .main6M .npBT:hover h6{color:#5b3228;border-color:#5b3228; transition:0.3s all ease;}

#main7{background-color:#a08d80;}
#main7 .main7FM{display: grid;grid-template-columns: 1fr 2fr;padding: 7.5vw 0 8.5vw;}
#main7 .main7FM .main7T{}
#main7 .main7FM .main7T h1{margin:0;font-size:3rem;color:#fff;line-height: 1.5;}
#main7 .main7FM .main7M{display: grid;grid-template-columns: 1fr 1fr;}
#main7 .main7FM .main7M .service{display: flex;flex-direction: column;justify-content: center;gap: 40px;}
#main7 .main7FM .main7M .service h1{margin:0;font-size: 1.7rem;color:#5b3228;}
#main7 .main7FM .main7M .service h5{margin:0;font-size: 1.1rem;line-height:1.5;color:#fff;}

#main8{padding: 4.5vw 0 6.5vw;}
#main8 .main8T{padding: 0 0 1vw;display: flex;justify-content: space-between;align-items: flex-end;text-decoration:none;color:#000;border-bottom: 1px solid #000;}
#main8 .main8T h1{margin:0;font-size:3rem;}
#main8 .main8T .main8HF{display: flex;align-items: flex-end;gap: .5vw;}
#main8 .main8T .main8HF h3{margin:0;font-size:1rem;}
#main8 .main8T .main8HF img{padding: 7px;background-color: #000;border-radius: 50%;}
#main8 .main8M{display: flex;flex-direction: column;}
.newsIL {
  padding: 1.2rem 0;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  transition: background 0.3s;
}

.newsT {
  font-size: 1.1rem;
  font-weight:bold;
  margin-bottom: 0.6rem;
}

.newsC {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  position: relative;
}

.newsIL.active .newsC {
  max-height: 3000px;
  margin-top: 0.8rem;
  position:relative;
}

.newsCT {
  font-size: 0.95rem;
  line-height: 1.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-height: 6.4rem; /* 1.6 * 4 */
}

.newsBT {
  margin-top: 0.8rem;
  display: inline-block;
  background: black;
  color: white;
  padding: 0.1vw 1vw;
  border-radius: 25px;
  font-size: 0.85rem;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}








@media (max-width:1699px) {
}
/* ========================================================
   [노트북 / 작은 해상도 데스크톱] 1499px 이하 해상도
======================================================== */
@media (max-width: 1499px) {
    #main3 .sermonT .sermonBT { padding: 15vw; }
    #main5 .main5M .ngM .ngBT { padding: 8vw 9vw; }
}

/* ========================================================
   [소형 데스크톱 / 가로형 태블릿] 1199px 이하 해상도
======================================================== */
@media (max-width: 1199px) {
    #main2 .main2M .main2BT .circle { padding: 4vw; }
    #main2 .main2M .main2BT h1 { font-size: 0.95rem; }
    
    #main5 .main5M .ngM .ngBT .ngBTM h1 { font-size: 1.25rem; }
    #main5 .main5M .ngM .ngBT .ngBTM h5 { font-size: 0.9rem; }
    
    #main6 .main6M .npBT .npBTM h1 { font-size: 1.4rem; }
    #main6 .main6M .npBT .npBTM h5 { font-size: 0.85rem; }
    #main6 .main6M .npBT .npBG { padding: 5.5vw; }
}

/* ========================================================
   [세로형 태블릿] 992px 이하 해상도
======================================================== */
@media (max-width: 992px) {
    .row { padding: 0 2vw; }

    #main2 .main2M { display: flex; flex-wrap: wrap; justify-content: center; gap: 4vw; }
    #main2 .main2M .main2BT { width: 30%; gap: 2vw; }
    
    #main3 .main3M { gap: 3vw; }
    #main3 .main3M .sermonM .sermonT h1 { font-size: 1.05rem; }
    
    #main4 .worshipM { grid-template-columns: 1fr 1fr; gap: 3vw; }
    #main4 .worshipM .worshipBG { height: 25vw; }
    
    #main5 .main5M .ngM { grid-template-columns: 1fr 1fr; gap: 3vw; }
    #main5 .main5M .ngM .ngBT { height: auto; aspect-ratio: 16 / 9; display: flex; justify-content: center; align-items: center; padding: 0; }
    #main5 .main5M .ngM .ngBT .ngBTM { position: relative; transform: none; top: auto; left: auto; }
    #main5 .main5M .ngM .ngBT:last-child { grid-column: span 2; }
    
    #main6 .main6M { grid-template-columns: 1fr 1fr; gap: 5vw; }
    #main6 .main6M .npBT { aspect-ratio: auto; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
    #main6 .main6M .npBT .npBG { position: relative; transform: none; top: auto; left: auto; padding: 0; width: 22vw; height: 22vw; margin-bottom: 3vw; border-radius: 50%; }
    #main6 .main6M .npBT .npBTM { position: relative; transform: none; top: auto; left: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5vw; }
    #main6 .main6M .npBT .npBTM h1 { font-size: 1.5rem; }
    #main6 .main6M .npBT .npBTM h5 { font-size: 1rem; }
    #main6 .main6M .npBT h6 { position: absolute; bottom: 0; top: auto; transform: translateX(-50%); left: 50%; }
    
    #main7 .main7FM { grid-template-columns: 1fr; gap: 5vw; padding: 8vw 0; }
    #main7 .main7FM .main7T { text-align: center; }
    #main7 .main7FM .main7M { grid-template-columns: 1fr 1fr; gap: 4vw; }
    #main7 .main7FM .main7M .service { text-align: center; align-items: center; }
}

/* ========================================================
   [모바일] 767px 이하 해상도
======================================================== */
@media (max-width: 767px) {
    .row { margin: 0; padding: 0 15px; }
    
    #main2 { padding: 12vw 0; }
    #main2 .main2T h1 { font-size: 1.6rem; }
    #main2 .main2M { display: flex; flex-wrap: wrap; justify-content: center; gap: 5vw; }
    #main2 .main2M .main2BT { width: 28%; gap: 3vw; }
    #main2 .main2M .main2BT .circle .on, #main2 .main2M .main2BT .circle .off{background-size: contain;}
    #main2 .main2M .main2BT .circle { padding: 10vw; width: 100%; box-sizing: border-box; }
    #main2 .main2M .main2BT h1 { font-size: 0.95rem; }

    #main3 { padding: 12vw 0; }
    #main3 .main3T { flex-direction: column; align-items: flex-start; gap: 3vw; }
    #main3 .main3T h1 { font-size: 1.8rem; }
    #main3 .main3M { grid-template-columns: 1fr; gap: 8vw; }
    #main3 .main3M .sermonM .sermonT { padding-top: 3vw; }
    #main3 .main3M .sermonM .sermonT h1 { font-size: 1.4rem; }

    #main4 { padding: 12vw 0; }
    #main4 .main4T h1 { font-size: 1.8rem; }
    #main4 .worshipM { grid-template-columns: 1fr 1fr; gap: 3vw; }
    #main4 .worshipM .worshipBG { height: 35vw; }
    #main4 .worshipM .worshipBG h1 { font-size: 1.2rem; }

    #main5 { padding: 12vw 0; }
    #main5 .main5T h1 { font-size: 1.8rem; }
    #main5 .main5M .ngM { grid-template-columns: 1fr 1fr; gap: 3vw; }
    #main5 .main5M .ngM .ngBT { height: auto; aspect-ratio: 1 / 1; padding: 0; display: flex; justify-content: center; align-items: center; }
    #main5 .main5M .ngM .ngBT .ngBTM { position: relative; transform: none; top: auto; left: auto; padding: 4vw; }
    #main5 .main5M .ngM .ngBT .ngBTM h1 { font-size: 1.3rem; }
    #main5 .main5M .ngM .ngBT .ngBTM h5 { font-size: 0.85rem; }
    #main5 .main5M .ngM .ngBT .ngBTM hr { width: 5vw; margin: 3vw auto; }
    #main5 .main5M .ngM .ngBT:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }

    #main6 { padding: 12vw 0; }
    #main6 .main6T h1 { font-size: 1.8rem; }
    #main6 .main6T h2 { font-size: 1.3rem; }
    #main6 .main6M { grid-template-columns: 1fr; gap: 10vw; }
    #main6 .main6M .npBT { aspect-ratio: auto; padding-bottom: 50px; display: flex; flex-direction: column; align-items: center; }
    #main6 .main6M .npBT .npBG { position: relative; transform: none; left: auto; top: auto; width: 45vw; height: 45vw; margin: 0 auto; display: block; padding: 0; border-radius: 50%; }
    #main6 .main6M .npBT .npBTM { position: relative; transform: none; left: auto; top: auto; margin-top: 6vw; gap: 3vw; align-items: center; }
    #main6 .main6M .npBT .npBTM h1 { font-size: 1.6rem; }
    #main6 .main6M .npBT .npBTM h5 { font-size: 1rem; }
    #main6 .main6M .npBT h6 { position: absolute; transform: translate(-50%, 0); top: auto; bottom: 0; left: 50%; }

    #main7 { padding: 12vw 0; }
    #main7 .main7FM { grid-template-columns: 1fr; gap: 8vw; }
    #main7 .main7FM .main7T h1 { font-size: 1.8rem; line-height: 1.3; }
    #main7 .main7FM .main7M { grid-template-columns: 1fr; gap: 8vw; }
    #main7 .main7FM .main7M .service h1 { font-size: 1.5rem; margin-bottom: 2vw; }

    #main8 { padding: 12vw 0; }
    #main8 .main8T { flex-direction: column; align-items: flex-start; gap: 3vw; border-bottom: none; }
    #main8 .main8T h1 { font-size: 1.8rem; }
    #main8 .main8T .main8HF { align-self: flex-end; }
    .newsCT { -webkit-line-clamp: 2; width: 85%; }
}