/* =========================================
   Ondam Successcase - Gallery Section (Scoped)
   Àû¿ë ¹üÀ§: #od-successGallery ³»ºÎ¸¸
   ¸ñÇ¥:
   - PC 4¿­ / ÅÂºí¸´¡¤¸ð¹ÙÀÏ 2¿­
   - ³ôÀÌ ÀÚµ¿ È®Àå(Àß¸² ¹æÁö)
   - Ä«Å×°í¸® hover/active Á¤¸®
   - °Ô½Ã¹° Á¦¸ñ/¼³¸í ¼û±è(gallery_title, gallery_etc)
========================================= */


/* &#9989; ¼½¼Ç: °íÁ¤ height Á¦°Å(Àß¸² ¿øÀÎ) ¡æ min-height¸¸ À¯Áö */
#od-successGallery{
  height: auto !important;
  min-height: 1000px;        /* ¿øÇÏ¸é À¯Áö, ½ÈÀ¸¸é »èÁ¦ °¡´É */
  overflow: visible !important;
  background: #fff;
}


/* &#9989; Å¸ÀÌÆ² */
#od-successGallery .od-successGallery__title{
  margin: 0;
  padding-top: 100px;
  text-align: center;


  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #020202;
}


#od-successGallery .od-successGallery__titleAccent{
  color: #354C95;
  font: inherit;
  letter-spacing: inherit;
}


/* &#9989; Å¸ÀÌÆ² ¡ê Ä«Å×°í¸® °£°Ý */
#od-successGallery .od-successGallery__cats{
  margin-top: 50px;
  text-align: center;
}


/* &#9989; Ä«Å×°í¸® ³»ºÎ ÀÌ¹ÌÁö/¼¼·Îº¸´õ Á¦°Å(ÀÌ ¿µ¿ª¿¡¼­¸¸) */
#od-successGallery .od-successGallery__cats .sul_menu img{
  display: none !important;
  border-right: 0 !important;
}
#od-successGallery .od-successGallery__cats .sul_menu,
#od-successGallery .od-successGallery__cats .sul_menu *{
  border-right: 0 !important;
  background-image: none !important;
}


/* &#9989; Ä«Å×°í¸® ÅØ½ºÆ® ±âº» */
#od-successGallery .od-successGallery__cats a,
#od-successGallery .od-successGallery__cats a *{
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: #020202 !important;
  text-decoration: none !important;
}


/* &#9989; ¸µÅ© ¹Ú½º */
#od-successGallery .od-successGallery__cats a{
  display: inline-block;
  padding: 0 12px;
  position: relative;
  border-bottom: 0 !important;
}


/* &#9989; ¹ØÁÙ Áßº¹ ¹æÁö: Ä«Å×°í¸® ³»ºÎ ¸ðµç after Á¦°Å */
#od-successGallery .od-successGallery__cats *::after{
  content: none !important;
}


/* &#9989; hover */
#od-successGallery .od-successGallery__cats a:hover,
#od-successGallery .od-successGallery__cats a:hover *{
  font-weight: 700 !important;
  color: #354C95 !important;
}
#od-successGallery .od-successGallery__cats a:hover::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 1px;
  background: #354C95;
}


/* &#9989; È°¼º(¼±ÅÃ) »óÅÂ À¯Áö - ½ºÅ²º° Å¬·¡½º ´ëÀÀ */
#od-successGallery .od-successGallery__cats .on a,
#od-successGallery .od-successGallery__cats .selected a,
#od-successGallery .od-successGallery__cats .active a,
#od-successGallery .od-successGallery__cats .current a,
#od-successGallery .od-successGallery__cats .now a,
#od-successGallery .od-successGallery__cats .sul_on a,
#od-successGallery .od-successGallery__cats .cate_on a{
  font-weight: 700 !important;
  color: #354C95 !important;
}


#od-successGallery .od-successGallery__cats .on a::after,
#od-successGallery .od-successGallery__cats .selected a::after,
#od-successGallery .od-successGallery__cats .active a::after,
#od-successGallery .od-successGallery__cats .current a::after,
#od-successGallery .od-successGallery__cats .now a::after,
#od-successGallery .od-successGallery__cats .sul_on a::after,
#od-successGallery .od-successGallery__cats .cate_on a::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 1px;
  background: #354C95;
}


/* &#9989; °Ô½ÃÆÇ »ó´Ü 3px ¶óÀÎ Á¦°Å(³» °Ô½ÃÆÇ¸¸) */
#od-successGallery td[bgcolor="#E5E5E5"][height="3"],
#od-successGallery td[bgcolor="#E5E5E5"][height="3px"]{
  background: transparent !important;
  height: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* &#9989; board td ÇÏ´Ü º¸´õ Á¦°Å(³» °Ô½ÃÆÇ¸¸) */
#od-successGallery table.board td,
#od-successGallery .board td{
  border-bottom: 0 !important;
}


/* &#9989; °Ô½Ã¹° Á¦¸ñ/¼³¸í ¼û±è(³» °Ô½ÃÆÇ¸¸) */
#od-successGallery .gallery_title,
#od-successGallery .gallery_etc{
  display: none !important;
}
#od-successGallery .gallery_title *,
#od-successGallery .gallery_etc *{
  display: none !important;
}


/* =========================================
   &#9989; ÇÙ½É: Å×ÀÌºí(.board) ¡æ ±×¸®µå·Î °­Á¦ º¯È¯
   - PC: 4¿­
   - ÅÂºí¸´/¸ð¹ÙÀÏ: 2¿­
========================================= */


/* Å×ÀÌºíÀ» ºí·Ï ÄÁÅ×ÀÌ³ÊÃ³·³ »ç¿ë */
#od-successGallery table.board{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}


/* tbody¸¦ grid·Î */
#od-successGallery table.board > tbody{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* &#9989; PC 4¿­ */
  align-items: start !important;
}


/* ±âÁ¸ tr ·¹ÀÌ¾Æ¿ô ¹æÇØ Á¦°Å ¡æ tdµéÀ» ±×¸®µå ¾ÆÀÌÅÛÀ¸·Î */
#od-successGallery table.board > tbody > tr{
  display: contents !important;
}


/* td¸¦ Ä«µåÃ³·³ */
#od-successGallery table.board > tbody > tr > td{
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  vertical-align: top !important;
}


/* Ä«µå ¾È ÀÌ¹ÌÁö(½æ³×ÀÏ) Å©±â ¾ÈÁ¤È­ */
#od-successGallery table.board img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* =========================================
   ¹ÝÀÀÇü
========================================= */


/* &#9989; ÅÂºí¸´/¸ð¹ÙÀÏ: 2¿­ */
@media screen and (max-width: 1024px){
  #od-successGallery table.board > tbody{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
  }


  /* ¸ð¹ÙÀÏ Å¸ÀÌÆ² 34px */
  #od-successGallery .od-successGallery__title{
    font-size: 34px;
    padding-top: 70px;
  }
}


/* &#9989; ¾ÆÁÖ ÀÛÀº ¸ð¹ÙÀÏ¿¡¼­µµ 2¿­ À¯Áö(¿äÃ»»çÇ×) */
@media screen and (max-width: 480px){
  #od-successGallery table.board > tbody{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
  }


  #od-successGallery .od-successGallery__cats a,
  #od-successGallery .od-successGallery__cats a *{
    font-size: 14px !important;
  }
}