*, *::before, *::after { box-sizing: border-box; } 
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } 
ul, ol { list-style: none; padding: 0; } 
img, picture { max-width: 100%; display: block; } 
body { line-height: 1.5; -webkit-font-smoothing: antialiased; } 
button, a { cursor: pointer; } 
a { text-decoration: none; color: inherit; } 
html { -webkit-text-size-adjust: 100%; } 
input, button, textarea, select { font: inherit; } 
button { background: none; border: none; padding: 0; } 
table { border-collapse: collapse; border-spacing: 0; } 
img { pointer-events: none; } 
a:active { opacity: .8; transform: scale(0.98); transition: transform 0.1s ease; } 

.main_title { font-weight: 700; font-size:80px; color:#333333; } 
.sub_title { font-weight: 500; font-size:48px; color:#333333; word-break:keep-all; } 
.sub_title_bold { font-weight: 600; font-size:52px; color:#333333; word-break:keep-all; } 
.default_txt { font-weight: 500; font-size:40px; color:#333333; word-break:keep-all; } 
.default_txt_bold { font-weight: 600; font-size:40px; color:#333333; word-break:keep-all; } 

.btn_txt { font-weight: 600; font-size: 52px; color: #7058A7; border: 5px solid #7058a7; padding: 12px 52px; border-radius: 100px; background-color: #ffffff; } 
a.btn_txt::before { display: inline-block; content: ""; background-image: url(/images/btn_back.png); width: 40px; height: 40px; background-repeat: no-repeat; background-size: contain; } 

:root { --red-color: #F59680; --yell-color:#F7C27B; --mint-color:#69D1D1; --rered-color: #EE502B; --reyell-color:#F19A23; --remint-color:#05B2B2; --main-color:#7058A7; --sub-color:#AB96DF; --soft-color:#F0EAFF; } 

/* 대전서구가족센터 */

/* ── 사이드 메뉴 드로어 ── */
.side-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 9000; } 
.side-menu-overlay.open { display: block; } 

/* .side-menu-drawer { position: fixed; top: 0; right: -100%; width: 78%; height: 100%; background: #fff; z-index: 9001; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); padding: 70px 60px; box-sizing: border-box; display: flex; flex-direction: column; } */
.side-menu-drawer.open { visibility:visible; } 
.side-menu-drawer { visibility:hidden; position: absolute; top: 50%; right: -100%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: fit-content; background: #fff; z-index: 9001; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); padding: 2rem; box-sizing: border-box; border-radius: 50px; box-shadow: 0 0 10px 0 #00000020; } 

.side-menu-header { display: flex; justify-content: space-between; margin-bottom: 80px; align-items: center; } 
.side-menu-close { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; /*background: var(--soft-color); */ border-radius: 100%; border: none; cursor: pointer; color: var(--main-color); } 
.side-menu-close svg { width: 64px; height: 64px; } 
.side-menu-header .title > span { padding-left: 20px; } 

.side-menu-nav { display: flex; flex-direction: column; gap: 50px; flex: 1; justify-content: flex-start; } 
.side-menu-item { display: flex; align-items: center; justify-content: center; padding: 50px 60px; border-radius: 60px; border: 5px solid var(--main-color); text-align: center; transition: opacity 0.15s; } 
.side-menu-item:active { opacity: 0.75; } 
.side-menu-item .sub_title { color: #333333; } 

.side-menu-item--red { border-color: var(--rered-color); background: #fff8f8; } 
.side-menu-item--yell { border-color: var(--reyell-color); background: #fef8ee; } 
.side-menu-item--mint { border-color: var(--remint-color); background: #eafafa; } 
.side-menu-item--red .sub_title { color: var(--rered-color); } 
.side-menu-item--yell .sub_title { color: var(--reyell-color); } 
.side-menu-item--mint .sub_title { color: var(--remint-color); } 

/* 사이드 메뉴 아코디언 토글 버튼 */
.side-menu-toggle { width: 100%; justify-content: space-between; font-family: inherit; } 
.side-menu-arrow { width: 52px; height: 52px; flex-shrink: 0; transition: transform 0.3s ease; stroke: var(--rered-color); } 
.side-menu-toggle.expanded .side-menu-arrow { transform: rotate(180deg); } 

/* 서브메뉴 */
.side-menu-group { display: flex; flex-direction: column; } 

.side-menu-sub { display: none; flex-direction: column; gap: 20px; padding: 20px 0 0 0; } 
.side-menu-sub.open { display: flex; } 

.side-menu-sub-item { display: flex; align-items: center; justify-content: center; padding: 36px 50px; border-radius: 50px; border: 4px solid; text-align: center; transition: opacity 0.15s; } 
.side-menu-sub-item:active { opacity: 0.75; } 

.side-menu-sub-item--red { border-color: var(--rered-color); background: #ffffff; } 
.side-menu-sub-item--red .default_txt { color: var(--rered-color); } 

/* 화면공통 */
body { font-family: 'Escoredream', sans-serif; width: 1080px; height: 1920px; /*overflow: hidden; */ min-height: 100vh; } 
main { position: relative; } 
.topbar .container { display: flex; justify-content: space-between; width: 100%; align-items: center; height: 210px; padding: 60px; } 
.topbar .container .logo { width: 13%; display: block; text-align: center; position: absolute; left: 50px; } 
.topbar .container .logo>img { width: 100%; } 
.topbar .container .menu { display: flex; background-color: #7058A7; width: 8rem; height: 8rem; border-radius: 100%; justify-content: center; align-items: center; position: absolute; right: 30px; } 
.topbar .container .menu>img { width: 65%; height: auto; display: block; } 
.main_title { height:120px; width: 100%; display: block; text-align: center; font-size: 80px; } 

.footer { width: 100%; font-size: 52px; height: 210px; padding: 20px 60px 60px; display: block; position: fixed; bottom: 0; } 
.footer .container { display: flex; justify-content: space-between; align-items: center; } 
.footer .container .home { display: flex; background-color: #7058A7; width: 8rem; height: 8rem; border-radius: 100%; justify-content: center; align-items: center; } 
.footer .container .home>img { width: 65%; height: auto; display: block; } 
.footer .container .btn_back>a { } 

.wrapper_bg { } 
.wrapper_bg img { position: absolute; top: 0; left: 0; z-index: -99999; width: 100%; } 


/* 전체메뉴 및 첫화면 */

.gnb_container { width: 100%; } 
.welcome_text_img::after { content: ""; background-size: contain; background-repeat: no-repeat; background-image: url(/images/welcome.png); display: block; width: 80%; height: 300px; background-position: center; position: absolute; top:200px; left: 50%; transform: translateX(-50%); } 
.welcome.sub_title_bold { text-align: center; display: block; position: relative; line-height: 200%; } 
.welcome.sub_title_bold::after { content: ""; background-size: contain; background-repeat: no-repeat; background-image: url(/images/logo03.png); display: block; width: 600px; height: 600px; background-position: center; position: absolute; /* opacity: .5;  */left: 50%; top: 50%; transform: translate(-50%, 20%); } 
.gnb_container .menu_item_list { margin-top: 800px; display: block; } 
.gnb_container .menu_item { border-radius: 24px; width: 100%; } 
.gnb_container .menu_item:nth-child(1) { border:5px solid var(--rered-color); } 
.gnb_container .menu_item_list.depth { display: flex; align-items: center; justify-content: space-between; margin:0; } 
.gnb_container .menu_item_list.depth .menu_item:nth-child(1) { border:5px solid var(--reyell-color); margin:2rem 1rem 0 0; } 
.gnb_container .menu_item_list.depth .menu_item:nth-child(2) { border:5px solid var(--remint-color); margin:2rem 0 0 1rem; } 
.gnb_container .menu_item .btn { display: block; padding: 40px 10px; text-align: center; box-sizing: border-box; } 
.gnb_container .menu_item .btn span { } 
.gnb_container .menu_item .btn .sub_title { display: block; padding: 1rem; } 
.gnb_container .menu_item .btn .sub_title_txt { display: block; color:#666666; font-size: 40px; letter-spacing: -1px; } 



/*스크린 1*/

.main_content { box-sizing: border-box; height: 1380px; display: flex; align-items: center; padding:60px; } 

/* 프로그램 리스트: 상단 정렬 + 페이징 하단 고정 */
.main_content.list_content { align-items: flex-start; } 
.main_content.list_content .program_list { display: flex; flex-direction: column; height: 100%; } 
.main_content.list_content .program_list .program:last-child { margin-top: auto; } 

.menu_wrap { width: 100%; } 
.menu_wrap .menu_item { display: block; border: 1px solid #dfdfdf; border-radius: 50px; margin-bottom: 2rem; box-sizing: border-box; } 
.menu_wrap .menu_item .btn { display: flex; align-items: center; padding: 100px 60px; position: relative; } 
.menu_wrap .menu_item:nth-child(1) { background-color: var(--red-color); } 
.menu_wrap .menu_item:nth-child(2) { background-color: var(--yell-color); } 
.menu_wrap .menu_item:nth-child(3) { background-color: var(--mint-color); } 
.menu_wrap .menu_item .btn .sub_title { font-weight: 500; font-size: 52px; color: #333333; padding-left: 2rem; letter-spacing: -2px; } 
.menu_wrap .menu_item .btn .btn_next { position: absolute; right: 2rem; } 

/* 스크린1-1미션 */

.mission_item_list { } 
.mission_item_list .mission_item { position: relative; padding-bottom: 4rem; } 
.mission_item_list .mission_item span.default_txt { background-color: var(--red-color); padding: 12px 40px; border-radius: 50px; position: absolute; top: -20%; left: 50%; transform: translate(-50%, 20%); } 
.mission_item_list .mission_item div.default_txt { border: 5px solid var(--red-color); border-radius: 50px; padding: 70px 50px 40px 50px; word-break: keep-all; text-align: center; } 
.mission_item_list .mission_item:nth-child(1) span.default_txt { background-color: var(--red-color); } 
.mission_item_list .mission_item:nth-child(1) div.default_txt { border: 5px solid var(--red-color); } 
.mission_item_list .mission_item:nth-child(2) span.default_txt { background-color: var(--yell-color); } 
.mission_item_list .mission_item:nth-child(2) div.default_txt { border: 5px solid var(--yell-color); } 
.mission_item_list .mission_item:nth-child(3) span.default_txt { background-color: var(--mint-color); top: -15%; } 
.mission_item_list .mission_item:nth-child(3) div.default_txt { border: 5px solid var(--mint-color); } 
.mission_item_list .mission_item .mission_core_item_list { display: flex; justify-content: space-between; } 
.mission_item_list .mission_item .mission_core_item_list .mission_core_item { display: flex; align-items: center; flex-direction: column; } 
.mission_item_list .mission_item .mission_core_item_list .mission_core_item img { width: fit-content; height:150px; } 

/* 스크린1-2 조직도 */

.organization_list { width:100%; } 
.organization_list .organization_officer { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; } 
.organization_list .organization_officer .officer { width: -webkit-fill-available; font-size: 40px; color:#333333; border-radius: 100px; text-align: 
 center; padding: 20px 20px; box-sizing: border-box; margin-bottom:160px; } 
.organization_list .organization_officer .officer.center_leader { } 
.organization_list .organization_officer .committee_list { display: flex; flex-direction: row; flex-wrap: nowrap; width:100%; justify-content: space-between; } 
.organization_list .organization_officer .committee_list .officer { width: calc(100% / 3 - 24px); } 
.organization_list .organization_officer .committee_list .officer.committee { position: relative; border: 5px solid var(--sub-color); color: var(--main-color); margin-bottom: 60px;} 
.organization_list .organization_officer .committee_list .committee.rowline::before { content: ""; width: 665px; height: 5px; background-color: var(--sub-color); display: block; position: absolute; top: -70px; left: 50%; z-index: -9999; } 
.organization_list .organization_officer .committee_list .committee.line::after { content: ""; width: 5px; height: 70px; background-color: var(--sub-color); display: block; position: absolute; top: -70px; left: 50%; z-index: -9999; } 
.organization_list .organization_officer .committee_list.sub_leader { justify-content: center; } 

.organization_list .organization_officer .officer.center_leader { position: relative; border: 5px solid var(--sub-color); background-color: var(--main-color); width:30%; color:#ffffff; } 
/* 가운데 라인 */
.organization_list .organization_officer .officer.center_leader.line::after { content: ""; width: 5px; height: 1010px; background-color: var(--sub-color); display: block; position: absolute; top: 0; left: 50%; z-index: -9999; } 
.organization_list .organization_officer .officer.sub_leader { position: relative; border: 5px solid var(--sub-color); background-color: var(--sub-color); color:#ffffff; margin-bottom: 100px;} 
.organization_list .organization_officer .officer.manager { position: relative; border: 5px solid var(--sub-color); background-color: var(--soft-color); color:#333333; width:30%; } 
.organization_list .organization_officer .officer.manager.rowline::before { content: ""; width: 643px; height: 5px; background-color: var(--sub-color); display: block; position: absolute; top: 200px; left: -180px; z-index: -9999; } 

.organization_list .organization_team { position: relative; width: 100%; display: flex; flex-direction: row; } 
.organization_list .organization_team .team { width: calc(100% / 3 - 24px); font-size: 40px; border-radius: 100px; padding: 20px 26px; box-sizing: border-box; margin: 0 12px 120px 12px; } 

.organization_list .organization_team .team { font-weight: 500; } 
.organization_list .organization_team .team img { position: absolute; width: 60px; top: 50%; transform: translate(0, -50%); right: 0; } 
.organization_list .organization_team .fsteam { position: relative; border: 5px solid var(--rered-color); background-color: #ffffff; color:var(--rered-color); } 
.organization_list .organization_team .ffteam { position: relative; border: 5px solid var(--reyell-color); background-color: #ffffff; color:var(--reyell-color); } 
.organization_list .organization_team .ccteam { position: relative; border: 5px solid var(--remint-color); background-color: #ffffff; color:var(--remint-color); } 
.organization_list .organization_team .line::after { content: ""; width: 5px; height: 70px; background-color: var(--sub-color); display: block; position: absolute; top: -69px; left: 50%; z-index: -9999; } 

/* 스크린1-2조직도 > 프로그램 리스트 */
.main_title.team_red { color:var(--rered-color); } 
.main_title.team_yell { color:var(--reyell-color); } 
.main_title.team_mint { color:var(--remint-color); } 

.program_list { width: 100%; } 
.program_list .program { display: flex; justify-content: center; } 
.program_list .program .program_item { text-align: center; height:130px; position: relative; border: 5px solid var(--sub-color); border-radius: 100px; margin-bottom: 2rem; padding: 12px 80px 12px 20px; width: 100%; display: flex; align-items: center; justify-content: center; } 
.program_list .program .program_item_title_2_line .sub_title { line-height:1.2; font-size: 42px; } 
.program_list .program .program_item_title_2_line .default_txt { line-height:1.2; } 
.program_list .program .program_item_title_1_line { display: flex; align-items: center; justify-content: center; } 
.program_list .program .program_item_title_1_line .sub_title { font-size: 48px; } 
.program_list .program .program_item span { display: block; } 
.program_list .program .program_item img { position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%); } 

/* 페이징 */
.program_pagination { display: flex; justify-content: center; align-items: center; width: 100%; } 
.program_pagination .program_pagination_list { padding: 8px 42px; } 

/* 스크린1-2조직도 > 리스트 > 상세 */

.hl_red { display: inline; box-shadow: inset 0 -30px 0 #EE502B50; } 
.hl_yell { display: inline; box-shadow: inset 0 -30px 0 #F19A2350; } 
.hl_mint { display: inline; box-shadow: inset 0 -30px 0 #05B2B250; } 

.program_info .program_info_label.bg_red50 { border: 5px solid var(--red-color); background-color: #FFF8F8; } 
.program_info .program_info_label.bg_yell50 { border: 5px solid var(--yell-color); background-color: #FEF5E9; } 
.program_info .program_info_label.bg_mint50 { border: 5px solid var(--mint-color); background-color: #E6F7F7; } 

.program_info { position: relative; } .program_info .program_info_title.title_red_b { border: 5px solid var(--red-color); } 
.program_info .program_info_title.title_yell_b { border: 5px solid var(--yell-color); } 
.program_info .program_info_title.title_mint_b { border: 5px solid var(--mint-color); } 

.program_info .program_info_title.title_2_line { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0 50px; width: max-content; } 
.program_info .program_info_title.title_2_line .sub_title_bold { display: block; line-height: 1.1; width:750px; font-size: 44px; letter-spacing: -5px; height: fit-content; width: fit-content; } 
.program_info .program_info_title.title_2_line .default_txt { line-height: 1.1; } 


.program_info .program_info_title { box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: max-content; text-align: center; padding: 12px 60px; border-radius: 100px; background-color: #ffffff; } 
.program_info .program_info_label { border-radius: 50px; padding: 100px 50px 50px 50px; height: 840px; background-repeat: no-repeat; background-position: 95% 95%; background-size: 35%; } 
.program_info .program_info_label.bg_red50 { background-image: url(/images/icon_1.png); } 
.program_info .program_info_label.bg_yell50 { background-image: url(/images/icon_2.png); } 
.program_info .program_info_label.bg_mint50 { background-image: url(/images/icon_3.png); } 
.program_info .program_info_label .label_desc { padding:30px 0; } 
.program_info .program_info_label .label_desc .default_txt { display: block; } 
.program_info .program_info_qr { padding: 50px; border: 5px solid var(--sub-color); border-radius: 50px; margin-top: 2rem; background: #ffffff; } 
.program_info .program_info_qr .program_qr { display: flex; height: 220px; align-items: center; } 
.program_info .program_info_qr .program_qr .qr_img { padding: 45px; border-radius: 100px; background: #f5f5f5; box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2); } 
.program_info .program_info_qr .program_qr .default_txt { padding-left:50px; color:var(--main-color); word-break: keep-all; } 


/* 스크린1-3 피난대피도 */
.safety_map { display: flex; flex-direction: column; align-items: center; } 
.safety_map .safety_map_info { border:5px solid var(--main-color); border-radius: 100px; padding:20px 40px; margin: 2rem; } 
.safety_map .safety_map_info .default_txt { text-align: center; display: block; } 
.safety_map .safety_map_img { text-align: center; border-radius: 24px; padding: 50px 0 100px 0; box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.2); display: flex; width: 90%; justify-content: center; margin: 60px 0; flex-direction: column; } 
.safety_map .safety_map_img img { border-radius: 24px; width: 100%; } 
.safety_map .safety_map_img .sub_title_bold { } 
.safety_map .program { width:100%; } 
.safety_map .program_pagination { display: flex; justify-content: space-evenly; align-items: center; width: 100%; } 


/* 스크린2 영상 */
.video_container { width: 100%; display: flex; flex-direction: column; height: 100%; } 
.video_container .video_frame { width: 100%; margin-bottom: 2rem; } 
.video_container .video_frame video { width: 100%; height: auto; border-radius: 24px; background: #000; display: block; } 
.video_container .video_frame iframe { width: 100%; height: 540px; border-radius: 24px; display: none; } 
.video_container .program_item { position: relative; height:130px; display: flex; padding: 20px 40px; border: 5px solid var(--main-color); border-radius: 100px; margin-top: 2rem; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; } 
.video_container .program_item span { display: block; } 
.video_container .program_item .program_item_title_2_line { display: flex; flex-direction: column; align-items: center; line-height: 1; } 
.video_container .program_item img { position: absolute; right: 20px; } 
/* 선택된 영상 항목 강조 */
.video_container .program_item.active { background-color: var(--soft-color); border-color: var(--main-color); border-width: 6px; } 
.video_container .program_item.active .default_txt { color: var(--main-color); font-weight: 700; } 

/* 스크린3 프로그램찾기 */
.program_search_container { width: 100%; padding-bottom: 100px; display: flex; justify-content: center; flex-direction: column; } 
.program_search_container.program_info { padding-bottom: 0px; } 
span.mid.sub_title_bold { line-height: 200%; position: absolute; top: 400px; width: 50%; text-align: center; display: block; left: 50%; transform: translateX(-50%); } 
/* 선택 가능한 항목이 없을 때 문구 세로 중앙 정렬 */
.program_search_container .question.no_result { flex: 1; height: auto; padding: 0; display: flex; align-items: center; justify-content: center; } 

/* 스크린3 프로그램찾기 > 상세: 스텝 인디케이터 하단 여백 */
.program_search_container .program_step { margin-bottom: 40px; } 
/* 상세 페이지에서 program_info 상단에 여백 (절대위치 타이틀이 위로 튀어나오는 공간 확보) */
.program_search_container .program_info { margin-top: 60px; } 
.program_search_container .program_search { } 
.program_search_container .program_search .btn { background-color: var(--main-color); position: relative; padding: 120px; display: flex; align-items: center; justify-content: center; border-radius: 250px; } 
.program_search_container .program_search .btn::before { animation: hand-click 0.8s infinite alternate; content: ""; background-image: url(/images/img_on.png); background-repeat: no-repeat; display: block; width: 500px; position: absolute; height: 450px; background-size: contain; top: 45%; left: 62%; transform: translate(-50%, 0); } 
.program_search_container .program_search .btn .sub_title_bold { color:#ffffff; } 
.program_search_container .program_search .btn .btn_next { padding: 0 0 0 60px; } 

@keyframes hand-click { 
 0% { transform: translateX(-50%) translateY(0); } 
 100% { transform: translateX(-50%) translateY(10px); } 
 }
 
.program_search_container .program_step { display: flex; align-items: center; justify-content: center; flex-direction: column; } 

.program_search_container .step { position: relative; display: flex; align-items: center; padding: 2rem; } 
.program_search_container .program_step .step span.txt { font-size: 52px; padding: 0px 22px; border: 5px solid #999999; color: #999999; background-color: #99999950; border-radius: 100px; background-color: #ffffff; } 
.program_search_container .program_step .step span.dot { font-size: 52px; color:#666666; } 
.program_search_container .step span.txt.completed_step { background-position: center; font-size: 52px; padding: 0px 22px; border: 5px solid var(--main-color); border-radius: 100px; background-color: #ffffff; background-image: url(/images/check.png); background-repeat: no-repeat; background-size: 80%; color: #ffffff00; } 
.program_search_container .step span.dot.completed_step { color:var(--main-color); } 
.program_search_container .step span.txt.current_step { font-size: 52px; padding: 0px 22px; border: 5px solid var(--main-color); color: #ffffff; border-radius: 100px; background-color: var(--main-color); } 
.program_search_container .step span.dot.current_step { color:var(--main-color); } 

.program_search_container .question { padding-bottom: 2rem; height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } 
.program_search_container .question .sub_title { color: var(--main-color); text-align: center; width: 100%; } 
.program_search_container .question .sub_title_bold { text-align: center; width: 100%; } 

.program_search_container .answer_list { height: 900px; width:100%; } 
.program_search_container .answer_list .answer { letter-spacing: -5px; font-size: 48px; display: block; text-align: center; padding: 10px 30px; border: 5px solid var(--main-color); box-sizing: border-box; border-radius: 100px; margin-bottom: 2rem; background-color: #fff; } 
.program_search_container .answer_list.answer_2_list .answer { padding: 10px 100px; } 
.program_search_container .answer_list.answer_2_list .answer:nth-child(1) { padding: 10px 100px; margin-top:100px; } 
.program_search_container .answer_list.answer_5_list .answer { padding: 10px 20px; }