/* ==========================================================================
l-wrapper
========================================================================== */
.l-wrapper {
  width: 100%;
  position: relative;
}


/* ==========================================================================
l-main
========================================================================== */
.l-main {
  padding-top: 80px;
  display: block;
}

@media screen and (max-width: 1024px) {
  .l-main {
    padding-top: 60px;
  }
}


/* ==========================================================================
l-single
========================================================================== */
.l-single {
  max-width: 1200px;
  padding: 60px 20px 100px 20px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .l-single {
    padding: 37px 5.33333vw 35px;
  }
}


/* ==========================================================================
l-container
========================================================================== */
.l-container {
  max-width: 1400px;
  padding: 60px 20px 100px 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

@media screen and (max-width: 768px) {
  .l-container {
    display: block;
    padding: 37px 5.33333vw 35px;
  }
}


/* ==========================================================================
l-content
========================================================================== */
.l-content {
  flex: 1;
  margin-right: 4.41176%;
}

.l-content>*:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .l-content {
    flex: 1;
    margin-right: 0;
    margin-bottom: 50px;
  }
}



/* ==========================================================================
l-header
========================================================================== */
.l-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: .25s;
}

.l-header.is-active {
  box-shadow: 0 6px 7px rgb(0 0 0 / 8%);
}


/* ==========================================================================
l-side-bar
========================================================================== */
.l-sidebar {
  width: 320px;
  position: relative;
}

@media screen and (max-width: 768px) {
  .l-sidebar {
    width: 100%;
  }
}


/* ==========================================================================
l-footer
========================================================================== */
.l-footer {
  width: 100%;
  position: relative;
}


/* ==========================================================================
l-breadcrumb
========================================================================== */
.l-breadcrumb {
  max-width: 1400px;
  padding: 40px 20px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .l-breadcrumb {
    padding: 10px 4vw;
  }
}


/* ==========================================================================
l-page-title
========================================================================== */
.l-page-title {
  width: 100%;
  position: relative;
}


/* ==========================================================================
l-recruit
========================================================================== */
.l-recruit {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}



/* ==========================================================================
l-interview
========================================================================== */
.l-interview {
  max-width: 1140px;
  padding: 75px 20px 65px 20px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .l-interview {
    padding: 30px 8vw 55px;
  }
}