.top_container{width: 100%;display: flex;justify-content: center;align-items: flex-end;margin: 50px 0;
    /*margin-top: 180px;*/
}
.top_container .top_title{width: 40%;font-family: '209';font-size: 5em;line-height: 0.7em;color: #EB3755;text-align: left}
.top_container .desc_text_m{display: none;}
.top_container .top_search{width: 60%;display: flex;justify-content: right;align-items: center;}
.top_search input{background: url("../img/icon_search.png") no-repeat 5px;padding-left: 30px;height:40px;background-size: 15px;font-size: 1.2em;border:2px solid #EB3755;border-radius: 5px;margin-right: 10px;}
.top_search input::placeholder{color: #C8C8C8;}
.top_search input::-webkit-input-placeholder{color: #C8C8C8;}
.top_search input::-moz-placeholder{color: #C8C8C8;}
.top_search input::-moz-placeholder{color: #C8C8C8;}
.top_search input::-ms-input-placeholder{color: #C8C8C8;}
.top_search .vintage{width: 30%;}
.top_search .keyword{width: 45%;}
.top_search .btn_search{background-color: #EB3755;color: #fff;font-size: 1.3em;height: 40px;border: 0; border-radius: 5px;padding-left: 15px;padding-right: 15px;}

.mid_container{display: flex;margin-bottom: 20px;justify-content: space-between;font-family: "735"; font-size: large;color: #3C3C3C;}

#content-main .winelist_content{margin-bottom: 60px;}
#content-main .winelist_content table{white-space: nowrap;}
table,table tr th, table tr td { border:1px solid #e7e7e7; word-break: break-all;}/*设置边框的*/
table {border-collapse: collapse; width:100%}
table thead{text-align: center;}
table thead th{background-color: #3c3c3c;color:#fff;text-align: center!important;}
tr{height:45px;}
tbody td{padding:3px 4px 3px 20px; font-size: 13px;text-align: center;}
thead th{font-size: 14px;}
table tbody  tr:nth-child(odd) {background-color:#fff;}
table tbody tr:nth-child(even) {background-color:#f0f0f0;}
table .paginate{display: none!important;}
.table-header{position: absolute;}

#content-main .skinBox_bd{display: flex;flex-direction: column;
    height: 90vh;}
/* 表格区域样式 */
.winelist_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.table-header {
    width: 100%;
    border-collapse: collapse;
    background: #2c3e50;
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-header th {
    padding: 18px 15px;
    text-align: left;
    font-weight: 600;
    /*border-bottom: 2px solid #3498db;*/
    position: relative;
}

.table-header th:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.table-body-container {
    flex: 1;
    overflow-y: auto;
    position: relative;
    overflow-x: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.table-body-container::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

.table-body {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: fixed;
}

.table-body tr {
    transition: background 0.2s ease;
}

.table-body tr:nth-child(even) {
    background: #f8f9fa;
}

.table-body tr:hover {
    background: #e3f2fd;
}

.table-body td {
    padding: 16px 15px;
    border-bottom: 1px solid #e0e0e0;
    /*color: #34495e;*/
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    text-wrap: auto;
    color: #3C3C3C;
}

.loading-indicator {
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
    font-size: 0.95rem;
    display: none;
}

.no-more-data {
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
    font-size: 0.95rem;
    display: none;
}

.scroll-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(52, 152, 219, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    animation: pulse 2s infinite;
    display: none;
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

.table-body-container::-webkit-scrollbar {
    width: 8px;
}

.table-body-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table-body-container::-webkit-scrollbar-thumb {
    background: #7e7e7e;
    border-radius: 10px;
}

.table-body-container::-webkit-scrollbar-thumb:hover {
    background: #2980b9;
}

.download{position: absolute;bottom: 60px;right: -30px;z-index: 99;cursor: pointer;}
.download img{width: 24px;}

@media (max-width:768px){
    #content-main{padding: 15px;}
    .top_container{flex-wrap: wrap;justify-content: center;margin: 30px 0;}
    .top_container .top_title{width: 100%;margin-top: 40px;font-size: 4em;}
    .top_container .desc_text_m{display: block;width: 100%; margin-top: 10px; margin-bottom: 40px;text-align: left;}
    .top_container .top_search{width: 100%;}
    .top_search input{margin-right: 5px;font-size: 1em;height: 35px;}
    .top_search .btn_search{font-size: 0.9em;height: 35px;padding-left: 10px;padding-right: 10px;}
    .mid_container{font-size: small;}
    .mid_container .desc_text{display: none;}
    #content-main .winelist_content table{white-space: unset;}
    /*table,table tr th, table tr td{padding: 2px 2px;}*/
    .table-header th{padding: unset;}
    tbody td{font-size: 9px;text-align: center;color: #000000;font-weight: bolder;}
    .table-header th{font-size: 10px;}
    .table-body td{padding: 2px 2px;}
    .download{right: 0;}
}
@media (max-width:380px){
    .top_search .btn_search{font-size: 0.9em;height: 35px;padding-left: 5px;padding-right: 5px;}
}