/*
 * message-list.css
 */

/*header*/
:root {
	--theme-color: #e60012;
  }
.ml_header{
	position: fixed;
	height: 1.2rem;
	line-height: 1.2rem;
	width: 100%;
	text-align: center;
	background-size: 32%;
	background-color: var(--theme-color);
	z-index:33;
}
.ml_header h4{
	color: white;
	font-size: 0.5rem;
	width: 16em;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.header_back{
	position: absolute;
    top: 0;
    left: 0;
    background: url(../images/back_01.png) no-repeat center;
    background-size: 50%;
    display: block;
    width: 1.2rem;
    height: inherit;
}
.header_nav{
    position: absolute;
    right: 0;
    display: block;
    background: url(../images/nav_01.png) no-repeat  center;
    background-size: 48%;
    width: 1.2rem;
    height: inherit;
}

/*nav*/
.nav-bg ,.reward_bg{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 34;
}
.nav_div{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 34;
}
.nav_nav{
    position: absolute;
    right: 0;
    background-color: white;
    width: 72%;
    height: 100%;
    z-index: 30;
}
.nav_list{
    text-align: left;
    height: 1.17rem;
    line-height: 1.2rem;
    border-bottom: 1px solid #eeeeee;
}
.nav_img {
    width: 0.7rem;
    height: 0.7rem;
    vertical-align: middle;
    margin-left: 0.26rem;
    margin-bottom: 0.1rem;
}
.nav_list em {
    position: absolute;
    right: 0;
    display: inline-block;
    width: 0.15rem;
    height: 1.2rem;
}
.seekBg {
    background-color: #f6f6f6;
}
.seek {
    width: 92.1%;
    height: 0.8rem;
    line-height: 0.8rem;
    position: absolute;
    left: 0.26rem;
    top: 0.18rem;
    border: 1px solid #dadada;
    border-radius: 8px;
    background-color: white;
    text-align: center;
}
.seek img {
    vertical-align: middle;
    width: 0.39rem;
    margin-bottom: 0.06rem;
}
.seek span {
    margin-left: 0.2rem;
}
.nav_list span {
    font-size: 0.4rem;
    margin-left: 0.346rem;
    color: #333333;
}

.nav_index{
	background: url(../images/base_02.png) no-repeat ;
    background-size: 18%;
}
.nav_new{
	background: url(../images/base_02.png) no-repeat ;
    background-size: 18%;
}

.nav_red{
	    background: url(../images/base_02.png) no-repeat ;
    background-size: 18%;
}

.nav_brand{
	background: url(../images/base_02.png) no-repeat ;
	 background-size: 18%;
}

.nav_column{
	background: url(../images/base_02.png) no-repeat ;
	 background-size: 18%;
}

.nav_food{
	background: url(../images/base_02.png) no-repeat ;
	 background-size: 18%;
}
.nav_bg{
   background-color: #f6f6f6;
}


.nav_a {
    display: block;
    height: 1.178rem;
    position: relative;
}
.nav_imges{
	background: url(../images/base_01.png) no-repeat 0;
	width: 1rem;
	height: 1rem;
}



@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		visibility: visible
	}
	100%,
	40% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes slideInRight {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		visibility: visible
	}
	100%,
	40% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}



@-webkit-keyframes slideOutRight {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
	100%,
	40% {
		visibility: hidden;
		-webkit-transform: translateX(100%);
		transform: translateX(100%)
	}
}

@keyframes slideOutRight {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
	100%,
	40% {
		visibility: hidden;
		-webkit-transform: translateX(100%);
		transform: translateX(100%)
	}
}

.slideOutRight {
	-moz-transform: translateX(100%)!important;
	-webkit-transform: translateX(100%)!important;
	-o-transform: translateX(100%)!important;
	-ms-transform: translateX(100%)!important;
	transform: translateX(100%)!important;
	-moz-transition: all 0s ease-in-out;
	-webkit-transition: all 0s ease-in-out;
	-o-transition: all 0s ease-in-out;
	-ms-transition: all 0s ease-in-out;
	transition: all 0s ease-in-out;
}



.slideInRight {
	-moz-transform: translateX(0%)!important;
	-webkit-transform: translateX(0%)!important;
	-o-transform: translateX(0%)!important;
	-ms-transform: translateX(0%)!important;
	transform: translateX(0%)!important;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


.nav_conter {
    height: 2.34rem;
    background: url(../images/nav_conter.png) no-repeat 0 center;
    background-size: 100%;
    position: relative;
    line-height: 2.34rem;
    padding-left: 0.21rem;
}
.nav_personalImg {
    width: 0.93rem;
    border-radius: 100%;
    border: 2px solid white;
    vertical-align: middle;
    background-color: white;
}
.nav_personalName {
    font-size: 0.37rem;
    color: white;
}
.nav_sign_in {
    position: absolute;
    right: 0.21rem;
    top: 0;
    z-index: 35;
}
.nav_sign_box {
    border-radius: 6px;
    border: 2px solid white;
    padding: 0 0.1rem 0.02rem;
}
.sign_in_goes {
    color: white;
    font-size: 0.32rem;
}

.nav_sign {
    width: 0.28rem;
    vertical-align: middle;
}
.sign_in_go {
    color: white;
    font-size: 0.32rem;
}
.sign_goes_box {
    border-radius: 6px;
    border: 2px solid white;
    padding: 0 0.1rem 0.02rem;
    opacity: 0.5;
}