/* 01 Login */


/* 로그인 */

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #BDC1C5;
    opacity: 1;
    /* Firefox */
    font-size: 16px;
    font-weight: 400;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #3c75f1c2;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #3c75f1c2;
}

*{
    box-sizing: border-box;
    list-style: none;
    letter-spacing:-0.025rem;
    text-decoration: none;
    margin: 0;
    padding: 0;
    font-family:'Noto Sans KR';
}

div.container.join {
    width: 100%;
    margin-top: 50px;
}

div.container.join .content{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items:center;

}

.login_body {
    background: url(/project/design/login/loginBG.png) no-repeat center / cover
}

.join_body{
    background: #EDF4FA;
}


.home_icon{
    background-color: #212a53;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

.home_icon a{
    padding: 20px;
}

.login {
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}

.login .content {
    width: 1400px;
    display: flex;
    min-height: 500px;
}

.login .login_wrap {
    background: #fff;
    box-sizing: border-box;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: relative;
    padding:  0 120px ;
}


.login .login_box {
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}




.login .login_box>ul.form_wrapper>li {
    position: relative;
    text-align: left;
    color: #172C51;
}

.login .login_box>u.form_wrapper>li>h2 {
    font-size: 15px;
    color: #626262;
    margin-bottom: 10px;
    font-weight: 500;
}

.login .login_box>ul.form_wrapper>li .list_box {
    width: 100%;
    padding: 10px 15px;
    background: #f0f1f3;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #e0e1e4;
    border-radius: 5px;
}

.login .login_box>ul.form_wrapper>li .list_box>h2 {
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
}


.login .login_box>ul>li .list_box ul>li {
    padding: 7px 15px;
    font-size: 15px;
    transition: all .3s ease;
}

.login .login_box>ul>li .list_box ul>li:hover {
    background: #fff;
}

.login .login_box>ul.form_wrapper>li input , table.info_table tr > td > input,select.select_input
{
    outline: 0;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    border: none;
    padding: 10px 0;
    border:1px solid #D3D9DD;
    text-align: left;
    background: #F3F6F9;
    padding: 15px 0 15px 15px;
    border-radius: 5px;
}

table.info_table tr > td > input,
select.select_input{
    width: 20%;
}


span.radio_txt {
    margin-right: 10px;
}


.login .login_box>ul.form_wrapper > li input:focus {
    border: 0;
    border:1px solid #8b8f92;
    border-image-slice: 1
}

.login .login_box>ul.form_wrapper>li input:focus+span.id {
    background: url(../img/ic_id_h.png) no-repeat center;
    transition: all .3s ease
}

.login .login_box>ul.form_wrapper>li input:focus+span.pw {
    background: url(../img/ic_pw_h.png) no-repeat center;
    transition: all .3s ease
}

.login .login_box>ul.form_wrapper>li span.chk {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 0;
    background: url(../img/ic_input.png) no-repeat center;
    top: 13px;
}

.login .login_box>u.form_wrapper>li input:focus+span+span.chk {
    width: 12px;
    height: 12px;
    background: url(../img/ic_input_h.png) no-repeat center;
}


.login .login_box>ul.form_wrapper>li:nth-child(2) {
    margin: 15px 0
}

.login .login_box>ul.form_wrapper>li:nth-child(3) {
    display: inline-block;
}

.login .login_box>ul.form_wrapper>li a {
    width: 100%;
    color: #535353;
    background: #f6f6f6;
    position: relative;
    box-sizing: border-box;
    border-radius: 5px;
    display: block;
    text-align: center;
    font-size: 15px;
    border: 1px solid #d1d1d1;
    line-height: 30px
}

li>div.gnb_login_wrap>div a>span {
    color: #fff;
}

.login .login_box>ul.login_btn>li a.bg1 {
    line-height: 57px;
    background: #212A53;
    color: #fff;
    font-size: unset;
    border: 0;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    display: block;
    text-align: center;
    border-radius: 4px;
}


.login .login_box>ul.login_btn>li a.bg1:hover {
    background: #19203f;
    transition: all 0.3s ease-in-out;
}

.login .login_box>ul.login_btn>li a.bg2 {
    background: 0;
    font-size: unset;
    border: 0;
    border-bottom: 2px solid #f1f1f1;
    border-radius: 0;
}

.mobile_txt {
    font-size: 32px;
    letter-spacing: -0.05em;
    margin-bottom: 32px;
    color: #172C51;
    font-weight: 700;
}

.mobile_txt>span {
    color: #3C76F1;
}


.login .img_box {
    width: 50%;
    background: #4B73EE;
    position: relative;
    overflow: hidden;
    background: url(/project/design/login/loginL.png)no-repeat;
    padding: 40px;
}

.login .img_box > *{
    font-family: 'roboto';
}

.login .img_box > h1{
    font-size: 45px;
    color:#fff;
    line-height: 3.5rem;
    font-weight: 700;
}

.login .img_box > p{
    font-size: 18px;
    color:#fff;
    line-height: 2rem;
    font-weight: 500;
}

.login .img_box div.img_wrapper{
    position: absolute;
    bottom: 0;
    right: 0;
}

.login .img_box div.img_wrapper img{
    min-width: 100%;
}

div.login_txt > h1{
    font-size: 34px;
}

div.login_txt > p{
    font-size: 18px;
    font-weight: 500;
    line-height: 2rem;
    color:#303030;
}


div.wrap {
    max-width: 1920px;
    margin: 0 auto;
}


div.join_btn{
    width: 100%;
    text-align:right;
    margin-top: 10px;
}

div.join_btn a{
    text-align:right;
    border-bottom: 1px solid #4B73EE;
    color: #4B73EE;
}

div.join_btn a:hover{
    color: #244ab9;
    transition: all 0.2s ease;
}

ul.tab{
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    margin: 20px 0;
}

ul.tab a{
    display: block;
    background:#fff;
    padding: 13px 20px;
    border:1px solid #d4d4d4;
    color: #666666;
    font-weight: 500;
}

ul.tab li:nth-child(2) a{
    border-left: 0;
    border-right: 0;

}

/*ul.tab li:last-child a{
    border-right: 0;

}*/

ul.tab.on{
    background: #4B73EE;
}


ul.tab li a.on{
    background: #4B73EE;
    border:1px solid #4B73EE;
    color: #fff;
    transition: 0.4s ease;
}
ul.tab li:nth-child(2) a.on{
    border-left: 0;
    border-right: 0;

}



ul.step_btn{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-radius: 10px;
    margin-bottom: 45px;
    width: 100%;
}

ul.step_btn a{
    border-right: 1px solid #EAECED;
    padding: 15px 0;
    display: block;
    background:#fff;
    color:#BABFC2;
    font-weight: 500;
    font-size: 18px;
    cursor: default;
}

ul.step_btn li:last-child a{
    border-right: 1px solid transparent;
}

ul.step_btn a.on{
    background: #4B73EE;
    color: #fff;
    border: 0;
}

div.content_box{
    background: #fff;
    margin-bottom: 45px;
    min-width: 1200px;
    border-radius: 10px;
}

div.content_box.step_two{
    padding: 185px 0;

}


ul.step_btn li:first-child a{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

ul.step_btn li:last-child a{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.container.join h1{
    font-size: 34px;
    margin-bottom: 10px;
}

.container.join >div.content > p:nth-of-type(1){
    font-size: 18px;
    margin-bottom: 45px;
    text-align: center;
}

ul.conf_btn li a,
ul.agree_btn li a{
    line-height: 57px;
    background: #212A53;
    color: #fff;
    font-size: unset;
    border: 0;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    display: block;
    text-align: center;
    border-radius: 4px;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 300px;
}

ul.agree_btn li a.finish{
    background: #4B73EE;
}

ul.agree_btn li a.finish:hover{
    background: #3856b3;
}

div.content_box p{
    font-size: 18px;
    font-weight: 600;
}

div.content_box > div{
    margin-bottom: 20px;
}

.policy_area {
    height: 300px;
    overflow-y: auto;
    background: #f9f9f9;
    border: 1px solid #d1d1d1;
    color: #666;
    padding: 15px;
    line-height: 1.6rem;
    text-align: left;
}


.box_line {
    margin: 0 auto;
    width: 100%;
    padding: 20px 0;
    position: relative;
    font-size: 0.95em;
}

.memb_policy {
    padding: 10px 30px;
}

h2.login_h2 {
    padding-bottom: 25px;
    font-size:22px;
    font-weight: 600;
    text-align: left;
}

.memb_policy .check {
    padding: 10px;
    color: #666;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
}


div.policy_area p{
    font-size: 16px;
    font-weight: normal;
}

div.policy_area {
    font-weight: 500;
    font-size: 16px;
}

table.info_table{
    text-align: left;
    width: 100%;
}

.star{
    color: #FF0000;
}

div.memb_info{
    padding: 30px;
}

table.info_table th{
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: 4rem;
}

table.info_table tr th,td{
    padding: 10px 0;
    border-top:1px solid #E7E7E7;
}

span.p_info{
    color: #BABFC2;
    padding-left: 10px;
}

table.info_table tr:last-child > td{
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
}

table.info_table tr:last-child > td:last-child{
    border-top: 0;
}

table.info_table tr:last-child > td:nth-of-type(2){
    border-top: 0;
}


table.info_table tr:last-child > td{
    padding-top: 17px;
}

a.address_btn{
    line-height: 50px;
    background: #212A53;
    color: #fff;
    font-size: unset;
    border: 0;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    display: block;
    text-align: center;
    border-radius: 4px;
    width: 140px;
    font-size: 16px;
    margin: 0;
    padding: 0;
    display: inline-block;
}



.memb_cert h4 { padding-bottom:10px; font-size:1.25em; font-weight:600; color:#333;}
.memb_cert .p_desc1 { margin-bottom:20px;}
.memb_cert .box_in {margin-top:50px; background:url("/project/design/template/bg_box1.gif"); padding:10px;}
.memb_cert .box_in .box_w { background:#fff; padding:50px 30px; display:table; width:100%;box-sizing:border-box;}
.memb_cert .box_in .box_w > div { display:table-cell; box-sizing:border-box; padding:40px 50px; vertical-align:middle;}
.memb_cert .box_in .box_w .left { border-right:1px solid #d3d3d3;}