* {
    font-family: Arial, "微軟正黑體", sans-serif;
    -webkit-text-size-adjust: none;
}
body {
    position: absolute;
    width:100%;
    height:100%;
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    background-color: #47030E;
    background-image: url("../images/index/bg_m.jpg");
    background-position: top center;
    background-repeat: no-repeat;
}
img {
  position: relative;
  width: 100%;
  height: auto;
}
.clear {
  clear: both;
}
.visible-phone {
  display: none;
}
.hidden-phone {
  display: block;
}
  /*===============================================================================================*/
.main {
    position: relative;
    width: 740px;
    height: auto;
    margin: 0 auto;
}
/*=================================================================================================*/
.toyota {
  position: relative;
  height: 70px;
  background-color: #BD152E;
  width: 131px;
  left: -131px;
  z-index: 20;
}
.toyota-logo {
  position: relative;
  top: 22px;
  width: 131px;
}
.video-container {
  position: relative;
  /*padding-bottom: 56.25%;*/
  padding-bottom: 52%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-shadow {
  -moz-box-shadow: 0px 5px 30px #000;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  /* For IE 8 */
  /*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";*/
  z-index: 30;
}
.container {
  position: relative;
  width: 718px;
  height: auto;
  margin: 0 auto;
  z-index: 10;
  /*background-color: #990000;*/
}
/*-------------------------------------------------------------------------------------------------[ top ]*/
.top {
  position: relative;
  background-color: Maroon;
}
.top-left {
  position: relative;
  width: 195px;
  background-color: #9F0B21;
  /*height: 259px;*/
}
.logo {
  position: relative;
  width: 100%;
  height: 259px;
}
.logo-m {
  position: relative;
  width: 100%;
  height: auto;
}
.top-right {
  position: absolute;
  padding: 0 20px;
  top: 0px;
  left: 195px;
  width: 480px;
  height: 149px;
}
.desc {
  position: relative;
  margin-top: 25px;
  /*height: 85px;*/
}
.desc-title {
  font-size: 1.33em;
  color: #FFF600;
}
.desc-title > div {
  float: left;
}
.desc-content {
  margin-top: 0.7em;
  margin-bottom: 1em;
  /*color: #DBA8A9;*/
  /*color: #E8BCBF;*/
  color: #FFFFFF;
}
.line {
  position: relative;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #6C0010;
}
.store {
  position: relative;
  margin-top: 10px;
  overflow: auto;
}
.store > div {
  float: left;
}
store-apple-qrcode {
  position: relative;
  width: 90px;
  height: 90px;
}
.store-apple,
.store-android {
  top: 18px;
  margin-left: 30px;
}
.store-apple {
  position: relative;
  width: 160px;
}
.store-android {
  position: relative;
  width: 126px;
}
/*-------------------------------------------------------------------------------------------------[ qa ]*/
.qa-cont {
  background-color: #34020B;
  position: relative;
  margin: 0 auto; 
  width: 701px;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
.qa-content {
  display: none;
  width: 90%;
  margin-top: 40px;
  margin-left: 6%;
}
.qa-item {
  margin-bottom: 1.5em;
}
.qa-q {
  color: #FFFFFF;
}
.qa-q > ul {
  list-style: disc outside;
}
.qa-a {
  color: #F6C500;
}
.qa-a > ol {
  list-style: decimal outside;
  margin-left: 1.5em; 
}
.qa-a > ol > li > ul {
  list-style: disc outside;
  margin-left: 1em;
}
.qa-btn {
  position: absolute;
  top: -14px;
  right: -8px;
  width: 105px;
  height: 62px;
  cursor: pointer;
}
.qa-sns {
  position: relative;
  width: 94%;
  padding-left: 6%;
  height: 21px;
}
.fb-btn,
.line-btn,
.gplus-btn,
.twitter-btn {
  float: left;
}
.fb-btn {
  position: relative;
  width: 80px;
  /*margin-left: 1%;*/
  /*margin-left: 6%;*/
  overflow: hidden;
}
.line-btn,
.gplus-btn,
.twitter-btn {
  position: relative;
  margin-left: 0.5%;
  top: 0;
  cursor: pointer;
}
.line-btn {
  width: 132px;
  height: 30px;
  top: -4px;
}
.gplus-btn {
  width: 20px;
  height: 20px;
}
.twitter-btn {
  width: 20px;
  height: 20px;
}
/*-------------------------------------------------------------------------------------------------[ story ]*/
.story-cont {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 12px;
  overflow: auto;
}
.story-row {
  position: relative;
  height: 100%;
  overflow: auto;
}
.story-item {
  position: relative;
  float: left;
  width: 352px;
  height: 100%;
  margin-top: 18px;
  background-color: #8A0115;
}
.story-item-left {
  margin-right: 14px;
}
.story-img {
  position: relative;
  width: 100%;
  height: auto;
}
.story-icon {
  position: relative;
  width: 45px;
  margin-left: 22px;
  margin-right: 3px;
  float: left;
}
.story-title {
  position: relative;
  font-size: 1.33em;
  top: 17px;
  float: left;
}
.story-content {
  height: 200px;
  margin-top: 0.5em;
  margin-left: 25px;
  margin-right: 5px;
  padding-bottom: 20px;
  position: relative;
  /*color: #DBA8A9;*/
  /*color: #E8BCBF;*/
  color: #FFFFFF;
  line-height: 1.2em;
}
.story-content li {
  /*margin-left: 1.5em;*/
  margin-bottom: 0.4em;
  list-style-position: outside;
  list-style-type: disc;
}
#story-item-05 .story-icon {
  width: 55px;
}
/*-------------------------------------------------------------------------------------------------[ footer ]*/
.footer {
  line-height: 30px;
  font-size: 10px;
  margin-left: 9px;
}
/*=================================================================================================[ media queries ]*/
@media only screen and (max-width: 1000px) {
  .toyota {
    width: 100%;
    left: 0;
  }
  .visible-phone {
    display: none;
  }
  .hidden-phone {
    display: block;
  }
}
@media only screen and (max-width: 720px) {
  body {
    background-image: none;
  }
  .visible-phone {
    display: block;
  }
  .hidden-phone {
    display: none;
  }
  .main {
    width: 100%;
    overflow: hidden;
  }
  .video-container {
    padding-bottom: 47%;
  }
  .container {
    width: 100%;
  }
  .toyota {
    height: 44px;
  }
  .toyota-logo {
    top: 10px;
  }
  /*-----------------------------------------------------------------------------------------------[ top ]*/
  .top-left {
    width: 100%;
    padding-top: 10px;
    /*height: 259px;*/
  }
  .top-right {
    position: relative;
    padding: 0 4% 10px 4%;
    top: 0px;
    left: 0px;
    width: 92%;
    height: auto;
  }
  .desc {
    position: relative;
    margin-bottom: 10px;
    height: auto;
  }
  .store {
    height: 120px;
    /*height: auto;*/
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .store-apple {
    margin-left: 0;
    width: 50%;
  }
  .store-android {
    margin-left: 9%;
    width: 41%;
  }
  /*-------------------------------------------------------------------------------------------------[ qa ]*/
  .qa-cont {
    width: 100%;
  }
  .qa-content {
    margin-left: 8%;
  }
  .qa-btn {
    right: -8px;
  }
  /*-----------------------------------------------------------------------------------------------[ story ]*/
  .story-cont {
    margin-top: 30px;
  }
  .story-item {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 0;
  }
  .story-item-left {
    margin-right: 0px;
  }
  .story-content {
    height: auto;
  }
}
@media only screen and (max-width: 600px) {
  .line-btn,
  .gplus-btn,
  .twitter-btn {
    margin-left: 0.1%;
  }
  .footer {
    font-size: 7px;
    margin-left: 5px;
  }
}


@media only screen and (max-width: 360px) {
  .qa-sns {
    width: 98%;
    padding-left: 2%;
  }
}