html{
	font-size: 100px;
}
body,html,ul,ol,li{
	margin: 0;
	padding: 0;
}
.flex{
	display: flex;
}
.flex > div{
	flex: 1;
}
.clearflex{
	flex: none!important;
}
.mt15{
	margin-top: 15px!important;
}
.mt18{
	margin-top: 18px!important;
}
.mhn{
	margin-left: 0px!important;
	margin-right: 0px!important;
}
.phn{
	padding-left: 0px!important;
	padding-right: 0px!important;
}
.pv15{
	padding-top: 15px!important;
	padding-bottom: 15px!important;
}
.f12{
	font-size: 12px;
}
.f16{
	font-size: 16px;
}
.gray-bg{
	background-color: rgb(250,250,250);
}
.ba-1{
	border: 1px solid #eee;
}
.bb-1{
	border-bottom: 1px solid #F4F4F4;
}
.mt25{
	margin-top: 25px;
}
.mt45{
	margin-top:45px;
}
.mb20{
	margin-bottom: 20px;
}
.mb45{
	margin-bottom: 45px;
}
.min-height-400{
	min-height: 4rem;
}
.flex-wrap{
	flex-wrap: wrap;
}
header{
	height: 0.6rem;
}
.xupu-logo{
	width: 0.96rem;
	height: 0.32rem;
	background: url('../images/logo.png') no-repeat center center;
	background-size: 100% 100%;
	margin-top: 0.15rem;
}
.xupu-logo-right{
	width: calc(100% - 4.96rem);
	margin-top: 0.15rem;
}
.xupu-date{
	width: 2.4rem;
	color: #999;
}
.xupu-date .clearflex{
	font-size: 26px;
	margin-right: 15px;
}
.xupu-login-btn-group{
	margin-left: 30px;
	margin-top: 0.07rem;
}
.xupu-login-btn-group >a:link,.xupu-login-btn-group > a:hover,.xupu-login-btn-group > a:visited,.xupu-login-btn-group > a:active{
	color: #333333;
	text-decoration: none;
	margin-left: 20px;
	font-size: 16px;
}
 nav{
	background: #B32B2C;
	height: 0.4rem;
}
.xupu-banner{
	width: 100%;
	height: auto;
}
.xupu-banner > li{
	width: 100%;
	height: auto;
	list-style: none;
}
.xupu-banner > li > a{
	displya:inline-block;
	width: 100%;
	height: autp;
}
.xupu-banner > li > a > img{
	width: 100%;
	height: auto;
}
.xupu-banner > li >img{
	width: 100%;
	height: auto;
}
.xupu-banner > .bg1{
	background: url("../images/banner1.png") no-repeat center center;
	background-size: 100% auto;
}
.xupu-banner > .bg2{
	background: url("../images/banner2.png") no-repeat center center;
	background-size: 100% auto;
}
.xupu-banner > .bg3{
	background: url("../images/banner3.png") no-repeat center center;
	background-size: 100% auto;
}
.xupu-title{
	font-size: 18px;
	font-weight: 700;
}
.xupu-title > a{
	font-size: 14px;
	color: #999;
	font-weight: 100;
}
.xupu-search-wrap{
	position: relative;
	width: 2.6rem;
	height: 0.38rem;
	float: right;
	    font: normal normal normal 14px/1 FontAwesome;
	    font-size: inherit;
	    text-rendering: auto;
}
.xupu-search-wrap:before{
	content:'\f002';
	position: absolute;
	top:9px;
	left: 12px;
	font-size: 20px;
	color:#888888;
}
.xupu-search-input{
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #C9C9C9;
	padding-left: 40px;
	border-radius: 19px;
	outline: none;
	transition: all .5s;
}
.xupu-search-input:focus{
	border: 1px solid #B32B2C;
	box-shadow: 1px 1px 2px rgb(179,43,44,.3);
}
.xupu-surnames {
	flex-wrap:wrap;
}
.xupu-surnames .clearflex{
	width: 0.75rem;
	height: 0.75rem;
	text-align: center;
	line-height: 0.75rem;
	background: rgb(250,250,250);
	font-size: 16px;
	transition: background-color 0.3s;
	color: #000;
	cursor: pointer;
	max-width: 0.75rem;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.xupu-surnames .clearflex > a:link,.xupu-surnames .clearflex > a:visited,.xupu-surnames .clearflex > a:active{
	color: #000;
	text-decoration: none;
}
.xupu-surnames .clearflex:hover > a{
	background-color: #C5C5C5;
	color: #fff;
}
.xupu-surnames > div:hover{
	background-color: #C5C5C5;
	color: #fff;
}
.xupu-surnames .active{
	background-color: #C5C5C5;
	color: #fff;
}
.xupu-surname-info{
	padding: 0.25rem;
	border-left: 1px solid #eee;
	min-height: 2.52rem;
}
.xupu-infomation-item{
	margin-top: 15px;
}
.xupu-infomation-item > .clearflex{
	width: 2rem;
	height: 1.2rem;
}
.xupu-infomation-item > .clearflex > a{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.xupu-infomation-item > .clearflex > a > img{
	width:100%;
	height: 100%;
}
.xupu-infomation-item-text{
	position: relative;
}
.xupu-infomation-item-text > p{
	padding-left: 15px;
	color: #222;
	font-size: 16px;
}
.xupu-infomation-item-text > p > a:link,.xupu-infomation-item-text > p > a:hover,.xupu-infomation-item-text > p > a:visited,.xupu-infomation-item-text > p > a:active{
	color: #222;
	text-decoration: none;
}
.xupu-infomation-item-text > .title{
	max-width: 2.9rem;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.xupu-infomation-item-text > .title > a{
	font-size: 15px;
	font-weight: 700;
}
.xupu-infomation-item-text > .abstract > a{
	height: 50px;
	position: relative;
	overflow : hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     display: -moz-box;
     -moz-line-clamp: 3;
     -moz-box-orient: vertical;
	font-size: 12px;
}
.xupu-infomation-item-text > .abstract > a:after{
	content: "";
    position: absolute;
    right: 0;
    bottom: 0px;
    height: 15px;
    width: 100%;
    background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.8));
    background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.8));
    background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.8));
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.6));
}
.xupu-infomation-item-time{
	position: absolute;
	bottom: 0;
	right: 18px;
	color:#B1B1B1;
	font-size: 12px;
}
.xupu-more-btn{
	display: inline-block;
	width: 1rem;
	height: 0.38rem;
	line-height: 0.38rem;
	text-align: center;
	background-color: #E2E1E1;
	border-radius: 19px;
	color: #9E9D9D;
	text-decoration: none;
	transition: background-color .45s;
}.xupu-more-btn:hover{
	text-decoration: none;
	color: rgba(255,255,255,0.9);
	background-color: #B32B2C;
}
.xupu-about-img > img{
	width: 100%;
	height: 100%;
}
.xupu-about-content{
	margin: 40px;
	text-align: left;
	font-size: 16px;
}
footer{
	background: #EEEEEE;
}
.xupu-friend-link{
	list-style: none;
}
.xupu-friend-link > li{
	float: left;
	margin: 0px 18px 10px 0;
}
.xupu-friend-link > li > a{
	color: #888888;
	text-decoration: none;
}
.xupu-frient-link-wrap{
	padding: 0.3rem 0;
	border-bottom: 1px solid #DFDFDF;
}
.xupu-crop-info{
	margin: 0.3rem 0;
}
.xupu-crop-info > span{
	display: block;
	margin: 10px 0;
	color:#888888;
}
.xupu-crop-info > span a{
	color:#888888;
}
.xupu-contact{
	list-style: none;
}
.xupu-contact > li{
	position: relative;
	float: left;
	width: 0.36rem;
	height: 0.36rem;
	border-radius: 50%;
	margin-right: 0.25rem;
	border: 1px solid #888888;
	line-height: 0.4rem;
	text-align: center;
	color: #888;
}
.xupu-contact > li > i{
	font-size: 22px;
}
.xupu-contact > li > div{
	transform: scale(0);
	position: absolute;
	transition: all .5s;
	transform-origin:50% 100%;
	width: 2rem;
   	border-radius: 5px;
   	color:#B32B2C;
   	top: -0.65rem;
}
.xupu-contact > li > div.phone{
	background: #fff;
	box-shadow: 0px 6px 10px #ccc;
	left: -0.83rem;
}
.xupu-contact > li > div.weixin{
	top: -2rem;
	left: -0.83rem;
}
.xupu-contact > li > div.qq{
	top: -2rem;
	left: -0.83rem;
}
.xupu-contact > li:hover > div{
	transform: scale(1);
}
.xupu-contact > li > div > p{
	font-size: 20px;
	margin: 8px 0;
}
.xupu-contact > li > div > img{
	width: 100%;
	height: auto;
}
.swiper-pagination-bullet{
	transition: all .8s;
	width: 10px;
	height: 10px;
}
.swiper-pagination-bullet-active{
	background-color: #B32B2C;
	width: 18px;
	height: 10px;
	border-radius: 25px;
}
.xupu-surname-title{
	color: #222222;
	font-size: 28px;
	font-weight: 700;
}
.xupu-surname-intro{
	margin: 0.18rem 0;
	color: #999;
}
.xupu-surname-intro > span{
	display: inline-block;
	margin-right: 15px;
}
.xupu-surname-content{
	width: 100%;
	height: auto;
	font-size: 16px;
	min-height: 4rem;
}
.xupu-surname-content > img{
	width: 100%;
	height: auto;
}
.xupu-surname-content  img{
	width: 100%!important;
	height: auto;
}
.xupu-right-article{
	float: right;
	width: 3.4rem;
	height: 3.6rem;
	background: #FAFAFA;
	border-radius: 2px;
	margin: 0 auto;
	padding: 20px;
	text-align: left;
	margin-top: 15px;
}
.xupu-right-article:before{
	content:'';
	position: absolute;
	left: 25px;
	top: 0;
	width: 28px;
	height: 4px;
	background: #B32B2C;
}
.xupu-right-article > ul{
	padding-left: 25px;
	color: #555555;
	margin-top: 20px;
}
.xupu-right-article > ul > li{
	margin: 22px 0;
}
.xupu-right-article > ul > li > a{
	display: inline-block;
	color: #555555;
	font-size: 16px;
	max-width: 2.75rem;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	position: relative;
	top: 5px;
}
.xupu-surnames-title{
	color:#222;
	font-size: 20px;
}
.xupu-surnames-letter{
	color:#B0B0B0;
	font-size: 16px;
	margin-right: 15px;
}
.xupu-surnames-wrap{
	flex-wrap: wrap;
}
.xupu-surnames-wrap > .clearflex{
	margin-right: 0.15rem;
	font-size: 16px;
	color: #555555;
	padding-bottom:8px;
}
.xupu-surnames-wrap > .clearflex > a:link,.xupu-surnames-wrap > .clearflex > a:visited,.xupu-surnames-wrap > .clearflex > a:active{
	color: #555555;
	text-decoration: none;
}
.xupu-surnames-wrap > .clearflex > a:hover{
	color: #B32B2C;
}
.xupu-about-content-wrap{
	background-color: #FAFAFA;
	padding: 25px;
}
.xupu-about-content-wrap > h5{
	font-weight: 700;
	font-size: 26px;
	color:#222222;
	text-align: center;
}
.xupu-about-nav-module{
	width: 3.4rem;
	background:#FAFAFA;
}
.xupu-about-title{
	font-size: 20px;
	color: #222;
	height: 0.49rem;
	border-bottom: 1px solid #E5E5E5;
	padding-left: 30px;
	margin:0;
	line-height: 0.49rem;
}
.xupu-about-nav{
	list-style: none;
	margin: 0;
	padding: 0;
}
.xupu-about-nav > li{
	height: 0.5rem;
	line-height: 0.5rem;
	padding-left:30px;
	font-size: 16px;
	color: #222;
}
.xupu-about-nav > li > a:link,.xupu-about-nav > li > a:visited,.xupu-about-nav > li:active{
	display: inline-block;
	width: 100%;
	height: 100%;
	color: #222;
	text-decoration:none;
}
.xupu-about-nav > li > hover{
	display: inline-block;
	width: 100%;
	height: 100%;
	color:#B32B2C;
}
.xupu-about-nav >li.active{
	background:#E7E7E7;
}
.xupu-about-contact{
	padding-left: 30px;
	line-height: 0.5rem;
	line-height: 0.5rem;
	color: #999;
}
.xupu-about-contact > .clearflex i{
	font-size: 22px;
}
.xupu-about-contact > .clearflex{
	margin-right: 10px;
	width: 0.3rem;
	text-align: center;
}
.xupu-about-contact > div:last-child{
	color: #222;
	font-size: 16px;
}
.xupu-suranme-infor{
	width: 2.1rem;
	list-style: none;
	margin: 0 auto;
}
.xupu-suranme-infor > li{
	float: left;
	font-size: 20px;
	color: #999;
	border-bottom: 1px solid #fff;
	margin-right: 25px;
	padding-bottom:8px;
}
.xupu-suranme-infor > li.active{
	font-size: 20px;
	border-bottom: 2px solid #B32B2C;
}
.xupu-suranme-infor > li > a{
	color: #999;
	text-decoration: none;
}
.xupu-suranme-infor > li.active > a{
	color: #222;
	text-decoration: none;
}
.xupu-surname-infor-list{
	margin: 0 45px;
	list-style: none;
	text-align: left;
}
.xupu-surname-infor-list > li{
	line-height: 0.6rem;
	border-bottom: 1px solid #F4F4F4;
}
.xupu-surname-infor-list > li > a{
	width: calc(100% - 0.85rem);
	display: inline-block;
	color: #333;
	font-size: 16px;
	text-decoration: none;
}
.xupu-surname-infor-list > li > span{
	display: inline-block;
	width: 0.85rem;
	font-size: 16px;
	color: #B1B1B1;
}
.xupu-surname-infor-list-wrap{
	text-align: center;
}
/* .xupu-nav-items > li{
	position: relative;
	padding: 0 0.2rem;
	transition: 0.2s all linear;
	margin-right: -1px;
}
li.li::before{
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 0;
	height: 100%;
	border-bottom:4px solid rgba(255,255,255,.5);
	background: rgba(255,255,255,.5);
	transition: 0.2s all linear;
}
li.li:hover::before{
	width: 100%;
	    top: 0;
	    left: 0;
	    z-index: -1;
}
li.li:hover ~ li.li::before {
    left: 0;
}
li.li:active {
    background: rgba(255,255,255,.5);
    color: #fff;
} */
.xupu-nav-items{
    list-style: none;
	padding: 0;
}

.xupu-nav-items > li {
    float: left;
	line-height: 0.4rem;
	
	position: relative;
    font-size: 24px;
    color: #000;
    padding: 0 20px;
    transition: 0.2s all linear;
    cursor: pointer;
}

.xupu-nav-items > li > a:link,.xupu-nav-items > li > a:visited,.xupu-nav-items > li > a:active{
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	transition: all .5s;
	font-size: 16px;
	display: inline-block;
	width: 100%;
	height: 100%;
}
li.li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #B32B2C;
    transition: 0.2s all linear;
}

li.li:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #B32B2C;
    z-index: -1;
}

li.li:hover ~ li.li::before {
    left: 0;
}

li.li:active {
    background: rgba(255,255,255,.5);
    color: #fff;
}
li.active:before{
	top: 0;
	left: 0;
	width: 100%;
    height: 100%;
    border-bottom: 2px solid #B32B2C;
}
.xupu-article-share-text{
	position: relative;	
	top: 5px;
	color: #999999;
}
.xupu-article-icon{
	margin-bottom: 15px;
}
.xupu-article-icon >li{
	color:#999;
}
.xupu-article-icon  > a:link,.xupu-article-icon  > a:visited,.xupu-article-icon  > a:active{
	color: #999!important;
	transition: all .3s;
}
.xupu-article-icon  > a:hover i{
	color: #B32B2C!important;
}
.xupu-article-icon  > a i{
	color:#999;
	font-size: 22px!important;
}
.xupu-article-icon > a:first-child{
	padding-left: 0px!important;
}
.xupu-banner-wrap{
	width: 100%;
	height: auto;
	margin-top: 15px;
}
.js-articl-item{
	max-width: 9.3rem;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.default-img-wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #e3e3e3;
}
.default-img-wrap > img{
	width: auto!important;
	height: auto!important;
}
.xupu-logo-title{
	font-size: 14px;
	color: #888;
	height: 100%;
    line-height: 60px;
    position: relative;
    top: 10px;
    left: 10px;
}
.xupu-footer-title{
	font-size: 14px;
    color: #888;
    padding: 15px 0 25px 0;
}
.xupu-footer-title a{
	color: #B32B2C!important;
}
.xupu-footer-title a:link,.xupu-footer-title a:hover, .xupu-footer-title a:visited .xupu-footer-title a:active{
	color:#B32B2C!important;
	text-decoration: none;
}
.xupu-clan-book-list{
	position: relative;
	margin: 20px 30px;
	cursor: pointer;
}
.xupu-clan-book-list > span{
	position: absolute;
	top: 10px;
	left: 10px;
	writing-mode: tb-rl;
	letter-spacing: 3px;
}
.breadcrumb li a{
	color: #B32B2C!important;
}
.breadcrumb li a:link,.breadcrumb li a:hover,.breadcrumb li a:visisted, .breadcrumb li a:active{
	color:#B32B2C!important;
	text-decoration: none;
}
.family-loading { position: fixed; z-index: 99999; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); top: 0; left: 0; backgound: red;}
.family-loading img { width: 100%; }
.family-loading .family-loading-container { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin: -60px 0 0 -60px; }
.family-loading .family-loading-container img:last-child { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; }
.family-loading-wrap{position:fixed;top:0;left:0;width: 100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;}