/* home.css — 메인 페이지 섹션 (원본 common.css 메인 블록 재작성) */

/* main-visual */
.main-visual { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.main-visual .inner { height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 130px; color: #fff; }
.main-visual .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.1); }
.main-visual .bg::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%); z-index: 1; }
.main-visual .bg img, .main-visual .bg video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.main-visual .heading { margin-bottom: 20px; }
.main-visual .text { font-size: 24px; color: rgba(255,255,255,0.8); }
@media screen and (max-width: 767px) {
  .main-visual { height: 100svh; }
  .main-visual .text { font-size: 16px; }
  .main-visual .bg video { top: -10%; width: auto; height: 120%; }
}

/* main-intro — 핀 스크롤 스토리텔링 (원본 인라인 GSAP 로직 이식) */
.main-intro { position: relative; padding: 160px 0; height: 1000vh; overflow: hidden; }
.main-intro .motion { width: 90%; height: 100vh; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.main-intro .motion .group { max-width: 835px; margin: 0 auto; width: 65%; position: relative; aspect-ratio: 1/1; }
.main-intro .motion .stroke { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main-intro .motion svg .percentage { stroke-dasharray: 2620px; stroke-dashoffset: 2620; transform: rotate(-90deg); transform-origin: center; }
.main-intro .motion .img-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main-intro .motion .img-box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76%; }
.main-intro .motion .title-wrap p { position: absolute; }
.main-intro .motion .title-wrap p span {
  padding: 5px 50px; height: 61px; border: 1px solid var(--accent-color); color: var(--accent-color);
  font-size: 24px; font-weight: bold; border-radius: 35px; background: #fff;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.main-intro .motion .title-wrap p:first-child { top: 0; left: 50%; transform: translateX(-50%); }
.main-intro .motion .title-wrap p:nth-child(2) { top: 50%; left: 90%; transform: translateY(-50%); }
.main-intro .motion .title-wrap p:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
.main-intro .motion .title-wrap p:last-child { top: 50%; right: 90%; transform: translateY(-50%); }
.main-intro .motion .arrow-wrap,
.main-intro .motion .arrow-wrap .arrow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.main-intro .motion .arrow-wrap .arrow:first-child { transform: rotate(50deg); }
.main-intro .motion .arrow-wrap .arrow:nth-child(2) { transform: rotate(130deg); }
.main-intro .motion .arrow-wrap .arrow:nth-child(3) { transform: rotate(230deg); }
.main-intro .motion .arrow-wrap .arrow:last-child { transform: rotate(310deg); }
.main-intro .motion .arrow-wrap span {
  position: absolute; left: 50%; top: 0; margin-top: -0.5%;
  background: url(/assets/img/intro-arrow.svg) no-repeat center/cover;
  width: 57px; height: 57px; transform: translateX(-50%) rotate(-45deg);
}
.main-intro .motion .arrow-wrap .arrow.active span { background-image: url(/assets/img/intro-arrow-active.svg); }
.main-intro .text-wrap { width: 100%; position: absolute; top: 50%; left: 50%; display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%); }
.main-intro .text-wrap .heading { text-align: center; padding: 0 20px; width: 100%; }
.main-intro .text-wrap .heading span { display: inline; vertical-align: middle; color: rgba(0,0,0,0.2); font-weight: 400; }
.main-intro .text-wrap .heading .accent span { vertical-align: middle; display: inline-block; font-weight: bold; color: rgba(0,0,0,0.2); }
.main-intro .circle_bg { z-index: 6; position: absolute; top: 0; left: -5vw; width: 100vw; height: 100vh; background: var(--accent-color); clip-path: circle(0% at 50% 50%); overflow: hidden; }
.main-intro .circle_bg .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-intro .circle_bg .circle span { opacity: 0; width: 100%; height: 100%; border-radius: 999px; animation: circle_move 7s infinite linear; }
.main-intro .circle_bg .circle_1 { width: clamp(55vh, 45vw, 45vw); height: clamp(55vh, 45vw, 45vw); z-index: 4; }
.main-intro .circle_bg .circle_1 span { animation-delay: 0.1s; background: #D85E1F; }
.main-intro .circle_bg .circle_2 { width: clamp(70vh, 65vw, 65vw); height: clamp(70vh, 65vw, 65vw); z-index: 3; }
.main-intro .circle_bg .circle_2 span { animation-delay: 0.2s; background: #E36321; }
.main-intro .circle_bg .circle_3 { width: clamp(85vh, 85vw, 85vw); height: clamp(85vh, 85vw, 85vw); z-index: 2; }
.main-intro .circle_bg .circle_3 span { animation-delay: 0.3s; background: #EF6823; }
.main-intro .circle_bg .text-wrap { z-index: 7; }
.main-intro .circle_bg .text-wrap.scene_1 .heading { display: flex; flex-direction: column; gap: 32px; }
.main-intro .circle_bg .text-wrap.scene_1 .accent span { font-size: 80px; line-height: 1; color: #fff; }
.main-intro .circle_bg .text-wrap.scene_1 .text { font-size: 24px; color: #fff; }
.main-intro .circle_bg .text-wrap.scene_2 { opacity: 0; }
.main-intro .circle_bg .text-wrap.scene_2 .heading span { color: rgba(255,255,255,0.2); }
@keyframes circle_move {
  0% { transform: scale(0.6); }
  50% { opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
@media screen and (min-width: 1024px) and (max-height: 850px) {
  .main-intro .motion .group { width: auto; max-height: 80vh; }
}
@media screen and (max-width: 1240px) {
  .main-intro .text-wrap .heading { font-size: 30px; max-height: 45px; }
}
@media screen and (max-width: 1024px) {
  .main-intro .motion .title-wrap p span { height: 41px; padding: 5px 20px; font-size: 16px; }
  .main-intro .motion .arrow-wrap span { margin-top: -3%; }
}
@media screen and (max-width: 767px) {
  .main-intro { height: 600vh; padding: 60px 0; }
  .main-intro .motion .group { width: 90%; }
  .main-intro .motion .title-wrap p span { height: 31px; padding: 5px 10px; font-size: 12px; }
  .main-intro .motion .arrow-wrap span { margin-top: -5vw; }
  .main-intro .text-wrap .heading { font-size: 16px; max-height: 28px; padding: 0 10px; max-width: 75%; }
  .main-intro .motion .title-wrap p:last-child { right: 82%; }
  .main-intro .motion .title-wrap p:nth-child(2) { left: 85%; }
  .main-intro .circle_bg .text-wrap.scene_1 .accent span { font-size: 24px; }
  .main-intro .circle_bg .text-wrap.scene_1 .text { font-size: 14px; }
}

/* main-view — 핀 3열 호버 확장 */
.main-view { overflow: hidden; }
.main-view .flex-box article { position: relative; min-height: 48.8vw; flex: 1; transition: flex 0.5s; }
.main-view .flex-box article .bg { position: absolute; top: 0; left: 0; background: url(/assets/img/main-view-bg1.svg) no-repeat center/cover; width: 100%; height: 100%; }
.main-view .flex-box article .bg::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%); }
.main-view .flex-box article .text-boxs,
.main-view .flex-box article .link-boxs { position: absolute; bottom: 0; left: 0; width: 100%; height: 433px; display: flex; flex-direction: column; color: #fff; }
.main-view .flex-box article .text-boxs { padding: 20px 10.4% 10%; }
.main-view .flex-box article .text-boxs .title {
  padding: 5px 24px; height: 51px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); border-radius: 35px;
  width: fit-content; margin-bottom: 20px; font-size: 16px; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}
.main-view .flex-box article .text-boxs .sbj { line-height: normal; margin-bottom: 40px; }
.main-view .flex-box article .text-boxs .desc { font-size: 20px; }
.main-view .flex-box article .link-boxs { padding: 20px 6.5% 10%; opacity: 0; visibility: hidden; }
.main-view .flex-box article .link-boxs .sbj { position: relative; margin-bottom: 40px; }
.main-view .flex-box article .link-boxs .sbj .mask {
  position: absolute; left: 10.3%; bottom: 16px; font-size: 120px; color: rgba(255,255,255,0.2);
  line-height: normal; letter-spacing: -3px; white-space: nowrap;
}
.main-view .flex-box article .link-boxs .desc { margin-bottom: 60px; }
.main-view .flex-box article .link-boxs .view { display: flex; align-items: center; width: fit-content; }
.main-view .flex-box article:nth-child(2) .bg { background-image: url(/assets/img/main-view-bg2.svg); }
.main-view .flex-box article:nth-child(3) .bg { background-image: url(/assets/img/main-view-bg3.svg); }
@media (hover: hover) and (pointer: fine) {
  .main-view .flex-box article:hover { flex: 9; }
  .main-view .flex-box article:hover .text-boxs { opacity: 0; visibility: hidden; transition: 0.3s; }
  .main-view .flex-box article:hover .link-boxs { opacity: 1; visibility: visible; transition: 0.3s; }
}
@media screen and (max-width: 1240px) {
  .main-view .flex-box article .text-boxs, .main-view .flex-box article .link-boxs { height: 363px; }
  .main-view .flex-box article .link-boxs .sbj .mask { bottom: 10px; font-size: 80px; }
}
@media screen and (max-width: 1024px) {
  .main-view .flex-box { flex-direction: column; }
  .main-view .flex-box article .text-boxs { display: none; }
  .main-view .flex-box article .link-boxs { opacity: 1; visibility: visible; position: static; height: auto; padding-block: 90px; padding-inline: 5%; }
  .main-view .flex-box article .link-boxs .sbj { margin-bottom: 20px; }
  .main-view .flex-box article .link-boxs .sbj .mask { font-size: 50px; bottom: 5px; }
  .main-view .flex-box article .link-boxs .desc { margin-bottom: 30px; }
}

/* main-group news — 공지/PR 스와이퍼 */
.main-group { padding: 160px 0; background: var(--bg-sub-color); }
.main-group.news { overflow: hidden; }
.main-group.news .inner { display: flex; flex-direction: column; gap: 80px; }
.main-group.news .content-body { display: flex; flex-direction: column; gap: 80px; }
.main-group.news .content-body article { display: flex; flex-direction: column; gap: 40px; }
.main-group.news .content-body article h4 { font-size: 32px; }
.main-group.news .content-body article .swiper { width: 100%; overflow: visible; }
.main-group.news .content-body article.notice li { padding: 40px 32px; background: #fff; border: 1px solid #DDDDDD; border-radius: 10px; }
.main-group.news .content-body article.notice li a { display: flex; flex-direction: column; gap: 32px; }
.main-group.news .content-body article.notice li .list_title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  height: calc(1.4em * 2); font-weight: 700; font-size: 20px; line-height: 1.4;
}
.main-group.news .content-body article li .list_date { font-size: 16px; line-height: 1.4; color: #666666; }
.main-group.news .content-body article .list_bottom { display: flex; align-items: center; gap: 40px; }
.main-group.news .content-body article .list_bottom .progress_bar { flex: 1 0 0; width: 100%; height: 1px; background: #ddd; }
.main-group.news .content-body article .list_bottom .progress_bar .progress_bar_inner { width: 100%; height: 1px; background: var(--accent-color); transform-origin: left center; transition: 0.2s linear; }
.main-group.news .content-body article .list_bottom .list_handle_wrap { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.main-group.news .content-body article .list_bottom .list_handle_wrap button {
  width: 60px; height: 60px; border-radius: 999px;
  background: url(/assets/img/swiper-arrow.svg) no-repeat center/auto 100%;
}
.main-group.news .content-body article .list_bottom .list_handle_wrap button.swiper-button-disabled { opacity: 0.3; }
.main-group.news .content-body article .list_bottom .list_handle_wrap button.prev_btn { transform: scaleX(-1); }
.main-group.news .content-body article.pr a { display: flex; flex-direction: column; gap: 32px; }
.main-group.news .content-body article.pr .thumbnail { aspect-ratio: 390/280; }
.main-group.news .content-body article.pr .thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.main-group.news .content-body article.pr .category { font-size: 16px; line-height: 1.4; color: var(--accent-color); }
.main-group.news .content-body article.pr .list_title {
  margin-top: 18px; margin-bottom: 12px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  height: calc(1.4em * 2); font-weight: 700; font-size: 20px; line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .main-group { padding: 60px 0; }
  .main-group.news .inner { gap: 20px; }
  .main-group.news .content-body { gap: 40px; }
  .main-group.news .content-body article { gap: 20px; }
  .main-group.news .content-body article.notice li { padding: 20px 16px; }
  .main-group.news .content-body article.notice li .list_title { font-size: 16px; }
  .main-group.news .content-body article.notice li a { gap: 16px; }
  .main-group.news .content-body article li .list_date { font-size: 14px; }
  .main-group.news .content-body article .list_bottom .list_handle_wrap button { width: 36px; height: 36px; }
  .main-group.news .content-body article .list_bottom { gap: 20px; }
  .main-group.news .content-body article.pr a { gap: 16px; }
  .main-group.news .content-body article.pr .list_title { font-size: 16px; margin-top: 10px; }
  .main-group.news .content-body article.pr .category { font-size: 14px; }
}

/* main-partners — 로고 마퀴 */
.main-partners { background: #fff; padding: 160px 0 130px; overflow: hidden; }
.main-partners .heading { margin-bottom: 56px; }
.main-partners .rolling-wrapper { overflow: hidden; }
.main-partners .rolling-wrapper + .rolling-wrapper { margin-top: 20px; }
.main-partners .rolling-wrapper:last-of-type { margin-top: 70px; }
.main-partners .list { display: flex; gap: 20px; width: max-content; }
.main-partners .list li { flex: 0 0 auto; }
.main-partners .list li img { display: block; width: 260px; }
.main-partners .rolling-wrapper:nth-of-type(1) .list { animation: rolling 20s linear infinite; }
.main-partners .rolling-wrapper:nth-of-type(2) .list { animation: rolling 20s linear infinite reverse; }
.main-partners .rolling-wrapper:nth-of-type(3) .list { animation: rolling 20s linear infinite; }
.main-partners .rolling-wrapper2 { overflow: hidden; margin-top: 50px; }
.main-partners .rolling-wrapper2 .list2 { display: flex; justify-content: flex-end; }
.main-partners .rolling-wrapper2 .list2 li { text-align: right; flex: 0 0 auto; }
.main-partners .rolling-wrapper2 .text { font-size: 110px; font-weight: bold; white-space: nowrap; }
@keyframes rolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media screen and (max-width: 1024px) {
  .main-partners .list li img { width: 240px; }
  .main-partners .rolling-wrapper2 { margin-top: 20px; }
  .main-partners .rolling-wrapper2 .text { font-size: 50px; }
}
@media screen and (max-width: 767px) {
  .main-partners { padding: 60px 0 100px; }
  .main-partners .heading { margin-bottom: 30px; }
  .main-partners .list { gap: 10px; }
  .main-partners .list li img { width: 140px; }
  .main-partners .rolling-wrapper2 .text { font-size: 24px; }
}