@charset "utf-8";

/*--font--*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700;900&display=swap');
@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; }

.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #c7a012 0%,
    #9b09d4 25%,
    #c7a012  50%,
	#9b09d4 75%,
    #c7a012 100%
  );
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 20s ease-in-out infinite;
}

@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/L7Gae8wn6g'); 
		background-size:cover;
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
	animation: fadein 0.5s;
	
	position: relative;
}	

html{
	font-family: 'Noto Sans JP', san-serif;
	font-size:18px;
	background-color: #000;
/*	scroll-behavior: smooth;*/
	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;
}
a:hover img {
	transform: scale(1.03);
}
.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:2vw; 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 a:nth-child(4){display:none;}*/

	.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: linear-gradient(4deg, rgba(196,66,143,0.3) 0%, rgba(206,77,153,0.8) 97%);
	  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.3s ease;
	  font-size: 1.1vw;
	  font-weight:500;
	  color:white;
	  border:1px solid #eee;
	}
	.et-hero-tab:hover {
	  color: #eee;
		text-shadow: 1px 1px 15px pink;
		transform: scale(1.2);
/*	  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;
	}

/*-스와이퍼-*/
	.swiper {
        width: 80%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;

        /* Center slide text vertically
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;*/
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        object-fit: cover;
		float: right;
		padding-bottom:2%;
      }

	  .swiper-slide p{padding-top:3%; float:left; width: 100%; border:0px solid red; color:white; text-align:left;}


	 .swiper-button-next::after,
	 .swiper-button-prev::after {
	  display: none;
    	}

#main{
	font-family: 'Noto Sans JP', sans-serif;
	width:100%;
/*	height: 100vh;*/
	background-image:url('https://image.directg.net/g7GabJbmmQ');
	background-size: cover; 
	background-position:bottom;
	background-repeat: no-repeat; 
	border:0px solid red;
	overflow: hidden;
	padding-bottom: 3.5%;
	z-index: 200;
}
#main .effect {
	position: absolute;
	width: 50%;
	top: 12%;
	left: 3.3%;
	border: 0px solid red;
	z-index: 1;
	animation-name: ani-ch;
  animation-duration: 2.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
	
}
.effect img {
	z-index: 1;
	transform: scaleX(-1);
}
@keyframes ani-ch {
  0% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-3px);
  }
}
	.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%;
}


	.header .ps5{border:0px solid red; padding:1% 2% 0px 0; width: 25%;}
	
.header .dg {border:0px solid red; padding:0.2% 0 0px 0; width: 14%;}

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

.M_middle{
	width:100%; 
	overflow: hidden;
	padding:0%;
	margin:auto;
	border:0px solid blue;
	z-index: 100;
	padding-bottom:0%;}

	.Main_tag{ position: absolute;top:45%; left:64.5%;}
	.Main_tag p{font-family: 'Noto Sans JP', san-serif; font-size: 2vw; font-weight:700; text-align: center; display: inline-block;}

.gamelogo {width:96%; border:0px solid blue; text-align:left; padding-top:1.5%; margin-top: 3%;}
.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;}
.message{width:55%; position: absolute;top:62.2%; right: 0%; border:0px solid red; margin:auto; text-align: left;
/*	padding: 4.8%;*/
	padding-top: 5%;
	padding-right: 0.2%;
/*	box-shadow: 1px 1px 20px #fff;*/
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
}
.message img {
	margin-right: 5px;
}

.message a p {
	font-size: 1.3vw;
	font-weight: 800;
}
.message a:hover img {
	transform: scale(1.0);
}


/*.message img{width:18%; float:left; padding-left: 1%; padding-right: 1%;}*/
/*
	.message button {
	  padding:6% 4% 6% 4%;
	  font-family: 'Noto Sans JP', san-serif;
	  border-radius:20px;
	  border:0;
	  line-height:120%;
	  background: rgba(0, 0, 0, 0.5);
	  cursor: pointer;
	  color:white;
	  font-size:1.2vw;
	  font-weight:600;
	  vertical-align:middle;
	}
	.message button:hover{
	  padding:6% 4% 6% 4%;
	  color:black;
	  border-radius:20px;
	  border:0;
	  background: rgba(250, 250, 250, 1);
      transition: all 0.3s;
	  cursor: pointer;
      font-family: 'Noto Sans JP', san-serif;
	  font-size:1.2vw;
	  font-weight:600; 
	  vertical-align:middle;
	}
*/

/* TOPIC */
	.topic_box{ 
		color:white;
		position:relative;
		margin-right:5%;
		margin-top:2%;
		width: 39%; 
		border:0px solid white;  
		padding:1.5%; 
		padding-top:2.5%;
		float: left; 
		background: linear-gradient(103deg, rgba(136,36,117,1) 0%, rgba(97,54,89,1) 97%);
		margin-bottom:13%;
		box-shadow: inset 1px 1px 25px #9e143d;
		border-radius: 35px;
		outline: 2px solid #ddd;
	}

	.topic_in{width: 100%; overflow-y:scroll; height:75px; text-align: center;}
	.topic_in span{font-size:1.1vw; font-weight:600; color:#fff;}
.topic_in li a {
	transition: all 0.3s;
}
.topic_in li a:hover {
/*	color: hotpink;*/
	text-shadow: 0px 0px 10px #eee;
}
			
	.topic_haeder {position:absolute;top:-20%;left:38%; bottom:60%;}
	.topic_haeder img{width:55%;}
	
	hr{border-color:#fff;}

#intro{width: 100%;}
#intro .inner{width: 90%;}
.menu_title {
  width: 40%;
/*  border: 1px solid red;*/
  margin: 0 auto;
	padding-top: 0%;
	padding-bottom: 2%;
}
.menu_title img {
  width: 100%;
}
	.intro_1{
		width: 100%;
		margin: 0 auto;
		background-image:url('https://image.directg.net/K7GafMNXCe');
		background-size: cover; 
		background-position:center;
		background-repeat: no-repeat;
		overflow:hidden; 
		padding-top: 5%;
		padding-bottom: 5%;
	}

	.intro_1_text{
		width:100%;
		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_2{
		background-color: rgba(0,0,0,0.45);
		padding-top: 5%;
		padding-bottom: 5%;
		overflow: hidden;
	}
.intro_2 h1 {
	margin-top: 5%;
	margin-bottom: 3%;	
}

	.intro_2_img{width:45%; border:0px solid red; float: left; overflow: hidden; }
	.intro_2_text{width:50%; padding-top:0%; float:right; margin-bottom: 5%;}
.intro_2_img.two{float: right; margin-right: 8%; }
.intro_2_text.two{padding-top:0%; margin-top: 0;  float:left; width: 45%; border: 0px solid red; margin-right: 2%; text-align: right;}
	
.cast {
	width: 100%;
	color: #fff;
	background-color: rgba(0,0,0,0.45);
	padding-bottom: 3%;
}
.cast h2 {
	color: darkgoldenrod;
	font-size: 2.2vw;
	text-align: center;
	margin-bottom: 1%;
}
.cast ul {
	margin: 0 auto;
	text-align: center;
	border: 1px solid white;
	width: 33%;
	background-color: rgba(0,0,0,0.50);
	padding-top: 1%;
	padding-bottom: 1%;
	box-shadow: 0px 0px 15px #000;
}

.cast ul li {
	margin-bottom: 0.7%;
	font-size: 16px;
}
.cast p {
	margin-top: 0.5%;
	text-align: left;
	margin-left: 33.5%;
	font-size: 16px;
}
#game {position: relative;  width: 100%; border:0px solid red;  overflow: hidden; padding-bottom:5%;}
#game .inner {width:90%; text-align: center; padding-top:0%;}
#game h1 {text-align: center; padding-bottom: 2%; padding-top: 2%;}
#game h2 {
	margin-bottom: 3%;
	color: plum;
	text-shadow: 0px 0px 30px #000;
}
#game .img {width: 65%; display: flex; align-items: center;  padding: 1%; overflow: hidden;}
#game .chara {display: flex; text-align: left; align-items: space-around; justify-content: space-around; }
#game .chara > ul {display: flex; justify-content: center;flex-flow: column; padding-bottom: 2%; width: 70%; }
#game .chara p {font-size: 1.2vw; font-weight: 300; display: inline-block; margin: 0; padding-bottom: 3%; color: #fff;}
#game .chara:nth-child(2n) {flex-flow: row-reverse;}
#game .chara:nth-child(2n) > ul {
	margin-left: 0%;
	text-align: right;
	margin: 0 auto;
}


#movie{width: 100%; border:0px solid red; padding: 5% 0 4% 0; background-color: rgba(0,0,0,0.45);}
	#movie .inner{width:60%; 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:1.4vw; padding-top:2%; padding-bottom:8%;}

	.movie_if_box1{width:100%; border:0px solid blue; overflow:hidden; position: relative; margin: 0 auto; margin-bottom: 2%;}
.movie_if_box1::before {
	content: 'NEW!';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	color: white;
	font-weight: 900;
	background-color: rgba(213,0,251,1.00);
	padding: 3px 9px;
	font-size: 22px;
	border: 1px solid rgba(213,0,251,1.00);
}
	.movie_if_box2{float:left; width:49%; border:0px solid blue; overflow:hidden;}
	.movie_if_box3{float:right; width:49%; border:0px solid blue; overflow:hidden;}
	.movie_if_box4{float:right; width:49.5%; border:0px solid blue; overflow:hidden; }

	.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;}*/

	#movie .movie_if{
		width: 99%;
	}

	.movie_if{
		position: relative;
		padding-top: 56%;
		width: 100%;
		height: 0;
		border: 2px solid rgba(227,182,190,0.60);
	}

	/* iframe */
	.movie_if > iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0px solid #fff;
	}


#Special {
	width: 100%;
	overflow: hidden;
	padding: 3% 0;
}
	#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;border: 2px solid #9421AD;}
#Special p {
	text-align: center;
	margin-bottom: 1%;
}
#Special p span {
	background-color: #eda93a;
	padding-left: 0.4%;
	padding-right: 0.4%;
}
#Special .Special_img2 {
	margin-left: 2%;
}
.spe {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 점포 특전 */
#special_store{width: 100%; border:0px solid red; overflow: hidden; padding-top:2%; text-align: center; margin: 0 auto;}
	#special_store .store_box{width: 100%; margin: auto; text-align: center;  border: 0px solid green; }
	#special_store .store_box li{width: 20%; display:inline-block; margin:0 0.7%; padding:3% 0 2% 0; margin-bottom: 2%;
		background: linear-gradient(180deg, rgba(100,100,122,0.1) 30%, rgba(51,23,125,0.5) 100%);
		box-shadow: 0px 0px 15px #eee;
		border-radius: 0px;
		border: 1px solid #eee;
		vertical-align: middle;
		overflow-y: hidden;
}
#special_store .store_box li:nth-child(5) {
	padding-top: 1%;
	padding-bottom: 0.8%;
}
#special_store .store_box p .small {
	font-size: 0.7vw;
	line-height: -10px;
/*	background-color: transparent;*/
}
	
	#special_store .store_box li img{width:90%;}

	#special_store .store_box p{font-size:1.1vw; color:#fff; padding:3% 0 3%; line-height:170%;margin-top: 7px;}
	#special_store .store_box p span{font-size:1.2vw; font-weight:700;color:white; background:rgba(117,15,216,1.00); padding:0 2% 1% 2%;}


	.shop_button{width:100%; border:0px solid red; text-align: center; display: inline-block; overflow: hidden; }

	.Switch_button{width:80%; font-size:1.1vw; color:white; background-color:#fe0016; border:3px solid #ddd; padding:3% 3%; margin:auto; margin-bottom:1%;margin-right:6.5%; margin-left:6.5%;
					border-radius: 26px;
}
	.Switch_button:hover {width:80%; font-size:1.1vw; color:white; background-color:#af001d; border:3px solid #000; padding:3% 3%; margin:auto; margin-bottom:1%; 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; border:3px solid #ddd; padding:3% 3.3%; margin:auto; margin-right:6.5%; margin-left:6.5%;
				border-radius: 26px;	
}
	.PS4_button:hover {width:80%; font-size:1.1vw; color:white; background-color:#031360; border:3px solid #000; padding:3% 3.3%; margin:auto; margin-right:6.5%; margin-left:6.5%;transition:all 0.3s}
/* PRODUCT */
#product {
	padding-bottom: 7%;
}
#product h1 {text-align: center; padding-bottom: 2%; padding-top: 2%; }
	.infor_box{width:95%;  margin:auto; text-align: center; padding:1% 0%; color:black; overflow:hidden; background: linear-gradient(180deg, rgba(100,100,122,0.1) 30%, rgba(51,23,125,0.5) 100%);
position: relative;
}
	.infor_box p {font-size:1.3vw; font-weight:700; padding:0; margin-bottom: 1%;}
	.infor_box p span{font-size:0.9vw; background:rgba(117,15,216,1.00);font-weight:400; color:white; padding-left: 1%;}
	.infor_box img{width:80%;}
.infor_box h4 {
	color: rgba(255,255,255,0.90);
	font-size: 1vw;
}
.infor_box_left h4 {
	position: absolute;
	bottom: 0;
	left: 14%;
}
.infor_box_right h4 {
	position: absolute;
	bottom: 0;
	right: 9%;
}
#product ul {	
	color: #fff;
}
#product .info {
	font-size: 1vw;
	text-align: left;
	padding-left: 35%;
	color: #eee;
}

		.infor_box_left{
			width:49%; 
			border-right: 2px ridge #eee;
			display: inline-block;
			margin-right:1%;
			padding-bottom: 2%;
			
		}
.infor_box_left img {
	margin-top: 0%;
	margin-bottom: 2.5%;
}
.infor_box_right img {
	margin-bottom: 2.5%;
}
		.infor_box_right{
			width:49%; 
			 display: inline-block;
			border: 0px solid red;
			vertical-align: top;
		}
.text_left {
	text-align: left;
	margin-top: 20%;
	margin-left: 4.5%;
	font-size: 1vw;
}

.price { color: #fff;}


	.infor_table{width:75%; margin:auto; overflow: hidden; margin-top:1%;background-color: rgba(0,0,0,0.4); 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 #2d2355;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 #2d2355;font-size:1vw; padding:5px 0px 5px 20px;}

#infor{
	width: 100%; 
	color:white; 
	border:0px solid black; 
/*	background-color:#2d2c4e; */
	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 purple;
		font-size:1.2vw; 
		padding:0.5%;  
		font-weight:600;
		padding-bottom:1%;
	}
	.table_if1 td{
		width: 75%;
		border:0px;
		border-bottom:1px solid hotpink;
		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;
}

footer{
	bottom:0;
	width: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2c9ab5+0,d54e88+100 */
	background: linear-gradient(180deg, rgba(100,100,122,0.1) 30%, rgba(51,23,125,0.5) 100%);
	margin-top: 2%;
	border-top: 3px solid rgba(153,153,153,0.15);
}

	.company{width: 100%; border:0px solid magenta; margin:auto; text-align: center; padding:35px 0 10px 0;}
	.company li{width:12%; 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:100%; }
	.company li:nth-child(2) a img{width:50%; }
	.company li:nth-child(3) a img{width:85%; }
.company li a:hover img {
	transform: scale(1.0);
}

	.copyright{
		font-size:0.9vw;
		font-weight:300;
		padding:20px 0 60px 0 ;
		text-align: center;
		margin:auto;
		width: 80%;
		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) {


	 .swiper-button-next::after,
	 .swiper-button-prev::after {
	  display: none;
    	}
	.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 .ps5{border:0px solid red; padding:1% 2% 0px 0; width: 40%;}
	
.header .dg {border:0px solid red; padding:0.2% 0 0px 0; width: 24%;}

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

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


	.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;
	}




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

	.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:5%;
	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:97%;
		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:3%;
	}

	.topic_in{width: 100%; overflow-y:scroll; height:100px; }
	.topic_in span{font-size:2.5vw; font-weight:700;}
			  .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:-20%;left:40%; bottom:60%;}
	.topic_haeder img{width:55%;}
	
	hr{border-color:white;}

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

	.intro_1{
		width: 100%;
		margin: 0 auto;
		background-image:url('https://image.directg.net/K7GafMNXCe');
		background-size: cover; 
		background-position:center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		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;
}
	.intro_2{
		padding-top: 5%;
		padding-bottom: 5%;
		overflow: hidden;
	}
.intro_2 h1 {
	text-align: center;
	margin-bottom: 1%;	
	margin-top: 0%;
}

	.intro_2_img{width:90%; border:0px solid red; float: none; margin: 0 auto;}
	.intro_2_img.two{border: 0px solid red; }
	.intro_2_img.two img {margin-left: 3%;}
	.intro_2_text{width:90%; padding-top:0%; float:none; margin: 0 auto; padding: 1%; text-align: center;}
	.intro_2_text.two {
		width: 90%;
		margin-bottom: 1%;
		margin-left: 3%;
		text-align: center;
	}
	.cast {
	width: 100%;
	padding-bottom: 3%;
}
.cast h2 {
	font-size: 3.2vw;
	margin-bottom: 1%;
}
.cast ul {
	width: 40%;
	padding-top: 2%;
	padding-bottom: 2%;
}

.cast ul li {
	margin-bottom: 0.7%;
	font-size: 17px;
}
.cast p {
	margin-left: 10%;
/*	text-align: center;*/
	font-size: 19px;
}
#game {position: relative;  width: 100%; border:0px solid red;  overflow: hidden; padding-bottom:5%;}
#game .inner {width:90%; text-align: center; padding-top:0%;}
#game h1 {text-align: center; padding-bottom: 2%; padding-top: 2%;}
#game h2 {
	margin-bottom: 3%;
	margin-top: 1.5%;
}
#game .img {width: 90%; margin: 0 auto;}
#game .chara {display: block; text-align: center; margin: 0 auto;}
#game .chara > ul {display: block; padding-bottom: 2%; width: 90%; margin: 0 auto;}
	#game .chara:nth-child(2n) > ul {text-align: center;}
#game .chara p {font-size: 2.2vw; font-weight: 300; display: inline-block; margin: 0; 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;
}

#movie{width: 100%; border:0px solid red; padding: 5% 0 10% 0; overflow: hidden;}
	#movie .inner{width:80%; 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:2.5vw; padding-top:2%; padding-bottom:8%;}

	.movie_if_box1{float:left; width:100%; border:0px solid blue; overflow:hidden;}
	.movie_if_box2{float:left; width:100%; border:0px solid blue; overflow:hidden; margin-top: 1%;}
	.movie_if_box3{float:left; width:100%; border:0px solid blue; overflow:hidden; margin-top: 2.5%;}
	.movie_if_box4{float:right; width:49.5%; border:0px solid blue; overflow:hidden; }

	.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;}*/

	#movie .movie_if{
		width: 99%;
	}

	.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%;
	}


#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;
}
	#special_store .store_box p span small {
	font-size: 1.8vw;
}
/* 점포 특전 */
#special_store{width: 100%; border:0px solid red; overflow: hidden; padding-top:2%; text-align: center; margin: 0 auto;}
	#special_store .store_box li{width: 38%; padding-top: 4.7%;}
	
	#special_store .store_box li img{width:90%;}

	#special_store .store_box p{font-size:2.9vw; color:#fff; padding:1% 0 1%; line-height:170%;margin-top: 7px;}
	#special_store .store_box p span{font-size:3vw; font-weight:700;color:white; background:rgba(117,15,216,1.00); padding:0 2% 1% 2%;}
	#special_store .store_box li:nth-child(5) {
	padding-top: 1%;
	padding-bottom: 0%;
}
#special_store .store_box p .small {
	font-size: 1.7vw;
}
	.shop_button{width:100%; border:0px solid red; text-align: center; display: inline-block; overflow: hidden; }

	.Switch_button{width:80%; font-size:1.1vw; color:white; background-color:#fe0016; border:3px solid #ddd; padding:3% 3%; margin:auto; margin-bottom:1%;margin-right:6.5%; margin-left:6.5%;
					border-radius: 26px;
}
	.Switch_button:hover {width:80%; font-size:1.1vw; color:white; background-color:#af001d; border:3px solid #000; padding:3% 3%; margin:auto; margin-bottom:1%; 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; border:3px solid #ddd; padding:3% 3.3%; margin:auto; margin-right:6.5%; margin-left:6.5%;
				border-radius: 26px;	
}
	.PS4_button:hover {width:80%; font-size:1.1vw; color:white; background-color:#031360; border:3px solid #000; padding:3% 3.3%; margin:auto; margin-right:6.5%; margin-left:6.5%;transition:all 0.3s}
/* PRODUCT */
#product h1 {text-align: center; padding-bottom: 2%; padding-top: 2%; }
	.infor_box{width:95%;  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; font-weight:400; color:white; padding-left: 1%;}
	.infor_box img{width:80%;}
#product ul {	
	color: #fff;
}
#product .info {
	font-size: 1.8vw;
	text-align: left;
	padding-left: 35%;
	color: #eee;
}
	.infor_box p {
		font-size: 2.7vw;
	}
	.infor_box p span {
		font-size: 2.2vw;
	}
	.infor_box h4 {
	font-size: 2vw;
}
.infor_box_left h4 {
	position: inherit;
}
.infor_box_right h4 {
	position: inherit;
}

		.infor_box_left{
			width:90%; 
			display: block; 
			margin-right:1%;
			padding-bottom: 3%;
			margin: 0 auto;
			border-right: 0px solid #fff;
			border-bottom: 2px solid #fff;
		}
		.infor_box_right{
			width:90%; 
			padding-top: 3%;
			padding-bottom: 10%;
			border: 0px solid red;
			margin: 0 auto;
		}

.price { color: #fff;}
.text_left {
	text-align: left;
	margin-top: 20%;
	margin-left: 4.5%;
	font-size: 1.9vw;
}
#infor{
	width: 100%; 
	color:white; 
	border:0px solid black; 
	overflow: hidden; 
	
	padding-top:4%;  
	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;
		font-size:1.8vw; 
		padding:0.5%;  
		font-weight:600;
		padding-bottom:1%;
	}
	.table_if1 td{
		width: 75%;
		font-size:1.6vw; 
		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:18%; display:inline-block; border:0px solid green;}
	.company li img{ border:0px solid red;}
	.company li:nth-child(1) a img{width:100%; }
	.company li:nth-child(3) a img{width:90%; }
	.company li:nth-child(2) a img{width:50%; }

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

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

	.swiper {
        width: 90%;
      }
	
	 .swiper-button-next::after,
	 .swiper-button-prev::after {
	  display: none;
    	}
	.pc-only {
		display: none;
	}

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:0px solid blue;
	overflow: hidden;
	display: flex;
	position: relative;
}


	.header .ps5{border:0px solid red; padding:2% 2% 0px 0; width: 33%;}
	
.header .dg {border:0px solid red; padding:0.2% 0 0px 0; 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: 10px;}
/*--네비게이션--*/

.et-hero-tabs,
.et-slide {
  position: relative;
  width: 100%;
  }
	
	.et-hero-tabs-container a:nth-child(4){display:none;}

	.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: 3.4vw;
	  font-weight:500;
	  color:white;
	}
	

	.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/C7GavvMhGE');
	background-size: cover; 
	background-position:top;
	background-repeat: no-repeat; 
	border:0px solid red;
	padding-bottom:30%;
}

	.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;
	}

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




	/*--topic--*/
.topic_box{ 
		color:white;
		position:relative;
		margin-right:0%;
		margin-top:90%;
		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:80px; }
	.topic_in span{font-size:4.5vw; font-weight:700; }
			  .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:-50%;left:0%; bottom:60%;}
	.topic_haeder img{width:50%;}
	
	hr{border-color:white;}

#intro{width: 100%;}
#intro .inner{width: 95%;}
	.menu_title {
		width: 85%;
	}
	.intro_1{
		width: 100%;
		margin: 0 auto;
		background-image:url('https://image.directg.net/K7GafMNXCe');
		background-size: cover; 
		background-position:center;
		background-repeat: no-repeat;
		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;
	}
.intro_1_img{
	width: 95%;
	float: none;
	margin-left: 0%;
	margin-top: 4%;
	margin: 0 auto;
}
	.intro_2{
		
		
	}
.intro_2 h1 {
	text-align: center;
	margin-bottom: 3%;	
}
	.intro_2 p {
		text-align: center;
		font-size: 14px;
	}

	.intro_2_img{width:90%; border:0px solid red; float: none; margin: 0 auto;}
	.intro_2_text{width:90%; padding-top:0%; float:none; margin: 0 auto; padding: 0%;}
	.intro_2_text.two {
		width: 90%;
		margin-left: 3%;
	}
	.intro_2_img.two img {
		margin-left: 3%;
	}
		.cast {
	width: 100%;
	padding-bottom: 3%;
}
.cast h2 {
	font-size: 5.2vw;
	margin-bottom: 1%;
}
.cast ul {
	width: 90%;
	padding-top: 3%;
	padding-bottom: 3%;
}

.cast ul li {
	margin-bottom: 0.8%;
	font-size: 13px;
}
.cast p {
	margin-left:4%;
	font-size: 15px;
	margin-top: 2%;
}
#game {position: relative;  width: 100%; border:0px solid red;  overflow: hidden; padding-bottom:5%;}
#game .inner {width:95%; 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: 95%; margin: 0 auto;}
#game .chara {display: block; text-align: left; margin: 0 auto;}
#game .chara > ul {display: block; padding-bottom: 2%; width: 90%; margin: 0 auto; text-align: center;}
	#game .chara ul i {
		font-size: 6vw;
	}
	#game .chara:nth-child(2n) > ul {
		text-align: center;
		margin: 0 auto;
	}
#game .chara p {font-size: 4vw; font-weight: 300; display: inline-block; margin: 0; padding-bottom: 3%; color: #fff;}
#game .chara.up {
	border: 0px solid red;
}
#game .chara.up .img {
	border: 0px solid blue;
	display: block;
	width: 100%;
}
#game .chara.up ul {
	margin-left: 5%;
}
#game .chara.up span {
	font-weight: 800;
}

#movie{width: 100%; border:0px solid red; padding: 5% 0 10% 0; 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{float:left; width:100%; border:0px solid blue; overflow:hidden;}
	.movie_if_box2{float:left; width:100%; border:0px solid blue; overflow:hidden; margin-top: 1.5%;}
	.movie_if_box3{float:left; width:100%; border:0px solid blue; overflow:hidden; margin-top: 2.5%;}
	.movie_if_box4{float:right; width:49.5%; border:0px solid blue; overflow:hidden; }

	.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;}*/

	#movie .movie_if{
		width: 99%;
	}

	.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%;
	}


#Special {
	width: 100%;
	overflow: hidden;
	padding-bottom: 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;
}
	#special_store .store_box p span small {
	font-size: 10px;
}
	.Special_img2:first-child {
		margin-left: 0%;
	}
	.spe {
		margin-right: 2.5%;
	}
/* 점포 특전 */
#special_store{width: 100%; border:0px solid red; overflow: hidden; padding-top:2%; text-align: center; margin: 0 auto;}
	#special_store .store_box li{width: 38%; padding-top: 6%; padding-bottom: 6%;}
	
	#special_store .store_box li img{width:90%;}

	#special_store .store_box p{font-size:2.9vw; color:#fff; padding:3% 0 3%; line-height:170%;margin-top: 7px;}
	#special_store .store_box p span{font-size:3vw; font-weight:700;color:white; background:rgba(117,15,216,1.00); padding:0 2% 1% 2%;}
	#special_store .store_box p .small {
	font-size: 1vw;
		background-color: transparent;
		display: inline-block;
		text-align: center;
}

	.shop_button{width:100%; border:0px solid red; text-align: center; display: inline-block; overflow: hidden; }

	.Switch_button{width:80%; font-size:1.1vw; color:white; background-color:#fe0016; border:3px solid #ddd; padding:3% 3%; margin:auto; margin-bottom:1%;margin-right:6.5%; margin-left:6.5%;
					border-radius: 26px;
}
	.Switch_button:hover {width:80%; font-size:1.1vw; color:white; background-color:#af001d; border:3px solid #000; padding:3% 3%; margin:auto; margin-bottom:1%; 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; border:3px solid #ddd; padding:3% 3.3%; margin:auto; margin-right:6.5%; margin-left:6.5%;
				border-radius: 26px;	
}
	.PS4_button:hover {width:80%; font-size:1.1vw; color:white; background-color:#031360; border:3px solid #000; padding:3% 3.3%; margin:auto; margin-right:6.5%; margin-left:6.5%;transition:all 0.3s}
/* PRODUCT */
#product h1 {text-align: center; padding-bottom: 2%; padding-top: 2%; margin-top: 3%; margin-bottom: 0%; }
	.infor_box{width:100%;  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; background:#28B4F3; font-weight:400; color:white; padding-left: 1%;}
	.infor_box img{width:80%;}
#product ul {	
	color: #fff;
}
#product .info {
	font-size: 3.8vw;
	text-align: left;
	padding-left: 25%;
	color: #eee;
}
	.infor_box p {
		font-size: 4.7vw;
	}
	.infor_box p span {
		font-size: 4.2vw;
		background:rgba(117,15,216,1.00);
	}
.infor_box h4 {
	font-size: 4vw;
}
.infor_box_left h4 {
	position: inherit;
}
.infor_box_right h4 {
	position: inherit;
	font-size: 3vw;
}
		.infor_box_left{
			width:96%; 
			display: block; 
			margin-right:1%;
			padding-bottom: 3%;
			margin: 0 auto;
			border-right: 0px solid white;
			border-bottom: 1px solid #fff;
		}
		.infor_box_right{
			width:96%; 
			padding-bottom: 9%;
			padding-top: 3%;
			border: 0px solid red;
			margin: 0 auto;
		}

.price { color: #fff;}
.text_left {
	text-align: left;
	margin-top: 20%;
	margin-left: 4.5%;
	font-size: 14px;
}
.infor_table{width:100%; margin:auto; overflow: hidden; margin-top:1%; padding-bottom: 3%; background: none;}
#infor{
	width: 100%; 
	color:white; 
	border:0px solid black; 

	padding-top:4%;  
	padding-bottom:6%;
	}


	.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;
		font-size:3.2vw; 
		padding:0.5%;  
		font-weight:600;
		padding-bottom:1%;
	}
	.table_if1 td{
		width: 75%;
		font-size:3.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: 1%;
	font-size: 2.5vw;
	color: #ddd;
}
	

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

	.company{width: 100%; border:0px solid magenta; margin:auto; text-align: center; padding:25px 0 0px 0;}
	.company li{width:25%; 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:100%; margin-top: 3%; }
	.company li:nth-child(3) a img{width:100%; }
	.company li:nth-child(2) a img{width:70%; }

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


}