@charset "utf-8";

:root {
--org: #ff6714;
--purp:#582C83;
--purp2:#6A6DCD;
--bk:#151515;

--hd_h: 100px;

/*그리드*/
--grid_pd0: 1.1875vw;
--grid_pd1: 2.1875vw;
--grid_pd2: 6.25vw;
--grid_pd3 : 9.375vw;
--grid_pd4 : 21.875vw;

/*컨텐츠 타이틀*/
--sub_h2: 5.8vw;
--sub_h3: 3.4vw;
--sub_h4: 2.2vw;

/*본문 텍스트 30px*/
--basic_txt: 0.9375vw;

--sub_grid: 194rem;

--sub_desc: 3rem;
--sub_tit: 9rem;

--cont_tit: 2.7vw;
--cont_desc: 1.3vw;

--inp_h: 11rem;
}

.mo_over { display: block !important; }
.mo_only { display: none !important; }

#renewal_page {padding-top: var(--hd_h)}
#renewal_page.fix_btm { background-color: #fff; border-radius: 0 0 5.859375vw 5.859375vw; }


/*푸터*/
#footer { position: relative; padding: 3.6875vw var(--grid_pd3) 2.2vw; background-color: #fff; color: var(--bk); z-index: 40; font-family: 'Pretendard', Sans-Serif !important; }
#footer .top_btn { position:absolute; right: var(--grid_pd1); bottom:0; display: flex; align-items: center; justify-content: center; width: 4.68vw; height: 4.68vw; border-radius: 100%; background: var(--purp); transform: translateY(-50%); cursor: pointer; z-index: 100; }
#footer .top_btn .ico { width: 35%; height: 35%; transform: translateY(0); background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23fff"><path d="M209 50.2l-17-17-17 17L21.4 203.8l-17 17 33.9 33.9 17-17L168 125.1 168 456l0 24 48 0 0-24 0-330.8L328.6 237.8l17 17 33.9-33.9-17-17L209 50.2z"/></svg>')center/contain no-repeat; transition: transform 0.5s; }
#footer .top_btn:hover .ico { transform: translateY(-0.3vw); }


#footer .ft_top_sect { display: flex; align-items: flex-start; justify-content: space-between; }
#footer .ft_top_sect .left { flex-shrink: 0; }
#footer .ft_top_sect .left .sns_wrap { display: flex; align-items: center; justify-content: flex-start; }
#footer .ft_top_sect .left .sns_wrap .sns { position: relative; display: flex; align-items: center; justify-content: center; width: max(2.8vw, 48px); height: max(2.8vw, 48px); border: 1px solid var(--bk); border-radius: 100%; font-size: max(1.09375vw, 18px); fill: #000; transition: background-color 0.5s, fill 0.5s; }
#footer .ft_top_sect .left .sns_wrap .sns .tool_tip { position: absolute; right: 50%; top: -0.5em; transform: translate(50%, -100%); display: inline-block; width: auto; height: 2.2em; line-height: 2.2em; padding: 0 0.7em; border-radius: 0.5rem; font-size: 0.5vw; background-color: #F2F3F5; z-index: 50; opacity: 0; transition: opacity 0.5s; }
#footer .ft_top_sect .left .sns_wrap .sns:hover .tool_tip { opacity: 1; }
#footer .ft_top_sect .left .sns_wrap .sns + .sns { margin-left: max(0.9375vw, 12px); }
#footer .ft_top_sect .left .sns_wrap .sns.naver { font-size: max(0.78125vw, 14px); }
#footer .ft_top_sect .left .sns_wrap .sns.naver_tv svg { position: relative; left: 2px; }
#footer .ft_top_sect .left .sns_wrap .sns.naver_tv svg stop { transition: 0.3s; }
#footer .ft_top_sect .left .sns_wrap .sns:hover { background-color: #000; fill: #fff; }
#footer .ft_top_sect .left .sns_wrap .sns:hover svg stop { stop-color: #fff !important; }

#footer .ft_top_sect .left .sns_wrap .sns.youtube { font-size: max(0.78125vw, 14px); }

#footer .ft_top_sect .left .num_wrap { display: flex; align-items: center; justify-content: flex-start; margin-top: 1.875vw; font-size: max(var(--basic_txt), 13px); }
#footer .ft_top_sect .left .num_wrap .num + .num { margin-left: 1.2em; }
#footer .ft_top_sect .left .num_wrap .num b { font-weight: 600; }

#footer .ft_top_sect .right { margin-left: 2vw; }
#footer .ft_top_sect .right .ft_menu { display: flex; align-items: flex-start; justify-content: space-between; }
#footer .ft_top_sect .right .ft_menu .menu_box {  }
#footer .ft_top_sect .right .ft_menu .menu_box + .menu_box { margin-left: 3.75vw; }
#footer .ft_top_sect .right .ft_menu .menu_box .depth1 { font-size: 1.25vw; font-weight: 700; }
#footer .ft_top_sect .right .ft_menu .menu_box .depth2 { margin-top: 0.95vw; }
#footer .ft_top_sect .right .ft_menu .menu_box .depth2 > a {display: flex;align-items: flex-start;font-size: max(0.65vw, 14px);font-weight: 500;transition: color 0.3s;}
#footer .ft_top_sect .right .ft_menu .menu_box .depth2 > a:hover { color: var(--purp); }
#footer .ft_top_sect .right .ft_menu .menu_box .depth2 > a.active { color: var(--purp); }
#footer .ft_top_sect .right .ft_menu .menu_box .depth2 > a + a { margin-top: 0.5em; }
#footer .ft_top_sect .right .ft_menu .menu_box .depth2 > a svg { margin-left: 0.4em; margin-top: 0.35em; transition: fill 0.3s; }
#footer .ft_top_sect .right .ft_menu .menu_box .depth2 > a:hover svg { fill: var(--purp); }

#footer .ft_middle_sect {display: flex;align-items: flex-end;justify-content: space-between;padding: 2vw 0 1.5625vw;}
#footer .ft_middle_sect .left { flex-shrink: 0; }
#footer .ft_middle_sect .left .news {  }
#footer .ft_middle_sect .left .news .tit { font-size: max(1.25vw, 15px); font-weight: 700; }
#footer .ft_middle_sect .left .news .subs_btn { display: flex; align-items: center; justify-content: space-between; width: 20vw; margin-top: 0.46875vw;/* padding: 1.4em 2.2em; */background-color: #F2F3F5; border-radius: 0.625vw; }
#footer .ft_middle_sect .left .news .subs_btn input { width: 98%; background-color: transparent; font-family: var(--pop); font-size: max(var(--basic_txt), 13px); }
#footer .ft_middle_sect .left .news .subs_btn .ico { display: flex; align-items: center; justify-content: center; margin-left: 1em; transition: transform 0.8s; }
#footer .ft_middle_sect .left .news .subs_btn .ico:hover { transform: translateX(0.5em); }

#footer .ft_middle_sect .copy { display: none; font-size: max(0.6875vw, 12px); }
#footer .ft_middle_sect .right {/* width: 31.40625vw; */}
#footer .ft_middle_sect .right .tit {width: 100%;max-width: 200px;}
#footer .ft_middle_sect .right .tit img { width: 100%; object-fit: contain; }

#footer .ft_btm_sect { display: flex; align-items: flex-end; justify-content: space-between; padding: 1.71875vw 0 0; border-top: 1px solid rgba(21,21,21, 1); }
#footer .ft_btm_sect .copy { font-size: max(0.6875vw, 12px); }
#footer .ft_btm_sect .tag_wrap { display: flex; align-items: center; justify-content: flex-end; }
#footer .ft_btm_sect .tag_wrap .tag { font-size: max(var(--basic_txt), 13px); font-weight: 600; }
#footer .ft_btm_sect .tag_wrap .tag + .tag { margin-left: 1.5em; }




@media screen and (max-aspect-ratio: 1 / 1) {

    :root {

        --grid_pd4: 13vw;

        
        --cont_tit: 4.5vw;
        --cont_desc: 2.1vw;

        --basic_txt: 1.7vw;

        --sub_h2: 7vw;
        --sub_h3: 6vw;
        --sub_h4: 2.8vw;
        

        --inp_h: 8rem;

    }

    #header h2 .svg { width: 12.5vw; height: 3.2vw; }
    .main #header h2 .load_svg img { width: 22vw; }


    .overlay .nav_box .depth2 li a { font-size: 1.8vw; }

    .quick_inquiry { width: 15vw; height: 15vw; }
    .quick_inquiry .hover_box { font-size: 2vw; }
    .quick_top { font-size: 1.6vw; }
    .quick_top:before { width: 6vw; height: 6vw; }

    #footer { padding: 5vw var(--grid_pd3) 10vw; }

    #footer .top_btn { width: 7vw; height: 7vw; }

    #footer .ft_top_sect { flex-direction: column; align-items: flex-start; }

    #footer .ft_top_sect .right { width: 100%; margin-left: 0; margin-top: 5vw; }
    #footer .ft_top_sect .right .ft_menu .menu_box .depth1 { font-size: 2.7vw }
    #footer .ft_top_sect .right .ft_menu .menu_box .depth2 > a { font-size: 1.7vw; }
    #footer .ft_top_sect .right .ft_menu .menu_box + .menu_box { margin-left: 5vw; }

    #footer .ft_middle_sect { padding: 6vw 0 3vw; }
    #footer .ft_middle_sect .left .news .subs_btn { width: 26vw; }

    #footer .ft_btm_sect { padding: 3vw 0 0; }



}

@media screen and (max-width: 768px) {

    :root {

        --grid_pd1: 15px;
        --grid_pd2: 15px;
        --grid_pd3: 15px;
        --grid_pd4: 15px;

        --cont_tit: 28px;
        --cont_desc: 13px;

        --sub_h1: 38px;
        --sub_h2: 25px;
        --sub_h3: 25px;
        --sub_h4: 16px;

        --hd_h: 60px;

        --inp_h: 40px;

        /*--basic_txt: 16px;*/

    }

    .mo_over { display: none !important; }
    .mo_only { display: block !important; }

    #header h2 .svg { width: 100px; height: auto; }
    #header.open .nav:before { width: 400vw; height: 400vw; }

    .overlay .nav_box .depth2 li a span:after {font-size: 24px}

    .main #header h2 .load_svg img { width: 120px; }
    .main.active #header h2 .load_svg { width: 100px; }

    .overlay-content { top: 7%; }
    .overlay .nav_box > ul > li > a { font-size: 32px; }
    .overlay .nav_box .depth2 { margin-top: 0px; }
    .overlay .nav_box .depth2 li + li { margin-left: 0; }
    .overlay .nav_box .depth2 li a { font-size: 18px; }
    .overlay .nav_box .depth2 li a span:before { width: 4px; height: 4px; }

    .nav_box { height: 100vh; overflow: auto; }
    .nav_box .right { padding-bottom: 180px; }
    .nav_box .right li + li { margin-left: 0; margin-top: 40px; }

    body.sub .quick_wrap { display: none; }
    .quick_wrap { right: 10px; bottom: 20px; }
    .quick_top { font-size: 14px; display: none; }
    .quick_inquiry { width: 80px; height: 80px; }
    .quick_inquiry .hover_box { font-size: 14px; }

    /*footer*/
    #footer { padding: 40px var(--grid_pd3) 40px; }
    #footer .ft_top_sect .right .ft_menu { display: none; }
    #footer .top_btn { display: none; width: 60px; height: 60px; }
    #footer .ft_top_sect .left .sns_wrap .sns { width: 40px; height: 40px; font-size: 16px; }
    #footer .ft_top_sect .left .sns_wrap .sns.naver { font-size: 12px; }
    #footer .ft_top_sect .left .num_wrap { margin-top: 20px; font-size: 14px; }

    #footer .ft_middle_sect { flex-direction: column; align-items: flex-start; padding: 10px 0 15px; }
    #footer .ft_middle_sect .left { width: 100%; }
    #footer .ft_middle_sect .left .news { display: flex; align-items: center; justify-content: flex-start; }
    #footer .ft_middle_sect .left .news .tit { font-size: 18px; flex-shrink: 0 }
    #footer .ft_middle_sect .left .news .subs_btn {width: 100%;margin-top: 0;margin-left: 15px;/* padding: 15px; */border-radius: 10px;}
    #footer .ft_middle_sect .left .news .subs_btn input { font-size: 14px; }
    #footer .ft_middle_sect .left .news .subs_btn .ico { font-size: 11px; }
    #footer .ft_middle_sect .right { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; margin: 40px 0 0 auto; }
    #footer .ft_middle_sect .right .copy { display: block; flex-shrink: 0; line-height: 1; }
    #footer .ft_middle_sect .right .tit {/* width: 80%; *//* margin-left: 20px; *//* max-width: 150px; */display: none;}

    #footer .ft_btm_sect { padding: 15px 0 0; flex-direction: column; align-items: flex-start; }
    #footer .ft_btm_sect .tag_wrap .tag { font-size: 12px; margin-top: 10px; }
    #footer .ft_btm_sect .copy { display: none; font-size: 12px; }

}

/* 768 ~ 600 */
@media screen and (max-width: 768px) and (min-width: 600px) {

    #footer .ft_middle_sect { padding: 20px 0 15px; }
}



/*////*/
/* =========================
   Project1 동적 갤러리(am-gallery) 스타일
   - 카드 구조: <a class="box …"> 안에 .tit_box + <img>
   - 그리드/호버/라이트박스 기본
   ========================= */

/* 컨테이너 & 그리드 */
#project1-gallery .am-gallery .amg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}

/* 빈 상태/센티넬 */
#project1-gallery .am-gallery .amg-empty{padding:16px;color:#666}
#project1-gallery .am-gallery .amg-sentinel{height:1px}

/* 카드 기본(요청: <a class="box …> 구조 유지) */
#project1-gallery .portfolio_li .box{
  position:relative;
  display:block;
  overflow:hidden;
  /* border:1px solid #e9e9ef; */
  border-radius: 1.171875vw;
  /* background: #5067d9; */
  /* text-decoration:none; */
  color:inherit;
  aspect-ratio: 1/1;                 /* 최신 브라우저 비율 유지 */
  /* transition:transform .2s ease; */
  /* width: 100%; */
  /* padding-top: 100%; */
  /* height: 100%; */
}
#project1-gallery .portfolio_li .box:active{transform:scale(.995)} /* 터치 피드백 */

/* 이미지 */
#project1-gallery .portfolio_li .box .img-responsive{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .5s ease;
}
#project1-gallery .portfolio_li .box:hover .img-responsive{
  transform:scale(1.04);
}

/* 텍스트 오버레이 */
#project1-gallery .portfolio_li .box .tit_box{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  /* padding:14px 16px; */
  color:#fff;
  /* background: linear-gradient(transparent, rgba(0, 0, 0, .68)); */
  transform:translateY(100%);
  transition:transform .28s ease;
}
#project1-gallery .portfolio_li .box:hover .tit_box{transform:translateY(0)}
#project1-gallery .portfolio_li .box .tit{font-weight:700}
#project1-gallery .portfolio_li .box .part,
#project1-gallery .portfolio_li .box .tag{opacity:.9; font-size:13px}

/* aspect-ratio 미지원 대응 */
@supports not (aspect-ratio: 4 / 3){
  #project1-gallery .portfolio_li .box{position:relative}
  #project1-gallery .portfolio_li .box::before{
    content:""; display:block; padding-top:75%;
  }
  #project1-gallery .portfolio_li .box .img-responsive,
  #project1-gallery .portfolio_li .box .tit_box{
    position:absolute; inset:0;
  }
}

/* (선택) 라이트박스 기본 스킨 — am-gallery 스크립트의 내장 LB용 */
.amg-lb{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:999999}
.amg-lb.show{display:flex}
.amg-lb-bg{position:absolute; inset:0; background:rgba(0,0,0,.65)}
.amg-lb-box{position:relative; max-width:min(92vw,1400px); max-height:90vh; display:flex; flex-direction:column; gap:8px}
.amg-lb-img{max-width:100%; max-height:80vh; object-fit:contain; background:#000; border-radius:10px}
.amg-lb-cap{display:flex; gap:8px; align-items:center; color:#fff}
.amg-lb-title{margin-right:auto; font-weight:700}
.amg-lb-btn{color:#fff; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:6px 10px}

/* am-gallery용 안전 오버레이 레이어링 */
#project1-gallery .am-gallery .box {
  /* position: relative; */
  /* display: block; */
  /* overflow: hidden; */
}

/* 기존 hover_box가 클릭을 가로채지 않도록 */
#project1-gallery .am-gallery .box .hover_box {
  /* position: absolute; */
  /* inset: 0; */
  /* opacity: 0; */
  /* transition: opacity .4s; */
  /* z-index: 2; */
  /* pointer-events: none; */        /* ✅ 클릭은 아래 a가 받음 */
}

/* 이미지 기본 */
#project1-gallery .am-gallery .box .img-responsive {
  display: block;
  width: 100%;
  height: 100%;
  /* height: auto; */
  object-fit: cover;
}

/* 기본: 완전 숨김(클릭 불가) */
.lb-overlay {
  position: fixed;            /* 뷰포트 고정 */
  inset: 0;
  display: none;              /* 기본 감춤 */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.8);
  z-index: 2147483000;        /* 맨 위 */
}

/* 내부 콘텐츠(이미지 박스) */
.lb-overlay .lb-inner {
  max-width: min(88vw, 1200px);
  max-height: 88vh;
  overflow-y: auto;
}
.lb-overlay .lb-img { max-width: 100%; max-height: 100%; display: block; }


/* 열렸을 때만 보이게 (두 가지 트리거 모두 지원) */
.lb-overlay.is-open,
.lb-overlay:target {
  display: flex; 
}

/* 접근성/보조: aria-hidden=true 면 강제 숨김 */
.lb-overlay[aria-hidden="true"] { display: none !important; }


/* ✅ Lightbox/hover 보장용 드롭-인 패치 */
  /* 최소 라이트박스 스타일 */
  .lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:9999}
  .lb-overlay.show{display:flex}
  .lb-inner{max-width:92vw;max-height:92vh}
  .lb-img{max-width:100%;max-height:92vh}
  .lb-prev,.lb-next,.lb-close{position:absolute;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:40px;line-height:1;cursor:pointer;color:#fff;opacity:.85}
  .lb-close{top:20px;right:20px;transform:none;font-size:32px}
  .lb-prev{left: 15px; top: 50%; transform: translateY(-50%);}
  .lb-next{right: 15px; top: 50%; transform: translateY(-50%); }

  /* 썸네일 호버 오버레이(사이트에 이미 있다면 이 블록은 무시돼도 OK) */
  .am-gallery .box .img{position:relative;overflow:hidden;}
  .am-gallery .box .hover_box{position:absolute;inset:0;display:flex;opacity: 0;transition:opacity .2s;background:var(--purp);color:#fff;padding: 4rem;}
  .am-gallery .box:hover .hover_box{opacity:1}
  .am-gallery .box .hover_box .txt_box .txt{margin-bottom:10px;font-size: 1.953125vw;font-weight: 700;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;/* width: 100%; */max-width: 220px;}
.am-gallery .box .hover_box .txt_box .cat{margin-bottom:10px;font-size: 0.78125vw;}

.am-gallery .box .hover_box .txt_box .body{margin-top: 40%;word-break: break-word;}