@media only screen and (max-width: 800px) {

.trnPopUpContainer{
	width:200px;
	height:250px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-150px 0 0 -100px;
	background-color:#FFF;
	z-index:1000;
	display:block;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow: 0 0 20px #333;
   -moz-box-shadow: 0 0 20px #333;
   -webkit-box-shadow: 0 0 20px #333;	
}

.trnPopUpContainer .trnPopUpContent{
	width:200px;
	height:200px;
	text-align:center;
}


.trnPopUpContainer .trnPopUpFooter{
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	border-top:1px solid #158A9D;
}

.trnPopUpContainer .trnPopUpContent .title{
	width:100%;
	height:60px;
	line-height:60px;
	font-size:30px;
	font-weight:bold;
}

.trnPopUpContainer .trnPopUpContent svg{
	width:60px;
	height:60px;
	margin:10px 0 10px 0;
	padding:0;
	fill: #F6831D;
}

.trnPopUpContainer .trnPopUpContent .message{
	width:100%;
	height:80px;
	line-height:12px;
	padding:10px;
	font-size:10px;
	font-weight:bold;
}

.trnBtn{
	font-size:12px;
	padding:0 5px 0 5px;
}

	.trnLeftTop{
		height:100px;
	}

	.trnLeftArea{
		width:100%;
		padding:170px 0 100px 0;		
		z-index:10;
	}
	
	.trnUserInfo{
		height:auto;
		padding:0;
		color:#999;
		background-color:#FFF;
		border-bottom:1px solid #F00;
		display:none;
	}	
	
	.trnOrderInfo{
		display:none;
	}
	

	.trnUserInfo ul:nth-child(2) {
		display:none;
	}

	.trnUserInfo li:nth-child(3) {
		display:none;
	}	
	
	.trnCenterArea{
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index:20;
		display:none;
	}
	
	.trnRightArea{
		display:none;
	}
	
	.trnUserList  .trnCenterContent{
	width:100%;
	height:100%;
	overflow:auto;
	padding:10px;
	position:relative;
	scrollbar-width: thin;
	float:left;
	}

	.trnUserTascList .trnTable th:nth-child(1) {
		width:10%;
	}

	.trnUserTascList .trnTable th:nth-child(2) {
		width:20%;
	}

	.trnUserTascList .trnTable th:nth-child(3) {
		width:20%;
	}

	.trnUserTascList .trnTable th:nth-child(4) {
		width:30%;
	}


	.trnUserTascList .trnTable th:nth-child(5) {
		width:20%;
	}


	.trnUserTascList .trnTable td:nth-child(1) {
		width:20%;
	}

	.trnUserTascList .trnTable td:nth-child(2) {
		width:20%;
	}

	.trnUserTascList .trnTable td:nth-child(3) {
		width:30%;
	}

	.trnUserTascList .trnTable td:nth-child(4) {
		width:30%;
	}

	.trnUserTascList .trnTable td:nth-child(5) {
		width:20%;
	}




  .trnResTable {
    border: 0;
  }

  .trnResTable caption {
    font-size: 1.3em;
  }
  
  .trnResTable thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .trnResTable tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  .trnResTable td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  .trnResTable td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  
  .trnResTable td:last-child {
    border-bottom: 0;
  }
  
	.trnListContainer .trnLeftArea{
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	  
	.trnListContainer 	.trnCenterArea{
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index:20;
		display:none;
	}
	
	
}