body{ font-size: 14px; line-height: 28px; font-family:"微软雅黑";  color: #333;}
*{ padding: 0px; margin: 0px;}
a{ text-decoration: none; color: #333;}
li{ list-style: none;}
img{ border:0; max-width: 100%;}
.clear{ clear: both; }

.container{ max-width: 750px; position: relative; margin: 0 auto; overflow: hidden; font-size: 0.9rem; line-height: 1.5rem;}
.container img{ max-width: 100%; }

.xc-nav{ width: 100%; height: 60px; background: #F7F7F7; }
.xc-nav .logo{ width: 75%; padding: 10px; height: 40px; float: left; line-height: 50px; }
.slide-btn { position: absolute; right: 0; top: 0; width:18%; height: 60px; overflow: hidden; z-index: 10;}
.slide-btn > i { background: url(../images/cate-ico.png) center center no-repeat; background-size: contain; width: 25%; height: 100%; line-height: 100%; display: block; margin: 0 auto; }
.slide-bg{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1; display: none; }
.slide{ width: 50%; height: 100%; background: #f3f3f3; overflow: hidden; position: fixed; right: 0; top: 0; z-index: 2; display: none; }
.slide a{ color: #848484; }
.slide .on a{ font-size: 16px; font-weight: bold; color: #F3473A; }
.slide ul{ padding-right: 20px; text-align: right; font-size: 1rem; margin-top: 60px; }
.slide ul li{ line-height: 60px;}
.slide ul .nav-album{ padding-left: 22px; background: url(../images/best.png) left center no-repeat;}

.xc-intro{ padding: 10px; }
.xc-intro h1{ font-size: 26px; color: #1B1B1B; font-weight: normal; text-align: center; margin-top: 10px; }
.xc-intro .xc-content{ color: #333; margin: 20px 0 60px; }
.xc-intro .xc-content p{ margin: 10px 0; position: relative; }

.xc-focus{ width: 100%; padding: 20px 5% 10px; overflow: hidden; background: url(../images/focus-bg.jpg) center top no-repeat; color: #fff;}
.xc-focus .swiper-container{ padding-bottom: 50px; }
.xc-focus .image{ width: 30%; float: left; }
.xc-focus .info{ width: 54%; padding: 0 3%; float: left; font-size: 14px; color: rgba(255,255,255,.8); line-height: 24px; }
.xc-focus .info h2{ font-weight: normal; line-height: 30px; margin-bottom: 10px; font-size: 22px; }
.xc-focus .list-title{ width: 260px; padding: 30px; float: right; }
.xc-focus .list-title li{ width: 100%; float: left; line-height: 24px; margin: 12px 0;}
.xc-focus .list-title li.on{ color: #E3B669; font-size: 20px; }
.xc-focus a{ color: #fff; }
.xc-focus a.more{ height: 26px; line-height: 26px; padding: 0 20px; float: left; background: #FFCA65; font-size: 12px; color: #B27124; margin-top: 10px; border-radius: 20px; }
.xc-focus .swiper-pagination-bullet-active{ background: #fff; }

.xc-list{ padding: 0 3%; }
.xc-list .album-item{ width: 42%; margin: 10px 2%; float: left; }
.xc-list .album-item img{ max-width: 100%; border-radius: 10px; }
.xc-list .album-item h3{ font-size: 16px; color: #3F3F3F; font-weight: normal; margin-top: 15px; margin-bottom: 5px; }
.xc-list .album-item p{ color: #9B9B9B; }
.heart { width:60px; height:60px; background: url(../images/web_heart_animation.png); background-position: left; background-repeat: no-repeat; background-size: 2900%; float:left; display: block; margin-left:-15px; }
.heart:hover, .heart:focus { background-position: right;}
@-webkit-keyframes heartBlast {
    0% {
        background-position: left
    }
    100% {
        background-position: right
    }
}
@keyframes heartBlast {
    0% {
        background-position: left
    }
    100% {
        background-position: right
    }
}
.heartAnimation { display: inline-block; -webkit-animation-name: heartBlast; animation-name: heartBlast; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: steps(28); animation-timing-function: steps(28); background-position: right}
.page-number{text-align:center}
.page-number .pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}
.page-number .pagination>li{display:inline}
.page-number .pagination>li:first-child>a,.page-number .pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
.page-number .pagination>.disabled>a,.page-number .pagination>.disabled>a:focus,.page-number .pagination>.disabled>a:hover,.page-number .pagination>.disabled>span,.page-number .pagination>.disabled>span:focus,.page-number .pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}
.page-number .pagination>.active>a,.page-number .pagination>.active>a:focus,.page-number .pagination>.active>a:hover,.page-number .pagination>.active>span,.page-number .pagination>.active>span:focus,.page-number .pagination>.active>span:hover{z-index:2;color:#fff;cursor:default;background-color:#f1524e;border-color:#f1524e}
.page-number .pagination>li>a,.page-number .pagination>li>span{position:relative;float:left;padding:6px 8px;margin-left:-1px;line-height:1.42857143;text-decoration:none;background-color:#fff;border:1px solid #ddd}
.page-number .pagination>li:last-child>a,.page-number .pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
.page-prepart{background:url(../images/page-number-left-arrow.png) no-repeat 50%}
.page-next,.page-prepart{width:16px;height:20px;display:block}
.page-next{background:url(../images/page-number-right-arrow.png) no-repeat 50%}

.goto{ width: 80px; height: 26px; text-align: center; line-height: 26px; padding: 0 20px; background: #FFCA65; font-size: 12px; color: #B27124; margin-left: -60px; border-radius: 20px; position: absolute; left: 50%; bottom: 10px;  }