@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: #efefed;
  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: 893px;
  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: url(https://tb588bonus.com/2022tb/images/img_header_background.jpg) no-repeat 50%;
  width: 100%;
}
header .logo{float: left;}
header .join-content{float: right;}
header .btn,.mobile .btn{width: 170px;height:  46px;display: inline-block;background: #f1a10a;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(img/banner.png);background-position: center;background-repeat: no-repeat;background-size: cover;}
#wrap{
    background-image: url(img/background.jpg);background-position: left bottom ; background-size: 100% auto; background-repeat: no-repeat;
}

/*tabs*/
.tabs{padding-top: 54px;padding-bottom: 94px;background-color: rgba(0, 0, 0, 0.05);}
.bookmark{display: flex;justify-content: space-between;padding: 0 40px;}
.bookmark li{display: inline-block;border-radius: 10px;}
.bookmark li.active a{
    background: -webkit-linear-gradient(#ffb92c,#ff8a23);
    background: -o-linear-gradient(yellow,red);
    background: -moz-linear-gradient(yellow,red);
    background: linear-gradient(#ffb92c,#ff8a23);
    color: #513216;
}
.bookmark li a{display: inline-block;width: 260px;height: 44px;line-height: 44px;text-align: center;color: #fff;border-radius: 10px;background-color: #513216;}
.tab-content .info{color: #fff;padding: 77px 76px 0px 38px;}
.tab-content .info .title{font-size: 24px;background-color: #ffb92c;color: #513216;text-align: center;padding: 10px 0;font-weight: bold;}
.tab-content .info .txt{padding: 24px 0px 24px;line-height: 1.5;color: #513216;font-size: 18px;font-weight: bold;}
.tab-content .info .txt p b{
    color: #e97b19;
}
.tab-content .info .txt p img{
    width: 100%;
}
.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-content .info .txt .news {
    padding-top: 24px;
}
.tab-content .info .txt .news .newsItem li {
    border-top: 1px solid #19191933;
    padding: 8px 0px;
}
.tab-content .info .txt .news .newsItem li .left {
    display: inline-block;
    width: 98px;
    height: 29px;
    text-align: center;
    line-height: 29px;
    background: #e7051d;
    border-radius: 5px;
    color: white;
    font-weight: normal;
    font-size: 16px;
}
.tab-content .info .txt .news .newsItem li .right {
    padding-left: 10px;
    font-weight: normal;
    font-size: 16px;
}

#tab-2 .tab2-img-content{display: flex;padding-bottom: 10px;}
#tab-2 .tab2-img-content img{display: inline-block;width: 33%;}
.tabs{padding-top: 35px;padding-bottom: 94px;}
.bookmark{display: flex;justify-content: space-between;}
.bookmark li{display: inline-block;border-radius: 10px;}
.bookmark li.active a{
    background: -webkit-linear-gradient(#ffb92c,#ff8a23);
    background: -o-linear-gradient(#ffb92c,#ff8a23);
    background: -moz-linear-gradient(#ffb92c,#ff8a23);
    background: linear-gradient(#ffb92c,#ff8a23);
    color: #513216;
}
.bookmark li a{display: inline-block;width: 260px;height: 44px;line-height: 44px;text-align: center;color: #fff;border-radius: 10px;background-color: #513216;}
.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-3表格*/
#tab-3 table{background-color: #f9f9f9;width: 100%;text-align: center;color: #5f5f5f;font-size: 16px;}
#tab-3 table tr:nth-child(even){background: #ffe6e6;}
#tab-3 table td{width: 25%;padding: 5px 0;}

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


@media screen and (max-width: 1200px){
  .container{width: 100%;padding: 0 12px;}
  .bookmark li{width: 30%;}
  .bookmark li a{width: 100%;}
  
}

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

/*手機768*/
@media screen and (max-width: 768px){
  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 .btn{width: 50%;}
  .mobile .btn i{padding-right: 5px;}
  ul.num{padding-left: 24px;}
  .tab-content .info{padding: 25px 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%;}
  .bookmark { padding: 0 20px;}
  #tab-3 table{font-size: 12px;}
}
@media screen and (max-width: 580px){
  #banner a{height: 450px;}
}
@media screen and (max-width: 480px){
#banner a {height: 355px;background-image: url(img/mobile-banner.jpg);}
}
@media screen and (max-width: 420px){
  #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%;}
}
@media screen and (max-width: 414px){
  #banner a{height: 360px;}
}
@media screen and (max-width: 375px){
  #banner a{height: 350px;}
}