@charset "UTF-8";

/*-------------------------------------------------
sub Content Style Sheet
Version : 1.0
Author : KEB
Last update : 2022. 12. 07.
-------------------------------------------------*//* 
*/

.login_tab{display: flex;gap: 5px;margin-top: 20px;}
.login_tab > li > a{line-height: 1;display: block;font-size: 18px;font-weight: 500;color: #4e4e4e;margin-right: 4px;align-self: center;border: 1px solid #dfdfdf;border-radius: 3px;padding: 10px 25px 10px 54px;box-sizing: border-box;position: relative;}
.login_tab > li > a:before{position:absolute;content:'';display:block;background: url(../../images/login/ico_radio_off.png)no-repeat;width: 18px;height: 18px;left: 25px;top: 50%;transform: translateY(-50%);transition:all 0.3s;}
.login_tab > li.on > a{color: #fff;font-weight:700;background-color: #0049b3;border: 1px dotted #0049b3;box-shadow: 0px 5px 10px rgba(0,0,0,0.2);}
.login_tab > li.on > a:before{background: url(../../images/login/ico_radio_on.png)no-repeat;transition:all 0.3s;}
.login_tab > li:hover > a:before{background: url(../../images/login/ico_radio_on.png)no-repeat;transition:all 0.3s;}
.login_tab > li:hover > a{font-weight: 700;background-color: #0049b3;border: 1px dotted #0049b3;box-shadow: 0px 5px 10px rgba(0,0,0,0.2);}

/* 로그인 > 공단 */
.login01_wrap{position: relative;height: 100%;min-width: 1240px;min-height: 930px;overflow: hidden;background: url(../../images/login/bg_login01.png)no-repeat center 0;background-size: cover;}
.login01_inner{width: 1510px;margin: 0 auto;position: relative;box-sizing: border-box;z-index: 1;padding-left: 135px;}
.login01_left{margin-top: 210px;box-sizing: border-box;}
.login01_left .login01_top{display: flex;gap:10px;}
.login01_left .login01_top span {font-size: 18px;background: #093777;color: #fff;padding: 0px 15px;border-radius: 25px;align-self: center;}
.login01_left .login01_tit{margin-top: 35px;}
.login01_left .login01_tit > span{font-size: 24px;font-weight: 700;color: #125dab;letter-spacing: -0.15px;line-height: 1;display: block;}
.login01_left .login01_tit > em{font-family: 'Gmarket';font-size: 38px;font-weight: 700;color: #000000;letter-spacing: -3px;line-height: 1;display: block;}
.login01_left .login01_tit02 {margin-top: 10px;font-size: 15px;color: #000000;padding: 0px 15px;align-self: center;}

.login01_input{display: flex;gap: 10px;margin-top: 50px;}
.login01_input > ul{flex: 0 360px;}
.login01_input > ul > li{margin-top: 10px;}
.login01_input > ul > li:first-of-type{margin-top:0;}
.login01_input > ul > li .login01_id{font: 300 16px Noto Sans Korean;background: #f8f8f8 url(../../images/login/ico_id_off.png)no-repeat 25px center;padding: 19px 25px 19px 57px;border: 0;border: 1px solid #f8f8f8;border-bottom: 1px solid #cccccc;outline: none;box-sizing: border-box;color: #999999;font-size:16px;letter-spacing:0;line-height:1;font-weight:300;width: 100%;}
.login01_input > ul > li .login01_id:focus{background: #fff url(../../images/login/ico_id01_on.png)no-repeat 25px center;border-color:#34a2d1;}
.login01_input > ul > li .login01_id::placeholder{color:#cccccc;}
.login01_input > ul > li .login01_pw{font: 300 16px Noto Sans Korean;background: #f8f8f8 url(../../images/login/ico_pw_off.png)no-repeat 25px center;padding: 19px 25px 19px 57px;border: 0;border: 1px solid #f8f8f8;border-bottom: 1px solid #cccccc;outline: none;box-sizing: border-box;color: #999999;font-size:16px;letter-spacing:0;line-height:1;font-weight:300;width: 100%;}
.login01_input > ul > li .login01_pw:focus{background: #fff url(../../images/login/ico_pw01_on.png)no-repeat 25px center;border-color:#34a2d1;}
.login01_input > ul > li .login01_pw::placeholder{color:#cccccc;}
.login01_input > .btn_login01{display:table;background: linear-gradient(135deg,#39a5d3,#0282c4);font-size: 18px;font-weight: 400;color: #fff;flex: 0 120px;width: 120px;}
.login01_input > .btn_login01 > span{display:table-cell;vertical-align: middle;text-align: center;}

.login01_input > .btn_login01.type02{    width: 375px;flex: 0 375px;height: 65px;border-radius: 40px;}

.login01_save {font-size: 15px;font-weight: 300;color: #000000;letter-spacing: 0;line-height: 1;margin-top: 20px;margin-bottom: 45px;}
.login01_save > label{cursor: pointer;line-height: 1;word-break: keep-all;vertical-align: middle;}
.login01_save input[type=checkbox]{background: url(../../images/login/ico_check02_off.png)no-repeat 0;width: 15px;height: 15px;vertical-align: middle;-webkit-appearance: none;-webkit-box-shadow: none;-moz-box-shadow: none;margin-right: 10px;cursor: pointer;border: 0;}
.login01_save input[type=checkbox]:checked{background: url(../../images/login/ico_check02_on.png)no-repeat;}
.login01_save > label span{line-height: 1;vertical-align: middle;}

.login01_copy > p{font-size: 14px;font-weight: 300;color: #b8b8b8;letter-spacing: 0;line-height: 24px;}

/* 로그인 > 공급사 */
.login02_wrap{position: relative;height: 100%;min-height: 930px;min-width: 1240px;overflow: hidden;}
.login02_wrap:before{position:absolute;content:'';display:block;background:url(../../images/login/bg_login02_left.png)no-repeat;width: 275px;height: 317px;left: 0;bottom: 0;}
.login02_wrap:after{position:absolute;content:'';display:block;background:url(../../images/login/bg_login02_right.png)no-repeat;width: 684px;height: 527px;right: 0;top: 0;z-index: 0;}
.login02_inner{width: 1510px;margin: 0 auto;position: relative;display: flex;box-sizing: border-box;z-index: 1;}
.login02_left{margin-top: 150px;padding-left: 135px;box-sizing: border-box;}
.login02_left .login02_top{font-family: 'Gmarket';font-size: 22px;font-weight: 300;color: #cccccc;letter-spacing: 10px;text-transform: uppercase;line-height: 1;}
.login02_left .login02_tit{margin-top: 20px;}
.login02_left .login02_tit > span{display: flex;gap:10px;}
.login02_left .login02_tit > em{font-size: 44px;font-weight: 700;color: #000000;letter-spacing: -3px;line-height: 1;display: block;margin-top: 15px;}
.login02_left .login02_tit > span > em:first-of-type{font-size: 24px;font-weight: 700;/* background: #0049b3; */letter-spacing: -0.15px;line-height: 1;display: block;color: #000;padding: 7px 0px;border-radius: 25px;}
/*.login02_left .login02_tit > span > em:last-of-type{font-size: 18px;background: #093777;color: #fff;padding: 0px 15px;border-radius: 25px;}*/

.login02_input{display: flex;gap: 10px;margin-top: 50px;}
.login02_input > ul{flex: 0 340px;}
.login02_input > ul > li{margin-top: 10px;}
.login02_input > ul > li:first-of-type{margin-top:0;}
.login02_input > ul > li .login02_id{font: 300 16px Noto Sans Korean;background: #f4f4f4 url(../../images/login/ico_id_off.png)no-repeat 25px center;padding: 19px 25px 19px 57px;border: 0;border-radius: 5px;border: 1px solid #f4f4f4;outline: none;box-sizing: border-box;color: #999999;font-size:16px;letter-spacing:0;line-height:1;font-weight:300;width: 100%;}
.login02_input > ul > li .login02_id:focus{background: #fff url(../../images/login/ico_id_on.png)no-repeat 25px center;border-color:#125dab;}
.login02_input > ul > li .login02_id::placeholder{color:#cccccc;}
.login02_input > ul > li .login02_pw{font: 300 16px Noto Sans Korean;background: #f4f4f4 url(../../images/login/ico_pw_off.png)no-repeat 25px center;padding: 19px 25px 19px 57px;border: 0;border-radius: 5px;border: 1px solid #f4f4f4;outline: none;box-sizing: border-box;color: #999999;font-size:16px;letter-spacing:0;line-height:1;font-weight:300;width: 100%;}
.login02_input > ul > li .login02_pw:focus{background: #fff url(../../images/login/ico_pw_on.png)no-repeat 25px center;border-color:#125dab;}
.login02_input > ul > li .login02_pw::placeholder{color:#cccccc;}
.login02_input > .btn_login02{display:table;background-color: #125dab;border-radius: 5px;font-size: 18px;font-weight: 400;color: #fff;flex: 0 154px;width: 154px;}
.login02_input > .btn_login02 > span{display:table-cell;vertical-align: middle;text-align: center;}

.login02_save {font-size: 15px;font-weight: 300;color: #000000;letter-spacing: 0;line-height: 1;margin-top: 20px;margin-bottom: 50px;}
.login02_save > label{cursor: pointer;line-height: 1;word-break: keep-all;}
.login02_save input[type=checkbox]{background: url(../../images/login/ico_check02_off.png)no-repeat 0;width: 15px;height: 15px;vertical-align: sub;-webkit-appearance: none;-webkit-box-shadow: none;-moz-box-shadow: none;margin-right: 10px;cursor: pointer;border: 0;}
.login02_save input[type=checkbox]:checked{background: url(../../images/login/ico_check02_on.png)no-repeat;}
.login02_save span{line-height: 1;vertical-align: middle;}

.login02_btn_join{background: #fff url(../../images/login/ico_link.png)no-repeat right 15px center;color: #062e6b;border: 1px solid #062e6b;font-size: 15px;padding: 7px 40px 7px 15px;font-weight: 500;line-height: 1;display: table;margin-top: 20px;margin-bottom: 50px;border-radius: 3px;}
.login02_btn_join span{display:block;line-height:1;}

.login02_copy{display: flex;}
.login02_copy > img{margin-right: 15px;padding-right: 15px;border-right: 1px solid #ddd;align-self: center;}
.login02_copy > p{font-size: 14px;font-weight: 300;color: #b8b8b8;letter-spacing: 0;line-height: 24px;}

.login02_right .login02_bg > li{position: absolute;
animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-iteration-count: 1;
    animation-name: show;}
.login02_right .login02_bg > li:nth-of-type(1){top: -110px;right: 228px;}
.login02_right .login02_bg > li:nth-of-type(2){right: -303px;top: 415px;}
.login02_right .login02_bg > li:nth-of-type(3){right: 300px;top: 695px;}
.login02_right .login02_bg > li .login02_bg_img{position: relative;}
.login02_right .login02_bg > li .login02_bg_img:before{position: absolute;content: '';display: block;background-color: #125dab;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-name: back;
    z-index: -1;}
.login02_right .login02_bg > li:nth-of-type(1) .login02_bg_img:before{width: 200px;height: 570px;border-radius: 0 185px;transform: rotate(31deg);right: 65px;bottom: -75px;}
.login02_right .login02_bg > li:nth-of-type(2) .login02_bg_img:before{height: 250px;width: 650px;border-radius: 250px 0;transform: rotate(60deg);right: -9px;top: 279px;}
.login02_right .login02_bg > li:nth-of-type(3) .login02_bg_img:before{height: 200px;width: 730px;border-radius: 185px 0;right: -32px;bottom: -60px;}


/* 인증 */
.auth_wrap{}
.auth_in{width: 450px;margin: 0 auto;display: flex;flex-direction: column;justify-content: center;padding: 35px;box-sizing: border-box;min-height: 470px;}
.auth_tit{font-size: 26px;font-weight: 600;letter-spacing: -0.5px;line-height: 1;text-align: center;padding-top: 50px;box-sizing: border-box;background: url(../../images/login/ico_auth.png)no-repeat center top;}
.auth_noti{text-align: center;margin-top: 15px;}
.auth_noti > span{position: relative;padding-left: 25px;box-sizing: border-box;display: table;margin: 0 auto;font-size: 14px;font-weight: 400;line-height: 1;}
.auth_noti > span:before{position: absolute;content: '!';display: block;width: 18px;height: 18px;border-radius: 25px;left: 0;top: 50%;transform: translateY(-50%);background-color: #115dab;color: #fff;font-size: 12px;line-height: 18px;font-weight: 500;}
.auth_input{font-size: 16px;display: flex;flex-direction: column;gap: 10px;margin-top: 30px;margin-bottom: 10px;}
.auth_input > li{display: flex;}
.auth_input > li > span{flex: 0 85px;align-self: center;font-weight: 500;letter-spacing: -0.5px;line-height: 1;}
.auth_input > li > .auth_text{flex: 1;color: #000;letter-spacing: -0.5px;font: 500 16px 'Noto Sans Korean';line-height: 1;border: 1px solid #ccc;padding: 10px 15px;background-color: #fff;box-sizing: border-box;}
.auth_input > li > .auth_text::placeholder{font-weight:400;}
.auth_time{font-size: 15px;color: #fff;font-weight: 500;background: #115dab;display: table;margin: 0px 0 0 auto;padding: 5px 15px;line-height: 1;border-radius: 25px;}
.auth_time > span{margin-right: 5px;}
.auth_retry{text-align: center;border: 1px solid red;color: red;font-size: 15px;letter-spacing: -0.5px;line-height: 1;padding: 10px;font-weight: 500;}

.container_section .btn_auth_wrap{display: flex;gap:10px;padding: 0;margin-top: 25px;}
.container_section .btn_auth_wrap > a{display: table;height: 45px;width: 100%;flex: 1;color: #fff;}
.container_section .btn_auth_wrap > a > span{display: table-cell;vertical-align: middle;}
.container_section .btn_auth_wrap > a.btn_auth{background-color: #2e5295;}
.container_section .btn_auth_wrap > a.btn_clo{background: #aaa;}
@-webkit-keyframes back {
    0% {
        background-color: #125dab;
    }

    100% {
        background-color: #001a51;
    }
}

@keyframes back {
    0% {
        background-color: #125dab;
    }

    100% {
        background-color: #001a51;
    }
}

@-webkit-keyframes show {
    0% {
       opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes show {
    0% {
       opacity: 0;
    }

    100% {
        opacity: 1;
    }
}