@import '@mobile/assets/themes/base/mixin.less';

.home-main {
    background:#fff  url(../../../assets/images/home-bg.png) repeat-y;
    background-size: 100%;

    .app-view__body {
        margin-top: -30px;
    }

    &__header {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 167px;
        background: #fff url(../../../assets/images/home-header.png) no-repeat;
        background-size: 100%;
        padding-bottom: 20px;

        img {
            width: 40%;
        }
    }

    &__banner {
        padding: 0 12px;

        .app-banner {
            position: relative;
            z-index: 1;
            border-radius: 10px;
            overflow: hidden;
        }
    }

    &__iconbar {
        padding: 20px 30px;

        ul {
            display: flex;
            background-color: #fff;
            border-radius: 8px;
            padding: 10px;

            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 48px;
                    height: 48px;
                }

                span {
                    font-size: 12px;
                    font-weight: bold;
                    color: #898989;
                    margin-top: 5px;
                }
            }
        }
    }

    &__news {
        border-top: 1px solid #9FA0A0;
        padding: 10px;
        padding-top: 0;
        margin: 0 30px;

        section {
            background-color: #fff;
            box-shadow: 0 0 10px #DCDDDD;
            padding: 30px;
            padding-top: 0;

            h2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 80px;
                background: url(../../../assets/images/icons/announcement.svg) no-repeat center left;
                background-size: auto 32px;
                padding: 24px 0 24px 48px;

                span {
                    font-size: 12px;
                    font-weight: bold;

                    &:first-child {
                        color: #fff;
                    }

                    &:last-child {
                        color: #D09F3B;
                    }
                }
            }

            ul {
                li {
                    .mixin-text-overflow();
                    display: inherit;
                    font-size: 12px;
                    font-weight: bold;
                    color: #9FA0A0;
                    white-space: nowrap;
                    padding-bottom: 16px;
                }
            }
        }
    }
}