@charset "utf-8";
/* 서브공통 */
.sub-section {margin-bottom: var(--space-100);}
.sub-section:last-child {margin-bottom: 0;}
.sub-section h3.tit {font-size: var(--font-size-36); font-weight: 600; color: var(--color-sub); margin-bottom: var(--space-34); line-height: 1.388em;}
.sub-section p.txt {font-size: var(--font-size-18); font-weight: 400; line-height: 1.666em; color: #676767; margin-bottom: var(--space-50); letter-spacing: -0.02em;}
.sub-section h3.tit.type2 {margin-bottom: var(--space-50);}

/********************* 체육회소개 *********************/
/* 인사말 */
.greeting-content .inner {display: flex; align-items: stretch; gap: var(--space-80);}
.greeting-content .cell {flex: 1; min-width: 0;}
.sub-section.greeting-content .tit {font-size: var(--font-size-36); font-weight: 600; line-height: 1.5em; letter-spacing: -0.03em; color: var(--color-primary); margin-bottom: var(--space-50);}
.greeting-content .intro {font-size: var(--font-size-28); font-weight: 600; color: var(--color-sub); margin-bottom: var(--space-40); line-height: 1.5em;}
.greeting-content .cont {margin-bottom: var(--space-50);}
.greeting-content .cont p {font-size: var(--font-size-20); font-weight: 400; line-height: 1.7em; margin-bottom: var(--space-30);}
.greeting-content .cont p:last-child {margin-bottom: 0;}
.greeting-content .sign {display: flex; align-items: center; gap: var(--space-28);}
.greeting-content .sign .name {width: 154px;}
.greeting-content .sign p {font-size: 16px; color: var(--color-sub); font-weight: 600; line-height: 1.5em;}
.greeting-content .img-cell {max-width: clamp(400px, calc(554 / var(--inner) * 100vw), 554px);}

/* ci소개 */
.ci-intro {text-align: left;}
.ci-intro .ci-logo-wrap {width: 100%; background-image: url("/images/sub/ci-bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: var(--space-80) var(--space-container);}
.ci-intro .ci-logo-wrap .img {width: 300px; margin: 0 auto;}

.ci-variants .inner {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-60);}
.ci-variants .txt {height: 90px;}
.ci-variants .item {display: flex; flex-direction: column;}
.ci-com-box {flex: 0 0 390px; height: 390px; display: flex; align-items: center; justify-content: center; padding: var(--space-20); border-radius: var(--radius-16); border: 1px solid #eee; box-sizing: border-box;}
.ci-com-box .img {margin: 0 auto;}
.ci-logo-wrap2 .img {width: 239px;}
.ci-logo-wrap3 .img {width: 354px;}
.ci-logo-wrap4 .img {width: 360px;}

/* 설립목적 및 연혁 */
.history-purpose {padding-bottom: var(--space-100); background-image: repeating-linear-gradient(90deg, #dfdfdf 0, #dfdfdf 4px, transparent 4px, transparent 8px); background-size: 100% 1px; background-repeat: repeat-x; background-position: bottom;}
.history-purpose .img {overflow: hidden; border-radius: var(--radius-16); margin-bottom: var(--space-60);}
.history-purpose .history-txt {font-size: var(--font-size-20); font-weight: 400; line-height: 1.7em; }
.history-timeline {display: flex;}
.history-timeline .tit {flex: 0 0 clamp(200px, calc(400 / var(--inner) * 100vw), 400px);}
.history-timeline .list {flex: 1; display: flex; flex-direction: column;}
.history-timeline .item {display: flex; align-items: flex-start; gap: var(--space-50); padding: var(--space-50) 0; border-bottom: 1px solid #eee;}
.history-timeline .item:first-child {padding-top: 0;}
.history-timeline .item.center {align-items: center;}
.history-timeline .year {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: clamp(90px, calc(160 / var(--inner) * 100vw), 160px); height: clamp(90px, calc(160 / var(--inner) * 100vw), 160px); background: var(--color-primary); box-shadow: -12px -12px 0 0 rgba(0, 0, 0, 0.16) inset; color: #fff; font-size: var(--font-size-28); font-weight: 600; border-radius: 100%; line-height: 1.5em;}
.history-timeline .item ul {list-style: none; padding: 0; margin: 0; flex: 1;}
.history-timeline .item li {display: flex; margin-bottom: var(--space-20); padding-left: 0;}
.history-timeline .item li:last-child {margin-bottom: 0;}
.history-timeline .item .month {width: 50px; font-size: var(--font-size-22); font-weight: 600; color: var(--color-sub);}
.history-timeline .item p {font-size: var(--font-size-20); font-weight: 400; line-height: 1.7em; color: #676767;}

/* 찾아오시는 길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 520px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}

.location-section .map {margin-bottom: var(--space-60); border-radius: var(--radius-24); overflow: hidden;}
.lct-info-wrap .lct-cont {flex: 1;}
.lct-info-wrap .lct-cont h3 {font-size: var(--font-size-36); font-weight: 600; line-height: 1.388em; color: var(--color-sub); margin-bottom: var(--space-16);}
.lct-info-wrap .lct-cont .addr {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; color: var(--color-sub);}
.lct-info-wrap .lct-info {flex: 1;}
.lct-info-wrap .lct-info dl {display: flex; align-items: center; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: #A8A8A8; padding: var(--space-30) 0; border-bottom: 1px solid #DFDFDF;}
.lct-info-wrap .lct-info dl:first-child {border-top: 1px solid #DFDFDF;}
.lct-info-wrap .lct-info dt {display: flex; align-items: center;}
.lct-info-wrap .lct-info dt .icon {width: 40px;}
.lct-info-wrap .lct-info dt .lct-tit {width: 100px; padding: 0 20px; text-align: center;}
.lct-info-wrap .lct-info dd {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; color: var(--color-sub);}

/********************* 사업안내 *********************/
/* 주요사업 */
/* 찾아가는 생활체육서비스 */
.visit-cards .list {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24);}
.visit-cards .item {display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-16); background: #F6F6F6; border-radius: var(--radius-16);}
.visit-cards .item .head {display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0 ;}
.visit-cards .item .tit {font-size: var(--font-size-22); font-weight: 700; color: var(--color-primary); line-height: 1.63em;}
.visit-cards .item .deco {display: flex; align-items: center;}
.visit-cards .item .deco .dot {width: 8px; height: 8px; border-radius: 50%; background: #CCCCCC;}
.visit-cards .item .deco .dot.on {background: var(--color-primary);}
.visit-cards .item .cont {flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-40); background: #fff; border-radius: var(--radius-16); font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: var(--color-sub); text-align: center;}
/* 내용 및 목적 */
.aim-cont {display: flex; align-items: flex-start; }
.aim-cont .tit {width: clamp(200px, calc(400 / var(--inner) * 100vw), 400px);}
.aim-cont .cont {flex: 1; min-width: 0;}
.aim-cont .block {margin-bottom: var(--space-50); padding-bottom: var(--space-50); border-bottom: 1px solid #eee;}
.aim-cont .block:last-child {margin-bottom: 0;}
.aim-cont .subtit {font-size: var(--font-size-24); font-weight: 600; color: var(--color-sub); margin-bottom: var(--space-24); line-height: 1.66em;}
.aim-cont .list {list-style: none; padding: 0; margin: 0;}
.aim-cont .list li {position: relative; padding-left: 12px; font-size: var(--font-size-18); font-weight: 400; line-height: 1.666em; color: #676767; margin-bottom: 8px;}
.aim-cont .list li:last-child {margin-bottom: 0;}
.aim-cont .list li::before {content: "- "; position: absolute; left: 0;}

/********************* 가맹단체 *********************/
/* 가맹단체 및 동호인 클럽 */
.com-tbl .tbl {width: 100%; border-collapse: collapse; border-top: 2px solid var(--color-sub);}
.com-tbl .tbl th,
.com-tbl .tbl td {padding: var(--space-24); border: 1px solid #DFDFDF;  text-align: center; font-size: var(--font-size-18);  line-height: 1.666em; }
.com-tbl .tbl th {font-weight: 600; color: var(--color-sub); background: #FAFAFA;}
.com-tbl .tbl td {font-weight: 400;}
.com-tbl .tbl th:first-child {border-left: 0;}
.com-tbl .tbl th:last-child {border-right: 0;}
.com-tbl .tbl td:first-child {border-left: 0;}
.com-tbl .tbl td:last-child {border-right: 0;}
.com-tbl .tbl img {width: 280px;}

/* 관련단체 */
.related-section.com-tbl .tbl td a {transition: color 0.3s ease;}
.related-section.com-tbl .tbl td a:hover {color: var(--color-primary);}
.related-section.com-tbl .tbl td a img {transition: scale 0.3s ease;}
.related-section.com-tbl .tbl td a:hover img {scale: 1.05;}

/********************* 체육회 알림 *********************/