@import 'module/font-awesome.css';
@import 'module/global.css';
@import 'module/header.css';
@import 'module/promo-slide.css';
@import 'module/popular.css';
@import 'module/blog.css';
@import 'module/footer.css';
@import 'module/popular-desktop.css' screen and (max-width: 920px);
@import 'module/blog-desktop.css' screen and (max-width: 820px);
@import 'module/landing-tablet.css' screen and (max-width: 768px);
@import 'module/promo-slide-tablet.css' screen and (max-width: 768px);
@import 'module/popular-tablet.css' screen and (max-width: 768px);
@import 'module/footer-tablet.css' screen and (max-width: 768px);
@import 'module/landing-phone.css' screen and (max-width: 500px);
@import 'module/promo-slide-phone.css' screen and (max-width: 500px);
@import 'module/popular-phone.css' screen and (max-width: 500px);
@import 'module/blog-phone.css' screen and (max-width: 500px);
@import 'module/footer-phone.css' screen and (max-width: 500px);
.intro {
  box-sizing: border-box;
  padding: 65px 50px 0px 50px;
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-auto-rows: max-content;
  justify-items: center;
  row-gap: 50px;
}
.intro .intro-left {
  width: 300px;
  padding-top: 15px;
}
.intro .model {
  width: 100%;
  grid-area: right;
  display: grid;
  grid-direction: end;
  grid-template-columns: repeat(6, 100%);
  grid-template-rows: max-content;
  overflow: hidden;
  margin-bottom: 5px;
}
.intro .model > * {
  margin-left: 35px;
  margin-right: 35px;
}
.intro img {
  width: 100%;
}
.intro .title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-transform: capitalize;
  font-weight: bold;
  padding-top: 0;
}
.intro .title h1, .intro .title h2, .intro .title h3 {
  text-align: end;
  color: #454545;
}
.intro .title h3 {
  font-size: 35px;
  margin-bottom: 13px;
}
.intro .title h1 {
  font-size: 60px;
  font-weight: bolder;
}
.intro .title h1:last-of-type {
  margin-bottom: 13px;
}
.intro .title h2 {
  font-size: 38px;
  margin-bottom: 13px;
}
.intro .title .btn {
  margin-top: 10px;
  width: 135px;
  height: 50px;
  background-color: #E33929;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FDFDFD;
  text-transform: uppercase;
  font-size: 17px;
  cursor: pointer;
}
.intro .m-scroll {
  width: 100%;
  height: 27px;
  display: flex;
  justify-content: center;
  position: relative;
}
.intro .scroll-bullet {
  display: flex;
  align-items: center;
  height: 100%;
}
.intro .scroll-bullet .bullet {
  border-radius: 50%;
  background-color: #454545;
  transition: 300ms;
  margin-left: 2px;
  margin-right: 2px;
}
.intro .m-scroll-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.intro .m-scroll-layer .l-bullet {
  width: 24px;
  height: 100%;
  cursor: pointer;
}

.normal-bullet {
  width: 11px;
  height: 11px;
}

.big-bullet {
  width: 16px;
  height: 16px;
}

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