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

html,
body {
    font-size: 12px;
    height: 100%;
    font-family: Helvetica, Arial, PingFangSC-Regular, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei";
    color: var(--ti-common-color-text-primary, #252b3a);
    background-color: #f3f4f8;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}
.videoCourse {
    width: 1200px;
    margin: 20px auto;
    background-color: #fff;
    display: flex;
    border-radius: 10px;
    flex-direction: column;
    padding-bottom: 20px;
    

}

.videoCourseBox {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-left: 15px;
    padding-top: 20px;
    position: relative;
}

.videoCourseBox img {
    width: 280px;
    height: 165px;
}
.videoCourseBox img.videoImg{ width:40px; height:40px; position: absolute; left:50%; top:58px; margin:0 0 0 -20px; z-index: 2}
.videoCourseBox li {
    border: 1px solid #e5e5e5;
    border-radius: 0 0 10px 10px;
      background-color:#f6f6f6 ;
      position: relative;
      min-height: 235px;
    display: flex;
    flex-direction: column;
    width:280px;
}
.videoCourseBox li .text{
	padding:10px;
}
.videoCourseBox li p {
    color: #333;

   /*  max-width: 260px;
    white-space: nowrap; 
    overflow: hidden;  */
    text-overflow: ellipsis; 
    margin-left: auto; 
    margin-right: auto; 
    font-size:14px;
     display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  
}

.videoCourseBox li p.dtattime{ color:#999; margin-top:5px;font-size:12px; }
.width1200 {
    width: 1200px;
    margin: 0 auto;
}

.centerDiv {
    text-align: center;
}

.headTop {
    background-color: #1744a1;
    height: 40px;
    line-height: 40px;
}

.leftText {
    font-size: 12px;
    color: #ffffff;
}

.rightText {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
}
.rightText a{    display: flex;
    align-items: center; color:#ffffff;}
.rightText  a img{ margin-right:5px;}
.headerMain {
    margin: 0 auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar {
    width: 100%;
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid rgb(229, 229, 229);
}

.navbarMain {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.navbarMain img {
    height: 40px;
}

.cardTitFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 20px;
}
.moreAll{ text-align: center;}
.tit {
    font-size: 16px;
    color: #333333;
    line-height: 24px;
    font-weight: 700;
}

/*------------------------------------  */
.topHead{ height:100px; background: #fff;display: flex; justify-content: space-between; align-items:center; padding:0 20px ; 
    -moz-box-shadow: 0 1px 11px #e3e3e3;
    -webkit-box-shadow: 0px 1px 11px #e3e3e3;
    box-shadow: 0px 1px 10px #e3e3e3;
position: fixed; z-index: 2; top:0; left:0; width:100%}
.topHeadRight{ display: flex; flex:0 0 60%;justify-content: space-between;}
.topHead-nav{ flex:1;display: flex;justify-content: space-evenly;}
.topHead-nav a{ color: #333333; font-size:0.26rem; padding-bottom:5px; }
.topHead-nav a.active{
	color:#d40108;
	border-bottom:4px solid #d40108; 
}
.topHead-nav-search{ background: #d10207; border-radius: 90px;	padding:3px; display: flex; }
.topHead-nav-search input{
	background: url("/fzvideops/images/search.png") no-repeat #fff 10px; 
	width:197px; height:33px; line-height: 33px; padding-left: 50px;
	border:none;

	border-radius: 90px 0 0 90px;
}
.topHead-nav-search button{ border:none; cursor: pointer; background: none; color:#ffff; font-size: 20px; padding:0 15px;}
.notice{ padding:1rem 0 .5rem; text-align: center; font-size:.40rem; font-weight: 600; display: flex; justify-content: center; align-items:center; flex-direction: column; }
.notice i{  margin-top:5px; width: 108px; height:0.1rem; background: #d40108; display: inline-block;}
.notice-box{ display: flex; justify-content: center; font-size: .3rem; color: #666666; padding-bottom: .8rem }
.notice-box-left{ padding:0 .78rem 0  1.43rem; flex:1}
.notice-box-left  p{ text-indent: 2em; line-height: .43rem;}
.notice-box-right{ margin-right:1.25rem;    display: flex
;
    justify-content: center;
    align-items: center;}
.works-nav{ text-align: center;font-size:.25rem; display: flex; justify-content:center; gap:50px; }
    .works-nav span{
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    cursor: pointer;
    }
.works-nav .active{ color: #d40108;border-bottom:2px solid #d40108;  }
.works-center ul{  display: flex; flex-wrap: wrap; gap:20px;justify-content: center; width:1050px; margin:50px auto 0;}
.works-center ul li{  background: #fff;     display: flex; flex-direction: column;    -moz-box-shadow: 5px 11px #e3e3e3;
    -webkit-box-shadow: 0px 5px 11px #e3e3e3;
   box-shadow: 0px 5px 11px #e3e3e3;
   border-radius: 5px;
   display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:#e8ecef;
    cursor: pointer;
}
/* 默认征文作品样式 */
#works-center-chuxuan li, 
#works-center-huojiang li {
    width: 186px;
    height: 260px;
}
/* 摄影作品特殊样式 */
#works-center-chuxuan.photography-mode li {
    width: 232px;
    height: 181px;
}
#works-center-chuxuan.photography-mode li .videoBox {
  max-height: 137px;
  height: 137px;
}
#works-center-huojiang.photography-mode li {
    width: 232px;
    height: 181px;
}
#works-center-huojiang.photography-mode li .videoBox {
  max-height: 137px;
  height: 137px;
}
.works-center ul li img{ width:100%; height:100%}
.works-center ul li p{ text-align: center; padding:0.1rem; font-size: .18rem;    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height:.3rem; background: #fff; border-radius: 0 0 5px 5px;}
.videoBox{ display: flex; justify-content: center; flex:1;max-height:210px; }
.works-center ul li.nodata{ background:none;     width: 100%;  text-align: center;box-shadow:inherit; font-size: 16px;}
.pagesBox {
  text-align: center;
  margin-top: 20px;
  padding: 10px 0;
  margin-bottom: 20px;
}

.page-btn {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ce0a22;
  cursor: pointer;
  border-radius: 3px;
  color:#ce0a22;
}

.page-btn.active{
	background: #ce0a22;
	color:#fff;
}
.notice-box-right img{ width:100%}
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%
}

.loading-container img {
    width: 50px;
    height: 50px;
}
 #section1 {
        margin-top: 100px;
    }
/* 添加媒体查询，针对不同屏幕尺寸调整样式 */
@media screen and (max-width: 768px) {
	.detail-container{max-width: inherit;
    width: 90%;
    margin-top: 20px;}
    .works-center ul li.nodata{ margin-left: 50%;}
 .loading-container   {    margin-left: 50%;}
	 /* 作品列表每行显示2个，共4个 */
    .works-center ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 10px;
    }
    /* 顶部导航栏调整 */
    .topHead {
        height: auto;
        padding: 10px;
        flex-direction: column;
        position: inherit;
    }
    body{
       display: flex;
       flex-direction: column;
    }
    .flex-Box{ flex:1; overflow-y: auto;}
    .notice{ font-size: 1.2rem; padding-bottom:30px}
    .works-nav{ font-size: 0.8rem}
    .notice i{ height:5px;}
    .notice-box-left p{ font-size: 0.75rem; line-height: 1.5}
    .works-center ul{ justify-content: flex-start;}
    .topHeadRight {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }
    .works-center ul{ width: inherit;}
    .works-center ul li p{ font-size: 0.7rem; line-height: 2.2rem}
    .topHead-nav {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .topHead-nav a {
        font-size: 0.8rem;
        padding: 5px;
         height: 37px;
    }
    
    /* 公告区域调整 */
    .notice-box {
        flex-direction: column;
        padding: 0 15px;
    }
    
    .notice-box-left {
        padding: 0;
        margin-bottom: 15px;
    }
    
    .notice-box-right {
        margin-right: 0;
        flex: 1;
    }
    
    /* 作品导航调整 */
    .works-nav {
        gap: 20px;
        padding: 0 15px;
    }
    
    /* 作品列表调整 */
    .works-center ul {
        gap: 10px;
        padding: 0 10px;
        margin-top: 20px;
    }
    
    /* 默认征文作品样式 - 移动端 */
    #works-center-chuxuan li, 
    #works-center-huojiang li {
        width: 100%;
        height: auto;
    }
    
    /* 摄影作品特殊样式 - 移动端 */
    #works-center-chuxuan.photography-mode li,
    #works-center-huojiang.photography-mode li {
        width: calc(50% - 15px);
        height: auto;
    }
    
    #works-center-chuxuan.photography-mode li .videoBox,
    #works-center-huojiang.photography-mode li .videoBox {
        max-height: 120px;
        height: 120px;
    }
    
    /* 分页按钮调整 */
    .page-btn {
        padding: 3px 6px;
        margin: 0 2px;
        font-size: 0.18rem;
    }
    
    /* 调整section1的margin */
    #section1 {
        margin-top: 0px;
    }
     /* 分页样式调整 */
    .pagesBox {
        padding: 10px 0;
    }
    
    .page-btn {
        padding: 5px 10px;
        margin: 0 3px;
        font-size: 14px;
    }
    
    .page-btn.active {
        background: #ce0a22;
        color: #fff;
    }
    
    .page-btn.disabled {
        color: #999;
        cursor: default;
    }
    .loginBox{ width:90px; height:32px;}
    
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 平板设备的中等尺寸调整 */
    .works-center ul {
        justify-content: flex-start;
        padding: 0 20px;
    }
    
    #works-center-chuxuan li, 
    #works-center-huojiang li {
        width: calc(33.33% - 20px);
    }
    
    #works-center-chuxuan.photography-mode li,
    #works-center-huojiang.photography-mode li {
        width: calc(25% - 20px);
    }
}