body{ padding: 0;}
/* --------------top-------------- */
.top{ width: 100%; height: .84rem; text-align: center; line-height: .84rem; font-size: .28rem; color: #020202; position: relative;}
.top .back{ background: url(../images/back_03.png) center center no-repeat; background-size:.17rem auto; position: absolute; left: 0; top: 0; width: .84rem; height: .84rem;}
.indexContainer{ width: 100%; padding: 0 .2rem; box-sizing: border-box; height: calc(100vh - .84rem);}
.indexContainer .serach{ width: 100%; height: .56rem; background: #; border-radius:.28rem; padding-left: .55rem; box-sizing: border-box; background: url(../images/serach.png) .2rem center no-repeat #f7f8fa; background-size:.25rem auto; overflow: hidden;}
.indexContainer .serach input{ width: 100%; height: 100%; background: none; outline: none; font-size: .22rem; display: block; border: none; box-sizing: border-box;}
.indexContainer .Main{ height: calc(100% - .56rem);}
.indexContainer .Main .tit{ height: .68rem; overflow: visible; width: 100%; position: relative; }
.indexContainer .Main .tit .num{ float: left; height: .68rem; line-height: .68rem; font-size: .2rem;}
.indexContainer .Main .tit .num span{ font-size: .2rem; color: #000;}
.indexContainer .Main .tit ul{ float: right; overflow: hidden;}
.indexContainer .Main .tit ul li.dropBtn{ line-height: .68rem; font-size: .22rem; color: #040406; float: left; margin-left: .6rem; padding-right: .3rem; position: relative;}
.indexContainer .Main .tit ul li.dropBtn .arrow{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: .14rem; height: .14rem; background: url(../images/index_03.png) center no-repeat; background-size: contain;}
.indexContainer .Main .tit ul li.dropBtn.active .arrow{ transform: translateY(-50%) rotate(180deg);}
.overlay{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 99; opacity: 0; transition: opacity 0.3s ease; visibility: hidden;}
.overlay.show{ opacity: 1; visibility: visible;}
.dropDown{ position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: .2rem .2rem 0 0; box-shadow: 0 -.05rem .15rem rgba(0,0,0,0.15); z-index: 100; transform: translateY(100%); transition: all 0.5s ease; padding: .3rem .2rem; opacity: 0; visibility: hidden;}
.dropDown.show{ transform: translateY(0); opacity: 1; visibility: visible;}
.dropDown .dropItem{ padding: .2rem .3rem; font-size: .22rem; color: #333; text-align: center; margin-bottom: .1rem; border-radius: .1rem; transition: background-color 0.2s ease;}
.dropDown .dropItem:hover{ background-color: #f5f5f5;}
.dropDown .dropItem.active{ color: #007bff; background-color: #e3f2fd;}
.indexContainer .Main .MainBox{ width: 100%; height: calc(100% - .68rem); overflow-y: scroll;}
.indexContainer .Main .MainBox ul{ width: 100%; column-count: 2; column-gap: .2rem;}
.indexContainer .Main .MainBox ul li{ width: 100%; border-radius:.1rem; overflow: hidden; box-shadow: 0 0 .1rem  rgba(0,0,0,0.1); margin-bottom: .2rem; break-inside: avoid;}
.indexContainer .Main .MainBox ul li img{ display: block; width: 100%; height: auto;}

.serachBox{ width: 100%; padding: 0 .15rem; box-sizing: border-box;} 
.serachBox .bt{ width: 100%; height: 1.3rem; line-height: 1.3rem; font-size: .26rem; color: #000;}
.serachBox .bt a{ display: block; float: right; font-size: .26rem; color: #000; line-height: 1.3rem;}
.serachBox ul{ overflow: hidden;}
.serachBox ul li{ float: left; margin: 0 .2rem .25rem 0;}
.serachBox ul li a{ padding: 0 .3rem; height: .52rem; line-height: .52rem; font-size: .26rem; color: #000; border: .02rem solid #d3d3d3; border-radius:.26rem; display: block;}

.Details{  padding-top: .2rem;width: 100%;}
.Details ul{ width: 100%;}
.Details ul li{ margin-bottom: .2rem; overflow: hidden; width: 100%;}
.Details ul li img{ display: block; width: 100%; height: auto;}

/* 搜索页样式 */
.indexContainer .serach{ position: relative; padding-left: 0; background: none; display: flex; align-items: center;}
.indexContainer .serach input{ flex: 1; height: 100%; background: #f7f8fa; border-radius: .28rem; padding: 0 .55rem 0 .55rem; background-image: url(../images/serach.png); background-position: .2rem center; background-repeat: no-repeat; background-size: .25rem auto;}
.indexContainer .serach button{ margin-left: .1rem; padding: 0 .2rem; height: .56rem; background: #007bff; color: #fff; border: none; border-radius: .28rem; font-size: .22rem; cursor: pointer;}
.indexContainer .serach .search-link{ flex: 1; height: 100%; background: #f7f8fa; border-radius: .28rem; padding: 0 .55rem; background-image: url(../images/serach.png); background-position: .2rem center; background-repeat: no-repeat; background-size: .25rem auto; line-height: .56rem; font-size: .22rem; color: #999; text-decoration: none; display: block; box-sizing: border-box;}
.indexContainer .Main .MainBox ul li .info{ padding: .1rem;}
.indexContainer .Main .MainBox ul li .info .title{ font-size: .22rem; color: #333; margin-bottom: .05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.indexContainer .Main .MainBox ul li .info .tags{ font-size: .18rem; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.loading-tip, .empty-tip{ line-height: 2; font-size: .26rem; color: #999;}