@import url('../css/fontawesome-all.css');
@import url('../css/font-awesome.min.css');
@import url('../css/fontawesome.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; }

/* banner */
#banner a { color: #fff; }

/* gotop */
.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 */
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;z-index: 9999;}
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 */
.mobile.join-content{display: none;}

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

@media screen and (max-width: 980px){
	header .top-nav-list > ul li a.btn{ width: 170px; }
}
@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 , header .join-content , header .top-nav-list , .mobile.join-content.login { display:none; }
	#banner { margin-top:50px; }
	.mobile.join-content { position:fixed; bottom:0px; left:0px; display:flex; width:100%; z-index:90; }
	.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; }
}