@charset "utf-8";

.join-page{
    .inner {max-width: 1400px;padding: 180px 30px 120px;margin: 0 auto;}
    .title-box{font-family: var(--Manrope),sans-serif;display: flex;align-items: flex-end;column-gap: 20px;}
    .title-box{
        h2{color: #F8F9FA;font-size: 93px;font-style: normal;font-weight: 700;line-height: 1.1;letter-spacing: -3.72px;text-transform: uppercase;}
        p {max-width: 364px;color: #D9D9D9;font-size: 18px;font-style: normal;font-weight: 500;line-height: 1.2;letter-spacing: -0.18px;}
    }
    .input-box{display: flex;flex-direction: column;row-gap: 24px;margin-top: 64px;max-width: 800px;}
    .input-box .input-item{width: 100%;position: relative;}
    .input-box .input-item::after{content:'';width: 20px;height: 21px;display: block;background-image: url("input-check.svg");position: absolute;right: 24px;top: 50%;transform: translateY(-50%);opacity: 0;transition-duration: 0.2s;transition-property: opacity;}
    .input-box input[type="text"]{width:100%;display: flex;padding: 20px 54px 20px 24px;flex-direction: column;justify-content: center;align-items: flex-start;align-self: stretch;border-radius: 10px;background: #141414;color: rgba(255, 255, 255, 0.50);font-family: var(--Manrope),sans-serif;font-size: 16px;font-style: normal;font-weight: 400;line-height: 1.2;border: 1px solid #141414;}
    .input-box button[type="submit"]{display: flex;height: 52px;padding: 10px;justify-content: center;align-items: center;align-self: stretch;color: #000;font-family: var(--Manrope),sans-serif;font-size: 14px;font-style: normal;font-weight: 500;line-height: 1.2;border-radius: 10px;background: #F8F9FA;}
    .input-box #msg {width: 100%;height: 45px;color: #2156F5;font-family: var(--Manrope),sans-serif;font-size: 18px;font-style: normal;font-weight: 400;line-height:1.2;letter-spacing: -0.18px;text-align: left;}
    .input-box.ok input[type="text"] {border: 1px solid #F8F9FA;}
    .input-box.ok .input-item::after{opacity: 1;}
    .input-box.ok button[type="submit"]{background: rgba(248, 249, 250, 0.30);

    }

    @media screen and (max-width: 1440px) {
        .title-box{flex-direction: column;align-items: flex-start;row-gap: 32px;}
        .title-box{
            p {max-width:100%;}
        }
    }

    @media screen and (max-width: 750px) {
        .inner {padding: 180px var(--container-padding) 60px;}
        .title-box{
            h2{font-size: 48px;}
            p {font-size: 14px;}
        }
        .input-box {display: flex;flex-direction: column;row-gap: 24px;margin-top: 72px;}
        .input-box #msg {font-size: 12px;}
    }
}