@media (min-width: 1500px) { #content > .container, #subgnb > .container { width: 1400px; } }


/*.document-readed_count{display:none;}*/

/*sub*/
/*#subtop{padding:115px 0 0;}*/

#gnb-wrap{background: rgba(255, 255, 255, .3)!important;}
#content { padding:40px 0px; }
#content .third-menus { margin:10px 0 42px 0;text-align:center; }
#content .third-menus ul{ display:inline-block; }
#content .third-menus ul li { border: 1px solid #dedede; float:left; margin-left:-1px;}
#content .third-menus ul li a { color: #333;text-decoration: none;padding: 8px 17px;font-size: 12px;min-width: 160px;display: inline-block;text-align: center; }
#content .third-menus ul li.active a { color:#fff; }
#sub_title { font-size:40px; font-weight:600; margin:0px 0px 50px; border-bottom:4px solid #000; display:inline-block; padding-bottom:10px;}
#dimodePage { padding:30px 0px; border-top:1px solid #E5E5E5; }

.lnb { padding:0px 30px;}
.lnb_title { font-size:30px; border-bottom:1px solid #000; padding:40px 0px; font-weight:600; text-align:center; position:relative;}
.sub-left-triangle { position: absolute; right: 0px; top: 0; width: 0; height: 0; border-left: 30px solid transparent; border-top-width: 30px; border-top-style: solid; border-top-color: #6599CB; }
.sub_depth2 { margin-top:0px; padding-top:0px; }
.sub_depth2 li { padding: 20px 25px; border-bottom:1px solid #ddd; transition:all ease 0.3s; }
.sub_depth2 li.active, .sub_depth2 > li:hover { background:#d9d3f2; }
.sub_depth2 > li > a { color:#777; font-weight:600;  font-size:17px; text-decoration:none; }
.sub_depth2 li a { color:#777; font-weight:600;  font-size:16px; text-decoration:none; }
.sub_depth2 li i { position:relative; margin:3px 15px 0px 0px; cursor:pointer; float:right; font-size:16px;}
.sub_depth2 li i.fa-minus { display:none; }
.sub_depth2 li:last-child { border-color:#000; }
.sub_depth3 { padding:0px 15px; margin-top:15px; display:none; }
.sub_depth3.active { display:block; }
.sub_depth3 li { padding: 10px 20px; border-bottom:1px solid #999; background-color: #f4c9ff; }
.sub_depth3 li a  { color:#999; font-size:15px;  text-decoration:none;  transition:all ease 0.3s; }
.sub_depth3 li a:hover  { color:#739AB9; }
.sub_depth3.a_96 li a:hover { color:#4E5397; }
.sub_depth3.a_98 li a:hover { color:#E4C640; }
/*글자자르기*/
.dimode-theme  {word-break:keep-all;}

ul.timeline > li > span {
    display: block; width: 100%; 
    margin-bottom:5px;
}


.icircle{width:350px; padding:10px 0 30px ; border-radius: 0 0 50px 50px ;margin: 0 auto; color: #fff; font-size: 20px; }
.icircle1{background-color: #3877a0;}
.icircle2{background-color: #2b8b78;}
/*유트브*/
/*반응형
.detail-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
#dimodeYoutube {
  position: absolute;
  width: 100%;
  height: 100%;
}
*/


/*서브메뉴*/
.d3-subgnb-menu {
    display:inline-block;
}
.d3-menulist {
   
    display:inline-block; padding:15px 15px;
    float:left;
}
.d3-menulist a{
    font-size:22px!important;
	color:#8F8F8F!important;
	font-weight:bold;
}
.d3-subgnb-menu div.active a {
    color:#325481!important;
    padding-bottom:10px;
    border-bottom:2px solid #B4CEF1;
	font-weight:700;
}
.d3-menulist a:hover{
	  color:#325481!important;
}
.subTitle{text-align:center;}
.root_daum_roughmap_landing{width:100%!important;}
.sub24 #component3107 .dimode-sort{display:grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;gap:15px;}
.table-responsive{border:none;}
@media (max-width:1499px) {
    #component3228 #unit1370 > div{background-repeat:no-repeat;background-position:right center;background-size:cover;}
}
@media (max-width:1199px) {
    #component4138 > .dimode-sort{display:grid;grid-template-columns: 1fr;justify-items: center;}
    #component4138 #component6986{}
    #component4138 #component1325{width:100%!important;}
    #component5051 #unit3820 .col-sm-6{width:100%!important;}
    #component5051 #unit3820 .col-sm-6:nth-child(1){padding-bottom:20px!important;}
    #component5444 #unit6717 .col-sm-6{width:100%!important;}
    #component5444 #unit6717 .col-sm-6:nth-child(1){padding-bottom:20px!important;}
}  
@media (max-width:992px) {
    #component3228 #unit1370 > div > div{width: 100%;left:55%!important;}
    #component1935 #component2652{width:50%!important;}
}
@media (max-width:767px) {
    .font-2xl {font-size: 1.3rem!important;}
    .font-4xl {font-size: 1.8rem!important;}
    #component3228 #unit1370 > div > div{width: 100%;left:50%!important;top: 85%!important;}
    #component5444 #unit6717 > div > div{padding:20px!important;}
    #component1935 #component2652{width:100%!important;}
    #component4138 #component6986{padding-bottom:20px!important;}
    #component5051 #unit3820 > div{padding:20px 10px!important;}
    #component5444 #unit6717 > div{padding:0px!important;}
    #component3852 #unit6297 .map-content{height:300px!important;}
    .new_01 li{text-indent: 0!important;}
    .sub22 #component5444 #unit6717 > div{padding-bottom:20px!important;}
}
@media (max-width:320px) {
}






/*********************kjl추가*************************/

@media (max-width:767px) { 
   .page-content { font-size:15px; word-break:keep-all; }
}
/*************************이의호  260209*********************************/\

.sub12 #unit7672 img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}
@media (max-width: 1024px) {

    .sub12 .subTitle #sub_title {
        font-size: 26px;
    }

    .sub12 #unit3998 .font-3xl {
        font-size: 30px;
    }

    .sub12 #unit9463 div {
        font-size: 16px;
        line-height: 2;
        padding: 0 20px;
    }

    .sub12 #unit7672 img {
        max-height: 420px;
    }
}
@media (max-width: 768px) {

    .sub12 .subTitle #sub_title {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .sub12 #unit3998 .font-3xl {
        font-size: 24px;
        padding-bottom: 15px;
    }

    .sub12 #unit9463 div {
        font-size: 15px;
        line-height: 1.9;
        padding: 0 15px;
        word-break: keep-all;
    }

    .sub12 #unit9463 b.font-l {
        font-size: 16px;
        display: inline-block;
    }

    .sub12 #unit7672 img {
        max-height: 300px;
    }
}
@media (max-width: 768px) {
    .sub12 #unit9463 br {
        display: block;
        margin-bottom: 8px;
        content: "";
    }
}
/* =========================
   sub13 : 환영인사 반응형
========================= */


@media (max-width: 768px) {
    .sub13 #unit3998 .font-3xl {
        font-size: 24px;
        padding-bottom: 15px;
    }
}
/* =========================
   sub13 환영인사 정갈한 반응형
========================= */

/* ===== 태블릿 ===== */
@media (max-width: 992px) {
    .sub13 #component2473 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ===== 모바일 ===== */
@media (max-width: 600px) {
    .sub13 #component2473 {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .sub13 #component2473 .dimode-unit > div {
        padding: 22px 16px;
        border-radius: 14px;
    }

    .sub13 #component2473 img {
        width: 40px;
        margin-bottom: 10px;
    }

    .sub13 #component2473 .font-l {
        font-size: 15px;
    }
}

/* =========================
   담임목사 영역 정돈
========================= */

/* 모바일 */
@media (max-width: 768px) {
    .sub13 #component6640 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sub13 #component1016 {
        text-align: left;
    }

    .sub13 #component1016 .font-l {
        text-align: center;
        margin-top: 30px;
    }
}

/* =========================
   반응형 (태블릿 & 모바일)
========================= */
@media (max-width: 768px) {

    /* 가로 스크롤 */
    .sub13 #component2473 {
        overflow-x: auto;
        gap: 0px;
        padding: 0 20px;
        -webkit-overflow-scrolling: touch;
    }

    /* 카드 폭 줄이기 */
    .sub13 #component2473 > .col-sm-4 {
        flex: 0 0 70%;
        max-width: 33%;
		    padding: 0 5px !important;
    }

    /* 카드 자체 크기 축소 */
    .sub13 #component2473 .dimode-unit > div {
        padding: 20px 5px !important;
        border-radius: 14px;
    }

    /* 아이콘 축소 */
    .sub13 #component2473 img {
        width: 38px;
        margin-bottom: 10px;
    }

    /* 글씨 축소 */
    .sub13 #component2473 .font-l {
        font-size: 12px;
        line-height: 1.35;
    }

    /* 스크롤바 숨김 */
    .sub13 #component2473::-webkit-scrollbar {
        display: none;
    }
	    .sub13 #component2473{
        display: flex;
		        padding: 15px 0px !important;
    }
	
	.sub13 #component2063{
	     width: 75% !important;
		padding: 0 15px 30px !important;
		
    }
	.sub13 #unit3838 > div{
	         font-size: 15px !important;
		
    }
	
}

/* 섬기는 분들 이미지 공통 */
.sub14 .dimode-sort img {
    width: 100%;
    max-width: 220px;   /* PC 기준 최대 크기 */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}

}
/* PC 기본 */
.sub14 .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

/* 태블릿 */
@media (max-width: 1199px) {
    .sub14 .col-sm-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* 모바일 */
@media (max-width: 767px) {
    .sub14 .col-sm-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .sub14 .dimode-sort img {
        max-width: 160px; /* 모바일에서 더 작게 */
    }
}
.sub14 .font-l {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    word-break: keep-all;
}
@media (max-width: 767px) {

    /* 기본: 모바일은 가운데 정렬 */
    .sub14 .dimode-sort.row {
        display: flex;
        flex-wrap: wrap;
    }

    /* 모바일 카드 2열 */
    .sub14 .col-sm-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* 이미지 사이즈 */
    .sub14 .dimode-sort img {
        max-width: 160px;
        margin: 0 auto;
        display: block;
    }

    /* 🔥 핵심
       col-sm-3이 정확히 3개일 때만 왼쪽 정렬 */

}
/* =========================
   Mission 페이지 반응형
   ========================= */
@media (max-width: 767px) {

    /* 전체 박스 여백 축소 */
    .sub195 #unit6160 > div {
        padding: 30px 20px !important;
    }

    /* 각 row를 세로 스택으로 */
    .sub195 #unit6160 .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 25px !important;
    }

    /* 왼쪽 라벨 */
    .sub195 #unit6160 .col-sm-2 {
        width: auto !important;
        max-width: 100%;
        padding: 8px 20px !important;
        text-align: center;
        margin-bottom: 12px;
        border-radius: 30px;
    }

    /* 오른쪽 텍스트 */
    .sub195 #unit6160 .col-sm-10 {
        width: 100% !important;
        max-width: 100%;
        padding-left: 0 !important;
        margin-top: 0 !important;
		font-size: 16px!important;
        text-align: center;
        line-height: 1.7;
        word-break: keep-all;
    }

    /* 섹션 타이틀과 내용 간 간격 */
    .sub195 .font-2xl {
        font-size: 20px;
    }
}

/* =========================
   지역사회 페이지 모바일 반응형
   (이미지 크기 유지)
   ========================= */
@media (max-width: 767px) {



    /* 🔹 이미지 + 설명 영역 세로 스택 */
    .sub196 .dimode-sort.row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 🔹 좌/우 컬럼 → 전체 폭 */
    .sub196 .col-sm-5,
    .sub196 .col-sm-7 {
        width: 100% !important;
        max-width: 100%;
    }

    /* 🔹 설명 박스 여백만 줄이기 (이미지 영향 없음) */
    .sub196 #unit1550 > div {
        padding: 30px 20px !important;
        height: auto !important;
        line-height: 1.7;
    }

    /* 🔹 내부 항목(대상/시간/장소) 세로 정렬 */
    .sub196 #unit1550 .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 18px !important;
    }

    /* 🔹 라벨 */
    .sub196 #unit1550 .col-sm-4 {
        width: auto !important;
        padding: 6px 18px !important;
        margin-bottom: 10px;
        border-radius: 30px;
        text-align: center;
    }

    /* 🔹 텍스트 */
    .sub196 #unit1550 .col-sm-8 {
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center;
        word-break: keep-all;
    }

    /* 🔹 하단 이미지 영역: 레이아웃만 정리 (크기 유지) */
    .sub196 .col-sm-4 {
        width: 50% !important;
        max-width: 50%;
        margin-bottom: 15px;
    }

    /* 🔹 구분선 여백 줄이기 */
    .sub196 #component4104 {
        padding: 30px 0 !important;
    }
}
@media (max-width: 767px) {

    /* 🔥 하단 이미지: 모바일에서는 1열 */
    .sub196 .col-sm-4 {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 20px;
    }

}

/* ============================= */
/* 게스트룸 페이지 반응형 개선 */
/* ============================= */

.sub25 .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* PC에서는 좌우 동일 높이 */
@media (min-width: 992px) {
    .sub25 .col-sm-6 {
        display: flex;
        flex-direction: column;
    }

    .sub25 .col-sm-6 > div {
        flex: 1;
    }
}

/* 모바일 대응 */
@media (max-width: 991px) {

    /* 2단 → 1단 */
    .sub25 .col-sm-6 {
        width: 100%;
        padding: 0 15px !important;
        margin-bottom: 20px;
    }

    /* 슬라이드 여백 정리 */
    .sub25 .slidesub {
        padding-bottom: 10px !important;
    }

    /* 파란 제목 박스 */
    .sub25 .font-l {
        padding: 20px 15px !important;
        font-size: 18px;
        text-align: center;
    }

    /* 회색 설명 박스 (중요) */
    .sub25 div[style*="background-color:#f7f7f7"] {
        padding: 30px 20px !important;
        font-size: 15px;
        line-height: 1.7;
    }

    /* 하단 안내 박스 */
    .sub25 div[style*="background-color: rgb(235, 235, 233)"] {
        padding: 30px 20px !important;
        font-size: 14px;
    }

    /* 캐러셀 이미지 높이 자동 */
    .sub25 .carousel-inner img {
        width: 100%;
        height: auto;
    }

    /* 캐러셀 캡션 */
    .sub25 .carousel-caption {
        font-size: 14px;
        bottom: 10px;
    }

    /* 제목 글자 줄이기 */
    .sub25 .font-3xl {
        font-size: 26px !important;
    }

    .sub25 .font-2xl {
        font-size: 20px !important;
    }
}

/* 여백 정리 */
.sub25 .container {
    padding-left: 15px;
    padding-right: 15px;
}

/* 불필요한 중복 ID 충돌 방지 */
.sub25 [id^="component"] {
    width: 100%;
}

@media (max-width: 767px) {



    /* 🔹 이미지 + 설명 영역 세로 스택 */
    .sub20 .dimode-sort.row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 🔹 좌/우 컬럼 → 전체 폭 */
    .sub20 .col-sm-5,
    .sub20 .col-sm-7 {
        width: 100% !important;
        max-width: 100%;
    }

    /* 🔹 설명 박스 여백만 줄이기 (이미지 영향 없음) */
    .sub20 #unit1550 > div {
        padding: 30px 20px !important;
        height: auto !important;
        line-height: 1.7;
    }

    /* 🔹 내부 항목(대상/시간/장소) 세로 정렬 */
    .sub20 #unit1550 .row {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        margin-top: 18px !important;
    }

    /* 🔹 라벨 */
    .sub20 #unit1550 .col-sm-4 {
        width: auto !important;
		font-size: 15px !important;
        padding: 6px 18px !important;
        margin-bottom: 10px;
        border-radius: 30px;
        text-align: center;
    }
	
	.sub20 .font-l {
    font-size: 1.3rem !important;
}

    /* 🔹 텍스트 */
    .sub20 #unit1550 .col-sm-8 {
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center;
        word-break: keep-all;
    }

    /* 🔹 하단 이미지 영역: 레이아웃만 정리 (크기 유지) */
    .sub20 .col-sm-4 {
        width: 50% !important;
        max-width: 50%;
        margin-bottom: 15px;
    }

    /* 🔹 구분선 여백 줄이기 */
    .sub20 #component4104 {
        padding: 30px 0 !important;
    }
}
@media (max-width: 767px) {

    /* 🔥 하단 이미지: 모바일에서는 1열 */
    .sub20 .col-sm-4 {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 20px;
    }

}