*{padding:0;margin:0;box-sizing:border-box}
body,html{width:100%; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.4;}
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dt, dd, ul, ol, li, fieldset, form, tr, th, td, center, input, button, textarea { font-size:16px; }

.page-nav { display: none; position:fixed; right: 10px; top: 50%; z-index: 5; margin-top:-234px; background:url(../images/line.png) no-repeat center center/auto 120%; }
.page-nav a { position: relative; display:block; width:184px; height:78px; padding-top:20px; line-height:58px; text-align:center; color:#fff; font-size:20px; background:url(../images/side-btn.png) no-repeat 0 0;  }
.page-nav a:hover:before, .page-nav a.on:before, .page-nav a[data-id="5"]:before { position: absolute; left: 50%; bottom: -9px; display: block; width: 220px; height: 85px; margin-left: -110px; content:"";  background:url(../images/light.png) no-repeat 0 0; animation: light 0.8s steps(10) infinite; }
.page-nav a[data-id="5"] { background-image:url(../images/side-btn2.png); }
.page-nav a:hover, .page-nav a.on { filter:brightness(1.1); }


.section { position: relative; width:100%; max-width:1920px; margin:0 auto; }
.section .wrapper { position: relative; margin:0 auto; width:1200px; z-index:2; }
.section .part { padding:20px 0 70px 0; }
.section .part.sp { padding:20px 0 50px 0; }
.sec1 .wrapper { height:1080px; }
.logo { position:absolute; left:0; top:10px; width:240px; }
.logo img { display:block; width:100%; }

.sec1 { height: 1080px; background:url(../images/bg1.jpg) no-repeat center top; }
.sec2 { padding-bottom: 200px; background:url(../images/bg2.jpg) no-repeat center top; }
.sec2:before { content: ""; display: block; position: absolute;top: -223px; left: 50%; margin-left: -50%; width:100%; height: 223px; background:url(../images/mask1.png) no-repeat center top; z-index:1; }
.sec3 { padding-top: 60px; background:url(../images/bg3.jpg) no-repeat center top; }
.sec3:before { content: ""; display: block; position: absolute;top: -174px; left: 50%; margin-left: -50%; width:100%; height: 174px; background:url(../images/mask2.png) no-repeat center top; z-index:1; }

.logo-list { width: 100%; height:78px; background:#000; text-align:center; display:flex; align-items:center; justify-content:center; }
.logo-list a { display: block; margin:0 30px; }
.logo-list a img { display:block; }

.slogan { width:100%; position:absolute; left:0; text-align:center; bottom:200px; }
.play-btn { display:block; width:98px; height:98px; background:url(../images/play.png) no-repeat center center; margin:0 auto; }

.login-content { position:absolute; right:0; top:40px; }
.login-btn { display:block; width:141px; height:38px; line-height: 38px; background:url(../images/btn1.png) no-repeat 0 0; text-align:center; color:#fff; }
.login-btn:hover { filter:brightness(1.2); }
.before-login, .after-login { display:none; }
.before-login.show, .after-login.show { display:flex; align-items:center; justify-content:center; }
.user-info { text-align:center; }

.title { width:100%; height: 53px; margin-bottom:40px; }
.tit1 { background:url(../images/title1.png) no-repeat center center; }
.tit2 { background:url(../images/title2.png) no-repeat center center; }
.tit3 { background:url(../images/title3.png) no-repeat center center; }
.tit4 { background:url(../images/title4.png) no-repeat center center; }

.rank-panel { position: relative; width:1099px; height:625px; margin: 0 auto; background:url(../images/panel1.png) no-repeat center center; padding:20px 80px; }
.rank-tabs { display:flex; align-items:center; justify-content:space-between; background:#f9fefe; padding:10px 10px 0 10px; }
.rank-tabs a { display:block; width:217px; height:53px; line-height:53px; background:url(../images/btn3.png) no-repeat center center; text-align:center; color:#fff; font-weight:bold; font-size:18px; } 
.rank-tabs a:hover, .record-btn a:hover, .vote-btn:hover, .more-btn:hover { filter:brightness(1.2); }
.rank-tabs a.on { filter:brightness(1.2); cursor:default; }
.phase2 .rank-tabs { justify-content:flex-start; }
.phase2 .rank-tabs a { background-image:url(../images/btn4.png); }
.rank-cont { background: #f9fefe; padding:10px; }
.rankbg { background: url(../images/tablebg1.png) repeat-x center top }
.phase2 .rankbg { background-image: url(../images/tablebg2.png); }
.rank-cont table { width:100%; }
.rank-cont th { height:49px; line-height:49px; text-align:center; color:#fff; font-size:18px; }
.rank-cont td { text-align:center; color:#113b65; line-height:42px; font-weight:bold; background:#f0f9fe; }
.rank-cont td p { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 auto;  }
.rank-cont th p, .rank-cont td p { line-height:1; }
.rank-cont th p { font-size:18px; }
.rank-cont td p.txt-all { white-space:wrap; }
.rank-cont td p.top1, .rank-cont td p.top2, .rank-cont td p.top3 { width:35px; height:42px; font-size:0; }
.rank-cont td p.top1 { background:url(../images/icon-top1.png) no-repeat center center; }
.rank-cont td p.top2 { background:url(../images/icon-top2.png) no-repeat center center; }
.rank-cont td p.top3 { background:url(../images/icon-top3.png) no-repeat center center; }
.rank-cont td p.reward { position: relative; width:36px; height:42px; background:url(../images/icon-box1.png) no-repeat center center; cursor:pointer; overflow: visible;}
.phase2 .rank-cont td p.reward { background-image:url(../images/icon-box2.png); }
.rank-cont td p.reward span { display: none; width: 200px; position:absolute; left:40px; bottom:8px; padding:5px; background:rgba(19, 55, 153, 0.6); white-space:wrap; color:#fff; font-weight:normal; font-size:14px; line-height:1.2; border-radius:3px; }
.rank-cont td p.reward span:before { content:""; width:0; height:0; border:5px solid transparent; border-right-color:#133799; opacity:0.6; position:absolute; left:-10px; bottom:8px; }
.rank-cont td p.reward:hover span { display:block; }
.rank-note { width:80%; margin:0 auto; color:#526baa; padding-top:20px; }
.record-btn { position: absolute; right: 45px; top: -30px; display:flex; align-items:center; justify-content:flex-end; padding-bottom:5px; }
.record-btn a { display:block; width:105px; height:23px; background:url(../images/btn2.png) no-repeat 0 0; text-align:center; color:#fff; line-height:23px; }


.guide-panel { width:1163px; height:653px; background:url(../images/panel2.png) no-repeat center center; margin: 0 auto; }
.guide-list { position:relative; height:528px; }
.guide-list li { position: absolute; width:440px; top:30px; }
.guide-list li:nth-child(1) { left:-18px; transform:rotate(-9deg); }
.guide-list li:nth-child(2) { left:366px; transform:rotate(4deg); }
.guide-list li:nth-child(3) { left:730px; top: 72px; transform:rotate(15deg); }
.sub-title { width: 440px; height:129px; background:url(../images/btn5.png) no-repeat center center; display:flex; align-items:center; justify-content:center; line-height:1.2; font-size:20px; color:#fff; }
.sub-title span { width:50%; text-align:center; }
.guide-txt { width:300px; height: 220px; overflow-y: auto; margin:0 auto; color:#294870; padding-right:5px; }
.guide-txt * { font-size:18px; }
.guide-txt p { padding:3px 0; }
.guide-list li:nth-child(2) .guide-txt { height:240px; }
.guide-list li:nth-child(3) .guide-txt { height:182px; }

.view-more { width: 100%; display:flex; align-items:center; justify-content:center; }
.view-more a { position: relative; color:#fff; text-shadow: 0 0 5px #3e6bc6, 0 0 5px #3e6bc6, 0 0 5px #3e6bc6; font-size:18px; }
.view-more:before, .view-more:after { display: block; content:""; width:61px; height:39px; background:url(../images/arrow3.png) no-repeat center center; }
.view-more:before { transform:rotate(-180deg); }
.view-more:hover { filter:brightness(1.1); }



.vote-tops { display:flex; align-items:flex-end; justify-content:center }
.vote-tops li { position: relative; width: 310px; height:412px; padding:65px 0 0 0; }
.vote-tops li.vote-top1 { width: 425px; height:476px; background:url(../images/top1bg.png) no-repeat center center; margin: 0 15px; }
.vote-tops li.vote-top2 { background:url(../images/top2bg.png) no-repeat center center; }
.vote-tops li.vote-top3 { background:url(../images/top3bg.png) no-repeat center center; }
.vote-note { margin:0 auto; color:#526baa; padding:40px 0; text-align:center; }
.points, .pack { position:absolute; }

.avatar { position: relative; width: 250px; height:219px; margin:0 auto; background:url(../images/class/male/archer.png) no-repeat center top; }
.vote-top2 .avatar, .vote-top3 .avatar { width:220px; height: 183px; background-size:100% auto; }
.avatar[data-type="1"] { background-image:url(../images/class/male/archer.png); }
.avatar[data-type="2"] { background-image:url(../images/class/male/dragon.png); }
.avatar[data-type="3"] { background-image:url(../images/class/male/fire-taoist.png); }
.avatar[data-type="4"] { background-image:url(../images/class/male/monk.png); }
.avatar[data-type="5"] { background-image:url(../images/class/male/ninja.png); }
.avatar[data-type="6"] { background-image:url(../images/class/male/pirate.png); }
.avatar[data-type="7"] { background-image:url(../images/class/male/thunder.png); }
.avatar[data-type="8"] { background-image:url(../images/class/male/trojan.png); }
.avatar[data-type="9"] { background-image:url(../images/class/male/warrior.png); }
.avatar[data-type="10"] { background-image:url(../images/class/male/water-taoist.png); }
.avatar[data-type="11"] { background-image:url(../images/class/male/windwalker.png); }
.avatar[data-type="12"] { background-image:url(../images/class/male/xiake.png); }

.avatar.female[data-type="1"] { background-image:url(../images/class/female/archer.png); }
.avatar.female[data-type="2"] { background-image:url(../images/class/female/dragon.png); }
.avatar.female[data-type="3"] { background-image:url(../images/class/female/fire-taoist.png); }
.avatar.female[data-type="4"] { background-image:url(../images/class/female/monk.png); }
.avatar.female[data-type="5"] { background-image:url(../images/class/female/ninja.png); }
.avatar.female[data-type="6"] { background-image:url(../images/class/female/pirate.png); }
.avatar.female[data-type="7"] { background-image:url(../images/class/female/thunder.png); }
.avatar.female[data-type="8"] { background-image:url(../images/class/female/trojan.png); }
.avatar.female[data-type="9"] { background-image:url(../images/class/female/warrior.png); }
.avatar.female[data-type="10"] { background-image:url(../images/class/female/water-taoist.png); }
.avatar.female[data-type="11"] { background-image:url(../images/class/female/windwalker.png); }
.avatar.female[data-type="12"] { background-image:url(../images/class/female/xiake.png); }

.name { width:100%; text-align:center; font-size:20px; color:#fff; line-height:33px; }
.vote-top1 .name { color:#fff5d1; font-size:24px; line-height:36px; }
.info { width:200px; margin:0 auto; text-align:center; padding:3px 0; font-size:14px; line-height:1.2  }
.vote-top1 .info { width:230px; padding:6px 0; font-size:16px; line-height:1.4; color:#5f3413; }
.vote-top2 .info { color:#34466a }
.vote-top3 .info { color:#705634 }
.vote-btn { display:block; width:108px; height:34px; line-height:34px; color:#fff; text-align:center; background:url(../images/btn9.png) no-repeat 0 0; margin:0 auto; }
.vote-top1 .vote-btn { width:120px; height:36px; line-height:36px; background-image:url(../images/btn8.png); }
.vote-top3 .vote-btn {  background-image:url(../images/btn10.png); }
.vote-rank .vote-btn { width:106px; height:28px; line-height: 28px; background-image:url(../images/btn6.png); font-weight:normal; }

.pack { left: 210px; top: 80px; width:124px; height:38px; background:url(../images/txtbg2.png) no-repeat 0 0/100% 100%; font-size:12px; line-height:1; padding:5px; text-align:center; }
.vote-top1 .pack { background-image:url(../images/txtbg1.png); left:280px; top:90px; }
.vote-top3 .pack { background-image:url(../images/txtbg1.png); }

.points { top: -15px; left: -20px; width:185px; height:185px; padding:95px 10px 20px 20px; font-size:12px; text-align:center; color:#a1260b; font-weight:bold; line-height:1; background:url(../images/fire/orange.png) no-repeat 0 0; animation: fire 0.3s steps(3) infinite; z-index:2; }
.points p { font-size:14px; padding-bottom:4px; }
.points p b {font-size: 16px;}
.vote-top2 .points { background:url(../images/fire/blue.png) no-repeat 0 0;  color:#0d3c92; }
.vote-top3 .points { background:url(../images/fire/brown.png) no-repeat 0 0; color:#482f02; }
.vote-top2 .points, .vote-top3 .points { left:-50px; top:-30px; transform:scale(0.9); }

.vote-rank { width:1099px; height:565px; margin: 0 auto; background:url(../images/panel4.png) no-repeat center center; padding:25px 80px; }

.pages { padding-top:10px; }
.pager { display:flex; align-items:center; justify-content:center; }
.pager a, .pager span { display:block; color:#526399; margin:0 15px; font-weight:bold; }
.pager a:hover, .pager span { text-decoration:underline; color:#4486e7 }

.vote-details { display:flex; align-items:center; justify-content:space-between; width:90%; margin:0 auto; }
.my-pack { width: 21px; height:21px; background:url(../images/btn14.png) no-repeat 0 0; margin-left:8px; }
.my-pack:hover { filter:brightness(1.1); }
.my-vote-info p { display:flex; align-items:center; justify-content:flex-start; }


.appearance { width: 92%; margin: 60px auto 40px; display:flex; align-items:center; justify-content:space-between; }
.intro { width:322px; height:371px; background:url(../images/panel3.png) no-repeat 0 0; padding:8px 42px 10px 45px; text-align:center; font-size:16px; color: #3f1416; }
.img { position: relative; width:672px; height:672px;}
.small-pic, .img-tabs { position:absolute; }
.small-pic { z-index: 3; left: -20px; bottom: 10px; width:221px; height:221px; background:url(../images/circle-small.png) no-repeat 0 0; display:flex; align-items:center; justify-content:center; }
.small-pic img { display:block; width: 190px; height:190px; border-radius:200px; }
.img-tabs { position:absolute; right:0; top:0; z-index:4; }
.img-tabs a { position: absolute; width:95px; height:95px; background:url(../images/btn7.png) no-repeat 0 0; display:flex; align-items:center; justify-content:center; color:#000; font-weight:bold; font-size:18px; line-height:1; text-align:center; padding: 0 10px; }
.img-tabs a:hover, .img-tabs a.on { background-image:url(../images/btn7-hover.png); }
.img-tabs a:nth-child(1) { right:110px; top:-10px; }
.img-tabs a:nth-child(2) {right: 32px;top: 62px;}
.img-tabs a:nth-child(3) {right: -26px;top: 147px;}
.img-tabs a:nth-child(4) {right: -54px;top: 241px;}
.img-tabs a:nth-child(5) {right: -57px;top: 340px;}
.img-tabs a:nth-child(6) {right: -25px;top: 433px;}
.img-tabs a:nth-child(7) {right: 24px;top: 512px;}
.img-tabs a:nth-child(8) {right: 95px;top: 578px;}

.gender-tabs { position:absolute; left:0; top:0; z-index:2; }
.gender-tabs a { position: absolute; display:block; width: 80px; height:78px; background:url(../images/btn15.png) no-repeat 0 0; text-align:center; line-height:78px; color:#e6cbaa; font-size:90%; }
.gender-tabs a:hover, .gender-tabs a.on { filter:brightness(1.1); }
.gender-tabs a:nth-child(1) { left:140px; top:0; }
.gender-tabs a:nth-child(2) { left: 60px; top: 70px;}


.pic { width:672px; height:672px; display:flex; align-items:center; justify-content:center; background:url(../images/circle.png) no-repeat center center; }
.pic p { position: relative; width: 572px; height: 572px; border-radius: 666px; overflow:hidden; flex-shrink:0; z-index:1; }
.pic p img { display:block; width:100%; height:100%; }
.appearance .pic[data-id="1"] p, .appearance .pic[data-id="3"] p { display:flex; align-items:center; justify-content:center; }
.appearance .pic[data-id="1"] img, .appearance .pic[data-id="3"] img { width:80%; height:auto; }
.appearance .pic[data-id="4"] img { margin-left:-20px; }



.pic p.preivew-hint, .wing-pic span { position:absolute; bottom: 58px; width:40%; left:30%; text-align:center; color:#fffef3; height:auto; border-radius:0; }
.wing-pic span { width:60%; left: auto; right:0; bottom:30px; }

.appearance-title { line-height:54px; font-size:25px; font-weight: bold; color:#f9e3ad; white-space:nowrap; }
.des { padding:15px 0; }
.appearance-title2 { font-weight:bold; height: 37px; background: url(../images/btn11.png) no-repeat center center; font-size: 20px; color: #3f372d; line-height:37px; }

.more-btn { cursor: pointer; width:120px; padding-bottom:64px; background:url(../images/arrow.png) no-repeat center bottom; text-align:center; text-transform:uppercase; font-size:18px; margin:0 auto 60px auto; color:#fff; line-height:1; animation: move 2s infinite ease-in-out; }

.rewards { position:relative; width: 100%; height:736px; background:url(../images/king.png) no-repeat center top; }
.rewards li { width: 350px; height: 313px; position:absolute; background: url(../images/prizebg.png) no-repeat center bottom; }
.rwd-img { width:100%; height:249px; display:flex; align-items:center; justify-content:center; animation: move 3s infinite ease-in; }
.rwd-img img { display:block; }
.rewards li:nth-child(1) { left:0; top:0; }
.rewards li:nth-child(2) { right:0; top:0; }
.rewards li:nth-child(3) { left:0; bottom:100px; cursor:pointer; }
.rewards li:nth-child(4) { right:0; bottom:100px; }
.rwd-name { display: flex; align-items: center; justify-content: center; color:#fffbe8; height: 62px; font-size:20px; line-height:1.2; padding:8px 0; width:60%; margin:0 auto; text-align:center; text-shadow:1px 1px 0 #521f1a,-1px -1px 0 #521f1a,-1px 1px 0 #521f1a,1px -1px 0 #521f1a  }
.rwd-des { display:none; width:228px; background:url(../images/float.png) no-repeat center center/100% 100%; box-sizing:border-box; padding: 10px 15px; text-align: center; color:#e6d9c3; line-height:1.1; position:absolute; left:-60px; top:30px; font-size:13px; }
.rewards li:hover .rwd-des { display:flex; align-items:center; justify-content:center; }
.rule-btn { display:flex; align-items:center; justify-content:flex-end; }
.sp .rule-btn { width:90%; margin:0 auto; }
.rule-btn a { display: block; color:#fff; text-align:center; background:url(../images/btn1.png) no-repeat 0 0; width:141px; height:38px; line-height:38px; font-size:18px; font-weight:bold; }
.rule-btn a:hover, .rewards li:nth-child(3):hover { filter:brightness(1.2); }


.full-bg ::-webkit-scrollbar {width:6px;border-radius: 6px;}
.full-bg ::-webkit-scrollbar-thumb {background:#4d6ebe;border-radius: 6px;}
.full-bg ::-webkit-scrollbar-track {background:#fff;border-radius: 6px;}

.pop ::-webkit-scrollbar {width:6px;border-radius: 6px;}
.pop ::-webkit-scrollbar-thumb {background:#4d6ebe;border-radius: 6px;}
.pop ::-webkit-scrollbar-track {background:#fff;border-radius: 6px;}

/*粒子动效*/
.particle-container{ position: absolute; left: 50%; top: 27px; z-index: 4; margin-left: -150px; width:300px;height:200px; overflow:hidden; }
.particle{position:absolute;background:no-repeat center;background-size:contain;opacity:.8;bottom:-30px;z-index:1;animation:floatUp linear forwards}
@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.7}
	0%{transform:translateY(0) rotate(0) scale(.8);opacity:.6}
	50%{opacity:.9}
	100%{transform:translateY(-230px) rotate(150deg) scale(1.2);opacity:0}
}


@keyframes fire {
    100% { background-position: 0 -555px; } /* 只需写最后一帧位置 */
}

@keyframes light {
    100% { background-position: 0 -852px; } /* 只需写最后一帧位置 */
}


/*common*/
.go-footer{position:fixed;bottom:30px;right:30px;height:30px;line-height:30px;font-size:14px;color:#000;background:rgba(255,255,255,.75);z-index:40;padding:0 20px;border-radius:15px}
.go-footer.show i{transform:rotate(180deg)}
.go-footer i{display:inline-block;width:22px;height:22px;background:url(https://hw.99.com/uploads/wtop/sports/img/icon-arrow.png) no-repeat;margin-left:5px;vertical-align:middle;transition:all .3s}
.footer{position:fixed;bottom:0;width:100%;padding:20px auto;font-size:12px;color:#fff;background:#000;z-index:30;transform:translateY(100%);transition:transform .2s linear}
.footer.show{transform:translateY(0)}
.footer a{color:#fff}
.video iframe { width:640px; height:360px; }

/*box*/
.pop, .commonbox { position:fixed;width:100%;height:100%;top:0;left:0;display:none;background:rgba(0,0,0,.8); z-index: 999; color:#2a476e; }
.pop.show, .commonbox.show {display:flex; align-items: center; justify-content: center;}
.spop, .tipbox { position:relative; margin:0 auto; }
.box1 { width:677px; height:439px; background:url(../images/box5.png) no-repeat 0 0; }
.box2 { width:884px; height:571px; background:url(../images/box3.png) no-repeat 0 0; }
.box3 { width:1062px; height:636px; background:url(../images/box4.png) no-repeat 0 0; }
.box4 { width:1072px; height:836px; background:url(../images/box1.png) no-repeat 0 0; position: absolute; left: 50%; top: 50%; margin: -418px 0px 0px -536px; transform: scale(0.05); animation: popwing 1s ease-in-out forwards; }
.close {position: absolute;top: 13px;right: -30px; width: 40px; height: 30px; font-size:0; background:url(../images/close2.png) no-repeat center center; }
.box4 .close { background-image:url(../images/close1.png); right:-35px; top:26px; }
.close:hover { filter:brightness(1.2); }
.con, #accountlogin .tipbox, .login_form_class .tipbox, .selectgame .tipbox, .login_select .tipbox { padding:40px 70px }
.box4 .con { padding:0; }
.con.video { padding:0 20px }
.con h3, .tipbox h2 { text-align:center; font-size:26px; }
.form li { display:flex; align-items:center; justify-content:flex-start; margin:15px 0; }
.form li label { display:block; width:30%; text-align:right; font-size:16px; margin-right:4px; } 
.form li select, .form li input { width:50%; height:36px; line-height:36px; border:1px solid #2a476e; margin:0; padding:0 3px; }
.form li input.code { width:30%; }
.code_img { display:block; width:20%; }
.code_img img  { width:100%!important; }
.two_btns { display:flex; align-items:center; justify-content:center; margin-top:30px; }
.two_btns li { margin:0 5px; }
.two_btns a, .btn_tip { display:block; width:225px; height:60px; line-height:60px; background:url(../images/btn13.png) no-repeat center center; text-align:center; font-size:22px; color:#fff; margin:0 auto; }
.two_btns a:hover, .btn_tip:hover { filter:brightness(1.1); }
.accountmore { text-align:center; margin-top:10px; }
.accountmore a { color:#fff; margin:0 40px; }
.accountmore a:hover { text-decoration:underline; }
.msg_form_class .tip_con, #vote-confirm-box .tip_con { width: 80%; margin: 0 auto; height:240px; display:flex; align-items:center; justify-content:center; }
.common_msg { font-size:16px; }
.rule-cont { margin:20px auto; height:250px; overflow:auto; }
.rule-cont p { padding:3px 0; }
.login_select .btn_tip { width:180px; height:68px; margin:10px; border:1px solid #000; }
.login_select .tip_db { display:flex; align-items:center; justify-content:center; width:100%; margin: 0 auto; flex-wrap:wrap; }

.rank-record .rank-tabs, .rank-record .rank-cont { background:none; padding:0 10px 10px 0 }
.rank-record .rankbg { background-position:center -10px; }
.rank-record .rank-cont th { height:40px; line-height:40px; }
.rank-record .rank-cont td { line-height:32px; background: none; }
.rank-record .rank-cont td p.top1, .rank-record .rank-cont td p.top2, .rank-record .rank-cont td p.top3 { height:40px; }

.vote-num-hint { text-align:center; }
.vote-num-hint input { width:140px; height:32px; line-height:32px; border:1px solid #2a476e; text-align:center; color:#2a476e; margin-bottom:10px; border-radius:3px; }

.wing-content:after { content:""; display:block;  width:1072px; height:836px; background:url(../images/box1.png) no-repeat 0 0; position:absolute; left:0; top:0; }
.wing-pic { height:780px; position:absolute; right:30px; top:30px; overflow: hidden; }
.wing-pic img { display:block; height:100%; width:auto; margin-right:-100px; }
.wing-content .small-pic { position:absolute; left:200px; bottom:50px;  width:280px; height:280px; background-size:100% 100%; }
.wing-content .small-pic img { width:240px; height:240px; }
.wing-content .info { position:absolute; left:45px; top:100px; z-index:2; }
.wing-content .des { font-size:18px; width:80%; margin:0 auto; line-height:1.6 } 

/*进度条*/
.set-my-pack { text-align:center; padding:20px 0; }

.range { width:553px; padding:0 15px; background: url(../images/progress.png) no-repeat center 23px; margin:20px auto; }
.range-num {  font-weight:bold; position:absolute; width:100%; top:20px; color:#000; }
.range-num p { position: absolute; font-size:22px; top:-25px; }
.max-num { left:-10px; }
.min-num { right:-5px; }
.range-container{position:relative;width:100%;height:66px;display:flex;align-items:center}
.range-track{width:100%;height:6px;background-color:#e0e0e0;border-radius:3px;position:relative;  }
.range-tick{position:absolute;top:0;bottom:0;width:1px;background-color:#ccc;transform:translateX(-50%)}
.range-thumb{position:absolute; top: 16px; width:28px;height:28px; background:url(../images/dot2.png) no-repeat center center; cursor:pointer; margin-left:-14px; }
.range-thumb:active{filter: brightness(1.1); background-color: transparent!important;}

.range-labels{display:flex;justify-content:space-between;margin-top:12px; display: none;}
.range-label{font-size:14px;color:#666;width:20px;text-align:center;transform:translateX(-10px)}
.selected-value{ position: absolute; left: 50%; margin-left: -22px; bottom: -26px; font-size:16px; width: 45px; height: 25px; line-height: 25px; background: url(../images/btn12.png) no-repeat 0 0; text-align: center; color: #fff1b9}
.thumb-hint { color:#923604; width:50px; text-align:center; font-weight:bold; position:absolute; left:50%; margin-left:-25px; text-align:center; top:-30px; line-height:1; font-size:14px; }
/*.range-thumb[style="background-color: transparent; left: 0%;"] .thumb-hint { display:none; }*/




@keyframes move {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px); /* 箭头向下移动的距离 */
  }
}

@keyframes popwing {
  100% { transform:scale(1.0); }
}



body[data-lang="sp"] .tit1 { background-image:url(../images/sp/title1.png); }
body[data-lang="sp"] .tit2 { background-image:url(../images/sp/title2.png); }
body[data-lang="sp"] .tit3 { background-image:url(../images/sp/title3.png); }
body[data-lang="sp"] .tit4 { background-image:url(../images/sp/title4.png); }