* {
  padding: 0;
  margin: 0 0 0 0;
  box-sizing: border-box;
  align-items: center;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  overflow-x: hidden;
}

header {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -640px;
  margin-right: 20px;
  width: 1320px;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  position: absolute;
  left: 0;
  width: 130px;
  height: 80px;
}

header ul {
  margin-left: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li {
  height: 80px;
  padding: 28px 0;
  list-style: none;
  margin-left: 60px;
}

header a {
  position: relative;
  height: 24px;
  width: auto;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  line-height: 24.52px;
  color: #000000;
}

header a.active {
  font-weight: 800;
}

header ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  display: block;
  border-bottom: 3px solid #eb5a41;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: right;
}

header ul li a:hover::after {
  font-weight: 800;
  transform: scaleX(1);
  transform-origin: left;
}

header ul li a.active::after {
  font-weight: 800;
  transform: scaleX(1);
}

header .before-afterLogin {
  position: absolute;
  left: 996px;
  width: 284px;
  height: 80px;
}

header .before-afterLogin.after {
  width: 169px;
}

header .before-afterLogin .afterLogin {
  display: none;
}

header .before-afterLogin .beforeLogin {
  display: inline-block;
}

header .before-afterLogin.after .afterLogin {
  display: inline-block;
}

header .before-afterLogin.after .beforeLogin {
  display: none;
}

header .before-afterLogin .beforeLogin .create-account {
  position: absolute;
  top: 28px;
  width: 154px;
  height: 25px;
}

header .before-afterLogin .beforeLogin .login {
  position: absolute;
  top: 20px;
  left: 184px;
  width: 100px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 24.52px;
  transition: 0.5s;
}

header .before-afterLogin .afterLogin .homepage {
  position: absolute;
  left: 0;
  top: 28px;
  width: auto;
  height: 26px;
}

header .login:hover {
  background: #eb5a41;
}

.intro {
  position: absolute;
  top: 130px;
  width: 1320px;
  height: 790px;
  left: 50%;
  margin-left: -640px;
  margin-right: 20px;
}

.intro h1 {
  position: absolute;
  margin: 0 0;
  top: 140px;
  height: 131px;
  width: 272px;
  font-weight: 800;
  font-size: 96px;
  line-height: 130.75px;
}

.intro h2 {
  position: absolute;
  margin: 0 0;
  top: 250px;
  height: 54px;
  width: 442px;
  font-weight: 500;
  font-size: 40px;
  line-height: 54.48px;
}

.intro .mockup {
  position: absolute;
  width: 1413px;
  height: 941px;
  top: 53px;
  left: 167px;
}

.intro .introduction {
  position: absolute;
  top: 511px;
  left: 6px;
  margin: 0 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 32.69px;
  text-decoration: none;
  color: #000000;
}

.intro .more {
  position: absolute;
  top: 96px;
  left: 0;
  width: 230px;
  font-weight: 800;
  font-size: 24px;
  line-height: 32.69px;
  color: #000000;
}

.intro .line-under {
  position: absolute;
  top: 26px;
  left: 127px;
  background: #000000;
  height: 2px;
  width: 100px;
}

.intro .line-over {
  position: absolute;
  width: 15.56px;
  height: 2px;
  left: 213px;
  top: 20.5px;
  background: #000000;
  rotate: 45deg;
}

.popular-games {
  position: absolute;
  top: 920px;
  width: 1320px;
  height: 790px;
  left: 50%;
  margin-left: -640px;
  margin-right: 20px;
}

.bg1 {
  position: absolute;
  top: 920px;
  left: 0;
  width: 100%;
  height: 1000px;
  background-color: #222222;
  overflow: hidden;
}

.bg1 .upperlayer {
  position: absolute;
  width: 100%;
  height: 100px;
  top: -50px;
  background: radial-gradient(closest-side at 50% 50%, #9e9e9e, transparent);
}

.bg1 .lowerlayer {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: -50px;
  background: radial-gradient(closest-side at 50% 50%, #9e9e9e, transparent);
}

.popular-games {
  z-index: 0;
}

.popular-games h1 {
  position: absolute;
  top: 80px;
  margin: 0 0;
  font-weight: 800;
  font-size: 96px;
  line-height: 130.75px;
  color: #ffffff;
}

.popular-games h2 {
  position: absolute;
  top: 190px;
  left: 4px;
  margin: 0 0;
  font-weight: 500;
  font-size: 40px;
  line-height: 54.48px;
  color: #ffffff;
}

.next {
  position: absolute;
  top: 483px;
  left: 1005px;
  height: 249px;
  width: 70px;
  font-size: 40px;
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  z-index: 100;
}

.before {
  position: absolute;
  top: 483px;
  left: 230px;
  height: 249px;
  width: 70px;
  font-size: 40px;
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  z-index: 100;
  rotate: 180deg;
}

.slider {
  position: absolute;
  top: 344px;
  width: 1920px;
  height: 538px;
  display: flex;
  overflow: hidden;
  transform: translateX(-308px);
}

.game-slide {
  position: absolute;
  width: 2500px;
  height: 538px;
  display: flex;
  left: 50%;
  margin-left: -350px;
  transition: transform 0.5s;
}

.game-slide.active0 {
  transform: translateX(0px);
}

.game-slide.active1 {
  transform: translateX(-440px);
}

.game-slide.active2 {
  transform: translateX(-880px);
}

.game-slide.active3 {
  transform: translateX(-1320px);
}

.game-slide.active4 {
  transform: translateX(-1760px);
}

.game-slide ul {
  margin: 0 0;
}

.slider .game-slide .game-slides {
  width: auto;
  height: 538px;
  margin-left: 40px;
  cursor: pointer;
}

.game-slides img {
  position: relative;
  transform: translateY(138px);
  width: 400px;
  height: 250px;
  transition: transform 0.5s;
}

.game-slides.active img {
  transform: translateY(0);
  width: 620px;
  height: 388px;
}

.game-slides h1 {
  position: absolute;
  top: 408px;
  font-weight: 800;
  font-size: 40px;
  line-height: 54.48px;
  color: #ffffff;
  display: none;
  white-space: nowrap;
}

.game-slides p {
  position: absolute;
  top: 472px;
  margin: 0 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 32.69px;
  color: #ffffff;
  display: none;
  white-space: nowrap;
}

.game-slides.active h1 {
  display: block;
}

.game-slides.active p {
  display: block;
}

.bg3 {
  position: absolute;
  top: 1920px;
  width: 100%;
  height: 320px;
  background-color: #222222;
}

.footer {
  position: absolute;
  top: 1920px;
  left: 50%;
  margin-left: -660px;
  width: 1320px;
  height: 320px;
  background-color: #222222;
  justify-content: center;
}

.footer h1 {
  position: absolute;
  top: 50px;
  left: 0;
  font-weight: 800;
  font-size: 32px;
  line-height: 43.58px;
  color: #ffffff;
}

.footer h2 {
  position: absolute;
  top: 94.58px;
  left: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 32.69px;
  color: #ffffff;
}

.footer ul {
  position: absolute;
  top: 164px;
  color: #ffffff;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 21.79px;
}

.footer li {
  float: left;
  margin-right: 16px;
}

.footer h3 {
  position: absolute;
  top: 216px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 21.79px;
}