@charset "utf-8";
/*문화예술축제 이미지박스*/
.img-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 20px; width: 100%; justify-content: space-between; } 

@media (max-width: 768px){
.img-wrap { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; } 
}


.mt-50 { margin-top: 50px !important; } 

/* 오시는길 */
.map { margin-top: 1rem; } 
.section_address.lst { display: none !important; } 
.mapWrap { display: flex; justify-content: space-between; flex-wrap: nowrap; padding: 2rem; border-bottom: 1px solid #e3e3e3; align-items: center; } 
.mapInfo { display: flex; align-items: center; width: 96.8rem; justify-content: space-between; } 
.address, .tel { display: flex; align-items: center; } 
.address .tit { font-size: 2rem; font-weight: 600; padding-left: 3rem; background: url(/portal/images/sub/mapicon01.png) no-repeat center left; margin-right: 7rem; } 
.tel .tit { font-size: 2rem; font-weight: 600; padding-left: 3rem; background: url(/portal/images/sub/mapicon02.png) no-repeat center left; margin-right: 7rem; } 
.mapBtn { text-indent: -9999px; display: block; width: 127px; height: 47px; border-radius: 10px; background: url(/portal/images/sub/map.png) no-repeat center center, linear-gradient(121deg, rgba(12, 129, 122, 1) 0%, rgba(12, 64, 129, 1) 100%); margin-left: 7rem; flex-shrink: 0; } 
.busWrap { display: flex; flex-wrap: nowrap; border-top: 2px solid #000; padding: 5rem 14rem; border-bottom: 1px solid #e3e3e3; align-items: center; gap: 12%; } 
.busTIt { text-align: center; } 
.busIcon { background: #f8f8f8; text-align: center; width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } 
.busTxt { font-size: 2.4rem; font-weight: 600; } 

@media (max-width:1280px) {.busWrap { padding: 5rem 10rem; } 
}

@media (max-width:1020px) {.mapInfo { flex-wrap: wrap; } 
.address, .tel { width: 100%; margin-bottom: 1.5rem; } 
.address .tit, .tel .tit { width: 13rem; margin-right: 3rem; flex-shrink: 0; } 
.busWrap { padding: 5rem 5rem; flex-wrap: wrap; justify-content: center; } 
.busTIt { width: 100%; border-bottom: 1px solid #e3e3e3; padding-bottom: 4rem; margin-bottom: 1rem; } 
.busIcon { margin: 0 auto } 
.busTxt { margin-top: 1.5rem; } 
}

@media (max-width:744px) {.mapInfo { flex-wrap: wrap; } 
.mapWrap { flex-wrap: wrap; padding: 2rem; } 
.mapBtn { width: 100%; height: 4.5rem; border-radius: 1rem; margin-left: 0; margin-top: 2rem; background: url(/portal/images/sub/map.png) no-repeat center center, linear-gradient(121deg, rgba(12, 129, 122, 1) 0%, rgba(12, 64, 129, 1) 100%); background-size: auto; } 
.busWrap { padding: 5rem 2rem; } 
}

@media (max-width:464px) {.address, .tel { flex-wrap: wrap; padding-left: 0; } 
.address .tit, .tel .tit { width: 100%; } 
}

/*연혁*/
.timeline-container { display: flex; align-items: flex-start; max-width: 900px; width: 100%; margin-top: 50px; } 
.year-section { font-size: 5.5rem; font-weight: 800; color: #1a1a1a; line-height: 1; margin-right: 50px; flex-shrink: 0; } 
.year-section span { color: #643843; } 
.timeline-track { position: relative; width: 20px; margin-right: 40px; flex-shrink: 0; align-self: stretch; } 
.timeline-container .line { position: absolute; left: 50%; top: 20px; bottom: 35px; width: 1px; background-color: #e0e0e0; transform: translateX(-50%); z-index: 1; } 
.timeline-container .dot { position: absolute; left: 50%; top: 20px; width: 12px; height: 12px; border-radius: 50%; background-color: #fff; border: 4px solid #634351; transform: translateX(-50%); z-index: 2; }
.timeline-container .dot.light { top: auto; bottom: 35px; width: 8px; height: 8px; background-color: #eee; border: none; } 
.timeline-container .content-section { flex: 1; padding-top: 10px; } 
.timeline-container .event-item { display: flex; align-items: flex-start; margin-bottom: 50px; width: 100%; } 

/* 점선 영역 가로폭 고정으로 정렬 유지 */
.timeline-container .dots-separator { display: flex; align-items: center; justify-content: center; width: 35px; /* 폭 고정 */
margin-right: 15px; margin-top: 14px; flex-shrink: 0; }  
.timeline-container .dots-separator img { max-width: 100%; height: auto; } 
.timeline-container .month { font-size: 2rem; font-weight: 800; color: #634351; width: 65px; /* 폭 고정 */
margin-right: 20px; flex-shrink: 0; } 
.timeline-container .description { color: #333; line-height: 1.7; flex: 1; /* 남은 공간 차지 */}

@media (max-width: 768px){
.timeline-container { flex-direction: column; align-items: flex-start; padding: 0 10px; } 
.timeline-container .year-section { font-size: 3.5rem; margin-right: 0; margin-bottom: 30px; text-align: left; } 
.timeline-container .timeline-track { display: none; } 
.timeline-container .event-item { margin-bottom: 35px; padding-left: 0; }

.timeline-container .dots-separator { width: 25px; margin-right: 10px; margin-top: 10px; } 
.timeline-container .month { width: 45px; margin-right: 15px; } 
}

/*생활문화사업*/
.card-container { width: 100%; border: 1px solid #e0e0e0; border-radius: 15px; padding: 20px; position: relative; } 

.card-container::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

.card-container .card01 { background-image: url('/portal/images/sub/lifebg01.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card02 { background-image: url('/portal/images/sub/lifebg02.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card03 { background-image: url('/portal/images/sub/lifebg03.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card04 { background-image: url('/portal/images/sub/lifebg04.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card05 { background-image: url('/portal/images/sub/culturebg01.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card06 { background-image: url('/portal/images/sub/culturebg02.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card07 { background-image: url('/portal/images/sub/culturebg03.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card08 { background-image: url('/portal/images/sub/culturebg04.png'); background-position: 90% 70%; background-repeat: no-repeat; } 
.card-container .card09 { background-image: url('/portal/images/sub/culturebg05.png'); background-position: 90% 70%; background-repeat: no-repeat; } 

.card-container .box-div { padding: 40px 0 0 20px; } 

/* 상단 타이틀 바 */
.card-container .header-bar { color: white; padding: 15px 30px; border-radius: 30px; /* display: inline-flex; */
align-items: center; font-weight: 700; margin-bottom: 30px; position:absolute; top:-20px; left:0px; } 

.card-container .header-bar > span { display: flex; align-items: center; word-break: keep-all; } 
.card-container .header-bar span::before { content: ""; /* 가상 공간 생성 (필수) */
display: inline-block; /* 크기를 가지기 위해 필수 */
width: 36px; /* 이미지 가로 크기 */
height: 36px; /* 이미지 세로 크기 */
margin-right: 8px; /* 텍스트와의 간격 */

/* 이미지 설정 */
background-image: url('/portal/images/sub/ico-smile.png'); background-repeat: no-repeat; background-position: center; 
/* 텍스트와 세로 높이 맞추기 */
vertical-align: middle; } 

.card-container .header-bar01 { background: linear-gradient(90deg, #3f51b5 0%, #d81b60 100%); } 
.card-container .header-bar02 { background: linear-gradient(90deg, #2f2965 0%, #77173f 100%); } 
.card-container .header-bar03 { background: linear-gradient(90deg, #0166d8 0%, #3aa7b8 100%); } 
.card-container .header-bar04 { background: linear-gradient(90deg, #077857 0%, #0f526e 100%); } 
.card-container .header-bar05 { background: linear-gradient(90deg, #3f51b5 0%, #d81b60 100%); } 
.card-container .header-bar06 { background: linear-gradient(90deg, #2f2965 0%, #77173f 100%); } 
.card-container .header-bar07 { background: linear-gradient(90deg, #0166d8 0%, #3aa7b8 100%); } 
.card-container .header-bar08 { background: linear-gradient(90deg, #077857 0%, #0f526e 100%); } 
.card-container .header-bar09 { background: linear-gradient(90deg, #05b5a2 0%, #17b6ba 100%); } 


/* 리스트 스타일링 
.content-list { list-style: none; padding: 0; margin: 0 10px; } 
.content-item { margin-bottom: 15px; display: flex; align-items: flex-start; color: #555; font-size: 1rem; line-height: 1.6; } 
.content-item::before { content: '●'; color: #a67c52; 
margin-right: 10px; font-size: 0.8rem; margin-top: 2px; } 
.label { font-weight: 700; min-width: 80px; color: #333; } 

.sub-list { list-style: none; padding-left: 95px; margin-top: -10px; } 
.sub-item { position: relative; margin-bottom: 8px; color: #666; font-size: 0.95rem; } 
.sub-item::before { content: '-'; margin-right: 8px; color: #ff7043;
font-weight: bold; } 
*/

@media (max-width:1020px) {.card01,.card02,.card03,.card04,.card05,.card06,.card07,.card08,.card09 { background-image:none; } 
}
.card-container .header-bar { padding: 12px 30px; } 
.card-container .header-bar span::before { background-size:100%; width:30px; height:30px; } 

@media (max-width: 800px){
.card-container .box-div { padding: 40px 0 0 0px; } 
}

@media (max-width: 352px){
.card-container .header-bar { padding: 12px 20px; } 
}


/* 남구문화재단소개 */
.intro-mo { display: none; } 

@media (max-width: 768px) {.intro-pc { display: none; } 
.intro-mo { display: block; } 
}

/*안내 및 신청*/

.div-wrap { background-color: #fbfbfb; line-height: 1.6; margin: 0; padding: 20px; } 
.div-wrap .container { margin: 0 auto; padding: 40px; } 

/* 헤더 섹션 */
.div-wrap .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } 

.div-wrap .title { background: linear-gradient(90deg, #2f2965 0%, #77173f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: bold; display: inline-block; font-size: 4rem; margin-bottom: 15px; font-family: jalnan; } 

.div-wrap .subtitle-badge { background: linear-gradient(90deg, #2f2965 0%, #77173f 100%); color: white; display: inline-block; padding: 8px 20px; border-radius: 20px; margin-bottom: 20px; } 

.div-wrap .description2 { color: #666; max-width:660px; line-height:1.5; font-size:1.5rem; } 

.div-wrap .divider { border: 0.5px solid #eee; margin: 40px 0; } 
.div-wrap .mo-hide { display: none; } 
/* 섹션 타이틀 */
.div-wrap .section-title { color: #D38B5D; font-size: 1.5rem; margin-bottom: 25px; } 
.div-wrap .box-btn { display: block; position: relative; margin: 1em 0; padding: 1.66em 1.11em; text-align: center; } 
@media (max-width: 768px){
.div-wrap .header-image { display:none; } 
.div-wrap .container { padding:0; } 
.div-wrap .mo-hide { display: block; } 
.div-wrap .title { line-height: 1.2; font-size:3.5rem; } 
}