@import "sidebar.css";
.under-section{display:flex;justify-content: space-between;    overflow: hidden;padding-top: 30px;}
.pro-list{
    display: flex;
    flex-wrap: wrap;
}
        .pro-item {
width: calc(100%/3 - 20px);
    margin: 0 30px 30px 0;
}
.pro-item:nth-child(3n){margin-right:0;}
.pro-item a {
  text-decoration: none;
  text-align: center;
  border: 1px solid #ebebeb;
  display: flex;
  height: 100%;
  flex-direction: column;
  transition: all 0.5s ease;
}
.pro-itm-main {
  height: 95px;
  background: #ebebeb;
  padding: 15px 10px;
  margin: auto 0 0 0;
  width: 100%;
  transition: all 0.5s ease;
  color: #666666;
}
.pro-itm-ttl {
  color: #ffc600;
  text-transform: uppercase;
  margin: 0;
  transition: all 0.5s ease;
  white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.pro-itm-txt {
  margin: 0;
  color: #666666;
  transition: all 0.5s ease;
      display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pro-itm-img {
  margin: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pro-itm-img img {
  flex-shrink: 0;
  max-height: 100%;
}
.pro-item a:hover {
  border-color: #ffc600;
}
.pro-item a:hover .pro-itm-main {
  background: #ffc600;
}
.pro-item a:hover .pro-itm-ttl, .pro-item a:hover .pro-itm-txt {
  color: #fff;
}
@media screen and (max-width: 768px) {
    .pro-list {justify-content: space-between}
    .pro-item {
    width: 48%;
    margin: 0 0 30px 0;
}
}
@media screen and (max-width: 480px) {
.under-section{display:block;}    
    .pro-item {
    width: 100%;
}
}