.indexmain{width:100%;height:101vh;background-color:#3c3c3c;background:linear-gradient(#3c3c3c,#1e1e1e );}
.indexmain-images{position:relative;width:100%;height:100%;overflow:hidden;background-color:#3c3c3c;background:linear-gradient(#3c3c3c,#1e1e1e );}
.indexmain-images li{position:absolute;width:100%;height:100%;background-size:cover;background-position:center;-moz-transform:scale(1.25);-ms-transform:scale(1.25);-webkit-transform:scale(1.25);transform:scale(1.25);-moz-transition:-moz-transform 8s;-o-transition:-o-transform 8s;-webkit-transition:-webkit-transform 8s;transition:transform 8s}
.indexmain-images li.show-img{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.indexmain-slogan-text{position:absolute;top:50%;left:50%;color:#fff;opacity:0;z-index:5;text-shadow:1px 1px 3px #111;text-transform:capitalize;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-moz-transition:all .6s cubic-bezier(.34, 0, .68, 1) .3s;-o-transition:all .6s cubic-bezier(.34, 0, .68, 1) .3s;-webkit-transition:all .6s cubic-bezier(.34, 0, .68, 1);-webkit-transition-delay:.3s;transition:all .6s cubic-bezier(.34, 0, .68, 1) .3s}
.indexmain-slogan-text.show-text{opacity:1}
.indexmain-slogan-text.show-text .indexmain-slogan-title span:nth-child(1){-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-webkit-transform:translate(0, 0);transform:translate(0, 0)}
.indexmain-slogan-text.show-text .indexmain-slogan-title span:nth-child(2){opacity:1}
.indexmain-slogan-text.show-text .indexmain-slogan-title span:nth-child(3){-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-webkit-transform:translate(0, 0);transform:translate(0, 0)}
.indexmain-slogan-text.show-text .indexmain-slogan-sub p{-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-webkit-transform:translate(0, 0);transform:translate(0, 0)}
.indexmain-slogan-text.show-text .indexmain-slogan-award{opacity:1;-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-webkit-transform:translate(0, 0);transform:translate(0, 0)}
.indexmain-slogan-num{position:relative;display:flex;margin-bottom:20px;font-size:2em;line-height:1;writing-mode:vertical-lr}
.indexmain-slogan-num span{display:block}
.indexmain-slogan-title{display:flex;-webkit-align-items:center;align-items:center;font-size:1.5em;letter-spacing:0;overflow:hidden}
.indexmain-slogan-title span{display:block;-moz-transition:all .8s;-o-transition:all .8s;-webkit-transition:all .8s;transition:all .8s}
.indexmain-slogan-title span:nth-child(1){-moz-transform:translate(100%, 0);-ms-transform:translate(100%, 0);-webkit-transform:translate(100%, 0);transform:translate(100%, 0);-moz-transition-delay:.6s;-o-transition-delay:.6s;-webkit-transition-delay:.6s;transition-delay:.6s}
.indexmain-slogan-title span:nth-child(2){width:1px;height:14px;margin:0 15px;background:#fff;opacity:0;box-shadow:1px 1px 3px #111;-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);-moz-transition-delay:.5s;-o-transition-delay:.5s;-webkit-transition-delay:.5s;transition-delay:.5s}
.indexmain-slogan-title span:nth-child(3){-moz-transform:translate(-100%, 0);-ms-transform:translate(-100%, 0);-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0);-moz-transition-delay:.6s;-o-transition-delay:.6s;-webkit-transition-delay:.6s;transition-delay:.6s}
.indexmain-slogan-sub{margin-top:5px;overflow:hidden}
.indexmain-slogan-sub p{font-size:.875em;line-height:1.35;letter-spacing:.01em;-moz-transform:translate(0, -100%);-ms-transform:translate(0, -100%);-webkit-transform:translate(0, -100%);transform:translate(0, -100%);-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s;-moz-transition-delay:1.4s;-o-transition-delay:1.4s;-webkit-transition-delay:1.4s;transition-delay:1.4s}
.indexmain-slogan-award{display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;padding-top:5px;opacity:0;-moz-transform:translate(0, 10px);-ms-transform:translate(0, 10px);-webkit-transform:translate(0, 10px);transform:translate(0, 10px);-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s;-moz-transition-delay:2.2s;-o-transition-delay:2.2s;-webkit-transition-delay:2.2s;transition-delay:2.2s}
.indexmain-slogan-award img{height:30px;float:left;margin:5px 2px 0}
.indexmain-images li{-moz-transition:-moz-transform 8s,background-position 6s ease-in-out;-o-transition:-o-transform 8s,background-position 6s ease-in-out;-webkit-transition:-webkit-transform 8s,background-position 6s ease-in-out;transition:transform 8s,background-position 6s ease-in-out}
.indexmain-images li:nth-child(1){-moz-transform:scale(1.05);-ms-transform:scale(1.05);-webkit-transform:scale(1.05);transform:scale(1.05);background-position:50% 70%}
.indexmain-images li:nth-child(1).show-img{background-position:50% 40%;-moz-transform:scale(1.05);-ms-transform:scale(1.05);-webkit-transform:scale(1.05);transform:scale(1.05)}
.indexmain-images li:nth-child(2){-moz-transform: scale(1.2);-ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);background-position:50% 50%}
.indexmain-images li:nth-child(2).show-img{background-position:50% 80%;-moz-transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}
.indexmain-images li:nth-child(3){width: 110%;-moz-transform: translateX(-10%);-ms-transform: translateX(-10%);-webkit-transform: translateX(-10%);transform: translateX(-10%);background-position:0% 85%}
.indexmain-images li:nth-child(3).show-img{-moz-transform: translateX(0%);-ms-transform: translateX(0%);-webkit-transform: translateX(0%);transform: translateX(0%);}
.indexmain-slogan li:nth-child(1){top:45%;left:25%}
.indexmain-slogan li:nth-child(2){top:55%;left:unset;right:5%}
.indexmain-slogan li:nth-child(3){top:65%;left:36%}

@media screen and (max-width: 1200px){.indexmain{height:92vh}
.indexmain-images li:nth-child(1){-moz-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);background-position:50% 0%}
.indexmain-images li:nth-child(1).show-img{background-position:50% 20%;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.indexmain-images li:nth-child(2){-moz-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);background-position:50% 60%}
.indexmain-images li:nth-child(2).show-img{background-position:50% 80%;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.indexmain-images li:nth-child(3){-moz-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);background-position:0% 0%}
.indexmain-images li:nth-child(3).show-img{background-position:0% 65%;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.indexmain-slogan li:nth-child(1){top:45%;left:30%}}

@media screen and (max-width: 900px){.indexmain{height:70vh}
.indexmain-images li:nth-child(3){-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);background-position:60% 50%}
.indexmain-images li:nth-child(3).show-img{background-position:55% 50%;-moz-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2)}
.indexmain-images li:nth-child(2){-moz-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);background-position:0% 45%}
.indexmain-images li:nth-child(2).show-img{background-position:0% 100%;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.indexmain-slogan li:nth-child(1),.indexmain-slogan li:nth-child(2),.indexmain-slogan li:nth-child(3){top:50%;left:50%;right:unset;bottom:unset;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.indexmain-slogan-title{-webkit-justify-content:center;justify-content:center}
.indexmain-slogan-sub{text-align:center}
.indexmain-slogan-award{-webkit-justify-content:center;justify-content:center}}

@media screen and (max-width: 640px){
.indexmain-images li:nth-child(3){-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);background-position:65% 50%}
.indexmain-images li:nth-child(3).show-img{background-position:50% 50%;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.indexmain-images li:nth-child(1){-moz-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);background-position:50% 50%}
.indexmain-images li:nth-child(1).show-img{background-position:50% 65%;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.indexmain-images li:nth-child(2){-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);background-position:85% 50%}
.indexmain-images li:nth-child(2).show-img{background-position:75% 50%;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}}

.indexc{width:100%;float: left; margin:0;background-color: #f3f3f3}
.indexc-content{width:1300px;margin:80px auto}
.indexc-tx{width:40%;margin:0 30% 60px;letter-spacing: 0.1em;text-indent: -0.1em}
.info-zx{ width: 100%;float:left;font-size:26px;color:#000; text-align: center;margin: 0 0 30px;letter-spacing: 0.1em;text-indent: -0.1em}
.info-zx{opacity: 0;-moz-transform: translateY(-40px);-ms-transform: translateY(-40px);-webkit-transform: translateY(-40px);transform: translateY(-40px);-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;}
.info-zx.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.info-stx{width:100%;float:left;line-height:2em;margin: 0;font-size: 17px;color:#333;text-align: center;}
.info-stx{opacity: 0;-moz-transform: translateY(40px);-ms-transform: translateY(40px);-webkit-transform: translateY(40px);transform: translateY(40px);-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;}
.info-stx.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}

.webflow{width:100%; float:left;margin: 0 0 40px}img{vertical-align:middle;max-width:100%;display:inline-block}
.w-slider{text-align:center;clear:both;-webkit-tap-highlight-color:#0000;tap-highlight-color:#0000;background:#ddd;height:300px;position:relative}
.w-slider-mask{z-index:1;white-space:nowrap;height:100%;display:block;position:relative;left:0;right:0;overflow:hidden}
.w-slide{vertical-align:top;white-space:normal;text-align:left;width:100%;height:100%;display:inline-block;position:relative}
.w-slide h2{margin-top:20px;font-size:26px;line-height:1.2em;margin-bottom:10px;font-weight:500;background-color: #f3f3f3;letter-spacing: 0.1em;text-indent: -0.1em}
.w-slider-nav{z-index:2;text-align:center;-webkit-tap-highlight-color:#0000;tap-highlight-color:#0000;height:40px;margin:auto;padding-top:10px;position:absolute;inset:auto 0 0}
.w-slider-nav.w-round>div{border-radius:100%}
.w-slider-nav.w-num>div{font-size:inherit;line-height:inherit;width:auto;height:auto;padding:.2em .5em}
.w-slider-nav.w-shadow>div{box-shadow:0 0 3px #3336}
.w-slider-nav-invert{color:#fff}
.w-slider-nav-invert>div{background-color:#2226}
.w-slider-nav-invert>div.w-active{background-color:#222}
.w-slider-dot{cursor:pointer;background-color:#fff6;width:1em;height:1em;margin:0 3px .5em;transition:background-color .1s,color .1s;display:inline-block;position:relative}
.w-slider-dot.w-active{background-color:#fff}
.w-slider-dot:focus{outline:none;box-shadow:0 0 0 2px #fff}
.w-slider-dot:focus.w-active{box-shadow:none}
.w-slider-aria-label{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
.outer-section{justify-content:center;width:100%;display:flex;position:relative}
.h2{max-width:786px;margin-bottom:24px;}
.label{color:#6d6a68;align-self:flex-start;margin-bottom:4px;font-size:15px;font-weight:400;line-height:24px}
.label.featured-label{align-self:center}
.button{color:var(--primary);letter-spacing:.4px;background-color:#0000;border:1px solid #000;border-radius:0;padding:16px 32px;font-size:17px;font-weight:400;line-height:24px;transition:background-color .6s}
.button:hover{color:var(--white);background-color:#4e4a49}
.button{border:1px solid var(--primary);background-color:var(--white);color:var(--primary);transition:color .2s,border-color .2s}
.button.secondary:hover{border-color:var(--rust);color:#af4e29}
.button{margin-top:16px;display:block}
.featured-slider{background-color:#0000;width:100%;height:auto}
.featured-slider-collection-container,.featured-slider-collection-wrapper,.featured-slider-collection-item{height:100%}
.featured-slider-image{object-fit:cover;justify-content:center;align-items:center;width:100%;height:650px;display:flex;position:relative;overflow:hidden}
.featured-slider-title{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;}
.featured-slider-title h2{color:#111;text-decoration: none;}
.client-name{color:#444444;margin-top:4px;font-size:19px;font-weight:400}
.mrg-med-top{margin-top:40px}
.slide-nav{inset:600px 0% auto}

 .work-link{width:100%;float: left;padding-right: 10px;text-align: center}
.back-link{width:140px; height: 22px; font-weight: 500; position:relative;padding: 0;text-decoration:none;transition:color .2s,border .2s;cursor:pointer;display:inline-block;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; margin: 0 auto; line-height:22px;font-size: 14px;color: #b86242}
.back-link:hover{text-decoration: none;color:#913c1b;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.back-link:hover:after{right:-25px;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;}
.back-link:after{ transition:left .2s ease-in-out;position:absolute; top:3px;padding-left:0px;height:100%;right:-15px;margin-top: 0;
    background-image: url("../images/arrow-right.svg");background-size: 10px 17px;display: inline-block;width: 10px; height: 17px;content:"";transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;}

@media screen and (max-width: 1600px) {
.indexc-content{width:80%;margin:70px auto}
.indexc-tx{width:50%;margin:0 25% 50px;}
.featured-slider-image{height:600px;}
.slide-nav{inset:550px 0% auto}
}
@media screen and (max-width: 1200px) {
.indexc-content{width:86%;margin:60px auto}
.indexc-tx{width:55%;margin:0 22.5% 40px;}
.featured-slider-image{height:450px;}
.featured-slider-title h2{font-size:22px;}
.slide-nav{inset:400px 0% auto}
}
@media screen and (max-width: 980px) {
.indexc-content{width:90%;margin:50px auto}
.indexc-tx{width:70%; margin:0 15% 35px;}
.featured-slider-image{height:350px;}
.featured-slider-title h2{font-size:20px;}
.slide-nav{inset:300px 0% auto}
.w-slide h2{margin-top:15px;font-size:28px;}
.mrg-med-top{margin-top:30px}
.webflow{margin: 0 0 20px}
}
@media screen and (max-width: 767px) {
.indexc-content{margin:35px auto}
.indexc-tx{width:90%; margin:0 5% 25px;}
.info-zx{font-size:24px;margin: 0 0 13px;}
.info-stx{line-height:1.8em;}
.featured-slider-image{height:200px;}
.featured-slider-title h2{font-size:16px;}
.slide-nav{inset:160px 0% auto}
.webflow{margin: 0 0 15px}
.mrg-med-top{margin-top:20px}
.w-slide h2{margin-top:15px;font-size:20px;letter-spacing:0;text-indent:0}
.client-name{font-size:17px;}
}

.indexd{width:100%;float: left; margin:0;}
.indexd-content{width:90%;margin:80px auto}
.indexd-top{width:100%; float:left; margin:0 0 50px 0; text-align:center;}
.indexd-top .title{width:100%; float:left; margin:0;font-size:22px;font-weight:500; letter-spacing:0.1em}
.indexd-top .subtitle{width:100%; float:left; margin:0 0 20px 0;font-size:38px;line-height:1.2em; font-weight:400; color:#666}
.indexd-row{width:100%;float: left;}
@media screen and (max-width: 1600px) {
.indexd-content{width:90%;margin:70px auto}
}
@media screen and (max-width: 1200px) {
.indexd-content{margin:60px auto}
}
@media screen and (max-width: 980px) {
.indexd-content{margin:50px auto}
.indexd-top{margin:0 0 30px 0;}
}
@media screen and (max-width: 767px) {
.indexd-content{margin:30px auto}
.indexd-top{margin:0 0 20px}
.indexd-top .subtitle{margin:0 0 20px 0;font-size:28px;}
}

.gallery-container{width:1700px; margin:0 auto;}
@media screen and (max-width:1600px){.gallery-container{width:1200px;margin:0 auto;}}
@media screen and (max-width:1200px){.gallery-container{width:90%;}}

*,::after,::before{box-sizing:border-box}
.img-fluid{max-width:100%;height:auto}
.gallery{width:100%; float:left;padding: 0;margin: 0 auto;}
.gallery-item{position:relative;width:25%;padding: 0 5px;}
.gallery-item{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-item.show{opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
@media (min-width:581px){.gallery-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
@media (max-width:580px){.gallery-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
.gallery-box {overflow: hidden;position: relative;padding:0;margin-top:5px;margin-bottom:5px; color:#000;}
.gallery-box img{margin: 0;display: block}
.gallery-box .gallery-box-img {position: relative;overflow: hidden;}
.gallery-box .gallery-box-img:after {content: " ";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;
    -webkit-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
    -o-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);}
.gallery-box .gallery-box-img > img {-webkit-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    -o-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);transition:all 1s;}
.gallery-box:hover .gallery-box-img:after {background:rgba(0, 0, 0, 0.3);}
.gallery-box:hover .gallery-box-img > img {-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);transition:all 1s;}
.gallery-box:hover{ color:#bb5500;}
.gallery-wrap{width:100%;float: left; margin: 0;}
.gallery-item .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;font-size: 18px;font-weight: 400}
.gallery-item .view .tw{width: 100%; float: left; font-size:20px;letter-spacing: 0.1em;margin-bottom:5px}
.gallery-item .view .info{width: 100%; float: left; font-size: 15px;letter-spacing: 0.1em}
.gallery-item:hover .view{-webkit-transform: translateY(-35%);-moz-transform: translateY(-35%);transform: translateY(-35%);z-index: 3;opacity: 1;}

@media screen and (max-width: 1200px) {
.gallery-item .view .tw{font-size:18px;font-family: "Times New Roman";}
.gallery-item .view .info{font-size: 14px;}
}
@media only screen and (max-width: 980px) {
.gallery-item{width:50%;}
.gallery-item .view .tw{font-size:16px;}
.gallery-item .view .info{font-size: 13px;}
}
@media only screen and (max-width: 550px) {
.gallery-item{width:100%;padding: 0}
.gallery-item .view .tw{font-size:15px;}
.gallery-item .view .info{font-size: 13px;margin: -10px 0 0;}
}
.work-tx{width:80%;float:left;margin: 0 10%;font-size: 18px; color: #333; font-weight: 500;letter-spacing: 0.1em;text-indent: -0.1em; text-align: center;}
.work {float:left; width:80%; margin:90px 10% 80px; text-align: center;}
.work .work-item {width: calc((100% - 21%)/4);float: left;margin: 0; padding: 6px 10px; position: relative; border: 1px solid #ccc;line-height: 2.5em;}
.work .work-item:nth-child(2) {margin: 0 7%;}
.work .work-item:nth-child(3) {margin: 0 7% 0 0;}
.work .work-item:nth-child(4) {margin: 0;}
.itemtitle{ font-size: 16px;font-family: 'Noto Sans TC', sans-serif;font-weight:400; color: #111;}
.itemst{ font-size: 12px; color: #666;}
.work .work-item:hover{border: 1px solid #c8a402;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}

@media screen and (max-width: 1200px) {
.work-tx{width:85%;margin: 0 7.5%;}
.work {float:left; width:85%; margin:60px 7.5% 60px;}
.work .work-item {width: calc((100% - 15%)/4);margin: 0;}
.work .work-item:nth-child(2) {margin: 0 5%;}
.work .work-item:nth-child(3) {margin: 0 5% 0 0;}	
.work .work-item.show:nth-child(4) {margin: 0;}	
}
@media screen and (max-width: 980px) {
.work {width:90%; margin:60px 5%}
.work-tx{width:90%;margin: 0 5%;}
.work .work-item {width: calc((100% - 6%)/2);margin: 0 0 20px 0;}
.work .work-item:nth-child(2) {margin: 0 0 20px 6%;}
.work .work-item:nth-child(3) {margin: 0 6% 0 0;}	
.work .work-item.show:nth-child(4) {margin: 0;}
}
@media screen and (max-width: 767px) {
.work {width:90%; margin:35px 5%}
.work .work-item {width: calc((100% - 3%)/2); margin: 0 3% 10px 0;padding: 6px 8px; }
.work .work-item:nth-child(2) {margin: 0 0 10px 0;}
.work .work-item:nth-child(3) {margin: 0 3% 0 0;}	
.work .work-item:nth-child(4) {margin: 0;}	
.itemst{ font-size: 11px;}
}
.backbox{width: 100%; float: left; margin:0 0 60px;}
@media screen and (max-width: 767px) {
.backbox{margin:0 0 30px;}
}
.back{width:160px; text-align:center; margin:0 auto;transition: background-position 0.5s; }
.btn {font-family: "Montserrat", "Noto Sans TC", sans-serif;font-weight:500;
    position: relative;
    color: #111111;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 12px 25px 10px 30px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background-color: #ccc;
    width: 52px;
    height: 52px;
    transition: all 0.3s ease;
}
.btn span {
    position: relative;
    z-index: 1;
}
.btn svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #111111;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}
.btn:hover:before {
    width: 100%;
    background: #ccc;
}
.btn:hover svg {
    transform: translateX(0);
}
.btn:hover,
.btn:focus {
    color: #111111;
}
.btn:active {
    color: #111111;
    transform: scale(0.96);
}