@charset "utf-8";
/* CSS Document */
body{ background-color: #f5f5f5;}

/* banner */
.topic-banner{  width: 100%; min-width: 1200px; height: 380px; position: relative; overflow: hidden;}
.topic-banner .banner-pic{position: absolute; top: 0; left: 50%; z-index: 1; margin-left: -960px; width: 1920px; height: 380px;}
.topic-banner .banner-pic>img{ position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
/* 专题列表 */
.topic-block{ width: 1185px; padding: 15px 0 0 15px; background-color: #fff; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);}
.topic-block .topic-list li{ float: left; margin:0 15px 15px 0;}
.topic-block .topic-list li>a{ display: block; padding: 0 13px; height: 30px; line-height: 30px; color: #666; font-size: 16px; background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.topic-block .topic-list li:hover>a,.topic-block .topic-list li.on>a{ color: #fff !important; background-color: #49a3ff;}

/* 专题名称 */
.topic-name-bar{ padding: 0 30px 0 14px; width: 1156px; height: 50px; background-color: #fff; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); margin-top: 30px;}
.topic-name-bar .name{ float: left; height: 50px; line-height: 50px; font-size: 22px; color: #0099ff; font-weight: bold;}
.topic-name-bar .name>span{ font-size: 14px; color: #999; font-weight: normal;}
.topic-name-bar .name .num{ color: #f90; font-weight: normal;}
.topic-name-bar .page{float: right; padding: 12px 0; margin-top: 0;}
.topic-name-bar .page .page-num{ float: left; line-height: 26px; font-size: 14px; color: #999; margin-right: 8px;}
.topic-name-bar .page .page-num .num{ color: #f90; font-weight: normal;}
.topic-name-bar .page .page-btn{ float: left; color: #999; font-size: 14px; line-height: 24px; text-align: center; border: 1px solid #e5e3e2; width: 68px; height: 24px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-left: 12px;}
.topic-name-bar .page .page-btn:hover{ border-color: #49a3ff; background-color: #49a3ff; color: #fff;}
.topic-name-bar .page .page-btn.over,.topic-name-bar .page .page-btn.over:hover{ opacity: .6; cursor: default; border-color: #e5e3e2; background-color: #fff; color: #999;}

/* 专题热销排行 */
.topic-pro-block{}
.topic-pro-list li{ float: left; width: 285px; /*height: 252px;*/ margin: 20px 20px 0 0; position: relative;}
.topic-pro-list li:hover{ box-shadow: 0 3px 16px 0 rgba(217, 217, 217, 0.71);}
.topic-pro-list li:nth-of-type(4n){ margin-right: 0;}
.topic-pro-list li>a{ display: block;}
.topic-pro-list li .tips{ position: absolute; top:0; left:0; padding: 0 10px; font-size: 12px; color: #fff; line-height: 20px; background-color: #333;}
.topic-pro-list .pic{display: table-cell; width: 285px; height: 194px; text-align: center; vertical-align: middle; background-color: #e7e7e7;}
.topic-pro-list .pic img{ max-width: 100%; max-height: 100%; vertical-align: middle;}
.topic-pro-list .info{ padding: 0 15px; height: 130px; background-color: #fff;}
.topic-pro-list .info .tit{ display: block; padding: 6px 0 0; height: 48px; line-height: 24px; font-size: 16px; overflow: hidden;}
.topic-pro-list li .info>p{ padding-top: 3px; line-height: 28px;}
.topic-pro-list li .info .price{ float: right; height: 28px; line-height: 28px; font-size: 14px; color: #999; overflow: hidden;}
.topic-pro-list li .info .price i{color: #f90;}
.topic-pro-list li .info .price i em{ font-size: 22px;}
.topic-pro-list li:hover .info .tit{ color: #f90;}
.topic-pro-list li .info .satisfy{ float: left; font-size: 14px; color: #999;}
.topic-pro-list li .tags { overflow: hidden; display: block; color: #666; max-height: 25px; line-height: 25px; margin: 5px 0 0; position: relative;}
.topic-pro-list li .tags>span{ display: inline-block; padding: 0 12px; height: 20px; line-height: 20px; margin-right: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.topic-pro-list li .tags>span.tags-tuan{color: #ff9900; border: 1px solid #ff9900;}
.topic-pro-list li .tags>span.tags-sale{ color: #ed4b75; font-size: 14px; border: 1px solid #ed4b75;}
.topic-pro-block .page-content{ background-color: transparent;}

/* 热门旅游专题 */
.hot-topic-block{ margin-top: 10px;}
.hot-topic-bar{ height: 48px; line-height: 48px; font-size: 22px; border-bottom: 1px solid #e5e5e5;}
.hot-topic-con{ padding: 20px 0 10px;}
.hot-topic-slide{ width: 1200px; height: 400px; overflow: hidden; position: relative;}
.hot-topic-slide .slide-btn{ position: absolute; top: 50%; z-index: 99; margin-top: -25px; width: 32px; height: 50px; background: url("../images/topic-btn-ico.png") no-repeat;}
.hot-topic-slide .slide-btn.prev-btn{ left: 14px; background-position: -1px 0;}
.hot-topic-slide .slide-btn.next-btn{ right: 14px; background-position: -45px 0;}
.hot-topic-list li{ float: left; width: 285px; height: 400px; margin-right: 20px;}
.hot-topic-list li:last-child{margin-right: 0;}
.hot-topic-list li>a{ display: table-cell; width: 285px; height: 400px; text-align: center; vertical-align: middle; background-color: #e7e7e7;}
.hot-topic-list li>a>img{ max-width: 100%; max-height: 100%; vertical-align: middle;}