.page{background: url('../img/bg.png') top center no-repeat #026ED2; background-size: 100% auto;}
.nav-bar{ display: grid; grid-template-columns: 60px 1fr 60px; height: 60px;}
.nav-bar a.goback{ display: flex; justify-content: center; align-items: center;}
.nav-bar a.goback i{ font-size: 2rem; font-weight: bold; color: white;}
.nav-bar h1{ display: flex; justify-content: center; align-items: center; font-size: 1.8rem; color: white}
.container{ width: 100vw; min-height: calc(100vh - 60px); padding: 5vw; background: white;}

.index-box{ width: 100vw; height: 100vh; overflow: hidden;}
.index-box .user-info{ display: flex; justify-content: center; align-items: center; width: 100%; height: 30vh;}
.index-box .user-info .cover{ width: 24vw; height: 24vw; margin-right: 6vw; border-radius: 12vw; background: url('../img/u_c.png') center center no-repeat; background-size: cover;}
.index-box .user-info .info{ display: grid; grid-gap: 2vw; width: 50vw;}
.index-box .user-info .info b{ font-size: 2rem; color: white;}
.index-box .user-info .info i{ justify-self: start; padding: 0 .5em; border-radius: 5px; background: #ffa008; font-size: 1.4rem; line-height: 2; font-style: normal; color: white;}
.index-box .user-oper{ display: grid; align-content: start; width: 100%; height: 70vh; padding: 5vw; border-radius: 5vw 5vw 0 0; background: white;}
.index-box .user-oper .itm{ position: relative; display: flex; align-items: center; border-bottom: 1px solid #eee; padding: .75em 0;}
.index-box .user-oper .itm:after{ content: '\e62d'; position: absolute; right: 0; font-family: neko; font-size: 2rem; color: #ccc;}
.index-box .user-oper .itm i{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 1.5rem; margin-right: 1rem; overflow: hidden;}
.index-box .user-oper .itm i img{ width: 100%; height: 100%;}
.index-box .user-oper .itm span{ font-size: 1.8rem; line-height: 2;}
.index-box .copyright{ position: absolute; bottom: 5vw; width: 100%; text-align: center; color: #666;}

.ml-form{ display: grid; grid-gap: 5vw;}
.ml-form label{ display: grid;}
.ml-form span{ font-size: 1.6rem; color: #999;}
.ml-form b{ justify-self: start; padding: 0 .75em; border-radius: 5px; background: #529ce0; font-size: 1.2rem; line-height: 2; color: white;}
.ml-form input{ padding: .5em 0; border: 0; border-bottom: 1px solid #ccc; font-size: 1.8rem; line-height: 1.5;}
.ml-form textarea{ padding: .5em 0; border: 0; border-bottom: 1px solid #ccc; font-size: 1.8rem; line-height: 1.5; overflow:visible;}
.ml-form .button{ margin-top: 10vw; display: flex; justify-content: space-between; align-items: center;}
.ml-form .button button{ width: 42.5vw; padding: .5em 0; border-radius: 5px; background: #eee; font-size: 1.6rem; line-height: 2; font-weight: bold; color: #666;}
.ml-form .button button.submit{ background: #0069ca; color: white;}

.list{ position: relative; height: calc(100vh - 60px - 10vw);}
.list .pagination{ position: absolute; bottom: 0; display: flex; justify-content: space-between; align-items: center; width: 100%;}
.list .pagination a{ width: 42.5vw; padding: .5em 0; border-radius: 5px; background: #eee; font-size: 1.6rem; line-height: 2; font-weight: bold; text-align: center; color: #666;}
.list .pagination a.prev{ background: #0069ca; color: white;}

.list-client{ display: grid; grid-gap: 5vw;}
.list-client .itm{ display: grid;}
.list-client .itm b{ justify-self: start; padding: 0 .75em; border-radius: 5px; background: #529ce0; font-size: 1.2rem; line-height: 2; color: white;}
.list-client .itm b.y{background: #e0c052;}
.list-client .itm span{ padding: .5em 0; border-bottom: 1px solid #ccc; font-size: 1.8rem; line-height: 1.5;}


.list-notice{ display: grid; grid-gap: 5vw;}
.list-notice .itm{ display: grid;}
.list-notice .itm i{ font-size: 1.6rem; font-style: normal; color: #999;}
.list-notice .itm span{ padding: .25em 0 .5em; border-bottom: 1px solid #ccc; font-size: 1.8rem; line-height: 1.5;}

.list-contract{ display: grid; grid-gap: 5vw;}
.list-contract .itm{ position: relative; display: flex; align-items: center; padding: 1em 0 1em 5em; background: url('../img/contract_l_bg.png') left center no-repeat #f0f7ff; background-size: auto 100%; font-size: 1.8rem;}
.list-contract .itm i{ position: absolute; right: 5vw; display: block; padding: .25em .5em; border-radius: 5px; font-size: 1.4rem; line-height: 1.25; font-style: normal; background: #0069ca; color: white;}
.list-contract .itm i.dis{ color: #666; background: white;}

.article{ display: grid; grid-gap: 5vw;}
.article .art-tit{ display: grid; grid-gap: 2vw; padding-bottom: 5vw; border-bottom: 1px solid #ccc; text-align: center;}
.article .art-tit h1{ font-size: 2.4rem;}
.article .art-tit h5{ font-size: 1.4rem;}
.article .art-con p{ font-size: 1.6rem; line-height: 1.75; text-align: justify;}
.article .art-con p:not(:last-child){ padding-bottom: 1.5em;}
.article .art-con img{ display: block; max-width: 100%;}

.verify{ display: grid; justify-items: center; width: 100%; height: calc(100vh - 60px - 10vw);}
.verify .face-box{ width: 50vw; height: 50vw; margin-top: 20vw; border-radius: 25vw; background: url('../img/face.png') center center no-repeat; background-size: cover;}
.verify .tips{ font-size: 1.8rem; font-weight: normal;}
.verify .tips i{ color: red; font-style: normal;}
.verify label{ align-self: end; display: flex; align-items: center; font-size: 1.4rem;}
.verify label input[type="checkbox"]{ box-sizing: border-box; border: 1px solid #ccc; width: 1.6rem; height: 1.6rem; margin: 0 .5em 0 0; border-radius: 2px; background: white;}
.verify label input[type="checkbox"]:checked{ position: relative; cursor: pointer; background-color: #0069ca; border-color: #0069ca;}
.verify label input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.verify label b{ color: #0069ca;}
.verify button{ align-self: end; width: 100%; padding: 1em .0; border-radius: 5px; background: #0069ca; font-size: 1.6rem; color: white;}

.login-box{ display: grid; justify-items: center; width: 100vw; height: 100vh; overflow: hidden;}
.login-box .logo{ align-items: center; display: flex; padding-top: 15vw; width: 30vw; height: auto;}
.login-box .logo img{ width: 30vw;}
.login-box .form{align-self: center; display: grid; grid-gap: 5vw; width: 100%; padding: 5vw;}
.login-box .form label{ display: flex; align-items: center; width: 100%; font-size: 1.6rem;}
.login-box .form label span{ display: flex; justify-content: center; align-items: center; border-radius: 5px 0 0 5px; font-size: 1.6rem; width: 3em; height: 3em; background: white;}
.login-box .form label span i{ font-size: 3rem; color: #d1d9f2;}
.login-box .form label input{ width: calc(100% - 3em); padding: .5em .5em .5em 0; border-radius: 0 5px 5px 0; background: white; font-size: 1.6rem; line-height: 2;}
.login-box .form label input[type=number]{ width: calc(100% - 10em); border-radius: 0;}
.login-box .form label img{ width: 7em; height: 3em; border-radius: 0 5px 5px 0;}
.login-box .form button{ border-radius: 5px; background: #034a8b; font-size: 2rem; line-height: 2.5; color: white;}

.login-box .copyright{ align-self: end; padding: 5vw 0 10vw; font-size: 1.2rem; color: white;}

.signature-box{ width: 100%; height: calc(100vh - 60px - 10vw);}
.signature-box .pad{ height: 75vh; border: 1px solid #eff3ff; border-radius: 10px 10px 0 0; background: url('../img/pad.png'); background-size: 100% auto;}
.signature-box .opr{ display: flex; justify-content: space-around; align-items: center; height: calc(100vh - 60px - 10vw - 75vh); background: #eff3ff;}
.signature-box .opr button{ padding: .25em 1em; border-radius: 5px; font-size: 1.6rem; color: white; background: #0069ca;}