/*分页样式*/
.page { padding:68px 0px 0px 1px; float:left; clear:both;color: #fff;    height: 0.62rem;}
.page a, .page span { float:left; display:block; border:1px solid #D3D1D1; padding:2px 5px; margin-left:4px; line-height:22px; }
.page a:link, .page a:visited { text-decoration:none; }
.page a:hover { background:#0188fb; color:#ff9900; }
.page .current{ background:#0188fb; color:#FFF;}
.page #total{color:#0188fb}



#work #main .box .items .col li>a,#work #main .box .items .col li>div {
    width: 42.96%
}

#work #main .box .items .col li>a:nth-of-type(2),#work #main .box .items .col li>div:nth-of-type(2) {
    margin-top: 7rem
}

#work #main .box .items .col li>a .photo,#work #main .box .items .col li>div .photo {
    width: 100%;
    height: 36vw;
    position: relative;
    overflow: hidden
}

#work #main .box .items .col li>a .photo figure,#work #main .box .items .col li>div .photo figure {
    width: 100%;
    height: 100%;
    pointer-events: none;
    margin: 0;
    position: absolute;
    top: 0%;
    left: 0
}

#work #main .box .items .col li>a .photo figure .videoBox,#work #main .box .items .col li>div .photo figure .videoBox {
    pointer-events: auto;
    width: calc(100% + 2px);
    background-position: bottom;
    background-size: cover;
    left: -1px
}

#work #main .box .items .col li>a .photo figure .videoBox video,#work #main .box .items .col li>div .photo figure .videoBox video {
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s linear
}

#work #main .box .items .col li>a .photo figure .videoBox.active video,#work #main .box .items .col li>div .photo figure .videoBox.active video {
    opacity: 1
}

#work #main .box .items .col li>a .photo figure img,#work #main .box .items .col li>div .photo figure img {
    object-fit: cover
}

#work #main .box .items .col li>a .photo figure img.js-image,#work #main .box .items .col .li>div .photo figure img.js-image {
    opacity: 0
}

#work #main .box .items .col li>a .photo figure .appTs,#work #main .box .items .col li>div .photo figure .appTs {
    opacity: 0;
    transition: opacity .8s linear
}

#work #main .box .items .col li>a .photo figure .appTs canvas,#work #main .box .items .col li>div .photo figure .appTs canvas {
    opacity: 0;
    width: 100%;
    height: auto;
    transition: opacity .3s linear
}

#work #main .box .items .col li>a .photo figure .appTs.loaded,#work #main .box .items .col li>div .photo figure .appTs.loaded,#work #main .box .items .col li>a .photo figure .appTs.go canvas,#work #main .box .items .col li>div .photo figure .appTs.go canvas {
    opacity: 1
}

#work #main .box .items .col li>a .photo.sliderGl,#work #main .box .items .col li>div .photo.sliderGl {
    cursor: none
}

#work #main .box .items .col li>a .msg,#work #main .box .items .col li>div .msg {
    margin-top: .4rem
}

#work #main .box .items .col li>a .msg h3,#work #main .box .items .col li>div .msg h3 {
    color: #fff;
    height: .62rem;
    perspective: 26.0417vw;
    margin-bottom: .2rem;
    font-weight: 600;
    line-height: 1;
    position: relative;
    overflow: hidden
}

#work #main .box .items .col li>a .msg h3 .letter,#work #main .box .items .col li>div .msg h3 .letter {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    min-width: .2em;
    transform-origin: 0 0
}

#work #main .box .items .col li>a .msg h3 .letter:nth-of-type(1),#work #main .box .items .col li>div .msg h3 .letter:nth-of-type(1) {
    transform-origin: 0%;
    transition: opacity .5s ease-in-out,transform .5s cubic-bezier(.51,.29,.06,.68);
    position: relative
}

@media screen and (orientation: landscape) {
    #work #main .box .items .col li>a .msg h3 .letter:nth-of-type(1),#work #main .box .items .col li>div .msg h3 .letter:nth-of-type(1) {
        letter-spacing:-1px;
        font-size: .38rem
    }
}

#work #main .box .items .col li>a .msg h3 .letter:nth-of-type(2),#work #main .box .items .col li>div .msg h3 .letter:nth-of-type(2) {
    width: 100%;
    opacity: 0;
    transform-origin: 0%;
    transition: opacity .5s ease-in-out,transform .5s cubic-bezier(.51,.29,.06,.68);
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateX(-90deg)rotateX(30deg)rotate(5deg)translateY(80%)
}

#work #main .box .items .col li>a .msg p,#work #main .box .items .col li>div .msg p {
    color: #666;
    letter-spacing: 0;
    line-height: 1
}

#work #main .box .items .col li>a:hover .msg h3 .letter:nth-of-type(1),#work #main .box .items .col li>div:hover .msg h3 .letter:nth-of-type(1) {
    opacity: 0;
    transform: rotateX(90deg)rotateX(-30deg)rotate(-5deg)translateY(-80%)
}

#work #main .box .items .col li>a:hover .msg h3 .letter:nth-of-type(2),#work #main .box .items .col li>div:hover .msg h3 .letter:nth-of-type(2) {
    opacity: 1;
    transform: none
}

.items .col .n1 {
   width: 42.96%;
     margin-right: auto;
            margin-left: 0; 
}

.items .col .n2 {
    
    width: 42.96%;
       margin-left: auto;
            margin-right: 0; 
}
.items .col .n3 {
   width: 42.96%;
     margin-right: auto;
            margin-left: 0; 
}

.items .col .n4 {
    
    width: 42.96%;
       margin-left: auto;
            margin-right: 0; 
}
.items .col .n5 {
   width: 42.96%;
     margin-right: auto;
            margin-left: 0; 
}

.items .col .n6 {
    
    width: 42.96%;
       margin-left: auto;
            margin-right: 0; 
}
.items .col .n7 {
   width: 42.96%;
     margin-right: auto;
            margin-left: 0; 
}

.items .col .n8 {
    
    width: 42.96%;
       margin-left: auto;
            margin-right: 0; 
}

.items .col .n9 {
   width: 42.96%;
     margin-right: auto;
            margin-left: 0; 
}

.items .col .n10 {
    
    width: 42.96%;
       margin-left: auto;
            margin-right: 0; 
}




.items .col-1 li>a{
    width: 42.96%
        margin-right: auto;
            margin-left: 0; 
}
}
.items .col-2 li>div {
    width: 42.96%
     margin-left: auto;
            margin-right: 0; 
}


.Tag{ text-align: left; font-weight:bold; }
.Tag a{ padding:0 3px; font-weight:normal; text-decoration:none;}

.info_previous_next_wrap{ padding:5px 10px; border:1px solid #E3E3E3; color:#333; line-height:1.8em; background:#fff; border:1px solid rgba(0, 0, 0, 0.14); border-radius:8px; box-shadow:0 3px 8px -6px rgba(0, 0, 0, 0.1); margin-top:25px; }
.Next a{ }
.Previous a{ }

/* 基础样式（电脑端） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.row.r2 {
    width: 100%;
     /* 电脑端最大宽度 */
    margin: 0 auto; /* 容器水平居中 */
    padding: 15px 20px; /* 电脑端基础留白 */
    color: #fff;
}

/* 图片响应式修复（核心：解决变形+保证比例） */
.row.r2 img {
    width: 100% !important;; /* 强制优先级，避免内联样式覆盖 */
    height: auto !important; /* 强制高度自适应，绝对不允许固定高度 */
    display: block; /* 清除行内元素的默认间隙 */
    margin: 10px auto; /* 图片居中+上下留白 */
    object-fit: contain !important;; /* 关键：保持图片比例，不拉伸变形（适配所有图片） */
    /* 可选：限制图片最大高度，避免过长图片占满屏幕 */
   
}

.InfoTitle h1 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
}

.info_from_wrap {
    font-size: 14px;
    color: #fff;
    line-height: 1.6;
    text-align: center;
    /* 电脑端文字容器留白：限制宽度+居中 */
    max-width: 85%;
    margin: 0 auto 15px; /* 底部加留白，与图片分隔 */
    padding: 0 10px; /* 额外左右内边距，防止文字贴边 */
}

.info_from_wrap b {
    color: #fff;
}
.info_from_wrap a {
    color: #fff;
    text-decoration: none;
}
.info_from_wrap a:hover {
    text-decoration: underline;
}
.info_from_wrap > * {
    margin-right: 10px; /* 电脑端元素间距 */
}

/* 媒体查询：手机端适配（屏幕宽度≤768px） */
@media (max-width: 768px) {
    .row.r2 {
        padding: 15px 20px !important; /* 增大手机端左右内边距（核心解决文字贴边） */
        max-width: 100%;
    }
    .InfoTitle h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .info_from_wrap {
        font-size: 12px;
        line-height: 1.8;
        max-width: 90%; /* 手机端文字容器宽度稍宽，但保留留白 */
        padding: 0 15px; /* 手机端额外增加文字左右内边距 */
    }
    .info_from_wrap > * {
        margin-right: 5px;
        display: inline-block;
    }
    .info_from_wrap b {
        display: inline-block;
        margin-right: 3px;
    }
    /* 手机端图片保留原有适配，避免变形/贴边 */
    .row.r2 img {
        max-width: 100% !important; /* 手机端恢复max-width，防止溢出 */
        width: 100% !important;; /* 手机端不强制100%宽度，适配小屏 */
        
        margin: 8px auto;
    }
}

 /* 视频响应式容器核心样式：占满屏幕宽度，按16:9比例自适应高度 */
    .bilibili-video-container {
        width: 100%; /* 占满父容器/屏幕宽度 */
        max-width: 100vw; /* 强制占满浏览器视口宽度，无留白 */
        aspect-ratio: 16/9; /* B站视频默认16:9比例，自动计算高度，移动端完美适配 */
        margin: 0; /* 消除默认边距，实现全屏宽 */
        padding: 0;
        position: relative;
        overflow: hidden; /* 隐藏iframe超出部分，避免滚动条 */
    }

    /* iframe填充整个容器，实现无间隙播放 */
    .bilibili-video-container iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: none; /* 替代旧的frameborder/framespacing属性，更规范 */
        scrolling: no; /* 禁止iframe内部滚动 */
        allowfullscreen: true; /* 保留全屏权限 */
    }