@font-face {
  font-family: Antonio;
  src: url(../fonts/Antonio-Regular.ttf) format("truetype"); }

@font-face {
  font-family: Helvethaica;
  src: url(../fonts/DB_Helvethaica_X_Li_v3.2.ttf) format("truetype"); }

.img-fluid {
  width: 100% !important; }

.long-font {
  transform: scaleY(1.2); }

.color-red {
  color: #ac2529; }

nav {
  z-index: 111; }
  nav.bg-dark {
    background-color: rgba(64, 71, 84, 0.5) !important;
    position: fixed;
    width: 100%; }
  nav a.nav-link {
    color: #bfbfbf;
    text-transform: uppercase;
    font-family: Antonio; }
    @media screen and (min-width: 1921px) {
      nav a.nav-link {
        font-size: 1.7rem; } }
  nav .space {
    margin-top: -4px;
    margin-left: -15px;
    margin-right: -15px; }
    @media screen and (min-width: 1921px) {
      nav .space {
        width: 36px; } }
  nav .phone-icon {
    width: 32px;
    margin-right: -15px; }
    @media screen and (min-width: 1921px) {
      nav .phone-icon {
        width: 47px; } }
  nav .navbar-brand img {
    height: 80px; }
    @media screen and (max-width: 991px) {
      nav .navbar-brand img {
        height: 50px; } }

.banner {
  width: 100%;
  background-position: bottom;
  background-size: cover;
  padding-top: 126px;
  background-color: #42454a; }
  @media screen and (max-width: 991px) {
    .banner {
      padding-top: 91px; } }
  @media screen and (max-width: 415px) {
    .banner {
      padding-top: 84px; } }
  .banner img:first-child {
    background-color: rgba(63, 70, 80, 0.8);
    position: absolute;
    margin-top: -1.7%; }

.content {
  padding-top: 100px;
  background-position: top;
  background-size: contain;
  background-color: #f5f5f5;
  background-image: url(../images/components/main-bg.png);
  background-repeat: no-repeat;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    .content {
      background-position: 0px 420px; } }
  .content .Antonio-font {
    font-family: Antonio; }
  .content .Helvethaica-font {
    font-family: Helvethaica; }
  @media screen and (max-width: 767px) {
    .content .slogan {
      font-size: 1.8rem; } }
  @media screen and (min-width: 1921px) {
    .content .slogan {
      font-size: 3vw; } }
  @media screen and (max-width: 767px) {
    .content .sub-slogan {
      font-size: 1.2rem; } }
  @media screen and (min-width: 1921px) {
    .content .sub-slogan {
      font-size: 1.8vw; } }
  .content .business-name {
    font-size: 4rem;
    margin-top: 90px; }
    @media screen and (max-width: 767px) {
      .content .business-name {
        font-size: 3rem; } }
    @media screen and (min-width: 1921px) {
      .content .business-name {
        font-size: 4vw; } }
  .content .under-business-name {
    margin-top: 15px;
    font-size: 25px;
    margin-bottom: 110px;
    width: 670px;
    padding: 15px;
    max-width: 100%; }
    @media screen and (max-width: 767px) {
      .content .under-business-name {
        margin-top: 10px;
        font-size: 13px;
        margin-bottom: 40px;
        padding: 10px;
        max-width: 90%; } }
    @media screen and (min-width: 1921px) {
      .content .under-business-name {
        font-size: 1.8vw;
        width: 46%; } }
    .content .under-business-name p {
      font-family: Helvethaica;
      text-align: left;
      margin-bottom: 0px; }
      .content .under-business-name p:first-child {
        text-indent: 30px; }
  .content .video {
    position: relative;
    padding-bottom: 52%;
    margin-bottom: 15px; }
    .content .video iframe {
      position: absolute;
      width: 100%;
      height: 100%; }
    .content .video.video-1 {
      background-color: black;
      border: 10px solid #d9d8da;
      width: 80%;
      margin-left: 10%;
      border-radius: 10px;
      box-shadow: 0px 1px 2px 0px #00000082; }
      @media screen and (max-width: 767px) {
        .content .video.video-1 {
          width: 90%;
          margin-left: 5%; } }
    .content .video.video-2 {
      margin-top: 25%;
      border-radius: 3px;
      border: 10px solid #e4e4e4;
      box-shadow: 0px 1px 2px 0px #00000082;
      background-color: black; }
  .content .big-tv {
    width: 90%;
    margin-left: 5%;
    margin-top: -42%; }
  .content .flying-monkey {
    width: 35%;
    margin-top: 23%;
    margin-left: 50%;
    position: absolute; }
  .content .our-service {
    margin-top: -30%; }
    @media screen and (max-width: 767px) {
      .content .our-service {
        margin-top: -10%; } }
    .content .our-service .btn-check-price {
      background-color: #c43929;
      border-radius: 40px;
      color: white;
      font-weight: bold;
      padding-left: 40px;
      padding-right: 40px;
      padding-top: 0px;
      padding-bottom: 0px;
      font-size: 1.8vw;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); }
      @media screen and (max-width: 767px) {
        .content .our-service .btn-check-price {
          font-size: 17px;
          padding-left: 25px;
          padding-right: 25px; } }
    .content .our-service h1 {
      font-weight: bold;
      font-size: 3vw; }
      @media screen and (max-width: 767px) {
        .content .our-service h1 {
          font-size: 2rem; } }
      @media screen and (max-width: 767px) {
        .content .our-service h1 {
          font-size: 1.5rem; } }
      .content .our-service h1 .star {
        width: 30px;
        margin-left: 10px;
        margin-right: 10px; }
    .content .our-service p {
      width: 40%;
      letter-spacing: 1.5px;
      font-size: 1.8vw;
      line-height: 1.8vw; }
      @media screen and (max-width: 767px) {
        .content .our-service p {
          width: 100%;
          font-size: 19px;
          line-height: 17px; } }
    .content .our-service .our-service-1 {
      width: 100%; }
      .content .our-service .our-service-1 img {
        width: 40%;
        height: 40%; }
        @media screen and (max-width: 767px) {
          .content .our-service .our-service-1 img {
            width: 60%;
            height: 60%; } }
      .content .our-service .our-service-1 .description {
        margin-top: 34%;
        padding: 10px; }
        .content .our-service .our-service-1 .description .star {
          width: 30px; }
          @media screen and (max-width: 767px) {
            .content .our-service .our-service-1 .description .star {
              width: 20px; } }
    .content .our-service .our-service-2 {
      width: 100%; }
      .content .our-service .our-service-2 img {
        width: 40%;
        height: 40%; }
        @media screen and (max-width: 767px) {
          .content .our-service .our-service-2 img {
            width: 60%;
            height: 60%; } }
      .content .our-service .our-service-2 .description {
        margin-top: 12%;
        padding: 10px; }
        .content .our-service .our-service-2 .description h1 .star {
          width: 30px;
          height: 26px;
          margin-right: 10px; }
          @media screen and (max-width: 767px) {
            .content .our-service .our-service-2 .description h1 .star {
              width: 20px; } }
    .content .our-service .our-service-3 {
      width: 100%; }
      @media screen and (max-width: 767px) {
        .content .our-service .our-service-3 {
          margin-top: 30px; } }
      .content .our-service .our-service-3 img {
        width: 40%;
        height: 40%; }
        @media screen and (max-width: 767px) {
          .content .our-service .our-service-3 img {
            width: 60%;
            height: 60%; } }
      .content .our-service .our-service-3 .description {
        margin-top: 12%;
        padding: 10px; }
        .content .our-service .our-service-3 .description h1 .star {
          width: 30px;
          height: 25px;
          margin-right: 10px; }
          @media screen and (max-width: 767px) {
            .content .our-service .our-service-3 .description h1 .star {
              width: 20px;
              height: 15px; } }
  .content .hot-line img {
    width: 80%;
    margin-left: 10%;
    margin-top: 100px;
    margin-bottom: 100px; }
  .content .our-client-title {
    color: #292e34; }
  .content .our-client-subtitle {
    color: #818d99; }
    @media screen and (min-width: 1921px) {
      .content .our-client-subtitle {
        font-size: 3vw; } }
  .content .our-client {
    padding-left: 15rem;
    padding-right: 15rem;
    margin-top: 80px;
    margin-bottom: 80px; }
    @media screen and (max-width: 767px) {
      .content .our-client {
        padding-left: 4rem;
        padding-right: 4rem; } }
  .content .choose-us {
    margin-top: 80px; }
    .content .choose-us .title {
      transform: scaleY(1.1);
      font-size: 4rem; }
      @media screen and (max-width: 767px) {
        .content .choose-us .title {
          font-size: 3rem; } }
      @media screen and (min-width: 1921px) {
        .content .choose-us .title {
          font-size: 3rem; } }
    .content .choose-us .choose-us-video {
      width: 80%;
      max-width: 100%;
      padding: 15px; }
      .content .choose-us .choose-us-video .video {
        margin-top: 10px; }
  .content .our-partner .image {
    display: flex;
    flex-direction: row;
    justify-content: center; }
    .content .our-partner .image img {
      width: 80%;
      max-width: 100%;
      height: 100%; }
  .content .footer .contact {
    margin-top: 3%;
    position: absolute;
    background-image: url(../images/contents/note.png);
    width: 28%;
    height: 31vw;
    background-size: cover;
    color: #3f4d5e; }
    @media screen and (max-width: 767px) {
      .content .footer .contact {
        position: relative;
        padding-top: 1%;
        float: left;
        width: 50%;
        height: 58vw; } }
    .content .footer .contact a {
      color: #3f4d5e; }
    .content .footer .contact img {
      width: 9%;
      transform: scaleY(0.85); }
    .content .footer .contact .phone {
      margin-left: 25%;
      font-size: 1.7vw;
      font-weight: 900; }
      .content .footer .contact .phone:first-child {
        margin-top: 14%; }
        @media screen and (max-width: 767px) {
          .content .footer .contact .phone:first-child {
            margin-top: 15%; } }
      @media screen and (max-width: 767px) {
        .content .footer .contact .phone {
          margin-bottom: 0px;
          font-size: 3.5vw; } }
    .content .footer .contact .facebook {
      margin-top: 5%;
      font-size: 1.7vw;
      font-weight: 900;
      margin-left: 25%; }
      @media screen and (max-width: 767px) {
        .content .footer .contact .facebook {
          margin-bottom: 0px;
          font-size: 3.5vw; } }
    .content .footer .contact .email {
      margin-left: 25%;
      margin-top: 5%;
      font-size: 1.7vw;
      font-weight: 900; }
      @media screen and (max-width: 767px) {
        .content .footer .contact .email {
          margin-bottom: 0px;
          font-size: 3.5vw; } }
    .content .footer .contact .line {
      margin-left: 25%;
      margin-top: 5%;
      font-size: 1.7vw;
      font-weight: 900; }
      @media screen and (max-width: 767px) {
        .content .footer .contact .line {
          margin-bottom: 0px;
          font-size: 3.5vw; } }
    .content .footer .contact .web {
      margin-left: 25%;
      margin-top: 5%;
      font-size: 1.7vw;
      font-weight: 900; }
      @media screen and (max-width: 767px) {
        .content .footer .contact .web {
          margin-bottom: 0px;
          font-size: 3.5vw; } }
  .content .footer .address {
    position: absolute;
    margin-top: 36%;
    width: 27%; }
    @media screen and (max-width: 767px) {
      .content .footer .address {
        position: relative;
        margin-top: 3%;
        width: 50%; } }

.add-line-float-bottom {
  min-height: 100px;
  min-width: 100px;
  position: fixed;
  bottom: 0px;
  right: -40px;
  z-index: 10; }
  @media screen and (max-width: 450px) {
    .add-line-float-bottom {
      right: -10px; } }
  .add-line-float-bottom .link img {
    width: 300px;
    height: 300px; }
    @media screen and (max-width: 450px) {
      .add-line-float-bottom .link img {
        width: 130px;
        height: 130px; } }