html, body {
    min-width: 1200px;
    height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
main {display: flex; justify-content: center;
    margin: auto;
}
legend {display: none;}
.wrap {
    max-width: 1060px; margin: 220px 0 120px;
    display: flex;flex-flow: row nowrap; justify-content: center;
    position: relative;
}
/* 공통 */
form {
    width: 50%; height: 325px; background-color: #fff;
}
input {
  width: 100%;
}
.login_txt {
    width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between;
    align-items: center;
    padding: 0 5px; font-weight: 700; margin-bottom: 5px;
}
.join_box > li, .login_box {margin-bottom: 20px;}
.login_warning_txt , p > .warning_txt, .join_warning_txt, .find_pw_warning_txt, .warning, .warningStar{
    font-size: 12px; color: #ff0000;
}
input[type=text], input[type=password], .join_select input[type=number], .join_select select, .join_phone_empty, .rePw, .rePwCheck {
    border: 1px solid #ddd;
    height: 40px; padding: 0 15px;
    border-radius: 3px;
}
input::placeholder {
    color: #bbb; font-size: 12px;
    font-weight: 400;
}
.gmail_btn {
  width: 12% !important;
}
#gSignInWrapper {
  height: 100%;
}
#customBtn {
  height: 100%;
  width: 100%;
  display: inline-block;
  background: white;
  color: #444;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border: 0.063rem solid #434343;
  padding: 2% 0;
}
#customBtn:hover {
  cursor: pointer;
}
#customBtn img {
  height: 100%;
}
/* 무슨 기능이더라.. */
/* .abcRioButtonContentWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.abcRioButtonIcon {
  height: 100%;
  padding: 0 !important;
  float: none !important;
}
.abcRioButtonIconImage18 {
  display: flex;
  align-items: center;
  width: 100% !important;
  height: 100% !important;
}
.abcRioButton {
  width: 100% !important;
  height: 100% !important;
}
.abcRioButtonContents {
  display: none !important;
}
.abcRioButton:hover {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25) !important;
}
.abcRioButtonSvg {
  width: 100% !important;
  height: 70% !important;
} */
.gmail_btn img {
}
.gmail_btn:active {box-shadow: none;}
.login_btn {
    border-top-right-radius: 3px; border-bottom-right-radius: 3px; overflow: hidden;
    box-shadow:  2px 2px 4px #babebc;background-color: #434343; 
}
.login_btn a {
    display: block;
    line-height: 40px;
}
.login_btn:active {
    box-shadow: inset 2px 2px 4px #babebc, inset -5px -5px 12px #fff;
    background-color: #fff;
}
.login_btn:active a {color: #222 !important;}
#login_container fieldset .login_wrap {
    width: 100%; height: 100%; padding: 50px 80px 0; 
}
h3 {font-size: 20px; font-weight: 700; text-align: center;}
/* 성별 radio 수정 */
input[type=radio]{
    display: none;
}
input[type=radio]+label {
    box-shadow:  2px 2px 4px #babebc;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
    height: 24px;
    width: 90px;
    line-height: 24px;
    text-align: center;
    font-weight:bold;
    font-size:13px;
}
input[type=radio]:checked+label{
    background-color: #434343;
    box-shadow: none;
    color: #fff;
}
/*  */
/* 로그인 wrap */
#login_container fieldset {}
#login_container fieldset .login_wrap .login_box .login_txt span {
    font-weight: 700;
}
.login_wrap li:nth-child(3) {
    margin-bottom: 10px;
}
#login_container fieldset .login_wrap .login_box .login_txt a {
    font-size: 10px; color: #bbb;
}
#login_container fieldset .login_wrap .login_box input[type=text] {}
#login_container fieldset .login_wrap .login_box input[type=password] {}
#login_container fieldset .login_wrap .login_warning_txt, .join_warning_txt, .warning {
    display: block;
}
#login_container fieldset .login_wrap .warning_txt li {}
#login_container fieldset .login_wrap .login_btn_box {
    display: flex; height: 80px; text-align: center; gap:20px;
    justify-content: center; align-items: start;
}
#login_container fieldset .login_wrap .login_btn_box li {
    height: 40px;
    width: 100%;
}
#login_container fieldset .login_wrap .login_btn_box li a {
    color: #fff;
    width: 100%;
    height: 100%;
    display: block;
}
#login_container fieldset .login_wrap .login_btn_box li a img {}
/* 회원가입 wrap */
#join_wrap {
    padding: 20px 78px 0 80px; 
    overflow-y: scroll; overflow-x: hidden;
}
#join_wrap::-webkit-scrollbar {width: 2px;}
#join_wrap::-webkit-scrollbar-thumb {
    background-color: #bbb; border-radius: 5px;
}
#join_wrap::-webkit-scrollbar-track {}
#join_wrap fieldset {}
#join_wrap fieldset .join_box {}
#join_wrap fieldset .join_box > li {
}
#join_wrap fieldset .join_box > li p {
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#join_wrap fieldset .join_box > li p .warning_txt {}
#join_wrap fieldset .join_box > li input {}
#join_wrap fieldset .join_box > li .join_select {
    display: flex; flex-flow: row nowrap; justify-content: space-between;
}
#join_wrap fieldset .join_box > li .join_select label {
    display: flex; flex-flow: row nowrap; justify-content: center;
}
#join_wrap fieldset .join_box > li .join_select label span{}
#join_wrap fieldset .join_box > li .join_select input[type=radio] {}
#join_wrap fieldset .join_box > li .join_select select {
    margin: 0 5px;
    font-size: 12px;
    font-weight: 400;
}
#join_wrap fieldset .join_box > li .join_select input[type=number] {
    width: 70px;
    font-size: 12px;
}
#join_wrap fieldset .join_box > li .join_select input[type=number]:last-child {
    width: 60px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select option {}
#join_wrap fieldset .join_box > li .join_occu_select {}
#join_wrap fieldset .join_box > li .join_occu_select select {
  width: 100%;
  text-align: start;
  padding-left: 20px;
}
#join_wrap fieldset .join_box > li .join_occu_select select option {
  width: 300px;
}
.select_form {
    display: flex ; flex-flow: row nowrap; justify-content: space-between;
    align-items: center; padding-left: 5px;
}
.select_form > p > span {font-size: 10px; margin-left: 5px; color: #bbb;}
#join_wrap fieldset .agree_wrap {
    margin-bottom: 10px;
}
#join_wrap fieldset .agree_wrap > p {
    border-bottom: 1px solid #222; padding: 5px 0;

}
#join_wrap fieldset .agree_wrap > p input[name=agree_all] {
    width: 24px;
}
#join_wrap fieldset .agree_wrap > p label {
    font-size: 14px;
    font-weight: 400;
}
#join_wrap fieldset .agree_wrap .agree_select {margin-top: 2px;}
#join_wrap fieldset .agree_wrap .agree_select li {
    padding:3px 0;
    display: flex; flex-flow: row nowrap; justify-content: space-between;
}
#join_wrap fieldset .agree_wrap .agree_select li .clause {}
#join_wrap fieldset .agree_wrap .agree_select li > p {}
#join_wrap fieldset .agree_wrap .agree_select li input[name=agree] {width: 24px;}
#join_wrap fieldset .agree_wrap .agree_select li label {
    line-height: 20px;
    font-weight: 400;
}
#join_wrap fieldset .agree_wrap .agree_select li label span {
    font-size: 10px;color: #757575; margin-left: 5px;
}
#join_wrap fieldset .agree_wrap .agree_select li a {
    font-size: 12px;
    color: #757575;
    display: inline-block;
    width: 60px;
}
.join_submit, .find_id, .find_pw {height: 83px; display: flex; justify-content: center;}
.join_submit_btn, .find_id_btn, .find_pw_btn,.checkPw, .pwReset {
    display: block;  border-radius: 3px; text-align: center; line-height: 40px;
    color: #fff; background-color: #434343; width: 260px; height: 40px;
    box-shadow:  2px 2px 4px #babebc;
}
.join_submit_btn:active, .find_id_btn:active, .find_pw_btn:active,.checkPw:active, .pwReset:active {
    box-shadow: inset 2px 2px 4px #babebc, inset -5px -5px 12px #fff;
    background-color: #fff; color: #222;
}
.cover_join_btn {
    display: block;  border-radius: 10px; text-align: center; line-height: 40px;
    color: #fff; background-color: #434343; width: 260px; height: 40px;
    box-shadow:  2px 2px 4px #babebc;
    border-radius: 3px;
}
.cover_join_btn:active, .find_box button[type=submit]:active {
    box-shadow: inset 2px 2px 4px #babebc, inset -5px -5px 12px #fff;
    background-color: #fff; color: #222;
}
.month {color: #bbb;}
.warningWrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.joinWarning {
}
.warningStar {
    display: none;
}
.warningStar.display {
    display: block;
}
/* 아이디 찾기 */
.find_box input[type=number] {
  border: 1px solid #ddd;
  height: 40px; padding: 0 15px;
  border-radius: 3px;
}
.find_box > li {
}
.find_box > li:last-child {margin-bottom: 0;}
#find_id, #find_pw {
    padding: 20px 80px 0;
    position: absolute; right: 0; top: 0;
}
#find_id fieldset, #find_pw fieldset {
    height: 100%;
    display: flex; flex-flow: column nowrap; justify-content: space-between;
}
#find_id .find_box {}
#find_id .find_box li {}
.findSecond {
  display: none;
}
.findSecond.block {
  display: block;
}
.password {
  margin-bottom: 1vh;
}
#find_id .find_box li p {}
#find_id .find_box li p {}
.find_box li p {
    position: relative;
}
.authenticationNumber {
  margin-top: 1vh;
  display: none;
}
.authenticationNumber.block {
  display: block;
}
.find_pw_btn.none,
.checkPw.none {
  pointer-events: none;
  background-color: #ddd;
  box-shadow: inset 2px 2px 4px #babebc;
}
.checkPw {
  display: none;
}
.pwReset {
  display: none;
}
.pwReset.none {
  pointer-events: none;
  background-color: #ddd;
  box-shadow: inset 2px 2px 4px #babebc;
}
.find_box button[type=submit] {
    background-color: #434343;
    box-shadow: 2px 2px 4px #babebc;
    color: #fff;
    border-radius: 0 10px 10px 0;
    position: absolute; right: 0; top: 0;
    width: 70px; height: 100%;
}
/* 비밀번호 재설정 */
/* 커버 */
.overlay {
    background-color: #fff; 
    width: 50%; height: 100%;
    position: absolute; top: 0; right:0; padding: 70px 80px 0;
    text-align: center;
    transition: all 500ms ease-out;
}
.wrap.active .overlay{
    transform:translateX(-100%);
}
.overlay_btn_box {height: 80px; margin-top: 50px; display: flex; justify-content: center;}
.overlay h2 {font-size: 32px; margin-bottom: 30px;    font-weight: 500;}
.overlay p {
    font-size: 20px;line-height: 1.5;letter-spacing: -0.2px;
    font-weight: 400;
}
.wrap.active .overlay_right{opacity:0;}
.overlay_right{ z-index:1;}
.overlay_right p {}
.overlay_right .overlay_btn {}
.wrap.active .overlay_left{opacity:1; z-index:1;}
.overlay_left{opacity:0;}
.overlay_left h2  {}
.overlay_left p {}
.overlay_left .overlay_btn {}
#join_wrap.front {z-index: 1;}
#find_id.front {z-index: 1; display: block !important;}
/* 클래스 추가 */
.disabled {
    opacity: 0.6;
    pointer-events: none;
}