/* common */

:root {

}

.img_box img {width: 100%;}

/* header */

#header {z-index: 100; position: fixed; left: 0; top: 0; width: 100%; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));}
#header .inner {max-width: 720px; display: flex; align-items: center; margin: 0 auto; justify-content: center; height: 100px; transition: all 0.3s; gap: 70px;}
#header .logo img {height: 70px;}
#header .gnb ul {display: flex; align-items: center; gap: 60px;}
#header .gnb ul li a {font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 7px;}
#header .gnb ul li a img {height: 20px;}


/* main */

#main .main_visual {background: #050B2D;}
#main .main_visual .img_box {overflow: hidden;}

/* 초기 진입 애니메이션 */
#main .main_visual .img_box img{
  display:block;              /* 이미지 아래 여백 방지 */
  width:100%;
  height:100%;
  object-fit:cover;           /* 필요 시 유지 */
  transform-origin:center;
  will-change: transform, filter;
  animation: mvZoomBlurIn 1.5s ease-out forwards;
}

/* 확대+블러 -> 정사이즈+선명 */
@keyframes mvZoomBlurIn{
  0%{
    transform: scale(1.25);
    filter: blur(18px);
    opacity: 0.95;
  }
  100%{
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

/* 모션 줄이기 환경 대응 */
@media (prefers-reduced-motion: reduce){
  #main .main_visual .img_box img{
    animation: none;
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

#main section {overflow: hidden;}

#main .sc_1 {padding: 160px 0px 250px; position: relative;}
#main .sc_1 .inner {max-width: 1280px; margin: 0 auto; box-sizing: border-box; position: relative; }
#main .sc_1 .title {position: absolute; left: 0; top: 0;}
#main .sc_1 .title h2 {font-size: 48px; font-weight: 700; margin-bottom: 20px;}
#main .sc_1 .title article {font-size: 20px;}

#main .sc_1 .hero_cards { display: flex; flex-direction: column; align-items: flex-end; gap: 25px;}
#main .sc_1 .hero_cards .box_row {display: flex; flex-wrap: wrap; gap: 25px;}
#main .sc_1 .hero_cards article {position: relative; width: calc(33.3% - 17px);}
#main .sc_1 .hero_cards article .text_box {position: absolute; width: 100%; padding: 50px 25px; color: #fff; box-sizing: border-box; left: 0; bottom: 0;}
#main .sc_1 .hero_cards article .text_box .card_tit {font-size: 32px; font-weight: 500; margin-bottom: 20px;}
#main .sc_1 .hero_cards article .text_box .card_desc {font-size: 20px; color: #fff;}

#main .sc_1 .slogan {position: absolute; left: 0; bottom: 130px; width: 100%; z-index: -1;}
#main .sc_1 .slogan img {width: 100%;}