:root{
    --bg-color: #141213;
    /*--bg-sub-color: red;*/
    --bg-sub-color: #191919;

    --main-color: #eee;
    /*--sub-color: #fff;*/
    --sub-color: #aaa;
}
html, body{
    padding: 0; margin: 0; background: var(--bg-color); color: var(--sub-color); font-size: 12px;
}
.page{
    min-width: 345px;
}
.text-red{
    color: red;
}
.text-green{
    color: green;
}
.text-blue{
    color: #4766E5;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}

.list-row{
    display: flex; justify-content: space-around;border-bottom: 1px #443f4c solid;
}
.list-col{
    flex: 1;
}
/* List Start */
.list-title{
    align-items: flex-end; border-bottom: 1px #443f4c solid; padding: 1.5rem 0.2rem 0.5rem 0.2rem;
}
.title-col{
    text-align: center; position: relative;
}
.title-col .choice{
    position: absolute; bottom: 25%; left: 50%; margin-left: 3rem; white-space: nowrap;
}
.list-title .logo-text{
    font-size: 1.1rem;
}
.list-title .title{
    font-size: 1.3rem; color: var(--main-color);
}
.list-title .sub-title{
    font-size: 0.7rem; color: var(--main-color);
}
.search-col{
    text-align: right; align-self: center; padding-right: 0.5rem; position: relative;
}
.search-col input{
    border: 1px solid var(--sub-color); background-color: var(--bg-color); width: 60%; border-radius: 50rem; outline: none; font-size: 0.7rem; padding: 3px;
}
.search-col button{
    color: var(--main-color); background-color: var(--bg-color); border: none; font-size: 1rem; position: absolute; right: 0.6rem; top: 0.1rem; border-radius: 50rem;
}

.list-tab{
    text-align: center; font-size: 1.1rem; color: var(--sub-color); align-items: center; border-bottom: 2px solid var(--sub-color);
}
.list-tab .list-col{
    padding: 0.5rem 0;
}
.list-tab .list-col.active{
    color: var(--main-color);
}

.list-content{
    /*padding: 0 1rem;*/
    margin: 0.5rem 0;
}
.list-content .title{
    font-size: 1.1rem;
}
.list-content .title span{
    display: inline-block; margin-left: 0.5rem; font-size: 1.3rem;
}
.list-content .sub-title{
    color: var(--main-color); margin: 0.5rem 0;
}
.sub-content{
    padding: 0 1rem; margin: 0.5rem 0; line-height: 2rem;
}
/* List End */

/* Detail Start */
.detail-title{
    align-items: flex-end; border-bottom: 2px solid var(--sub-color); padding: 1.5rem 0.2rem 0.5rem 0.2rem;
}
.title-col{
    text-align: center; position: relative;
}
.title-col .choice{
    position: absolute; bottom: 25%; left: 50%; margin-left: 3rem; white-space: nowrap;
}
.detail-title .logo-text{
    font-size: 0.7rem;
}
.detail-title .title{
    font-size: 1.3rem; color: var(--main-color);
}
.detail-title .sub-title{
    font-size: 0.7rem; color: var(--main-color);
}
.detail-tab{
    padding: 0.5rem;
}
.detail-tab div{
    display: inline-block;
}
.detail-tab .title{
    color: var(--main-color); font-size: 1.1rem; margin-right: 1.5rem;
}
.detail-tab .date div{
    margin: 0 0.3rem;
}
.detail-tab .date .symbol{
    color: var(--main-color);
}
.detail-tab .tab{
    display: inline-block; padding: 0.5rem 1.8rem; border-bottom: 1px solid var(--sub-color); margin: 0;
}
.detail-tab .tab.active{
    color: var(--main-color); border-color: var(--main-color);
}
.lines-bottom{
    border-bottom: 2px solid var(--sub-color);
}
.detail-table{
    margin: 0.5rem 0; padding-bottom: 2rem;
}
.detail-table .detail-row{
    display: flex; flex-wrap: wrap; margin: 0.5rem 0; align-items: center; white-space: nowrap; padding-right: 2%;
}
.detail-table .detail-row .detail-col{
    flex-basis: 12.5%; text-align: center; position: relative;
}
.detail-table .detail-row .detail-col:last-child{
    text-align: right;
}
.detail-table .detail-row .detail-col .code{
    font-size: 0.8rem;
}
.detail-table .extend-row{
    font-size: 0.8rem; background-color: var(--bg-sub-color); padding: 0.25rem 2%; text-align: right; margin-top: 0.2rem;
}
.detail-table .extend-row span{
    margin: 0 0.5rem;
}
.detail-table .extend-row span:last-child{
    margin-right: 0;
}

.detail-table .title{
    font-size: 1.1rem;
}
.detail-table .title .detail-col .iconfont{
    font-size: 1rem; margin-left: 0.1rem; position: absolute; left: 50%; top: 50%; margin: -0.5rem 0 0 1.7rem;
}
/* Detail End */

/* Advance Search Start */
.advance-search-wrap{
    padding: 1rem;
}
.advance-search-wrap .row{
    width: 100%; display: flex; align-items: flex-start; padding: 0.2rem 0;
}
.advance-search-wrap .row label{
    display: flex; margin-right: 0.5rem;
}
.advance-search-wrap .row input[type=text]{
    color: var(--sub-color); background-color: var(--bg-sub-color); max-width: 6rem; text-align: center; border: none; outline: none;
}
.advance-search-wrap .row input[type=text].input-min{
    max-width: 1rem;
}
.advance-search-wrap .row .operate{
    width: 100%; text-align: center;
}
.advance-search-wrap .row .operate input[type=button]{
    color: var(--main-color); background-color: var(--bg-sub-color); border: 1px solid var(--sub-color);
}
.detail-table .detail-row.search-row .detail-col{
    flex-basis: 10%; font-size: 0.7rem;
}
.detail-table .detail-row.search-row .detail-col .code{
    font-size: 0.7rem;
}
/* Advance Search End */