body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

form,fieldset,input,textarea,p,blockquote,th,td {

       padding: 0;

       margin: 0;

}

table {

       border-collapse: collapse;

       border-spacing: 0;

}

fieldset,img {

       border: 0;

}

address,caption,cite,code,dfn,em,strong,th,var{

       font-weight: normal;

       font-style: normal;

}

ol,ul {

       list-style: none;

}

caption,th {

       text-align: left;

}

h1,h2,h3,h4,h5,h6 {

       font-weight: normal;

       font-size: 100%;

}

q:before,q:after {

       content:'';

}

abbr,acronym { 

       border: 0;

}

a{

	text-decoration:none;

	color:black;

}

.clear{

       clear:both;

}



     /* ==================

               布局

      ==================== */

     

     /*  -- flex弹性布局 -- */

     

     .flex {

       display: flex;

     }

     

     .basis-xs {

       flex-basis: 20%;

     }

     

     .basis-sm {

       flex-basis: 40%;

     }

     

     .basis-df {

       flex-basis: 50%;

     }

     

     .basis-lg {

       flex-basis: 60%;

     }

     

     .basis-xl {

       flex-basis: 80%;

     }

     

     .flex-sub {

       flex: 1;

     }

     

     .flex-twice {

       flex: 2;

     }

     

     .flex-treble {

       flex: 3;

     }

     

     .flex-direction {

       flex-direction: column;

     }

     

     .flex-wrap {

       flex-wrap: wrap;

     }

     

     .align-start {

       align-items: flex-start;

     }

     

     .align-end {

       align-items: flex-end;

     }

     

     .align-center {

       align-items: center;

     }

     

     .align-stretch {

       align-items: stretch;

     }

     

     .self-start {

       align-self: flex-start;

     }

     

     .self-center {

       align-self: flex-center;

     }

     

     .self-end {

       align-self: flex-end;

     }

     

     .self-stretch {

       align-self: stretch;

     }

     

     .align-stretch {

       align-items: stretch;

     }

     

     .justify-start {

       justify-content: flex-start;

     }

     

     .justify-end {

       justify-content: flex-end;

     }

     

     .justify-center {

       justify-content: center;

     }

     

     .justify-between {

       justify-content: space-between;

     }

     

     .justify-around {

       justify-content: space-around;

     }

     

     /* grid布局 */

     

     .grid {

       display: flex;

       flex-wrap: wrap;

     }

     

     .grid.grid-square {

       margin-bottom: -10px;

       overflow: hidden;

     }

     

     .grid.grid-square tag {

       position: absolute;

       right: 0;

       top: 0;

       border-bottom-left-radius: 3px;

     }

     

     .grid.grid-square view> icon, .grid.grid-square item> icon {

       font-size: 26px;

       position: absolute;

       color: #aaa;

       margin: auto;

       top: 0;

       bottom: 0;

       left: 0;

       right: 0;

     }

     

     .grid.grid-square view, .grid.grid-square item {

       margin-right: 10px;

       margin-bottom: 10px;

       border-radius: 3px;

       position: relative;

       overflow: hidden;

     }

     

     .grid.col-1.grid-square view, .grid.col-1.grid-square item {

       padding-bottom: 100%;

       height: 0;

       margin-right: 0;

     }

     

     .grid.col-2.grid-square view, .grid.col-2.grid-square item {

       padding-bottom: calc((100% - 10px)/2);

       height: 0;

       width: calc((100% - 10px)/2);

     }

     

     .grid.col-2.grid-square view:nth-child(2n),

     .grid.col-2.grid-square item:nth-child(2n) {

       margin-right: 0;

     }

     

     .grid.col-3.grid-square view, .grid.col-3.grid-square item {

       padding-bottom: calc((100% - 20px)/3);

       height: 0;

       width: calc((100% - 20px)/3);

     }

     

     .grid.col-3.grid-square view:nth-child(3n),

     .grid.col-3.grid-square item:nth-child(3n) {

       margin-right: 0;

     }

     

     .grid.col-4.grid-square view, .grid.col-4.grid-square item {

       padding-bottom: calc((100% - 30px)/4);

       height: 0;

       width: calc((100% - 30px)/4);

     }

     

     .grid.col-4.grid-square view:nth-child(4n),

     .grid.col-4.grid-square item:nth-child(4n) {

       margin-right: 0;

     }

     

     .grid.col-5.grid-square view, .grid.col-5.grid-square item {

       padding-bottom: calc((100% - 40px)/5);

       height: 0;

       width: calc((100% - 40px)/5);

     }

     

     .grid.col-1>item, .grid.col-1>view {

       width: 100%;

     }

     

     .grid.col-2>item, .grid.col-2>view {

       width: 50%;

     }

     

     .grid.col-3>item, .grid.col-3>view {

       width: 33.33%;

     }

     

     .grid.col-4>item, .grid.col-4>view {

       width: 25%;

     }

     

     .grid.col-5>item, .grid.col-5>view {

       width: 20%;

     }

     

     /*  -- 内外边距 -- */

     

     .margin-0 {

       margin: 0 !important;

     }

     

     .margin-xs {

       margin: 5px;

     }

     

     .margin-sm {

       margin: 10px;

     }

     

     .margin {

       margin: 15px;

     }

     

     .margin-lg {

       margin: 20px;

     }

     

     .margin-xl {

       margin: 25px;

     }

     

     .margin-top-xs {

       margin-top: 5px;

     }

     

     .margin-top-sm {

       margin-top: 10px;

     }

     

     .margin-top {

       margin-top: 15px;

     }

     

     .margin-top-lg {

       margin-top: 20px;

     }

     

     .margin-top-xl {

       margin-top: 25px;

     }

     

     .margin-right-xs {

       margin-right: 5px;

     }

     

     .margin-right-sm {

       margin-right: 10px;

     }

     

     .margin-right {

       margin-right: 15px;

     }

     

     .margin-right-lg {

       margin-right: 20px;

     }

     

     .margin-right-xl {

       margin-right: 25px;

     }

     

     .margin-bottom-xs {

       margin-bottom: 5px;

     }

     

     .margin-bottom-sm {

       margin-bottom: 10px;

     }

     

     .margin-bottom {

       margin-bottom: 15px;

     }

     

     .margin-bottom-lg {

       margin-bottom: 20px;

     }

     

     .margin-bottom-xl {

       margin-bottom: 25px;

     }

     

     .margin-left-xs {

       margin-left: 5px;

     }

     

     .margin-left-sm {

       margin-left: 10px;

     }

     

     .margin-left {

       margin-left: 15px;

     }

     

     .margin-left-lg {

       margin-left: 20px;

     }

     

     .margin-left-xl {

       margin-left: 25px;

     }

     

     .margin-lr-xs {

       margin-left: 5px;

       margin-right: 5px;

     }

     

     .margin-lr-sm {

       margin-left: 10px;

       margin-right: 10px;

     }

     

     .margin-lr {

       margin-left: 15px;

       margin-right: 15px;

     }

     

     .margin-lr-lg {

       margin-left: 20px;

       margin-right: 20px;

     }

     

     .margin-lr-xl {

       margin-left: 25px;

       margin-right: 25px;

     }

     

     .margin-tb-xs {

       margin-top: 5px;

       margin-bottom: 5px;

     }

     

     .margin-tb-sm {

       margin-top: 10px;

       margin-bottom: 10px;

     }

     

     .margin-tb {

       margin-top: 15px;

       margin-bottom: 15px;

     }

     

     .margin-tb-lg {

       margin-top: 20px;

       margin-bottom: 20px;

     }

     

     .margin-tb-xl {

       margin-top: 25px;

       margin-bottom: 25px;

     }

     

     .padding-0 {

       padding: 0 !important;

     }

     

     .padding-xs {

       padding: 5px;

     }

     

     .padding-sm {

       padding: 10px;

     }

     

     .padding {

       padding: 15px;

     }

     

     .padding-lg {

       padding: 20px;

     }

     

     .padding-xl {

       padding: 25px;

     }

     

     .padding-top-xs {

       padding-top: 5px;

     }

     

     .padding-top-sm {

       padding-top: 10px;

     }

     

     .padding-top {

       padding-top: 15px;

     }

     

     .padding-top-lg {

       padding-top: 20px;

     }

     

     .padding-top-xl {

       padding-top: 25px;

     }

     

     .padding-right-xs {

       padding-right: 5px;

     }

     

     .padding-right-sm {

       padding-right: 10px;

     }

     

     .padding-right {

       padding-right: 15px;

     }

     

     .padding-right-lg {

       padding-right: 20px;

     }

     

     .padding-right-xl {

       padding-right: 25px;

     }

     

     .padding-bottom-xs {

       padding-bottom: 5px;

     }

     

     .padding-bottom-sm {

       padding-bottom: 10px;

     }

     

     .padding-bottom {

       padding-bottom: 15px;

     }

     

     .padding-bottom-lg {

       padding-bottom: 20px;

     }

     

     .padding-bottom-xl {

       padding-bottom: 25px;

     }

     

     .padding-left-xs {

       padding-left: 5px;

     }

     

     .padding-left-sm {

       padding-left: 10px;

     }

     

     .padding-left {

       padding-left: 15px;

     }

     

     .padding-left-lg {

       padding-left: 20px;

     }

     

     .padding-left-xl {

       padding-left: 25px;

     }

     

     .padding-lr-xs {

       padding-left: 5px;

       padding-right: 5px;

     }

     

     .padding-lr-sm {

       padding-left: 10px;

       padding-right: 10px;

     }

     

     .padding-lr {

       padding-left: 15px;

       padding-right: 15px;

     }

     

     .padding-lr-lg {

       padding-left: 20px;

       padding-right: 20px;

     }

     

     .padding-lr-xl {

       padding-left: 25px;

       padding-right: 25px;

     }

     

     .padding-tb-xs {

       padding-top: 5px;

       padding-bottom: 5px;

     }

     

     .padding-tb-sm {

       padding-top: 10px;

       padding-bottom: 10px;

     }

     

     .padding-tb {

       padding-top: 15px;

       padding-bottom: 15px;

     }

     

     .padding-tb-lg {

       padding-top: 20px;

       padding-bottom: 20px;

     }

     

     .padding-tb-xl {

       padding-top: 25px;

       padding-bottom: 25px;

     }

     

     /* -- 浮动 --  */

     

     .cf::after, .cf::before {

       content: " ";

       display: table;

     }

     

     .cf::after {

       clear: both;

     }

     

     .fl {

       float: left;

     }

     

     .fr {

       float: right;

     }

     

     /* ==================

               图片

      ==================== */

     

     image {

       max-width: 100%;

       display: inline-block;

       position: relative;

       z-index: 0;

     }

     

     image.loading::before {

       content: "";

       background: #f5f5f5;

       display: block;

       position: absolute;

       width: 100%;

       height: 100%;

       z-index: -2;

     }

     

     image.loading::after {

       content: "\e7f1";

       font-family: "iconfont";

       position: absolute;

       top: 0;

       left: 0;

       width: 16px;

       height: 16px;

       line-height: 16px;

       right: 0;

       bottom: 0;

       z-index: -1;

       font-size: 16px;

       margin: auto;

       color: #ccc;

       -webkit-animation: icon-spin 2s infinite linear;

       animation: icon-spin 2s infinite linear;

       display: block;

     }

     

     image.response {

       width: 100%;

     }

     

     /* ==================

              开关

      ==================== */

     

     switch, checkbox, radio {

       position: relative;

     }

     

     switch::after {

       font-family: "iconfont" !important;

       content: "\e645";

       position: absolute;

       color: #fff;

       top: 50%;

       margin-top: -8px;

       left: 10px;

       font-size: 16px;

       line-height: 16px;

       pointer-events: none;

       transform: scale(0, 0);

       transition: all 0.3s ease-in-out 0s;

     }

     

     switch[checked]::after {

       transform: scale(1, 1);

     }

     

     switch::before {

       font-family: "iconfont" !important;

       content: "\e646";

       position: absolute;

       color: #fff;

       top: 50%;

       margin-top: -8px;

       right: 10px;

       font-size: 16px;

       line-height: 16px;

       pointer-events: none;

       transform: scale(1, 1);

       transition: all 0.3s ease-in-out 0s;

       z-index: 9;

     }

     

     radio::before, checkbox::before {

       font-family: "iconfont" !important;

       content: "\e645";

       position: absolute;

       color: #fff;

       top: 50%;

       margin-top: -8px;

       right: 5px;

       font-size: 16px;

       line-height: 16px;

       pointer-events: none;

       transform: scale(1, 1);

       transition: all 0.3s ease-in-out 0s;

       z-index: 9;

     }

     

     switch[checked]::before {

       transform: scale(0, 0);

     }

     

     switch .wx-switch-input {

       background: #aaa !important;

       border-color: #aaa;

       padding: 0 30px;

       margin: 0;

     }

     

     radio-group {

       display: inline-block;

     }

     

     radio .wx-radio-input, checkbox .wx-checkbox-input {

       margin: 0;

       width: 24px;

       height: 24px;

     }

     

     checkbox.round .wx-checkbox-input {

       border-radius: 50px;

     }

     

     switch .wx-switch-input-checked::after {

       margin-left: 10px;

       box-shadow: none;

     }

     

     switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,

     switch.radius .wx-switch-input::before {

       border-radius: 5px;

     }

     

     switch .wx-switch-input::before, radio.radio::before,

     checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {

       display: none;

     }

     

     radio.radio[checked]::after {

       content: "";

       background: transparent;

       display: block;

       position: absolute;

       width: 8px;

       height: 8px;

       z-index: 999;

       top: 0px;

       left: 0px;

       right: 0;

       bottom: 0;

       margin: auto;

       border-radius: 100px;

       border: 8px solid #fff;

     }

     

     switch.sm, checkbox.sm, radio.sm {

       transform: scale(0.8);

     }

     

     .switch-sex::after {

       content: "\e71c";

     }

     

     .switch-sex::before {

       content: "\e71a";

     }

     

     .switch-sex .wx-switch-input {

       background: #e54d42 !important;

       border-color: #e54d42;

     }

     

     .switch-sex[checked] .wx-switch-input {

       background: #0081ff !important;

       border-color: #0081ff !important;

     }

     

     /* ==================

               背景

      ==================== */

     

     .line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,

     checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {

       border-color: #e54d42 !important;

     }

     

     .line-orange::after, .lines-orange::after,

     switch.orange[checked] .wx-switch-input,

     checkbox.orange[checked] .wx-checkbox-input,

     radio.orange[checked] .wx-radio-input {

       border-color: #f37b1d !important;

     }

     

     .line-yellow::after, .lines-yellow::after,

     switch.yellow[checked] .wx-switch-input,

     checkbox.yellow[checked] .wx-checkbox-input,

     radio.yellow[checked] .wx-radio-input {

       border-color: #fbbd08 !important;

     }

     

     .line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,

     checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {

       border-color: #8dc63f !important;

     }

     

     .line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,

     checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,

     radio.green[checked] .wx-radio-input {

       border-color: #39b54a !important;

     }

     

     .line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,

     checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {

       border-color: #1cbbb4 !important;

     }

     

     .line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,

     checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {

       border-color: #0081ff !important;

     }

     

     .line-purple::after, .lines-purple::after,

     switch.purple[checked] .wx-switch-input,

     checkbox.purple[checked] .wx-checkbox-input,

     radio.purple[checked] .wx-radio-input {

       border-color: #6739b6 !important;

     }

     

     .line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,

     checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {

       border-color: #9c26b0 !important;

     }

     

     .line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,

     checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {

       border-color: #e03997 !important;

     }

     

     .line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,

     checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {

       border-color: #a5673f !important;

     }

     

     .line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,

     checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {

       border-color: #8799a3 !important;

     }

     

     .line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,

     checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {

       border-color: #aaa !important;

     }

     

     .line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,

     checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {

       border-color: #333 !important;

     }

     

     .line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,

     checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {

       border-color: #fff !important;

     }

     

     .bg-red, switch.red[checked] .wx-switch-input,

     checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {

       background-color: #e54d42 !important;

       color: #fff !important;

     }

     

     .bg-orange, switch.orange[checked] .wx-switch-input,

     checkbox.orange[checked] .wx-checkbox-input,

     radio.orange[checked] .wx-radio-input {

       background-color: #f37b1d !important;

       color: #fff !important;

     }

     

     .bg-yellow, switch.yellow[checked] .wx-switch-input,

     checkbox.yellow[checked] .wx-checkbox-input,

     radio.yellow[checked] .wx-radio-input {

       background-color: #fbbd08 !important;

       color: #333 !important;

     }

     

     .bg-olive, switch.olive[checked] .wx-switch-input,

     checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {

       background-color: #8dc63f !important;

       color: #fff !important;

     }

     

     .bg-green, switch.green[checked] .wx-switch-input,

     switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,

     checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,

     radio[checked] .wx-radio-input {

       background-color: #39b54a !important;

       color: #fff !important;

     }

     

     .bg-cyan, switch.cyan[checked] .wx-switch-input,

     checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {

       background-color: #1cbbb4 !important;

       color: #fff !important;

     }

     

     .bg-blue, switch.blue[checked] .wx-switch-input,

     checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {

       background-color: #0081ff !important;

       color: #fff !important;

     }

     

     .bg-purple, switch.purple[checked] .wx-switch-input,

     checkbox.purple[checked] .wx-checkbox-input,

     radio.purple[checked] .wx-radio-input {

       background-color: #6739b6 !important;

       color: #fff !important;

     }

     

     .bg-mauve, switch.mauve[checked] .wx-switch-input,

     checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {

       background-color: #9c26b0 !important;

       color: #fff !important;

     }

     

     .bg-pink, switch.pink[checked] .wx-switch-input,

     checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {

       background-color: #e03997 !important;

       color: #fff !important;

     }

     

     .bg-brown, switch.brown[checked] .wx-switch-input,

     checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {

       background-color: #a5673f !important;

       color: #fff !important;

     }

     

     .bg-grey, switch.grey[checked] .wx-switch-input,

     checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {

       background-color: #8799a3 !important;

       color: #fff !important;

     }

     

     .bg-gray, switch.gray[checked] .wx-switch-input,

     checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {

       background-color: #f0f0f0 !important;

       color: #666 !important;

     }

     

     .bg-black, switch.black[checked] .wx-switch-input,

     checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {

       background-color: #333 !important;

       color: #fff !important;

     }

     

     .bg-white, switch.white[checked] .wx-switch-input,

     checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {

       background-color: #fff !important;

       color: #666;

     }

     

     .bg-shadeTop {

       background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));

       color: #fff;

     }

     

     .bg-shadeBottom {

       background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));

       color: #fff;

     }

     

     .none-bg, .line-white, .lines-white {

       background-color: transparent !important;

     }

     

     .bg-red.light {

       color: #e54d42 !important;

       background: #fadbd9 !important;

     }

     

     .bg-orange.light {

       color: #f37b1d !important;

       background: #fde6d2 !important;

     }

     

     .bg-yellow.light {

       color: #fbbd08 !important;

       background: #fef2ce !important;

     }

     

     .bg-olive.light {

       color: #8dc63f !important;

       background: #e8f4d9 !important;

     }

     

     .bg-green.light {

       color: #39b54a !important;

       background: #d7f0db !important;

     }

     

     .bg-cyan.light {

       color: #1cbbb4 !important;

       background: #d2f1f0 !important;

     }

     

     .bg-blue.light {

       color: #0081ff !important;

       background: #cce6ff !important;

     }

     

     .bg-purple.light {

       color: #6739b6 !important;

       background: #e1d7f0 !important;

     }

     

     .bg-mauve.light {

       color: #9c26b0 !important;

       background: #ebd4ef !important;

     }

     

     .bg-pink.light {

       color: #e03997 !important;

       background: #f9d7ea !important;

     }

     

     .bg-brown.light {

       color: #a5673f !important;

       background: #ede1d9 !important;

     }

     

     .bg-grey.light {

       color: #8799a3 !important;

       background: #e7ebed !important;

     }

     

     .bg-gray.light {

       color: #666 !important;

       background: #fadbd9 !important;

     }

     

     .bg-gray.light {

       color: #888 !important;

       background: #f1f1f1 !important;

     }

     

     .gradual-red {

       background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important;

       color: #fff !important;

     }

     

     .gradual-orange {

       background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important;

       color: #fff !important;

     }

     

     .gradual-green {

       background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important;

       color: #fff !important;

     }

     

     .gradual-purple {

       background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important;

       color: #fff !important;

     }

     

     .gradual-pink {

       background-image: linear-gradient(45deg, #ec008c, #6739b6) !important;

       color: #fff !important;

     }

     

     .gradual-blue {

       background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;

       color: #fff !important;

     }

     

     button.shadow[class*="-red"] {

       box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2) !important;

     }

     

     button.shadow[class*="-orange"] {

       box-shadow: 3px 3px 4px rgba(217, 109, 26, 0.2) !important;

     }

     

     button.shadow[class*="-yellow"] {

       box-shadow: 3px 3px 4px rgba(224, 170, 7, 0.2) !important;

     }

     

     button.shadow[class*="-olive"] {

       box-shadow: 3px 3px 4px rgba(124, 173, 55, 0.2) !important;

     }

     

     button.shadow[class*="-green"] {

       box-shadow: 3px 3px 4px rgba(48, 156, 63, 0.2) !important;

     }

     

     button.shadow[class*="-cyan"] {

       box-shadow: 3px 3px 4px rgba(28, 187, 180, 0.2) !important;

     }

     

     button.shadow[class*="-blue"] {

       box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2) !important;

     }

     

     button.shadow[class*="-purple"] {

       box-shadow: 3px 3px 4px rgba(88, 48, 156, 0.2) !important;

     }

     

     button.shadow[class*="-mauve"] {

       box-shadow: 3px 3px 4px rgba(133, 33, 150, 0.2) !important;

     }

     

     button.shadow[class*="-pink"] {

       box-shadow: 3px 3px 4px rgba(199, 50, 134, 0.2) !important;

     }

     

     button.shadow[class*="-brown"] {

       box-shadow: 3px 3px 4px rgba(140, 88, 53, 0.2) !important;

     }

     

     button.shadow[class*="-grey"] {

       box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;

     }

     

     button.shadow[class*="-gray"] {

       box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;

     }

     

     button.shadow[class*="-black"] {

       box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2) !important;

     }

     

     .bg-img {

       background-size: cover;

       background-position: center;

       background-repeat: no-repeat;

     }

     

     .bg-mask {

       background-color: #333;

       position: relative;

     }

     

     .bg-mask::after {

       content: "";

       border-radius: inherit;

       width: 100%;

       height: 100%;

       display: block;

       background-color: rgba(0, 0, 0, 0.5);

       position: absolute;

       left: 0;

       right: 0;

       bottom: 0;

       top: 0;

     }

     

     .bg-mask view, .bg-mask cover-view {

       z-index: 5;

       position: relative;

     }

     

     .bg-mask>cover-view {

       background-color: rgba(0, 0, 0, 0.5);

     }

     

     .bg-video {

       position: relative;

     }

     

     .bg-video video {

       display: block;

       height: 100%;

       width: 100%;

       -o-object-fit: cover;

       object-fit: cover;

       position: absolute;

       top: 0;

       z-index: 0;

       pointer-events: none;

     }

     

     /* ==================

               文本

      ==================== */

     

     .text-xs {

       font-size: 10px;

     }

     

     .text-sm {

       font-size: 12px;

     }

     

     .text-df {

       font-size: 14px;

     }

     

     .text-lg {

       font-size: 16px;

     }

     

     .text-xl {

       font-size: 18px;

     }

     

     .text-xxl {

       font-size: 22px;

     }

     

     .text-sl {

       font-size: 40px;

     }

     

     .text-xsl {

       font-size: 60px;

     }

     

     .text-Abc {

       text-transform: Capitalize;

     }

     

     .text-ABC {

       text-transform: Uppercase;

     }

     

     .text-abc {

       text-transform: Lowercase;

     }

     

     .text-price::before {

       content: "¥";

       font-size: 80%;

       margin-right: 2px;

     }

     

     .text-cut {

       text-overflow: ellipsis;

       white-space: nowrap;

       overflow: hidden;

     }

     

     .text-bold {

       font-weight: bold;

     }

     

     .text-center {

       text-align: center;

     }

     

     .text-content {

       line-height: 1.6;

     }

     

     .text-left {

       text-align: left;

     }

     

     .text-right {

       text-align: right;

     }

     

     .text-red, .line-red, .lines-red {

       color: #e60012 !important;

     }

     

     .text-orange, .line-orange, .lines-orange {

       color: #fe6400 !important;

     }

     

     .text-yellow, .line-yellow, .lines-yellow {

       color: #fbbd08 !important;

     }

     

     .text-olive, .line-olive, .lines-olive {

       color: #8dc63f !important;

     }

     

     .text-green, .line-green, .lines-green {

       color: #39b54a !important;

     }

     

     .text-cyan, .line-cyan, .lines-cyan {

       color: #1cbbb4 !important;

     }

     

     .text-blue, .line-blue, .lines-blue {

       color: #0081ff !important;

     }

     

     .text-purple, .line-purple, .lines-purple {

       color: #6739b6 !important;

     }

     

     .text-mauve, .line-mauve, .lines-mauve {

       color: #9c26b0 !important;

     }

     

     .text-pink, .line-pink, .lines-pink {

       color: #e03997 !important;

     }

     

     .text-brown, .line-brown, .lines-brown {

       color: #a5673f !important;

     }

     

     .text-grey, .line-grey, .lines-grey {

       color: #8799a3 !important;

     }

     

     .text-gray, .line-gray, .lines-gray {

       color: #aaa !important;

     }

     

     .text-black, .line-black, .lines-black {

       color: #333 !important;

     }

     

     .text-white, .line-white, .lines-white {

       color: #fff !important;

     }

     

     /* ==================

               边框

      ==================== */

     

     /* -- 实线 -- */

     

     .solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,

     .solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,

     .dashed-right, .dashed-bottom, .dashed-left {

       position: relative;

     }

     

     .solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,

     .solid-left::after, .solids::after, .solids-top::after, .solids-right::after,

     .solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,

     .dashed-right::after, .dashed-bottom::after, .dashed-left::after {

       content: " ";

       width: 200%;

       height: 200%;

       position: absolute;

       top: 0;

       left: 0;

       border-radius: inherit;

       transform: scale(0.5);

       transform-origin: 0 0;

       pointer-events: none;

       box-sizing: border-box;

     }

     

     .solid::after {

       border: 1px solid rgba(0, 0, 0, 0.1);

     }

     

     .solid-top::after {

       border-top: 1px solid rgba(0, 0, 0, 0.1);

     }

     

     .solid-right::after {

       border-right: 1px solid rgba(0, 0, 0, 0.1);

     }

     

     .solid-bottom::after {

       border-bottom: 1px solid rgba(0, 0, 0, 0.1);

     }

     

     .solid-left::after {

       border-left: 1px solid rgba(0, 0, 0, 0.1);

     }

     

     .solids::after {

       border: 4rpx solid #eee;

     }

     

     .solids-top::after {

       border-top: 4rpx solid #eee;

     }

     

     .solids-right::after {

       border-right: 4rpx solid #eee;

     }

     

     .solids-bottom::after {

       border-bottom: 4rpx solid #eee;

     }

     

     .solids-left::after {

       border-left: 4rpx solid #eee;

     }

     

     /* -- 虚线 -- */

     

     .dashed::after {

       border: 1px dashed #ddd;

     }

     

     .dashed-top::after {

       border-top: 1px dashed #ddd;

     }

     

     .dashed-right::after {

       border-right: 1px dashed #ddd;

     }

     

     .dashed-bottom::after {

       border-bottom: 1px dashed #ddd;

     }

     

     .dashed-left::after {

       border-left: 1px dashed #ddd;

     }

     

     /* -- 阴影 -- */

     

     .shadow {

       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     }

     

     .shadow-lg {

       box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.07);

     }

     

     .shadow-warp {

       position: relative;

       box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

     }

     

     .shadow-warp:before, .shadow-warp:after {

       position: absolute;

       content: "";

       top: 10px;

       bottom: 15px;

       left: 10px;

       width: 50%;

       box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);

       transform: rotate(-3deg);

       z-index: -1;

     }

     

     .shadow-warp:after {

       right: 10px;

       left: auto;

       transform: rotate(3deg);

     }

     

     .shadow-blur {

       position: relative;

     }

     

     .shadow-blur::before {

       content: "";

       display: block;

       background: inherit;

       filter: blur(5px);

       position: absolute;

       width: 100%;

       height: 100%;

       top: 5px;

       left: 5px;

       z-index: -1;

       opacity: 0.4;

       transform-origin: 0 0;

       border-radius: inherit;

       transform: scale(1, 1);

     }

     

     /* ==================

               按钮

      ==================== */

     

     .round, button.icon {

       border-radius: 5000px !important;

     }

     

     .radius {

       border-radius: 10rpx !important;

     }

     

     button {

       position: relative;

       display: inline-flex;

       align-items: center;

       justify-content: center;

       box-sizing: border-box;

       padding: 10px 15px 8px;

       font-size: 14px;

       line-height: 1;

       text-align: center;

       text-decoration: none;

       border-radius: 3px;

       overflow: visible;

       color: #666;

       background-color: #fff !important;

       margin-left: initial;

       transform: translate(0px, 0px);

       margin-right: initial;

     }

     

     button::after, tag[class*="line-"]::after {

       content: " ";

       width: 200%;

       height: 200%;

       position: absolute;

       top: 0;

       left: 0;

       border: 1rpx solid rgba(0, 0, 0, 0.2);

       transform: scale(0.5);

       transform-origin: 0 0;

       box-sizing: border-box;

       border-radius: inherit;

       z-index: 1;

       pointer-events: none;

     }

     

     button[class*="line"]::after, tag.radius[class*="line"]::after {

       border-radius: 6px;

     }

     

     button.round[class*="line"]::after, tag.round[class*="line"]::after {

       border-radius: 500px;

     }

     

     button[class*="lines"]::after {

       border: 3px solid rgba(0, 0, 0, 0.2);

     }

     

     button[class*="bg-"]::after {

       display: none;

     }

     

     button.sm {

       padding: 7px 10px 5px;

       font-size: 12px;

     }

     

     button.lg {

       padding: 16px 20px 14px;

       font-size: 16px;

     }

     

     button.icon.sm {

       width: 28px;

       height: 28px;

     }

     

     button.icon {

       width: 35px;

       height: 35px;

       padding: 0;

     }

     

     button.icon.lg {

       width: 41px;

       height: 41px;

     }

     

     button.shadow-blur::before {

       top: 2px;

       left: 2px;

       filter: blur(3px);

       opacity: 0.6;

     }

     

     button.button-hover {

       transform: translate(1px, 1px);

     }

     

     .block {

       display: block;

     }

     

     button.block {

       display: flex;

     }

     

     button[disabled] {

       opacity: 0.6;

       color: #fff;

     }

     

     /* ==================

               徽章

      ==================== */

     

     tag {

       font-size: 12px;

       color: #666;

       vertical-align: middle;

       position: relative;

       display: inline-flex;

       align-items: stretch;

       justify-content: center;

       box-sizing: border-box;

       padding: 6px 7px 5px;

       line-height: 1;

       background: #fff;

       font-family: Helvetica Neue, Helvetica, sans-serif;

     }

     

     tag[class*="line-"]::after {

       border-radius: 0;

     }

     

     tag+tag {

       margin-left: 5px;

     }

     

     tag.sm {

       font-size: 10px;

       padding: 5px 6px 3px;

     }

     

     capsule {

       display: inline-flex;

       vertical-align: middle;

     }

     

     capsule + capsule {

       margin-left: 5px;

     }

     

     capsule tag {

       margin: 0;

     }

     

     capsule tag[class*="line-"]:last-child::after {

       border-left: 0px solid transparent !important;

     }

     

     capsule tag[class*="line-"]:first-child::after {

       border-right: 0px solid transparent !important;

     }

     

     capsule.radius tag:first-child {

       border-top-left-radius: 3px;

       border-bottom-left-radius: 3px;

     }

     

     capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] {

       border-top-right-radius: 6px;

       border-bottom-right-radius: 6px;

     }

     

     capsule.round tag:first-child {

       border-top-left-radius: 100px;

       border-bottom-left-radius: 100px;

       text-indent: 2px;

     }

     

     capsule.round tag:last-child::after, capsule.round tag:last-child {

       border-top-right-radius: 100px;

       border-bottom-right-radius: 100px;

       text-indent: -2px;

     }

     

     tag.badge {

       background: #dd514c;

       border-radius: 100px;

       position: absolute;

       top: -5px;

       right: -5px;

       font-size: 10px;

       padding: 3px 5px 2px;

       color: #fff;

     }

     

     tag:empty {

       padding: 4px;

       top: -2px;

       right: -2px;

     }

     

     /* ==================

               头像

      ==================== */

     

     avatar {

       font-variant: small-caps;

       margin: 0;

       padding: 0;

       display: inline-block;

       text-align: center;

       background: #ccc;

       color: #fff;

       white-space: nowrap;

       position: relative;

       width: 32px;

       height: 32px;

       line-height: 32px;

       background-size: cover;

       background-position: center;

       vertical-align: middle;

     }

     

     avatar text {

       position: absolute;

       left: 50%;

       display: inline-block;

       transform-origin: 0 center;

       transform: scale(0.75) translateX(-50%);

     }

     

     avatar.sm {

       width: 24px;

       height: 24px;

       line-height: 24px;

     }

     

     avatar > icon {

       position: absolute;

       left: 50%;

       top: 0;

       bottom: 0;

       margin: auto;

       transform-origin: 0 center;

       transform: scale(1.2) translateX(-50%);

     }

     

     avatar.sm > icon {

       transform: scale(0.75) translateX(-50%);

     }

     

     avatar.lg > icon {

       transform: scale(1.75) translateX(-50%);

     }

     

     avatar.xl > icon {

       transform: scale(2.2) translateX(-50%);

     }

     

     avatar.lg {

       width: 45px;

       height: 45px;

       line-height: 45px;

     }

     

     avatar.xl {

       width: 64px;

       height: 64px;

       line-height: 64px;

     }

     

     avatar-group {

       direction: rtl;

       unicode-bidi: bidi-override;

       padding: 0 5px 0 20px;

       display: inline-block;

     }

     

     avatar-group avatar {

       margin-left: -15px;

       border: 2px solid #f1f1f1;

       vertical-align: middle;

     }

     

     avatar-group avatar.sm {

       margin-left: -10px;

       border: 1px solid #f1f1f1;

     }

     

     /* ==================

              进度条

      ==================== */

     

     progress-bar {

       overflow: hidden;

       height: 14px;

       background-color: #ebeef5;

       display: inline-flex;

       align-items: center;

       width: 100%;

     }

     

     progress-bar+view, progress-bar+text {

       line-height: 1;

     }

     

     progress-bar.xs {

       height: 5px;

     }

     

     progress-bar.sm {

       height: 10px;

     }

     

     progress-bar view {

       width: 0;

       height: 100%;

       align-items: center;

       display: flex;

       justify-items: flex-end;

       justify-content: space-around;

       font-size: 10px;

       color: #fff;

       background: #0081ff;

       transition: width 0.6s ease;

     }

     

     progress-bar text {

       align-items: center;

       display: flex;

       font-size: 10px;

       color: #666;

       text-indent: 5px;

     }

     

     progress-bar.text-progress {

       padding-right: 30px;

     }

     

     progress-bar.striped view {

       background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

       background-size: 36px 36px;

     }

     

     progress-bar.active view {

       animation: progress-bar-stripes 2s linear infinite;

     }

     

     @keyframes progress-bar-stripes {

       from {

         background-position: 36px 0;

       }

     

       to {

         background-position: 0 0;

       }

     }

     

     /* ==================

               加载

      ==================== */

     

     load {

       display: block;

       line-height: 3em;

       text-align: center;

     }

     

     load::before {

       font-family: "iconfont" !important;

       display: inline-block;

       margin-right: 3px;

     }

     

     load.loading::before {

       content: "\e67a";

       animation: icon-spin 2s infinite linear;

     }

     

     load.loading::after {

       content: "加载中...";

     }

     

     load.over::before {

       content: "\e64a";

     }

     

     load.over::after {

       content: "没有更多了";

     }

     

     load.erro::before {

       content: "\e658";

     }

     

     load.erro::after {

       content: "加载失败";

     }

     

     load.load-icon::before {

       font-size: 16px;

     }

     

     load.load-icon::after {

       display: none;

     }

     

     load.load-icon.over {

       display: none;

     }

     

     /* ==================

               列表

      ==================== */

     

     .grayscale {

       filter: grayscale(1);

     }

     

     list.menu {

       padding: 0 15px;

       background: #fff;

       display: block;

     }

     

     list.menu.no-padding {

       padding: 0;

     }

     

     list.menu+list.menu {

       margin-top: 15px;

     }

     

     list+list {

       margin-top: 15px;

     }

     

     list.menu>item {

       position: relative;

       line-height: 18px;

       font-size: 16px;

       display: flex;

       justify-content: space-between;

       align-items: center;

       border-bottom: 1px solid #eee;

       min-height: 50px;

     }

     

     list.menu>item.cur {

       background-color: #fcf7e9;

     }

     

     list.menu>item:last-child {

       border: none;

     }

     

     list.menu.no-padding>item {

       padding: 15px;

     }

     

     list.menu-avatar.no-padding>item {

       padding-left: 70px;

     }

     

     list.menu-avatar.no-padding>item avatar {

       left: 15px;

     }

     

     list.menu.no-padding>item.arrow {

       padding-right: 33px;

     }

     

     list.menu>item .content {

       line-height: 1.6em;

       flex: 1;

     }

     

     list.menu>item button.content {

       padding: 0;

       justify-content: flex-start;

       font-size: 16px;

     }

     

     list.menu>item button.content::after {

       display: none;

     }

     

     list.menu>item .content>text[class*="icon"], list.menu>item .content>image,

     list.menu>item .content>icon {

       margin-right: 5px;

       display: inline-block;

       width: 1.4em;

       height: 1.6em;

       vertical-align: middle;

       text-align: center;

     }

     

     list.menu>item .action {

       text-align: right;

     }

     

     list>item.grayscale {

       background-color: #f5f5f5;

     }

     

     list.menu>item .action tag:empty {

       right: 5px;

     }

     

     list.menu>item.arrow {

       padding-right: 18px;

     }

     

     list.menu>item.arrow::after {

       font-family: "iconfont" !important;

       display: block;

       content: "\e6a3";

       position: absolute;

       font-size: 17px;

       color: #aaa;

       line-height: 15px;

       height: 15px;

       width: 15px;

       text-align: center;

       top: 1px;

       bottom: 0;

       right: 0;

       margin: auto;

     }

     

     list.menu.no-padding>item.arrow::after {

       right: 15px;

     }

     

     list.menu>item avatar-group avatar {

       border-color: #fff;

     }

     

     list.card-menu {

       margin-left: 15px;

       margin-right: 15px;

       border-radius: 10px;

       overflow: hidden;

     }

     

     list.menu-avatar>item>avatar {

       position: absolute;

       left: 0;

     }

     

     list.menu-avatar>item {

       padding-left: 55px;

       height: 70px;

     }

     

     list.menu>item .content tag.sm {

       font-size: 8px;

       line-height: 80%;

       padding: 4px 3px 2px;

       margin-top: -3px;

     }

     

     list.grid {

       text-align: center;

       background: #fff;

     }

     

     list.grid>item {

       display: flex;

       flex-direction: column;

       border-right: 1rpx solid #eee;

       border-bottom: 1rpx solid #eee;

       padding: 10px;

     }

     

     list.grid>item icon {

       display: block;

       width: 100%;

       position: relative;

       font-size: 24px;

       margin-top: 10px;

     }

     

     list.grid>item text {

       display: block;

       color: #888;

       margin-top: 5px;

       line-height: 20px;

       font-size: 13px;

     }

     

     list.grid>item tag {

       left: 50%;

       right: auto;

       margin-left: 10px;

     }

     

     list.grid.col-3>item:nth-child(3n) {

       border-right: 0px;

     }

     

     list.grid.col-4>item:nth-child(4n) {

       border-right: 0px;

     }

     

     list.grid.col-5>item:nth-child(5n) {

       border-right: 0px;

     }

     

     list.grid.no-border {

       padding: 10px 5px;

     }

     

     list.grid.no-border>item {

       border: none !important;

       padding-top: 5px;

       padding-bottom: 5px;

     }

     

     list.menu-avatar.comment > item {

       height: auto;

       padding-top: 15px;

       padding-bottom: 15px;

       padding-left: 45px;

     }

     

     list.menu-avatar.comment  avatar {

       align-self: flex-start;

     }

     

     /* ==================

               操作条

      ==================== */

     

     bar {

       display: flex;

       position: relative;

       align-items: center;

       background: #fff;

       height: 50px;

       justify-content: space-between;

       font-size: 16px;

     }

     

     bar .action {

       display: flex;

       align-items: center;

       height: 100%;

       justify-content: center;

       max-width: 100%;

     }

     

     bar .action:first-child {

       margin-left: 15px;

       font-size: 15px;

     }

     

     bar .action:first-child text {

       display: inline-block;

       text-overflow: ellipsis;

       white-space: nowrap;

       overflow: hidden;

       text-align: left;

       width: 100%;

     }

     

     bar avatar:first-child {

       margin-left: 10px;

     }

     

     bar .action:first-child >icon[class*="icon"] {

       margin-left: -0.5em;

     }

     

     bar .action:last-child {

       margin-right: 15px;

     }

     

     bar .action>icon[class*="icon"] {

       font-size: 18px;

       height: 100%;

       width: 1.4em;

     }

     

     bar .action>icon[class*="icon"]+icon[class*="icon"] {

       margin-left: 0.5em;

     }

     

     bar .content {

       position: absolute;

       text-align: center;

       width: 400rpx;

       left: 0;

       right: 0;

       bottom: 8px;

       margin: auto;

       height: 30px;

       font-size: 18px;

       line-height: 30px;

       cursor: none;

       pointer-events: none;

       text-overflow: ellipsis;

       white-space: nowrap;

       overflow: hidden;

     }

     

     bar.btn-group {

       justify-content: space-around;

     }

     

     bar.btn-group button {

       padding: 10px 16px;

     }

     

     bar.btn-group button {

       flex: 1;

       margin: 0 10px;

       max-width: 50%;

     }

     

     bar .serach-form {

       background: #f5f5f5;

       line-height: 32px;

       height: 32px;

       font-size: 12px;

       color: #666;

       flex: 1;

       display: flex;

       align-items: center;

       margin: 0 10px;

     }

     

     bar .serach-form +.action {

       margin-right: 10px;

     }

     

     bar .serach-form +.action text+icon {

       margin-right: -0.5em;

     }

     

     bar .serach-form input {

       flex: 1;

       padding-right: 10px;

       height: 32px;

       line-height: 32px;

       font-size: 13px;

     }

     

     bar .serach-form [class*="icon"] {

       width: 2em;

       height: auto;

     }

     

     bar .serach-form.round [class*="icon"] {

       margin-left: 0.5em;

     }

     

     bar .serach-form [class*="icon"]::before {

       top: 0px;

     }

     

     bar.fixed, .nav.fixed {

       position: fixed;

       width: 100%;

       top: 0;

       z-index: 1024;

       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     }

     

     bar.foot {

       position: fixed;

       width: 100%;

       bottom: 0;

       z-index: 1024;

       box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);

     }

     

     bar.shop {

       padding: 0;

     }

     

     bar.shop .action {

       font-size: 12px;

       position: relative;

       flex: 1;

       text-align: center;

       padding: 0 10px;

       display: block;

       height: auto !important;

       line-height: 1;

       margin: 0 !important;

     }

     

     bar.shop [class*="icon"] {

       width: 50px !important;

       position: relative;

       display: block;

       height: auto !important;

       margin: 0 auto 5px !important;

     }

     

     bar.shop .submit {

       align-items: center;

       display: flex;

       justify-content: center;

       text-align: center;

       position: relative;

       flex: 2;

       height: 100%;

     }

     

     bar.shop .submit:last-child {

       flex: 2.6;

     }

     

     bar.shop .submit+.submit {

       flex: 2;

     }

     

     bar.shop .submit button {

       margin-left: 10px;

     }

     

     bar.shop .submit:last-child button {

       margin-left: 0px;

     }

     

     bar.shop .submit+.submit button {

       margin-left: 0px;

       margin-right: 10px;

     }

     

     bar.shop .action::after {

       content: " ";

       width: 200%;

       height: 200%;

       position: absolute;

       top: 0;

       left: 0;

       transform: scale(0.5);

       transform-origin: 0 0;

       border-right: 1px solid rgba(0, 0, 0, 0.1);

     }

     

     bar.input {

       padding-right: 10px;

     }

     

     bar.input input {

       overflow: initial;

       line-height: 32px;

       height: 32px;

       min-height: 32px;

       flex: 1;

       font-size: 15px;

       margin: 0 10px;

     }

     

     bar.input .action {

       margin-left: 10px;

     }

     

     bar.input .action [class*="icon"] {

       font-size: 24px;

     }

     

     bar.input input+.action {

       margin-right: 10px;

       margin-left: 0px;

     }

     

     bar.input .action:first-child [class*="icon"] {

       margin-left: 0px;

     }

     

     custom {

       display: block;

       position: relative;

     }

     

     custom bar {

       padding-right: 110px;

       box-shadow: 0px 0px 0px !important;

     }

     

     /* ==================

              导航栏

      ==================== */

     

     .nav {

       white-space: nowrap;

     }

     

/*     ::-webkit-scrollbar {

       display: none;

     }
*/
     

     .nav item {

       height: 45px;

       display: inline-block;

       line-height: 45px;

       margin: 0 5px;

       padding: 0 10px;

     }

     

     .nav item.cur {

       border-bottom: 2px solid;

     }

     

     /* ==================

              时间轴

      ==================== */

     

     timeline {

       display: block;

       background: #fff;

     }

     

     timeline time {

       width: 60px;

       text-align: center;

       padding: 10px 0;

       font-size: 13px;

       color: #888;

       display: block;

     }

     

     timeline>item {

       padding: 15px 15px 15px 60px;

       position: relative;

       display: block;

       color: #ccc;

       z-index: 0;

     }

     

     timeline>item::after {

       content: "";

       display: block;

       position: absolute;

       width: 1rpx;

       background: #ddd;

       left: 30px;

       height: 100%;

       top: 0;

       z-index: 8;

     }

     

     timeline>item::before {

       font-family: "iconfont";

       content: "\e763";

       display: block;

       position: absolute;

       top: 18px;

       z-index: 9;

       background: #fff;

       width: 25px;

       height: 25px;

       text-align: center;

       border: none;

       line-height: 25px;

       left: 18px;

     }

     

     timeline>item[class*="icon"]::before {

       background: #fff;

       width: 25px;

       height: 25px;

       text-align: center;

       border: none;

       line-height: 25px;

       left: 18px;

     }

     

     timeline>item>.content {

       background: #f1f1f1;

       padding: 15px;

       border-radius: 3px;

       display: block;

       color: #666;

     }

     

     timeline>item>.content+.content {

       margin-top: 10px;

     }

     

     /* ==================

              聊天

      ==================== */

     

     chat {

       display: flex;

       flex-direction: column;

     }

     

     chat item {

       display: flex;

       padding: 15px 15px 35px;

       position: relative;

     }

     

     chat item>avatar {

       width: 40px;

       height: 40px;

     }

     

     chat item>.main {

       max-width: calc(100% - 130px);

       margin: 0 20px;

       display: flex;

       align-items: center;

     }

     

     chat item>image {

       height: 160px;

     }

     

     chat item>.main .content {

       background: #fff;

       padding: 10px;

       border-radius: 3px;

       display: inline-flex;

       max-width: 100%;

       align-items: center;

       color: #666;

       font-size: 15px;

       position: relative;

       min-height: 40px;

       line-height: 20px;

       text-align: left;

     }

     

     chat item .date {

       position: absolute;

       font-size: 12px;

       color: #aaa;

       width: calc(100% - 160px);

       bottom: 10px;

       left: 80px;

     }

     

     chat item .action {

       padding: 0 15px;

       display: flex;

       align-items: center;

     }

     

     chat item>.main .content::after {

       content: "";

       top: 12px;

       transform: rotate(180deg);

       position: absolute;

       z-index: 100;

       display: inline-block;

       width: 0;

       height: 0;

       vertical-align: middle;

       border-bottom: 8px solid transparent;

       border-top: 8px solid transparent;

       overflow: hidden;

       border-right-color: #fff;

       border-left: 8px solid #333;

       border-right: 0 dotted;

       border-left-color: #fff;

       left: -7px;

       right: initial;

     }

     

     chat item.self {

       justify-content: flex-end;

       text-align: right;

     }

     

     chat item.self>.main .content::after {

       left: auto;

       right: -7px;

       border-right: 8px solid #fff;

       border-left: 0 dotted;

     }

     

     chat item.self>.main .bg-green.content::after {

       border-right-color: #39b50a;

     }

     

     chat info {

       display: inline-block;

       margin: 10px auto;

       font-size: 12px;

       padding: 4px 6px;

       background-color: rgba(0, 0, 0, 0.2);

       border-radius: 3px;

       color: #fff;

       max-width: 400rpx;

       line-height: 1.4;

     }

     

     /* ==================

              卡片

      ==================== */

     

     card {

       display: block;

       overflow: hidden;

     }

     

     card > item {

       display: block;

       background: #fff;

       overflow: hidden;

       border-radius: 5px;

       margin: 15px;

     }

     

     card > item.shadow-blur {

       overflow: initial;

     }

     

     card.no-card > item {

       margin: 0px;

       border-radius: 0px;

     }

     

     card.case .image {

       position: relative;

     }

     

     card.case .image image {

       width: 100%;

     }

     

     card.case .image tag {

       position: absolute;

       right: 0;

       top: 0;

     }

     

     card.case .image bar {

       position: absolute;

       bottom: 0;

       width: 100%;

       background-color: transparent;

       padding: 0px 15px;

       word-wrap: normal;

       text-overflow: ellipsis;

       white-space: nowrap;

     }

     

     card.case.no-card .image {

       margin: 15px 15px 0;

       overflow: hidden;

       border-radius: 5px;

     }

     

     card.dynamic {

       display: block;

     }

     

     card.dynamic>item {

       display: block;

       background-color: #fff;

       overflow: hidden;

     }

     

     card.dynamic>item > .text-content {

       padding: 0 15px 0;

       max-height: 6.4em;

       overflow: hidden;

       font-size: 15px;

       margin-bottom: 10px;

     }

     

     card.dynamic>item .square-img {

       width: 100%;

       height: 100px;

       border-radius: 3px;

     }

     

     card.dynamic>item .only-img {

       width: 100%;

       height: 160px;

       border-radius: 3px;

     }

     

     /* card.dynamic>item .comment {

       padding: 10px;

       background: #f1f1f1;

       margin: 0 15px 15px;

       border-radius: 3px;

     } */

     

     card.article {

       display: block;

     }

     

     card.article>item {

       padding-bottom: 15px;

     }

     

     card.article>item .title {

       font-size: 15px;

       font-weight: 900;

       word-wrap: normal;

       text-overflow: ellipsis;

       white-space: nowrap;

       color: #333;

       line-height: 50px;

       padding: 0 15px;

     }

     

     card.article>item .content {

       display: flex;

       padding: 0 15px;

     }

     

     card.article>item .content > image {

       width: 120px;

       height: 6.4em;

       margin-right: 10px;

       border-radius: 3px;

     }

     

     card.article>item .content .desc {

       flex: 1;

       width: 500rpx;

       display: flex;

       flex-direction: column;

       justify-content: space-between;

     }

     

     card.article>item .content .text-content {

       font-size: 14px;

       color: #888;

       height: 4.8em;

       overflow: hidden;

     }

     

     /* ==================

              表单

      ==================== */

     

     form-group {

       background: #fff;

       padding: 0 15px;

       display: flex;

       align-items: center;

       min-height: 100rpx;

       justify-content: space-between;

     }

     

     form-group + form-group {

       border-top: 1rpx solid #eee;

     }

     

     form-group .title {

       text-align: justify;

       padding-right: 15px;

       font-size: 15px;

       position: relative;

       height: 30px;

       line-height: 30px;

     }

     

     form-group.top {

       align-items: baseline;

     }

     

     form-group input {

       flex: 1;

       font-size: 15px;

       color: #555;

       padding-right: 10px;

     }

     

     form-group > icon[class*="icon-"] {

       font-size: 18px;

       padding: 0;

       box-sizing: border-box;

     }

     

     form-group textarea, form-group textarea textarea {

       margin: 16px 0 15px;

       height: 4.8em;

       width: 100%;

       line-height: 1.2em;

       flex: 1;

       font-size: 14px;

       padding: 0;

       box-sizing: content-box;

       display: inline-block;

       vertical-align: top;

     }

     

     form-group textarea::after {

       content: "测试文字";

       opacity: 0;

     }

     

     form-group .grid-square {

       margin: 15px 0 0 !important;

     }

     

     form-group picker {

       flex: 1;

       padding-right: 20px;

       overflow: hidden;

       position: relative;

     }

     

     form-group picker .picker {

       line-height: 50px;

       font-size: 14px;

       text-overflow: ellipsis;

       white-space: nowrap;

       overflow: hidden;

       width: 100%;

       text-align: right;

     }

     

     form-group picker::after {

       font-family: iconfont !important;

       display: block;

       content: "\e6a3";

       position: absolute;

       font-size: 17px;

       color: #aaa;

       line-height: 50px;

       width: 30px;

       text-align: center;

       top: 0;

       bottom: 0;

       right: -10px;

       margin: auto;

     }

     

     form-group textarea[disabled], form-group textarea[disabled] .placeholder {

       color: transparent;

     }

     

     /* ==================

              模态窗口

      ==================== */

     

     modal-box {

       position: fixed;

       top: 0;

       right: 0;

       bottom: 0;

       left: 0;

       z-index: 1110;

       opacity: 0;

       outline: 0;

       text-align: center;

       -ms-transform: scale(1.185);

       transform: scale(1.185);

       backface-visibility: hidden;

       perspective: 1000px;

       background: rgba(0, 0, 0, 0.6);

       transition: all 0.6s ease-in-out 0;

       pointer-events: none;

     }

     

     modal-box::before {

       content: "\200B";

       display: inline-block;

       height: 100%;

       vertical-align: middle;

     }

     

     modal-box.show {

       opacity: 1;

       transition-duration: 0.3s;

       -ms-transform: scale(1);

       transform: scale(1);

       overflow-x: hidden;

       overflow-y: auto;

       pointer-events: auto;

     }

     

     dialog {

       position: relative;

       display: inline-block;

       vertical-align: middle;

       margin-left: auto;

       margin-right: auto;

       width: 680rpx;

       max-width: 100%;

       background: #f8f8f8;

       border-radius: 10rpx;

       overflow: hidden;

     }

     

     modal-box.bottom-modal::before {

       vertical-align: bottom;

     }

     

     modal-box.bottom-modal dialog {

       width: 100%;

       border-radius: 0;

     }

     

     modal-box.bottom-modal {

       margin-bottom: -500px;

     }

     

     modal-box.bottom-modal.show {

       margin-bottom: 0;

     }

     

     /* ==================

              轮播

      ==================== */

     

     swiper.square-dot .wx-swiper-dot {

       background: #fff;

       opacity: 0.4;

       width: 5px !important;

       height: 5px !important;

       border-radius: 10px !important;

       transition: all 0.3s ease-in-out 0s !important;

     }

     

     swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {

       opacity: 1;

       width: 15px !important;

     }

     

     swiper.round-dot .wx-swiper-dot {

       /* background: #39b54a; */

       width: 5px !important;

       height: 5px !important;

       top: -2px !important;

       transition: all 0.3s ease-in-out 0s !important;

       position: relative;

     }

     

     swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {

       content: "";

       position: absolute;

       width: 5px;

       height: 5px;

       top: 0px;

       left: 0px;

       right: 0;

       bottom: 0;

       margin: auto;

       background: #fff;

       border-radius: 10px;

     }

     

     swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {

       width: 9px !important;

       height: 9px !important;

       top: 0px !important;

     }

     

     .screen-swiper {

       min-height: 500rpx;

     }

     

     .screen-swiper image {

       width: 100%;

       display: block;

       height: 100%;

       margin: 0;

     }

     

     .card-swiper {

       height: 420rpx;

     }

     

     .card-swiper swiper-item {

       width: 610rpx !important;

       left: 70rpx !important;

       box-sizing: border-box;

       padding: 20px 0px 35px;

       overflow: initial !important;

     }

     

     .card-swiper swiper-item .bg-img {

       width: 100%;

       display: block;

       height: 100%;

       border-radius: 5px;

       transform: scale(0.9);

       transition: all 0.2s ease-in 0s;

     }

     

     .card-swiper swiper-item.cur .bg-img {

       transform: none;

       transition: all 0.2s ease-in 0s;

     }

     

     .tower-swiper {

       height: 420rpx;

       position: relative;

     }

     

     .tower-swiper .tower-item {

       position: absolute;

       width: 300rpx;

       height: 380rpx;

       top: 0;

       bottom: 0;

       left:50%;

       margin: auto;

       transition: all 0.3s ease-in 0s;

       opacity: 1;

     }

     .tower-swiper .tower-item.none {

       opacity: 0;

     }

     

     .tower-swiper .tower-item .bg-img {

       width: 100%;

       height: 100%;

       border-radius: 3px;

     }