*{padding: 0;margin: 0;scroll-behavior: smooth}
a{text-decoration: auto}
a:hover{text-decoration: auto}
html,body{width: 100%;height: 100%;overflow: hidden}
body{align-items: center;overflow-y: scroll}
.scrollable-content {height: 100%;overflow-y: scroll;}
.color{background-color: rgb(249,106,36);}
.title{color:#fff;font-size:16px;font-weight: bold;display: flex;flex-direction: row;height:55px;width:100%;padding-bottom: 5px;z-index: 9999;}
.border-bottom{border-bottom: 2px solid #009688;color:#009688;}
.head-title{background-color: #063745;position: sticky;top: 0}
.head-font{color:black;font-weight: 1000;}
.top{position: fixed;top:48%;right:2%;display: flex;flex-direction: column;background-color: #fff;height:180px;width:80px;border-radius: 10px;z-index: 9999;}
.arrow {font-size: 28px;}
.carouselStop{display: flex;width:5%;align-items: center;justify-content: center;cursor: pointer;}
.free-button-area{display: flex;width:20%;align-items: center;justify-content: flex-end;cursor: pointer;}
.free-button{padding:4px 7px;height:70%;border:1px solid #fff;color:#fff;display:flex;border-radius: 15px;justify-content: center;align-items: center;}
.full-img{height:100%;width:100px;}
.flex{display: flex}
.flex.v{flex-direction: column}
.body-page{width: 756px;flex-direction: row;display: flex;overflow: visible}
.body-page .left{flex: 1;display: flex;flex-direction: column;margin-right: 15px;overflow: hidden}
.body-page .right{position: sticky;top: 0; display: flex;flex-direction: column;min-width: 280px;}
.tab-panel{display: flex;flex-direction: row;align-items: center;margin-bottom: 5px}
.tab-panel .tab{color: #333;border-bottom: 2px solid transparent;padding-bottom: 5px;}
.tab-panel .tab.active{color:#f03333;border-bottom: 2px solid #f03333}
.tab-panel .tab.left{color:#f03333;border-left: 2px solid #f03333;padding-left: 5px}
.tab-space{margin-bottom: 30px;}
.tab-space-s{margin-bottom: 15px;}
.article-list-area{display: flex;flex-direction: row;flex-wrap: wrap;}
.article-list-area.ver{flex-direction: column}
.article-list-area .article-item{transition: all .2s ease-in 0s;width: 230px;min-height: 200px;display: flex;flex-direction: column;position: relative;box-shadow: 0 1px 0 1px #f0f0f0;font-size: 12px;border-radius: 5px;overflow: hidden;margin: 5px;text-decoration: auto;color: #333}
.article-list-area .article-item:hover{box-shadow: 0 2px 10px 3px rgba(222,222,222,0.8);transform: translateY(-3px);border: none;}
.article-list-area .article-small-cate{background: #333;color: #fff;border-radius: 4px;padding: 3px;position: absolute;top: 8px;left: 10px;z-index: 2;cursor: pointer;}
.article-list-area .article-small-cate:hover{background: #f03333;color: #fff;}
.article-list-area .article-preview{background: #93a8ae7f;color: #fff;font-weight: bold;font-size: 18px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.article-list-area .article-preview img{width: 100%;height: 100%}
.article-list-area .article-title{padding: 15px;cursor: pointer;}
.article-list-area .article-item .article-small-line{padding: 0 15px 15px 15px;overflow: hidden;color: rgba(38,38,38,0.6);display: flex;flex-direction: row}
.bottom-banner{width:100%;padding: 25px 0;color: rgba(255, 255, 255, .7);background: #2d3236;text-align: center}

.article-list-area .article-item.hor{flex-direction: row;min-height: auto;height: auto;min-width: auto;width: auto;flex:initial}
.article-list-area .article-item.hor .article-preview{width: 72px;height: auto}
.article-list-area .article-item.hor .article-title{padding: 5px 15px}
.article-list-area .article-item.hor .article-title:hover{color: #f03333}
.article-list-area .article-item.hor .article-small-line{padding: 15px 15px 5px 15px;}
.article-list-area .icon-view{vertical-align: middle}
.article-list-area .icon-view svg{fill: #aaa;width: 20px;height: 16px}

.page-jump-area{display: flex;flex-direction: row;justify-content: center;padding: 15px 0;}
.page-jump-area a{border: 1px solid #eee;padding: 5px 10px;color: #777;}
.page-jump-area a+a{margin-left: 5px}
.fixed-right-panel{min-width: 240px;position: fixed;top: 92px;left: 50%;margin-left: 396px;}
.nav-tab-panel{background: #eee;color: #333;padding: 5px;display: flex;flex-direction: row;align-items: center;border-radius: 5px;}
.nav-tab-panel .tab{cursor: pointer}
.nav-tab-panel .tab:hover{color: #93a8ae;text-decoration: underline}
.nav-tab-panel .split:after{content:'/';color: #ddd;padding: 0 5px;}
.auto{flex: 1}
.detail-title{padding: 15px 0}
.small-title-info{color: #aaa;display: flex;flex-direction: row;padding-top: 10px}
.small-title-info .item{}
.small-title-info .split:after{content:'•';padding: 0 10px;}

.pre-block-info{text-indent: 0;padding: 10px 21px;background-color: #f5f5f5;border-left: 4px solid #ccc;color: #555;font-size: 1em;margin: 0.8em 0;border-radius: 5px}
.article-container .title-line{border-bottom: 1px solid #ddd;padding-bottom: 10px;}

.article-bottom .pre-next-list{padding: 10px 0;display: flex;flex-direction: row;justify-content: center}
.article-bottom .pre-next-list .item{cursor: pointer; display: flex;flex-direction: column;background: #93a8ae7f;color: #fff;border-radius: 5px;flex: 1;margin: 0;padding: 10px;}
.article-bottom .pre-next-list .item:hover{background: #93a8ae9f}
.article-bottom .pre-next-list .item.empty{background: #fff;cursor: default}
.article-bottom .pre-next-list .item.empty:hover{background: #fff}
.article-bottom .pre-next-list .item .small-line{display: flex;flex-direction: row;}
.article-bottom .pre-next-list .item .small-line .time{display: flex;flex-direction: row;flex: 1;justify-content: flex-end}
.article-bottom .pre-next-list .space{margin: 0 15px;}
.sub-area{padding: 15px 0}
.attention{border: 1px solid #ddd;border-radius: 5px;padding: 10px;margin: 10px 0;}
.dir-area{padding: 15px 0}
.article-dir-info{padding-bottom: 10px;list-style: none}
section{scroll-margin-top:62px;font-size: 28px}
.ads-image-area{display: flex;flex-direction: column;align-items: center;padding: 10px 0;}
.ads-image-area img{width: 100%;border-radius: 5px;overflow: hidden}
.ads-image-area .small-label{color: #333;padding: 10px 0;}

.unit-card{position: fixed;z-index: 1;top: calc(50% - 140px);left: 0;background: #ecf0f7; overflow: hidden;height: auto;width: 136px;text-align: center;display: flex;flex-direction: column;padding-top: 20px}
.unit-card h4,.unit-card h3{margin: 5px 0;}
.unit-card .extra-a{background: #93a8ae;color: #fff;display: flex;flex-direction: column;}
.unit-card .close-btn{background: #ecf0f7;color: #aaa;position: fixed;top: calc(50% + 140px);left: 88px; border-radius: 5px;padding: 5px 10px;cursor: pointer}
.unit-card .close-btn:hover{background: #ecf0f7;color: #777;}
.unit-card .get-unit-btn{border-radius: 5px;display: flex;flex-direction: row;align-items: center;justify-content: center;background: #93a8ae;margin: 10px 20px;padding: 5px 0;color: #fff;font-weight: bold;cursor: pointer}
.unit-card .get-unit-btn:hover{background: #93a8ae5f}
.unit-card .info-a{border: 1px solid #1b6d85;margin: 5px 10px;color: #f03333;border-radius: 5px}

.unit-dialog-shade{position: absolute;z-index: 5;background: #0000004f;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;display: flex;align-items: center;justify-content: center}
.unit-dialog{width: 420px;height: 520px;background: #eee;border-radius: 5px;overflow: hidden;display: flex;flex-direction: column;position: relative}
.unit-dialog .title{background: #fff;padding: 10px 20px;color: #333;display: block;z-index: 1}
.unit-dialog .select-line{padding: 10px 0 0 20px;}
.unit-dialog .select-line select,.unit-dialog .select-line input{border: 1px solid #aaa;padding: 10px;font-size: 14px;width: 256px;color: #555}
.unit-dialog .title small{font-size: 12px;color: #f03333;}
.unit-dialog .submit-line{display: flex;flex-direction: row;justify-content: center;align-items: center}
.unit-dialog .submit-line .btn{background: #f03333;color: #fff;border-radius: 5px;padding: 10px 0;margin-top: 20px;width: 280px}
.unit-dialog .close-icon{fill: #aaa;width: 36px;border-radius: 5px;position: absolute;right: 0;top: 10px;height: 36px;z-index: 10;padding: 5px;cursor: pointer}
.unit-dialog .close-icon:hover{background: #eee;}

.ad-item{margin: 10px 0;display: flex;flex-direction: column;align-items: center;}
.ad-item .ad-btn-line{display: flex;justify-content: space-evenly;width: 80%;padding: 15px;}
.ad-item video,.ad-item img{width: 100%;height: auto}
.ad-item .ad-btn{background: #93a8ae;color: #fff;border-radius: 5px;cursor: pointer;padding: 10px 20px;}
.ad-item .ad-btn:hover{background: #93a8aeaf}
.ad-item small{color: #aaa;padding-top: 10px}
.ads-area{width: 100%;background: #93a8ae;color: #fff;font-weight: bold;font-size: 24px;text-align: center;padding: 36px 0;border-radius: 5px;display: block;cursor: pointer}
.ads-area:hover{color: #fff;background: #93a8aeaf;}
.ad-item .image{display: flex;flex-direction: column;align-items: center}