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{ width: 1200px; margin: 0 auto; }
.xc-nav{ width: 100%; height: 70px; background: #F7F7F7; line-height: 70px; }
.xc-nav a{ color: #444; }
.xc-nav .on a{ font-size: 16px; font-weight: bold; color: #F3473A; }
.xc-nav .logo{ width: 370px; height: 70px; float: left; background: url(../images/logo.png) center no-repeat; }
.xc-nav ul{ width: 520px; float: right; }
.xc-nav ul li{ width: 130px; float: left; text-align: center; }
.xc-nav ul .nav-album{ padding-left: 22px; background: url(../images/best.png) left center no-repeat;}

.xc-focus{ width: 100%; height: 437px; overflow: hidden; background: url(../images/focus-bg.jpg) center top no-repeat; color: #fff;}
.xc-focus .swiper-container{ width: 820px; height: 290px; margin-top: 60px; float: left; }
.xc-focus .image{ width: 235px; height: 290px; float: left; }
.xc-focus .image img{ width: 235px;}
.xc-focus .info{ width: 520px; float: right; font-size: 16px; color: rgba(255,255,255,.8); line-height: 30px; }
.xc-focus .info h2{ font-weight: normal; line-height: 50px; margin-bottom: 10px; font-size: 34px; }
.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: 20px; border-radius: 20px; }
.xc-intro{ margin: 40px 0; }
.xc-intro h1{ text-align: center; font-size: 32px; color: #1B1B1B; font-weight: normal; }
.xc-intro .xc-content{ font-size: 16px; line-height: 32px; color: #333; margin: 40px 0; }
.xc-intro .xc-content p{ margin: 10px 0; }
.xc-list{ margin: 40px 0; }
.xc-list .col1{ width: 100%; }
.xc-list .col2,.xc-list .col3{ width: 280px; float: left; margin-right: 26px; }
.xc-list .col4{ width: 280px; float: right; }
.xc-list .album-item{ width: 280px; padding: 5px; margin-bottom: 10px; float: left; }
.xc-list .album-item img{ width: 280px; border-radius: 10px; }
.xc-list .album-item h3{ font-size: 18px; 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 12px;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%}