.kv-video{position:absolute;top:0;left:0;width:100%;height:1080px; object-fit:cover;transition:opacity .5s ease;object-position: top; z-index: 1;}
.logo-list { position:relative; z-index:2; max-width:1920px; margin:0 auto; }
.slogan { bottom: 420px; }
.slogan img { display:none; } 
body[data-lang="sp"] .tit2 { height:66px; }

@media screen and (max-width: 1400px) {
	.page-nav { transform:scale(0.8); right:0; }
	body,html{ font-size: 1.1vw; }
	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:1.3vw; }
	.section .wrapper { width:90%; }
	.section .part { padding:2vw 0 7vw 0; }
	.section .part.sp { padding:2vw 0 5vw 0; }
	.sec1 .wrapper { height:56.25vw; }
	.logo {  top:1vw; width:16vw; }
	.login-content { right:0; top:2vw; }
	.slogan { width:70%; left:15%; bottom:10vw; }
	/*.slogan img { display:block; width:100%; }*/

	.sec1 { height:56.25vw; background-size:cover  }
	.sec2 { padding-bottom: 10vw; background-size:100% 100% }
	.sec2:before {top: -11.6vw; height: 11.6vw; background-size:100% 100%  }
	.sec3 { padding-top: 3vw; background-size:100% 100%; }
	.sec3:before { top: -8.8vw; height: 9vw; background-size:100% 100% }
	.title, body[data-lang="sp"] .tit2 { height:3.6vw; margin-bottom:3vw; }
	.tit1, .tit2, .tit3, .tit4 { background-size: auto 100%; }

	.rank-panel { width:80vw; height:45.5vw; padding:1.5vw 6vw; background-size:100% 100%; }
	.rank-tabs { padding: 1vw 1vw 0 1vw; }
	.rank-tabs a { height:3.8vw; line-height: 3.8vw; width:16vw; background-size:100% 100%; font-size:1.4vw; }
	.rank-cont { padding:1vw; }
	.rank-cont th { height:3vw; line-height:3vw; font-size:1.3vw }
	.rank-cont td { line-height:3vw; }
	.rank-cont td p.top1, .rank-cont td p.top2, .rank-cont td p.top3 { width:3vw; height:3vw; background-size:auto 90%; }
	.rank-cont td p { max-width:12vw; }
	.rank-cont td p.reward { width:3vw; height:3vw; background-size:auto 90%; }
	.guide-panel { width:80vw; height:45vw; background-size:100% 100%; }
	.guide-list { height:36vw; }
	.guide-list li { width: 30vw; top: 2vw; }
	.sub-title { width:30vw; height:8.8vw; background-size:100% 100%; font-size:1.4vw; }
	.guide-txt { width:20vw; height:16vw;  }
	.guide-txt * { font-size:1.2vw; }
	.guide-list li:nth-child(1) { left:-1vw; }
	.guide-list li:nth-child(2) { left:25.4vw; }
	.guide-list li:nth-child(3) { left:50.5vw; top:5vw; }
	.guide-list li:nth-child(2) .guide-txt { height:18vw; }
	.guide-list li:nth-child(3) .guide-txt { height:13vw; }

	.vote-tops li { width:25vw; height:33.2vw;  padding:5vw 0 0 0; }
	.vote-tops li.vote-top2, .vote-tops li.vote-top3 { background-size:100% 100%; }
	.vote-tops li.vote-top1 { width:32vw; height:35.8vw; margin:0 1vw; background-size:100% 100%; }
	.avatar { width:19vw; height:16.5vw; background-size:100% auto; }
	.vote-top2 .avatar, .vote-top3 .avatar { width:18vw; height:15vw; }
	.name { font-size:1.4vw; line-height:2.3vw; }
	.vote-top1 .name { font-size:1.6vw; line-height:2.6vw; }
	.vote-btn { width: 9vw; height: 2.8vw; line-height: 2.8vw; background-size:100% 100%; }
	.vote-top1 .vote-btn { width:10vw; height:3vw; line-height:3vw;  }
	.info { width:18vw; padding:0.5vw 0; font-size:1.2vw; }
	.vote-top1 .info { width:20vw; font-size:1.2vw; line-height:1.2; }
	.pack { left:16vw; top:5vw; }
	.vote-top1 .pack { left:21vw; top:5vw; }

	.points { transform:scale(0.8); left:-2vw; top:-3vw; }
	.vote-top2 .points, .vote-top3 .points { transform:scale(0.7); left:-6vw; top:-3vw; }

	.vote-rank { width:88vw; height:45.3vw; background-size:100% 100%; }
	.rank-cont th p {font-size:1.3vw; }
	.vote-rank .rank-cont td { line-height:3.3vw; }

	.appearance { margin:4vw auto 2vw; }
	.intro { width:28vw; height:32.3vw;  background-size: 100% 100%; padding:0.8vw 4vw 2vw 4vw; font-size:1.4vw; }
	.img { width:50vw; height:50vw; }
	.small-pic { right: -5vw; bottom: 1vw; width:18vw; height:18vw; background-size:100% 100%; }
	.small-pic img { width: 15vw; height:15vw; border-radius:15vw; }
	.img-tabs a { position: absolute; width:8vw; height:8vw; background-size: 100% 100%; font-size:1.3vw; padding: 0 1vw; }
	.img-tabs a:nth-child(1) { right:10vw; top:-1vw; }
	.img-tabs a:nth-child(2) {right: 3vw;top: 3.5vw;}
	.img-tabs a:nth-child(3) {right: -1.5vw;top: 9.5vw;}
	.img-tabs a:nth-child(4) {right: -3.5vw;top: 16.5vw;}
	.img-tabs a:nth-child(5) {right: -4vw;top: 24vw;}
	.img-tabs a:nth-child(6) {right: -2vw;top: 31vw;}
	.img-tabs a:nth-child(7) {right: 2vw;top: 37vw;}
	.img-tabs a:nth-child(8) {right: 8vw;top: 42vw;}


	.pic { width:50vw; height:50vw; background-size:100% 100% }
	.pic p { width: 44vw; height: 44vw; border-radius: 46vw; }
	.pic p img { display:block; width:100%; height:100%; }
	.appearance-title { line-height:4.8vw; font-size:2vw; }
	.more-btn { width:8vw; background-size:100% auto; font-size:1.6vw; padding-bottom:5vw; margin:0 auto 3vw auto; }


	.kv-video{left:0;width:100%; height:100%; margin-left: 0; }
	.slogan { bottom: 23vw; }
	.play-btn { width:6vw; height:6vw; background-size:100% 100%; }

	.rewards { height:58vw; background-size:auto 100%; width:90%; margin: 0 auto; }
	.rewards li { width:25vw; height:23vw; background-size:100% auto; }
	.rwd-img { height:18.5vw; }
	.rwd-img img { height:100%; width:auto; }
	.rwd-name { height:4.5vw; font-size:1.6vw; line-height: 1; padding: 1vw 0; }
	.particle-container { width:100%; margin-left:-50%; height:18vw; top:0; }
	.rule-btn a, .login-btn { width:14vw; height:4vw; line-height:4vw; font-size:2vw; background-size:100% 100%; }
	.box4 { height:83.6vh; width: 107.2vh; background-size:100% 100%; margin:-41.8vh 0 0 -53.6vh!important }
	.wing-pic { height:78vh; right:3vh; top:3vh; }
	.wing-content .small-pic { left:20vh; bottom:5vh; width:28vh; height:28vh; }
	.wing-content:after { height:83.6vh; width: 107.2vh; background-size:100% 100%; }
	.wing-content .small-pic img { width:23vh; height:23vh; }
	.wing-content .info { left:4.5vh; top:10vh; background-size:100% 100%; }
	.wing-content .des { font-size:2vh; line-height:1.2 }
	.wing-content .intro { width:32.2vh; height:37.1vh; padding:0.8vh 4.2vh 1vh 4.5vh; }
	.wing-content .appearance-title2 { height:4vh; line-height:4vh; background-size:100% 100%; font-size:2vw; }
	.wing-content .appearance-title { line-height:5.4vh; font-size:2.5vh; }

	.box3, .box2 { width:150vh; height:100vh; background-size:100% 100%; }
	.con { padding:4vh 7vh; }
	.box2 .con { padding:6vh 12vh; }
	.rule-cont p { font-size:1.6vw; }
	.rule-cont { margin:3vh auto; height:40vh; }
	.rank-record .rank-tabs, .rank-record .rank-cont { padding:0 1vh 1vh 0; }
	.rank-record .rank-cont td { line-height:5vh; background:#fff; }
	.rule-btn { position:relative; z-index:3; }

	.box1 { width:88vh; height:70vh; background-size:100% 100%; }
	.two_btns a, .btn_tip { width:28vh; height:8vh; background-size:100% 100%; line-height:8vh; font-size:1.8vw; }
	.msg_form_class .tip_con, #vote-confirm-box .tip_con { height:40vh; }

	.range { width:100%; background-size:100% auto; }
	.rankbg, .phase2 .rankbg { background:none; }
	.rank-cont th { background:#61a6db }
	.phase2 .rank-cont th { background:#7f9be2 }
}

@media screen and (max-width: 1200px) {
	.slogan { bottom: 24vw; }
	.page-nav { transform:scale(0.7); transform-origin:center right; right:2%; }
}
@media screen and (max-width: 1000px) {
	.logo-list a { width:9%; margin:0 2%; }
	.logo-list a img { display:block; width:100%; }
	.slogan { bottom: 25vw; }
	.page-nav { display: none!important; transform:scale(0.65); }
}
@media screen and (max-width: 800px) {
	.slogan { bottom: 27vw; }
	.page-nav { transform:scale(0.6); }
}
@media screen and (max-width: 700px) {
	.slogan { bottom: 29vw; }
	.page-nav { transform:scale(0.5); }
}
@media screen and (max-width: 600px) {
	.slogan { bottom: 31vw; }
	.page-nav { transform:scale(0.4); }
}