@charset "UTF-8";
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0; }


html{-webkit-tap-highlight-color:transparent}

.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}
@media (max-width:767px){.container{margin-bottom:40px;margin-top:20px;}}
@media (min-width:768px){.container{width:96%;margin-bottom:70px;margin-top:20px;}}
@media (min-width:992px){.container{width:970px;margin-bottom:70px;margin-top:20px;}}
@media (min-width:1200px){.container{width:1170px; margin-bottom:70px;margin-top:30px;}}
@media (min-width:1500px){.container{width:92%; margin-bottom:70px;margin-top:30px;}}

.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-holder:after,.portfolio-holder:before{content:" ";display:table}.portfolio-holder:after{clear:both}.portfolio-holder:after,.portfolio-holder:before{content:" ";display:table}.portfolio-holder:after{clear:both}

.portfolio-holder .item-box{position:relative}
.portfolio-holder .item-box .info{padding:10px 0}
.portfolio-holder .item-box .info h3{font-size:20px;margin-top:10px;margin-bottom:5px}
.portfolio-holder .item-box .info h3 a{color:#333;-webkit-transition:all .2s ease-in-out 0;-moz-transition:all .2s ease-in-out 0;-o-transition:all .2s ease-in-out 0;transition:all .2s ease-in-out 0;}
.portfolio-holder .item-box .info h3 a:hover{text-decoration: none}
.portfolio-holder .item-box .info h3 a::after{background:0 0;}
.portfolio-holder .item-box .info p{font-size:14px}
.portfolio-holder .item-box .info p a{color:#898989}
.portfolio-holder .item-box .info p a:hover{color:#00b19e;text-decoration: none}
.portfolio-holder .item-box.wow .thumb .hover-state{visibility:hidden}
.portfolio-holder .item-box.wow.animated .thumb .hover-state{visibility:visible}
.portfolio-holder .thumb{display:block}.portfolio-holder .thumb>a{display:block}
.portfolio-holder .thumb .hover-state{overflow:hidden;cursor:pointer}
.portfolio-holder .thumb .hover-state .info{color:#fff;bottom:0;left:0;padding:40px;position:absolute}
@media screen and (max-width:768px){.portfolio-holder .thumb .hover-state .info{padding:25px}}
.portfolio-holder .thumb .hover-state .info h3{font-size:22px;margin:0;word-break:break-word}
@media screen and (max-width:992px){.portfolio-holder .thumb .hover-state .info h3{padding:0!important}}
@media screen and (max-width:768px){.portfolio-holder .thumb .hover-state .info h3{padding-bottom:10px!important}}
.portfolio-holder .thumb .hover-state .info h3 a{color:#fff}.portfolio-holder .thumb .hover-state .info h3 a::after{background:0 0}.portfolio-holder .thumb .hover-state .info p{font-size:15px;color:#fff;margin:0;padding-top:7px}
@media screen and (max-width:992px){.portfolio-holder .thumb .hover-state .info p{display:none}}
@media screen and (max-width:768px){.portfolio-holder .thumb .hover-state .info p{display:block}}
.portfolio-holder .thumb .hover-state .info p a{color:#fff}.portfolio-holder .thumb .hover-state .info p a:hover{color:#fff}





.portfolio-holder{clear:both;position:relative}
.portfolio-holder .portfolio-item{position:relative;float:left;padding-left:15px;padding-right:15px}
.portfolio-holder .portfolio-item.with-padding{padding:30px}
@media screen and (min-width:1201px){.portfolio-holder .portfolio-item{width:33.33333333%;box-sizing:border-box;}.portfolio-holder .portfolio-item.with-padding{padding:30px}}
@media screen and (max-width:1200px){.portfolio-holder .portfolio-item{width:50%; box-sizing:border-box;}.portfolio-holder .portfolio-item.with-padding{padding:20px}}
@media screen and (max-width:480px){.portfolio-holder .portfolio-item{width:100%}.portfolio-holder .portfolio-item.with-padding{padding:15px}}
.image-placeholder{position:relative;display:block;background-color:#eee}.image-placeholder>img{display:block;position:absolute;max-width:100%;max-height:100%;width:100%;height:auto;top:0;left:0}.image-placeholder .lazyload,.image-placeholder .lazyloading{zoom:1;filter:alpha(opacity=0);-webkit-opacity:0;-moz-opacity:0;opacity:0}.image-placeholder .lazyloaded{-webkit-animation:imagePlaceholderOpacityIn .4s cubic-bezier(.445,.050,.55,.95) forwards;-moz-animation:imagePlaceholderOpacityIn .4s cubic-bezier(.445,.050,.55,.95) forwards;-o-animation:imagePlaceholderOpacityIn .4s cubic-bezier(.445,.050,.55,.95) forwards;animation:imagePlaceholderOpacityIn .4s cubic-bezier(.445,.050,.55,.95) forwards}.thumb{position:relative;overflow:hidden;z-index:1}.thumb:hover .hover-state{visibility:visible;zoom:1;filter:alpha(opacity=70);-webkit-opacity:.7;-moz-opacity:.7;opacity:.7}.thumb:hover .hover-state.no-opacity{zoom:1;filter:alpha(opacity=100);-webkit-opacity:1;-moz-opacity:1;opacity:1}.hover-state{background-color:#000;position:absolute;top:0;left:0;right:0;bottom:0;color:#fff;display:block;z-index:1;visibility:hidden;zoom:1;filter:alpha(opacity=0);-webkit-opacity:0;-moz-opacity:0;opacity:0;-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
.hover-state.hover-eff-fade-slide .info h3{zoom:1;filter:alpha(opacity=0);-webkit-opacity:0;-moz-opacity:0;opacity:0;-webkit-transform:translate(0,15px);-moz-transform:translate(0,15px);-ms-transform:translate(0,15px);-o-transform:translate(0,15px);transform:translate(0,15px);-webkit-transition:all .15s 75ms cubic-bezier(.25,.46,.45,.94);-moz-transition:all .15s 75ms cubic-bezier(.25,.46,.45,.94);-o-transition:all .15s 75ms cubic-bezier(.25,.46,.45,.94);transition:all .15s 75ms cubic-bezier(.25,.46,.45,.94)}.hover-state.hover-eff-fade-slide .info p{zoom:1;filter:alpha(opacity=0);-webkit-opacity:0;-moz-opacity:0;opacity:0;-webkit-transform:translate(translate(0,15px));-moz-transform:translate(translate(0,15px));-ms-transform:translate(translate(0,15px));-o-transform:translate(translate(0,15px));transform:translate(translate(0,15px));-webkit-transition:all .15s cubic-bezier(.25,.46,.45,.94);-moz-transition:all .15s cubic-bezier(.25,.46,.45,.94);-o-transition:all .15s cubic-bezier(.25,.46,.45,.94);transition:all .15s cubic-bezier(.25,.46,.45,.94)}.hover-state.hover-eff-fade-slide:hover .likes{zoom:1;filter:alpha(opacity=100);-webkit-opacity:1;-moz-opacity:1;opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all .4s cubic-bezier(.455,.03,.515,.955);-moz-transition:all .4s cubic-bezier(.455,.03,.515,.955);-o-transition:all .4s cubic-bezier(.455,.03,.515,.955);transition:all .4s cubic-bezier(.455,.03,.515,.955)}.hover-state.hover-eff-fade-slide:hover .info h3{zoom:1;filter:alpha(opacity=100);-webkit-opacity:1;-moz-opacity:1;opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all .3s .1s cubic-bezier(.455,.03,.515,.955);-moz-transition:all .3s .1s cubic-bezier(.455,.03,.515,.955);-o-transition:all .3s .1s cubic-bezier(.455,.03,.515,.955);transition:all .3s .1s cubic-bezier(.455,.03,.515,.955)}.hover-state.hover-eff-fade-slide:hover .info p{zoom:1;filter:alpha(opacity=100);-webkit-opacity:1;-moz-opacity:1;opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all .4s .2s cubic-bezier(.455,.03,.515,.955);-moz-transition:all .4s .2s cubic-bezier(.455,.03,.515,.955);-o-transition:all .4s .2s cubic-bezier(.455,.03,.515,.955);transition:all .4s .2s cubic-bezier(.455,.03,.515,.955)}

/* 行動版面: 480px 以下。 */
@media only screen and (max-width: 480px) {
.portfolio-holder .item-box .info{ display:none}
.portfolio-holder .item-box.wow .thumb .hover-state{visibility:hidden; display: none}

.portfolio-holder .item-box .infomedia{padding:10px 0;}
.portfolio-holder .item-box .infomedia h3{font-size:18px;margin-top:10px;margin-bottom:5px; font-weight:400}
.portfolio-holder .item-box .infomedia h3 a{color:#666;-webkit-transition:all .2s ease-in-out 0;-moz-transition:all .2s ease-in-out 0;-o-transition:all .2s ease-in-out 0;transition:all .2s ease-in-out 0;text-decoration: none}
.portfolio-holder .item-box .infomedia h3 a:hover{text-decoration: underline}
.portfolio-holder .item-box .infomedia h3 a::after{background:0 0;}
.portfolio-holder .item-box .infomedia p{font-size:14px}
.portfolio-holder .item-box .infomedia p a{color:#898989}
.portfolio-holder .item-box .infomedia p a:hover{color:#00b19e;text-decoration: underline}
.portfolio-holder a{ color:#666; text-decoration: none}
.portfolio-holder a:hover{ color:#666; text-decoration: underline}

}

/* 表格版面: 481px 到 767px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
.portfolio-holder .item-box .info{ display:none}
.portfolio-holder .item-box.wow .thumb .hover-state{visibility:hidden; display: none}

.portfolio-holder .item-box .infomedia{padding:10px 0;}
.portfolio-holder .item-box .infomedia h3{font-size:18px;margin-top:10px;margin-bottom:5px; font-weight:400}
.portfolio-holder .item-box .infomedia h3 a{color:#666;-webkit-transition:all .2s ease-in-out 0;-moz-transition:all .2s ease-in-out 0;-o-transition:all .2s ease-in-out 0;transition:all .2s ease-in-out 0;text-decoration: none}
.portfolio-holder .item-box .infomedia h3 a:hover{text-decoration: underline}
.portfolio-holder .item-box .infomedia h3 a::after{background:0 0;}
.portfolio-holder .item-box .infomedia p{font-size:14px}
.portfolio-holder .item-box .infomedia p a{color:#898989}
.portfolio-holder .item-box .infomedia p a:hover{color:#00b19e;text-decoration: underline}
.portfolio-holder a{ color:#666; text-decoration: none}
.portfolio-holder a:hover{ color:#666; text-decoration: underline}

}

/* 表格版面: 768px 到 980px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 768px) {
.portfolio-holder .item-box .info{ display:none}
.portfolio-holder .item-box.wow .thumb .hover-state{visibility:hidden; display: none}

.portfolio-holder .item-box .infomedia{padding:10px 0;}
.portfolio-holder .item-box .infomedia h3{font-size:18px;margin-top:10px;margin-bottom:5px;font-weight:400}
.portfolio-holder .item-box .infomedia h3 a{color:#666;-webkit-transition:all .2s ease-in-out 0;-moz-transition:all .2s ease-in-out 0;-o-transition:all .2s ease-in-out 0;transition:all .2s ease-in-out 0;text-decoration: none}
.portfolio-holder .item-box .infomedia h3 a:hover{text-decoration: underline}
.portfolio-holder .item-box .infomedia h3 a::after{background:0 0;}
.portfolio-holder .item-box .infomedia p{font-size:14px}
.portfolio-holder .item-box .infomedia p a{color:#898989}
.portfolio-holder .item-box .infomedia p a:hover{color:#00b19e;text-decoration: underline}
.portfolio-holder a{ color:#666; text-decoration: none}
.portfolio-holder a:hover{ color:#666; text-decoration: underline}
}


/* 表格版面: 981px 到 1280px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 981px) {
.portfolio-holder .item-box .info{ display:none}
.portfolio-holder .item-box.wow .thumb .hover-state{visibility:hidden; display: none}

.portfolio-holder .item-box .infomedia{padding:10px 0}
.portfolio-holder .item-box .infomedia h3{font-size:18px;margin-top:10px;margin-bottom:5px;font-weight:400}
.portfolio-holder .item-box .infomedia h3 a{color:#666;-webkit-transition:all .2s ease-in-out 0;-moz-transition:all .2s ease-in-out 0;-o-transition:all .2s ease-in-out 0;transition:all .2s ease-in-out 0;text-decoration: none}
.portfolio-holder .item-box .infomedia h3 a:hover{text-decoration: underline}
.portfolio-holder .item-box .infomedia h3 a::after{background:0 0;}
.portfolio-holder .item-box .infomedia p{font-size:14px}
.portfolio-holder .item-box .infomedia p a{color:#999999}
.portfolio-holder .item-box .infomedia p a:hover{color:#00b19e;text-decoration: underline}
.portfolio-holder a{ color:#666; text-decoration: none}
.portfolio-holder a:hover{ color:#666; text-decoration: underline}

}

/* 桌面版面: 1281px 到最大 1824px。樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1281px) {
.portfolio-holder .item-box .info{padding:10px 0; display: block;font-family:"微軟正黑體","Microsoft JhengHei","Arial", "Helvetica", "sans-serif";}
.portfolio-holder .item-box .info h3{font-size:18px !important;margin-top:10px;margin-bottom:5px; font-weight:400}
.portfolio-holder .item-box .info h3 a{color:#333;-webkit-transition:all .2s ease-in-out 0;-moz-transition:all .2s ease-in-out 0;-o-transition:all .2s ease-in-out 0;transition:all .2s ease-in-out 0; text-decoration: none}
.portfolio-holder .item-box .info h3 a:hover{text-decoration: underline}
.portfolio-holder .item-box .info h3 a::after{background:0 0;}
.portfolio-holder .item-box .info p{font-size:14px}
.portfolio-holder .item-box .info p a{color:#898989}
.portfolio-holder .item-box .info p a:hover{color:#00b19e;text-decoration: underline}
.portfolio-holder .item-box.wow .thumb .hover-state{visibility:hidden;display: block;}

.portfolio-holder .item-box .infomedia{display:none}
}