/*CssReset*/
*{box-sizing:border-box;}
body{margin:0;font-family:Helvetica;}
img{border:0;vertical-align:middle;}
html{font-size:100px}
ul,li{margin:0;padding:0;} ul>li{list-style:none;}
ol{    -webkit-padding-start:.15rem;}
a,a:visited{text-decoration:none;}
h1,h2,h3,h4,h5,h6,p,img{margin:0;padding:0;-webkit-margin-before:0;-webkit-margin-after:0;}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:110px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:120px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:150px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:200px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:225px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:235px}}
@media screen and (min-width:800px){html{font-size:250px}}

                                                                                                      
/*Less方法常用Begin*/
.transition (@Name:all,@Time:1s,@Type:ease,@Delay:0s) {
  transition: @Name @Time @Type @Delay;
  -moz-transition: @Name @Time @Type @Delay;
  -webkit-transition: @Name @Time @Type @Delay;
}

.translate(@Hor:0,@Ver:0){
    transform:translate(@Hor,@Ver);
    -moz-transform:translate(@Hor,@Ver);
    -webkit-transform:translate(@Hor,@Ver);
}
.skewtranslate(@Hors:0,@Vers:0,@Hort:0,@Vert:0){
    transform:skew(@Hors,@Vers) translate(@Hort,@Vert);
    -moz-transform:skew(@Hors,@Vers) translate(@Hort,@Vert);
    -webkit-transform:skew(@Hors,@Vers) translate(@Hort,@Vert);
    -ms-transform:skew(@Hors,@Vers) translate(@Hort,@Vert);
}
.rotatetranslate(@Value:0,@Hort:0,@Vert:0){
    transform:rotate(@Value) translate(@Hort,@Vert);
    -moz-transform:rotate(@Value) translate(@Hort,@Vert);
    -webkit-transform:rotate(@Value) translate(@Hort,@Vert);
}

.transform-origin(@Hor:1,@Ver:1){
    transform-origin:@Hor @Ver;
    -moz-transform-origin:@Hor @Ver;
    -webkit-transform-origin:@Hor @Ver;
}
.scale(@Hor:1,@Ver:1){
    transform:scale(@Hor,@Ver);
    -moz-transform:scale(@Hor,@Ver);
    -webkit-transform:scale(@Hor,@Ver);
}
.scaleskew(@Hors:0,@Vers:0,@Hort:0,@Vert:0){
    transform:scale(@Hors,@Vers) skew(@Hort,@Vert);
    -moz-transform:scale(@Hors,@Vers) skew(@Hort,@Vert);
    -webkit-transform:scale(@Hors,@Vers) skew(@Hort,@Vert);
}

.skew(@Hor:0,@Ver:0){
    transform:skew(@Hor,@Ver);
    -moz-transform:skew(@Hor,@Ver);
    -webkit-transform:skew(@Hor,@Ver);
}
.skewX(@Value:1){
    transform:skewX(@Value);
    -moz-transform:skewX(@Value);
    -webkit-transform:skewX(@Value);
}
.skewY(@Value:1){
    transform:skewY(@Value);
    -moz-transform:skewY(@Value);
    -webkit-transform:skewY(@Value);
}
.rotate(@Value:0){
    transform:rotate(@Value);
    -moz-transform:rotate(@Value);
    -webkit-transform:rotate(@Value);
}
.translate3d(@X:0px,@Y:0px,@Z:0px) {
    transform:translate3d(@X,@Y,@Z);
    -moz-transform:translate3d(@X,@Y,@Z);
    -webkit-transform:translate3d(@X,@Y,@Z);
}
.opacity(@opacity:1) {
  opacity: @opacity;
    -moz-opacity:@opacity;
    -webkit-opacity:@opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}
.scaletranslate3d(@Hor:1,@Ver:1,@X:0,@Y:0,@Z:0){
   transform: scale(@Hor,@Ver) translate3d(@X,@Y,@Z);
   -webkit-transform: scale(@Hor,@Ver) translate3d(@X,@Y,@Z);
   -moz-transform: scale(@Hor,@Ver) translate3d(@X,@Y,@Z);
}
.animation(@arg:wujia,@dur:1s,@ease:ease,@delay:0s,@count:1){
    animation:@arg @dur @ease @delay @count;
    -webkit-animation:@arg @dur @ease @delay @count;
    -moz-animation:@arg @dur @ease @delay @count;
    -o-animation:@arg @dur @ease @delay @count;
    -ms-animation:@arg @dur @ease @delay @count;
}

/*Less方法常用End*/


#footer{position:fixed;bottom:0; width:100%;height:.55rem;background:url(../Images/footer.jpg);z-index:999;}
.three{width:35px;height:2px;background-color:#fff;position:absolute;top:.25rem;left:.25rem;.transition(all,.8s);}
.three:before,.three:after{content:"";width:35px;height:2px;background-color:#fff;position:absolute;.transition(all,.8s);}
.three:before{margin-top:-10px;}
.three:after{margin-top:10px;}

.plus{width:.24rem;height:.04rem;position:absolute;top:0.3rem;right:0.3rem;margin-top:-0.02rem;margin-right:-0.12rem; background-color:#fff;.transition(all,.8s);z-index:999;}
.plus:before{content:"";width:.24rem;height:.03rem;.rotate(90deg);background-color:#fff;position:absolute;.transition(all,.8s);}
.footer2 .plus{.rotate(45deg);}

.plus1,.plus2,.plus3{width:.4rem;height:.4rem;top:0.32rem;right:0.3rem;margin-top:-0.2rem;margin-right:-0.2rem;position:absolute;
                     border-radius:100%;font-size:.16rem;display:none; background-color:#149BF5;box-shadow:0 0 .05rem #149BF5;.transition(all,.8s,ease-out);}
.plus1 a,.plus2 a,.plus3 a{width:.4rem;height:.4rem;display: inline-block;line-height:0.4rem;text-align:center;color:#fff;}
.plus2 a{.rotate(-10deg);.transform-origin(50%,50%);}
.plus3 a{.rotate(-45deg);.transform-origin(50%,50%);}

.footer2 .plus1{.translate(-0.5rem,-0.1rem);}
.footer2 .plus2{.rotatetranslate(10deg,-0.5rem,-0.5rem);.transform-origin(0.5rem,0.5rem);}
.footer2 .plus3{.rotatetranslate(45deg,-0.5rem,-0.5rem);.transform-origin(0.5rem,0.5em);}
.footer2 .plus1,.footer2 .plus2,.footer2 .plus3{}
 /* animation:mymove 4s cubic-bezier(1,1,0,0) infinite;*/
@keyframes mymove
{
from {.rotate(0deg);}
to {.rotate(360deg);}
}

.nav{position:fixed;background-color:#0B95F0;top:50%;width:2rem;height:3.4rem;left:50%;margin-left:-3rem;margin-top:-2rem; 
     border-radius:.05rem;.opacity(0);.transition();padding:0.2rem 0.2rem 0.2rem 0.2rem;text-align:center;overflow:hidden;}

.nav:before{
    content: "";
    position: absolute;
    width: 2rem;
    height: 3.4rem;
    top: 0;
    left: -2rem;
    overflow: hidden;
    background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    .skewX(-25deg);
    .transition(all,1s,ease,.8s);
    }

.foot .nav{.opacity(1);display:block;.translate(2rem);z-index:999;}
.foot .nav:before{.skewtranslate(-25deg,0,4rem);}

.nav img{width:100%;vertical-align:top;width:1.7rem;height:.6rem; text-align:center;margin:0 auto;}
.navFooter{position:absolute;left:0;bottom:0; width:2rem;height:.8rem;text-align:center;margin:0 auto;background-color:#27A3F5;
           border-bottom-left-radius:.05rem;border-bottom-right-radius:.05rem;font-size:.6rem;}
.navFooter img{width:1.5rem;margin-top:10px;}

.footer1 .nav{.opacity(.9);}
.footer1 .three{background-color: transparent !important;}
.footer1 .three:before{.rotate(30deg);.transform-origin(0,0);width:40px;}
.footer1 .three:after{.rotate(-30deg);.transform-origin(0,0);width:40px;}

.nav span{position:absolute;left:0.12rem; bottom:-0.11rem; border-top:.12rem solid; border-top-color:#fff; border-bottom-color:#cccccc; border-left:.12rem dotted transparent; border-right:.12rem dotted transparent;}
.navUl{width:100%;height:1.2rem; margin:-0.2rem 0rem .3rem 0rem;}
.navUl a{width:50%;height:0.4rem;color:#fff;font-size:.18rem;line-height:.4rem;float:left;}

#mask{width:100%;height:15rem;  background-color:#666;position:absolute;left:0;top:0;display:none;.opacity(0);.transition();}
.foot #mask{display:block;.opacity(.4);}