@charset "UTF-8";

/* [REVEAL-PRELOAD] info-box도 초기 숨김(잔상 제거) */
html.reveal-preload #culture .info-box-wrap .info-box{
  opacity:0 !important;
  transform:translateY(-18px) !important; /* slide-down: 위에서 내려오기 */
  visibility:hidden; /* 클릭/포커스 방지 */
}
@media (prefers-reduced-motion:reduce){
  html.reveal-preload #culture .info-box-wrap .info-box{
    opacity:1 !important; transform:none !important; visibility:visible !important;
  }
}
/* [MOTION] slide-down 전용 클래스 */
.reveal-down{
  opacity:0;
  transform:translateY(calc(-1 * var(--reveal-offset, 18px)));
  transition:
    opacity var(--reveal-dur, .6s) var(--reveal-ease, cubic-bezier(.2,.8,.2,1)),
    transform var(--reveal-dur, .6s) var(--reveal-ease, cubic-bezier(.2,.8,.2,1));
}
.reveal-down.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .reveal-down{ transition:none; transform:none; opacity:1 !important; }
}

/* 타이틀 */
.title-container .page-title { font-size:64px; font-weight:700; text-align:center; line-height:1; margin-top:175px; }
.title-container .page-desc { font-size:18px; text-align:center; line-height:1; margin-top:44px;}
.title-container .page-desc br { display:none }

.button-wrap { margin-top:40px;text-align:center;}
.button-wrap .recruit-btn { height: 100%;display: inline-block;border-radius: 30px;padding: 20px 32px;font-size: 18px;line-height: 18px;background-color: #1C64FF;}
.button-wrap .recruit-btn svg { margin-left:16px;}

.content-section { padding-bottom:160px; }
.content-motion-wrap { margin-top:40px; }
.content-motion-wrap.biz-area { margin-top:120px; }
.content-wrap { margin-top:80px; }

#culture .content-motion-wrap .content-text { text-align:center; font-size:18px; letter-spacing: -0.8px; }
#culture .content-separator { height:1px; border-bottom:1px solid #E1E7EA; margin: 64px auto; }
#culture .info-box-wrap { display:grid; grid-template-columns: 1fr 1fr 1fr; column-gap:40px; row-gap:40px; margin-top:32px;}
#culture .info-box-wrap .info-box { padding: 32px 24px; min-height:223px; border: none; border-radius: 30px; word-break:keep-all;}
#culture.en .info-box-wrap .info-box {min-height:310px;display:flex;flex-direction:column;justify-content:center;}
#culture .info-box-wrap .info-box:nth-child(odd) { background-color: #1C64FF; color:#fff;}
#culture .info-box-wrap .info-box:nth-child(even) { background-color: #222; color:#fff;}
#culture .info-box-wrap .info-box .img-wrap { display:flex; align-items:center; justify-content:center; height:105px; }
#culture .info-box-wrap .info-box .img-wrap img { margin:0 auto; }
#culture .info-box-wrap .info-box .title { font-size:24px; font-weight:700; margin-top:16px; text-align:center; }
#culture .info-box-wrap .info-box .content { display:none;font-size:16px; line-height:1.5; }
#culture .info-box-wrap .info-box:hover .img-wrap { display:none;}
#culture .info-box-wrap .info-box:hover .title { display:none;}
#culture .info-box-wrap .info-box:hover .content { display:flex;height:100%;flex-wrap:wrap;align-content:center;}
#culture .content-wrap .wrap > .title { font-size:18px;font-weight:700;border-bottom:1px solid #E1E7EA;padding-bottom:16px;}

.talent .elements-wrap { display:grid; grid-template-columns:repeat(3, 1fr); gap:60px; margin-top:32px;}
.talent .element { padding:48px; border-radius:24px; border:1px solid #eee; box-shadow: 8px 8px 32px -10px rgba(0, 0, 0, 0.1);}
.talent .element .number { font-size:14px;font-weight:700;}
.talent .element .title { font-size: 24px;line-height: 1.2;margin-top: 5px;}
.talent .element .title .line1 { font-weight:700;}
.talent .element .separator { margin:12px 0;width:20px;height:1px;background-color:#666;}
.talent .element .content { max-width:188px;min-height:98px;line-height:1.52;}
.talent .element .img-wrap { margin-top:22px; display:flex; align-items: center;justify-content:center;}
.talent .element .img-wrap img { width:240px; height:174px;}

/* ========== 모바일(<=768px) ========== */
@media (max-width:768px){
  .header { display:none }
  .sub-header { display:block }

  .content-section { padding-bottom:80px; }
  .content-section .hero { display:none }
  .content-section .mds-submenu { display:none }
  .content-section .wrap, .content-section .caption {
    width: 100%;
    padding: 0 16px;
  }
  .title-container .page-title { display:none }
  .title-container .page-desc { font-size:16px; line-height: 1.55;padding:0 16px;}
  .title-container .page-desc br { display:block }

  .button-wrap { margin-top:32px;}
  .button-wrap .recruit-btn { height:unset;padding:12px 24px;font-size:16px;}
  .button-wrap .recruit-btn svg { margin-left:10px;}

  .talent .elements-wrap { grid-template-columns:1fr; row-gap:20px; column-gap:0; margin-top:24px;}
  .talent .element { padding:24px;}

  .content-wrap { margin-top:40px; }
  #culture .info-box-wrap { grid-template-columns: 1fr; column-gap:40px; row-gap:20px; margin-top:24px;}
  #culture .info-box-wrap .info-box .img-wrap { display:flex;}
  #culture .info-box-wrap .info-box .title { display:block;}
  #culture .info-box-wrap .info-box .content { display:block; height:unset; margin-top:24px;}
  #culture .info-box-wrap .info-box:hover .img-wrap { display:flex;}
  #culture .info-box-wrap .info-box:hover .title { display:block;}
  #culture .info-box-wrap .info-box:hover .content { display:block; height:unset; margin-top:24px;}
  
}