@charset "utf-8";
/* CSS Document */
/*--font--*/
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
ul, li {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
a {
  text-decoration: none;
  text-decoration-line: none;
  color: #000;
}
img {
  width: 100%;
  padding: 0;
  margin: 0;
}
html {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-color: black;
  scroll-behavior: smooth;
}
body {
  font-size: 1vw;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: black;
position: relative;
}
/* 18세미만 */
#jb-container {
	width: 100%;
	height: 100vh;
	background-color: #000;
}
#jb-container .logo {
	width: 25%;
	margin: 0 auto;
	margin-top: 5%;
}
#jb-content {
	color: #fff;
}
#jb-footer {
	margin-top: 3%;
	color: #fff;
	font-size: 9px;
}
#jb-container h3 {
	color: red;
	font-size: 2vw;
}
#jb-container .text-center {
	font-size: 1vw;
}
.agree-button-div {
	margin-top: 6%;
	color: #fff;
}
.btn {
	color: #fff;
	background: darkred;
	font-size: 2vw;
	cursor: pointer;
	transition: all 0.3s;
}
.btn:hover {
	opacity: 0.6;
}
#jb-container input {
	background-color: transparent;
	width: 100%;
	border: 1px solid gray;;
}
::selection {
  background: #f00;
  color: #fff;
}
.inner {
  width: 92%;
  margin: auto;
}
/*
.navigetion {width:100%; background-color:rgba(0,0,0,0.92); color:white; text-align:center;top:0;left:0; padding:1% 0;
	border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#FFC127; 
	z-index:2;}
.navigetion li{display: inline-block; padding:0 2%; color:#FFC127; font-size:1.2vw; font-weight:700;}

.fix {
  background-color:rgba(0,0,0,0.8);
  position:fixed;
  animation: down 0.7s ease
}

.all {display:flex; flex-flow: row wrap;}
*/ ::-webkit-scrollbar {
  width: 8px; /*스크롤바의 너비*/
}
::-webkit-scrollbar-thumb {
  background-color: #ed2437; /*스크롤바의 색상*/
}
::-webkit-scrollbar-track {
  background-color: #000; /*스크롤바 트랙 색상*/
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2); /*스크롤바 트랙 안쪽 그림자*/
}

.wrap {
  position: relative;
  background-image: url('https://directg.diskn.com/0nBhuXzfz6');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}
.wrap > h2 {
  text-align: center;
}
.wrap > p {
  padding: 30px 0;
  text-align: center;
}
.class {
  display: inline-block;
}

/*--페이드 인--*/
.main_text {
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
  animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -webkit-animation-delay: 1.6s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* navigetion */
.navigetion {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  text-align: center;
  top: 0;
  left: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  border-bottom-width: 2px;
  z-index: 100;
  margin: 0 auto;
}
.navigetion li {
  display: inline-block;
  padding: 0 2%;
  font-size: 1.2vw;
  font-weight: 600;
  line-height: 25px;
}
.navigetion li span {
  font-size: 0.8vw;
}
nav.navigetion ul {
  list-style: none;
  text-align: center;
}
nav.navigetion ul li {
  display: inline-block;
  /*		border: 2px solid #ddd;*/
  padding: 0.5%;
  transition: all 0.5s;
  margin-left: 1%;
  position: relative;
}
nav.navigetion ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.5s;
}
nav.navigetion ul li a:hover {
  color: #ed2437;
}
nav.navigetion ul li a span {
  font-size: 1vw;
}
/* 메뉴 강조기능 */
#gnb a.active {
  color: #ed2437;
  transition: all 0.3s ease;
}
/* nav - stroke */
/*
nav.navigetion ul li a,
	nav.fill ul li a {
	  position: relative;
	}
	nav.navigetion ul li a:after,
	nav.fill ul li a:after {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  width: 0%;
	  content: '.';
	  color: transparent;
	  background: #ed2437;
	  height: 2px;
	}
	nav.navigetion ul li a:hover:after {
	  width: 100%;
	}

	nav.fill ul li a {
	  transition: all 2s;
	}

	nav.fill ul li a:after {
	  text-align: left;
	  content: '.';
	  margin: 0;
	  opacity: 0;
	}
	nav.fill ul li a:hover {
	  color: #fff;
	  z-index: 1;
	}
	nav.fill ul li a:hover:after {
	  z-index: -10;
	  animation: fill 1s forwards;
	  -webkit-animation: fill 1s forwards;
	  -moz-animation: fill 1s forwards;
	  opacity: 1;
	}
*/
/*--스크롤시 따라오는쪽 스타일 효과--*/
.fix {
  padding: 0.5% 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7455357142857143) 0%, rgba(0, 0, 0, 0.6362920168067228) 100%);
  position: fixed;
  animation: down 0.8s ease;
}
.all {
  display: flex;
  flex-flow: row wrap;
}
.inner {
  width: 87%;
  margin: auto;
}
/*--//페이드 인--*/
#main {
  position: relative;
  width: 100%;
  background-color: black;
  height: 100vh;
  background-image: url('https://directg.diskn.com/27jDer3kpu');
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}
.main_blood {
  position: absolute;
  right: 0;
  border: 0px solid red;
  width: 15.3%;
  ;
}
.main_blood img {
  width: 100%;
}
.main_objet_M {
  display: none;
}
.header {
  padding: 0;
  width: 100%;
  border: 0px solid blue;
  float: left;
}
.header .ps4 {
  width: 23%;
  border: 0px solid red;
  padding: 2% 0 1% 0;
  float: left;
}
.header .ps4 img {
  width: 100%;
}
.header .twiter {
  width: 20%;
  border: 0px solid red;
  padding-top: 1.5%;
  float: right;
}
.header .twiter img {
  width: 20%;
  float: right;
}
.header .switch {
  padding: 25px 1%;
  width: 13%;
  border: 0px solid red;
  float: left;
}
.header .switch img {
  width: 100%;
  border: 0px solid red;
  float: left;
}
.ps_logo {
  width: 60%;
  border: 0px solid red;
  padding-top: 25%;
  margin: auto;
}
.ps_logo .main_logo_1 img {
  width: 80%;
}
.ps_logo .main_logo_2 img {
  width: 30%;
  padding-top: 1%;
  padding-right: 5%;
}
/* Twitter Event
*********************************************/
.twitter_event {
  width: 18%;
  float: right;
  margin-right: 5.5%;
  transition: all 0.4s;
  overflow: hidden;
}
.twitter_event:hover {
  transform: scale(1.1);
}
/*--topic--*/
.topic_m {
  display: none;
}
.topic {
  width: 100%;
  padding-bottom: 0%;
  text-align: center;
  border: 0px solid red;
  overflow: hidden;
  position: absolute;
  bottom: 3%;
}
.topic p {
  width: 100%;
  font-weight: 800;
  font-size: 1.7vw;
  padding: 2% 0;
  color: #FFFFFF;
  background-image: url("https://directg.diskn.com/0nDxsAa7Ti");
}
.topic_outer {
  margin-right: 1%;
  float: right;
  margin-top: 4%;
  background-color: #222;
  /*	border-radius:10px; */
  padding-bottom: 2%;
  width: 42%;
  margin-left: 2.4%;
  /*	box-shadow:0px 0px 5px gray;*/
}
.topic_box1 {
  width: 85%;
  margin: auto;
  border: 0px solid Purple;
  height: 130px;
  overflow: scroll;
  overflow-x: hidden;
  background-color: white;
}
.topic_box1 li span {
  font-size: 1.2vw;
  font-weight: 600;
  color: #ed2437;
}
.topic_box1 li {
  font-size: 1vw;
  font-weight: 400;
  padding: 0.8%;
  color: black;
}
.topic_box1::-webkit-scrollbar {
  width: 15px;
}
.topic_box1::-webkit-scrollbar-track {
  background-color: rgba(140, 20, 40, 0.2);
  border-radius: 100px;
}
.topic_box1::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-color: black;
  box-shadow: inset 2px 2px 20px 0 rgba(#fff, 0.5);
}
.topic_box1 {
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.topic_box1::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
/*--//topic end--*/
.twitter {
  width: 2%;
  padding: 2% 1%;
  position: absolute;
  top: 80%;
  left: 91%;
  background-image: url('https://directg.diskn.com/0n9yjWTR9w');
  background-size: cover;
  background-repeat: no-repeat;
}
.twitter:hover {
  position: absolute;
  background-image: url('https://directg.diskn.com/37XtVoBU90');
  transition: all 0.3s;
}
/* ABOUT */
#about {
  padding-top: 0%;
  padding-bottom: 2%;
  background-image: url('https://directg.diskn.com/0nDxrunKai');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /*	background-attachment:fixed;*/
  overflow: hidden;
}
.intro_left {
  width: 39%;
  float: left;
  margin-top: 3%;
}
.intro_left img {
  width: 80%;
}
.intro_right {
  width: 55%;
  float: right;
  padding-top: 2.5%;
  margin-right: 3%;
}
.intro_right h4 {
  width: 20%;
  font-size: 1.8vw;
  font-weight: 700;
  color: white;
  color: #ed2437;
  text-align: left;
}
.intro_right p {
  font-size: 1.3vw;
  font-weight: 300;
  color: white;
  text-align: left;
}
/* SYSTEM */
#system {
  padding-top: 0%;
  padding-bottom: 2%;
  background-image: url('https://directg.diskn.com/17qoXQM90g');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
}
#system h4 {
  font-size: 1.8vw;
  font-weight: 700;
  color: white;
  color: #ed2437;
  margin-bottom: 1%;
}
#system h5 {
  color: #fff;
  font-size: 2vw;
  border: 3px solid #fff;
  padding: 1% 17%;
  display: inline-block;
  margin-top: 5%;
  margin-bottom: 0;
}
#system p {
  color: #fff;
  font-size: 1.1vw;
}
.vs {
  width: 100%;
  position: absolute;
  margin: 0 auto;
  border: 0px solid red;
  z-index: 50;
}
.vs img {
  width: 20%;
  margin-top: 1%;
}
.condition {
  color: #eee;
  font-weight: 700;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1%;
}
.arrow {
  width: 8%;
}
.arrow img {
  width: 8%;
}
#system p span {
  color: #DCA912;
  font-size: 1.2vw;
  font-weight: 600;
}
.system_left {
  width: 50%;
  float: left;
  background-color: rgba(26, 58, 70, 0.5);
}
.system_left img {
  width: 70%;
}
.system_left h6 {
  color: cornflowerblue;
  font-size: 2vw;
  margin: 0;
  text-align: right;
  text-shadow: 1px 1px 1px #fff;
}
.system_left .imgbox p {
  margin-top: 0.6%;
  margin-bottom: 1%;
}
.system_right {
  width: 50%;
  float: right;
  background-color: rgba(77, 0, 0, 0.5);
}
.system_right img {
  width: 70%;
}
.imgbox {
  width: 100%;
  margin: 0 auto;
}
.system_right .imgbox p {
  padding-top: 8.5%;
}
.system_right .imgbox img {
  /*	border: 1px solid red;*/
  padding-top: 2.8%;
}
.system_right h6 {
  color: darkred;
  font-size: 2vw;
  margin: 0;
  text-align: right;
  text-shadow: 1px 1px 1px #000;
}
.system_right .condition.right {
  margin: 0;
  margin-top: 32.9%;
}
.system_right .right_imgspace {
  margin-bottom: 11.2%;
}
/* STAGE */
#stage {
  width: 100%;
  text-align: center;
  margin: auto;
  padding: 0;
  padding-top: 2%;
  padding-bottom: 5%;
}
#stage h4 {
  font-size: 1.8vw;
  font-weight: 700;
  color: white;
  color: #ed2437;
}
.game_box {
  width: 100%;
  padding-bottom: 2%;
}
.game_box li h6 {
  font-size: 1.2vw;
  margin: 0;
  padding: 0;
  font-weight: 500;
  text-align: center;
  padding-top: 2%;
  padding-bottom: 1%;
}
/*.game_box li p{font-size:1vw; ont-weight:200; padding-top:1.5%; }*/
.game_box img {
  box-shadow: 1px 1px 20px 2px #ed2437;
  margin: 5% 0% 0% 0%;
}
.game_box.two li {
  width: 38%;
  display: inline-block;
  padding-left: 1%;
  padding-right: 1%;
  color: white;
}
/*.game_box h3 { color: #EEEEEE;}*/
/* MOVIE */
#movie {
  position: relative;
  width: 100%;
  border: 0px solid red;
  overflow: hidden;
  padding-top: 5%;
  padding-bottom: 5%;
}
#movie .inner {
  width: 60%;
  border: 0px solid green;
  text-align: center;
  padding-top: 0%;
}
#movie h4 {
  font-size: 1.8vw;
  font-weight: 700;
  color: white;
  color: #ed2437;
}
#movie p {
  text-align: center;
  padding-bottom: 2%;
  padding-top: 2%;
  color: #fff;
  font-size: 2vw;
}
.movie_if_box1::before {
	content: 'NEW!';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	color: white;
	font-weight: 900;
	background-color: darkred;
	padding: 3px 9px;
	font-size: 22px;
	border: 1px 
}
.movie_if_box1 {
  float:left;
  width:49%;
  overflow: hidden;
  margin: 0 auto;
/*  float: left;*/
	margin-bottom: 1%;
	position: relative;
}
.movie_if_box2{float:right; width:49%; border:0px solid blue; overflow:hidden; margin: 0 auto;
			margin-bottom: 1%;
}
.movie_if_box3{float:left; width:49%; border:0px solid blue; overflow:hidden; margin: 0 auto;
			margin-bottom: 1%;
}
.movie_if_box4{float:right; width:49%; border:0px solid blue; overflow:hidden; margin: 0 auto;
			margin-bottom: 1%;
}
#movie .movie_if {
  width: 100%;
}
.movie_if {
  position: relative;
  padding-top: 56%;
  width: 100%;
  height: 0;
}
/* iframe */
.movie_if > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* PACKAGE */
#package {
  position: relative;
  width: 100%;
  border: 0px solid red;
  overflow: hidden;
  padding-bottom: 9%;
  padding-top: 0%;
  background-image: url('https://directg.diskn.com/1SRNE64GRW');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}
#package .inner {
  width: 60%;
  border: 0px solid green;
  text-align: center;
  padding-top: 0%;
}
#package h4 {
  font-size: 1.8vw;
  font-weight: 700;
  color: white;
  color: #ed2437;
  margin-bottom: 0;
  margin-top: 5%;
}
#package p {
  color: #fff;
  font-size: 1.2vw;
  margin-bottom: 3%;
}
/* 점포 특전 */
#store {
	padding-bottom: 5%;
}
#store h4 {
  font-size: 1.8vw;
  font-weight: 700;
  color: white;
  color: #ed2437;
  margin-top: 5%;
}
#special_store {
  width: 100%;
  border: 0px solid red;
  overflow: hidden;
  padding-top: 2%;
  text-align: center;
}
#special_store h3 {
  color: #fff;
  font-size: 1.8vw;
}
#special_store .store_box {
  width: 92%;
  margin: auto;
  text-align: center;
}
#special_store .store_box li {
  width: 17%;
  display: inline-block;
  margin: 0 0.7%;
  padding: 2% 0 1% 0;
  margin-bottom: 2%;
  background-image: linear-gradient(to right, #434343 0%, black 100%);
  vertical-align: middle;
}
#special_store .store_box li img {
  width: 100%;
  border: 0px solid red;
}
.store_imgbox {
  /*	border: 1px solid red;*/
  width: 90%;
  margin: 0 auto;
  margin-bottom: 7%;
}
#special_store .store_box p {
  font-size: 1.1vw;
  color: #fff;
  padding: 3% 0 3%;
  line-height: 170%;
}
#special_store .store_box p span {
  font-size: 1.2vw;
  font-weight: 700;
  color: white;
  background-color: #111;
  padding: 0 2% 1% 2%;
}
.shop_button {
  width: 90%;
  border: 0px solid red;
  text-align: center;
  display: inline-block;
  overflow: hidden;
}
.Switch_button {
  width: 80%;
  font-size: 1.1vw;
  color: white;
  background-color: #0070cc;
  padding: 3% 3%;
  margin: auto;
  margin-bottom: 3%;
  margin-right: 6.5%;
  margin-left: 6.5%;
  cursor:pointer;
}
.Switch_button:hover {
  width: 80%;
  font-size: 1.1vw;
  color: white;
  background-color: #003867;
  padding: 3% 3%;
  margin: auto;
  margin-bottom: 3%;
  margin-right: 6.5%;
  margin-left: 6.5%;
  transition: all 0.3s
}
.PS4_button {
  width: 80%;
  font-size: 1.1vw;
  color: white;
  background-color: #003791;
  padding: 3% 3.3%;
  margin: auto;
  margin-right: 6.5%;
  margin-left: 6.5%;
  cursor:pointer;
}
.PS4_button:hover {
  background-color: #031360;
  transition: all 0.3s
}
#product {
  width: 100%;
  color: white;
  border: 0px solid black;
  background-color: black;
  overflow: hidden;
  background-image: url('https://directg.diskn.com/2SMBqyhvWG');
  background-position: center;
  background-repeat: no-repeat;
	background-attachment: fixed;
  background-size: cover;
  padding-top: 4%;
  padding-bottom: 6%;
}
.infor_table {
  border: 0px solid red;
  width: 65%;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.60);
	padding: 1%;
}
.table_img {
  border: 0px solid red;
  width: 30%;
  float: left;
  margin-top: 8%;
}
.table_img img {
  width: 100%;
  box-shadow: 1px 1px 20px 2px #222;
}
.table_if1 {
  background-color: none;
  text-align: left;
  font-size: 1vw;
  border: 0px solid red;
  margin: auto;
  width: 85%;
  margin-bottom: 5%;
  margin-left: 7%;
}
.table_if1 th {
  width: 25%;
  color: white;
  border: 0px;
  border-bottom: 3px solid #980100;
  font-size: 1.2vw;
  padding: 0.5%;
  font-weight: 600;
  padding-bottom: 1%;
}
.table_if1 td {
  width: 75%;
  border: 0px;
  border-bottom: 1px solid #980100;
  font-size: 1.1vw;
  padding: 0.5%;
  padding-left: 0.8%;
  font-weight: 300;
  padding-bottom: 1%;
}
.table_if1 td:nth-child(6) {
  border-bottom: none;
}

.table_if1.one th {
	border-bottom: 3px solid darkblue;
}
.table_if1.one td {
	border-bottom: 1px solid darkblue;
}

.table_if1.two th {
	border-bottom: 3px solid yellow;
}
.table_if1.two td {
	border-bottom: 1px solid yellow;
}
#product p {
  text-align: left;
  margin-left: 7%;
  border-bottom: 3px solid #980100;
  padding-bottom: 2%;
  width: 85%;
  font-size: 1vw;
}
footer {
  bottom: 0;
  width: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(96, 0, 0, 1.00) 100%);
}
footer {
  flex: 1 1 100%;
  text-align: center;
}
.company {
  width: 100%;
  border: 0px solid magenta;
  margin: auto;
  text-align: center;
  padding: 35px 0 10px 0;
}
.company li {
  display: inline-block;
  width: 7%;
  padding-right: 1%;
}
.company li img {
  width: 100%;
}
.copyright {
  font-size: 0.5vw;
  padding: 7px 0 60px 0;
  text-align: center;
  margin: auto;
  width: 90%;
  color: white;
}
@keyframes down {
  0% {
    transform: translateY(-50px)
  }
  100% {
    transform: translateY(0px)
  }
}
/*--태블릿--*/
@media screen and (max-width:991px) and (min-width: 769px) {
  html {
    width: 100%;
    height: 100%;
    font-size: 16px;
  }
  body {
    font-size: 1vw;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .inner {
    width: 95%;
    margin: auto;
  }
	/* 18세미만 */
#jb-container {
	width: 100%;
	height: 100vh;
	background-color: #000;
}
#jb-container .logo {
	width: 50%;
	margin: 0 auto;
	margin-top: 5%;
}
#jb-content {
	color: #fff;
}
#jb-footer {
	margin-top: 3%;
	color: #fff;
	font-size: 9px;
}
#jb-container h3 {
	color: red;
	font-size: 3vw;
}
#jb-container .text-center {
	font-size: 2vw;
}
.agree-button-div {
	margin-top: 6%;
	color: #fff;
}
.btn {
	color: #fff;
	background: darkred;
	font-size: 2.5vw;
	cursor: pointer;
	transition: all 0.3s;
}
.btn:hover {
	opacity: 0.6;
}
#jb-container input {
	background-color: transparent;
	width: 100%;
	border: 1px solid gray;;
}
  .wrap {
    position: relative;
    background-image: url('https://directg.diskn.com/2SMC7sITRW');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
  }
  /*.navigetion {width:100%; background:black; color:white; text-align:center;top:0;left:0; padding:2% 0;
	border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#FFC127; 
	z-index:2;}
.navigetion li{display: inline-block; padding:0 2%; color:#FFC127; font-size:2.2vw; font-weight:700;}
	
.fix {
  position:fixed;
  animation: down 0.5s ease
}
	
.all {display:flex; flex-flow: row wrap;}
*/
  nav.navigetion ul li a span {
    font-size: 2.5vw;
  }
  #main {
    position: relative;
    width: 100%;
    background-color: lightpink;
    flex: 1 1 100%;
    height: auto;
    background-image: url('https://directg.diskn.com/1n71R7xNI4');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 140%;
  }
  .main_blood {
    position: absolute;
    right: 0;
    border: 0px solid red;
    width: 28%;
    ;
  }
  .main_blood img {
    width: 100%;
  }
  /*--topic--*/
  .topic {
    width: 100%;
    padding-bottom: 18%;
    text-align: center;
    border: 0px solid red;
    overflow: hidden;
    margin: 0 auto;
  }
  .topic p {
    width: 100%;
    font-weight: 800;
    font-size: 2.7vw;
    padding: 2% 0;
    color: #FFFFFF;
  }
  .topic_outer {
    float: right;
    background-color: #222;
    padding-bottom: 2%;
    width: 82%;
    margin-right: 9%;
  }
  .topic_box1 {
    width: 85%;
    margin: auto;
    border: 0px solid Purple;
    height: 130px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: white;
  }
  .topic_box1 li span {
    font-size: 1.7vw;
    font-weight: 600;
    color: #ed2437;
  }
  .topic_box1 li {
    font-size: 1.4vw;
    font-weight: 400;
    padding: 0.8%;
    color: black;
  }
  /*--//topic end--*/
  .header {
    padding: 0;
    width: 100%;
    border: 0px solid blue;
    float: left;
    padding-bottom: 50%;
  }
  .header .ps4 {
    width: 40%;
    border: 0px solid red;
    padding: 35px 0 20px 0;
    float: left;
  }
  .header .ps4 img {
    width: 100%;
  }
  .header .twiter {
    width: 8%;
    border: 0px solid red;
    padding-top: 20px;
    float: right;
  }
  .header .twiter img {
    width: 100%;
    float: right;
  }
  .header .switch {
    width: 25%;
    padding: 25px 2%;
    border: 0px solid red;
    float: left;
  }
  .header .switch img {
    width: 100%;
    border: 0px solid red;
    float: left;
  }
  .twitter_event {
    width: 100%;
    clear: both;
    margin: 0 auto;
  }
  .twitter_event img {
    width: 40%;
  }
  /* ABOUT */
  #about {
    padding-top: 0%;
    padding-bottom: 2%;
    background-color: #111;
    overflow: hidden;
  }
  .intro_left {
    width: 39%;
    float: left;
    margin-top: 11%;
  }
  .intro_left img {
    width: 80%;
    margin-top: 0%;
  }
  .intro_right {
    width: 55%;
    float: right;
    padding-top: 2.5%;
    margin-right: 3%;
  }
  .intro_right h4 {
    width: 20%;
    font-size: 2.8vw;
    font-weight: 700;
    color: white;
    color: #ed2437;
    text-align: left;
  }
  .intro_right p {
    font-size: 1.8vw;
    font-weight: 300;
    color: white;
    text-align: left;
  }
  /* SYSTEM */
  #system {
    padding-top: 0%;
    padding-bottom: 2%;
    background-image: url('https://directg.diskn.com/2SMC7sHU4e');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
  }
  #system h4 {
    font-size: 2.8vw;
    font-weight: 700;
    color: white;
    color: #ed2437;
    margin-bottom: 1%;
  }
  #system h5 {
    color: #fff;
    font-size: 2vw;
    border: 3px solid #fff;
    padding: 1% 17%;
    display: inline-block;
    margin-top: 5%;
    margin-bottom: 0;
  }
  #system p {
    color: #fff;
    font-size: 1.6vw;
  }
  .vs {
    width: 100%;
    position: absolute;
    margin: 0 auto;
    border: 0px solid red;
  }
  .vs img {
    width: 20%;
  }
  .condition {
    color: #eee;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1%;
  }
  #system p span {
    color: #DCA912;
    font-size: 1.2vw;
    font-weight: 600;
  }
  .system_left {
    width: 50%;
    float: left;
    background-color: rgba(26, 58, 70, 0.5);
    padding-bottom: 3%;
  }
  .system_left h6 {
    color: cornflowerblue;
    font-size: 2vw;
    margin: 0;
    text-align: right;
    text-shadow: 1px 1px 1px #fff;
  }
  .system_right {
    width: 50%;
    float: right;
    background-color: rgba(77, 0, 0, 0.5);
    padding-bottom: 2.3%;
  }
  .imgbox {
    width: 100%;
    margin: 0 auto;
  }
  .system_right .imgbox p {
    padding-top: 11%;
  }
  .system_right .imgbox img {
    /*	border: 1px solid red;*/
    padding-top: 0.5%;
  }
  .system_right .condition.right {
    margin: 0;
    margin-top: 48%;
  }
  .system_right h6 {
    color: darkred;
    font-size: 2vw;
    margin: 0;
    text-align: right;
    text-shadow: 1px 1px 1px #000;
  }
  /* STAGE */
  #stage {
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 0;
    padding-top: 2%;
    padding-bottom: 5%;
  }
  #stage h4 {
    font-size: 2.8vw;
    font-weight: 700;
    color: white;
    color: #ed2437;
  }
  .game_box {
    width: 100%;
    padding-bottom: 2%;
  }
  .game_box li h6 {
    font-size: 1.2vw;
    margin: 0;
    padding: 0;
    font-weight: 500;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 1%;
  }
  .game_box img {
    box-shadow: 1px 1px 20px 2px #ed2437;
    margin: 5% 0% 0% 0%;
  }
  .game_box.two li {
    width: 45%;
    display: inline-block;
    padding-left: 1%;
    padding-right: 1%;
    color: white;
  }
  #movie {
    position: relative;
    width: 100%;
    border: 0px solid red;
    overflow: hidden;
    padding-bottom: 10%;
  }
  #movie .inner {
    width: 100%;
    border: 0px solid green;
    text-align: center;
    padding-top: 2%;
  }
  #movie h4 {
    font-size: 2.8vw;
  }
  #movie .movie_if_main {
    position: relative;
    width: 100%;
    heigth: auto;
    padding-top: 56.4%;
    border: 2px solid red;
  }
  #movie .movie_if_main iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #movie .movie_if {
    width: 99%;
  }
  .movie_if {
    position: relative;
    padding-top: 56%;
    width: 100%;
    height: 0;
  }
	.movie_if_box1 {
		float: none;
		width: 88%;
		margin-bottom: 1%;
	}
	.movie_if_box2 {
		float: none;
		width: 88%;
	}
	.movie_if_box3 {
		float: none;
		width: 88%;
	}
	.movie_if_box4 {
		float: none;
		width: 88%;
	}
  /* iframe */
  .movie_if > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* PACKAGE */
  #package {
    position: relative;
    width: 100%;
    border: 0px solid red;
    overflow: hidden;
    padding-bottom: 9%;
    padding-top: 0%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
  }
  #package .inner {
    width: 85%;
    border: 0px solid green;
    text-align: center;
    padding-top: 0%;
  }
  #package h4 {
    font-size: 2.8vw;
    font-weight: 700;
    color: #ed2437;
    margin-bottom: 0;
    margin-top: 5%;
  }
  #package p {
    color: #fff;
    font-size: 2.2vw;
    margin-bottom: 3%;
  }
	#store h4 {
		font-size: 2.8vw;
	}
  #special_store .store_box {
    width: 92%;
  }
  #special_store .store_box li {
    width: 23%;
    display: inline-block;
  }
	#special_store h3 {
		font-size: 3vw;
	}
  #infor {
    width: 100%;
    color: white;
    border: 0px solid black;
    background-color: #2d2c4e;
    overflow: hidden;
    background-image: url('https://directg.diskn.com/0Sb7kCPg2m');
    background-position: right;
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: cover;
    padding-top: 20%;
    padding-bottom: 20%;
  }
  .infor_table {
    border: 0px solid red;
    width: 95%;
    float: none;
    margin: auto;
  }
  .table_img {
    border: 0px solid red;
    width: 100%;
    float: none;
    text-align: center;
  }
  .table_img img {
    width: 60%;
  }
  .table_if1 {
    background-color: none;
    text-align: left;
    margin: auto;
    border: 0px solid red;
    width: 100%;
    margin-bottom: 3%;
    margin-left: 0%;
  }
  .table_if1 th {
    width: 17%;
    color: white;
    border: 0px;
    border-bottom: 3px solid #980100;
    font-size: 2.5vw;
    padding: 1%;
    font-weight: 500;
  }
  .table_if1 td {
    width: 76%;
    border: 0px;
    border-bottom: 1px solid #980100;
    font-size: 2.5vw;
    padding: 0.5%;
    padding-left: 0.8%;
    font-weight: 300;
  }
  .table_if1 td:nth-child(6) {
    border-bottom: none;
  }
  #product p {
    text-align: left;
    margin-left: 0%;
    border-bottom: 3px solid #980100;
    padding-bottom: 2%;
    width: 100%;
    font-size: 2.5vw;
  }
	#product h2 {
		font-size: 2.5vw;
	}
  footer {
    bottom: 0;
    width: 100%;
    background-color: #600000;
    color: white;
  }
  footer {
    flex: 1 1 100%;
    text-align: center;
  }
  .company {
    width: 100%;
    border: 0px solid magenta;
    margin: auto;
    text-align: center;
    padding: 35px 0 10px 0;
  }
  .company li {
    display: inline-block;
    width: 12%;
    padding-right: 1%;
  }
  .company li img {
    width: 100%;
  }
  .copyright {
    font-size: 1.5vw;
    padding: 7px 0 60px 0;
    text-align: center;
    margin: auto;
    width: 80%;
    color: white;
  }
}
/*--모바일--*/
@media screen and (max-width:768px) and (min-width: 300px) {
  html {
    width: 100%;
    height: 100%;
    font-size: 16px;
  }
  body {
    font-size: 1vw;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .wrap {
    position: relative;
    background-image: url('https://directg.diskn.com/1n6VKeKmgu');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
  }
  .inner {
    width: 94%;
    margin: auto;
  }
		/* 18세미만 */
#jb-container {
	width: 100%;
	height: 100vh;
	background-color: #000;
}
#jb-container .logo {
	width: 60%;
	margin: 0 auto;
	margin-top: 5%;
}
#jb-content {
	color: #fff;
}
#jb-footer {
	margin-top: 3%;
	color: #fff;
	font-size: 9px;
}
#jb-container h3 {
	color: red;
	font-size: 4vw;
}
#jb-container .text-center {
	font-size: 3vw;
}
.agree-button-div {
	margin-top: 6%;
	color: #fff;
}
.btn {
	color: #fff;
	background: darkred;
	font-size: 3.5vw;
	cursor: pointer;
	transition: all 0.3s;
}
.btn:hover {
	opacity: 0.6;
}
  /*.navigetion {width:100%; background:black; color:white; text-align:center;top:0;left:0; padding:2% 0;
	border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#FFC127; 
	z-index:2;}*/
  .navigetion li {
    display: inline-block;
    padding: 0 2%;
    color: #FFC127;
    font-size: 3vw;
    font-weight: 700;
  }
  /*--스크롤시 따라오는 효과--*/
  .fix {
    position: fixed;
    animation: down 0.5s ease
  }
  .all {
    display: flex;
    flex-flow: row wrap;
  }
  nav.navigetion ul li a span {
    font-size: 3vw;
  }
  #main {
    position: relative;
    width: 100%;
    background-color: lightpink;
    flex: 1 1 100%;
    height: auto;
    background-image: url(https://directg.diskn.com/1n71R7xNI4);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 140%;
  }
  .main_blood {
    position: absolute;
    right: 0;
    border: 0px solid red;
    width: 42%;
    ;
  }
  .main_blood img {
    width: 100%;
  }
  .twitter_event {
    width: 100%;
    clear: both;
    margin: 0 auto;
    margin-bottom: 3%;
  }
  .twitter_event img {
    width: 40%;
  }
  /*--topic--*/
  .topic {
    width: 100%;
    padding-bottom: 4%;
    text-align: center;
    border: 0px solid red;
    overflow: hidden;
    margin: 0 auto;
  }
  .topic p {
    width: 100%;
    font-weight: 800;
    font-size: 4.7vw;
    padding: 2% 0;
    color: #FFFFFF;
  }
  .topic_outer {
    float: right;
    background-color: #222;
    padding-bottom: 2%;
    width: 82%;
    margin-right: 9%;
  }
  .topic_box1 {
    width: 85%;
    margin: auto;
    border: 0px solid Purple;
    height: 100px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: white;
  }
  .topic_box1 li span {
    font-size: 3.7vw;
    font-weight: 600;
    color: #ed2437;
  }
  .topic_box1 li {
    font-size: 3.4vw;
    font-weight: 400;
    padding: 0.8%;
    color: black;
  }
  /*--//topic end--*/
  /* ABOUT */
  #about {
    padding-top: 0%;
    padding-bottom: 2%;
    background-color: #111;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
  }
  .intro_left {
    width: 100%;
    float: none;
    margin-top: 3%;
  }
  .intro_left img {
    width: 50%;
  }
  .intro_right {
    width: 100%;
    float: none;
    padding-top: 2.5%;
    margin-right: 3%;
  }
  .intro_right h4 {
    width: 100%;
    font-size: 4.8vw;
    font-weight: 700;
    color: white;
    color: #ed2437;
    text-align: center;
    margin: 0;
  }
  .intro_right p {
    font-size: 3.3vw;
    font-weight: 300;
    color: white;
    text-align: center;
  }
  /* SYSTEM */
  #system {
    padding-top: 0%;
    padding-bottom: 2%;
    background-image: url('https://directg.diskn.com/0nDy8oNb0C');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
  }
  #system h4 {
    font-size: 4.8vw;
    font-weight: 700;
    color: white;
    color: #ed2437;
    margin-bottom: 1%;
  }
  #system h5 {
    color: #fff;
    font-size: 4vw;
    border: 3px solid #fff;
    padding: 1% 27%;
    display: inline-block;
    margin-top: 5%;
    margin-bottom: 0;
  }
  #system p {
    color: #fff;
    font-size: 3.6vw;
  }
  .vs {
    width: 100%;
    position: absolute;
    margin: 0 auto;
    border: 0px solid red;
    display: none;
  }
  .vs img {
    width: 12%;
  }
  .condition {
    color: #eee;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1%;
  }
  .arrow {
    width: 8%;
  }
  #system p span {
    color: #DCA912;
    font-size: 4.2vw;
    font-weight: 600;
  }
  .system_left {
    width: 100%;
    background-color: rgba(26, 58, 70, 0.5);
  }
  .system_left h6 {
    color: cornflowerblue;
    font-size: 8vw;
    margin: 0;
    text-align: center;
    text-shadow: 1px 1px 1px #fff;
  }
  .system_right {
    width: 100%;
    background-color: rgba(77, 0, 0, 0.5);
    padding-bottom: 2%;
  }
  .imgbox {
    width: 100%;
    margin: 0 auto;
  }
  .system_right .imgbox p {
    padding-top: 0%;
  }
  .system_right .imgbox img {
    /*	border: 1px solid red;*/
    padding-top: 0.5%;
  }
  .system_right h6 {
    color: darkred;
    font-size: 8vw;
    margin: 0;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
  }
  /* STAGE */
  #stage {
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 0;
    padding-top: 3%;
    padding-bottom: 5%;
  }
  #stage h4 {
    font-size: 4.8vw;
    font-weight: 700;
    color: white;
    color: #ed2437;
  }
  .game_box {
    width: 100%;
    padding-bottom: 2%;
  }
  .game_box li h6 {
    font-size: 1.2vw;
    margin: 0;
    padding: 0;
    font-weight: 500;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 1%;
  }
  .game_box img {
    box-shadow: 1px 1px 20px 2px #ed2437;
    margin: 5% 0% 0% 0%;
  }
  .game_box.two li {
    width: 95%;
    display: inline-block;
    padding-left: 1%;
    padding-right: 1%;
    color: white;
  }
  #movie {
    position: relative;
    width: 100%;
    border: 0px solid red;
    overflow: hidden;
    padding-bottom: 10%;
  }
  #movie .inner {
    width: 100%;
    border: 0px solid green;
    text-align: center;
    padding-top: 2%;
  }
  #movie h4 {
    font-size: 4.8vw;
  }
  #movie .movie_if_main {
    position: relative;
    width: 100%;
    heigth: auto;
    padding-top: 56.4%;
    border: 2px solid red;
  }
  #movie .movie_if_main iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #movie .movie_if {
    width: 99%;
  }
  .movie_if {
    position: relative;
    padding-top: 56%;
    width: 100%;
    height: 0;
  }
	.movie_if_box1 {
		float: none;
		width: 93%;
		margin-bottom: 1%;
	}
	.movie_if_box2 {
		float: none;
		width: 93%;
	}
	.movie_if_box3 {
		float: none;
		width: 93%;
	}
	.movie_if_box4 {
		float: none;
		width: 93%;
	}
  /* iframe */
  .movie_if > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* PACKAGE */
  #package {
    position: relative;
    width: 100%;
    border: 0px solid red;
    overflow: hidden;
    padding-bottom: 9%;
    padding-top: 0%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
  }
  #package .inner {
    width: 95%;
    border: 0px solid green;
    text-align: center;
    padding-top: 0%;
  }
  #package h4 {
    font-size: 4.8vw;
    font-weight: 700;
    color: white;
    color: #ed2437;
    margin-bottom: 0;
    margin-top: 5%;
  }
  #package p {
    color: #fff;
    font-size: 4.2vw;
    margin-bottom: 3%;
  }
  /* 점포 특전 */
	#store h4 {
		font-size: 4.8vw;
	}
  #special_store .store_box {
    width: 98%;
  }
  #special_store .store_box li {
    width: 30%;
    display: inline-block;
  }
	#special_store h3 {
		font-size: 4vw;
	}
 
  #infor {
    width: 100%;
    color: white;
    border: 0px solid black;
    background-color: #2d2c4e;
    overflow: hidden;
    background-image: url('https://directg.diskn.com/37bsv6FGVm');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: cover;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  .infor_table {
    border: 0px solid red;
    width: 95%;
    float: none;
    margin: auto;
  }
  .table_img {
    border: 0px solid red;
    width: 100%;
    float: none;
    text-align: center;
  }
  .table_img img {
    width: 80%;
  }
  .table_if1 {
    background-color: none;
    text-align: left;
    margin: auto;
    border: 0px solid red;
    width: 100%;
    margin-bottom: 3%;
    margin-left: 0%;
  }
  .table_if1 th {
    width: 20%;
    color: white;
    border: 0px;
    border-bottom: 3px solid #980100;
    font-size: 3.5vw;
    padding: 1%;
    font-weight: 500;
  }
  .table_if1 td {
    width: 65%;
    border: 0px;
    border-bottom: 1px solid #980100;
    font-size: 3.3vw;
    padding: 0.5%;
    padding-left: 0.8%;
    font-weight: 300;
  }
  .table_if1 td:nth-child(6) {
    border-bottom: none;
  }
  #product p {
    text-align: left;
    margin-left: 0%;
    border-bottom: 3px solid #980100;
    padding-bottom: 2%;
    width: 100%;
    font-size: 3.3vw;
  }
	#product h2 {
		font-size: 3vw;
	}
  .header {
    padding: 0;
    width: 100%;
    border: 0px solid blue;
    float: left;
    padding-bottom: 50%;
  }
  .header .ps4 {
    width: 40%;
    border: 0px solid red;
    padding: 4% 0 20px 0;
    float: left;
  }
  .header .ps4 img {
    width: 100%;
  }
  .header .twiter {
    width: 8%;
    border: 0px solid red;
    padding-top: 2%;
    float: right;
  }
  .header .twiter img {
    width: 100%;
    float: right;
  }
  .header .switch {
    width: 25%;
    padding: 25px 2%;
    border: 0px solid red;
    float: left;
  }
  .header .switch img {
    width: 100%;
    border: 0px solid red;
    float: left;
  }
  footer {
    bottom: 0;
    width: 100%;
    background-color: #600000;
    color: white;
  }
  footer {
    flex: 1 1 100%;
    text-align: center;
  }
  .company {
    width: 100%;
    border: 0px solid magenta;
    margin: auto;
    text-align: center;
    padding: 2% 0 10px 0;
  }
  .company li {
    display: inline-block;
    width: 22%;
    padding-right: 1%;
  }
  .company li img {
    width: 100%;
  }
  .company li:nth-child(2) img {
    width: 96%;
  }
  .copyright {
    font-size: 1.5vw;
    padding: 1% 0 5% 0;
    text-align: center;
    margin: auto;
    width: 92%;
    color: white;
  }
}