@charset "utf-8";
/* ============================================================
   大公网频道专题页 · 首页样式
   还原自 s/2021 频道模板 index.css，宽度、间距、字号与原站一致；
   原先依赖的装饰图（箭头、黑色半透明遮罩）改为纯 CSS 绘制，模板可独立部署。
   ============================================================ */

body { background: #fff; }
a:hover { text-decoration: none; color: #007dbd; }
.bg_blue { padding: 30px 0 10px; background: #eaf3f8; }

/* 栏目标题 */
.h3_title { font-size: 16px; line-height: 1.5em; color: #333; margin-bottom: 30px; }
.h3_title img { height: 60px; }
.h3_title .h3_text {
    display: inline-block;
    vertical-align: bottom;
    font-size: 24px;
    line-height: 1.4em;
    font-weight: bold;
    letter-spacing: 2px;
    color: #333;
    padding-right: 6px;
}
.h3_title em {
    display: inline-block;
    padding: 0 15px;
    margin-left: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid #becfa3;
    vertical-align: bottom;
    font-style: normal;
    font-size: 14px;
    color: #c2d8cc;
}
.h3_title a { color: #c2d8cc; }
.h3_title a:hover { color: #007dbd; }

/* 频道横幅 */
.banner { width: 1200px; height: auto; margin: 5px auto; position: relative; }
.banner img { width: 100%; height: auto; border: none; }
.banner .pc { display: block; }
.banner .mobile { display: none; }

/* 焦点图 */
.pics_focus {
    width: 1180px;
    height: 400px;
    padding: 10px;
    background: #fff;
    overflow: hidden;
    margin: 5px auto 20px;
    box-shadow: 0 0 10px #333;
}
.pics_focus .img { width: 940px; height: 400px; float: left; position: relative; }
.pics_focus .img li,
.pics_focus .img a,
.pics_focus .img img { width: 100%; height: 100%; display: block; }
.pics_focus .img li { display: none; position: absolute; left: 0; top: 0; }
.pics_focus .img .first { display: block; }
.pics_focus .focus_right { width: 220px; padding-top: 60px; margin-right: 5px; float: right; position: relative; }
.pics_focus .tab li {
    height: 40px;
    line-height: 20px;
    padding: 8px 0 8px 10px;
    font-size: 14px;
    color: #666;
    border-top: 2px solid #e5e5e5;
    border-left: 2px solid #e5e5e5;
    position: relative;
}
.pics_focus .tab li a { width: 100%; height: 100%; display: block; color: #666; overflow: hidden; }
.pics_focus .tab li a:hover { color: #007dbd; }
.pics_focus .tab b {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #e5e5e5;
    border-color: transparent transparent #e5e5e5 #e5e5e5;
    display: none;
    position: absolute;
    left: -7px;
    top: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.pics_focus .tab .on a { color: #007dbd; }
.pics_focus .tab .on b { display: block; }
.focus_220_60 { width: 100%; height: 60px; position: absolute; left: 0; top: 0; }
.focus_220_60 img { width: 100%; height: 100%; }

/* 焦点新闻块 */
.wrapper { width: 1200px; height: auto; margin: 50px auto 30px; }
.wrap_left { width: 800px; height: auto; float: left; }
.news_wrap { width: 100%; height: auto; }
.news_wrap .pic { width: 320px; height: auto; float: left; overflow: hidden; }
.news_wrap .pic img { width: 100%; height: 180px; display: block; }
.news_wrap .list { width: 450px; height: auto; margin-left: 20px; float: left; }
.news_wrap .list li {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.5em;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.news_wrap .list li .img { width: 100%; height: auto; display: none; }
.news_wrap .list li .txt { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.news_wrap .list li a { color: #666; }
.news_wrap .list li a:hover { color: #007dbd; }
.news_summary { width: 450px; margin-left: 20px; float: left; clear: both; font-size: 13px; line-height: 1.8em; color: #999; }
.wrap_right { width: 360px; height: auto; padding-top: 80px; float: right; }
.wrap_right img { width: 100%; height: auto; border: none; }

/* 图文卡片（文化类） */
.culture { width: 1200px; height: auto; margin: 20px auto; }
.culture .list { width: 1230px; height: auto; }
.culture .list .item { width: 380px; height: auto; margin: 0 30px 30px 0; float: left; }
.culture .list .item .pic {
    width: 100%;
    height: 215px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.culture .list .item .pic img {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    -ms-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.culture .list .item .pic:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
.culture .list .item .title { height: 48px; line-height: 24px; font-size: 16px; margin-top: 8px; color: #333; overflow: hidden; }
.culture .list .item .title a { color: #333; }
.culture .list .item .title a:hover { color: #007dbd; }

/* 图集（视觉、景区类） */
.vision { width: 1200px; height: auto; margin: 40px auto; }
.vision .list { width: 1230px; height: auto; }
.vision .list .item {
    width: 380px;
    height: 215px;
    margin: 0 30px 30px 0;
    float: left;
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 3px #e5e5e5;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.vision .list .item .pic {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    -ms-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.vision .list .item:hover .pic {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
/* 图片角标文字：原站用 bg_black.png 平铺，这里改用半透明色块 */
.vision .list .item .title {
    width: 92%;
    height: auto;
    padding: 8px 4%;
    background: rgba(0, 0, 0, 0.55);
    line-height: 20px;
    font-size: 14px;
    font-style: normal;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 横向滚动条（地州、县市类） */
.project_tour { width: 1200px; height: 430px; position: relative; overflow: hidden; margin: 20px auto; }
.project_tour .arrow_left_tour,
.project_tour .arrow_right_tour {
    width: 36px;
    height: 60px;
    position: absolute;
    top: 50%;
    margin-top: -18px;
    z-index: 9;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    border: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.project_tour .arrow_left_tour { left: 10px; }
.project_tour .arrow_right_tour { right: 10px; }
.project_tour .arrow_left_tour::after,
.project_tour .arrow_right_tour::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    margin-top: -9px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
.project_tour .arrow_left_tour::after { border-right: 12px solid #1977ad; left: 10px; }
.project_tour .arrow_right_tour::after { border-left: 12px solid #1977ad; right: 10px; }
.project_tour .arrow_left_tour:hover,
.project_tour .arrow_right_tour:hover { background: rgba(0, 0, 0, 0.6); }
.project_tour .tour_viewport {
    width: 1200px;
    height: 330px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.project_tour .tour_viewport::-webkit-scrollbar { display: none; }
.project_tour .tour_track { display: flex; gap: 20px; height: 100%; }
.project_tour .tour_slide {
    flex: 0 0 200px;
    width: 200px;
    height: 330px;
    display: block;
    border-radius: 15px;
    overflow: hidden;
}
.project_tour .tour_slide img { width: 100%; height: 330px; display: block; border: none; object-fit: cover; }

/* 广告位 */
.wrap { width: 1200px; height: auto; display: flex; justify-content: space-between; margin: 10px auto 30px; }
.wrap img { width: 585px; height: auto; }
.ad_1200_100 { width: 1200px; height: auto; margin: 20px auto; }
.ad_1200_100 img { width: 100%; height: auto; }

/* 联系我们 */
.friendship { width: 100%; height: auto; padding: 20px 0; background: #bfdef0; }
.friendship .h3_title { margin-bottom: 10px; color: #1977ad; }
.friendship .h3_title span { display: inline-block; line-height: 1em; padding: 0 10px 3px 10px; border-left: 2px solid #1977ad; border-right: 2px solid #1977ad; }
.friendship .links { width: 1200px; line-height: 30px; font-size: 14px; color: #666; margin: 0 auto; }
.friendship .links a { color: #1977ad; margin: 0 15px 20px 0; }
.friendship .links p span { margin-right: 50px; }
.friendship .links p span:last-child { margin-right: 0; }

/* 返回顶部 */
#tipback {
    width: 45px;
    height: 45px;
    background: #dfdfdf url(https://r2d2.takungpao.cn/cn/common/images/back.png) center center no-repeat;
    cursor: pointer;
    position: fixed;
    left: 50%;
    margin-left: 600px;
    bottom: 142px;
    z-index: 100;
    display: none;
}

/* 移动端 */
@media screen and (max-width: 767px) {
    body { background: none; }
    .culture { width: auto; margin: 5px 10px; }
    .culture .list { width: 100%; }
    .culture .list .item { width: 100%; margin: 0 0 15px 0; float: none; }
    .culture .list .item .pic { height: auto; }
    .culture .list .item .pic img { height: auto; border-radius: 5px; }
    .culture .list .item .title { height: auto; overflow: visible; }

    #tipback { width: 35px; height: 35px; background-size: 50% auto; margin-left: 0; left: auto; right: 15px; opacity: 0.8; }
    .h3_title { margin-bottom: 15px; font-size: 14px; }
    .h3_title img { height: 30px; }
    .h3_title .h3_text { font-size: 18px; }
    .h3_title em { padding: 0 10px; margin-bottom: 0; }
    .banner { width: 100%; margin: 0 0 10px; overflow: hidden; }
    .banner .pc { display: none; }
    .banner .mobile { display: block; }

    /* 焦点 */
    .pics_focus { width: calc(100% - 20px); height: auto; padding: 0 10px 10px; margin: 0; position: relative; box-shadow: none; }
    .pics_focus .img { width: 100%; height: 53.5vw; float: none; }
    .pics_focus .focus_right { width: 100%; padding: 0; margin: 0; float: none; }
    .pics_focus .tab li { height: auto; padding: 8px 0 0; line-height: 1.5em; border: none; display: none; }
    .pics_focus .tab li.on { display: block; }
    .pics_focus .tab li.on b { display: none; }
    .focus_220_60 { width: auto; height: auto; margin: 15px 10px; position: static; left: auto; top: auto; }
    .focus_220_60 img { height: auto; }

    .wrapper { width: auto; margin: 0 10px; }
    .wrap_left { width: 100%; float: none; margin-bottom: 10px; }
    .wrap_right { width: auto; padding: 0; margin: 15px 10px; float: none; }
    .news_wrap .pic { width: 100%; float: none; display: none; }
    .news_wrap .pic img { height: auto; }
    .news_wrap .list { width: 100%; margin: 10px 0; float: none; }
    .news_wrap .list li { margin-bottom: 15px; font-size: 16px; overflow: visible; white-space: normal; }
    .news_wrap .list li .img { width: 40%; float: left; display: block; }
    .news_wrap .list li .txt { padding-left: 43%; overflow: visible; white-space: normal; }
    .news_summary { width: 100%; margin: 0; float: none; }

    /* 横向滚动 */
    .project_tour { width: auto; height: 345px; margin: 10px 0 8px; }
    .project_tour .tour_viewport { width: auto; height: 100%; padding: 0 10px; }
    .project_tour .tour_slide { flex: 0 0 180px; width: 180px; }
    .project_tour .tour_slide img { height: 100%; }
    .project_tour .arrow_left_tour,
    .project_tour .arrow_right_tour { margin-top: -16px; }
    .project_tour .arrow_left_tour { left: 10px; }
    .project_tour .arrow_right_tour { right: 10px; }

    .wrap { width: auto; margin: 0; display: block; }
    .wrap img { width: 100%; margin-top: 15px; }
    .ad_1200_100 { width: auto; margin: 0 10px; }
    .ad_1200_100 img { border-radius: 5px; }

    /* 图集 */
    .vision { width: auto; margin: 10px; }
    .vision .list { width: 100%; }
    .vision .list .item { width: 100%; height: auto; display: block; margin: 0 0 15px; float: none; }
    .vision .list .item .pic { height: auto; }

    /* 联系我们 */
    .friendship { width: auto; margin: 10px 0 0; padding: 20px; }
    .friendship .links { width: 100%; }
    .friendship .links p span { display: block; line-height: 1.5em; margin: 0 0 10px; }
}