@charset "UTF-8"; /* --- site A --- */
#siteA {
   --logo: url('../img/siteA/logo.png');
   --logo-white: url('../img/siteA/logo-white.png');
   --logo-receipt: url('../img/siteA/receipt-stamp.png');
   --logo-w: 17%;
   --logo-max-w: 222px;
   --logo-h: auto;
   --logo-ratio: 222 / 36;
   --gnb-dep1-padding: 70px;
   --bg-tile: url('../img/siteA/lastest-wrap-tile-bg.png') bottom center / cover no-repeat;
   --bg-board: url('../img/siteA/lastest-wrap-board-bg.png') bottom -30px right / auto no-repeat #fff;
   --bg-tab-slider: url('../img/siteA/lastest-wrap-board-bg.png') bottom -30px right / auto no-repeat #fff;
   --bg-slider: url('../img/siteA/lastest-wrap-slider-bg.png') bottom -140px right / auto no-repeat #fff;
   --bg-arch: url('../img/siteA/arch-slider-bg.png') bottom -140px center / 1482px auto no-repeat #fff;
}

@media (max-width: 1240px){
 #siteA { --logo-w: auto; --logo-h: 32px; } 
 }

@media (max-width: 768px){
 #siteA #ft-logo { --logo-w: 50%; --logo-h: 32px; } 
 }

/* --- 천주교 서울대교구 청소년국 (재)서울가톨릭청소년회 --- */
#eduseoul {
   --logo: url('../img/eduseoul/logo.png');
   --logo-white: url('../img/eduseoul/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 222px;
   --logo-h: auto;
   --logo-ratio: 222 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
   --bg-tile: url('../img/eduseoul/main-lastest-wrap-bg.png') bottom center / cover no-repeat;
}

#eduseoul .visual-link { width:100%; height:800px; padding:92px 0 40px; background:url('../img/eduseoul/main-visaul-link-bg.png') center / cover no-repeat; } 
#eduseoul .visual-link .inner { height:90%; display:flex; justify-content: center; align-items: center; } 
#eduseoul .visual-link .inner .bx { width:100%; display:flex; justify-content: center; align-items: stretch; gap:20px; } 
#eduseoul .visual-link .inner .bx a { display:flex; flex-direction: column; justify-content: space-between; align-items: flex-start; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -4.64%, rgba(255, 255, 255, 0.60) 100%); padding: 40px; width:25%; gap:32px; } 
#eduseoul .visual-link .inner .bx a .title { color: #FFF; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; } 
#eduseoul .visual-link .inner .bx a .logo { margin-left:auto; } 

#eduseoul .lastest-wrap.tile { padding:180px 0; } 
#eduseoul .lastest-wrap.tile .category { color:var(--color-theme); } 
#eduseoul .lastest-wrap.tile .category:before { display:none; } 

#eduseoul .lastest-wrap.tile.link .list a { display:flex; flex-direction: column; justify-content: center; align-items: center; gap:28px; } 
#eduseoul .lastest-wrap.tile.link .list a .logo img { display:block; } 
#eduseoul .lastest-wrap.tile.link .list a .desc { color: #555; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -0.48px; } 

#eduseoul .catholicyouth .img-wr.intro { display:flex; justify-content: flex-start; align-items: flex-start; } 
#eduseoul .catholicyouth .img-wr.intro img { flex-shrink: 0; border-radius:20px; overflow:hidden; } 
#eduseoul .catholicyouth .img-wr.intro .text-bx { padding:24px; } 
#eduseoul .catholicyouth .text-bx li { display:flex; font-size:16px; color:#333; gap:4px; align-items: flex-start; } 
#eduseoul .catholicyouth .text-bx li:before { content:""; display:block; width:3px; height:auto; aspect-ratio: 1/1; background:var(--color-theme); flex-shrink: 0; border-radius:100px; margin-top:11px; } 
#eduseoul .catholicyouth .sign { color: #111; text-align: right; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; } 
#eduseoul .catholicyouth .sign span { color:var(--color-theme); } 

@media (max-width: 768px){
 #eduseoul .visual-link { height: auto; } 
 #eduseoul .visual-link .inner .bx { flex-wrap: wrap; } 
 #eduseoul .visual-link .inner .bx a { width: calc(50% - 16px); height: auto; aspect-ratio: 1/1; padding: 15px; } 
 #eduseoul .visual-link .inner .bx a .title { font-size: 18px; } 
 #eduseoul .visual-link .inner .bx a .logo { width: 50px; } 

 #eduseoul .lastest-wrap.tile { padding: 8.7vw 0 20vw; } 
 #eduseoul .lastest-wrap.tile.link .list a .logo img { max-height: 40px; } 

 #eduseoul .catholicyouth .img-wr.intro { flex-direction: column; align-items: center; } 
 #eduseoul .catholicyouth .img-wr.intro img { flex-shrink: 0; border-radius: 20px; overflow: hidden; } 
 #eduseoul .catholicyouth .img-wr.intro .text-bx { padding: 24px; } 
 #eduseoul .catholicyouth .dl-wrap dt { width:max(160px, 11.5vw); }
 }

/* --- 천주교 서울대교구 청소년국 장애인신앙교육부 --- */
#cafema {
   --logo: url('../img/cafema/logo.png');
   --logo-white: url('../img/cafema/logo-white.png');
   --logo-w: 30%;
   --logo-max-w: 194px;
   --logo-h: auto;
   --logo-ratio: 194 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
}

#cafema[data-theme="theme04"] {
   --color-theme: #87C237;
   --color-theme-hover: #497e00;
   --color-theme-opacity: rgba(135, 194, 55, 0.08);
}

#cafema[data-theme="theme04"] .lastest-wrap.board .board-wrap li.new:before {
   --color-theme: #FFC629;
}

#cafema .lastest-wrap.board { background: #fff; } 

@media (max-width: 1240px){
 #cafema { --logo-w: auto; --logo-h: 32px; } 
 }

@media (max-width: 768px){
 #cafema #ft-logo { --logo-w: 50%; --logo-h: 32px; } 
 }

/* --- 천주교서울대교구 청소년국 유아부 --- */
#catholicinfant {
   --logo: url('../img/catholicinfant/logo.png');
   --logo-white: url('../img/catholicinfant/logo-white.png');
   --logo-receipt: url('../img/siteA/receipt-stamp.png');
   --logo-w: 30%;
   --logo-max-w: 251px;
   --logo-h: auto;
   --logo-ratio: 251 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
}

#catholicinfant .map-wrap .label { display:flex; justify-content: center; align-items: center; gap:12px; margin-top:40px; } 
#catholicinfant .map-wrap .label > * { display:flex; justify-content: flex-start; align-items: center; gap:8px; color: #111; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.35px; } 
#catholicinfant .map-wrap .label > *:before { content:""; display:block; width:12px; height:auto; aspect-ratio: 1/1; border-radius:200px; } 
#catholicinfant .map-wrap .label > *.red:before { background:#DD312D; } 
#catholicinfant .map-wrap .label > *.green:before { background:#43A924; } 
#catholicinfant .quick-btn-wrap { margin-bottom:0; } 
#catholicinfant .board-wrap li { border-bottom: 1px dashed #ccc; padding:10px 5px; } 
#catholicinfant .slider-wrap.tab .youtube .swiper-slide .img { aspect-ratio: 184/97; } 

#catholicinfant .ideology .img-bx { padding:40px 32px; border-radius: 16px; background:url('../img/catholicinfant/ideology_img01.png') left center / cover no-repeat; } 
#catholicinfant .ideology .img-bx ul { display:flex; flex-direction: column; gap:8px; } 
#catholicinfant .ideology .img-bx li { color: #FFF; font-size: 16px; font-weight: 500; line-height: 1.55; letter-spacing: -0.32px; display:flex; justify-content: flex-start; align-items: flex-start; gap:4px; } 
#catholicinfant .ideology .img-bx li:before { content:""; display:block; width:3px; height:auto; aspect-ratio: 1/1; flex-shrink: 0; background:#fff; border-radius:100px; margin-top:9px; } 

#catholicinfant .project .bullet-list li { font-size:20px; } 

#catholicinfant .father .sign { color: #111; text-align: right; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; } 
#catholicinfant .father .sign span { color:var(--color-theme); } 

#catholicinfant .work .text-bx .tit.big { display:flex; justify-content: flex-start; align-items: flex-start; gap:8px; } 
#catholicinfant .work .text-bx .tit.big:before { content:"◎"; display:block; flex-shrink: 0; font-size:20px; font-weight:900; color:var(--color-theme); margin-top:10px; } 
#catholicinfant .work .text-bx p { margin-left:30px; } 

#catholicinfant .family .flex { gap:20px; flex-wrap:wrap; } 
#catholicinfant .family .notice-bx { padding: 24px 20px; display:flex; flex-direction: column; width:calc(25% - 20px); justify-content: flex-start; align-items:stretch; min-height:200px; gap:54px; } 
#catholicinfant .family .notice-bx .status { margin-left:auto; border-radius:500px; } 
#catholicinfant .family .notice-bx .text { min-height:70px; } 
#catholicinfant .family .notice-bx .text .name { color: #000; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -0.36px; margin-bottom:4px; } 
#catholicinfant .family .notice-bx .text .work { color: #000; font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: -0.28px; } 

#catholicinfant .book .cate { color: #555; font-size: 16px; font-weight: 600; line-height: 1.55; letter-spacing: -0.32px; } 
#catholicinfant .book .tit { color: #000; font-size: 20px; font-weight: 700; line-height: 1.45; letter-spacing: -0.4px; } 
#catholicinfant .book .desc { color: #000; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: -0.36px; margin-top:8px; } 

#catholicinfant .edu_parents .flex { gap:20px; align-items: flex-start; } 
#catholicinfant .edu_parents .img-wrap { align-items: center; text-align: center; } 
#catholicinfant .edu_parents .img-wrap img { border-radius: 12px; overflow:hidden; } 
#catholicinfant .edu_parents .img-wrap p { color: #111; font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: -0.4px; } 

#catholicinfant .program .program-list .item { display:flex; justify-content: flex-start; align-items: flex-start; padding:20px; border-bottom: 1px dashed #CCC; gap:20px; } 
#catholicinfant .program .program-list .item .img-wr { flex-shrink: 0; text-align:center; } 
#catholicinfant .program .program-list .item .img-wr img { display:block; } 
#catholicinfant .program .program-list .item .img-wr p { color: #000; font-size: 16px; font-weight: 600; line-height: 1.55; letter-spacing: -0.32px; margin-top:8px; } 
#catholicinfant .program .program-list .item .text-wr { padding:20px 8px; } 
#catholicinfant .program .program-list .item .text-wr .tit { color: #000; font-size: 20px; font-weight: 700; line-height: 1.45; letter-spacing: -0.4px; } 
#catholicinfant .program .program-list .item .text-wr .desc { color: #000; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: -0.36px; margin-top:8px; } 


@media (max-width: 1240px){
 #catholicinfant { --logo-w: auto; --logo-h: 32px; } 
 }

@media (max-width: 768px){
 #catholicinfant #ft-logo { --logo-w: 50%; --logo-h: 32px; } 
 #catholicinfant .bullet-list li { font-size:16px; } 
 #catholicinfant .work .text-bx .tit.big { gap:4px; } 
 #catholicinfant .work .text-bx .tit.big:before { font-size:16px; margin-top: 5px; } 
 #catholicinfant .work .text-bx p { margin-left:22px; } 

 #catholicinfant .family .notice-bx { padding: 20px 16px; width:calc(50% - 10px); } 

 #catholicinfant .book .cate { font-size: 14px; } 
 #catholicinfant .book .tit { font-size: 16px; } 
 #catholicinfant .book .desc { font-size: 15px; margin-top:5px; } 

 #catholicinfant .edu_parents .flex { gap:10px; } 
 #catholicinfant .edu_parents .img-wrap p { font-size:16px; } 

 #catholicinfant .program .program-list .item { flex-direction: column; } 
 #catholicinfant .program .program-list .item .text-wr { padding:0; } 
 }

/* --- 천주교 서울대교구 청소년국 초등부 --- */
#chota {
   --logo: url('../img/chota/logo.png');
   --logo-white: url('../img/chota/logo-white.png');
   --logo-w: 30%;
   --logo-max-w: 157px;
   --logo-h: auto;
   --logo-ratio: 157 / 42;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
}

#chota .word .img-wr { display:flex; justify-content: flex-start; align-items: flex-start; } 
#chota .word .img-wr img { flex-shrink: 0; border-radius:20px; overflow:hidden; } 
#chota .word .img-wr .text-bx { padding:24px; } 
#chota .word .sign { color: #111; text-align: right; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; } 
#chota .word .sign span { color:var(--color-theme); } 
#chota .history .dl-wrap dt { flex-direction: column; } 
#chota .history .dl-wrap dt p { font-size:22px; } 
#chota .history .dl-wrap dd { flex-direction: column; align-items: flex-start; gap:4px; } 
#chota .history .dl-wrap dd p { font-size:16px; } 

@media (max-width: 768px){
 #chota .word .img-wr { flex-direction: column; align-items: center; } 
 #chota .word .img-wr img { flex-shrink: 0; border-radius:20px; overflow:hidden; } 
 #chota .word .img-wr .text-bx { padding:24px; } 
 #chota .word .sign { font-size:20px; }
 #chota .history .dl-wrap dt p { font-size:18px; } 
 #chota .history .dl-wrap dd p { font-size:14px; } 
 }

/* --- 천주교 서울대교구 청소년국 가톨릭 스카우트 --- */
#kcscouts {
   --logo: url('../img/kcscouts/logo.png');
   --logo-white: url('../img/kcscouts/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 211px;
   --logo-h: auto;
   --logo-ratio: 211 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
}

#kcscouts.main .lastest-wrap.board { padding-bottom:0; } 
#kcscouts.main .board-wrap li.notice::before { @supports (mask: url('')) { background-color: #7D0037; } } 
#kcscouts.main .slider-wrap.schedule .swiper-slide.on { background-color: #7D0037; } 
#kcscouts .slider-wrap.tab { padding:60px 0; } 
#kcscouts .slider-wrap.tab .youtube .swiper-slide .img { aspect-ratio: 184/97; } 

#kcscouts .frsr .img-wrap img { border-radius: 20px; overflow:hidden; } 
#kcscouts .frsr .img-wrap .text { text-align: center; } 
#kcscouts .frsr .img-wrap .text .title { color: #111; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; margin-top:24px; } 
#kcscouts .frsr .img-wrap .text .desc { color: #000; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: -0.36px; margin-top:4px; } 

/* --- 천주교 서울대교구 청소년국 학교사목부 --- */
#kycs {   
   --logo: url('../img/kycs/logo.png');
   --logo-white: url('../img/kycs/logo-white.png');
   --logo-footer: url('../img/kycs/logo-footer.png');
   --logo-w: 40%;
   --logo-max-w: 240px;
   --logo-h: auto;
   --logo-ratio: 240 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
}

#kycs .visual-link { width:100%; height:800px; padding:92px 0 40px; background:url('../img/eduseoul/main-visaul-link-bg.png') center / cover no-repeat; } 
#kycs .visual-link .inner { height:90%; display:flex; flex-direction: column; justify-content: center; align-items: center; } 
#kycs .visual-link .inner > .title { color: #FFF; text-align: center; font-size: 40px; font-weight: 700; line-height: 1.45; letter-spacing: -0.8px; margin-bottom:35px; }
#kycs .visual-link .inner .bx { width:100%; display:flex; justify-content: center; align-items: stretch; gap:20px; } 
#kycs .visual-link .inner .bx a { display:flex; flex-direction: column; justify-content: space-between; align-items: flex-start; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -4.64%, rgba(255, 255, 255, 0.60) 100%); padding: 40px; width:25%; gap:32px; } 
#kycs .visual-link .inner .bx a .title { color: #FFF; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; word-break: break-all; } 
#kycs .visual-link .inner .bx a .logo { margin-left:auto; } 

#kycs #ft-logo { background-image:var(--logo-footer); }

#kycs .introduce .img-wr { display:flex; justify-content: flex-start; align-items: flex-start; } 
#kycs .introduce .img-wr img { flex-shrink: 0; border-radius:20px; overflow:hidden; } 
#kycs .introduce .img-wr .text-bx { padding:24px; } 

#kycs .rental .img-bx { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
#kycs .rental .img-wr { max-width:250px; text-align:center; }
#kycs .rental .img-wr img { border-radius:20px; overflow:hidden; }
#kycs .rental .img-wr p { font-size:18px; font-weight:500; color:#111; margin-top:8px; }

@media (max-width: 768px){
 #kycs .visual-link { height: auto; } 
 #kycs .visual-link .inner > .title { font-size:20px; margin-bottom:15px; }
 #kycs .visual-link .inner .bx { flex-wrap: wrap; } 
 #kycs .visual-link .inner .bx a { width: calc(50% - 16px); height: auto; aspect-ratio: 1/1; padding: 15px; } 
 #kycs .visual-link .inner .bx a .title { font-size: 18px; } 
 #kycs .visual-link .inner .bx a .logo { width: 50px; } 

 #kycs .introduce .img-wr { flex-direction: column; align-items: center; } 
 #kycs .introduce .img-wr img { flex-shrink: 0; border-radius:20px; overflow:hidden; } 
 #kycs .introduce .img-wr .text-bx { padding:24px; } 
 }
 
/* --- 천주교 서울대교구 청소년국 가톨릭학생회 CELL --- */
#kycs_cell {
   --logo: url('../img/kycs_cell/logo.png');
   --logo-white: url('../img/kycs_cell/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 196px;
   --logo-h: auto;
   --logo-ratio: 196 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);   
   --bg-tile: url('../img/kycs_cell/lastest-wrap-tile-bg.png') bottom center / cover no-repeat;

}

#kycs_cell[data-theme="theme04"] {
   --color-theme: #87C237;
   --color-theme-hover: #497e00;
   --color-theme-opacity: rgba(135, 194, 55, 0.08);
}

#kycs_cell .textbook .rull-bx { display:flex; flex-direction: column; align-items: center; gap:24px; padding:40px 0; }
#kycs_cell .textbook .rull-bx .title { text-align:center; }
#kycs_cell .textbook .rull-bx .title p { color: #111; font-size: 32px; font-weight: 700; line-height: 1.45; letter-spacing: -0.64px; }
#kycs_cell .textbook .rull-bx .title span { color: #111; font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: -0.4px; margin-top:12px; }
#kycs_cell .textbook .rull-bx li { display:flex; justify-content: flex-start; align-items: center; gap:12px; }
#kycs_cell .textbook .rull-bx li + li { margin-top:20px; }
#kycs_cell .textbook .rull-bx li .cate { display: flex; width:115px; padding: 8px 12px; justify-content: center; align-items: center; color: #FFF; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.32px; border-radius: 200px; background: #7FC15C; flex-shrink: 0; }
#kycs_cell .textbook .rull-bx li p { color: #111; font-size: 20px; font-weight: 400; line-height: 1.45; letter-spacing: -0.4px; }
#kycs_cell .textbook .rull-bx .arr { color: #000; font-size: 32px; font-weight: 700; line-height: 1.45; letter-spacing: -0.64px; transform: rotate(90deg); }
#kycs_cell .textbook .rull-bx > p { color: #111; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; }

#kycs_cell .textbook .step-wr { display: flex; justify-content: space-between; align-items: stretch; gap:20px; }
#kycs_cell .textbook .step-wr .item { width:100%; }
#kycs_cell .textbook .step-wr .img { display: flex; width:100%; height: auto; aspect-ratio: 363 / 295; padding: 24px; border-radius: 12px; border: 1px solid #CCC; }
#kycs_cell .textbook .step-wr .img img { display: block; width:100%; height:100%; object-fit: contain; object-position: center;}
#kycs_cell .textbook .step-wr .text { margin-top:20px; }
#kycs_cell .textbook .step-wr .text .tt { color: #111; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; margin-bottom:8px; }
#kycs_cell .textbook .step-wr .text .dd { color: #333; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: -0.36px; }
#kycs_cell .textbook .step-wr .arr { display:flex; align-items: center; flex-shrink: 0; }

#kycs_cell .international .img-wr { display:flex; justify-content: space-between; }
#kycs_cell .international .img-wr img { display:block; width:calc(50% - 10px); height:auto; aspect-ratio: 3/2; border-radius: 8px; overflow:hidden; object-fit: cover; object-position: center ;}

@media (max-width: 768px){
 #kycs_cell .textbook .rull-bx { gap:12px; padding:20px 0; }
 #kycs_cell .textbook .rull-bx .title p { font-size: 24px; }
 #kycs_cell .textbook .rull-bx .title span { font-size: 16px; margin-top:8px; }
 #kycs_cell .textbook .rull-bx li { gap:8px; }
 #kycs_cell .textbook .rull-bx li + li { margin-top:12px; }
 #kycs_cell .textbook .rull-bx li .cate { width:115px; padding: 8px 12px; font-size: 14px; }
 #kycs_cell .textbook .rull-bx li p { font-size: 16px;}
 #kycs_cell .textbook .rull-bx .arr { font-size: 24px; }
 #kycs_cell .textbook .rull-bx > p { font-size: 18px; }
 
 #kycs_cell .textbook .step-wr { flex-direction: column; align-items: center; }
 #kycs_cell .textbook .step-wr .img { aspect-ratio: unset; }
 #kycs_cell .textbook .step-wr .text .tt { font-size:18px; }
 #kycs_cell .textbook .step-wr .text .dd { font-size:16px; }
 #kycs_cell .textbook .step-wr .arr { transform: rotate(90deg); }
 #kycs_cell .textbook .step-wr .arr > * { width:24px; }
}

/* --- 천주교 서울대교구 청소년국 가톨릭문화연구회 CA --- */
#kycs_ca {
   --logo: url('../img/kycs_ca/logo.png');
   --logo-white: url('../img/kycs_ca/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 258px;
   --logo-h: auto;
   --logo-ratio: 258 / 39;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);   
   --bg-tile: url('../img/kycs_ca/lastest-wrap-tile-bg.png') bottom center / cover no-repeat;
}

#kycs_ca .introduce .list-wr { display:flex; align-items: flex-start; gap:25px; }
#kycs_ca .introduce .list-wr li.item { display: flex; flex-direction: column; align-items: center; gap:12px; }
#kycs_ca .introduce .list-wr li.item.mark { padding-top:65px; }
#kycs_ca .introduce .list-wr li.item img { aspect-ratio: 1/1; }
#kycs_ca .introduce .list-wr li.item p { color: #111; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; text-align:center;}

@media (max-width: 768px) { 
   #kycs_ca .introduce .list-wr { flex-direction: column; align-items: center; }
   #kycs_ca .introduce .list-wr li.item.mark { padding:0; }
   #kycs_ca .introduce .list-wr li.item p { font-size:18px; }
}

/* --- 천주교 서울대교구 청소년국 가톨릭초등교육자회 CCE --- */
#cce_ps {
   --logo: url('../img/cce_ps/logo.png');
   --logo-white: url('../img/cce_ps/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 258px;
   --logo-h: auto;
   --logo-ratio: 258 / 39;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
}

#cce_ps.main .more.plus { background-image: url('../img/cce_ps/ico-plus.svg'); }
#cce_ps.main .schedule-wrap .title.horizontal { color:#111; }

#cce_ps .introduce .img-wrap img { max-width:200px; margin-bottom:64px; }
#cce_ps .introduce .list-wr { display:flex; align-items: flex-start; gap:25px; justify-content: space-between; }
#cce_ps .introduce .list-wr li.item { display: flex; flex-direction: column; align-items: center; gap:12px; }
#cce_ps .introduce .list-wr li.item.mark { padding-top:65px; }
#cce_ps .introduce .list-wr li.item img { aspect-ratio: 1/1; }
#cce_ps .introduce .list-wr li.item p { color: #111; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; text-align:center;}
#cce_ps .bod .tbl-dl-wrap th { text-align: left; }

@media (max-width: 768px) { 
   #cce_ps .introduce .list-wr { flex-direction: column; align-items: center; }
   #cce_ps .introduce .list-wr li.item.mark { padding:0; }
   #cce_ps .introduce .list-wr li.item p { font-size:18px; }
}

/* --- 천주교 서울대교구 청소년국 가톨릭중등교육자회 CCE --- */
#cce {
   --logo: url('../img/cce/logo.png');
   --logo-white: url('../img/cce/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 242px;
   --logo-h: auto;
   --logo-ratio: 242 / 30;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
}

#cce[data-theme="theme02"] {
   --color-theme: #E44262;
   --color-theme-hover: #c20027;
   --color-theme-opacity: rgba(228, 66, 98, 0.2);
}

#cce .introduce .img-wrap img { max-width:200px; margin-bottom:64px; }
#cce .introduce .list-wr { display:flex; align-items: flex-start; gap:25px; justify-content: space-between; }
#cce .introduce .list-wr li.item { display: flex; flex-direction: column; align-items: center; gap:12px; }
#cce .introduce .list-wr li.item.mark { padding-top:65px; }
#cce .introduce .list-wr li.item img { aspect-ratio: 1/1; }
#cce .introduce .list-wr li.item p { color: #111; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; text-align:center;}

/* --- 천주교 서울대교구 청소년국 중고등부 --- */
#foryouth {
   --logo: url('../img/foryouth/logo.png');
   --logo-white: url('../img/foryouth/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 174.11px;
   --logo-h: auto;
   --logo-ratio: 174.11 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 60px);
   --bg-tile: url('../img/foryouth/lastest-wrap-tile-bg.png') bottom center / cover no-repeat;
}

#foryouth .word .img-wr { display:flex; justify-content: flex-start; align-items: stretch; } 
#foryouth .word .img-wr img { flex-shrink: 0; border-radius:20px; overflow:hidden; max-width: 345px; width:100%; height:auto; aspect-ratio: 3/4; object-fit: cover; object-position: center; } 
#foryouth .word .img-wr .text-bx { padding:24px; width:100%; display: flex; flex-direction: column; justify-content: flex-start; } 
#foryouth .word .sign { color: #111; text-align: right; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -0.48px; margin-top:auto; } 
#foryouth .word .sign span { color:var(--color-theme); font-size:inherit; font-weight: inherit; } 

@media (max-width: 768px){
 #foryouth .word .img-wr { flex-direction: column; align-items: center; } 
 #foryouth .word .img-wr img { flex-shrink: 0; border-radius:20px; overflow:hidden; } 
 #foryouth .word .img-wr .text-bx { padding:24px; } 
 #foryouth .word .sign { font-size:20px; margin-top:32px; } 
}

 /* --- 천주교 서울대교구 청소년국 대학교사목부 --- */
#sfcs {   
   --logo: url('../img/sfcs/logo.png');
   --logo-white: url('../img/sfcs/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 167px;
   --logo-h: auto;
   --logo-ratio: 167 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 50px);
   --bg-tile: url('../img/sfcs/lastest-wrap-tile-bg.png') bottom center / cover no-repeat;
}

#sfcs #ft-logo { --logo-max-w: 257px; }

#sfcs[data-theme="theme02"] {
   --color-theme: #7D0037;
   --color-theme-hover: #500023;
   --color-theme-opacity: rgba(125, 0, 55, 0.04);
}
#sfcs .title.vertical p { color:#EF6E47; }
#sfcs .tab-wrap li.on, #sfcs .tab-btn-wrap li:hover, #sfcs .tab-btn-wrap li:active { background-color:#EF6E47; }

#sfcs .office-staff { display:flex; flex-direction: column; gap:20px; }
#sfcs .office-staff-row { display:flex; align-items: stretch; gap:20px; }
#sfcs .office-staff-card { flex:1 0 0; min-width:0; display:flex; align-items: center; gap:40px; background:#FFF; border:1px solid #E5E5E5; border-radius:12px; padding:24px 28px; }
#sfcs .office-staff-card .photo { flex-shrink:0; width:140px; height:140px; border-radius:100px; border:1px solid #E5E5E5; overflow:hidden; }
#sfcs .office-staff-card .photo img { width:100%; height:100%; object-fit: cover; object-position: center; }
#sfcs .office-staff-card .info { display:flex; flex-direction: column; gap:4px; }
#sfcs .office-staff-card .info .role { color:#111; font-size:20px; font-weight:700; line-height:1.45; letter-spacing:-0.4px; }
#sfcs .office-staff-card .info .name { color:#111; font-size:28px; font-weight:700; line-height:1.45; letter-spacing:-0.56px; }
#sfcs .office-staff-card .info .dept { color:#111; font-size:18px; font-weight:400; line-height:1.45; letter-spacing:-0.36px; }
#sfcs .staff .office-staff-row:last-child .office-staff-card:only-child { flex:0 1 calc(50% - 10px); }
#sfcs .office-info { display:flex; flex-direction: column; gap:20px; margin-top:64px; }
#sfcs .office-info-row { display:flex; align-items: stretch; gap:20px; }
#sfcs .office-info-card { position:relative; flex:1 0 0; min-width:0; display:flex; flex-direction: column; justify-content: space-between; gap:20px; background:#F5F5F5; border-radius:12px; padding:24px 28px; min-height:190px; }
#sfcs .office-info-card .ico { width:48px; height:auto; margin-left:auto; aspect-ratio: 1/1; }
#sfcs .office-info-card .ico img { width:100%; height:100%; }
#sfcs .office-info-card .txt { display:flex; flex-direction: column; gap:8px; align-items: flex-start; }
#sfcs .office-info-card .badge { display:inline-flex; align-items: center; justify-content: center; padding:4px 12px; border-radius:200px; background:var(--color-theme); color:#FFF; font-size:16px; font-weight:600; line-height:1.55; letter-spacing:-0.32px; white-space:nowrap; }
#sfcs .office-info-card .value { color:#111; font-size:24px; font-weight:700; line-height:1.45; letter-spacing:-0.48px; min-height:70px; padding-right:50px; }
#sfcs .office-info-card .value .sub { color:#333; font-size:inherit; font-weight:inherit; }
#sfcs .prayer-wrap { display:flex; align-items: flex-start; gap:24px; }
#sfcs .prayer-wrap .prayer-photo { display:flex; flex-direction: column; gap:12px; align-items: center; justify-content: center; flex-shrink:0; }
#sfcs .prayer-wrap .prayer-photo .img { width:280px; height:596px; border-radius:20px; overflow:hidden; }
#sfcs .prayer-wrap .prayer-photo .img img { width:100%; height:100%; object-fit: cover; object-position: center; }
#sfcs .prayer-wrap .prayer-photo .cap { color:#111; font-size:16px; font-weight:600; line-height:1.55; letter-spacing:-0.32px; }
#sfcs .prayer-wrap .prayer-txt { flex:1 0 0; min-width:0; display:flex; flex-direction: column; gap:20px; padding:24px 0; }
#sfcs .group .img-wrap.text img { border-radius: 12px; overflow:hidden; }
#sfcs .group .img-wrap.text { align-items: stretch; }
#sfcs .group .img-wrap.text .cont { justify-content: space-between; }
#sfcs .group .text-bx { display:flex; flex-direction: column; }
#sfcs .group .text-bx .tit { margin:0; }
#sfcs .group .text-bx .desc p { margin:0; }
#sfcs .group .text-bx .tit + .desc { margin-top:0; }
#sfcs .group .search-input-wrap { justify-content: flex-end; }
#sfcs .group .select-box-wrap .select-box-list-wr { max-height:200px; }
#sfcs .group .select-box-wrap .select-box-list-wr ul { max-height:200px; }
#sfcs .group .univ-map { aspect-ratio: 235/154.5; }
#sfcs .group .univ-marker { display:inline-flex; align-items:center; padding:2px 10px; border-radius:200px; font-size:13px; font-weight:600; line-height:1.5; white-space:nowrap; cursor:pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.15); border:1px solid rgba(0,0,0,0.15); }
#sfcs .group .parish-marker { background:#6b4eff; color:#fff; cursor:default; }
#sfcs .group .univ-overlay .ov-address { margin-bottom:4px; }
#sfcs .group .univ-overlay .ov-address:last-of-type { margin-bottom:16px; }
#sfcs .active .img-wrap.text img { width:352px; border-radius:12px; overflow:hidden; }
#sfcs .active .img-wrap.text .cont .desc { display:flex; flex-direction: column; gap:4px; }
#sfcs .active .img-wrap.text .cont .desc p { margin:0; }
#sfcs .group .univ-overlay .ov-address strong { font-weight:700; margin-right:4px; }
#sfcs .paxmass .img-wrap.poster { max-width:640px; margin:0 auto; }

@media (max-width: 768px){
 #sfcs .office-staff-row { flex-direction: column; }
 #sfcs .office-staff-card { gap:20px; padding:20px; }
 #sfcs .office-staff-card .photo { width:100px; height:100px; }
 #sfcs .office-staff-card .info .role { font-size:16px; }
 #sfcs .office-staff-card .info .name { font-size:20px; }
 #sfcs .office-staff-card .info .dept { font-size:16px; }
 #sfcs .staff .office-staff-row:last-child .office-staff-card:only-child { flex:1 0 0; }
 #sfcs .office-info { margin-top:20px; }
 #sfcs .office-info-row { flex-direction: column; }
 #sfcs .office-info-card { min-height:auto; padding:20px; }
 #sfcs .office-info-card .ico { position:absolute; top:50%; right:20px; transform:translateY(-50%); }
 #sfcs .office-info-card .badge { font-size:14px; }
 #sfcs .office-info-card .value { font-size:18px; min-height:auto;} 
 #sfcs .prayer-wrap { flex-direction: column; align-items: center; }
 #sfcs .prayer-wrap .prayer-photo { width:100%; max-width:280px; }
 #sfcs .prayer-wrap .prayer-photo .img { width:100%; height:auto; aspect-ratio: 280/596; }
 #sfcs .prayer-wrap .prayer-txt { width:100%; padding:0; }
 #sfcs .group .univ-map { aspect-ratio: 1/1.5; }
 #sfcs .active .img-wrap.text img { width:100%; }
 #sfcs .active .img-wrap p { margin:0; }
}

 /* --- 서울 선택 --- */
#choice {   
   --logo: url('../img/choice/logo.png');
   --logo-white: url('../img/choice/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 189px;
   --logo-h: auto;
   --logo-ratio: 189 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 50px);
   --bg-tile: url('../img/choice/lastest-wrap-tile-bg.png') bottom center / cover no-repeat;
}

#choice .other-wrap { margin:120px auto; }
#choice .quick-btn-wrap { margin:20px auto; }
#choice .quick-btn-wrap.typeA .inner, #choice .login-wrap .inner { padding:0; }
#choice .login-wrap .inner > .flex { background:#f5f5f5; }

 /* --- 서울 A지T --- */
#ajit {   
   --logo: url('../img/ajit/logo.png');
   --logo-white: url('../img/ajit/logo-white.png');
   --logo-w: 40%;
   --logo-max-w: 126px;
   --logo-h: auto;
   --logo-ratio: 126 / 36;
   --gnb-dep1-padding: clamp(30px, 3.125vw, 50px);
   --bg-tile: url('../img/ajit/lastest-wrap-tile-bg.png') bottom center / cover no-repeat;
}

#ajit[data-theme="theme03"] {
   --color-theme: #FE7419;
   --color-theme-hover: #c0540c;
   --color-theme-opacity: rgba(254, 117, 25, 0.493);
}

#ajit .quick-btn-wrap .inner { flex-wrap:wrap; }
#ajit .quick-btn-wrap.typeA a { width:calc(33.3% - var(--clamp-size-20)); }

@media (max-width: 1288px){
   #ajit .quick-btn-wrap.typeA a { width:calc(50% - var(--clamp-size-20)); }
}

@media (max-width: 768px){
   #ajit .quick-btn-wrap.typeA a { width:100%; }
}