.portfolio-container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
@media (min-width:768px){.portfolio-container{width:96%;padding-top:0}}
@media (min-width:992px){.portfolio-container{width:970px;padding-top:0}}
@media (min-width:1200px){.portfolio-container{padding-top:0}}

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeInLab{0%{top:40px;opacity:0}100%{top:0;opacity:1}}
@-moz-keyframes fadeInLab{0%{top:40px;opacity:0}100%{top:0;opacity:1}}
@-o-keyframes fadeInLab{0%{top:40px;opacity:0}100%{top:0;opacity:1}}
@keyframes fadeInLab{0%{top:40px;opacity:0}100%{top:0;opacity:1}}[not-existing]{zoom:1}.fadeInLab{-webkit-animation-name:fadeInLab;-moz-animation-name:fadeInLab;-o-animation-name:fadeInLab;animation-name:fadeInLab}

.portfolio-detail .photo{width:100%;margin-bottom:30px;position:relative;overflow:hidden;float:left}
.portfolio-detail .photo>a{display:block}
.detail-1{position:relative;min-height:1px;padding-left:0;padding-right:0}.detail-1{float:left}.detail-1{width:100%}
.portfolio-detail .photo img{width:100%;height:auto}.portfolio-detail .photo .caption{bottom:15px;left:15px;margin:15px;padding:10px 15px;background-color:rgba(0,0,0,.3);zoom:1;filter:alpha(opacity=0);-webkit-opacity:0;-moz-opacity:0;opacity:0;z-index:0;position:absolute;text-align:left;-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-ms-transform:translateY(10px);-o-transform:translateY(10px);transform:translateY(10px);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;font-size:16px;color:#000;margin:0}
.portfolio-detail .photo .caption a{color:#fff}.portfolio-detail .photo .caption a:after{background-color:#fff}

.ilightbox-overlay,
.ilightbox-loader,
.ilightbox-loader *,
.ilightbox-holder,
.ilightbox-holder .ilightbox-container,
.ilightbox-holder .ilightbox-container img.ilightbox-image,
.ilightbox-holder .ilightbox-container iframe,
.ilightbox-holder .ilightbox-container .ilightbox-caption,
.ilightbox-toolbar,
.ilightbox-toolbar *,
.ilightbox-thumbnails,
.ilightbox-thumbnails *,
.ilightbox-holder .ilightbox-container .ilightbox-social,
.ilightbox-holder .ilightbox-container .ilightbox-social * {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.ilightbox-closedhand * {
  cursor: url('../detail/closedhand.cur'), default !important;
}
.ilightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
}
.ilightbox-loader {
  position: fixed;
  z-index: 100005;
  top: 45%;
  left: 4px;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  z-index: 100003;
  top: 50% !important;
  left: 50% !important;
  margin-top: -24px;
  margin-left: -24px;
}
.ilightbox-loader div {
  width: 48px;
  height: 48px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
}
.ilightbox-loader.horizontal {
  left: 45%;
  top: 4px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
}
.ilightbox-loader.horizontal div {
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
}
.ilightbox-toolbar {
  display: none;
  position: fixed;
  z-index: 100010;
  top: 5px;
  left: 0px;
  height: 25px;
  width: 100%;
}
.ilightbox-toolbar a {
  float: left;
  cursor: pointer;
  width: 25px;
  height: 23px;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.ilightbox-toolbar .ilightbox-prev-button,
.ilightbox-toolbar .ilightbox-next-button {
  display: none;
}
.ilightbox-prev-button {
  -webkit-border-radius: 0px 0px 2px 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0px 0px 2px 2px;
  -moz-background-clip: padding;
  border-radius: 0px 0px 2px 2px;
  background-clip: padding-box;
}
.ilightbox-next-button {
  -webkit-border-radius: 2px 2px 0px 0px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px 2px 0px 0px;
  -moz-background-clip: padding;
  border-radius: 2px 2px 0px 0px;
  background-clip: padding-box;
}
.ilightbox-prev-button.horizontal {
  -webkit-border-radius: 0px 2px 2px 0px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0px 2px 2px 0px;
  -moz-background-clip: padding;
  border-radius: 0px 2px 2px 0px;
  background-clip: padding-box;
}
.ilightbox-next-button.horizontal {
  -webkit-border-radius: 2px 0px 0px 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px 0px 0px 2px;
  -moz-background-clip: padding;
  border-radius: 2px 0px 0px 2px;
  background-clip: padding-box;
}
.ilightbox-thumbnails {
  display: block;
  position: fixed;
  z-index: 100009;
}
.ilightbox-thumbnails.ilightbox-horizontal {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0px;
}
.ilightbox-thumbnails.ilightbox-vertical {
  top: 0;
  right: 0;
  width: 0px;
  height: 100%;
  overflow: hidden;
}
.ilightbox-holder {
  display: none;
  position: fixed;
  z-index: 100003;
  -webkit-transform: none;
  -moz-transform: none;
}
.ilightbox-holder.ilightbox-next,
.ilightbox-holder.ilightbox-prev {
  cursor: pointer;
}
.ilightbox-holder div.ilightbox-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.ilightbox-holder img.ilightbox-image {
  width: 100%;
  height: 100%;
}
.ilightbox-holder .ilightbox-container .ilightbox-caption {
  display: block !important;
  position: relative;
  left: 30px;
  right: 30px;
  max-width: 100%;
  padding: 10px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 150%;
  word-wrap: break-word;
  z-index: 20003;
  zoom: 1 !important;
  filter: alpha(opacity=100) !important;
  -webkit-opacity: 1 !important;
  -moz-opacity: 1 !important;
  opacity: 1 !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ilightbox-holder .ilightbox-container iframe + div {
  position: absolute !important;
}
.ilightbox-holder .ilightbox-container .ilightbox-social {
  display: none;
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 1px;
  padding-left: 0;
  z-index: 20003;
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul {
  float: none;
  list-style: none;
  height: 16px;
  margin: 0 auto;
  text-align: center;
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li {
  display: inline;
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li a {
  display: inline-block;
  float: none;
  margin-left: 1px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: 50%;
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li.facebook a {
  background-image: url('../detail/facebook_16.png');
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li.digg a {
  background-image: url('../detail/digg_16.png');
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li.twitter a {
  background-image: url('../detail/twitter_16.png');
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li.delicious a {
  background-image: url('../detail/delicious_16.png');
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li.reddit a {
  background-image: url('../detail/reddit_16.png');
}
.ilightbox-holder .ilightbox-container .ilightbox-social ul li.googleplus a {
  background-image: url('../detail/google_plus_16.png');
}
.ilightbox-holder .ilightbox-alert {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  padding-top: 100px;
  margin: auto;
  width: 300px;
  height: 50px;
}
.ilightbox-holder .ilightbox-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.ilightbox-holder .ilightbox-wrapper .ilightbox-html {
  width: 100%;
  height: 100%;
  display: block;
}
.ilightbox-holder .ilightbox-inner-toolbar {
  position: relative;
  z-index: 100;
}
.ilightbox-holder .ilightbox-inner-toolbar .ilightbox-toolbar {
  position: absolute;
  left: auto;
  top: 5px;
  right: 5px;
}
.ilightbox-holder .ilightbox-inner-toolbar .ilightbox-toolbar a {
  float: right;
}
.ilightbox-button {
  position: fixed;
  z-index: 100011;
  cursor: pointer;
}
.ilightbox-button span {
  display: block;
  width: 100%;
  height: 100%;
}
.isMobile .ilightbox-button,
.isMobile .ilightbox-thumbnails {
  display: none !important;
}
.isMobile .ilightbox-toolbar .ilightbox-prev-button,
.isMobile .ilightbox-toolbar .ilightbox-next-button {
  display: block;
}
.ilightbox-overlay.black {
  background: #141618;
}
.ilightbox-loader.black div {
  background: transparent url('../detail/oval-anim-dark.svg') no-repeat center;
}
.ilightbox-holder.black .ilightbox-container .ilightbox-caption {
  background-size: 100% 100%;
  left: 0;
  right: 0;
  color: #ffffff;
  text-align: center;
}
.ilightbox-holder.black .ilightbox-alert {
  background: url('../detail/alert.png') no-repeat center top;
  color: #555;
}
.ilightbox-toolbar.black a {
  background: url('../detail/buttons.png') no-repeat 7px 6px;
}
.ilightbox-toolbar.black a.ilightbox-close {
  position: absolute;
  right: 5px;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-close {
  position: relative;
  right: 0px;
}
.ilightbox-toolbar.black a.ilightbox-close:hover {
  background-position: -32px 6px;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-close:hover {
  background-position: 50%;
}
.ilightbox-toolbar.black a.disabled {
  opacity: 0.2;
  filter: alpha(opacity=20);
  cursor: default;
  background-color: #141618;
}
.ilightbox-toolbar.black a.ilightbox-fullscreen {
  background-position: 6px -33px;
  margin-left: 5px;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-fullscreen {
  margin-left: 0px;
}
.ilightbox-toolbar.black a.ilightbox-fullscreen:hover {
  background-position: -31px -33px;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-fullscreen:hover {
  background-position: 50%;
}
.ilightbox-toolbar.black a.ilightbox-play {
  background-position: 8px -58px;
}
.ilightbox-toolbar.black a.ilightbox-play:hover {
  background-position: -32px -58px;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-play:hover {
  background-position: 50%;
}
.ilightbox-toolbar.black a.ilightbox-pause {
  background-position: 8px -83px;
}
.ilightbox-toolbar.black a.ilightbox-pause:hover {
  background-position: -32px -83px;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-pause:hover {
  background-position: 50%;
}
.isMobile .ilightbox-toolbar.black {
  background: #141618;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  text-align: center;
}
.isMobile .ilightbox-toolbar.black a {
  display: inline-block;
  float: none;
  width: 50px;
  height: 40px;
  background-size: 50%;
  background-position: 50%;
}
.isMobile .ilightbox-toolbar.black {
  background: #141618;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
}
.isMobile .ilightbox-toolbar.black a {
  display: inline-block;
  float: none;
  width: 50px;
  height: 40px;
  background-size: 50%;
  background-position: 50% !important;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-fullscreen {
  background-image: url('../detail/fullscreen-icon-64.png');
  background-image: url('../detail/fullscreen-icon-ie.png')\9;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-close {
  background-image: url('../detail/x-mark-icon-64.png');
  background-image: url('../detail/x-mark-icon-ie.png')\9;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-next-button {
  background-image: url('../detail/arrow-next-icon-64.png');
  background-image: url('../detail/arrow-next-icon-ie.png')\9;
  background-position: 52% 50%;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-prev-button {
  background-image: url('../detail/arrow-prev-icon-64.png');
  background-image: url('../detail/arrow-prev-icon-ie.png')\9;
  background-position: 48% 50%;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-play {
  background-image: url('../detail/play-icon-64.png');
  background-image: url('../detail/play-icon-ie.png')\9;
}
.isMobile .ilightbox-toolbar.black a.ilightbox-pause {
  background-image: url('../detail/pause-icon-64.png');
  background-image: url('../detail/pause-icon-ie.png')\9;
}
.ilightbox-holder.black .ilightbox-inner-toolbar .ilightbox-title {
  font-size: 14px;
  padding: 10px 12px;
  text-align: center;
  color: #ffffff;
}
.ilightbox-thumbnails.black .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-video {
  background: url('../detail/thumb-overlay-play.png') no-repeat center;
}
.ilightbox-button.black.disabled {
  opacity: 0.1;
  filter: alpha(opacity=10);
  cursor: default;
}
.ilightbox-button.ilightbox-next-button.black,
.ilightbox-button.ilightbox-prev-button.black {
  bottom: 0;
  right: 0;
  left: 0;
  left: 35%\9;
  right: auto\9;
  width: 20%;
  height: 38px;
  margin: auto;
  background: url('../detail/arrows_vertical.png') no-repeat 50% -125px;
}
.ilightbox-button.ilightbox-prev-button.black {
  top: 0;
  bottom: auto;
  background-position: 50% -36px;
}
.ilightbox-button.ilightbox-next-button.black.horizontal,
.ilightbox-button.ilightbox-prev-button.black.horizontal {
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  top: 36%\9;
  bottom: auto\9;
  width: 38px;
  height: 20%;
  background-image: url('../detail/arrows_horizontal.png');
  background-position: -125px 50%;
}
.ilightbox-button.ilightbox-prev-button.black.horizontal {
  right: auto;
  left: 0;
  background-position: -38px 50%;
}
.ilightbox-holder.black .ilightbox-container .ilightbox-social,
.ilightbox-button.ilightbox-next-button.black,
.ilightbox-button.ilightbox-prev-button.black {
  background-color: #141618;
}
.ilightbox-overlay.white {
  background: #ffffff;
}
.ilightbox-loader.white div {
  background: transparent url('../detail/oval-anim-light.svg') no-repeat center;
}
.ilightbox-holder.white .ilightbox-container .ilightbox-caption {
  background-size: 100% 100%;
  left: 0;
  right: 0;
  color: #141618;
  text-align: center;
}
.ilightbox-holder.white .ilightbox-alert {
  background: url('../detail/alert.png') no-repeat center top;
  color: #89949B;
}
.ilightbox-toolbar.white a {
  background: url('../detail/buttons.png') no-repeat 7px 6px;
}
.ilightbox-toolbar.white a.disabled {
  opacity: 0.2;
  filter: alpha(opacity=20);
  cursor: default;
  background-color: #ffffff;
}
.ilightbox-toolbar.white a.ilightbox-close {
  position: absolute;
  right: 5px;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-close {
  position: relative;
  right: 0px;
}
.ilightbox-toolbar.white a.ilightbox-close:hover {
  background-position: -32px 6px;
}
.ilightbox-toolbar.white a.ilightbox-fullscreen {
  background-position: 6px -33px;
  margin-left: 5px;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-fullscreen {
  margin-left: 0px;
}
.ilightbox-toolbar.white a.ilightbox-fullscreen:hover {
  background-position: -31px -33px;
}
.ilightbox-toolbar.white a.ilightbox-play {
  background-position: 8px -58px;
}
.ilightbox-toolbar.white a.ilightbox-play:hover {
  background-position: -32px -58px;
}
.ilightbox-toolbar.white a.ilightbox-pause {
  background-position: 8px -83px;
}
.ilightbox-toolbar.white a.ilightbox-pause:hover {
  background-position: -32px -83px;
}
.isMobile .ilightbox-toolbar.white {
  background: #ffffff;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  text-align: center;
}
.isMobile .ilightbox-toolbar.white a,
.isMobile .ilightbox-toolbar.white a:hover {
  display: inline-block;
  float: none;
  width: 50px;
  height: 40px;
  background-size: 50%;
  background-position: 50%;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-fullscreen {
  background-image: url('../detail/fullscreen-icon-64.png');
  background-image: url('../detail/fullscreen-icon-ie.png')\9;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-close {
  background-image: url('../detail/x-mark-icon-64.png');
  background-image: url('../detail/x-mark-icon-ie.png')\9;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-next-button {
  background-image: url('../detail/arrow-next-icon-64.png');
  background-image: url('../detail/arrow-next-icon-ie.png')\9;
  background-position: 52% 50%;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-next-button.disabled {
  background-image: url('../detail/arrow-next-icon-64.png');
  background-image: url('../detail/arrow-next-icon-ie.png')\9;
  background-position: 52% 50%;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-prev-button {
  background-image: url('../detail/arrow-prev-icon-64.png');
  background-image: url('../detail/arrow-prev-icon-ie.png')\9;
  background-position: 48% 50%;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-prev-button.disabled {
  background-image: url('../detail/arrow-prev-icon-64.png');
  background-image: url('../detail/arrow-prev-icon-ie.png')\9;
  background-position: 48% 50%;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-play {
  background-image: url('../detail/play-icon-64.png');
  background-image: url('../detail/play-icon-ie.png')\9;
}
.isMobile .ilightbox-toolbar.white a.ilightbox-pause {
  background-image: url('../detail/pause-icon-64.png');
  background-image: url('../detail/pause-icon-ie.png')\9;
}
.ilightbox-thumbnails.white .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-video {
  background: url('../detail/thumb-overlay-play.png') no-repeat center;
}
.ilightbox-holder.white .ilightbox-inner-toolbar .ilightbox-title {
  font-size: 14px;
  padding: 10px 12px;
  text-align: center;
}
.ilightbox-holder.white .ilightbox-inner-toolbar .ilightbox-toolbar {
  left: auto;
  top: 5px;
  right: 5px;
}
.ilightbox-holder.white .ilightbox-inner-toolbar .ilightbox-toolbar a {
  float: right;
}
.ilightbox-button.white.disabled {
  opacity: 0.1;
  filter: alpha(opacity=10);
  cursor: default;
}
.ilightbox-button.ilightbox-next-button.white,
.ilightbox-button.ilightbox-prev-button.white {
  bottom: 0;
  right: 0;
  left: 0;
  top: 35%\9;
  right: auto\9;
  width: 20%;
  height: 38px;
  margin: auto;
  background: url('../detail/arrows_vertical.png') no-repeat 50% -125px;
}
.ilightbox-button.ilightbox-prev-button.white {
  top: 0;
  bottom: auto;
  background-position: 50% -36;
}
.ilightbox-button.ilightbox-next-button.white.horizontal,
.ilightbox-button.ilightbox-prev-button.white.horizontal {
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  top: 36%\9;
  bottom: auto\9;
  width: 38px;
  height: 20%;
  background-image: url('../detail/arrows_horizontal.png');
  background-position: -125px 50%;
}
.ilightbox-button.ilightbox-prev-button.white.horizontal {
  right: auto;
  left: 0;
  background-position: -38px 50%;
}
.ilightbox-holder.white .ilightbox-container .ilightbox-social,
.ilightbox-button.ilightbox-next-button.white,
.ilightbox-button.ilightbox-prev-button.white {
  background-color: rgba(20, 22, 24, 0.25);
}

/* 行動版面: 480px 以下。 */
@media only screen and (max-width: 480px) {
.case-title{ float:left; width:100%;padding:0; margin:0;}
.case-title h3{padding:0; margin:0; font-size:26px;line-height:36px;color:#333}
.case-title h4{padding:0; margin:0 0 10px 0; font-size:17px;line-height:28px; font-weight:400;color:#22658c}
.case-title h5{padding:0; margin:0; font-size:15px;line-height:28px; font-weight:400; color:#666}
.tx-box{float:left;width:100%; margin:35px 0 30px 0; padding:0 0 25px 0;font-size:15px;border-bottom:1px solid #d4d4d4;color:#000}
.tx-content{float:left;width:100%; margin:0; padding:0px;text-align:justify;}
  .tx-content img{margin:20px auto 0 auto; padding:0;height: auto;max-width: 100%; text-align:center}
  .tx-content p{margin:20px 0 0 0; padding:0;line-height:32px;font-size:17px;}

.banner{float:left;width:90%; margin:10px 5% 40px 5%; padding:0;}
.back {width:140px; text-align:center; margin:0 auto 0 auto;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #fff 50%, #c8a063 50%);
    transition: background-position 0.5s; border-radius:50px;}
  .back a {display:block; height:40px; padding:0;color: #000; font-size:16px;line-height:40px;text-decoration: none;border:2px solid #c8a063; border-radius:50px;}
  .back a:hover {color: #fff;}  
.back:hover {color: #fff;background-position: -100% 0;}
.pic-row{float:left; width:100%; padding:0; margin:0;}

.video-content{float:left;width:100%; margin:0 0 20px 0; padding:0;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; }
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.csleft-box{ float:left; width:100%;padding:0; margin:13px 0 0 0;}
.csleft-row{ float:left; width:100%;padding:0; margin:0 0 30px 0;}
.csleft-a{float:left; width:50%;padding:0; margin:0;}
.csleft-a h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-a h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}

/*社群*/
.social-case {float:left;width:100%;margin:0 0 10px 0; padding:0; text-align: left;font-size:12px; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif";display:flex;align-items:center;flex-wrap:wrap;}
.social-case a {display: inline-block;width:20px; height:20px; line-height:20px;margin: 0 5px;font-size:16px; font-weight:400; transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms; text-align:center; color:#333;}
.social-case a:hover {color:#c8a063;}

}


/* 表格版面: 481px 到 767px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
.case-title{ float:left; width:32%;padding:0; margin:0;}
.case-title h3{padding:0; margin:0 0 10px 0; font-size:24px;line-height:36px;color:#222}
.case-title h4{padding:0; margin:0 0 40px 0; font-size:17px;line-height:28px; font-weight:400; color:#22658c}
.case-title h5{padding:0; margin:0; font-size:15px;line-height:28px; font-weight:400; color:#666}
.tx-box{float:left;width:100%; margin:50px 0; padding:0 0 40px 0;font-size:15px;border-bottom:1px solid #d4d4d4;color:#000}
.tx-content{float:left;width:66%; margin:0 0 0 2%;padding:0px}
  .tx-content img{margin:20px auto 0 auto; padding:0;height: auto;max-width: 100%; text-align:center}
  .tx-content p{margin:0; padding:0;line-height:36px;font-size:17px;text-align:justify;}
.banner{float:left;width:100%; margin:10px 0 40px 0; padding:0;}
.back{width:160px; text-align:center; margin:0 auto 0 auto;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #fff 50%, #c8a063 50%);
    transition: background-position 0.5s; border-radius:50px;}
  .back a {display:block; height:48px; padding:0;color: #000; font-size:16px;line-height:46px;text-decoration: none;border:2px solid #c8a063; border-radius:50px;}
  .back a:hover {color: #fff;}  
.back:hover {color: #fff;background-position: -100% 0;}
.pic-row{float:left; width:100%; padding:0; margin:0;}

.video-content{float:left;width:100%; margin:20px 0 30px 0; padding:0;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; }
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.csleft-box{ float:left; width:32%;padding:0; margin:13px 0 0 0;}
.csleft-row{ float:left; width:100%;padding:0; margin:0 0 30px 0;}
.csleft-a{float:left; width:55%;padding:0; margin:0;}
.csleft-a h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-a h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}
.csleft-b{float:left; width:45%;padding:0; margin:0;}
.csleft-b h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-b h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}

/*社群*/
.social-case {float:left;width:100%;margin:30px 0 0 0; padding:0; text-align: left;font-size:12px; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif";display:flex;align-items:center;flex-wrap:wrap;}
.social-case a {display: inline-block;width:20px; height:20px; line-height:20px;margin: 0 5px;font-size:16px; font-weight:400; transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms; text-align:center; color:#333;}
.social-case a:hover {color:#c8a063;}

}


/* 表格版面: 768px 到 980px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 768px) {
.case-title{ float:left; width:32%;padding:0; margin:0;}
.case-title h3{padding:0; margin:0 0 10px 0; font-size:24px;line-height:36px;color:#222}
.case-title h4{padding:0; margin:0 0 40px 0; font-size:17px;line-height:28px; font-weight:400;color:#22658c}
.case-title h5{padding:0; margin:0; font-size:15px;line-height:28px; font-weight:400; color:#666}
.tx-box{float:left;width:100%; margin:60px 0; padding:0 0 40px 0;font-size:15px;border-bottom:1px solid #d4d4d4;color:#000}
.tx-content{float:left;width:66%; margin:0 0 0 2%;padding:0px}
  .tx-content img{margin:20px auto 0 auto; padding:0;height: auto;max-width: 100%; text-align:center}
  .tx-content p{margin:0; padding:0;line-height:36px;font-size:17px;text-align:justify;}
.banner{float:left;width:100%; margin:20px 0 50px 0; padding:0;}
.back{width:160px; text-align:center; margin:0 auto 0 auto;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #fff 50%, #c8a063 50%);
    transition: background-position 0.5s;}
  .back a {display:block; height:48px; padding:0;color: #000; font-size:16px;line-height:46px;text-decoration: none;border:2px solid #c8a063; border-radius:50px;}
  .back a:hover {color: #fff; border-radius:50px;}  
.back:hover {color: #fff;background-position: -100% 0;}
.pic-row{float:left; width:100%; padding:0; margin:0;}

.video-content{float:left;width:100%; margin:20px 0 30px 0; padding:0;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; }
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.csleft-box{ float:left; width:32%;padding:0; margin:13px 0 0 0;}
.csleft-row{ float:left; width:100%;padding:0; margin:0 0 30px 0;}
.csleft-a{float:left; width:50%;padding:0; margin:0;}
.csleft-a h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-a h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}
.csleft-b{float:left; width:50%;padding:0; margin:0;}
.csleft-b h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-b h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}

/*社群*/
.social-case {float:left;width:100%;margin:30px 0 0 0; padding:0; text-align: left;font-size:12px; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif";display:flex;align-items:center;flex-wrap:wrap;}
.social-case a {display: inline-block;width:20px; height:20px; line-height:20px;margin: 0 5px;font-size:16px; font-weight:400; transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms; text-align:center; color:#333;}
.social-case a:hover {color:#c8a063;}

}  


/* 表格版面: 981px 到 1280px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 981px) {
.case-title{ float:left; width:30%;padding:0; margin:0;}
.case-title h3{padding:0; margin:0 0 10px 0; font-size:28px;line-height:36px;color:#222}
.case-title h4{padding:0; margin:0 0 40px 0; font-size:17px;line-height:28px; font-weight:400;color:#22658c}
.case-title h5{padding:0; margin:0; font-size:15px;line-height:28px; font-weight:400; color:#666}
.tx-box{float:left;width:100%; margin:70px 0; padding:0 0 50px 0;border-bottom:1px solid #d4d4d4;color:#000}
.tx-content{float:left;width:68%; margin:0 0 0 2%; padding:0px;}
  .tx-content img{margin:20px auto 0 auto; padding:0;height: auto;max-width: 100%; text-align:center}
  .tx-content p{margin:0; padding:0;line-height:36px;font-size:17px;text-align:justify;}
.banner{float:left;width:100%; margin:30px 0 50px 0; padding:0;}
.back {width:160px; text-align:center; margin:0 auto 0 auto;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #fff 50%, #c8a063 50%);
    transition: background-position 0.5s; border-radius:50px;}
  .back a {display:block; height:48px; padding:0;color: #000; font-size:16px;line-height:46px;text-decoration: none;border:2px solid #c8a063; border-radius:50px;}
  .back a:hover {color: #fff;}  
.back:hover {color: #fff;background-position: -100% 0;}
.pic-row{float:left; width:100%; padding:0; margin:0;}

.video-content{float:left;width:100%; margin:30px 0; padding:0;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; }
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.csleft-box{ float:left; width:30%;padding:0; margin:13px 0 0 0;}
.csleft-row{ float:left; width:100%;padding:0; margin:0 0 30px 0;}
.csleft-a{float:left; width:50%;padding:0; margin:0;}
.csleft-a h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-a h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}
.csleft-b{float:left; width:50%;padding:0; margin:0;}
.csleft-a h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-b h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}

/*社群*/
.social-case {float:left;width:100%;margin:30px 0 0 0; padding:0; text-align: left;font-size:12px; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif";display:flex;align-items:center;flex-wrap:wrap;}
.social-case a {display: inline-block;width:20px; height:20px; line-height:20px;margin: 0 5px;font-size:16px; font-weight:400; transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms; text-align:center; color:#333;}
.social-case a:hover {color:#c8a063;}

}


/* 桌面版面: 1281px 到最大 1824px。樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1281px) {
.case-title{ float:left; width:30%;padding:0; margin:0;}
.case-title h3{padding:0; margin:0 0 20px 0; font-size:28px;line-height:36px;color:#222}
.case-title h4{padding:0; margin:0 0 40px 0; font-size:17px;line-height:28px; font-weight:400; color:#22658c}
.case-title h5{padding:0; margin:0; font-size:15px;line-height:28px; font-weight:400; color:#666}
.tx-box{float:left;width:100%; margin:70px 0; padding:0;border-bottom:1px solid #ffffff; color:#000}
.tx-content{float:left;width:68%; margin:0 0 0 2%; padding:0;}
  .tx-content img{margin:20px auto 0 auto; padding:0;height: auto;max-width: 100%; text-align:center}
  .tx-content p{margin:0; padding:0;line-height:36px; font-size:17px;text-align:justify;}
.banner{float:left;width:100%; margin:30px 0 60px 0; padding:0;}
.back {width:160px; text-align:center; margin:0 auto 0 auto;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #fff 50%, #c8a063 50%);
    transition: background-position 0.5s; border-radius:50px; }
  .back a {display:block; height:48px; padding:0;color: #000; font-size:16px;line-height:46px;text-decoration: none;border:2px solid #c8a063; border-radius:50px;}
  .back a:hover {color: #fff;}  
.back:hover {color: #fff;background-position: -100% 0;}
.pic-row{float:left; width:100%; padding:0; margin:0;}

.video-content{float:left;width:100%; margin:30px 0; padding:0;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; }
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.csleft-box{ float:left; width:30%;padding:0; margin:13px 0 0 0;}
.csleft-row{ float:left; width:100%;padding:0; margin:0 0 30px 0;}
.csleft-a{float:left; width:50%;padding:0; margin:0;}
.csleft-a h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-a h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}
.csleft-b{float:left; width:50%;padding:0; margin:0;}
.csleft-b h3{padding:0; margin:0 0 8px 0; font-size:12px;color:#222; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif"; }
.csleft-b h4{padding:0; margin:0; font-size:15px;font-weight:400; color:#555}

/*社群*/
.social-case {float:left;width:100%;margin:30px 0 0 0; padding:0; text-align: left;font-size:12px; font-weight:700;font-family:"Arial", "Helvetica", "sans-serif";display:flex;align-items:center;flex-wrap:wrap;}
.social-case a {display: inline-block;width:20px; height:20px; line-height:20px;margin: 0 5px;font-size:16px; font-weight:400; transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms; text-align:center; color:#333;}
.social-case a:hover {color:#c8a063;}

}
hr {
	border:0; height:1px; background-color:#d4d4d4;
	color:#d4d4d4	/* IE6 */
}

.csleft-row-full .csleft-a {
	width: 100%;
	float: none;
}

.portfolio-after-gallery {
	clear: both;
	float: left;
	width: 100%;
	max-width: 960px;
	margin: 40px auto 0;
	box-sizing: border-box;
}
.portfolio-after-gallery .content-related-section {
	margin-top: 2.5rem;
}
.portfolio-after-gallery .content-related-section .content-block-title,
.portfolio-after-gallery .content-related-section .related-post-title {
	font-size: 15px;
	line-height: 1.45;
}
.portfolio-after-gallery .content-related-section .content-block-title {
	margin: 0 0 12px;
	font-weight: 700;
}
.portfolio-after-gallery .content-related-section .related-post-title {
	font-weight: 600;
}

/* tx-content 超過高度可點擊展開 */
.tx-content--expandable {
	position: relative;
}
.tx-content--expandable .tx-content__inner {
	max-height: 450px;
	overflow: hidden;
	transition: max-height 0.45s ease, padding-bottom 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
	.tx-content--expandable .tx-content__inner {
		transition: none;
	}
}
.tx-content--expandable.is-expanded .tx-content__inner {
	max-height: none;
	overflow: visible;
	padding-bottom: 130px;
}
.tx-content__expand {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 130px;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 55%, #fff 100%);
}
.tx-content__expand .fa {
	display: block;
	font-size: 16px;
	line-height: 1;
	color: #999;
	transition: color 0.2s ease;
}
.tx-content__expand:hover .fa {
	color: #c8a063;
}
.tx-content--expandable.is-collapsed .tx-content__expand,
.tx-content--expandable.is-expanded .tx-content__expand {
	display: flex;
}
.tx-content__expand[hidden] {
	display: none;
}