.reference-h2 {font-size:30px; margin:80px;0; color:#fff; font-weight:700}
	.reference-tit-h2 {font-size:18px; color:#222; font-weight:400; text-align:left; text-indent:-20px;}
	#reference {border-bottom:1px solid #ddd;}
	#reference .container {padding: 100px 0 0 0;}
	.content {margin-top:-35px;}
	
/*--------------------------------------------------------------
# 카달로그 및 지명원
--------------------------------------------------------------*/
.reference .section-reference-title h2 {color: var(--accent-color); font-size: 48px; text-align:center; font-weight:bold;}
.reference .content .reference-item {background-color: var(--surface-color); padding: 20px 30px 30px 30px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); margin:5px auto 30px auto; position: relative; text-align:center;}
.reference .content .reference-item .number {position: absolute; right: 10px; top: 10px; font-weight: 400; color: color-mix(in srgb, var(--default-color), transparent 80%);}
.reference .content .reference-item .reference-item-icon {position: relative; margin-bottom: 20px; color: var(--accent-color);}
.reference .content .reference-item .reference-item-icon:before {position: absolute; content: ""; transform: rotate(45deg); z-index: -1; left: -20px; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-right: 40px solid var(--accent-color); display: none;}
.reference .content .reference-item .reference-item-icon>span {color: var(--default-color); font-size: 4rem;}
/* .reference .content .reference-item .reference-item-content .reference-heading {font-size: 20px; color: var(--default-color); font-weight: 700; text-align:center;}
.reference .content .reference-item .reference-item-content p {font-size: 15px; text-align:center;} */
.reference .content .reference-item-content .reference-heading {font-size: 20px; color: var(--default-color); font-weight: 700; text-align:center; width:30%; text-align:center; padding:5px 0; margin:20px auto 10px auto; border-radius: 50px; border:2px solid #cf5902; vertical-align:middle;}
.reference .content .reference-item .reference-item-icon img {width:800px; height:100%;}
.reference .content .reference-item-content p {font-size: 15px; text-align:center;}

@media (min-width: 769px) {
  .reference .content [class^=col-]:nth-child(4n+4) .reference-item {border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);}
  .reference .content [class^=col-]:nth-last-child(-n+4) .reference-item {border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);}
  #reference .container {padding: 50px 0 0 0;}
  .content {margin-top:-25px;}
  .reference .section-reference-title h2 {font-size: 36px}
}

@media (max-width: 768px) {
  .reference .content [class^=col-]:nth-child(2n+2) .reference-item {border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);}
  .reference .content [class^=col-]:last-child .reference-item,
  .reference .content [class^=col-]:nth-last-child(2) .reference-item {border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);}
   #reference .container {padding: 50px 0 0 0;}
  .content {margin-top:-25px;}
  .reference .section-reference-title h2 {font-size: 36px}
  .reference .content .reference-item-content .reference-heading {width:80%;}
}

@media (max-width: 576px) {
  .reference .content [class^=col-] .reference-item {border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); margin-bottom: 10px;}
  #reference .container {padding: 50px 0 0 0;}
  .content {margin-top:-25px;}
  .reference .section-reference-title h2 {font-size: 33px}
  .reference .content .reference-item .reference-item-icon img {width:100%; height:auto;}
  .reference .content .reference-item-content .reference-heading {width:80%;}
}