@charset "UTF-8";

#container {
  grid-template-rows: 48px auto 1fr auto;
}
.contentGpArticleDocs ul,
.contentGpCategory ul {
  display: flex;
  flex-wrap: wrap;
  border: none;
}
.contentGpArticleDocs li,
.contentGpCategory li {
  min-height: 300px;
  margin: 0 0 20px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px #ccc;
}
.contentGpArticleDocs li:hover,
.contentGpCategory li:hover {
  box-shadow: 0 0 0;
}
.contentGpArticleDocs .docs a,
.contentGpCategory section a {
  display: inline-block;
  padding: 0;
  /*width: 246px;*/
  width: 100%;
}
.contentGpArticleDocs .docs a.doc_link,
.contentGpCategory section a.doc_link {
  display: block;
}
.contentGpArticleDocs .docs a:hover,
.contentGpCategory section a:hover {
  background-color: transparent;
}
.contentGpArticleDocs .docs .image,
.contentGpCategory .image {
  display: block;
}
.contentGpArticleDocs .docs .image img,
.contentGpCategory .image img {
  width: 100%;
  object-fit: cover;
}
.contentGpArticleDocs .case-publish,
.contentGpCategory .case-publish {
  margin: 0 0 6px;
}
.contentGpArticleDocs .case-info,
.contentGpCategory .case-info {
  padding: 10px;
}
.contentGpArticleDocs .case-info .title,
.contentGpCategory .case-info .title {
  display: block;
  font-size: 115%;
  font-weight: bold;
  margin: 0 0 4px;
  padding: 0;
}
.contentGpArticleDocs .case-info .case-publish,
.contentGpCategory .case-info .case-publish {
  padding: 0;
}
.contentGpArticleDocs .case-info .case-publish span,
.contentGpCategory .case-info .case-publish span {
  margin-left: 10px;
}
.contentGpArticleDocs .case-info .category,
.contentGpCategory .case-info .category {
  color: #333;
  margin: 0;
  text-align: left;
}
.contentGpArticleDocs .case-info .category span,
.contentGpCategory .case-info .category span {
  display: table;
  width: auto;
  height: auto;
  margin: 0 0 6px;
  padding: 2px 4px;
  font-size: 90%;
}
.contentGpArticleDocs .case-info .category span.service-hosting,
.contentGpCategory .case-info .category span.service-hosting {
  background-color: #c3e8f7;
}
.contentGpArticleDocs .case-info .category span.service-cms-cloud,
.contentGpCategory .case-info .category span.service-cms-cloud {
    background-color: #bee664;
}
.contentGpArticleDocs .case-info .category span.service-exclusive,
.contentGpCategory .case-info .category span.service-exclusive {
  background-color: #b5e0db;
}
.contentGpArticleDocs .case-info .category span.service-lgwan-cloud,
.contentGpCategory .case-info .category span.service-lgwan-cloud {
  background-color: #e3c6e1;
}
.contentGpArticleDocs .case-info .category span.service-tsc,
.contentGpCategory .case-info .category span.service-tsc {
  background-color: #f7dbdb;
}
.contentGpArticleDocs .case-info .category span.service-other,
.contentGpCategory .case-info .category span.service-other {
  background-color: #ffd6a1;
}
.contentGpArticleDocs .case-info .category span[class^="type"],
.contentGpCategory .case-info .category span[class^="type"] {
  background-color: #e1d6b5;
}
.contentGpArticleDocs .case-info .category span.version-2017,
.contentGpCategory .case-info .category span.version-2017,
.contentGpArticleDocs .case-info .category span.version-2020,
.contentGpCategory .case-info .category span.version-2020 {
  background-color: #b5e0db;
}

@media only screen and (min-width: 993px) {
  .contentGpArticleDocs ul,
  .contentGpCategory ul {
    justify-content: flex-start;
  }
  .contentGpArticleDocs li,
  .contentGpCategory li {
    flex-basis: calc(33.33% - 12px);
  }
  .contentGpArticleDocs li:not(:nth-child(3n)),
  .contentGpCategory li:not(:nth-child(3n)) {
    margin-right: 18px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 992px) {
  .contentGpArticleDocs ul,
  .contentGpCategory ul {
    justify-content: space-between;
  }
  .contentGpArticleDocs li,
  .contentGpCategory li {
    flex-basis: calc(50% - 9px);
  }
  .contentGpArticleDocs li:nth-child(odd),
  .contentGpCategory li:nth-child(odd) {
    margin-right: 18px;
  }
}
@media only screen and (max-width: 480px) {
  .contentGpArticleDocs li,
  .contentGpCategory li {
    flex-basis: 100%;
  }
}