html,body,address,blockquote,div,dl,form,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul,dd,dt,li,tbody,td,tfoot,th,thead,tr,button,del,ins,map,object,a,abbr,acronym,b,bdo,big,br,cite,code,dfn,em,i,img,kbd,q,samp,small,span,strong,sub,sup,tt,var,legend,fieldset{margin:0;padding:0;}
img,fieldset{border:0;}
img{width:auto\9;height:auto;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
html{overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:none;}
a{text-decoration:none;color:#027b7e;outline:none;}
a:hover{text-decoration:underline;}
p{padding:0;}
li{margin:0 0 .5em 0;padding:0;}
input[type=search]{outline:none;-webkit-appearance:none;}
input[type='search']::-webkit-search-decoration,input[type='search']::-webkit-search-cancel-button{display:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
ul,ol{list-style:none;}
table{border-spacing:0;border-collapse:collapse;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
small{font-size:12px;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;}
label,input,select,form img,button,textarea{vertical-align:middle;}
address,caption,cite,code,dfn,em,strong,th,optgroup{font-weight:normal;font-style:normal;}
.clear:after{display:block;visibility:hidden;clear:both;height:0;content:'.';}
.clear{display:inline-block;}
* html .clear{height:1%;}
.clear{display:block;}
.pa{position:absolute;}

img{max-width:100%;}
html{width:100%;min-height:100%;}
body,html{width:100%;min-height:100%;height: 100%;overflow: hidden;}
body{font-family:PingFang SC,"\5FAE\8F6F\96C5\9ED1",Source Han Sans CN,SimSun,Arial,Microsoft YaHei,Hiragino Sans GB,宋体,Tahoma，arial,sans-serif;font-size:14px;position:absolute;margin:0 auto;-webkit-user-select:none;-moz-user-select:none;color:#333;background: #f7fbfe;}
#loading{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    margin: auto;    background: #f7dbc5;
}
.loading_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: auto;
    bottom: 0;
    right: 0;
}
#loading_icon{
    position: absolute;
    width: 3.5rem;
    top:4.6rem;    left: 50%;
    margin-left: -1.8rem;
}

#loading_lineDiv{
    position: absolute;
    width: 3.5rem;
    height: 0.05rem;
    top:7.8rem;
    background-color: #d6cfcf;left: 50%;
    margin-left: -1.8rem;
}
.dates{color:#0e4d95;
    position: absolute;
    width: 100%;
    top: 4rem;
    text-align: center;
    font-size: 0.3rem;}
#loading_line{
    position: absolute;
    background-color:#ffbe2e;
    width: 0%;
    height: 100%;
}
.bg{
    position: absolute;
    width: 100%;
}

.load{
    position: absolute;
    width: 6.58rem;
    top: 3rem;
}
.loading_date{
font-size: 0.2rem;color:#231815;
line-height: 0.3rem;position: absolute;
left: 4%;top: 1.8rem;width: 2.8rem;display:none;
}
.loading_date span{font-size:0.3rem}
#p1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;background: url(../images/bg.jpg) no-repeat;
    background-size: 100% 100%;
}
#p1_div{position: absolute;
    top: 0;
    width: 100%;
    height:100%;
    right: 0;
    bottom: 0;
    margin: auto;left: 200%;}
.swiper-slide{overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.slide1{width: 100%;height: 100%;background:url(../images/bg1.jpg) no-repeat center;background-size: 100%;}
.cont-top{padding-top: 0.1rem;margin: 0 auto;background: url(../images/b.png?V) no-repeat center center;background-size: 100% 100%;position: relative;}
.logo{width: 2rem;margin: 0 auto;display: block;padding-top:0.7rem;}
.banner{width:80%;display: block;margin: 0 auto; padding-top: 1rem;}
.fadY{animation: flipInY 1.5s linear both;-webkit-animation: flipInY 1.5s linear both;}
@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}
.copyright{width:36%;display: block;position: absolute;bottom:1.5rem;left:32%;}
.zi{width: 80%;display: block;margin: 0 auto;}
.zi1{padding-top: 2.6rem;}
.active.zi{animation:fadeInLeft 1s linear both;-webkit-animation:fadeInLeft 1s linear both;}
.active.zi2{animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
.active.zi3{animation-delay:0.8s;-webkit-animation-delay: 0.8s;}
.active.zi4{animation-delay: 1.2s;-webkit-animation-delay: 1.2s;}
.active.zi5{animation-delay: 1.6s;-webkit-animation-delay: 1.6s;}
.active.zi6{animation-delay: 2s;-webkit-animation-delay: 2s;}
.active.zi7{animation-delay: 2.4s;-webkit-animation-delay:2.4s;}
.active.zi8{animation-delay:2.8s;-webkit-animation-delay:2.8s;}

.swiper-slide.swiper-slide-active #p1_click_1 .img2{animation:fadeInLeft 1s linear both;-webkit-animation:fadeInLeft 1s linear both;}
.swiper-slide.swiper-slide-active #p1_click_1 .img2_{animation:fadeInLeft1 1s linear infinite;-webkit-animation:fadeInLeft1 1s linear infinite;}
.poyi{width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;font-size: 20px;color: #000;background:#fff;}
.swiper-slide.swiper-slide-active#lastslide .poyi,
.swiper-slide.swiper-slide-active#p1_div3 .poyi1,
.swiper-slide.swiper-slide-active#p1_div4 .poyi,
.swiper-slide.swiper-slide-active#p1_div5 .poyi,
.swiper-slide.swiper-slide-active#p1_div6 .poyi,
.swiper-slide.swiper-slide-active#p1_div7 .poyi,
.swiper-slide.swiper-slide-active#p1_div8 .poyi,
.swiper-slide.swiper-slide-active#p1_div9 .poyi,
.swiper-slide.swiper-slide-active#p1_div10 .poyi,
.swiper-slide.swiper-slide-active#p1_div11 .poyi,
.swiper-slide.swiper-slide-active#p1_div12 .poyi{animation:poyi 1.5s linear both;-webkit-animation:poyi 1.5s linear both;}
@keyframes poyi{0%{opacity:1;}40%{opacity:1;}99%{transform: translateX(0);-webkit-transform: translateX(0);}100%{opacity:0;transform: translateX(200%);-webkit-transform: translateX(200%);}}
@-webkit-keyframes poyi{0%{opacity:1;}40%{opacity:1;}99%{transform: translateX(0);-webkit-transform: translateX(0);}100%{opacity:0;transform: translateX(200%);-webkit-transform: translateX(200%);}}
#p1_div,.swiper-container,.swiper-wrapper,.swiper-slide {background: #fff;}



@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}
@keyframes fadeInLeft1{0%{opacity:0.3;}to{opacity:1;}}
@-webkit-keyframes fadeInLeft1{0%{opacity:0.3;}to{opacity:1;}}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}

.cont{width: 100%;background: url(../images/bg2.jpg) no-repeat center top;padding:50px 0;background-size: 100% 100%;}
.item{width:100%; margin: 0 auto;position: relative;}
.item img{width:90%;display: block;margin:0 auto;}
.item img.shou{position: absolute;width:6%;animation: shou 2s infinite;-webkit-animation: shou 2s infinite;}
.item img.item2{margin-left: 0;padding-bottom: 5%;}
.item img.item3{margin-right: 0;padding-bottom: 2%;}
.item img.item5{padding:5% 0 10% 0;}
.item img.item8{padding:6% 0 0 0;}
.item img.item9{padding:0 0 5% 0;}
.item:nth-child(2) .shou{bottom: 10%;left: 16%;animation-duration:1s;-webkit-animation-duration:1s;}
.item:nth-child(3) .shou{bottom: 2%;left: 26%;}
.item:nth-child(4) .shou{bottom: 10%;right: 9%;animation-duration:1.5s;-webkit-animation-duration:1.5s;}
.item:nth-child(5) .shou{left: 26%;bottom: 8%;}
.item:nth-child(6) .shou{left: 34%;bottom: 11%;animation-duration:2.5s;-webkit-animation-duration:2.5s;}
.item:nth-child(7) .shou{left: 32%;bottom:0;}
.item:nth-child(8) .shou{left:28%;bottom:0;animation-duration:1s;-webkit-animation-duration:1s;}
.item:nth-child(9) .shou{bottom: 0;right:20%;}
.item:nth-child(10) .shou{bottom:14%;left:15%;animation-duration:2.5s;-webkit-animation-duration:2.5s;}
.item:nth-child(11) .shou{left:14%;bottom:0;}
.item:nth-child(12) .shou{right: 25%;bottom: 11%;}
@keyframes shou{0%{transform: scale(0.8);-webkit-transform: scale(0.8);opacity: 0.5;}50%{transform: scale(1.2);-webkit-transform: scale(1.2);opacity:1;}100%{transform: scale(0.8);-webkit-transform: scale(0.8);opacity: 0.5;}}
@-webkit-keyframes shou{0%{transform: scale(0.8);-webkit-transform: scale(0.8);opacity: 0.5;}50%{transform: scale(1.2);-webkit-transform: scale(1.2);opacity:1;}100%{transform: scale(0.8);-webkit-transform: scale(0.8);opacity: 0.5;}}
.last{background: url(../images/bg3.jpg);background-size: 100% 100%;}


.page{width: 100%;height: 100%;position:absolute;background: url(../images/bg.jpg) no-repeat;background-size: 100% 100%;}
#pag1{background-image: url(../images/bg1.jpg);}
#pag3{overflow: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;}
#pag4{background-image: url(../images/bg3.jpg) ;}
.ditu{width: 40%;margin: 0 auto;display: block;}
.bt{width: 70%;display: block;margin: 0 auto;margin-right: 0;position: absolute;right: 0;top: 10px;}


.fanye{-webkit-animation-name: fanye;
    animation-name: fanye; -webkit-animation-duration:1s;
    animation-duration:1s;}
.fanye1{-webkit-animation-name: fanye1;
    animation-name: fanye1; -webkit-animation-duration:1s;
    animation-duration:1s;}
@-webkit-keyframes fanye{
0% {opacity: 1;transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);-webkit-transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);transform-origin: left;-webkit-transform-origin: left;}40%{opacity: 1;}
100% {transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg);-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg); opacity:0;transform-origin: left;-webkit-transform-origin: left;}
}
@keyframes fanye{
0% {opacity: 1;transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);-webkit-transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);transform-origin: left;-webkit-transform-origin: left;}40%{opacity: 1;}
100% {transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg);-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg); opacity:0;transform-origin: left;-webkit-transform-origin: left;}
}
@-webkit-keyframes fanye1{
0% {transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg);-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg); opacity:0;transform-origin: left;-webkit-transform-origin: left;}
100% {opacity: 1;transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);-webkit-transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);transform-origin: left;-webkit-transform-origin: left;}
}
@keyframes fanye1{
0% {transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg);-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-90deg); opacity:0;transform-origin: left;-webkit-transform-origin: left;}
100% {opacity: 1;transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);-webkit-transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg);transform-origin: left;-webkit-transform-origin: left;}
}
.animated {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }


#p2,#p3{display: none;}

.btn{
    pointer-events: auto;
}
.btnClcked{
    transform: scale(0.95);
}

#tipDiv{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    display: none; 
}
#tipTxt{
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: white;
    font-size: 0.32rem;
    left: 50%;
    padding: 0.1rem 0.22rem;
    top: 50%;
    border-radius: 0.15rem;
    transform: translate(-50%,-50%);
    width: 5rem;
    text-align: center;
}

@-webkit-keyframes upmovesed{
    from{opacity: 0;-webkit-transform:translateY(-0.3rem) ;transform:translateY(-0.3rem);}
    to{opacity: 1;-webkit-transform:translateY(0rem) ;transform:translateY(0rem);}
}
.upmoveer2{
    animation:upmovesed 0.8s linear both ;
    -webkit-animation: upmovesed 0.8s linear both ;
}
@-webkit-keyframes upmoves{
    from{opacity: 0;-webkit-transform:translateY(-0.1rem) ;transform:translateY(-0.1rem);}
    to{opacity: 1;-webkit-transform:translateY(0rem) ;transform:translateY(0rem);}
}
.upmoveer{
    animation:upmoves 1.8s linear both ;
    -webkit-animation: upmoves 1.8s linear both ;
}
.upmoveer1{
    animation:upmoves 1.5s linear both ;
    -webkit-animation: upmoves 1.5s linear both ;
}


.iphoneX{
    position: absolute;
    width: 7.5rem;
    height: 14.48rem;
    top: 0rem;
    left: 0rem;
}

/***.music{position:absolute;right:0.1rem;bottom:0.15rem;z-index:30;}
.music span{display: block;width:0.5rem;height:0.5rem;background: url(../images/music.png) no-repeat;background-size: 100% 100%;border-radius:100%; opacity:0.8}
.music.mute span{background-image: url(../images/music-mute.png);opacity: 0.65;}**/
.music{position:absolute;left:20px;top:20px;z-index:30;}
.music span{display: block;width:0.5rem;height:0.5rem;background: url(../images/mus.png) no-repeat;background-size: 100% 100%;border-radius:100%;}
.music.mute{-webkit-animation:music-data 2.5s linear infinite;animation:music-data 2.5s linear infinite;}
@-webkit-keyframes music-data{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes music-data{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}


@-webkit-keyframes top{
	0% {transform: translateX(-60px);-webkit-transform:translateX(-60px) ;}
  50% {transform: translateX(-70px);-webkit-transform:translateX(-70px) ;}
  100% {transform: translateX(-60px);-webkit-transform:translateX(-60px) ;}
}
@keyframes top{
	0% {transform: translateX(-60px);-webkit-transform:translateX(-60px) ;}
  50% {transform: translateX(-70px);-webkit-transform:translateX(-70px) ;}
  100% {transform: translateX(-60px);-webkit-transform:translateX(-60px) ;}
}
@-webkit-keyframes top1{
	0% {transform: translateX(-10px);-webkit-transform:translateX(-10px) ;}
  50% {transform: translateX(10px);-webkit-transform:translateX(10px) ;}
  100% {transform: translateX(-10px);-webkit-transform:translateX(-10px) ;}
}
@keyframes top1{
	0% {transform: translateX(-10px);-webkit-transform:translateX(-10px) ;}
  50% {transform: translateX(10px);-webkit-transform:translateX(10px) ;}
  100% {transform: translateX(-10px);-webkit-transform:translateX(-10px) ;}
}
.arrow1{
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    background: url(../images/btn.png) no-repeat;
    background-position: center center;
    width: 130px;
    background-size:76%;
    height: 30px;
    z-index: 100;
  animation:top 2s infinite;
-webkit-animation:top 2s infinite;
}
.arrow{
    padding-bottom: 0.2rem; 
    background: url(../images/btn.png) no-repeat;
    background-position: center top;
    width: 120px;margin: 0 auto;
    background-size:100%;
    height: 30px;
  animation:top1 2s infinite;
-webkit-animation:top1 2s infinite;margin-top: -55px;
margin-left: 40px;
float: left;
}
.arrow.arrowHide{opacity: 0;}
.back{width: 120px;
    height: 40px;
    background: url(../images/back.png) no-repeat center top;
    background-size: 100%;
    margin: 0 auto;
    margin-top: -55px;
    margin-right:30px;
    transform: translateX(0);
    -webkit-transform: translateX(0);}