@charset "utf-8";

/* ========================================
   CEO x�� �t� - intro.css
   ======================================== */

/* ----------------------------------------
   #greeting 9X
   ---------------------------------------- */
#intro main {
  background-color: rgba(242, 242, 242, 1);
}
#greeting {
  position: relative;

  overflow: hidden;
}

/* 0� t�� - �! �� */
#greeting::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  max-width: 720px;
  width: 37.5%;
  height: 100%;
  background: url('/theme/stgenbio/assets/img/intro_bg_pc.png') no-repeat top
    right;
  background-size: contain;
  pointer-events: none;
}

/* �Lt 1200px */
#greeting .greeting-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

/* �P  
� */
#greeting .greeting-content {
  margin-top: max(134px, 6.979vw);
  padding-bottom: max(134px, 6.979vw);
}

/* �t� */
#greeting .greeting-title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: max(40px, 2.083vw);
  line-height: 160%;
  color: #000;
  text-align: left;
  margin-bottom: max(36px, 1.875vw);
}

/* p M�� */
#greeting .greeting-title .highlight {
  color: rgba(1, 171, 205, 1);
}

/* 본문 텍스트 영역 */
#greeting .greeting-text {
  max-width: 800px;
}

#greeting .greeting-text p {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: max(16px, 0.833vw);
  line-height: 160%;
  color: #000;
  margin-bottom: 36px;
}

#greeting .greeting-text p:last-child {
  margin-bottom: 0;
}

/* 본문 강조 텍스트 */
#greeting .greeting-text p.highlight,
#greeting .greeting-text p .highlight {
  font-weight: 700;
}

/* 서명 영역 */
#greeting .greeting-sign {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 838px;
  margin-top: max(36px, 1.875vw);
}

#greeting .greeting-sign img {
  max-width: 196px;
  width: 10.208vw;
  height: auto;
  margin-right: max(8px, 0.417vw);
}

#greeting .greeting-sign .sign-position {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: max(24px, 1.25vw);
  line-height: 100%;
  color: #000;
  margin-right: max(12px, 0.625vw);
}

#greeting .greeting-sign .sign-name {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: max(40px, 2.083vw);
  line-height: 100%;
  letter-spacing: 0.45em;
  color: #000;
}

/* 영문 하단 서명 */
#greeting .greeting-sign-en {
  display: block;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0;
  color: #000;
  text-align: right;
}

#greeting .greeting-sign-en .sign-name {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0;
}

#greeting .greeting-sign-en .sign-position {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  margin-right: 0;
}

/* 일본어 하단 서명 */
#greeting .greeting-sign-jp {
  display: block;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0;
  color: #000;
  text-align: right;
}

#greeting .greeting-sign-jp .sign-name {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0;
}

#greeting .greeting-sign-jp .sign-position {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  margin-right: 0;
}

/* 타블렛용 서명 - PC에서 숨김 */
#greeting .greeting-sign-tablet {
  display: none;
}

#greeting .greeting-sign-tablet .sign-top {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

#greeting .greeting-sign-tablet .sign-top img {
  max-width: 196px;
  height: auto;
  margin-right: 8px;
}

#greeting .greeting-sign-tablet .sign-top .sign-position {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  color: #000;
}

#greeting .greeting-sign-tablet .sign-name {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0.45em;
  color: #000;
}

/* ========================================
   Tablet 세로 (1440px ~ 1024px)
   ======================================== */
@media (max-width: 1440px) {
  /* 배경 이미지 변경 */
  #greeting {
    max-width: 1024px;
    margin: auto;
  }

  #greeting::before {
    background-image: url('/theme/stgenbio/assets/img/intro_bg_tablet.png');
  }

  /* 컨텐츠 영역 */
  #greeting .greeting-content {
    margin-top: 104px;
    padding-bottom: 24px;
  }

  /* 헤더 컨테이너 */
  #greeting .greeting-header {
    max-width: 784px;
    margin: 0 auto;
  }

  /* 타이틀 */
  #greeting .greeting-title {
    font-size: 40px;
    line-height: 160%;
    margin-bottom: 40px;
  }

  /* 영문 타이틀 */
  html[lang='en'] #greeting .greeting-title {
    max-width: 600px;
  }

  /* 일본어 타이틀 */
  html[lang='jp'] #greeting .greeting-title {
    max-width: 550px;
  }

  /* 타블렛용 서명 표시 */
  #greeting .greeting-sign-tablet {
    display: block;
    max-width: 489px;
    text-align: right;
    margin-bottom: 131px;
  }

  #greeting .greeting-sign-tablet .sign-top {
    justify-content: flex-end;
  }

  #greeting .greeting-sign-tablet .sign-top img {
    max-width: 80px;
    margin-right: 8px;
  }

  #greeting .greeting-sign-tablet .sign-top .sign-position {
    font-size: 14px;
    line-height: 100%;
  }

  #greeting .greeting-sign-tablet .sign-name {
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
  }

  /* 본문 텍스트 */
  #greeting .greeting-text {
    max-width: 784px;
    margin: 0 auto;
  }

  #greeting .greeting-text p {
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0;
  }

  /* 하단 서명 */
  #greeting .greeting-sign {
    max-width: 784px;
    margin: 36px auto 0;
  }

  #greeting .greeting-sign img {
    max-width: 115px;
    margin-right: 8px;
  }

  #greeting .greeting-sign .sign-position {
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
  }

  #greeting .greeting-sign .sign-name {
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.45em;
  }

  /* 영문 하단 서명 */
  #greeting .greeting-sign-en {
    font-size: 14px;
  }

  #greeting .greeting-sign-en .sign-name,
  #greeting .greeting-sign-en .sign-position {
    font-size: 14px;
  }

  /* 일본어 하단 서명 */
  #greeting .greeting-sign-jp {
    font-size: 14px;
  }

  #greeting .greeting-sign-jp .sign-name,
  #greeting .greeting-sign-jp .sign-position {
    font-size: 14px;
  }
}

/* ========================================
   Tablet 가로 (1024px ~ 768px)
   ======================================== */
@media (max-width: 1024px) {
  /* 배경 이미지 변경 */
  #greeting {
    max-width: 769px;
  }
  #greeting::before {
    background-image: url('/theme/stgenbio/assets/img/intro_bg_tablet2.png');
  }

  /* 컨텐츠 영역 */
  #greeting .greeting-content {
    margin-top: 116px;
  }

  /* 헤더 컨테이너 */
  #greeting .greeting-header {
    max-width: 736px;
  }

  /* 타이틀 */
  #greeting .greeting-title {
    font-size: 36px;
    line-height: 160%;
  }

  /* 영문 타이틀 */
  html[lang='en'] #greeting .greeting-title {
    max-width: 500px;
  }

  /* 일본어 타이틀 */
  html[lang='jp'] #greeting .greeting-title {
    max-width: 500px;
  }

  /* 타블렛용 서명 */
  #greeting .greeting-sign-tablet {
    max-width: 440px;
    margin-bottom: 140px;
  }

  /* 본문 텍스트 */
  #greeting .greeting-text {
    max-width: 736px;
  }

  /* 하단 서명 */
  #greeting .greeting-sign {
    max-width: 736px;
  }
}

/* ========================================
   Mobile (768px 이하)
   ======================================== */
@media (max-width: 768px) {
  #greeting {
    max-width: 600px;
  }
  /* 배경 이미지 변경 */
  #greeting::before {
    background-image: url('/theme/stgenbio/assets/img/intro_bg_mobile.png');
  }

  /* 컨텐츠 영역 */
  #greeting .greeting-content {
    margin-top: 60px;
  }

  /* 헤더 컨테이너 */
  #greeting .greeting-header {
    max-width: 343px;
  }

  /* 타이틀 */
  #greeting .greeting-title {
    font-size: 16px;
    line-height: 160%;
    margin-bottom: 95px;
  }

  /* 영문 타이틀 */
  html[lang='en'] #greeting .greeting-title {
    max-width: 245px;
  }

  /* 일본어 타이틀 */
  html[lang='jp'] #greeting .greeting-title {
    max-width: 245px;
  }

  /* 타블렛용 서명 */
  #greeting .greeting-sign-tablet {
    max-width: 137px;
    margin-bottom: 117px;
  }

  /* 영문 타블렛용 서명 */
  html[lang='en'] #greeting .greeting-sign-tablet {
    max-width: 148px;
  }

  /* 일본어 타블렛용 서명 */
  html[lang='jp'] #greeting .greeting-sign-tablet {
    max-width: 148px;
  }

  /* 본문 텍스트 */
  #greeting .greeting-text {
    max-width: 343px;
  }

  /* 하단 서명 */
  #greeting .greeting-sign {
    max-width: 343px;
  }
}

/* ========================================
   Mobile Small (480px 이하)
   ======================================== */
@media screen and (max-width: 480px) {
  #intro #greeting {
    background: none;
    height: auto;
  }
}