/* ========== splash ========== */

.splash {width:100%;height:100vh;background:linear-gradient(-45deg,#3f9dff,#52a7ff);}
.splash figure {width:70%;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);}
.splash figure img {width:100%;height:100%;object-fit: contain;}

.loading {position:absolute;bottom:8%;left:50%;transform:translate(-50%,-50%);}

.loading i {
    animation: loading 3s infinite linear;
    color:#fff;
    font-size:50px;
}


@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}



/* ========== splash ========== */


/* ========== login ========== */



.login {
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    gap:40px;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.login-title {display:flex;gap:10px;flex-direction: column;}

.login figure {width:50%;margin: 0 auto;}

.login h2 {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom:20px;
}

.login-form input {
    height: 50px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.login-input-flex {
    justify-content: center;
    display: flex;
    gap:20px;
}

.login-input-con {
    display:flex;
    align-items: center;
    line-height:1
}

.login-btn,
.signup-btn {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.login-btn {
    background-color: var(--primary-color);
    color: #fff;
    margin-top: 10px;
}

.signup-btn {
    background-color: #fff;
    color: var(--primary-color);
    border:1px solid var(--primary-color)
}


.find {
    margin-top:10px;
    text-align: center;
    color:#999;
    font-size:14px;
}

.find a {margin-left:5px;color:#333;border-bottom:1px solid #333;}


/* ========== login ========== */

/* ========== join ========== */


.join {
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    gap:40px;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.join-title {display:flex;gap:10px;flex-direction: column;}

.join figure {width:50%;margin: 0 auto;}

.join h2 {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

.join-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom:20px;
}

.join-form label {position:relative;}

.join-form label::after {display:block;content:"";width:10px;height:10px;background-image: url(../img/star.png);background-size:contain;background-repeat: no-repeat;position:absolute;top:50%;right:-20px;transform:translateY(-50%);}

.join-form input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    margin-top:10px;
}

.join-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.join-btn {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    background-color: var(--primary-color);
    color: #fff;
    margin-top: 10px;
}

.id-box>div {
    display:flex;
    gap:10px;
}

.id-box>div>span {
    width: 50%;
    height: 50px;
    background:var(--primary-color-light);
    color:var(--primary-color);
    margin-top:10px;
    border-radius:10px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.birth-select-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.birth-select-container select {
    flex: 1;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("../img/select.png");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 8px;
}

.birth-select-container select:focus {
    outline: none;
    border-color: var(--primary-color);
}


.join-form div span {font-size:14px;}
.bluetext {color:var(--primary-color);}
.redtext {color:rgb(255, 47, 47)}
.join-form div span i {padding-right:2px;}



/* ========== join ========== */


/* ========== find ========== */

.tab-wrap {
    border-bottom: 1px solid #ddd;
}
.tab-menu {
    display: flex;
}
.tab-menu > div {
    width: 50%;
    text-align: center;
    padding: 15px 0;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    position: relative;
}
.tab-menu > div.active {
    font-weight: 700;
    color: var(--primary-color);
}
.tab-menu > div.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.find-form .input-wrap {
    margin-bottom: 15px;
}
.find-form .input-wrap input {
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0 15px;
}
.find-form .find-btn {
    width: 100%;
    height: 50px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
    border: none;
    cursor: pointer;
}

.gender-box input {width:unset;height:unset;margin: 0 5px 0 0} 
.gender-box>div {display:flex;gap:30px;margin-top:10px;}

/* ========== find ========== */