@media (max-width: 1180px) {
 .mainArea {
  padding-bottom: 100px;
 }
}
@media (max-width: 840px) {
 .mainArea {
  padding-bottom: 80px;
 }
}
@media (max-width: 400px) {
 .mainArea {
  padding-bottom: 50px;
 }
}

.albumList {
 margin: 0 -20px;
}
.albumList .albumItem {
 cursor: pointer;
 padding: 0 20px;
}
.albumList .albumItem img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
@media (max-width: 1024px) {
 .albumList {
  margin: 0 -15px;
 }
 .albumList .albumItem {
  padding: 0 15px;
 }
}
@media (max-width: 480px) {
 .albumList {
  margin: 0 -8px;
 }
 .albumList .albumItem {
  padding: 0 8px;
 }
}

.infoBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: stretch;
     -ms-flex-align: stretch;
         align-items: stretch;
 padding-bottom: 20px;
 margin-bottom: 20px;
 border-bottom: 1px solid #666666;
}
.infoBox .info {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 padding-left: 80px;
}
.infoBox .info .articleTitle {
 border-bottom: none;
}
.infoBox .info .articleTitle span {
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(55%, transparent), color-stop(10%, rgba(235, 105, 0, 0.35)));
 background-image: linear-gradient(transparent 55%, rgba(235, 105, 0, 0.35) 10%);
 background-size: 100% 100%;
 background-repeat: no-repeat;
 background-position: left bottom;
}
.infoBox .Img {
 width: 400px;
 height: 400px;
 -ms-flex-negative: 0;
     flex-shrink: 0;
 padding: 0 20px;
 background-color: #f5f0f0;
 border-radius: 50%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
}
.infoBox .Img .titleEn {
 font-size: 35px;
 font-weight: 400;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 2.8px;
 text-align: center;
 margin-bottom: 20px;
}
.infoBox .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
@media (max-width: 1180px) {
 .infoBox {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
 }
 .infoBox .info {
  padding-left: 0;
  width: 100%;
  text-align: center;
  margin-top: 20px;
 }
}
@media (max-width: 480px) {
 .infoBox .Img {
  width: 300px;
  height: 300px;
 }
 .infoBox .Img .titleEn {
  font-size: 28px;
 }
 .infoBox .articleTitle {
  font-size: 28px;
  padding-bottom: 0;
 }
}
/*# sourceMappingURL=services.css.map */