/**
 * transitions
 */
/**
 * base
 */
html,
body {
  width: 100%;
  background: #000;
  font: 400 16px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
  overflow-x: hidden; }

a {
  color: inherit; }
  a:link, a:visited, a:active {
    color: inherit; }

img {
  max-width: 100%; }

article {
  color: #FFF; }

h1 {
  font-size: 2.25rem;
  letter-spacing: 2.7px;
  line-height: 1.62;
  font-weight: bold; }

h2 {
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  line-height: 1.62;
  font-weight: bold; }

ul {
  list-style: none;
  padding: 0; }

p {
  letter-spacing: 1.2px; }

/**
 * loading
 */
.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
  transition: 1.8s ease-in-out; }
  .loading.is-loading {
    opacity: .8;
    visibility: visible; }

.logo.is-loading {
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%); }
@media (max-width: 767px) {
  .logo {
    position: relative; } }
.logo.is-hide {
  visibility: hidden; }

/**
 * anim
 */
.mask, .mask-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; }

.mask {
  background: linear-gradient(transparent 30%, #000); }
  @media (min-width: 768px) {
    .mask {
      display: none; } }

.mask-2 {
  background: rgba(0, 0, 0, 0.5); }
  @media (min-width: 768px) {
    .mask-2 {
      display: none; } }

/**
 * layout
 */
.icon {
  max-width: 100%; }

.logo {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 2rem;
  z-index: 99;
  transition: 1.2s ease-in-out; }
  @media (max-width: 767px) {
    .logo {
      opacity: 0;
      left: 50%;
      bottom: 50%;
      transition: opacity 1.2s ease-in-out;
      transform: translate(-50%, 50%); }
      .logo.is-loading {
        opacity: 1; } }

.main * {
  transition: opacity 1.8s ease-in-out;
  opacity: 0; }

.main {
  z-index: 1; }
  .main.is-active * {
    opacity: 1; }
  .main .main-title,
  .main .sub-title,
  .main .content,
  .main .info {
    padding-left: 0; }
  .main .main-title {
    white-space: nowrap; }
  .main p {
    line-height: 1.8; }
  .main .info {
    line-height: 1.8;
    margin: 1.5em 0; }
  .main .logo--mobile {
    display: none; }
    @media (max-width: 767px) {
      .main .logo--mobile {
        margin: 50px auto;
        display: block;
        display: none; } }
  .main .img-traffic {
    padding-left: 0;
    margin-bottom: 20px; }
    @media (max-width: 767px) {
      .main .img-traffic {
        margin: 50px auto;
        display: block; } }
  .main .back-home {
    display: block;
    margin: 0 auto 20px;
    border-radius: 0;
    color: #555;
    font: 400 16px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif; }
  @media (min-width: 768px) {
    .main {
      background: linear-gradient(to right, transparent 0%, black 50%);
      padding-left: 8vw; } }
  @media (max-width: 767px) {
    .main {
      z-index: 9;
      width: 90%;
      margin: 80vh auto 30px; } }

.kv {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%; }
  .kv img {
    height: 100%;
    height: 100vh;
    width: 100%;
    object-fit: cover; }
  .kv.compat-object-fit {
    background-size: cover;
    background-position: center center;
    height: 100%; }
    .kv.compat-object-fit img {
      display: none; }

/**
 * vendors custom
 */
.lightbox .content {
  background: transparent; }
.lightbox .close {
  top: 0;
  right: -2em;
  opacity: .5; }
  @media (max-width: 767px) {
    .lightbox .close {
      top: .5em;
      right: .5em; } }
  .lightbox .close:hover {
    opacity: .8; }
  .lightbox .close .icon {
    width: 25px;
    height: 25px; }
.lightbox .img-traffic {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

/*# sourceMappingURL=main.css.map */