/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * BANNER
 * MAIN
 * PRODUCTS
 * ABOUT
 * NEWS
 * BRANDS
 **/
/*------------------------------------*\
    BANNER
\*------------------------------------*/
.banner {
  position: relative;
  color: #ffffff;
}

.banner>.container {
  max-width: 200%;
  width: 200%;
  margin: 0 -50%;
}

@media (min-width: 576px) {
  .banner>.container {
    max-width: 150%;
    width: 150%;
    margin: 0 -25%;
  }
}

@media (min-width: 1440px) {
  .banner>.container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
}

.banner .swiper-pagination {
  -moz-text-align-last: left;
  text-align-last: left;
  left: 28%;
  bottom: 25px;
  right: 0;
}

@media (min-width: 576px) {
  .banner .swiper-pagination {
    left: 18%;
  }
}

@media (min-width: 1440px) {
  .banner .swiper-pagination {
    left: 0;
    max-width: 1170px;
    margin: 0 auto;
  }
}

.banner-txt {
  position: absolute;
  top: 25%;
  left: 28%;
  right: 0;
  text-align: left;
}

.banner-txt h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.25rem;
  line-height: 1.8rem;
  margin-bottom: 0.5rem;
}

.banner-txt p {
  font-size: 0.8125rem;
  letter-spacing: 0.125rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}

.banner-txt a {
  border: 1px solid #ffffff;
  line-height: 20px;
  width: 100px;
  height: 25px;
  text-align: center;
  vertical-align: top;
}

.banner-txt a img {
  width: 80px;
}

@media (min-width: 576px) {
  .banner-txt {
    left: 18%;
  }

  .banner-txt h3 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .banner-txt p {
    font-size: 1.125rem;
    line-height: 2rem;
    margin-bottom: 2rem;
  }

  .banner-txt a {
    line-height: 40px;
    width: 160px;
    height: 45px;
  }

  .banner-txt a img {
    width: auto;
  }
}

@media (min-width: 768px) {
  .banner-txt {
    top: 15%;
  }

  .banner-txt h3 {
    font-size: 3.5rem;
    line-height: 4.5rem;
    margin-bottom: 1.75rem;
  }

  .banner-txt p {
    margin-bottom: 3rem;
  }
}

@media (min-width: 992px) {
  .banner-txt {
    top: 25%;
  }
}

@media (min-width: 1200px) {
  .banner-txt {
    top: 30%;
    left: 0;
    max-width: 1170px;
    margin: 0 auto;
  }
}

/*------------------------------------*\
    MAIN
\*------------------------------------*/
main {
  padding: 0;
}

.page-header {
  margin-bottom: 3.5rem;
}

.swiper-button-prev,
.swiper-button-next {
  margin-top: 0;
  top: 30%;
}

.swiper-button-prev {
  background: url(../images/page-prev.svg) no-repeat;
  left: -5px;
}

.swiper-button-next {
  background: url(../images/page-next.svg) no-repeat;
  right: -5px;
}

.view-btn {
  text-align: right;
}

.view-btn a {
  border: 1px solid #bf0f23;
  line-height: 35px;
  width: 160px;
  height: 40px;
  text-align: center;
}

.view-btn a:hover,
.view-btn a:focus {
  border: 1px solid #ffffff;
}

/*------------------------------------*\
    PRODUCTS
\*------------------------------------*/
.index-products {
  background: url(../images/index-products-bg.jpg) center center #ffffff;
  padding: 3.5rem 0;
}

/*------------------------------------*\
    ABOUT
\*------------------------------------*/
.index-about {
  background-color: #ffffff;
  position: relative;
}

.index-about>h2 {
  -webkit-text-stroke: 0.5px #bf0f23;
  color: transparent;
  color: #bf0f23\0;
  opacity: 0.5\0;
  font-family: 'Roboto', sans-serif;
  font-size: 4.6rem;
  letter-spacing: 0.2rem;
}

.index-about .about-view {
  margin-bottom: 0;
}

.index-about .about-txt {
  background-color: #bf0f23;
  color: #ffffff;
  padding: 3rem;
}

.index-about .about-txt::before {
  background-color: #ffffff;
}

.index-about .about-txt h2 {
  color: #ffffff;
}

.index-about .about-txt .nav {
  margin-top: 4.5rem;
}

.index-about .about-txt .nav p {
  color: #ffffff;
}

.index-about .view-btn {
  margin-top: 3rem;
}

.index-about .view-btn a {
  border: 1px solid #ffffff;
}

.index-about .view-btn a:hover,
.index-about .view-btn a:focus {
  background-color: #e30015;
}

@media (min-width: 992px) {
  .index-about .about-txt {
    margin-top: 6rem;
  }

  .index-about .about-txt .nav li {
    padding: 0 1rem;
  }

  .index-about .about-pic {
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .index-about .about-txt h2 {
    position: relative;
  }

  .index-about .about-txt h2::before {
    content: '';
    width: 30px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    top: 15px;
    left: -50px;
  }

  .index-about .about-txt .nav li {
    padding: 0 2rem;
  }
}

@media (min-width: 1440px) {
  .index-about>h2 {
    position: absolute;
    top: 2rem;
    margin-bottom: 0;
  }

  .index-about .about-txt {
    padding: 11rem 20rem 6rem 8rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 65%;
    -ms-flex: 0 0 65%;
    flex: 0 0 65%;
    max-width: 65%;
  }
}

@media (min-width: 1880px) {
  .index-about .about-txt {
    padding: 11rem 32rem 6rem 8rem;
  }

  .index-about .about-pic {
    right: 0;
  }
}

/*------------------------------------*\
    NEWS
\*------------------------------------*/
.index-news {
  background: url(../images/index-news-bg.jpg) center top no-repeat #ffffff;
  padding: 3rem 0;
}

.index-news .news-item {
  margin-bottom: 4rem;
}

@media (min-width: 992px) {
  .index-news {
    padding: 8rem 0;
  }
}

/*------------------------------------*\
    BRANDS
\*------------------------------------*/
.index-brands {
  background: #ffffff;
  padding: 0 0 3rem;
}

.index-brands>.container {
  position: relative;
}

.index-brands .swiper-slide a {
  display: block;
  text-align: center;
}

.index-brands .swiper-button-prev,
.index-brands .swiper-button-next {
  top: 20%;
}