/* top nav */
#header {position: relative; z-index: 100;}
.utiltop {position: relative; width: 100%; height: 66px; background: #4F73DF; padding: 0 20px;}
.utiltop .logo {color: #fff; font-size: 1.75rem; position: absolute; top: 50%; left: 20px; transform: translateY(-50%);}
.util {display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
.user_name {color: rgba(255,255,255,.7); margin-right: 10px; display: inline-block;}
.user_name > b {color: #fff;}
.util > ul {display: inline-block;}
.util > ul > li {display: inline-block; margin: 0 4px;}
.navbar {position: relative; width: 100%; background: #fff;}
.navbar .nav-link {display: inline-block;}
.navbar .nav-link > a {display: block; color: #6c757d; padding: 15px 20px;}
.navbar .nav-link:hover > a,
.navbar .nav-link.active > a {color: #4F73DF; font-weight: 500;}

/* sidebar */
.sidebar {position: absolute; left: 0; top: 0; bottom: 0; width: 250px; min-height: 100vh; background: #fff; transition: all 0.3s ease-out 0s;}
.sidebar .side-heading {padding: 1.5rem 1.5rem 1rem; text-align: left; color: #858796; font-weight: 800;}
.sidebar .side-link {position: relative; padding: 1rem 1.625rem; border-left: 3px solid transparent;}
.sidebar .side-link:before {content: '→'; display: inline-block; position: relative; margin-right: .625rem; color: #6c757d; transition: all .1s ease; transform: translateX(0);}
.sidebar .side-link:hover a,
.sidebar .side-link.active a {color: #4F73DF;}
.sidebar .side-link:hover:before,
.sidebar .side-link.active:before {color: #4F73DF; transform: translateX(4px);}
.sidebar .side-link a {color:#6c757d;}
.sidebar .side-link.active {background: rgba(79,115,223,.1); border-left: 3px solid #4F73DF;}

/* admin login */
#adminWrap {background: #F8F9FC; width: 100%; height: 100%; display: table;}
.login_wrap {display: table-cell; vertical-align: middle;}
.login_wrap .admin_logo { margin: 0 auto 20px; text-align: center;}
.login_wrap .admin_logo > img {height: 32px;}
.login_box {max-width: 480px; margin: 0 auto;}
.login_form {border: 1px solid #ededed; background: #fff; padding: 20px 30px; border-radius: 8px; box-shadow: 0 5px 10px 0 rgba(0,0,0,.05);}
.login_form h3 {font-size: 18px; text-align: center; color: #6c757d; font-weight: 600;}
.login_form .login_input {margin-top: 20px;}
.login_input label {display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; color: #4F73DF;}
.login_input input {display: block; width: 100%;}
.login_form .checkbox {margin-top: 20px; display: block;}
.login_form .admin_btn {display: block; width: 100%; height: 48px; line-height: 46px; margin-top: 40px; background: linear-gradient(45deg, #4F73DF, #4262BE); border-radius: 4px; color: #fff; font-weight: 600; text-align: center;}
.login_form .btn_wrap {margin-top: 20px; text-align: center;}
.login_form .btn_wrap > a {color: #4F73DF; font-size: 14px;}
.login_form .btn_wrap > a:hover {text-decoration: underline;}
.login_wrap .admin_info {color: #6c757d; overflow: hidden; margin-top: 40px;}
.admin_info .sub_tit {float: left;}
.admin_info .admin_list {font-size: 14px; float: right;}
.admin_list li {display: block;}
.admin_list li b {width: 60px; display: inline-block;}

/* footer */
.footer {padding: 2rem 0; color: #6c757d;}
.footer .copyright span {font-size: .8rem;}

/* amdin id/pw find */
.login_tit {text-align: center; margin-bottom: 30px; font-size: 24px; font-weight: 800;}
.login_form p {color: #858796; font-size: 14px;}
.login_form .tab {overflow: hidden; background: #F8F9FC; border-radius: 8px; padding: 5px 5px; margin-bottom: 20px;}
.login_form .tab a {display: block; float: left; width: 50%; text-align: center; padding: 5px 0; color: #6c757d;}
.login_form .tab a.active {background: #EDF1FC; border-radius: 8px; color: #4F73DF; font-weight: 600;}

.input_col input {display: inline-block;}

/* footer */
.footer {padding: 2rem 0; color: #6c757d;}
.footer .copyright span {font-size: .8rem;}


/* **************************************** *
 * 767px
 * **************************************** */
@media (max-width: 767px) {
    #adminWrap {padding: 0 20px;}
    .utiltop {padding: 0 10px;}
    .utiltop .logo {display: none;}
    .util {right: auto; display: flex; align-items: center;}

    .navbar {white-space: nowrap; overflow-x: scroll;}
    .navbar .nav-link > a {padding: 15px 15px;}

    /* sidebar */
    .sidebar {left: -250px;}
    .side_btn {position: absolute; left: 0; display: block; width: 42px; height: 42px; background: #858796; padding: 15px 13px; border-radius: 3px; transition: .3s;}
    .side_btn .side_menu {position: relative; width: 100%; height: 100%; cursor: pointer;}
    .side_btn .side_menu .bar {position: absolute; right: 0; display: block; width: 100%; height: 2px; background-color: #fff; transition: all .4s;}
    .side_btn .side_menu .bar:nth-child(1) {top: 0;}
    .side_btn .side_menu .bar:nth-child(2) {display: block; top: 50%; margin-top: -1px;}
    .side_btn .side_menu .bar:nth-child(3) {bottom: 0;}

    .side_toggle .sidebar {left: 0;}
    .side_toggle .side_btn {left: 250px;}
    .side_toggle.side_btn {background: #4262BE;}
    .side_toggle.side_btn .side_menu .bar:nth-child(1) {transform: rotate(45deg); top: 50%;}
    .side_toggle.side_btn .side_menu .bar:nth-child(2) {display: none;}
    .side_toggle.side_btn .side_menu .bar:nth-child(3) {transform: rotate(-45deg); top: 50%;}

    /* .side_btn {position: absolute; left: 250px; display: block; width: 46px; height: 46px; background: #fff; border: 1px solid #4262BE; padding: 15px 10px; transition: .3s;}
    .side_toggle .sidebar {left: -250px;}
    .side_btn .side_menu {position: relative; width: 100%; height: 100%; cursor: pointer;}
    .side_btn .side_menu .bar {position: absolute; right: 0; display: block; width: 100%; height: 2px; background-color: #858796; transition: all .4s;}
    .side_btn .side_menu .bar:nth-child(1) {transform: rotate(45deg); top: 50%;}
    .side_btn .side_menu .bar:nth-child(2) {display: none;}
    .side_btn .side_menu .bar:nth-child(3) {transform: rotate(-45deg); top: 50%;}
    .side_toggle.side_btn {left: 0;}
    .side_toggle.side_btn .side_menu .bar {background-color: #4262BE;}
    .side_toggle.side_btn .side_menu .bar:nth-child(1) {top: 0; transform: rotate(0);}
    .side_toggle.side_btn .side_menu .bar:nth-child(2) {display: block; top: 50%; margin-top: -1px;}
    .side_toggle.side_btn .side_menu .bar:nth-child(3) {top: auto; bottom: 0; transform: rotate(0);} */
}

/* **************************************** *
 * 767px
 * **************************************** */
 @media (max-width: 767px) {
    #adminWrap {padding: 0 20px;}
    .utiltop {padding: 0 10px;}
    .utiltop .logo {display: none;}
    .util {right: auto; display: flex; align-items: center;}

    .navbar {white-space: nowrap; overflow-x: scroll;}
    .navbar .nav-link > a {padding: 15px 15px;}

    /* sidebar */
    .sidebar {left: -250px;}
    .side_btn {position: absolute; left: 0; display: block; width: 42px; height: 42px; background: #858796; padding: 15px 13px; border-radius: 3px; transition: .3s;}
    .side_btn .side_menu {position: relative; width: 100%; height: 100%; cursor: pointer;}
    .side_btn .side_menu .bar {position: absolute; right: 0; display: block; width: 100%; height: 2px; background-color: #fff; transition: all .4s;}
    .side_btn .side_menu .bar:nth-child(1) {top: 0;}
    .side_btn .side_menu .bar:nth-child(2) {display: block; top: 50%; margin-top: -1px;}
    .side_btn .side_menu .bar:nth-child(3) {bottom: 0;}

    .side_toggle .sidebar {left: 0;}
    .side_toggle .side_btn {left: 250px;}
    .side_toggle.side_btn {background: #4262BE;}
    .side_toggle.side_btn .side_menu .bar:nth-child(1) {transform: rotate(45deg); top: 50%;}
    .side_toggle.side_btn .side_menu .bar:nth-child(2) {display: none;}
    .side_toggle.side_btn .side_menu .bar:nth-child(3) {transform: rotate(-45deg); top: 50%;}

    /* .side_btn {position: absolute; left: 250px; display: block; width: 46px; height: 46px; background: #fff; border: 1px solid #4262BE; padding: 15px 10px; transition: .3s;}
    .side_toggle .sidebar {left: -250px;}
    .side_btn .side_menu {position: relative; width: 100%; height: 100%; cursor: pointer;}
    .side_btn .side_menu .bar {position: absolute; right: 0; display: block; width: 100%; height: 2px; background-color: #858796; transition: all .4s;}
    .side_btn .side_menu .bar:nth-child(1) {transform: rotate(45deg); top: 50%;}
    .side_btn .side_menu .bar:nth-child(2) {display: none;}
    .side_btn .side_menu .bar:nth-child(3) {transform: rotate(-45deg); top: 50%;}
    .side_toggle.side_btn {left: 0;}
    .side_toggle.side_btn .side_menu .bar {background-color: #4262BE;}
    .side_toggle.side_btn .side_menu .bar:nth-child(1) {top: 0; transform: rotate(0);}
    .side_toggle.side_btn .side_menu .bar:nth-child(2) {display: block; top: 50%; margin-top: -1px;}
    .side_toggle.side_btn .side_menu .bar:nth-child(3) {top: auto; bottom: 0; transform: rotate(0);} */
}