/*
Theme Name: 时尚美容家居美食资讯门户网站模板
Theme URI: http://1201.fg27.com
Author: Reasonix
Description: 时尚美容家居美食资讯门户网站模板（参考：时尚门户，红色导航）
Version: 1.0.0
*/
/* ===== 基础 ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font:14px/1.6 "Microsoft YaHei","Hiragino Sans GB",Arial,sans-serif;color:#333;background:#F2F2F2}
ul,ol{list-style:none}
a{text-decoration:none;color:#333;transition:all .3s}
a:hover{color:#EF2129}
img{max-width:100%;height:auto;border:0}
h1,h2,h3,h4,h5,h6,p{margin:0}
.clearfloat:before,.clearfloat:after{content:"";display:table}
.clearfloat:after{clear:both}
.clearfloat{zoom:1}
.floatfix{clear:both}
.wrapper{width:1200px;margin:0 auto}
.main{width:1200px;margin:0 auto;padding:15px 0}

/* ===== 顶部 ===== */
.topbar{height:60px;background:#EF2129}
.topbar .wrapper{position:relative;height:60px}
.topbar .logo{float:left;padding-top:5px}
.topbar .logo img{max-height:50px}
.topbar .nav{float:left;margin-left:20px}
.topbar .nav>li{float:left;position:relative}
.topbar .nav>li.on>strong a,.topbar .nav>li:hover>strong a{background:#d71017}
.topbar .nav strong a{display:block;line-height:60px;padding:0 18px 0 10px;color:#fff;font-size:15px}
.topbar .nav strong a i{margin-right:4px}
.topbar .action{float:right;line-height:60px}
.topbar .action a{color:#fff;font-size:14px;padding:0 15px;display:block;line-height:60px}
.topbar .action a:hover{background:#d71017}
.topbar .mmenu{display:none;position:absolute;right:10px;top:0;line-height:60px;color:#fff;font-size:24px;cursor:pointer}

/* ===== 首页 ===== */
.mainnews{width:1160px;padding:20px;background:#fff;margin:0 auto 20px;overflow:hidden}
.newsl{float:left;width:800px}
.newsr{float:right;width:320px}
/* 轮播 */
.m-slide{width:800px;height:430px;position:relative;overflow:hidden;margin-bottom:15px}
.m-slide .swiper-container{width:100%;height:100%}
.m-slide .swiper-slide{position:relative}
.m-slide .swiper-slide img{width:100%;height:430px;object-fit:cover}
.m-slide .swiper-slide .slide-title{position:absolute;bottom:0;left:0;right:0;height:40px;line-height:40px;background:rgba(0,0,0,.55);color:#fff;font-size:15px;padding:0 15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:5}
.m-slide .swiper-pagination-bullet{background:#fff;opacity:.7}
.m-slide .swiper-pagination-bullet-active{background:#EF2129}
.m-slide .swiper-button-prev,.m-slide .swiper-button-next{color:#fff}
/* 头条推荐 */
.com-title{border-bottom:2px solid #eee;margin-bottom:15px;overflow:hidden}
.com-title span{display:inline-block;border-bottom:3px solid #EF2129;padding-bottom:10px;font-size:18px;color:#333}
.com-title .more{float:right;font-size:13px;color:#999;line-height:26px}
.com-title .more:hover{color:#EF2129}
.hotbox-wrap{overflow:hidden}
.hotbox{overflow:hidden;padding:10px 0;border-bottom:1px dashed #eee}
.hotbox:last-child{border-bottom:none}
.hotimg{float:left;width:250px;height:165px;overflow:hidden;margin-right:15px}
.hotimg img{width:100%;height:165px;object-fit:cover;transition:all .5s}
.hotbox:hover .hotimg img{transform:scale(1.08)}
.hotbox h3{font-size:16px;line-height:1.4;height:44px;overflow:hidden;margin-bottom:8px}
.hotbox h3 a{color:#333}
.hotbox h3 a:hover{color:#EF2129}
.hotbox p{font-size:13px;color:#888;line-height:1.6;max-height:50px;overflow:hidden;margin-bottom:8px}
.hotbox span{font-size:12px;color:#999;margin-right:6px}
.hotbox span a{color:#3e3e3e}
.hotbox span a:hover{color:#EF2129}
/* 右侧 */
.newsr .topnews,.newsr .newsletter{background:#fff;border:1px solid #eee;padding:15px;margin-bottom:15px}
.newsr .sideMenu h3{font-size:15px;line-height:1.4;margin:10px 0 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.newsr .sideMenu h3 a{color:#504F4F}
.newsr .sideMenu h3 a:hover{color:#EF2129}
.newsr .sideMenu ul li{text-indent:2em;font-size:13px;color:#888;height:60px;overflow:hidden;line-height:1.6}
.newsr .newsletter ul li{border-bottom:1px dashed #eee;overflow:hidden}
.newsr .newsletter ul li a{display:block;line-height:34px;font-size:13px;color:#555;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.newsr .newsletter ul li a:hover{color:#EF2129}
/* 阅读推荐 */
.read{margin-bottom:15px}
.readbox{overflow:hidden;padding:8px 0;border-bottom:1px dashed #eee}
.readbox:last-child{border-bottom:none}
.readtitle{font-size:14px;line-height:1.4;margin-bottom:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.readtitle a{color:#333}
.readtitle a:hover{color:#EF2129}
.readimg{float:left;width:90px;height:59px;overflow:hidden;margin-right:10px}
.readimg img{width:90px;height:59px;object-fit:cover}
.readbox p{font-size:12px;color:#888;line-height:1.5;overflow:hidden;max-height:44px}

/* ===== 分类区块 ===== */
.listr{width:1160px;padding:20px;background:#fff;margin:0 auto 20px}
.listr ul li{line-height:36px;border-bottom:1px dashed #f0f0f0;overflow:hidden}
.listr ul li a{font-size:14px;color:#555;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.listr ul li a:hover{color:#EF2129}
.listr ul li span{float:right;font-size:12px;color:#aaa}

/* ===== 列表页 ===== */
.list-page{width:1160px;padding:20px;background:#fff;margin:0 auto 20px}
.list-box .hotbox{width:100%}
.page{text-align:center;padding:25px 0}
.page .page-numbers{display:inline-block;margin:0 3px;padding:7px 14px;background:#f5f5f5;color:#666;border-radius:3px}
.page .page-numbers:hover{background:#EF2129;color:#fff}
.page .page-numbers.current{background:#EF2129;color:#fff}

/* ===== 内容页 ===== */
.article-page{width:1160px;padding:20px;background:#fff;margin:0 auto 20px}
.crumbs{font-size:13px;color:#999;padding-bottom:12px;border-bottom:1px solid #eee;margin-bottom:15px}
.crumbs a{color:#999}
.crumbs a:hover{color:#EF2129}
.article-title{font-size:24px;color:#222;text-align:center;line-height:1.4;margin-bottom:12px}
.article-meta{text-align:center;color:#999;font-size:13px;border-bottom:1px solid #eee;padding-bottom:15px;margin-bottom:20px}
.article-meta span{margin:0 12px}
.article-content{font-size:16px;line-height:1.9;color:#555}
.article-content p{margin:12px 0}
.article-content img{max-width:100%;height:auto;display:block;margin:10px auto}
.article-content .article-featured{text-align:center;margin-bottom:15px}
.article-content h2,.article-content h3,.article-content h4{margin:18px 0 10px;color:#333}
.article-content a{color:#EF2129}
.article-content ul,.article-content ol{padding-left:25px;margin:10px 0}
.article-content ul{list-style:disc}
.article-content ol{list-style:decimal}
.article-content blockquote{border-left:4px solid #EF2129;background:#fdf0f0;padding:10px 18px;margin:15px 0;color:#666}
.article-content table{width:100%;border-collapse:collapse;margin:15px 0}
.article-content table td,.article-content table th{border:1px solid #ddd;padding:8px 10px}
.article-content pre,.article-content code{background:#f5f5f5;padding:12px;border-radius:3px;overflow:auto;font-size:14px}
.article-nav{overflow:hidden;padding:15px 0;border-top:1px solid #eee;margin-top:20px;font-size:14px}
.article-nav p{margin:4px 0}
.article-nav a{color:#333}
.article-nav a:hover{color:#EF2129}
.article-related{margin-top:20px;padding-top:15px;border-top:1px solid #eee}
.article-related ul li{line-height:34px;border-bottom:1px dashed #f0f0f0;overflow:hidden}
.article-related ul li a{color:#555;font-size:14px}
.article-related ul li a:hover{color:#EF2129}
.article-related ul li span{float:right;color:#999;font-size:12px}

/* ===== 底部 ===== */
.links{width:1160px;margin:0 auto;overflow:hidden;padding:10px 20px;background:#fff}
.links ul li{float:left;margin:0 15px;font-size:13px}
.links ul li a{color:#666}
.links ul li a:hover{color:#EF2129}
.mreturn{position:fixed;right:20px;bottom:50px;z-index:99}
.mreturn a{display:block;width:44px;height:44px;background:#EF2129;color:#fff;text-align:center;line-height:44px;cursor:pointer;border-radius:4px;font-size:18px}
.footer{border-top:#EF2129 2px solid;height:54px;line-height:54px;background:#3E3E3E;margin-top:20px}
.footer .wrapper{overflow:hidden}
.footer .lft{float:left;color:#8f8f8f;font-size:13px}
.footer .rgt{float:right}
.footer .rgt a{color:#8f8f8f;font-size:13px;margin:0 8px}
.footer .rgt a:hover{color:#fff}
.footer .rgt span{color:#666;margin:0 2px}

/* ===== 响应式 ===== */
@media (max-width:1200px){
.wrapper,.main,.mainnews,.listr,.list-page,.article-page,.links{width:100%;box-sizing:border-box}
.mainnews,.listr,.list-page,.article-page,.links{padding:15px}
.newsl{width:100%;float:none;margin-bottom:15px}
.m-slide{width:100%;height:auto}
.m-slide .swiper-slide img{height:auto}
.newsr{width:100%;float:none}
.hotimg{width:200px;height:130px}
.hotimg img{height:130px}
}
@media (max-width:767px){
body{overflow-x:hidden}
.topbar .action{display:none}
.topbar .mmenu{display:block}
.topbar .nav{display:none;position:absolute;top:60px;left:0;right:0;background:#EF2129;z-index:99}
.topbar .nav>li{float:none;border-bottom:1px solid rgba(255,255,255,.2)}
.topbar .nav strong a{line-height:42px}
.hotimg{width:110px;height:80px;margin-right:12px}
.hotimg img{height:80px}
.hotbox h3{font-size:14px;height:40px}
.hotbox p{display:none}
.footer{height:auto;line-height:1.8;padding:10px 0}
.footer .lft,.footer .rgt{float:none;text-align:center}
.article-title{font-size:18px}
.article-meta span{margin:0 6px}
.article-content{font-size:15px}
}