@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(fonts.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }
html ol, html ul, html li { list-style: none; }
html table { border-collapse: collapse; border-spacing: 0; }
html caption, html th, html td { text-align: left; font-weight: normal; vertical-align: middle; }
html q, html blockquote { quotes: none; }
html q:before, html q:after, html blockquote:before, html blockquote:after { content: ""; content: none; }
html img { border: none; }
html article, html aside, html details, html figcaption, html figure, html footer, html header, html hgroup, html main, html menu, html nav, html section, html summary { display: block; }
html :link, html :visited, html ins { text-decoration: none; }
html *, html *:after, html *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html .clearfix { zoom: 1; }
html .clearfix:before, html .clearfix:after { content: " "; display: table; }
html .clearfix:after { clear: both; }

.unreset address, .unreset blockquote, .unreset dd, .unreset div, .unreset dl, .unreset dt, .unreset fieldset, .unreset form, .unreset frame, .unreset frameset, .unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset noframes, .unreset ol, .unreset p, .unreset ul, .unreset center, .unreset dir, .unreset hr, .unreset menu, .unreset pre { display: block; }
.unreset li { display: list-item; }
.unreset head { display: none; }
.unreset col { display: table-column; }
.unreset colgroup { display: table-column-group; }
.unreset td, .unreset th { display: table-cell; }
.unreset caption { display: table-caption; }
.unreset th { font-weight: bolder; text-align: center; }
.unreset caption { text-align: center; }
.unreset body { margin: 8px; }
.unreset h1 { font-size: 2em; margin: 0.67em 0; }
.unreset h2 { font-size: 1.5em; margin: 0.75em 0; }
.unreset h3 { font-size: 1.17em; margin: 0.83em 0; }
.unreset h4, .unreset p, .unreset blockquote, .unreset ul, .unreset fieldset, .unreset form, .unreset ol, .unreset dl, .unreset dir, .unreset menu { margin: 1.12em 0; }
.unreset h5 { font-size: .83em; margin: 1.5em 0; }
.unreset h6 { font-size: .75em; margin: 1.67em 0; }
.unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset b, .unreset strong { font-weight: bolder; }
.unreset blockquote { margin-left: 40px; margin-right: 40px; }
.unreset i, .unreset cite, .unreset em, .unreset var, .unreset address { font-style: italic; }
.unreset pre, .unreset tt, .unreset code, .unreset kbd, .unreset samp { font-family: monospace; }
.unreset pre { white-space: pre; }
.unreset button, .unreset textarea, .unreset input, .unreset select { display: inline-block; }
.unreset big { font-size: 1.17em; }
.unreset small, .unreset sub, .unreset sup { font-size: 0.83em; }
.unreset sub { vertical-align: sub; }
.unreset sup { vertical-align: super; }
.unreset s, .unreset strike, .unreset del { text-decoration: line-through; }
.unreset hr { border: 1px inset; }
.unreset ol, .unreset ul, .unreset dir, .unreset menu, .unreset dd { margin-left: 40px; }
.unreset ol, .unreset ol li { list-style-type: decimal; }
.unreset ol ul, .unreset ul ol, .unreset ul ul, .unreset ol ol { margin-top: 0; margin-bottom: 0; }
.unreset ul, .unreset ul li { list-style-type: disc; }
.unreset u, .unreset ins { text-decoration: underline; }
.unreset br:before { content: "\A"; white-space: pre-line; }
.unreset center { text-align: center; }
.unreset :link, .unreset :visited { text-decoration: underline; }
.unreset :focus { outline: thin dotted invert; }

#Service ul::after, #Portfolios section::after, .Work-One::after, .Work-Two::after, #Clients ul::after, footer::after { clear: both; content: ''; display: block; visibility: hidden; height: 0; }

#Topbox, #Service li, #Service li span { -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }

#Topbox .menu { -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }

body { font-family: "Open Sans", "微軟正黑體", "Microsoft JhengHei", sans-serif; font-size: 15px; line-height: 24px; }

article { display: block; position: relative; overflow: hidden; }

img { max-width: 100%; }

.mv { -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }

.gogotop { background: #29ABE3; width: 80px; height: 38px; text-align: center; position: fixed; bottom: 15%; right: -100%; z-index: 100; border: 5px solid #eee; border-right: none; -moz-border-radius: 50px 0px 0px 50px; -webkit-border-radius: 50px; border-radius: 50px 0px 0px 50px; }
.gogotop a { color: #fff; display: block; }
.gogotop:hover { background: #06c; }

#Topbox { width: 100%; display: block; position: fixed; top: 0; z-index: 100; padding-top: 2%; }
#Topbox .logo { display: block; margin: 0% 0 0 5%; }
#Topbox .logo-no { -moz-animation: fin-no 0.5s; -webkit-animation: fin-no 0.5s; animation: fin-no 0.5s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
#Topbox .logo-on { -moz-animation: fin 0.5s; -webkit-animation: fin 0.5s; animation: fin 0.5s; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
#Topbox .menuBtn { width: 40px; position: absolute; top: 30%; right: 5%; z-index: 101; transition: top 300ms; }
#Topbox .menuBtn span, #Topbox .menuBtn:before, #Topbox .menuBtn:after { display: block; content: ""; transition: all 300ms; background-color: #00a5ca; margin: 7px; width: 26px; height: 4px; text-indent: -100%; overflow: hidden; white-space: nowrap; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); }
#Topbox .active { transform: rotate(180deg); }
#Topbox .active span { background-color: transparent; box-shadow: none; }
#Topbox .active:before, #Topbox .active:after { background-color: #444; }
#Topbox .active:before { transform: translateY(11px) rotate(-45deg); }
#Topbox .active:after { transform: translateY(-11px) rotate(45deg); }
#Topbox .menu { width: 100%; position: fixed; padding-top: 2%; padding-bottom: 1%; background: rgba(255, 255, 255, 0.95); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); }
#Topbox .menu nav { display: block; margin: 2% 0 0 5.5%; }
#Topbox .menu nav a { color: #666; margin-right: 5%; }
#Topbox .menu nav a:hover { color: #72c0d9; }
#Topbox .menu nav a:first-child { display: none; }
#Topbox .open { top: 0%; }
#Topbox .close { top: -100%; }

@-moz-keyframes fin { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fin { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fin { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fin-no { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-webkit-keyframes fin-no { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes fin-no { 0% { opacity: 1; }
  100% { opacity: 0; } }
#Slideshow { width: 100%; height: 0; padding-bottom: 56.27198%; overflow: hidden; position: relative; }
#Slideshow iframe { width: 100%; height: 100%; position: absolute; }
#Slideshow .Scrolldown { position: absolute; left: calc(50% + 18px); z-index: 100; color: #fff; font-size: 36px; opacity: .7; -moz-animation: fin 3s infinite; -webkit-animation: fin 3s infinite; animation: fin 3s infinite; }

@-moz-keyframes fin { 0% { opacity: .5; }
  50% { opacity: 1; }
  100% { opacity: .5; } }
@-webkit-keyframes fin { 0% { opacity: .5; }
  50% { opacity: 1; }
  100% { opacity: .5; } }
@keyframes fin { 0% { opacity: .5; }
  50% { opacity: 1; }
  100% { opacity: .5; } }
article header { width: 100%; display: block; font-size: 60px; line-height: 60px; font-family: 'Roboto', sans-serif; font-weight: 100; text-align: center; margin: 142px auto 50px auto; }

/*#About { width: 100%; max-width: 1280px; margin: 0 auto; }
#About .about-s1 { width: 100%; display: block; text-align: left; margin: 0 auto; }
#About .about-s2 { width: 100%; text-align: center; margin-top: 142px; }
#About .about-s2 div:first-child { display: block; }
#About .about-s2 div:last-child { display: none; }*/
#About1 , #About2 { width: 100%; max-width: 1280px; margin: 0 auto; }
#About1 .about-s1 { width: 100%; display: block; text-align: left; margin: 0 auto; }

#About1 .about-s1  p{margin:20px 0;line-height:1.8;text-align: justify;}
#About1 .about-s1  p b{font-weight: bold;}
#About1-pic {margin-top: 142px;}
#About2 .about-s2 { width: 100%; text-align: center; margin-top: 142px; }
#About2 .about-s2 div:first-child { display: block; }
#About2 .about-s2 div:last-child { display: none; }

#Service { background: url(../images/service-bg.jpg) no-repeat center bottom; background-attachment: fixed; position: relative; overflow: hidden; }
#Service ul { display: block; width: 100%; max-width: 1280px; margin: 5% auto 20% auto; }
#Service li { display: block; width: 25%; float: left; text-align: center; margin-bottom: 5%; padding: 0 2%; }
#Service li img { max-width: 48px; }
#Service li a { color: #555; }
#Service li:after { content: ''; width: 60%; display: block; margin: 8px auto; }
#Service li:nth-child(1):after { border-bottom: 2px solid #7bc5dc; }
#Service li:nth-child(2):after { border-bottom: 2px solid #d7a6d0; }
#Service li:nth-child(3):after { border-bottom: 2px solid #a6d7d3; }
#Service li:nth-child(4):after { border-bottom: 2px solid #b2a6d7; }
#Service li:nth-child(5):after { border-bottom: 2px solid #abd7a6; }
#Service li:nth-child(6):after { border-bottom: 2px solid #dccd7b; }
#Service li:nth-child(7):after { border-bottom: 2px solid #bbbbbb; }
#Service li:nth-child(8):after { border-bottom: 2px solid #dc9d7b; }
#Service li span { display: block; width: 80%; position: absolute; top: 60%; left: 10%; z-index: 10; padding: 5%; text-align: left; opacity: 0; }
#Service li a:hover + span { opacity: 1; }

#Portfolios { width: 100%; max-width: 1280px; margin: 0 auto; }
#Portfolios section { display: block; margin: 5% 0 0 0; }

.Work-One { padding-left: calc(2.075% - 5px); }
.Work-One img { display: block; }
.Work-One .workA, .Work-One .workB, .Work-One .workC { float: left; display: block; }
.Work-One .workA { width: 35.85%; margin-right: 10px; }
.Work-One .workB { width: 60%; }
.Work-One .workC { width: calc(95.85% + 10px); height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; margin: 10px 0; }
.Work-One .workA-box1 { width: 100%; max-width: 512px; height: 100%; max-height: 512px; float: left; margin-bottom: 10px; }
.Work-One .workA-box2 { width: 50%; max-width: 256px; height: 100%; max-height: 256px; float: left; padding: 0 5px 0 0; }
.Work-One .workA-box3 { width: 50%; max-width: 256px; height: 100%; max-height: 256px; float: left; padding: 0 0 0 5px; }
.Work-One .workB-box1 { width: 32.8%; max-width: 256px; height: 100%; max-height: 256px; float: left; }
.Work-One .workB-box2 { width: 67.2%; max-width: 515px; height: 100%; max-height: 256px; float: left; padding: 0 0 0 10px; }
.Work-One .workB-box3 { width: 100%; max-width: 768px; height: 0; padding-bottom: 56.25%; float: left; position: relative; overflow: hidden; margin-top: 10px; }
.Work-One iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }

.Work-Two { padding-left: calc(2.075% - 5px); }
.Work-Two img { display: block; }
.Work-Two .workD, .Work-Two .workE, .Work-Two .workF { float: left; display: block; }
.Work-Two .workD { width: 60%; }
.Work-Two .workE { width: 35.95%; margin-left: 10px; }
.Work-Two .workF { width: calc(95.95% + 10px); height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; margin: 10px 0; }
.Work-Two .workD-box1 { width: 100%; max-width: 768px; height: 0; padding-bottom: 56.25%; float: left; position: relative; overflow: hidden; margin-bottom: 10px; }
.Work-Two .workD-box2 { width: 32.8%; max-width: 256px; height: 100%; max-height: 256px; float: left; }
.Work-Two .workD-box3 { width: 67.2%; max-width: 515px; height: 100%; max-height: 256px; float: left; padding: 0 0 0 10px; }
.Work-Two .workE-box1 { width: 50%; max-width: 256px; height: 100%; max-height: 256px; float: left; padding: 0 5px 0 0; }
.Work-Two .workE-box2 { width: 50%; max-width: 256px; height: 100%; max-height: 256px; float: left; padding: 0 0 0 5px; }
.Work-Two .workE-box3 { width: 100%; max-width: 512px; height: 100%; max-height: 512px; float: left; margin-top: 10px; }
.Work-Two iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }

#Clients { width: 100%; max-width: 1280px; margin: 0 auto; }
#Clients .world { width: 100%; text-align: center; margin: 5% auto; }
#Clients ul { display: block; width: 100%; margin: 0 auto; }
#Clients ul li { display: block; float: left; width: 20%; text-align: center; margin-bottom: 2%; }
#Clients ul li a:hover { opacity: .7; }

#Contact { margin-top: 142px; }
#Contact #map { width: 100%; height: 400px; display: block; }
#Contact #map iframe { width: 100%; height: 100%; display: block; }
#Contact header { margin-top: 170px; }
#Contact section { width: 100%; display: block; text-align: center; margin: 2% 0; }
#Contact a { color: #555; }

footer { display: block; width: 90%; margin: 5% auto 2% auto; border-top: 1px solid #666; padding-top: 1%; }
footer ul { display: block; float: left; width: 50%; }
footer ul li { display: block; float: left; margin-right: 1%; }
footer ul li a:hover { opacity: .7; }
footer .Information { display: block; float: right; font-size: 13px; color: #666; text-align: right; }
footer .Information span { font-size: 12px; color: #999; display: block; }
footer .Information span a { color: #ccc; }

@media (max-width: 1280px) { #About .about-s3 { height: 0; padding-bottom: 44.545454%; }
  #Clients .world { width: 98%; }
  #Clients ul { width: 90%; } }
@media (max-width: 1024px) { #Service li span { width: 100%; left: 0%; font-size: 13px; } }
@media (max-width: 768px) { #About .about-s1 { width: 90%; }
  #Clients ul { width: 98%; }
  #Clients ul li { width: 25%; }
  .grid .grid-item table b { font-weight: normal; font-size: 16px; }
  .grid .grid-item table p { font-size: 12px; line-height: 20px; }
  #Contact section { width: 90%; margin: 2% auto; }
  footer ul { float: none; width: 100%; text-align: center; }
  footer ul li { float: none; margin: 2% 1% 0 0; display: inline-block; }
  footer .Information { float: none; text-align: center; }
  #Service li span { width: 100%; top: 65%; left: 0%; font-size: 13px; }
  #Service ul { margin: 5% auto; }
  #Service li { width: 33.3%; }
  #Service li p { height: 3.5em; font-size: 13px; line-height: 20px; }
  #Service li span { width: 100%; position: static; padding: 5%; text-align: left; display: none; opacity: 1; }
  #Service li.open { width: 100%; } }
@media (max-width: 640px) { #Topbox .menu nav { margin: 2% 0 0 0%; }
  #Topbox .menu nav a { color: #666; margin: 0; display: block; text-align: center; padding: 3% 0; }
  #Topbox .menu nav a:hover { color: #72c0d9; background: rgba(255, 255, 25, 0.5); }
  #Topbox .close { top: -100%; }
  #About .about-s3 { padding-bottom: 187.5%; background: url(../images/about3.jpg) no-repeat; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; }
  #Clients ul li { width: 33.3%; } }
@media (max-width: 480px) { #About .about-s2 div:first-child { display: none; }
  #About .about-s2 div:last-child { display: block; }
  #Service li { width: 50%; }
  #Service li p { height: 4em; font-size: 12px; line-height: 20px; }
  #Clients ul li { width: 50%; }
  .grid .grid-item, .grid .grid-sizer, .grid .g-width2, .grid .g-width3 { width: 100%; height: auto; padding-bottom: 0; }
  .grid .wd table { height: 256px; }
  .grid .grid-item iframe { position: static; height: 512px; }
  .Work-One { padding-left: 0; }
  .Work-One .workA, .Work-One .workB, .Work-One .workC { float: none; display: block; clear: both; overflow: hidden; }
  .Work-One .workA { width: 100%; padding: 1%; }
  .Work-One .workB { width: 100%; padding: 1%; }
  .Work-One .workC { width: 98%; margin: 1%; }
  .Work-Two { padding-left: 0; }
  .Work-Two .workD, .Work-Two .workE, .Work-Two .workF { float: none; display: block; clear: both; overflow: hidden; }
  .Work-Two .workD { width: 100%; padding: 1%; }
  .Work-Two .workE { width: 100%; padding: 1%; }
  .Work-Two .workF { width: 98%; margin: 1%; } }

/*# sourceMappingURL=style.css.map */