*,html{
    box-sizing: border-box;
}

.wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.find_wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 100px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
}

.find_wrap.off{
    display: none;
}

.logo{
    margin-bottom: 50px;
}

.tit{
    color: var(--mice-gray-90, #1D1D1D);
    text-align: center;
    
    /* Title_Xlarge_bold */
    font-family: Pretendard;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 37.5px */
    margin-bottom: 50px;
}

.tab_box{
    display: flex;
    margin-bottom: 40px;
}

.tab_box > div{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-bottom: 2px solid var(--mice-gray-40, #C6C6C6);
    width: 260px;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 19.5px */
    color: var(--mice-gray-60, #717171);
    text-align: center;
    cursor: pointer;

    /* Label_Xsmall_bold */
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 19.5px */
}

.tab_box > div.active{
    color: var(--mice-primary-50, #003675);
    text-align: center;
    border-bottom: 2px solid var(--mice-primary-50, #003675);
    /* Label_Xsmall_bold */
}

.pw_find{
    cursor: pointer;
}

.input_box{
    display: flex;
    gap: 16px;
    flex-direction: column;
    position: relative;
}

label{
    color: var(--mice-gray-60, #717171);
    /* Body_Small_regular */
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}

.myInput{
    margin-top: -12px;
    width: 520px;
    height: 48px;
    flex-shrink: 0;
}

.find_btn{
    margin-top: 40px;
    border: 1px solid rgb(206, 196, 196);
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    background-color: #9e9d9d;
    margin-bottom: 40px;
    border-radius: 4px;
    background: var(--mice-primary-50, #003675);
}

.line{
    height: 1px;
    background: var(--mice-gray-40, #C6C6C6);
    width: 100%;
    margin-bottom: 40px;
}

.info{
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.info.on{
    display: flex;
}

.info p{
    margin-bottom: 20px;
    color: var(--mice-gray-60, #717171);
    text-align: center;

    /* Body_Small_regular */
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}

.id_info{
    border: 1px solid #c7c7c7;
    width: 100%;
    text-align: center;
    padding: 10px;
    color: var(--mice-gray-90, #1D1D1D);
    text-align: center;

    /* Body_Small_regular */
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}

.info_btn_box{
    display: flex;
    gap: 10px;
}

.info_btn_box > div{
    margin-top: 10px;
    width: 175px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--mice-primary-20, #B4C4D6);
    background: var(--mice-primary-5, #EDF1F5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mice-primary-50, #003675);
text-align: center;

/* Body_Small_regular */
font-family: Pretendard;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 22.5px */
}

.info_btn_box > div > a{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--mice-primary-50, #003675);
    text-align: center;
    
    /* Body_Small_regular */
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}

.go_pw{
    cursor: pointer;
}

.error{
    display: none;
    flex-direction: column;
}

.error.on{
    display: flex;
}

.error p{
    text-align: center;
    margin-bottom: 20px;
}

.error > div > a{
    display: flex;
    justify-content: center;
    width: 100%;
}

.red{
    color: var(--mice-danger, #EB003B);

    /* Body_Small_bold */
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.info_btn_box > div.id_pw{
    border-radius: 4px;
    border: 1px solid var(--mice-primary-50, #003675);
    background: var(--mice-gray-0, #FFF);
}

.center{
    display: flex;
    align-items: center
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap");


@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 100;
  src: url(../../vr/booth/font/Pretendard-Thin.otf) format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 200;
  src: url(../../vr/booth/font/Pretendard-ExtraLight.otf) format("opentype");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 300;
  src: url(../../vr/booth/font/Pretendard-Light.otf) format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  src: url(../../vr/booth/font/Pretendard-Regular.otf) format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  src: url(../../vr/booth/font/Pretendard-Medium.otf) format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  src: url(../../vr/booth/font/Pretendard-SemiBold.otf) format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  src: url(../../vr/booth/font/Pretendard-Bold.otf) format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 800;
  src: url(../../vr/booth/font/Pretendard-Bold.otf) format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 900;
  src: url(../../vr/booth/font/Pretendard-Black.otf) format("opentype");
}

* {font-family: 'Pretendard', sans-serif !important;}