@charset "utf-8";

/* common.css responsive
 * breakpoints: inner+50 → 1450 / 1024 / 800
 * :root font = Figma Kor/P* (PC). 800px = Mobile 375 시안
 */

@media screen and (max-width:1450px){
  .inner{width:100%;padding:0 50rem;}
  #header .hd-in>.inner{width:100%;margin:0;padding:0 50rem;}
}

@media screen and (max-width:1024px){
  :root{
    --font14:max(12px,13rem);
    --font15:max(12px,14rem);
    --font16:max(12px,15rem);
    --font18:max(13px,17rem);
    --font20:max(14px,18rem);
    --font24:max(15px,22rem);
    --font45:36rem;
    --font65:52rem;

    --gap-lg:60rem;
    --gap-sub:120rem;
    --gap-md:50rem;
    --pad-x:30rem;
  }

  .inner{padding:0 30rem;}
  #header .hd-in>.inner{padding:0 30rem;}
  #header .hd-gnb{width:auto;}
  #header .hd-gnb ul{gap:40rem;}
  #header .hd-gnb a{font-size:var(--font16);}
  #bo_list{width:100%;}
}

@media screen and (min-width:801px){
  .m-only{display:none !important;}
}

@media screen and (max-width:800px){
  :root{
    /* Typography — Figma Mobile 375 (Main_mo / About - Mobile 375 등)
     * PC Kor/P65·45·24·18 → mo 32·28·20·16 */
    --font14:13rem;
    --font15:14rem;
    --font16:15rem;
    --font18:16rem;
    --font20:17rem;
    --font22:20rem;
    --font24:20rem;
    --font45:28rem;
    --font65:32rem;

    /* Layout — mo 공통 (좌우 20 / 섹션 60 / 서브 간격 80) */
    --pad-x:20rem;
    --sec-pad:60rem;
    --inner:100%;
    --gap-sm:24rem;
    --gap-md:40rem;
    --gap-lg:60rem;
    --gap-xl:60rem;
    --gap-sub:80rem;
    --section-space:var(--gap-sub);
    --hd-h:60rem;
  }

  body{font-size:var(--font16);}

  .pc-only{display:none !important;}
  .m-only{display:block !important;}
  #header .ham-btn.m-only{display:block !important;}
  #header .mo-menu.m-only{display:flex !important;}
  #header .main-logo{width:180rem;position:relative;top:4px;}
  .round-btn{display:flex;padding:8rem 20rem;gap:4rem;font-size:var(--font14);letter-spacing:.39rem;}

  .frm_input {height: 40rem}
  .wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input, .form_01 li.is_captcha_use {border-radius: 5rem}
  .inner{padding:0 20rem;}

  #top_btn.in-ft{position:absolute !important;right:0 !important;top:25rem;}
  #top_btn {right: 15rem; bottom: 15rem}
  #top_btn img{width:50rem;}

  #reg_result {max-width: none; width: auto; margin: 0 20rem}

  #container_title {padding: var(--gap-sub) 0 30rem;}
  a.btn, .btn {height: 40rem; padding: 0 20rem; font-size: var(--font16); gap: 5rem}

  .tbl_wrap {border-top:1rem solid #000}
  .thead {display: none}
  .thead li {height: 40rem}
  .thead li,
  .tbody li {font-size: var(--font16)}
  .tbody {flex-direction: column}
  .tbody li {height: auto}

  .tbody {padding: 15rem 100rem 15rem 10rem; position: relative}
  .thead .th_stat, .tbody .td_stat {position: absolute; width: auto; right: 0; top:50%; font-size: 12rem; padding: 0 8rem; height: 22rem; line-height: 22rem; transform: translate(0, -50%)}
  .thead .num, .tbody .num {display: none}
  #bo_list .td_chk {position: absolute; left: 0; top:50%}
  .tbody li .etc {font-size: 12rem}
  .tbody li .etc span:before {height: 10rem}
  .chk_li {font-size: var(--font18)}
  .form_01 li {margin-bottom: 15rem}

  #header .hd-in>.inner{width:100%;margin:0;padding:0 20rem;}
  #header .ham-btn{display:block;position:relative;z-index:992;}
  #header .mo-menu{display:flex;position:fixed;top:0;left:100%;z-index:990;width:100%;height:100dvh;padding:100rem 20rem 40rem;align-items:flex-start;background:#fff;color:#2b2b2b;transition:left .3s;}
  #header .mo-menu.active{left:0;}
  #header .hd-gnb-mo{width:100%;}
  #header .hd-gnb-mo li+li{margin-top:24rem;}
  #header .hd-gnb-mo a{font-size:var(--font20);font-weight:600;}
  #header.is-dark .ham-btn .menu-ico-wh{display:none;}
  #header.is-dark .ham-btn .menu-ico-bk{display:block;}
  #header.is-dark.menu-open .ham-btn .menu-ico-bk{display:none;}
  #header.is-dark.menu-open .ham-btn .close-ico{display:block;}

  .main-footer{padding:40rem 0;}
  .main-footer .ft-top,
  .main-footer .ft-bot{padding:0 20rem;}
  .main-footer .ft-top{flex-direction:column;align-items:flex-start;gap:24rem;}
  .main-footer .ft-logo{width:140rem;}
  .main-footer .ft-tel{width:fit-content;justify-content:space-between;padding:14rem 16rem;}
  .main-footer .ft-links{flex-wrap:wrap;gap:12rem 16rem;}
  .main-footer .ft-info p{gap:6rem 10rem;font-size:12rem;}
  .main-footer .ft-info span + span::before{display:none;}

  #float-menu{right:20rem;bottom:20rem;}
  #float-menu a,
  #top-btn{width:50rem;}
  #float-menu a img{width:34rem;}
  #top-btn img{width:20rem;}

  .layer-pop-com .pop-bx{width:calc(100vw - 40rem);padding:30rem;}
  .layer-pop-com h4{font-size:var(--font20);}
  .layer-pop-com .close-btn img{width:25rem;}

  .main-footer .ft-tel span{font-size:15rem;}
  .main-footer .ft-tel strong{font-size:18rem;}
  .main-footer .copyright{font-size:12rem;}
}