@charset "utf-8";

.intro { z-index: 1; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100dvh; min-height: 800px; overflow-y: auto; background: url('/resources/img/intro_bg.jpg') no-repeat center/cover; color:white; }
.intro::after { z-index: -1; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); }

.intro .intro-title { display: flex; flex-direction: column; text-align: center; }
.intro .intro-title p:nth-child(1) { font-size: 3.3rem; font-weight: 100; line-height: 1; }
.intro .intro-title p:nth-child(1) b { font-weight: 800; }
.intro .intro-title p:nth-child(2) { margin-top: 2rem; font-size: 11rem; font-family: 'Marcellus'; line-height: 1; }

.intro .intro-nav { margin-top: 8rem; }
.intro .intro-nav ul { display: flex; gap:8.6rem; align-items: center; }
.intro .intro-nav ul a { z-index: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:1.8rem; width: 46rem; height: 18rem; border-radius: 50rem; font-size: 2.2rem; font-family: 'Nanum Myeongjo'; }
.intro .intro-nav ul a::before { content: ""; position: absolute; top: 50%; right: 3.6rem; width: 1.1rem; height: 1.6rem; border-radius: 50rem; background: url('/resources/img/intro_arw.png') no-repeat center/contain; transform: translateY(-50%); }
.intro .intro-nav ul a p { line-height: 1; }
.intro .intro-nav ul a p:nth-child(3) { margin-top: .2rem; }
.intro .intro-nav ul a .li-title { font-size: 3.8rem; font-weight: 600; }
.intro .intro-nav li:nth-child(1) a { background: linear-gradient(-90deg, #9f4641, #d17f7b); transform: translateY(-70%); }
.intro .intro-nav li:nth-child(2) a { background: linear-gradient(-90deg, #112d82, #3763ea); }
.intro .intro-nav li:nth-child(3) a { background: linear-gradient(-90deg, #48455d, #787390); transform: translateY(-70%); }

.intro .intro-text { margin-top: 5rem; line-height: 1; font-family: 'Nanum Myeongjo'; font-weight: 600; font-size: 4.7rem; }

.intro .intro-list { margin-top: 4rem; font-family: 'Nanum Myeongjo'; }
.intro .intro-list > p { margin-bottom: 2.5rem; font-size: 2.6rem; text-align: center; line-height: 1; font-family: 'Nanum Myeongjo'; font-weight: 600; }
.intro .intro-list li { position: relative; display: flex; gap:.8rem; padding-left: 4rem; margin-top: 1.5rem; font-size: 2rem; }
.intro .intro-list li::before { content: ""; position: absolute; top: -.2rem; left: 0; width: 2.6rem; height: 2.6rem; background: white; border-radius: 50%; }
.intro .intro-list li::after { content: '1'; position: absolute; top: -.1rem; left: 0; width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; color:var(--main-black); text-align: center; }
.intro .intro-list li:nth-child(2)::after { content: '2'; }
.intro .intro-list li:nth-child(3)::after { content: '3'; }
.intro .intro-list li:nth-child(4)::after { content: '4'; }
.intro .intro-list li:nth-child(5)::after { content: '5'; }
.intro .intro-list b { font-weight: 700; }

.intro .intro-photo { position: absolute; right: 4.6rem; bottom: 3.3rem; font-size: 1.7rem; font-family: 'Nanum Myeongjo'; }

@media screen and (max-width:1500px){
  .intro .intro-nav ul { gap:7rem; }
  .intro .intro-nav ul a { width: 42rem; }
}

@media screen and (max-width:1300px){
  .intro .intro-nav ul { gap:4rem; }
  .intro .intro-nav ul a { width: 35rem; height: 17rem; }
  .intro .intro-nav ul a .li-title { font-size: 3.2rem; }
}

@media screen and (max-width:1024px){
  .intro .intro-nav ul { gap:1rem; }
  .intro .intro-nav ul a { width: 30rem; gap:1.2rem; font-size: 2rem; }
  .intro .intro-nav ul a .li-title { font-size: 3rem; }
  .intro .intro-nav li:nth-child(1) a { transform: translateY(-30%); }
  .intro .intro-nav li:nth-child(3) a { transform: translateY(-30%); }
}

@media screen and (max-width:768px){
  .intro { height: auto; min-height: auto; padding-top: 10rem; padding-bottom: 10rem; }
  .intro .intro-nav { margin-top: 5rem; }
  .intro .intro-nav ul { flex-direction: column; }
  .intro .intro-nav li:nth-child(1) a { transform: none; }
  .intro .intro-nav li:nth-child(3) a { transform: none; }
  .intro .intro-text { font-size: 3.5rem; text-align: center; line-height: 1.4; }

  .intro .intro-title p:nth-child(1) { font-size: 3rem; }
  .intro .intro-title p:nth-child(2) { font-size: 10rem; }
} 

@media screen and (max-width:500px){
  .intro .intro-nav { width: 84%; margin: 5rem auto 0; }
  .intro .intro-nav ul a { width: 100%; height: 14rem; font-size: 1.8rem; }
  .intro .intro-nav ul a .li-title { font-size: 2.8rem; }
  .intro .intro-nav li { width: 100%; }
}