@charset "utf-8";

#adminWrap {background-color: #EFF3F6; height: 100vh; height: calc(var(--vh, 1vh) * 100);}
#adminWrap .login_container {height: 100%;}
#adminWrap .login_cont {float: left; display: table; width: 45%; height: 100%;}
#adminWrap .login_cont .login_table_cont {display: table-cell; vertical-align: middle; width: 100%; height: 100%;}
#adminWrap .login_box {max-width: 500px; margin: 0 auto;}
#adminWrap .login_box .top {text-align: center; margin-bottom: 70px;}
#adminWrap .login_box .top > img {height: 40px;}
#adminWrap .login_box .top > h1 {display: block; font-size: 34px; margin-top: 15px; color: #333; font-weight: 600; border-top: 1px solid #ddd; padding-top: 20px;}

#adminWrap .login_box .login_input {width: 100%; margin-bottom: 20px;}
#adminWrap .login_box .login_input label {font-size: 16px; color: #666; font-weight: 600;}
#adminWrap .login_box .login_input .input_field {position: relative; width: 100%; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);}
#adminWrap .login_box .login_input .input_field:after {content: ''; position: absolute; top: 50%; margin-top: -10px; left: 20px; width: 20px; height: 20px; background: no-repeat 50% 50%; background-size: auto 20px; opacity: .6;}
#adminWrap .login_box .login_input.id .input_field:after {background-image: url(/images/icon_user.png);}
#adminWrap .login_box .login_input.pw .input_field:after {background-image: url(/images/icon_pw.png);}
#adminWrap .login_box .login_input .input_field input {width: 100%; border: 0; height: 60px; border-radius: 0; background-color: transparent; padding-left:50px; font-size: 17px; box-sizing:border-box;}
#adminWrap .login_box .login_btn {width: 100%; height: 60px; background-color: #437DEA; margin-top: 20px; font-size: 18px; font-weight: 600; color: #fff;}
#adminWrap .login_box .login_btn:hover {box-shadow: 0 5px 15px 0 rgba(67, 125, 234, .3); color: #fff; opacity: .9;}

#adminWrap .login_bg {float: right; width: 55%; height: 100%; background: url(/images/login_bg.jpg) no-repeat 50% 50%; background-size: cover;}
#adminWrap .login_bg {position: relative; display: table; float: right; width: 55%; height: 100%;}
#adminWrap .link_box {display: table-cell; vertical-align: middle; width: 100%; height: 100%; padding: 0 60px;}
#adminWrap .link_box .item + .item {margin-top: 60px;}
#adminWrap .link_box .item h3 {display: block; font-size: 23px; font-weight: 600; color: #fff; margin-bottom: 25px; padding-left: 20px; font-weight: 600;}
#adminWrap .link_box .link_list {display: block; font-size: 0;}
#adminWrap .link_box .link_list li {display: inline-block; width: 260px; height: 60px; line-height: 60px; background: url(/images/system_arrow.png) no-repeat 90% 50%; background-color: #fff; border-radius: 60px; padding-left: 30px; margin-right: 10px; margin-bottom: 10px; letter-spacing: -0.05rem; box-shadow: 0 10px 35px rgb(0 0 0 / 5%);}
#adminWrap .link_box .link_list li a {display: block; color: #333; font-size: 17px; font-weight: 600;}
#adminWrap .link_box .link_list li:hover a {color: #437DEA;}

/* 아이디 / 비번 찾기  */
.find_tabmenu{display:flex; justify-content:center; margin-bottom:30px; margin-top:-40px; background:#f9f9f9;  overflow:hidden; height:55px; padding:5px; box-sizing:border-box; border-radius:25px; box-shadow:inset 0 2px 3px 0 rgba(0, 0, 0, 0.1); }
.find_tabmenu li{width:50%;}
.find_tabmenu li a{display:block; height:45px; line-height:45px; border-radius:22.5px; font-size:18px; color:#ccc; text-align:center; font-weight:500;}
.find_tabmenu li.on a{border:2px solid #437DEA; background:#fff; color:#437DEA;}

.find_conwrap > p{color:#666; text-align:center; font-size:15px; margin-bottom:20px;}
#adminWrap .login_box .find_conwrap .login_input .input_field input{padding-left:15px;}

#adminWrap .login_box .login_input .input_field.inner_btn{display:flex;}
#adminWrap .login_box .login_input .input_field.inner_btn input{border-radius:4px 0 0 4px; border-right:none; width:calc(100% - 120px); padding-left:15px;}
#adminWrap .login_box .login_input .input_field.inner_btn button{border-radius:0 4px 4px 0; border-left:none; width:120px; background:#f5f9ff; color:#437dea; border-left:1px solid #ededed;}


a.go_link{color:#666; text-align:center; font-size:15px; margin-top:10px; display:block;}
a.go_link:hover{font-style: italic; color:#437DEA; text-decoration: underline;}

/* **************************************** *
 1280px
 * **************************************** */
@media (max-width:1280px){
    #adminWrap .login_box {max-width: none; padding: 0 40px;}
    #adminWrap .login_box .top {margin-bottom: 50px;}
    #adminWrap .login_box .top > h1 {font-size: 30px;}
    #adminWrap .login_box .login_input .input_field input {height: 50px;}
    

    #adminWrap .link_box {padding: 0 4%;}
    #adminWrap .link_box .item h3 {font-size: 20px;}
    #adminWrap .link_box .link_list li {width: calc(50% - 20px); height: 50px; line-height: 50px;}
    #adminWrap .link_box .link_list li a {font-size: 15px;}
}

/* **************************************** *
 1024px
 * **************************************** */
@media (max-width:1024px){
    #adminWrap .login_box .top > img {height: 40px;}
}

/* **************************************** *
 * 768px
 * **************************************** */
@media (max-width:768px){
    #adminWrap {overflow-y: auto;}
    #adminWrap .login_container {display: flex; flex-direction: column; justify-content: space-between; flex-wrap: nowrap; height: auto;}
    #adminWrap .login_cont {display: block; float: none; width: 100%; height: auto; padding: 0;}
    #adminWrap .login_cont .login_table_cont {display: block;}
    #adminWrap .login_box {max-width: none; padding-top: 10%; padding-bottom: 10%;}
    #adminWrap .login_box .top {margin-bottom: 20px;}
    #adminWrap .login_box .top > h1 {font-size: 26px;}
    #adminWrap .login_box .top > img {height: 30px;}

    #adminWrap .login_box .login_input {margin-bottom: 10px;}
    #adminWrap .login_box .login_input .input_field input {font-size: 15px; height: 40px;}
    #adminWrap .login_box .login_btn {height: 50px; margin-top: 10px;}

    #adminWrap .login_bg {display: block; float: none; width: 100%; height: auto;}
    #adminWrap .link_box {padding-top: 8%; padding-bottom: 8%;}
    #adminWrap .link_box .item h3 {font-size: 16px; border: 1px solid #fff; border-radius: 4px; padding: 10px 0; text-align: center;}
    #adminWrap .link_box .link_list {margin: 0 -10px;}
    #adminWrap .link_box .link_list li {height: auto; line-height: 1; background: url(/images/icon_link_wh.png) no-repeat right 50%; background-color: transparent; box-shadow: none; margin-left: 10px; margin-bottom: 15px; padding-left: 0; border-radius: 0;}
    #adminWrap .link_box .link_list li a {font-size: 14px; color: #fff; word-break: keep-all; letter-spacing: -0.08rem;}

    .find_tabmenu{width:80%; margin: 0 auto 30px; height:45px; line-height:45px;}
    .find_tabmenu li a{font-size:16px; height:35px; line-height:35px;}
}

/* **************************************** *
 * 576px
 * **************************************** */
@media (max-width:576px){
    #adminWrap .link_box .item + .item {margin-top: 30px;}
}

/* **************************************** *
 * 420px
 * **************************************** */
 @media (max-width:420px){
    #adminWrap .link_box .link_list {margin: 0;}
    #adminWrap .link_box .link_list li {width: 100%; margin-left: 0; margin-right: 0;}
}