@charset "utf-8";
/* style.css */

/*
    px 대신 rem 단위 써주세요.
    10px = 1rem 이 되도록 reset.css에 세팅해두었습니다.
    ex) 16px = 1.6rem / 164px = 16.4rem
    다만 10px 이하일 경우는 px로 사용해주세요
    8px      (O)
    0.8rem  (X)
*/

/* layout : max-width:400px=40rem */
#wrap{ position:relative; width:100%; max-width:40rem; margin:0 auto; background-color:#F5F5F5; }
.body_login #wrap{ max-width:none; }
.container{ width:100%; min-height:calc(100vh - 32.2rem); margin-top:5rem; padding-bottom:2rem; }
.body_login .container{ max-width:40rem; margin-left:auto; margin-right:auto; }
.stn{ width:100%; padding-top:2rem; }
.cont{ width:calc(100% - 20px); margin:0 auto; }

/* header & footer */
#header{ position:fixed; top:0; left:50%; width:100%; max-width:40rem; height:5rem; padding:1.6rem 2rem; background-color:#fff; transform: translateX(-50%); z-index:10; }
.body_login #header{ max-width:none; padding-left:10%; padding-right:10%; }
#header h1{ width:12rem; }
#header a{ display:flex; width:100%; }
#header .btn_menu{ position: relative; width: 2rem; height: 1.6rem; z-index: 10; }
#header .btn_menu i{position: absolute; left: 0; width: 100%; height: 0.2rem; border-radius: 0.8rem; background-color: #000; transition: all .4s; }
#header .btn_menu i:nth-child(1){ top: 0; }
#header .btn_menu i:nth-child(2){ top: 50%; transform: translateY(-50%); }
#header .btn_menu i:nth-child(3){ bottom: 0; }
#header .btn_menu.on i:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
#header .btn_menu.on i:nth-child(2){ opacity: 0; }
#header .btn_menu.on i:nth-child(3){ bottom: 50%; transform: translateY(50%) rotate(-45deg); }
#header .btn_menu.on ~ #gnb{ opacity: 1; pointer-events: all; }
#header .btn_menu.on ~ #gnb .gnb_cont{ right: 0; }
#gnb{ overflow: hidden; opacity:0; position: fixed; top: 5rem; right: 0; width: 100%; height: calc(100vh - 5rem); pointer-events: none; transition: opacity 0.3s;  }
.gnb_cont{ position: absolute; right: -100%; width: 80%; height: calc(100vh - 5rem); background-color: #fff ; transition: all 0.4s; }
#gnb::after{ content: ''; display: block; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.65); }
.gnb_cont ul{ padding: 0 1.2rem; }
.gnb_cont li{ border-bottom: 1px solid #999; }
.gnb_cont li a{ justify-content: center; padding: 1.2rem 0; font-size: 2rem; }
.gnb_cont li a:hover{ color: #f42d2f; }
.gnb_cont .btn_logout,.gnb_cont .btn_login{ display:flex !important; align-items: center; justify-content: center; margin:0 auto; margin-top:5rem; bottom:8rem; left:50%; width:calc(100% - 2rem) !important; height:5rem;  background-color:#F42D2F; font-size:1.8rem; font-weight: 600; color:#fff; z-index:10 }

#footer{ width:100%; padding:3rem 0; background-color:#222; font-size:1.2rem; line-height:1.5; color:#ddd; }
.body_login #footer{ padding-left:10%; padding-right:10%; }
#footer a{ color:#ddd; }
.footer_logo{ width:14rem; }
.terms_wrap{ padding:2rem 0; }
.copyright{ padding-top:2rem; }


/* common */
.box_wht{ padding:1.6rem; border-radius: 8px; background-color:#fff; box-sizing: border-box; }
.stn_main_tit{ margin-bottom:1.2rem; font-weight: bold; font-size:1.7rem; }
.stn_main_tit span{ font-weight: 800; }
.stn_sub_tit{  margin-bottom:1.2rem; font-weight: bold; font-size:1.7rem; }
.tac{ text-align:center; }
.flex{ display:flex; justify-content: space-between; align-items: center; }
.flex_center{ display:flex; justify-content: center; align-items: center; }
.flex_around{ display:flex; justify-content: space-around; align-items: center; }
.btn_default{ padding:1.2rem 2rem; border-radius: 0.8rem; background: linear-gradient(to left, #F42D2F, #F85F39); font-weight: bold; color:#fff; }
.blind {overflow: hidden; position: absolute; width: 1px; height: 1px; margin-top: -1px; border: 0; font-size: 1px; clip: rect(0, 0, 0, 0); z-index: -1;}
.col_blue{ color:#347fff; }
.col_red{ color:#f42d2f; }
.col_orange{ color:#fa9327; }
.scroll_disable {overflow: hidden; touch-action: none;}


/* .aside_header */
.aside_header{ padding:1.6rem 0; background: linear-gradient(to left, #ea2b2b, #fb8654); font-size: 1.8rem; color:#fff; }
.owner_date span{ display:block; text-align: right; }

@media screen and (max-width:400px) {
    .body_login #header{ padding-left:2rem; padding-right:2rem; }
    .body_login #footer{ padding-left:0; padding-right:0; }
}