@charset "UTF-8";
*{margin:0;padding:0;}
img{border:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
li{list-style:none outside none;}
body{font-size:0.729vw;line-height:1.5625vw;font-family:"微软雅黑"; background:#fff6f2;width: 100%;overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{font-family:"微软雅黑";}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-family:"微软雅黑";}

p{color:#fff; text-indent:1.042vw; }
p a{color:#ff0100;}
p a:hover{color:#ff0100;}
.fl{ float:left;} .fr{ float:right;}

.banner { width:100%; margin: 0 auto; background:url("../images/banner.jpg") no-repeat center; background-size:cover; height:36vw; min-width:100vw; }
.center{ width:100%; margin: 0 auto; background: linear-gradient(#fff8db,#fee0aa); min-width:66.667vw; }

.page1{ width:62.5vw; overflow:hidden; margin:2.604vw auto 0; min-width:100vw;min-height: 49vh;}

.icon { overflow:hidden; width:0.781vw; height:0.625vw; margin:0.052vw 0 0 0.313vw;}

.title-wrapper { 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  overflow:hidden; 
  width:2.969vw; 
  height:8.75vw; 
  background-color:#e64940;
  line-height:1.615vw;
}
.title-1 { 
  display:-webkit-inline-box; 
  overflow:hidden; 
  width:1.615vw; 
  height:3.229vw; 
  font-size:1.563vw; 
  color:#fffbbe; 
  text-align:center;
  text-decoration:none;
  letter-spacing:0.156vw;
  text-overflow:ellipsis;
}
  
.caption-wrapper {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  width:62.5vw;
  height:3.5vw;
  background-color:#d93634;
  line-height:2.396vw;
  border-radius:0.8vw 0.8vw 0 0;
  margin:0 auto;
}
.caption-1 { 
  overflow:hidden;
  max-width:62.5vw;
  font-size:1.458vw;
  color:#fff; 
  font-weight:bold; 
  margin:0 auto;
}

.group{
  width:62.5vw;
  border-radius:0 0 0.8vw 0.8vw; 
  background-image:linear-gradient(#fff0e2,#fedece); 
  overflow:hidden; 
  margin:0 auto;
}
/* 弹窗样式 */
.qrcode-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.qrcode-content {
    background-color: white;
    padding: 2vw;
    border-radius: 0.8vw;
    text-align: center;
    position: relative;
    width: 25vw;
}

.qrcode-img {
    width: 20vw;
    height: 20vw;
    margin: 0 auto 1vw;
    display: block;
}

.close-btn {
    background-color: #d93634;
    color: white;
    border: none;
    padding: 0.5vw 1.5vw;
    border-radius: 0.4vw;
    cursor: pointer;
    font-size: 1vw;
    margin-top: 1vw;
}

.close-btn:hover {
    background-color: #e64940;
}

#video_search_btn,#pm_search_btn{order: 1;}

/*search*/
.search{
    
  width:fit-content;
  margin:2.083vw auto;
  overflow:hidden;
  display: flex;
}
.search input{
  display:block;
  border:0.052vw solid #fff; 
  float:right;
}
.search-bt{
  background:linear-gradient(#ff8d03,#ff4949);
  color:#fff;
  height:1.563vw;
  padding:0 0.26vw;
}
.search-txt{
  background:#fff;
  height:1.458vw;
  padding:0 0.521vw;
}

.zm{
  overflow:hidden;
  width:60.313vw;
  margin:0 auto 1.563vw;
}

/*px-box*/
.px-box{
  width:60.313vw;
  margin:1.042vw auto;
   display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}
.px-box li{
  width:16.667vw;
  margin:1.042vw 1.719vw 3vw 1.719vw;
  background: #fff;
  flex-shrink: 0;
  position: relative;

}
.px-info{
  position:relative;
  padding:0.521vw 0 1.042vw; 
  background:#fff; 
  width:16.667vw; 
  height:22.396vw; 
  overflow-y:auto; 
  text-align:center; 
  color:#5b3a2f;
}
.head-pic{
  border:0.104vw solid #E2BF7B;
  margin:0 auto 0.521vw;
  display:block;
}
.px-box a{
  color: #000;
}

.px-box h3{
  padding:0 0.2vw;
  font-size:0.938vw;
  font-weight:bold; 
  margin-top:0.521vw; 
  text-align:center;
  word-break: keep-all;
}

.px-box h2{
  padding:0 0.2vw;
  font-size:0.7vw;
  font-weight:500; 
  margin-bottom:0.2vw; 
  text-align:center;
  line-height: 1vw;
  /* min-height: 10vh; */
}


.px-info span{ 
  line-height:1.563vw;
  overflow:hidden;
}
.px-box li h4 { 
  font-size:0.729vw;  
  color:#744b18; 
  background:#fdf5ef; 
  width:100%; 
  float:left; 
  text-align:center;  
  height:2.083vw; 
  line-height:2.083vw;
}
.px-box p{
  font-size:0.833vw; 
  line-height:1.875vw; 
  text-align:center; 
  color:#5b3a2f;
}

.upvote{ cursor: pointer;width:20%; background: #f44745; border-radius: 10vw; margin:1vw auto 1vw; color: #fff; font-size: 1rem; padding: 0.1vw 1.2vw;  text-align:center;display: none}

/* container-1鼠标移入移出效果 */
.container-1 {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.container-1 img {
  width: 100%;
  transition: all 0.3s ease;
}

.container-1:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.container-1:hover {
  box-shadow: 0 0.26vw 0.52vw rgba(0, 0, 0, 0.2);
}


/* container-2鼠标移入移出效果 */
.container-2 {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 90%;
  margin: 0 auto;
}

.container-2 img {
  width: 100%;
  transition: all 0.3s ease;
}

.container-2:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.container-2:hover {
  box-shadow: 0 0.26vw 0.52vw rgba(0, 0, 0, 0.2);
}

.wrapper { 
  position:relative; 
  display:flex; 
  align-items:center; 
  display:none;
}
.tag-wrapper { 
  display:flex; 
  align-items:center;
  overflow:hidden; 
  height:2.083vw; 
  padding-left:0.365vw; 
  padding-right:0.313vw;
  background:linear-gradient(#ff8d03,#ff4949);
  line-height:0.833vw;
  border-radius:0.729vw 0 0 0;
  box-sizing:border-box;
}
.tag { 
  display:-webkit-inline-box; 
  overflow:hidden;
  width:0.833vw; 
  height:1.667vw; 
  margin-top:0.156vw; 
  font-size:0.729vw; 
  color:#ffabab;
}
.group-5 { 
  position:relative; 
  display:flex; 
  align-items:center; 
  width:4.427vw; 
  height:2.083vw; 
  background:linear-gradient(#348d87,#35b872); 
  border-radius:0 0.729vw 0 0;
}
.num { 
  position:relative; 
  overflow:hidden; 
  max-width:2.969vw;
  margin-top:0.052vw; 
  margin-left:0.729vw; 
  font-size:1.25vw; 
  line-height:1.354vw; 
  color:#fff; 
  font-weight:bold;
}

.container-1 { 
  position:relative; 
  display:flex; 
  justify-content:center;
  align-items:center; 
  overflow:hidden; 
  width:14.583vw; 
  height:8.229vw; 
  margin:0 auto;
}
.icon-1 { 
  overflow:hidden; 
  width:2.396vw;  
  height:2.396vw; 
  position:absolute;
}

.scrollbar {
    width:100%;
    overflow:auto;
    padding:0 0.521vw;
}
#scrollbar3::-webkit-scrollbar {
    width:1.042vw;
}
#scrollbar3::-webkit-scrollbar-thumb {
    background-image:url(../images/arrow.png);
    background-position:center top;
    background-repeat:no-repeat, no-repeat;
    background-size:2.604vw;
}
#scrollbar3::-webkit-scrollbar-track {
    background-color:transparent;
}

/* 分页 */
.paging{
  clear:both;
  margin:1.563vw auto 0;
  width:100%;
  height:2.083vw;
  text-align:center;
  font-size:0.729vw;
}
.paging span{
  margin:0 0.26vw;
  cursor:pointer;
  font-size:0.938vw;
  text-align:center;
  border:0.052vw solid #f64a4b;
  padding:0.26vw 0.521vw;
  color:#333;
}
.paging span:hover,
.paging span.on{
  background:#f64a4b;
  color:#FFF;
  text-decoration:none;
}

.footer {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  width:100%;
  height:11.667vw;
  margin-top:3.438vw;
  background-color:#d93634;
  white-space:nowrap;
  min-width:66.667vw;
}
.foot_scwmw {
  margin:2.708vw auto; 
  min-width:66.667vw; 
  color:#fff;
  text-align:center;
}

.foot_scwmw a{
  color:#fff;
}


/* 图片放大弹窗样式 */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1001;
    justify-content: center;
    align-items: center;
}

.image-modal-content {
    position: relative;
    /* background-color: white; */
    padding: 2vw;
    border-radius: 0.8vw;
    max-width: 80vw;
    max-height: 100vh;
    overflow: hidden;
    text-align: center;
}

.image-close {
    position: absolute;
    bottom: 0;
    left: 50%;
    font-size: 2vw;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    z-index: 1002;
    transform: translate(-50%,0);
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 0.2vw;
    line-height: 1.5vw;
}

.image-close:hover {
    color: #d93634;
}

.modal-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    margin-bottom: 1vw;
    border-radius: 0.4vw;
    box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
}

.image-info {
    text-align: center;
    color: #333;
}

.image-info h3 {
    font-size: 1.5vw;
    color: #d93634;
    margin-bottom: 0.5vw;
    font-weight: bold;
}

.image-info p {
    font-size: 1vw;
    color: #666;
    margin: 0.3vw 0;
    text-indent: 0;
}

/* 为平面作品图片添加点击提示效果 */
.container-2 {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 90%;
    margin: 0 auto;
    cursor: pointer;
}

.container-2::after {
    content: '点击放大';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(217, 54, 52, 0.8);
    color: white;
    padding: 0.5vw 1vw;
    border-radius: 0.3vw;
    font-size: 0.8vw;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.container-2:hover::after {
    opacity: 1;
}


/* 图片轮播样式 */
.image-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1vw;
}

.carousel-image-container {
    position: relative;
    max-width: 70vw;
    max-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 0.4vw;
    box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
}


/* 轮播切换按钮 */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* background-color: rgba(217, 54, 52, 0.8); */
    color: white;
    border: none;
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    font-size: 2vw;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1004;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-2-img-list,.container-1-video-list {
    display: none;
}

.carousel-btn:hover {
    /* background-color: rgba(217, 54, 52, 1); */
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn:disabled {
    /* background-color: rgba(128, 128, 128, 0.5); */
    cursor: not-allowed;
    transform: translateY(-50%);
}

.carousel-prev {
    left: -3vw;
}

.carousel-next {
    right: -3vw;
}

/* 缩略图导航 */
.thumbnail-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
    margin: 1vw 0;
    max-width: 70vw;
    overflow-x: auto;
    padding: 0.5vw;
}

.thumbnail-item {
    width: 4vw;
    height: 3vw;
    object-fit: cover;
    border-radius: 0.2vw;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    border: 0.1vw solid transparent;
    background-color: #fff;
    line-height: 3vw;
}

.thumbnail-item:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.thumbnail-item.active {
    opacity: 1;
    border-color: #d93634;
    transform: scale(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .carousel-btn {
        width: 2.5vw;
        height: 2.5vw;
        font-size: 1.2vw;
    }
    
    .carousel-prev {
        left: -3vw;
    }
    
    .carousel-next {
        right: -3vw;
    }
    
    .thumbnail-item {
        width: 3vw;
        height: 2.5vw;
    }
}


/* 视频播放弹窗样式 */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1002;
    justify-content: center;
    align-items: center;
}

.video-modal-content {
    position: relative;
    background-color: #1a1a1a;
    padding: 2vw;
    border-radius: 0.8vw;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    text-align: center;
}

.video-close {
    position: absolute;
    top: 1vw;
    right: 1.5vw;
    font-size: 2.5vw;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    z-index: 1003;
    text-shadow: 0 0 0.3vw rgba(0, 0, 0, 0.8);
}

.video-close:hover {
    color: #d93634;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto 1.5vw;
}

#modalVideo {
    width: 100%;
    height: auto;
    max-height: 60vh;
    border-radius: 0.4vw;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.5);
}

/* 视频轮播容器 */
.video-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5vw;
}

/* 视频导航按钮 */
.video-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    font-size: 1.5vw;
    font-weight: bold;
    cursor: pointer;
    z-index: 1004;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-nav-btn:hover {
    background-color: rgba(217, 54, 52, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.video-prev-btn {
    left: -4vw;
}

.video-next-btn {
    right: -4vw;
}



/* 视频缩略图导航 */
.video-thumbnails {
    display: flex;
    justify-content: center;
    gap: 0.8vw;
    margin-top: 1vw;
    flex-wrap: wrap;
}

.video-thumbnail {
    width: 6vw;
    height: 4vw;
    background-color: #333;
    border: 0.2vw solid transparent;
    border-radius: 0.3vw;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8vw;
    position: relative;
    overflow: hidden;
}

.video-thumbnail:hover {
    border-color: #d93634;
    transform: scale(1.05);
}

.video-thumbnail.active {
    border-color: #d93634;
    background-color: rgba(217, 54, 52, 0.3);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.1vw;
}


/* 视频播放按钮样式 */
.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3vw;
  height: 3vw;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.video-play-button::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 1.2vw solid #fff;
  border-top: 0.8vw solid transparent;
  border-bottom: 0.8vw solid transparent;
  margin-left: 0.2vw;
}

.container-1:hover .video-play-button {
  background: rgba(220, 53, 69, 0.9);
  transform: translate(-50%, -50%) scale(1.1);
}

/* 视频容器特殊样式 */
#video .container-1 {
  position: relative;
}

#video .container-1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  pointer-events: none;
}

#video .container-1:hover::after {
  background: rgba(0, 0, 0, 0.2);
}

/* 懒加载图片样式 */
.lazy-image {
    transition: opacity 0.3s ease;
}

.lazy-image[data-lazy="true"] {
    background-color: #f5f5f5;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iYSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iNDAiIGZpbGw9IiNmOWY5ZjkiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=');
    background-repeat: repeat;
    min-height: 200px;
}

.lazy-image.loaded {
    background-image: none;
    background-color: transparent;
}

/* 加载状态指示器 */
.loading-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin: 1vw;
}

.loading-text {
    color: #666;
    font-size: 1.2vw;
    text-align: center;
}

.loading-text::after {
    content: '...';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

.px-box li h6{left: -3.58vw; width:100%;height:2.2vw;font-size:1vw;text-align:left; line-height: 2.2vw; padding-left:6.2vw;background:url(../img/num.png) no-repeat center;color:#fff;top:-2.2vw;position: absolute;background-size: contain;}