@charset "UTF-8";
.classNote {
  padding-bottom: 10px;
  clear: both;
  font-size: 17px;
  color: #000;
  line-height: 1.8;
}

.classNote img {
  max-width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.itemList{
  display: flex;
  flex-wrap: wrap;
  padding-top: 30px;
}
.itemList li{
  width: 33.33%;
  position: relative;
  padding:25px;
}

.itemList li .item {
box-shadow: 3px -4px 20px 0px rgba(0,0,0,0.1);
}

.itemList .Img {
  position: relative;
  overflow: hidden;
  z-index: 5;
}
.itemList li .Img::before{
  content: "";
  width: 100%;
  height: 100%;
  background:#000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
  transition: 0.9s;
}
.itemList li:hover .Img::before{
  opacity: 0.6;
  pointer-events: none;
}
.itemList li .Img::after{
  content: "\f002";
  font-family: fontAwesome;
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 99em;
  background:#d12249;
  overflow: hidden;
  transition: 0.9s;
  left: 50%;
  top: 100%;
  transform: translate(-50%,0%);
  z-index: 11;
  position: absolute;
  color:#fff;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  transition: 0.6s;
  pointer-events:none;
}
.itemList li:hover .Img::after{
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.itemList .Img a {
  display: block;
  overflow: hidden;
}

.itemList .Img img {
  z-index: 5;
  position: relative;
  display: block;
  width: 100%;
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.itemList .Txt {
  text-align: center;
  padding:20px 15px;
  line-height: 1.6;
  position: relative;
  z-index: 10;
}
.itemList .Txt .tag{
  position: absolute;
  top: 0;
  left: 30px;
  background:#d12249;
  transform: translate(0,-50%);
  color:#fff;
  font-size: 13px;
  line-height: 20px;
}
.itemList .Txt .tag::before{
  content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 20px 10px;
border-color: transparent transparent #d12248 transparent;
position: absolute;
right: 100%;
top: 0;
}
.itemList .Txt .tag::after{
  content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 10px 0 0;
border-color: #d12248 transparent transparent transparent;
position: absolute;
left: 100%;
top: 0;
}
.itemList .Txt p {
  font-size: 14px;
  color: #d12249;
  overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  font-weight: 800;
}

.itemList h3 a {
  overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  font-size: 18px;
}


.albumBox {
  margin-right: 30px;
  padding: 0;
}

.albumBox img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.side_album {
  width: 100%;
  margin: 2px -1px 0;
}

.side_album li {
  float: left;
  width: 16.6%;
  padding: 1px;
  overflow: hidden;
}

.side_album img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.side_album a {
  display: block;
}

/*產品介紹縮圖文字*/
.introBox {
  overflow: hidden;
}


.code {
display: block;
    font-size: 14px;
    font-weight: 900;
    color: #d12249;
}

@media (max-width: 900px){
  .itemList li {
    width: 50%;
}
}

@media (max-width: 620px) {
.itemList li {
    width: 100%;
    padding:25px 0;
}

}

/*767 end*/