@charset "utf-8";
/* CSS Document */

/* 设定 */
*{ margin:0; padding:0}
body{padding:0; margin:0; width:100%;}
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {margin: 0;padding: 0}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {font-size:100%;font-weight: normal;font-style:normal;-webkit-text-size-adjust:none;-webkit-user-select:none;}
strong{font-weight:bold}
ul,li,ol,dl,dt,dd{list-style: none;}
fieldset, img {border: none}
table { border-collapse: collapse; border-spacing: 0; }
a{ cursor:pointer; text-decoration:none; }
.img_responsive{max-width:100%; display:block; height:auto;}
.img_size{max-width:100%; display:block; height:auto; margin:0 auto;}
.containter{width:640px; height:auto; margin:0 auto; }
.mgtop7{ margin-top:7px;}
.fl{ float:left;}
.fr{ float:right;}

/*music*/
.u-globalAudio{color:#fff;text-decoration:none;font-size:24px;position:fixed;left:5px;top:5px;
z-index:9999; display:none;}
.u-globalAudio.this{ display:block;}
.u-globalAudio span{position:absolute;left:-60px;top:10px;text-shadow:1px 1px 1px #000;letter-spacing:2px;-webkit-transition:all .2s linear;opacity:0;-webkit-transform:translateX(-20px)}
.u-globalAudio .icon-music{width:54px;height:54px;background: url(../images/units-icons.png) 0 0;display:block}
.u-globalAudio.z-play .icon-music.ani{-webkit-animation:reverseRotataZ 1.2s linear infinite}
.u-globalAudio span.z-show{opacity:1;-webkit-transform:translateX(0px)}
.u-globalAudio .coffee-steam-box{-webkit-transform:translate(-40px,-40px)}
@-webkit-keyframes reverseRotataZ{0%{-webkit-transform:rotateZ(0deg)}100%{-webkit-transform:rotateZ(-360deg)}}
@-webkit-keyframes rotataZ{0%{-webkit-transform:rotateZ(0deg)}100%{-webkit-transform:rotateZ(360deg)}}


.fengxiang{width:300px; height:300px; display:none;}

/* up */
.up{width:63px;height:26px;overflow:hidden; position:fixed;left:50%;margin-left:-32px;bottom:51px;opacity:1; background: url(../images/uparrow.png) no-repeat center center; z-index:10; display:none;-webkit-animation:arrow 1.5s infinite;}
.up.this{display:block;}

/* loading */
.load{width:100%;height:100%;overflow:hidden;}
.loader {
	width:250px;
  overflow: hidden;
  font-size: 45px;
   margin:0 auto;
   margin-top:300px;
   color:#000;
}
.loader span {
  -webkit-animation: loading 1s linear infinite -0.8s;
  float: left;
  color:#000;
}
.loader .span2 {
  -webkit-animation: loading 1s linear infinite -0.2s;
}
.loader .span3 {
  -webkit-animation: loading 1s linear infinite -0.5s;
}
.loader .span4 {
  -webkit-animation: loading 1s linear infinite -1.1s;
}
.loader .span5 {
  -webkit-animation: loading 1s linear infinite -0.36s;
}
.loader .span6 {
  -webkit-animation: loading 1s linear infinite -0.65s;
}
.loader .span7 {
  -webkit-animation: loading 1s linear infinite -0.93s;
}

.font1 {
  font-family: "Helvetica", Arial, sans-serif;
}
@-webkit-keyframes loading {
  0%, 100% {
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -webkit-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -webkit-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}

/* 首页 */
.homepage{width:640px; height:1136px; overflow:hidden; float:left; background:url(../images/indexbg1.jpg) no-repeat top center; position:relative; display:none;}
.homepage.onthis{ display:block;}
.homepage.onthis .homepage_tiltle{animation:0.5s dh1 1s linear forwards; -webkit-animation:0.5s dh1 1s linear forwards; }
.homepage.onthis .homepage_bg1{animation:0.5s dh1 0.5s linear forwards; -webkit-animation:0.5s dh1 0.5s linear forwards;}
.homepage.onthis .homepage_tiltle2{animation:0.5s dh1 1.5s linear forwards; -webkit-animation:0.5s dh1 1.5s linear forwards;}
.homepage.onthis .homepage_img1{animation:1s dh1 1.5s linear forwards; -webkit-animation:1s dh1 1.5s linear forwards;}
.homepage.onthis .homepage_mark1{animation:1s dh3 3s linear infinite; -webkit-animation:1s dh3 3s linear infinite; }
.homepage.onthis .homepage_bg2{animation:0.5s dh1 3s linear forwards; -webkit-animation:0.5s dh1 3s linear forwards;}
.homepage.onthis #drawarea{animation:0.1s dh1 2.5s linear forwards; -webkit-animation:0.1s dh1 2.5s linear forwards;}
.homepage_tiltle{width:468px; height:137px; position:absolute; top:160px; left:83px; background: url(../images/indexbg2.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:100;}
.homepage_bg1{width:640px; height:254px; position:absolute; top:138px; left:0; background:url(../images/indexbg3.png) no-repeat center center; opacity:0;filter:alpha(opacity=0); z-index:100;}
.homepage_tiltle2{width:556px; height:165px; position:absolute; left:41px; top:323px; background:url(../images/indexbg4.png) no-repeat center center;  opacity:0;filter:alpha(opacity=0); z-index:100;}
.homepage_img1{width:640px; height:803px; position:absolute; left:0; top:320px; z-index:10; background:url(../images/indexbg6.png) no-repeat center center;  opacity:0;filter:alpha(opacity=0); }
#drawarea{width:326px; height:109px; position:absolute; left:167px; top:708px; background:url(../images/ct3.png) no-repeat center center; opacity:0;filter:alpha(opacity=0);  z-index:500; display:block; overflow:hidden;}
.drawarea2{ width:326px; height:109px; background: url(../images/ct1%20.jpg) no-repeat center center; float:left;}
.homepage_mark1{width:111px; height:115px;  position:absolute; left:163px; top:780px; background:url(../images/indexbg7.png) no-repeat center center;opacity:0;filter:alpha(opacity=0);z-index:100;}
.homepage_bg2{width:235px; height:30px; position:absolute; left:203px; top:820px; background:url(../images/indexbg8.png) no-repeat center center; opacity:0;filter:alpha(opacity=0); z-index:100; }
.insidebox{width:640px; height:1136px; float:left; overflow:hidden; display:none;}
.swiper-container{ height:1136px;}
.swiper-slide{ position:relative;}
.all{width:640px; height:100%; position:relative; overflow:hidden;}

/* 第一页 */
.page1{ background:url(../images/indexbg9.jpg) no-repeat center center;}
.page1 .bg1{width:495px; height:663px; position:absolute; left:90px; top:36px; background:url(../images/indexbg10.jpg) no-repeat center center;opacity:0;filter:alpha(opacity=0);z-index:10;}
.page1 .bg2{width:559px; height:744px; position:absolute; left:41px; top:7px; background: url(../images/indexbg11.png) no-repeat center center;opacity:0;filter:alpha(opacity=0);z-index:20;}
.page1 .bg3{width:558px; height:871px; position:absolute; left:41px; top:87px; background: url(../images/indexbg12.png) no-repeat center center;opacity:0;filter:alpha(opacity=0);z-index:30;}
.page1 .bg4{width:458px; height:0px; position:absolute; left:100px; top:135px; overflow:hidden;z-index:40;}
.page1.onthis .bg1{animation:0.5s dh1 0.5s linear forwards; -webkit-animation:0.5s dh1 0.5s linear forwards; }
.page1.onthis .bg2{animation:0.5s dh1 1s linear forwards; -webkit-animation:0.5s dh1 1s linear forwards; }
.page1.onthis .bg3{animation:0.5s dh1 1.5s linear forwards; -webkit-animation:0.5s dh1 1.5s linear forwards; }
.page1.onthis .bg4{animation:2s dh4 2s linear forwards; -webkit-animation:2s dh4 2s linear forwards; }

/* 第二页 */
.page2{ background:#93c8d8;}
.page2 .bg1{width:598px; height:502px; position:absolute; right:0; top:0; background:url(../images/page13bg1.jpg) no-repeat center center; z-index:10;opacity:0;filter:alpha(opacity=0);}
.page2 .bg2{width:640px; height:445px; position:absolute; left:0; top:501px; background:url(../images/page13bg2.png) no-repeat center center; z-index:10;opacity:0;filter:alpha(opacity=0);}
.page2.onthis .bg1{-webkit-animation:0.5s dh1  linear forwards;}
.page2.onthis .bg2{-webkit-animation:0.5s dh1 0.5s linear forwards;}

/* 第三页 */
.page3{ background:#93c8d8;}
.page3 .bg1{width:640px; height:437px; position:absolute; left:-640px; top:0px; background:url(../images/page2bg1.jpg) no-repeat center center; }
.page3 .bg2{width:557px; height:109px; position:absolute; left:639px; top:328px; background:url(../images/page2bg2.jpg) no-repeat center center; z-index:10; }
.page3 .bg3{width:557px; height:426px; position:absolute; left:-600px; top:517px; background: url(../images/page2bg3.png) no-repeat center center; z-index:10;}
.page3 .bg4{width:557px; height:84px; position:absolute; left:638px; top:437px; background: url(../images/page2bg4.png) no-repeat center center; }
.page3.onthis .bg1{animation:0.5s dh5 0.5s linear forwards; -webkit-animation:0.5s dh5 0.5s linear forwards;}
.page3.onthis .bg2{animation:0.5s dh6 0.5s linear forwards; -webkit-animation:0.5s dh6  linear forwards;}
.page3.onthis .bg3{animation:0.5s dh5 0.5s linear forwards; -webkit-animation:0.5s dh5 0.5s linear forwards;}
.page3.onthis .bg4{animation:0.5s dh6 0.5s  linear forwards; -webkit-animation:0.5s dh6 0.5s  linear forwards;}

/* 第四页 */
.page4{ background:#93c8d8 ;}
.page4 .bg1{ width:438px; height:650px; position:absolute; left:-438px; top:0px; background: url(../images/page3bg2.jpg) no-repeat center center;}
.page4 .bg2{width:391px; height:353px; position:absolute; left:210px; top:0px; background:url(../images/page3bg4.png) no-repeat center center; opacity:0;filter:alpha(opacity=0); z-index:10;}
.page4 .bg3{width:438px; height:435px; position:absolute; left:-438px; top:590px; background:url(../images/page3bg3.png) no-repeat center center; z-index:10;}
.page4 .bg4{width:142px; height:239px; position:absolute; left:459px; top:634px; background: url(../images/page3bg5.png) no-repeat center center; opacity:0;filter:alpha(opacity=0); z-index:10;}
.page4 .bg5{width:400px; height:435px; position:absolute; top:590px; right:-400px; background:#f1b854;}
.page4.onthis .bg1{animation:0.5s dh7  linear forwards; -webkit-animation:0.5s dh7  linear forwards;}
.page4.onthis .bg2{animation:0.5s dh1 0.5s linear forwards; -webkit-animation:0.5s dh1 0.5s linear forwards;}
.page4.onthis .bg3{animation:0.5s dh7 1s linear forwards; -webkit-animation:0.5s dh7 1s linear forwards;}
.page4.onthis .bg4{animation:0.5s dh1 1.5s linear forwards; -webkit-animation:0.5s dh1 1.5s linear forwards;}
.page4.onthis .bg5{animation:0.5s dh26 1.5s linear forwards; -webkit-animation:0.5s dh26 1.5s linear forwards;}

/* 第五页 */
.page5{ background:#93c8d8;}
.page5 .bg1{width:557px; height:541px; position:absolute; left:42px; top:51px; background:#f1b854;opacity:0;filter:alpha(opacity=0); z-index:10}
.page5 .bg2{width:480px; height:480px; position:absolute; left:82px; top:0px; background:url(../images/page4bg2.jpg) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:20;}
.page5 .bg3{width:480px; height:192px; position:absolute; left:82px; top:418px; background:url(../images/page4bg3.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:30;}
.page5 .bg4{width:640px; height:402px; position:absolute; left:0; top:593px; background:url(../images/page4bg4.jpg) no-repeat center center; opacity:0;filter:alpha(opacity=0); z-index:10;}
.page5 .bg5{width:558px; height:101px; position:absolute; right:-558px; top:593px; background: url(../images/page4bg1.jpg) no-repeat center center; z-index:20;}
.page5.onthis .bg1{animation:0.5s dh1 linear forwards; -webkit-animation:0.5s dh1 linear forwards;}
.page5.onthis .bg2{animation:0.5s dh1 0.5s linear forwards; -webkit-animation:0.5s dh1 0.5s linear forwards;}
.page5.onthis .bg3{animation:0.5s dh1 0.5s linear forwards; -webkit-animation:0.5s dh1 0.5s linear forwards;}
.page5.onthis .bg4{animation:0.5s dh1 1s linear forwards; -webkit-animation:0.5s dh1 1s linear forwards;}
.page5.onthis .bg5{animation:0.5s dh6 1.5s linear forwards; -webkit-animation:0.5s dh6 1.5s linear forwards;}

/* 第六页 */
.page6{ background:#93c8d8;}
.page6 .bg1{width:426px; height:524px; position:absolute; top:0; right:0; background:#f2b854;}
.page6 .bg2{width:557px; height:371px; position:absolute; left:-557px; top:82px; background:url(../images/page5bg1.jpg) no-repeat center center; z-index:10;}
.page6 .bg3{width:210px; height:306px; position:absolute; right:-211px; top:30px; background:url(../images/page5bg2.png) no-repeat center center; z-index:20;}
.page6 .bg4{width:640px; height:413px; position:absolute; left:-640px; top:600px; background:url(../images/page5bg3.jpg) no-repeat center center; z-index:10;}
.page6 .bg5{width:518px; height:162px; position:absolute; right:-518px; top:523px; background: url(../images/page5bg4.png) no-repeat center center; z-index:20;}
.page6.onthis .bg2{animation:0.5s dh8  linear forwards; -webkit-animation:0.5s dh8  linear forwards; }
.page6.onthis .bg3{animation:0.5s dh9  linear forwards; -webkit-animation:0.5s dh9  linear forwards; }
.page6.onthis .bg4{animation:0.5s dh5 0.5s  linear forwards; -webkit-animation:0.5s dh5 0.5s linear forwards; }
.page6.onthis .bg5{animation:0.5s dh6 0.5s  linear forwards; -webkit-animation:0.5s dh6 0.5s linear forwards; }

/* 第七页 */
.page7{ background:#93c8d8;}
.page7 .bg1{width:598px; height:577px; position:absolute; top:0; right:0; background:#4db0cd;}
.page7 .bg2{width:600px; height:428px; position:absolute; left:-600px; top:21px; background:url(../images/page6bg1.jpg) no-repeat center center; z-index:10;}
.page7 .bg3{width:558px; height:100px; position:absolute; right:-558px; top:449px; background:url(../images/page6bg2.jpg) no-repeat center center; z-index:10;}
.page7 .bg4{width:640px; height:428px; position:absolute; left:-640px; top:577px; background: url(../images/page6bg3.jpg) no-repeat center center; z-index:20;}
.page7 .bg5{width:558px; height:94px; position:absolute; right:-558px; top:577px; background: url(../images/page6bg4.jpg) no-repeat center center; z-index:40;}
.page7.onthis .bg2{animation:0.5s dh10   linear forwards; -webkit-animation:0.5s dh10  linear forwards;}
.page7.onthis .bg3{animation:0.5s dh6   linear forwards; -webkit-animation:0.5s dh6  linear forwards;}
.page7.onthis .bg4{animation:0.5s dh5   linear forwards; -webkit-animation:0.5s dh5  linear forwards;}
.page7.onthis .bg5{animation:0.5s dh6   linear forwards; -webkit-animation:0.5s dh6  linear forwards;}

/* 第八页 */
.page8{ background:#93c8d8;}
.page8 .bg1{width:640px; height:413px; position:absolute; left:0px; top:0px; background:url(../images/page7bg1.jpg) no-repeat center center;}
.page8 .bg2{width:156px; height:274px; position:absolute; right:40px; top:75px; background:url(../images/page7bg4.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:50; }
.page8 .bg3{width:447px; height:620px; position:absolute; left:157px; bottom:-708px; background:url(../images/page7bg2.jpg) no-repeat center center; z-index:20}
.page8 .bg4{width:503px; height:626px; position:absolute; left:44px; bottom:-665px; background:url(../images/page7bg3.jpg) no-repeat center center; z-index:10;}
.page8.onthis .bg2{animation:0.5s dh1   linear forwards; -webkit-animation:0.5s dh1  linear forwards;}
.page8.onthis .bg3{animation:0.5s dh11 0.5s  linear forwards; -webkit-animation:0.5s dh11 0.5s linear forwards;}
.page8.onthis .bg4{animation:0.5s dh12 1s  linear forwards; -webkit-animation:0.5s dh12 1s linear forwards;}

/* 第九页 */
.page9{ background:#93c8d8;}
.page9 .bg1{width:426px; height:558px; position:absolute; right:0px; top:-609px; background:url(../images/page8bg2.jpg) no-repeat center center;}
.page9 .bg2{width:557px; height:369px; position:absolute; left:-557px; top:0px; background:url(../images/page8bg1.jpg) no-repeat center center; z-index:20;}
.page9 .bg3{width:558px; height:88px; position:absolute; right:-557px; top:506px; background:url(../images/page8bg4.png) no-repeat center center; z-index:20;}
.page9 .bg4{width:558px; height:437px; position:absolute; left:-557px; top:506px; background:url(../images/page8bg3.jpg) no-repeat center center; z-index:10;}
.page9.onthis .bg1{animation:0.5s dh13  linear forwards; -webkit-animation:0.5s dh13 linear forwards;}
.page9.onthis .bg2{animation:0.5s dh8  linear forwards; -webkit-animation:0.5s dh8 linear forwards;}
.page9.onthis .bg3{animation:0.5s dh6  linear forwards; -webkit-animation:0.5s dh6 linear forwards;}
.page9.onthis .bg4{animation:0.5s dh25  linear forwards; -webkit-animation:0.5s dh25 linear forwards;}


/* 第十页 */
.page10{ background:url(../images/page9bg1.jpg) repeat-x center center;}
.page10 .bg1{width:493px; height:618px; position:absolute; top:-618px; right:-528px; background:url(../images/page9bg3.png) no-repeat center  center; z-index:10;}
.page10 .bg2{width:492px; height:410px; position:absolute; left:0px; bottom:-458px; background:url(../images/page9bg2.jpg) no-repeat center center; z-index:10;}
.page10.onthis .bg1{animation:0.5s dh15  linear forwards; -webkit-animation:0.5s dh15 linear forwards;}
.page10.onthis .bg2{animation:0.5s dh16  linear forwards; -webkit-animation:0.5s dh16 linear forwards;}

/* 第十一页 */
.page11{background:#93c8d8;}
.page11 .bg1{width:640px; height:406px; position:absolute; left:0; top:0; background:#4db0cd;}
.page11 .bg2{width:558px; height:566px; position:absolute; left:40px; top:-19px; background:url(../images/page10bg1.png) no-repeat center center; z-index:10; transform: scale(0,0); -webkit-transform: scale(0,0);}
.page11 .bg3{width:558px; height:459px; position:absolute; left:40px; top:472px; background:url(../images/page10bg2.jpg) no-repeat center center; z-index:10;transform: scale(0,0); -webkit-transform: scale(0,0); }
.page11.onthis .bg2{animation:0.5s dh17  linear forwards; -webkit-animation:0.5s dh17 linear forwards;}
.page11.onthis .bg3{animation:0.5s dh17 0.5s linear forwards; -webkit-animation:0.5s dh17 0.5s linear forwards;}

/* 第十二页 */
.page12{background:#93c8d8;}
.page12 .bg1{width:358px; height:506px; position:absolute; left:44px; top:0px; background:url(../images/page11bg1.jpg) no-repeat center center; transform-origin: left top; transform:rotate(-90deg);-webkit-transform:rotate(-90deg); overflow:hidden; }
.page12 .bg2{width:238px; height:506px; position:absolute; right:0; top:0px; background:url(../images/page11bg2.jpg) no-repeat center center; transform-origin: right top; transform:rotate(90deg);-webkit-transform:rotate(90deg);overflow:hidden;}
.page12 .bg3{width:446px; height:586px; position:absolute; right:0; bottom:-50px; background:url(../images/page11bg3.jpg) no-repeat center center; transform-origin: right bottom; transform:rotate(90deg); -webkit-transform:rotate(90deg);overflow:hidden; z-index:10;}
.page12 .bg4{width:171px; height:512px;  position:absolute; left:44px; bottom:-100px; background:url(../images/page11bg4.png) no-repeat center center; transform-origin: left bottom; transform:rotate(-180deg);-webkit-transform:rotate(-180deg);overflow:hidden; z-index:20;}
.page12.onthis .bg1{animation:0.5s dh18 linear forwards; -webkit-animation:0.5s dh18 linear forwards;}
.page12.onthis .bg2{animation:0.5s dh19 linear forwards; -webkit-animation:0.5s dh19 linear forwards;}
.page12.onthis .bg3{animation:0.5s dh19 linear forwards; -webkit-animation:0.5s dh19 linear forwards;}
.page12.onthis .bg4{animation:0.5s dh20 linear forwards; -webkit-animation:0.5s dh20 linear forwards;}

/* 第十四页 */
.page13{background: url(../images/page13.jpg) no-repeat top center;}

/* 第十四页 */
.page14{background: url(../images/page12bg1.jpg) no-repeat center center;}
.page14 .cloud1{width:176px; height:114px; position:absolute; top:206px; right:-176px; background:url(../images/cloud1.png) no-repeat center center; z-index:20;}
.page14 .cloud2{width:474px; height:204px; position:absolute; right:-474px; top:371px; background:url(../images/cloud2.png) no-repeat center center; z-index:100;}
.page14 .cloud3{width:135px; height:85px; position:absolute; left:409px; top:525px; background:url(../images/cloud3.png) no-repeat center center;}
.page14 .heart1{width:34px; height:25px; position:absolute; left:107px; top:186px; background:url(../images/heart1.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart2{width:20px; height:17px; position:absolute; left:163px; top:177px; background:url(../images/heart2.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart3{width:19px; height:23px; position:absolute; left:235px; top:169px; background:url(../images/heart3.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart4{width:16px; height:8px; position:absolute; left:358px; top:169px; background:url(../images/heart4.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart5{width:23px; height:21px; position:absolute; left:429px; top:177px; background:url(../images/heart5.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart6{width:17px; height:11px; position:absolute; left:482px; top:158px; background:url(../images/heart6.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart7{width:22px; height:24px; position:absolute; left:203px; top:204px; background:url(../images/heart7.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart8{width:22px; height:20px; position:absolute; left:286px; top:215px; background:url(../images/heart8.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart9{width:17px; height:20px; position:absolute; left:471px; top:215px; background:url(../images/heart9.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart10{width:17px; height:19px; position:absolute; left:346px; top:230px; background:url(../images/heart10.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart11{width:17px; height:19px; position:absolute; left:408px; top:228px; background:url(../images/heart11.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart12{width:17px; height:19px; position:absolute; left:116px; top:271px; background:url(../images/heart12.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page12 .heart13{width:24px; height:22px; position:absolute; left:175px; top:249px; background:url(../images/heart13.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart14{width:24px; height:22px; position:absolute; left:257px; top:249px; background:url(../images/heart14.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart15{width:24px; height:24px; position:absolute; left:220px; top:258px; background:url(../images/heart15.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page12 .heart16{width:24px; height:24px; position:absolute; left:376px; top:268px; background:url(../images/heart16.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart17{width:24px; height:24px; position:absolute; left:437px; top:249px; background:url(../images/heart17.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart18{width:24px; height:24px; position:absolute; left:482px; top:253px; background:url(../images/heart18.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart19{width:24px; height:24px; position:absolute; left:306px; top:290px; background:url(../images/heart19.png) no-repeat center center;opacity:0;filter:alpha(opacity=0); z-index:10; }
.page14 .heart20{width:503px; height:389px; position:absolute; left:70px; top:278px; background:url(../images/heart20.png) no-repeat center center; transform: scale(0,0);-webkit-transform: scale(0,0); z-index:50;}
.page14 .bg1{width:0px; height:54px; position:absolute; left:70px; top:393px; overflow:hidden; z-index:50;}
.page14 .bg2{width:0px; height:54px; position:absolute; left:70px; top:493px; overflow:hidden; z-index:50;}
.page14 .bg3{width:454px; height:78px; position:absolute; left:90px; top:708px; background:url(../images/page12bg4.png) no-repeat center center;opacity:0;filter:alpha(opacity=0);  z-index:50;}
.page14 .bg4{width:454px; height:78px; position:absolute; left:90px; top:822px; background:url(../images/page12bg5.png) no-repeat center center;opacity:0;filter:alpha(opacity=0);  z-index:50;}
.page14 .bg5{width:503px; height:100px; margin-left:70px; margin-top:69px; float:left; background:url(../images/page12bg6.png) no-repeat center center; z-index:50; position:relative;}
.page14 .bg5 p{width:146px; height:50px; display:block; position:absolute; top:0; left:190px; font: lighter 48px/50px "Microsoft YaHei","黑体","STHeiti"; color:#ffffff;}
.page14 .heartbox{width:90px; height:90px; position:absolute; right:0; top:20px; display:none; overflow:hidden;z-index:11000; background:url(../images/page12bg7.png) no-repeat center center;transform: scale(0,0);-webkit-transform: scale(0,0); -webkit-animation: 2s dh17 linear infinite;}
.page14 .markbox{width:100%; height:100%; background:#000000; position:absolute; top:0; left:0; opacity:0.8;filter:alpha(opacity=80); z-index:10100; display:none;}
.page14 .zhezhao{width:500px; height:240px; position:absolute; left:50%; margin-left:-250px; top:180px; background:url(../images/page12bg8.png) repeat center center; z-index:100;}
.page14 .input1{width:425px; height:72px; margin-left:32.5px; margin-top:40px; padding-left:5px; padding-right:5px; float:left; border:none; outline:none; background:#ffffff; font: normal 24px/52px "Microsoft YaHei","黑体","STHeiti"; color:#858585; text-align:center;  appearance:none;-moz-appearance:none;-webkit-appearance:none;}
.page14 .input2{width:435px; height:52px; margin-left:32.5px; margin-top:40px; float:left; border:none; outline:none; background:#008aaf;  font: normal 24px/52px "Microsoft YaHei","黑体","STHeiti"; color:#ffffff; text-align:center; appearance:none;-moz-appearance:none;-webkit-appearance:none;}
.page14 .bg6{width:165px; height:30px; position:absolute; top:39px; left:258px; font: normal 18px/30px "Microsoft YaHei","黑体","STHeiti"; color:#ffffff; text-align:center; letter-spacing:4px;}
      
.page14.onthis .cloud1{animation:20s dh21 linear infinite; -webkit-animation:20s dh21 linear infinite;}
.page14.onthis .cloud2{animation:40s dh22 5s linear infinite; -webkit-animation:40s dh22 5s linear infinite;}
.page14.onthis .cloud3{animation:15s dh21  linear infinite; -webkit-animation:15s dh21  linear infinite;}
.page14.onthis .heart1{animation:1s dh23  linear infinite; -webkit-animation:1s dh23  linear infinite;}
.page14.onthis .heart2{animation:1s dh23 0.5s linear infinite; -webkit-animation:1s dh23 0.5s linear infinite;}
.page14.onthis .heart3{animation:1s dh23 1s linear infinite; -webkit-animation:1s dh23 1s linear infinite;}
.page14.onthis .heart4{animation:1s dh23  linear infinite; -webkit-animation:1s dh23  linear infinite;}
.page14.onthis .heart5{animation:1s dh23 0.5s linear infinite; -webkit-animation:1s dh23 0.5s linear infinite;}
.page14.onthis .heart6{animation:1s dh23  linear infinite; -webkit-animation:1s dh23  linear infinite;}
.page14.onthis .heart7{animation:1s dh23 0.5s  linear infinite; -webkit-animation:1s dh23 0.5s linear infinite;}
.page14.onthis .heart8{animation:2s dh23 1s  linear infinite; -webkit-animation:2s dh23 1s linear infinite;}
.page14.onthis .heart9{animation:1s dh23  linear infinite; -webkit-animation:1s dh23  linear infinite;}
.page14.onthis .heart10{animation:1s dh23 0.5s linear infinite; -webkit-animation:1s dh23 0.5s  linear infinite;}
.page14.onthis .heart11{animation:1s dh23 1s linear infinite; -webkit-animation:1s dh23 1s linear infinite;}
.page14.onthis .heart12{animation:1s dh23  linear infinite; -webkit-animation:1s dh23  linear infinite;}
.page14.onthis .heart13{animation:1s dh23 0.75s linear infinite; -webkit-animation:1s dh23 0.75s  linear infinite;}
.page14.onthis .heart14{animation:1s dh23 1s linear infinite; -webkit-animation:1s dh23 1s  linear infinite;}
.page14.onthis .heart15{animation:1s dh23 1.5s linear infinite; -webkit-animation:1s dh23 1.5s  linear infinite;}
.page14.onthis .heart16{animation:1s dh23 0.35s linear infinite; -webkit-animation:1s dh23 0.35s  linear infinite;}
.page14.onthis .heart17{animation:1s dh23 0.8s linear infinite; -webkit-animation:1s dh23 0.8s  linear infinite;}
.page14.onthis .heart18{animation:1s dh23 1.5s linear infinite; -webkit-animation:1s dh23 1.5s linear infinite;}
.page14.onthis .heart19{animation:1s dh23 0.6s linear infinite; -webkit-animation:1s dh23 0.6s linear infinite;}
.page14.onthis .heart20{animation:1s dh17 2s linear forwards; -webkit-animation:1s dh17 2s linear forwards; }
.page14.onthis .bg1{animation:0.5s dh24 2.5s linear forwards; -webkit-animation:0.5s dh24 2.5s linear forwards;}
.page14.onthis .bg2{animation:0.5s dh24 3s linear forwards; -webkit-animation:0.5s dh24 3s linear forwards;}
.page14.onthis .bg3{animation:0.5s dh1 3.5s linear forwards; -webkit-animation:0.5s dh1 3.5s linear forwards;}
.page14.onthis .bg4{animation:0.5s dh1 4s linear forwards; -webkit-animation:0.5s dh1 4s linear forwards;}

/* 动画 */
@keyframes dh1{
	0%{ opacity:0;filter:alpha(opacity=0);}
	100%{ opacity:1;filter:alpha(opacity=100);}
	}


@keyframes dh2{
	0%{ opacity:0;filter:alpha(opacity=0);}
	100%{ opacity:0.5;filter:alpha(opacity=50);}
	}

@keyframes dh3{
	0%{ opacity:0;filter:alpha(opacity=0);  }
	10%{ opacity:1;filter:alpha(opacity=100); transform: translate(0,0);-webkit-transform: translate(0,0); }
	55%{opacity:1;filter:alpha(opacity=100); transform: translate(100px,30px);-webkit-transform: translate(100px,30px);}
	100%{ opacity:1;filter:alpha(opacity=100); transform: translate(300px,-30px);-webkit-transform: translate(300px,-30px);}
	}

@keyframes dh4{
	0%{ height:0px; }
	100%{ height:552px;}
	}

@keyframes dh5{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(640px,0);-webkit-transform: translate(640px,0);}
	}

@keyframes dh6{
	0%{ transform: translate(0,0); -webkit-transform: translate(0,0);}
	100%{ transform: translate(-598px,0);-webkit-transform: translate(-598px,0);}
	}

@keyframes dh7{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(438px,0);-webkit-transform: translate(438px,0);}
	}

@keyframes dh8{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(598px,0);-webkit-transform: translate(598px,0);}
	}

@keyframes dh9{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0);}
	100%{ transform: translate(-240px,0);-webkit-transform: translate(-240px,0);}
	}

@keyframes dh10{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(600px,0);-webkit-transform: translate(600px,0);}
	}

@keyframes dh11{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(0,-675px);webkit-transform: translate(0,-675px);}
	}

@keyframes dh12{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(0,-626px);-webkit-transform: translate(0,-626px);}
	}

@keyframes dh13{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(0,558px);-webkit-transform: translate(0,558px);}
	}

@keyframes dh14{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(0,-493px);-webkit-transform: translate(0,-493px);}
	}

@keyframes dh15{
	0%{ transform: translate(0,0); -webkit-transform: translate(0,0); }
	100%{ transform: translate(-599px,618px);-webkit-transform: translate(-599px,618px);}
	}

@keyframes dh16{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(76px,-460px);-webkit-transform: translate(76px,-460px);}
	}


@keyframes dh17{
	0%{ transform: scale(0,0);-webkit-transform: scale(0,0); }
	90%{transform: scale(1.2,1.2);-webkit-transform: scale(1.2,1.2);}
	100%{transform: scale(1,1);-webkit-transform: scale(1,1);}
}

@keyframes dh18{
	0%{ transform: rotate(-90deg);-webkit-transform: rotate(-90deg);}
	100%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}

@keyframes dh19{
	0%{ transform: rotate(90deg);-webkit-transform: rotate(90deg);}
	100%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}


@keyframes dh20{
	0%{ transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
	100%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}

@keyframes dh21{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0);}
	100%{ transform: translate(-820px,0);-webkit-transform: translate(-820px,0);}
	}
	
@keyframes dh22{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0);}
	100%{ transform: translate(-1120px,0);-webkit-transform: translate(-1120px,0);}
	}
	
@keyframes dh23{
	0%{ opacity:0;filter:alpha(opacity=0);}
	10%{opacity:1;filter:alpha(opacity=100);}
	90%{opacity:1;filter:alpha(opacity=100);}
	100%{opacity:0;filter:alpha(opacity=0);}
	}	
	
	
@keyframes dh24{
	0%{ width:0px;}
	100%{width:503px;}
	}
	
@keyframes dh25{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(598px,0);-webkit-transform: translate(598px,0);}
	}
	
@keyframes dh26{
	0%{ transform: translate(0,0);-webkit-transform: translate(0,0); }
	100%{ transform: translate(-400px,0);-webkit-transform: translate(-400px,0);}
	}

@keyframes dh27{
	0%{opacity:0;filter:alpha(opacity=0);transform: rotateX(-90deg);-webkit-transform: rotateX(-90deg);}
	10%{opacity:1;filter:alpha(opacity=100);transform: rotateX(360deg);-webkit-transform: rotateX(360deg);}
	100%{opacity:1;filter:alpha(opacity=100);transform: rotateX(0deg);-webkit-transform: rotateX(0deg);}
	}
	
@-webkit-keyframes arrow{
 0% {-webkit-transform: translateY(32px);opacity:0}
60% {-webkit-transform: translateY(12px);opacity:1}
100% {-webkit-transform: translateY(0px);opacity: 0}
}