.project-banner {position:relative;background-color:#000;padding-bottom:50.6%;overflow:hidden;margin:0;}
.project-banner .entry {position:absolute;left:0;top:60%;z-index:10;width:100%;color:#fff; text-align:center}
.project-banner .entry h1{font-family:"Times New Roman",Arial,Microsoft JhengHei,Helvetica,sans-serif; font-size:36px; line-height:1.3em;letter-spacing: 1px;}
.project-banner .entry h2{padding:0; margin:0 0 15px;font-size:20px; color:#ccc;}
.project-banner .single-bg {height: 100%;width: 100%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;
display: flex;align-items: center;-webkit-align-items: center;justify-content: flex-start;-webkit-justify-content: flex-start;}
.project-banner .single-bg .overlay,
.project-banner .single-bg .bg {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.project-banner .single-bg .bg {background-position: center;background-size:cover;background-repeat: no-repeat;opacity:.95;}

@media screen and (max-width: 1600px) {
.project-banner .entry h1{font-size:30px;}	
}
@media screen and (max-width: 1280px) {
.project-banner {padding-bottom:64%;}
.project-banner .entry h1{font-size:30px;}	
.project-banner .entry h2{font-size:18px;}
}
@media screen and (max-width: 980px) {
.project-banner {padding-bottom:60%;}
.project-banner .entry h1{font-size:30px;}	
.project-banner .entry h2{font-size:18px;}
}
@media screen and (max-width: 767px) {
.project-banner .entry h1{font-size:20px;}	
}
@media screen and (max-width: 480px) {
.project-banner {padding-bottom:100%;}
.project-banner .entry h1{font-size:18px;}	
}
.project-container{width:1500px; padding:0; margin:70px auto 60px auto;}
@media screen and (max-width:1600px){.project-container{width:90%;margin:50px auto;}}
@media screen and (max-width:1200px){.project-container{margin:50px auto 40px;}}
@media screen and (max-width:980px){.project-container{margin:40px auto 10px;}}
@media screen and (max-width: 550px) {.project-container{padding:0; margin:30px auto 0 auto;}}

.project-detail .gallery-pic{width:100%; margin-bottom:30px;position:relative;overflow:hidden;}
.gallery-pic{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.gallery-pic.show{opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.project-detail .gallery-pic>a{display:block}
.project-detail .gallery-pic img{max-width:100%;height:auto; margin:0 auto;display:block; text-align:center}
.project-detail .gallery-pic .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}
.project-detail .gallery-pic .caption a{color:#fff}
.project-detail .gallery-pic .caption a:after{background-color:#fff}

/*detail-tx*/
.gallery{width:100%; margin:30px 0 0;}
.tx-box{width:25%; float:left;margin:0 6% 30px 0; padding:0;font-size:15px;}
.detail-right{width:69%; float:left;margin:0;}
.cs-info{width:100%; float:left;margin:0;}
.tx-item{width:100%; float:left;margin:0 0 35px 0;}
.tx-item h3{margin:0 0 10px 0; font-size:12px;font-family: 'Noto Sans TC', sans-serif;font-weight: 500; }
.tx-item h4{margin:0; font-size:15px; line-height: 1.9em;}
.top-title{float: left;width:100%;margin:30px 0 25px;}
 .top-title h1{margin:0; padding:0; font-size:26px; font-family: 'Noto Sans TC', sans-serif;font-weight: 400; letter-spacing: 0.1em; line-height: 1.5em;}
.top-info{float:left;width:100%; margin:0 0 40px;line-height:1.8em; font-size:14px;text-align:justify;}

/*社群*/
.social-case{float:left;width:100%; height:28px;margin:0;text-align:left;  line-height:28px;}
.social-case a {display: inline-block;margin: 0 10px 0 0;width:30px; height: 30px; line-height: 28px; background-color:#ccc; border-radius: 99em; font-size:16px; font-weight:400; transition: 300ms;-moz-transition: 300ms;-webkit-transition: 300ms;-o-transition: 300ms; text-align:center; color:#444444; border: 1px solid #ccc;}
.social-case a:hover {color:#fff;background-color: #717070; border: 1px solid #717070}	
.video-box{width:100%; margin:90px 0;}
.video-content{width:100%; margin:0 0 30px 0;}
.video-content{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.video-content.show{opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(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%;}
.video-container img{max-width:100%;height: auto} 

@media screen and (max-width: 1600px) {
.tx-box{width:28%; float:left;margin:0 5% 30px 0}
.detail-right{width:67%;}
.top-title{margin:30px 0 20px;}	
 .top-title h1{font-size:24px;}
.tx-item{margin:0 0 20px 0;}
.tx-item h3{margin:0 0 6px 0;}
.top-info{margin:0 0 25px;}
}
@media screen and (max-width: 1280px) {
.gallery{margin:20px 0 0;}
.top-title{margin:20px 0;}	
}
@media screen and (max-width: 980px) {
.top-title{margin:0 0 20px;}	
.top-info{margin:0 0 20px;line-height:1.7em;}
.tx-box{width:100%; margin:0 0 20px 0;}
.detail-right{width:100%;margin:0;}
}
@media screen and (max-width: 480px) {
.tx-box{margin:0 0 10px 0;}
.top-title{margin:0 0 10px;}	
 .top-title h1{font-size:22px;}	
}

.hr {border:0; height:1px; background-color:#d4d4d4;color:#d4d4d4}

.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: 60px;}
.ilightbox-thumbnails.ilightbox-vertical {top: 0;right: 0;width: 0px;height: 100%;overflow: hidden;}
.ilightbox-thumbnails .ilightbox-thumbnails-container {display: block;position: relative;}
.ilightbox-thumbnails.ilightbox-horizontal .ilightbox-thumbnails-container {width: 100%;height: 60px;}
.ilightbox-thumbnails.ilightbox-vertical .ilightbox-thumbnails-container {width: 60px;height: 100%;}
.ilightbox-thumbnails .ilightbox-thumbnails-grid {display: block;position: absolute;}
.no-touch .ilightbox-thumbnails .ilightbox-thumbnails-grid {-webkit-transform: translateZ(0);-moz-transform: translateZ(0);}
.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail {display: block;cursor: pointer;padding: 0px;position: relative;}
.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail img {width: 100%;height: 100%;-ms-interpolation-mode: bicubic;}
.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-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-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-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);}

/*column*/
.column{width:100%; float:left; }
.column-content{width:80%; margin: 0 auto 60px}
.columntitle{float:left; width:100%;font-size:24px;padding:13px 0; margin:30px 0 50px; letter-spacing:0.1em;text-indent: 0.1em;text-align:center;border-bottom: 1px dotted #ccc;border-top: 1px dotted #ccc;}
.columntitle span{letter-spacing:0;text-indent:0; color: #ac802f; font-weight: 500}
.project-column{width: 100%;float: left;}
.project-list {display: flex;justify-content: start;flex-wrap: wrap;padding:0;}
.project-column li{width: 25%;padding: 10px;box-sizing: border-box;position: relative}
.project-column li{opacity: 0;-moz-transform: translateY(20px);-ms-transform: translateY(20px);-webkit-transform: translateY(20px);transform: translateY(20px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.project-column li.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.project-column a:hover .project-pic img {-moz-transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); opacity: 0.5;}
.project-pic{width: 100%;overflow: hidden;position: relative;background-color: #000000}
.project-pic img{width: 100%;-moz-transition: all 1s;-o-transition: all 1s;-webkit-transition: all 1s;transition: all 1s; margin:0; padding:0;display:block}
.project-content{text-align: left;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; margin-bottom: 10px; padding: 0 6px 2px}
.project-content i{margin:0 0 0 3px;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; font-size:16px;}
.project a:hover .project-content {color: #955f2e;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.project-name{display: none;}
.project-column li .view{opacity: 0;color: #000;width: 80%;text-align: center; box-sizing: border-box;position: absolute;left: 10%; top:50%; overflow: hidden;
    -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);-o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1); font-weight: 400; color: #fff; padding: 0;z-index: 8;}
.project-column li .view .en{width: 100%;float: left; font-size:13px; color: #c6c6c6; margin-bottom: 10px;}
.project-column li .view .cn{width: 100%; float: left; font-size: 20px;}
.project-column li:hover .view{-webkit-transform: translateY(-35%);-moz-transform: translateY(-35%);transform: translateY(-35%);z-index: 3;opacity: 1;}
@media screen and (max-width: 1600px) {	
.column-content{width:88%; margin: 0 auto 50px;}
.columntitle{margin:20px 0 40px}
}
@media screen and (max-width: 1200px) {
.column-content{ width:93%; margin: 0 auto 40px;}
.columntitle{margin:10px 0 40px}
.project-column li{width:33.333333%;padding: 10px}
.project-column li:last-child{display: none}
.project-column li .view{display:none;}	
.project-name {font-size: 18px;font-family: 'Noto Sans TC', sans-serif;font-weight: 400;margin-top: 10px;display:block;}
}
@media screen and (max-width: 980px) {
.column-content{ width: 94%; margin: 0 auto 30px;}
.columntitle{font-size: 22px;margin: 10px 0 30px}
.project-column li{width: 50%;margin-bottom:8px}
.project-column li:last-child{display:block}
}
@media screen and (max-width: 767px) {
.columntitle{margin: 10px 0 30px}
.project-column li {width: 100%;margin:0 auto 25px;padding: 0}
}
@media screen and (max-width: 550px) {
.column-content{width: 90%; margin: 0 auto 10px}
.columntitle{font-size:20px; margin:10px 0 30px}
.project-list { width:100%;margin: 0; }
}