/* footer */
.footer {padding: 25px 0 20px; background-color: #7b7b7b; color: #fff; font-size: 16px; font-weight: 200;}
.footer ul {margin-left: -15px; margin-right: -15px;}
.footer li {position: relative; float: left; margin-top: 15px; margin-bottom: 15px; padding: 0 15px;}
.footer li::after {position: absolute; display: block; content: ''; width: 1px; right: 0; top: 48px; bottom: 0; background: #fff;}
.footer li:first-child {width: 37%;}
.footer li:first-child dd p:nth-child(1) a {margin-right: 17.5%;}
.footer li:first-child dd p:nth-child(2) span:first-child {margin-right: 8%;}
.footer li:nth-child(2) {width: 37%;}
.footer li:nth-child(2) a {margin-right: 30px;}
.footer li:nth-child(2) p {margin-top: 30px; font-size: 14px;}
.footer li:nth-child(3) {width: 26%;}
.footer a {color: #fff; opacity: 1; transition: opacity .3s;}
.footer .qrcode {margin-left: 48px;}
.footer .qrcode img {width: 102px; height: 102px;}
.footer .weui-cell__hd {width: 34px; margin-right: 23rem;}
.footer .iconbox {margin-top: 25px;}
.footer .icon1 {width: 95rem;}
.footer .icon2 {width: 62rem; margin-left: 8%; margin-right: 9%;}
.footer .icon3 {width: 172rem;}
.copyright {padding: 15px 0; background-color: #3d3d3d; color: #fff; font-size: 12px; font-weight: 200;}
.copyright span {padding: 0 6px;}
.copyright a {color: #fff;}
.copyright .hidden-lg p:nth-child(1) a {margin-right: 8%;}

.container {margin-left: auto; margin-right: auto; padding: 0; width: 90%; max-width: 1560px;}
.slogan .en {letter-spacing: 5px;}
.logo-wrap .slogan {margin-top: 20px; text-align-last: justify;}
.loginbg {top: 0; left: 0; width: 100vw; height: 100vh; background-position: center top; background-repeat: no-repeat;}
.login {margin-top: 7.5vw; margin-bottom: 21vw; background-color: #fff; border-radius: 40px; overflow: hidden;}
.login > .weui-cell__hd {width: 50%; padding: 30px; background-color: #27ac6e;}
.login > .weui-cell__hd .map {opacity: .1;}
.login > .weui-cell__bd {padding: 30px;}
.login .logo-wrap, .cardback .logo-wrap {top: 50%; left: 50%; width: 62.5%; max-width: 486px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.formbox-hd .slogan {letter-spacing: 5px;}
.formbox-hd .tit {font-weight: 600; line-height: 1.2; letter-spacing: 1px;}
.formbox-bd label.weui-cell {margin-top: 50px;}
.formbox-bd .weui-cell__hd {width: 40px; margin-right: 24rem;}
.formbox-bd .split {position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: #BDBDBD;}
.formbox-bd .split::before {position: absolute; display: block; content: ''; left: 0; top: 0; width: 0; height: 1px; background-color: #27ac6e; transition: width .5s cubic-bezier(0.075, 0.82, 0.165, 1);} 
.formbox-bd .weui-input {color: #666;}
.formbox-bd .weui-input:focus + .split::before {width: 100%;}
.formbox-bd .error {padding-left: 64px; margin-top: 10px; margin-bottom: 30rem; height: 60px;}
.formbox-bd .submit {display: block; width: 100%; height: 50px; background: rgba(39, 172, 110, 1); color: #fff; letter-spacing: 10px; cursor: pointer; border-radius: 25px; transition: background .3s;}

/* detail */
.bgpic1 {position: fixed; top: 0; right: 0; border-top: 540px solid #27ac6e; border-left: 420px solid transparent;}
.bgpic2 {position: fixed; top: 30%; left: -12%; width: 420px; height: 540px; border-radius: 40px; background: #27ac6e; transform: rotate(45deg);}
.detail-hd {padding-left: 40rem; padding-right: 40rem;}
.detail-hd .avatar {margin-right: 18rem; width: 64rem; height: 64rem; border-radius: 50%; overflow: hidden;}
.detail-hd .avatar img {display: block; width: 100%; height: 100%; object-fit: cover;}
.detail-hd .exit {font-size: 24rem; color: #27ac6e; vertical-align: middle;}
.detail-hd .exit img {position: relative; top: 2rem; margin-left: 15rem; height: 22rem;}
.detail-bd {padding-left: 40rem; padding-right: 40rem;}
.detail-bd .box1 .info {color: #969696;}
.detail-bd .box1 .btn {display: block; width: 106rem; height: 46rem; line-height: 46rem; text-align: center; color: #fff; background-color: rgba(28, 169, 102, 1); border-radius: 23rem;}
.detail-bd .box2 .img1 {max-width: 158rem; margin-top: 25rem;}
.detail-bd .box2 .img2 {max-width: 143rem; margin-top: 25rem; margin-left: 54rem;}

.layout-wrap {display: none; position: fixed; z-index: 10; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .5);}
.layout {position: absolute; top: 50%; left: 50%; width: 1200px; max-height: 88vh; font-size: 16px; color: #4e4e4e; background: #f5f6fa; border-radius: 10px; transform: translate(-50%, -50%); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.layout-hd {padding: 0 20px 0 30px; height: 80px; font-size: 38px; background: #fff; border-bottom: 4px solid #E9E9E9;}
.layout-hd .close {position: relative; width: 40px; height: 40px;}
.layout-hd .close::before, .layout-hd .close::after {position: absolute; display: block; content: ''; top: 50%; left: 50%; width: 30px; height: 2px; margin-top: -1px; margin-left: -15px; background: #1ca966; }
.layout-hd .close::before {transform: rotate(45deg);}
.layout-hd .close::after {transform: rotate(-45deg);}
.layout-bd {padding: 60rem 20px 46rem;}
.layout-ft a {margin: 0 auto 38rem; width: 106px; height: 46px; font-size: 20px; line-height: 46px; text-align: center; border-radius: 23px; color: #fff; background: rgba(28, 169, 102, 1);}
.card {margin: 0 auto; width: 545px; height: 346px; border-radius: 28px; overflow: hidden;}
.card-hd {height: 50px; background: #1ca966;}
.card-hd img {display: block; height: 32px; margin: 9px auto;}
.card-bd {height: 276px;}
.card-bd > .weui-cell__hd {padding: 0 30px 0 20px;}
.card-bd > .weui-cell__bd {padding-right: 20px;}
.card-bd .row {margin-bottom: 10px;}
.card-bd .row .weui-cell {margin-bottom: 6px; padding-top: 0; padding-bottom: 0;}
.card-bd .label {margin-right: 5px; width: 56px; font-size: 14px; color: #666; text-align-last: justify;} 
.card-bd .val {padding: 0 2px; border-bottom: 1px solid #E3E3E3;}
.card-ft {height: 20px; background: #1ca966;}
.card-ft .slogan {font-size: 12px; line-height: 20px; letter-spacing: 10px; text-align-last: center;}
.cardback {margin: 0 auto; width: 545px; height: 346px; background: #1ca966; border-radius: 28px; overflow: hidden;}
.cardback .map {position: absolute; top: 50%; left: 50%; width: 96%; opacity: .2; transform: translate(-50%, -50%);}
.cardback .logo-wrap {width: 48%;}
@media (min-width: 769px) {
  .login > .weui-cell__bd {padding: 100px 60px;}
}
@media (min-width: 1200px) {
  .footer a:hover {opacity: .75;}
  .footer dt {margin-bottom: 20px; font-size: 20px;}
  .formbox-bd .submit:hover {background: rgba(39, 172, 110, .75);}
  .login::before {position: absolute; display: block; content: ''; left: 0; top: 0; bottom: 0; width: 50%; background: #27ac6e;}
  .login > .weui-cell__bd {padding: 100px 90px;}
  .detail {width: 94%; max-width: 1786px; background-color: #f5f6fa; border-radius: 10px 10px 0 0;}
  .detail-hd {border-bottom: 4px solid #E9E9E9;}
  .detail-bd .box {margin-bottom: 40rem; padding: 45rem 55rem; background-color: #fff; border-radius: 10px;}
  .detail-bd .box1 .btn:hover {background-color: rgba(28, 169, 102, .75);}
  .detail-bd .box2 .col-lg-4 {margin-top: 25rem;}
  .detail-bd .box2 p {font-size: 20rem; line-height: 40rem; color: #4e4e4e;}
  .detail-bd .box2 .val {width: 74%; min-width: 240rem; padding: 0 18rem; background: #f5f6fa; border: 1px solid #4e4e4e; border-radius: 8px;}
  .detail-bd .box2 .logo {margin-top: 30rem; width: 74%; min-width: 240rem;}
  .detail-bd .box3 dl {margin-top: 36rem; margin-bottom: 26rem; font-size: 20rem; color: #4e4e4e; text-align: center;}
  .detail-bd .box3 dt {background-color: #dddfe9; border-radius: 8px;}
  .detail-bd .box3 dd {margin-top: 9px; background-color: #f5f6fa; border-radius: 8px; transition: background-color .3s;} 
  .detail-bd .box3 dd:hover {background-color: #e1fff1;}
  .detail-bd .box3 .weui-cell__ft {width: 24%; color: #4e4e4e; text-align: center;}
  .detail-bd .box3 .col4 {width: 22%;}
  .detail-bd .box3 .col4 a {color: #4e4e4e;}
  .detail-bd .box3 .col4 a:first-child {margin-right: 42rem;}
  .detail-bd .box3 .col4 a:hover {color: #1ca966;}
  .detail-bd .box3 li {margin-bottom: 8px; padding: 0; font-size: 20rem; color: #4e4e4e; text-align: center;}
  .detail-bd .box3 li .weui-cell__hd {width: 300rem; margin-right: 7px; padding: 10px; background-color: #dddfe9; border-radius: 8px;}
  .detail-bd .box3 li .weui-cell__bd {padding: 10px; background-color: #f5f6fa; border-radius: 8px;}
  .layout-hd .close:hover {transform: rotate(90deg);}
  .layout-ft a:hover {background: rgba(28, 169, 102, .75);}
}
@media (min-width: 1600px) {
  .logo-wrap .slogan .en {letter-spacing: 10px;}
}
@media (min-width: 1680px) {
  .login > .weui-cell__bd {padding: 100px 120px;}
}
@media (max-width: 1366px) {
  .footer {font-size: 14px;}
  .footer li:first-child dd p:nth-child(1) a {margin-right: 15.5%;}
  .footer li:first-child dd p:nth-child(2) span:first-child {margin-right: 3%;}
  .footer .qrcode {margin-left: 30px;}
}
@media (max-width: 1199px) {
  .footer dd.weui-flex {padding-top: 60rem; padding-bottom: 20rem;}
  .footer .qrcode img {width: 210rem; height: 210rem;}
  .footer dt {margin-left: -15px; margin-right: -15px; padding: 0 16rem 20rem; font-weight: 400; border-bottom: 1px solid #fff;}
  .footer .weui-cell {margin-top: 40rem; border-bottom: 1px solid #fff; font-size: 38rem;}
  .login {display: block; margin: 0; width: 100%; border-radius: 0;}
  .formbox-hd {margin-bottom: 160rem;}
  .formbox-hd .tit {font-size: 60rem; word-break: keep-all;}
  .formbox-hd .tit img {position: relative; top: 8rem; margin-right: 58rem; height: 60rem;}
  .formbox-bd .weui-input {font-size: 34rem;}
  .formbox-bd .error {padding-left: 0; font-size: 34rem; height: 102rem; text-align: center;}
  .formbox-bd .submit {height: 112rem; font-size: 54rem; border-radius: 10px;}
  .formbox-bd .note {font-size: 32rem;}
  .detail {width: 100%; background-color: #fff;}
  .detail-hd {background-color: #1ca966;}
  .detail-hd .weui-cell__hd img {height: 41rem;}
  .detail-hd .exit {font-size: 28rem; color: #fff;}
  .detail-hd .exit img {height: 28rem;}
  .detail-bd .box h3 {margin-top: 60rem; padding-bottom: 12rem;}
  .detail-bd .box1, .detail-bd .box h3 {border-bottom: 1px solid #BDBDBD;}
  .detail-bd .box2 > .row {padding-top: 87rem;}
  .detail-bd .box2 .col-xs-5 {width: 38%;}
  .detail-bd .box2 .col-xs-5 img {max-width: none; width: 96%;}
  .detail-bd .box2 .col-xs-7 {width: 62%;}
  .detail-bd .box2 .col-xs-6 {margin-bottom: 50rem;}
  .detail-bd .box2 .label {font-size: 30rem; color: #bdbdbd;}
  .detail-bd .box2 .val {font-size: 42rem; color: #4e4e4e;}
  .detail-bd .box3 dl {margin-bottom: 60rem;}
  .detail-bd .box3 dd {padding-top: 40rem; padding-bottom: 20rem; border-bottom: 1px solid #BDBDBD;}
  .detail-bd .box3 dd .col1 {font-size: 38rem; color: #4e4e4e;}
  .detail-bd .box3 dd .col4 a {position: relative; width: 120rem; height: 38rem; font-size: 24rem; line-height: 36rem; text-align: center; color: #4e4e4e; border: 1px solid #B7E8CD; background-color: #e7fff4; border-radius: 18rem;}
  .detail-bd .box3 dd .col4 a.btn1 {margin-right: 21rem;}
  .detail-bd .box3 dd .col4 a::after {position: relative; display: inline-block; content: ''; top: -7rem; margin-left: 15rem; width: 12rem; height: 12rem; border-right: 1px solid #4e4e4e; border-bottom: 1px solid #4e4e4e; transform: rotate(45deg); transition: all .3s;}
  .detail-bd .box3 dd .col4 a.on {background-color: #1ca966; color: #fff;}
  .detail-bd .box3 dd .col4 a.on::after {top: 2rem; border-right-color: #fff; border-bottom-color: #fff; transform: rotate(-135deg);}
  .detail-bd .box3 dd .weui-cell {padding: 0;}
  .detail-bd .box3 dd .intro2, .detail-bd .box3 dd .showbox {font-size: 30rem; color: #c0c0c0;}
  .detail-bd .box3 dd .intro2 {margin-top: 20rem;}
  .detail-bd .box3 dd .intro2 .weui-cell__ft {margin-left: 10px;}
  .detail-bd .box3 dd .showbox {display: none;}
  .detail-bd .box3 dd .showbox p {margin-top: 30rem;}
  .detail-bd .box3 dd .label {display: inline-block; width: 150rem; text-align-last: justify;}
  .layout {width: 80%; background: #fff;}
  .layout-hd {padding: 0; margin-left: 40rem; margin-right: 40rem; height: 100rem; border-bottom: 1px solid #BDBDBD;}
  .layout-hd .close::before, .layout-hd .close::after {width: 50rem; margin-left: -25rem;}
  .layout-bd {display: block;}
  .card {margin-bottom: 40rem;}
  .card-bd > .weui-cell__hd {padding-right: 64rem;}
}
@media (max-width: 768px) {
  .container {width: 100%; padding-left: 30px; padding-right: 30px;}
  .detail {padding-left: 0; padding-right: 0;}
}
@media (max-width: 639px) {
  .footer .weui-cell__hd {width: 17px;}
  .slogan .en {letter-spacing: 3px;}
  .login .logo-wrap {width: 78%;}
  .logo-wrap .slogan {margin-top: 10px; font-size: 18px;}
  .formbox-hd .tit {font-size: 29px;}
  .formbox-bd label.weui-cell {margin-top: 25px;}
  .formbox-bd .weui-cell__hd {width: 30px;}
  .f38 {font-size: 46rem;}
  .f42 {font-size: 50rem;}
  .detail-hd .exit {font-size: 36rem;}
  .detail-bd .box1 .btn {width: 54px; height: 24px; line-height: 24px; border-radius: 12px;}
  .detail-bd .box2 .col-xs-6 {margin-bottom: 25rem;}
  .detail-bd .box3 dd .col1 {font-size: 16px;}
  .detail-bd .box3 dd .col4 a {width: 60px; height: 24px; line-height: 22px; border-radius: 12px;}
  .detail-bd .box3 dd .col4 a::after {top: -12rem;}
  .detail-bd .box3 dd .intro2, .detail-bd .box3 dd .showbox {font-size: 14px;}
  .detail-bd .box3 dd .label {width: 80px;}
  .layout {width: 93%;}
  .card, .cardback {width: 96%; height: auto; border-radius: 14px;}
  .card-hd {height: 28px;}
  .card-hd img {margin: 4px auto; height: 20px;}
  .card-bd {padding: 15px; height: auto; align-items: flex-start;}
  .card-bd > .weui-cell__hd {margin-right: 15px; width: 70px; padding: 0;}
  .card-bd > .weui-cell__hd p {font-size: 8px; word-break: break-all;}
  .card-bd .row {margin-left: -5px; margin-right: -5px; margin-bottom: 5px;}
  .card-bd .row .weui-cell {margin-bottom: 3px; padding-left: 5px; padding-right: 5px;}
  .card-bd > .weui-cell__bd {padding-right: 0;}
  .card-bd .label {width: 48px; font-size: 8px;}
  .card-bd .val {padding: 0; font-size: 10px;}
  .card-bd .ewmbox img {width: 30px;}
  .card-ft {height: 14px;}
  .card-ft .slogan {font-size: 8px; line-height: 14px; letter-spacing: 5px;}
  .cardback {height: 184px;}
  .cardback .logo-wrap {width: 56%;}
  .cardback .logo-wrap .slogan {font-size: 8px;}
  .layout-ft a {width: 134px; height: 28px; line-height: 28px; font-size: 16px; border-radius: 14px;}
}
@media (min-width: 640px) and (max-width: 768px) {
  .login > .weui-cell__bd {padding: 50px;}
}