.eCoolArtGallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  max-width: 990px;
}

.eCoolArtGallery-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 calc(100% / 3 - 2rem);
          flex: 0 1 calc(100% / 3 - 2rem);
  padding: 1rem;
  min-width: 143px;
}

.eCoolArtGallery-bookbg {
  position: relative;
  background-color: transparent;
  border-width: 0;
  padding-top: 130%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url("https://ecc.tp.edu.tw/EcoolWeb/Content/img/GalleryBook_A2-1_Ass-09.png");
}

.eCoolArtGallery-bookbg .imgBox {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 72%;
  height: 46%;
  top: 13%;
  left: 17%;
}

.eCoolArtGallery-bookbg .imgBox img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.eCoolArtGallery-item:nth-child(2n-1) .eCoolArtGallery-bookbg {
  background-image: url("https://ecc.tp.edu.tw:443/EcoolWeb/Content/img/GalleryBook_A2-1_Ass-05.png");
}

.eCoolArtGallery-info > strong {
  display: block;
}

.eCoolArtGallery-info a {
  margin-bottom: .3rem;
}

.eCoolArtGallery .bookname {
  color: #01b796;
}

.eCoolArtGallery .text-red {
  color: #e04;
}

.eCoolArtGallery .embedicon::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5rem;
  vertical-align: text-bottom;
  content: '';
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.eCoolArtGallery .embedicon-qrcode::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='qr-code' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='Group_2' data-name='Group 2'%3E%3Cg id='Group_1' data-name='Group 1'%3E%3Cpath id='Path_1' data-name='Path 1' d='M277.333,0V6.3h6.3V0Zm4.5,4.5h-2.7V1.8h2.7Z' transform='translate(-265.633)' fill='%23fff'/%3E%3Crect id='Rectangle_1' data-name='Rectangle 1' width='3.6' height='1.8' transform='translate(0 8.1)' fill='%23fff'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='2.7' height='1.8' transform='translate(5.4 8.1)' fill='%23fff'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='1.8' height='1.8' transform='translate(8.1 6.3)' fill='%23fff'/%3E%3Cpath id='Path_2' data-name='Path 2' d='M6.3,3.6V0H0V6.3H8.1V3.6H6.3Zm-1.8.9H1.8V1.8H4.5Z' fill='%23fff'/%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='1.8' height='3.6' transform='translate(8.1)' fill='%23fff'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M237.367,193.8h1.8v2.7h1.8V192h-6.3v1.8h.9v1.8h1.8Z' transform='translate(-224.767 -183.9)' fill='%23fff'/%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='1.8' height='2.7' transform='translate(9 11.7)' fill='%23fff'/%3E%3Crect id='Rectangle_6' data-name='Rectangle 6' width='1.8' height='1.8' transform='translate(16.2 12.6)' fill='%23fff'/%3E%3Cpath id='Path_4' data-name='Path 4' d='M216.933,341.333h-1.8v1.8h-1.8v1.8h3.6v-1.8h1.8v1.8h2.7v-1.8h-.9v-1.8h-3.6Z' transform='translate(-204.333 -326.933)' fill='%23fff'/%3E%3Cpath id='Path_5' data-name='Path 5' d='M6.3,280.033v-2.7H0v6.3H6.3v-1.8H9v-1.8Zm-1.8,1.8H1.8v-2.7H4.5Z' transform='translate(0 -265.633)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.eCoolArtGallery .embedicon-share::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.5' height='18' viewBox='0 0 16.5 18'%3E%3Cg id='share' transform='translate(0 0)'%3E%3Cpath id='Path_6' data-name='Path 6' d='M319.543,18.437A2.437,2.437,0,1,1,317.105,16,2.437,2.437,0,0,1,319.543,18.437Zm0,0' transform='translate(-303.605 -15.437)' fill='%23fff'/%3E%3Cpath id='Path_7' data-name='Path 7' d='M301.668,6a3,3,0,1,1,3-3A3,3,0,0,1,301.668,6Zm0-4.875A1.875,1.875,0,1,0,303.543,3a1.877,1.877,0,0,0-1.875-1.875Zm0,0' transform='translate(-288.168)' fill='%23fff'/%3E%3Cpath id='Path_8' data-name='Path 8' d='M319.543,359.77a2.437,2.437,0,1,1-2.437-2.438A2.437,2.437,0,0,1,319.543,359.77Zm0,0' transform='translate(-303.605 -344.77)' fill='%23fff'/%3E%3Cpath id='Path_9' data-name='Path 9' d='M301.668,347.332a3,3,0,1,1,3-3A3,3,0,0,1,301.668,347.332Zm0-4.875a1.875,1.875,0,1,0,1.875,1.875A1.877,1.877,0,0,0,301.668,342.457Zm0,0' transform='translate(-288.168 -329.332)' fill='%23fff'/%3E%3Cpath id='Path_10' data-name='Path 10' d='M20.875,189.105a2.438,2.438,0,1,1-2.438-2.437A2.437,2.437,0,0,1,20.875,189.105Zm0,0' transform='translate(-15.438 -180.105)' fill='%23fff'/%3E%3Cpath id='Path_11' data-name='Path 11' d='M3,176.668a3,3,0,1,1,3-3,3,3,0,0,1-3,3Zm0-4.875a1.875,1.875,0,1,0,1.875,1.875A1.877,1.877,0,0,0,3,171.793Zm0,0' transform='translate(0 -164.668)' fill='%23fff'/%3E%3Cpath id='Path_12' data-name='Path 12' d='M115.1,95.683a.75.75,0,0,1-.372-1.4l6.959-3.967a.75.75,0,1,1,.743,1.3l-6.959,3.967a.745.745,0,0,1-.37.1Zm0,0' transform='translate(-110.328 -87.043)' fill='%23fff'/%3E%3Cpath id='Path_13' data-name='Path 13' d='M122.08,271.687a.745.745,0,0,1-.371-.1l-6.959-3.967a.75.75,0,0,1,.743-1.3l6.959,3.967a.75.75,0,0,1-.372,1.4Zm0,0' transform='translate(-110.35 -256.859)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
}

.eCoolArtGallery-allbox {
  position: relative;
  min-width: 288px;
  max-width: 990px;
  background-image: url("https://ecc.tp.edu.tw:443/EcoolWeb/Content/img/GalleryBook_Asset-03.gif");
  background-repeat: repeat;
  border: #dba3ac 1.6px solid;
  margin-top: 4.5rem;
}

.eCoolArtGallery-allbox::after {
  content: attr(title);
  display: inline-block;
  padding: .3rem 1.5rem;
  background-color: #dba3ac;
  color: #ffc107;
  font-weight: 600;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  position: absolute;
  font-size: 3.1rem;
  top: -1.3rem;
  right: 27%;
  width: 48%;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .eCoolArtGallery-allbox::after {
    font-size: 2.725rem;
    top: -1.725rem;
  }
}

@media only screen and (max-width: 576px) {
  .eCoolArtGallery-allbox::after {
    font-size: 2.1rem;
    top: -3.8rem;
    right: 27%;
    width: 48%;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
  }
}

.eCoolArtGallery-allbox::before {
  content: '';
  position: relative;
  display: block;
  padding-top: 14%;
  margin-top: -4.5rem;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url("https://ecc.tp.edu.tw/EcoolWeb/Content/img/GalleryBook_A2-1_Ass-03.png");
}
/*# sourceMappingURL=eCoolArtGallery.css.map */