@charset "utf-8";
/* CSS Document */

@import url("reset.css");
/*-font style-*/
@font-face{ font-family:"FiraSans"; src:url("FiraSans.woff"); format:("woff");}
@font-face{ font-family:"FiraSans-Book"; src:url("FiraSans-Book.woff"); format:("woff");}
@font-face{ font-family:"FiraSans-Bold"; src:url("FiraSans-Bold.woff"); format:("woff");}

body{ overflow-x: hidden; font-family:"Arial","微軟正黑體";}
body, html{ width: 100%; height: 100%;}

/*-Scrollbar Style-*/
::-webkit-scrollbar-track{ background-color:rgba(32,32,32,.5);}
::-webkit-scrollbar{ width:5px; background-color:rgba(32,32,32,.5);}
::-webkit-scrollbar-thumb{background-color:rgba(32,32,32,1);}

/* main */
main{ height:100%; margin:0 auto; }

.slideshow{ width: 100%; height: 100%; background-position: center center; background-attachment: fixed; background-repeat:repeat; background-size: cover; overflow: hidden;}

/* Content */
.content, .info, .inner{ min-height:100%; margin: 0 auto -60px;}/*-Sticky Footer-*/

/* index logo */
.logo{ width: 200px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: rotate(-45deg); z-index: 2}
.logo dl{ display: block; position: relative; height: 30px; cursor: pointer; margin: 30px 0;}
.logo dt{ display: inline-block; width: 30px; height: 35px; background: rgba(32,32,32,1); position: absolute; left: 0; top: 0; bottom: 0; 
	margin: auto; border-radius: 50% / 60% 60% 40% 40%; transform:rotate(90deg); transition:background 1s;}
.logo dd{ display: inline-block; font-family:"FiraSans","微軟正黑體"; width: 140px; height: 30px; background: rgba(32,32,32,1); position: absolute; left: 50px; top: 0; bottom: 0; 
	margin: auto; border-radius: 20px / 15px; font-size: 15px; line-height: 30px; transition:all 1s; 
	color: rgba(32,32,32,1); cursor: pointer; text-align: center; font-weight: 800; border-top: rgba(32,32,32,1) solid 1px;}
.logo dl:hover dt, .logo dl:hover dd{ background: rgba(255,255,255,1); }
.logo dl:hover dd{border-top: rgba(255,255,255,1) solid 1px;}
.logo dl:nth-child(2) dt:nth-child(1){ left: -30px; }
.logo dl:nth-child(2) dt:nth-child(2){ left: 20px}
.logo dl:nth-child(2) dd{ width: 190px}

.social{ position: absolute; height: 30px; z-index: 99; right: 15px; top: 10px;}
.social ul{}
.social li{ display: inline-block;}
.social li a{ display: block; width: 30px; height: 30px; }
.social li a:before{ content: ""; display: block; background: url(../images/facebook_Solid.svg); width: 30px; height: 30px; transition: all .5s;}
.social li a:hover:before{ background: url(../images/facebook_Color.svg); }
.social li:nth-child(2) a:before{ background:url(../images/instagram_Solid.svg);}
.social li:nth-child(2) a:hover:before{ background:url(../images/instagram_Color.svg);}

/* Overlay style */
.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999;}
.overlay:before{content: ""; display: block; width:200px; height: 30px; position: fixed; left: 20px; top: 25px; z-index: 100;
  background-color:rgba(255,255,255,1);
  -webkit-mask-image: url(../images/logo-s-b.png);
     -moz-mask-image: url(../images/logo-s-b.png); 
          mask-image: url(../images/logo-s-b.png);
  -webkit-mask-size: 100%; 
     -moz-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
     -moz-mask-repeat: no-repeat;
          mask-repeat: no-repeat;  
}
.overlay a.goindex{display: block; width:200px; height: 30px; position: fixed; left: 20px; top: 25px; z-index: 101;}
.item3:before{ background-color:rgba(32,32,32,1); }

.overlay .close{ width: 25px; height: 25px; position: fixed; right: 20px; top: 20px; overflow: hidden; border: none; text-indent: 200%; color: transparent; outline: none; z-index: 100; cursor: pointer; background: transparent; transform: rotate(0deg); transition: transform 1s;}
.overlay .close:before, .overlay .close:after { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; content: ' '; height: 25px; width: 2px; background-color:rgba(255,255,255,1); border-radius: 3px / 3px;}
.overlay .close:before { transform: rotate(45deg);}
.overlay .close:after { transform: rotate(-45deg);}
.overlay .close:hover{ transform: rotate(180deg);}
.item3 .close:before, .item3 .close:after { background-color:rgba(32,32,32,1);}

.overlay nav, 
.sub{ text-align: center; position: relative; top: 50%; height: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: auto;}
.sub{ top: 50%; height: 70%; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-height: 500px;} 
.overlay ul, 
.sub ul{ list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative;}
.overlay ul li, 
.sub ul li{ display: block; min-height: 45px; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 10%; height: calc(100% / 6); line-height: 23px; font-size: 15px; font-weight: 300; font-family:"FiraSans","微軟正黑體";}
.sub ul li{  height: calc(100% / 8);}
.sub ul li.title,
.sub ul li#trigger-item3{ font-size: 16px; font-family:"FiraSans-Book","微軟正黑體"; position: relative; color: rgba(32,32,32,1);}
.sub ul li.title::before{ content:""; position: absolute; left: 0; right: 0; bottom: 5px; margin: auto; width: 1px; height: 40%; background: rgba(32,32,32,1);}
.overlay ul li a, 
.sub ul li a{ position: relative;  display: inline-block; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; text-decoration: none; padding-bottom: 5px; letter-spacing: 3px;}
.sub ul li a{ color:rgba(32,32,32,.8); }
.overlay ul li a::before,
.sub ul li a::before{ content: ""; display: block; position: absolute; height: 1px; width:100%; height:1px; background: rgba(255,255,255,0);bottom: 0;left: 0; right: 0; margin: auto; transition: background .5s;}
.sub ul li a::before{ background: rgba(32,32,32,0); }
.sub ul li#trigger-item3{ cursor: pointer;}
.sub ul li#trigger-item3::before{ content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 50%; height: 1px; background: rgba(32,32,32,1); }
.overlay ul li a:hover::before{background: rgba(255,255,255,1);}
.sub ul li a:hover::before{ background: rgba(32,32,32,1); }
.item1 { background: rgba(153,168,163,1);}
.item2 { background: rgba(32,32,32,1);}
.item3 { background: rgba(255,255,255,1);}
.item3 nav{ max-width: 250px; text-align: left; margin: 0 auto; }
.item3 ul li{ color: rgba(0,0,0,1); padding-left: 30px; background-repeat: no-repeat; background-size:6%; font-size: 13px; background-position: 0 3px;}
.item3 ul li a{ color: rgba(0,0,0,1); font-size: 13px;  letter-spacing: 0px; border-bottom: rgba(0,0,0,0) solid 1px; transition: border .5s;}
.item3 ul li a:hover{ border-bottom: rgba(0,0,0,.7) solid 1px; }

.item3 ul li:nth-child(1){ background-image: url(../images/avatar.svg);}
.item3 ul li:nth-child(2){ background-image: url(../images/phone-call.svg); }
.item3 ul li:nth-child(3){ background-image: url(../images/envelope.svg); }
.item3 ul li:nth-child(4){ background-image: url(../images/star.svg); }
.item3 ul li:nth-child(5){ background-image: url(../images/placeholder.svg); }

/* scale */
.overlay-scale { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;}
.overlay-scale.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s,opacity 0.4s; transition: transform 0.4s, opacity 0.4s;}
@media screen and (max-height: 30.5em) {
	.overlay nav { height: 70%; font-size: 34px;}
	.overlay ul li { min-height: 34px;}
}
/* header */
header{ position: fixed !important; width:100%; height: 50px; padding: 5px 0; background: rgba(255,255,255,.95); z-index: 98; top:0; left:0;}
header h1 a{ display: block; width: 200px; height: 30px; position: absolute; left: 15px; top: 0; bottom: 0; margin: auto; z-index: 100; text-indent: -99999px; background-color:rgba(32,32,32,1);
  -webkit-mask-image: url(../images/logo-s-b.png);
     -moz-mask-image: url(../images/logo-s-b.png);
          mask-image: url(../images/logo-s-b.png);
  -webkit-mask-size: 100%; 
     -moz-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
     -moz-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
header .social{ top: 10px;}

.menu{}
.menu nav{ display: none; position:absolute; background: rgba(255,255,255,.9); width:100%; height:100%; top:0; z-index:99; opacity: 0;}
.menu nav div.closebox{ display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -2;}
.menuBtn { cursor: pointer; width: 30px; height: 25px; margin: auto; position: fixed; left: 0; right: 0; top: 25px; margin-right: auto !important;z-index: 102;}
.menuBtn i { background-color: rgba(32,32,32,1); border-radius: 2px; content: ''; display: block; width: 100%; height: 2px; }
.menuBtn i:nth-child(1) { -webkit-animation:outT 0.8s backwards; animation:outT 0.8s backwards; -webkit-animation-direction:reverse; animation-direction:reverse;}
.menuBtn i:nth-child(2) { margin: 3px 0; -webkit-animation:outM 0.8s backwards; animation:outM 0.8s backwards; -webkit-animation-direction:reverse;animation-direction:reverse; }
.menuBtn i:nth-child(3) { -webkit-animation:outBtm 0.8s backwards; animation:outBtm 0.8s backwards; -webkit-animation-direction:reverse;animation-direction:reverse; }
.menuBtn.is-active i:nth-child(1) { -webkit-animation:inT 0.8s forwards; animation:inT 0.8s forwards; }
.menuBtn.is-active i:nth-child(2) { -webkit-animation:inM 0.8s forwards; animation:inM 0.8s forwards; }
.menuBtn.is-active i:nth-child(3) { -webkit-animation:inBtm 0.8s forwards; animation:inBtm 0.8s forwards; }

.sub{}

/* animation */
@-webkit-keyframes inM{
  50%{-webkit-transform:rotate(0deg);}
  100%{-webkit-transform:rotate(135deg);}
}
@keyframes inM{
  50%{transform:rotate(0deg);}
  100%{transform:rotate(45deg);}
}
@-webkit-keyframes outM{
  50%{-webkit-transform:rotate(0deg);}
  100%{-webkit-transform:rotate(45deg);}
}
@keyframes outM{
  50%{transform:rotate(0deg);}
  100%{transform:rotate(45deg);}
}
@-webkit-keyframes inT{
  0%{-webkit-transform: translateY(0px) rotate(0deg);}
  50%{-webkit-transform: translateY(5px) rotate(0deg);}
  100%{-webkit-transform: translateY(5px) rotate(135deg);}
}
@keyframes inT{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(5px) rotate(0deg);}
  100%{transform: translateY(5px) rotate(135deg);}
}
@-webkit-keyframes outT{
  0%{-webkit-transform: translateY(0px) rotate(0deg);}
  50%{-webkit-transform: translateY(5px) rotate(0deg);}
  100%{-webkit-transform: translateY(5px) rotate(135deg);}
}
@keyframes outT{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(5px) rotate(0deg);}
  100%{transform: translateY(5px) rotate(135deg);}
}
@-webkit-keyframes inBtm{
  0%{-webkit-transform: translateY(0px) rotate(0deg);}
  50%{-webkit-transform: translateY(-5px) rotate(0deg);}
  100%{-webkit-transform: translateY(-5px) rotate(135deg);}
}
@keyframes inBtm{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(-5px) rotate(0deg);}
  100%{transform: translateY(-5px) rotate(135deg);}
}
@-webkit-keyframes outBtm{
  0%{-webkit-transform: translateY(0px) rotate(0deg);}
  50%{-webkit-transform: translateY(-5px) rotate(0deg);}
  100%{-webkit-transform: translateY(-5px) rotate(135deg);}
}
@keyframes outBtm{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(-5px) rotate(0deg);}
  100%{transform: translateY(-5px) rotate(135deg);}
}

/* container */
.container{ position: relative; height: 100%;}
.info{ display:flex; max-width:1500px; align-items:center; justify-content:center; padding:0 5px;}
.box{ width: 100%; }
.box:before, .inner:before{ content:""; display:block; height:60px;}
.box h1.title{ display: block; height:86px; font-size: 50px; font-family:"FiraSans","微軟正黑體"; line-height:50px; font-weight: normal; margin-bottom:20px; text-align: center;}
.box h1.title:after{ content:""; display:block; width:36px; height:36px; background-image: url(../images/logo-icon.svg); background-size:100%; margin:0 auto; padding:0;}


/*-Footer-*/
footer{ position:relative; clear:both; height: 60px; font-size: 15px; font-family:"FiraSans-Book","微軟正黑體"; color: rgba(32,32,32,1); line-height: 60px; text-align: center;}
footer b{ font-family: Arial, Helvetica, sans-serif;}
footer, .push{ height:60px;}/*-Sticky Footer-*/

/* us */
.us{}
.text{ color: rgba(32,32,32,1); margin: 0 10px;}
.text h2, .text h4{ display: block; font-size: 20px; line-height: 40px; max-width: 900px; font-family:"FiraSans","微軟正黑體"; font-weight: normal; margin:0 auto; text-align: center; font-weight: 400;}
.text h3{ display: block; text-align: center; line-height: 22px; font-size: 12px; color: rgba(192,192,192,1); font-weight: normal;}
.text p{ display: block; font-size: 13px; line-height: 30px; text-align:justify;}
/* us grid */
.us .grid{ overflow:auto; margin:40px 10px;}
.us .grid nav{ background: rgba(32,32,32,1); overflow: auto; }
.us .grid figure{ display: block; width: 25%; height: 19vw; max-height:300px; float: left; padding: 0; margin: 0; position: relative; overflow: hidden; background: rgba(32,32,32,1); transition:height 1s; }
.us .grid figure img{ height: 100%; position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto; transition:transform 1s, opacity 1s;}
.us .grid figure:nth-child(3) img{ left:auto; right: 0; }
.us .grid figure figcaption{ position: absolute; left: 0; top: 0;}
.us figure.effect-julia h2{ font-size: 18px; color: rgba(255,255,255,1); font-weight: 300; padding: 30px 0 5px 30px; font-family:"FiraSans","微軟正黑體"; }
.us figure.effect-julia p { display: inline-block; margin: 3px 0; color: rgba(255,255,255,1);text-transform: none; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-360px,0,0); transform: translate3d(-360px,0,0); font-size: 11px; -webkit-transform:font-size(0.91); letter-spacing:1px;}
.us figure.effect-julia div{ padding: 0 30px; }
.us figure.effect-julia p:first-child { -webkit-transition-delay: 0.25s; transition-delay: 0.25s;}
.us figure.effect-julia p:nth-of-type(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.us figure.effect-julia p:nth-of-type(3) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
.us figure.effect-julia p:nth-of-type(4) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
.us figure.effect-julia p:nth-of-type(5) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s;}
.us figure.effect-julia p:nth-of-type(6) { -webkit-transition-delay: 0.00s; transition-delay: 0.00s;}
.us figure.effect-julia:hover p:first-child { -webkit-transition-delay: 0s; transition-delay: 0s;}
.us figure.effect-julia:hover p:nth-of-type(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s;}
.us figure.effect-julia:hover p:nth-of-type(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
.us figure.effect-julia:hover p:nth-of-type(4) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
.us figure.effect-julia:hover p:nth-of-type(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.us figure.effect-julia:hover p:nth-of-type(6) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s;}
.us figure.effect-julia:hover img { opacity: 0.4; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1);}
.us figure.effect-julia:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}

/* award */
.award{ width: 100%; }
.timeline{ color: rgba(32,32,32,1);}
.timeline dl{ display: block; position: relative;}
.timeline dl:before{ content: ""; display: block; position: absolute; left: 0; right: 0; margin: auto; width: 2px; height: 100%; background: rgba(153,168,163,1);}
.timeline dl:after{ content: ""; display: block; width: 14px; height: 14px; background: rgba(153,168,163,1); border:rgba(255,255,255,1) solid 3px; border-radius: 50%; position: absolute; left: 0; right: 0; margin: auto; top: 0}
.timeline dt{ display: block; position: absolute;  width: 50%; text-align:right; height: 21px; line-height: 21px; font-size: 11px; letter-spacing: 3px; font-weight: 400; margin: 0 -20px; color: rgba(153,168,163,1);}
.timeline dd{ display: block; width: 50%; margin-left: 50%; }
.timeline dd h3{ display: block; height: 21px; line-height: 21px; padding: 0 20px; font-weight: normal; font-size: 18px; }
.timeline dd div{ padding: 20px 0 20px 20px; position: relative;}
.timeline dd div h5{ font-size: 13px; line-height: 30px; font-weight: normal; color: rgba(153,168,163,1);}
.timeline dd div p{ font-size: 12px; line-height: 23px; }
.timeline dl:nth-child(even) dd{ margin-left: 0; text-align: right; }
.timeline dl:nth-child(even) dd div{ padding: 20px 20px 20px 0; }
.timeline dl:nth-child(even) dt{ left: 50%; text-align: left; margin: 0 20px;}
.timeline dl div span{ display: block; position: absolute; width: 64px; height: 64px; left: -64px; top: 0; bottom: 0; margin: auto;}
.timeline dl div span img{ display: block; height: 45%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-filter:grayscale(1); filter:grayscale(1);}
.timeline dl:nth-child(even) div span{ left: auto; right: -64px;}

/* coop */
.coop{}
.coop ul{ overflow: auto;}
.coop li{ display: block; float: left; width: 20%; height: 160px; position: relative; overflow: hidden;}
.coop li img{ width: 90%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-filter:grayscale(1); filter:grayscale(1);}

/* in / out*/ 
.filter{ margin: 10px; overflow: auto; text-align: left;}
.filter button{ border: none; display: inline-block; font-size: 13px; cursor: pointer; margin-right: 10px; position: relative; padding:0 2px;}
.filter button:before{ content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width:100%; height: 1px; background: rgba(0,0,0,.7); transition: width 1s;}
.filter button.active:before, .filter button:hover:before{ width: 0%; }
.filter button.active{ color: rgba(153,168,163,1);}
.project{}
.project .grid { position: relative; clear: both; list-style: none; text-align: center; overflow: auto;}
.project .grid figure { position: relative; float: left; overflow: hidden; margin: 7px 0.5%; width: 32.333333%; height: 23vw; max-height:350px; background: rgba(32,32,32,1); text-align: center; cursor: pointer; transition:height 1s; z-index: 1;}
.project .grid figure img { position: absolute; display: block; height: 120%; opacity: 0.8; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto;}
.project .grid figure figcaption { padding: 20px; color: rgba(255,255,255,1); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.project .grid figure figcaption::before,
.project .grid figure figcaption::after { pointer-events: none;}
.project .grid figure figcaption,
.project .grid figure figcaption > a { position: absolute; top: -100%; left: -100%; bottom: -100%; right: -100%; margin: auto; width: 100%; height: 100%;}
.project .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0;}
.project .grid figure h2 { display: block; letter-spacing: 1px; font-weight: normal; font-size: 18px; ; position: absolute; bottom: 0; width:100%; text-align: center;}
.project .grid figure h2 span{ display: inline-block; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 5px; transition: border .5s;}
.project .grid figure p { letter-spacing: 1px; font-size: 13px; padding: 5px;}
figure.effect-jazz:hover { background: -webkit-linear-gradient(-45deg, #f1e2a4 0%,rgba(32,32,32,1) 100%); background: linear-gradient(-45deg, #f1e2a4 0%,rgba(32,32,32,1) 100%);}
figure.effect-jazz img { opacity: 0.8;}
figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-jazz figcaption::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; content: ''; opacity: 0; -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1); transform: rotate3d(0,0,1,45deg) scale3d(1,0,1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
figure.effect-jazz h2,
figure.effect-jazz p { opacity: 1;}
figure.effect-jazz div{ position: absolute; height: 1px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; }
figure.effect-jazz h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;}
figure.effect-jazz p { text-transform: none; opacity: 0;}
figure.effect-jazz:hover img { opacity: 0.5; -webkit-transform: scale3d(1.05,1.05,1); transform: scale3d(1.05,1.05,1);}
figure.effect-jazz:hover figcaption::after { opacity: 1; -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1); transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);}
figure.effect-jazz:hover h2,
figure.effect-jazz:hover p { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1);}
figure.effect-jazz:hover h2 span{ border-bottom: 1px solid rgba(255,255,255,0); }

.inner{ overflow: auto; padding: 0 10px;}
.item{ overflow: hidden; }
.imgshow{ overflow: auto;}
.slider{  width: 70%; float: left; transition: width 1s;}
.intro{ float: right; width: 30%; position: relative;}
.intro:before{ content: ""; display: block; width: 2px; height: 100%; background: rgba(32,32,32,1); position: absolute; left: 20px; top: 0; }

.intro section{ padding: 0 20px 0 30px; margin: 0 0 0 30px; }
.intro section h1{ display: block; font-size: 18px; font-family:"FiraSans","微軟正黑體"; font-weight: normal; line-height: 20px; margin-bottom: 10px; color: rgba(32,32,32,1);}
.intro section h2{ display: block; font-size: 12px; font-weight:normal; line-height: 20px; margin-bottom: 10px; color: rgba(32,32,32,1);}
.intro section p{ display: block; color:#999; font-size: 12px; line-height: 23px;}
.intro section dl{ display: block; overflow: auto; padding: 2px 0;}
.intro section dl dt,
.intro section dl dd{ display: block; float: left; font-size: 12px; color:#999; line-height: 20px;}
.intro section dl dt{ width: 60px; position: relative;}
/*.intro section dl dt:before{ content: ""; display: block; position: absolute; background: #999; width: 1px; height:12px; right: 10px; top: 0; bottom: 0; margin: auto; }*/
.intro section nav{ display: block; width: 100px; height: 30px; position: absolute; right: 10px; bottom: 0; margin: auto; text-align: right;}
.intro section nav a{ display: inline-block; width: 30px; height: 30px; position: relative;}
.intro section nav a.back:before,
.intro section nav a.next:before{ content: ""; display: block; width: 10px; height: 10px; border-left: rgba(32,32,32,1) solid 2px; border-top: rgba(32,32,32,1) solid 2px; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); transition: all 1s}
.intro section nav a.back:after,
.intro section nav a.next:after{ content: ""; display: block; width: 80%; height: 2px; position: absolute;top: 0; bottom: 0; left: 0; margin: auto; background-color: rgba(32,32,32,1); transition: all 1s;}
.intro section nav a.next:before{ border:none; border-right: rgba(32,32,32,1) solid 2px; border-bottom: rgba(32,32,32,1) solid 2px; left: auto; right: 0;}
.intro section nav a.next:after{ left: auto; right: 0; }
.intro section nav a.list{ width: 24px; height: 24px; padding: 3px; }
.intro section nav a.list i{ display: block; float: left; width: 4px; height: 4px; background-color: rgba(32,32,32,1); margin: 2px; transition:all 1s;}
.intro section nav a.list:hover i,
.intro section nav a.back:hover:after,
.intro section nav a.next:hover:after{ background:rgba(153,168,163,1); }
.intro section nav a.back:hover:before,
.intro section nav a.next:hover:before{ border-color: rgba(153,168,163,1); }

.other{ clear: both; padding: 0; margin: 60px 0; overflow: auto; font-size: 13px; color: rgba(32,32,32,1); line-height: 20px;}
.other img{ max-width: 100%; max-height: 100%; }

.imgslider{ width: 70%; float: left; position: relative; overflow: hidden;}
#touchSlider { width:100%; margin:0 auto; position:relative; overflow:hidden; }
#touchSlider ul { width:99999px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider ul li { float:left; width:100%;}
#touchSlider ul li div{ position: relative; width: 100%; height: 100%; background: rgba(32,32,32,1); }
#touchSlider ul li div img{ display: block; max-width: 100%; max-height: 100%; position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto;}
.imgslider ul li div a.various{ position: absolute; right: 5px; top: 15px; color: rgba(255,255,255,1); border-bottom:none; background: rgba(153,168,163,.7); transition:all .5s; border-radius: 3px; padding: 3px 15px;
  /*-webkit-animation: flicker 1s linear .1s infinite alternate;  Safari 4.0 - 8.0 
  animation: flicker 1s linear .1s infinite alternate;*/ }
.imgslider ul li div a.various:before{ content: "before and after" ;}
.imgslider ul li div a.various:hover{ background: rgba(96,104,101,1);}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes flicker {
    from {background: rgba(153,168,163,.7);}
    to {background: rgba(153,168,163,1); }
}
/* Standard syntax */
@keyframes flicker {
    from {background: rgba(153,168,163,.7); }
    to {background: rgba(153,168,163,1); }
}

.btn_area {}
.btn_area button { display:block; position: absolute; top: 0; bottom: 0; margin: auto; border:none; opacity: 0; width: 30px; height: 30px; cursor: pointer; transition: all .5s;}
.btn_area button.btn_prev { left: -30px; text-indent: -999999px;
background-color:rgba(255,255,255,1);  
  -webkit-mask-image: url(../images/back.svg);
     -moz-mask-image: url(../images/back.svg);
          mask-image: url(../images/back.svg);
}
.btn_area button.btn_next { right: -30px; text-indent: -999999px;
background-color:rgba(255,255,255,1); 
  -webkit-mask-image: url(../images/next.svg);
     -moz-mask-image: url(../images/next.svg);
          mask-image: url(../images/next.svg);
}
.imgslider:hover .btn_area button{ opacity: 1; }
.imgslider:hover .btn_area button.btn_prev{ left: 10px; }
.imgslider:hover .btn_area button.btn_next{ right: 10px; }


.caption{ position: absolute; max-width: 80%; left: 0; bottom: 0;}
.caption span{ display: block; padding: 10px; margin: 10px; color: rgba(255,255,255,1); font-size: 13px;}

#count{ position: absolute; color: rgba(255,255,255,1);  padding: 10px; font-size: 13px; font-family:"FiraSans-Book","微軟正黑體"; right: 10px; bottom: 10px;}

.inline{ color: rgba(255,255,255,1);}
.inline section{ text-align:justify; overflow: auto; max-width: 900px;}
.inline section div{ float: left; width: 40%; margin:0 5%;}
.inline h1{ font-size: 18px; font-weight: normal;}
.inline p{ font-size: 12px; line-height: 20px; }

.cf{ margin-top: 20px; }
.various{ display: inline-block; color: rgba(32,32,32,1); font-size: 13px; cursor: pointer; transition: all .5s; text-decoration: none; line-height: 30px; border-bottom: rgba(32,32,32,1) solid 1px; margin-right: 10px; margin-bottom: 8px;}
.various:hover{ border-color: rgba(153,168,163,1); color: rgba(153,168,163,1);}


/*404*/
.error{ font-family:"FiraSans-Book","微軟正黑體"; text-align: center; color: rgba(192,192,192,1);}
.error h6{ display: block; font-size: 50px; letter-spacing: 3px;}
.error div{}
.error div p{ display: inline-block; font-size: 250px; }
.error div p:nth-child(2){width: 180px; height: 180px; 
background-color:rgba(192,192,192,1);
  -webkit-mask-image: url(../images/logo-b.svg);
     -moz-mask-image: url(../images/logo-b.svg);
          mask-image: url(../images/logo-b.svg);
  -webkit-mask-size: 90%;
     -moz-mask-size: 90%;
          mask-size: 90%;
  -webkit-mask-repeat: no-repeat;
     -moz-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50%;
     -moz-mask-position: 50%;
          mask-position: 50%;}

.error span{ display: block; font-size: 15px; }
.error a{ display: inline-block; padding:5px 0; color: rgba(192,192,192,1); text-decoration: none; margin: 15px; transition: all 1s; border-bottom: rgba(192,192,192,1) solid 1px;}
.error a:hover{ border-bottom: rgba(32,32,32,1) solid 1px; color: rgba(32,32,32,1)}

/*process*/
.process{ font-family:"FiraSans-Book","微軟正黑體"; }
.process nav{ display: block; overflow: auto; margin-top: 10px;}
.process div.item{ width: 25%; float: left;}
.process div.item dl{ display: block; text-align: center; position: relative; 
}
.process div.item dl:before{ content: ""; display: block; width: 84px; height: 84px; border-radius: 50%; background-color:rgba(153,168,163,1); position: absolute; left: 0; right: 0; top: 27px; margin: auto; border:3px solid rgba(153,168,163,1);}
.process div.item dl h6{ display: block; font-size: 13px; height:20px; line-height: 20px; color: rgba(153,168,163,1);  font-weight: bold; margin-bottom: 10px; overflow: hidden;}
.process div.item dt{ display: inline-block; width: 84px; height: 84px; position: relative; background-color:rgba(255,255,255,1); transition: all 1s;
-webkit-mask-size: 40%;
     -moz-mask-size: 40%;
          mask-size: 40%;
  -webkit-mask-repeat: no-repeat;
     -moz-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50%;
     -moz-mask-position: 50%;
          mask-position: 50%;}
.process div.item dd{ transition: all 1s; margin-top: 5px;}
.process div.item dd.L1{ display: block; opacity: 1;}
.process div.item dd.L2{ opacity: 0;}
.process div.item dd p{ display: block; font-size: 12px; line-height: 23px; color: rgba(32,32,32,1)}

.process div.item:hover dl:before{ background-color:rgba(153,168,163,0); }
.process div.item:hover dt{ background-color:rgba(153,168,163,1); }



/* Start state */
.animated-modal {
  max-width: 550px;
  border-radius: 4px;
  overflow: hidden;
  
  transform: translateY(-50px);
  transition: all .7s;
}

.animated-modal h2,
.animated-modal p {
  transform: translateY(-50px);
  opacity: 0;
  
  transition-property: transform, opacity;
  transition-duration: .4s;
}

/* Final state */
.fancybox-slide--current .animated-modal,
.fancybox-slide--current .animated-modal h2,
.fancybox-slide--current .animated-modal p {
  transform: translateY(0);
  opacity: 1;
}

/* Reveal content with different delays */
.fancybox-slide--current .animated-modal h2 {
  transition-delay: .1s; font-size: 18px; line-height: 30px; font-weight: normal; font-family:"FiraSans-Book","微軟正黑體";
}

.fancybox-slide--current .animated-modal p {
  transition-delay: .3s; font-size: 13px; line-height: 23px; color: rgba(32,32,32,1);
}

/* RWD */
/* PC */
@media(max-width:1280px){
	.intro{ width: 35%; }
  .slider, .imgslider{ width: 65%; }
  .us .grid figure{ height:22vw;}
}
/* IPAD */
@media(max-width:960px){
	.text h1{ font-size: 50px;}
	.text h2{ font-size: 20px; line-height: 40px; max-width: 700px;}
	.text p{ font-size: 13px; line-height: 30px; text-align:justify;}
  .coop li{ width: 33.333333%; }
  .project .grid figure h2{ font-size: 16px; }
  .project .grid figure{ width: 48%; height:35vw;}
  .us .grid figure{ width:50%; height:35vw;}
  .us .grid figure:nth-child(3) img{ left:-100%; right: -100%; }
  
  .intro{ height: auto !important; margin: 30px 0 60px 0;}
  .intro:before{ left: 0; }
  .intro section{ margin: 0; }
  .intro, .slider, .imgslider{ float: none; width: auto;}
  .imgshow{ overflow: hidden; }
  .intro section nav{ bottom: -60px; right: 0; left: 0; width: 100%; overflow: hidden;}
  .intro section nav a.back{ float: left; margin-left: 5px;}
  .intro section nav a.next{ float: right; margin-right: 5px;}
  .intro section nav a.list{ position: absolute; left: 0; right: 0; margin: auto; }

  #count, .caption span{font-size: 12px;}
  .logo dd{ color: rgba(255,255,255,.2); }
  .logo dd:hover{ color: rgba(32,32,32,1); }
  
  .inline section{ max-width: 400px; }
  .inline section div{ float: none; margin: 0 0 50px 0; width: auto;}

  .filter{ text-align: center; }
}
/* IPAD */
@media(max-width:800px){
	header h1 a{ width:30px; height: 30px;
  background-color:rgba(32,32,32,1); 
  -webkit-mask-image: url(../images/logo-b.svg);
     -moz-mask-image: url(../images/logo-b.svg); 
          mask-image: url(../images/logo-b.svg);
  -webkit-mask-size: 100%; 
     -moz-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
     -moz-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  }
	.text h2, .text p{ max-width: 800px;}
	
  
  .timeline dl:before{ right: auto; left: 15%; }
  .timeline dl:after{ right: auto; left: 15%; margin: 0 -9px;}
  .timeline dt{ width: 15%; text-align: center; margin: 0}
  .timeline dd{ width: 85%; margin-left: 15%; }
  .timeline dl:nth-child(even) dd{ margin-left: 15%; text-align: left; }
  .timeline dl:nth-child(even) dd div{ padding: 20px 0 20px 20px; }
  .timeline dl:nth-child(even) dt{ left: auto; text-align: center; margin: 0;}
  .timeline dl:nth-child(even) div span{ left: -64px; right: auto; }
  .coop li{ width: 50%; }
  .project .grid figure{ width: 98%; height: 60vw; max-height: none;}
  
  figure.effect-jazz p{ opacity: 1; }

  .process div.item{ width: 50%; }
}
@media(max-width:680px){
  .us .grid figure{ width:100%; height:70vw;}
  .filter{ text-align: center; }
}
/* PHONE */
@media(max-width:480px){
	.overlay:before{ width:30px; height: 30px; top: 10px; left: 10px; background-color:rgba(255,255,255,1);
  -webkit-mask-image: url(../images/logo-b.svg);
     -moz-mask-image: url(../images/logo-b.svg);
          mask-image: url(../images/logo-b.svg);
  -webkit-mask-size: 100%; 
     -moz-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
     -moz-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  }
  .overlay a.goindex{width:40px; height: 40px; top: 0; left: 0;}
	.overlay .close{top: 10px; right: 10px;}
	.item3:before{ background-color:rgba(32,32,32,1); }
  .text h2{ font-size: 18px; }
	.text h2, .text p{ text-align:justify;}
	
  .coop li{ width: 100%; }
  
  .project .grid figure{ max-height: auto;}

  header ul.menu li{ margin: 0 10px; }
  .filter{ text-align: center; }

  .fb_dialog{ right: 10px !important; bottom: 10pt !important; }
  .fb_customer_chat_bubble_animated_no_badge{ transform: scale(0.8);}
  
  .error h6{ font-size: 40px; }
  .error div p{ display: inline-block; font-size: 170px; }
  .error div p:nth-child(2){width: 120px; height: 120px; }

  .process div.item{ width: 100%; }
}