/* common */

:root {

}

.mo {display: none;}
.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)); transition: all 0.3s;}
#header.fixed {background: rgba(0,0,0,.5);}
#header.fixed .inner {height: 80px;}
#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{
  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%;}

#main .sc_2 {padding: 120px 0px; background: url(/web/img/sc_2_bg.jpg) no-repeat center / cover;}
#main .sc_2 .inner {max-width: 1000px; margin: 0 auto;}
#main .sc_2 .title {text-align: center; margin-bottom: 40px;}
#main .sc_2 .title h3 {font-size: 48px; color: #fff; font-weight: 700;}
#main .sc_2  .map_box .gm-ui-hover-effect {position: absolute !important; right: 3px;}


/* footer */

#footer {border-top: 35px solid #3E3F8E; background: #F0F5FF; padding: 50px 0px;}
#footer .inner {max-width: 1000px; margin: 0 auto;}
#footer .inner > p {font-size: 20px; font-weight: 700; margin-bottom: 14px; color: #3E3F8D;}
#footer ul li {display: flex; align-items: center; gap: 10px; margin-bottom: 7px;}
#footer ul li:last-child {margin-bottom: 0;}
#footer ul {margin-bottom: 14px;}
#footer p.copyrights {font-size: 14px; color: #A1A1A1;}

#footer ul li p {display: flex; align-items: center; gap: 5px; font-size: 14px; color: #A1A1A1;}
#footer ul li p b {font-weight: 600;}

.float {position: fixed; right: 100px; transition: all 0.3s; bottom: 100px; display: flex; flex-direction: column; gap: 15px; z-index: 200;}
.float img {height: 55px; transition: all 0.3s;}


/* responsive */

@media (max-width: 1024px) {

    .pc {display: none;}
    .mo {display: block;}

    .inner {padding: 0px 40px; box-sizing: border-box;}

    #main .sc_1 .title {position: unset; margin-bottom: 40px;}

    #main .sc_1 .hero_cards .box_row {flex-direction: column;}
    #main .sc_1 .hero_cards article {width: 100%;}

    #main .main_visual .img_box {height: 100vh;}

    #header .gnb ul {gap: 20px;}

}

@media (max-width: 769px) {

    .inner {padding: 0px 20px;}

    #header .gnb ul li:nth-child(1),
    #header .gnb ul li:nth-child(2) {display: none;}

    .float {right: 20px; bottom: 20px; gap: 10px;}
    .float img {height: 45px;}  

    #header .inner {gap: 30px; justify-content: space-between; padding: 0px 20px; height: 80px;}
    #header .logo img {height: 50px;}

    #main .sc_1 {padding: 40px 0px 170px;}

    #main .sc_1 .title {text-align: center;}
    #main .sc_1 .title h2 {font-size: 24px; margin-bottom: 17px;}
    #main .sc_1 .title article {font-size: 16px;}

    #main .sc_1 .hero_cards article .text_box .card_tit {font-size: 24px; margin-bottom: 15px;}
    #main .sc_1 .hero_cards article .text_box .card_desc {font-size: 15px;}

    #main .sc_1 .hero_cards,
    #main .sc_1 .hero_cards .box_row {gap: 20px;}

    #main .sc_2 {padding: 80px 0px;}
    #main .sc_2 .title {margin-bottom: 30px;}
    #main .sc_2 .title h3 {font-size: 24px;}

    #googleMap {height: 450px;}

}