#TransAcoustic {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-weight: 300;
  font-size: .938em;
  line-height: 1.5;
  overflow: hidden;
}

#TransAcoustic * {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans',sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}

#TransAcoustic .header {
  padding: 10% 3.378% 4.054%;
}

#TransAcoustic .header .heading {
  margin: 0 0 17%;
  text-align: right;
  font-weight: 300;
  font-size: 5em;
  line-height: 1.3;
}

#TransAcoustic .header .heading .color1 {
  color: #62c1d3;
}

#TransAcoustic .header .heading .color2 {
  color: #d8c788;
}

#TransAcoustic .header .description {
  margin: 0;
  font-size: 1.6em;
  line-height: 1.2;
}

#TransAcoustic .section {
  clear: both;
  padding: 0 3.378% 5.405%;
  overflow: hidden;
}

#TransAcoustic .section .heading {
  font-weight: 500;
  font-size: 2em;
}

#whatsTransAcoustic .text {
  float: left;
  width: 70.434%;
}

#whatsTransAcoustic .text p {
  margin: 0 0 1.739%;
}

#whatsTransAcoustic .image {
  float: right;
  width: 26.086%;
  overflow: hidden;
}

#whatsTransAcoustic .image figure {
  position: relative;
  margin: 0 0 6.666%;
  font-weight: 700;
}

#whatsTransAcoustic .image .video:hover {
  filter: alpha(opacity=70);
  -moz-opacity: .7;
  opacity: .7;
}

#whatsTransAcoustic .image .up {
  float: left;
  width: 43.333%;
}

#whatsTransAcoustic .image .gp {
  float: right;
  width: 56.666%;
}

#whatsTransAcoustic .image .up img,#whatsTransAcoustic .image .gp img {
  margin: 1em 0 0;
}

#whatsTransAcoustic .image figure figcaption {
  position: absolute;
  left: 0;
  top: 0;
}

#howCanYouUse .contents {
  position: relative;
  width: 100%;
  margin: 1.449% 0 0;
}

#howCanYouUse .contents .heading {
  position: absolute;
  width: 49.855%;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}

#howCanYouUse .contents .heading:first-of-type {
  left: 0;
}

#howCanYouUse .contents .heading:last-of-type {
  right: 0;
}

#howCanYouUse .contents .heading.enable {
  padding: 15px 15px 14px;
  background: #a0d8f1;
  border-bottom: 1px solid #29aae1;
  color: #4a4a4a;
  cursor: auto;
}

#howCanYouUse .contents .heading.disable {
  padding: 15px 15px 13px;
  background: #dcdcdc;
  border-bottom: 2px solid #fff;
  color: #4a4a4a;
  cursor: pointer;
}

#howCanYouUse .contents .heading.disable:hover {
  background: #0f89b7;
  color: #fff;
}

#howCanYouUse .contents .unit {
  position: absolute;
  left: 0;
  width: 100%;
  background: #a0d8f1;
}

#howCanYouUse .contents .unit .tabpanel {
  position: absolute;
  width: 100%;
  padding: 2.898% 3.166%;
  overflow: hidden;
}

#howCanYouUse .contents .unit .tabpanel .text {
  float: right;
  width: 74.774%;
  margin: 0 0 6.25%;
}

#howCanYouUse .contents .unit .tabpanel .text .heading {
  position: static;
  width: 100%;
  margin: 0 0 1.562%;
  line-height: 1.5;
}

#howCanYouUse .contents .unit .tabpanel figure {
  float: left;
  width: 21.801%;
}

#howCanYouUse .contents .unit ul.navi {
  position: absolute;
  left: 0;
  right: 0;
}

#howCanYouUse .contents .unit ul.navi li {
  position: absolute;
  top: 0;
  padding: 0 1.5%;
  cursor: pointer;
}

#howCanYouUse .contents .unit ul.navi li:first-of-type {
  left: 0;
}

#howCanYouUse .contents .unit ul.navi li:last-of-type {
  right: 0;
}

#howCanYouUse .contents .unit ul.navi li img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#howCanYouUse .contents .unit ol.navi {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25px 0;
  text-align: center;
}

#howCanYouUse .contents .unit ol.navi li {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
}

#howCanYouUse .contents .unit ol.navi li:hover {
  filter: alpha(opacity=70);
  -moz-opacity: .7;
  opacity: .7;
}

#howCanYouUse .contents .unit ol.navi li.enable {
  color: #fff;
  cursor: pointer;
}

#howCanYouUse .contents .unit ol.navi li.enable:hover {
  filter: alpha(opacity=70);
  -moz-opacity: .7;
  opacity: .7;
}

#howCanYouUse .contents .unit ol.navi li.disable {
  color: #036db7;
  cursor: auto;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

#technology .contents .heading {
  clear: both;
  margin: 0 0 .675%;
  font-size: 1.25em;
}

#technology .contents p {
  margin: 0 0 1.666%;
}

#technology .contents .text {
  float: left;
  width: 60.869%;
  margin: 0 0 8.333%;
  font-size: .813em;
}

#technology .contents figure {
  float: right;
  width: 36.782%;
  margin: 0 0 5.91%;
}

@media (max-width: 991px) {
  #TransAcoustic .header .heading {
    font-size: 6.25vw;
  }
}

@media (max-width: 767px) {
  #whatsTransAcoustic .text,#whatsTransAcoustic .image {
    float: none;
    width: 100%;
  }

  #howCanYouUse .contents .unit .tabpanel .text,#howCanYouUse .contents .unit .tabpanel figure {
    float: none;
    width: 100%;
  }

  #technology .contents .text,#technology .contents figure {
    float: none;
    width: 100%;
  }
}