.thumbnailWrapper { width:100%; margin:0px auto;} /* not important */
		
		.thumbnailWrapper ul { 
			list-style-type: none; /* remove the default style for list items (the circles) */ 
			margin:0px; /* remove default margin */
			padding:0px; /* remove default padding */
		}
		.thumbnailWrapper ul li { 
			float:left; /* important: left float */
			position:relative; /* so we can use top and left positioning */
			overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
			height:220px;
		}
		.thumbnailWrapper ul li a img { 
			width:280px; /* not important, the pics we use here are too big */
			height:186px; /* not important, the pics we use here are too big */
			position:relative; /* so we can use top and left positioning */
			border:none; /* remove the default blue border */
			margin:5px;
			border:1px solid #9a9a9a;
		}
		.thumbnailWrapper ul li a .fig::before { content: ""; display: block; background: url("/images/korean/common/thum-circle-view.png") 50% center no-repeat; margin:5px;width: 281px; height: 187px; position: absolute; left: 2; top: 2; z-index: 1; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
		.thumbnailWrapper ul li  a:hover .fig:before { opacity: 1; visibility: visible; }
	.thumbnailWrapper ul li p{

		position:relative; 
		top:0%;
		line-height:10px;
		font-family:"NanumBarunGothic";
		text-align:center;

			/* just styling */
			font-size:13px;
			font-weight:bold;

		}
		.clear { clear:both; } /* to clear the float after the last item */.caption1 a{ color:#fff;font-size:14px;font-weight:bold}