@charset "utf-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
menu,
tr,
th,
td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
a:active { outline: none; }
body { color: black; background: white; }
ol,
ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption,
th,
td { text-align: left; font-weight: normal; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; }
blockquote,
q { quotes: "" ""; }
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.fl { float: left; }
.fr { float: right; }
*{ -webkit-tap-highlight-color: transparent; -webkit-appearance: none;}
input {-webkit-appearance: none;}


html, body {height: 100%; overflow: hidden; position: relative; margin: 0; padding: 0; border: 0; outline: 0;}

.wrapper{ width: 7.5rem; margin: 0 auto; font-family:"microsoft yahei"; height: 100%;}
.swiper-container {width: 100%; height: 100%;}


.swiper-slide{ margin-bottom: 0!important;}
.swiper-slide img,.wrap_txt i img,.wrap_wolf img,.wrap_tit img,.wrap_wolf1 img,.wrap_wolf2 img{ height: 100%; width: 100%; }
.wrap_logo{ position: absolute; top:1rem; width: 4.95rem; height:2.08rem; left: 1.275rem;}
.wrap_tit{ opacity: 0; width:5.6rem; height:0.35rem; left: 0.95rem; top:3.2rem; position: absolute;}
.wrap_txt{ padding: 0 0.75rem 0 1.4rem; color: #ffffff; font-size: 0.28rem; line-height:0.48rem; position: absolute; left: 0px;}
.wrap_txt i{ width:0.26rem; height:0.16rem; position: absolute; left: 0.96rem; top:0; display: block;}
.wrap_txt.t1{top:14.28rem;}
.wrap_txt.t2{top:15.44rem;}
.wrap_txt.t3{top:16.6rem;}
.wrap_txt.t4{top:17.76rem;}


.wrap_txt1{ padding: 0 0.55rem 0 0.9rem; color: #ffcccc; font-size: 0.28rem; line-height:0.48rem; position: absolute; left: 0px;}
.wrap_txt1 em{ color: #fff;}
.wrap_txt11{ padding: 0 0.55rem 0 0.6rem; color: #ffffff; font-size: 0.28rem; line-height:0.48rem; position: absolute; left: 0px; top:1.5rem;}

.wrap_txt1 i{ width:0.26rem; height:0.16rem; position: absolute; left: 0.55rem; top:0; display: block;}
.wrap_txt1.t11{top:2.1rem;}
.wrap_txt1.t12{top:3.06rem;}
.wrap_txt1.t13{top:4.02rem;}
.wrap_txt1.t14{top:5.46rem;}
.wrap_txt1.t15{top:5.94rem;}
.wrap_txt1.t16{top:6.9rem;}
.wrap_txt1.t17{top:8.34rem;}
.wrap_txt1.t18{top:9.3rem;}
.wrap_txt1.t19{top:10.26rem;}

.wrap_txt1.t20{top:0.4rem;}
.wrap_txt1.t21{top:2.32rem;}
.wrap_txt1.t22{top:3.76rem;}
.wrap_txt1.t23{top:4.72rem;}
.wrap_txt1.t24{top:6.64rem;}
.wrap_txt1.t25{top:7.6rem;}
.wrap_txt1.t26{top:8.56rem;}
.wrap_txt1.t27{top:9.52rem;}
.wrap_txt1.t28{top:10rem;}
.wrap_txt1.t29{top:10.96rem;}


.wrap_txt1.t30{top:1.6rem;}
.wrap_txt1.t31{top:4.96rem;}
.wrap_txt1.t32{top:9.76rem;}


.wrap_txt1.t40{top:1.6rem;}
.wrap_txt1.t41{top:3.04rem;}
.wrap_txt1.t42{top:4.96rem;}
.wrap_txt1.t43{top:7.36rem;}


.wrap_wolf{ position: absolute; bottom: 0px; left: 0px; width:100%; height:2.32rem;}
.wrap_wolf1,.wrap_wolf2{position: absolute; bottom: 0px; left: 3.065rem; width:1.37rem; height:2.5rem;}




.wrap_tit2{width:2.94rem; height:0.58rem; position: absolute; left: 2.28rem; top:0.3rem;}
.wrap_tit3{width:3.54rem; height:0.58rem; position: absolute; left: 1.98rem; top:0.3rem;}
.wrap_tit4{width:2.34rem; height:0.58rem; position: absolute; left: 2.58rem; top:0.3rem;}
.wrap_tit2 img,.wrap_tit3 img,.wrap_tit4 img{ width:100%; height:100%;}

.wrap_bot{ position: absolute; bottom:0.1rem; width:0.56rem; left: 3.47rem;}
.bm_tit{ position: absolute; top:0.8rem; width: 6.3rem; left: 0.6rem;}



.wrap_con{ position: absolute; width:6.4rem; overflow: hidden;}
.wrap_con dt{ height:0.7rem; overflow: hidden; line-height:0.7rem; padding-left: 0.72rem; font-size:0.4rem; color: #ffffff; width:10rem;}
.wrap_con dt div{ float: left;}
.wrap_con dt div.line{ height:0.22rem;}
.wrap_con dt div.line img{height:0.22rem; width:3.783rem;}
.wrap_con dt span{ font-size:0.3rem; color: #ffcccc;}
.wrap_con dt i{display: block; position: absolute; left: 0px; top:0px; width:0.68rem; height:0.7rem;}
.wrap_con dt i img{ width:100%; height:100%;}
.wrap_con dd{ width:6.4rem; display:table; min-height:1.34rem; padding: 0.2rem 0 0;}
.wrap_con dd .div_img{ width:1.6rem; vertical-align: middle; display: table-cell;}
.wrap_con dd .div_img img{ width:1.25rem; height:1.34rem; margin: 0 auto; display: block;}
.wrap_con dd .div_txt{ color: #ffcccc; width:4.8rem;font-size:0.28rem; line-height:0.3rem; vertical-align: middle; display: table-cell;}


.wrap_con1{left: 10.55rem; top:1.5rem; }
.wrap_con2{left: 10.55rem; top:3.8rem; }
.wrap_con3{left: 10.55rem; top:6.1rem; }
.wrap_con4{left: 10.55rem; top:8.3rem; }

.wrap_con5{left: 10.55rem; top:0.7rem; }
.wrap_con6{left: 10.55rem; top:3.8rem; }
.wrap_con7{left: 10.55rem; top:7.4rem; }

.wrap_con8{left: 10.55rem; top:0.7rem; }
.wrap_con9{left: 10.55rem; top:4.2rem; }
.wrap_con10{left: 10.55rem; top:8.3rem; }

.wrap_con11{left: 10.55rem; top:0.7rem; }
.wrap_con12{left: 10.55rem; top:6.3rem; }

.wrap_con13{left: 10.55rem; top:0.7rem; }
.wrap_con14{left: 10.55rem; top:5.2rem; }


.wrap_con15{left: 10.55rem; top:0.7rem; }
.wrap_con16{left: 10.55rem; top:3.3rem; }
.wrap_con17{left: 10.55rem; top:6.3rem; }

.wrap_con18{left: 10.55rem; top:0.7rem; }
.wrap_con19{left: 10.55rem; top:3.6rem; }



.wrap_tab{ overflow: hidden; position: absolute; left: 0.55rem; top:1.6rem; width:6.34rem; border-left:#ffffff 0.03rem solid;border-right:#ffffff 0.03rem solid;border-top:#ffffff 0.03rem solid;}
.wrap_tab ul{ width:6.5rem;}
.wrap_tab ul li{ width:1.58rem; height:0.74rem; line-height:0.74rem; text-align: center; float: left; font-size:0.28rem; color: #fff; border-bottom:#ffffff 0.03rem solid; border-right:#ffffff 0.03rem solid;}

.wrap_a{ width:2rem; height:0.4rem; position: absolute; left: 2.75rem; bottom: 1rem; display:block;}
.wrap_a img{ width:100%; height:100%;}

.swiper-slide-active .wrap_bot{
	-webkit-animation: start 1.5s infinite;
	animation: start 1.5s infinite ;
}
@keyframes start {
 50% {
opacity: .1;
transform: translate(0, 10px);
}
}

@-webkit-keyframes start {
 50% {
opacity: .1;
transform: translate(0, 10px);
}
}


.swiper-slide-active .wrap_logo img{
	-webkit-animation: start2 1.5s linear;
	animation: start2 1.5s linear;  
}
@keyframes start2 {
 from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}


@-webkit-keyframes start2 {
 from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.swiper-slide-active .wrap_tit{
  transition: all 1s ease-out 1s;
  -webkit-transition: all 1s ease-out 1s;
  opacity: 1;
}



.swiper-slide-active .wrap_wolf2{
  transition: all 1s ease-out 3s;
  -webkit-transition: all 1s ease-out 3s;
  bottom: -70px;}


.swiper-slide-active .wrap_txt.t1{ top:4.58rem; transition: all 0.4s ease-out 1.4s;}
.swiper-slide-active .wrap_txt.t2{ top:5.74rem; transition: all 0.4s ease-out 1.8s;}
.swiper-slide-active .wrap_txt.t3{ top:6.9rem;  transition: all 0.4s ease-out 2.2s;}
.swiper-slide-active .wrap_txt.t4{ top:8.06rem; transition: all 0.4s ease-out 2.6s;}


.swiper-slide-active .wrap_con1,
.swiper-slide-active .wrap_con5,
.swiper-slide-active .wrap_con8,
.swiper-slide-active .wrap_con11,
.swiper-slide-active .wrap_con13,
.swiper-slide-active .wrap_con15,
.swiper-slide-active .wrap_con18
{ left: 0.55rem; transition: all 0.4s ease-out .4s;}
.swiper-slide-active .wrap_con2,
.swiper-slide-active .wrap_con6,
.swiper-slide-active .wrap_con9,
.swiper-slide-active .wrap_con12,
.swiper-slide-active .wrap_con14,
.swiper-slide-active .wrap_con16,
.swiper-slide-active .wrap_con19
{ left: 0.55rem; transition: all 0.4s ease-out .8s;}
.swiper-slide-active .wrap_con3,
.swiper-slide-active .wrap_con7,
.swiper-slide-active .wrap_con10,
.swiper-slide-active .wrap_con17
{ left: 0.55rem; transition: all 0.4s ease-out 1.2s;}
.swiper-slide-active .wrap_con4{ left: 0.55rem; transition: all 0.4s ease-out 1.6s;}