@charset "UTF-8";

body {font-family:Microsoft Yahei, STHeiti, Droid Sans Fallback, Sans-serif; font-size:16px; font-weight:normal; color:#333;}
* {margin:0; padding:0; border:0;}
ul,ol,li{ list-style: none;}
a{ text-decoration:none; color:#333;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{ text-decoration:none; color:#333;}
img{ vertical-align:middle;}
section{ display:block;}
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear{clear:both; font-size:0; height:0; line-height:0; overflow:hidden;}

.main{width:100%; height:100%; overflow: hidden; position:relative;}
.page{ width:100%; height:100%; font-size:1em; overflow:hidden; position:relative;}

/* 改变动画的效果方式*/
* {
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

/*箭头指示引导1*/
.arrow  { position:absolute; top:95%; left:50%; margin:-10px 0 0 -22px; z-index:20;width:45px; height:20px; background:url(../images/arrow.png) no-repeat; background-size:100% auto;
-webkit-animation: start 1.5s infinite ease-in-out;
     -moz-animation: start 1.5s infinite ease-in-out;
          animation: start 1.5s infinite ease-in-out;
}

@-webkit-keyframes start {
    0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
    60% {opacity: 1;-webkit-transform: translate(0,0);}
    100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
    0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
    60% {opacity: 1;-moz-transform: translate(0,0);}
    100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
    0%,30% {opacity: 0;transform: translate(0,10px);}
    60% {opacity: 1;transform: translate(0,0);}
    100% {opacity: 0;transform: translate(0,-8px);}
}

/*箭头指示引导2*/
.arrow2{ position:absolute; top:95%; left:50%; margin:-10px 0 0 -22px;z-index:20; width:45px; height:20px; background:url(../images/arrow2.png) no-repeat; background-size:100% auto;
-webkit-animation: start2 1.5s infinite ease-in-out;
     -moz-animation: start2 1.5s infinite ease-in-out;
          animation: start2 1.5s infinite ease-in-out;
}

@-webkit-keyframes start2 {
    0%,30% {opacity: 0;-webkit-transform: translate(0,-8px);}
    60% {opacity: 1;-webkit-transform: translate(0,0);}
    100% {opacity: 0;-webkit-transform: translate(0,10px);}
}
@-moz-keyframes start2 {
    0%,30% {opacity: 0;-moz-transform: translate(0,-8px);}
    60% {opacity: 1;-moz-transform: translate(0,0);}
    100% {opacity: 0;-moz-transform: translate(0,10px);}
}
@keyframes start2 {
    0%,30% {opacity: 0;transform: translate(0,-8px);}
    60% {opacity: 1;transform: translate(0,0);}
    100% {opacity: 0;transform: translate(0,10px);}
}

/* page1 */
#page1{ background:url(../images/bg_body.jpg) repeat; position: relative;}
.logo{ padding:5% 20px 3%; text-align:right;}
.logo img{width:136px;}
.date{ padding:3% 30px 0 0;}
.date li{ line-height:24px; font-size:1em; color:#323a47; text-align:right;}
.date li b{ color:#ff7f52;}
.content_p1{ padding-bottom:8%;background:url(../images/map.jpg) center bottom no-repeat; background-size:100% auto;}
.content_p1 .h1{ padding:3% 0 0 6%;}
.content_p1 .h1 img{width:70%;}
.content_p1 ul{ margin:3% 3% 0 6%; padding-left:5px;  line-height:22px; border-left:2px solid #323a47; font-size:1em;}
#page1 .btn_play{ width:23px; height:26px; background:url(../images/open.png) no-repeat; background-size:100% auto; margin:0 auto;}
#page1 .btn_play.pause{ width:23px; height:26px; background:url(../images/close.png) no-repeat; background-size:100% auto;}
#page1 .chupin{ position:absolute; top:86%; left:50%; margin-left:-60px; font-size:1em; color:#323a47; text-align:center;}
#page2 {background: url(../images/bg_01.jpg) center center no-repeat; position: relative; background-size:100% 100%;}
.gaoguixuetong{width:100%; padding:3% 0 10%; background:#000; font-size:1.875em; color:#fff; text-align:center; position:absolute; bottom:0; opacity:0.7;}
#page3 { background:url(../images/bg_body.jpg) repeat; position: relative;}
#page4 {background: url(../images/bg_02.jpg) center center no-repeat; position: relative; background-size:100% 100%;}
#page5 {background:url(../images/bg_body.jpg) repeat; position: relative;}
#page6 {background: url(../images/bg_03.jpg) center center no-repeat; position:relative; background-size:100% 100%;}
#page7 {background:url(../images/bg_body.jpg) repeat;position: relative;}
#page8 {background:url(../images/bg_body.jpg) repeat; position:relative;}
.qrcode{width:180px; display:block; margin:20% auto 10%;}
.jiemi{width:230px; margin:0 auto; padding-left:5px; border-left:2px solid #323a47; }
.jiemi li{ line-height:24px; font-size:1em; color:#323a47;}

#page3 .btn_play, #page5 .btn_play, #page7 .btn_play, #page8 .btn_play{ width:23px; height:26px; background:url(../images/open.png) no-repeat; background-size:100% auto; position:absolute; right:10px; top:4px; z-index:10;}
#page3 .btn_play.pause, #page5 .btn_play.pause, #page7 .btn_play.pause, #page8 .btn_play.pause{ width:23px; height:26px; background:url(../images/close.png) no-repeat; background-size:100% auto;}


.device {
  width: 100%;
  height: 350px;
  padding:35px 0 45px;
  position: relative;
}
.swiper-container {
  height: auto;
  width: 100%;
}
.content-slide {
  padding: 20px;
  color: #fff;
}
.title {
  font-size: 25px;
  margin-bottom: 10px;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:5px;
  width: 100%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url(../images/dot.png) no-repeat; background-size:100% 100%;
  margin: 0 10px;
  cursor: pointer;
}
.swiper-active-switch {
  background: url(../images/dot2.png) no-repeat; background-size:100% 100%;
}

@media screen and (max-width:320px){
.content_p1{ padding-bottom:3%;}
.device {padding:35px 0;}
}