$header-height: 200px;
$content-height: 145px;
$content-width: 99%;

#main>header {
    @media only screen and (max-width: 767px){
        height: 200px;
        border-width: 0;
        padding: 0;
    }
}

.mobile-header {
    height: $header-height;
    width: 100%;
    flex-grow: 1;
    background: url('../image/headerBg.jpg');
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-position: center;
    background-size: 100% 100%;

    .header-content {
        height: $content-height;
        width: $content-width;

        .header-title {
            font-size: 24px;
            color: #ffffff;
            font-family: AritaHeiti !important;
        }

        .header-saying,.header-other {
            font-size: 18px;
            color: #3e2723;
            font-family: AritaHeiti !important;
            padding-top: 6px;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
        }

        .header-link {
            a {
                color: unset;
                padding: 0 4px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;

                .icon-title {
                    font-family: AritaHeiti !important;
                    margin-left: 2px;
                }

            }
        }
    }


}