/* 清除通配符样式 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* 清除超链接a的默认样式 */
a {
    text-decoration: none;
}
/* 清除ul的默认样式 */
ul {
    list-style: none;
}
/* 网页主体背景颜色 */
body {
    background-color: #e7e8e9;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, Tahoma, sans-serif, 'Times New Roman', Times, serif;         
}

/* 媒体查询 屏幕像素小于768px */
@media screen and (max-width: 767px) {

    /* 小屏幕下body设置为100%的宽度 */
    body {
        width: 100%;
    }
    /* 顶部导航栏 */
    .header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 99999;
        width: 100%;
        /* box-shadow: 0 1px 1px #343a40; */
    }

    .header .headbar {
        width: 100%;
        padding: 0px 2px;
    }

    .brand_title {
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        background-color: #fff;
        text-indent: -9999px;
        background-image: url(o_image/header_bar.png);
        background-size: 52px 52px;
        background-repeat: no-repeat;
        background-position: center;
        /* background-attachment决定背景图像的位置是在视口内固定 还是随着包含它的区块滚动 */
        /* background-attachment: scroll; */
    }

    /* 页面滚动一定距离后 出行网站名字Objota Logo隐藏起来 */
    .headbar_h1 {
        padding: 0 32px;
        text-indent: 0;  
        text-align: left;
        font-size: 24px;
        font-weight: 400;
        color: #1e90ff;
        background-image: none; 
        box-shadow: 0 1px 1px #343a40;
    }

    /* 全局搜索栏模块 */
    .global_search {
        position: relative;
        top: 54px;
        left: 0px;
        width: 100%;
        padding: 0px 2px;
    }

    .global_search .global_input {

        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .global_search .global_input > input:first-child {

        /* display默认为none */
        display: none;
        width: 100%;
        height: 52px;
        padding-left: 10px; 
        margin-bottom: 2px;
        font-size: 18px;
        outline: none;
        border: none;
        border: 1px solid #343a40;
    }

    .global_search .global_input > input:last-child {

        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 20px;
        border: none;
        outline: none;
        background-color: #fff;
    }

    /* 修复sumbit按钮在iphone的safari浏览器上不显示的问题 */
    .global_search .global_input > input[type="submit"]{

        -webkit-appearance: none;

    }

    /* 输入内容时自动弹出X，可用退格键删除 */
    .global_search .global_input input[type="search"]::-webkit-search-cancel-button {

        display: none;

    }

    /* 主体页面外框架 */
    .container {
        width: 100%;
        padding: 0 2px;
        margin: 0 auto;
        margin-top: 56px;
        margin-bottom: 54px;
    }

    /* 左侧主页面 */
    /* 小屏幕隐藏此板块 节省屏幕空间 */
    .container .mainleft {

        /* display默认为none */
        display: none;
        width: 100%;
        margin-bottom: 2px;
    }

    .container .mainleft .left_brand {

        display: flex;
        width: 100%;
        height: 52px;
        background-color: #fff;
    }

    .container .mainleft .left_brand > h2 {

        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        color: #1e90ff;
    }

    .container .mainleft .left_brand > a {

        flex: 1;
    }

    .container .mainleft .left_brand >a .ver_two {

        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-style: italic;
        color: #acacac;
    }

    .container .mainleft .left_brand >a .vt_add {

        position: fixed;
        top: 0px;
        left: 50%;
        transform: translateX(56%);
        width: 25%;
        height: 52px;
        z-index: 99999;
    }

    .container .mainleft .left_brand >a .home_btn {

        width: 100%;
        height: 100%;
        font-size: 20px;
        border: none;
        outline: none;
        background-color: #fff;
    }

    .container .mainleft .left_brand >a .add_homebtn {

        position: fixed;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 52px;
        z-index: 99999;
    }

    /* 右侧帖子展示页面 */
    .container .mainright {
        width: 100%;
        /* border: 1px dotted rgba(0, 0, 255); */
    }

    /* 中间层 包括贴文区域和页码数区域 */
    .container .mainright .showtext {

        width: 100%;
        margin-bottom: 2px;
    }

    /* 贴文及视频显示区域 主区域 */
    .mainright .showtext .textrow {

        width: 100%;
        margin-bottom: 2px;
        /* border: #f56033 1px solid; */
    }

    /* 第一层 */
    /* 也就是最底层 商品信息区域 */
    .mainright .showtext .textrow .fir_layer {
        display: none;
        position: relative;
        width: 100%;
        background-color: #fff;
        border: 1px solid #f56033;
    }

    /* 防止溢出 */
    /* 商品图片展示区域 */
    .showtext .textrow .fir_layer .bigpic_show {

        position: relative;
        width: 100%;
        margin-bottom: 2px;
        overflow: hidden;
    }

    .showtext .textrow .fir_layer .bigpic_show .picshow_list {

        display: flex;
        width: 600%;
    }

    .showtext .textrow .fir_layer .bigpic_show .picshow_list > li {

        flex: 1;
    }

    .showtext .textrow .fir_layer .bigpic_show .picshow_list > li img {

        width: 100%;
        vertical-align: middle;
    }

    /* 左划箭头 */
    .showtext .textrow .fir_layer .bigpic_show .shop_arrowl {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        border-radius: 50%;
        font-size: 24px;
        color: #fff;
        background-color: rgb(0, 0, 0, 0.2);
    }

    /* 右划箭头 */
    .showtext .textrow .fir_layer .bigpic_show .shop_arrowr {
        position: absolute;
        top: 50%;
        right: 0px;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        border-radius: 50%;
        font-size: 24px;
        color: #fff;
        background-color: rgb(0, 0, 0, 0.2);
    }

    /* 底部商品图片计数区域 */
    .showtext .textrow .fir_layer .bigpic_show .shop_sumclick {

        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 24px;
    }
    .showtext .textrow .fir_layer .bigpic_show .shop_sumclick .sumclick_btn {

        display: flex;
    }
    .showtext .textrow .fir_layer .bigpic_show .shop_sumclick .sumclick_btn > li {

        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 2px;
        background-color: rgb(0, 0, 0, 0.2);
    }

    /* 商品文字说明区域 */
    .showtext .textrow .fir_layer .imgtext_mark {

        width: 100%;
    }

    /* 头像及名字区域 */
    .showtext .textrow .fir_layer .imgtext_mark .header_venderimg {

        display: flex;
        padding: 0px 16px;
        width: 100%;
        margin-bottom: 2px;
    }

    .showtext .textrow .fir_layer .imgtext_mark .header_venderimg .vender_tinypic {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin-right: 16px;
        overflow: hidden;
    }

    .showtext .textrow .fir_layer .imgtext_mark .header_venderimg .vender_tinypic img {

        width: 100%;
        height: 100%;
    }

    /* 用户名字及口号 */
    .showtext .textrow .fir_layer .imgtext_mark .header_venderimg > ul {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .showtext .textrow .fir_layer .imgtext_mark .header_venderimg > ul li:first-child {
        flex: 2;
        display: flex;
        align-items: center;
    }

    .showtext .textrow .fir_layer .imgtext_mark .header_venderimg > ul li:last-child {
        flex: 1;
        font-size: 14px;
        color: #acacac;

    }

    /* 商品详细情况 */
    .showtext .textrow .fir_layer .imgtext_mark .prod_intro {

        width: 100%;
        margin-bottom: 2px;
    }

    .showtext .textrow .fir_layer .imgtext_mark .prod_intro .prodlist_deta {

        width: 100%;
    }

    .showtext .textrow .fir_layer .imgtext_mark .prod_intro .prodlist_deta > li {

        width: 100%;
    }

    .showtext .textrow .fir_layer .imgtext_mark .prod_intro .prodlist_deta > li h3 {

        width: 100%;
        height: 52px;
        line-height: 52px;
        padding-left: 16px;
        font-weight: 400;
        color: #acacac;
    }

    .showtext .textrow .fir_layer .imgtext_mark .prod_intro .prodlist_deta > li p {

        width: 100%;
        text-indent: 2em;
        padding-left: 16px;
        padding-right: 6px;
        line-height: 1.6em;
        color: #343a40;
    }
   
    /* 下单购买链接 */
    .showtext .textrow .fir_layer .imgtext_mark .buyit_now {

        display: block;
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 24px;
        color: #f56033;
        background-color: #e2e2e2;
        /* border: #1e90ff 1px solid; */
    }

    /* 第二层 */
    /* 个人简介板块 */
    .mainright .showtext .textrow .sec_layer {
        display: none;
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        background-color: #fff;
        z-index: 9999;
    }

    .mainright .showtext .textrow .sec_layer .pubshow_info {

        width: 100%;
        height: calc(100vh - 108px);
        margin-bottom: 16px;
    }

    .mainright .showtext .textrow .sec_layer .pubshow_info .pubshow_imginfo {

        /* 需要定位 为底部悬浮透明区域的名字ID作参照 */
        position: relative;
        width: 100%;
        height: 100%;
        /* border: 1px solid red; */
    }

    /* 1. 第1个li 大图片区域 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg {

        width: 100%;
        height: 100%;
    }

    /* 多张照片的结构 实现左划右划的功能 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show {

        /*  为左右箭头作参照 */
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* 默认展示6张图片 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .multpic_swipe {
        display: flex;
        width: 600%;
        height: 100%;
    }

    /* 6个li里面包含6张图片 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .multpic_swipe > li {

        flex: 1;
        height: 100%;
    }

    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .multpic_swipe > li img {

        width: 100%;
        height: 100%;
    }

    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .arrow_l {

        position: absolute;
        left: 0px;
        top: 50%;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 32px;
        border-radius: 50%;
        color: #fff;
        background-color: rgb(0, 0, 0, 0.2);
    }

    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .arrow_r {

        position: absolute;
        right: 0px;
        top: 50%;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 32px;
        border-radius: 50%;
        color: #fff;
        background-color: rgb(0, 0, 0, 0.2);
    }

    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .circle_total {
        /* 手机屏幕上无需圆点计数 */
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 24px;
    }

    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .circle_total > li {
        /* 手机屏幕上无需圆点计数 */
        display: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgb(0, 0, 0, 0.2);
    }

    /* 第2个li 个人信息展示区域 */
    .sec_layer .pubshow_info .pubshow_imginfo .pubshow_text {
        /* display: none; */
        position: absolute;
        left: 0px;
        bottom: 0px;
        background-color: rgb(0, 0, 0, 0.3);
        width: 100%;
        height: 22vh;
    }

    .sec_layer .pubshow_info .pubshow_imginfo .pubshow_text .pubpro_items {

        width: 100%;
        height: 100%;
        padding: 0px 16px;
    }

    .sec_layer .pubshow_info .pubshow_imginfo .pubshow_text .pubpro_items > li:first-child {

        display: flex;
        height: 50%;
    }

    .pubshow_info .pubshow_imginfo .pubshow_text .pubpro_items > li:first-child .pro_itemone {

        flex: 3;
        display: flex;
        flex-direction: column;
    }

    .pubshow_text .pubpro_items > li:first-child .pro_itemone h4 {

        flex: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1e90ff;
        font-size: 24px;
        font-weight: 400;
    }

    .pubshow_text .pubpro_items > li:first-child .pro_itemone p {

        flex: 2;
        display: flex;
        justify-content: center;
        /* font-size: 14px; */
        font-style: italic;
        color: #fff;
    }

    .pubshow_info .pubshow_imginfo .pubshow_text .pubpro_items > li:first-child .pro_itemtwo {

        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pubshow_info .pubshow_imginfo .pubshow_text .pubpro_items > li:first-child .pro_itemtwo img {

        width: 45px;
        height: 30px;
    }

    .pubshow_text .pubpro_items > li:nth-child(2) {

        display: flex;
        width: 100%;
        height: 25%;
    }

    .pubshow_text .pubpro_items > li:nth-child(2) span {

        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        /* font-size: 14px; */
        color: #fff;
    }

    .pubshow_text .pubpro_items > li:last-child {

        display: flex;
        width: 100%;
        height: 25%;
    }
    .pubshow_text .pubpro_items > li:last-child span{

        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        /* font-size: 14px; */
        color: #fff;
    }

    /* 新增喜欢和无感的模块 */
    .mainright .showtext .textrow .sec_layer .multemo_click {

        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 52px;
        margin-bottom: 16px;
    }

    .sec_layer .multemo_click > div {
        width: 49%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        border: 1px solid #343a40;
    }

    /* 贴文视频数量及商店模块区域 */
    .mainright .showtext .textrow .sec_layer .addmore_deta {

        width: 100%;
    }

    /* 贴文及视频上传数量 */
    .sec_layer .addmore_deta .tv_sum {

        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 16px;
    }

    .sec_layer .addmore_deta .tv_sum > div {

        width: 49%;
        height: 52px;
        border: 1px solid #343a40;
    }

    .sec_layer .addmore_deta .tv_sum > div h3 {

        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 50%;
        padding: 0 16px;
        font-weight: 400;
    }

    .sec_layer .addmore_deta .tv_sum > div p {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 50%;
        color: #acacac;
        padding: 0 16px;
    }

    /* 商店产品展示区域 */
    .sec_layer .addmore_deta .pubshow_goods {

        width: 100%;
        border: 1px solid #343a40;
    }

    .sec_layer .addmore_deta .pubshow_goods .ishop_mark {

        width: 100%;
    }

    .sec_layer .addmore_deta .pubshow_goods .ishop_mark h3 {

        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
    }

    .sec_layer .addmore_deta .pubshow_goods .ishop_mark p {

        width: 100%;
        text-align: center;
        color: #acacac;
    }

    .sec_layer .addmore_deta .pubshow_goods > a {

        display: block;
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 18px;
        color: #f56033;
    }

    /* 第三层 */
    /* 也就是最顶层主页帖子展示区域 */
    .mainright .showtext .textrow .thr_layer {
        /* 待删 */
        /* display: none; */
        width: 100%;
    }

    .mainright .showtext .textrow .thr_layer .top_full {

        width: 100%;
        padding-top: 6px;
        background-color: #fff;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li {

        width: 100%;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:not(:first-child) {

        padding-left: 64px;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:not(:last-child) {

        margin-bottom: 6px;
    }

    /* 帖子区域第一行 */
    .mainright .showtext .textrow .thr_layer .top_full > li:first-child {

        padding-left: 6px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    /* 头像区域宽高是52px */
    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .firsticon {

        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .firsticon img {

        width: 100%;
        height: 100%;
    }

    /* 名字 时间 纬度区域 */
    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .infofile {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .infofile li {

        padding-left: 6px;

    }

    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .infofile li:first-child {

        text-transform: capitalize;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .infofile li:first-child i {
        font-style: normal;
        font-size: 12px;
        color: orangered;
    }
    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .infofile li:last-child span {
        font-size: 12px;
        color: #acacac;
        /* font-style: italic; */
    }

    /* 贴文转发按钮区域 */
    .mainright .showtext .textrow .thr_layer .top_full > li:first-child .repost_btn {

        display: none;
        margin: 0 6px; 
    }

    .showtext .textrow .thr_layer .top_full > li:first-child .repost_btn span {

        display: block;
        height: 42px;
        line-height: 42px;
        text-align: center;
        padding: 0 18px;
        color: #fff;
        background-color: #343a40;
    }

    /* 第二行的贴文区域 */
    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(2) p {
        width: 100%;
        line-height: 1.5em;
        padding-right: 6px;
        font-size: 16px;
        overflow-wrap: break-word;
    }

    /* 第三行的图片展示区域 */
    /* 发表帖子的插图 最多发6张 */
    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(3) {

        width: 100%;
    }

    /* 目前只有1张图片 使用align-items即可 */
    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(3) .feed_multpic {

        display: flex;
        width: 100%;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(3) .feed_multpic > li {
        
        width: 100%;

    }

    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(3) .feed_multpic > li img {

        width: 38.2%;
        vertical-align: middle;
    }

    /* 最后一个li 属于隐藏视频模块 */
    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(4) .post_sum {

        width: 100%;
        padding-bottom: 6px;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(4) .post_sum span {

        font-size: 12px;
        /* font-style: italic; */
        color: #acacac;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(4) .hidden_video {

        position: relative;
        width: 100%;
        /*padding-top: 2px;*/
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(4) .hidden_video p {

        position: absolute;
        top: -1.9em;
        right: 12px;
        font-size: 12px;
        font-style: italic;
        color: #acacac;
    }

    /* 视频video默认是inline-block或者inline */
    /* 改成block控制其与父元素之间的缝隙 */
    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(4) .hidden_video video {
        display: block;
        width: 100%;
    }

    .mainright .showtext .textrow .thr_layer .top_full > li:nth-child(4) .hidden_video video source {

        width: 100%;
    }

    /* 翻页计数器 页数 */
    .mainright .feed_sumpage {

        width: 100%;
        height: 52px;
    }

    .mainright .feed_sumpage > ul {

        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-left: 64px;
        background-color: #fff;
    }

    .mainright .feed_sumpage > ul li {

        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 30px;
        font-size: 14px;
        color: #343a40;
        background-color: #e2e2e2;
    }

    /* 底部区域 */
    footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 52px;
        margin: 0px 2px;
        background-color: #fff;
        color: #343a40;
    }
    footer p {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
    }
    footer p a {

        font-size: 12px;
        color: #343a40;
    }

}

/* 媒体查询 屏幕像素大于768px */
@media screen and (min-width: 768px) and (max-width: 991px) {}

/* 媒体查询 屏幕像素大于992px */
@media screen and (min-width: 992px) and (max-width: 1199px) {}

/* 媒体查询 屏幕像素大于1200px */
@media screen and (min-width: 1200px) {

    /* 顶部品牌栏 */
    .header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 99900;
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        background-color: #fff;
        color: #343a40;
        /* box-shadow: 0 1px 1px #343a40; */
    }

    .header .headbar {
        position: relative;
        width: 1190px; 
        height: 100%;
        margin: 0 auto;
    }

    .brand_title {
        width: 100%;
        height: 100%;
        /* 首行缩进-9999px */
        text-indent: -9999px;
        background-image: url(o_image/header_bar.png);
        /* background-size属性允许你设置背景图片的尺寸 */
        background-size: 52px 52px;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: scroll;
    }

    /* 页面滚动一定距离后 出行网站名字Objota Logo隐藏起来 */
    .headbar_h1 {
        padding: 0 168px;
        text-indent: 0;
        text-align: left;
        font-size: 24px;
        font-weight: 400;
        color: #1e90ff;
        background-image: none;
    }

    /* 全局搜索栏模块 */
    .global_search {
        position: fixed;
        top: 0px;
        left: 50%;
        transform: translateX(-131%);
        /* 1190占比的38.1% 按黄金比例 */
        width: 454px;
        z-index: 99999;
        padding: 0;
    }

    .global_search .global_input {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* 全局搜索框模块 */
    .global_search input[type="search"] {
        display: none;
        width: 100%;
        height: 52px;
        padding: 0 16px;
        margin: 0;
        margin-top: 2px;
        font-size: 16px;
        border: none;
        outline: none;
        border: 1px solid #343a40;
    }

    /* 输入内容时自动弹出X，可用退格键删除 */
    .global_search input[type="search"]::-webkit-search-cancel-button {
        display: none;
    }

    /* 全局搜索提交按钮 */
    .global_search .global_submit {
        
        order: -1;
        width: 84px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        color: #343a40;
        background-color: #fff;
        font-size: 16px;
        outline: none;
        border: none;
    }
    .global_search .global_submit:hover {
        color: #fff;
        background-color: #343a40;
        font-size: 22px;
    }

    /* feed流主体页面外框架 */
    .container {
        width: 1190px;
        margin: 0 auto;
        margin-top: 54px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 50px;
    }

    /* 左侧主页面 */
    .container .mainleft {
        /* 黄金分割比例长度 */
        width: 38.2%;
        /* 使用函数用于动态计算长度值，注意运算符前后保留空格 */
        height: calc(100vh - 104px);
        background-color: #fff;
    }
    .mainleft .left_brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .mainleft .left_brand h2 {
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        color: #1e90ff;
        font-weight: 400;
    }
    .mainleft .left_brand p {
        width: 100%;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #1e90ff;
        font-size: 12px;
    }
    .mainleft .left_brand .home_btn {
        width: 100%;
        height: 52px;
        line-height: 52px;
        color: #343a40;
        background-color: #fff;
        outline: none;
        border: none;
        font-size: 16px;
    }
    .mainleft .left_brand .home_btn:hover {
        width: 84px;
        font-size: 22px;
        color: #fff;
        background-color: #343a40;
    }
    /* 滚动到顶部以后 登录按钮的位置 */
    .mainleft .left_brand .add_homebtn {
        position: fixed;
        top: 0px;
        left: 2px;
        width: 84px;
        z-index: 99999;
    }

    /* 右区域网页主体帖子部分 */
    /* 右侧帖子展示页面 */
    .mainright {
        width: 61.7%;
        padding-left: 1px;
    }

    /* 帖子流展示区域 */
    .mainright .showtext {
        width: 100%;

    }
    /* 每一个大ul是一个单独的帖子 */
    /* 正常情况下不需要相对定位 */
    /* 每点击一次头像时只有一个li显示，其余为none */
    .mainright .showtext .textrow {
        position: relative;
        width: 100%;
        margin-bottom: 2px;
        /* border: 1px dashed blue; */
    }


    /* 第一层 也就是最底层 商品信息区域 */
    /* 正常情况下display为none 只有双击头像时display为flex时才会出现 */
    .mainright .showtext .textrow .fir_layer {

        display: none;
        position: relative;
        width: 100%;
        /* height: 280px; */
        height: calc(100vh - 104px);
        background-color: #fff;
        /* border: 1px solid red; */
    }

    /* 大图片浏览区域 */
    .showtext .textrow .fir_layer .bigpic_show {

        position: relative;
        top: 0px;
        left: -50%;
        width: 100%;
        height: 100%;
        /* 子元素超出了父元素的固定宽度，裁剪溢出的部分 */
        overflow: hidden;
    }

    .showtext .textrow .fir_layer .bigpic_show .picshow_list {
        display: flex;
        /* 包含6张照片的宽度 即是600%*/
        width: 600%;
        height: 100%;
    }

    .showtext .textrow .fir_layer .bigpic_show .picshow_list > li {

        flex: 1;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    .showtext .textrow .fir_layer .bigpic_show .picshow_list > li img {

        width: 100%;
        height: 100%;
        vertical-align: middle;
    }


    /* 左箭头 */
    .fir_layer .bigpic_show .shop_arrowl {

        position: absolute;
        top: 45%;
        left: 0px;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 24px;
        background-color: rgb(0, 0, 0, 0.2);
        border-radius: 50%;
    }

    /* 右箭头 */
    .fir_layer .bigpic_show .shop_arrowr {

        position: absolute;
        top: 45%;
        right: 0px;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 24px;
        background-color: rgb(0, 0, 0, 0.2);
        border-radius: 50%;
    }


    /* 底部商品图片计数区域 */
    .fir_layer .bigpic_show .shop_sumclick .sumclick_btn {

        display: flex;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        
    }

    .fir_layer .bigpic_show .shop_sumclick .sumclick_btn > li {

        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 50%;
        background-color: rgb(0, 0, 0, 0.2);

    }

    .fir_layer .bigpic_show .shop_sumclick .sumclick_btn > li:first-child {

        background-color: #f56033;

    }


    /* 商品文字说明区域 */
    .showtext .textrow .fir_layer .imgtext_mark {

        position: absolute;
        top: 0px;
        right: 0px;
        width: 50%;
        height: 100%;
        padding: 16px;
        /* border: 1px dashed brown; */
        /* background-color: lightblue; */
        display: flex;
        flex-direction: column;
    }
    .fir_layer .imgtext_mark .header_venderimg {
        height: 52px;
        /* border: 1px solid #000; */
        display: flex;
        margin-bottom: 16px;
    }
    .fir_layer .imgtext_mark .header_venderimg .vender_tinypic {

        width: 52px;
        height: 100%;
        margin-right: 16px;
        border-radius: 50%;
        overflow: hidden;
    }
    .fir_layer .imgtext_mark .header_venderimg .vender_tinypic img {

        width: 100%;
        height: 100%;
    }
    .fir_layer .imgtext_mark .header_venderimg > ul {

        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* background-color: pink; */
    }
    .fir_layer .imgtext_mark .header_venderimg > ul li:first-child {

        flex: 2;
        display: flex;
        align-items: center;

    }
    .fir_layer .imgtext_mark .header_venderimg > ul li:last-child {

        flex: 1;
        font-size: 14px;
        font-style: italic;
        color: #acacac;
    }
    .fir_layer .imgtext_mark .prod_intro {

        flex: 1;
        /* border: 1px dotted darkorchid; */
    }
    .fir_layer .imgtext_mark .prod_intro .prodlist_deta {

        width: 100%;
        height: 100%;
        /* background-color: #fff; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .fir_layer .imgtext_mark .prod_intro .prodlist_deta > li h3 {

        height: 28px;
        font-weight: 400;
        color: #343a40;
    }
    .fir_layer .imgtext_mark .prod_intro .prodlist_deta > li p {

        line-height: 1.8em;
        text-indent: 2em;
    }
    /* 马上下单按钮链接 */
    .fir_layer .imgtext_mark .buyit_now {
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 24px;
        margin-top: 16px;
        color: #fff;
        background-color: #f56033;
    }






   
    /* 中间层 个人资料区域模块 */
    /* 中间层，正常情况下display为none，只有单击头像时才会出现 */
    .mainright .showtext .textrow .sec_layer {
        
        width: 100%;
        /* 1190*0.617*0.382=280.47586 高度是宽度的0.382 */
        height: 280px;
        /* padding-top: 8px; */
        /* padding-left: 2px; */
        background-color: #fff;
        /* border: 1px dashed red; */
        /* 3个子Div元素，X轴方向排列 */

        display: none;

        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        border: 1px solid red;

    }


    /* sec_layer的3个子元素是div，1个Div的宽度占比是三分之一 */
    .sec_layer div {

        flex: 1;
        align-self: center;
        height: 100%;
    }

    /* 第一个div */
    .sec_layer .pubshow_info {
        width: 100%;
        height: 100%;
        /* border: 1px dotted red; */

    }

    .sec_layer .pubshow_info .pubshow_imginfo {

        position: relative;
        width: 100%;
        height: 100%;
        background-image: url("./user_faceimage/dfxj2025.jpeg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    /* ul里面的第1个li */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg {

        position: relative;

        /* display: none; */

        width: 100%;
        height: 100%;
    }

    /* 多张照片的结构 实现左划右划的功能 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show {

        /* 宽度设置为1190的38.2% */
        width: 454.58px;
        height: calc(100vh - 104px);
        position: fixed;
        top: 54px;
        left: 50%;
        transform: translateX(-131%);
        /* border: 1px solid #1e90ff; */

        overflow: hidden;

    }


    /* 默认展示6张图片 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .multpic_swipe {

        display: flex;
        width: 600%;
        /* border: #343a40 1px solid; */
    }

    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .multpic_swipe > li {

        flex: 1;
        width: 100%;

    }

    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .multpic_swipe > li img {

        width: 100%;
        vertical-align: middle;

    }

    /* 左箭头 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .arrow_l {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 32px;
        border-radius: 50%;
        color: #fff;
        background-color: rgb(0, 0, 0, 0.2);
    }

    /* 右箭头 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .arrow_r {
        position: absolute;
        top: 50%;
        right: 0px;
        font-size: 32px;
        width: 52px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        background-color: rgb(0, 0, 0, 0.2);
    }


    /* 图片底部小圆点显示区域 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .circle_total {

        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 16px;
    }

    /* 图片底部的计数小圆点 */
    .sec_layer .pubshow_info .pubshow_imginfo .info_pubimg .multpic_show .circle_total > li {

        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
    }



    /* ul里面的第2个li */
    .sec_layer .pubshow_info .pubshow_imginfo .pubshow_text {

        position: absolute;
        right: 0px;
        bottom: 0px;

        width: 100%;
        height: 38.2%;
        /* background-color: lightblue; */
    }

    .pubshow_info .pubshow_imginfo .pubshow_text .pubpro_items {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        background-color: transparent;
        /* background-color: skyblue; */
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li {

        color: #fff;
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li:first-child {

        flex: 2;
        display: flex;
        flex-direction: row;
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li:first-child .pro_itemone {

        flex: 3;
        display: flex;
        flex-direction: column;
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li:first-child .pro_itemone h4 {

        flex: 2;
        display: flex;
        align-items: center;
        padding-left: 6px;
        font-size: 20px;
        font-weight: 400;
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li:first-child .pro_itemone p {

        flex: 1;
        padding-left: 6px;
        font-size: 14px;
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li:first-child .pro_itemtwo {

        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pubshow_imginfo .pubshow_text .pubpro_items li:first-child .pro_itemtwo img {

        /* 国旗比例是3:2 用0.382*3再除以2即是0.573 */
        /* 后期用字体图案就无须计算比例了 */
        width: 57.3%;
        height: 38.2%;

    }



    .pubshow_imginfo .pubshow_text .pubpro_items li:not(:first-child) {

        flex: 1;
    }
    .pubshow_imginfo .pubshow_text .pubpro_items li:nth-child(2) {
        display: flex;
        align-items: center;
    }
    .pubshow_imginfo .pubshow_text .pubpro_items li:nth-child(2) span {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 14px;
       
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li:nth-child(3) {
        display: flex;
    }

    .pubshow_imginfo .pubshow_text .pubpro_items li:nth-child(3) span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
       
    }
    .pubshow_imginfo .pubshow_text .pubpro_items li:nth-child(3) span:first-child {
        flex: 1;
    }
    .pubshow_imginfo .pubshow_text .pubpro_items li:nth-child(3) span:last-child {
        flex: 2;
    }


    /* 第2个div 喜欢和无感的模块 */
    .sec_layer .multemo_click {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* border: 1px solid red; */
        padding-bottom: 6px;
    }

    .sec_layer .multemo_click > div {
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px dotted #1e90ff; */
        /* background-color: pink; */
    }

    .sec_layer .multemo_click > div:first-child {
        flex: 3;
        font-size: 100px;
    }
    
    .sec_layer .multemo_click > div:last-child {
        flex: 2;
        width: 114px;
        border-radius: 50%;
        font-size: 64px;
        color: #acacac;
        background-color: #e7e8e9;
    }





    /* 第3个div 贴文视频数量及商店模块区域 */
    .sec_layer .addmore_deta {

        display: flex;
        flex-direction: column;
        padding-top: 6px;
    }

    /* 贴文及视频上传数量 */
    .sec_layer .addmore_deta .tv_sum {
        flex: 1;

        display: flex;
        flex-direction: column;
        width: 100%;
        /* border: 1px solid #1e90ff; */
    }

    .sec_layer .addmore_deta .tv_sum .postext_sum {
        flex: 1;
        width: 100%;
    }
    .sec_layer .addmore_deta .tv_sum .showvideo_sum {
        flex: 1;
        width: 100%;
    }

    .sec_layer .addmore_deta .tv_sum div {
        display: flex;
        flex-direction: column;
    }

    .sec_layer .addmore_deta .tv_sum div h3 {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 6px;
        font-weight: 400;
        font-size: 16px;
    }

    .sec_layer .addmore_deta .tv_sum div p {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #acacac;
    }



    /* 商品产品展示区域 */
    .sec_layer .addmore_deta .pubshow_goods {

        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .sec_layer .addmore_deta .pubshow_goods .ishop_mark {

        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .sec_layer .addmore_deta .pubshow_goods .ishop_mark h3 {

        flex: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 52px;
        font-size: 24px;
        font-weight: 400;
    }

    .sec_layer .addmore_deta .pubshow_goods .ishop_mark p {

        flex: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: #acacac;
        font-size: 14px;
    }

    /* 商店访问链接模块 */
    .sec_layer .addmore_deta .pubshow_goods > a {

        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: #f56033;
    }
    .sec_layer .addmore_deta .pubshow_goods > a:hover {

        font-size: 24px;
    }


    


    /* 最顶层 */
    /* 最顶层正常情况下display为block,单击双击时display才会为none */
    .mainright .showtext .textrow .thr_layer {

        width: 100%;
        
    }
    .mainright .showtext .textrow .thr_layer .top_full {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        padding-top: 8px;
        padding-right: 8px;
        background-color: #fff;
    }

    .showtext .thr_layer .top_full > li:not(:first-child) {

        padding-left: 64px;

    }
    .showtext .thr_layer .top_full > li:not(:last-child) {

        width: 100%;
        margin-bottom: 6px;

    }

    /* 第一行的li图片和名字 */
    .showtext .textrow .thr_layer .top_full > li:first-child {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-left: 6px;
    }

    .showtext .textrow .thr_layer .top_full > li:first-child .firsticon{
        width: 52px;
        height: 52px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 6px;
    }

    /* 帖子板块首行图片信息 */
    .showtext .textrow .thr_layer .top_full > li:first-child .firsticon img {

        width: 100%;
        height: 100%;
    }

    .showtext .textrow .thr_layer .top_full > li:first-child ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 3px 0;
        height: 52px;
    }

    .showtext .textrow .thr_layer .top_full > li:first-child ul li {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        text-transform: capitalize;
    }

    .showtext .textrow .thr_layer .top_full > li:first-child ul li i {
        font-style: normal;
        font-size: 12px;
        color: orangered;
        
    }

    .showtext .textrow .thr_layer .top_full > li:first-child ul li:last-child {
        font-size: 14px;
        color: #acacac;
        font-style: italic;
    }

    /* 转发贴文按钮模块 */
    .showtext .textrow .thr_layer .top_full > li:first-child .repost_btn {
        
        display: none;
        margin-left: 8px;
    }

    .showtext .textrow .thr_layer .top_full > li:first-child .repost_btn span {

        height: 52px;
        line-height: 52px;
        padding: 0 30px;
        color: #fff;
        background-color: #343a40;
    }

    /* 第二个li中的段落p */
    .showtext .textrow .thr_layer .top_full > li:nth-child(2) p {
        width: 100%;
        line-height: 1.5em;
        padding-right: 52px;
        overflow-wrap: break-word;
    }

    /* 第三个li */
    .showtext .textrow .thr_layer .top_full li:nth-child(3) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: center;
        padding-right: 2px;
    }

    /* 第三个li中的img图片，一行摆放3张图片，最多放6张 */
    .showtext .textrow .thr_layer .top_full li:nth-child(3) img {

        width: 38.2%;

    }


    .showtext .textrow .thr_layer .top_full > li:last-child {

        padding-left: 64px;
        width: 100%;
    }

    .post_sum {

        width: 100%;
        height: 36px;
        line-height: 36px;
        margin-bottom: 6px;
    }

    .post_sum span {
        font-size: 14px;
        color: #acacac;
        font-style: italic;
        margin-right: 16px;
    }

    /* 隐藏视频的模块 默认不显示 */
    .hidden_video {
        position: relative;
        width: 100%;
    }

    /* 视频上传时间 */
    .hidden_video .upvideo_time {
        position: absolute;
        top: -2.3em;
        right: 16px;
        color: #acacac;
        font-size: 14px;
        font-style: italic;
    }

    /* 隐藏视频的播放区域 */
    .hidden_video video {
        /* 视频video默认是inline-block或者inline， */
        /* 改成block控制其与父元素之间的缝隙 */
        display: block;
        width: 100%;
    }


    /* 翻页计数器 页数 */
    .container .mainright .feed_sumpage {
        width: 100%;
    }

    .container .mainright .feed_sumpage > ul {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 52px;
        padding-left: 64px;
        background-color: #fff;
    }

    .container .mainright .feed_sumpage > ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        font-size: 14px;
        color: #343a40;
        background-color: #e2e2e2;
    }

    /* 底部导航栏 */
    footer {
        position: fixed;
        left: 0px;
        bottom: 0px;
        overflow: hidden;
        width: 100%;
        background-color: #fff;
        color: #343a40;
        text-align: center;
    }
    footer p {
        margin: 6px auto;
        font-size: 12px;
    }
    footer a {
        color: #343a40;
    }


}