/* css */

#ttl-sp {
	width: 260px;
}

#app-list {
		background: url(../img/games/bg_list.png)  repeat left top;
		margin-top: 15px;
}
#app-list .inner {
		max-width: 1230px;
		margin: 0 auto;
}
	#app-list ul {
		margin: 0 auto;
	}
		#app-list ul li {
			width: 257px;
			margin: 19px 20px 39px;
			position: relative;
			border: solid 1px #CCC;
			box-shadow: 2px 2px 6px -2px rgba(167,167,167,0.75);
			height: 362px
		}
		#app-list ul li a {
			display: block;
			position: absolute;
			bottom: 6px;
			left: 30px;
		}
			#app-list ul li a img {
				width: 195px;
			}
		#app-list ul li .txt {
			position: absolute;
			bottom: 43px;
			left: 0;
			background-color: rgba(83,83,83,0.8);
			color: #FFF;
			width: 100%;
			height: 96px;
			overflow: hidden;
			padding: 5px;
		}
			#app-list ul li .txt  h3 {
				font-size: 21px;
				text-align: center;
				margin-bottom: 4px;
			}
			#app-list ul li .txt  p {
				font-size: 15px;
				line-height: 1.1;
			}


#app-info {
	background-color: #FFF;
	padding-bottom: 20px;
}
	#app-info .inner {
		max-width: 1024px;
		margin: 0 auto;
	}
		#app-info .row {
			margin: 0;
		}
			#app-info .row > div {
				padding: 0;
			}
			
			#app-info .row > div.left-box {
			}
				#app-info .row > div.left-box img {
					margin: 0 auto;
				}
			#app-info .row > div.right-box {
				padding: 0 20px;
			}
			
#sound-info {
	padding-bottom: 20px;
}
	#sound-info .inner {
		max-width: 1024px;
		margin: 0 auto;
	}
		#sound-info .row {
			margin: 0;
		}
			#sound-info .row > div {
				padding: 0;
			}
			
			#sound-info .row > div.left-box {
			}
				#app-info .row > div.left-box img {
					margin: 0 auto;
				}
			#sound-info .row > div.right-box {
				padding: 0 20px;
			}

	#story {
	}
		#story h3 {
			display: block;
			text-align: center;
			padding: 15px 0 10px;
		}
			#story h3 img {
				margin: 0 auto;
			}
		#story p {
			font-family:Century Gothic, Times, Serif;
			color: #af8a59;
			font-size: 17px;
			font-weight: 100;
			line-height: 1.4;
		}
	#app-movie {
		padding: 20px 40px 10px;
	}
	#app-movie .inner {
    position: relative;
    padding: 0 0 56.25%;
    height: 0;
    overflow: hidden;
	}
		#app-movie iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

#bn-set {
	padding: 0 10px;
	width: 100%;
}
#bn-set .inner {
	width: 100%;
	padding: 15px 0 0;
	background-color: #fa8d8e;
	border-radius: 10px;
	margin: 20px auto; 
}
	#bn-set ul {
		text-align: center;
	}
		#bn-set ul li {
			margin: 0 5px 10px;
			display: inline-block;
		}
		#bn-set  img {
			height: 42px;
		}
/*
		#bn-set .bn-appstore img {
			width: 104px;
		}
		#bn-set .bn-googleplay img {
			width: 95px;
		}
		#bn-set .bn-fblogin img {
			width: 118px;
		}
*/

	#charactor {
	}
		#charactor h3 {
			display: block;
			text-align: center;
			padding: 15px 20px;
		}
			#charactor h3 img {
				margin: 0 auto;
			}
		#charactor .inner {
			background-color: #fcbebf;
		}
		.app20 #charactor .inner {
			max-width: 846px;
			margin: 0 auto;
		}
		#c-thums {
			background-color: */
		}
			#c-thums li {
				cursor: pointer;
				width: 20%;
				float: left;
				padding: 1px;
			}
			.app20 #c-thums li {
				height: 20%;
			}
				#c-thums li img {
					border: solid 1px #f6e096;
				}
		#c-slider {
			padding: 10px 50px;
		}
			#charactor .flexslider {
				margin-bottom: 0;
			}

		#twitter {
	padding: 0 10px;
	width: 100%;
}
#twitter .inner {
	width: 100%;
	margin: 0px auto; 
}
			#twitter h3 {
			display: block;
			text-align: center;
			padding: 15px 20px;
		}
			#twitter ul {

			}
			#twitter li {
				cursor: pointer;
				width: 25%;
				float: left;
				padding: 1px;
			}
				

.flex-direction-nav a {
  display: inline-block;
  content: '';
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  background-size: 32px auto !important;
  opacity: 1;
}
.flex-direction-nav .flex-next {
	background: url(../img/games/btn_next.png) no-repeat center center;
	text-align: left;
  right: -40px !important;
}
.flex-direction-nav a:before {
	display: none;
}
.flex-direction-nav .flex-prev {
  background: url(../img/games/btn_prev.png) no-repeat center center;
  left: -40px !important;
}

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: -40px !important;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
  left: -40px !important;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: -40px !important;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
  right: -40px !important;
}

@media (min-width: 768px){

	#app-info {
		padding-bottom: 0;
	}
			#bn-set  img {
				height: 65px;
			}
	
	#bn-set .inner {
		max-width: 834px;
	}
			#bn-set ul li {
				margin: 0 15px 15px;
			}
	
		#charactor {
			max-width: 1024px;
			width: 100%;
			margin: 0 auto;
		}
			#charactor h3 {
				padding: 25px 0 20px;
			}
			.app20 #charactor h3 {
				display: block;
				text-align: center;
				padding: 15px 20px;
			}
			#charactor .inner {
				display: table;
				padding: 15px 0 15px 76px;
			}
			.app20 #charactor .inner {
				max-width: 846px;
				margin: 0 auto;
				padding: 0;
				background-color: #fcbebf;
			}
				#c-thums {
					margin: 10px auto;
					display: table-cell;
					vertical-align: top;
					width: 32%;
				}
				.app20 #c-thums {
					/*width: 100%;*/
					width: 751px;
					display: block;
					padding: 10px 50px;
				}
					#c-thums li {
						cursor: pointer;
						width: 50%;
					}
					.app20 #c-thums li {
						cursor: pointer;
						width: 20%;
						height: 20%;
						float: left;
						padding: 1px;
					}
				#c-slider {
					display: table-cell;
					vertical-align: middle;
					width: 68%;
					padding: 0 90px;
				}
				.app20 #c-slider {
					display: block;
					margin: 0 auto;
					/*width: 100%;*/
					width: 751px;
					padding: 15px 90px;
				}
#twitter {
	padding: 0 10px;
	width: 100%;
		}
		#twitter .inner {
		max-width: 600px;
	}
			
			#twitter ul {
			text-align: center;
			}
			#twitter li {
				cursor: pointer;
				width: 25%;
				float: left;
				padding: 5px;
			}
}
