.box-body {
    border-top: 1px solid #e9e9e9;
}
	.box-body .list {
	    border-top: 1px solid #ffffff;
	    border-bottom: 1px solid #e9e9e9;
        min-height: 70px;
	    position: relative;
        border-left: 4px solid #fff;
        transition: .5s;
	}
	.box-body .list:hover {
	    border-left-color: rgba(12, 12, 12, 0.41);
	}
		.box-body .list a {
	    	background: #ffffff;
		    padding: 20px;
	        display: block;
		    width: 100%;
		    color: #0e3c5d;
	        padding-right: 50px;
	        transition: .5s;
            overflow: hidden;
		}
	@media only screen and (min-width: 1026px) {
		.box-body .list:hover a {
	        background: rgba(255, 255, 255, 0.65);
		}
	}
	.box-body .list.new {
	    border-left-color: rgba(12, 12, 12, 0.41);
	    border-top: 1px solid rgba(111, 111, 111, 0.41);
	    border-bottom: 1px solid rgba(111, 111, 111, 0.41);
	}
		.box-body .list.new a {
	        background: rgba(12, 12, 12, 0.41);
		    color: #facb00;
		}
			.box-body .list a .new {
		        background: #328bc3;
			    color: #ffffff;
			    padding: 8px;
			    position: absolute;
			    right: 0px;
			    top: 0px;
			}
			.box-body .list a .new::after {
			    content: "";
			    background: rgba(255, 255, 255, 0.3);
			    margin: 5px;
			    background-clip: padding-box;
			    position: absolute;
			    width: calc(100% - 10px);
			    height: calc(100% - 10px);
			    left: 0px;
			    top: 0px;
			    transform: rotate(0deg);
			    animation: box-new 1.5s infinite;
			}
			@-webkit-keyframes box-new {
			    50% {transform: rotate(90deg);}
			    100% {transform: rotate(180deg);}
			}
			@keyframes box-new {
			    50% {transform: rotate(90deg);}
			    100% {transform: rotate(180deg);}
			}				.box-body .list img {
				    float: left;
				    margin-right: 20px;
				}
				.box-body .list .box-text {
			        height: 68px;
				    overflow: hidden;
				    line-height: 23px;
				    display: -webkit-box;
				    -webkit-line-clamp: 3;
				    -webkit-box-orient: vertical;
				}
				.box-body .list .box-day {
				    font-size: 0.9em;
				    color: #959595;
				    margin-top: 10px;
				    transition: ease color .5s;
				}
				.box-body .list:hover .box-day {
				    color: #333333;
				}
				.box-body .list.new .box-day {
				    color: rgba(255, 255, 255, 0.71);
				}
				.box-body .list .box-day::before {
				    content: "วันที่ประกาศ : ";
				}
					.box-body .list .box-day .Audience {
					    float: right;
					}
					.box-body .list .box-day .Audience::before {
					    content: "ผู้เข้าชม : ";
					}
					.box-body .list .box-day .Audience-en::before {
					    content: "Viewer : ";
					}
		

/* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

}


/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {

	.list::before {
	    position: initial;
	    float: left;
        margin-right: 11px;
        width: 45px;
	    height: 45px;
    }
    .box-body .list .box-day {
	    width: calc(100% + 20px);
	}
    .box-body .list .box-day .Audience {
	    float: none;
	}
	.box-body .list img {
	    width: 100%;
	    float: none;
    }
	.box-body .list a {
    	padding-right: 20px !important;
	}
	.box-body .list {
	    border-left: 0;
    }
	.box-body .list .box-text {
	    height: auto;
    }
}