.zz_w_main, .zz_w_foot {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}




/* basic */
load,
body {background-color: var(--bg);}
.shadow::after {box-shadow: 0 .05rem .1rem var(--color);}
.lead {height: 3rem;width: 100%;background-image: url(../images/main.jpg);background-size: cover;border-radius: 0 0 .3rem .3rem;position: absolute;left: 0;top: 0;}

/* color */
:root {
    --color: #0055E8;
    --color-5: rgba(0,85,232,.5);
    --bg: #F5F7FB;
    --gery: #DFE5F1;
    --deep: #586F95;
    --lg: linear-gradient(#3BAAFF,var(--color));
    --lg-45: linear-gradient(45deg,#3BAAFF,var(--color));
}

/* ico */
.ico-level-1 {background-image: url(../images/level/1.png);}
.ico-level-2 {background-image: url(../images/level/2.png);}
.ico-level-3 {background-image: url(../images/level/3.png);}
.ico-level-4 {background-image: url(../images/level/4.png);}
.ico-level-5 {background-image: url(../images/level/5.png);}

/* frame */
.group {}
.contant {padding: 0 .2rem .2rem;}
.sider {}
.item {border-radius: .1rem;background-color: white;padding: 0 0.2rem 0.2rem 0.2rem;;}
.subject {}
.clause {}
.swiper-slide {border-radius: .1rem;overflow: hidden;}

/* btn */
.btn {border-radius: 1rem;background-image: var(--lg-45);font-weight: bold;}
.btn::after {width: calc(100% - .7rem);z-index: -1;background-color: transparent;}
.btn-empty {background-image: none;border-width: 2px;}
.btn-submit {margin: .3rem 0;}
.btn-orange {background-image: linear-gradient(45deg,var(--yellow),var(--orange));color: var(--brown);}

/* home */
.home name {background-color: transparent;box-shadow: 0 0 0;color: white;margin-bottom: 0;}
.home name h2 {color: white;}
.home .swiper-slide {height: 2.6rem;}

/*rule*/
.rule {}
.rule-cont {padding: .2rem;}

/*login*/
.login {background-image: url(../images/login.jpg);background-size: cover;display: flex;flex-direction: column;}
.login .btn-empty {color: white;}
.login-logo {padding: 1rem 0;}
.login-logo i {width: 4.5rem;height: 2.5rem;background-image: url(../images/logo1.png);display: block;margin: 0 auto .2rem;}
.login-logo span {font-size: 36px;color: white;display: block;text-align: center;}

/* title */
.title {text-align: left;padding: .2rem;}
.title h3 {font-size: .22rem;}

/* form */
.form {}
.form li .ico {color: var(--color);}
.form li input {}
.form li select {}
.form li .code {}
.form li button {}

/* page */
page {padding: .3rem 0;}
page .ico, page *:not(span) {border-radius: 1rem;background-color: var(--bg);}
page *:not(input) {color: var(--color);}

/* notice */
.notice {display: flex;align-items: center;background-color: white;padding: .1rem;border-radius: .1rem;}
.notice i {margin-right: .1rem;color: var(--orange);}
.notice marquee {flex: 1;}

/*navigation*/
.navigation {padding: .1rem;}
.navigation li {float: left;width: 25%;}
.navigation li a {display: block;border-radius: .1rem;background-color: white;padding: .2rem .1rem;text-align: center;}
.navigation li a i {font-size: .4rem;margin-bottom: .05rem;}
.navigation li:nth-child(1) a i {color: var(--orange);}
.navigation li:nth-child(2) a i {color: var(--red);}
.navigation li:nth-child(3) a i {color: var(--green);}
.navigation li:nth-child(4) a i {color: var(--yellow);}
.navigation li:nth-child(5) a i {color: var(--blue);}
.navigation li:nth-child(6) a i {color: var(--sapphire);}
.navigation li:nth-child(7) a i {color: var(--tomato);}
.navigation li:nth-child(8) a i {color: var(--color);}
.navigation li a span {text-transform: capitalize;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/*level*/
.level {}
.level li {width: 50%;float: left;padding: .1rem;}
.level li a {display: block;text-align: center;border-radius: .1rem;background-color: white;padding: .3rem 0;}
.level li a i {width: .9rem;height: .9rem;display: block;margin: auto;}
.level li a h5 {padding: .1rem 0;}
.level li a span {display: block;}

/*order*/
.order {}
.order-light {margin-bottom: .2rem;}
.order-light .swiper-slide {height: 3rem;}

.order-tab {display: flex;}
.order-tab li {flex: 1;padding: .05rem;}
.order-tab a {height: .6rem;background-color: white;display: block;text-align: center;line-height: .6rem;border-radius: 1rem;text-transform: capitalize;}
.order-tab li.active a {background-image: var(--lg-45);color: white;}

.order-list {}
.order-time {padding: .2rem 0;}
.order-time span {}
.order-time cite {text-transform: capitalize;border-width: 2px;padding: .05rem .2rem;border-radius: 1rem;}
.order-time cite.pending {color: var(--orange);border-color: var(--orange);}
.order-time cite.exmination {color: var(--color);border-color: var(--color);}
.order-cont {display: flex;border-bottom-width: 1px;padding-bottom: .2rem;}
.order-cont em {width: 1.4rem;height: 1.4rem;margin-right: .2rem;border-radius: .1rem;overflow: hidden;display: block;}
.order-contant {}
.order-contant h5 {padding: .1rem 0;}
.order-date {display: flex;}
.order-date li {flex: 1;margin-right: .1rem;}
.order-date li span {text-transform: capitalize;font-size: .18rem;color: var(--color);opacity: .3;}
.order-date li p {font-size: .16rem;}
.order-col {padding: 0.2rem 0 0 0.2rem;display: flex;align-items: center;}
.order-col li {flex: 1;}
.order-col li span {display: block;}
.order-col li b {color: var(--orange);}
.order-col a.btn {width: 100%;height: .6rem;}

/* table */
.table {}
.table table thead {color: var(--color);}

/* list */
.list {}
.list li {padding: .2rem 0;line-height: 150%;}
.list li a {display: flex;align-items: center;}
.list li b {color: var(--orange);}
.list li i.ico {color: var(--color);margin: 0 .1rem;}
.list .avatar {width: .5rem;height: .5rem;margin-right: .1rem;}

/* nav */
nav {
    background-color: #ffffff;box-shadow: 0 0 0;
    filter: drop-shadow(0 0 .1rem var(--000-1));
/*background-image: url(../images/menu.svg);*/

background-size: cover;max-width: 6.4rem;margin: auto;right: 0;}
/*nav li:nth-child(3) a {background: var(--lg);width: 1rem;height: 1rem;margin: -.5rem auto 0;border-radius: 100%;box-shadow: 0 .1rem .1rem var(--color-5);padding: 0;}*/
/*nav li:nth-child(3) a i {color: white;line-height: 1rem;font-size: .42rem;}*/

/* name */
name {margin-bottom: .2rem;}
name h2,
name a {color: var(--color);}

/*reminder*/
reminder {border: 0;background-color: var(--gery);color: var(--deep);border-radius: .1rem;}

/*article*/
.article {padding: .1rem 0;}
.article img {border-radius: .1rem;}

/*inquiry*/
.inquiry {}
.inquiry-cont {text-align: center;}
.inquiry-cont h5 {color: var(--color);margin: .5rem 0;}
.inquiry-cont span {color: var(--deep);}
.inquiry-code {width: 3rem;padding: .1rem;background-color: white;margin: .5rem auto;}
.inquiry-code img {}

/*data*/
.data {padding: .2rem 0;}
.data h3 {text-align: center;font-size: .2rem;color: var(--color);padding-bottom: .2rem;}
.data ul {display: flex;}
.data ul li {flex: 1;text-align: center;}
.data ul li span {padding-bottom: .1rem;display: block;text-transform: capitalize;}
.data ul li h5 {font-size: .3rem;color: var(--color);}
.data ul li b {color: var(--orange);}

/*user*/
.user-info {position: relative;padding: .4rem 0;}
.user-info .avatar {width: 1.2rem;height: 1.2rem;display: block;margin: auto;background-color: white;padding: .1rem;}
.user-info h3 {text-transform: inherit;text-align: center;color: white;font-weight: normal;padding-top: .2rem;}
.user-data {background-image: linear-gradient(#ffcd6d,#ffac32);border-radius: .1rem;position: relative;}
.user-data ul li span {color: var(--brown);}
.user-data ul li h5 {color: var(--yellow);}
.user-data.shadow::after {box-shadow: 0 .05rem .1rem #ffac32;background-color: transparent;}

/*team*/
.team {}
.team-data {background-image: url(../images/main.jpg);background-size: cover;border-radius: .1rem;padding: .4rem 0;}
.team-data ul li span {color: white;}

/*bet*/
.bet {}
.bet input {height: 1rem;font-size: .3rem;color: var(--orange);text-align: center;}
.bet-col {padding: 0 .15rem;margin-bottom: .2rem;}
.bet-col li {flex: 1;margin: 0 .05rem;}
.bet-col li a {background: white;color: var(--color);}




.zz_wrap_ci_img img {
    width: 23%;
    margin-right: 6px;
    height: 80px;
}