@charset "utf-8";

/* 게시판 폰트 설정 - 미사용시 주석처리 */
/* html, body{
    font-family: 'Noto Sans KR', sans-serif;
} */

:root{
    --logColor-main: #0F64B9;
    --logColor-black: #202020;
    --logColor-grayA: #ddd;
    --logColor-grayB: #eee;
    --logColor-grayC: #aaa;
    --logColor-grayD: #f8f8f8;

    --logFont-title: 40px;
    --logFont-titleSub: 25px;
    --logFont-big: 16px;
    --logFont-normal: 15px;
    --logFont-small: 14px;
}

.sentence{line-height: 1.5;}

/* 그누보드 공통 */
.sound_only {display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;}

/* 로그인 감싸고 있는 div 스타일 설정 */
.login_container_wrap{padding: 240px 0 160px;}
.login_container{
    /* 최대넓이는 홈페이지 넓이에 맞춰 값 조절 */
    max-width: 1300px;
    width: 95%;
    margin: 0 auto;
}

.login_wrap{}
.login_wrap .login_btn,
.login_wrap .txt{
    font-family: 'Noto Sans KR', sans-serif; line-height: 1;
    font-weight: 300;
    border-radius: 2px;
}
.login_wrap .login_btn{
    font-size: var(--logFont-big);
    width: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    font-weight: 700;
    border: 1px solid var(--logColor-main);
    background-color: var(--logColor-main);
    color: #fff;
    display: block;
    text-align: center;
}
.login_wrap .txt{
    width: 100%;
    padding: 10px 5px;    
    border-color: var(--logColor-grayC);
}
.login_wrap .chkbox_wrap{
    display: flex;
    align-items: center;
}
.login_wrap .chkbox_wrap .selec_chk{}
.login_wrap .chkbox_wrap label{
    font-weight: 300; padding-left: 5px;
    font-size: var(--logFont-small);
}
/* 로그인 */
.login_wrap .login{
    margin: 0 auto;
    max-width: 450px;
    border-top: 2px solid var(--logColor-main);
    border-bottom: 2px solid var(--logColor-main);
}
.login_wrap .login .login_title{
    padding: 60px 0 40px;
}
.login_wrap .login .login_title h3{
    font-size: var(--logFont-title);
    font-weight: 700;
    text-align: center;
}
.login_wrap .login .login_title p{
    margin-top: 20px;
    text-align: center;
    font-size: var(--logFont-big);
}
.login_wrap .login .top,
.login_wrap .login .middle,
.login_wrap .login .bottom{padding: 0 40px;}
.login_wrap .login .top{}
.login_wrap .login .top li{margin-bottom: 10px;}
.login_wrap .login .top li:last-child{margin-bottom: 0;}
.login_wrap .login .middle{margin: 40px 0;}
.login_wrap .login .bottom{
    border-top: 1px solid var(--logColor-grayA);
    background-color: var(--logColor-grayD);
    padding-top: 40px;
    padding-bottom: 40px;
}
.login_wrap .login .bottom p{
    font-size: var(--logFont-small);
    text-align: center;
}
.login_wrap .login .bottom .btn_wrap{display: flex; margin-top: 20px;}
.login_wrap .login .bottom .btn_wrap li{
    width: 100%;    
    border: 1px solid var(--logColor-grayA);
}
.login_wrap .login .bottom .btn_wrap li a{
    display: block;
    background-color: #fff;
    text-align: center;
    height: 45px;
    line-height: 45px;
    font-weight: 700;
    font-size: var(--logFont-small);
}
/*// 로그인 */

/* 회원가입 */
.login_wrap .register .div_common{margin-bottom: 60px;}
.login_wrap .register .div_common:last-child{margin-bottom: 0;}
.login_wrap .register .title_box h3{
    font-size: var(--logFont-title);
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.login_wrap .register .title_box ul{
    display: flex; justify-content: space-between; align-items: center;
    max-width: 550px;
    width: 100%;
    margin: 0 auto;
}
.login_wrap .register .title_box ul li{text-align: center;}
.login_wrap .register .title_box ul li:nth-child(odd){
    max-width: 230px; width: 100%;
    box-sizing: border-box;
    height: 50px;
    line-height: 45px;
    border: 2px solid var(--logColor-grayA);
}
.login_wrap .register .title_box ul li.next{}
.login_wrap .register .title_box ul li.next > i{
    display: inline-block;
    width: 30px; height: 30px;
    background-image: url(login/join_icon.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.login_wrap .register .title_box ul li.on{
    border-color: var(--logColor-main);
    color: var(--logColor-main);
    font-weight: 700;
}
.login_wrap .register .agree_box_wrap{}
.login_wrap .register .agree_box_wrap .title{
    text-align: center;
    margin-bottom: 20px;
}
.login_wrap .register .agree_box_wrap .title h4{
    font-size: var(--logFont-titleSub);
    font-weight: 700;
    margin-bottom: 10px;
    word-break: keep-all;
}
.login_wrap .register .agree_box_wrap .title p{
    font-size: var(--logFont-normal);
}
.login_wrap .register .agree_box_wrap .text_area{
    border: 1px solid var(--logColor-grayA);
    background-color: var(--logColor-grayD);
    height: 270px;
    overflow-y: scroll;
    margin-bottom: 10px;
}
.login_wrap .register .agree_box_wrap .text_area .box{
    padding: 20px;
    font-weight: 300; font-size: var(--logFont-small);
}
.login_wrap .register .agree_box_wrap .chkbox_wrap{}
.login_wrap .register .border{
    height: 0.5px;
    background-color: var(--logColor-grayA);
}
.login_wrap .register .all_agree_box{}
.login_wrap .register .all_agree_box .top{    
    font-size: var(--logFont-big);
}
.login_wrap .register .all_agree_box .top p{
    text-align: center;
}
.login_wrap .register .all_agree_box .top p.text{
    font-size: 1.125em; font-weight: 500;
}
.login_wrap .register .all_agree_box .top p.notice{
    margin-top: 10px;
    
}
.login_wrap .register .all_agree_box .bottom{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.login_wrap .register .all_agree_box .bottom .chkbox_wrap{margin-right: 20px;}
.login_wrap .register .all_agree_box .bottom .chkbox_wrap:last-child{margin-right: 0;}
.login_wrap .register .all_agree_box .bottom .chkbox_wrap label{
    font-size: var(--logFont-big);
}

.login_wrap .register .login_btn_wrap{
    display: flex;
    width: 70%;
    margin: 0 auto;
}
.login_wrap .register .login_btn_wrap .btn_wrap{
    width: 100%;
    margin-right: 10px;
}
.login_wrap .register .login_btn_wrap .btn_wrap:last-child{margin-right: 0;}
.login_wrap .register .login_btn_wrap .btn_wrap a.login_btn{
    background-color: #fff;
    color: var(--logColor-main);
    border-color: var(--logColor-main);
}
.login_wrap .register .form_wrap{}
.login_wrap .register .form_wrap .ul_wrap{
    display: flex;
    align-items: center;
    border-bottom: 0.5px solid var(--logColor-grayA);
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.login_wrap .register .form_wrap .ul_wrap li{}
.login_wrap .register .form_wrap .ul_wrap li .red{color: red;}
.login_wrap .register .form_wrap .ul_wrap li .form_notice{
    font-size: var(--logFont-small);    
    color: var(--logColor-grayC);
    margin-top: 5px;
}
.login_wrap .register .form_wrap .ul_wrap li .txt{max-width: 500px;}
.login_wrap .register .form_wrap .ul_wrap li:first-child{
    width: 200px;
}
.login_wrap .register .form_wrap .ul_wrap li:last-child{
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    width: -o-calc(100% - 200px);
    width: calc(100% - 200px);
}
/*// 회원가입 */

/* media query */
@media screen and (max-width: 1200px){
    .login_container_wrap{padding: 140px 0 160px;}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 800px){
    .login_container_wrap{padding: 120px 0 140px;}
}
@media screen and (max-width: 768px) {
    :root{
        --logFont-title: 35px;
        --logFont-titleSub: 20px;
        --logFont-big: 15px;
        --logFont-normal: 14px;
        --logFont-small: 13px;
    }
    .login_wrap .register .div_common{margin-bottom: 30px;}
}
@media screen and (max-width: 500px){
    .login_wrap .register .title_box ul{display: block; max-width: none;}
    .login_wrap .register .title_box ul li.on{
        display: block;
        background-color: var(--logColor-main);
        color: #fff;
    }
    .login_wrap .register .title_box ul li{display: none;}
    .login_wrap .register .title_box ul li:nth-child(odd){max-width: none;}
    .login_wrap .register .agree_box_wrap .text_area .box{padding: 15px 10px;}

    .login_wrap .register .form_wrap .ul_wrap li:first-child{width: 120px;}
    .login_wrap .register .form_wrap .ul_wrap li:last-child{
        width: -webkit-calc(100% - 120px);
        width: -moz-calc(100% - 120px);
        width: -o-calc(100% - 120px);
        width: calc(100% - 120px);
    }
}
@media screen and (max-width: 430px) {
    .login_wrap .login .top, 
    .login_wrap .login .middle, 
    .login_wrap .login .bottom{padding: 0 20px;}
    .login_wrap .login .bottom{
        padding-top: 40px;
        padding-bottom: 40px;
    }
}