/* CSS Document */
.ul-header {
  background-image: url("../img/ul-header04.jpg") !important; }

#works {
  margin-bottom: 8rem; }
  @media screen and (max-width: 991px) {
    #works {
      margin-bottom: 6rem; } }
  @media screen and (max-width: 575px) {
    #works {
      margin-bottom: 4rem; } }
  #works ul li a:hover {
    opacity: 0.8; }
    #works ul li a:hover .works_img img {
      transform: scale(1.08); }
  #works .works_box {
    margin-bottom: 8rem; }
    @media screen and (max-width: 767px) {
      #works .works_box {
        margin-bottom: 4rem; } }
    @media screen and (max-width: 575px) {
      #works .works_box {
        width: 90%;
        margin: 0 auto 3rem; } }
    #works .works_box .works_img {
      height: 260px;
      overflow: hidden; }
      @media screen and (max-width: 1399px) {
        #works .works_box .works_img {
          height: 220px; } }
      @media screen and (max-width: 1199px) {
        #works .works_box .works_img {
          height: 200px; } }
      @media screen and (max-width: 991px) {
        #works .works_box .works_img {
          height: 180px; } }
      @media screen and (max-width: 767px) {
        #works .works_box .works_img {
          height: 200px; } }
      @media screen and (max-width: 575px) {
        #works .works_box .works_img {
          height: 100%; } }
      #works .works_box .works_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s; }
    #works .works_box .works_text {
      padding: 1rem; }
      @media screen and (max-width: 1199px) {
        #works .works_box .works_text {
          padding: 1rem 0.5rem; } }
      #works .works_box .works_text h4 {
        font-size: 18px;
        font-size: 1.8rem;
        font-weight: 500;
        color: #000;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.7; }