/* html settings */
* {
    /* Positioning */
    position: relative;
    margin: 0;
    /* Typography */
    white-space: nowrap;
    /* Visual */
    border: none; 
    box-sizing: border-box;
    padding: 0;
}
*:focus {
    outline: none;
}
html { 
    /* Box-model */
    width: 100%; 
    height: 100%; 
    /* Typography */
    font-size: 62.5%; 
}
body {
    /* Box-model */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    /* Typography */
    font:normal 100% Microsoft YaHei,sans-serif;
}


/* default font style */
.text-T1 {
    font-size: 2rem;
    line-height: 3rem;
}
.text-T2 {
    font-size: 1.8rem;
    line-height: 2.8rem;
}
.text-T3 {
    font-size: 1.6rem;
    line-height: 2.4rem;
}
.text-T4 {
    font-size: 1.4rem;
    line-height: 2.2rem;
}
.text-T5 {
    font-size: 1.2rem;
    line-height: 1.8rem;
}


/* general button style */
button { 
    /* Box-model */ 
    display: flex; 
    flex-direction: row;
    justify-content: center; 
    align-items: center; 
    /* Visual */ 
    border: 0.1rem solid #dadde6; 
    border-radius: 0.4rem; 
    background-color: #fff; 
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.6rem; 
    padding-right: 1.6rem; 
    gap: 0.8rem;
    /* Misc */ 
    cursor:pointer; 
}
button:disabled { cursor: auto; }
button img { 
    width: 1.4rem;
    height: 1.4rem;
}
button label { cursor: pointer; }
/* default button (grey) */
.btn-default {
    color: #424555;
    border-color: #dadde6;
    background-color: #fff;
}
.btn-default:hover {
    color: #4e86f2;
    border-color: #a7c3f9;
}
.btn-default:active {
    color: #4e86f2;
    border-color: #4e86f2;
}
.btn-default:disabled {
    color: #c4c8d0;
    border-color: #dadde6;
}
/* delete button (red) */
.btn-delete {
    color: #424555;
    border-color: #dadde6;
    background-color: #fff;
}
.btn-delete:hover {
    color: #f94e44;
    border-color: #fca7a2;
}
.btn-delete:active {
    color: #f94e44;
    border-color: #f94e44;
}
.btn-delete:disabled {
    color: #c4c8d0;
    border-color: #dadde6;
}
/* submit button (blue) */
.btn-submit {
    color: #fff;
    border: none;
    background-color: #4e86f2;
}
.btn-submit:hover { background-color: #83aaf6; }
.btn-submit:active { background-color: #4679da; }
.btn-submit:disabled { background-color: #cadafb; }
/* agree button (green) */
.btn-active {
    color: #67c23a;
    border-color: #b3e19d;
    background-color: #fff;
}
.btn-active:hover {
    color: #67c23a;
    border-color: #67c23a;
}
.btn-active:active {
    color: #529b2e;
    border-color: #529b2e;
}
.btn-active:disabled { 
    color: #d1edc4; 
    border-color: #b3e19d;
}
/* reject button (orange) */
.btn-reject {
    color: #f79c15;
    border-color: #fbce8a;
    background-color: #fff;
}
.btn-reject:hover {
    color: #f79c15;
    border-color: #f79c15;
}
.btn-reject:active {
    color: #c67d11;
    border-color: #c67d11;
}
.btn-reject:disabled {
    color: #fde1b8;
    border-color: #fbce8a;
}


/* general input style */
input, 
select {
    /* Typography */
    color: #424555;
    /* Visual */ 
    border: 0.1rem solid #dadde6;
    border-radius: 0.4rem;
    background-color: #fff;
    padding: 1.2rem;
}
input:hover,
select:hover {
    border: 0.1rem solid #596fda; 
}
input:disabled,
select:disabled {
    background-color: #f5f5fa;
    border: 0.1rem solid #e2e4ee;
}
input::placeholder { color: #a2aab5; }

/*  body 
 *    title
 *    content
 *    footer
 *    mask
 */
/*  title
 *    navbar
 *      navbar-titlebox
 *        <img>
 *        <label class="text-T1">
 *      navbar-navlist <nav>
 *        navbar-navlist-navbox <a>
 *          <label class="text-T3">
 *          navbar-navlist-navbox-underline
 *      navbar-statebox
 *        <label>
 *        <button class="btn-default">
 */
 .title {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */ 
    border-bottom: 0.1rem solid #c9ccd6;
    background-color: #fff; 
}
 .navbar {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
    /* Visual */ 
    gap: 2.4rem;
}
.navbar-titlebox {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* Visual */ 
    gap: 1.2rem;
}
.navbar-titlebox img {
    width: 3.6rem;
    height: 3.6rem;
}
.navbar-titlebox label {
    font-weight: bold;
    color: #202328;
}
.navbar-navlist {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.navbar-navlist-navbox-select, 
.navbar-navlist-navbox-unselect {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center; 
    /* Visual */ 
    background-color: #fff;
    /* Misc */ 
    text-decoration: none;
}
.navbar-navlist-navbox-select:hover, 
.navbar-navlist-navbox-unselect:hover {
    background-color: #edf3fe; 
}
.navbar-navlist-navbox-select   label, 
.navbar-navlist-navbox-unselect label {
    /* Visual */ 
    padding-top: 1.6rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    padding-bottom: 1.4rem; 
    /* Misc */ 
    cursor: pointer;
}
.navbar-navlist-navbox-select   { color: #4e86f2; }
.navbar-navlist-navbox-unselect { color: #666d7e; }
.navbar-navlist-navbox-underline {
    /* Positioning */
    position: absolute;
    bottom: 0;
    /* Box-model */ 
    width: 3.2rem;
    height: 0;
    /* Visual */ 
    border-bottom: 0.3rem solid #4e86f2;
}
.navbar-statebox {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    /* Visual */ 
    gap: 0.8rem;
    color: #424555;
}
.navbar-statebox label { color: #424555; }


/*  footer 
 *    footnote
 *      <img>
 *      <small>
 *        <a>
 */
.footer {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */ 
    background-color: #f7f7fb;
}
.footnote {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-top: 1.2rem;
    padding-bottom: 2.4rem;
    gap: 0.8rem;
}
.footnote img {
    width: 2.4rem;
    height: 2.4rem;
}
.footnote small, 
.footnote small a {
    color: #666d7e;
}
.footnote small a:hover {
    color: #4e86f2;
}
.footnote small a:active {
    color: #4679da;
}


/*  mask 
 *  
 */
.mask {
    /* Box-model */ 
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* Visual */
    background-color: rgb(0,0,0,0.5); 
    /* Misc */
    z-index: 9998;
}
.verify-window {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Visual */
    background-color: #fff;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    padding-left: 2rem;
    padding-right: 2rem;
    gap: 1.2rem;
}
.verify-window-title {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%; 
}
.verify-window-title label { color: #202328; }
.verify-window-title a {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* Visual */
    gap: 0.8rem;
    /* Misc */
    text-decoration: none;
}
.verify-window-title a img {
    width: 2.4rem;
    height: 2.4rem; 
}
.verify-window-title a label { 
    color: #4e86f2; 
    cursor: pointer;
}
.verify-window-image {
    /* Box-model */ 
    width: 76rem;
    height: 42rem;
    border-radius: 0.2rem;
}
.verify-window-piece {
    /* Box-model */
    position: absolute;
    left: 0;
    top: 16.8rem;
    width: 8.4rem;
    height: 8.4rem;
    /* Misc */
    z-index: 9999;
}
.verify-window-slider-bar {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 76rem;
    height: 5.6rem;
    /* Visual */
    background-color: #f0f1f5;
}
.verify-window-slider-bar label {
    /* Box-model */ 
    width: 100%;
    /* Typography */
    color: #a2aab5;
    text-align: center;
}
.verify-window-slider {
    /* Box-model */ 
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* Box-model */ 
    width: 8.4rem;
    height: 5.6rem;
    /* Visual */
    background-color: #4e86f2;
}
.verify-window-slider img {
    width: 3.2rem;
    height: 3.2rem;
}
.verify-window-slider-background {
    /* Box-model */ 
    position: absolute;
    top: 0;
    left: 0;
    height: 5.6rem;
    width: 0;
    /* Box-model */ 
    background-color: #edf3fe;
}
.verify-window-slider.fail { background-color: #f79c15; }
.verify-window-slider.pass { background-color: #67c23a; }
.verify-window-slider.error { background-color: #f94e44; }
.verify-window-slider-bar label.fail { color: #c67d11; }
.verify-window-slider-bar label.pass { color: #529b2e; }
.verify-window-slider-bar label.error { color: #f94e44; }
.verify-window-slider-background.fail { background-color: #fef5e7; }
.verify-window-slider-background.pass { background-color: #f0f9eb; }
.verify-window-slider-background.error { background-color: #fdcac7; }


/*  content
 *    page-login
 *    page-index
 *    page-select_license
 *    page-create_license
 *    page-guide
 *    page-attach_us
 *    page-admin
 *    page-user_manage
 *    page-license_manage
 *    page-view_user
 *    page-error
 */
.content {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    /* Visual */ 
    background-color: #fff; 
} 


/*  page-login
 *    loginbox
 *    carouselbox
*/
.page-login {
    /* Box-model */   
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 136rem; 
    /* Visual */
    padding-top: 8rem;
    gap: 4rem
}


/*  loginbox
 *    loginbox-titlebox
 *    loginbox-idbox
 *    loginbox-formbox
 *    loginbox-btnsubmit (btn-submit)
 */
.loginbox {
    /* Box-model */   
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 40rem;
    /* Visual */
    gap: 4rem;
}
.loginbox-btnsubmit {
    /* Box-model */ 
    width: 100%; 
    padding-top: 1.2rem; 
    padding-bottom: 1.2rem;
    padding-left: 1.6rem; 
    padding-right: 1.6rem;
}

/*  loginbox-titlebox
 *    loginbox-titlebox-btnbox
 *      loginbox-titlebox-btnbox-btn-select (text-T2)
 *      loginbox-titlebox-btnbox-btn-unselect (text-T4)
 *      loginbox-titlebox-btnbox-seperator
 *    infobox
 */
 .loginbox-titlebox {
    /* Box-model */   
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.loginbox-titlebox-btnbox {
    /* Box-model */   
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.loginbox-titlebox-btnbox-btn-select, 
.loginbox-titlebox-btnbox-btn-unselect {
    /* Visual */
    padding: 0;
    border: none;
}
.loginbox-titlebox-btnbox-btn-select   { color: #202328; }
.loginbox-titlebox-btnbox-btn-unselect { color: #666d7e; }
.loginbox-titlebox-btnbox-btn-unselect:hover { color: #4e86f2; }
.loginbox-titlebox-btnbox-seperator {
    /* Box-model */   
    width: 0.1rem;
    height: 1.8rem;
    /* Visual */
    background: #c9ccd6;
}
.loginbox-titlebox-btnbox-title { color: #202328; }
.loginbox-titlebox-btnbox-label { color: #666d7e; }

/*  infobox
 *    <img>
 *    infobox-common (text-T4)
 *    infobox-error (text-T4)
 */
.infobox-common, 
.infobox-warn, 
.infobox-error {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /* Visual */
    border-radius: 0.4rem;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    padding-left: 2rem;
    gap: 0.8rem;
    /* Misc */
    white-space: pre-wrap;
}
.infobox-common img, 
.infobox-warn img, 
.infobox-error  img {
    width: 2rem;
    height: 2rem; 
}
.infobox-common label,
.infobox-warn label,
.infobox-error  label { font: PingFang SC; }
.infobox-common {
    /* Typography */
    color: #4e86f2;
    /* Visual */
    border: 0.1rem solid #cadafb;
    background-color: #edf3fe;   
}
.infobox-warn {
    /* Typography */
    color: #f79c15;
    /* Visual */
    border: 0.1rem solid #fde1b8;
    background-color: #fef5e7;   
}
.infobox-error {
    /* Typography */
    color: #f94e44;
    /* Visual */
    border: 0.1rem solid #fdcac7;
    background-color: #feedec;   
}


 /*  loginbox-idbox 
 *     <label> (text-T3)
 *     loginbox-idbox-inputbox (text-T3)
 *       <input> 
 *       <button class="btn-default">
 */
.loginbox-idbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 0.8rem;
}
.loginbox-idbox label {
    /* Typography */
    color: #424555;
    /* Box-model */ 
    width: 100%;
}

.loginbox-idbox-inputbox {
    /* Box-model */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1.2rem;
}
.loginbox-idbox-inputbox input { flex-grow: 1; }
.loginbox-idbox-inputbox button {
    /* Visual */
    padding-top: 1.2rem; 
    padding-bottom: 1.2rem;
    padding-left: 1.6rem; 
    padding-right: 1.6rem;
}


/*  loginbox-formbox
 *    loginbox-formbox-line
 *      label
 *      input
 *      button
 */
.loginbox-formbox {
    /* Box-model */   
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.loginbox-formbox-line {
    /* Box-model */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 0.8rem;
}
.loginbox-formbox-line label { 
    width: 6.4rem;
    min-width: 6.4rem;
    color: #424555; 
}
.loginbox-formbox-line input { 
    width: 0; 
    flex-grow: 1; 
}
.loginbox-formbox-line button {
    /* Visual */
    padding-top: 1.2rem; 
    padding-bottom: 1.2rem;
    padding-left: 1.6rem; 
    padding-right: 1.6rem;
}

/*  carouselbox
 *    carouselbox-contentbox
 *      carouselbox-img
 *      carouselbox-left
 *      carouselbox-right
 *        <img>
 *      <label class="text-T3">
 *    carouselbox-selectorbox
 *      <span> 
 */
.carouselbox {
    /* Box-model */   
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 92rem;
    /* Visual */
    gap: 2.4rem;
}
.carouselbox-contentbox {
    /* Box-model */   
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 60rem; 
    /* Visual */
    border: 0.1rem solid #dadde6;
    box-shadow: 0rem 0.4rem 1.6rem 0rem rgba(0,0,0,.1);
}
.carouselbox-imgbox {
    /* Box-model */   
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem; 
}
.carouselbox-img { 
    /* Box-model */   
    width: 100%; 
    height: 51.5rem;  
    /* Misc */
    cursor: pointer;	
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.carouselbox-left,  
.carouselbox-right {
    /* Positioning */
    position: absolute;    
    top: 0;
    bottom: 0;
    margin: auto;
    /* Box-model */   
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.2rem;
    height: 4.2rem;
    /* Visual */
    border-radius: 50%;
    background-color: #4e86f2;
    /* Misc */
    opacity: 0.5;
    cursor: pointer;
}
.carouselbox-left:hover,  
.carouselbox-right:hover {
    background-color: #4e86f2;
    opacity: 1;
}
.carouselbox-left:active,  
.carouselbox-right:active {
    background-color: #4679da;
    opacity: 1;
}
.carouselbox-left img {
    /* Box-model */  
    width: 2.4rem;
    height: 2.4rem;
    /* Misc */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}  
.carouselbox-right img {
    /* Box-model */  
    width: 2.4rem;
    height: 2.4rem;
    /* Misc */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.carouselbox-left { left:1.6rem; }
.carouselbox-right { right:1.6rem; }
.carouselbox-contentbox-intro {
    /* Box-model */  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 6.8rem;
    /* Typography */
    text-align: left;
    color: #fff;
    /* Visual */
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background-color: #375eaa;
    /* Misc */
    white-space: pre-wrap;
}

.carouselbox-selectorbox {
    /* Box-model */  
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* Visual */
    gap: 1.2rem; 
}
.carouselbox-selectorbox span {
    /* Box-model */  
    width: 3.6rem;
    height: 0.6rem;
    background-color: #CADAFB;
    /* Misc */
    cursor: pointer;
}
.carouselbox-selectorbox span:hover { background-color: #4e86f2; }
.carouselbox-selectorbox span.hover { background-color: #4e86f2; }


/*  page-index
 *    infobox
 *    blockbox (user_info)
 *    listbox (license_infolist)
 */
.page-index {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
    /* Visual */
    padding-top: 2rem;
}


/*  common-titlebox
 *    <label class="test-T2"> 
 *    common-titlebox-btnbox
 *      common-btnbox (test-T4) 
 */
.common-titlebox {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.common-titlebox-title { color: #202328; }
.common-btnbox {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* Visual */
    gap: 1.2rem;
}


/*  licensestatebox-underreview
 *  licensestatebox-active
 *  licensestatebox-warn
 *  licensestatebox-disabled
 *    <img> 
 *    <label class="text-T4">
 */
.licensestatebox-underreview, 
.licensestatebox-active, 
.licensestatebox-warn, 
.licensestatebox-disabled {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* Visual */
    gap: 0.8rem;
}
.licensestatebox-underreview img, 
.licensestatebox-active img, 
.licensestatebox-warn img, 
.licensestatebox-disabled img {
    width: 1.4rem;
    height: 1.4rem;
}
.licensestatebox-underreview label, 
.licensestatebox-active label, 
.licensestatebox-warn label, 
.licensestatebox-disabled label {
    font: PingFang SC;
}
.licensestatebox-underreview label{ color: #666d7e; }
.licensestatebox-active label{ color: #67c23a; }
.licensestatebox-warn label{ color: #f79c15; }
.licensestatebox-disabled label{ color: #f94e44; }


/*  blockbox
 *    common-titlebox
 *    blockbox-contentbox
 *      blockbox-paragraph
 *        blockbox-line
 *          blockbox-item (text-T4)
 *            blockbox-item-label
 *            blockbox-item-value
 *            common-btnbox (text-T4)
 */
.blockbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    gap: 2.4rem;
}
.blockbox-contentbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-height: 44rem;
    /* Visual */
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    gap: 1.6rem; 
    /* Misc */
    overflow: auto;
}
.blockbox-paragraph-static, 
.blockbox-paragraph-edit {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 0.8rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
.blockbox-paragraph-static { background-color: #fbfbfd; }
.blockbox-line {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /* Visual */
    gap: 2rem;
}
.blockbox-item, 
.blockbox-item-fix13 {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    /* Visual */
    gap: 0.4rem;
}
.blockbox-item {
    flex-grow: 1;
    flex-basis: 0%; 
}
.blockbox-item-fix13 {
    width: 13.3rem;
}
.blockbox-item-label {
    /* Box-model */ 
    width: 7rem;
    min-width: 7rem;
    /* Typography */
    font: PingFang SC;
    text-align: right;
    color: #666d7e;
    /* Visual */
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem;
}
.blockbox-item-value {
    /* Box-model */ 
    width: 100%;
    /* Typography */
    font: PingFang SC;
    color: #424555;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.2rem;
    /* Misc */
    white-space: initial;
}
.blockbox-item button,
.blockbox-item input {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /* Typography */
    font: PingFang SC;
    color: #424555;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.2rem;
    /* Misc */
    white-space: initial;
}
.blockbox-divide {
    width: 100%;
    height: 0; 
    background-color: #fff;
    border-top: 0.1rem solid #d0d3de;
}

/*  listbox
 *    common-titlebox
 *    listbox-contentbox
 *      listbox-labelbox
 *        listbox-labelitem-fix (text-T4)
 *      listbox-valuebox
 *        listbox-valueline1
 *        listbox-valueline2
 *          listbox-valueitem-fix (text-T4)
 *            licensestatebox
 *            common-btnbox (text-T4)
 */
.listbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    gap: 1.6rem;
}
.listbox-contentbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-height: 48rem;
    /* Misc */
    overflow: auto;
}
.listbox-labelbox {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    /* Visual */
    background-color: #f7f7fb;
    border-bottom: 0.1rem solid #d0d3de;
}
.listbox-labelitem-fix8, 
.listbox-labelitem-fix9, 
.listbox-labelitem-fix10, 
.listbox-labelitem-fix13, 
.listbox-labelitem-fix18, 
.listbox-labelitem-fix23, 
.listbox-labelitem-fix28 {
    /* Visual */
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
.listbox-labelitem-fix8 { width: 8rem; }
.listbox-labelitem-fix9 { width: 9rem; }
.listbox-labelitem-fix10 { width: 10rem; }
.listbox-labelitem-fix13 { width: 13rem; }
.listbox-labelitem-fix18 { width: 18rem; }
.listbox-labelitem-fix23 { width: 23rem; }
.listbox-labelitem-fix28 { width: 28rem; }
.listbox-valuebox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.listbox-valueline1,
.listbox-valueline2 {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    border-bottom: 0.1rem solid #e2e4ee;
}
.listbox-valueline1 { background-color: #fff; }
.listbox-valueline2 { background-color: #fdfdfe; }
.listbox-valueitem-fix8, 
.listbox-valueitem-fix9, 
.listbox-valueitem-fix10, 
.listbox-valueitem-fix13, 
.listbox-valueitem-fix18, 
.listbox-valueitem-fix23,
.listbox-valueitem-fix28 {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* Visual */
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    white-space: initial;
}
.listbox-valueitem-fix8 { width: 8rem; }
.listbox-valueitem-fix9 { width: 9rem; }
.listbox-valueitem-fix10 { width: 10rem; }
.listbox-valueitem-fix13 { width: 13rem; }
.listbox-valueitem-fix18 { width: 18rem; }
.listbox-valueitem-fix23 { width: 23rem; }
.listbox-valueitem-fix28 { width: 28rem; }
.listbox-valueitem-fix8 label, 
.listbox-valueitem-fix9 label, 
.listbox-valueitem-fix10 label, 
.listbox-valueitem-fix13 label, 
.listbox-valueitem-fix18 label, 
.listbox-valueitem-fix23 label,
.listbox-valueitem-fix28 label {
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
}
.listbox-valueitem-fix8 .common-btnbox button label, 
.listbox-valueitem-fix9 .common-btnbox button label, 
.listbox-valueitem-fix10 .common-btnbox button label, 
.listbox-valueitem-fix13 .common-btnbox button label, 
.listbox-valueitem-fix18 .common-btnbox button label, 
.listbox-valueitem-fix23 .common-btnbox button label,
.listbox-valueitem-fix28 .common-btnbox button label {
    margin: 0;
}
.system-label, 
.admin-label, 
.user-label {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 1.5rem;
}
.system-label {
    background-color: #4e86f2;
    border: 0.1rem solid #4e86f2;
    color: #fff;
}
.admin-label {
    background-color: #edf3fe;
    border: 0.1rem solid #a7c3f9;
    color: #4e86f2;
}
.user-label {
    background-color: #f7f7fb;
    border: 0.1rem solid #dadde6;
    color: #424555;
}


/*  pagination
 *  
 */
.pagination {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-left: 2rem;
    padding-right: 2rem;
    gap: 1.6rem;
}
.pagination-summary {
    /* Typography */
    font: PingFang SC;
    color: #424555; 
} 
.pagination select {
    /* Typography */
    font: PingFang SC;
    color: #424555; 
    /* Visual */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
} 
/*  page-select_license
 *    selectlicensebox
 *      selectlicense-titlebox
 *        <img>
 *        <label>
 *        common-underline
 *      licenseintrobox
 *    lincenseintrolist
 */ 
.page-select_license {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 136rem; 
}
.selectlicensebox {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%; 
    /* Visual */
    padding-top: 4rem;
}
.selectlicense-titlebox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 24rem;
    /* Visual */
    gap: 2.4rem;
}
.selectlicense-titlebox img {
    width: 11.3rem;
    height: 11.9rem;
}
.selectlicense-titlebox label {
    /* Box-model */ 
    width: 100%;
    height: 3.6rem;
    /* Typography */
    font-size: 3.6rem;
    line-height: 3.6rem;
    color: #202328;
}
.common-underline56 {
    /* Box-model */ 
    width: 5.6rem;
    height: 0;
    /* Visual */
    border-bottom: 0.4rem solid #4e86f2;
}


/*  licenseintrobox
 *    licenseintrobox-titlebox
 *      licenseintrobox-topdiv
 *      licenseintrobox-title (text-T1)
 *    licenseintrobox-content (text-T3)
 *    button (text-T4)
 */
.licenseintrobox {
    /* Positioning */
    margin-left: 2rem;
    margin-right: 2rem;
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    flex-basis: 0%;
    height: 34.2rem;
    /* Visual */
    border: 0.1rem solid #CADAFB;
    padding-bottom: 3.6rem;
    gap:3.2rem; 
}
.licenseintrobox-titlebox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 11.4rem;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.licenseintrobox-topdiv {
    /* Box-model */ 
    width: 100%;
    height: 6.8rem;
    /* Visual */
    padding-left: 2.4rem;
    padding-top: 0.4rem;
    background-color: #DCE7FC;
}
.licenseintrobox-topdiv img {
    width: 6.4rem;
    height: 6.4rem;
}
.licenseintrobox-title {
    /* Box-model */ 
    width: 100%;
    /* Typography */
    font-weight: 700;
    color: #202328;
    text-align: center;
}

.licenseintrobox-content {
    /* Box-model */ 
    width: 100%;
    /* Typography */
    color: #424555;
    text-align: center;
}
.licenseintrobox:hover { box-shadow: 0rem 0.4rem 1.6rem 0rem rgba(0,0,0,.1); }
.licenseintrobox:hover .licenseintrobox-topdiv { background-color: #4e86f2; }
.licenseintrobox:hover .licenseintrobox-title { color: #4e86f2; }


/*  lincenseintrolist
 *    lincenseintrolist-title (text-T3)
 *    lincenseintrolist-line
 *      lincenseintrolist-module (text-T4)
 *      lincenseintrolist-imgbox
 */
.lincenseintrolist {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-top: 4rem;
    padding-bottom: 8rem;
}
.lincenseintrolist-title {
    /* Box-model */ 
    width: 100%;
    /* Typography */
    color: #424555;
    /* Visual */
    border-bottom: 0.2rem solid #4e86f2;
    background-color: #EDF3FE;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.2rem;
}
.lincenseintrolist-line {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Visual */
    border-bottom: 0.1rem solid #dadde6;
}
.lincenseintrolist-module {
    /* Box-model */ 
    width: 24rem;
    /* Typography */
    color:#666d7e;
    /* Visual */
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.2rem;
    /* Misc */
    white-space: pre-wrap;
}
.lincenseintrolist-imgbox {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;    
    flex-grow: 1;
    flex-basis: 0%;
}
.lincenseintrolist-imgbox img {
    width: 2.3rem;
    height: 2.2rem;
}


/*  page-create_license
 *    createlicense-back
 *      <button>
 *    createlicense-titlebox
 *      createlicense-titlebox-line
 *      common-underline
 *    createlicense-contentbox
 *      createlicense-inputarea
 *        createlicense-inputarea-line (text-T4)
 *          <label> <input> <button>
 */
.page-create_license {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
}
.createlicense-back {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
}
.createlicense-titlebox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.createlicense-titlebox-line {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.createlicense-titlebox-title1, 
.createlicense-titlebox-title2 {
    font-size: 2.4rem;
    line-height: 3.6rem;
}
.createlicense-titlebox-title1{ color: #4e86f2; }
.createlicense-titlebox-title2{ color: #202328; }
.createlicense-contentbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 60rem;
    /* Visual */
    padding-top: 4rem;
    padding-bottom: 4rem;
    gap: 4rem;
}
.createlicense-inputarea {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.createlicense-inputarea-line {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 1.2rem; 
}
.createlicense-inputarea-line label {
    /* Box-model */ 
    width: 8.4rem;
    /* Typography */
    color: #424555; 
    text-align: right;
    /* Visual */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.createlicense-inputarea-line input {
    height: 3.2rem;
    flex-grow: 1;
}
.createlicense-inputarea-line button {
    /* Box-model */ 
    height: 3.2rem;
    /* Visual */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}


/* page-guide
 *   guidebox
 *     guidebox-item1 (text-T3)
 *     guidebox-item2 (text-T4)
 *       <label> <img>
 */
.guidebox {
    /* Positioning */
    position: fixed;
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 18rem;
    /* Visual */
    border-right: 0.1rem solid #e2e4ee;
}
.guidebox-item1, 
.guidebox-item2 {
    width: 100%;
    text-decoration:none;
    display: flex;
    align-items: center;
}
.guidebox-item1 img, 
.guidebox-item2 img {
    width: 1.386rem;
    height: 1.2rem;
    margin-left: auto;
}
.guidebox-item1 {
    color: #424555;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    padding-left: 1rem;
}
.guidebox-item1:hover { color: #4e86f2; }
.guidebox-item1.select {
    color: #4e86f2; 
    background-color: #EDF3FE;
}
.guidebox-item2 {
    color: #666d7e;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 3rem;
}
.guidebox-item2:hover { color: #4e86f2; }
.guidebox-item2.select { color: #4e86f2; }
.guidebox-item2 img {display: none;}
.guidebox-item2.select img { display: flex; }


/* page-guide
 *   guidebox
 *   guide-contentbox
 *     guidebox-contentbox-title
 *       <label> (text-T1)
 *       <img>
 *     guide-paragraph
 *       guide-paragraph-textbox
 *         guide-paragraph-title
 *         guide-paragraph-content
 *       guide-paragraph-imgbox
 */
.page-guide {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 136rem;
    /* Visual */
    padding-top: 2.4rem;
    padding-bottom: 4rem;
    gap: 4rem; 
}
.guide-contentbox {
    /* Position */
    margin-left: 22rem;
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 3.2rem;
}
.guide-contentbox-title {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    background-color: #EDF3FE;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}
.guide-contentbox-title label {
    color: #4e86f2;
    font-weight: 700;
}
.guide-contentbox-title img {
    width: 7.6rem; 
    height: 6.4rem;   
    margin-left: auto;
}
.guide-paragraph {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    border-bottom: 0.1rem solid #dadde6;
    padding-bottom: 2.4rem;
    gap: 2.4rem;
}
.guide-paragraph-textbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    gap: 1rem;
}
.guide-paragraph-title {
    width: 100%;
    color: #4e86f2;
}
.guide-paragraph-content {
    width: 100%;
    color: #424555; 
    white-space: initial;
}
.guide-paragraph-imgbox {
    /* Box-model */ 
    display: flex; 
    flex-direction: row;
    justify-content: center; 
    align-items: center;
    /* Visual */
    gap: 6rem; 
}
.guide-paragraph-imgbox img { height: 40rem; }


/*  page-attach_us
 *    attachus-img
 *    attachus-contentbox
 *      attachus-titlebox
 *        <img> <label> underline
 *    attachus-footbox
 *      attachus-footbox-line
 *        attachus-footbox-img
 *        attachus-footbox-text
 *        attachus-footbox-qrcodebox
 *          <img> <label>
 */   
.page-attach_us {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
    gap: 8rem; 
    padding-top: 6rem;
}
.attachus-img{
    width: 54rem;
    height: 36rem;
}
.attachus-contentbox{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4rem;
}
.attachus-titlebox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    /* Visual */
    gap: 3.2rem;
}
.attachus-titlebox img {
    width: 11.9rem;
    height: 12rem;
}
.attachus-titlebox label {
    /* Box-model */ 
    width: 100%;
    height: 3.6rem;
    /* Typography */
    font-size: 3.6rem;
    line-height: 3.6rem;
    color: #202328;
}
.attachus-textbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /* Visual */
    gap: 1.6rem;
}
.attachus-textbox label {
    /* Box-model */ 
    width: 100%;
    /* Typography */
    color: #424555;
    text-align: justify;
    /* Misc */
    white-space: initial;
}
.attachus-footbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /* Visual */
    gap: 2.4rem;
}
.attachus-footbox-line {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    /* Visual */
    gap: 0.8rem;
}
.attachus-footbox-img {
    width: 2.4rem;
    height: 2.4rem;
}
.attachus-footbox-text { color: #666d7e; }
.attachus-footbox-qrcodebox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Visual */
    gap: 0.8rem;
}
.attachus-footbox-qrcodebox img {
    width: 10.752rem;
    height: 10.752rem;
    padding: 0.624rem;
}
.attachus-footbox-qrcodebox label { 
    color: #424555; 
    text-align: center;
}


/*  page-admin
 *    infobox-common
 *    blockbox (license_review_infolist)
 *      blockbox-staticbox
 *    listbox (admin_infolist)
 */
 .page-admin {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
    /* Visual */
    padding-top: 2rem;
    padding-bottom: 4rem;
}


/*  page-user_manage
 *    infobox-common
 *    listbox (user_infolist)
 *    blockbox (create_user)
 *      blockbox-editbox
 */
 .page-user_manage {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
    /* Visual */
    padding-top: 2rem;
    padding-bottom: 4rem;
}


/*  page-license_manage
 *    infobox-common
 *    listbox (license_infolist)
 *    blockbox (create_license)
 *      blockbox-editbox
 */
 .page-license_manage {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
    /* Visual */
    padding-top: 2rem;
    padding-bottom: 4rem;
}


/*  page-view_user
 *    infobox-common
 *    listbox (license_infolist)
 *    blockbox (create_license)
 *      blockbox-editbox
 */
 .page-view_user {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 136rem;
    /* Visual */
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.viewuser-back {
    /* Box-model */ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* Visual */
    padding-top: 2.4rem;
}

/* page-error
 *   error-backgroundimg
 *   error-contentbox
 *     error-textbox
 *       error-title
 *       error-paragraph
 *   btn-submit
 */
.page-error {
    /* Positioning */
    margin-top: 10rem;
    margin-bottom: 10rem;
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 56rem;
    height: 56rem;
}
.error-backgroundimg {
    /* Positioning */
    position: absolute;
    /* Box-model */ 
    width: 100%;
    height: 100%;
}
.error-contentbox {
    /* Positioning */
    margin-top: auto;
    margin-bottom: 1rem;
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Visual */
    gap: 4rem; 
}
.error-textbox {
    /* Box-model */ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Visual */
    gap: 1.6rem;
}
.error-title {
    color: #202328;
    text-align: center;
}
.error-paragraph { 
    color: #666d7e;
    text-align: center;
    white-space: initial;
}