.grid {
  /*max-width: 1200px;*/
}
.grid-cir-item {
	float: left;
	width: calc(30% - 22px);
	height: auto;
	background: #fff;
	margin: calc(1.4% + 13px);
	padding: 0;
	text-align: center;
	
	/*border-radius: 20px;*/
}
.grid-cir-item.ver3{
	width: calc(21.75% - 22px);
}
.grid-cir-item.ver2 .bgdiv {
	/*border-radius:50%;*/
	border-radius:0px;
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
}
#NewsContent .grid-cir-item {
}
@media (max-width: 768px) {
	.grid-cir-item {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	#NewsContent .grid-cir-item {
	}
}
.grid-cir-item p {
	background: #fff;
	margin-top: 0;
	text-align: left;
	color: #522f07;
}
.grid-cir-item p:nth-child(3) {
	min-height: 98.667px;
}
.grid-cir-item>img {
	text-align: center;
}
.grid-cir-item>p.layout-desc {
	text-align: center;
}
.grid-cir-item img {
	/*border-top-left-radius: 20px;
	border-top-right-radius: 20px;*/
}
/* item is invisible, but used for layout */
.grid-cir-item,
.grid-cir-item-content {
  /*width: 80px;
  height: 80px;*/
	
	/*border-radius: 20px;*/
}

/* item-content is visible, and transitions size */
.grid-cir-item-content {
	/*width: 80px;
	height: 80px;*/
	opacity: 0;
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
	background: url('./../images/border/bar2_edited.png');
	background-size: 640px 149px;
	transform: translateY(20px);
	/*border: 2px solid #333;
	border-color: hsla(0, 0%, 0%, 0.7);*/
	-webkit-transition: opacity 150ms, transform 150ms;
	   -moz-transition: opacity 150ms, transform 150ms;
         -o-transition: opacity 150ms, transform 150ms;
            transition: opacity 150ms, transform 150ms;
	pointer-events: none;
}
.grid-cir-item a {
	color: #522f07;
}
.grid-cir-item td.is-expanded {
	/*background: #018AB0;*/
	/*background: #f2e272;*/
}
.grid-cir-item td.is-expanded a {
	color: #522f07;
}
.grid-cir-item-content table {   
    position: absolute;
	width: 100%;
    height: 100%;
	background: rgba(255,255,255,.6);
}
.grid-cir-item-content table tr td {
	text-align: center;
}

.grid-cir-item:hover .grid-cir-item-content {
}

/* both item and item content change size */
.grid-cir-item.is-expanded,
.grid-cir-item.is-expanded .grid-cir-item-content {
  /*width: 240px;
  height: 160px;*/
}

.grid-cir-item.is-expanded {
	z-index: 2;
}

.grid-cir-item.is-expanded .grid-cir-item-content {
	opacity: 1;
	transform: translateY(0px);
}



.grid-cir-item .layout-desc {
	margin: 5px 0;
}
.grid-cir-item .layout-button {
	width: 100%;
}
.grid-cir-item table tr .btn-detail,
.grid-cir-item table tr .btn-detail2 {
	height: 30px; 
	text-align: left;
	background-color: #fff;
	
	/*border-radius: 20px;*/
	
	padding-left: 5px;
}
.grid-cir-item table tr .btn-detail2 {
	text-align: right;
	padding-right: 20px;
}
.grid-cir-item table tr .btn-detail a {
	background-color: #fdc339;
	color:#222;
	padding: 5px 20px;
	/*border-radius: 10px;*/
	font-size: 16px;
	border: #fdc339 1px solid;
}
.grid-cir-item table tr .btn-detail a:hover {
	background-color: #fff;
	color:#fdc339;
}
.grid-cir-item table tr .btn-detail2 a {
	color:#808080;
	padding: 5px 5px;
	font-size: 32px;
}
.grid-cir-item table tr .btn-detail2 a:hover {
	color:#fdc339;
}
.grid-cir-item  table tr td.btn-detail.is-expanded a,
.grid-cir-item  table tr td.btn-detail2.is-expanded a {
	/*background: #fff;*/
	color: #fdc339;
	/*text-shadow: #522f07 1px 1px, #522f07 1px 0px, #522f07 0px 1px, #522f07 1px -1px, #522f07 -1px 1px, #522f07 -1px -1px, #522f07 -1px 0px, #522f07 0px -1px;*/
}