@charset "UTF-8";
html {
  font-family: sans-serif;
  font-size: 100%; }

body {
  font-size: 16px;
  line-height: 1.6;
  font-family: 'Apple TP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #000000;
  color: #ffffff;
  word-wrap: break-word; }

img {
  width: 100%;
  height: auto; }

h1, h2, h3 {
  font-weight: bold;
  color: #C00; }

h2 {
  color: #fff;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
  background: #a90329;
  /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
  /* IE6-9 */
  padding: 0.3em 0.5em;
  border: 1px dotted #CC0000;
  margin-bottom: 15px;
  text-align: center; }

h3 {
  margin-top: 20px; }

h3:first-child {
  margin-top: 0; }

p:last-child {
  margin-bottom: 0; }

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: middle; }

.btn-danger {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
  background: #a90329;
  /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
  /* IE6-9 */
  border-color: #d43f3a; }

.btn-danger:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6d0019+0,8f0222+56,a90329+100 */
  background: #6d0019;
  /* Old browsers */
  background: -moz-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #6d0019 0%, #8f0222 56%, #a90329 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#a90329',GradientType=0 );
  /* IE6-9 */ }

.foreword {
  padding: 2em 0;
  background-color: #262626; }
  .foreword .col-lg-12 p {
    margin: 1em 0; }

header {
  position: relative;
  background: #000;
  width: 100%;
  color: #ffffff;
  overflow-x: hidden;
  text-align: center;
  overflow: hidden; }
  header .hero {
    z-index: 1;
    position: relative;
    overflow: hidden; }
    header .hero img {
      width: 100%;
      height: auto; }
  header .navbar-inverse {
    background-color: rgba(22, 22, 22, 0.9);
    border-color: #262626; }
    header .navbar-inverse .navbar-nav > .active > a, header .navbar-inverse .navbar-inverse .navbar-nav > .active > a:focus, header .navbar-inverse .navbar-inverse .navbar-nav > .active > a:hover {
      background-color: rgba(178, 0, 0, 0.7) !important; }
  header .navbar {
    min-height: auto;
    margin-bottom: 0;
    padding: 0 15px;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.75); }
    header .navbar .navbar-brand {
      padding: 8px 0 0;
      height: auto;
      line-height: normal; }
      header .navbar .navbar-brand .logo {
        width: 167px;
        height: 35px; }
  header .hero-container {
    border: 3px solid #C00;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    padding: 1.5% 2%;
    width: auto;
    left: 5%;
    right: 46%;
    top: 20%; }
    header .hero-container h1, header .hero-container p {
      display: inline-block;
      text-align: left;
      width: 100%;
      padding: 0; }
    header .hero-container p {
      font-size: 1.4em; }

header .hero-container .c877 {
margin-top:5%;
}
.c988 {
width:80%;
}
.avt-c875 {
	width:80%;
}
.jumbotron {
  background: rgba(255, 255, 255, 0.7);
  padding: 20px 30px !important;
  margin-bottom: 50px;
  border-radius: 0px !important;
  color: #000; }
  .jumbotron p {
    font-size: 1em; }

.main-concent {
  margin: 2em 0 0 0; }
  .main-concent .nav-tabs > li {
    font-size: 0.9em;
    float: none;
    text-align: center;
    border-radius: 0; }
  .main-concent .nav-tabs {
    border: none;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .main-concent .nav-tabs > li.active > a, .main-concent .nav-tabs > li.active > a:hover, .main-concent .nav-tabs > li.active > a:focus {
    color: #fff;
    border: none;
    cursor: default; }
  .main-concent .nav-tabs > li.active > a {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
    background: #a90329;
    /* Old browsers */
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #a90329 0%, #8f0222 44%, #6d0019 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
    /* IE6-9 */
    line-height: normal; }

.nav-tabs > li a {
  border: 1px solid #B20000;
  margin-right: 0;
  color: #B20000;
  border-radius: 0;
  line-height: normal;
  margin-bottom: 1em; }

.select-item {
  text-align: center; }

.diagram {
  text-align: center;
  margin: 2em 0 3em;
  position: relative; }
  .diagram span {
    display: block; }
  .diagram .copy {
    display: block;
    z-index: 100;
    height: 100%;
    margin: 0; }
  .diagram .explai-01 {
    width: 35%;
    position: absolute;
    left: 0;
    top: 7%; }
    .diagram .explai-01 .dialog {
      background: #990;
      display: block;
      background: #C30E22;
      border-radius: 15px;
      background-size: 100% 100%;
      padding: 3% 2%;
      position: relative;
      z-index: 1;
      width: auto; }
      .diagram .explai-01 .dialog .copy {
        padding: 10% 5%;
        position: relative;
        font-size: 1em; }
    .diagram .explai-01 .dialog:after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 50%;
      right: 0;
      margin: -15px -65px 0 0;
      padding: 0;
      width: 0px;
      height: 0px;
      border-width: 15px;
      border-left-width: 50px;
      border-style: solid;
      border-color: transparent transparent transparent #C30E22; }
  .diagram .explai-02 {
    top: 18%;
    position: absolute;
    right: 0;
    width: 35%; }
    .diagram .explai-02 .dialog {
      background: #990;
      display: block;
      background: #C30E22;
      border-radius: 15px;
      background-size: 100% 100%;
      padding: 3% 2%;
      position: relative;
      z-index: 1; }
      .diagram .explai-02 .dialog .copy {
        padding: 10% 5%;
        z-index: 10; }
    .diagram .explai-02 .dialog:after {
      content: "";
      bottom: -65px;
      z-index: 1;
      left: 80%;
      margin-left: -15px;
      width: 0px;
      height: 0px;
      border-width: 15px;
      border-top-width: 50px;
      border-style: solid;
      border-color: #C30E22 transparent transparent transparent;
      position: absolute; }
  .diagram figcaption {
    display: block;
    float: left; }
  .diagram .diagram-usb-one figcaption {
    float: none;
    width: 20%;
    margin: 0 40%; }
  .diagram .diagram-usb-two {
    margin-top: 0; }
    .diagram .diagram-usb-two figcaption {
      width: 20%; }
  .diagram img {
    z-index: 50;
    position: relative; }
  .diagram figcaption figure {
    margin-top: 1em;
    background: #000;
    padding: 4px 2px 2px; }

.diagram .diagram-usb-one:after, .diagram .diagram-usb-two:after, .diagram .diagram-card:after, .diagram-standalone:after {
  content: "";
  display: table;
  clear: both; }

.card-interface {
  padding-top: 2em; }
  .card-interface .diagram .explai {
    right: 0;
    width: 30%;
    margin: 0;
    padding: 0;
    text-align: right;
    top: 6%;
    position: absolute; }
    .card-interface .diagram .explai .dialog {
      margin-left: 0;
      text-align: center;
      background: #990;
      display: block;
      background: #C30E22;
      border-radius: 15px;
      padding: 0 5%;
      width: 100%;
      position: relative;
      z-index: 1; }
      .card-interface .diagram .explai .dialog .copy {
        width: auto;
        padding: 5%;
        z-index: 10; }
        .card-interface .diagram .explai .dialog .copy .c985 {
          width: 50%;
          margin: 15px 0 0 0; }
    .card-interface .diagram .explai .dialog:after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 50%;
      left: -70px;
      margin: -15px 0 0;
      padding: 0;
      width: 0px;
      height: 0px;
      border-width: 15px;
      border-right-width: 60px;
      border-style: solid;
      border-color: transparent #C30E22 transparent transparent; }
  .card-interface .diagram figcaption {
    float: none;
    padding: 0;
    margin: 0; }
  .card-interface .diagram-card figcaption {
    float: left; }
  .card-interface .diagram-card figcaption:nth-child(1) {
    width: 20%; }
  .card-interface .diagram-card figcaption:nth-child(2) {
    width: 20%; }
  .card-interface .diagram-card figcaption:nth-child(3) {
    width: 24.5%; }

.standalone-interface .diagram .dialog {
  background: #990;
  display: inline-block;
  background: #C30E22;
  border-radius: 15px;
  background-size: 100% 100%;
  padding: 1.5% 2%;
  position: relative;
  z-index: 1; }
  .standalone-interface .diagram .dialog p {
    padding-top: 5%;
    z-index: 10; }
.standalone-interface .diagram .dialog:after {
  content: "";
  z-index: 1;
  bottom: -40px;
  left: 50%;
  margin-left: -15px;
  width: 0px;
  height: 0px;
  border-width: 15px;
  border-top-width: 30px;
  border-style: solid;
  border-color: #C30E22 transparent transparent transparent;
  position: absolute; }
.standalone-interface .diagram .explai {
  width: 20%;
  top: 6%;
  position: absolute;
  right: 0; }
  .standalone-interface .diagram .explai .copy {
    padding: 0 5%;
    margin-right: 15%;
    z-index: 100; }

.diagram-standalone figcaption {
  width: 20%; }

/*箭頭右*/
.mwt_border .arrow_r_int {
  width: 0px;
  height: 0px;
  border-width: 15px;
  border-style: solid;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 20%;
  right: -30px; }

/*箭頭右-邊框*/
.mwt_border .arrow_r_out {
  width: 0px;
  height: 0px;
  border-width: 15px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 20%;
  right: -29px; }

#section1, #section2, #section3 {
  padding: 5em 0 0 0;
  position: relative;
  overflow: hidden; }

#section1 {
  padding: 4em 0;
  background: url(../img/bg_01.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
  margin: 0 auto;
  position: relative; }

#section2 {
  padding: 5em 0;
  background: url(../img/bg_02.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
  margin: 0 auto;
  position: relative; }

#section3 {
  padding: 5em 0 1em;
  background: url(../img/bg_03.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
  margin: 0 auto;
  position: relative; }

.note {
  font-size: 12px;
  padding: 15px 15px 15px 25px;
  border: 1px solid #444;
  background: #000;
  border-top: none;
  text-indent :-13px;
   }
.note p { margin-bottom:5px }
.tips .table {
  margin-top: 1.5em;
  color: #000;
  background: #FFF; }

.tips .table, .tips .table > thead > tr > th, .tips .table > tbody > tr > td, .tips .note {
  border: 1px solid #999; }

.tips .table > thead > tr {
  background: #ddd; }

.tips .table > thead > tr > th {
  text-align: center; }

.tips .note {
  color: #000;
  background: #FFF;
  border-top: none; }

.tips .note01 {
  font-size: 12px; }

.table {
	  table-layout: fixed;
  margin-bottom: 0; }
.table, .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
    border: 1px solid #444;
	text-align: center
	}
.table-responsive .table thead {
  background: #000; }

.table-responsive > .table > tbody > tr:nth-child(even) {
  background: #000; }

.table-responsive > .table > tbody > tr:nth-child(odd) {
  background: #222; }

.table-responsive > .table > tbody > tr tr:nth-child(1) > td {
  padding: 1em; }
.usb-interface .table col {
	width:14.28571428571429%;
}
.card-interface .table col {
	width:25%;
}
.standalone-interface .table col {
	width:20%
}

footer {
  padding: 1em 0; }
  
.table-form-01 col  { 
width:16% !important } 
.table-form-01 col:nth-of-type(1), .table-form-01 col:nth-of-type(2) { 
width:10% !important }

small { font-size:0.5rem }



@media only screen and (max-width: 1680px) {
  header .hero {
    margin: 0; } }
@media only screen and (max-width: 1280px) {
  header .hero-container {
    right: 40%; }

  header .hero {
    margin: 0 -9% 0 -8%; } }
@media screen and (max-width: 1199px) {
  .diagram .diagram-usb-one figcaption:nth-child(1) .copy {
    margin-right: 15%; } }
@media only screen and (max-width: 1024px) {
  header .hero-container {
    right: 35%; }

  header .hero {
    margin: 0 -10% 0 -20%; }

  .card-interface .diagram .explai .dialog:after {
    left: -60px; }
  .diagram .explai-02 {
    top: 15%; } }
@media only screen and (max-width: 991px) {
.table-responsive .table .btn-danger {
		display:block;
    width: 100%;
    margin-bottom: 0.5em; }

.table-responsive .table .btn-danger:last-child {
    margin-bottom: 0; }
		  .table-responsive {
    border: 1px solid #666;
		 }
.table-responsive .table img {
width:60%;
margin:0 auto;
}
}
@media only screen and (max-device-aspect-ratio: 1024 / 768) {
  header .hero-container {
    right: 40%; }

  header .hero {
    margin: 0 -3%; }

  #section1, #section2, #section3 {
    background-attachment: inherit;
    background-size: contain; } }
@media only screen and (min-width: 639px) and (max-width: 768px) {
  header {
    padding-bottom: 15px; }
    header .hero {
      margin: 0 -5%; } }
@media only screen and (max-width: 768px) {
  header .hero-container {
    margin: 0 15px 15px 15px; }

  .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    font-size: 12px; }

  #section1 .explai-01 .dialog:after {
    margin: -15px -45px 0 0; }

  #section1, #section2, #section3 {
    background-attachment: inherit;
    background-size: contain; }

  .card-interface .diagram .explai {
    top: -5%; }

  .card-interface .diagram .explai .dialog:after {
    left: -40px;
    border-right-width: 40px; }

  .diagram .explai-02 {
    top: 5%; }

  .diagram .explai-02 .dialog:after {
    bottom: -55px; }

  #section1, #section2, #section3 {
    padding-top: 10em; } }
@media screen and (max-width: 767px) {
	.table-responsive {
		margin-bottom:0;
	}
  .diagram {
    font-size: 0.6em; }

  .table-breakpointf {
    font-size: 0.7em; }

  .navbar-nav {
    margin: 0 -15px;
    border: none; }

  .nav > li {
    background-color: #333;
    border-bottom: 1px solid #666; }

  .nav > li:last-child {
    border-bottom: none; }

  .navbar-brand {
    padding: 10px;
    line-height: normal; }

  header .navbar {
    padding: 0; }

  header .navbar .navbar-brand {
    padding: 8px 0 0 15px; } 
		
.table-responsive>.table>tbody>tr>td {
    white-space:normal;
}
.usb-interface .table col, .card-interface .table col, .standalone-interface .table col {
	width:150px;
}
		}
@media screen and (max-width: 40em) {
  header .hero-container {
    top: inherit;
    left: inherit;
    right: inherit;
    bottom: inherit;
    position: relative;
    margin: 0 15px 15px 15px; }

  header .hero {
    padding-top: 5%; }

  .jumbotron {
    padding: 15px !important; }

  #section2 .dialog:after {
    bottom: -30px; }

  .diagram .explai-02 {
    top: 0%; }

		 }
@media screen and (max-width: 30em) {
  body {
    font-size: 14px; }

  header .hero-container {
    padding: 4.5% 5%;
    top: 40%; }
    header .hero-container h1 {
      margin-top: 0; }
  #section1 .diagram .explai-01 .dialog, #section1 .diagram .explai-02 .dialog, .card-interface .diagram .explai .dialog, #section2 .dialog {
    border-radius: 5px; }

  #section1 .diagram {
    margin: 5em 0 3em; }

  #section1 .diagram .explai-01 {
    width: 30%;
    top: 0; }

  #section1 .diagram .explai-02 {
    width: 36%;
    top: 0%; }

  #section1 .explai-01 .dialog:after {
    margin: -15px -40px 0 0; }

  #section1 .explai-02 .dialog:after {
    bottom: -40px;
    border-top-width: 40px; }

  .card-interface .diagram .explai {
    top: -10%; }

  .card-interface .diagram .explai .dialog:after {
    left: -30px;
    border-right-width: 30px; }

  #section2 .dialog:after {
    content: "";
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
    width: 0px;
    height: 0px;
    border-width: 10px;
    border-top-width: 25px;
    border-style: solid;
    border-color: #C30E22 transparent transparent transparent;
    position: absolute; }

  .standalone-interface .diagram .dialog p {
    padding-top: 0;
    top: -10%; }

  .jumbotron {
    margin-bottom: 30px; }

  .note {
    border: none;
    border-top: 1px solid #333; }

  #section3 .jumbotron:last-child {
    margin-bottom: 15px; }

  #section1, #section2, #section3 {
    padding: 8em 0 0 0; } }

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