/* 31英寸以上显示屏（分辨率约3840px以上）隐藏内容并提示  27英寸*/
@media (min-width: 2200px) { 
    /* 1800 */
    body > * {
        display: none !important;
    }
    body::before {
        content: "请放大(ctrl +)到显示的尺寸" !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        width: 100vw !important;
        font-size: 24px !important;
        color: #333 !important;
        background: #fff !important;
    }
}

/* 手机端（768px以下）只显示提示文字 笔记本16英寸125% 50%*/
@media (max-width: 1200px) {
    /* 1600 */
    body > * {
        display: none !important;
    }
    body::before {
        content: "请到pc端打开或缩小(ctrl - )到合适尺寸" !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        width: 100vw !important;
        font-size: 24px !important;
        color: #333 !important;
        background: #fff !important;
    }
}


*{
    margin: 0;
    padding: 0;   
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: #fff;
}

.fff{
    color: #fff;
    line-height: 40px;
}
.h3-text{
    display: inline;
    line-height: 36px;

}
.text{
    text-align: center;
    margin-bottom: 20px;
    height: 36px;
}
.text3{
    text-align: center;
    margin-bottom: 40px;
    height: 36px;
}

html{
    scroll-behavior: smooth;

/* 8 */
    scroll-behavior: smooth; /* 保持原有平滑滚动 */
    overflow-x: hidden; /* 禁止横向滚动，防止页面溢出 */
    width: 100%; /* 确保html占满视口 */


}
body {
    overflow-x: hidden !important; /* 覆盖原有visible，禁止横向滚动 */
    max-width: 100vw !important; /* 强制body最大宽度为视口宽度 */
    width: 100% !important; /* 确保body占满html宽度 */
    margin: 0; /* 清除默认边距 */
    padding: 0; /* 清除默认内边距 */
}

/* 8 */
#ntr{
    background: #c72e44;
    border-radius: 10px 10px 0 0;
}
/*head*/

.h1{
    display: none;
}

/*i标签*/
.ntu{
    color: #a14c5b;
}

/*项目*/


.sit{
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    
    flex-basis: 225px;
}




.header{
/* background:url(../pase/nav-p.png)no-repeat center center/cover; */
/* background-size: 100%;  */
/* align-self: center; */
/* margin-right: 20px; */
/* color: #fff; */
/*?对象都不同*/
}
.bot{
height: 50px;
align-self: flex-end;
flex-basis: 150px;
text-align: center;
margin-top: 10px;

}
.bot:hover{
   
    background: #c72e44;
    border-radius: 10px 10px 0 0;
}
.bot h3{
    line-height: 50px;
}

/*皮*/
#nav{
display: flex;
justify-content: flex-start;
height: 600px;
background:url(../pase/nav-p.png)no-repeat center center/cover;
}




/*皮*/
.body{
    display: flex;  
    height: 2500px;
}
.body2{
    display: flex;  
    height: 1400px;
}
.body1{
    display: flex;  
    height: 2350px;
}
.body3{
    display: flex;  
    height: 1600px;
}
/*项目*/

/*左边*/
.right{
    background:#e8dfd8;
    flex: 4;

}


.content1-1{
    

    margin-left: 250px;
    background: #fff;
    height: 800px;
    width: 850px;
    border-radius: 10px;
    
}
.content3{
    

    margin-left: 250px;
    background: #fff;
    height: 1570px;
    width: 850px;
    border-radius: 10px;
    
}







.content1-2{
    margin-left: 250px;
    background: #fff;
    height: 1000px;
    width: 850px;
    border-radius: 15px;
}


.content1-2 .img{
    display: flex;
}

.content1-2 .img .img1{
    margin-bottom: 10px;
    margin-left: 15px;
    position: relative;
    width: 490px;
    height: 600px;
    
}
.content1-2 .img .img1::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 0px;
    height: 558px;
    /* transition: 1s; */
    opacity: 0.8;
}
.content1-2 .img .img1:hover:before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 490px;
    height: 558px;
     background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
    transition: 1s;
    opacity: 0.8;
}
.content1-2 .img .img1:hover .b-t{
    visibility: visible;
    top: 20%;
    transition: 5s;
}



.content1-2 .img .img1 .bt1{
    width: 100%;
    height: 7%;
     background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
    position: absolute;
    top: 93%;
    opacity: 0.8;
}
/**/
.content1-2  .b-t{
    width: 80%;
    height: 40%;
    line-height: 25px;
    position: absolute;
    top: 0%;
    left: 10%;
    color: #fff;
    visibility: hidden;
}


.content1-2  .bt-text1{
    line-height: 40px;
}

/*
.content1-2 .img .img1 .bt-text1{
    width: 401px;
    height: 200px;
    line-height: 23px;
    position: absolute;
    top: 23%;
    left: 9%;
    color: #fff;
}
*/


.content1-2 .img-2{
    display: flex;
    display: inline;
    flex-direction: column;
    height: 601px;
    width: 305px;
    margin-left: 10px;
}



.content1-2 .img-2 .img2-1 {
    position: relative;
    width: 303px;
    height: 293px;
}
.content1-2 .img-2 .img2-1::before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 303px;
    height: 0;

   
    transition: 0.6s;
    opacity: 0.8;
}
.content1-2 .img-2 .img2-1:hover:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 303px;
    height: 252px;
     background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
    transition: 0.6s;
    opacity: 0.8;
}
.content1-2 .img-2 .img2-1:hover .b-t{
    visibility: visible;
    top: 5%;
    transition: 2s;
}



.content1-2 .img-2 .img2-1 .bt2-1{
    width: 100%;
    height:14.5%;
    background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
    position: absolute;
    top: 86%;
    opacity: 0.8;
}
.content1-2 .img-2 .img2-2 {
    position: relative;
     margin-top: 10px;
     width: 303px;
     height: 293px;
}
.content1-2 .img-2 .img2-2::before {
    content: '';
    position: absolute;
    top:0px;
    left: 0;
     width: 303px;
     height: 0;
     transition: 0.6s;
     opacity: 0.8;
}
.content1-2 .img-2 .img2-2:hover:before {
    content: '';
    position: absolute;
    top:0px;
    left: 0;
     width: 303px;
     height: 255px;
     transition: 0.6s;
    background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
     opacity: 0.8;
}
.content1-2 .img-2 .img2-2:hover .b-t{
    visibility: visible;
    top: 5%;
    transition: 2s;
}




.content1-2 .img-2 .img2-2 .bt2-2{
    width: 100%;
    height:13%;
    background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
    position: absolute;
    top: 87%;
    opacity: 0.8;
}
.img34{
    display: flex;
    flex-wrap: wrap;
}
.img3{
    margin-left: 15px;
    width: 395px;
    height: 300px;
    position: relative;
}
.img3::before{
    content: '';
    position: absolute;
    top:0px;
    left: 0;
    width: 395px;
    height: 0;
    transition: 0.6s;
    opacity: 0.8;
}
.img3:hover:before{
    content: '';
    position: absolute;
    top:0px;
    left: 0;
    width: 395px;
    height: 258px;

    background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
    transition: 0.6s;
    opacity: 0.8;
}
.img3:hover .b-t{
    visibility: visible;
    top: 10%;
    transition: 2s;
}


.content1-2 .img34 .img3 .bt3{
    width: 100%;
    height: 14%;
    background: linear-gradient(90deg, rgba(203, 48, 68, 1.000) 0.000%, rgba(207, 52, 72, 0.93) 8.333%, rgba(213, 56, 76, 0.85) 16.667%, rgba(217, 60, 80, 0.74) 25.000%, rgba(221, 64, 84, 0.67) 33.333%, rgba(225, 68, 88, 0.59) 41.667%, rgba(229, 72, 92, 0.43) 50.000%, rgba(233, 76, 96, 0.31) 58.333%, rgba(237, 80, 100, 0.23) 66.667%, rgba(241, 84, 104, 0.18) 75.000%, rgba(245, 88, 108, 0.13) 83.333%, rgba(249, 92, 104, 0.09) 91.667%, rgba(253,96,108, 0) 100.000%);
    position: absolute;
    top:86%;
    opacity: 0.8;
}

.content1-3{
    margin-left: 250px;
    background: #fff;
    height: 500px;
    width: 850px;
    border-radius: 25px;
}

.content{
    margin-left: 250px;
    background: #fff;
    height: 800px;
    width: 850px;
    border-radius: 25px;
}


.content .recommendation-new .neiro p{
    font-size: 0.8rem;
    color: #777;
}



.content-su{
    margin-left: 250px;
    background: #fff;
    height: 1300px;
    width: 850px;
    border-radius: 25px;   
}

.re{

  
   margin: 10px;
   padding-top: 20px;

    
}

/*
.recommendation-top1 .main1{

    width: 293px;
    height: 272px;
    margin-left:8px ;
    margin-top:30px ;
    display: inline;
    border: #c72e44 solid 1px;
}
*/
.recommendation-top1  img{
    margin-left:8px ;
    margin-top:30px ;
}




.recommendation-top1 p{
   margin-top: 15px;
}

.mu{
    float: left;
    
    border: #ccc solid 1px;
    height: 350px;
    width: 240px;
    margin-left:20px ;
}
.mu .main3mu{
    margin-left:10px;
    margin-top: 10px;
    height: 220px;
    width: 220px;
    overflow: hidden;
    position: relative;
    border-radius: 9px;
}

.mu .main3mu .bt-mu{
    width: 78px;
    height: 21px;
    background: #c72e44;
    position: absolute;
    top:0%;
    border-radius: 6px;
    line-height: 21px;
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
}


.mu .main3mu img{
    transition: 0.5s;
    border-radius: 9px;
}

.mu h5{
    text-align: center;
    margin: 5px 0;

}
.mu p{
    text-align: center;
    font-size: 0.3em;
    color: #777;
   
}






/*右边*/
.lief{
    background: #e8dfd8;
    flex: 2;


}

.violend{
    height: 800px;
    width: 450px;
   
    padding-left: 10px;
    padding-top: 10px;
    
   
    position: sticky;
    top: 0;
    z-index: 1;
    
}

.po{
    height: 35px;
    background: black;
    width: 150px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    margin-bottom: 20px ;
    border-radius: 4px 4px 0 0;
    box-shadow: 5px 2px 1px -1px rgba(0, 0, 0, 0.2);

}
.violend .vio-head{
    height: 35px;
    background: black;
    width: 150px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    margin: 20px 0;
    border-radius: 4px 4px 0 0;
    box-shadow: 5px 2px 1px -1px rgba(0, 0, 0, 0.2);
}
/*样式*/
.po::after{
    content: '';
    display: block;
    width: 280px;
   
     border-bottom: 1px solid #fff;

}
.violend .vio-head::after{
    content: '';
    display: block;
    width: 280px;
   
     border-bottom: 1px solid #fff;

}

.violend  ul{
    list-style: none;
    margin-left: 25px;

}
.violend  ul li{
    list-style-type: circle;


    margin-top: 10px;
    margin-left: 1px;
    
}
.violend  ul li a{
   color: black;
}



/*footer*/

.foot{
    background-color: #333;
    height: 100px;
    overflow: auto;


    width: 100% !important; /* 优先使用百分比，兼容所有视口 */
    min-width: 100vw; /* 强制最小宽度为视口宽度，解决放大时收缩问题 */
    box-sizing: border-box; /* 确保内边距/边框不影响宽度计算 */
    margin: 0 !important; /* 清除默认边距 */
    padding: 0 !important; /* 清除默认内边距（若有内容偏移可自行调整padding值） */

}
.sigh{
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
    min-width: 500px;
    text-align: center;




/* 8 */
    min-width: auto !important; /* 取消最小宽度限制，避免挤压footer */

    width: 100%; /* 内部容器也占满footer宽度 */
/* 8 */
}


.foot h5 {
    color: #fff;
    margin: 10px;
}
.foot h6{
    margin: 10px;
    color: #fff;
}




/*最新消息*/

.body-new{

    height: 2450px;
}
.new{
    margin-top: 10px;
    padding-top: 20px;

    height: 2400px;
}
hr{
    width: 800px;
    margin: 0 auto;
    background-color: rebeccapurple;
}
.recommendation-new{
    height: 190px;
    display: flex;
    margin-top: 20px;
}
.content .bg{
    margin-left: 20px;
    width: 241px;
    height: 171px;
    overflow: hidden;
    position: relative;
}
/*6-9new页面 图片标签*/
/*
.content3 .bg {
    position: relative;
}
    */
.content .bg .bt-new{
    width: 90px;
    height: 20px;
    position: absolute;
    background: #c72e44;
    top: 5%;
    z-index: 1;
    border-radius: 0 9px 9px 0;
    text-align: center;
    line-height: 20px;
    color: #fff;
    font-size: 0.7rem;
}


.content  .bg img{
    transition: 0.5s;
}

.content  .neiro {
    padding-top: 5px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    flex: 6;
    width: 65%;
}
.content  .neiro p{
    margin-left: 20px;
    font-size: 0.3em;
}

.content  .neiro h4{
    margin-left: 20px;
    margin-bottom: 5px;
}


/*ul li*/
.lief ul li a:hover{
    color: #c72e44;
    margin-left: 5px;



}
/*img*/
.content1-3 img:hover{
    transform: scale(1.3);
    cursor: pointer;  
}
.content1-3 .mu:hover h5{
    color: #c72e44;
}

.recommendation-new:hover h4{
    color: #c72e44;
}
.recommendation-new:hover img{
    transform: scale(110%);
    cursor: pointer;
}

/*
.content1-2 .img{
    display: flex;
}
.content1-2 .img .img1{
    margin-bottom: 10px;
    margin-left: 15px;
}
.content1-2 .img-2{
    display: flex;
    display: inline;
    flex-direction: column;
    height: 601px;
    width: 305px;
    margin-left: 10px;
}

.content1-2 .img2-2{
    margin-top: 5px;
}
.img3{
    margin-left: 15px;
}
.img4{
    margin-left: 10px;
}
*/

/*personal*/

.warp{
    display: flex;
    flex-wrap: wrap;
}
.warp .pe-img{
    width: 263px;
    height: 272px;
    margin-left: 8px;
    margin-top: 10px;
    position: relative;
}



/*最后的一页*/
.warp .pe-img .bt-pe a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 255px;
    color: #fff;
    visibility: hidden;
}

.warp .pe-img::before {
    content: '';
    position: absolute;
    top:0px;
    left: 0; 
    transition: 0.6s;
    opacity: 0.8;
    width: 263px;
    height: 0;
    background: #777;
}
.warp .pe-img:hover:before {
    content: '';
    position: absolute;
    top:0px;
    left: 0; 
    transition: 0.6s;
    opacity: 0.8;
    width: 263px;
    height: 272px;
    background: #777;
}
.warp .pe-img:hover a{
    visibility: visible;
}



/* 新增样式解决缩放问题 */
html, body {
    overflow-x: hidden; /* 禁止横向滚动 */
    max-width: 100%; /* 限制最大宽度为视口宽度 */
}

#nav {
    background-size: cover; /* 确保背景图自适应容器 */
    background-position: center; /* 背景图居中显示 */
    width: 100vw; /* 使用视口宽度确保全屏 */
}

.foot {
    width: 100vw; /* 页脚使用视口宽度 */
    background-size: cover; /* 背景自适应 */
    background-position: center; /* 背景居中 */
}
/* 修复粘性布局失效问题 */
.lief .violend {
    position: sticky;
    top: 0; /* 保持原有的顶部定位 */
    z-index: 10; /* 确保不会被其他内容覆盖 */
}

/* 解除父容器对粘性定位的影响 */
html {
    overflow-x: hidden; /* 只在html层限制横向滚动 */
}
body {
    overflow-x: visible; /* 恢复body的滚动上下文 */
    max-width: none; /* 取消body的最大宽度限制 */
}

/* 修复内容容器在放大时的溢出问题
.content1-1, .content1-2, .content1-3, .content, .content-su, .content3 {
    max-width: calc(100vw - 270px); 基于视口宽度计算最大宽度
    margin-left: 250px; 保持原有左侧距离
    box-sizing: border-box; 确保内边距不影响宽度计算
} */