/* Main 콘텐츠 관련 CSS 작성 */
:root {
  --main-btn-circle-h: 44px;
  --main-btn-circle-fs: var(--text-22);
  --main-btn-circle-icon-rotate: 0deg;
}

/* 메인 원형 버튼(화살표·플러스·탭·더보기) 공통 높이 */
.main-coretech-cardlist > .item .arrow,
.main-service-cardlist > .item .action-plus,
.main-workwithus-cardlist .item .bottom .arrow-wrap,
.main-sec-archive .go-link {
  box-sizing: border-box;
  height: var(--main-btn-circle-h);
  aspect-ratio: 1 / 1;
  font-size: var(--main-btn-circle-fs);
}

/* 원형 버튼 내 화살표 아이콘 회전 (1024px 이하에서 --main-btn-circle-icon-rotate 적용) */
.main-coretech-cardlist > .item .arrow .ri-arrow-right-line,
.main-workwithus-cardlist .item .bottom .arrow-wrap .ri-arrow-right-line,
.main-sec-archive .go-link .ri-arrow-right-line,
.main-service-cardlist > .item .go-link .ri-arrow-right-line {
  rotate: var(--main-btn-circle-icon-rotate);
  transition: rotate .3s;
}

.main-sec { position: relative; z-index: 3; overflow: hidden; background: #FFFFFF; }
.main-sec > .container { position: relative; z-index: 1; }
.main-sec-inner { display: flex; align-items: center; justify-content: center; flex-direction: column; }

.main-sec-tit-wrap { margin-bottom: 64px; line-height: normal; }
.main-sec-tit-wrap .main-sec-tit { font-size: 56px; text-transform: uppercase; }
.main-sec-tit-wrap .main-sec-desc { font-weight: 500; margin-top: 24px; }

/* ========== main-sec-visual - 메인비주얼 { ========== */
/* 영구 fixed → about이 완전히 덮으면 .is-covered 로 숨김 (HTML 래퍼 불필요) */
.main-sec-visual { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; overflow: hidden; background: #000; transition: opacity .35s ease, visibility .35s ease; }
.main-sec-visual.is-covered { opacity: 0; visibility: hidden; pointer-events: none; }
.main-visual-swiper, .main-visual-swiper .swiper-wrapper, .main-visual-swiper .swiper-slide { width: 100%; height: 100%; }
.main-visual-swiper .swiper-slide { background: #000; }
.main-visual-swiper video { display: block; width: 100%; height: 100%; object-fit: cover; }
.main-swiper-hero-txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mv-tit { margin-bottom: 2vh; display: flex;align-items: center; justify-content: center; }
.mv-tit svg { width: 100%; max-width: 758px; aspect-ratio: 758/83; height: auto; }
.mv-desc-1 { font-size: var(--text-30); font-weight: 700; color: var(--color-point-mint); margin-bottom: 6vh; }
.mv-desc-2 { font-size: var(--text-25); font-weight: 600; color: var(--color-white); text-align: center; }
.main-visual-swiper-control { border-radius: 0 8px 0 0; background: var(--color-white); position: absolute; bottom: 0; left: 0; height: 80px; z-index: 10; padding: 10px 60px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--text-30); }
.main-sec-visual.is-single-slide .main-visual-swiper-control { display: none; }
.main-visual-swiper-control .btn-slide:hover { color: var(--color-main-light); }
.main-visual-swiper-control .pagination { display: flex; align-items: center; justify-content: center; gap: 30px; }
.main-visual-swiper-control .pagination .num { position: relative; text-align: center; width: 45px; font-size: 30px; line-height: normal; }
.main-visual-swiper-control .pagination .num.total::before { content: ''; position: absolute; height: 1px; width: 20px; background: var(--color-black); top: 50%; right: calc(100% + 5px); }
.icon-scroll-down-wrap { position: absolute; z-index: 10; bottom: 40px; left: 50%; transform: translateX(-50%); }
.icon-scroll-down { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.icon-scroll-down .icon-wrap { width: 34px; height: 44px; border-radius: 99px; border: 1px solid var(--color-white); color: var(--color-white); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; }
.icon-scroll-down .icon-wrap > i { font-size: 22px; }
.icon-scroll-down .txt { font-size: 14px; }
.icon-scroll-down .icon-wrap .ri-arrow-down-line { display: inline-flex; will-change: transform, opacity; }
/* ========== } main-sec-visual - 메인비주얼 ========== */

/* ========== main-sec-about - 국가바이오파운드리 소개 { ========== */
/* fixed 비주얼은 flow에서 빠지므로 100vh 여백으로 자리 확보 */
.main-sec-about { position: relative; z-index: 3; margin-top: 100vh; background: #FFFFFF; }
.main-sec-about .main-sec-inner { padding: 90px 0; }
.main-sec-about .txt { margin-bottom: 116px; }
.main-sec-about .main-sec-about-tit { font-size: 40px; font-weight: 800; color: var(--color-main); margin-bottom: 18px; }
.main-sec-about .main-sec-about-desc-1 { font-size: var(--text-25); font-weight: 600; margin-bottom: 100px; }
.main-sec-about .main-sec-about-desc-2 { font-size: var(--text-20); font-weight: 500; color: #797979; }
.main-sec-about .go-link { overflow: visible; transition: background-color .3s, color .3s, border-color .3s; }
.main-sec-about .go-link:hover i { rotate: -45deg; }
/* ========== } main-sec-about - 국가바이오파운드리 소개 ========== */

/* ========== main-sec-workflow - WORKFLOW { ========== */
/* z-index로 아래 미리 깔린 데코를 가림 → 스크롤되며 커튼처럼 드러남 */
.main-sec-workflow { position: relative; z-index: 2; background: url('../img/main-section3-bg.jpg') no-repeat center / cover; color: var(--color-white); }
.main-sec-workflow .main-sec-inner { padding: 120px 0; }
.main-sec-workflow .workflow-visual { position: relative; width: 100%; --workflow-visual-h : 590px; height: var(--workflow-visual-h); border-radius: 8px; }
.main-sec-workflow .workflow-cycle {
  --wf-title-ring: 75; /* 글자 원 직경 = cycle 대비 % */
  --wf-title-fs: 4.5; /* 글자 크기 = cycle 직경 대비 % */
  --wf-inner-spin: 22s; /* inner 화살표 1회전 */
  --wf-outer-spin: 18s; /* 점선 삼각 1회전 — 살짝 엇박자 */
  --wf-outer-arrow-w: 24px; --wf-outer-arrow-h: 20px; /* 점선 삼각형 크기 */
  aspect-ratio: 1/1; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255, 255, 255, 0.5); border-radius: 50%; container-type: size; 
}
/* 점선 원 위 삼각형: arrow와 동일 — 레이어는 rotate만, 화살촉은 정적 transform(접선 방향) */
.main-sec-workflow .workflow-cycle-outer { position: absolute; inset: 0; z-index: 12; pointer-events: none; container-type: size; animation: wf-cycle-spin-outer var(--wf-outer-spin) linear infinite; }
.main-sec-workflow .workflow-cycle-outer::before {  content: ''; position: absolute; left: 50%; top: 50%; z-index: 12; pointer-events: none; width: 0; height: 0; background: none; border-style: solid; border-width: 0 calc(var(--wf-outer-arrow-w) / 2) var(--wf-outer-arrow-h) calc(var(--wf-outer-arrow-w) / 2); border-color: transparent transparent #fff transparent;
  /* 중심 → 원 가장자리 → 진행 방향(접선)으로 팁 정렬. cqh는 keyframes 밖이라 리사이즈에 안전 */
  transform: translate(-50%, -50%) rotate(270deg) translateY(-50cqh) rotate(90deg);
}
.main-sec-workflow .workflow-cycle-titles { position: absolute; left: 50%; top: 50%; width: calc(var(--wf-title-ring) * 1%); height: calc(var(--wf-title-ring) * 1%); transform: translate(-50%, -50%); pointer-events: none; overflow: visible; z-index: 5; }
.main-sec-workflow .workflow-cycle-title { 
  font-family: 'Pretendard', sans-serif; 
  /* viewBox 스케일 보정 → 화면상 cycle 직경의 --wf-title-fs % */
  font-size: calc(var(--wf-title-fs) * 100 / var(--wf-title-ring) * 1px); font-weight: 700; letter-spacing: 0.08em; 
}
.main-sec-workflow .workflow-cycle-title.is-design { fill: var(--color-point-yellow); }
.main-sec-workflow .workflow-cycle-title.is-build { fill: var(--color-main-light); }
.main-sec-workflow .workflow-cycle-title.is-test { fill: var(--color-point-salmon); }
.main-sec-workflow .workflow-cycle-title.is-learn { fill: var(--color-point-mint); }
.main-sec-workflow .workflow-cycle-arrow { 
  --wf-arrow-bw: 10px; --wf-arrow-color: #fff; --wf-arrow-head-w: 30px; --wf-arrow-head-h: 20px; --wf-gap: 22deg; --wf-gap-start: 259deg; 
  /* 시계방향 스트로크가 끝나는 잘린 끝 (= 화살촉 위치) */
  position: absolute; inset: 0; z-index: 12; pointer-events: none; width: calc(60% + (var(--wf-arrow-bw) * 2)); height: calc(60% + (var(--wf-arrow-bw) * 2)); margin: auto; 
  /* inner-circle과 동일 중심 */
  container-type: size; animation: wf-cycle-spin-inner var(--wf-inner-spin) linear infinite; 
}
.main-sec-workflow .workflow-cycle-arrow::before { content: ''; position: absolute; z-index: 12; inset: 0; border-radius: 50%; box-sizing: border-box; border: var(--wf-arrow-bw) solid var(--wf-arrow-color); background: transparent; -webkit-mask: conic-gradient(from var(--wf-gap-start), transparent 0deg var(--wf-gap), #000 calc(var(--wf-gap) + 0.5deg) 360deg); mask: conic-gradient(from var(--wf-gap-start), transparent 0deg var(--wf-gap), #000 calc(var(--wf-gap) + 0.5deg) 360deg); }
.main-sec-workflow .workflow-cycle-arrow::after { content: ''; position: absolute; z-index: 12; left: 50%; top: 50%; width: 0; height: 0; background: none; border-style: solid; border-width: 0 calc(var(--wf-arrow-head-w) / 2) var(--wf-arrow-head-h) calc(var(--wf-arrow-head-w) / 2); border-color: transparent transparent var(--wf-arrow-color) transparent; transform: translate(-50%, -50%) rotate(var(--wf-gap-start)) translateY(calc(-50cqh + var(--wf-arrow-bw) / 2)) rotate(90deg); }
.main-sec-workflow .workflow-cycle .inner-circle { aspect-ratio: 1/1; height: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, 0.5); border-radius: 50%; position: relative; z-index: 3; }
.main-sec-workflow .workflow-cycle strong.dbtl { font-size: 60px; font-weight: 700; line-height: normal; }
.main-sec-workflow .workflow-cycle span.cycle { font-size: 40px; line-height: normal; }
@keyframes wf-cycle-spin-inner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes wf-cycle-spin-outer {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion:reduce) {
  .main-sec-workflow .workflow-cycle-outer, .main-sec-workflow .workflow-cycle-arrow { animation: none; }
}
.main-sec-workflow .workflow-steps { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.main-sec-workflow .workflow-step { position: absolute; width: 50%; height: 50%; }
.main-sec-workflow .workflow-items { display: flex; align-items: stretch; justify-content: center; height: 100%; padding: 56px 50px; --workflow-items-gap: 26px; gap: var(--workflow-items-gap); width: 100%; }
.main-sec-workflow .workflow-card { width: calc((100% - var(--workflow-items-gap)) / 2); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; background: rgba(255, 255, 255, 0.15); display: flex; flex-direction: column; align-content: center; justify-content: center; padding: 10px; }
.main-sec-workflow .workflow-card img { height: 70px; width: auto; margin-bottom: 20px; }
.main-sec-workflow .workflow-card p { text-align: center; min-height: 2lh; }
.main-sec-workflow .workflow-step-design { background: rgba(255, 241, 0, .12); border-radius: 8px 0 0 0; top: 0; left: 0; padding-right: calc(var(--workflow-visual-h) / 2) }
.main-sec-workflow .workflow-step-design .workflow-card { width: 70%; }
.main-sec-workflow .workflow-step-design .workflow-card img { height: 80px; margin-bottom: 10px; }
.main-sec-workflow .workflow-step-build { background: rgba(142, 104, 255, .12); border-radius: 0 8px 0 0; top: 0; right: 0; padding-left: calc(var(--workflow-visual-h) / 2) }
.main-sec-workflow .workflow-step-test { background: rgba(235, 97, 75, .12); border-radius: 0 0 8px 0; bottom: 0; right: 0; padding-left: calc(var(--workflow-visual-h) / 2) }
.main-sec-workflow .workflow-step-learn { background: rgba(117, 255, 232, .15); border-radius: 0 0 0 8px; bottom: 0; left: 0; padding-right: calc(var(--workflow-visual-h) / 2) }
/* ========== } main-sec-workflow - WORKFLOW ========== */

/* ========== main-sec-coretech·main-sec-service - 핵심기술 / Service { ========== */
/* 본문은 순차 위치 유지. 데코만 fixed(flow 밖) — margin 음수로 본문 끌어올리지 않음 */
.main-sec-coretech-service { position: relative; z-index: 1; padding: 80px 0; background: #FFFFFF; }
.main-sec-coretech-service-deco { --main-deco-y-from: 300px; --main-deco-y-to: -300px; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.main-sec-coretech-service-deco.is-active { opacity: 1; visibility: visible; }
.main-sec-coretech-service-deco::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.main-sec-coretech-service-deco .deco-1 { position: absolute; top: 40px; left: -15px; aspect-ratio: 214/321; width: 214px; background: url('../img/main-section4-deco1.svg') no-repeat center / contain; will-change: transform; }
.main-sec-coretech-service-deco .deco-2 { position: absolute; bottom: 0; right: 0; aspect-ratio: 334/439; width: 334px; background: url('../img/main-section4-deco2.svg') no-repeat center / contain; will-change: transform; }
.main-sec-coretech, .main-sec-service { background: transparent; }
.main-sec-coretech-inner, .main-sec-service-inner { position: relative; z-index: 1; }

/* ===== main-sec-coretech - 핵심기술 { ===== */
.main-sec-coretech .main-sec-inner { padding: 80px 0; }
.main-coretech-cardlist { height: 324px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }
.main-coretech-cardlist > .item { position: relative; }
.main-coretech-cardlist > .item::before { content: ''; position: absolute; aspect-ratio: 1/1; width: 80px; bottom: 25px; right: 25px; z-index: 0; }
.main-coretech-cardlist > .item01 { background: #EFF2FF; }
.main-coretech-cardlist > .item01::before { background: url('../img/main-section4-card-icon01.svg') no-repeat center / contain; }
.main-coretech-cardlist > .item02 { background: #D4E3FF; }
.main-coretech-cardlist > .item02::before { background: url('../img/main-section4-card-icon02.svg') no-repeat center / contain; }
.main-coretech-cardlist > .item03 { background: #EEEEEE; }
.main-coretech-cardlist > .item03::before { background: url('../img/main-section4-card-icon03.svg') no-repeat center / contain; }
.main-coretech-cardlist > .item04 { background: #D4D5FF; }
.main-coretech-cardlist > .item04::before { background: url('../img/main-section4-card-icon04.svg') no-repeat center / contain; }
.main-coretech-cardlist > .item > a { position: relative; z-index: 1; height: 100%; padding: 40px 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.main-coretech-cardlist > .item .tit { min-height: 2lh; margin-bottom: 38px; line-height: normal; }
.main-coretech-cardlist > .item > a:hover .tit { text-decoration: underline; }
.main-coretech-cardlist > .item .desc { line-height: normal; }
.main-coretech-cardlist > .item .arrow { background: white; }
.main-coretech-cardlist > .item > a:hover .arrow { background: var(--color-main); color: var(--color-white); rotate: -45deg; }
/* ===== } main-sec-coretech - 핵심기술 ===== */

/* ===== main-sec-service - Service { ===== */
.main-sec-service .main-sec-inner { padding: 80px 0; }
.main-service-cardlist { --svc-card-d: 0.3s; width: 100%; display: flex; align-items: stretch; justify-content: flex-start; gap: 20px; height: 390px; }
.main-service-cardlist > .item { position: relative; flex: 1 1 0%; overflow: hidden; transition: flex-grow var(--svc-card-d) ease, flex-basis var(--svc-card-d) ease; }
.main-service-cardlist > .item .item-inner { position: absolute; inset: 0; overflow: hidden; }
.main-service-cardlist > .item .item-inner::before { content: ''; pointer-events: none; position: absolute; z-index: 0; background: var(--color-black); opacity: 0.6; width: 100%; height: 100%; left: 0; top: 0; transition: opacity var(--svc-card-d) ease; }
.main-service-cardlist > .item01 .item-inner { background: url('../img/main-section5-card-bg1.jpg') no-repeat center / cover; }
.main-service-cardlist > .item02 .item-inner { background: url('../img/main-section5-card-bg2.jpg') no-repeat center / cover; }
.main-service-cardlist > .item03 .item-inner { background: url('../img/main-section5-card-bg3.jpg') no-repeat center / cover; }
.main-service-cardlist > .item04 .item-inner { background: url('../img/main-section5-card-bg4.jpg') no-repeat center / cover; }
.main-service-cardlist > .item .tit { position: absolute; z-index: 1; top: 0; left: 70px; width: 390px; transform: rotate(90deg) translateY(-50%); transform-origin: top left; text-align: center; color: var(--color-white); font-size: var(--text-20); opacity: 0.5; transition: top var(--svc-card-d) ease, left var(--svc-card-d) ease, width var(--svc-card-d) ease, height var(--svc-card-d) ease, transform var(--svc-card-d) ease, font-size var(--svc-card-d) ease, opacity var(--svc-card-d) ease; white-space: nowrap; }
.main-service-cardlist > .item .go-link { position: absolute; z-index: 2; left: 65px; bottom: 70px; height: 55px; padding: 0 20px; gap: 8px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--svc-card-d) ease, transform var(--svc-card-d) ease; }
.main-service-cardlist > .item .go-link i { font-size: var(--text-24); }
.main-service-cardlist > .item .action-plus { position: absolute; z-index: 2; right: 24px; bottom: 30px; border-radius: 999px; background: var(--color-black); color: var(--color-white); display: flex; align-items: center; justify-content: center; opacity: 1; transform: translateY(0); pointer-events: none; transition: opacity var(--svc-card-d) ease, transform var(--svc-card-d) ease; }
.main-service-cardlist > .item.active { flex: 1 1 50%; }
.main-service-cardlist > .item.active .item-inner::before { opacity: 0.3; }
.main-service-cardlist > .item.active .tit { top: 100px; left: 65px; width: auto; height: auto; transform: rotate(0deg); text-align: left; white-space: normal; font-size: var(--text-30); opacity: 1; }
.main-service-cardlist > .item.active .go-link { opacity: 1; transform: translateY(0); pointer-events: auto; }
.main-service-cardlist > .item.active .go-link:hover  i { rotate: -45deg; }
.main-service-cardlist > .item.active .action-plus { opacity: 0; transform: translateY(12px); }
/* ===== } main-sec-service - Service ===== */
/* ========== } main-sec-coretech·main-sec-service ========== */

/* ========== main-sec-workwithus - WORK WITH US { ========== */
.main-sec-workwithus { position: relative; z-index: 3; background: radial-gradient(91.62% 143.22% at 18.56% 76.93%, #83CCD2 0%, #809DBD 24%, #7F77AD 46%, #7D5CA1 67%, #7D4B9A 86%, #7D4698 100%); }
.main-sec-workwithus::after { content: ''; position: absolute; aspect-ratio: 214/26; width: 214px; background: url('../img/main-workwithus-deco.svg') no-repeat center / contain; bottom: 50px; right: 25px; }
.main-sec-workwithus .main-sec-inner { padding: 90px 0 110px; }
.main-workwithus-cardlist { height: 390px; width: 100%; display: flex; align-items: stretch; justify-content: center; gap: 24px; }
.main-workwithus-cardlist .item { flex: 1 1 0; }
.main-workwithus-cardlist .item > a { height: 100%; padding: 54px 50px 34px; background: var(--color-white); border-radius: 30px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; line-height: normal; }
.main-workwithus-cardlist .item .tit { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.main-workwithus-cardlist .item .bottom .desc { color: #666666; }
.main-workwithus-cardlist .item .bottom .arrow-wrap { margin-left: auto; margin-top: 44px; background: var(--color-black); color: var(--color-white); }
.main-workwithus-cardlist .item > a:hover .bottom .arrow-wrap { rotate: -45deg; background: var(--color-main); }
.main-workwithus-cardlist .item > a:hover .tit .kor, .main-workwithus-cardlist .item > a:hover .bottom .desc { text-decoration: underline; }
/* ========== } main-sec-workwithus - WORK WITH US ========== */

/* ========== main-sec-archive - 공지사항/새소식 { ========== */
/* 시안 기준 1600: 공지 700 + gap 100 + 새소식 800 → flex 비율 700:800, gap 6.25%(min 24px) */
.main-sec-archive { --main-archive-gap: max(24px, 6.25%); position: relative; z-index: 3; }
.main-sec-archive .main-sec-inner { padding: 150px 0; align-items: stretch; flex-direction: row; gap: var(--main-archive-gap); }
.main-sec-archive-item { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; }
.main-sec-archive-item.notice { flex: 700 1 0; }
.main-sec-archive-item.news { flex: 800 1 0; }
.main-sec-archive-tit-wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 40px; min-width: 0; }
.main-sec-archive-tit-wrap .txt { min-width: 0; flex: 1 1 auto; }
.main-sec-archive-tit-wrap .main-sec-tit { font-size: 43px; line-height: 1.2; }
.main-sec-archive-tit-wrap .main-sec-desc { margin-top: 12px; font-size: var(--text-base); font-weight: 500; color: #777777; }
.main-sec-archive .go-link { flex-shrink: 0; padding: 0; background: var(--color-black); color: var(--color-white); }
.main-sec-archive .go-link:hover { background: var(--color-main); transform: rotate(-45deg); }

/* ===== 공지사항 { ===== */
.main-sec-archive-item.notice .recent { margin-bottom: 25px; min-width: 0; }
.main-sec-archive-item.notice .recent > a { display: flex; align-items: center; gap: 24px; min-width: 0; width: 100%; }
.main-sec-archive-item.notice .recent time { padding: 8px 18px; flex-shrink: 0; box-sizing: border-box; border: 5px solid #D3D3D3; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.main-sec-archive-item.notice .recent time span.date-d { }
.main-sec-archive-item.notice .recent time span.date-ym { color: #767676; }
.main-sec-archive-item.notice .recent strong { flex: 1 1 0; min-width: 0; display: block; font-size: var(--text-20); font-weight: 700; line-height: 1.4; text-decoration: underline; text-underline-offset: 4px; transition: .2s; }
.main-sec-archive-item.notice .recent > a:hover strong { color: var(--color-main-light); }
.main-sec-archive-item.notice .list-bullet-01 { min-width: 0; }
.main-sec-archive-item.notice .list-bullet-01 > li { min-width: 0; }
.main-sec-archive-item.notice .list-bullet-01 > li + li { margin-top: 14px; }
.main-sec-archive-item.notice .list-bullet-01 > li > article { min-width: 0; }
.main-sec-archive-item.notice .list-bullet-01 > li > article > a { display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; }
.main-sec-archive-item.notice .list-bullet-01 > li > article > a > strong { flex: 1 1 0; min-width: 0; display: block; font-weight: 500; line-height: 1.5; transition: .2s; }
.main-sec-archive-item.notice .list-bullet-01 > li > article > a > time { flex-shrink: 0; font-size: var(--text-16); font-weight: 500; color: #888888; white-space: nowrap; }
.main-sec-archive-item.notice .list-bullet-01 > li > article > a:hover > strong { text-decoration: underline; color: var(--color-main-light); }
/* ===== } 공지사항 ===== */

/* ===== News { ===== */
/* 메인 새소식 탭(.main-news-tab): 탭 버튼 비주얼은 .tab-typeB 공유, 여기는 헤더 유틸 레이아웃만 */
.main-news-tab-util { display: flex; align-items: center; flex-shrink: 0; gap: 24px; }
.main-news-tab-nav { width: auto; }
.main-news-tab-list.tab-typeB { margin: 0; width: auto; justify-content: flex-start; }
.main-news-tab-list { gap: 16px; }
.main-news-tab-list .tab-btn { box-sizing: border-box; height: var(--main-btn-circle-h); padding: 5px 24px; font-size: var(--text-20); font-weight: 500; }
.main-news-tab-list .tab-btn.active { font-weight: 600; }
.main-news-tab-content { min-width: 0; }
.main-news-tab-content .gallery-typeB { --gallery-typeB-cols: 2; --gallery-typeB-gap-vertical: 40px; }
.main-news-tab-content .gallery-typeB > .item,
.main-news-tab-content .gallery-typeB > .item > article,
.main-news-tab-content .gallery-typeB > .item > article > a,
.main-news-tab-content .gallery-typeB > .item .post-txt { min-width: 0; }
.main-news-tab-content .gallery-typeB > .item .post-tit { display: block; width: 100%; min-width: 0; }
/* ===== } News ===== */
/* ========== } main-sec-archive - 공지사항/새소식 ========== */

/* ========== main-sec-partners - 연관기관 { ========== */
.main-sec-partners { background: url('../img/main-sec-partners-bg.jpg') no-repeat center / cover; }
.main-sec-partners .main-sec-inner { padding: 100px 0 200px; }
.main-partners-list { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; width: 100%; }
.main-partners-list > .item { height: 65px; width: calc(100% / 6); }
.main-partners-list > .item > a { display: block; width: 100%; height: 100%; }
.main-partners-list > .item > a > img { display: block; width: 100%; height: 100%; object-fit: contain; transition: .3s; }
.main-partners-list > .item > a:hover > img { scale: 1.1; }
/* ========== } main-sec-partners - 연관기관 ========== */

/* ====================  반응형 ==================== */
@media screen and (max-width:1920px) {
  .main-coretech-cardlist > .item > a { padding: 40px 20px; }
  .main-coretech-cardlist > .item .desc { letter-spacing: -7%; }
}
@media screen and (max-width:1600px) {
  .main-sec-tit-wrap { margin-bottom: 56px; }
  .main-sec-tit-wrap .main-sec-tit { font-size: 48px; }
  .main-sec-about .main-sec-about-desc-1 { margin-bottom: 50px; }
  .main-sec-about .txt { margin-bottom: 70px; }
  .main-sec-workflow .main-sec-inner { padding: 100px 0; }
  .main-sec-workflow .workflow-visual { --workflow-visual-h: 500px; }
  .main-sec-workflow .workflow-items { padding: 30px; }
  .main-sec-workflow .workflow-cycle strong.dbtl { font-size: 40px; }
  .main-sec-workflow .workflow-cycle span.cycle { font-size: 34px; }
  .main-sec-coretech-service { padding: 50px 0; }
  .main-coretech-cardlist > .item .desc { letter-spacing: -3%; }
  .main-sec-coretech .main-sec-inner { padding: 50px 0; }
  .main-sec-service .main-sec-inner { padding: 50px 0; }
  .main-workwithus-cardlist { height: 300px; }
  .main-workwithus-cardlist .item > a { padding: 30px; }
  .main-workwithus-cardlist .item .tit { gap: 20px; }
  .main-workwithus-cardlist .item .bottom .arrow-wrap { margin-top: 30px; }
  .main-sec-archive .main-sec-inner { padding: 100px 0; gap: 60px; }
  .main-sec-archive-tit-wrap { margin-bottom: 20px; }
  .main-sec-archive-tit-wrap .main-sec-tit { font-size: 38px; }
  .main-news-tab-util { gap: 18px; }
  .main-news-tab-list { gap: 10px; }
  .main-news-tab-content .gallery-typeB { --gallery-typeB-gap-vertical: 20px; }
  .main-sec-partners .main-sec-inner { padding: 100px 0 160px; }
}

@media screen and (max-width:1440px) {
  :root { --main-btn-circle-h: 38px; }
  .main-sec-tit-wrap .main-sec-tit { font-size: 44px; }
  .main-sec-about .main-sec-about-tit { font-size: 34px; }
  .icon-scroll-down .txt { font-size: 13px; }
  .main-coretech-cardlist > .item .desc br { display: none; }
  .main-sec-workflow .workflow-items { padding: 30px 20px; --workflow-items-gap: 16px; }
  .main-sec-workflow .workflow-card img { height: 60px; }
  .main-sec-workflow .workflow-step-design .workflow-card img { height: 70px; }
  .main-coretech-cardlist { height: 260px; }
  .main-coretech-cardlist > .item::before { bottom: 15px; right: 15px; width: 60px; }
  .main-coretech-cardlist > .item > a { padding: 30px 20px 20px; }
  .main-coretech-cardlist > .item .tit { margin-bottom: 24px; }
  .main-service-cardlist { height: 320px; gap: 16px }
  .main-service-cardlist > .item .tit { width: 320px; left: 60px; }
  .main-service-cardlist > .item .action-plus { bottom: 10px; right: 10px; }
  .main-service-cardlist > .item.active .tit { left: 40px; top: 60px; }
  .main-service-cardlist > .item.active .go-link { left: 40px; bottom: 50px; }
  .main-sec-workwithus::after { width: 180px; bottom: 40px; right: 20px; }
  .main-sec-workwithus .main-sec-inner { padding: 90px 0 100px; }
  .main-workwithus-cardlist { height: auto; }
  .main-workwithus-cardlist .item > a { gap: 30px; }
  .main-workwithus-cardlist .item .tit { gap: 16px; }
  .main-workwithus-cardlist .item .bottom .desc br { display: none; }
  .main-workwithus-cardlist .item .bottom .arrow-wrap { margin-top: 24px; }
  .main-sec-archive .main-sec-inner { gap: 50px; }
  .main-sec-archive-tit-wrap .main-sec-tit { font-size: 34px; }
  .main-sec-archive-item.notice .recent { margin-bottom: 16px; }
  .main-sec-archive-item.notice .list-bullet-01 > li + li { margin-top: 8px; }
  .main-news-tab-list { gap: 6px; }
  .main-news-tab-util { gap: 12px; }
  .main-news-tab-content .gallery-typeB { gap: 10px; }
  .gallery-typeB > .item > article > a { gap: 10px; }
}

@media screen and (max-width:1280px) {
  :root { --main-btn-circle-h: 36px; }
  .main-sec-tit-wrap { margin-bottom: 36px; }
  .main-sec-tit-wrap .main-sec-tit { font-size: 38px; }
  .main-sec-tit-wrap .main-sec-desc { margin-top: 16px; }
  .main-visual-swiper-control { padding: 15px 40px; height: auto; }
  .main-visual-swiper-control .pagination .num { font-size: 22px; }
  .main-visual-swiper-control .btn-slide { font-size: 34px; }
  .main-sec-about .main-sec-inner { padding: 70px 0; }
  .main-sec-about .txt { margin-bottom: 48px; }
  .main-sec-about .main-sec-about-tit { font-size: 30px; margin-bottom: 14px; }
  .main-sec-about .main-sec-about-desc-1 { margin-bottom: 32px; }
  .main-sec-workflow .main-sec-inner { padding: 70px 0; }
  .main-sec-workflow .workflow-visual { --workflow-visual-h: 400px; }
  .main-sec-workflow .workflow-items { padding: 18px 12px; --workflow-items-gap: 10px; }
  .main-sec-workflow .workflow-card img { margin-bottom: 10px; }
  .main-sec-workflow .workflow-step-design .workflow-card img { margin-bottom: 5px; }
  .main-sec-workflow .workflow-card p { line-height: normal; }
  .main-sec-coretech-service { padding: 35px 0; }
  .main-sec-coretech .main-sec-inner { padding: 35px 0; }
  .main-sec-service .main-sec-inner { padding: 35px 0; }
  .main-service-cardlist > .item .tit { left: 50px; }
  .main-coretech-cardlist { height: auto; }
  .main-coretech-cardlist > .item > a { gap: 30px; }
  .main-workwithus-cardlist { gap: 20px; }
  .main-workwithus-cardlist .item > a { border-radius: 15px; }
  .main-sec-archive .main-sec-inner { gap: 40px; }
  .main-sec-archive-tit-wrap .main-sec-tit { font-size: 32px; }
  .main-sec-archive-item.notice .recent > a { gap: 15px; }
}

@media screen and (max-width:1024px) { 
  :root {
    --main-btn-circle-h: 34px;
    --main-btn-circle-icon-rotate: -45deg;
  }
  .main-sec-tit-wrap .main-sec-tit { font-size: 32px; }
  .main-sec-tit-wrap { margin-bottom: 32px; }
  .icon-scroll-down-wrap { bottom: 120px; }
  .main-swiper-hero-txt  { padding: 0px 30px; }
  .mv-tit { margin-bottom: 18px; }
  .mv-desc-1 { font-size: 32px; margin-bottom: 50px; }
  .mv-desc-2 { font-size: 20px; }
  .main-visual-swiper-control { padding: 10px 20px; }
  .main-visual-swiper-control .pagination .num { width: 36px; font-size: 18px; }
  .main-visual-swiper-control .btn-slide { font-size: 32px; }
  .main-sec-about .main-sec-about-desc-1 br,
  .main-sec-about .main-sec-about-desc-2 br { display: none; }
  .main-sec-workflow .workflow-cycle { height: 60%;
    --wf-title-ring: 76; /* 글자 원 직경 = cycle 대비 % */
    --wf-title-fs: 5; /* 글자 크기 = cycle 직경 대비 % */
    --wf-outer-arrow-w: 12px; --wf-outer-arrow-h: 10px; /* 점선 삼각형 크기 */
  }
  .main-sec-workflow .workflow-cycle-arrow { --wf-arrow-bw: 4px; --wf-arrow-head-w: 15px; --wf-arrow-head-h: 12px; --wf-gap-start: 259deg; }
  .main-sec-workflow .workflow-cycle strong.dbtl { font-size: 32px; }
  .main-sec-workflow .workflow-cycle span.cycle { font-size: 26px; }
  .main-sec-workflow .workflow-visual { height: 400px; --workflow-visual-h: calc(400px * 0.5); }
  .main-sec-workflow .workflow-items { flex-direction: column; justify-content: flex-start; --workflow-items-gap: 5px; padding: 8px; }
  .main-sec-workflow .workflow-card { width: 100%; height: calc((100% - var(--workflow-items-gap)) / 2); flex-direction: row; justify-content: center; align-items: center; padding: 16px; gap: 20px; }
  .main-sec-workflow .workflow-card p { min-height: auto; }
  .main-sec-workflow .workflow-step-design .workflow-card { width: 100%; }
  .main-sec-workflow .workflow-card img { height: 100%; margin-bottom: 0; }
  .main-sec-workflow .workflow-step-design .workflow-card img { height: 100%; margin-bottom: 0; }
  .main-sec-coretech-service-deco { --main-deco-y-from: 200px; --main-deco-y-to: -200px; top: 13vh; height: 74vh; }
  .main-sec-coretech-service-deco .deco-1 { width: 160px; }
  .main-sec-coretech-service-deco .deco-2 { width: 220px; }
  .main-coretech-cardlist { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .main-coretech-cardlist > .item .tit { min-height: auto; }
  .main-coretech-cardlist > .item .tit br { display: none; }
  .main-coretech-cardlist > .item > a:hover .arrow { rotate: 0deg; }
  .main-service-cardlist { gap: 8px; }
  .main-service-cardlist > .item.active { flex: 1 1 45%; }
  .main-service-cardlist > .item .tit { font-size: 18px; left: 40%; }
  .main-service-cardlist > .item.active .tit { font-size: 25px; }
  .main-sec-workwithus .main-sec-inner { padding: 60px 0 90px; }
  .main-workwithus-cardlist { gap: 16px; flex-direction: column; }
  .main-workwithus-cardlist .item > a { border-radius: 8px; gap: 20px; padding: 20px; }
  .main-workwithus-cardlist .item .tit { gap: 15px; }
  .main-workwithus-cardlist .item .tit br { display: none; }
  .main-workwithus-cardlist .item .bottom .arrow-wrap { margin-top: 5px; }
  .main-workwithus-cardlist .item > a:hover .bottom .arrow-wrap { rotate: 0deg; }
  .main-sec-archive .main-sec-inner { padding: 60px 0; flex-direction: column; }
  .main-sec-partners .main-sec-inner { padding: 70px 0 130px; }
  .main-partners-list { gap: 10px; padding: 0 10px; }
  .main-partners-list > .item { width: calc((100% - (10px * 2)) / 3); }
}

@media screen and (max-width:768px) { 
  .mv-tit { margin-bottom: 8px; }
  .mv-desc-1 { font-size: 25px; margin-bottom: 30px; }
  .mv-desc-2 { font-size: 16px; }
  .mv-desc-2 br { display: none; }
  .main-sec-about .main-sec-inner { padding: 76px 0 45px; }
  .main-sec-about .txt { margin-bottom: 60px; }
  .main-sec-about .main-sec-about-desc-1 { font-size: 18px; margin-bottom: 36px; }
  .main-sec-about .main-sec-about-desc-2 { font-size: 15px; }
  .main-sec-workflow .main-sec-inner { padding: 60px 0 80px; }
  .main-sec-workflow .workflow-cycle { height: 160px; }
  .main-sec-workflow .workflow-cycle strong.dbtl { font-size: 20px; }
  .main-sec-workflow .workflow-cycle span.cycle { font-size: 16px; }
  .main-sec-workflow .workflow-card { border-radius: 4px; padding: 14px; }
  .main-sec-workflow .workflow-card p { font-size: 14px; }
  .main-sec-workflow .workflow-step-design { padding-right: 0; padding-bottom: 55px }
  .main-sec-workflow .workflow-step-build { padding-left: 0; padding-bottom: 55px }
  .main-sec-workflow .workflow-step-test { padding-left: 0; padding-top: 55px }
  .main-sec-workflow .workflow-step-learn { padding-right: 0; padding-top: 55px }
  .main-sec-coretech-service-deco { --main-deco-y-from: 150px; --main-deco-y-to: -150px; top: 15vh; height: 70vh; }
  .main-sec-coretech-service-deco .deco-1 { width: 90px; left: -5px; }
  .main-sec-coretech-service-deco .deco-2 { width: 120px; }
  .main-sec-coretech-service { padding: 30px 0; }
  .main-sec-coretech .main-sec-inner { padding: 30px 0; }
  .main-coretech-cardlist > .item .desc { display: none; }
  .main-coretech-cardlist > .item > a { padding: 30px; }
  .main-coretech-cardlist > .item .txt { display: flex; align-items: center; min-height: 40px; }
  .main-coretech-cardlist > .item .tit { font-size: 20px; margin: 0; }
  .main-coretech-cardlist > .item .tit br { display: block; }
  .main-service-cardlist { flex-direction: column; height: auto; gap: 8px; }
  .main-service-cardlist > .item { flex: none; height: 100px; transition: height var(--svc-card-d) ease; }
  .main-service-cardlist > .item.active { flex: none; height: 260px; }
  .main-service-cardlist > .item .tit { font-size: 18px; top: 50%; left: 30px; width: auto; height: auto; transform: translateY(-50%); transform-origin: center left; text-align: left; white-space: nowrap; }
  .main-service-cardlist > .item.active .tit { font-size: 25px; top: 30px; left: 30px; transform: none; white-space: normal; }
  .main-service-cardlist > .item .go-link { left: 30px; bottom: 50px; font-size: 16px; padding: 0 16px; }
  .main-sec-archive .go-link:hover { transform: none; }
  .main-service-cardlist > .item.active .go-link:hover i { rotate: var(--main-btn-circle-icon-rotate); }
  .main-service-cardlist > .item .action-plus { top: 50%; right: 30px; bottom: auto; transform: translateY(-50%); }
  .main-service-cardlist > .item.active .action-plus { transform: translateY(-50%) translateY(12px); }
  .main-partners-list > .item { width: calc((100% - (5px * 1)) / 2); }.main-workwithus-cardlist .item > a { gap: 15px; }
  .main-workwithus-cardlist .item .tit .eng { font-size: 18px; }
  .main-workwithus-cardlist .item .tit .kor { font-size: 16px; }
  .main-sec-archive .main-sec-inner { padding: 40px 0; }
  .main-sec-archive-item.notice .recent time { padding: 6px 12px; }
  .main-partners-list { gap: 5px; }
}

@media screen and (max-width:440px) { 
  .main-sec-coretech-service-deco { top: 5vh; height: 90vh; }
  .main-sec-coretech-service-deco .deco-1 { width: 80px; }
  .main-coretech-cardlist { grid-template-columns: repeat(1, 1fr); }
  .main-news-tab-content .gallery-typeB { --gallery-typeB-cols: 1; }
  .main-news-tab-content .gallery-typeB > .item:not(:first-child) { display: none; }
  .main-sec-archive-item.notice .list-bullet-01 > li > article > a { flex-direction: column; gap: 0; align-items: flex-start; justify-content: flex-start; }
  .main-sec-archive-item.notice .list-bullet-01 > li > article > a > strong { flex: auto; width: 100%; }
  .footer .rel-site { width: 100%; }
}