@charset "gb2312";
* {margin:0;padding:0;border:0;-webkit-user-select:text}
a,img {-webkit-touch-callout:none;}
body,p,li,ul,div,span{margin: 0;padding: 0;}
img{border: none;pointer-events: none;}
body,html{height: 100%;margin:0 auto;font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;}
ul,li{list-style: none;}
a{text-decoration: none;}
.hidden{display: none !important;}

body{height: 100%;overflow: hidden;margin: 0 auto;max-width: 750px;}
.wrap{height: 100%;overflow: hidden;background: #fff;position: relative;}
.load{width: 100%;height: 100%;position: absolute;z-index: 500;overflow: hidden;background: url(../images/load_bg.jpg) center top / cover no-repeat;background-size: 100% auto;}
.percent{font-size: .28rem;text-align: center;padding-top: 80%;color: #666;}
.copy{width: 5.3rem;position: absolute;left: 50%;margin-left: -2.65rem;top: 18.89%;}
.author{width: 7rem;position: absolute;left: 50%;top: 88%;margin-left: -3.5rem;}
.flag{height: 2.45rem;width: 1.78rem;position: absolute;background: url(../images/flag.png);background-size: auto 100%;margin-left: -.89rem;top: 65.63%;left: 50%;-webkit-animation:flag 1s steps(1, start) infinite;animation:flag 1 steps(1, start) infinite;}

.speak{width: 100%;height: 100%;position: absolute;z-index: 400;background: url(../images/speak_bg.jpg) center top / cover no-repeat;background-size: 100% auto;display: none;}
.pro{width: 6.64rem;position: absolute;left: 50%;margin-left: -3.32rem;top: 18.52%;background-size: 100% 100%;}
.playBtn{background: url(../images/play_btn.png);width: 2.7rem;height: .8rem;background-size: 100% 100%;position: absolute;left: 50%;margin-left: -1.35rem;top: 85.7%;}
.girl{height: 5.05rem;width: 3.01rem;position: absolute;background: url(../images/girl.png);background-size: auto 100%;margin-left: -.1.505rem;top: 42.67%;left: 50%;-webkit-animation:flag 1s steps(1, start) infinite;animation:flag 1 steps(1, start) infinite;}
.speak p{position: absolute;left: .2rem;top: .8rem;}
.speak p img{margin-bottom: .1rem;display: block;opacity: 0;}
/*.speak.on p{animation: speak .8s ease-in forwards;-webkit-animation: speak .8s ease-in forwards;}*/
.speak.on p .p_1{animation: lineP .8s ease-in forwards;-webkit-animation: lineP .8s ease-in forwards;}
.speak.on p .p_2{animation: lineP .8s .2s ease-in forwards;-webkit-animation: lineP .8s .2s ease-in forwards;}
.speak.on p .p_3{animation: lineP .8s .4s ease-in forwards;-webkit-animation: lineP .8s .4s ease-in forwards;}
.speak.on p .p_4{animation: lineP .8s .6s ease-in forwards;-webkit-animation: lineP .8s .6s ease-in forwards;}
.speak.on p .p_5{animation: lineP .8s .8s ease-in forwards;-webkit-animation: lineP .8s .8s ease-in forwards;}

#canvas{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.col{position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: none;position: relative;}

.tips{position: absolute;z-index: 100;width: .16rem;left: 50%;margin-left: -.08rem;bottom: .1rem;height: 2rem;overflow: hidden;}
.line{border-left:1px dashed #c6e659;height: 2rem;width: 0px;margin: 0 auto;}
.triangle{width:0;height:0;border-left:.08rem solid transparent;border-right:.08rem solid transparent;border-bottom:.16rem solid #c6e659;position: absolute;bottom:.3rem;animation:tips 1.4s infinite linear;}

.col_list{width: 100%;height: 100%;background: #fff;font-size: .2rem;display: none;position: absolute;z-index: 200;left: 0;top: 0;overflow: hidden;overflow-y: auto;}
.col_list_box{position: relative;left: 0;top: 0;width: 100%;}
.col_list_box img{width: 7.5rem;height: auto;}

.col_list img{width: 7.5rem;height: 5rem;margin: 0 auto;display: block;}
.close{width: .8rem;height: .8rem;font-size: .3rem;position: absolute;top: .98rem;left: 5.88rem;z-index: 205;background: url(../images/close.png);background-size: 100% 100%;}

.col_list_box img{width: 7.5rem;height: auto;margin-bottom: 1.5%;}
.col_list_box .more{position: absolute;width: 1.3rem;height: .5rem;left: .73rem;top: 73%;}
.col_list_box .more a{display: block;height: 100%;}

.col_2 .col_list_box .more,.col_3 .col_list_box .more{top: 70%;}
.col_8 .col_list_box .more{top: 74.5%;}

.hearts{background: url(../images/heart.png);background-size: 100% 100%;width: 1.3rem;height: 1.27rem;margin: 0 auto;position: relative;}
.heart{background: url(../images/heart.png);background-size: 100% 100%;width: 1.3rem;height: 1.27rem;position: absolute;left: 0;top: 0;}
.num{font-size: .26rem;width: 3rem;margin-left: -.75rem;color: #f30;}
.vote{text-align: center;position: absolute;top: 75%;width: 1.3rem;left: 50%;margin-left: -.65rem;}
.heart.on{animation: heart 1s ease-in forwards;-webkit-animation: heart 1s ease-in forwards;}


.pc_bg{width: 100%;height: 100%;overflow: hidden;position: fixed;z-index: 10000;left: 0;top: 0;bottom: 0;right: 0;background: #000;display: none;}
.pc_bg .code{width: 230px;height: 230px;display: block;margin: 10% auto 30px;background: #fff;padding: 10px;}
.pc_bg:after{content:'为了更好的体验，请使用手机扫描二维码浏览';display:block;color:#fff;text-align:center;font-size:20px;}


@keyframes lineP {
	0% {
		opacity: 0;
		transform: translateY(1.5rem); 
	}
	100% {
		opacity: 1;
		transform: translateY(0rem); 
	}
}

@-webkit-keyframes lineP {
	0% {
		opacity: 0;
		-webkit-transform: translateY(1.5rem); 
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0rem); 
	}
}


@keyframes tips {
	0% {
		transform: translateY(0); 
	}
	100% {
		transform: translateY(-1rem); 
	}
}

@keyframes heart {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1); 
	}
	100% {
		opacity: 0;
		transform: translateY(-5rem) scale(2); 
	}
}


@keyframes speak {
	0% {
		opacity: 0;
		transform: translateY(-2rem); 
	}
	100% {
		opacity: 1;
		transform: translateY(0rem); 
	}
}

@-webkit-keyframes speak {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2rem); 
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0rem); 
	}
}

@-webkit-keyframes heart {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0) scale(1); 
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-5rem) scale(2); 
	}
}

@-webkit-keyframes flag {
  0% {background-position:0 0;}
  50% {background-position:100% 0;}
  100% {background-position:0 0;}
}
@keyframes flag {
  0% {background-position:0 0;}
  50% {background-position:100% 0;}
  100% {background-position:0 0;}
}