@charset "utf-8";

/* common.css responsive
 * breakpoints: inner(1400)+50 → 1450 / 1024 / 800(project mobile)
 */

@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{
    --font16:max(12px, 15rem);
    --font20:max(15px, 19rem);
    --font18:max(13px, 17rem);
    --font60:48rem;
    --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:16rem;}
  #bo_list{width:100%;}
}

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

@media screen and (max-width:800px){
  :root{
    --font16:14rem;
    --font46:32rem;
    --font30:26rem;
    --font20:16rem;
    --font24:16rem;
    --font18:15rem;
    --font60:38rem;
    --font15:13rem;
    --font26:16rem;

    --gap-lg:80rem;
    --gap-sub:80rem;
    --gap-md:40rem;
    --hd-h:60rem;
  }

  .pc-only{display:none !important;}
  .m-only{display:block;}
  #header .main-logo{width:96rem;height:28rem;}
  .round-btn{display:flex;height:auto;padding:8rem 20rem;gap:4rem;font-size:13rem;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{height:60rem;}
  #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:24rem;font-weight:600;}
  #header.is-dark .ham-btn .menu-ico-wh{display:none;}
  #header.is-dark .ham-btn .menu-ico-bk{display:block;filter:invert(1);}
  #header.is-dark.menu-open .ham-btn .menu-ico-bk{display:none;filter:none;}
  #header.is-dark.menu-open .ham-btn .close-ico{display:block;}

  .main-footer{height:374rem;padding:40rem 0;}
  .main-footer .inner{width:100%;padding:0 20rem;}
  .main-footer .ft-address{gap:40rem;}
  .main-footer .main-logo{width:117rem;height:34rem;}
  .main-footer .top-btn{width:40rem;height:40rem;padding:0 16rem;gap:8rem;font-size:13rem;}
  .main-footer .top-btn span{display:none;}
  .main-footer .top-btn img{width:20rem;height:20rem;}
  .main-footer .ft-info{gap:12rem;font-size:13rem;}
  .main-footer .ft-info dl{gap:10rem;}
  .main-footer .ft-info dt{width:56rem;}
  .main-footer .ft-contact-lst{display:flex;flex-direction:column;gap:12rem;}
  .main-footer .ft-contact-lst dl{gap:10rem;}
  .main-footer .ft-contact-lst dt{width:56rem;}
  .main-footer .copyright{margin-top:40rem;padding-top:24rem;font-size:13rem;}

  #float-menu{right:20rem;bottom:20rem;}
  #float-menu a,
  #top-btn{width:50rem;height:50rem;}
  #float-menu a:hover{padding:0 20rem;gap:6rem;}
  #float-menu a .float-txt{font-size:15rem;}

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