article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;font-family:'Microsoft YaHei';-ms-touch-action:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video{display:inline-block}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ol,ul{list-style:none}
ol,ul,li,dl,dt,dd{ display: block;}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:after,q:before{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
.clearfix:after{clear:both;content:"\20";display:block;height:0;visibility:hidden}
.clearfix{zoom:1}
input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit; border:none; outline:none; 
-webkit-tap-highlight-color: rgba(0,0,0,0);  
-webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */  
 }
a,button,div,input{outline:0;text-decoration:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);  
-webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */  
}
::-moz-focus-inner{border:0}
body{ background: #dff8f8; }
.snow{position:absolute;top:0;color:#fff;}

/*startdom*/
.lf{ float: left;}
.rt{ float: right;}
.f20{ font-size: 20px;}
.f16{ font-size: 16px;}
.h15{ height: 15px;}
.h10{ height: 10px;}
.h5{ height: 5px;}
.pos{ position: absolute;}
.mb18{ margin-bottom: 18px;}
.btn{ position: relative; display: block;}
.none{ display: none;}

.main{ width:640px; margin: 0px auto; position: relative;  }

.page{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
    width: 640px; overflow: hidden; left: 50%; margin-left: -320px; 
}

.part1{ background: url(../images/bg01.jpg) no-repeat top center; background-size: 640px auto; }
#loding { width: 197px; height:222px; background: url(../images/startbg.png) no-repeat; background-size: 197px auto; position: absolute; top: 380px; left:227px;  }
#loding span{ width: 160px; height: 118px; display: block; background: url(../images/start.gif) no-repeat; background-size: 160px auto; position: absolute; top: 50px; left:20px; font-size: 38px; line-height: 118px; text-align: center; color: #fff; font-family: "宋体"  }
#nusic{ width: 68px; height: 68px;  background: url(../images/music.png) no-repeat center; background-size: 68px auto;  position: absolute; top: 35px; right: 30px; z-index: 99;  }
#audio{ opacity: 0; display: none;}

.title .tt{ display: block; position: absolute; display: none; }
.title .tt img{ width: 100%;}
.title .tt.t1{ width:88px; top: 0px; }
.title .tt.t2{ width:62px; top: 66px; }
.title .tt.t3{ width:45px; top: 107px; left: 28px; }
.title .tt.t4{ width:70px;  top: 139px; }
.title .tt.t5{ width:107px;  top: 50px; left: 75px; }
.title .tt.t6{ width:56px;  top: 118px; left: 88px; }
.title .tt.t10{ width:56px;  top: 123px; left: 88px; }
.title .tt.t7{ width:82px;  top:148px; left: 84px; }
.title .tt.t8{ width:99px;  top:150px; left: 84px; }
.title .tt.t9{ width:99px;  top:170px; left: 84px; }



.part2{ background: url(../images/bg02.jpg) no-repeat top center; background-size: 640px auto; }
.part2 .titlebox{ width: 290px; height: 365px; position: absolute; top: 330px; left: 170px;}
.part2 .titlebox .tt{ width: 70px; height: 405px; position: absolute; background: url(../images/title01.png) no-repeat center; background-size: 277px auto; display: none;  }
.part2 .titlebox .tt.t1{  top: 0px; left: 5px; background-position:0px 0px;  }
.part2 .titlebox .tt.t2{  top: 0px; left: 80px; background-position:-70px 0px;  }
.part2 .titlebox .tt.t3{  top: 0px; left:152px; background-position:-147px 0px;  }
.part2 .titlebox .tt.t4{  top: 0px; left: 226px; background-position:-217px 0px;  }

.part3{ background: url(../images/bg03.jpg) no-repeat top center; background-size: 640px auto; }
.part3 .title{ width: 184px; height:214px;  /* background: url(../images/title02.png) no-repeat center; */ background-size: 184px auto; top: 74px; left: 50%; margin-left: -92px;  }
.part3 .pp{ display: block; display: none;  width: 100px; height: 180px;  background: url(../images/ics.png) no-repeat; background-size: 640px auto; top: 206px; left: 66px;  background-position: 0px 0px;  }
.part3 .fz{ display: block; display: none;  width: 450px; height: 220px;  background: url(../images/fengzhen.png) no-repeat; background-size:450px auto; top: 40px; left: 94px;  background-position: 0px 0px;  }

.part4{ background: url(../images/bg04.jpg) no-repeat top center; background-size: 640px auto; }
.part4 .title{ width: 183px; height:246px;  /* background: url(../images/title03.png) no-repeat center;*/  background-size: 183px auto; top: 74px; left: 50%; margin-left: -92px;  }
.part4 .yz{ display: block;  width: 26px; height: 17px;  background: url(../images/ics.png) no-repeat; background-size:640px auto; top: 17px; left: 138px;  background-position:-124px 0px ;  }
.part4 .yz2{ display: block;  width:195px; height: 60px;  background: url(../images/ics.png) no-repeat; background-size:640px auto; top: 95px; left: 425px;  background-position:-177px 0px ;  }

.part5{ background: url(../images/bg05.jpg) no-repeat top center; background-size: 640px auto; }
.part5 .title{ width: 183px; height:246px;   /*background: url(../images/title04.png) no-repeat center;*/  background-size: 183px auto; top: 74px; left: 50%; margin-left: -92px; z-index: 3;  }
.part5 .xc{ display: block;  width: 283px; height: 141px;  background: url(../images/ics.png) no-repeat; background-size:640px auto; top: 300px; left: 0px;  background-position: 0px -212px;  }

.part6{ background: url(../images/bg06.jpg) no-repeat top center; background-size: 640px auto;  }
.part6 .title{ width: 183px; height:246px;  /* background: url(../images/title05.png) no-repeat center;*/  background-size: 183px auto; top: 74px; left: 50%; margin-left: -92px;  z-index: 3;  }
.part6 .sy,.part6 .yz{
    background:url(../images/ics.png) no-repeat; background-size: 640px auto;   z-index: 2;
}
.part6 .sy { width: 195px; height: 265px; background-position: -450px  0px;  left: -20px; top: 0px; }
.part6 .yz { width: 155px; height: 150px; background-position: -485px  -283px;  left: 470px; top: 190px; }

.part7{ background: url(../images/bg07.jpg) no-repeat top center; background-size: 640px auto; }
.part7 .bkbg{ width:615px; height: 582px; background:url(../images/bkbg.png) no-repeat; background-size: 615px auto; top: 230px; left: 10px; }
.part7 .bk{ width: 118px; height: 532px;  z-index: 2; background:url(../images/bk01.png) no-repeat; background-size: 211px auto; top: 230px; left: 250px; }
.part7 .bk .btn{ display: block; position: absolute; width: 53px; height: 138px; background:url(../images/bk01.png) no-repeat; background-size: 211px auto; background-position: -156px -348px; bottom: 0px; right: -60px;}
.part7 .bkhb{  width: 487px; height:424px; z-index: 1; background:url(../images/bk03.png) no-repeat; background-size: 486px auto; background-position: right  0px; top: 283px; left: 132px;  }

.part8{ background: url(../images/bg09.jpg) no-repeat top center; background-size: 640px auto; }

.part9{ background:#fcf4e2; background-size: 640px auto; }
.part9 .titlebox{ width:140px; height: 365px; position: absolute; top: 330px; left: 50%; margin-left: -70px;}
.part9 .titlebox .tt{ width: 40px; height: 405px; position: absolute; background: url(../images/title06.png) no-repeat center; background-size: 99px auto; display: none;  }
.part9 .titlebox .tt.t1{  top: 0px; left: 5px; background-position:0px 0px;  }
.part9 .titlebox .tt.t2{  top: 0px; left: 46px; background-position:-40px 0px; width: 60px;  }


.part10{ background: url(../images/bg08.jpg) no-repeat top center; background-size: 640px auto; }
.part10 .logo{ width: 371px; height: 382px; background: url(../images/logo.png) no-repeat; background-size: 371px auto;  top: 316px; left: 50%; margin-left:-185.5px;  display: none;  }
.part10 .pp{ display: block; position: absolute; display: none; }
.part10 .pp img{ width: 100%;}
.part10 .pp.p1{ left: 42px; top: 6px; width:258px; }
.part10 .pp.p2{ left: 430px; top:233px; width:222px;}
.part10 .pp.p3{ left:352px; top: 602px; width:288px;}
.part10 .pp.p4{ left: 24px; top: 758px; width:329px;}

.part11{ background: url(../images/bg10.jpg) no-repeat top center; background-size: 640px auto; }
.part11 .logo{ width:255px; height: 275px; background: url(../images/ldy.png) no-repeat; background-size:793px auto; background-position: -488px 0px; top: 35px; left: 50%; margin-left: -127.5px; }
.part11 .title{ width:485px; height: 147px; background: url(../images/ldy.png) no-repeat; background-size:793px auto; background-position: -0px 0px; top: 320px; left: 50%; margin-left: -242.5px; }
.part11 .formbox{ width: 595px; height: 290px; display: table; display: none; background:rgba(136,224,236,0.5); border-radius: 30px; top: 500px; left: 50%; margin-left: -297.5px; }
.part11 .formbox .input:nth-child(1){
    margin-top: 32px;
}
.part11 .formbox .input{ height: 55px;  margin:0px 28px; margin-bottom: 30px; position: relative;}
.part11 .formbox .input span{ font-size: 25px; color: #003a5f; line-height: 55px; }
.part11 .formbox .input .text,
.part11 .formbox .input .code,
.part11 .formbox .input .sub,
.part11 .footbox .btnbox .btn
{ background: url(../images/ldy.png) no-repeat; background-size:793px auto;  font-size: 26px; }
.part11 .formbox .input .text{ width: 395px; height: 55px;   text-indent: 0.5em; font-size: 26px;   }
.part11 .formbox .input .text.tx1{ width: 395px; height: 55px;   background-position: -0px -149px; left: 145px; top: 0px; text-indent: 0.5em;    }
.part11 .formbox .input .text.tx2{ width: 395px; height: 55px;   background-position: -540px -279px; left: 145px; top: 0px; text-indent: 0.5em;   }
.part11 .formbox .input .code{ width: 138px; height: 53px;  background-position: -250px -207px;  left: 402px; top: 0px; font-size: 24px; text-align: center; line-height: 53px; color:#003a5f; position: absolute;   }
.part11 .formbox .input .sub{ width: 536px; height: 64px;  line-height: 64px; text-align: center;  font-size: 26px; color:#003a5f; background-position: -0px -280px; }
.part11 .footbox{ width: 540px; height: 160px; left: 50%; margin-left: -270px; top: 820px;}
.part11 .footbox .btnbox{ position: relative; height: 80px;}
.part11 .footbox .btnbox .btn{ width: 247px; height: 66px; text-align: center; line-height: 64px; color:#003a5f;   position: absolute; left: 0px; top: 0px; background-position: 0px -206px; }
.part11 .footbox .btnbox .btn.btn2{ right: 0px; left: inherit;}
.part11 .footbox .nt{ font-size: 22px; color:#003a5f; text-align: center; }
.part11 .yz{ width: 175px; height: 170px; background:url(../images/ics.png) no-repeat; background-size: 640px auto;  background-position:0px -397px; z-index: 99; top: 950px; left: -70px;  }
.part11 .yz2{ width: 150px; height: 120px; background:url(../images/ics.png) no-repeat; background-size: 640px auto;  background-position:-260px -397px; z-index: 99; top: 420px; right: -50px;  }

.zpan{ width: 487px; height: 487px; position: absolute; z-index: 10;  left: 50%; margin-left: -243px; bottom: 130px; }
.zpan .zpanbox{ width: 487px; height: 487px; margin-left: 660px; background: url(../images/zp/zpbg.png) no-repeat; background-size:487px auto;  }
.zpan .zpanbox .rotate-box{
    position: relative; height: 100%;
     z-index: 2;
}
.zpan .zpanbox.on{-webkit-animation:anm-panpy 1.2s linear forwards}
.zpan .zpanbox.on .rotate-box{-webkit-animation:anm-panrotate 2s forwards ease-out}

.zpan .zpanbox.on2 {-webkit-animation:anm-panpy2 2s forwards ease-out}
.zpan .zpanbox.on2 .rotate-box{-webkit-animation:anm-panrotate2 2s forwards ease-out}

.zpan .gesture{ display: none;  background: url(../images/pui.png) no-repeat; background-size:312px auto; background-position: -254px -28px; width: 36px; height: 54px; top: 0px; left:120px; }

.disable{pointer-events:none}
.rotate-box,.round-box{position:relative;height:100%}
.photo{position:absolute;left:0;top:0;width:100%;height:100%}
.photo>i{position:absolute;left:50%;top:50%;margin:-320px 0 0 -85px;width:170px;height:324px;background:url(../images/zp/p01.png) no-repeat;background-size:155px auto;background-position:center 41px;-webkit-transform-origin:bottom}
.photo>i:nth-child(1){background-image:url(../images/zp/p01.png);background-size:155px auto;background-position:center 41px;-webkit-transform:rotate(0deg)}
.photo>i:nth-child(2){background-image:url(../images/zp/p02.png);background-size:155px auto;background-position:center 43px;-webkit-transform:rotate(60deg)}
.photo>i:nth-child(3){background-image:url(../images/zp/p03.png);background-size:155px auto;background-position:center 47px;-webkit-transform:rotate(120deg)}
.photo>i:nth-child(4){background-image:url(../images/zp/p04.png);background-size:155px auto;background-position:center 45px;-webkit-transform:rotate(180deg)}
.photo>i:nth-child(5){background-image:url(../images/zp/p05.png);background-size:155px auto;background-position:center 44px;-webkit-transform:rotate(240deg);z-index:13}
.photo>i:nth-child(6){background-image:url(../images/zp/p06.png);background-size:155px auto;background-position:center 43px;-webkit-transform:rotate(300deg)}

.photo>i.active:nth-child(1){background-image:url(../images/zp/p01_bg.png);background-size:155px auto;background-position:center 32px;-webkit-transform:rotate(0deg)}
.photo>i.active:nth-child(2){background-image:url(../images/zp/p02_bg.png);background-size:155px auto;background-position:center 33px;-webkit-transform:rotate(60deg)}
.photo>i.active:nth-child(3){background-image:url(../images/zp/p03_bg.png);background-size:155px auto;background-position:center 47px;-webkit-transform:rotate(120deg)}
.photo>i.active:nth-child(4){background-image:url(../images/zp/p04_bg.png);background-size:155px auto;background-position:center 35px;-webkit-transform:rotate(180deg)}
.photo>i.active:nth-child(5){background-image:url(../images/zp/p05_bg.png);background-size:155px auto;background-position:center 34px;-webkit-transform:rotate(240deg);z-index:13}
.photo>i.active:nth-child(6){background-image:url(../images/zp/p06_bg.png);background-size:155px auto;background-position:center 34px;-webkit-transform:rotate(300deg)}

.zpanbox .bg{z-index:1;display:block;position:absolute;width:246px;height:277px;left:50%;margin-left:-123px;top:-36px;background:url(../images/zp/ic3.png) no-repeat;background-size:246px auto; display: none;}
.name-box{position:absolute;left:50%;top:50%;margin:-131.5px 0 0 -131.5px;width:263px;height:263px;background:url(../images/zp/xzpbg.png) no-repeat;background-size:263px auto;z-index:14}
.name-box>span{position:absolute;left:50%;top:0;margin-left:-58px;width:116px;height:50%;font-size:22px;line-height:80px;color:#cbfaff;text-align:center;background:center 9px no-repeat;-webkit-transform-origin:bottom; font-family: "宋体"; text-indent: -999em; }
.name-box>span .ic{ display: block; position: absolute; width: 60px; height: 22px; background:url(../images/zp/zptitle.png) no-repeat; background-size:118px auto; top: 16px; left: 32px; }
.name-box>span:nth-child(2){-webkit-transform:rotate(60deg)}
.name-box>span:nth-child(3){-webkit-transform:rotate(120deg)}
.name-box>span:nth-child(4){-webkit-transform:rotate(180deg)}
.name-box>span:nth-child(5){-webkit-transform:rotate(240deg)}
.name-box>span:nth-child(6){-webkit-transform:rotate(300deg)}

.name-box>span:nth-child(1) .ic{ background-position:0px 0px; }
.name-box>span:nth-child(2) .ic{ background-position:0px -95px; }
.name-box>span:nth-child(3) .ic{ background-position:0px -142px; }
.name-box>span:nth-child(4) .ic{ background-position:0px -237px; }
.name-box>span:nth-child(5) .ic{ background-position:0px -190px; }
.name-box>span:nth-child(6) .ic{ background-position:0px -47px; }

.name-box>span.active{color:#cbfaff;background-image:url(../images/zp/ic2.png);background-size:127px auto;background-position:0 2px;width:127px;margin-left:-65px}
.confirm-btn{position:absolute;left:50%;top:50%;margin:-55px 0 0 -55px;width:110px;height:110px; z-index:20; display: none;}
.confirm-btn .ic{width:70px;height:25px;display:block;position:absolute;left:20px;top:40px;background:url(../images/zp/zptitle.png) no-repeat;background-size:118px auto;background-position:0 -281px}
.zpan .zpanbox.on .confirm-btn{ display: block;}
.zpan .zpanbox.on .bg{ display: block;}
.zpan .zpanbox.on2 .confirm-btn{ display: block;}
.zpan .zpanbox.on2 .bg{ display: block;}

/** 平移 */
@-webkit-keyframes anm-panpy {
    to {
        /*-webkit-filter:blur(0);*/
        -webkit-transform:translate3d(-660px,0,0);
    }
}

@-webkit-keyframes anm-panpy2 {
    100% {
        -webkit-transform:translate3d(-660px,0,0);
    }

}

/** 旋转 */
@-webkit-keyframes anm-panrotate {
    to {
        -webkit-transform:rotate(-1800deg) translate3d(0,0,0);
    }
}
@-webkit-keyframes anm-panrotate2 {
    to {
        -webkit-transform:rotate(1800deg) translate3d(0,0,0);
    }
}

.anm-sy{
-webkit-animation:anmSy 3s infinite linear  alternate;
}
@-webkit-keyframes anmSy{
    0%{-webkit-transform:scale(1,1) rotate(0deg);}
    50%{-webkit-transform:scale(1,1.1) rotate(-5deg);}
    100%{-webkit-transform:scale(1,1.1) rotate(-0deg); }
}

.anm-yz{
-webkit-animation:anmYz 3s infinite linear alternate;
}
@-webkit-keyframes anmYz{
    0%{  left: 470px;}
    50%{ left: 460px;}
    55%{ left: 460px; -webkit-transform: rotate(-8deg);}
    60%{ left: 460px; }
    100%{ left:470px; -webkit-transform: rotate(0deg);}
}


/*enddom*/

/** 无限旋转 */
.anm-rt360{
-webkit-animation:rotate 2s infinite linear  none;
-moz-animation:rotate 2s infinite linear  none;}
@-webkit-keyframes rotate{
    0%{-webkit-transform:rotate(0);}
    100%{-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes rotate{
    0%{-moz-transform:rotate(0);}
    100%{-moz-transform:rotate(-360deg);}
}

.anm-leaf{
     -webkit-animation: leafAuto 4s ease-in infinite alternate;
}
@-webkit-keyframes leafAuto{
0%{
        -webkit-transform:translate(0px,0px);
        -moz-transform:translate(0px,0px);
    }
100%{
              -webkit-transform:translate( 20px,0px);
        -moz-transform:translate(20px,0px);
    }
}

.anm-leaf3{
     -webkit-animation: leafRo 2s infinite alternate;
}
@-webkit-keyframes leafRo{
0%{
        -webkit-transform:translate(0px,0px)  rotateX(0deg);
    }
100%{
        -webkit-transform:translate( 10px,0px) rotateX(20deg);
    }
}

.anm-leaf2{
     -webkit-animation: leafAutos 10s ease-in infinite alternate;
}
@-webkit-keyframes leafAutos{
0%{
        -webkit-transform:translate(0px,0px);
        -moz-transform:translate(0px,0px);
        margin-top: 10px;
    }
20%{
              -webkit-transform:translate( -100px,10px);
        -moz-transform:translate(-100px,10px);
        margin-top: 0px;
    }
40%{
              -webkit-transform:translate( -200px,10px);
        -moz-transform:translate(-200px,10px);
        margin-top: -20px;
    }
60%{
              -webkit-transform:translate( -300px,0px);
        -moz-transform:translate(-300px,0px);
        margin-top: 10px;
    }
80%{
              -webkit-transform:translate( -400px,0px);
        -moz-transform:translate(-400px,0px);
        margin-top: 20px;
    }
100%{
              -webkit-transform:translate( -620px,10px);
        -moz-transform:translate(-620px,10px);
        margin-top: 0px;
    }
}

/** 放大 */
.anm_bounceIn{
-webkit-animation:bounceIn 1s .2s ease both;
-moz-animation:bounceIn 1s .2s ease both;}
@-webkit-keyframes bounceIn{
0%{opacity:0;
-webkit-transform:scale(.3)}
50%{opacity:1;
-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bounceIn{
0%{opacity:0;
-moz-transform:scale(.3)}
50%{opacity:1;
-moz-transform:scale(1.05)}
70%{-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}
}

/** 整体放大 */
.anm_big{
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
    transform: scale(3, 3) translate(0px, 10px); opacity: 0; display: none;
}
.anm_big2{
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
    transform: scale(3, 3) translate(-150px, 10px); opacity: 0; display: none;
}