/* General CSS */
html { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased }

a, abbr, acronym, address, b, bdo, big, blockquote, body, br, button, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, ins, kbd, legend, li, map, object, ol, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var { 
    margin: 0; padding: 0; border: none }

a, input, select, textarea { outline: 0; margin: 0; padding: 0 }
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

/* body::-webkit-scrollbar{ width: 7px;background:#f5f5f5;}
body::-webkit-scrollbar-thumb{ background-color: #242f51;border-radius:0px; } */

::-moz-selection {color: #000;background: #4dc5cf;}
::selection {color: #000;background: #4dc5cf;}

*:focus {
    outline:none !important;
}
/* Colors CSS */


/* Typography CSS */


/* Button CSS */
input[type="submit"]{ cursor:pointer; }
.overflow-hidden{ overflow:hidden; }
html{ /*overflow-x:hidden;*/-webkit-font-smoothing:antialiased;  scroll-behavior: smooth; }


body { font-family: 'DIN 2014', sans-serif; overflow-x:hidden; outline:0; font-style:normal; font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-size-adjust:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; font-size:18px; font-weight:400; line-height:normal; color: #fff; background: #000; }

h1, .h1 { font-size:60px; line-height: 72px;  } 
h2, .h2 { font-size:57px; line-height: 61px;  } 
h3, .h3 { font-size:50px; line-height: 60px; } 
h4, .h4 { font-size:30px; line-height: 39px; } 
h5, .h5 { font-size:20px; line-height: 26px; } 
h6, .h6 { font-size:18px; line-height: 24px; } 
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{font-weight: bold;}


p { font-size: 18px;line-height: 34px; color: #fff;} 
a { text-decoration:none; color:#8489A2; } 
a:hover { text-decoration:none; color:#D63031; } 
a:focus { outline:none; text-decoration:none; } 
button { margin:0; padding:0; border:none; } 
button:focus { box-shadow:none; outline:none; text-decoration:none; color:#ffffff; } 
ul{ list-style: none;padding: 0;margin:0; }
img { height: auto; width: 100%; }
.container-fluid{padding: 130px 70px 0;}
section{padding:0;height: 100vh !important;}
.bg-black{background: #000;}
/* Button CSS */
.btn.btn-common {display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; font: 22px/36.52px "Open Sans", sans-serif; font-weight: 500; color: #ffffff; background-color: #D63031; border-radius: 91px; padding: 16px 48px; margin-bottom: 39px; transition: all 0.3s ease; position: relative; z-index: 1; }

/* Header CSS */
header .container-fluid{
    padding: 0;
}
.header-top {
	padding: 0 70px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 124px;
}
.header-logo{
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-logo img{
    height: 124px;
    width: auto;
}
header.nav-show .header-logo.nav img{
    height: 65px;
}
.header-logo h1{
    text-shadow: 
    0.6429px  0.6429px #fff, 
   -0.6429px  0.6429px #fff, 
   0.6429px -0.6429px #fff, 
   -0.6429px -0.6429px #fff;
    color: #000;
    background: #0f0f0f;
    padding: 0 22px;
    line-height: 124px;
}
.header-logo h1 span{
    color: #fff;
    text-shadow: none;
}
.toggle-menu {
	width: 45px;
	height: 30px;
	display: inline-block;
	position: relative;
}

.toggle-menu i {
	position: absolute;
	display: block;
	height: 2px;
	background: white;
	width: 45px;
	left: 0px;
	-webkit-transition: all .3s;
	        transition: all .3s;
}

.toggle-menu i:nth-child(1) {
	top: 0;
}

.toggle-menu i:nth-child(2) {
	top: 14px;
}

.toggle-menu i:nth-child(3) {
	bottom: 0px;
}

.open-menu i:nth-child(1) {
	top: 15px;
	-webkit-transform: rotateZ(45deg);
	        transform: rotateZ(45deg);
}

.open-menu i:nth-child(2) {
	background: transparent;
}

.open-menu i:nth-child(3) {
	top: 15px;
	-webkit-transform: rotateZ(-45deg);
	        transform: rotateZ(-45deg);
}
nav {
    height: 0;
    opacity: 0;
    visibility: hidden;
    box-sizing: border-box;
    position: fixed;
    top: 0px;
    width: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background: #000;
}

.open-menu ~ nav {
   opacity: 1;
   visibility: visible;
    padding: 80px 0;
   height: 100vh;
}
header.nav-show .header-logo,header .header-logo.nav{display: none;}
header.nav-show .header-logo.nav{display: flex;}
nav ul li a{
    font-size: 110px;
    line-height: 110px;
    font-weight: 800;
    color: #EFCC77;
    text-transform: uppercase;
}
nav ul li a:hover{
    color: #fff;
}
/* .panel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  } */
.hero-section {
    display: flow-root !important;
    height: 250vh !important;
    padding-top: 0 !important;
}
.hero-section .fp-tableCell{
    display: flow-root !important;
    height: 250vh !important;
}
.hero-section .content-wrap{
    display: flex;
    flex-grow: 0;
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    flex-direction: column;
    text-align: center;
}
.hero-section .content-wrap figure{height: 100vh;}
.hero-section .content-wrap figure img{height: 100vh;object-fit: fill;}
.cat-image{
    position: absolute;
    right: 0;
    bottom: 0;
}
.hero-section .content-wrap .cat-image figure{height: auto;}
.hero-section .content-wrap .cat-image figure img{height: 254px;object-fit: fill;}
.hero-section .content-wrap h2{
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    bottom: 150px;
    z-index: 9;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 300;
}
.hero-section .content-wrap h2 span{font-weight: bold;}
.hero-section .content-image{
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.hero-section .content-image figure{
    height: 100vh;
}
.hero-section .content-image figure img{
    height: 100%;
    object-fit: cover;
}
.hero-section .content-image:after{
    content: "";
    width: 100%;
    height: 100%;
    background: #EFCC77;
    opacity: 41%;
    top: 0;
    left: 0;
    position: absolute;
}

.cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover:after{
    content: "";
    width: 100%;
    height: 100%;
    background: #EFCC77;
    opacity: 41%;
    top: 0;
    left: 0;
    position: absolute;
}

.cover video {
  opacity: 0;
  width: 100%;
  transition: 1s;
  position: absolute;
  z-index: -1;
}

/* .cover .play-wrapper{
    width: 311px;
    height: 311px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 8;
    box-shadow: 0 0 0px 11px rgba(255, 255, 255, 0.25);
    animation: grow 1s infinite;
} */

.cover .play-button{
    width: 205px;
    height: 205px;
    background: #EFCC77;
    border-radius: 50%;
    color: #000;
    border: 4px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 9;
    box-shadow: 0 0 0px 34px rgba(255, 255, 255, 0.25);
    /* animation: grow1 1s infinite; */
    animation: 1.6s playShadow ease-out infinite;
    
}
/* .cover .play-button:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    transition: 0.35s;
  }
.cover .play-button:hover:after {
    box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.25), 0 0 0 11px rgba(255, 255, 255, 0.25);
  } */
@keyframes playShadow {
    0% {
      box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.25), 0 0 0 0px rgba(255, 255, 255, 0.25);
      transform: scale(1);
    }
    18% {
      box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.25), 0 0 0 0px rgba(255, 255, 255, 0.25);
    }
    35% {
      transform: scale(1.08);
    }
    76% {
      transform: scale(0.96);
    }
    100% {
      box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.25), 0 0 0 45px rgba(255, 255, 255, 0.25);
      transform: scale(1);
    }
  }
  
/* @keyframes grow {
    from {
      
      box-shadow: 0 0 0px 8px rgba(255, 255, 255, 0.25);
    }
    to {
      
      box-shadow: 0 0 0px 11px rgba(255, 255, 255, 0.25);
    }
  }
  @keyframes grow1 {
    from {
      
        box-shadow: 0 0 0px 31px rgba(255, 255, 255, 0.25);
    }
    to {
      
        box-shadow: 0 0 0px 34px rgba(255, 255, 255, 0.25);
    }
  } */
.cover .play-button img{height: 86px;width: auto;}
.video-section .section-title{
    font-size: 238px;
    text-transform: uppercase;
    line-height: 227px;
    font-weight: 800;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    z-index: 9;
}
.roundup-content .title{
    font-size: 167px;
    line-height: 181px;
    font-weight: 800;
    text-shadow: 
    1px  1px     #EFCC77, 
   -1px  1px     #EFCC77, 
    1px -1px     #EFCC77, 
   -1px -1px     #EFCC77,
    1px  1px 5px #000;
    color: #000;
    margin-bottom: 50px;
}

.roundup-content p{
    margin-bottom: 30px;
}
.roundup-images h2{
    height: 181px;
    margin-bottom: 50px;
    display: flex;
    align-items: flex-end;
}
section h2.section-title{
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 300;
}
.appearances-section{
    background: #1F2021;
}
.appearances-box{
    color: #fff;
    text-transform: uppercase;
}
.appearances-box .title-head{
    font-size: 116px;
    font-weight: 300;
    line-height: 123px;
}
.appearances-box .desc-head{
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: #EFCC77;
}
.appearances-box .desc,.appearances-box .remark{
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0.16em;
}
.appearances-box .remark{
    color: #808080;
}
.map-slider{
    /* position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    transform: translate(0, -50%); 
    width: 62%; */
    margin-right: -70px;
    position: relative;
    padding-top: 70px;
}
.map-slider .swiper-wrapper{z-index: 99;}
.map-slider .swiper-button-next:after,.map-slider .swiper-button-prev::after{content: none;}
.map-slider .swiper-button-next{
    background: url(../images/arrow-right.svg) no-repeat scroll center;
    height: 48px;
    left: 0;
    right: -115px;
    top: 15px;
    bottom: auto;
    margin: 0 auto;
    z-index: 99;
}
.map-slider .swiper-button-prev{
    background: url(../images/arrow-left.svg) no-repeat scroll center;
    height: 48px;
    left: 0;
    right: -45px;
    top: 15px;
    bottom: auto;
    margin: 0 auto;
    z-index: 99;
}
.map-slider .swiper-pagination{
    top: 15px;
    right: -250px;
    left: 0;
    bottom: auto;
    width: auto;
    font-size: 41px;
    line-height: 48px;
    font-weight: bold;
    letter-spacing: 0.01em;
}
.maps-section:after{
    content: "";
    width: 321px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0.08),rgba(0, 0, 0, 1));
    background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.08),rgba(0, 0, 0, 1));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.08),rgba(0, 0, 0, 1));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    z-index: 9;
}
.maps-section .section-title{
    font-size: 238px;
    line-height: 178px;
    font-weight: 800;
    color: #0f0f0f;
    letter-spacing: unset;
}
.map-box .map-desc h4{
    letter-spacing: 0.26em;
}
.map-box .map-desc .map-info{
    border-top: 1px solid #fff;
    padding-top: 30px;
    margin-top: 20px;
}
.map-box .map-desc{
    font-size: 18px;
}
.map-box .map-desc .date{
    color: #EFCC77;
    font-weight: 300;
    letter-spacing: 0.26em;
    text-align: right;
}
.map-box .map-desc .addr{
    color: #808080;
    font-weight: 300;
    letter-spacing: 0.26em;
}
.map-box .map-desc .map-info{
    font-size: 22px;
    font-weight: normal;
}
.pros-cons-section .section-title{
    font-size: 200px;
    line-height: 200px;
    font-weight: 800;
    color: #fff;
    letter-spacing: unset;
}
.pros-cons-section .section-title span{
    font-size: 57px;
    line-height: 57px;
    font-weight: 300;
    letter-spacing: 0.26em;
    display: block;
}
.pros-cons-section ul{
    padding-top: 300px;
}
.pros-cons-section ul li{
    font-size: 26px;
    font-weight: 300;
    color: #fff;
    line-height: 36px;
    border-bottom: 1px solid #EFCC77;
    padding: 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.pros-cons-section ul li:first-child{
    border-top: 1px solid #EFCC77;
}
.pros-cons-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.pros-cons-section:after{
    content: "";
    width: 100%;
    height: 100%;
    background: #0f0f0f;
    opacity: 72%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}
.pros-cons-section > div{
    position: relative;
    z-index: 9;
}
.best-game-section .section-title{
    font-size: 167px;
    line-height: 114px;
    font-weight: 800;
    text-shadow: 
    1px  1px     #EFCC77, 
    -1px  1px     #EFCC77, 
    1px -1px     #EFCC77, 
    -1px -1px     #EFCC77;
    color: #0f0f0f;
    letter-spacing: 0px;
}
.best-game-section .section-title span{
    font-size: 57px;
    font-weight: 300;
    letter-spacing: 0.26em;
    color: #fff;
    text-shadow: none;
    display: block;
}
.game-title h5{
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0.18em;
    font-weight: 300;
    width: 200px;
}
.game-title{
    border-bottom: 1px solid #EFCC77;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.game-list .game-title:first-child{
    border-top: 1px solid #EFCC77;
}
.game-title .vs-badge{
    width: 71px;
    height: 71px;
    border-radius: 50%;
    border: 1px solid #EFCC77;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-title .vs-badge h4{
    font-size: 30px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: 0.01em;
    
}
.game-title img{
    height: 96px;
    width: auto;
}
.game-title .game-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    width: 40%;
}
.best-game-section {
    background-repeat: no-repeat;
    background-position: center right;
    background-color: #000;
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.best-game-section:after{
    content: "";
    width: 100%;
    height: 100%;
    background: #0f0f0f;
    opacity: 72%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}
.best-game-section > div{
    position: relative;
    z-index: 9;
}