.full-width{width: 100%;}
/* columns-division */
.col-1{width: calc(100% - 2rem);}
.col-2{width: calc(50% - 2rem);}
.col-3{width: calc(100% / 3 - 2rem);}
.col-4{width: calc(25% - 2rem);}
.col-5{width: calc(20% - 2rem);}
.col-6{width: calc(100% / 6 - 2rem);}
.col-7{width: calc(100% / 7 - 2rem);}
.col-8{width: calc(12.5% - 2rem);}
.col-9{width: calc(100% / 9 - 2rem);}
.col-10{width: calc(10% - 2rem);}
.col-11{width: calc(100% / 11 - 2rem);}
.col-12{width: calc(100% / 12 - 2rem);}
.col-5-3{width: calc(60% - 2rem);}
.col-2-long{width: 100%;}
.col-2-short{width: 30%;}
@media(max-width: 2000px){
    .col-xxl-1{width: calc(100% - 2rem);}
    .col-xxl-2{width: calc(50% - 2rem);}
    .col-xxl-3{width: calc(100% / 3 - 2rem);}
    .col-xxl-4{width: calc(25% - 2rem);}
    .col-xxl-5{width: calc(20% - 2rem);}
    .col-xxl-6{width: calc(100% / 6 - 2rem);}
    .col-xxl-7{width: calc(100% / 7 - 2rem);}
    .col-xxl-8{width: calc(12.5% - 2rem);}
    .col-xxl-9{width: calc(100% / 9 - 2rem);}
    .col-xxl-10{width: calc(10% - 2rem);}
    .col-xxl-11{width: calc(100% / 11 - 2rem);}
    .col-xxl-12{width: calc(100% / 12 - 2rem);}}
@media(max-width: 1600px){
    .col-xl-1{width: calc(100% - 2rem);}
    .col-xl-2{width: calc(50% - 2rem);}
    .col-xl-3{width: calc(100% / 3 - 2rem);}
    .col-xl-4{width: calc(25% - 2rem);}
    .col-xl-5{width: calc(20% - 2rem);}
    .col-xl-6{width: calc(100% / 6 - 2rem);}
    .col-xl-7{width: calc(100% / 7 - 2rem);}
    .col-xl-8{width: calc(12.5% - 2rem);}
    .col-xl-9{width: calc(100% / 9 - 2rem);}
    .col-xl-10{width: calc(10% - 2rem);}
    .col-xl-11{width: calc(100% / 11 - 2rem);}
    .col-xl-12{width: calc(100% / 12 - 2rem);}}
@media(max-width: 1200px){
    .col-lg-1{width: calc(100% - 2rem);}
    .col-lg-2{width: calc(50% - 2rem);}
    .col-lg-3{width: calc(100% / 3 - 2rem);}
    .col-lg-4{width: calc(25% - 2rem);}
    .col-lg-5{width: calc(20% - 2rem);}
    .col-lg-6{width: calc(100% / 6 - 2rem);}
    .col-lg-7{width: calc(100% / 7 - 2rem);}
    .col-lg-8{width: calc(12.5% - 2rem);}
    .col-lg-9{width: calc(100% / 9 - 2rem);}
    .col-lg-10{width: calc(10% - 2rem);}
    .col-lg-11{width: calc(100% / 11 - 2rem);}
    /* .col-lg-12{width: calc(100% / 12 - 2rem);} */
    .col-lg-12{width: calc(100% / 12);}}
@media(max-width: 850px){
    .col-md-0{width: 0;}
    .col-md-1{width: calc(100% - 2rem);}
    .col-md-2{width: calc(50% - 2rem);}
    .col-md-3{width: calc(100% / 3 - 2rem);}
    .col-md-4{width: calc(25% - 2rem);}
    .col-md-5{width: calc(20% - 2rem);}
    .col-md-6{width: calc(100% / 6 - 2rem);}
    .col-md-7{width: calc(100% / 7 - 2rem);}
    /* .col-md-8{width: calc(12.5% - 2rem);} */
    .col-md-8{width: calc(100% / 8);}
    .col-md-9{width: calc(100% / 9 - 2rem);}
    .col-md-10{width: calc(10% - 2rem);}
    .col-md-11{width: calc(100% / 11 - 2rem);}
    .col-md-12{width: calc(100% / 12 - 2rem);}}
@media(max-width: 500px){
    .col-sm-1{width: 100%;}
    .col-sm-2{width: 50%;}
    .col-sm-3{width: calc(100% / 3);}
    .col-sm-4{width: 25%;}
    .col-sm-5{width: 20%;}
    .col-sm-6{width: calc(100% / 6);}
    .col-sm-7{width: calc(100% / 7);}
    .col-sm-8{width: 12.5%;}
    .col-sm-9{width: calc(100% / 9);}
    .col-sm-10{width: 10%;}
    .col-sm-11{width: calc(100% / 11);}
    .col-sm-12{width: calc(100% / 12);}
}
.content-side{width: 0;}
.content-body{width: calc(100% - 2rem);}
@media(min-width: 1000px){
    .content-side{width: calc(50% - 500px - 1rem);}
    .content-body{width: 960px;}
}
@media(min-width: 1920px){
    .content-side{width: 25%;}
    .content-body{width: 50%;}
}
/* selection */
::selection{background-color: #D9F6FF;}
/* html,body,page */
html,body{height: 100%;}
body{text-align: center;overflow-x: hidden;background-color: #FFFFFF;}
.page{height: 100%;}
/* background-color */
.bg-warning{background-color: red;}
.bg-attention{background-color: #FFF6BB;}
.bg-fresh{background-color: #DBFFBB;}
.bg-light{background-color: white;}
.bg-dark{background-color: black;}
.bg-lively{background-color: #EFFFCE;}
/* nav-group */
.nav-occupy{height: 70px;}
.nav-bar{position: fixed;z-index: 999;top: 0;left: 0;height: 50px;width: calc(100% - 20px);background-color: white;padding: 10px;box-shadow: 0 0.125rem 0.625rem -0.1875rem rgb(0 0 0 / 10%);display: flex;flex-direction: row;}
.nav-brand{width: max-content;}
.nav-ul{display: inline-block;}
/* float-tool-group */
.float-tool{position: fixed;bottom: 1.5rem;right: 2rem;width: fit-content;height: fit-content;}
/* optional-display */
@media(max-width: 1000px){.hide-1k{display: none;}}
@media(max-width: 900px){.hide-sm{display: none;}.nav-bar{justify-content: center;}}
@media(min-width: 900.00001px){.show-sm{display: none;}}
.occupy{height: 1px;}
.flex-grow-1{flex-basis: 0px;flex-grow: 1;}
.flex-grow-3{flex-basis: 0px;flex-grow: 3;}
/* font */
a{text-decoration: none;color: #0871f5;}
a:hover{color: #51A9FF;}
p{color: #333333;font-weight: normal;text-align: justify;text-indent: 2em;margin: 0;line-height: 2em;}
.hline-2{line-height: 2em;}
.text-indent-2{text-indent: 2em;}
.code,.inline-code{background-color: #F4F1ED;padding: 1rem;border-radius: 0.3rem;text-align: left;font-family: 'Courier New', Courier, monospace;font-size: small;font-weight: 1000;color: #636363;}
.inline-code{padding: 0.3rem;border-radius: 0.3rem;}
.font-normal{font-weight: normal;}
.font-warning,.pointer{color: #EF4069;}
.font-hv-warning:hover{color: #EF4069;}
.font-warm{color: #EF8F18;}
.font-hv-warm:hover{color: #EF8F18;}
.font-emphasize{color: #FFE600;}
.font-hv-emphasize:hover{color: #FFE600;}
.font-sky,.data{color: #51A9FF;}
.font-hv-sky:hover{color: #51A9FF;}
.font-darksky,.ctrl{color: #002EE2;}
.font-hv-darksky:hover{color: #002EE2;}
.font-water,.func{color: #00BABD;}
.font-hv-water{color: #00BABD;}
.font-forest,.text{color: #67B73E;}
.font-hv-forest:hover{color: #67B73E;}
.font-vigorous{color: #9CE52D;}
.font-hv-vigorous:hover{color: #9CE52D;}
.font-special,.hfile{color: #C6359A;}
.font-hv-special:hover{color: #C6359A;}
.font-chocolate{color: #640B0B;}
.font-hv-chocolate:hover{color: #640B0B;}
.font-wine{color: #A11616;}
.font-hv-wine:hover{color: #A11616;}
.font-light{color: #ffffff;}
.font-hv-light:hover{color: #ffffff;}
.font-dark{color: #000000;}
.font-hv-dark:hover{color: #000000;}
.font-grey{color: #939393;}
.font-lgr{font-size: larger;}
.font-xxlg{font-size: xx-large;}
.line-thr{text-decoration: line-through;}
.annotation{color: #C9C9C9;}
.annotation:hover{color: #C9C9C9;}
.pub{color: #636363;text-align: center;margin-bottom: 1rem;}
.font-black-100{color: #000000;}
.font-black-80{color: #333333;}
.font-black-60{color: #505050;}
.font-black-40{color: #8B8B8B;}
.font-black-20{color: #C5C5C5;}
.font-black-0{color: #E2E2E2;}
/* position */
.row{display: flex;flex-wrap: wrap;flex-shrink: 1;width: 100%;max-width: 100%;}
.column{display: flex;flex-direction: column;}
.fixed{position: fixed;}
.center{text-align: center;}
.middle{vertical-align: middle;}
.left{text-align: left;}
.right{text-align: right;}
.v-bottom{vertical-align: bottom;}
.x-10{margin-left: 10px;}
.x-2r{margin-left: 2rem;}
.y-15{margin-top: 15px;}
.pd-5{padding: 5px;}
.pd-10{padding: 10px;}
.pd-1r{padding: 1rem;}
.pd-5r{padding: 5rem;}
.rd-1r{border-radius: 1rem;}
.content{width: calc(50% - 2rem);margin-left: 25%;padding: 1rem;}
@media(max-width:1200px){.content{width: calc(100% - 2rem);padding: 1rem;margin-left: 0;}}
/* card */
.card-block{position: relative;display: flex;flex-direction: column;}
.card-read p{color: #000000;text-align: left;}
.noindent{text-indent: 0;}
/* cover */
@media(max-width:3000px){#cover{width: 330px;}.right-min-lg{text-align: right;}.left-min-lg{text-align: left;}}
@media(max-width:850px){#cover{width: calc(80% - 2rem);}.right-min-lg{text-align: center;}.left-min-lg{text-align: center;}}
/* align */
.flex-row{display: flex; flex-direction: row;}
/* size */
.h-12{height: 12px;}
.h-20{height: 20px;}
.h-28{height: 28px;}
.w-50{width: 50px;}
.w-100{width: 100px;}
/* input */
input{
    height: 20px;
    padding: 20px;
    border-color: #51A9FF;
    border-width: 3px;
    border-radius: 40px;
    font-size: 20px;
    text-align: center;
}
/* submit */
.submit{
    background-color: #D4E9FF;
    margin: 10px;
    border-width: 0px;
    border-radius: 20px;
    padding: 10px;
    font-size: 15px;
}
.submit:hover{
    margin-top: 12px;
    padding: 8px;
    border-width: 2px;
    border-color: #000000;
}