@charset "utf-8";

main{gap: 260px;}

.intro{padding-bottom: 0px !important;}

.gov-tit{
  width: 100%;
  border-radius: var(--border-radius);
  padding: var(--space-55);
  box-sizing: border-box;
  background: url(/img/parkingN_Homepage/background_navy.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  > h2{
    font-size: 55px;
    font-weight: 700;
    line-height: 80px;
    color: #fff;
  }

  > p{
    color: #fff;
    font-size: var(--base-font);
    white-space: pre;
  }
}



.gov-intro{
  width: 100%;

  > .box{
    width: 100%;
    background: var(--light-back);
    border: var(--base-border);
    padding: var(--space-35);
    box-sizing: border-box;
    border-radius: var(--border-radius);
    box-shadow: var(--base-shadow);
    
    > p{
      white-space: pre;
      font-size: var(--semi-font);

    }
  }
}



/* 신청 경우 */
.gov-ask{
  width: 100%;

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

    > li{
      width: 100%;

      > img{
        width: 100%;
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
      }

      > span{
        width: 100%;
        background: var(--light-back);
        border: var(--base-border);
        border-top: none;
        padding: var(--space-15);
        box-sizing: border-box;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        box-shadow: var(--base-shadow);
        color: var(--dark-font);
        font-size: var(--semi-font);
        font-weight: 600;
        text-align: center;
      }
    }
  }
}



/* 진행 방식 */
.gov-step{
  width: 100%;

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

    > li{
      width: 100%;

      > span{
        width: 50px; height: 50px;
        background: #142B54;
        border-radius: 50%;
        text-align: center;
        align-items: center;
        align-self: center;
        color: #fff;
        font-size: var(--stit-font);
      }

      > p{
        font-size: var(--semi-font);
        color: var(--dark-font);
        font-weight: 600;
      }
    }
  }
}



/* 설치 사례 */
.gov-ex{
  width: 100%;

  > div{
    width: 100%;

    > .img{
      width: 100%;

      > img{
        width: calc((100% - 35px) / 2);
        border-radius: var(--border-radius);
      }
    }

    > p{
      font-size: var(--semi-font);
      color: var(--dark-font);
      font-weight: 600;
    }
  }
}



/* 다온앤 도움 */
.gov-help{
  width: 100%;

  > ul{
    width: 100%;
    align-items: flex-start;
    
    > li{
      width: 100%;
      background: var(--light-back);
      border: var(--base-border);
      padding: var(--space-35);
      box-sizing: border-box;
      border-radius: var(--border-radius);
      box-shadow: var(--base-shadow);

      > i{
        width: 37px; height: 37px;
        color: var(--point-color);
        font-size: 19px;
        background: linear-gradient(90deg,rgba(74, 111, 240, .15) 0%, rgba(50, 90, 230, .15) 50%, rgba(31, 67, 201, .15) 100%);
        border: 1px solid var(--point-color);
        border-radius: var(--border-radius);
        align-self: center;
      }
    }
  }
}










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

  main{gap: 200px;}

  .gov-tit{
    width: 100%;
    padding: var(--space-35);

    > h2{
      font-size: 42px;
      line-height: 60px;
    }
  }



  /* 신청 경우 */
  .gov-ask{
    width: 100%;

    > ul{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
  }



  /* 진행 방식 */
  .gov-step{
    width: 100%;

    > ul{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
  }



  /* 다온앤 도움 */
  .gov-help{
    width: 100%;

    > ul{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
  }

}










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

  main{gap: 105px;}

  .gov-tit{
    width: 100%;
    gap: var(--space-35) !important;

    > h2{
      font-size: 26px;
      line-height: 35px;
    }

    > p{
      color: #fff;
      font-size: var(--base-font);
      white-space: normal;
    }

    > button{width: 100%;}
  }



  .gov-intro{
    width: 100%;

    > .box{
      width: 100%;
      
      > p{
        white-space: normal;
      }
    }
  }



  /* 신청 경우 */
  .gov-ask{
    width: 100%;
  }



  /* 진행 방식 */
  .gov-step{
    width: 100%;
  }



  /* 설치 사례 */
  .gov-ex{
    width: 100%;

    > div{
      width: 100%;

      > .img{
        flex-direction: column;

        > img{width: 100%}
      }
    }
  }



  /* 다온앤 도움 */
  .gov-help{
    width: 100%;

    > ul{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      
      > li{
        padding: var(--space-15);
      }
    }
  }

}