/*font-size*/
/*colors*/
/*path*/
#explore main {
  position: relative;
  padding-bottom: 2em; }

#explore main::after {
  content: '';
  display: none;
  bottom: 0;
  width: calc(100vw - 2rem);
  border: 1px solid #f6c800;
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 1rem; }

#explore .title {
  width: calc(4em + (.87px * 4)); }

#explore .cates {
  margin-bottom: 3rem; }

#explore .cates .cate {
  position: relative; }

#explore .cates .cate:hover figcaption {
  -webkit-transform: translateY(-0.5em);
  -ms-transform: translateY(-0.5em);
  transform: translateY(-0.5em); }

#explore .cates .cate:hover .en {
  opacity: 1; }

#explore .cates a {
  display: block;
  position: relative; }

#explore .cates figcaption {
  text-align: center;
  position: absolute;
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .1em;
  -webkit-transition: .4s ease-out;
  -o-transition: .4s ease-out;
  transition: .4s ease-out;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

#explore .cates img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover; }

#explore .cates .en {
  display: block;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.3;
  opacity: 0;
  -webkit-transition: .3s ease-out;
  -o-transition: .3s ease-out;
  transition: .3s ease-out; }

#explore .cates._popular .cate::after, #explore .cates._all .cate::before,
#explore .cates._all .cate::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; }

#explore .cates._popular {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  margin-right: -1rem; }

#explore .cates._popular .cate {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 37.5vw;
  flex: 0 0 37.5vw;
  margin-right: 10px;
  -webkit-overflow-scrolling: touch; }

#explore .cates._popular a {
  border-radius: 10px;
  overflow: hidden;
  padding-top: 129.41176%;
  border: 2px solid #00c2de; }

#explore .cates._popular .cate::after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); }

#explore .cates._popular figcaption {
  bottom: 1em;
  z-index: 2; }

#explore .cates._all {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px; }

#explore .cates._all a {
  padding-top: 68.62745%; }

#explore .cates._all .cate::before,
#explore .cates._all .cate::after {
  z-index: 1;
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out; }

#explore .cates._all .cate::after {
  background: rgba(0, 0, 0, 0.5);
  z-index: 2; }

#explore .cates._all ._back::before {
  background: -webkit-linear-gradient(42.96deg, rgba(255, 47, 0, 0.87) 0%, rgba(255, 128, 103, 0.15) 74.32%, rgba(254, 186, 60, 0) 100%);
  background: -o-linear-gradient(42.96deg, rgba(255, 47, 0, 0.87) 0%, rgba(255, 128, 103, 0.15) 74.32%, rgba(254, 186, 60, 0) 100%);
  background: linear-gradient(47.04deg, rgba(255, 47, 0, 0.87) 0%, rgba(255, 128, 103, 0.15) 74.32%, rgba(254, 186, 60, 0) 100%); }

#explore .cates._all ._front::before {
  background: -webkit-linear-gradient(47.74deg, #007AFF 0%, rgba(4, 216, 255, 0.1) 80.66%, rgba(254, 186, 60, 0) 100%);
  background: -o-linear-gradient(47.74deg, #007AFF 0%, rgba(4, 216, 255, 0.1) 80.66%, rgba(254, 186, 60, 0) 100%);
  background: linear-gradient(42.26deg, #007AFF 0%, rgba(4, 216, 255, 0.1) 80.66%, rgba(254, 186, 60, 0) 100%); }

#explore .cates._all .cate:hover::before {
  opacity: 0; }

#explore .cates._all figcaption {
  top: 50%;
  margin-top: -.85em;
  z-index: 3; }

@media screen and (min-width: 600px) {
  #explore .cates._popular {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: hidden;
    margin-right: 0; }
  #explore .cates._popular .cate {
    margin-right: 0; }
  #explore .cates._all {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr; } }

@media screen and (min-width: 860px) {
  #explore .cates._all,
  #explore .cates._popular {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem; } }