/* - - - Division - - - */

/* .grid */
.grid {
  font-size:0;
  line-height:0;
}
.grid + .grid {
  margin-top:30px;
}
.grid.main {
  display:grid;
  grid-gap:30px; grid-template-columns:repeat(3, 1fr);
}
.grid a {
  font-size:0;
    width:100%; height:100%;
    z-index:5;
      pointer-events:all;
      position:absolute;
      top:0; left:0;
}

/* .gridItem */
.gridItem {
  text-align:center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor:hand; cursor:pointer;
    position:relative;
    top:0;
}
.grid.head .gridItem {
  width:100%; height:540px;
}
.grid.main .gridItem {
  min-width:33.33%; height:100%; min-height:320px;
   display:inline-block;
}
.gridItem:after {
  content:'';
    background-color:#fff;
    width:100%; height:100%;
    z-index:2;
      opacity:0;
      position:absolute;
      top:0; left:0;
}
.gridItem:before {
  content:'';
    background-color:#eee;
    width:0%; height:10px;
    z-index:1;
      opacity:0;
      position:absolute;
      bottom:0; left:0;
}

/* .grid .graphic */
.grid .graphic {
  background-position:center; background-repeat:no-repeat; background-size:cover;
  width:100%; height:100%;
    position:absolute;
    top:0; left:0;
}

/* .grid .info, .grid .name */
.grid .info,
.grid .name {
  width:80%;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
}
.grid .info {
  font-size:16px;
  line-height:27px;
  text-align:justify;
    z-index:3;
      opacity:0;
}
.grid.head .info {
  max-width:540px;
}
.grid.main .info {
  max-width:450px;
}
.grid .info hr {
  margin:10px 0;
}
.grid .info .author {
  color:#1777ff;
  font-style:italic;
}
.grid .info .credit {
  color:rgba(0, 0, 0, 0.3);
  font-style:italic;
}
.grid .name {
  color:#fff;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-style:italic; font-weight:900;
  text-align:center;
    z-index:1;
}
.grid.head .name {
  font-size:80px;
  line-height:72px;
  text-shadow:5px 5px #000;
  -webkit-text-stroke:1px #000;
}
.grid.main .name {
  font-size:32px;
  line-height:32px;
  text-shadow:2px 2px #000;
  -webkit-text-stroke:1px rgba(0, 0, 0, 0.5);
    max-width:540px;
}

/* .grid .tag */
.grid .tag {
  color:#fff;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
  line-height:40px;
  white-space:nowrap;
    background-color:#000;
    min-width:40px; height:40px;
    z-index:4;
      position:absolute;
      top:0; left:50%;
      transform:translateX(-50%);
}
.grid .tag image, .grid .tag img, .grid .tag svg, .grid .tag span {
  vertical-align:middle;
}
.grid .tag image, .grid .tag img, .grid .tag svg {
  height:32px;
    margin:-3px 0 0 3px;
}
.grid .tag image.black,
.grid .tag img.black {
  display:none;
}
.grid .tag image.white,
.grid .tag img.white {
  display:inline-block;
}
.grid .tag svg g {
  fill:#fff;
}
.grid .tag span {
  margin:0 8px 0 -3px;
}

/* .grid .time */
.grid .time {
  color:#000;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
  line-height:30px;
    z-index:3;
      opacity:0;
      position:absolute;
      right:40px; bottom:10px;
}
.grid .time:after {
  content:'';
    background-image:url(/base/assets/icon/general/time/black.png);
    background-image:url(/base/assets/icon/general/time/black.svg);
    background-position:center; background-repeat:no-repeat; background-size:32px;
    width:32px; height:32px;
      position:absolute;
      top:-2px; right:-30px;
}

/* - - - Responsive - - - */

/* battle station */
@media screen and (min-width:2160px) {

 /* .gridItem */
 .grid.head .gridItem {
   height:640px;
 }
 .grid.main .gridItem {
   min-height:400px;
 }

 /* .grid .info, .grid .name */
 .grid.head .name {
   font-size:100px;
   line-height:90px;
   text-shadow:6px 6px #000;
   -webkit-text-stroke:2px #000;
 }
 .grid.main .name {
   font-size:40px;
   line-height:40px;
   text-shadow:3px 3px #000;
 }

}

/* laptop */
@media screen and (max-width:1439px) {

 /* .grid */
 .grid.main {
   grid-template-columns:repeat(2, 1fr);
 }

 /* .gridItem */
 .grid.main .gridItem {
   min-width:50%;
 }

}

/* tablet */
@media screen and (max-width:1079px) {

  /* .gridItem */
  .grid.head .gridItem {
    height:440px;
  }

  /* .grid .info, .grid .name */
  .grid.head .name {
    font-size:54px;
    line-height:48px;
    text-shadow:4px 4px #000;
  }
  .grid.main .name {
    font-size:24px;
    line-height:24px;
    text-shadow:1.5px 1.5px #000;
  }

}

/* mobile */
@media screen and (max-width:799px) {

  /* .grid */
  .grid + .grid {
    margin-top:1px;
  }
  .grid.main {
    grid-gap:1px; grid-template-columns:repeat(1, 1fr);
  }

  /* .gridItem */
  .grid.head .gridItem {
    height:auto; min-height:300px;
  }
  .grid.main .gridItem {
    width:50%; min-height:240px;
      display:block;
      margin-bottom:1px;
  }
  .grid.main .gridItem a {
    width:200%;
  }

  /* .grid .graphic */
  .grid.head .graphic {
    height:300px;
      margin-bottom:20px;
      position:relative;
  }
  .grid.main .graphic {
    left:100%;
  }

  /* .grid .info, .grid .name */
  .grid .info,
  .grid.main .name {
    text-align:left;
      position:relative;
      top:0; left:0;
      transform:translate(0, 0);
  }
  .grid.main .info,
  .grid.main .name {
    width:90%;
  }
  .grid .info {
    line-height:25px;
      opacity:1;
      padding-bottom:55px;
  }
  .grid.head .info {
    width:100%;
  }
  .grid .info hr {
    height:0;
      margin:0 0 15px;
  }
  .grid .info .author {
    color:rgba(0, 0, 0, 0.3);
  }
  .grid.head .name {
    font-size:32px;
    line-height:30px;
    text-shadow:2px 2px #000;
    -webkit-text-stroke:1px rgba(0, 0, 0, 0.5);
      top:150px;
        transform:translateY(-150px;);
  }
  .grid.main .name {
    color:#1777ff;
    font-size:16px; font-style:normal; font-weight:500;
    line-height:20px;
    text-shadow:0 0 transparent;
    -webkit-text-stroke:1px transparent;
      margin:20px 0 15px;
  }

  /* .grid .tag */
  .grid.main .tag {
    top:50%; right:-100%; left:auto;
    transform:translate(0, -50%);
  }
  .grid.main .tag image, .grid.main .tag img, .grid.main .tag svg {
    margin:-3px 0 0;
  }
  .grid.main .tag span {
    display:none;
  }

  /* .grid .time */
  .grid .time {
    opacity:0.3;
  }

}

/* - - - Exception - - - */

/* desktop */
@media screen and (pointer:fine) and (min-width:799px) {

  /* .gridItem */
  .gridItem:hover {
    box-shadow:0 5px 7px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
      top:-5px;
  }
  .gridItem:hover:after {
    opacity:1;
  }
  .gridItem:hover:before {
    width:100%;
      opacity:1;
  }

  /* .grid .info, .grid .time */
  .gridItem:hover .info, .gridItem:hover .time {
    opacity:1;
  }

}

/* - - - Animation - - - */

/* .gridItem */
.gridItem, .gridItem:after {
  transition:box-shadow 0.15s ease-in-out, opacity 0.3s ease-in-out, top 0.15s ease-in-out;
  -o-transition:box-shadow 0.15s ease-in-out, opacity 0.3s ease-in-out, top 0.15s ease-in-out;
  -ms-transition:box-shadow 0.15s ease-in-out, opacity 0.3s ease-in-out, top 0.15s ease-in-out;
  -moz-transition:box-shadow 0.15s ease-in-out, opacity 0.3s ease-in-out, top 0.15s ease-in-out;
  -webkit-transition:box-shadow 0.15s ease-in-out, opacity 0.3s ease-in-out, top 0.15s ease-in-out;
}
.grid.head .gridItem:hover, .grid.head .gridItem:hover:after {
  transition:box-shadow 0.2s ease-in-out 0.7s, opacity 0.2s ease-in-out 0.7s, top 0.3s ease-in-out 0.7s;
  -o-transition:box-shadow 0.2s ease-in-out 0.7s, opacity 0.2s ease-in-out 0.7s, top 0.3s ease-in-out 0.7s;
  -ms-transition:box-shadow 0.2s ease-in-out 0.7s, opacity 0.2s ease-in-out 0.7s, top 0.3s ease-in-out 0.7s;
  -moz-transition:box-shadow 0.2s ease-in-out 0.7s, opacity 0.2s ease-in-out 0.7s, top 0.3s ease-in-out 0.7s;
  -webkit-transition:box-shadow 0.2s ease-in-out 0.7s, opacity 0.2s ease-in-out 0.7s, top 0.3s ease-in-out 0.7s;
}
.grid.main .gridItem:hover, .grid.main .gridItem:hover:after {
  transition:box-shadow 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.4s, top 0.3s ease-in-out 0.4s;
  -o-transition:box-shadow 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.4s, top 0.3s ease-in-out 0.4s;
  -ms-transition:box-shadow 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.4s, top 0.3s ease-in-out 0.4s;
  -moz-transition:box-shadow 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.4s, top 0.3s ease-in-out 0.4s;
  -webkit-transition:box-shadow 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.4s, top 0.3s ease-in-out 0.4s;
}
.gridItem:before {
  transition:width 0.3s ease-out, opacity 0.1s ease-in-out;
  -o-transition:width 0.3s ease-out, opacity 0.1s ease-in-out;
  -ms-transition:width 0.3s ease-out, opacity 0.1s ease-in-out;
  -moz-transition:width 0.3s ease-out, opacity 0.1s ease-in-out;
  -webkit-transition:width 0.3s ease-out, opacity 0.1s ease-in-out;
}
.grid.head .gridItem:hover:before {
  transition:width 0.8s linear;
  -o-transition:width 0.8s linear;
  -ms-transition:width 0.8s linear;
  -moz-transition:width 0.8s linear;
  -webkit-transition:width 0.8s linear;
}
.grid.main .gridItem:hover:before {
  transition:width 0.5s linear;
  -o-transition:width 0.5s linear;
  -ms-transition:width 0.5s linear;
  -moz-transition:width 0.5s linear;
  -webkit-transition:width 0.5s linear;
}

/* .grid .info, .grid .time */
.grid .info, .grid .time {
  transition:opacity 0.1s linear;
  -o-transition:opacity 0.1s linear;
  -ms-transition:opacity 0.1s linear;
  -moz-transition:opacity 0.1s linear;
  -webkit-transition:opacity 0.1s linear;
}
.grid.head .gridItem:hover .info, .grid.head .gridItem:hover .time {
  transition:opacity 0.2s linear 0.8s;
  -o-transition:opacity 0.2s linear 0.8s;
  -ms-transition:opacity 0.2s linear 0.8s;
  -moz-transition:opacity 0.2s linear 0.8s;
  -webkit-transition:opacity 0.2s linear 0.8s;
}
.grid.main .gridItem:hover .info, .grid.main .gridItem:hover .time {
  transition:opacity 0.2s linear 0.5s;
  -o-transition:opacity 0.2s linear 0.5s;
  -ms-transition:opacity 0.2s linear 0.5s;
  -moz-transition:opacity 0.2s linear 0.5s;
  -webkit-transition:opacity 0.2s linear 0.5s;
}