@charset "utf-8";
*{ margin:0; padding:0; box-sizing: border-box;}
body,p,h1,h2,h3,h4,h5,table,ul,li,form,input{ margin:0; padding:0; color:#000; font-family:"Microsoft Yahei","微软雅黑"; line-height: 1.8; }
body,p{ font-size:14px; border:none;}
a{ font-size:14px; color:#999; text-decoration:none; border:none; padding:0; margin:0;}
table{border-collapse:collapse;}
img{ border:0; margin:0; padding:0;}
ul,li{ list-style:none; border:0; margin:0; padding:0;}
dl,dt,dd{ margin:0; padding:0; -webkit-margin-start:0;}
h1,h2,h3,h4,h5{ font-weight:normal; font-size:12px; display:block;}
b{ font-weight:normal;}
table,tr,td{ border-spacing:0;}
em,i,b{ font-style:normal;}
p{ line-height: 170%; color: #555; font-size: 14px;}
input{ border: none; background: none; }
figcaption{ display: block;}
input:focus,button:focus{ outline: none; }
::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #dfdfdf; } 
::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px;color: #dfdfdf; } 
.fl{float:left;}
.fr{float:right;}
.clearfix{*zoom:1;} 
.clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}

button{ background: none; border:none;}


.wrap{ max-width: 750px; width: 100%; margin: 0 auto;}


.header{ display: flex; justify-content: space-between; padding: 0 15px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; 
top: 0; max-width: 750px; width: 100%; margin: 0 auto; height: 50px; z-index: 333; background: #fff; border-bottom: 1px solid #F5F5F5;}
.header .logo img{ height: 40px; vertical-align: middle;}
.header-right{ display: flex; align-items: center; height: 50px;}
.header-right .zoom{ height: 50px; display: flex; align-items: center; padding-right: 20px;}
.header-right .zoom img{ height: 16px; width: 16px; display: block;}
.bar-btn{ cursor: pointer;}
.bar-btn span{ margin-bottom:6px; transition: all 0.6s; display: block; width: 30px; background: #068cf6; height: 2px;}
.bar-btn .span2{ width: 26px;}
.bar-btn .span3{  margin-bottom: 0;}
.bar-btn.on .span1{ transform: rotate(45deg) translate(5px,6px);}
.bar-btn.on .span2{ transform: rotate(-45deg);}
.bar-btn.on .span3{ transform: rotate(-45deg); opacity: 0;}


.search-box{ position: fixed; top: 50px; background: #597aea; left: 0; right: 0; z-index: 333; height: 100px;  display: flex; justify-content: center; align-items: center;
visibility: hidden; padding: 0 20px; transition: all 0.6s; filter: blur(30px); opacity: 0;  max-width: 750px; width: 100%; margin: 0 auto;}
.search-box .in{ height: 45px; line-height: 45px; width: 80%; background: #fff; padding-left: 10px;}
.search-box button{ height: 45px; line-height: 45px; width: 70px; background:#f8b62b; display: block; color: #fff; flex-shrink: 0;}
.search-box.on{ opacity: 1; filter: blur(0px); visibility: visible;}


.subnav{ background: #f8b62b; position: fixed; top: 50px; z-index: 3333; right: 0; left: 0;  bottom: 0; padding: 20px 0;
transition: all 1s; transform: translateX(-100%); visibility: hidden; opacity: 0; filter: blur(30px); max-width: 750px; width: 100%; margin: 0 auto;}
.subnav li a{ display: block; font-size: 18px; color: #fff; padding: 10px 0; text-align: center; font-weight: bold;}
.subnav.on{ opacity: 1; visibility: visible; transform: none; filter: blur(0px);}

.banner{  margin-top: 50px;}
.banner img{ display: block; max-width: 100%;}
.banner .swiper-pagination-bullet{ background: #fff; }

.index-link{ padding: 20px 5px 5px 5px; display: flex; border-bottom: 1px solid #F5F5F5; margin-bottom: 20px; justify-content: space-around; flex-wrap: wrap;}
.index-link a{ display: block; flex-grow: 1; width: calc(100%/3); margin-bottom: 15px;}
.index-link img{ display: block; height: 45px; width: 45px; margin: 0 auto;}
.index-link p{ font-size: 14px; text-align: center; margin-top: 10px;}
.index-jinghua{ display: flex; align-items: center; padding: 0 15px; }
.index-jinghua .div1 { display: flex;}
.index-jinghua .div1 span{height: 22px;background-color: #f5f5f5; border-radius: 5px; display: block; color: #ff5912; font-size: 12px; text-align: center;
width: 40px; margin-left: 3px; line-height: 22px;}
.index-jinghua .div1 img{ display: inline-block; vertical-align: middle; height: 20px;}
.index-jinghua .div2{ height: 20px; padding-left: 10px;  padding-right: 10px; flex-grow: 1; overflow: hidden;}
.index-jinghua .div2 li a{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; line-height: 20px; height: 20px;
color: #888888; font-size: 14px;}


.hf{ display: block; padding:15px 15px 20px 15px; position: relative;}
.hf img{ object-fit: cover;display: block; width: 100%;} 
/* .hf .img{ object-fit: cover;display: block; width: 100%;} 
.hf .hf-alink{width: 26vw;	height:6vw; background-image: linear-gradient(90deg,#f64347 0%,#f66e32 100%),linear-gradient(#3955d6,#3955d6);background-blend-mode: normal,normal;border-radius: 6vw;; display: block; color: #fff; font-size: 3vw; text-align: center; line-height: 6vw; position: absolute; bottom:3vw; left: 50%; transform: translateX(-50%);} */

.index-about{ padding: 25px 15px; border-top: 10px solid #F5F5F5; position: relative;  border-bottom: 10px solid #F5F5F5;}
.index-about .img2{ display: block; width: 100%; height: auto; margin-top: 10px;}
.index-about img{width:100%;}
.index-about h3{ color: #333333; font-size: 20px; text-align: center; margin-bottom: 10px;}
.index-about .img1{ position: absolute; top: 10px; right: 20px; max-width: 100%; height: auto; width: 60px; height: auto;}
.index-about p{ color: #666666; font-size: 14px; line-height: 30px;}

.index-zixun { padding: 25px 15px;  border-bottom: 10px solid #F5F5F5;}
.index-zixun .tab-hd ul{ display: flex; border-bottom: 1px solid #F5F5F5;}
.index-zixun .tab-hd li{ width: 50%; font-weight: bold; font-size: 18px; color: #141418; position: relative; text-align: center; padding-bottom: 10px;}
.index-zixun .tab-hd li.on{ color: #597aea;}
.index-zixun .tab-hd li::before{ content: ''; position: absolute; display: block; left: 30%; right:30%; height: 3px; transform-origin: center;
transform:scale(0,1); transition: all 0.36s; background: #597aea; bottom: 0;}
.index-zixun .tab-hd li.on::before{ transform: scale(1);}
.index-zixun .tab-pal { padding-top: 15px;}
.index-zixun .tab-pal li a{ display: flex; justify-content: space-between; padding: 10px 0; border-bottom:1px dashed #F5F5F5; align-items: center;}
.index-zixun .tab-pal li p{ color: #141418; font-size: 14px; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; line-height: 1;}
.index-zixun .tab-pal li span{background-color: #f8b62b; font-size: 12px; color: #fff; flex-shrink: 0;
	border-radius: 25px; display: block; height: 25px; line-height: 25px; text-align: center; width: 100px;}
.morebtn{ display: block; background-color: #597aea;border-radius: 40px; width: 130px; height: 40px; text-align: center; line-height: 40px; color: #fff; margin: 20px auto 0 auto;}

.index-pets{ padding: 25px 15px 35px 15px;}
.index-pets h3{ background: url(../images/titlebg.png) no-repeat center; background-size: 100% auto; width: 89vw; margin-left: auto; margin-right: auto;
	height: 12vw; color: #fff; font-size: 18px; text-align: center; line-height: 10vw; margin-bottom: 20px; max-width: 100%;} 
.index-pets img{ display: block; max-width: 100%;}


.height50{ height: 50px;}
.fixbttom{ position: fixed; bottom: 0; left: 0; right: 0; height: 50px; display: flex; justify-content: space-around; background: #068cf6; max-width: 750px; margin: 0 auto; align-items: center; z-index: 333;}
.fixbttom img{ display: block; height: 20px; width: 20px; margin:0 auto;}
.fixbttom p{ font-size: 13px; color: #fff; text-align: center; line-height: 1; margin-top: 5px;}


/* 列表 */
.neibanner{ margin-top: 50px;}
.neibanner img{ display: block; width: 100%; height: auto;}

.listpage{ padding: 25px 15px; background: #f5f7ff;}
.listpage li a{ display: flex; background: #fff; height: 50px; margin-bottom: 15px; align-items: center;}
.listpage li span{ background: #068cf6; display: block; color: #fff; font-size: 18px; text-align: center; line-height: 50px; width: 50px; flex-shrink: 0;}
.listpage li p{ flex-grow: 1; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}  
.listpage li div{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: #c3c3c3; padding: 0 5px; 
height: 50px; flex-shrink: 0; width: 55px;}
.listpage li strong{ color: #fff; font-size: 15px;  display: block; white-space: nowrap; line-height: 1;}
.listpage li b{ color: #fff; font-size: 12px; display: block; white-space: nowrap; line-height: 1; margin-top: 5px;}
.fenye{ display: flex; align-items: center;  padding-top: 25px; justify-content: space-around; padding-bottom: 30px;}
.fenye a{ border-radius: 100%; display: block; height: 30px; width: 30px; background: #fff; border:1px solid #E0E0E0; text-align: center; line-height: 30px;
 flex-shrink: 0;} 
.fenye .span{ font-size: 12px; color: #333; border:1px solid #E0E0E0; border-radius: 30px; height: 30px; background: #fff; line-height: 30px; padding: 0 10px;
 width: 70px; flex-shrink: 0; text-align: center;}
 
 .detailpage{ padding: 25px 15px;}
.detailpage .detailtext img{width:100%;}
  video{ object-fit: cover;}
 .detail-tou h3{ text-align: center; color: #000; font-weight: bold; font-size: 18px;}
 .detail-tou p{ font-size: 14px; color: #888; text-align: center;}
 .detail-tou p span{ display: inline-block; padding:10px;}
 .fenpian{ display: flex; justify-content: space-between; padding: 25px 0 0 0; align-items: center; border-top: 1px solid #f5f5f5; padding-top: 15px; margin-top: 15px;}
 .fenpian div {width: 70%; padding-right: 10px;}
 .fenpian div a{ display: block; font-size: 14px; color: #555; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 
 .fenpian .backlist{ display: block; width: 100px; height: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 14px; background: #068cf6;
 border-radius: 40px; flex-shrink: 0; }
 .fenpian .backlist img{ display: inline-block; vertical-align: middle; height: 12px; margin-right: 5px;}
 
 
 .fenlei{ display: flex; padding: 20px 15px 0 15px; border-bottom: 1px solid #f5f5f5;}
 .fenlei a{ width: 50%; font-weight: bold; font-size: 18px; color: #141418; position: relative; text-align: center; padding-bottom: 10px; display: block;}
 .fenlei a.on{ color: #597aea ;}
 .fenlei a::before{ content: ''; position: absolute; display: block; left: 30%; right:30%; height: 3px; transform-origin: center;
 transform:scale(0,1); transition: all 0.36s; background: #597aea; bottom: 0;}
 .fenlei a.on::before{ transform: scale(1);}

 .newspage { padding: 25px 15px;}
 .newspage li a{ display: flex; justify-content: space-between; padding: 10px 0; border-bottom:1px dashed #F5F5F5; align-items: center;}
 .newspage li p{ color: #141418; font-size: 14px; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; line-height: 1;}
 .newspage li span{background-color: #f8b62b; font-size: 12px; color: #fff; flex-shrink: 0;
 	border-radius: 25px; display: block; height: 25px; line-height: 25px; text-align: center; width: 100px;}

.clickMore{ border: solid 1px #e5e5e5; border-radius: 45px; height: 45px; text-align: center; display: block; line-height: 45px; box-sizing: content-box;
 color: #333333; margin: 15px 0;}
.jieshu{text-align:center;display:none;margin:10px 0;}