@charset "utf-8";

/*--font--*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@900&family=Rampart+One&display=swap');
.twitter{opacity:0.9;}

.twitter:hover {opacity:1;  transition: opacity 1s; }



@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
/*---pc---*/
::-webkit-scrollbar {
     display: none;
   }
body{
	font-family: 'Noto Sans JP', san-serif;
	width:100%;
	border:0px solid green;
	padding:0;
	margin:0;
	font-size:18px;
	background-image:url('https://image.directg.net/l7Hot7XKIw'); 
		background-size:cover;
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
	animation: fadein 0.5s;
	position: relative;
}	
.embers {
	width: 100%;
	height: 1080px;
	position: absolute;
	top: 0;
	left: 0;
	border: 0px solid red;
	background-image: url(https://image.directg.net/w7HpUPu89c);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	z-index: 0;
	opacity: 0.5;
	animation-name: ani-embers;
  animation-duration: 120s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
	overflow-x: hidden;
}
	
@keyframes ani-embers {
  0% {
    opacity: 0.8;
	  bottom: 0;
	  margin-left: 0;
	  transform: rotate(-5deg);
  }

	50% {
		transform: rotate(360deg)
	}
	
  100% {
    opacity: 0.1;
	  bottom: 100%;
/*	  margin-left: 50%;*/
	  transform: rotate(-5deg)
  }
}
html{
	font-family: 'Noto Sans JP', san-serif;
	font-size:18px;
	background-color: #000;
	overflow-x: hidden;
}

a{text-decoration:none; color:white;}


p{font-family: 'Noto Sans JP', san-serif; font-size:1.1vw; font-weight:200; color:white; margin:0; padding:0; line-height: 150%;}

th{font-family: 'Noto Sans JP', san-serif; font-weight:500;}
td{font-family: 'Noto Sans JP', san-serif; font-weight:400;}

img{width:100%; height: auto; vertical-align: bottom;}
a img {
	transition: all 0.3s linear;
	overflow: hidden;
}

.intro_1_img {
	overflow: hidden;
}

ul, li{ list-style:none; margin:0; padding:0;}

h1{font-family: 'Rampart One', cursive; font-weight:900; font-size:3vw; color:#0c7ced; margin:0; padding:0; padding-bottom:1%;}
h2{font-family: 'Noto Sans JP', san-serif; font-weight:900; font-size:1.6vw; color:#8dc4c4; margin:0; padding:0;}
h3{font-family: 'Noto Sans JP', san-serif; font-weight:700; font-size:1.5vw; color:white; margin:0; padding:0 0 0 0%;}
h5{font-family: 'Noto Sans JP', san-serif; font-weight:700; font-size:1.2vw; color:white; margin:0; padding:2% 0;}
h6{font-family: 'Noto Sans JP', san-serif; font-weight:800; font-size:1.3vw; color:#0c7ced; margin:0; padding:0;}


/*--네비게이션--*/

.et-hero-tabs,
.et-slide {
  position: relative;
  width: 100%;
  }
	.et-hero-tabs-container {
	  display: flex;
	  flex-direction: row;
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 80px;
	  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	  background: rgba(16, 16, 16, 0.72);
	  z-index: 10;
	}
	.et-hero-tabs-container--top {
	  position: fixed;
	  top: 0;
	}

	.et-hero-tab {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex: 1;
	  transition: all 1s ease;
	  font-size: 1.1vw;
	  font-weight:500;
	  color:white;
	  border:0px solid #eee;
	}
	.et-hero-tab:hover {
	  color: #eee;
		text-shadow: 1px 1px 15px #fff;
		transform: scale(1.1);
/*	  background: #1d3660;*/
	  transition: all 0.3s ease;
	}

	.et-hero-tab-slider {
		display: none;
	  position: absolute;
	  bottom: 0;
	  width: 0;
	  height:5px;
	  background: linear-gradient(170deg, rgba(13,20,39,1) 0%, rgba(76,121,198,1) 97%);
	  transition: left 0.3s ease;
	}

#main{
	font-family: 'Noto Sans JP', sans-serif;
	width:100%;
/*	height: 100vh;*/
	background-image:url('https://image.directg.net/i7HorMRefO');
	background-size: cover; 
	background-position:top;
	background-repeat: no-repeat; 
	border:0px solid red;
	overflow: hidden;
	padding-bottom: 5%;
}

	.outer{width:100%; border:0px solid pink;margin:auto;}
	.inner{width:87%; border:0px solid red; margin:auto;}

.header {
	padding:0;
	border:0px solid blue;
	overflow: hidden;
	display: flex;
	position: relative;
/*	align-items: center;*/
	padding-bottom: 5%;
	padding-top: 1%;
}

	.header .ps5{border:0px solid red; padding:0% 1.5% 0px 0; width: 10%;}
.header .dg {border:0px solid red; padding:0% 0 0px 0; width: 11%;}

	.header .twitter{width:20%; border:0px solid red; padding-top:0%; position: absolute; right: 0;}
	.header .twitter img{width:20%; border:0px solid red; position: absolute; right: 0; top: 0;}

.gamelogo {width:96%; border:0px solid blue; text-align:right; padding-top:0%; margin-top: 0%;}
.gamelogo img{width:45%; border:0px solid blue;}

.title{font-size:2vw; color:white; text-align: center;}
.intro_right {display: flex; justify-content: center; align-items: center; flex-flow: column;}

/* TOPIC */
	.topic_box{ 
		color:white;
		position:relative;
		margin-right:5%;
		margin-top:2%;
		width: 39%; 
/*		border:2px solid white;  */
		padding:1.5%; 
		padding-top:2.5%;
		float: right; 
		background: rgba(0,0,0,0.7);
		margin-bottom:4.4%;
		box-shadow: inset 0px 0px 20px #1d7cab;
		border-radius: 100px;
	}

	.topic_in{width: 100%; overflow-y:scroll; height:100px; text-align: center;}
	.topic_in span{font-size:1.1vw; font-weight:700; color:#fff;}
			

			
	.topic_haeder {position:absolute;top:-20%;left:38%; bottom:60%;}
	.topic_haeder img{width:55%;}
	
	hr{border-color:#fff; opacity: 0.6;}
.topic_in li a {
	transition: all 0.3s;
}
.topic_in li a:hover {
/*	color: hotpink;*/
	text-shadow: 0px 0px 15px #000;
	color: orangered;
}
.topic_in .two a:hover {
/*	color: hotpink;*/
	text-shadow: 0px 0px 15px #000;
	color: yellow;
}
.topic_in .three a:hover {
/*	color: hotpink;*/
	text-shadow: 0px 0px 15px #000;
	color: limegreen;
}
.topic_in .four a:hover {
/*	color: hotpink;*/
	text-shadow: 0px 0px 15px #000;
	color: mediumpurple;
}
.topic_in .five a:hover {
/*	color: hotpink;*/
	text-shadow: 0px 0px 15px #000;
	color: #fbfca5;
}
.topic_in .six a:hover {
/*	color: hotpink;*/
	text-shadow: 0px 0px 15px #fff;
	color: #96EEFE;
}


#intro{width: 100%;}
#intro .inner{width: 90%;}

	.intro_1{
		width: 100%;
		margin: 0 auto;
		background-color: #151b33;
		overflow:hidden; 
		padding-top: 5%;
		padding-bottom: 5%;
	}

	.intro_1_text{
		width:50%;
		margin: 0 auto;
		text-align: center;
}
.intro_1_text h1 {
	font-size: 1.5vw;
	margin-top: 8%;
	margin-bottom: 1.5%;
	font-family: 'Noto Sans JP', san-serif;
}
.intro_1_img{
	width: 45%;
	float: left;
	margin-left: 3%;
	border: 4px solid #8dc4c4;
}

#movie {
  width: 100%;
  padding: 5% 0 4%;
  background-color: rgba(0, 0, 0, 0.8);
}

#movie .inner {
  width: 67%;
  margin: 0 auto;
  text-align: center;
}

#movie h1 {
  text-align: center;
  margin-bottom: 2%;
}

#movie p {
  color: white;
  text-align: center;
  font-weight: 500;
  font-size: 1.4vw;
  padding-top: 2%;
  padding-bottom: 8%;
}

/* GRID */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5%;
}

.movie_if {
  aspect-ratio: 16 / 9;
  position: relative;
  border: 2px solid #222;
  border-radius: 10px;
  overflow: hidden;
}

.movie_if iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 더보기 기능 - 처음엔 6개까지만 */
.movie-grid.collapsed .movie_if:nth-child(n+7) {
  display: none;
}

#movieMoreBtn {
  margin-top: 1.5rem;
  padding: 0.7rem 1.4rem;
  background: #2d2d2d;
  color: #fff;
  border: 1px solid #444;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
}



/* 접근성 숨김요소 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#game {position: relative;  width: 100%; border:0px solid red;  overflow: hidden; padding-bottom:0%;}
#game .inner {width:100%; text-align: center; padding-top:0%;}
#game h1 {text-align: center; padding-bottom: 2%; padding-top: 2%;}
#game h2 {
	margin-bottom: 4%;
	color: #fff;
	font-size: 1.9vw;
	text-align: left;
}

#game .img {width: 70%; display: flex; align-items: center;  padding: 0%; overflow: hidden;}
#game .chara {display: flex; text-align: left; align-items: space-around; justify-content: space-around; background-image: url(https://image.directg.net/h7HoycGUmv);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#game .chara > ul {display: flex; justify-content: center;flex-flow: column; padding-bottom: 2%; width: 70%; }
#game .chara ul li {
	margin: 0 auto;
/*	border: 1px solid red;*/
	width: 100%;
	margin-left: 12%;
}
#game .chara p {font-size: 1.2vw; font-weight: 300; display: inline-block; margin: 0; padding-bottom: 0%; color: #fff;}
#game .chara:nth-child(2n) {flex-flow: row-reverse; background-image: url(https://image.directg.net/P7HoycGUoW);
background-repeat: no-repeat;
	background-position: center;
	background-size: cover;}




#Special {
	width: 100%;
	overflow: hidden;
	padding: 3% 0;
	background-color: rgba(0,0,0,0.65);
}
	#Special .inner{width: 65%;}
#Special h1,h3 {
	text-align: center;
}
#Special h3 {
	margin-bottom: 1%;
	margin-top: 3%;
}
		.Special_box1{width:100%; overflow: hidden;}
		.Special_box1 .Special_img{width:72%; margin: 0 auto; overflow: hidden;}
#Special p {
	text-align: center;
	margin-bottom: 1%;
}
#Special p span {
	background-color: #eda93a;
	padding-left: 0.4%;
	padding-right: 0.4%;
}
/* swiper slider */
.swiper {
  width: 100%;
}
.swiper .swiper-slide {
  display: flex;
}
.swiper .swiper-slide img {
  width: 85%;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.3s;
	margin-left: 7.5%;
}
.swiper .swiper-slide img:hover {
  transform: scale(1.0);
	filter: grayscale(0.5);
}
.swiper-button-prev::after, .swiper-button-next::after {
  color: #fff;
  /*	border-radius: 100px;*/
  padding: 30%;
}
.swiper-pagination-bullet {
  width: 25px;
  height: 25px;
  background-color: #fff;
  opacity: 0.65;
  border-radius: 0px;
  box-shadow: 0px 0px 5px #fff;
}
.swiper-pagination-bullet-active {
  background-color: #dad180;
  opacity: 1;
  width: 10px;
  height: 10px;
}
.swiper-pagination {
	display: none;
}
/* PRODUCT */
#product {
	padding-bottom: 1%;
}
#product .inner {
	width: 100%;
}
#product h1 {text-align: center; padding-bottom: 2%; padding-top: 2%; }
#product .preorder_bg {
	width: 100%;
	background-image: url(https://image.directg.net/n7HoAnraeW);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	padding-top: 10%;
	padding-bottom: 10%;
	position: relative;
}

.preorder_contents {
	margin-left: 20%;
	width: 35%;
	border: 0px solid red;
}
.preorder_contents h2 {
	color: #fff;
	margin-bottom: 1%;
	text-shadow: 0px 0px 15px yellow;
}
.preorder_cha {
	width: 50%;
	position: absolute;
	right: 22%;
	top: 1%;
	animation-name: ani-ch;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes ani-ch {
  0% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-1px);
  }
}
	
#product ul {	
	color: #fff;
}
#product .info {
	font-size: 1vw;
	text-align: left;
	padding-left: 10%;
	color: #f9f9f9;
	margin-top: 1.5%;
}
#product .info span {
	font-size: 14px;
	opacity: 0.8;
	vertical-align: text-top;
}

.infor_box {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 16px;
    box-sizing: border-box;
	padding-top: 5%;
  }

  .infor_card {
    width: calc((100% - 48px) / 4);
    min-height: 520px;
    padding: 24px 18px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(102,10,12,0.1) 0%, rgba(1,23,85,0.65) 99%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    text-align: center;
    vertical-align: top;
  }

  .infor_card img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 18px;
    border-radius: 8px;
  }

  .infor_price {
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.4;
    font-weight: bold;
    color: #fff;
  }

  .infor_title {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    font-weight: bold;
  }

  .infor_contents {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    color: #fff;
    font-size: 14px;
    line-height: 1.75;
  }

  .infor_contents > li {
    margin: 0;
    padding: 0;
  }

  .infor_contents .plus {
    display: block;
    text-align: center;
    margin: 4px 0;
    color: #aaa;
  }

  .infor_sublist {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.7;
    color: #ddd;
  }

  .infor_sublist li {
    margin: 0;
    padding: 0 0 0 12px;
  }

.price { color: #fff;}


	.infor_table{width:80.4%; margin:auto; overflow: hidden; margin-top:1%;background: linear-gradient(180deg, rgba(102,10,12,0.1) 0%, rgba(1,23,85,0.65) 99%); padding-bottom: 3%;}
	.table_if{text-align:left;font-size:1vw;margin:auto; width:55%; float: left; }
	.table_if th{background:rgba(30,0,100,0.2); color:white; font-weight:600;border:0px solid red;font-size:1vw; padding:0 20px;}
	.table_if td{color:white; font-weight:400;border:1px dotted #60c3ff;font-size:1vw; padding:5px 0px 5px 20px;}


	.table_if2{text-align:left;font-size:1vw;margin:auto; width:45%;  float: right;}
	.table_if2 th{background:rgba(30,0,100,0.2); color:white; font-weight:600;border:0px solid red;font-size:1vw; padding:0 20px;}
	.table_if2 td{color:white; font-weight:400;border:1px dotted #60c3ff;font-size:1vw; padding:5px 0px 5px 20px;}

#infor{
	width: 100%; 
	color:white; 
	border:0px solid black; 
	overflow: hidden; 
	padding-top:0%;  
	padding-bottom:6%;
	}


	.table_if1{background-color:none; 
		text-align: left; 
		font-size:1vw; 
		border:0px solid red; 
		margin:auto; 
		width:85%; 
		margin-top:6%; 
		margin-left:7%;
	}
	.table_if1 th{
		width: 25%;
		color:white;
		border:0px;
		border-bottom:3px solid rgba(201,195,16,1.00);
		font-size:1.2vw; 
		padding:0.5%;  
		font-weight:600;
		padding-bottom:1%;
	}
	.table_if1 td{
		width: 75%;
		border:0px;
		border-bottom:1px solid #60c3ff;
		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;
	}
.infor_table p {
	margin-left: 7%;
	font-size: 1vw;
	color: #ddd;
}

/* download page 
*******************************/
#how {
	width: 70%;
	padding-top: 7%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom: 0.5%;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.65);
}
#how img {
	width: 55%;
	border: 1px solid rgb(191,190,190);
}
#how .icon {
	width: 3%;
}
#how h2 {
	text-shadow: 0px 0px 15px #000;
/*	font-size: 26px;*/
	text-align: center;
}
#how h3 {
	font-size: 2vw;
}
#how p {
	margin-top: 1.5%;
	padding: 0.5%;
	background-color: rgba(191,190,190,0.95);
	color: #000;
	font-weight: 500;
	font-size: 18px;
	font-family: 'Noto Sans JP', san-serif;
	}

#how a {
	color: blue;
}
#how ul li {
	color: #fff;
	font-size: 16px;
}
#how ul {
	margin-top: 0.7%;
	margin-bottom: 3%;
	font-family: 'Noto Sans JP', san-serif;
}
footer{
	bottom:0;
	width: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2c9ab5+0,d54e88+100 */
	background-image: url("../images/aow4-bg.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 0%;
}

	.company{width: 100%; border:0px solid magenta; margin:auto; text-align: center; padding:30px 0 10px 0;}
	.company li{width:9%; display:inline-block; border:0px solid green; vertical-align: middle;}
	.company li img{ border:0px solid red;}
	.company li:nth-child(1) a img{width:50%; }
	.company li:nth-child(2) a img{width:65%; }
.company li:nth-child(3) a img{width:60%; }
.company li a:hover img {
	transform: scale(1.0);
}

	.copyright{
		font-size:14px;
		font-weight:300;
		padding:10px 0 25px 0 ;
		text-align: center;
		margin:auto;
		width: 90%;
		color:#999;
	}

@media screen and (max-width:1145px) and (min-width: 992px) {
	/* TOPIC */
	.topic_box{ 
		width: 40%; 
	}
}


/*--태블릿--*/

@media screen and (max-width:991px) and (min-width: 769px) {

.embers {
	
	z-index: 0;
	margin-top: 80%;
}
	 
	.pc-only {
		display: none;
	}
h1{font-family: 'Rampart One', cursive; font-weight:900; font-size:5.5vw; color:#0c7ced; margin:0; padding:0; padding-bottom:1%;}
h2{font-family: 'Noto Sans JP', san-serif; font-weight:900; font-size:2.5vw; color:white; margin:0; padding:0;}
h3{font-family: 'Noto Sans JP', san-serif; font-weight:700; font-size:2.4vw; color:white; margin:0; padding:0;}
h5{font-family: 'Noto Sans JP', san-serif; font-weight:700; font-size:2.3vw; color:white; margin:0; padding:0 0 1% 0;}
h6{font-family: 'Noto Sans JP', san-serif; font-weight:800; font-size:2.2vw; color:#0c7ced; margin:0; padding:0;}
	
p{font-size: 2vw;}
	.header {
	padding:0;
	border:0px solid blue;
	overflow: hidden;
	display: flex;
	position: relative;
}

	.header {
		border: 0px solid red;
		height: 80px;
		margin-top: 1%;
	}
	.header .ps5{border:0px solid red; padding:0% 2% 0px 0; width: 18%;}
	
.header .dg {border:0px solid red;  width: 20%;}

	.header .twitter{width:10%; border:0px solid red; padding-top:0%; position: absolute; right: 0;}
	.header .twitter img{width:10%; border:0px solid red; position: absolute; right: 0; top: 2%;}
/*--네비게이션--*/

.et-hero-tabs,
.et-slide {
  position: relative;
  width: 100%;
  }
	

	.et-hero-tabs-container {
	  display: flex;
	  flex-direction: row;
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 80px;
	  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	  z-index: 10;
	}
	.et-hero-tabs-container--top {
	  position: fixed;
	  top: 0;
	}

	.et-hero-tab {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex: 1;
	  transition: all 0.5s ease;
	  font-size: 2.4vw;
	  font-weight:500;
	  color:white;
	  border:0px solid #eee;
	}


	.et-hero-tab-slider {
		display: none;
	  position: absolute;
	  bottom: 0;
	  width: 0;
	  height:5px;
	  transition: left 0.3s ease;
	}

#main{
	font-family: 'Noto Sans JP', sans-serif;
	width:100%;
	background-image:url('https://image.directg.net/f7HpNpXbnw');
	background-size: cover; 
	background-position:bottom;
	background-repeat: no-repeat; 
	border:0px solid red;
	padding-bottom:5%;
}

	.up-on-scroll{transition: transform 0.7s, opacity 1s;}

	.outer{width:100%; border:0px solid pink;margin:auto;}
	.inner{width:92%; border:0px solid red; margin:auto;}

	.header {
		padding:0;
		width:100%;
		border:0px solid blue;
		float: left;
		overflow: hidden;
	}

	.header .ps4{width:80%; border:0px solid red; padding:5% 0 10px 0; float: left;}
	.header .ps4 img{width:70%;float: left;}
	.header .twitter{width:20%; border:0px solid red; padding-top:3%; float: right;}
	.header .twitter img{width:35%; border:0px solid red; float: right;}

.M_middle{
	width:95%; 
	overflow: hidden;
	padding:0%;
	margin:auto;
	border:0px solid blue;
	padding-top:0%;
	padding-bottom:25%;}

	.Main_tag{ position:static; }
	.Main_tag p{font-family: 'Noto Sans JP', san-serif; font-size: 4.5vw; text-align: center; font-weight:700; padding-bottom:0%;}

	.gamelogo {width:80%; border:0px solid blue; margin:auto; padding-top:0%;}
	.gamelogo img{width:100%; border:0px solid blue;}



.message{width:95%; position: absolute;top:77.5%; right: 2.3%; border:0px solid red; margin:auto; text-align: left;
	padding-top: 5%;
	opacity: 1;
	transition: all 0.3s;
	display: flex;
	justify-content: center;
}
.message:hover {
	opacity: 1;
}
	.message img {
		
	}
	
	/*--topic--*/
.topic_box{ 
		color:white;
		position:relative;
		margin-right:0%;
		margin-top:27%;
		width:95%; 
		border:0px solid red;  
		padding:2%; 
		padding-top:6%;
		padding-bottom:3%;
		float: right; 
		background: linear-gradient(180deg, rgba(0,0,5,0.7903536414565826) 0%, rgba(0,0,0,0.3477766106442577) 100%, rgba(157,0,0,1) 100%, rgba(33,0,0,0.7567401960784313) 100%);
		margin-bottom:10%;
	}

	.topic_in{width: 100%; overflow-y:scroll; height:120px; }
	.topic_in span{font-size:2.5vw;}
			  .topic_in::-webkit-scrollbar {
				width: 0px;
			  }
			
	.topic_haeder {position:absolute;top:-20%;left:38%; bottom:60%;}
	.topic_haeder img{width:55%;}
	
	hr{border-color:white;}

#intro{width: 100%;}
#intro .inner{width: 100%;}

	.intro_1{
		width: 100%;
		margin: 0 auto;
		overflow:hidden; 
		padding-top: 5%;
		padding-bottom: 5%;
	}

	.intro_1_text{
		width:90%;
		float: none;
		margin: 0 auto;
}
.intro_1_text h1 {
	font-size: 2.5vw;
	margin-top: 8%;
	margin-bottom: 1.5%;
}
.intro_1_img{
	width: 90%;
	float: none;
	margin-left: 0%;
	margin-top: 4%;
	margin: 0 auto;
}

	
#game {position: relative;  width: 100%; border:0px solid red;  overflow: hidden; padding-bottom:0%;}
#game .inner {width:100%; text-align: center; padding-top:0%;}
#game h1 {text-align: center; padding-bottom: 2%; padding-top: 2%;}
#game h2 {
	margin-bottom: 3%;
}
#game .img {width: 100%; margin: 0 auto;}
#game .chara {display: block; text-align: left; margin: 0 auto;}
#game .chara > ul {display: block; padding-bottom: 2%; padding-top: 4%; width: 100%; margin: 0 auto; text-align: center;}
	#game .chara ul li {
		margin-left: 0%;
	}
	#game h2 {
		font-size: 3.5vw;
		text-align: center;
	}
#game .chara p {font-size: 2.2vw; font-weight: 300; display: inline-block; margin: 0 auto; padding-bottom: 3%; color: #fff;}
#game .chara.up {
	border: 0px solid red;
}
#game .chara.up .img {
	border: 0px solid blue;
	display: flex;
	width: 100%;
}
#game .chara.up ul {
	margin-left: 5%;
}
#game .chara.up span {
	font-weight: 800;
}




#Special {
	width: 100%;
	overflow: hidden;
	padding: 3% 0;
}
	#Special .inner{width: 90%;}
#Special h1,h3 {
	text-align: center;
}
#Special h3 {
	margin-bottom: 1%;
}
		.Special_box1{width:100%; overflow: hidden;}
		.Special_box1 .Special_img{width:90%; margin: 0 auto;}
#Special p {
	text-align: center;
	margin-bottom: 1%;
	font-size: 2vw;
}
	/* swiper slider */
.swiper {
  width: 100%;
}
.swiper .swiper-slide {
  display: flex;
}
.swiper .swiper-slide img {
  width: 85%;
  margin-left: 7.8%;
  overflow: hidden;
  transition: all 0.3s;
}
.swiper .swiper-slide img:hover {
  transform: scale(1.01);
	filter: grayscale(0.3);
}
.swiper-button-prev::after, .swiper-button-next::after {
  color: #fff;
  /*	border-radius: 100px;*/
  padding: 30%;
}

/* PRODUCT */
	#product .preorder_bg {
	width: 100%;
	padding-top: 10%;
	padding-bottom: 10%;
	position: relative;
}

.preorder_contents {
	margin-left: 15%;
	width: 35%;
	border: 0px solid red;
}
.preorder_contents h2 {
	color: #fff;
	margin-bottom: 1%;
	text-shadow: 0px 0px 15px yellow;
}
.preorder_cha {
	width: 60%;
	position: absolute;
	right: 18%;
}
	.infor_box{width:91.5%;  margin:auto; text-align: center; padding:1% 0%; color:black; overflow:hidden; }
	.infor_box p {font-size:1.3vw; font-weight:700; padding:0; margin-bottom: 1%;}
	.infor_box p span{font-size:0.9vw; }
	.infor_box img{width:45%;}
#product ul {	
	color: #fff;
}
#product .info {
	font-size: 1.8vw;
	text-align: left;
	padding-left: 20%;
	color: #eee;
}
	.infor_box p {
		font-size: 2.7vw;
	}
	.infor_box p span {
		font-size: 2.2vw;
	}
#product .info span {
	font-size: 14px;
}
		.infor_box {
    max-width: 900px;
    gap: 28px 20px;
    padding-top: 6%;
  }

  .infor_card {
    width: calc((100% - 20px) / 2);
    min-height: 500px;
    padding: 22px 18px;
  }

  .infor_price {
    font-size: 21px;
    margin-bottom: 16px;
  }

  .infor_title {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .infor_contents {
    font-size: 14px;
    line-height: 1.7;
  }

  .infor_sublist {
    font-size: 13px;
    line-height: 1.65;
  }
#infor{
	width: 100%; 
	color:white; 
	border:0px solid black; 
	padding-top:0%;  
	padding-bottom:6%;
	}

.infor_table{width:100%; margin:auto; overflow: hidden; margin-top:1%;background-color: rgba(0,0,0,0.4); padding-bottom: 3%;}
	.table_if1{background-color:none; 
		text-align: left; 
		font-size:1vw; 
		border:0px solid red; 
		margin:auto; 
		width:85%; 
		margin-top:6%; 
		margin-left:7%;
	}
	.table_if1 th{
		width: 25%;
		color:white;
		border:0px;
		border-bottom:3px solid rgba(201,195,16,1.00);
		font-size:1.8vw; 
		padding:0.5%;  
		font-weight:600;
		padding-bottom:1%;
	}
	.table_if1 td{
		width: 75%;
		border:0px;
		font-size:1.6vw; 
		border-bottom:1px solid #60c3ff;
		padding:0.5%;
		padding-left:0.8%;
		font-weight:300;
		padding-bottom:1%;
	}

	.table_if1 td:nth-child(6){

		border-bottom:none;
	}
.infor_table p {
	margin-left: 7%;
	font-size: 1.5vw;
	color: #ddd;
}

footer{
	bottom:0;
	width: 100%;
}

	.company{width: 100%; border:0px solid magenta; margin:auto; text-align: center; padding:20px 0 0px 0;}
	.company li{width:15%; display:inline-block; border:0px solid green;}
	.company li img{ border:0px solid red;}
	.company li:nth-child(1) a img{width:60%; }
	.company li:nth-child(2) a img{width:80%; }
	.company li:nth-child(3) a img{width:64%; }
	

	.copyright{
		font-size:11px;
		font-weight:300;
		padding:10px 0 20px 0 ;
		text-align: center;
		margin:auto;
		width: 95%;
		color:#999;
	}
		
}

/*--모바일--*/
@media screen and (max-width:768px) and (min-width: 300px) {

	.swiper {
        width: 90%;
      }
	.pc-only {
		display: none;
	}
	 .embers {
	
	z-index: 0;
	margin-top: 135%;
		 border: 0px solid red;
		 height: 400px;
}

h1{font-family: 'Rampart One', cursive; font-weight:800; font-size:7.5vw; color:#0c7ced; margin:0; padding:0; padding-bottom:1%;}
h2{font-family: 'Noto Sans JP', san-serif; font-weight:900; font-size:3.5vw; color:white; margin:0; padding:0;}
h3{font-family: 'Noto Sans JP', san-serif; font-weight:700; font-size:3vw; color:white; margin:0; padding:0 0 2% 0;}
h5{font-family: 'Noto Sans JP', san-serif; font-weight:700; font-size:3vw; color:white; margin:0; padding:0 0 1% 0;}
h6{font-family: 'Noto Sans JP', san-serif; font-weight:800; font-size:3vw; color:#0c7ced; margin:0; padding:0;}
	
p{font-size: 3vw;}
	.outer {
		width: 100%;
	}
	.inner {
		width: 98%;
	}
.header {
	padding:0;
	border:1px solid blue;
	overflow: hidden;
	display: flex;
	position: relative;
	margin-top: 1%;
}


	.header .ps5{border:0px solid red; padding:0.5% 2% 0px 0; width: 33%;}
	
.header .dg {border:0px solid red;  width: 34%;}

	.header .twitter{width:40%; border:0px solid red; padding-top:1.5%; position: absolute; right: 0;}
	.header .twitter img{width:40%; border:0px solid red; position: absolute; right: 0; top: 3px;}
/*--네비게이션--*/

.et-hero-tabs,
.et-slide {
  position: relative;
  width: 100%;
  }
	
	.et-hero-tabs-container {
	  display: flex;
	  flex-direction: row;
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 80px;
	  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	  z-index: 10;
	}
	.et-hero-tabs-container--top {
	  position: fixed;
	  top: 0;
	}

	.et-hero-tab {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex: 1;
	  transition: all 0.5s ease;
	  font-size: 13px;
	  font-weight:500;
	  color:white;
	  border:1px solid #eee;
	}
	

	.et-hero-tab-slider {
		display: none;
	  position: absolute;
	  bottom: 0;
	  width: 0;
	  height:5px;
	  background: linear-gradient(170deg, rgba(13,20,39,1) 0%, rgba(76,121,198,1) 97%);
	  transition: left 0.3s ease;
	}

#main{
	font-family: 'Noto Sans JP', sans-serif;
	width:100%;
	background-image:url('https://image.directg.net/f7HpNpXbnw');
	background-size: cover; 
	background-position:bottom;
	background-repeat: no-repeat; 
	border:0px solid red;
	padding-bottom:20%;
}

	.up-on-scroll{transition: transform 0.7s, opacity 1s;}

	.outer{width:100%; border:0px solid pink;margin:auto;}
	.inner{width:95%; border:0px solid red; margin:auto; }

	.header {
		padding:0;
		width:100%;
		border:0px solid blue;
		float: left;
		overflow: hidden;
		height: 80px;
	}

	.header .ps5{width:25%;}
	.header .dg {width: 25%; margin-top: 1%; margin-left: 1%;}
	.header .ps5 img{width:100%;}
	.header .twitter{width:25%; border:0px solid red; padding-top:3%; float: right;}
	.header .twitter img{width:35%; border:0px solid red; float: right;}

.M_middle{
	width:95%; 
	overflow: hidden;
	padding:0%;
	margin:auto;
	border:0px solid blue;
	padding-top:5%;
	padding-bottom:35%;}

	.Main_tag{ position:static; }
	.Main_tag p{font-family: 'Noto Sans JP', san-serif; font-size: 4.5vw; text-align: center; font-weight:700; padding-bottom:0%;}

	.gamelogo {width:80%; border:0px solid blue; margin:auto; padding-top:0%;}
	.gamelogo img{width:100%; border:0px solid blue; margin-top: 0%;}




	
	/*--topic--*/
.topic_box{ 
		color:white;
		position:relative;
		margin-right:0%;
		margin-top:27%;
		width:95%; 
		border:0px solid red;  
		padding:2%; 
		padding-top:3%;
		padding-bottom:0%;
		float: right; 
		background: linear-gradient(180deg, rgba(0,0,5,0.7903536414565826) 0%, rgba(0,0,0,0.3477766106442577) 100%, rgba(157,0,0,1) 100%, rgba(33,0,0,0.7567401960784313) 100%);
		margin-bottom:0%;
	}

	.topic_in{width: 100%; overflow-y:scroll; height:100px; }
	.topic_in span{font-size:4.5vw;}
			  .topic_in::-webkit-scrollbar {
				width: 0px;
			  }
			  .topic_in::-webkit-scrollbar-thumb {
				background-color: #0c7ced;
			  }
			  .topic_in::-webkit-scrollbar-track {
				background-color: #0c7ced;
			  }
			
	.topic_haeder {position:absolute;top:-30%;left:32%; bottom:60%;}
	.topic_haeder img{width:55%;}
	
	hr{border-color:white;}

#intro{width: 100%;}
#intro .inner{width: 90%;}

	.intro_1{
		width: 100%;
		margin: 0 auto;
		overflow:hidden; 
		padding-top: 5%;
		padding-bottom: 5%;
	}

	.intro_1_text{
		width:95%;
		float: none;
		margin: 0 auto;
}
.intro_1_text h1 {
	font-size: 3.9vw;
	margin-top: 2%;
	margin-bottom: 1%;
}
	.intro_1_text p {
		font-size: 3.4vw;
	}
#movie{width: 100%; border:0px solid red; padding: 5% 0 10% 0; background-color:#242424;overflow: hidden;}
	#movie .inner{width:96%; border:0px solid green; text-align: center; overflow: hidden;}
	#movie h1{text-align: center; margin-bottom:2%; }
	#movie p{color:white; text-align:center; font-weight:500; font-size:3.5vw; padding-top:2%; padding-bottom:8%;}

.movie_if_box1,
.movie_if_box2,
.movie_if_box3,
.movie_if_box4,
.movie_if_box5,
.movie_if_box6,
.movie_if_box7,
.movie_if_box8 {
  float: inherit;
  width: 100%;
  border: 0;
  overflow: hidden;
  padding-top: 1%;
}

	.movie_if_none{width:100%; padding-bottom:56.5%; border-radius:10px; background-color:#2D2D2D; 
				background-image: url('https://directg.diskn.com/27hEyk1sKC'); background-position: center;}
	/*.movie_if_none{margin: auto; margin-top:0%; width: 60%; background-color:#151515; padding-bottom:35%; border-radius:20px;}*/



#game {position: relative;  width: 100%; border:0px solid red;  overflow: hidden; padding-bottom:0%;}
#game .inner {width:100%; text-align: center; padding-top:0%;}
#game h1 {text-align: center; padding-bottom: 2%; padding-top: 2%;}
#game h2 {
	margin-bottom: 3%;
}
#game .img {width: 100%; margin: 0 auto;}
#game .chara {display: block; text-align: left; margin: 0 auto;}
#game .chara > ul {display: block; padding-bottom: 2%; padding-top: 4%; width: 100%; margin: 0 auto; text-align: center;}
	#game .chara ul li {
		margin-left: 0%;
	}
	#game h2 {
		font-size: 20px;
		text-align: center;
	}
#game .chara p {font-size: 15px; font-weight: 300; display: inline-block; margin: 0 auto; padding-bottom: 3%; color: #fff;}
#game .chara.up {
	border: 0px solid red;
}
#game .chara.up .img {
	border: 0px solid blue;
	display: flex;
	width: 100%;
}
#game .chara.up ul {
	margin-left: 5%;
}
#game .chara.up span {
	font-weight: 800;
}




#Special {
	width: 100%;
	overflow: hidden;
	padding-bottom: 10%;
	padding-top: 10%;
}
	#Special .inner{width: 100%;}
#Special h1,h3 {
	text-align: center;
}
#Special h3 {
	margin-top: 3%;
	margin-bottom: 0%;
	font-size: 4.5vw;
}
		.Special_box1{width:100%; overflow: hidden;}
		.Special_box1 .Special_img{width:90%; margin: 0 auto; margin-bottom: 5%;}
#Special p {
	text-align: center;
	margin-bottom: 1%;
	font-size: 4vw;
}
	.swiper {
  width: 100%;
}
.swiper .swiper-slide {
  display: flex;
}
.swiper .swiper-slide img {
  width: 80%;
  margin-left: 10%;
  overflow: hidden;
  transition: all 0.3s;
}
.swiper .swiper-slide img:hover {
  transform: scale(1.01);
	filter: grayscale(0.3);
}
.swiper-button-prev::after, .swiper-button-next::after {
  color: #fff;
  /*	border-radius: 100px;*/
  padding: 30%;
}
/* PRODUCT */
#product .preorder_bg {
	width: 100%;
	padding-top: 10%;
	padding-bottom: 60%;
	position: relative;
	background-position: left;
}

.preorder_contents {
	margin: 0 auto;
	text-align: center;
	width: 100%;
	border: 0px solid red;
	z-index: 100;
}
.preorder_contents h2 {
	color: #fff;
	margin-bottom: 1%;
	text-shadow: 0px 0px 15px yellow;
}
.preorder_cha {
	width: 100%;
	position: absolute;
	right: 18%;
	top: 37%;
}

	.infor_box{width:100%;  margin:auto; text-align: center; padding:1% 0%; color:black; overflow:hidden; }
	.infor_box p {font-size:16px; font-weight:700; padding:0; margin-bottom: 1%;}
	.infor_box p span{font-size:14px; }
	.infor_box img{width:75%;}
#product ul {	
	color: #fff;
}
#product .info {
	font-size: 12px;
	text-align: left;
	padding-left: 15%;
	color: #eee;
}
	

.infor_box {
    width: 100%;
    max-width: 100%;
    padding-top: 8%;
    padding-left: 16px;
    padding-right: 16px;
    gap: 24px 0;
  }

  .infor_card {
    width: 100%;
    min-height: auto;
    padding: 20px 16px;
    border-radius: 12px;
  }

  .infor_card img {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 16px;
    border-radius: 8px;
  }

  .infor_price {
    font-size: 20px;
    margin-bottom: 14px;
    line-height: 1.35;
  }

  .infor_title {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .infor_contents {
    font-size: 13px;
    line-height: 1.65;
  }

  .infor_contents .plus {
    margin: 3px 0;
  }

  .infor_sublist {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.6;
  }

  .infor_sublist li {
    padding-left: 8px;
  }


#infor{
	width: 100%; 
	color:white; 
	border:0px solid black; 
	padding-top:0%;  
	padding-bottom:6%;
	}
	#infor .outer {
		width:100%;
	}

.infor_table{width:100%; margin:auto; overflow: hidden; margin-top:1%;background-color: rgba(0,0,0,0.0); padding-bottom: 3%;}
	.table_if1{background-color:none; 
		text-align: left; 
		font-size:1vw; 
		border:0px solid red; 
		margin:auto; 
		width:100%; 
		margin-top:6%; 
		margin-left:0%;
	}
	.table_if1 th{
		width: 25%;
		color:white;
		border:0px;
		border-bottom:3px solid rgba(201,195,16,1.00);
		font-size:13px; 
		padding:0.5%;  
		font-weight:600;
		padding-bottom:1%;
	}
	.table_if1 td{
		width: 75%;
		border:0px;
		font-size:11px; 
		border-bottom:1px solid #60c3ff;
		padding:0.5%;
		padding-left:0.8%;
		font-weight:300;
		padding-bottom:1%;
	}

	.table_if1 td:nth-child(6){

		border-bottom:none;
	}
.infor_table p {
	margin-left: 2%;
	font-size: 10px;
	color: #ddd;
}

footer{
	bottom:0;
	width: 100%;
}

	.company{width: 100%; border:0px solid magenta; margin:auto; text-align: center; padding:20px 0 0px 0;}
	.company li{width:15%; display:inline-block; border:0px solid green;}
	.company li img{ border:0px solid red;}
	.company li:nth-child(1) a img{width:65%; }
	.company li:nth-child(2) a img{width:85%; }
	.company li:nth-child(3) a img{width:69%; }
	

	.copyright{
		font-size:9px;
		font-weight:300;
		padding:10px 0 20px 0 ;
		text-align: center;
		margin:auto;
		width: 95%;
		color:#999;
	}


}