@import url(font-awesome.min.css);

/* contets */

.join_wrap_area select,
.join_wrap_area textarea,
.join_wrap_area input[type=text],
.join_wrap_area input[type='tel'],
.join_wrap_area input[type='password']{width: 100%; min-height:35px; line-height:2; height:35px; padding: 5px 15px;  border: 1px solid #dedede;}

.login_wrap_area select,
.login_wrap_area textarea,
.login_wrap_area input[type=text],
.login_wrap_area input[type='tel'],
.login_wrap_area input[type='password']{width: 100%; min-height:35px; line-height:2; height:35px; padding: 5px 15px;  border: 1px solid #dedede;}

::-webkit-scrollbar,
::-webkit-scrollbar {width:15px; background:#f6f6f6; border-radius:50px;}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {background-color: #dcdee0; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; }


/* 로그인화면 */
.login_wrap_area {min-height: 726px;}
.login_wrap_area .w1300 {max-width: 1300px; margin: 55px auto; background: #ffffff; border-radius: 20px; position: relative;min-width: 340px !important;}
.login_wrap_area h3.login_title {text-align: center; font-size: 35px; margin: 0 auto 40px;}
.login_wrap_area .login_info_content{text-align: center;}
.login_wrap_area .login_info_content_top{color:red; font-weight:500;}
.login_wrap_area .login_info_content_stop{color:blue; display:block; padding:10px; font-weight:500;}
.login_wrap_area .login_info_content_bottom{font-weight:900; font-size: 17px;}
.login_wrap_area .login_info_content_bottom:hover{text-decoration:none;}
.login_wrap_area .title_bar {text-align: center; font-size: 16px; background: linear-gradient(90deg, #0e57c3 20%, #ff5f66); border-radius: 7px; padding: 25px 0; color: #fff; box-shadow: 0px 0px 8px #0000004a;}
.login_wrap_area .login_area { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-content: space-between; margin: 30px 0;}
.login_wrap_area .nomal_login,.login_wrap_area .other_login {width: 49%;    min-height: 310px; border: 1px solid #dedede; border-radius: 5px; text-align: center; padding: 55px 0;}
.login_wrap_area .login_title { margin-bottom: 20px;}
.login_wrap_area .login_form {width: 60%; margin: 0px auto 12px;}
.login_wrap_area .login_input_area {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.login_wrap_area .login_input {display: flex; flex-direction: column;  align-items: stretch; width: 70%;}
.login_wrap_area .log_btn{width:27%; background: #2072df; border: none; color: #fff; padding: 14px; border-radius: 3px; font-size: 16px;}
.login_wrap_area .log_btn:hover {background: #105aba; }
.login_wrap_area .in_id{margin-bottom:5px;}
.login_wrap_area .save_id {width: 100%; vertical-align: middle; text-align: left; margin: 10px 0 0; font-size: 13px; color: #a3a3a3;}
.login_wrap_area .title_txt {font-size: 20px; font-weight: bold;}
.login_wrap_area .sub_txt{font-size: 13px; color: #676767; padding-left: 7px;}
.login_wrap_area .login_info {width: 60%; margin: 0 auto; display: flex; justify-content: center;border-top:1px solid #ddd;padding-top:11px;}
.login_wrap_area .login_info a{padding: 0 20px; font-size: 13px; color: #a3a3a3;position: relative;}
.login_wrap_area .login_info a:hover{color:#2072df;font-weight:bold;}
.login_wrap_area .login_info a:last-child:after{position:absolute; content: ''; width:1px; height:7px; background:#fff;}
.login_wrap_area .login_info a::after {position: absolute; content: ''; width: 1px; height: 15px; background: #ddd; top: 16%; right: -2%;}
.login_wrap_area .id_check{vertical-align: middle;}
.login_wrap_area .id_check_txt {vertical-align: middle; padding-left: 7px; font-size: 13px;}
.login_wrap_area .other_login_con {width: 60%; margin: 0 auto; padding:10px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; display: flex; align-items: center; flex-direction: row; justify-content: space-between; cursor:pointer;}
.login_wrap_area .other_login_con:hover{background: #e0eeff; border: 1px solid #8db1de;}
.login_wrap_area .other_login_con:hover .contxt_area{color:#2072df}
.login_wrap_area .icon_area {width:12%;}
.login_wrap_area .icon_area img{width:100%;display: block;}
.login_wrap_area .contxt_area {width: 90%; text-align: center;font-size:15px;}


/* 회원가입 동의 */
.join_wrap_area .w1300 {max-width: 1300px; margin: 55px auto; background: #ffffff; border-radius: 20px; position: relative;min-width: 340px !important;}
.join_wrap_area h3.join_title {text-align: center; font-size: 35px; margin: 0 auto 40px;color:#052e5b;}
.join_wrap_area [type="radio"] {vertical-align: middle; margin-right:5px;appearance: none; border: max(2px, 0.1em) solid f6f6f6; border-radius: 50%; width: 1.25em; height: 1.25em;}
.join_wrap_area [type="radio"]:hover { box-shadow: 0 0 0 max(4px, 0.2em) lightgray; cursor: pointer;}
.join_wrap_area [type="radio"]:checked {border: 0.4em solid #3178e3;}
.join_wrap_area [type="radio"]:focus-visible {outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted 064298;}
.join_wrap_area .join_procedure {width: 100%; background: #f2f6fe; padding: 35px 35px; /*border-bottom: 2px solid #d0d8e8;*/ border-radius: 0px; margin: 0 auto;}
.join_wrap_area .join_procedure ul{display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: row; flex-wrap: wrap;}
.join_wrap_area .join_procedure_sub {width: 100%; padding: 30px 30px 45px; text-align: center; margin-bottom: 30px; border-bottom: 2px dotted #d0d8e8;}
.join_wrap_area .use_wrap{padding: 30px 20px; width: 70%; margin: 0 auto;}
.join_wrap_area .use_wrap_title{width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}
.join_wrap_area .use_wrap_title .l_con{font-size: 23px; font-weight: bold;}
.join_wrap_area .use_wrap_content {margin: 10px 0 0; padding: 30px; border: 1px solid #ddd; height: 165px; overflow-y: auto; margin: 10px 0 0; padding: 30px; border: 1px solid #e3e4ea; height: 165px; overflow-y: auto; border-radius: 7px; font-size: 13px; color: #666;}
.join_wrap_area .join_procedure ul li {width: 20%; display: flex; flex-direction: column; align-items: center;}
.join_wrap_area .join_procedure ul li .join_icon {width: 80px; height: 80px; border-radius: 50px; background: #fff; display: flex; align-items: center; justify-content: center;}
.join_wrap_area .join_procedure ul li .join_icon img {width: 50%; filter: invert(57%) sepia(80%) saturate(111%) hue-rotate(177deg) brightness(94%) contrast(87%);}
.join_wrap_area .join_procedure ul li .join_txt{margin-top: 15px; color: #6e7b8f; font-weight: bold;font-size:17px;}
.join_wrap_area .join_procedure ul li.ing .join_icon{background: #0067da!important;  box-shadow: 1px 1px 4px #203d8575;}
.join_wrap_area .join_procedure ul li.ing .join_icon img{filter: none!important;}
.join_wrap_area .join_procedure ul li.ing .join_txt{color:#0067da !important;}
.join_wrap_area .btn_wrap {width: 100%; display: flex; justify-content: center; align-items: center;}
.join_wrap_area .btn_wrap a.next_btn{margin-right:7px;}
.join_wrap_area .btn_wrap a.cancle_btn{background: #7386a1 !important;}
.join_wrap_area .btn_wrap a {background: #3178e3; color: #fff; padding: 10px 15px;border-radius: 2px;}
.join_wrap_area .btn_wrap a:hover{background: #216bd9;    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);}
.join_wrap_area .btn_wrap a.cancle_btn{background: #64758c !important;}
.join_wrap_area .join_procedure_sub p{font-size: 16px; line-height: 1.6; color: #666;}
.join_wrap_area .r_con label {vertical-align: middle; margin-left: 10px;}
.join_wrap_area .r_con span {font-size: 13px;color: #666; vertical-align: middle;}



/* 회원가입 본인확인 */
.join_wrap_area .b_txt {font-weight: bold; color: #2765d5;font-size: 16px;}
.join_wrap_area .phone_wrap {width: 100%; display: flex; flex-direction: row; border: 15px solid #f6f6f6; background:#fff; border-radius: 5px; padding: 25px 50px; margin-top: 15px; align-items: center; justify-content: space-between;}
.join_wrap_area .phone_con{width:12%;}
.join_wrap_area .phone_con img{width:100%;display: block;}
.join_wrap_area .phone_wrap .phone_btn {text-align: center;}
.join_wrap_area .phone_btn a {padding: 15px 23px; background: #379fc6; color: #fff !important; border-radius: 3px; display: block;}
.join_wrap_area .phone_btn a:hover{background: #2687aa;}


/* 회원가입 정보입력 */
.join_wrap_area .join_wrap_content {margin-top: 20px;}
.join_wrap_area .info_row {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; align-content: center;  border: 1px solid #f3f3f3;  border-bottom: 0;}
.join_wrap_area .info_l {width: 25%; text-align: center; padding: 15px; background: #fdfdff; display: flex; align-items: center; justify-content: center; border-right: 1px solid #f3f3f3;}
.join_wrap_area .info_r {display: flex; align-items: flex-start; padding: 15px 25px; width: 75%; flex-direction: column;}
.join_wrap_area .info_l2 {width: 25%; text-align: center; padding: 15px; background: #fdfdff; display: flex; align-items: center; justify-content: center; border-right: 1px solid #f3f3f3;}
.join_wrap_area .info_r2 {display: flex; align-items: flex-start; padding: 15px 25px; width: 25%; flex-direction: column;}
.join_wrap_area span.join_subtxt {margin-top: 6px; font-size: 12px !important; color: #989898 !important;}
.join_wrap_area span.join_subtxt_err {margin-top: 6px; font-size: 12px !important; color: #ff3f3f !important;}

.join_wrap_area .info_fit {width: 31% !important;}
.join_wrap_area .info_fit_2 {width: 31% !important;}
.join_wrap_area .info_fit_3 {width: 41% !important;}
.join_wrap_area .fit_wrap {width:100%; display: flex; flex-direction: row !important; align-items: center !important; flex-wrap: wrap;}
.p5{padding: 0 5px;font-size:15px;}
.m10{margin-top: 10px;}
.mr10{margin-right:10px;}
.bb1{border-bottom: 1px solid #f3f3f3 !important;}

/* 회원가입 버튼 */
.join_wrap_area .info_btn{padding: 7px 14px; background: #379fc6; color: #fff !important; border-radius: 3px; display: block; margin-left: 5px;}
.join_wrap_area .info_btn:hover{background: #2687aa;}
.join_wrap_area .fit_wrap,
.join_wrap_area .fit_wrap label,
.join_wrap_area .fit_wrap input[type='checkbox']{vertical-align:middle; margin: 0 0;}
.join_wrap_area .fit_wrap label{margin-right:20px;}
.join_wrap_area .fit_wrap label span{padding-left:5px; font-size: 15px; color: #666;}

/* 회원가입 가입완료 */
.join_wrap_area .success_wrap {width: 100%; display: flex; flex-direction: column; border: 4px solid #ecf4fe; background: #fff; border-radius: 5px; padding: 40px 50px; margin-top: 15px; align-items: center; justify-content: space-between;}
.join_wrap_area .success_con{width:33%;}
.join_wrap_area .success_con img{width:100%;display: block;}
.join_wrap_area .success_txt{ font-size: 15px; text-align: center; margin-top: 25px;}
.success_txt span{font-weight: bold; font-size: 22px; display: block; padding-bottom: 5px;}

/* id/pw찾기 */
.join_wrap_area .info_fit_gubun_1 {width: 31% !important;}
.join_wrap_area .info_fit_gubun_2 {width: 69% !important;}

.pwSearch .phone_btn {padding: 15px 23px !important; background: #379fc6 !important; color: #fff !important; border-radius: 3px !important; display: block !important;}
.pwSearch .phone_btn:hover{background: #2687aa !important;}

/* 반응형 */
@media screen and (max-width:1300px) {
    .join_wrap_area .w1300{padding: 0 30px;}
    .login_wrap_area .w1300{padding: 0 30px;}
    .login_wrap_area .login_info a {padding: 0 18px;}
    .join_wrap_area .phone_wrap {padding: 25px 20px;}
    .join_wrap_area .phone_wrap .phone_txt{padding: 0 20px;}

}

@media screen and (max-width:1200px){
    .join_wrap_area .phone_wrap {flex-direction: column;}
    .join_wrap_area .phone_wrap .phone_btn { margin-top: 15px;}
    .join_wrap_area .phone_con {width:15%;  margin-bottom: 15px;}
}

@media screen and (max-width:1100px){
    .join_wrap_area .use_wrap {padding: 30px 0px; width: 100%; margin: 0 auto;}

    .login_wrap_area .login_info {width: 80%;}
    .login_wrap_area .other_login_con { width: 80%;}
    .login_wrap_area .login_form {width: 70%;}
    .login_wrap_area .login_info a {padding: 0 15px;}
    .login_wrap_area .sub_txt {display: block;}
    .login_wrap_area .nomal_login, .login_wrap_area .other_login {min-height: 290px; padding: 35px 0;}

}

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

    .login_wrap_area .login_area {flex-direction: column;}
    .login_wrap_area .nomal_login, .login_wrap_area .other_login {width: 100%;}
    .login_wrap_area .nomal_login{margin-bottom:30px;}
    .login_wrap_area .other_login_con {width: 70%;}
    .login_wrap_area .icon_area {width: 8%;}
    .join_wrap_area .success_con {width: 40%;}

}

@media screen and (max-width:750px){
    .join_wrap_area .join_procedure ul li {width: 25%;}
    .join_wrap_area .join_procedure ul li .join_icon {width: 70px; height: 70px;}
    .login_wrap_area .nomal_login, .login_wrap_area .other_login {min-height: 245px;}
    .join_wrap_area .phone_con {width:20%;}
    .join_wrap_area .info_r {padding: 15px 15px;}
    .join_wrap_area .info_fit {width: 30% !important;}
    .join_wrap_area .info_fit_2 {width: 30% !important;}
    .join_wrap_area .info_fit_gubun {width: 70% !important;}
    .join_wrap_area .info_fit_gubun_1 {width: 30% !important;}
    .join_wrap_area .info_fit_gubun_2 {width: 70% !important;}
}

@media screen and (max-width:550px){
    .join_wrap_area .w1300 {margin: 35px auto;}
    .join_wrap_area .w1300 {padding: 0 20px;}
    .login_wrap_area h3.login_title {font-size: 25px; margin: 0px auto 20px;}
    .join_wrap_area h3.join_title {text-align: center;margin: 0 auto 20px;font-size: 25px;}
    .join_wrap_area .join_procedure ul li .join_icon {width: 55px; height: 55px;}
    .join_wrap_area .join_procedure ul li .join_txt {margin-top: 15px; color: #6e7b8f; font-weight: bold; font-size: 14px;}
    .join_wrap_area .join_procedure_sub p {font-size: 14px;}
    .join_wrap_area .join_procedure {padding: 25px 20px;}
    .join_wrap_area .use_wrap {padding: 30px 0px;}
    .join_wrap_area .use_wrap_title .l_con {font-size: 17px;}
    .login_wrap_area .log_btn {font-size: 13px;}
    .login_wrap_area .login_info a {padding: 0 8px;}
    .login_wrap_area .title_bar {font-size: 14px;padding: 20px 0;}
    .join_wrap_area .success_txt {font-size: 14px;}
    .join_wrap_area .success_wrap {padding: 30px 28px; margin-top: 0px;}
    .join_wrap_area .success_con {width: 45%;}
    .join_wrap_area .phone_con {width:30%;}
    .join_wrap_area .use_wrap_title { align-items: center;  flex-direction: column;}
    .join_wrap_area .use_wrap_content{padding:15px;}
    .join_wrap_area .info_r { padding: 15px 15px;}
    .join_wrap_area select,
    .join_wrap_area textarea,
    .join_wrap_area input[type=text],
    .join_wrap_area input[type='tel'],
    .join_wrap_area input[type='password'] {min-height: 30px; height: 30px; padding: 5px 7px; font-size: 13px;}
    .login_wrap_area select,
    .login_wrap_area textarea,
    .login_wrap_area input[type=text],
    .login_wrap_area input[type='tel'],
    .login_wrap_area input[type='password'] {min-height: 30px; height: 30px; padding: 5px 7px; font-size: 13px;}
    .join_wrap_area .info_fit {width: 27% !important;}
    .join_wrap_area .info_fit_2, .join_wrap_area .info_fit_3 {width: 57% !important;}
    .join_wrap_area .info_fit_gubun_1 {width: 40% !important;}
    .join_wrap_area .info_fit_gubun_2 {width: 60% !important;}
    .join_wrap_area .info_btn {padding: 6px 14px; font-size: 13px;}
}