@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; padding-left: 24px; 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/cms/icon_user.png);}
#adminWrap .login_box .login_input.pw .input_field:after {background-image: url(/images/cms/icon_pw.png);}
#adminWrap .login_box .login_input .input_field input {width: 100%; border: 0; height: 60px; border-radius: 0; background-color: transparent; padding: 0 40px; font-size: 17px;}
#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/cms/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/cms/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;}

/* **************************************** *
 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/cms/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;}
}

/* **************************************** *
 * 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;}
}