html.openmenu{

    overflow: hidden !important;

    position: relative;

    pointer-events: none;

    height: 100% !important;

    margin-top: 0 !important;

    overflow-y: hidden !important;

}

/*fixed IOS*/

html.openmenu body{

    height: 100% !important;

    position: relative;

    overflow: hidden !important;

    margin-top: 0 !important;

}

#vnt-wrapper{

    -webkit-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    position: relative;

    z-index: 20;

    background: #ffffff;

}

html.openmenu #vnt-wrapper{

    -webkit-transform: translateX(-320px);

    -ms-transform: translateX(-320px);

    -o-transform: translateX(-320px);

    transform: translateX(-320px);

}

#vnt-wrapper .bgMenuHardMenu{

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background: #000000;

    opacity: 0;

    z-index: 20;

    pointer-events: none;

    -webkit-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

}

html.openmenu #vnt-wrapper .bgMenuHardMenu{

    opacity: 0.8;

    pointer-events: auto;

}

/*======================================================================*/

/*================================ICON==================================*/

/*======================================================================*/

.menuHard{

    position: relative;

    overflow: hidden;

    top: 0;

    right: 0;

}

.menuHard .icon {

    width: 115px;

    height: 45px;

    cursor: pointer;

    pointer-events: auto;

    position: relative;

    background: #c3002a;

    z-index: 2;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    justify-content: center;

}

.menuHard .icon .style_text{

    color:#ffffff;

    text-transform: uppercase;

    font-weight: bold;

    margin-right: 15px;

}

.menuHard .icon .style_icon{

    width: 24px;

}

/*======================================================================*/

/*=============================CONTENT==================================*/

/*======================================================================*/

.menuHardMenu{

    position: fixed;

    top: 0;

    right: 0;

    height: 100vh;

    width: 100%;

    max-width: 320px;

    overflow: hidden;

    background: #f4f7f6;

    pointer-events: auto;

}

.menuHardMenu .div_menu{

    width: 100%;

    height: 100%;

    overflow: hidden;

    overflow-y: auto;

}

.menuHardMenu .div_menu::-webkit-scrollbar {

    height: 6px;

    width:4px;

    background: #ffffff;

    padding:3px;

    margin-right: 3px;

}

.menuHardMenu .div_menu .wrap{

    position: relative;

}

.menuHardMenu .div_menu::-webkit-scrollbar-thumb {

    background-color: #666666;

    outline: none;

}

.menuHardMenu .menu ul li{

    border: none;

    border-bottom: solid 1px rgba(0,0,0,0.1);

    position: relative;

}

.menuHardMenu .menu ul li .sub{

    width: 50px;

    height: 60px;

    position: absolute;

    top: 0;

    right: 0;

    cursor: pointer;

    color:#777777;

}

.menuHardMenu .menu ul li .sub:before{

    content: "\f0d7";

    font-family: 'FontAwesome';

    font-weight: 900;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%,-50%);

    -ms-transform: translate(-50%,-50%);

    -o-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%);

}

.menuHardMenu .menu ul li.active > .sub:before{

    content: "\f0d8";

}

.menuHardMenu .menu ul li a{

    display: block;

    text-transform: uppercase;

    font-weight: bold;

    padding: 19px 30px;

}

.menuHardMenu .menu ul li a:hover{

    color: #c3002a;

}

.menuHardMenu .menu ul li:hover > a{

    background: #ffffff;

}

.menuHardMenu .menu ul ul{

    display: none;

    background: rgba(0,0,0,0.05);

}

.menuHardMenu .menu ul ul li a{

    padding: 14px 30px;

    padding-left: 40px;

    font-size: 13px;

}

.menuHardMenu .menu ul ul li .sub{

    width: 50px;

    height: 50px;

}

.menuHardMenu .menu ul ul ul li a{

    padding: 14px 30px;

    padding-left: 50px;

}

/*======================================================================*/

/*=============================ADD ON===================================*/

/*======================================================================*/

.mmLanguage{

    border-bottom: solid 1px rgba(0,0,0,0.1);

}

.mmLanguage a{

    padding: 19px 30px;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    color:#666666;

    font-size: 12px;

    line-height: 20px;

    display: block;   

}

.mmLanguage a img{

    width: 100%;

    max-width: 25px;

    margin-right: 10px;

}

.mmHotline a{

 

}



.mmClose {

    position: absolute;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    top: 20px;

    right: 15px;

    cursor: pointer;

}

.mmClose span{

    margin-right: 10px;

}

/*==========================================================================*/

/*============================RESPONSIVE====================================*/

/*==========================================================================*/

@media all and (max-width: 991px){

.menuHard .icon{

    flex-direction: column-reverse;

    justify-content: center;

    align-items: center;

    width: 50px;

    height: 50px;

    font-size: 10px;

    line-height: 15px;

}

.menuHard .icon .style_icon{

    width: 20px;

    margin-bottom: 5px;

}

.menuHard .icon .style_text{

    margin-right: 0;

}

}



@media all and (max-width: 768px){



}



@media all and (max-width: 480px){

.menuHardMenu{

    max-width: initial;

    -webkit-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    -webkit-transform: translateX(100%);

    -ms-transform: translateX(100%);

    -o-transform: translateX(100%);

    transform: translateX(100%);

    bottom:initial;

    height:-webkit-calc(100vh - 110px);

    height:-moz-calc(100vh - 110px);

    height:-o-calc(100vh - 110px);

    height:calc(100vh - 110px);

    top: 50px;

    left: 0;

    z-index: 21;

}

html.openmenu .menuHardMenu{

    -webkit-transform: initial;

    -ms-transform: initial;

    -o-transform: initial;

    transform: initial;

}

#vnt-wrapper .bgMenuHardMenu{

    top: 110px;

}

.menuHardMenu .div_menu{

    max-width: initial;

    max-width: initial;

}

html.openmenu #vnt-wrapper{

    -webkit-transform: initial;

    -ms-transform: initial;

    -o-transform: initial;

    transform: initial;

}

.mmClose{

    display: none;

}

}