header .top-nav-list ul.dropdown { z-index: 9999; }

/* banner */
#banner { position: relative; background: url(img2/bg.jpg?p=0.2) no-repeat 0 0;  background-position:center; background-size:cover;}
/*#banner * { font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; word-wrap: break-word; word-break: break-all; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }*/
/*#banner:after { position: absolute; background: url(img/img-bannerBBg.png) no-repeat 50% 0; width: 100%; height: 920px; bottom: 0; left: 0; z-index: 1; content: ""; }*/
/*#banner .box:before { position: absolute; width: 100%; height: 357px; background: url(img/img-bottom.png) no-repeat 0 0; display: block; left: 0; bottom: 0; content: ""; }*/
#banner .box .topTitle { margin: 0 auto; width: 960px; }
#banner .box .wallBox { margin: 0 auto; padding: 0 0 30px;  width: 100%; bottom: 0; left: 0; z-index: 1; content: ""; border-radius: 50px;}
#banner .box .wallBox .title {     position: relative;
    margin: -10px auto 0;
    padding: 10px 0;
    width: 500px;
    background: #1a1a1ae3;
    text-align: center;
    font-weight: bold;
    font-size: 34px;
    color: #fff;
    border-radius: 3px; }
#banner .box .wallBox .title  p font {
    margin: 5px 0;
    display: block;
    text-align: center;
	font-size:25px;
}
#banner .box .wallBox ul { position: relative; overflow: hidden; margin: 25px auto 120px; }
#banner .box .wallBox ul li { margin: 15px 5px; float: left; width: calc((100% / 3) - 10px); cursor: pointer; text-align:center;}
#banner .box #wrap{background-color:#000;}
#banner .box .wallBox .info{
	position: relative;
	margin: 0px auto 0;
    padding: 10px 0;
	width: 70%;
    background: #fdd6811f;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
    color: #fff;
    border:#e4ab3463 3px solid;
	border-radius: 5px;
}



#banner #winBox { position: fixed; padding-top: 10vh; width: 100%; height: 100vh; background: rgba(0, 0, 0, .7); top: 0; left: 0; z-index: 999; }
#banner #winBox .row { text-align: center; -moz-transform: translateY(10px); -webkit-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0; }
#banner #winBox .row .info { overflow: hidden; position: relative; margin: 0 auto; width: 600px; background: url(img2/img-celebrate.png) no-repeat 50%; background-size: 0 auto; }
#banner #winBox .row .info .redenvelope { position: relative; margin: 50px auto; width: 274px; height: 370px; }
#banner #winBox .row .info .redenvelope .txt { position: absolute; padding: 20px 0 40px; width: 80%; background: #fff; border-radius: 10px; z-index: 2; top: 110px; left: 10%; transition-delay: .4s; }
#banner #winBox .row .info .redenvelope .txt p { font-size: 16px; color: #1c1c1c; }
#banner #winBox .row .info .redenvelope .txt p b { margin-right: 5px; font-size: 43px; color: #ff0e0d; }
#banner #winBox .row .info .redenvelope:before ,
#banner #winBox .row .info .redenvelope:after { position: absolute; width: 100%; height: 100%; background: url(img2/img-envelopeAfter.png) no-repeat 50% bottom; bottom: 0; left: 0; content: ""; z-index: 1; }
#banner #winBox .row .info .redenvelope:after { background-image: url(img2/img-envelopeBefore.png); z-index: 3; }
#banner #winBox .row .info .gold { position: absolute; right: 90px; bottom: 30px; z-index: 21; }
#banner #winBox .row.open { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
#banner #winBox .row.open .info { background-size: 100% auto; }
#banner #winBox .row.open .info.animation { -webkit-animation: celebrate 1s infinite alternate ease-in-out; animation: celebrate 1s infinite alternate ease-in-out; }
#banner #winBox .row.open .info .redenvelope .txt { top: 0; }
#banner #winBox .row a#okBtn { padding: 6px 30px; height: auto; background: #fadb1c; border-radius: 5px; display: inline-block; color: #000; cursor: pointer; font-size: 30px;}

@-webkit-keyframes lantern1 { 0% , 100% { top: 0; } 50% { top: -10px; } }
@keyframes lantern1 { 0% , 100% { top: 0; } 50% { top: -10px; } }
@-webkit-keyframes lantern2 { 0% , 100% { top: -20px; } 50% { top: -10px; } }
@keyframes lantern2 { 0% , 100% { top: -20px; } 50% { top: -10px; } }
@-webkit-keyframes lantern3 { 0% , 100% { top: -30px; } 50% { top: -20px; } }
@keyframes lantern3 { 0% , 100% { top: -30px; } 50% { top: -20px; } }
@-webkit-keyframes lantern4 { 0% , 100% { top: -5px; } 50% { top: -15px; } }
@keyframes lantern4 { 0% , 100% { top: -5px; } 50% { top: -15px; } }
@-webkit-keyframes ingots { 0% , 50% , 100% { -webkit-transform: scale(1); } 25% , 75% { -webkit-transform: scale(1.2); } }
@keyframes ingots { 0% , 50% , 100% { -webkit-transform: scale(1); } 25% , 75% { -webkit-transform: scale(1.2); } }

/* tabs */
.tabs{padding-top: 54px;padding-bottom: 94px;}
.bookmark{display: flex;justify-content: center;}
.bookmark li{display: inline-block;border-radius: 10px;}
.bookmark li{margin: 0px 6px;}
.bookmark li:first-child{margin-left: 0px;}
.bookmark li:last-child{margin-right: 0px;}
.bookmark li.active{background: #f1a30c}
.bookmark li a{display: inline-block;width: 278px;height: 44px;line-height: 44px;text-align: center;color: #fff;border-radius: 10px;border: 1px solid #f1a30c;}

.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; color: #fff;}

/*tab3*/
.Ranking-list{padding-bottom: 35px;color: #000;}
.Ranking-list li.item{display: flex;}
.Ranking-list li.item:nth-child(2n+1){background: #fff4d3c7;}
.Ranking-list li.item:nth-child(2n){background: #fffce9d4;}
.Ranking-list li.item p label{display: none;}
.Ranking-list li.item:first-child p label{display: block;}
.Ranking-list li.item p{position: relative;width: 50%;z-index: 2;}
.Ranking-list li.item p label{padding: 5px 0;min-height: 30px;background:#ac8126b8;text-align: center;color: #fff}
.Ranking-list li.item p font{overflow: hidden;padding: 5px 0;height: 30px;display: -webkit-box;text-align: center;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;}


/*tab1*/
.tabs .ruleBox { margin-bottom: 30px; }
.tabs .ruleBox h5 { margin-bottom: 5px; font-size: 20px; color: #ff961b; }
.tabs .ruleBox p { margin-bottom: 15px; }
.tabs .ruleBox p a { color: #f6cf0d; text-decoration: underline; }
.tabs p.inp { font-size: 20px; font-weight: bold; color: #ff961b; }

@media screen and (min-width: 1280px) {
	#banner .box .wallBox ul li img{padding: 0 35px;}
}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 1200px){
  .container{width: 100%;padding: 0 12px;}
  .bookmark li{width: 24%;}
  .bookmark li a{width: 100%;}
}
@media screen and (max-width: 1000px) {
	#banner:after { display: none; }
	#banner .box { background-size: 190% auto; }
	#banner .box:before { height: 35vw; background-size: auto 105%; }
	#banner .box .topTitle , #banner .box .wallBox ul { width: 90%; }
	#banner .box .topTitle p{font-size:110px;}
	#banner .box .wallBox ul { margin: 4vw auto 0; }
	#banner .box .wallBox ul li { margin: 3vw 5px; }
	
}
@media screen and (max-width: 768px){
	
	#banner .box .topTitle p{font-size:85px;}
  ul.num{padding-left: 24px;}
  .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;}

}

@media screen and (max-width: 600px) {
	#banner{ position: relative; background: url(img2/bg.jpg) no-repeat 0 0; background-attachment:fixed; background-position:center; background-size:cover;}
	#banner .box .topTitle p{font-size:80px;}
	#banner .box .wallBox .title { margin-bottom: 10px; width: 90%; background-size: 120% auto; font-size: 6vw; }
	#banner .box .wallBox .info { margin-bottom: 10px; width: 90%; background-size: 120% auto; font-size: 5vw; }
	#banner #winBox .row .info { width: 100%; }
	#banner #winBox .row .info .gold { right: -10px; }
}
@media screen and (max-width: 540px) {
	#banner .box .topTitle p{font-size:72px;}
	
}
@media screen and (max-width: 480px) {
	#banner .box .topTitle p{font-size:64px;}
	
	.Ranking-list .search li.item p { display: block; }
	.Ranking-list .search li.item p label { width: auto; display: none; }
	.Ranking-list .search li.item:first-child p label { display: block; }
	.Ranking-list .search li.item p font { width: auto; display: block; }
}
@media screen and (max-width: 400px) {
	#banner .box .topTitle p{font-size:53px;}

}
@media screen and (max-width: 340px) {
	#banner .box .topTitle p{font-size:45px;}
	
}