@charset "utf-8";

/* intro */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: #000; color: #fff; font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: contain; }

.section_intro { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 60px 0; }
.section_intro .inner { max-width: 1600px; width: 93.75%; margin: 0 auto; }
.section_intro .container { display: flex; flex-direction: column; align-items: center; gap: 60px; min-width: 0; text-align: center; }

.section_intro .logo_row { display: flex; align-items: center; justify-content: center; gap: 45px; min-width: 0; }
.section_intro .logo_mne { flex: 0 0 auto; width: 130px; aspect-ratio: 130 / 70; }
.section_intro .logo_to { display: flex; align-items: center; gap: 40px; min-width: 0; }
.section_intro .logo_arrow { flex: 0 0 auto; width: 55px; aspect-ratio: 55 / 30; background: url('/img/intro_arrow.svg') no-repeat center / 100% 100%; }
.section_intro .logo_trelleborg { flex: 0 0 auto; width: 187px; aspect-ratio: 187 / 80; }

.section_intro .text_wrap { display: flex; flex-direction: column; align-items: center; gap: 30px; min-width: 0; }
.section_intro .title { font-size: 46px; font-weight: 700; line-height: 1.4; }
.section_intro .desc { display: flex; flex-direction: column; align-items: center; gap: 20px; font-size: 18px; font-weight: 400; line-height: 1.7; }

.section_intro .btn_link { display: inline-flex; align-items: center; justify-content: center; min-width: 367px; min-height: 65px; padding: 0 45px; border: 1px solid #fff; border-radius: 500px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; transition: background-color 0.3s, border-color 0.3s; }
.section_intro .btn_link .txt { min-width: 0; }
.section_intro .btn_link .ico { flex: 0 0 auto; width: 0; height: 16px; margin-left: 0; background: url('/img/intro_btn_arrow.svg') no-repeat center / 100% 100%; opacity: 0; transition: width 0.3s, margin-left 0.3s, opacity 0.3s; }
.section_intro .btn_link:hover,
.section_intro .btn_link:focus-visible { background: #009944; border-color: #009944; }
.section_intro .btn_link:hover .ico,
.section_intro .btn_link:focus-visible .ico { width: 18px; margin-left: 20px; opacity: 1; }
.section_intro .btn_link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 768px) {
    .section_intro .inner { width: 91.67%; }
    .section_intro .container { gap: 40px; }
    .section_intro .desc br { display: none; }
    .section_intro .logo_row { gap: 28px; }
    .section_intro .logo_mne { width: 90px; }
    .section_intro .logo_to { gap: 24px; }
    .section_intro .logo_arrow { width: 38px; }
    .section_intro .logo_trelleborg { width: 130px; }
    .section_intro .text_wrap { gap: 24px; }
    .section_intro .title { font-size: clamp(26px, 6vw, 46px); }
    .section_intro .desc { gap: 16px; font-size: 16px; }
    .section_intro .btn_link { width: 100%; max-width: 367px; min-width: 0; padding: 0 24px; font-size: 16px; }
}

@media (max-width: 480px) {
    .section_intro .logo_row { gap: 20px; }
    .section_intro .logo_mne { width: 72px; }
    .section_intro .logo_to { gap: 18px; }
    .section_intro .logo_arrow { width: 30px; }
    .section_intro .logo_trelleborg { width: 104px; }
    .section_intro .desc { font-size: 15px; }
    .section_intro .btn_link { padding: 0 20px; font-size: 15px; }
}