@charset "utf-8";


/* 본고딕 */
@font-face{
    font-family: 'Noto Sans KR';
    font-weight: 300;
    src: url("/fonts/NotoSansCJKkr-Light-6c7a75c84991a5cda126524414f4b977.woff2") format('woff2'),
    url("/fonts/NotoSansCJKkr-Light-8775cf02d7c511d2c6f84ce18aca528a.woff") format('woff');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-weight: 400;
    src: url("/fonts/NotoSansCJKkr-DemiLight-23ce7c9481a38b04fa81111dcf1e8122.woff2") format('woff2'),
    url("/fonts/NotoSansCJKkr-DemiLight-71d9f7f5bb72c4f446c7c2b5efe5ea8c.woff") format('woff');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-weight: 500;
    src: url("/fonts/NotoSansCJKkr-Medium-6d1c2264a53a5a78b7259ed152152a8d.woff2") format('woff2'),
    url("/fonts/NotoSansCJKkr-Medium-c0a5c213cb1ae8951a8eaae69a662b2a.woff") format('woff');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-weight: 700;
    src: url("/fonts/NotoSansCJKkr-Bold-d8adff610eddc6a88a851de72cb9e154.woff2") format('woff2'),
    url("/fonts/NotoSansCJKkr-Bold-009c407c5b462c6261bd97479e8ef641.woff") format('woff');
}



/* BNGSTEEL Login */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:wght@600&display=swap');
/*** Font info ***
Thin - 100
Light - 300
Regular - 400
Medium - 500
Bold - 700
Black - 900 */


/* 공통 */
* {box-sizing: border-box;}
html,body {
    width: 100%; 
    height: 100%;   
    font-family: Noto Sans KR,'Roboto', sans-serif;
    font-weight: 400;
    color: #333333;
    margin: 0; 
    padding: 0;
}

ul,ol,li,dl,dt,dd,h2,
h3,
table,tr,th,td,p {margin: 0; padding: 0;}
form {width: 100%;height: 100%; }
ul,ol,li {list-style: none;}
a {
    color: #333;
    text-decoration: none;
    -webkit-appearance: none;
}
input, textarea {
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


a.btn { 
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Noto Sans KR, sans-serif;
    font-size: 21px;
    text-align: center;
    width: 100%;
    height: 96px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(66, 113, 222, 1);
}
a.btn:hover {   
    color: rgba(255, 255, 255, 1);
    background-color: rgba(50, 111, 222, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 5px 5px 10px rgba(42, 115, 224, 0.3);
}
a.btn2 {    
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Noto Sans KR, sans-serif;
    font-size: 16px;
    white-space: nowrap;
    word-break: keep-all;
    letter-spacing: -1px;
    text-align: center;
    width: 100%;
    height: 43px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.8);
    background-color: #666f83;
}
a.btn2:hover {  
    color: rgba(255, 255, 255, 1);
    background-color: #666f83;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 5px 5px 10px rgba(42, 115, 224, 0.3);
}

.margt40 {margin: 40px 0 0 0;}
.margb10 {margin: 0 0 10px 0;}
.margb40 {margin: 0 0 40px 0;}


/* 내용 */
.wrap {
    display: flex;
    width: 100%;
    height: 100%;

    flex-direction: column;
}
.wrap .main {
    display: flex;
    flex-grow: 1;
     background: #ffffff; 
}


.login_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 598px;/* 왼쪽 너비 */
    min-width: 598px;
    background: rgba(255, 255, 255, 1);
}

.login_wrap .login_inner {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    padding: 10px 58px 0px;
}

.login_wrap .login_inner .lo-l-t-l label {
    display: flex;
    font-family:'Roboto', Noto Sans KR, sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: #555555;
    line-height: 19px;
    padding:13px 0px 0px;
}

.login_wrap .login_inner > p {
    font-size: 14px;
    line-height: 18px;
    margin:5px 0 0;
    color: #333333;
}

.login_wrap .login_inner > h1.logo {
    font-size: 0;
    background: url('/images/login/logo_login-068b0fa89fc981ed426aa4882c2b87d4.png') no-repeat top;
    width: 180px;
    height: 38px;
    margin:0px 0 60px 0;
}

.login_wrap .login_inner > h1 > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.login_wrap .login_inner .input_box {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.login_wrap .login_inner > label {  
    display: inline-block;
    font-size: 17px;
    font-weight: 500;
    color: #333;
    width: auto;
    box-shadow: inset 0 -11px 0 #d0ebff;
    height: 28px;
    line-height: 28px;
    font-weight: 500;
    margin:5px 0;
}

.lo-l-t-r button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Noto Sans KR, sans-serif;
    font-size: 21px;
    text-align: center;
    width: 100%;
    height: 60px;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 121, 255, 1);
}
    



.login_wrap .login_inner input[type="text"]::placeholder,
.login_wrap .login_inner input[type="password"]::placeholder {font-size: 17px;color: #b2b2b8;font-weight: 400;}
.login_wrap .login_inner input[type="text"],
input[type='password'] {    
    width: 100%;
    height: 50px;
    font-family: Roboto, sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: rgba(58, 95, 169, 1);
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.17);
    padding: 4px 25px 4px 50px;
}
.login_wrap .login_inner input[id="remember"] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.17);
    cursor: pointer;
    margin-left: 0px;
}
.login_wrap .login_inner input[id="remember"]:checked {
    border: none;
    background: rgba(42, 115, 224, 1);
}
.login_wrap .login_inner input[id="remember"]:checked::after {
    content:'✔';
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: rgba(255,255,255,1);
}
.check-type label.txt {font-size: 14px;font-family: 'Noto Sans KR';color:#333;margin-bottom: 5px;}

.login_wrap .login_inner input[type="text"] {   
    background:url('/images/login/icon_id-7611d51bd8d0356ab84a8ed5b80d97a6.png') no-repeat scroll 7px 7px;
    background-position-x: 20px;
    background-position-y: center;
}
.login_wrap .login_inner input[type="password"] {   
    background:url('/images/login/icon_pw-4ab68949c42abed166889d68d47143e9.png') no-repeat scroll 7px 7px;
    background-position-x: 20px;
    background-position-y: center;
}




        .login_wrap .login_inner .rememberme {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            margin-bottom: 10px;
            width:100%;
        }
                
        .rememberme:after {content:""; display:block; clear:both;}
        .rememberme .input-type {position:relative;width:auto;margin-right:30px;width:40%;}
        /* .rememberme .btn-find:before {height:10px;width:1px;content:"";background:#ccc;display:inline-block;position:absolute;left:0;top:10px;} */
        .rememberme .btn-find {position:relative;width:calc(60% - 30px);display:inline-block;text-align:right;height:30px; font-size:14px; line-height:30px;  padding:0 0px; box-sizing:border-box;  color:#333333;font-family: 'Noto Sans KR';font-weight:400;}
   

.lo-h2 {
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin-bottom: 5px;
}
.lo-h2 h2 {
    font-family: 'Noto Sans KR';
    font-size: 22px;
    font-weight: 700;
    line-height: 22px;
    color: #333;
}
.lo-h2 p {
    font-size: 14px;
    line-height: 18px;
    margin-top: 10px;
    color: #666666;
}

.lo-l-t-l {
    width: 100%;
    height: auto;
}
.lo-l-t-r {
    width: 100%;
    min-height: 43px;
}


.lo-r {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

    .lo-r-t {margin-top: 5px;padding: 15px 58px;position:relative; width:100%; height:auto;overflow: hidden; background:#f8f7f5; box-sizing:border-box; }
        .lo-r-t-b {position:relative; display:flex;align-items:center;width:100%;margin-top:15px;}
        .lo-r-t-b > div {display: flex; width:calc(50% - 10px);  margin-right:20px;  border-radius:10px; background-repeat:no-repeat; background-position:right 30px bottom 20px;}
        .lo-r-t-b > div:last-child {margin-right:0;}
        .lo-r-t-b > div > a {box-sizing:border-box;position:relative;display:block; width:100%; min-height:70px; box-sizing:border-box; padding:15px 0 0;letter-spacing: -1px;}
        .lo-r-t-b > div > a strong {display:block;width:50%; font-size:18px;font-family: 'Noto Sans KR'; line-height:20px; color:#333; font-weight:500;word-break:keep-all;}
        .lo-r-t-b > div > a span {display:block; font-size:14px; line-height:18px; margin-top:8px;color: #666666;}
        .lo-r-t-b:after {content:""; display:block;}
            .ptnr_icon {width:68px;height:68px;display:block;position:absolute;right:20px;top:0;}
            .ptnr_icon:after {content:"";background:url("/images/login/partner_icon01-58e1ad4f28a9464e1c4246a1ae4f40f2.png") no-repeat center center;background-size: 100%;width:58px;height:58px;display:block;position:absolute;right:0;top:10px;}
            .lo-info-r .ptnr_icon:after {content:"";background:url("/images/login/partner_icon02-4853bc5e31b7c849c51901a28c635eea.png") no-repeat center center;background-size: 100%;width:58px;height:58px;display:block;position:absolute;right:0;top:10px;}
            .ptnr_icon:before {border-radius:74px;background:#fff;content:""; display:block;position:absolute;left:0;top:0;width:74px;height:74px;}
        
.lo-r-b {position:relative; width:100%; height:auto;display: block;padding:10px 58px 5px; box-sizing:border-box;}
.lo-r-b section {position:relative; display: block;overflow: hidden;width:100%; height:100%; box-sizing:border-box;}
.lo-r-b section h3 {font-size:21px; line-height:18px; color:#222; font-weight:700;}
.lo-r-b section .btn-more {    
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;right:0;top:5px;font-size:0;
}
    
    .lo-r-b section .btn-more::before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 10px;
    width: 18px;
    height: 0;
    border-bottom: 2px solid #0A6ED1;

}

.lo-r-b section .btn-more::after {
    content: '';
    display: block;
    position: absolute;
    left: 8px;
    top: 2px;
    width: 0;
    height: 17px;
    border-left: 2px solid #0A6ED1;

}
    .lo-r-b section ul.board_list {position:relative; width:100%; height: auto;overflow: hidden; margin-top:10px; }
    .lo-r-b section ul.board_list li {width:100%;  padding:0 0px; box-sizing:border-box; }
    .lo-r-b section ul.board_list li:nth-child(3){border-bottom:0;}
    .lo-r-b section ul.board_list li a {display:block; position:relative; color:#333; font-size:16px; line-height:30px; width:100%; padding-right:30%; height:auto; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .lo-r-b section ul.board_list li a span {position:absolute; right:3px; top:0; color:#888;font-family:'Noto Sans KR';font-size: 15px;}
    .lo-r-b section ul.board_list li a:focus, .lo-r-b section ul li a:hover {color:#0A6ED1;}

.visualimg_txt {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 60px;
    background: url('/images/login/bg-5d5b5689b67c6d28116a2bcd8359ae60.png') no-repeat center;
    background-size: cover;
    width: 100%;
}
.visualimg_txt > span.text01 {
    font-family: 'roboto';
    font-size: 70px;
    font-weight: 500;
    color: rgba(52, 52, 52, 1);
    line-height: 70px;
    text-align: center;
}

.login_footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:auto;
    background: #f9f8f8;
    padding: 10px;
}
.login_footer .left {
    display: flex;
    flex-basis:60%;
    text-align: center;
    align-items: center;
    justify-content: center;
}


.login_footer .right {
    flex-basis:60%;
    padding-right:20px;
}
.login_footer .left .link {display:inline-block;}
.login_footer .left > span {
    display: inline-block;
    padding: 0 15px;
    font-size: 13px;
    line-height: 28px;
}
.login_footer .f_nav {}
.login_footer .f_nav li {display: inline-block;font-size: 13px;padding: 0 20px;}
.login_footer .f_nav li a {color: #333;line-height: 28px;}

/* 반응형 */

@media screen and (max-width: 1024px) {

    .visualimg_txt > span {display: none;}


}


@media screen and (max-width: 820px) {

    .wrap .main {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .login_wrap .login_inner > h1.logo {margin-bottom: 25px;}
    .visualimg_txt {display: none;}

    .login_wrap {width: 100%;min-width: 360px; padding: 30px 0px 0px;}  
    .login_wrap .login_inner {padding: 0 35px;}
    .login_wrap .login_inner .input_box {flex-direction: column;}
    .lo-r-t {padding: 25px 35px;}
        .lo-l-t-l {
            width: 100%;
            margin-right: 0px;
            height: auto;
        }
        .lo-l-t-r {
            width: 100%;
        }
        a.btn {
            height: 43px;
        }
        a.btn2 {
            font-size: 19px;
        }
    .login_wrap .login_inner .rememberme {
        margin-top: 10px;
    }   
    .lo-r-b {padding: 25px 35px;}
    .lo-r-t-b > div > a {letter-spacing: 0px;padding: 25px 0 0;}
    .lo-r-t-b > div > a strong {font-size: 20px;}
    .lo-r-t-b > div {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .lo-r-t-b > div {
        width: 100%;
        margin-right: 0;
    }
    .login_footer {
        flex-direction: column;
    }
 
    
    .login_footer .left {
        display: flex;
        flex-direction: column;
    }
    .login_footer .left .link {display:none;}
    .login_footer .left > span {line-height: 18px;font-size: 12px;}
    .login_footer .right {
        flex: 1 1 auto;
        text-align: center;
            padding-right: 0px;
            margin-top:10px;
    }
    .login_footer .f_nav li {padding: 0 10px;
    }
    .login_wrap .lo-l-t-r {
        width: 100%;
        height: auto;
    }
    .login_wrap  .lo-r-t-b {
        flex-direction: column;
    }
    .login_wrap  .lo-r-t-b .ptnr_icon:before {border-radius:74px;background:#fff;content:""; display:block;position:absolute;left:0;top:0;width:74px;height:74px;}
}   

@media screen and (max-width: 600px) {

    
    .login_wrap .login_inner > div > .rememberme span > label {font-size: 14px;}
    .login_wrap .login_inner .rememberme .find li a {font-size: 14px;}

}