/*样式重置可删除 start*/
body,form,div,span,ul,ol,li,p,pre,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,a,fieldset,legend,address,label,textarea,select,input,figure,table,th,td,b,i{margin:0;padding:0;}
fieldset,img{border:0;}
ul,li,ol{list-style:none outside none;}
a{text-decoration:none;}
a:hover{ text-decoration:underline;}
a:focus,input,button,select,textarea{outline:none;}

h1,h2,h3,h4,h5,h6{ font-size:100%; font-variant: normal;}
input,select,img{ vertical-align:middle;}
legend{ display:none;}
textarea{resize:none;}
em,i{font-style:normal;}
table{border-collapse:separate;border-spacing:0;}
/*样式重置可删除 end*/

.swiper-slide .swiper-lazy{ max-width:100%; max-height: 100%; }

html, body { position: relative; height: 100%;}
body { background: #eee; }

.clear{ clear:both; height:0px; overflow:hidden;}
.clearfix{zoom:1;}
.clearfix:after{clear:both; content:"."; display:block ;height:0; line-height:0; visibility:hidden; overflow:hidden;}

.txt-center{ text-align:center; }

.bg-white{ background-color:#fff; }
.gray-9a{color:#9a9a9a;}

.p20{ padding:20px; }
.pb10{ padding-bottom:10px; }
.mt20{ margin-top:20px; }

.f18{ font-size:18px; }

.ver-middle{ vertical-align:middle; }



/* swiper 图片展示 */
.swiper-container { width: 100%; height: 100%;}
.swiper-container .advbox{ position: absolute; left: 50%; top: 50%; width: 8%; transform: translate(-50% ,-50%);}
.swiper-slide { 
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#wrapper-swiper{ position:relative; background-color:#000; }
.wrapper-detail{ position:absolute; background:url(../images/icon-details.png) no-repeat 0 0; background-size:auto 100%; z-index: 10; color: #fff; right:20px; top:20px; padding-left: 30px;}
.wrapper-more{ position:absolute; left:50%; transform:translate(-50%,0); z-index: 10; width:40px; height:16px; bottom:10px;}
.wrapper-more span{ display:block; width:100%; height:100%; background:url(../images/arrow.png) no-repeat 0 0; background-size:100% auto; position: absolute; left: 0; top: 0; animation:mymove 1s infinite alternate;
-moz-animation:mymove 1s infinite alternate; /* Firefox */
-webkit-animation:mymove 1s infinite alternate; /* Safari and Chrome */
-o-animation:mymove 1s infinite alternate; /* Opera */}
.swiper-slide .adv-ms{position: absolute; left: 50%; top: 50%; color: #fff;}
.swiper-slide .adv-ms:hover{ text-decoration:none; }
.swiper-slide .adv-ms span.circle{ display: inline-block; border-radius: 50%; border:2px solid #fff; width: 10px; height: 10px; position: relative; }
.swiper-slide .adv-ms i{ border-radius: 50%; width:4px; height: 4px; background: #fff; display: inline-block; position: absolute; left: 3px; top:3px;  }
#wrapper-swiper #goBack{ width:20px; height: 20px; overflow: hidden; position: absolute; left:20px; top: 20px; background: url(../images/icon-goback.png) no-repeat 0 0; background-size: 100% auto; z-index: 10;}



/* 提示遮罩层 */
.wrapper-shadow{ position: absolute; right: 0; top: 0; display: none; color: #fff; width: 100%; height: 100%; z-index: 99999; background-color: rgba(0, 0, 0, 0.75);}
.wrapper-shadow-inner{ width: 50%; position: absolute; top: 0; bottom: 0; left: 50%; transform:translate(-50%,0);}
.wrapper-shadow-inner:before, .wrapper-shadow-inner:after{position: absolute; width: 100%; color: #fff;  text-align: center;  background-position: center top;  background-repeat: no-repeat;  margin: 0 auto;}
.wrapper-shadow-inner:before{bottom: 55%;
    background-image: url(../images/img-left-right.png);
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    content: "左右横滑查看图片";
    padding-top: 80px;
}
.wrapper-shadow-inner:after{bottom: 10%;
    background-image: url(../images/img-top.png);
    -webkit-background-size: auto 70%;
    background-size: auto 70%;
    background-position: center top;
    content: "上滑查看更多内容";
    padding-top: 70px;
}

/*更多图片*/
#wrapper-morepic{ padding:10px 0; }
#wrapper-morepic h3{ font-weight:normal; border-left:3px solid #116fb7; margin:0 0 10px 10px; padding-left: 10px; line-height: 1.0;}
.wrapper-article{ padding: 0 5px; }
.wrapper-article .lazy{ width:100%; height:auto; }
.wrapper-article ul ，.wrapper-adv dl ,.wrapper-relimg ul{display: flex; flex-direction: row; flex-wrap: wrap;}
.wrapper-article li{ width:33.3%; float:left;}
.wrapper-article a{ display:block; padding:0 10px 10px 10px; }
.wrapper-article .img{ position:relative; }
.wrapper-article .img span{ position:absolute; right:10%; bottom:5%; background-color:rgba(0,0,0,0.7); color:#fff; line-height: 1.0; border-radius: 5px; padding: 3px 5px; font-size: 12px;}
.wrapper-article p{color:#383838; line-height: 1.8;}
.btn-more{ border-top:1px solid #ececec; margin:0 10px; text-align:center; padding: 5px;}
.btn-more a{ color:#0f7fc9; }
.btn-more img{ height: 14px; }

/*广告位*/
.wrapper-adv{ padding:15px; }
.wrapper-adv dl{position:relative; }
.wrapper-adv dt{ float:left; width:33%; box-sizing: border-box;}
.wrapper-adv dt img{ width:100%; height:auto;}
.wrapper-adv dd{ width:64%; box-sizing: border-box; position:absolute; right:0; top:0; height:100%;}
.wrapper-adv dd h3{font-weight: normal;}
.wrapper-adv dd .close-box{ position:absolute; left:0; bottom:0; width:100%; color: #ccc;}
.wrapper-adv dd .close-adv{ width:14px; height:14px; background:url(../images/close.png) no-repeat center center; background-size:100% auto; position:absolute; right:0; top:50%; transform:translate(0 ,-50%);}



/*相关图片*/
.wrapper-relimg{ padding:5px 10px; }
.wrapper-relimg h3{ color:#999999; font-weight:normal; padding-left:5px; padding-top:5px; }
.wrapper-relimg li{ float:left; width:33%; box-sizing: border-box; padding:5px; }
.wrapper-relimg a{ display:block; }
.wrapper-relimg img{ width:100%; height:auto; }

@media screen and (max-width:375px){

  body{ font-size:14px; }
  .p20{ padding:10px; }
  .pb10{ padding-bottom:5px; }
  .mt20{ margin-top: 10px;}

  .wrapper-article a{padding: 0 5px 5px 5px;}
  .wrapper-article .img span{border-radius: 4px; padding: 2px; font-size: 10px;}

  .wrapper-adv dd h3{font-size: 12px;}
  .wrapper-adv dd .close-box{ font-size: 10px; }
  .wrapper-adv dd .close-adv{ width:10px; height:10px; }
  .wrapper-shadow-inner:before{ background-size: 80% auto; }

}

@media screen and (min-width:376px) and (max-width:414px){

  .wrapper-shadow-inner:before{ padding-top: 100px;}
  .wrapper-shadow-inner:after{ padding-top: 80px;}
}

@media screen and (min-width:415px) and (max-width:520px){
  .wrapper-shadow-inner:before{ padding-top: 120px;}
  .wrapper-shadow-inner:after{ padding-top: 100px;}
}

@media screen and (min-width:521px) and (max-width:639px){
  .wrapper-shadow-inner:before{padding-top: 120px; background-size: 80% auto; }
  .wrapper-shadow-inner:after{ padding-top: 100px;}
}

@media screen and (min-width:415px) and (max-width:639px){
/*.wrapper-detail{ right:20px; top:20px; padding-left: 30px;}
.wrapper-more{width:40px; height:16px; bottom:10px;} */
}

@media screen and (min-width:640px) and (max-width:719px){
  .wrapper-shadow-inner:before{padding-top: 120px; background-size: 60% auto; }
  .wrapper-shadow-inner:after{ padding-top: 100px;}
}

@media screen and (min-width:720px) and (max-width:749px){
  .wrapper-shadow-inner:before{padding-top: 120px; background-size: 60% auto; }
  .wrapper-shadow-inner:after{ padding-top: 100px;}
}

@media screen and (min-width:750px) and (max-width:799px){
  .wrapper-shadow-inner:before{padding-top: 200px; background-size: 100% auto; }
  .wrapper-shadow-inner:after{ padding-top: 200px;}
}

@media screen and (min-width:800px){
  .wrapper-shadow-inner:before{padding-top: 200px; background-size: 60% auto; }
  .wrapper-shadow-inner:after{ padding-top: 200px;}
}





@keyframes mymove{
  0% {top:30%;}
  50% {top:0;}
  100% {top:-30%;}
}

@-moz-keyframes mymove{/* Firefox */
  0% {top:30%;}
  50% {top:0;}
  100% {top:-30%;}
}

@-webkit-keyframes mymove {/* Safari 和 Chrome */
  0% {top:30%;}
  50% {top:0;}
  100% {top:-30%;}
}

@-o-keyframes mymove {/* Opera */
  0% {top:30%;}
  50% {top:0;}
  100% {top:-30%;}
}