@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Squada One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400&display=swap');
@import url("https://font.emtech.cc/css/LINESeedTW?weight=400");
@import url("https://font.emtech.cc/css/LINESeedJP?weight=400");


:root {
  color:#c4c4c4;
  font-family:'Outfit', 'LINESeedTW','LINESeedJP', -apple-system;
  font-weight:400;
  letter-spacing:1px;
  text-transform:uppercase;
}
body {
  background:#191919;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
::-webkit-scrollbar {
  display:none;
}


div#loading {
  background: #191919;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 9998;
  -webkit-backface-visibility: hidden;
  display: block;
}


nav {
  width:320px;
  height:calc(100% - 60px);
  position:fixed;
  top:0;
  right:-180px;
  margin-top:30px;
  z-index:9899;
}
nav div {
  background:rgba(24,24,24,0);
  width:320px;
  height:calc(100% - 60px);
  position:fixed;
  top:0;
  right:-180px;
  margin-top:30px;
  border-radius:47px;
  transition:.13s;
}
nav:hover div {
  background:rgba(31,31,31,1);
  right:30px;
  transition:.13s
}
nav div p {
  width:100%;
  position:absolute;
  top:calc(50% - 17px);
  right:0;
  transform:translateY(-50%);
}
nav div p a {
  width:58%;
  height:34px;
  position:relative;
  left:50%;
  margin:11px 0 0 calc(-29% - 31px);
  padding:0 30px 0 32px;
  border-radius:60px;
  color:#949494;
  font-family:'Anton', -apple-system;
  font-size:15px;
  text-decoration:none;
  text-align:center;
  line-height:34px;
  display:block;
  opacity:0;
  z-index:9899;
  transition:.13s;
}
nav:hover div p a {
  opacity:1;
  transition:.13s;
}
nav div p a:hover {
  transform:scale(1.18);
  transform-origin:center;
  transition:.13s;
}


div.anchor {
  width:1px;
  height:0;
}
div.block {
  position:relative;
  padding:19px 0 74px 0;
  z-index:9000;
}
h1 {
  height:224px;
  margin:0;
  padding:0 31px 10px 49px;
  color:#a4a4a4;
  font-family:'Anton', -apple-system;
  font-size:174px;
  font-weight:400;
  letter-spacing:-4px;
  overflow:hidden;
}
h1.h1desktop {
  display:block;
}
h1.h1mobile {
  display:none;
}


ul, li {
  padding:0;
  list-style:none;
}
ul {
  margin:4px 28px;
  padding-right:20px;
}
li {
  height:36px;
  position:relative;
  margin:7px 0 7px 9px;
  border-radius:18px;
  display:inline-block;
  transition:.13s;
}
li:hover {
  transform:scale(1.13);
  transition:.13s;
  z-index:9888;
}
li a {
  position:relative;
  padding:0 20px;
  color:#404040;
  font-size:15px;
  text-decoration:none;
  line-height:36px;
  display:block;
}
li span.name {
  opacity:1;
  transition:.13s;
}
li:hover span.name {
  opacity:0;
}
li span.en {
  position:relative;
  top:-0.4px;
}
li img {
  position:absolute;
  top:50%;
  left:50%;
  height:26px;
  margin:-13px 0 0 -32.5px;
  opacity:0;
  transition:.13s;
  z-index:9889;
}
li:hover img {
  opacity:1;
}


#main-block {
  transition:.13s;
  pointer-events:none;
}
#main-block > * {
  pointer-events:auto;
}
#main-block > img {
  pointer-events:none;
}
#main-block:hover > div.block h1 {
  color:rgba(74,74,74,0.19);
  transition:.13s;
}
#main-block > div.block:hover h1 {
  color:#a4a4a4;
  transition:.13s;
}
#main-block:hover > div.block a {
  color:rgba(74,74,74,0.19);
  transition:.13s;
}
#main-block > div.block:hover a {
  color:#a4a4a4;
  transition:.13s;
}


img.large-img {
  position:fixed;
  bottom:-4vh;
  right:4vh;
  height:80vh;
  opacity:0;
  transition:.13s;
  z-index:8999;
}
#myk-block:hover ~ img#myk-image,
#syd-block:hover ~ img#syd-image,
#melb-block:hover ~ img#melb-image,
#jp-block:hover ~ img#jp-image,
#yankees-block:hover ~ img#yankees-image,
#hanshintigers-block:hover ~ img#hanshintigers-image,
#swans-block:hover ~ img#swans-image,
#acm-block:hover ~ img#acm-image,
#adidas-block:hover ~ img#adidas-image,
#apple-block:hover ~ img#apple-image,
#sony-block:hover ~ img#sony-image,
#cx-block:hover ~ img#cx-image,
#asiamiles-block:hover ~ img#asiamiles-image,
#news-block:hover ~ img#news-image,
#scandal-block:hover ~ img#scandal-image,
#online-block:hover ~ img#online-image,
#streaming-block:hover ~ img#streaming-image {
  opacity:.37;
}




/* iPad Pro */
@media only screen and (min-width: 834px) and (max-width: 1194px)  {
  h1 {
    height:110px;
    padding-left:42px;
    font-size:100px;
  }
  li a {
    padding:0 1vw;
    font-size:1vw;
  }
}




/* MOBILE */

@media only screen and (max-device-width : 1023px) and (orientation: portrait) {
  body {
    background:#fff;
  }
  div#loading {
    background: #fff;
  }
  nav div {
    background:rgba(247,247,247,0);
  }
  nav:hover div {
    background:rgba(247,247,247,1);
  }
  nav div p {
    top:calc(50% - 17px);
  }
  nav div p a {
    height:6.2vw;
    border-radius:3.1vw;
    color:#000;
    font-size:2.4vw;
    line-height:6.2vw;
  }
  nav div p a:hover {
    transform:scale(1);
  }
  div.block {
    padding:0.4vh 0 3.1vh 0;
  }
  h1 {
    height:32.7vw;
    margin-top:4vh;
    margin-bottom:0;
    margin-left:2.4vw;
    color:#cfcfcf;
    font-size:24.3vw;
    letter-spacing:-0.4vw;
  }
  h1.h1desktop {
    display:none;
  }
  h1.h1mobile {
    display:block;
  }
  ul {
    margin:4px 0;
    margin-bottom:4vh;
    padding-right:20px;
  }
  li {
    width:94vw;
    height:5.6vh;
    margin:0 0 0 2vw;
    border-radius:3vh;
  }
  li:hover {
    transform:scale(1);
  }
  li a {
    padding:0 6vw;
    color:#000;
    font-size:3.2vw;
    line-height:5.6vh;
    border-radius:2.8vh;
  }
  li:hover span {
    opacity:1;
  }
  li span.en {
    position:relative;
    top:-0.1vw;
  }
  li:hover img {
    opacity:0;
  }
  #myk-block:hover ~ img#myk-image,
  #syd-block:hover ~ img#syd-image,
  #melb-block:hover ~ img#melb-image,
  #jp-block:hover ~ img#jp-image,
  #yankees-block:hover ~ img#yankees-image,
  #hanshintigers-block:hover ~ img#hanshintigers-image,
  #swans-block:hover ~ img#swans-image,
  #acm-block:hover ~ img#acm-image,
  #adidas-block:hover ~ img#adidas-image,
  #apple-block:hover ~ img#apple-image,
  #sony-block:hover ~ img#sony-image,
  #cx-block:hover ~ img#cx-image,
  #asiamiles-block:hover ~ img#asiamiles-image,
  #news-block:hover ~ img#news-image,
  #scandal-block:hover ~ img#scandal-image,
  #online-block:hover ~ img#online-image,
  #streaming-block:hover ~ img#streaming-image {
    opacity:0;
  }
  #main-block:hover > div.block h1 {
    color:rgba(0,0,0,1);
    transition:.13s;
  }
  #main-block > div.block:hover h1 {
    color:rgba(0,0,0,1);
    transition:.13s;
  }
  #main-block:hover > div.block a {
    color:rgba(0,0,0,1);
    transition:.13s;
  }
  #main-block > div.block:hover a {
    color:rgba(0,0,0,1);
    transition:.13s;
  }
}




@media only screen and (min-device-width : 1024px) and (orientation: landscape) {
  /* myk */
  div#myk-block a:hover, a#nav-myk:hover {
    color:#000;
  }
  div#myk-block li:hover, a#nav-myk:hover {
    background:#fff;
  }


  /* hong kong */
  div#hk-block a:hover, a#nav-hk:hover {
    color:#fff;
  }
  div#hk-block li:hover, a#nav-hk:hover {
    background:#11243d;
  }


  /* sydney */
  div#syd-block a:hover, a#nav-syd:hover {
    color:#fff;
  }
  div#syd-block li:hover, a#nav-syd:hover {
    background:#009fb5;
  }


  /* melbourne */
  div#melb-block a:hover, a#nav-melb:hover {
    color:#fff;
  }
  div#melb-block li:hover, a#nav-melb:hover {
    background:#171a22;
  }


  /* japan */
  div#jp-block a:hover, a#nav-jp:hover {
    color:#fff;
  }
  div#jp-block li:hover, a#nav-jp:hover {
    background:#11243d;
  }


  /* yankees */
  div#yankees-block a:hover {
    color:#11243d;
  }
  a#nav-yankees:hover {
    color:#fff;
  }
  div#yankees-block li:hover {
    background:#11243d;
  }
  a#nav-yankees:hover {
    background:#11243d;
  }


  /* hanshintigers */
  div#hanshintigers-block a:hover, a#nav-hanshintigers:hover {
    color:#fff;
  }
  div#hanshintigers-block li:hover, a#nav-hanshintigers:hover {
    background:#000;
  }


  /* swans */
  div#swans-block a:hover, a#nav-swans:hover {
    color:#fff;
  }
  div#swans-block li:hover, a#nav-swans:hover {
    background:#be1020;
  }


  /* ac milan */
  div#acm-block a:hover, a#nav-acm:hover {
    color:#fff;
  }
  div#acm-block li:hover {
    background:#000;
  }
  a#nav-acm:hover {
    background:#820000;
  }


  /* adidas */
  div#adidas-block a:hover, a#nav-adidas:hover {
    color:#fff;
  }
  div#adidas-block li:hover, a#nav-adidas:hover {
    background:#000;
  }


  /* apple */
  div#apple-block a:hover, a#nav-apple:hover {
    color:#fff;
  }
  div#apple-block li:hover, a#nav-apple:hover {
    background:#070707;
  }


  /* sony */
  div#sony-block a:hover, a#nav-sony:hover {
    color:#fff;
  }
  div#sony-block li:hover, a#nav-sony:hover {
    background:#000;
  }


  /* cx */
  div#cx-block a:hover, a#nav-cx:hover {
    color:#fff;
  }
  div#cx-block li:hover, a#nav-cx:hover {
    background:#006564;
  }


  /* asiamiles */
  div#asiamiles-block a:hover, a#nav-asiamiles:hover {
    color:#000;
  }
  div#asiamiles-block li:hover, a#nav-asiamiles:hover {
    background:#facf00;
  }


  /* news */
  div#news-block a:hover, a#nav-news:hover {
    color:#fff;
  }
  div#news-block li:hover, a#nav-news:hover {
    background:#000;
  }


  /* scandal */
  div#scandal-block a:hover, a#nav-scandal:hover {
    color:#fff;
  }
  div#scandal-block li:hover, a#nav-scandal:hover {
    background:#070707;
  }


  /* social */
  div#social-block a:hover, a#nav-social:hover {
    color:#fff;
  }
  div#social-block li:hover, a#nav-social:hover {
    background:#070707;
  }


  /* online */
  div#online-block a:hover, a#nav-online:hover {
    color:#fff;
  }
  div#online-block li:hover, a#nav-online:hover {
    background:#070707;
  }


  /* streaming */
  div#streaming-block a:hover, a#nav-streaming:hover {
    color:#fff;
  }
  div#streaming-block li:hover, a#nav-streaming:hover {
    background:#2973d5;
  }







  /* whitedarkgrey */
  li.whitedarkgrey a:hover {
    color:#242424 !important;
  }
  div li.whitedarkgrey:hover {
    background:#fff !important;
  }


  /* lightgreyblack */
  li.lightgreyblack a:hover {
    color:#000 !important;
  }
  div li.lightgreyblack:hover {
    background:#f8f8f8 !important;
  }


  /* darkgreywhite */
  li.darkgreywhite a:hover {
    color:#fff !important;
  }
  div li.darkgreywhite:hover {
    background:#070707 !important;
  }


  /* blackwhite */
  li.blackwhite a:hover {
    color:#fff !important;
  }
  div li.blackwhite:hover {
    background:#000 !important;
  }


  /* blackyellow */
  li.blackyellow a:hover {
    color:#ffcc00 !important;
  }
  div li.blackyellow:hover {
    background:#000 !important;
  }


  /* blackred */
  li.blackred a:hover {
    color:#ff3737 !important;
  }
  div li.blackred:hover {
    background:#000 !important;
  }


  /* blackbluerepeat */
  li.blackbluerepeat a:hover {
    color:#fff !important;
  }
  div li.blackbluerepeat:hover {
    background:repeating-linear-gradient(to right, #000, #000 13px, #00376a 13px, #00376a 26px) !important;
  }


  /* orangewhite */
  li.orangewhite a:hover {
    color:#fff !important;
  }
  div li.orangewhite:hover {
    background:#ff7e00 !important;
  }


  /* brownwhite */
  li.brownwhite a:hover {
    color:#fff !important;
  }
  div li.brownwhite:hover {
    background:#4d2004 !important;
  }


  /* darkyellow */
  li.darkyellow a:hover {
    color:#ffcc00 !important;
  }
  div li.darkyellow:hover {
    background:#1b1800 !important;
  }


  /* yellowblack */
  li.yellowblack a:hover {
    color:#000 !important;
  }
  div li.yellowblack:hover {
    background:#ffcc00 !important;
  }


  /* yellownavy */
  li.yellownavy a:hover {
    color:#11243d !important;
  }
  div li.yellownavy:hover {
    background:#ffcc00 !important;
  }


  /* orangeyellowwhite */
  li.orangeyellowwhite a:hover {
    color:#fff !important;
  }
  div li.orangeyellowwhite:hover {
    background:#ffa200 !important;
  }


  /* orangewhite */
  li.orangewhite a:hover {
    color:#fff !important;
  }
  div li.orangewhite:hover {
    background:#ff7e00 !important;
  }


  /* redwhite */
  li.redwhite a:hover {
    color:#fff !important;
  }
  div li.redwhite:hover {
    background:#770000 !important;
  }


  /* redyellow */
  li.redyellow a:hover {
    color:#ffcc00 !important;
  }
  div li.redyellow:hover {
    background:#770000 !important;
  }


  /* darkredwhite */
  li.darkredwhite a:hover {
    color:#fff !important;
  }
  div li.darkredwhite:hover {
    background:#4d0000 !important;
  }


  /* lightredwhite */
  li.lightredwhite a:hover {
    color:#fff !important;
  }
  div li.lightredwhite:hover {
    background:#c80000 !important;
  }


  /* purplewhite */
  li.purplewhite a:hover {
    color:#fff !important;
  }
  div li.purplewhite:hover {
    background:#33058d !important;
  }


  /* magentawhite */
  li.magentawhite a:hover {
    color:#fff !important;
  }
  div li.magentawhite:hover {
    background:#930050 !important;
  }


  /* darkmagentawhite */
  li.darkmagentawhite a:hover {
    color:#fff !important;
  }
  div li.darkmagentawhite:hover {
    background:#54002e !important;
  }


  /* darkmagenta */
  li.darkmagenta a:hover {
    color:#f479ff !important;
  }
  div li.darkmagenta:hover {
    background:#2a0d54 !important;
  }


  /* darkmagentawhite */
  li.darkmagentawhite a:hover {
    color:#fff !important;
  }
  div li.darkmagentawhite:hover {
    background:#460049 !important;
  }


  /* magentawhite */
  li.magentawhite a:hover {
    color:#fff !important;
  }
  div li.magentawhite:hover {
    background:#800085 !important;
  }


  /* lightmagentawhite */
  li.lightmagentawhite a:hover {
    color:#fff !important;
  }
  div li.lightmagentawhite:hover {
    background:#ad5db0 !important;
  }


  /* navywhite */
  li.navywhite a:hover {
    color:#fff !important;
  }
  div li.navywhite:hover {
    background:#11243d !important;
  }


  /* navyyellow */
  li.navyyellow a:hover {
    color:#ffcc00 !important;
  }
  div li.navyyellow:hover {
    background:#11243d !important;
  }


  /* navyred */
  li.navyred a:hover {
    color:#ff3737 !important;
  }
  div li.navyred:hover {
    background:#11243d !important;
  }


  /* darkblue */
  li.darkblue a:hover {
    color:#00deff !important;
  }
  div li.darkblue:hover {
    background:#001e23 !important;
  }


  /* bluewhite */
  li.bluewhite a:hover {
    color:#fff !important;
  }
  div li.bluewhite:hover {
    background:#2275c2 !important;
  }


  /* lightbluewhite */
  li.lightbluewhite a:hover {
    color:#fff !important;
  }
  div li.lightbluewhite:hover {
    background:#00baff !important;
  }


  /* palebluewhite */
  li.palebluewhite a:hover {
    color:#fff !important;
  }
  div li.palebluewhite:hover {
    background:#84cfff !important;
  }


  /* brightbluewhite */
  li.brightbluewhite a:hover {
    color:#fff !important;
  }
  div li.brightbluewhite:hover {
    background:#00f1ff !important;
  }


  /* blueyellow */
  li.blueyellow a:hover {
    color:#ffcc00 !important;
  }
  div li.blueyellow:hover {
    background:#00376a !important;
  }


  /* bluered */
  li.bluered a:hover {
    color:#ff3737 !important;
  }
  div li.bluered:hover {
    background:#00376a !important;
  }


  /* darkjadewhite */
  li.darkjadewhite a:hover {
    color:#fff !important;
  }
  div li.darkjadewhite:hover {
    background:#006761 !important;
  }


  /* jadewhite */
  li.jadewhite a:hover {
    color:#fff !important;
  }
  div li.jadewhite:hover {
    background:#00b7ac !important;
  }


  /* lightjadewhite */
  li.lightjadewhite a:hover {
    color:#fff !important;
  }
  div li.lightjadewhite:hover {
    background:#96d2c3 !important;
  }


  /* darkgreen */
  li.darkgreen a:hover {
    color:#d8ff00 !important;
  }
  div li.darkgreen:hover {
    background:#131900 !important;
  }


  /* darkgreenwhite */
  li.darkgreenwhite a:hover {
    color:#fff !important;
  }
  div li.darkgreenwhite:hover {
    background:#005a28 !important;
  }


  /* greenwhite */
  li.greenwhite a:hover {
    color:#fff !important;
  }
  div li.greenwhite:hover {
    background:#7ab300 !important;
  }


  /* standardchartered */
  li.standardchartered a:hover {
    color:#fff !important;
  }
  div li.standardchartered:hover {
    background: linear-gradient(to right, #00baff, #7ab300) !important;
  }


  /* taronga */
  li.taronga a:hover {
    color:#fff !important;
  }
  div li.taronga:hover {
    background:#02543f !important;
  }


  /* vantaa */
  li.vantaa a:hover {
    color:#fff !important;
  }
  div li.vantaa:hover {
    background:#51b6e2 !important;
  }


  /* barca */
  li.barca a:hover {
    color:#fff !important;
  }
  div li.barca:hover {
    background:repeating-linear-gradient(90deg, #00376a, #00376a 50%, #770000 50%, #770000 100%) !important;
  }


  /* instagram */
  li.instagram a:hover {
    color:#fff !important;
  }
  div li.instagram:hover {
    background: linear-gradient(to right, #d6249f, #ff9600) !important;
  }
}