.jgss {
     #home {
          position: relative;
          background: initial;
     }

     #home::before {
          position: absolute;
          z-index: 0;
          content: '';
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url("../img/jgss-bg.jpg") no-repeat center;
          background-size: cover;
          filter: grayscale(1);
     }

     #home::after {
          position: absolute;
          z-index: 0;
          content: '';
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.2);
     }

     .sub-primary {
          color: #C3D2FF;
          text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
     }

     .about-img {
          width: 100%;
     }

     .hero-desc {
          position: relative;
          z-index: 1;

          .sub-primary {
               font-size: 28px !important;
               @media (min-width: 1024px) {
                    font-size: 42px !important;
               }
          }

          .hero-name {
               font-size: 24px !important;
               @media (min-width: 1024px) {
                    font-size: 34px !important;
               }
          }

          .typed-text-output {
               font-size: 20px !important;
               @media (min-width: 1024px) {
                    font-size: 32px !important;
               }
          }

          .typed-cursor {
               top: -1px !important;
               font-size: 22px !important;
               @media (min-width: 1024px) {
                    top: -2px !important;
                    font-size: 36px !important;
               }
          }
     }

     .hero {
          padding: 160px 0;
     }

     .service-item.problem-card {
          align-items: center;
          justify-content: center;
     }

     .about-img {
          height: 250px;
     }

     .img-fluid.carousel-margin {
          margin-bottom: 30px;
     }

     .nav-pills .nav-link {
          border-radius: 6px;
     }

     .typed-cursor {
          position: relative;
          top: -3px;
          color: #fff;
          font-size: calc(1.325rem + .9vw);
          @media (min-width: 1024px) {
               font-size: 2rem;
          }
     }

     .service-item .bg-icon {
          background: initial;

          img {
               width: 150px;
               height: 150px;
          }
     }

     .sns-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: initial;
          height: 50px;

          svg {
               height: 20px !important;
               path {
               fill: #fff;
               }
          }

          #kakao-img {
               height: 30px !important;
          }
     }

     .sns2 {
          padding-top: 10px;
     }

     .service-item {
          word-break: keep-all;
     }

     .headline {
          flex-direction: column;
          @media (min-width: 1024px) {
               flex-direction: row;
               align-items: center;
          }
     }

     #skill .nav-pills .nav-link {
          font-size: 14px !important;
          @media (min-width: 1024px) {
               font-size: 18px !important;
          }
     }

     h5 {
          margin-bottom: 0 !important;
     }

     .tab-pane h5 {
          display: flex;
          align-items: center;
          font-size: 18px !important;
     }

     .tab-pane h5 span {
          word-break: keep-all;
     }
}

.keep-all {
     word-break: keep-all;
}


.d-none {
     display: none;
     @media (min-width: 1024px) {
          display: block;
     }
}