html,body{
    width: 100%;
    height: 100%;
}
body{
    padding: 0;
}
.content{
    width: 100%;
    height: 100%;
}
.content .indexcon{
    width: 100%;
    height: 100%;
    background:url("../img/indexBgc.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content .indexcon img{
    width: 9.7rem;
    padding-top: 10.4rem;
    padding-bottom: 1.5rem;
}
p{
    text-align: center;
}
.head{
    color: #fff;
}
.diy{
    font-size: 1.833rem;
    color: #fff;
    margin-bottom: 1rem;
}
.explain{
    color: #000;
    border-radius: 4px;
    background: rgba(255,255,255,.76);
}
.explain p{
    color: #545454;
}
.explain p:nth-child(1){
    padding-top: 2.583rem;
    margin-top:5.83rem;
    font-size: 1.25rem;
    font-weight: 700;
}
.explain p:nth-child(2){
    font-size: 1rem;
    text-align: left;
    line-height: 1.4rem;
    color: #545454;
}
.explain{
    margin-left:2.5rem;
    margin-right:2.5rem;
}
.explain p,.explain a{
    margin-bottom:2.5rem;
    margin-left:1.16rem;
    margin-right:1.16rem;
}
.explain a{
    display: inline-block;
    background-size: cover;
    border:0;
    outline: 0;
    width: 17.29rem;
    height: 3.04rem;
    border-radius: 6px;
    color: #fff;
    font-size: 1.27rem;
    text-align: center;
    line-height: 3.04rem;
    background: -webkit-linear-gradient(left, #0152d7, #0098f7);
    background: -o-linear-gradient(left, #0152d7, #0098f7);
    background: -moz-linear-gradient(left, #0152d7, #0098f7);
    background: -ms-linear-gradient(left, #0152d7, #0098f7);
    filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#0152d7,endColorStr=#0098f7); //ie5-9
    background: -webkit-gradient(linear, 0% 25%, 75% 100%, from(#0152d7), to(#0098f7));   //Safari4-5,chrome1-9
}
.hide{
    margin:0 auto;
    background: url('../img/show.png') no-repeat center center;
    background-size: cover;
    width: 12.66rem;
    height: 3.08rem;
}
@keyframes first
{
    from {margin: 0;}
    to {margin: 0 auto;}
}

@-moz-keyframes myfirst /* Firefox */
{
    from {margin: 0;}
    to {margin: 0 auto;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    from {margin: 0;}
    to {margin: 0 auto;}
}

@-o-keyframes myfirst /* Opera */
{
    from {margin: 0;}
    to {margin: 0 auto;}
}
.hide{
    animation: myfirst 1s;
    -moz-animation: myfirst 1s;	/* Firefox */
    -webkit-animation: myfirst 1s;	/* Safari 和 Chrome */
    -o-animation: myfirst 1s;	/* Opera */
}