@charset "utf-8";

header{
  background: linear-gradient(180deg,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 100%);
  border: none;
  height: 100px;

  &.scrolled{
    background: #1c1c1c;
    height: 65px;
  }

  &.open{background: #1c1c1c !important;}
}

main{
  margin-top: 0;

  /* 첫화면 영상 */
  > .video-wrap{
    width: 100%;  height: 100dvh;
    overflow: hidden;

    > div{
      position: relative;
      width: 100%; height: 100%;

      > .dark{
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, .3);
      }

      > video{
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
      }

      > .txt{
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        text-align: center;

        > h2{
          font-size: 65px;
          color: #fff;
          font-weight: 700;
        }
        > p{
          font-size: var(--semi-font);;
          color: #fff;
        }
      }
    }
  }





  /* UPCS 컨텐츠 */
  .intro{
    width: 100%;

    > .txt{
      flex: 1;

      > h2{
        font-size: 42px;
        line-height: 55px;
        font-weight: 800;
        color: var(--dark-font);
      }
    }

    > .video{
      flex: 2;
      height: fit-content;

      > img{width: 100%;}
    }
  }






  /* 솔루션 컨텐츠 */
  .product{
    width: 100%;
    background: var(--dark-font);

    > .tit{
      width: 100%;

      > a{
        color: #fff;
        font-size: 18px;
        padding: 11px 13px;
        transition: background-color 0.3s ease, color 0.3s ease;

        &:hover{
          background: #fff;
          color: var(--dark-font);
        }
      }
      > h2{
        font-size: 48px;
        line-height: 55px;
        color: #fff;
        text-align: center;
        font-weight: 800;
      }
    }

    > .pro-wrap{
      width: 100%;
      
      > .slide-wrap{
        width: 100%;

        > li{
          position: relative;
          width: 100%;
          background: #fff;
          border-radius: 9px;
          overflow: hidden;
          padding-bottom: var(--space-35);

          &:hover > .sub{
            opacity: 1;

            > p{transform: translateY(0);}
          }

          > div{
            padding: var(--space-35);
            box-sizing: border-box;

            &.sub{
              position: absolute;
              bottom: 0; left: 0;
              width: 100%; height: 100%;
              background: rgba(0, 0, 0, .5);
              opacity: 0;
              transition: opacity 0.5s ease-out;

              > p{
                color: #fff;
                word-break: keep-all;
                transform: translateY(600px);
                transition: transform 0.45s ease-out;
              }
            }
          }

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






  /* 솔루션 컨텐츠 */
  .solution{
    width: 100%;

    > .sol-wrap{
      width: 100%;

      > div{
        width: 33%;

        > .img{
          width: 100%;

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





  /* 파트너 컨텐츠 */
  .partner{
    width: 100%;

    > .part-wrap{
      width: 100%; height: 423px;

      > div{
        width:100%; height: 100%;
        border-radius: 9px;
        padding: var(--space-35);
        box-sizing: border-box;
        justify-content: flex-end;

        &.hr{
          width: 100%;
          flex: 2;
          background-image: url("/img/parkingN_Homepage/intro3.png");
          background-repeat: no-repeat;
          background-size: cover;

          > div > h3{color: #fff;}
        }

        &.quo{
          width: 100%;
          flex: 1;
          background: var(--background);
        }

        > .txt{
          margin-top: 0;
        }
      }
    }
  }










/* popup */
.popup{
  position: fixed;
  bottom: 70px; right: 55px;
  cursor: pointer;
  z-index: 10000;

  > .pop-wrap{
    background: var(--point-color);
    width: 45px; height: 45px;
    position: relative;

    > i{
      font-size: var(--tit-font);;
      color: #fff;
    }
  }

  > .pop-inner{
    display: none;
    position: absolute;
    bottom: calc(100% + 15px); right: 0;
    background: #fff;
    border: var(--base-border);
    padding: 35px 25px;
    box-sizing: border-box;
    min-width: 700px;

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

        > div{
          width: 100%;

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










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

  header{height: 65px;}





  main{
  margin-top: 0;

  /* 첫화면 영상 */
  > .video-wrap > div > .txt{
    width: 100%;

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





  /* UPCS 컨텐츠 */
  .intro{
    width: 100%;

    > .txt > h2{
      font-size: 37px;
      line-height: 50px;
    }
  }






  /* 솔루션 컨텐츠 */
  .product{
    width: 100%;
    background: var(--dark-font);

    > .tit{
      width: 100%;

      > a{
        padding: 0;
      }
      > h2{
        font-size: 37px;
        line-height: 55px;
      }
    }

    > .pro-wrap{
      width: 100%;
      
      > .slide-wrap{
        width: 100%;

        > li{
          width: 100%;

          &:hover > .sub{
            opacity: 0;
          }

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






  /* 솔루션 컨텐츠 */
  .solution{
    width: 100%;

    > .sol-wrap{
      width: 100%;
      align-items: flex-start;

      > div{
        width: 33%;
        text-align: center;

        > p{word-break: keep-all;}

        > .img{
          width: 100%;

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





  /* 파트너 컨텐츠 */
  .partner{
    width: 100%;

    > .part-wrap{
      height: 337px;

      > div{
        width:100%;

        &.hr{
          background-size: cover;
        }
      }
    }
  }
}




  .popup{display: none;}


}










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

main{
  margin-top: 0;

  /* 첫화면 영상 */
  > .video-wrap{
    height: 80dvh;

    > div{
      position: relative;
      width: 100%; height: 100%;

      > .txt{
        gap: var(--space-55);

        > h2{font-size: 26px;}
        > p{
          font-size: 15px;
          word-break: keep-all;
        }
      }
    }
  }





  /* UPCS 컨텐츠 */
  .intro{
    flex-direction: column;
    align-items: flex-start;

    > .txt{
      flex: 1;

      > h2{
        font-size: 28px;
        line-height: 45px;
      }
    }

    > .video{
      flex: 2;
      height: fit-content;

      > img{width: 100%;}
    }
  }






  /* 솔루션 컨텐츠 */
  .product{
    width: 100%;
    background: var(--dark-font);

    > .tit{
      width: 100%;

      > a{
        color: #fff;
        font-size: 15px;
        padding: 0;

        > i{font-size: 19px;}
      }
      > h2{
        font-size: 28px;
        line-height: 45px;
      }
    }

    > .pro-wrap{
      width: 100%;
      
      > .slide-wrap{
        flex-direction: column;

        > li{
          padding-bottom: 0;
          display: flex;
          justify-content: space-between;
          gap: var(--space-15);

          > div{
            padding: var(--space-35);
          }

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






  /* 솔루션 컨텐츠 */
  .solution{
    width: 100%;

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

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

        > .img{
          width: 100%; height: 200px;
          overflow: hidden;
          border-radius: 9px;

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

        > .txt{gap: 0;}
      }
    }
  }
} 





  /* 파트너 컨텐츠 */
  .partner{
    width: 100%;

    > .part-wrap{
      height: fit-content !important;
      flex-direction: column;

      > div{
        width:100%; height: 100%;
        border-radius: 9px;
        padding: var(--space-35);
        box-sizing: border-box;
        justify-content: flex-end;

        &.hr{
          width: 100%;
          flex: 2;
          background-image: url("/img/parkingN_Homepage/intro3.png");
          background-repeat: no-repeat;
          background-size: cover;

          > div > h3{color: #fff;}
        }

        &.quo{
          width: 100%;
          flex: 1;
          background: var(--background);
        }

        > .txt{
          margin-top: 0;
        }
      }
    }
  }

}