/*CssReset*/
*{box-sizing:border-box;}
body{margin:0;}
img{border:0;vertical-align:middle;}
html{font-size:100px}
ul,li{margin:0;padding:0;}li{list-style:none;}
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}}


/*Css通用样式库（张旭鑫模板基础）*/
.fl{float:left;}.fr{float:right;}.cb{clear:both;}.ma{margin-left:auto;margin-right:auto;}
.tl{text-align:left;}.tc{text-align:center;}.tr{text-align:right;}
.dn{display:none;}.db{display:block;}.di{display:inline;}.dib{display:inline-block;}.dtc{display:table-cell;}
.fs12{font-size:12px;}.fs14{font-size:14px;}.fs16{font-size:16px;}.fs18{font-size:18px;}.fs20{font-size:20px;}
.fb{font-weight:bold;}.fn{font-weight:normal;}
.pabs{position:absolute;}.prel{position:relative;}.pfix{position:fixed;}
.cursor{cursor:pointer;}
.black{color:#000;}.c3{color:#333;}.c6{color:#666;}.c9{color:#999;}.cc{color:#ccc;}.white{color:#fff;}.red{color:#f00;}
.ofh{overflow:hidden;}.ha{height:auto;}
.bbc{border-bottom:1px solid #ccc;}
.bbd{border-bottom:1px solid #ddd;}
.bgwhite{background-color:#fff;}
.bgblack{background-color:#000;}

.clearfix{overflow:auto;_height:1%}
                                                                                                     
/*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*/


.page1, .page2, .page3, .page4 {overflow:hidden;}

.page1{background:url(../Images/P1Bg.jpg) no-repeat top center;background-size:100% 100%;}
.P1Logo{position:absolute;top:.1rem;left:.1rem;width:1.6rem;overflow:hidden;text-align:center;font-size:.25rem;}
.P1Logo1{width:.5rem;}
.P1Logo2{width:1.4rem;}
.P1T1{width:1.8rem;font-size:.20rem;position:absolute;top:25%;left:50%;margin-left:-0.9rem;}
.P1T2{width:2.8rem;font-size:.20rem;position:absolute;top:30%;left:50%;margin-left:-1.4rem;}
.P1T1 img{width:1.8rem;}
.P1T2 img{width:2.8rem;}

.P1D{position:absolute;width:100%;height:1.5rem;overflow:hidden;top:45%;}
.P1D1{width:1rem;height:1rem;.transition();.rotate(45deg); position:absolute;top:.3rem;left:.3rem;
      display:inline-block;}
.P1D11{width:1rem;height:1rem;.rotate(-45deg); font-size:.14rem;font-weight:bold;text-align:center;
       display:table-cell;vertical-align:middle;.transition(all,1s,ease,.5s);.animation(P1D,1s);
}
@keyframes P1D
{
    0% {.rotate(-45deg);}
    100% {.rotate(315deg);}
}

.active .P1D11{.rotate(315deg);}
.active .P1D21{.rotate(315deg);}
.active .P1D31{.rotate(315deg);}

.P1L{width:1rem;height:0.01rem;background-color:#333;margin-top:.05rem; margin-bottom:.05rem; }
.P1L span{width:.04rem;height:.04rem;border-radius:100%;background-color:#333;float:left;margin-left:.17rem;
          margin-top:-0.01rem;}
.P1L span:nth-child(1){.animation(changeColor,4s,cubic-bezier(1,1,0,0),0s,infinite); }
.P1L span:nth-child(2){.animation(changeColor,4s,cubic-bezier(1,1,0,0),1s,infinite);}
.P1L span:nth-child(3){.animation(changeColor,4s,cubic-bezier(1,1,0,0),2s,infinite);}
.P1L span:nth-child(4){.animation(changeColor,4s,cubic-bezier(1,1,0,0),3s,infinite);}

@keyframes changeColor
{
0% {background-color:#fff;}
50% {background-color:#000;}
100% {background-color:#fff;}
}

.P1D11>span{display:inline-block;font-size:.14rem;color:#333;}

.P1D2{width:.5rem;height:.5rem;.rotate(45deg);position:absolute;left:50%;margin-left:-0.25rem;top:.1rem;color:#fff;}
.P1D21{width:.5rem;height:.5rem;.rotate(-45deg);text-align:center; font-size:.1rem;display:table-cell;vertical-align:middle;
       .transition(all,1s,ease,.5s);.animation(P1D,1s,ease,.3s);}
.P1D21 span{display:inline-block;font-size:.1rem;}

.P1D3{width:1rem;height:1rem;.rotate(45deg);position:absolute;top:.3rem;right:.3rem;display:inline-block;}
.P1D31{width:1rem;height:1rem;.rotate(-45deg);text-align:center; font-size:.18rem;display:table-cell;vertical-align:middle;
       .transition(all,1s,ease,.5s);.animation(P1D,1s,ease,.6s);}
.P1D31 span{display:inline-block;font-size:.18rem;color:#fff;}

.P1Bc1,.P1Bc2,.P1Bc3{.opacity(.8);}
.P1Bc1{background-color:#fff;}
.P1Bc2{background-color:#999;}
.P1Bc3{background-color:#149BF5;}

.page2{background: url(../Images/P2Bg.jpg) no-repeat top center;background-size:100% 100%;font-size:0.16rem;}
.page2Con{width:2.6rem;height:4rem;position:absolute;left:50%;top:50%;margin-left:-1.3rem;margin-top:-1.7rem;color:#fff;}
.p20{width:1.5rem;height:.7rem;border-radius:.12rem;padding:.1rem;position:absolute;.opacity(1);}
.p20 span{display:inline-block;font-size:.19rem;margin-top:0.05rem;line-height:.25rem;font-weight:bold;}
.p200{width:.5rem;height:.5rem;display:inline-block;}
.p200 h1{font-size:.4rem;line-height: .4rem;}
.p200 h5{font-size:.1rem;}

.p21 .p200{float:left;}
.p22 .p200{float:right;}
.p23 .p200{float:left;}
.p24 .p200{float:right;}

.p21 span{color:#0F4B74;}
.p22 span{color:#2A93DD;}
.p23 span{color:#0F4B74;}
.p24 span{color:#2A93DD;}


.p21{.skew(0deg,-25deg);.opacity(1);.transform-origin(100%,0); background-color:#1D97E8;top:0rem;right:0rem;z-index:40;box-shadow:0 0 .05rem #1D97E8;}
.p22{.skew(0deg,25deg);.opacity(1);.transform-origin(0,0); background-color:#60666A;top:.7rem;left:0rem; z-index:30;box-shadow:0 0 .05rem #60666A;}
.p23{.skew(0deg,-25deg);.opacity(1);.transform-origin(100%,0); background-color:#1D97E8;top:1.4rem;right:0rem;z-index:20;box-shadow:0 0 .05rem #1D97E8;}
.p24{.skew(0deg,25deg);.opacity(1);.transform-origin(0,0); background-color:#60666A;top:2.1rem;left:0rem;z-index:10;box-shadow:0 0 .05rem #60666A;}


.page3{background: url(../Images/P3Bg.jpg) no-repeat top center;background-size:100% 100%;font-size:0.16rem;}
.p3Title1{width:1.2rem;.transition(all,1s,ease-in,.4s); height:.12rem;.scaleskew(0,1,-45deg,0deg);background-color:#149BF5;position:absolute;left:.2rem;top:.15rem;}
.active .p3Title1{.scaleskew(1,1,-45deg,0deg);}

.p3Title2{position:absolute;width:1.8rem;height:.25rem; top:.4rem;left:.4rem;.opacity(0);background:url(../Images/P3Title.png) no-repeat;background-size:100% 100%;
          .transition(all,1s,ease-in,.4s);.scale(1.5,1.5);}
.active .p3Title2{.opacity(1);.scale(1,1);}

.p3Title3{width:1.8rem;height:.03rem;position:absolute;right:0;top:.8rem;background-color:#149BF5;.transition(all,1s,ease-in,.4s);.scale(0,1);}
.active .p3Title3{.scale(1,1);}

.p3Img{width:3rem;height:1.2rem;margin:0 auto;margin-top:0.15rem;position:relative;}
.p3Img img{width:2rem;height:1.2rem;}
.p3ImgD{width:0.9rem;color:#fff;height:.8rem;position:absolute;right:0;top:0.2rem;font-size:0.12rem;}
.p3ImgD p{}
.p3ImgD span{position:absolute;bottom:0.1rem;}

.p3Img1{width:2.8rem;height:1.2rem;overflow:hidden; position:absolute;left:50%;margin-left:-1.4rem;top:1rem;background:url(../Images/P3Img1.png) no-repeat top center;
        background-size:100% 100%;-webkit-mask-image:url(../Images/P3ImgMask1.png);-webkit-mask-size:100% 100%;}
.p3Img1 img{}

.p3Img2{width:2.8rem;height:1.2rem;overflow:hidden; position:absolute;left:50%;margin-left:-1.4rem;top:2.3rem;}
.p3Img2 div{width:.9rem;margin-right:.05rem;background-color:#666;height:1.2rem;float:left;background:url(../Images/P3Img22.png);}
.p3Img2 div:last-child{margin-right:0rem;}

.p3Img21{-webkit-mask-image:url(../Images/P3Img21Mask.png);-webkit-mask-size:100% 100%;}
.p3jiao{content:"";position:absolute;border-top: .3rem solid #149BF5;border-right: .3rem solid transparent;}
.p3Img23{-webkit-mask-image:url(../Images/P3Img23Mask.png);-webkit-mask-size:100% 100%;}

.p3Img3{width:2.8rem;height:1.2rem;overflow:hidden; position:absolute;left:50%;margin-left:-1.4rem;top:3.6rem;}

.page4{background: url(../Images/P4Bg.jpg) no-repeat top center;background-size:100% 100%;font-size:0.16rem;}

.P4Title1{width:1.4rem;height:.8rem; overflow:hidden;position:absolute;top:.2rem;left:.2rem;
          background: url(../Images/P4Title1.png) no-repeat top center;background-size:100%;z-index:999;
          .transition(all,1.7s,ease,.4s);.opacity(0);}

.P4Title2{top:-3rem;left:.4rem;background: url(../Images/P4Title2.png) no-repeat top center;.transition(all,.7s,ease-in,.3s);}
.P4Title3{top:-3rem;left:1.3rem;background: url(../Images/P4Title3.png) no-repeat top center;.transition(all,.7s,ease-in,.8s);}
.P4Title4{top:-3rem;left:2.2rem;background: url(../Images/P4Title4.png) no-repeat top center;.transition(all,.7s,ease-in,1.3s);}
.P4Title2,.P4Title3,.P4Title4{width:.7rem;height:2.8rem;position:absolute;.opacity(0);background-size:100% 100%;z-index:111;}

.active .P4Title1,.active .P4Title2,.active .P4Title3,.active .P4Title4{.opacity(1);}
.active .P4Title1{.opacity(1);}
.active .P4Title2{.translate(0,2.35rem);}
.active .P4Title3{.translate(0,2.75rem);}
.active .P4Title4{.translate(0,2rem);}

.P4Title22,.P4Title33,.P4Title44{position:absolute;color:#fff;font-size:.12rem;.opacity(0);.scale(2,2);}
.P4Title22{top:2.2rem;left:.25rem;.transition(all,.5s,ease,1.4s);}
.P4Title33{top:2.6rem;left:1.15rem;.transition(all,.5s,ease,1.8s);}
.P4Title44{top:1.9rem;left:2.2rem;.transition(all,.5s,ease,2.2s);}

.active .P4Title22,.active .P4Title33,.active .P4Title44{.opacity(1);.scale(1,1);}

.P4Word{position:absolute;top:3rem;left:50%;margin-left:-1.5rem;color:white;font-size:.14rem;}
.P4Button{position:absolute;top:3.5rem;left:50%;margin-left:-1rem;width:1.8rem;height:.4rem;
          border:.01rem solid #149BF5;color:#149BF5;text-align:center;line-height:.4rem;font-size:.18rem;
          overflow:hidden;
}

.P4Button:before{
    content:"";
    width:3.6rem;height:.4rem;position:absolute;left:-1.8rem;
    color: -moz-linear-gradient(left,rgba(255,255,255,0)50%,rgba(255,255,255,.1)0,rgba(255,255,255,0)100%);
    background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.1)50%,rgba(255,155,255,0)100%);
    .animation(buttonColor,5s,ease,0s,infinite);
}
@keyframes buttonColor
{
    0% {
        left:-1.8rem;
    }
    50%{
        left:.9rem;
    }
    100% {
        left:-1.8rem;
    }
}

.page5{background: url(../Images/P5Bg.jpg) no-repeat top center;background-size:100% 100%;font-size:0.16rem;}
.P5Img1{position:absolute;top:.2rem;left:.2rem;width:1.5rem;height:.8rem;background:url(../Images/P5Img1.png) no-repeat top center;
        background-size:100%;}
.P5Img2{position:absolute;top:.2rem;left:.85rem;width:.6rem;height:.8rem;background:url(../Images/P5Img2.png) no-repeat top center;
        background-size:100%;}

.P5Con{position:absolute;top:.8rem;width:100%;height:auto;overflow:hidden;font-size:.14rem;}
.P5Con div{width:100%;height:.53rem;line-height:0.35rem;overflow:hidden;color:#fff;}
.P5Con1{padding:.1rem .6rem .1rem .55rem;background:url(../Images/P502.png);background-size:100% 100%;}
.P5Con2{padding:.1rem .9rem .1rem .55rem;background:url(../Images/P503.png);background-size:100% 100%;}
.P5Con3{padding:.1rem .5rem .1rem 1.1rem;background:url(../Images/P504.png);background-size:100% 100%;}
.P5Con4{padding:.1rem .5rem .1rem 1.1rem;background:url(../Images/P505.png);background-size:100% 100%;}
.P5Con5{padding:.1rem .2rem .1rem .55rem;background:url(../Images/P506.png);background-size:100% 100%;}
.P5Con6{padding:.1rem .9rem .1rem .55rem;background:url(../Images/P507.png);background-size:100% 100%;}
.P5Con7{padding:.1rem .9rem .1rem .55rem;background:url(../Images/P508.png);background-size:100% 100%;}