@charset "utf-8";

/* one */
.value{
  width: 100%;

  > .txt{
    width: 100%;

    > h2{
      font-size: 60px;
      font-weight: 800;
      color: var(--dark-font);
      text-align: center;
    }

    > p{
      font-size: 18px;
      text-align: center;
    }
  }

  > ul{
    width: 100%;

    > li{
      background: var(--light-back);
      border: var(--base-border);
      padding: var(--space-35);
      box-sizing: border-box;
      border-radius: 9px;
      text-align: center;
      min-height: 250px;
    }
  }
}




.info{
  background-image: url('/img/parkingN_Homepage/earth.png');
  background-repeat: no-repeat;
  background-size: cover;

  > h2{color: #fff;}

  > .table{
    width: 100%;

    > div{
      width: 100%;

      &:first-child > dl{border-bottom: 1px solid #fff;}

      > dl{
        width: 100%;
        padding: 35px 0;
        box-sizing: border-box;

        > dt{
          font-size: var(--tit-font);
          color: #fff;
          font-weight: 700;
          line-height: 30px;
        }

        > dd{
        	color: #fff;
        	line-height: 25px;
        }
      }
    }
  }
}










/* two */
.two{
  display: none;

  > .year{
    width: 100%;

    > div{
      width: 100%;
      align-items: flex-start;

      > h2{
        font-size: 48px;
        font-weight: 800;
        color: var(--dark-font);
        flex: 1;
      }

      > dl{
        flex: 2;
        position: relative;

        > dt:not(:first-of-type) {
          position: relative;
          padding-top: var(--space-35);

          &::before {
            content: '';
            position: absolute;
            top: 0; 
            left: 0;
            width: 100px;
            height: 1px;
            background: #EDEDED;
          }
        }
      }
    }
  }
}










/* three */
.three{
  display: none;

  > .field{
    width: 100%;

    > ul{
      width: 100%;
      
      > li{
        width: 100%;

        > div{
          width: 33%;

          > img{
            width: 100%;
            object-fit: cover;
            border-radius: 9px;
          }
        }
      }
    }
  }
}









/* tablet 해상도 */
@media screen and (max-width: 1750px){

  /* one */
  .value{
    width: 100%;

    > .txt{
      width: 100%;

      > h2{
        font-size: 37px;
      }
    }

    > ul{
      width: 100%;

      > li{
        padding: 25px 15px;
        min-height: auto;
      }
    }
  }










  /* two */
  .two{
    display: none;

    > .year{
      width: 100%;

      > div{
        width: 100%;

        > h2{
          font-size: 37px;
        }

        > dl{
          flex: 2;

          > dt:not(:first-of-type) {
            position: relative;
            padding-top: var(--space-35);
          }
        }
      }
    }
  }

}










/* mob 해상도 */
@media screen and (max-width:767px) {

  /* one */
  .value{
    width: 100%;

    > .txt{
      width: 100%;

      > h2{font-size: 26px;}

      > p{font-size: 15px;}
    }

    > ul{
      width: 100%;
      flex-direction: column;

      > li{
        gap: var(--space-15);
        min-height: fit-content;
      }
    }
  }




  .info{
    background-size: cover;
    background-position: center;

    > h2{
      color: #fff;}

    > .table{
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-25);

      > div{
        width: 100%;
        flex-direction: column;
        gap: var(--space-25);

        &:first-child > dl{border-bottom: none;}

        > dl{
          padding: 0;
          gap: 0;

          > dt{
            font-size: 18px;
            color: #fff;
            font-weight: 700;
            line-height: 30px;
          }

          > dd{
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }
  }










  /* two */
  .two{
    display: none;

    > .year{
      width: 100%;

      > div{
        flex-direction: column;
        gap: var(--space-25);

        > h2{
          font-size: 26px;
          text-align: center;
          width: 100%;
        }
      }
    }
  }










  /* three */
  .three{
    display: none;

    > .field{
      width: 100%;

      > ul{
        gap: var(--space-35);
        
        > li{
          gap: var(--space-15);

          > div{
            width: 33%;
            gap: var(--space-15);

          }
        }
      }
    }
  }

}