/* ===== color ===== */
/* ===== font ===== */
/* ===== font-family ===== */
/* ===== spacing ===== */
/* ===== line-height ===== */
.container {
  padding: 160px 20px;
}

.container img {
  justify-self: center;
}

.w1600 {
  max-width: 1600px;
  margin: 0 auto;
}

.w1280 {
  max-width: 1280px;
  margin: 0 auto;
}

/* ===== root ===== */
* {
  letter-spacing: -0.05em;
}

body {
  text-align: center;
}

/* ===== font ===== */
.font72 {
  font-size: 60px;
  font-family: "GmarketSans", sans-serif;
  line-height: 1.25;
}

.font80 {
  font-size: 68px;
  font-family: "GmarketSans", sans-serif;
  line-height: 1.25;
}

.font100 {
  font-size: 88px;
  font-family: "GmarketSans", sans-serif;
  line-height: 1.25;
}

.font60 {
  font-size: 44px;
  font-family: "GmarketSans", sans-serif;
}

.font50 {
  font-size: 34px;
  font-family: "Pretendard", sans-serif;
  line-height: 1.4;
}

.font40 {
  font-size: 24px;
  font-family: "Pretendard", sans-serif;
  line-height: 1.4;
}

.font30 {
  font-size: 20px;
  font-family: "Pretendard", sans-serif;
  line-height: 1.4;
}

/* ===== color ===== */
.main {
  color: #ca0606;
}

.sub {
  color: #666666;
}

.black {
  color: #242424;
}

/* ===== spacing ===== */
.mt120 {
  margin-top: 120px;
}

.mt100 {
  margin-top: 100px;
}

.mt80 {
  margin-top: 60px;
}

.mt64 {
  margin-top: 44px;
}

.mt48 {
  margin-top: 28px;
}

.mt32 {
  margin-top: 12px;
}

.mt16 {
  margin-top: -4px;
}

/* ===== section-2 specific styles ===== */
.number-with-dots {
  position: relative;
}

.number-with-dots::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 20%;
  width: 6px;
  height: 6px;
  background: #ca0606;
  border-radius: 50%;
}

.number-with-dots::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 20%;
  width: 6px;
  height: 6px;
  background: #ca0606;
  border-radius: 50%;
}

/* ===== section-8 specific styles ===== */
.section-8 .container {
  padding-bottom: 0;
}

/* ===== section-10 specific styles ===== */
.section-10 .font80 {
  font-family: "Pretendard", sans-serif;
  font-weight: bold;
}

/* ===== section-11 specific styles ===== */
.section-11 .font60 {
  font-family: "Pretendard", sans-serif;
  line-height: 1.25;
}


/* ===== highlight banner ===== */
.highlight-banner {
  background-color: #1a1a1a;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
}

.highlight-banner h3 {
  color: white;
  margin: 0;
  line-height: 1.2;
}

.highlight-banner .main {
  color: #ca0606;
  font-weight: bold;
}

/* ======================== 
   MOBILE RESPONSIVE OVERRIDES 
   ======================== */

/* Mobile - 425px */
@media (max-width: 425px) {
  .container {
    padding: 80px 15px;
  }
  
  .w1600, .w1280 {
    max-width: 100%;
    padding: 0 15px;
  }
  
  /* Mobile Typography Override */
  .font100 {
    font-size: 48px !important;
    line-height: 1.2 !important;
  }
  
  .font80 {
    font-size: 36px !important;
    line-height: 1.2 !important;  
  }
  
  .font72 {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }
  
  .font60 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  
  .font50 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
  
  .font40 {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  
  .font30 {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  
  /* Mobile Spacing Override */
  .mt120 {
    margin-top: 60px !important;
  }
  
  .mt100 {
    margin-top: 50px !important;
  }
  
  .mt80 {
    margin-top: 40px !important;
  }
  
  .mt64 {
    margin-top: 32px !important;
  }
  
  .mt48 {
    margin-top: 24px !important;
  }
  
  .mt32 {
    margin-top: 16px !important;
  }
  
  /* Section 2 Mobile Dots */
  .number-with-dots::before,
  .number-with-dots::after {
    width: 4px;
    height: 4px;
    top: -6px;
  }
  
  /* Highlight Banner Mobile */
  .highlight-banner {
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 90%;
  }
}

/* Tablet - 768px */
@media (max-width: 768px) and (min-width: 426px) {
  .container {
    padding: 120px 30px;
  }
  
  .font100 {
    font-size: 60px !important;
  }
  
  .font80 {
    font-size: 48px !important; 
  }
  
  .font72 {
    font-size: 42px !important;
  }
  
  .font60 {
    font-size: 32px !important;
  }
  
  .font50 {
    font-size: 26px !important;
  }
  
  .font40 {
    font-size: 20px !important;
  }
  
  .mt120 {
    margin-top: 80px !important;
  }
  
  .mt100 {
    margin-top: 70px !important;
  }
  
  .mt80 {
    margin-top: 50px !important;
  }
}

/* Medium Desktop - 1000px 화면 최적화 */
@media (max-width: 1200px) and (min-width: 769px) {
  .container {
    padding: 140px 40px;
  }
  
  .w1600, .w1280 {
    max-width: 95%;
    padding: 0 20px;
  }
  
  /* Medium Desktop Typography */
  .font100 {
    font-size: 75px !important;
    line-height: 1.2 !important;
  }
  
  .font80 {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
  
  .font72 {
    font-size: 52px !important;
    line-height: 1.25 !important;
  }
  
  .font60 {
    font-size: 38px !important;
    line-height: 1.3 !important;
  }
  
  .font50 {
    font-size: 30px !important;
    line-height: 1.4 !important;
  }
  
  .font40 {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
  
  .font30 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  
  /* Medium Desktop Spacing */
  .mt120 {
    margin-top: 100px !important;
  }
  
  .mt100 {
    margin-top: 85px !important;
  }
  
  .mt80 {
    margin-top: 65px !important;
  }
  
  .mt64 {
    margin-top: 50px !important;
  }
  
  .mt48 {
    margin-top: 35px !important;
  }
  
  .mt32 {
    margin-top: 20px !important;
  }
  
  /* Section 2 Medium Desktop Dots */
  .number-with-dots::before,
  .number-with-dots::after {
    width: 5px;
    height: 5px;
    top: -8px;
  }
  
  /* Highlight Banner Medium Desktop */
  .highlight-banner {
    padding: 20px 30px;
    border-radius: 15px;
    margin: 40px 0;
    max-width: 80%;
  }
  
  .highlight-banner h3 {
    font-size: 35px !important;
    line-height: 1.3;
  }
}
/*# sourceMappingURL=style.css.map */