@charset "utf-8";

.intro-wrapper {display:flex; flex-direction:column; justify-content:center; width:100%; min-height:100dvh; padding:110px var(--space-100) 85px; overflow:hidden; background:url('/images/intro/bg.jpg') no-repeat center center / cover;}

.intro-header {display:flex; flex-direction:column; gap:var(--space-20); margin-bottom:var(--space-70); text-align:center;}
.intro-header h1 {font-size:clamp(40px, calc(72 / var(--inner) * 100vw), 72px); font-family:var(--Outfit); font-weight:700; line-height:1.3em; color:#242424;}
.intro-header p {font-size:clamp(16px, calc(20 / var(--inner) * 100vw), 20px); font-family:var(--Outfit); font-weight:500; line-height:1.5em; color:#454545;}

.intro-links {display:grid; grid-template-columns:repeat(4, 1fr); width:100%; max-width:1820px; flex:1 1 auto; min-height:0; height:1%; max-height:560px; margin:0 auto; gap:var(--space-40);}
.intro-links .link-item {display:flex; flex-direction:column; gap:var(--space-40); border-radius:var(--radius-40); padding:var(--space-40); background:rgba(255, 255, 255, 0.80);}
.intro-links .link-item .number-wrap {display:flex; justify-content:space-between; align-items:flex-start;}
.intro-links .link-item .number-wrap .icon {display:flex; align-items:center; justify-content:center; width:48px; aspect-ratio:1/1; border-radius:10px; background:#fff; color:#4A5565;}
.intro-links .link-item .number-wrap .number {margin-top:-.1em; font-size:clamp(52px, calc(72 / var(--inner) * 100vw), 72px); font-family:var(--Outfit); font-weight:800; line-height:1em; color:#fff;}
.intro-links .link-item .cnt-wrap {flex:1 1 auto; min-height:0; height:1%;}
.intro-links .link-item .cnt-wrap .title {margin-bottom:var(--space-30); font-size:clamp(28px, calc(40 / 1800 * 100vw), 40px); font-weight:800; line-height:1.5em; color:#242424; word-break:break-all; letter-spacing:-.03em;}
.intro-links .link-item .cnt-wrap .subtitle {margin-bottom:var(--space-16); font-size:var(--font-size-16); font-weight:600; line-height:1.5em; color:#99A1AF;}
.intro-links .link-item .cnt-wrap .desc {font-size:var(--font-size-18); line-height:1.5em; color:#454545;}
.intro-links .link-item .more-wrap {display:flex; align-items:center; justify-content:space-between;}
.intro-links .link-item .more-wrap .text {font-size:var(--font-size-18); font-weight:600; line-height:1.5em; color:#99A1AF;}
.intro-links .link-item .more-wrap .arrow {display:flex; align-items:center; justify-content:center; width:40px; aspect-ratio:1/1; border-radius:50%; background:#F4F5F6; color:#99A1AF; font-size:var(--font-size-15); line-height:1.5em;}
.intro-links .link-item * {transition:.2s;}
.intro-links .link-item:hover {background:#E4191A; transform:translateY(-10px);}
.intro-links .link-item:hover .number-wrap .icon {background: rgba(243, 244, 246, 0.20); color:#fff;}
.intro-links .link-item:hover .number-wrap .number {opacity:.2;}
.intro-links .link-item:hover .cnt-wrap .title {color:#fff;}
.intro-links .link-item:hover .cnt-wrap .subtitle {color:#fff;}
.intro-links .link-item:hover .cnt-wrap .desc {color:#fff;}
.intro-links .link-item:hover .more-wrap .text {color:#fff;}

@media (max-width: 900px) {
    .intro-wrapper {padding:var(--space-120) var(--space-80);}
    .intro-links {grid-template-columns:repeat(2, 1fr); max-height:unset;}
}

@media (max-width: 767px) {
    .intro-wrapper {padding:var(--space-60) var(--space-40);}
    .intro-links {grid-template-columns:1fr; gap:16px;}
    .intro-links .link-item .cnt-wrap .title {font-size:32px;}
    .intro-links .link-item:hover {transform:translateY(0);}
}