@charset "UTF-8";
/* CSS Document */
.classNote {
  margin-top: 20px;
}

ul.itemList {
  margin-top: 20px;
}

ul.itemList li {
  padding: 0;
}

ul.itemList li .item {
  padding: 0 10px 40px 0;
}

ul.itemList li .Img {
  position: relative;
  -webkit-box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

ul.itemList li .Img a {
  position: relative;
  display: block;
  overflow: hidden;
}

ul.itemList li .Img a::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: #0253a6;
  opacity: 0;
  position: absolute;
  border-radius: 99em;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 15;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

ul.itemList li:hover .Img a::before {
  opacity: 0.9;
}

ul.itemList li .Img a::after {
  content: "詳細內容";
  display: block;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0%;
  z-index: 20;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

ul.itemList li:hover .Img a::after {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

ul.itemList li .Img img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 10;
}

ul.itemList li .Txt h3 {
  font-size: 18px;
  font-weight: normal;
  color: #000;
  margin: 0 0 10px 0;
}

ul.itemList li .Txt h3 a {
  display: block;
  width: 100%;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

ul.itemList li:hover .Txt h3 a {
  color: #49aaf5;
}

ul.itemList li .Txt p {
  font-size: 13px;
  color: #898989;
  letter-spacing: 1px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 40px;
  line-height: 20px;
}

/******內頁******/
/*產品介紹區*/
.productIntro {
  padding-top: 40px;
}

.productIntro .albumBox {
  padding: 0;
}

.productIntro .albumBox .Img {
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.productIntro .albumBox .Img img {
  /*產品大圖*/
  width: 100%;
  display: block;
}

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

.productIntro .albumBox ul.side_album li {
  float: left;
  width: 20%;
  padding: 5px;
}

.productIntro .albumBox ul.side_album li a {
  display: block;
}

.productIntro .albumBox ul.side_album li a img {
  display: block;
  width: 100%;
}

/*產品介紹縮圖文字*/
.introBox {
  float: right;
  padding: 0 0 0 30px;
}

.introBox b.code {
  /*商品編號*/
  display: block;
  font-size: 12px;
  padding-top: 5px;
  color: #999;
  font-weight: normal;
}

.introBox .Txt {
  margin-top: 15px;
  font-size: 14px;
  color: #000;
  line-height: 2;
}

.introBox .share {
  clear: both;
  margin: 20px 0;
}

.introBox .share b {
  display: inline-block;
  font-size: 13px;
  font-weight: normal;
  color: #666;
}

.introBox .share a {
  display: inline-block;
  width: 25px;
  text-align: center;
  font-size: 18px;
  color: #666;
}

.introBox .share a:hover {
  color: #6cba26;
}

@media (max-width: 1023px) {
  .productIntro .albumBox {
    float: none;
  }
  .introBox {
    float: none;
    padding: 0 0 30px 0;
  }
}

@media (max-width: 680px) {
  .productIntro {
    padding-top: 20px;
  }
}

/*480*/
@media (max-width: 480px) {
  .productIntro .albumBox ul.side_album li {
    width: 33.33%;
  }
}

/*480 end*/