@charset "utf-8";
@media screen and (min-width: 1200px) and (max-width:1398px){
.pc{ display:block;}
.sm{ display:none;}
.main{width:1200px; margin:auto;}
.kv img{width:100%; /*height:380px;*/}
.play-area{ width:100%; height:549px; margin:auto;}
.play-bg{ width:1200px; height:549px; margin:auto;}

.select a{width:250px; height:250px; margin:1%;}
.select li{ text-align:center; display:inline-block; width:250px; margin:1%; font:bold 2.4rem/1.5 "微軟正黑體";}
.share-info h4{ width:60%;}
.share-info:before{position:absolute; left:-60px; top:15px;}
.share-info:after{position:absolute; right:-60px; top:15px;}

.people-view{ width:1172px; height:405px; position:absolute; left:15px; bottom:30px;}
.scroll2top:link, .scroll2top:visited { position:fixed;}
.linkshare a{ width:22%;  display:inline-block; margin:10px 1%; text-align:center;}
}

@media screen and (min-width: 800px) and (max-width:1199px){
.pc{ display:block;}
.sm{ display:none;}
.main{width:100%; margin:auto;}
.kv img{width:100%; /*height:380px;*/}
.play-area{ width:100%; height:434px; margin:auto;}
.play-bg{ width:950px; height:434px; margin:auto;}

.select a{width:210px; height:210px; margin:1%;}
.select li{ text-align:center; display:inline-block; width:210px; margin:1%; font:bold 2.4rem/1.5 "微軟正黑體";}
.share-info h4{ width:70%; font:bold 1.8rem/10rem "微軟正黑體"; /*padding-top:4rem;*/}
.share-info:before{position:absolute; left:-130px; top:15px;}
.share-info:after{position:absolute; right:-130px; top:15px;}

.people-view{ width:925px; height:345px; position:absolute; left:15px; bottom:30px;}
.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10,
.mp1,.mp2,.mp3,.mp4,.mp5,.mp6,.mp7,.mp8,.mp9,.mp10{ background-size:auto 95%; height:260px;}
.scroll2top:link, .scroll2top:visited { position:fixed;}
.linkshare a{ width:22%; height:80px; display:inline-block; margin:10px 1%; text-align:center;}
.linkshare a>img{ width:100%;}
}

@media screen and (min-width: 641px) and (max-width: 799px) {
.pc{ display:block;}
.sm{ display:none;}
.main{width:100%; margin:auto;}
.kv img{width: auto; height: 300px; left: 50%; margin-left: -250px;}
.play-area{ width:100%; height:320px; margin:auto;}
.play-bg{ width:100%; height:320px; margin:auto;}

.select a{width:150px; height:150px; margin:1%;}
.select li{ text-align:center; display:inline-block; width:150px; margin:1%; font:bold 1.8rem/1.5 "微軟正黑體";}
.share-info h4{ width:70%; font:bold 1.8rem/10rem "微軟正黑體"; padding:0 2rem;  }
.share-info:before{position:absolute; left:-180px; top:15px;}
.share-info:after{position:absolute; right:-180px; top:15px;}

.people-view{ width:98%; height:250px; position:absolute; left:10px; bottom:20px;}
.popup{padding:10px; width:90px; height:80px; font:bold 1.4rem/1.5 "微軟正黑體"; }
.set{width:110px; }
.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10,
.mp1,.mp2,.mp3,.mp4,.mp5,.mp6,.mp7,.mp8,.mp9,.mp10{ background-size:contain; height:170px;}
.scroll2top:link, .scroll2top:visited { position:fixed;}
.linkshare a{ width:48%; height:120px; display:inline-block; margin:10px 0%; text-align:center;}

}

@media screen and (min-width: 481px) and (max-width: 640px) {
.pc{ display:none;}
.sm{ display:block;}
.main{width:100%; margin:auto;}
.kv img{width:100%; /*height:180px;*/}
.play-area{ width:100%; height:320px; margin:auto;}
.play-bg{ width:100%; height:320px; margin:auto; background-size:auto 100%; background-position:-30px top;}
.select div{ width:100%; margin:auto; text-align:center;}
.select a{width:200px; height:200px; margin:1%;}
.select li{ text-align:center; display:inline-block; width:90%; margin:1%; font:bold 1.8rem/1.5 "微軟正黑體";}
.intro h3,.rule h3{ width:100%; height:105px; font:bold 3.6rem/85px "微軟正黑體"; background-position:center; background-size:auto 100%;}
.share-info{ overflow:visible;}
.share-info h4{ width:80%; font:bold 1.5rem/10rem "微軟正黑體"; padding:0 2rem;}
.share-info:before{position:absolute; left:-50px; top:-40px; height:60px; background-size:contain;}
.share-info:after{position:absolute; right:-160px; top:90px; height:60px; background-size:contain;}
.introP p{font:bold 1.5rem/3rem "微軟正黑體"; text-align:center; width:70%; margin:90px auto 80px auto;}
.rule ol{margin:30px auto 30px auto;}
.rule li{font:bold 1.5rem/3rem "微軟正黑體"; text-indent:12px; background-size:auto 40px;}
.people-view{ width:100%; height:250px; position:absolute; left:0; bottom:20px;}
.popup{padding:10px; width:80px; height:80px; font:bold 1.4rem/1.5 "微軟正黑體"; }
.set{width:80px; }
.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10,
.mp1,.mp2,.mp3,.mp4,.mp5,.mp6,.mp7,.mp8,.mp9,.mp10{ background-size:contain; height:170px;}

.btn a{ width:90%;}
.scroll2top:link, .scroll2top:visited { position:absolute;}
.linkshare a{ width:100%; height:auto; display:inline-block; margin:10px 0%; text-align:center;}
}

@media screen and (min-width: 321px) and (max-width: 480px) {
.pc{ display:none;}
.sm{ display:block;}
.main{width:100%; margin:auto;}
.kv img{width:100%; /*height:160px;*/}
.play-area{ width:100%; height:320px; margin:auto;}
.play-bg{ width:100%; height:320px; margin:auto; background-size:auto 100%; background-position:-140px top;}
.select{ padding:0 0 3rem 0;}
.select div{ width:100%; margin:auto; text-align:center;}
.select a{width:120px; height:120px; margin:1%;}
.select li{ text-align:center; width:90%; margin:5%; clear:both; font:bold 1.5rem/1.2 "微軟正黑體";}
.introP h3,.rule h3{ width:100%; height:105px; font:bold 3.6rem/85px "微軟正黑體"; background-position:center; background-size:auto 100%;}
.introP p{font:bold 1.5rem/3rem "微軟正黑體"; text-align:left; width:70%; margin:30px auto 30px auto;}
.rule ol{margin:30px auto 30px auto;}
.rule li{font:bold 1.5rem/3rem "微軟正黑體"; text-indent:12px; background-size:auto 40px;}
.share-info{ overflow:visible;}
.share-info h4{ width:70%; font:bold 1.5rem/4.5rem "微軟正黑體"; padding:0 2rem;}
.share-info:before{position:absolute; left:-30px; top:-40px; height:60px; background-size:contain;}
.share-info:after{position:absolute; right:-130px; top:90px; height:60px; background-size:contain;}

.people-view{ width:100%; height:250px; position:absolute; left:0; bottom:20px;}
.popup{padding:10px; width:80px; height:80px; font:bold 1.2rem/1.5 "微軟正黑體"; }
.set{width:80px; }
.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10,
.mp1,.mp2,.mp3,.mp4,.mp5,.mp6,.mp7,.mp8,.mp9,.mp10{ background-size:contain; height:170px;}

.btn a{ width:90%;}
.scroll2top:link, .scroll2top:visited {height:50px; width:50px; position:absolute;}
.linkshare a{ width:100%; height:auto; margin:10px auto; text-align:center;}

}

@media screen and (max-width: 320px) {
.pc{ display:none;}
.sm{ display:block;}
.main{width:100%; margin:auto;}
.kv img{width:100%; height:160px;}
.play-area{ width:100%; height:300px; margin:auto;}
.play-bg{ width:100%; height:300px; margin:auto; background-size:auto 100%; background-position:-180px top;}
.select{ padding:0 0 3rem 0;}
.select div{ width:100%; margin:auto; text-align:center;}
.select a{width:120px; height:120px; margin:1%;}
.select li{ text-align:center; width:90%; margin:5%; clear:both; font:bold 1.5rem/1.2 "微軟正黑體";}
.introP h3,.rule h3{ width:100%; height:105px; font:bold 3.6rem/85px "微軟正黑體"; background-position:center; background-size:auto 100%;}
.introP p{font:bold 1.5rem/3rem "微軟正黑體"; text-align:left; width:70%; margin:30px auto 30px auto;}
.rule ol{margin:30px auto 18px auto; }
.rule li{font:bold 1.5rem/3rem "微軟正黑體"; text-indent:12px; background-size:auto 40px;}
.share-info{ overflow:visible;}
.share-info h4{ width:70%; font:bold 1.5rem/4.5rem "微軟正黑體"; }
.share-info:before{position:absolute; left:-30px; top:-40px; height:60px; background-size:contain;}
.share-info:after{position:absolute; right:-130px; top:90px; height:60px; background-size:contain;}


.people-view{ width:100%; height:250px; position:absolute; left:0; bottom:20px;}
.popup{padding:10px; width:80px; height:80px; font:bold 1.2rem/1.5 "微軟正黑體"; }
.set{width:80px; }
.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10,
.mp1,.mp2,.mp3,.mp4,.mp5,.mp6,.mp7,.mp8,.mp9,.mp10{ background-size:contain; height:170px;}

.btn a{ width:90%;}
.scroll2top:link, .scroll2top:visited {height:30px; width:30px; position:absolute;}

.linkshare a{ width:100%; height:120px; display:inline-block; margin:10px 0%;}
}