/* »óÇ°¸ÞÀÎ À̹ÌÁö ¹Ú½º */

div.gallery {
    margin: 15px;
    border: 1px solid #ccc;
    float: left;
    width: 110px;
    padding: 2px;
    text-align: center;
}
div.gallery:hover {
    border: 1px solid #777;
    background-color : #e2e2e2;
}
div.gallery img {
    width: 110px;
    height: 130px;
    object-fit: cover; //scale-down;
}
div.desc {
    //padding: 5px;
    text-align: center;
    font-size:14px; 
    font-weight:500;
    background-color : #e2e2e2;
    font-family: 'NotoSansKR'; 
}

/* Å×À̺í Ç¥
 CSS only Responsive Tables
 http://dbushell.com/2016/03/04/css-only-responsive-tables/
 http://iropke.com/archive/data-table.html
 https://codepen.io/dbushell/full/8e6a1ee85418f3c5abe839647dbcdec5
 by David Bushell
*/
.rtable {
  /*!
  // IE needs inline-block to position scrolling shadows otherwise use:
  // display: block;
  // max-width: min-content;
  */
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  
  overflow-x: auto;
  
  // optional - looks better for small cell values
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}
.rtable,
.rtable--flip tbody {
  // optional - enable iOS momentum scrolling
  -webkit-overflow-scrolling: touch;
  
  // scrolling shadows
  background: radial-gradient(left, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 0 center,
              radial-gradient(right, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 100% center;
  background-size: 10px 100%, 10px 100%;
  background-attachment: scroll, scroll;
  background-repeat: no-repeat;
}
// change these gradients from white to your background colour if it differs
// gradient on the first cells to hide the left shadow
.rtable td:first-child,
.rtable--flip tbody tr:first-child {
  background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 20px 100%;
}
// gradient on the last cells to hide the right shadow
.rtable td:last-child,
.rtable--flip tbody tr:last-child {
  background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 20px 100%;
}
.rtable th {
  font-size: 12px;
  text-align: left;
  text-transform: uppercase;
  background: #f2f0e6;
}
.rtable th,
.rtable td { padding: 6px 12px; border: 1px solid #d9d7ce; }
.rtable td { font-size: 12px; }
.rtable--flip { display: flex; overflow: hidden; background: none; }
.rtable--flip thead { display: flex; flex-shrink: 0; min-width: min-content; }
.rtable--flip tbody { display: flex; position: relative; overflow-x: auto; overflow-y: hidden; }
.rtable--flip tr { display: flex; flex-direction: column; min-width: min-content; flex-shrink: 0; }
.rtable--flip td,
.rtable--flip th { display: block; }
.rtable--flip td { 
  background-image: none !important; // border-collapse is no longer active
  border-left: 0;
}
// border-collapse is no longer active
.rtable--flip th:not(:last-child),
.rtable--flip td:not(:last-child) {
  border-bottom: 0;
}