/* CSS Document */
#ul-header .header-bg {
  background-image: url("../img/header-service.jpg"); }

#intro {
  margin-bottom: 11rem; }
  @media screen and (max-width: 767px) {
    #intro {
      margin-bottom: 14rem; } }
  @media screen and (max-width: 575px) {
    #intro {
      margin-bottom: 5rem; } }
  #intro .intro-box img {
    margin-top: -5rem; }
    @media screen and (max-width: 991px) {
      #intro .intro-box img {
        margin-top: 0; } }
    @media screen and (max-width: 575px) {
      #intro .intro-box img {
        margin-top: 3rem; } }
  #intro .intro-box .intro-text {
    position: relative;
    padding-left: 4rem;
    line-height: 3.3rem; }
    @media screen and (max-width: 991px) {
      #intro .intro-box .intro-text {
        line-height: 2.8rem; } }
    @media screen and (max-width: 767px) {
      #intro .intro-box .intro-text {
        padding-left: 1rem; } }
    @media screen and (max-width: 575px) {
      #intro .intro-box .intro-text {
        padding-left: 2rem;
        padding-right: 2rem; } }
    #intro .intro-box .intro-text .intro-img {
      position: absolute;
      width: 110%;
      left: 0;
      bottom: 5rem;
      z-index: -1; }
      @media screen and (max-width: 1399px) {
        #intro .intro-box .intro-text .intro-img {
          width: 100%; } }
      @media screen and (max-width: 1199px) {
        #intro .intro-box .intro-text .intro-img {
          bottom: 4rem; } }
      @media screen and (max-width: 991px) {
        #intro .intro-box .intro-text .intro-img {
          bottom: 0rem; } }
      @media screen and (max-width: 767px) {
        #intro .intro-box .intro-text .intro-img {
          bottom: -7rem; } }
      #intro .intro-box .intro-text .intro-img img {
        width: 100%;
        height: 100%; }

#service {
  margin-bottom: 18rem; }
  @media screen and (max-width: 767px) {
    #service {
      margin-bottom: 12rem; } }
  #service .service-box-left, #service .service-box-right {
    margin-bottom: 17rem;
    display: flex;
    flex-direction: row;
    align-items: center; }
    @media screen and (max-width: 767px) {
      #service .service-box-left, #service .service-box-right {
        margin-bottom: 8rem;
        flex-direction: column; } }
    #service .service-box-left .service-img, #service .service-box-right .service-img {
      position: relative;
      width: 55%; }
      @media screen and (max-width: 767px) {
        #service .service-box-left .service-img, #service .service-box-right .service-img {
          width: 90%; } }
      #service .service-box-left .service-img img, #service .service-box-right .service-img img {
        width: 100%;
        height: 100%; }
    #service .service-box-left .service-text, #service .service-box-right .service-text {
      width: 38%; }
      @media screen and (max-width: 767px) {
        #service .service-box-left .service-text, #service .service-box-right .service-text {
          width: 90%;
          margin-top: 3rem; } }
      #service .service-box-left .service-text h4, #service .service-box-right .service-text h4 {
        font-weight: 700;
        margin-bottom: 3rem;
        font-size: 23px;
        font-size: 2.3rem; }
        @media screen and (max-width: 767px) {
          #service .service-box-left .service-text h4, #service .service-box-right .service-text h4 {
            font-size: 18px;
            font-size: 1.8rem;
            margin-bottom: 2rem; } }
        #service .service-box-left .service-text h4 span, #service .service-box-right .service-text h4 span {
          font-family: "Josefin Sans", sans-serif;
          color: #22923b;
          font-style: normal;
          font-size: 50px;
          font-size: 5rem;
          letter-spacing: revert;
          display: block; }
          @media screen and (max-width: 1199px) {
            #service .service-box-left .service-text h4 span, #service .service-box-right .service-text h4 span {
              font-size: 43px;
              font-size: 4.3rem; } }
          @media screen and (max-width: 991px) {
            #service .service-box-left .service-text h4 span, #service .service-box-right .service-text h4 span {
              font-size: 38px;
              font-size: 3.8rem; } }
          @media screen and (max-width: 575px) {
            #service .service-box-left .service-text h4 span, #service .service-box-right .service-text h4 span {
              font-size: 35px;
              font-size: 3.5rem; } }
      #service .service-box-left .service-text p, #service .service-box-right .service-text p {
        line-height: 3.3rem; }
        @media screen and (max-width: 991px) {
          #service .service-box-left .service-text p, #service .service-box-right .service-text p {
            line-height: 2.8rem; } }
  #service .service-box-left .service-text {
    margin-right: 2rem;
    margin-left: 4rem; }
    @media screen and (max-width: 575px) {
      #service .service-box-left .service-text {
        margin-right: 2rem;
        margin-left: 2rem; } }
  #service .service-box-left .service-img::before {
    content: "";
    background-image: url("../img/service-left.svg");
    background-repeat: no-repeat;
    height: 209px;
    width: 175%;
    display: inline-block;
    position: absolute;
    bottom: -55px;
    left: 0;
    z-index: -1; }
    @media screen and (max-width: 1199px) {
      #service .service-box-left .service-img::before {
        bottom: -110px; } }
    @media screen and (max-width: 991px) {
      #service .service-box-left .service-img::before {
        bottom: -140px; } }
    @media screen and (max-width: 767px) {
      #service .service-box-left .service-img::before {
        bottom: -102px; } }
    @media screen and (max-width: 575px) {
      #service .service-box-left .service-img::before {
        bottom: -156px;
        content: none; } }
  #service .service-box-right {
    justify-content: flex-end; }
    #service .service-box-right .service-text {
      margin-right: 4rem;
      margin-left: 2rem; }
      @media screen and (max-width: 575px) {
        #service .service-box-right .service-text {
          margin-right: 2rem;
          margin-left: 2rem; } }
    #service .service-box-right .service-img::after {
      content: "";
      background-image: url("../img/service-right.svg");
      background-repeat: no-repeat;
      height: 209px;
      width: 175%;
      display: inline-block;
      position: absolute;
      bottom: -55px;
      right: 0;
      background-position: right;
      z-index: -1; }
      @media screen and (max-width: 1199px) {
        #service .service-box-right .service-img::after {
          bottom: -90px; } }
      @media screen and (max-width: 991px) {
        #service .service-box-right .service-img::after {
          bottom: -95px; } }
      @media screen and (max-width: 767px) {
        #service .service-box-right .service-img::after {
          bottom: -73px; } }
      @media screen and (max-width: 575px) {
        #service .service-box-right .service-img::after {
          bottom: -101px;
          content: none; } }