@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700;900&display=swap');

html, body {
    margin: 0 auto;
    min-height: 100vh;
    line-height: 1;
    box-sizing: border-box;
    position: relative;
    font-family: 'Source Sans Pro', Helvetica, "PingFang SC", STHeitiSC-Light, Helvetica-Light, arial, sans-serif, "Droid Sans Fallback";
}

.landing {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    padding: 3vw;
    flex-direction: column;
    background: #e6eff0;
    box-sizing: border-box;
}

.landing-title {
    width: 61vw;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 2.67vw;
    font-size: 0.64rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 3.8vw;
}

.kb-service-box {
    display: flex;
    align-items: flex-start;
}

.kb-icon {
    width: 10.8vw;
    height: 10.8vw;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-icon img {
    width: 7.5vw;
    height: 7.2vw;
}


.kb-gift-box {
    width: 64vw;
    margin-left: 3vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kb-service-title {
    font-size: 3.5vw;
    color: #000000;
    font-weight: 500;
}

.kb-gift-details {
    padding: 2.2vw;
    border-radius: 1.3vw;
    background: #FFFFFF;
    margin-top: 2.7vw;
}

.kb-gift-img {
    width: 100%;
    height: 19.74vw;
    border-radius: 1.3vw;
}

.kb-gift-title {
    font-size: 3.2vw;
    font-weight: 500;
    color: #000000;
    text-align: left;
    line-height: 1.2;
    margin-top: 1.3vw;
}

.register-join {
    font-size: 3.2vw;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    background: #e74747;
    border-radius: 1.3vw;
    padding: 2.7vw 1.3vw;
    margin-top: 2.7vw
}

.kb-user-box {
    display: flex;
    align-items: start;
    justify-content: flex-end;
    margin-top: 2.7vw;
    display: none;
}

.kb-user-message {
    font-size: 3.2vw;
    font-weight: 500;
    color: #FFFFFF;
    text-align: right;
    background: #1EA5F8;
    border-radius: 1.3vw;
    padding: 2.7vw 2.7vw;
    margin-right: 2.7vw;
    min-height: 9vw;
    box-sizing: border-box;
}

.kb-service-message {
    width: 64vw;
    font-size: 3.2vw;
    font-weight: 500;
    color: #000000;
    text-align: left;
    background: #FFFFFF;
    border-radius: 1.3vw;
    padding: 2.7vw 2.7vw;
    margin-top: 1.3vw;
}

.kb-service-box-message-1 {
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 2.7vw;
    display: none;
}

.kb-service-box-message-2 {
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 2.7vw;
    display: none;
}

.kb-gift-coupon {
    width: 100%;
    height: 80px;
    background: url("../img/eggs_gift_2.png") no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
    font-weight: 500;
    color: #141414;
}

.kb-gift-coupon div {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-gift-coupon b {
    color: #f8593b;
    margin: 0 0.5vw;
}

.message-box {
    width: 60vw;
    height: 8vw;
}

.message-send {
    width: 25%;
    background: #ff836c;
    font-size: 3.7vw;
    min-height: 8vw;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1vw;
    white-space: nowrap;
    overflow: hidden;
}

.touchable:active {
    transition: opacity 0.16s !important;
    opacity: 0.625 !important;
}

.register-btn {
    box-sizing: border-box;
    width: calc(100vw - 8vw);
    white-space: nowrap;
    padding: 0 4vw;
    height: 14.66vw;
    min-height: 12.66vw;
    background: #FFFFFF;
    box-shadow: 0 1.33vw 2.6vw 0 rgba(0, 0, 0, 0.17);
    border-radius: 2vw;
    font-size: 5.33vw;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 5.6vw;
    margin: 0 4vw;
    margin: 0 auto;
}

/*.register-btn:active {*/
/*    transition: all 0.36s;*/
/*    transform: scale(0.97);*/
/*}*/

.bounce {
    animation: bounceEl .3s infinite alternate;
}

@keyframes bounceEl {
    from {
        transform: scale(0.98);
    }
    to {
        transform: scale(1.04);
    }
}