@charset "utf-8";
/* CSS Document */

.review{
	margin:0;
	padding:0;
	/* min-height:508px; */
	min-height: 435px;
	background:#323590;
}
.review .r-top{
	margin:0;
	padding:0;
	padding-top: 59px;
	text-align:center;
	font: 30px/50px 'Kanit', Arial, sans-serif;
	color:#fff;
}
.review .r-mid{
	margin:0;
	padding:0;
}
.review .r-block{
	margin:0;
	padding:0;
	margin-top: 10px;
	width:430px;
	height:auto;
}
.review .r-mt{
	margin-top:48px!important;
}
.review .balloon{
	margin:0 auto;
	padding:45px 50px 0px 37px;
	width:359px;
	height:216px;
	background:url(../images/review/balloon.png) top left no-repeat;	
}
.review .balloon .detail{
	margin:0;
	padding:0;
	height:84px;
	overflow:hidden;
	font: 18px/24px 'Kanit', Arial, sans-serif;
}
.review .balloon .cata{
	margin:0;
	padding:0;
	font: 16px/24px 'Kanit', Arial, sans-serif;
	color:#e40988;
}
.review .balloon .date{
	margin:0;
	padding:0;
	font: 16px/24px 'Kanit', Arial, sans-serif;
	color:#323590;
}
.review .balloon .score{
	margin:0;
	padding:0;
	padding-top:4px;
	padding-left:40px;
	background:url(../images/review/star.png) 0px 13px no-repeat;
	font: 40px/50px 'Kanit', Arial, sans-serif;
	color:#e40988;
}
.review .r-bottom{
	margin:0;
	padding:0;
	text-align:center;
}
.review .r-bottom img{
	max-width:100%;
	height:auto;
}
.review .r-bottom:hover img{
	 filter:hue-rotate(70deg);
}

@media (max-width: 374px) { 
.review .balloon{
	margin:0;
	width: 325px;
	height: 192px;
	background: url(../images/review/balloon.png) top left no-repeat;
	background-size: 100%;
}
.review .r-block{
	    width: 337px;
}
.review .r-bottom{
	    margin-top: 30px;	
}
 }
@media (min-width: 375px) and (max-width: 419px) { 
.review .balloon{
	margin:0;
	    width: 346px;
    height: 216px;
    background: url(../images/review/balloon.png) top left no-repeat;
    background-size: 100%;	
}
.review .r-block{
	    width: 365px;
		/* margin-left: 1px; */
}
.review .r-bottom{
	    margin-top: 30px;	
}
 }
@media (min-width: 420px) and (max-width: 575px) { 
.review .r-bottom{
	margin-top: 30px;	
}
 }
@media (min-width: 576px) and (max-width: 767px) { 
.review .r-block{
	    width: 380px;	
}
	.review .r-bottom{
	margin-top:30px;	
}
 }
@media (min-width: 768px) and (max-width: 991px) {
	.review .r-bottom{
	margin-top:30px;	
}
	 }
@media (min-width: 992px) and (max-width: 1199px) { 
.review .r-mid .justify-content-lg-center{
	    -ms-flex-pack: left !important;
    justify-content: left !important;	
}
.review .r-bottom{
	margin-top:30px;	
}
 }
@media (min-width: 1200px) { ... }