/* CSS Document */


.both{margin:0;padding:0; height:0px; overflow:hidden;clear:both;*display:inline;}


.youhui-wrap{max-width: 640px;min-width: 320px; margin-left: auto;margin-right: auto;margin-bottom: 10px; overflow: hidden; color:#000; position: relative; padding-top: 1%;}


.youhui-wrap .pp1{ top: 6%; color:#fff; left:4%; font-size: 24px; position: absolute;}


.youhui-wrap .pp2{ top: 28%; color:#fff; left:24%; font-size: 22px; position: absolute;padding: 2%; background: #959595; border-radius: 10px;width: 51%;}


.youhui-wrap .pp2 .sj{ position:absolute; width:4%;top: 18%; left:-3%; display:block;}


#times{ position: absolute; top: 22%; left:35%;}


#times2{ position: absolute; top: 46%; left:35%;}


.youhui-wrap .time{ font-size: 17px;}


.youhui-wrap .pp3{ top: 52%;}


.youhui-wrap .toux{ position: absolute; width:12%;top: 25%; left:6%;}


.youhui-wrap .toux2{ top: 50%;}


.youhui-wrap textarea{font-size:22px; width:71%; height:82px;position: absolute; top: 78%; left:4%; border:0;border:1px solid #ccc; border-radius: 5px; padding: 1% 1% 0 2%; }


.youhui-wrap button{ position: absolute; right: 20px; top: 77%; border:0;animation: bianda 3s .2s ease both infinite;


    -webkit-animation: bianda 3s .2s ease both infinite;


    -moz-animation: bianda 3s .2s ease both infinite;}


.youhui-wrap button img{width: 96px;}


.youhui-wrap a{ display:block; width:24%; height:15%;position: absolute; top: 1%; right: 2%;font-size: 24px; color:#fff; padding-top: 4%; box-sizing: border-box;}
.youhui-wrap a img{ width:23%; margin-right: 3%;display:inline-block;}

.jump{
  webkit-animation: jump 2.5s linear normal both infinite;
    -o-animation: jump 2.5s linear normal both infinite;
    animation: jump 2.5s linear normal both infinite;
}
@keyframes  jump{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(5px);
    }
    100%{
        transform: translateY(0);
    }
}@-moz-keyframes tada{
    0%{-moz-transform:scale(1);}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
    100%{-moz-transform:scale(1) rotate(0);}
   }
  @-webkit-keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
    100%{-webkit-transform:scale(1) rotate(0);}}
.doudun{
  webkit-animation: tada 1.5s linear normal both infinite;
    -o-animation: tada 1.5s linear normal both infinite;
    animation: tada 1.5s linear normal both infinite;
}
@media screen and (max-width: 639px) {
    .youhui-wrap textarea{ height:53px;font-size:14px;}
    .youhui-wrap a{ font-size: 17px;top: 0%;}
    .youhui-wrap .pp1{ top: 5%;font-size: 17px;}
    .youhui-wrap .pp2{ font-size: 15px;    top: 30%;}
    .youhui-wrap .pp3{  top: 53%;}
    .youhui-wrap .time{ font-size: 13px;left: 31%!important;}
    .youhui-wrap button{ right:10px;}
    .youhui-wrap button img{width: 58px;}
}
@media screen and (max-width: 375px) {
    .youhui-wrap textarea{ height:47px;font-size:12px;}
    .youhui-wrap .pp1{ font-size: 15px;}
    .youhui-wrap a{ font-size: 15px;}
    .youhui-wrap .pp2{ font-size: 13px;}
    .youhui-wrap button{ right:0;}
}
@media screen and (max-width: 320px) {
    .youhui-wrap textarea{ height:38px;font-size:12px;}
    .youhui-wrap .pp1{ font-size: 13px;}
    .youhui-wrap a{ font-size: 13px;top: 0%;}
    .youhui-wrap a img{vertical-align: middle;margin-top: -4px;}
    .youhui-wrap .pp2{ font-size: 12px;}


}