body{background: #f8f8f8;}
/* banner */
.banner{width: 100%; height: 220px; background: url(img/r-banner.jpg) no-repeat center top;}
.banner .w1200{padding-top: 70px;}
.banner h1{width: 100%; height:80px; margin: 0 auto 10px; font-size: 66px; color: #fff; font-weight: bold; line-height: 80px;text-align: center;text-shadow: 0 3px 3px #000;}
.banner .w1200 div{width:80px; height: 22px; line-height: 22px; font-size: 12px; color: #8ddafb;font-weight: bold; background: rgba(7,126,176,.6);border-radius: 11px; overflow: hidden; zoom: 1; margin: 0 0 0 363px;}
.banner .w1200 div em{display: inline-block; width: 15px; height: 14px; background: url(img/r-icons.png) no-repeat; background-position: 0 -79px; float: left; margin: 4px 2px 0 7px;}
.banner .update{display: block; width: 100%;height: 24px; color: #fff; font-size: 14px; text-align: right; line-height: 24px;}

/* r-content */
.r-content{width: 1200px; margin: 28px auto 38px;}

/* r-nav */
.r-nav{width: 237px; float: left;}
.r-nav li{height: 58px; margin-bottom: 10px; font-size: 18px; text-align: center; overflow: hidden;}
.r-nav li a{display: block; width: 100%; height: 58px; line-height: 58px; color: #666;background: #fff; overflow: hidden; font-weight: normal;}
.r-nav li a:hover{color: #ff8181;}
.r-nav li a.active{background: #ff8181; color: #fff; font-weight: bold;}
.r-nav li.hide{height: 0; margin-bottom: 0;}
.r-nav li.nhide{height: 0; margin-bottom: 0;}

.r-nav li.tab{height: 24px;}
.r-nav li.tab a{font-size: 12px;width: 84px; height: 22px; border-radius: 2px; border:1px solid #ff8181; text-align: center; line-height: 22px; color: #ff8181; margin: 0 auto 10px; display: block;}

.nav-more{display: block; width: 100%; height: 30px; background: #fff; overflow: hidden; zoom: 1;}
.nav-more em{display: block; width: 16px; height: 16px; margin: 0 auto;margin-top: 6px; background: url(img/r-more.png) no-repeat;transition: all ease .5s;background-position: left bottom;}
.nav-more:hover em{background-position: left top;}

/* r-list */
.r-list{width: 940px; float: right;}
.r-list li{margin-bottom: 12px;width: 100%; height: 180px; background: #fff; overflow: hidden; zoom: 1;transition: all .3s;}
.r-list li .num{ display: block; width: 37px; height: 43px; float: left; font-size: 14px; line-height: 37px; color: #999; font-weight: bold; background: url(img/r-icons.png) no-repeat; background-position: -213px -79px; text-align: center;}
.r-list li:hover{transform: translateY(-3px);}
.r-list li .img{width: 120px; height: 120px; float: left; margin: 27px 20px 0 -3px; display: block; overflow: hidden; border-radius: 19px;}
.r-list li img{width: 120px; height: 120px; border-radius: 19px;transition: all ease .5s; }
.r-list li img:hover{transform: scale(1.1);}
.r-list li .detail{padding-top: 40px; width: 920px; float: left;}
.r-list li .detail .tit{ height: 24px; overflow: hidden; zoom: 1; overflow: hidden; zoom: 1;}
.r-list li .detail .tit .name{display: block;font-size: 16px; float: left; width: 220px; height:24px; line-height:24px; overflow: hidden;color: #333; font-weight: bold;}
.r-list li .detail .tit .name:hover{color: #22b9f8;}
.r-list li .detail .tit .star{float: left;width: 76px; height: 13px; background: url(img/r-icons.png) no-repeat; background-position: 0 bottom; overflow: hidden; zoom: 1; margin: 5px 50px 0 0;}
.r-list li .detail .tit .star em{display: block; width: 80%; height: 13px;  background: url(img/r-icons.png) no-repeat; background-position: 0 -99px; float: left;}

.r-list li .detail .tit .tags{display: block; width: 220px; height: 24px; overflow: hidden; zoom: 1;}
.r-list li .detail .tit .tags i{float: left; display: block; height: 24px; line-height: 24px; background: #f0f0f0; color: #999; padding:0 10px; margin-right:8px; border-radius: 12px;}
.r-list li .detail .tit .tags a{float: left; display: block; height: 24px; line-height: 24px; background: #98dcf9; color: #fff; padding:0 10px; margin-right:8px;border-radius: 12px;}

.r-list li .detail p{font-size: 14px; color: #999; height: 56px; line-height: 28px; overflow: hidden; margin-top: 17px;} 
.r-list li .detail p em{color: #33c0fb;}

.r-list li .btn{display: block; width: 136px; height: 40px; line-height: 40px; background: #22b9f8; color: #fff; border-radius: 4px; text-align: center; font-size: 15px; float: right; margin: 64px 24px 0 0;}
.r-list li .btn:hover{opacity: .8; filter: alpha(opacity=80);}

.r-list li.li-1 .num{background-position: -90px -79px; color: #fff;}
.r-list li.li-1 .tit .star em{width: 100%;}
.r-list li.li-1 .btn{background: #ff3737;}

.r-list li.li-2 .num{background-position: -131px -79px; color: #fff;}
.r-list li.li-2 .tit .star em{width: 100%;}
.r-list li.li-2 .btn{background: #ff7439;}

.r-list li.li-3 .num{background-position: -172px -79px; color: #fff;}
.r-list li.li-3 .tit .star em{width: 100%;}
.r-list li.li-3 .btn{background: #ff9c39;}

.list-more{width: 278px; height: 40px; display: block; text-align: center; line-height: 40px; color: #22b9f8; font-size: 14px; margin: 35px auto 0; border-radius: 3px;border:1px solid #22b9f8; text-align: center; transition: all ease .5s;}
.list-more:hover{background: #22b9f8; color: #fff;}