body {
    min-height: 100vh;
}

.login-wrap {
    padding-top: 40px;
    font-family: "Noto Sans TC", sans-serif;
}


.box {
    height: 474px;
}

.inner-box {
    padding-left: 30px;
    padding-right: 0;
}

.bg {
    background-color: #FEF2E9;
    background-image: url("/image/login-bg.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.zoom-bg {
    background-image: url("/image/zoom-bg.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.qr-bg {
    background-image: url("/image/qr-code-bg.svg");
    background-repeat: no-repeat;
    background-position-y: 225%;
    background-size: contain;
}

.qr-code-wrap {
    width: 268px;
    padding-left: 0;
    padding-right: 35px;
}

.bg2 {
    width: 400px;
    background-color: #FFE6D0;
    border-radius: 0 16px 16px 0;
    box-shadow: 0px 2px 15px rgba(204, 204, 204, 0.3);
    padding: 20px 40px 64px 40px;
}

.bg2 img {
    vertical-align: baseline;
    margin-right: 16px;
}


.logo h1 {
    font-family: "Noto Sans TC", sans-serif;
    color: #333;
    font-size: 20px;
}

.font-weight-bold {
    font-weight: 700 !important;
    letter-spacing: 1.5px;
}

.font-weight-normal {
    font-weight: 400 !important;
    letter-spacing: .4px;
}

.zippy-1 {
    top: -110px;
    left: -44px;
}

.zippy-2 {
    top: -120px;
    right: 75px;
}

.zippy-3 {
    bottom: -166px;
    left: -166px;
}

.zippy-4 {
    bottom: -75px;
    right: -275px;
}

.zippy-5 {
    display: none;
}

.club-qrcode {
    display: block;
    margin: auto;
    margin-top: 53px;
    margin-bottom: 24px;
}

.qrcode-title {
    font-family: "Lexend", serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: .4px;
    text-align: center;
    color: #333;
}

.qrcode-sub-title {
    color: #666;
    font-family: "Noto Sans TC";
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    letter-spacing: .4px;
}

.lexend {
    font-family: "Lexend", serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .4px;
}

.login-form .col-md-6 {
    border-radius: 16px 0 0 16px;
    box-shadow: 0px 2px 15px rgba(204, 204, 204, 0.3);
    height: 474px;
}

.col-md-3 {
    height: 474px;
}

form {
    width: 320px;
    transform: translateY(40px);
}

.login-form h2 {
    color: #333;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .4px;
}

.forgot-psw {
    text-decoration: none;
    border-bottom: 1px solid #333;
    color: #333;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .4px;
}

.ggl-desc h3 {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 42px;
    letter-spacing: .4px;
    margin-bottom: 4rem;
}

.zippy-ggl {
    transform: translateX(60px) translateY(-20px);
    z-index: 1;
}

.btn {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    border-radius: 30px;
    background-color: #FFDB48;
    transition: all .3s;
}

.ggl-btn {
    background-color: #FF5D55;
    color: #fff;
    transform: translateY(-70px);
}

.btn:hover {
    background-color: #fff;
    border: 1px solid #FFDB48;
    transition: all .3s;
}

.ggl-btn:hover {
    border: 1px solid #FF5D55;
}

.ggl-btn:active {
    background-color: #fff !important;
    border: 1px solid #FF5D55 !important;
    color: #333 !important;
}

.icon-title {
    padding-top: 1em;
}

.footer-link a {
    text-decoration: none;
    color: #595857;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
}

.contact h3,
.contact a {
    color: #595857;
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
    line-height: 20px;
}

.copyright {
    font-family: "Roboto", serif;
    font-weight: 400;
    font-size: 14px;
    color: #595857;
}

@media screen and (min-width:1920px) {
    .zippy-3 {
        left: -175px;
    }
}

@media screen and (max-width:1024px) {
    .bg2 {
        padding: 40px 40px 0 40px;
    }

    .zippy-1 {
        width: 20%;
        left: -50px;
    }

    .zippy-2 {
        width: 20%;
        right: -30px;
    }

    .zippy-3 {
        width: 30%;
        bottom: 37%;
        left: -60px;
    }

    form {
        transform: translateY(0);
    }

    .icon-title {
        padding-top: 0;
    }

    .ggl-btn {
        max-width: 320px;
        display: block;
        margin: auto;
    }

    .qr-code-wrap {
        width: 100%;
        padding-right: 0;
        padding-bottom: 36px;
        padding-top: 16px !important;
    }

    .inner-box {
        width: 100%;
        padding-top: 50px;
        padding-left: 0;
        border-radius: 16px 16px 0 0;
    }

    .box {
        width: 100%;
        height: unset;
    }

}

@media screen and (max-width:1023px) and (min-width:700px) {
    .col-lg-6 {
        width: 100%;
    }

    .bg2 {
        width: 100%;
        border-radius: 0;
    }

    .bg2 .ggl-btn {
        display: block;
        width: 320px !important;
        margin: auto;
    }

    .zippy-1 {
        width: 25%;
        left: -30px;
    }

    .zippy-2 {
        width: 25%;
        right: -30px;
        top: -120px;
    }

    .zippy-3 {
        width: 35%;
    }
}


@media screen and (max-width:430px) {
    body {
        margin-bottom: 0 !important;
    }

    form {
        width: unset;
    }

    .bg {
        background-image: url("/image/mobile-login-bg.svg");
        background-size: 117%;
    }

    .qr-bg {
        background-image: url("/image/qr-code-bg.svg");
        background-position-y: 110%;
        background-position-x: 50%;
    }


    .bg2 {
        border-radius: 0 0 16px 16px;

    }

    .login-wrap {
        padding-top: 48px !important;
    }

    .login-form .col-md-6 {
        border-radius: 16px 16px 0 0;
    }

    .logo img:nth-child(1) {
        width: 152px;
    }

    .zippy-1 {
        width: 170px;
        top: -85px;
        left: -67px;
    }

    .zippy-2,
    .zippy-3,
    .zippy-4 {
        display: none;
    }

    .zippy-5 {
        display: block;
        bottom: -100%;
        right: -20px;
    }

    .login-form {
        margin: 24px;
    }

    .login-form h2 {
        font-size: 20px;
    }

    .p-5 {
        padding: 2rem 1.5rem 2rem 1.5rem !important;
    }

    .btn {
        font-weight: 500;
        font-size: 16px;
    }

    .lexend {
        font-size: 16px;
    }

    .qr-code {
        width: unset;
        margin: 24px !important;
    }

    .footer-link a {
        font-weight: 500;
        font-size: 16px;
    }

    .inner-box {
        padding-left: 36px;
        padding-right: 36px;
    }

    .box {
        height: unset;
    }

    .club-qrcode {
        margin-top: unset;
    }

    .qr-code-wrap {
        padding-bottom: 36px;
        padding-top: 36px !important;
    }
}