/* ============================================================
   Main Page CSS - 시안 맞춤
============================================================ */
#dimodePage { 
    margin-top: 96px;
}



.mainContainer { width:100%; }
.mainContainer .container {
    width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Quick */
#mainQuick {
    padding: 70px 0 120px;
    background:#fff;
}

.quick_list {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:150px;
    list-style:none;
    margin:0;
    padding:0;
}

.quick_item {
    text-align:center;
}

.quick_item a {
    display:block;
    color:#182034;
    text-decoration:none;
}

.quick_icon {
    width:120px;
    aspect-ratio:1;
    border:1px solid #1d2538;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    background:#fff;
}

.quick_icon img {
    /* max-width:38px; */
    /* max-height:38px; */
}

.quick_label {
    margin:0 0 4px;
    font-size:19px;
    font-weight:600;
    color:#182034;
}

.quick_eng {
    margin:0;
    font-size:19px;
    font-weight:600;
    color:#182034;
}

/* Sermon */
#mainSermon {
    position:relative;
    padding:0 0 120px;
    background: linear-gradient(to bottom, #fff 0 27%, #454e70 27% 100%); 
}

#mainSermon .container {
    /* max-width:1050px; */
}

.sermon_box {
    display:grid;
    grid-template-columns: 1fr 1fr;
	align-items: start;
    background:transparent;
    overflow:visible;
	    gap: 100px;
}

.sermon_thumb_link {
    display:block;
    position:relative;
    margin:0;
    z-index:2;    padding-top: 30px;
}

.sermon_thumb {
    position:relative;
    aspect-ratio: 16 / 9;
	min-width: 790px;
    background-size:cover;
    background-position:center;
    box-shadow:0 15px 25px rgba(0,0,0,.25);
}

.sermon_play {
    position:absolute;
        right: 35px;
    bottom: -71px;
    width: 160px;
    aspect-ratio: 1;
    background:#ee9c9d;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
}

.sermon_play img {
    width:42px;
}

.sermon_info {
    min-height:315px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;     gap: 75px;
}

.sermon_live { 
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    color:#111;
}

.live_text {
    font-size:24px;
    color:#111;
    letter-spacing:-.04em;
}

.live_arrow {
    font-size:20px;
    color:#e79ba0;
}

.live_btn {
    width:160px;
    aspect-ratio: 1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#cde3f0;
    color:#2b3b50;
    font-size:21px;
    line-height:1.15;
    text-align:center;
    text-decoration:none;
}

.sermon_detail {
    color:#fff;
}

.sermon_label {
    margin:0 0 20px;
    font-size:16px;
    color:#fff;
}

.sermon_title {
    margin:0 0 28px;
    font-size:31px;
    font-weight:700;
    line-height:1.25;
    color:#fff;
}

.sermon_bible,
.sermon_meta {
    margin:0 0 6px;
    font-size:16px;
    color:#fff;
}

/* Next */
#mainNext {
    padding:100px 0;
    background:#eaf6fb url('../Images/main/4_nxt_bg.png') no-repeat center center / cover;
}

.next_head {
    margin-bottom:24px;
}

.next_title {
    margin:0;
    font-size:36px;
    font-weight:800;
    color:#18304f;
    letter-spacing:-.05em;
}

.next_title span {
    margin-left:10px;
    font-size:22px;
    font-weight:400;
    color:#1e2a3a;
    letter-spacing:-.03em;
}

.next_wrap {
    display:grid;
    grid-template-columns: 4fr 2fr 2fr 3fr;
    grid-template-rows: 240px 240px;
    gap:0;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.next_col_left,
.next_col_right {
    display:contents;
}

.next_item {
    position:relative;
    display:block;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
    background-size:cover;
    background-position:center;
}

.next_item::before {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.38);
    z-index:1;
}

.next_inner {
    position:absolute;
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    text-align:center;
    padding:0 14px;
}

.next_name {
    margin:0 0 8px;
    font-size:24px;
    font-weight:800;
    color:#fff;
}

.next_desc {
    margin:0;
    font-size:16px;
    line-height:1.45;
    color:#fff;
    word-break:keep-all;
}

.next_item_01 { grid-column:1; grid-row:1; background-image:url('../Images/main/4_nxt_cont_bg_1.png'); }
.next_item_02 { grid-column:1; grid-row:2; background-image:url('../Images/main/4_nxt_cont_bg_2.png'); }
.next_item_03 { grid-column:2; grid-row:1 / span 2; background-image:url('../Images/main/4_nxt_cont_bg_3.png'); }
.next_item_04 { grid-column:3; grid-row:1 / span 2; background-image:url('../Images/main/4_nxt_cont_bg_4.png'); }
.next_item_05 { grid-column:4; grid-row:1; background-image:url('../Images/main/4_nxt_cont_bg_5.png'); }
.next_item_06 { grid-column:4; grid-row:2; background-image:url('../Images/main/4_nxt_cont_bg_6.png'); }

/* Bottom */
#mainBottom {
    padding:90px 0;
    background:#fff;
}
#mainBottom >div{margin-left: 210px;     margin-right: 50px;}

.bottom_wrap {
    display:grid;
    grid-template-columns: 1fr 1.65fr;
    gap:70px;
}

.bottom_head {
    margin-bottom:28px;
}

.bottom_title {
    margin:0;
    font-size:38px;
    font-weight:800;
    color:#000;
    line-height:1;
}

.bottom_title span {
    display:none;
}

.location_box {
    display:block;
    border:0;
    border-radius:0;
    overflow:hidden;
}

.location_map {
    width:100%; 
    background-size:cover;
    background-position:center;
}
div#daumRoughmapContainer1779945454056 .cont {
    display: none;
}

/* .gallery_slider { */
    /* position:relative; */
/* } */

/* .gallery_slider .gallery_item { */
    /* padding:0 10px; */
/* } */

/* .gallery_item a { */
    /* display:block; */
    /* color:#111; */
    /* text-decoration:none; */
/* } */

/* .gallery_thumb { */
    /* height:150px; */
    /* background-size:cover; */
    /* background-position:center; */
    /* box-shadow:0 7px 14px rgba(0,0,0,.25); */
/* } */

/* .gallery_caption, */
/* .gallery_date { */
    /* display:none; */
/* } */

/* .gallery_slider .slick-prev, */
/* .gallery_slider .slick-next { */
    /* width:24px; */
    /* height:24px; */
    /* z-index:5; */
/* } */

/* .gallery_slider .slick-prev { */
    /* left:auto; */
    /* right:38px; */
    /* top:185px; */
/* } */

/* .gallery_slider .slick-next { */
    /* right:0; */
    /* top:185px; */
/* } */

/* Gallery 영역 폭 강제 보정 */
.bottom_gallery {
    min-width: 0;
    overflow: visible;
}

.gallery_slider {
    position: relative;
    width: 100%;
    min-width: 0;
    padding-bottom: 46px;
    overflow: visible;
}

.gallery_slider .slick-list {
    overflow: hidden;
    margin: 0 -13px;
}

.gallery_slider .slick-track {
    display: flex !important;
    align-items: stretch;
}

.gallery_slider .slick-slide {
    height: auto;
    box-sizing: border-box;
}

.gallery_slider .slick-slide > div {
    height: 100%;
}

.gallery_slider .gallery_item {
    padding: 0 0;
    box-sizing: border-box;
}

.gallery_item a {
    position: relative;
    display: block;
        height: 210px;
    aspect-ratio: 14 / 9;
    overflow: hidden;
    color: #fff;
    text-decoration: none; 
}

.gallery_thumb {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .35s ease;
}

.gallery_item a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.48);
    opacity: 0;
    z-index: 2;
    transition: opacity .35s ease;
}

.gallery_caption,
.gallery_date {
    display: block;
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 3;
    text-align: center;
    color: #fff;
    opacity: 0;
    transition: all .35s ease;
    pointer-events: none;
}

.gallery_caption {
    top: 50%;
    margin: -22px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    transform: translateY(14px);
}

.gallery_date {
    top: 50%;
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.2;
    transform: translateY(14px);
}

.gallery_item a:hover .gallery_thumb {
    transform: scale(1.05);
}

.gallery_item a:hover::before,
.gallery_item a:hover .gallery_caption,
.gallery_item a:hover .gallery_date {
    opacity: 1;
    transform: translateY(0);
}

/* arrow */
.gallery_slider .slick-prev,
.gallery_slider .slick-next {
    position: absolute;
    top: auto;
    bottom: 0;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 34px;
    line-height: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    padding: 0;
}

.gallery_slider .slick-prev {
    left: auto;
    right: 52px;
}

.gallery_slider .slick-next {
    right: 0;
}

.gallery_slider .slick-prev::before,
.gallery_slider .slick-next::before {
    display: none !important;
    content: none !important;
}

.gallery_slider::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: 4px;
    width: 1px;
    height: 18px;
    background: #ccc;
}








/* Bootstrap clearfix 제거 */
#mainQuick .container::before,
#mainQuick .container::after,
#mainQuick .quick_list::before,
#mainQuick .quick_list::after,

#mainSermon .container::before,
#mainSermon .container::after,

#mainNext .container::before,
#mainNext .container::after,

#mainBottom .container::before,
#mainBottom .container::after {
    display: none !important;
    content: none !important;
}





/* ============================================================
   Modern Animations & Hover Effects (ADDITIONAL)
   - 기존 스타일 변경 없이 추가만
============================================================ */

/* ---------- 0. 공통 변수 ---------- */
:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---------- 1. 스크롤 인뷰 (Intersection Observer 대체용 CSS) ---------- */
@keyframes fadeUpSoft {
    0%   { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(6px); }
    100% { opacity: 1; transform: translate3d(0, 0, 0);   filter: blur(0); }
}

@keyframes fadeInScale {
    0%   { opacity: 0; transform: scale(.96); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes ringPulse {
    0%   { box-shadow: 0 0 0 0 rgba(238, 156, 157, .55); }
    70%  { box-shadow: 0 0 0 18px rgba(238, 156, 157, 0); }
    100% { box-shadow: 0 0 0 0 rgba(238, 156, 157, 0); }
}

@keyframes sheen {
    0%   { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(220%) skewX(-20deg); }
}


/* ============================================================
   2. Quick Menu - 아이콘 호버 인터랙션
============================================================ */
.quick_item a {
    transition:
        transform .55s var(--ease-out-expo),
        color .35s ease;
    will-change: transform;
}

.quick_icon {
    position: relative;
    transition:
        transform .6s var(--ease-out-expo),
        border-color .4s ease,
        background-color .4s ease,
        box-shadow .5s ease;
    overflow: hidden;
}

/* 원형 채워지는 효과 */
.quick_icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, #1d2538 0%, #1d2538 70%, transparent 71%);
    border-radius: 50%;
    transform: scale(0);
    transition: transform .55s var(--ease-out-expo);
    z-index: 0;
}

.quick_icon img {
    position: relative;
    z-index: 1;
    transition:
        transform .55s var(--ease-out-expo),
        filter .4s ease;
}

.quick_item a:hover .quick_icon {
    transform: translateY(-8px);
    border-color: #1d2538;
    box-shadow: 0 18px 30px -10px rgba(29, 37, 56, .35);
}

.quick_item a:hover .quick_icon::before {
    transform: scale(1.05);
}

.quick_item a:hover .quick_icon img {
    transform: scale(1.08) rotate(-3deg);
    filter: brightness(0) invert(1);
}

.quick_label,
.quick_eng {
    transition: color .35s ease, letter-spacing .4s ease;
}

.quick_item a:hover .quick_label {
    letter-spacing: .02em;
}

.quick_item a:hover .quick_eng {
    color: #6b7791;
}


/* ============================================================
   3. Sermon - 썸네일 / Play / Live 버튼
============================================================ */
.sermon_thumb_link {
    perspective: 1200px;
}

.sermon_thumb {
    /* overflow: hidden; */
    transition:
        transform .8s var(--ease-out-expo),
        box-shadow .6s ease;
    will-change: transform;
}

/* 썸네일 위 hover 시 약간 zoom-in 느낌 (배경이미지 단독 확대) */
.sermon_thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
    opacity: 0;
    transition: opacity .5s ease;
    z-index: 1;
    pointer-events: none;
}

.sermon_thumb_link:hover .sermon_thumb {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -15px rgba(0,0,0,.45);
}

.sermon_thumb_link:hover .sermon_thumb::after {
    opacity: 1;
}

/* sheen(빛 스침) 효과 */
.sermon_thumb_link::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    width: 60%;
    height: calc(100% - 30px);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-20deg);
    z-index: 3;
    pointer-events: none;
}

.sermon_thumb_link:hover::before {
    animation: sheen 1.1s var(--ease-out-quart) forwards;
}

/* Play 버튼 */
.sermon_play {
    transition:
        transform .55s var(--ease-out-expo),
        background-color .35s ease;
    animation: ringPulse 2.4s ease-out infinite;
    cursor: pointer;
}

.sermon_play img {
    transition: transform .5s var(--ease-out-expo);
}

.sermon_thumb_link:hover .sermon_play {
    transform: scale(1.08);
    background: #f08688;
    animation-play-state: paused;
}

.sermon_thumb_link:hover .sermon_play img {
    transform: scale(1.15);
}

/* Live 버튼 */
.live_btn {
    position: relative;
    overflow: hidden;
    transition:
        color .4s ease,
        transform .5s var(--ease-out-expo),
        letter-spacing .4s ease;
    isolation: isolate;
}

.live_btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #2b3b50;
    transform: translateY(101%);
    transition: transform .55s var(--ease-out-expo);
    z-index: -1;
}

.live_btn:hover {
    color: #fff;
    transform: translateY(0px);
    letter-spacing: .03em;
}

.live_btn:hover::before {
    transform: translateY(0);
}

/* live_on 일 때 살짝 펄스 */
.live_btn.live_on::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    box-shadow: 0 0 0 0 rgba(231, 76, 60, .7);
    animation: ringPulse 1.6s ease-out infinite;
    z-index: 1;
}

.live_arrow {
    transition: transform .45s var(--ease-out-expo);
}

.sermon_live:hover .live_arrow {
    transform: translateX(6px);
}

/* Sermon 텍스트 디테일 */
.sermon_title {
    transition: color .35s ease, transform .5s var(--ease-out-expo);
}

.sermon_box:hover .sermon_title {
    transform: translateX(4px);
}


/* ============================================================
   4. Next Generation - 6분할 카드
============================================================ */
.next_item {
    transition:
        transform .7s var(--ease-out-expo),
        z-index 0s linear .7s;
    will-change: transform;
}

/* 배경 자체에 줌인 - ::before가 어둠막이므로 별도 레이어 추가 */
.next_item::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 1.1s var(--ease-out-expo);
    z-index: 0;
}

/* 기존 ::before 어둠막 트랜지션 보강 */
.next_item::before {
    transition: background-color .5s ease, backdrop-filter .5s ease;
}

.next_item:hover {
    z-index: 5;
    transition-delay: 0s;
}

.next_item:hover::after {
    transform: scale(1.12);
}

.next_item:hover::before {
    background: rgba(24, 48, 79, .58);
}

/* 안쪽 텍스트 살짝 위로 + 라인 등장 */
.next_inner {
    transition: transform .6s var(--ease-out-expo);
}

.next_name {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    transition: letter-spacing .4s ease;
}

.next_name::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transform: translateX(-50%);
    transition: width .55s var(--ease-out-expo);
}

.next_desc {
    opacity: .85;
    transition: opacity .5s ease, transform .6s var(--ease-out-expo);
    transform: translateY(4px);
}

.next_item:hover .next_inner {
    /* transform: translateY(-6px); */
}

.next_item:hover .next_name {
    letter-spacing: .04em;
}

.next_item:hover .next_name::after {
    width: 48px;
}

.next_item:hover .next_desc {
    opacity: 1;
    transform: translateY(0);
}

/* 타이틀 underline grow */
.next_title {
    position: relative;
    display: inline-block;
}

/* .next_title::after { */
    /* content: ""; */
    /* position: absolute; */
    /* left: 0; */
    /* bottom: -10px; */
    /* width: 0; */
    /* height: 3px; */
    /* background: linear-gradient(90deg, #18304f, #4a6ea0); */
    /* animation: titleLine 1.2s var(--ease-out-expo) .2s forwards; */
/* } */

@keyframes titleLine {
    to { width: 64px; }
}


/* ============================================================
   5. Bottom - Location & Gallery
============================================================ */
.bottom_title {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #000 0%, #000 50%, #4a6ea0 50%, #4a6ea0 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
            background-clip: text;
    transition: background-position .7s var(--ease-out-expo);
}

.bottom_head:hover .bottom_title {
    background-position: -100% 0;
    -webkit-text-fill-color: transparent;
}

/* Location 카드 */
.location_box {
    position: relative;
    overflow: hidden;
    transition: transform .6s var(--ease-out-expo), box-shadow .6s ease;
}

/* .location_box:hover { */
    /* transform: translateY(-4px); */
    /* box-shadow: 0 25px 40px -15px rgba(24, 48, 79, .35); */
/* } */

.location_map {
    transition: transform 1s var(--ease-out-expo);
}

.location_box:hover .location_map {
    transform: scale(1.02);
}

/* Gallery 아이템 - 호버 디테일 강화 (기존 호버 유지 + 추가) */
.gallery_item a {
    transition: transform .55s var(--ease-out-expo), box-shadow .55s ease;
    will-change: transform;
}

.gallery_item a:hover {
    transform: translateY(0px);
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, .4);
}

.gallery_thumb {
    transition: transform .8s var(--ease-out-expo), filter .5s ease;
}

.gallery_item a:hover .gallery_thumb {
    transform: scale(1.08);
    filter: saturate(1.1);
}

/* Slick arrow 호버 */
.gallery_slider .slick-prev,
.gallery_slider .slick-next {
    transition: transform .4s var(--ease-out-expo), color .3s ease;
}

.gallery_slider .slick-prev:hover {
    transform: translateX(-3px);
    color: #4a6ea0;
}

.gallery_slider .slick-next:hover {
    transform: translateX(3px);
    color: #4a6ea0;
}


/* ============================================================
   6. 섹션 진입 애니메이션 (AOS 보조 / 자체 fade)
============================================================ */
#mainQuick .quick_item {
    opacity: 0;
    animation: fadeUpSoft .9s var(--ease-out-expo) forwards;
}
#mainQuick .quick_item:nth-child(1) { animation-delay: .05s; }
#mainQuick .quick_item:nth-child(2) { animation-delay: .15s; }
#mainQuick .quick_item:nth-child(3) { animation-delay: .25s; }
#mainQuick .quick_item:nth-child(4) { animation-delay: .35s; }
#mainQuick .quick_item:nth-child(5) { animation-delay: .45s; }

#mainSermon .sermon_thumb_link {
    opacity: 0;
    animation: fadeUpSoft 1s var(--ease-out-expo) .2s forwards;
}

#mainSermon .sermon_info {
    opacity: 0;
    animation: fadeUpSoft 1s var(--ease-out-expo) .4s forwards;
}


/* ============================================================
   7. 접근성 - 모션 줄이기 옵션 존중
============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

 






/* ============================================================
   Responsive
============================================================ */

@media (max-width: 1500px) {
    .mainContainer .container {
        width: min(100%, 66.6667rem);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .quick_list {
        gap: 6vw;
    }

    .quick_icon {
        width: 5.4rem;
    }

    .quick_label,
    .quick_eng {
        font-size: .9rem;
    }

    .sermon_box {
        gap: 4vw;
    }

    .sermon_thumb {
        min-width: 0;
        width: 100%;
    }

    .sermon_play {
        width: 7rem;
        bottom: -3rem;
    }

    .live_btn {
        width: 7rem;
    }

    .next_wrap {
        grid-template-rows: 11rem 11rem;
    }

    #mainBottom > div {
        margin-left: 5vw;
        margin-right: 3vw;
    }

    .gallery_item a {
        height: auto;
    }
}

@media (max-width: 1280px) {
    #mainSlider,
    #mainQuick,
    #mainSermon,
    #mainNext,
    #mainBottom {
        overflow-x: hidden;
    }

    #dimodePage {
        margin-top: 96px;
    }

    .mainContainer .container {
        width: min(100%, 60rem);
        padding-left: 1.35rem;
        padding-right: 1.35rem;
    }

    #mainQuick {
        padding: 3.2rem 0 5rem;
    }

    .quick_list {
        gap: 4vw;
    }

    .quick_icon {
        width: 4.8rem;
    }

    .quick_label,
    .quick_eng {
        font-size: .9rem;
        line-height: 1.3;
    }

    #mainSermon {
        background: linear-gradient(to bottom, #fff 0 7rem, #454e70 7rem 100%);
    }

    .sermon_box {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 2.4rem;
        align-items: start;
    }

    .sermon_thumb {
        min-width: 0;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .sermon_info {
        min-height: 0;
        gap: 2.2rem;
    }

    .sermon_live {
        min-height: 7rem;
        align-items: center;
        justify-content: flex-end;
        gap: .75rem;
    }

    .live_text {
        font-size: .95rem;
    }

    .live_btn {
        width: 5.3rem;
        font-size: .9rem;
    }

    .sermon_title {
        font-size: 1.55rem;
    }

    .sermon_play {
        width: 5.5rem;
        right: 1.4rem;
        bottom: -2.4rem;
    }

    .sermon_play img {
        width: 2rem;
    }

    #mainNext {
        padding: 4.5rem 0;
    }

    .next_wrap {
        grid-template-columns: 3fr 2fr 2fr 2.6fr;
        grid-template-rows: 10rem 10rem;
    }

    #mainBottom > div {
        margin-left: 3vw;
        margin-right: 2vw;
    }

    .bottom_wrap {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
    }

    .bottom_location,
    .bottom_gallery {
        min-width: 0;
    }

    .gallery_slider .gallery_item {
        padding: 0 .45rem;
    }

    .gallery_item a {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .gallery_caption {
        font-size: 1rem;
    }

    .gallery_date {
        font-size: .9rem;
    }
}

@media (max-width: 991px) {
    #dimodePage {
        margin-top: 72px;
    }

    #mainQuick {
        padding: 3rem 0 3rem;
    }

    .quick_list {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
        flex-wrap: nowrap;
        column-gap: 0;
        row-gap: 0;
        justify-content: space-between;
    }

    .quick_item {
        width: auto;
        flex: 0 0 20%;
        padding-left: .35rem;
        padding-right: .35rem;
    }

    #mainSermon {
        padding-bottom: 0;
    }

    .sermon_box {
        display: block;
        max-width: 46rem;
        margin: 0 auto;
    }

    .sermon_thumb_link {
        padding-top: 0;
    }

    .sermon_thumb_link::before {
        top: 0;
        height: 100%;
    }

    .sermon_thumb {
        background-size: cover;
    }

    .sermon_play {
        width: 4.4rem;
        right: 1rem;
        bottom: -1.9rem;
    }

    .sermon_play img {
        width: 1.65rem;
    }

    .sermon_info {
        padding: 3.6rem 0 0;
        flex-direction: column-reverse;
    }

    .sermon_live {
        position: relative;
        z-index: 8;
        align-items: center;
        justify-content: flex-end;
        gap: .55rem;
        padding: 0;
        min-height: 0;
        margin: 0;
    }

    .live_text {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
        font-size: .9rem;
        color: #fff;
    }

    .live_arrow {
        flex: 0 0 auto;
        width: .85rem;
    }

    .live_btn {
        width: 4.9rem;
        font-size: .78rem;
        border-radius: 0px;
    }

    .next_wrap {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 11.5rem);
        max-width: 46rem;
        margin-left: auto;
        margin-right: auto;
    }

    .next_item_01 { grid-column: 1; grid-row: 1; }
    .next_item_03 { grid-column: 2; grid-row: 1; }
    .next_item_02 { grid-column: 1; grid-row: 2; }
    .next_item_04 { grid-column: 2; grid-row: 2; }
    .next_item_05 { grid-column: 1; grid-row: 3; }
    .next_item_06 { grid-column: 2; grid-row: 3; }

    .bottom_wrap {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .location_map,
    .root_daum_roughmap,
    .root_daum_roughmap_landing {
        width: 100% !important;
        max-width: 100% !important;
    }

    .root_daum_roughmap .wrap_map {
        width: 100% !important;
    }

    .bottom_gallery {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #dimodePage {
        margin-top: 72px;
    }

    .mainContainer .container,
    #mainSermon .container.no-padding,
    #mainNext .container.no-padding {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .quick_list {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.6rem;
    }

    .quick_item {
        width: 33.3333%;
        flex: 0 0 33.3333%;
    }

    .sermon_thumb {
        aspect-ratio: 16 / 9;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #454e70;
    }

    .sermon_play {
        width: 3.7rem;
        right: .8rem;
        bottom: -1.55rem;
    }

    .sermon_play img {
        width: 1.35rem;
    }

    .sermon_detail {
        padding: 0 .5rem;
        word-break: keep-all;
    }

    .sermon_title {
        font-size: 1.35rem;
        line-height: 1.35;
    }

    .sermon_meta {
        line-height: 1.5;
    }

    .next_inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .next_title {
        font-size: 1.7rem;
    }

    .next_title span {
        font-size: .95rem;
    }

    .next_wrap {
        grid-template-rows: repeat(3, 9.2rem);
    }

    .next_name {
        font-size: 1.15rem;
    }

    .next_desc {
        font-size: .72rem;
    }

    #mainNext .container.no-padding {
        padding-left: 15px;
        padding-right: 15px;
    }

    #mainBottom {
        padding: 3rem 0;
    }

    #mainBottom > div {
        margin-left: 1.2rem;
        margin-right: 1.2rem;
    }

    .bottom_head {
        margin-bottom: 1.2rem;
    }

    .gallery_slider {
        padding-bottom: 2.4rem;
    }

    .gallery_slider .slick-list {
        margin-left: -.35rem;
        margin-right: -.35rem;
    }
}

@media (max-width: 467px) {
    .mainContainer .container,
    #mainSermon .container.no-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #mainNext .container.no-padding {
        padding-left: 15px;
        padding-right: 15px;
    }

    #mainQuick {
        padding-top: 1.9rem;
    }

    .quick_list {
        column-gap: 0;
        row-gap: 1.4rem;
    }

    .quick_item {
        width: 33.3333%;
        padding-left: .25rem;
        padding-right: .25rem;
    }

    .quick_icon {
        width: 3.35rem;
        margin-bottom: .55rem;
    }

    .quick_label,
    .quick_eng {
        font-size: .82rem;
        line-height: 1.25;
    }

    .sermon_play {
        width: 3.2rem;
        right: .6rem;
        bottom: -1.35rem;
    }

    .sermon_play img {
        width: 1.15rem;
    }

    .next_wrap {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, minmax(8.2rem, auto));
    }

    .next_item_01,
    .next_item_02,
    .next_item_03,
    .next_item_04,
    .next_item_05,
    .next_item_06 {
        grid-column: 1;
        grid-row: auto;
    }

    .next_desc br {
        display: none;
    }

    .next_item {
        min-height: 8.2rem;
    }

    .next_name {
        font-size: 1.2rem;
    }

    .next_desc {
        font-size: .95rem;
        line-height: 1.4;
    }

    #mainBottom > div {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .bottom_title {
        font-size: 1.65rem;
    }

    .bottom_wrap {
        gap: 2.7rem;
    }

    .location_map {
        overflow: hidden;
    }
}

@media (max-width: 375px) {
    .quick_icon {
        width: 3.25rem;
    }

    .quick_label,
    .quick_eng {
        font-size: .78rem;
    }
}