@charset "utf-8";

.lead{
  position: relative;
  width: 100%; height: 750px;

  > .background{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;

    > img{width: 100%;}
  }

  > .txt{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, .6);
    align-items: center !important;
    padding-bottom: var(--space-55);
    box-sizing: border-box;
    text-align: center;

    > p > i{
        font-size: var(--icon-font);
        color: #fff;
      }
      &.ri-arrow-right-s-line{font-size: 18px;}

    > p > span{
      font-size: 16px;
      color: #fff;

      &.now{font-weight: 600;}
    }

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





.intro-wrap{
  width: 100%;

  > div{
    width: 100%;

    > div{
      width: 100%;

      > p{white-space: pre;}

      > a{
        font-weight: 500;
        color: var(--dark-font);
        cursor: pointer;
        align-items: center;
        padding: var(--space-15);
        padding-left: 0;
      }
    }

    > img{
      width: 100%;
      box-shadow: var(--base-shadow);
    }
  }
}





.solution{
  width: 100%;

  > .sol-wrap{
    width: 100%;

    > ul{
      width: 100%;

      > li{
        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);

        > h4{
          width: 100%;
          border-bottom: 2px dashed #e3e3e3;
          padding-bottom: var(--space-35);

          > i{font-size: var(--icon-font);}
        }

        > div{
          width: 100%;

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

          > span{
            line-height: 30px;
            font-weight: 400;
          }
        }
      }
    }
  }
}





.gra{
  width: 100%;

  > ul{
    width: 100%;

    > li{
      background: linear-gradient(90deg,rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 1) 100%);
      border-top: var(--base-border);

      &.opp{background: linear-gradient(90deg,rgba(247, 247, 247, 1) 0%, rgba(247, 247, 247, 0) 100%);}

      &.ui > div{
        align-items: center !important;
        gap: var(--space-35);
      }

      > div{
        flex: 1;

        &.txt > img{width: 50%;}

        > span{
          color: var(--point-color);
          font-weight: 600;
        }

        > p{
          font-size: var(--base-font);

          > span{
            font-size: var(--base-font);
            display: block;
          }
        }

        > img{width: 100%;}
      }
    }
  }
}





.video-wrap{
  width: 100%;

  > ul{
    width: 100%;

    > li{
      width: 100%;
      border-top: var(--base-border);
      padding-top: var(--space-90) !important;
      box-sizing: border-box;
      align-items: flex-start;

      &:not(:first-child){
        margin-top: var(--space-90);
        padding-bottom: var(--space-90);
        border-bottom: var(--base-border);
      }

      > .txt{
        width: 100%;

        > li{
          width: 100%;

          > span{
            color: var(--dark-font);
            font-weight: 600;
            display: inline-block;
            min-width: 200px;
          }
          
          > p{font-size: var(--base-font);}
        }
      }

      > .video{
        width: 100%; height: fit-content;
        border-radius: var(--border-radius);
        overflow: hidden;

        > video{
          width: 100%;
          display: block;
        }
      }
    }
  }
}




.order{
  width: 100%;

  > div{
    width: 100%;

    > ul{
      width: 100%;

      > li{
        position: relative;
        width: 100%;
        background: var(--light-back);
        border: var(--base-border);
        border-radius: var(--border-radius);
        padding: var(--space-25);
        box-sizing: border-box;
        text-align: center;

        > div{
          width: 100%;

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

        > i{
          position: absolute !important;
          top: 50%; left: calc(100% + (var(--space-35) / 2));
          transform: translate(-50%, -50%);
          color: var(--dark-font);
          z-index: 10;
          font-size: var(--icon-font);
        }
      }
    }

    > div{
      width: 100%; min-height: 250px;
      position: relative;
      border-radius: var(--border-radius);
      overflow: hidden;
      background-image: url(/img/parkingN_Homepage/ask.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      > div{
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, .4);
        padding: var(--space-35);
        box-sizing: border-box;

        > p{
          color: #fff;
          font-size: var(--tit-font);
          line-height: 50px;
          font-weight: 600;
        }

        > a{
          color: #fff;
          cursor: pointer;
          align-items: center;
          padding: var(--space-15);
        }
      }
    }
  }
}










/* tablet 해상도 */
@media screen and (max-width: 1750px){
  
  .lead{
    width: 100%;
    
    > .background > img{width: auto; height: 100%;}

    > .txt > h2{
      font-size: 60px;
    line-height: 80px;
    }
  }





  .intro-wrap > div > div > p{white-space: normal;}





  .solution > .sol-wrap > ul{
    flex-direction: column;

    > li{padding: 35px 20px;}
  }





  .gra{
    width: 100%;
  }





  .order{
    width: 100%;

    > div{
      width: 100%;

      > ul > li > div > p{white-space: nowrap;}

      > div{
        height: 200px;

        > div{
          width: 100%;

          > p{
            white-space: pre;
            text-align: center;
          }
        }
      }
    }
  }

}










/* mob 해상도 */
@media screen and (max-width:767px) {
  
  .lead{
    width: 100%; height: 450px;
    
    > .background > img{width: auto; height: 100%;}

    > .txt > h2{
      font-size: 26px;
      line-height: 35px;
    }
    
    > .txt > p > span{font-size: 13px;}
  }





  .intro-wrap > div > div > p{white-space: normal;}





  .solution > .sol-wrap > ul{
    flex-direction: column;

    > li{
      padding: 15px;

      > h4{padding-bottom: var(--space-15);}

      > div > span{line-height: 23px;}
    }
  }





  .gra > ul > li{
    flex-direction: column;
    background: linear-gradient(180deg, rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 1) 100%);

    &.ui > div{
      align-items: center !important;
      gap: var(--space-35);
    }

    > div.txt{
      width: 100%;
      padding: 35px 15px;
      box-sizing: border-box;
      
      > p{
        white-space: pre;
        text-align: center;
      }
    }
  }
  
  .order-1{order: 1;}
  .order-2{order: 2;}





  .video-wrap{
    width: 100%;

    > ul{
      width: 100%;

      > li{
        width: 100%;

        > .txt{
          width: 100%;

          > li{
            width: 100%;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-7);
          }
        }
      }
    }
  }





  .order{
    width: 100%;   

    > div{
      width: 100%;

      > ul{
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        > li{
          width: 100%;
          
          > i{display: none;}  
          
          > div > p{font-size: var(--semi-font) !important;}
      }

      > div{
        height: 200px;

        > div{
          width: 100%;

          > p{line-height: 30px;}
        }
      }
    }
  }
}

}