html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}
.main{
    width: 100%;
    height: 100%;
    background-color:#fff;
    position: relative;;
}
.main:after {content: ''; position: absolute;width: 100%;height: 50%;bottom: 0;left: 0;background: transparent linear-gradient(180deg, #5780F7 0%, #0B52A9 79%, #004B9E 100%);}
.main_foot {display: none; font-size: 12px;width: 100%;height: 100px;background: #444;color: #fff; padding: 12px 20px 0; position: absolute;left: 0;bottom: 0;}
.main_foot > dl {}
.main_foot > dl dt {font-family: 'PlayfairDisplay-Bold', serif; font-size: 18px;margin: 0 0 8px;}
.main_foot > dl dd {}
.main_foot > dl dd > ul {display: flex;}
.main_foot > dl dd > ul li {position: relative; height: 18px; padding: 0 13px 0 0;}
.main_foot > dl dd > ul li:after {content: ''; width: 1px;height: 9px;position: absolute;right: 5px;top: 5px;background: #ddd;}
.main_foot > dl dd > ul li:last-child {}
.main_foot > dl dd > ul li:last-child::after {content: none;}
.main_foot > label {color: #999;}

.logo{
    width: 150px;
    height: 48px;
    top: 48%;
    left:50%;
    position: absolute;
    background: transparent url(/assets/image/admin/fp_logo2.svg) 0% 0% no-repeat padding-box;
    background-size: 150px 48px;
    background-position: center center;
    transform: translate(-50%,-270px);
}
.login_box{
    position: absolute;
    width: 720px;
    height: 450px;
    background-color: #fff;
    border-radius: 0;
    top: calc(50% - 50px);
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0 0 0;
    z-index: 1;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
}
.login_box:after {content: 'Copyright ©2025 링크웍스. All rights reserved.'; font-weight: 300; color: #FFF;position: absolute;bottom: -70px;left: 0;width: 100%;text-align: center;font-size: 14px;height: 22px;line-height: 22px;opacity: 0.8;}

.login_box > div {width: 50%; height: 100%; float: left;}
.login_box .login_box_txt {    background: transparent linear-gradient(180deg, #5780F7 0%, #0B52A9 79%, #004B9E 100%);     display: flex;}
.login_box .login_box_txt > dl {color: #FFF; text-align: center; align-self: center;width: 100%;}
.login_box .login_box_txt > dl dt {font-weight: 900; font-family: 'PlayfairDisplay-Bold', serif; font-size: 36px; margin: 0 0 10px;}
.login_box .login_box_txt > dl dd {font-family: 'PlayfairDisplay-Regular', serif;}

.login_box .login_box_info {font-weight: 300;color: #FFF;position: absolute;bottom: -40px;left: 0;width: 100%;text-align: center;font-size: 14px;height: 22px;line-height: 22px;opacity: 0.8;}

.login_title{
    font-size: 33px;
    width: 100%;
    height: 110px;
    line-height: 100px;
    font-weight: 500;
    text-align: center;
    font-family: 'PlayfairDisplay-Bold', serif;
    margin: 30px 0 0;
}

.login_input{
    width: calc(100% - 48px);
    height: 48px;
    padding: 0 24px;
    margin: 0 auto 4px;
}

.login_input span{
    display: block;
    color: #555555;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    width: 100%;
    display: none;
}
.login_input input{
    width: 100%;
    height: 48px;
    border: 1px solid #C4CDD8;
    border-radius: 4px;
    text-indent: 8px;
}

.login_storage {width: calc(100% - 48px);margin: 10px auto 0;padding: 0 24px; height: 20px;line-height: 20px;}
.login_storage .login_storage_chk {display: inline-block; float: left; height: 20px; line-height: 20px; margin: 0 8px 0 0; padding: 0 0 0 20px; cursor: pointer; position: relative; font-size: 13px;}
.login_storage .login_storage_chk:before {border-radius: 4px;display: block;content: "";border: 1px solid #999;position: absolute;top: 1px;left: 0;width: 16px;height: 16px;background: #fff;}
.login_storage .login_storage_chk.active {color: #5780F7;}
.login_storage .login_storage_chk.active:before {border-color: #5780F7;background: #5780F7;}
.login_storage .login_storage_chk.active:after {position: absolute;top: 3px;left: 1px;content: "";color: #fff;font-size: 13px;font-weight: 500;background: url('/assets/image/min_chk_white.svg') no-repeat 50%;width: 16px;height: 16px;}

.login_btn_box{margin: 10px auto 0;position: relative;padding: 0 24px;width: calc(100% - 48px);height: auto;text-align: center;vertical-align: middle;}

.login_btn{width: 100%;height: 48px;line-height: 46px;color: #fff;font-weight: 500;background: transparent linear-gradient(147deg, #5780F7 0%, #0B52A9 79%, #004B9E 100%);border-radius: 4px;cursor: pointer;}

.join_btn{width: 100%;height: 48px;line-height: 48px;color: #999;border-radius: 8px;cursor: pointer;}

.join_find {width: 100%;height: auto;line-height: 24px;font-size: 14px;display: inline-block;margin: 20px 0 0;}

.join_find .join_box {float: left; height: 24px; line-height: 24px; width: 100%;}
.join_find .join_box dt {float: left; height: 24px; line-height: 24px;}
.join_find .join_box dd {float: right; height: 24px; line-height: 24px; color: #5780F7;cursor: pointer;margin: 0 0 0 5px; position: relative;}
.join_find .join_box dd:after {content: '';position: absolute;left: 0;bottom: -1px;width: 0;height: 1px;background-color: #5780F7;-webkit-transition: width .3s ease-out;transition: width .3s ease-out;}
.join_find .join_box dd:hover:after {width: 100%;}

/* ***** PAD ***** */
@media screen and (max-width:999px) {
    html, body {
        overflow: auto;
    }

    .main {background: #FFF;}
    .login_box {width: 100%; min-height: 100vh; position: relative;top: initial;left: initial;transform: initial;height: auto;padding: 68px 24px 24px;border-radius: 0px;background: #FFF;}
    .login_input {width: 100%;height: 48px; padding: 0 0 0; margin: 0 0 10px;}
    .login_input span {display: none;}
    .login_input input {margin: 0 0 0;}

    .login_storage {padding: 0 0 0;width: 100%;}

    .login_btn_box {width: 100%; padding: 0 0 0; height: auto;}
    .login_btn {margin: 10px 0 0;}

    .login_box:after {content: none;}
    .login_box > div {width: 100%;}
    .login_box .login_box_txt {display: none;}

    .main_foot {height: auto;position: relative;padding: 20px 24px 20px;}
    .main_foot > dl dd > ul {display: block;}
    .main_foot > dl dd > ul li {height: auto; padding: 0 0 0; color: #9A9CA4;}
    .main_foot > dl dd > ul li:after {content: none;}

    .login_box .login_box_info {display: none;}
}