﻿.main.container {
  max-width: 100%;
  padding: 0; }

.main img {
  max-width: 100%; }

.main h1 {
  font-size: 50px;
  line-height: 1;
  margin: 0 0 10px; }
  @media (max-width: 768px) {
    .main h1 {
      font-size: 35px; }
      .main h1 br {
        display: none; } }

.main .btn.auto-btn {
  font-weight: bold;
  border-radius: 30px;
  min-width: 200px; }
  .main .btn.auto-btn.auto-btn-white {
    border-color: #000; }

.main > div:not(.top-header, .emobility) {
  max-width: 1400px;
  margin: 90px auto 20px;
  padding: 0px 20px; }
  @media (max-width: 768px) {
    .main > div:not(.top-header, .emobility) {
      margin-top: 50px; } }

.main .template-flex {
  display: flex;
  grid-gap: 20px;
  align-items: center; }
  @media (max-width: 768px) {
    .main .template-flex {
      flex-direction: column; } }
  .main .template-flex.tf-reverse {
    flex-direction: row-reverse; }
    @media (max-width: 768px) {
      .main .template-flex.tf-reverse {
        flex-direction: column-reverse; } }
  .main .template-flex > div {
    width: 100%; }

.main .top-header {
  position: relative;
  max-width: 1920px;
  margin: 0px auto; }
  .main .top-header img {
    width: 100%; }
  .main .top-header .content {
    position: absolute;
    top: 8%;
    left: 5%;
    max-width: 1850px;
    padding: 20px;
    width: 100%; }
    @media (max-width: 768px) {
      .main .top-header .content {
        top: 20px;
        left: 20px; } }
    .main .top-header .content h1, .main .top-header .content p {
      color: #fff; }
    .main .top-header .content p {
      font-size: 22px;
      line-height: 1.2; }

.main .intro p {
  max-width: 1020px; }

.main .quality > h1 {
  margin-bottom: 40px; }

.main .quality .quality-item {
  background: #f0f0f0;
  padding: 45px 30px;
  margin: 0 0 20px;
  display: flex; }
  @media (max-width: 768px) {
    .main .quality .quality-item {
      flex-direction: column;
      text-align: center; } }
  .main .quality .quality-item > div:nth-child(1) {
    min-width: 120px; }
    .main .quality .quality-item > div:nth-child(1) img {
      display: inline-block; }
  .main .quality .quality-item p strong {
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px;
    font-size: 25px;
    line-height: 1; }
    @media (max-width: 768px) {
      .main .quality .quality-item p strong {
        margin: 20px auto 20px; } }
  .main .quality .quality-item p .sans-legal {
    margin: 20px 0 0; }

.main .performance p {
  max-width: 900px; }

.main div.battery-condition {
  margin-top: 60px; }

.main .extended-warranty .ew-header {
  margin: 0 0 40px;
  width: 100%; }

.main .extended-warranty p {
  margin: 0 0 30px;
  max-width: 820px; }

.main .trading-vehicle {
  position: relative; }
  .main .trading-vehicle .tv-header {
    width: 100%; }
  .main .trading-vehicle .copy {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    padding: 60px 20px;
    max-width: 650px; }
    @media (max-width: 768px) {
      .main .trading-vehicle .copy {
        padding: 20px 40px;
        left: 0px; } }
    .main .trading-vehicle .copy h1, .main .trading-vehicle .copy p {
      color: #fff; }
    .main .trading-vehicle .copy p {
      margin: 20px 0 30px; }
    .main .trading-vehicle .copy .auto-btn-black {
      background-color: transparent;
      border-color: #fff;
      color: #fff; }

.main .faq > h1 {
  margin-bottom: 40px; }

.main .faq .faq-item {
  border-bottom: 1px solid #000;
  padding: 20px 0px; }
  .main .faq .faq-item .fi-header {
    padding-right: 45px;
    cursor: pointer;
    font-family: "mini_serif-bold", serif;
    font-weight: bold;
    background: url("/Public/img/2016-739165/ico/wide/positive/plus-hover.png") calc(100% - 10px) center no-repeat;
    background-size: 20px; }
  .main .faq .faq-item .fi-body {
    display: none;
    padding-top: 8px; }
  .main .faq .faq-item.active .fi-header {
    background: url("/Public/img/2016-739165/ico/wide/positive/minus-hover.png") calc(100% - 10px) center no-repeat;
    background-size: 20px; }
  .main .faq .faq-item.active .fi-body {
    display: block; }

.main .faq .auto-btn-white {
  display: inline-block;
  margin: 50px 0 0; }

.main .emobility {
  background: #f2f2f2; }
  .main .emobility .e-inner {
    margin: 90px auto 60px;
    padding: 60px 0px 35px;
    max-width: 1920px; }
    .main .emobility .e-inner > h1, .main .emobility .e-inner .sans-legal {
      max-width: 1460px;
      padding: 0px 20px;
      margin: 0px auto; }
    .main .emobility .e-inner .ae-slider {
      margin: 30px 0 60px auto;
      max-width: 95%; }
      @media (max-width: 768px) {
        .main .emobility .e-inner .ae-slider {
          max-width: calc(100% - 15px); } }
      .main .emobility .e-inner .ae-slider .slick-list {
        margin: 0 -10px;
        padding-right: 250px;
        cursor: grab; }
        @media (max-width: 768px) {
          .main .emobility .e-inner .ae-slider .slick-list {
            padding-right: 35px; } }
      .main .emobility .e-inner .ae-slider .as-item {
        position: relative;
        padding: 0 10px; }
        @media (max-width: 768px) {
          .main .emobility .e-inner .ae-slider .as-item {
            width: 100%; } }
        .main .emobility .e-inner .ae-slider .as-item .ai-img {
          width: 100%; }
        .main .emobility .e-inner .ae-slider .as-item .copy {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 20px 30px 30px; }
          .main .emobility .e-inner .ae-slider .as-item .copy p {
            color: #fff;
            font-size: 14px;
            line-height: 1.3;
            font-family: "mini_sans-medium", "arial", sans-serif; }
            .main .emobility .e-inner .ae-slider .as-item .copy p strong {
              display: block;
              margin: 0 0 15px;
              font-family: "mini_sans-medium", "arial", sans-serif;
              font-weight: bold; }
    .main .emobility .e-inner .ae-progress {
      max-width: 1000px;
      width: 100%;
      height: 2px;
      background: #dcdcdc;
      margin: 60px auto 40px;
      cursor: pointer; }
      @media (max-width: 768px) {
        .main .emobility .e-inner .ae-progress {
          max-width: calc(100% - 40px); } }
      .main .emobility .e-inner .ae-progress .ae-progress-bar {
        height: 5px;
        width: 100%;
        background: #000;
        transform-origin: left;
        transform: scaleX(0);
        transition: transform 250ms linear; }
