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

body, html{
  width: 100%;
  height: 100%;
}
body {
  font-family: '微軟正黑體';
  margin: 0;
  padding: 0;
  background-color: #000;
}
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;}
header .btn,.mobile .btn{width: 170px;height:  46px;display: inline-block;background: #bf0000;text-align: center;color: #fff;line-height: 46px;}
header .join,{margin-right: 12px;}
header .blue,.mobile .blue{background: #4472c4;}

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


/*tabs*/
.tabs .mobile{display: none;}

.tabs{padding-top: 54px;padding-bottom: 94px;}
.bookmark{display: flex;justify-content: space-between;}
.bookmark li{display: inline-block;border-radius: 10px;}
.bookmark li.active{background: #ed7d31}
.bookmark li a{
  display: inline-block;
  width: 278px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  border: 1px solid #ed7d31;
}

.tab-content .info{color: #fff;padding: 77px 76px 0px 38px;}
.tab-content .info .title{font-size: 18px;}
.tab-content .info .txt{padding: 24px 0px 24px 28px; line-height: 1.5;}
.tab-content .info .txt.pt-0{padding-top: 0px;}
.tab-content .info .txt a{color: #fff;}
.tab-content .info .txt .join-way{}
.tab-content .info .txt .join-way .img-content{display: flex}
.tab-content .info .txt .join-way .img-content img{width: 33%;}
#tab-2 .tab2-img-content{display: flex;padding-bottom: 10px;}
#tab-2 .tab2-img-content img{display: inline-block;width: 33%;}

#tab-3 .tab3-img-content{text-align: center;}

#tab-4 .news{padding-top: 24px;padding-left: 22px;}
#tab-4 .news .newsItem li{border-top: 1px solid #fff;padding: 8px 0px;}
#tab-4 .news .newsItem li .left{
  display: inline-block;
  width: 98px;
  height: 29px;
  text-align: center;
  line-height: 29px;
  background: #e7051d;
  border-radius: 5px;
}
#tab-4 .news .newsItem li .right{padding-left: 10px;}
#tab-4 .news .newsItem li:hover .right{color: #e7051d;}

#tab-4{display: block !important;opacity: 0;position: absolute;top: -100%;left: 0px;}
.tabs.showlist #tab-4{opacity: 1;position: static;}


.mobile.join-content{display: none;}

@media screen and (max-width: 1200px){
  .container{width: 100%;padding: 0 12px;}
  .bookmark li{width: 24%;}
  .bookmark li a{width: 100%;}
}
/*手機768*/
@media screen and (max-width: 768px){
  ul.num{padding-left: 24px;}
  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{display: none;}
  #banner a{height: 550px;}
  .mobile.join-content{
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    width: 100%;
  }
  .mobile .btn{width: 50%;}
  .mobile .btn i{padding-right: 5px;}
  .tabs .pc{display: none;}
  .tabs .mobile{display: block;}
  .tab-content .info{padding: 42px 22px 0px 15px;}
  .tab-content .info .txt{padding: 24px 0px 24px 0px;}
  .tab-content .info .txt .join-way,#tab-2 .tab2-img-content{padding-left: 0px;}

  .tab-content .info .txt .join-way .img-content,#tab-2 .tab2-img-content{flex-wrap: wrap;}
  .tab-content .info .txt .join-way .img-content img,#tab-2 .tab2-img-content img{width: 100%;}
  #tab-4 .news .newsItem li .left,#tab-4 .news .newsItem li .right{display: block;}
  #tab-4 .news .newsItem li .right{width: 100%;padding-left: 0px;padding-top: 8px;}
}
@media screen and (max-width: 580px){
  #banner a{height: 450px;}
}
@media screen and (max-width: 480px){

}
@media screen and (max-width: 420px){
  #banner a{height: 400px;}
  #tab-4 .news .newsItem li .left{width: 44px;height: 20px;line-height: 20px;font-size: 12px;}
  #tab-4 .news .newsItem li .right{font-size: 16px;}
}
@media screen and (max-width: 375px){
  #banner a{height: 350px;}
}

#tab-4{display: block !important;opacity: 0;height: 0px;overflow: hidden;}
.tabs.showlist #tab-4{opacity: 1;height: auto;}