.MobileHeader {
    box-sizing: border-box;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    position: relative;
    /*background-color: rgba(255, 255, 255, 0);*/
	background-color: #01290f;
    z-index: 100;
}

.MobileHeader.Opened {
    height: 100%;
    /*background-color: rgba(255, 255, 255, 1);*/
	background-color: #01290f;
    opacity: 1;
}

.MobileHeader .HeaderBar {
    padding: 24px 20px 64px 20px;
}

.MobileHeader .HeaderBody {
    width: 100%;
    /*transition: transform 1s, opacity 100s linear;*/
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
    padding: 0 20px;
    opacity: 0;
}

.MobileHeader.Opened .HeaderBody {
    transform: translate(0, 0);
    height: calc(100% - 118px);
    overflow-y: auto;
    opacity: 1;
}

.MobileHeader .HeaderBar div:first-child {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.MobileHeader .HeaderBar div:last-child {
    display: inline-block;
    width: calc(100% - 40px);
    text-align: right;
    vertical-align: middle;
    height: 30px;
    position: relative;
}

.MobileHeader .HeaderBar .MobileOpen {
    display: inline-block;
    width: 30px;
    height: 24px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.MobileHeader .HeaderBar .MobileClose {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.MobileHeader .HeaderBar .MobileLogo {
    display: inline-block;
    max-width: 100%;
    height: 30px;
    width: auto;
}

.MobileHeader .HeaderBody .BerlingLtStdBold {
    font-size: 21px;
    line-height: 26px;
}

.MobileHeader .HeaderBody .HYDaSongJ {
    font-size: 19px;
    line-height: 26px;
}

.MobileHeader .HeaderBody > div:first-child {
    padding-top: 50px;
}

.MobileHeader .HeaderBody > div {
    padding-bottom: 40px;
    padding-left: calc(100% - 245px);
}


.MobileHeader .HeaderBody .HYDaSongJ,
.MobileHeader .HeaderBody .BerlingLtStdBold {
    transition: transform 500ms;
    transform: translate(265px, 0);
}
.MobileHeader.Opened .HeaderBody .HYDaSongJ,
.MobileHeader.Opened .HeaderBody .BerlingLtStdBold {
    transform: translate(0, 0);
}

@media only screen and (min-width: 1024px) {
    .MobileHeader {
        display: none;
    }
}