@import url('../css/fontawesome-all.css');
@import url('../css/font-awesome.min.css');

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body, html{
  width: 100%;
  height: 100%;
}
body {
  background-color: #000;
  font-family: '微軟正黑體';
  margin: 0;
  padding: 0;
}
input, button, textarea {
  font-family: '微軟正黑體';
  font-size: 1rem;
  outline: none;
}
button{
  border-radius: 6px;
  border: none;
  padding: 4px 36px;
}
a, a:hover {
  text-decoration: none;
  outline: none;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.num,ul.num > li{
  list-style-type:decimal;
}
ul.num{padding-left: 18px;padding-bottom: 10px;}
img{max-width: 100%;}

.red{color:#e41111;}

.container{
  width: 1162px;
  margin: 0 auto;
}
.gotop{
  position: fixed;
  z-index: 97;
  right: 20px;
  bottom: 70px;
  background-color: #7a7a7a;
  cursor: pointer;
}
.gotop a{display: block;}
.gotop img{
  display: block;
  color: #fff;
  padding: 10px;
  width: 40px;
  height: 40px;
}
/*home and 客服*/
.sidenav{
  position: fixed;
  z-index: 50;
  top: 460px;
  right: 0px;
}
.sidenav li a{
  color: #fff;
  display: block;
  margin: 4px 0;
  padding: 10px;
  border-radius: 5px;
  background: rgba(122,122,122,1);
  background: -moz-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(122,122,122,1)), color-stop(100%, rgba(18,3,3,1)));
  background: -webkit-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%);
  background: -o-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%);
  background: -ms-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%);
  background: linear-gradient(to bottom, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#120303', GradientType=0 );
}
.sidenav i{
  font-size: 40px;
}



/*------*/

header{
  height: 78px;
  box-sizing: border-box;
  padding: 15px 0px;
  background: #000;
  width: 100%;
}
header .logo{float: left;}
header .join-content{float: right;padding-top: 15px;}
header .btn,.mobile .btn{border: 1px solid #000; font-size: 14px; width: 110px;height:  35px;display: inline-block;background: #bf0000;text-align: center;color: #fff;line-height: 35px;border-radius: 5px;}
header .join{margin-right: 5px;}
header .green{
  background: -webkit-linear-gradient(-180deg, rgb(93, 214, 93), rgb(30, 99, 30));
  background: linear-gradient(-180deg, rgb(93, 214, 93), rgb(30, 99, 30));
  border-color: #4ca232;
}
header .gray{
  background: -webkit-linear-gradient(0deg, rgb(61, 61, 61), rgb(113, 113, 113));
  background: linear-gradient(0deg, rgb(61, 61, 61), rgb(113, 113, 113));
  border-color: #868686;
}
header .orange{
  background: -webkit-linear-gradient(-180deg, rgb(232, 136, 42), rgb(165, 54, 15));background: linear-gradient(-180deg, rgb(232, 136, 42), rgb(165, 54, 15));
  border-color: #ff942a;
}
header .event{ 
  background: -webkit-linear-gradient(-180deg, rgb(234, 32, 33), rgb(145, 14, 14));background: linear-gradient(-180deg, rgb(234, 32, 33), rgb(145, 14, 14));
  border-color: #fc3b3b;
}


header .blue,.mobile .blue{background: #4472c4;}
header .top-nav-list{float: right;padding:15px 25px 0px 0px;}
header .top-nav-list > ul{display: flex;}
header .top-nav-list > ul li{margin: 0 5px;position: relative;}
header .top-nav-list > ul li a.btn{width: 200px;position: relative;}
header .top-nav-list > ul li i{font-size: 12px;position: absolute;right: 10%;top: 13px;}
header .top-nav-list  ul.dropdown{display: none;padding-top: 8px; position: absolute; left: 0px;width: 100%;background: #060606a1;border-radius: 5px;}
header .top-nav-list  ul.dropdown li{margin: 0px;}
header .top-nav-list > ul li:hover ul.dropdown{display: block;}
header .top-nav-list  ul.dropdown li a{display: block;width: 100%;padding: 5px 0px;text-align: center;font-size: 14px;color: #fff;}
header .top-nav-list  ul.dropdown a:hover{background: #ff9c3a}
header .top-nav-list .event-btn ul.dropdown a:hover{background: #fc3b3b}
.mobile.join-content{display: none;}
#menuBtn{
  display: none;
  position: absolute;
  right: 15px;
  top: 11px;
  z-index: 100;
}
#menuBtn span{display: block;width: 25px;height: 1px;background: #fff;margin: 7px 0px;transition: ease .3s;}
#menuBtn.open span:nth-child(1){transform: rotate(45deg) translateX(7px) translateY(4px);}
#menuBtn.open span:nth-child(2){opacity: 0;}
#menuBtn.open span:nth-child(3){transform: rotate(-45deg) translateX(8px) translateY(-4px);}
#sideMenu{
  display: none;
  position: fixed;
  top: 50px;
  right: 0px;
  width: 250px;
  height: 100%;
  background-color: #0d0d0d;
  margin: 0;
  z-index: 100;
}
#sideMenu ul li.slide-itme a{
  font-size: 14px;
  width: 100%;
  display: inline-block;
  text-align: center;
  color: #fff;
  height: 48px;
  line-height: 48px;
  position: relative;
}
#sideMenu ul li.game-item > a{
  background: -webkit-linear-gradient(-180deg, rgb(232, 136, 42), rgb(165, 54, 15));
  background: linear-gradient(-180deg, rgb(232, 136, 42), rgb(165, 54, 15));
}
#sideMenu ul li.game-item .mobile-dropdown a{color: #ff9c3a;}
#sideMenu ul li.slide-itme > a i{transition: ease .3s;position: absolute;right: 30px;top: 17px;}
#sideMenu ul li.slide-itme > a i.active{transform: rotate(180deg);}
#sideMenu ul li.event-item > a{
  background: -webkit-linear-gradient(-180deg, rgb(234, 32, 33), rgb(145, 14, 14));
  background: linear-gradient(-180deg, rgb(234, 32, 33), rgb(145, 14, 14)); 
}
#sideMenu ul li.event-item .mobile-dropdown a{color: #fc3b3b;}
#sideMenu .mobile-dropdown{display: none;}
#sideMenu .mobile-dropdown li + li a{border-top: 1px solid #484848;}
#sideMenu .mobile-dropdown li:hover a{background: #272727}
#sideMenu ul li.slide-itme.active .mobile-dropdown{display: block;}
#sideMenu.open{display: block;}
#maskBg {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 98;
    background: rgba(0,0,0,0.5);
}
#maskBg.open{display: block;}


#banner a{display: block; cursor:auto;background-image: url(../images/banner.png);background-position: center;background-repeat: no-repeat;background-size: cover;}
#wrap{
    background-image: url(../images/background.png);background-position: left bottom ; background-size: 100% auto; background-repeat: no-repeat;
}

@media screen and (max-width: 980px){
  header .top-nav-list > ul li a.btn{width: 170px;}
}

/*手機768*/
@media screen and (max-width: 768px){
  #menuBtn{display: block;}
  header{position: fixed;top: 0px;z-index: 99;padding: 8px 0px;height: 50px;}
  header .logo a img{height: 35px;}
  .sidenav{display: none;}
  header .join-content,header .top-nav-list{display: none;}
  #banner{margin-top: 50px;}
  #banner a{height: 550px;}
  .mobile.join-content{
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    width: 100%;
    z-index: 90;
  }
  .mobile.join-content.login{display: none;}
  .mobile.login .btn{width: 50%;}
  .mobile .btn{width: 25%;line-height: normal;height: auto;padding: 5px 0px; border-radius: 0px;border: 0px;background: #580f11;}
  .mobile .btn i{font-size: 20px;}
}
@media screen and (max-width: 580px){
  #banner a{height: 450px;}
}
@media screen and (max-width: 480px){
  
}
@media screen and (max-width: 414px){
  #banner a{height: 400px;background-image: url(../images/mobile-banner.png);}


}
@media screen and (max-width: 375px){
  #banner a{height: 350px;}
}