/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*//* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
html, body {
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* 新增：禁止移动端横向滚动，避免布局错乱 */
  overflow-x: hidden;
}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/

@font-face{
font-family: "Abel-Regular";
src:url(../fonts/Abel-Regular.ttf);
}

@font-face{
font-family: "BlackOpsOne-Regular";
src:url(../fonts/BlackOpsOne-Regular.ttf);
}


body{
width:100%;
text-align:center;
font-family: "Abel-Regular";
}

.navbar-default {
background-color: #0C0808;
border: none;
}

.navbar-inverse .navbar-nav>li>a {
color: #fff;
font-size:18px;
padding-top: 22px;
text-decoration: none;
}

.navbar-inverse .navbar-nav>li>a:hover {
color:yellow;
}

.banner{
  background: url("../images/bg.jpg") no-repeat;
  width: 100%;
  /* 关键1：PC端-最小高度占满屏幕，移动端-自动适配 */
  /*min-height: 100vh; */
  /* 关键2：CSS原生比例控制（适配bg.jpg实际比例，示例为16:9）
     格式：宽/高，如4:3写4/3，3:2写3/2，1:1写1/1，根据图片实际比例修改 */
  aspect-ratio: 16/9; 
  /* 关键3：等比例完整显示图片，不裁剪 */
  background-size: contain;
  /* 背景居中，视觉更协调 */
  background-position: center center;
  /* 背景色为白色（按你的要求） */
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  /* 关键4：移动端高度上限（PC端不生效，因为min-height:100vh优先级更高） */
  max-height: 90vh;
}
.bannershow{
  background: url("../images/bg.jpg") no-repeat;
  width: 100%;
  /* 关键1：PC端-最小高度占满屏幕，移动端-自动适配 */
  /*min-height: 100vh; */
  /* 关键2：CSS原生比例控制（适配bg.jpg实际比例，示例为16:9）
     格式：宽/高，如4:3写4/3，3:2写3/2，1:1写1/1，根据图片实际比例修改 */
  aspect-ratio: 16/9; 
  /* 关键3：等比例完整显示图片，不裁剪 */
  background-size: contain;
  /* 背景居中，视觉更协调 */
  background-position: center center;
  /* 背景色为白色（按你的要求） */
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  /* 关键4：移动端高度上限（PC端不生效，因为min-height:100vh优先级更高） */
  max-height: 90vh;
}

.banner-content{
 width:570px;
  padding-top: 25vh;
  max-width: 90%;
  text-align:left;
  color:#fff;
  text-shadow: 2px 2px #000000;
  position: relative;
  margin: 0 auto;
}

.banner-content h1{
font-family: "BlackOpsOne-Regular";
font-size:60px;
}

.banner-content h2{
font-family: "Abel-Regular";
font-size:32px;
}

.banner-content p{
font-family: "Abel-Regular";
font-size:20px;
padding-top:15px;
line-height:30px;
}

/* ----------Header Ends Here ---------- */

/* ----------About---------- */

.tv-top{
width:570px;
padding-top:100px;
padding-bottom:50px;
margin:auto;
color:#fff;}
.tv-top h1{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
color:#FC0;
	}

.show{
	color:#FFF;
	font-weight:bold;
	float:left;
	padding-left:20px;
	padding-top:10px;}

.show img{
	border:#666 2px solid;

	width:200px;
	height:200px;}



.about{
padding:115px 0;
font-family: "Abel-Regular";
}

.about h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
}

.about span{
color:red;
}

.about h4{
padding:0px 125px;
font-size:20px;
line-height:30px;
}

.about p{
padding:0px 125px;
font-size:20px;
line-height:28px;
}

.about-image{
padding-top:35px;
display:block;
}

.about-image h5{
font-size:22px;
padding:15px 0 0 0;
font-weight:600;
}

.about-image p{
padding:15px 20px 0 20px;
font-size:18px;
line-height:28px;
}

.shadow
{
position: relative;
}
.shadow:before, .shadow:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 14px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #fff;
box-shadow: 0 15px 10px #000;
transform: rotate(-3deg);
}
.shadow:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}

/* ---------- About Ends here ---------- */

/* ---------- Requirements Starts ---------- */
.requirement{
background:url("../images/require.jpg" ) 0px 0px no-repeat;
width:100%;
background-size:cover;
font-family: "Abel-Regular";
}

.all-require{
padding:150px 0;
}

.heading{
margin:0 auto;
padding-bottom:50px;
color:#fff;
}

.heading h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
color:#f7de29;
}

.heading span{
color:#cfd5f7;
}

.grid{
background:rgba(41, 40, 40, 0.7);
width:100%;
padding:20px 10px;
height:475px;
text-align:left;
color:#FFF;
font-weight: bold;
text-indent:2em;
}

.fendui{
    width: 100%;
    height: 500px;
}

.grid-bottom{
padding-top:30px;
}

/* ---------- Requirements Ends here ---------- */

/* ---------- UP Coming Games Starts Here ---------- */
.background {
padding:15px 5px 15px 15px;
background:#212020;
}

.padding-upcoming{
padding:130px 0;
font-family: "Abel-Regular";
}	

.padding-upcoming h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
}

.padding-upcoming span{
color:red;
}
				
.trailer iframe {
width: 100%;
height: 387px;
}
.trailer {
padding-left: 0;
}

.sub-img {
width:34%;
float: left;
}

.sub-img img{
width:82%;
}

.sub-text {
padding-top:15px;
float:right;
width:60%;
margin:0px;
}

.sub-text h4 {
font-size:20px;
color: #5bb2fc;
line-height: 28px;
text-decoration:none;
display: block;
text-align:left;
}

.sub-text p {
font-size: 14px;
line-height: 20px;
color: #888;
margin-top: 8px;
}

.sub-trailer {
background: #212020;
}

.shadow1
{
position: relative;
}
.shadow1:before, .shadow1:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 14px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #fff;
box-shadow: 0 15px 10px #000;
transform: rotate(-3deg);
}
.shadow1:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
/* ---------- UP Coming Games Ends Here ---------- */

/* ---------- Our Team Starts Here ---------- */
.our-team{
background:#D6D3D3;
background: url("../images/dbj.jpg") no-repeat 0px 0px;
background-size: 100% 100%;
}

.team{
padding:125px 0;
font-family: "Abel-Regular";
color:#fff;
}

.team h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
color:#fff;
}

.team h4{
font-size:22px;
padding-top:6px;
font-weight:600;
}

.team p{
font-size:18px;
padding-top:3px;
}

.team-img img{
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border:3px solid #dddbdb;
}

.team-bottom{
padding-top:40px;
}
/* ---------- Our Team Ends Here ---------- */

/* ----------  Contact Starts From Here ---------- */
.contact{
background:#1d1d1c;
}

.padding-contact{
padding:100px 0;
font-family: "Abel-Regular";
}

.padding-contact h3{
font-family: "BlackOpsOne-Regular";
font-size:24px;
padding-bottom:20px;
color:#5bb2fc;
letter-spacing: 3px;
text-align:left;
}

.padding-contact span{
color:yellow;
display:block;
padding-top:10px;
}

address{
font-size:16px;
color:#fff;
text-align:left;
line-height:24px;
}

.social{
padding-top:45px;
}

.social-icons h3{
text-align:center;
}

ul.social li {
    display: inline-block;
}
ul.social li a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
text-decoration: none;
}

ul.social li a.facebook {
    background-position: 0px 0px;
}
ul.social li a.facebook:hover {
    background-position: 0px -50px;
}
ul.social li a.twitter {
    background-position: -50px 0px;
}
ul.social li a.twitter:hover {
    background-position: -50px -50px;
}
ul.social li a.googleplus {
    background-position: -100px 0px;
}
ul.social li a.googleplus:hover {
    background-position: -100px -50px;
}
ul.social li a.instagram {
    background-position: -150px 0px;
}
ul.social li a.instagram:hover {
    background-position: -150px -50px;
}
ul.social li a.youtube {
    background-position: -200px 0px;
}
ul.social li a.youtube:hover {
    background-position: -200px -50px;
}

.newsletter h3{
text-align:right;
}

.newsletter input[type="text"]{
	outline: none;
    font-size:16px;
	color: #fff;
	font-family: "Abel-Regular";
	padding: 15px 10px;
	border:none;
	border-bottom:2px solid #fff;
	width: 67%;
   	background:#1d1d1c;
}

.newsletter input[type="submit"] {
    background:rgba(2, 2, 2, 0.60);
    color: #fff;
	border: 2px solid #fff;
    font-size: 18px;
	font-family: "Abel-Regular";
    padding: 15px 10px 15px 15px;
    cursor: pointer;
    outline: none;
    display: inline-block;
    margin-top:24px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.newsletter input[type="submit"]:hover{
	color:#000;
    background:#d8cc52;
	font-weight:600;
}

/* ---------- Contact Ends here ---------- */

.footer{
padding:0px 20px 50px 20px;
}

.footer p{
font-size:18px;
font-family: "Abel-Regular";
color:#fff;
}

.footer a{
text-decoration:none;
color:#5bb2fc;
}

.footer a:hover{
color:yellow;
}


/*---------- responsive media queries ----------*/

@media screen and (max-width:1920px){
.banner-content{
width:500px;
}
}

@media screen and (max-width:1680px){
.banner-content{

}
}

@media screen and (max-width:1440px){
.banner-content{
width:470px;

}
}

@media screen and (max-width:1366px){
.banner-content{
width:470px;
padding-top:150px;
}
.newsletter input[type="text"] {
width: 60%
}
}

@media screen and (max-width:1280px){
.banner-content{
padding-top:125px;
}
}


@media screen and (max-width:1080px){
.banner{
height:500px;
}
.bannershow{
height:500px;
}
.banner-content h1 {
font-size: 56px;
}
.banner-content h2 {
font-size: 30px;
}
.banner-content p {
font-size: 19px;
}

.about {
padding:50px 0 70px;
}
   
.all-require {
padding: 100px 0;
}

.padding-upcoming {
padding: 75px 0;
}

.about h4 {
padding: 0px 100px;
}

.trailer-text{
padding-top:37px;
}

.sub-text {
width: 64%;
}
.sub-text p {
text-align:left;
}

form{
padding-top:10px;
}

.about-image p {
padding: 10px 0px 0;
}

}


@media screen and (max-width:991px){
.navbar-inverse .navbar-nav>li>a {
padding: 0px 10px;
padding-top: 22px;
}

.about h4 {
padding: 0px 40px;
}

.about-size{
width:33.3%;
float:left;
}

.about-image p {
font-size: 16px;
line-height: 24px;
}

.require-size{

float:left;
margin: 0px;
padding: 5px;
}


.game-video {
width: 60%;
float: left;
}

.game-image{
width:40%;
float:left;
}

.trailer-text {
padding-top: 15px;
}

.sub-trailer {
   padding:10px 0;
}

.sub-img {
width: 38%;
}

.sub-img img {
width: 100%;
}

.sub-text {
padding-top: 5px;
width:60%;
}

.sub-text h4 {
font-size:19px;
line-height: 24px;
}

.sub-text p {
font-size: 14px;
line-height: 18px;
}
.team-size{
width:25%;
float:left;
}

.team h4 {
font-size: 20px;
}

.team p {
font-size: 16px;
}

.address{
width:25%;
float:left;
margin:0;
padding:0px;
}

.social-icons{
width:40%;
float:left;
margin:0;
padding:0px;
}
ul.social li a {
width: 40px;
height: 40px;
background-size: 250px;
}
ul.social li a.facebook {
background-position: 0px 0px;
}
ul.social li a.facebook:hover {
    background-position: 0px -40px;
}
ul.social li a.twitter {
    background-position: -40px 0px;
}
ul.social li a.twitter:hover {
    background-position: -40px -40px;
}
ul.social li a.googleplus {
    background-position: -83px 0px;
}
ul.social li a.googleplus:hover {
    background-position: -83px -40px;
}
ul.social li a.instagram {
    background-position: -126px 0px;
}
ul.social li a.instagram:hover {
    background-position: -126px -40px;
}
ul.social li a.youtube {
    background-position: -167px 0px;
}
ul.social li a.youtube:hover {
    background-position: -167px -40px;
}

.newsletter{
width:35%;
float:left;
margin:0;
padding:0px;
}
.newsletter input[type="text"] {
padding:10px;
}

.newsletter input[type="submit"] {
font-size: 16px;
padding: 10px;
}
}


@media screen and (max-width:800px){
.navbar-brand>img {
width:90%;
}

}


@media screen and (max-width:768px){

.banner-content {
width: 380px;
padding-top: 125px;
}

.banner-content h1 {
font-size: 46px;
}
.banner-content h2 {
font-size: 26px;
}
.banner-content p {
font-size: 17px;
}

.about {
padding: 50px 0;
}
.about h3 {
font-size: 30px;
}
.about h4 {
font-size:17px;
line-height: 24px;
padding: 0px 10px;
}

.all-require {
padding:75px 0;
}
.heading h3 {
font-size: 30px;
}
.require-size {
padding: 2px;
}
.grid {
height: 485px;
}

.padding-upcoming h3 {
font-size: 34px;
}
.game-video {
width:100%;
}
.sub-trailer {
padding:0;
}
.sub-img {
width: 20%;
}
.sub-text {
padding-top: 40px;
width: 70%;
}
.sub-text h4 {
font-size: 24px;
}
.team {
padding: 75px 0;
}
.padding-contact h3 {
font-size: 22px;
}

}

@media screen and (max-width:736px){
.grid-bottom {
padding-top: 15px;
}
.padding-contact {
padding: 70px 0;
}
.footer p {
font-size: 16px;
}
}

@media screen and (max-width:667px){
.banner {
height: 400px;
}
.banneshow{
height: 400px;
}
.banner-content {
padding-top:75px;
}
.shadow:before, .shadow:after {
bottom: 18px;
}

.require-size {
padding: 10px;

}


.team h3 {
font-size: 32px;
}
.about-image p {
font-size: 14px;
line-height: 22px;
}
.padding-contact span {
font-size:15px;
}

}


@media screen and (max-width:640px){
.newsletter input[type="text"] {
width: 80%;
text-align: center;
}
.newsletter input[type="submit"] {
margin-top:5px;
}

}

@media screen and (max-width:600px){
.team h4 {
font-size: 18px;
}
.team p {
font-size: 14px;
}
.padding-contact span {
font-size: 13px;
}

}

@media screen and (max-width:480px){
.banner {
height: 350px;
}
.banneshow {
height: 350px;
}
.banner-content h1 {
font-size: 40px;
}
.banner-content h2 {
font-size: 22px;
}
.banner-content p {
font-size: 15px;
}
.about {
padding: 40px 0;
}

.about-size {
width:100%;
}


.about-image h5 {
padding-top:5px;
}
.about-image p {
padding-top:5px;
line-height: 20px;
}


.grid{
height: 435px;
}


.sub-text {
padding-top: 10px;

}
.sub-text h4 {
font-size: 20px;
}

.team-size {
width: 50%;
float: left;
padding:10px 0;
}
.team-bottom {
padding-top: 0px;
}

.address {
width: 44%;
padding: 10px;
}
.social-icons {
width: 56%;
padding:10px;
}

.newsletter {
width: 80%;
float:none;
display: inline-block;
}

.newsletter input[type="text"] {
width: 60%;
}

}


@media screen and (max-width:414px){

.about {
padding: 25px 0;
}
.about h3 {
padding: 10px 0;
}
.about-image {
padding-top: 20px;
}

.all-require {
padding: 25px 0;
}

.heading {
padding-bottom: 20px;
}
.padding-upcoming {
padding: 25px 0;
}

.sub-text {
padding: 2px;
width: 74%;
}

.padding-contact h3{
text-align:center;
font-size:20px;
padding-bottom:10px;
}

.address {
width: 100%;
}
address {
font-size: 16px;
line-height: 20px;
text-align:center;
}

.social-icons {
width: 100%;
padding:30px 0;
}

.social {
padding: 0px;
}

form {
padding:0px;
}

}


@media screen and (max-width:384px){
.banner-content {
width: 280px;
}


@media screen and (max-width:320px){

.navbar-brand {
width: 80%;
}



.newsletter {
width: 94%;
}

}