/* body */
body,
html {
    height: 100%;
}

body {
    margin: 0;
    background-attachment: fixed;
    width: 100%;
    height: auto;
}

#app {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

hr {
    margin: 4.267vw 1.333vw 0 1.333vw;
    background: #000000;
    opacity: 0.1;
}

/* body */

/* header */
.header {
    width: 100%;
    height: 13.3333vw;
    background: #FFFFFF;
    display: flex;
    align-items: flex-end;
}

.header_info {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.header_info_title {
    text-align: center;
    font-family: Roboto Flex;
    font-weight: 500;
    font-size: 4.2667vw;
    line-height: 13.3333vw;
    color: #000000;
    font-style: normal;
}

.header_info_title:before {
    content: 'Welfare Center';
}

/* header */

/* offer */
.offer_list {
    padding: 0 3.33vw;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    /* iOS 惯性滚动 */
}

.offer {
    margin-top: 16vw;
    width: 100%;
    height: 63.0667vw;
    border-radius: 8.8vw;
    opacity: 1;
    background: linear-gradient(180deg, #CFEDFF 0%, #F4FBFF 100%);
    box-sizing: border-box;
    text-align: center;
    position: relative;
    /* 为子元素定位提供参照 */
}

.offer_badge {
    position: absolute;
    top: -2vw;
    /* 上移 */
    left: 0vw;
    /* 左移 */
    pointer-events: none;
    /* 避免挡住点击 */
    width: 28.6667vw;
    height: 9.6vw;
}

.offer_back{
    position: absolute;
    top: -2vw;
    /* 上移 */
    left: 20vw;
    /* 左移 */
    pointer-events: none;
    /* 避免挡住点击 */
    width: 9vw;
    height: 2vw;
    z-index: -1;
}

.badge {
    position: absolute;
    top: 0vw;
    left: 3.4667vw;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.badge img {
    width: 6.4vw;
    height: 6.4vw;
}

.badge span {
    padding-left: .5333vw;
    font-size: 4.5vw;
    font-weight: bold;
    color: #FFFFFF;
    display: inline-block;
    letter-spacing: 0.5;
}


.offer_img {
    width: 29.8667vw;
    height: 29.8667vw;
    border-radius: 6.6667vw;
    object-fit: cover;
    box-shadow: 0vw 1.3333vw 1.8667vw .2667vw rgba(58, 66, 71, 0.14);

    position: absolute;
    top: 0;
    /* 从顶部开始 */
    left: 50%;
    /* 水平居中 */
    transform: translate(-50%, -30%);
    /* 向X方向偏移50%， 向Y方向偏移自身30% */
}

.offer_info {
    padding-top: 26.2667vw;
    padding-left: 13.3333vw;
    padding-right: 13.3333vw;
    font-family: Noto Sans;
    font-size: 4vw;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0em;
    font-feature-settings: "kern" on;
    color: #000000;

    white-space: normal;
    /* 允许正常换行 */
    word-break: keep-all;
    /* 尽量在单词边界换行 */
    overflow-wrap: break-word;
    /* 如果实在太长会强制断行 */
}

.offer_button {
    margin: 6.6667vw auto 0vw;
    width: 36.9333vw;
    height: 11.4667vw;
    border-radius: 112px;
    opacity: 1;
    box-sizing: border-box;
    border: .1333vw solid #0B84FE;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    color: #0B84FE;
    font-weight: bold;
}

/* offer */

/* errorMsg */
#errorMsg {
    position: fixed;
    left: 50%;
    bottom: 10%;
    z-index: 100;
    transform: translate(-50%, 0);

    padding: 0.555vw 2.777vw;
    border-radius: 1.333vw;
    background: rgba(100, 98, 98, 0.81);
    color: #FFFFFF;
    font-size: 4.444vw;

    animation: fadeOut 3500ms ease-in-out forwards;
}

/* errorMsg */

/* offlineMsg */
#offlineMsg {
    position: fixed;
    left: 50%;
    bottom: 10%;
    z-index: 100;
    transform: translate(-50%, 0);

    padding: 0.555vw 2.777vw;
    border-radius: 1.333vw;
    background: rgba(100, 98, 98, 0.81);
    color: #FFFFFF;
    font-size: 4.444vw;
    text-wrap: nowrap;

    animation: fadeOut 3500ms ease-in-out forwards;
}

/* offlineMsg */