@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: '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;     margin-top: 116px;}
.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;}
.headerT .white{background-color: rgba(255, 255,255,1) !important;}
/* 스크롤 시 붙는 클래스 */
#gnb-wrap.white {
    position: fixed !important; /* 화면에 고정 */
    top: 0 !important;          /* 맨 상단에 밀착 */
    left: 0;
    width: 100%;
    background: #fff;           /* 배경색 (필요시) */
    z-index: 9999;              /* 다른 요소보다 위에 오도록 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 살짝 그림자 추가(선택사항) */
}




#main-1{display: inline-flex;width: 100%;flex-direction: row;padding: 70px 0 0px;background-color:#fff;}
#main-1 .main1R{width: 50%;display: grid; 	grid-template-rows: auto 200px;  }
#main-1 .main1R .intro {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #EEEEEE;
        background-color: #fff;
        justify-content: center;
        text-decoration: none;
        color: inherit;
		padding: 10px 0;

    }
#main-1 .main1R .intro1 {border-top: 2px solid #EEEEEE;}
#main-1 .main1R .intro2 {border-bottom: 2px solid #EEEEEE;}

#main-1 .main1R .intro .introIMG{position:relative;padding:36px;display:inline-block;}
#main-1 .main1R .intro .introIMG .on,
#main-1 .main1R .intro .introIMG .off{background-repeat:no-repeat;background-position:center;background-size:cover;position:absolute;width:100%;height:100%;top:0;right:0;}
#main-1 .main1R .intro h1{margin: 0;font-size: 24px;line-height: 2.5;font-weight: bold;letter-spacing: 1px;}
#main-1 .main1R .intro h3{margin: 0;font-size: 15px;margin-bottom: 10px; word-break: keep-all;color:#9c9c9c;}
#main-1 .main1R .intro .introBTN{padding:20px 70px;position: relative;display: inline-block;border: 1px solid rgba(230,230,230,1);border-radius: 50px;}
#main-1 .main1R .intro .introBTN:before{background-color:#283c82;}
#main-1 .main1R .intro .introBTN h5{position: absolute;top: 50%;right:50%;text-align: center;border: none;display: block;transform: translate(50%,-50%);margin:0;font-size:16px;color:#848484;}
#main-1 .main1R .intro:hover .introBTN{border:1px solid rgba(0,0,0,0);}
#main-1 .main1R .intro:hover .introBTN h5{color:#fff; transition:0.3s all ease;}
#main-1 .main1L{width:50%;text-decoration:none;color:inherit;border-bottom:1px solid #EEEEEE;}
#main-1 .main1L .sermonBG{position:relative;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main-1 .main1L .sermonBG .sermonPLAY{padding: 24px 35px;position: absolute;top: 50%;right: 50%;text-align: center;transform: translate(50%,-50%);}
#main-1 .main1L .sermonBG .sermonPLAY .on,
#main-1 .main1L .sermonBG .sermonPLAY .off{background-repeat:no-repeat;background-position:center;background-size:cover;position:absolute;width:100%;height:100%;top:0;right:0;}
#main-1 .main1L .sermonBT{display: inline-flex;width: 100%;align-items: center;justify-content: center;background-color:#fff; -ms-word-break: keep-all;
word-break: keep-all; 		border-right: 2px solid #eee;
       }
#main-1 .main1L .sermonBT .sermonBTT{text-align:center;}
#main-1 .main1L .sermonBT .sermonBTT h2{margin: 0;font-size: 20px;letter-spacing: 0px;color: #2AABE1;display: inline-flex;gap: 10px;align-items: baseline;}
#main-1 .main1L .sermonBT .sermonBTT h2 span:nth-child(1){font-size:27px;}
#main-1 .main1L .sermonBT .sermonBTT h1{margin: 0;font-size: 36px;font-weight: bold;letter-spacing: 1px;line-height: 2.5;color:#000;word-break:keep-all;}
#main-1 .main1L .sermonBT .sermonBTT h5{display: inline-flex;align-items: center;justify-content: center;gap: 10px;font-size: 15px;margin:0;}
#main-1 .main1L .sermonBT .sermonBTT h5 span{font-size:20px;color:#666666;}
#main-1 .main1L .sermonBT .sermonBTT h5{}

#main-2{padding: 60px 0 70px;background-color:#F9F9F9;}
#main-2 .main2M .main2T{}
#main-2 .main2M .main2T h1{margin: 0;font-size: 32px;font-weight: bold;letter-spacing: 0px;color:#000;}
#main-2 .main2M .main2T hr{border: 1px solid #000;width:50px;margin: 20px auto 20px 0;}
#main-2 .main2M{position:relative;}
#main-2 .main2M .GalleryS{overflow:hidden;}
#main-2 .main2M .GalleryS .galleryIMG{display: block;position: relative;height: 200px;
    border-radius: 10px;
overflow: hidden;background-color: #000;margin: 0 auto;background-size: cover;background-position: 50% 50%;
background-origin: border-box;background-repeat: no-repeat;}
#main-2 .main2M .GalleryS .galleryT{position: absolute;height: 100%;width: 100%;
background: rgba(0,0,0,0.5);z-index: 3;top: 0;left: 0;display: none;}
#main-2 .main2M .GalleryS .galleryT h1{font-size: 20px;margin: 0;color: #fff;position: absolute;
top: 40%;text-align: left;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);text-align:center;}
#main-2 .main2M .GalleryS .galleryT h5{font-size: 17px;color: #fff;margin: 0;position: absolute;
top: 55%;text-align: left;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);text-align:center;}
#main-2 .main2M .galleryP{position: absolute;z-index: 2;top: 50%;text-align: center;left: -5%;
border: none;display: block;transform: translate(0,-50%);}
#main-2 .main2M .galleryN{position: absolute;z-index: 999;top: 50%;text-align: center;right: -5%;
border: none;display: block;transform: translate(0,-50%);}

#main-3{background-color:#E4ECF0;}
#main-3 .main3M{display: grid;gap: 40px;padding: 100px 0;width: 100%;grid-template-columns: 1fr 1fr;}
#main-3 .main3M .noteM{padding: 50px;height: 390px;overflow: hidden;position:relative;background-color:rgba(255,255,255,0.9); -webkit-border-radius: ;
-moz-border-radius: ;
border-radius:10px 0  10px  10px ;}
#main-3 .main3M .noteM .noteHF{display: inline-block;position: absolute;right: 0;top: 0; }
#main-3 .main3M .noteM .noteHF div{padding: 25px;display: inline-block;background-color: #183272;background-repeat: no-repeat;background-position: center;}
#main-3 .main3M .noteM .noteT{}
#main-3 .main3M .noteM .noteT h1{margin: 0;font-size: 32px;font-weight: bold;letter-spacing: 0px;color:#000;}
#main-3 .main3M .noteM .noteT hr{border: 1px solid #000;width: 50px;margin: 20px auto 20px 0;}

#main-3 .main3M .noteM ul{}
#main-3 .main3M .noteM ul a{line-height: 2.2;}
#main-3 .main3M .noteM ul a li{font-size: 24px;text-align: left;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;color:#000;}
#main-3 .main3M .noteM ul a:hover li{font-weight:bold; transition:0.3s all ease;}




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






    .archive-wrap {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: 1FR 1fr;
        width: 100%;

        gap: 0px !important;
    }
    .archive-left img {
        height: auto;
        
    }
    .archive-left strong {
        font-size: 24px !important;
        line-height: 1.3;
        text-align: center;
    }
}
#main-archive {
    border-top: 1px solid #eee;
    padding: 30px 20px;
    background: #fff;
    DISPLAY: contents;
}

.archive-wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.archive-left {    display: flex;    align-items: center;    gap: 16px;    align-items: center;    justify-content: center; padding: 20px; -ms-word-break: keep-all;
word-break: keep-all;}

    .archive-left img {
        height: auto;
    }

    .archive-left strong {
        font-size: 24px;
        line-height: 1.3;
        text-align: center;
    }

.archive-right {
    display: grid;
    gap: 12px;
    margin: 10px;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr;
}
.archive-right h4{text-align: center;}
    .archive-right a {
        padding: 10px 5px;
        background: #f0f0f0;
        border-radius: 6px;
        font-size: 14px;
        color: #333;
        text-decoration: none;
        transition: all .2s ease;
    }

        .archive-right a:hover {
            background: #283c82;
            color: #fff;
        }

.archive-wrap {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 2FR 3fr;
    width: 100%;

}
#main-3 {
    background-image: url(../images/m_bg1.png );
}
.sermon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sermon-item a {
    display: flex;
    justify-content: space-between; /* 제목 왼쪽, 날짜 오른쪽 */
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.sermon-title {
    font-size: 15px;
}

.sermon-date {
    font-size: 14px;
    color: #2b6cff; /* 날짜 색상 */
    flex-shrink: 0;
}

.jubo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jubo-item a {
    display: flex;
    justify-content: space-between; /* 제목 왼쪽, 날짜 오른쪽 */
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.jubo-title {
    font-size: 15px;
}

.jubo-date {
    font-size: 14px;
    color: #2b6cff; /* 날짜 색상 */
    flex-shrink: 0;
}
.sermonBT {
    width: 100%;
    text-align: center;

}

    .sermonBT h2 {
        font-size: 14px;
        font-weight: 400;
        color: #888;
        margin-bottom: 12px;
    }

        .sermonBT h2 span {
            margin: 0 4px;
        }

    .sermonBT h1 {
        font-size: 28px;
        font-weight: 600;
        color: #111;
        margin: 0 0 18px;
        line-height: 1.4;
    }

    .sermonBT h5 {
        font-size: 14px;
        font-weight: 400;
        color: #666;
        margin: 0;
    }

        .sermonBT h5 span {
            margin: 0 6px;
        }
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 0;

}

.ytp-title-link, .ytp-title-channel {
    display:none;
}

.sermonBT, .archive-wrap{height: 200px;}
.gallery_txt h3{font-size:15px;}


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

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

@media (max-width:1499px) {
    #main-1 .main1L .sermonBG{height:inherit;}
    #main-1 .main1L .sermonBT{height: inherit;padding: 30px 0;}
    #main-1 .main1L .sermonBT .sermonBTT h1{line-height:1.5;}
    #main-1 .main1R .intro{justify-content: center;}
}

@media (max-width:1199px) {
    #main-1{flex-direction: column;}
    #main-1 .main1L,
    #main-1 .main1R{width:100%;}
    #main-3 .main3M{grid-template-columns: 1fr;}
}

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

@media (max-width:767px) {
		#main-slider{position:relative;     margin-top: 60px;}
	#main-1{padding: 20px 0;}
	#main-1 .main1L .sermonBT .sermonBTT h2 span:nth-child(1){font-size:17px;}
	#main-1 .main1L .sermonBT .sermonBTT h2{font-size:15px;}
	#main-1 .main1L .sermonBT .sermonBTT h1{font-size:24px;}
	#main-1 .main1L .sermonBT .sermonBTT h5{font-size:10px;}
	#main-1 .main1L .sermonBT .sermonBTT h5 span{font-size:15px;}
	#main-1 .main1R .intro{}
	#main-1 .main1R .intro h1{font-size:20px;line-height: 2;}
	#main-1 .main1R .intro h3 {font-size: 14px;    text-align: center;	}
	#main-1 .main1R .intro .introBTN {padding: 15.5px 60.5px;}
	#main-1 .main1R .intro .introBTN h5 {	font-size: 15px;	width: 100%;	}
	#main-3 .main3M{padding: 20px 0; gap:20px;}
	#main-3 .main3M .noteM{padding:20px;height: unset;}
	#main-3 .main3M .noteM .noteT hr{margin: 10px auto 10px 0;}
	#main-3 .main3M .noteM .noteT h1{font-size:20px;}
	#main-3 .main3M .noteM ul a{line-height: unset;}
	#main-3 .main3M .noteM ul a li{font-size:17px;}
	#main-2{padding:20px 0;}
	#main-2 .main2M .main2T h1{font-size:20px;}
	#main-2 .main2M .main2T hr {margin: 10px 0 20px;}
	#main-1 .main1R{ 	grid-template-rows: auto;  }
	.archive-wrap {    grid-column: 1 / -1;    display: grid;    grid-template-columns:1fr;    width: 100%;   height: unset; padding: 20px 0 0;}
	.archive-wrap  h4{font-size: 16px;}
	#main-1 .main1R .intro .introIMG{padding:26px;}
	.archive-left img { width:60px;       }
	.sermonBG{padding:10px;}
.detail-video {-webkit-border-radius: ;
-moz-border-radius: ;
border-radius:20px ;}

}

@media (max-width:600px) {
    #main-1 .main1R .intro .introIMG .on,
    #main-1 .main1R .intro .introIMG .off {
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
    }

}

.main2T div {
    padding: 25px;
    display: inline-block;

    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/UserData/bdsm/Layouts/bdsm_2026_Layout/Images/KakaoTalk_20260115_093828277.png);
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
}