@charset "UTF-8";
.opentip-container,
.opentip-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.opentip-container {
  position: absolute;
  max-width: 300px;
  z-index: 100;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  -ms-transition: -ms-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  pointer-events: none;
  -webkit-transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0); }

.opentip-container.ot-fixed.ot-hidden.stem-top.stem-center,
.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-center,
.opentip-container.ot-fixed.ot-hiding.stem-top.stem-center {
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px); }

.opentip-container.ot-fixed.ot-hidden.stem-top.stem-right,
.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-right,
.opentip-container.ot-fixed.ot-hiding.stem-top.stem-right {
  -webkit-transform: translateY(-5px) translateX(5px);
  -moz-transform: translateY(-5px) translateX(5px);
  -o-transform: translateY(-5px) translateX(5px);
  -ms-transform: translateY(-5px) translateX(5px);
  transform: translateY(-5px) translateX(5px); }

.opentip-container.ot-fixed.ot-hidden.stem-middle.stem-right,
.opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-right,
.opentip-container.ot-fixed.ot-hiding.stem-middle.stem-right {
  -webkit-transform: translateX(5px);
  -moz-transform: translateX(5px);
  -o-transform: translateX(5px);
  -ms-transform: translateX(5px);
  transform: translateX(5px); }

.opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-right,
.opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-right,
.opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-right {
  -webkit-transform: translateY(5px) translateX(5px);
  -moz-transform: translateY(5px) translateX(5px);
  -o-transform: translateY(5px) translateX(5px);
  -ms-transform: translateY(5px) translateX(5px);
  transform: translateY(5px) translateX(5px); }

.opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-center,
.opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-center,
.opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-center {
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  -o-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px); }

.opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-left,
.opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-left,
.opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-left {
  -webkit-transform: translateY(5px) translateX(-5px);
  -moz-transform: translateY(5px) translateX(-5px);
  -o-transform: translateY(5px) translateX(-5px);
  -ms-transform: translateY(5px) translateX(-5px);
  transform: translateY(5px) translateX(-5px); }

.opentip-container.ot-fixed.ot-hidden.stem-middle.stem-left,
.opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-left,
.opentip-container.ot-fixed.ot-hiding.stem-middle.stem-left {
  -webkit-transform: translateX(-5px);
  -moz-transform: translateX(-5px);
  -o-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  transform: translateX(-5px); }

.opentip-container.ot-fixed.ot-hidden.stem-top.stem-left,
.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-left,
.opentip-container.ot-fixed.ot-hiding.stem-top.stem-left {
  -webkit-transform: translateY(-5px) translateX(-5px);
  -moz-transform: translateY(-5px) translateX(-5px);
  -o-transform: translateY(-5px) translateX(-5px);
  -ms-transform: translateY(-5px) translateX(-5px);
  transform: translateY(-5px) translateX(-5px); }

.opentip-container.ot-fixed .opentip {
  pointer-events: auto; }

.opentip-container.ot-hidden {
  display: none; }

.opentip-container .opentip {
  position: relative;
  font-size: 13px;
  line-height: 120%;
  padding: 9px 14px;
  color: #4f4b47;
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.2); }

.opentip-container .opentip .header {
  margin: 0;
  padding: 0; }

.opentip-container .opentip .ot-close {
  pointer-events: auto;
  display: block;
  position: absolute;
  top: -12px;
  left: 60px;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  text-decoration: none; }

.opentip-container .opentip .ot-close span {
  display: none; }

.opentip-container .opentip .ot-loading-indicator {
  display: none; }

.opentip-container.ot-loading .ot-loading-indicator {
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: 30px;
  font-weight: bold;
  display: block; }

.opentip-container.ot-loading .ot-loading-indicator span {
  display: block;
  -webkit-animation: otloading 2s linear infinite;
  -moz-animation: otloading 2s linear infinite;
  -o-animation: otloading 2s linear infinite;
  -ms-animation: otloading 2s linear infinite;
  animation: otloading 2s linear infinite;
  text-align: center; }

.opentip-container.style-dark .opentip,
.opentip-container.style-alert .opentip {
  color: #f8f8f8;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }

.opentip-container.style-glass .opentip {
  padding: 15px 25px;
  color: #317cc5;
  text-shadow: 1px 1px 8px rgba(0, 94, 153, 0.3); }

.opentip-container.ot-hide-effect-fade {
  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  transition: transform 0.5s ease-in-out, opacity 1s ease-in-out;
  opacity: 1;
  -ms-filter: none;
  filter: none; }

.opentip-container.ot-hide-effect-fade.ot-hiding {
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.opentip-container.ot-show-effect-appear.ot-going-to-show,
.opentip-container.ot-show-effect-appear.ot-showing {
  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out;
  transition: transform 0.5s ease-in-out, opacity 1s ease-in-out; }

.opentip-container.ot-show-effect-appear.ot-going-to-show {
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.opentip-container.ot-show-effect-appear.ot-showing {
  opacity: 1;
  -ms-filter: none;
  filter: none; }

.opentip-container.ot-show-effect-appear.ot-visible {
  opacity: 1;
  -ms-filter: none;
  filter: none; }

@-moz-keyframes otloading {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes otloading {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-o-keyframes otloading {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-ms-keyframes otloading {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes otloading {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
cf {
  zoom: 1; }

.cf:after {
  content: "";
  display: block;
  clear: both; }

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none; }

body {
  background-image: url(/images/background.jpg?version=18);
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; }

.container {
  width: 1080px;
  margin: 0 auto; }

#jcb-banner {
  position: absolute;
  right: 0;
  bottom: 0; }

nav#menu {
  background-size: cover;
  -ms-behavior: url(/javascripts/backgroundsize.min.htc);
  behavior: url(/javascripts/backgroundsize.min.htc);
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: white; }
  nav#menu .logo {
    position: absolute;
    left: 130px;
    top: 0; }
  nav#menu ul.menu {
    zoom: 1;
    width: 582px;
    margin: 0 auto; }
    nav#menu ul.menu:after {
      content: "";
      display: block;
      clear: both; }
    nav#menu ul.menu li:first-child {
      padding-left: 0; }
    nav#menu ul.menu .last {
      padding-right: 0; }
    nav#menu ul.menu li {
      float: left;
      padding: 4px 24px; }
      nav#menu ul.menu li a {
        display: inline-block;
        *zoom: 1;
        *display: inline;
        height: 32px;
        background-repeat: no-repeat;
        background-position: center; }
    nav#menu ul.menu > img {
      float: left; }
    nav#menu ul.menu .philosophy {
      width: 103px;
      background-image: url(/images/menu-philosophy.png?version=18); }
      nav#menu ul.menu .philosophy:hover {
        background-image: url(/images/menu-philosophy-hover.png?version=18); }
    nav#menu ul.menu .service {
      width: 68px;
      background-image: url(/images/menu-service.png?version=18); }
      nav#menu ul.menu .service:hover {
        background-image: url(/images/menu-service-hover.png?version=18); }
    nav#menu ul.menu .works {
      width: 59px;
      background-image: url(/images/menu-works.png?version=18); }
      nav#menu ul.menu .works:hover {
        background-image: url(/images/menu-works-hover.png?version=18); }
    nav#menu ul.menu .company {
      width: 80px;
      background-image: url(/images/menu-company.png?version=18); }
      nav#menu ul.menu .company:hover {
        background-image: url(/images/menu-company-hover.png?version=18); }
    nav#menu ul.menu .contact {
      width: 76px;
      background-image: url(/images/menu-contact.png?version=18); }
      nav#menu ul.menu .contact:hover {
        background-image: url(/images/menu-contact-hover.png?version=18); }
  nav#menu ul.tel-map {
    position: absolute;
    right: 58px;
    margin: 0; }
    nav#menu ul.tel-map li {
      height: auto;
      float: none; }

section {
  width: 100%;
  background-position: center; }
  section header {
    text-align: center; }
    section header img {
      margin-top: 60px; }

#section-top {
  position: relative;
  zoom: 1;
  *zoom: 1;
  background-size: cover;
  -ms-behavior: url(/javascripts/backgroundsize.min.htc);
  behavior: url(/javascripts/backgroundsize.min.htc);
  background-image: url(/images/top-image.jpg?version=18); }
  #section-top .container {
    background-image: url(/images/total-creative.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #00b1cd;
    position: absolute;
    left: 38.1966%;
    width: 61.8034%;
    height: 70px; }

#section-philosophy {
  background-size: cover;
  -ms-behavior: url(/javascripts/backgroundsize.min.htc);
  behavior: url(/javascripts/backgroundsize.min.htc);
  background-image: url(/images/background-philosophy.png?version=18);
  background-position: center; }
  #section-philosophy .container {
    zoom: 1;
    font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
    width: 910px;
    text-align: center; }
    #section-philosophy .container:after {
      content: "";
      display: block;
      clear: both; }
    #section-philosophy .container h2 {
      font-size: 38px;
      letter-spacing: 15.2px;
      color: #353536; }
    #section-philosophy .container p {
      margin-top: 72px;
      text-align: justify;
      font-size: 20px;
      letter-spacing: 2px;
      color: #353536; }
    #section-philosophy .container > span {
      margin-top: 30px;
      font-size: 20px;
      color: #353536;
      float: right; }
      #section-philosophy .container > span > img {
        margin-top: 24px;
        float: right; }

#section-service .container {
  zoom: 1; }
  #section-service .container:after {
    content: "";
    display: block;
    clear: both; }
  #section-service .container .left-panel {
    width: 360px;
    float: left; }
    #section-service .container .left-panel p {
      background-size: cover;
      -ms-behavior: url(/javascripts/backgroundsize.min.htc);
      behavior: url(/javascripts/backgroundsize.min.htc);
      background-image: url(/images/top-service-text-background.png?version=18);
      padding: 30px;
      text-align: center;
      font-size: 13px;
      line-height: 22px;
      letter-spacing: 1.3px;
      color: #414042; }
    #section-service .container .left-panel a {
      display: block;
      margin: 0 auto;
      width: 245px;
      height: 65px;
      margin-top: 20px;
      background-image: url(/images/button-read-more.png?version=18); }
      #section-service .container .left-panel a:hover {
        background-image: url(/images/button-read-more-hover.png?version=18); }
  #section-service .container .right-panel {
    float: right; }
    #section-service .container .right-panel ul {
      zoom: 1;
      width: 702px; }
      #section-service .container .right-panel ul:after {
        content: "";
        display: block;
        clear: both; }
      #section-service .container .right-panel ul li {
        position: relative;
        zoom: 1;
        *zoom: 1;
        float: left;
        width: 226px;
        height: 226px;
        padding-left: 8px;
        padding-top: 8px;
        background-image: url(/images/service-item-background.png?version=18);
        text-align: center; }
        #section-service .container .right-panel ul li a, #section-service .container .right-panel ul li a:link, #section-service .container .right-panel ul li a:visited {
          color: black; }
        #section-service .container .right-panel ul li img {
          display: block;
          margin-top: 34px;
          margin-left: auto;
          margin-right: auto; }
        #section-service .container .right-panel ul li .text-container {
          position: absolute;
          left: 22px;
          top: 158px; }
          #section-service .container .right-panel ul li .text-container h3 {
            font-size: 13px;
            letter-spacing: 1.3px; }
          #section-service .container .right-panel ul li .text-container p {
            display: inline-block;
            *zoom: 1;
            *display: inline;
            font-size: 10px;
            line-height: 10.5px;
            letter-spacing: 0.8px;
            margin-top: 12px;
            width: 200px;
            text-align: justify; }

#section-works {
  position: relative;
  zoom: 1;
  *zoom: 1;
  background-size: cover;
  -ms-behavior: url(/javascripts/backgroundsize.min.htc);
  behavior: url(/javascripts/backgroundsize.min.htc);
  background-image: url(/images/background-works.png?version=18); }
  #section-works .container {
    width: 100%;
    margin: 0;
    overflow: hidden; }
  #section-works .works-slide-container {
    position: relative;
    zoom: 1;
    *zoom: 1; }
    #section-works .works-slide-container .slide-frame {
      width: 100%;
      height: 360px; }
      #section-works .works-slide-container .slide-frame ul {
        position: absolute;
        top: 0;
        left: 0; }
        #section-works .works-slide-container .slide-frame ul li {
          position: absolute;
          top: 0;
          width: 640px;
          height: 360px; }
          #section-works .works-slide-container .slide-frame ul li img {
            max-width: 100%;
            max-height: 100%; }
    #section-works .works-slide-container .controller span {
      position: absolute;
      display: block;
      width: 43px;
      height: 360px;
      top: 0;
      cursor: pointer; }
    #section-works .works-slide-container .controller .left {
      left: 0;
      background-image: url(/images/top-works-left.png?version=18); }
    #section-works .works-slide-container .controller .right {
      right: 0;
      background-image: url(/images/top-works-right.png?version=18); }
  #section-works .button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    width: 275px;
    height: 69px;
    background-image: url(/images/button-all-works.png?version=18); }
    #section-works .button:hover {
      background-image: url(/images/button-all-works-hover.png?version=18); }

#section-company {
  zoom: 1; }
  #section-company:after {
    content: "";
    display: block;
    clear: both; }
  #section-company .container {
    position: relative;
    zoom: 1;
    *zoom: 1; }
    #section-company .container .image {
      position: absolute;
      left: 0; }
    #section-company .container .company-info-container {
      display: inline-block;
      float: right;
      padding-top: 60px;
      padding-bottom: 40px;
      padding-left: 50px;
      padding-right: 20px;
      margin-top: 20px;
      font-size: 15px;
      line-height: 16px;
      letter-spacing: 1.5px;
      color: #1d1c1c; }
      #section-company .container .company-info-container table {
        color: #1d1c1c; }
        #section-company .container .company-info-container table tr th {
          width: 170px;
          vertical-align: top;
          text-align: left; }
          #section-company .container .company-info-container table tr th .map {
            margin-top: 4px;
            display: block; }
            #section-company .container .company-info-container table tr th .map img {
              vertical-align: middle; }
        #section-company .container .company-info-container table tr td {
          width: 450px;
          padding-bottom: 10px; }

#section-contact {
  background-size: cover;
  -ms-behavior: url(/javascripts/backgroundsize.min.htc);
  behavior: url(/javascripts/backgroundsize.min.htc);
  background-image: url(/images/background-contact.jpg?version=18); }
  #section-contact .container {
    position: relative;
    zoom: 1;
    *zoom: 1;
    width: 100%;
    height: 100%; }
    #section-contact .container p {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      background-color: #666666;
      background-color: rgba(102, 102, 102, 0.7);
      text-align: center;
      padding-top: 20px;
      padding-left: auto;
      padding-right: auto;
      font-size: 15px;
      line-height: 26.14px;
      letter-spacing: -0.75px;
      color: #FFFFFF; }
      #section-contact .container p .contact-link {
        margin: 30px auto; }

.contact-link {
  display: block;
  width: 301px;
  height: 62px;
  margin: 70px auto;
  background-image: url(/images/contact-link.png?version=18); }

footer {
  background-size: cover;
  -ms-behavior: url(/javascripts/backgroundsize.min.htc);
  behavior: url(/javascripts/backgroundsize.min.htc);
  position: relative;
  zoom: 1;
  *zoom: 1;
  background-color: #00b1cd;
  height: 266px;
  color: white; }
  footer a {
    font-size: 12px;
    line-height: 10px; }
    footer a, footer a:link, footer a:visited {
      color: white; }
    footer a:hover {
      text-decoration: underline; }
  footer > ul {
    zoom: 1;
    width: 757px;
    margin: 0 auto;
    padding-top: 68px; }
    footer > ul:after {
      content: "";
      display: block;
      clear: both; }
    footer > ul > li {
      font-size: 12px;
      width: 200px;
      display: inline-block;
      *zoom: 1;
      *display: inline;
      float: left;
      padding-left: 17px; }
    footer > ul > li:first-child {
      padding-left: 0px; }
    footer > ul .last {
      width: 100px; }
  footer .item-indicator {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    width: 11px;
    height: 11px;
    margin-right: 7px;
    background-image: url(/images/footer-link-item.png?version=18); }
  footer .item-indicator- {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    width: 11px;
    height: 11px;
    margin-right: 7px; }
  footer .vertical-separator {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    float: left;
    width: 2px;
    height: 130px;
    background-image: url(/images/footer-vertical-separator.png?version=18); }
  footer #footer-logo {
    position: absolute;
    top: 98px; }

#page-map {
  font-size: 24px;
  line-height: 42px;
  letter-spacing: -1.2px;
  color: #231815; }
  #page-map section .container {
    zoom: 1; }
    #page-map section .container:after {
      content: "";
      display: block;
      clear: both; }
    #page-map section .container .map {
      width: 540px;
      height: 400px; }
    #page-map section .container div {
      float: left; }
    #page-map section .container .address {
      margin-left: 90px; }
      #page-map section .container .address .tel-fax {
        color: #00b1cd;
        font-size: 29px;
        letter-spacing: -8.7px;
        margin-top: 20px; }
        #page-map section .container .address .tel-fax .fax {
          font-size: 26px;
          letter-spacing: -7.8px; }
        #page-map section .container .address .tel-fax img {
          vertical-align: middle; }

#page-works {
  position: relative;
  zoom: 1;
  *zoom: 1;
  padding-bottom: 70px;
  background-image: url(/images/background-page-works.png?version=18); }
  #page-works section {
    height: auto !important; }
  #page-works .contact-link {
    margin-bottom: 0px; }
  #page-works nav.works-category {
    margin-top: 40px; }
    #page-works nav.works-category ul {
      zoom: 1;
      width: 764px;
      margin: 0 auto; }
      #page-works nav.works-category ul:after {
        content: "";
        display: block;
        clear: both; }
      #page-works nav.works-category ul li {
        display: inline-block;
        *zoom: 1;
        *display: inline;
        float: left;
        width: 191px;
        text-align: center;
        cursor: pointer; }
        #page-works nav.works-category ul li span {
          display: block;
          width: 191px;
          height: 8px;
          background-image: url(/images/works-nav-tab-indicator.png?version=18); }
          #page-works nav.works-category ul li span.active {
            background-image: url(/images/works-nav-tab-indicator-active.png?version=18); }
  #page-works .container {
    zoom: 1;
    margin-top: 80px; }
    #page-works .container:after {
      content: "";
      display: block;
      clear: both; }
    #page-works .container .row {
      zoom: 1; }
      #page-works .container .row:after {
        content: "";
        display: block;
        clear: both; }
      #page-works .container .row .item {
        margin-top: 40px;
        margin-left: 36px;
        float: left;
        width: 320px;
        color: white;
        cursor: pointer; }
        #page-works .container .row .item .image-container {
          border: solid 1px #999999;
          height: 180px; }
          #page-works .container .row .item .image-container > img {
            width: 318px;
            height: 180px; }
        #page-works .container .row .item span {
          display: block;
          width: 100%; }
        #page-works .container .row .item .title {
          font-size: 18px;
          letter-spacing: 3.6px;
          margin-top: 14px; }
        #page-works .container .row .item .description {
          font-family: Helvetica;
          font-size: 13px;
          line-height: 20.95px;
          letter-spacing: 2.6px;
          margin-top: 10px;
          color: #CCCCCC; }
      #page-works .container .row .item:first-child {
        margin-left: 0; }
  #page-works #loading {
    width: 116px;
    height: 116px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px; }
  #page-works .popup {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #333333;
    overflow: scroll; }
    #page-works .popup .close {
      position: fixed;
      width: 50px;
      height: 50px;
      top: 80px;
      right: 20px;
      cursor: pointer;
      border: solid 1px;
      border-color: black;
      background-color: #333333;
      background-image: url(/images/works-popup-close.png?version=18); }
      #page-works .popup .close:hover {
        border-color: #666666;
        background-color: black; }
    #page-works .popup .controll-button {
      position: fixed;
      width: 51px;
      height: 51px;
      cursor: pointer; }
    #page-works .popup .prev {
      background-image: url(/images/works-popup-prev.png?version=18);
      left: 20px; }
      #page-works .popup .prev:hover {
        background-image: url(/images/works-popup-prev-hover.png?version=18); }
    #page-works .popup .next {
      background-image: url(/images/works-popup-next.png?version=18);
      right: 20px; }
      #page-works .popup .next:hover {
        background-image: url(/images/works-popup-next-hover.png?version=18); }
    #page-works .popup .image-container {
      width: 1080px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 140px;
      margin-bottom: 40px; }
      #page-works .popup .image-container > img {
        width: 800px; }
    #page-works .popup .text-container {
      position: fixed;
      color: white;
      width: 232px;
      top: 200px; }
      #page-works .popup .text-container .client {
        font-size: 20px;
        letter-spacing: 2px; }
      #page-works .popup .text-container p {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 2.8px;
        color: #cccccc; }
      #page-works .popup .text-container a {
        word-break: break-all; }
        #page-works .popup .text-container a, #page-works .popup .text-container a:link, #page-works .popup .text-container a:visited {
          color: #cccccc; }

#page-service {
  position: relative;
  zoom: 1;
  *zoom: 1; }
  #page-service #section-service-top {
    background-size: cover;
    -ms-behavior: url(/javascripts/backgroundsize.min.htc);
    behavior: url(/javascripts/backgroundsize.min.htc);
    background-image: url(/images/service-image.jpg?version=18);
    background-position: center; }
  #page-service .service-nav {
    zoom: 1; }
    #page-service .service-nav:after {
      content: "";
      display: block;
      clear: both; }
    #page-service .service-nav ul {
      zoom: 1;
      width: 1080px;
      margin: 0 auto; }
      #page-service .service-nav ul:after {
        content: "";
        display: block;
        clear: both; }
      #page-service .service-nav ul li {
        -webkit-box-sizing: border-box;
        /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;
        /* Firefox, other Gecko */
        box-sizing: border-box;
        width: 180px;
        height: 40px;
        font-size: 13px;
        letter-spacing: 1.3px;
        color: #FFFFFF;
        text-align: center;
        line-height: 40px;
        float: left;
        background-image: url(/images/service-nav-tab.png?version=18);
        cursor: pointer; }
      #page-service .service-nav ul .active {
        background-image: url(/images/service-nav-tab-active.png?version=18); }
  #page-service .service-nav-fixed {
    position: fixed;
    top: 60px;
    z-index: 10; }
  #page-service section {
    position: relative; }
  #page-service .container {
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 1.4px;
    color: #4D4D4D; }
    #page-service .container .top-panel {
      position: relative;
      zoom: 1;
      *zoom: 1;
      overflow: hidden;
      background-color: #cccccc; }
      #page-service .container .top-panel .image {
        position: absolute;
        left: 0; }
    #page-service .container .bottom-panel {
      zoom: 1; }
      #page-service .container .bottom-panel:after {
        content: "";
        display: block;
        clear: both; }
      #page-service .container .bottom-panel .left-panel {
        position: relative;
        zoom: 1;
        *zoom: 1;
        width: 460px;
        background-color: #f2f2f2;
        float: left;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 80px; }
        #page-service .container .bottom-panel .left-panel .arrow {
          position: absolute;
          left: 233px;
          top: 0; }
      #page-service .container .bottom-panel .right-panel {
        position: relative;
        zoom: 1;
        *zoom: 1;
        width: 540px;
        background-color: white;
        float: left; }
        #page-service .container .bottom-panel .right-panel .wrapper {
          width: 450px;
          padding-top: 10px;
          padding-left: 60px;
          padding-right: 40px;
          padding-bottom: 20px; }
          #page-service .container .bottom-panel .right-panel .wrapper .menu {
            position: relative;
            zoom: 1;
            *zoom: 1;
            width: 450px;
            height: 161px; }
            #page-service .container .bottom-panel .right-panel .wrapper .menu .header {
              color: white;
              background-color: #8a8a8a;
              height: 25px;
              padding-left: 20px; }
            #page-service .container .bottom-panel .right-panel .wrapper .menu .content {
              height: 135px;
              background-color: white;
              border-bottom: solid 1px #cccccc;
              border-left: solid 1px #cccccc;
              border-right: solid 1px #cccccc;
              padding-left: 10px; }
              #page-service .container .bottom-panel .right-panel .wrapper .menu .content > ul {
                padding-top: 10px;
                zoom: 1; }
                #page-service .container .bottom-panel .right-panel .wrapper .menu .content > ul:after {
                  content: "";
                  display: block;
                  clear: both; }
                #page-service .container .bottom-panel .right-panel .wrapper .menu .content > ul > li {
                  float: left;
                  width: 210px; }
                #page-service .container .bottom-panel .right-panel .wrapper .menu .content > ul .wide {
                  width: auto; }
                #page-service .container .bottom-panel .right-panel .wrapper .menu .content > ul .no-float {
                  float: none; }
              #page-service .container .bottom-panel .right-panel .wrapper .menu .content > span {
                position: absolute;
                right: 24px;
                bottom: 15px; }
        #page-service .container .bottom-panel .right-panel .arrow {
          position: absolute;
          left: 0; }

#page-contact {
  padding-top: 80px;
  padding-bottom: 20px;
  font-size: 10px;
  line-height: 25.01px;
  letter-spacing: 2px; }
  #page-contact > img {
    margin-top: 145px;
    margin-bottom: 80px; }
  #page-contact .container {
    margin-top: 40px;
    text-align: center; }
  #page-contact .header {
    zoom: 1;
    width: 668px;
    margin: 0 auto; }
    #page-contact .header:after {
      content: "";
      display: block;
      clear: both; }
    #page-contact .header img {
      float: left;
      vertical-align: bottom; }
    #page-contact .header .note {
      float: right; }
  #page-contact table {
    border: solid 1px #999999;
    margin-left: auto;
    margin-right: auto; }
    #page-contact table th {
      width: 192px;
      background-color: #f2f2f2;
      vertical-align: middle;
      border-right: solid 1px #999999;
      border-bottom: solid 1px #999999; }
    #page-contact table tr .sub {
      width: 115px;
      border-right: solid 1px #999999;
      text-align: center; }
    #page-contact table tr .input {
      width: 345px; }
    #page-contact table td {
      width: 460px;
      padding-left: 6px;
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom: solid 1px #999999;
      text-align: left; }
      #page-contact table td select {
        min-height: 26px; }
      #page-contact table td textarea {
        width: 384px;
        height: 114px;
        resize: none; }
      #page-contact table td input[type=text] {
        -webkit-box-sizing: border-box;
        /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;
        /* Firefox, other Gecko */
        box-sizing: border-box;
        height: 23px; }
      #page-contact table td .size-0 {
        width: 192px; }
      #page-contact table td .size-1 {
        width: 231px; }
      #page-contact table td .size-2 {
        width: 346px; }
  #page-contact input[type=button], #page-contact input[type=submit] {
    width: 77px;
    height: 16px; }
  #page-contact input[type=text], #page-contact textarea {
    -webkit-transition: all 0.70s ease-in-out;
    -moz-transition: all 0.70s ease-in-out;
    -ms-transition: all 0.70s ease-in-out;
    -o-transition: all 0.70s ease-in-out;
    outline: none;
    border: 1px solid #808080; }
  #page-contact input[type=text]:focus, #page-contact textarea:focus {
    box-shadow: 0 0 3px gray;
    border: 1px solid gray; }