@charset "utf-8";
*{ -webkit-box-sizing:border-box; box-sizing:border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,th,td,pre,code,form,fieldset,legend,input,textarea,blockquote,figure,button{ margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,main,nav,section,summary { display:block; }
html{-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body{ font: 14px/1.8 Tahoma, Verdana, Arial, Roboto, "Helvetica Neue", Helvetica,Arial, 'Microsoft Yahei', sans-serif; color: #6A6A6A; background: #EDF7FB;}
button,input,select,textarea{ font:inherit; color:#000; line-height: 1.8; border: 0;outline: 0;}
input[type="text"],input[type="password"],input[type="tel"],input[type="email"]{padding-left: 5px;}
audio,canvas,progress,video{ display:inline-block; vertical-align:baseline; }
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
ol,ul,li{ list-style:none;}
table{ border-collapse:collapse; border-spacing:0;}
sup,sub{ font-size:100%; vertical-align:baseline;}
a,a:active{ outline:none;}
i,em{ font-style:normal; }
a,del,ins,s,u{ text-decoration:none;}
fieldset,img,acronym{ border:0;}
img,acronym,input,textarea,iframe,button{ vertical-align:middle;}
input,button,textarea,select,optgroup,option{ resize:none; outline:none;}
html,body,a,button,input,li,div,span,section{ -webkit-tap-highlight-color:transparent;}
img{ max-width: 100%; vertical-align: middle;}
a,img{ -webkit-touch-callout: none;}
a,button{ cursor:pointer;}
input,textarea,select{-webkit-appearance: none; font-weight: normal;}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0 200px white inset;}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #A5A5A5; font-weight: normal; font-size: 16px;
}
textarea::-moz-placeholder,
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #A5A5A5; font-weight: normal; font-size: 16px;
}
textarea::-moz-placeholder,
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #A5A5A5; font-weight: normal; font-size: 16px;
}
textarea::-ms-input-placeholder,
input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #A5A5A5; font-weight: normal; font-size: 16px;
}


/*公共*/
body{ background: linear-gradient(180deg, #D2E8F1 0%, #EDF7FB 100%); min-height: 100vh;}
.is-hide{ display: none;}
.is-show{ display: block;}
.x-content{ max-width: 1214px; padding: 0 20px; margin: 0 auto;}
.flex{ display: flex; align-items: center;}
.flex.justify{ justify-content: center; text-align: center;}
.line-clamp-1,
.line-clamp-2,
.line-clamp-3{ text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.line-clamp-1{ -webkit-line-clamp: 1;}
.line-clamp-2{ -webkit-line-clamp: 2;}
.line-clamp-3{ -webkit-line-clamp: 3;}
.x-card{ border-radius: 6px; overflow: hidden; background-color: #fff; box-shadow: 0 4px 12px 0 rgba(50, 164, 221, 0.25), 0 4px 12px 0 rgba(59, 163, 215, 0.1);}
.x-grid{ display: grid;}
.x-grid.span-1{ grid-template-columns: repeat(1, minmax(0px, 1fr));}
.x-grid.span-2{ grid-template-columns: repeat(2, minmax(0px, 1fr));}
.x-grid.span-3{ grid-template-columns: repeat(3, minmax(0px, 1fr));}
.x-grid.span-4{ grid-template-columns: repeat(4, minmax(0px, 1fr));}
.x-grid.span-5{ grid-template-columns: repeat(5, minmax(0px, 1fr));}
.x-grid.span-6{ grid-template-columns: repeat(6, minmax(0px, 1fr));}

/*用户*/
.x-user .avatar{ width: 70px; height: 70px; display: inline-block; border-radius: 50%; vertical-align: middle; overflow: hidden;}
.x-user dl{ padding: 12px 0 7px;}
.x-user dt{ font-size: 14px; color: #333333; font-weight: bold;}
.x-user dd{ font-size: 12px; color: #787878; word-break: break-all;}
.x-user .count{ color: #BC4A4A; font-size: 14px; line-height: 1;}
.x-user .count:before{ content: ''; width: 16px; height: 16px; background: url('../images/icon-06.png') no-repeat; background-size: cover;}

/*图片*/
.x-image{ overflow: hidden;}
.x-image img{ transition: .5s;}
.x-image:hover img{ transform: scale(1.1);}

/*标签页*/
.x-tabs{ height: 54px; display: flex; align-items: flex-end; position: relative; font-size: 16px;}
.x-tabs ul{ flex: 1; padding: 13px 10px 0;}
.x-tabs li{ text-align: center; position: relative; padding-bottom: 6px; cursor: pointer;}
.x-tabs li.active a{ color: #005CA2;}
.x-tabs li.active:after{ content: ''; position: absolute; width: 14px; height: 3px; background-color: #2070AD; border-radius: 2px; bottom: 0; left: 50%; transform: translate3d(-50%, 0, 0);}
.x-tabs a{ color: #3A3A3A; padding: 0 20px; transition: .3s;}
.x-tabs a:hover{ color: #005CA2;}

/*主要内容块*/
.x-primary{ margin-bottom: 24px; background-color: #fff; display: flex;}
.x-primary .tools{ width: 162px; color: #6A6A6A; padding: 20px 0; display: flex; flex-direction: column; justify-content: center; text-align: center;}
.x-primary .tools .time{ padding: 10px 0 30px;}
.x-primary .tools .time dd{ font-size: 50px; line-height: 1;}
.x-primary .tools .time dt{ font-size: 14px;}
.x-primary .tools ul{ flex: 1;}
.x-primary .tools li{ padding-bottom: 15px; line-height: 1;}
.x-primary .tools li .icon{ width: 50px; margin: 0 auto;}
.x-primary .tools li strong{ font-size: 12px; font-weight: normal;}
.x-primary .content{ flex: 1; overflow: hidden; padding-bottom: 20px;}
.x-primary .content .pic{ position: relative;}
.x-primary .content .pic img{ width: 100%;}
.x-primary .content .pic .view{ position: absolute; right: 20px; top: 15px; padding: 8px 14px; line-height: 1; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; border-radius: 20px;}
.x-primary .content .participants{ padding: 20px 0 10px; color: #252525; font-size: 14px;}
.x-primary .content .user{ position: relative; padding: 15px 10px; display: flex; align-items: center; width: 614px;}
.x-primary .content .user .next,
.x-primary .content .user .prev{ width: 16px; height: 32px; cursor: pointer; background: url('../images/icon-47.png') no-repeat; background-size: cover;}
.x-primary .content .user .next{ background-image: url('../images/icon-46.png');}
.x-primary .content .user .swiper-button-disabled{ opacity: .5;}
.x-primary .content .user .swiper{ flex: 1; width: 100%;}
.x-primary .content .x-user{ padding: 0 6px; color: #252525;}
.x-primary .content .x-user .avatar{ width: 40px; height: 40px; border: 2px solid #B4DAEF;}
.x-primary .content .x-user dl{ flex: 1; line-height: 1.2; padding: 0 0 0 8px;}
.x-primary .content .x-user dt{ font-size: 14px; font-weight: 500;}
.x-primary .content .x-user dd{ font-size: 12px;}
.x-primary .content .reason{ font-size: 12px;}
.x-primary .content .reason dt{ color: #A0A0A0;}
.x-primary .content .reason dd{ color: #6A6A6A; line-height: 1.4;}
.x-primary.is-grateful .user{ background-color: #FFF3E7;}
.x-primary.is-contribute .user{ background-color: #EBF9FF;}

/*分页*/
.x-pagination { padding: 30px 0; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center; justify-content: center;}
.x-pagination ul {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.x-pagination li {margin-right: 10px;}
.x-pagination span,
.x-pagination a { display: inline-block; border-radius: 3px; height: 27px;line-height: 27px; padding: 0 10px;color: #005CA2;background-color: #D4EDF6;}
.x-pagination a:hover {color: #0066CC; opacity: .9;}
.x-pagination span{ color: rgba(0, 92, 162, 0.4);}
.x-pagination .active span,
.x-pagination .active a {color: #fff;background-color: #0066CC;}
.x-pagination .count {color: #666;font-size: 13px;}

/*按钮*/
.x-button{ border: 0; font-size: 16px; color: #fff; white-space: nowrap; background-color: #1B6DAB; border-radius: 3px; padding: 10px 15px; min-width: 135px; text-align: center; line-height: 1; cursor: pointer;}
.x-button:active{ opacity: .95;}
.x-button.is-error{ background-color: #BC4A4A;}
.x-button + .x-button{ margin-left: 10px;}
.x-button.is-plain{ background-color: transparent; color: #005CA2; border: 1px solid #005CA2;}
.x-button.is-disabled{ background: #aaa;}
.x-button.is-disabled:active{ opacity: 1;}

/*输入框*/
.x-input{ position: relative;}
.x-input textarea,
.x-input input{ height: 42px; padding: 8px 12px; border: 1px solid #F7F7F7; background-color: #F7F7F7; border-radius: 6px; width: 100%; transition: .3s;}
.x-input textarea{ height: 150px;}
.x-input textarea:focus,
.x-input textarea:hover,
.x-input input:focus,
.x-input input:hover{ border-color: rgba(0, 92, 162, 0.3);}
.x-input.is-prefix input{ padding-left: 46px;}
.x-input.is-suffix .suffix-icon,
.x-input.is-prefix .prefix-icon{ position: absolute; width: 24px; height: 24px; left: 14px; top: 10px; display: flex; align-items: center;}
.x-input.is-suffix input{ padding-right: 46px;}
.x-input.is-suffix .suffix-icon{ left: auto; right: 14px;}
.x-input.is-error input{ border-color: #BC4A4A; color: #BC4A4A;}

/*选择框*/
.x-select{ width: 100%; border: 1px solid #F7F7F7; background-color: #F7F7F7; height: 42px; display: flex; align-items: center; cursor: pointer; border-radius: 6px; padding-right: 15px; position: relative;}
.x-select:after{ content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #005CA2;}
.x-select select,
.x-select .option,
.x-select .placeholder{ padding: 8px 12px; color: #333344; flex: 1; background: transparent;}
.x-select .placeholder{ color: #9C9C9C;}
.x-select + .x-select{ margin-left: 13px;}

/*复选框*/
.x-checkbox{ width: 22px; height: 22px; display: inline-block; background: url('../images/icon-36.png') no-repeat transparent; border-radius: 50%; background-size: cover; cursor: pointer;}
.x-checkbox:checked{ background-image: url('../images/icon-37.png');}

/*上传*/
.x-upload{ width: 300px; height: 140px; background-color: #F7F7F7; border-radius: 6px; overflow: hidden;}
.x-upload dl{ cursor: pointer; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column;}
.x-upload dl:before{ content: ''; width: 28px; height: 28px; border: 0; background: url('../images/icon-31.png') no-repeat; background-size: cover; overflow: hidden; text-indent: -88em;}
.x-upload dt{ color: #005CA2; font-size: 14px; padding-top: 5px;}
.x-upload .pic{ position: relative;}
.x-upload .pic .close{ width: 30px; height: 30px; background: url('../images/icon-32.png') no-repeat rgba(0, 0, 0, 0.7); background-size: cover; border-radius: 50%; position: absolute; right: 10px; top: 10px; cursor: pointer; overflow: hidden; text-indent: -88em;}


/*表单*/
.x-form{}
.x-form-item{ padding-bottom: 24px; display: flex;}
.x-form-item-content{ flex: 1; padding-left: 24px; position: relative;}
.x-form-item .label{ font-size: 16px; height: 42px; line-height: 42px; color: #333344; width: 7em; text-align: right;}
.x-form-item-error{ position: absolute; bottom: -24px; line-height: 1; font-size: 13px; color: #BC4A4A;}

/*标签*/
.x-tag{ display: inline-block; white-space: nowrap; border: 1px solid rgba(0, 92, 162, 0.3); border-radius: 30px; background-color: #fff; min-width: 60px; padding: 0 10px; font-size: 14px; color: #333344;}
.x-tag .is-close{ display: inline-block; width: 20px; height: 20px; background: url('../images/icon-33.png') no-repeat; background-size: cover; text-align: center; position: relative; cursor: pointer; vertical-align: middle; top: -1px; right: -5px;}
.x-tag + .x-tag{ margin-left: 5px;}

/*弹出层*/
.x-dialog{ position: fixed; width: 100%; height: 100vh; left: 0; top: 0; z-index: 9999; display: none;}
.x-dialog.is-show{ display: block;}
.x-dialog ._mask{ background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%;}
.x-dialog ._content{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); background: #fff; border-radius: 6px;}
.x-dialog ._close{ width: 48px; height: 48px; background: url('../images/icon-32.png') no-repeat; background-size: cover; position: absolute; left: 50%; bottom: -100px; cursor: pointer; transform: translate3d(-50%, -50%, 0); overflow: hidden; text-indent: -88em;}

/*用户选择*/
.x-select-user{ width: 800px;}
.x-select-user table{ width: 100%; font-size: 15px; border-radius: 6px 6px 0 0; overflow: hidden;}
.x-select-user .search{ padding-right: 20px;}
.x-select-user .search span{ flex: 1; padding-right: 20px;}
.x-select-user .search .x-input input{ border: 0; border-radius: 40px; background-color: #fff; padding-left: 20px;}
.x-select-user .suffix-icon{ cursor: pointer;}
.x-select-user thead tr{ height: 70px; background: url('../images/pic-010.jpg') no-repeat; background-size: cover; color: #333344;}
.x-select-user thead th{ text-align: left;}
.x-select-user td:first-child{ text-align: center; padding: 0 20px;}
.x-select-user tbody tr{ border-bottom: 1px solid #EDEDED;}
.x-select-user tbody td{ height: 50px;}
.x-select-user ._submit{ text-align: center; padding: 20px 0 30px;}
.x-select-user ._submit .x-button{ font-size: 18px; width: 220px; height: 45px;}
.x-select-user ._submit .x-button + .x-button{ margin-left: 54px;}

/*发送成功*/
.x-send-success{ width: 400px; text-align: center; padding: 30px 0;}
.x-send-success .pic{ width: 200px; margin: 0 auto;}
.x-send-success .title{ color: #005CA2; font-size: 20px; padding-top: 20px;}
.x-send-success dl{ text-align: center;}
.x-send-success dt{ color: #005CA2; font-size: 20px; padding-bottom: 10px;}
.x-send-success dd{ font-size: 16px; color: #6A6A6A;}

/*申请成功*/
.x-apply-success{ width: 400px; border-radius: 6px; overflow: hidden;}
.x-apply-success .pic{ height: 100px; background: url('../images/pic-014.jpg') no-repeat center top; background-size: cover;}
.x-apply-success dl{ padding: 30px 40px 50px;}
.x-apply-success dt{ text-align: center; color: #005CA2; font-size: 20px; padding-bottom: 10px;}
.x-apply-success dd{ font-size: 16px; color: #6A6A6A;}

/*敲黑板*/
.x-knock-blackboard{ width: 400px; border-radius: 6px; overflow: hidden;}
.x-knock-blackboard .pic{ height: 100px; background: url('../images/pic-020.jpg') no-repeat center top; background-size: cover;}
.x-knock-blackboard .text{ padding: 30px 40px 50px; text-align: justify; font-size: 16px;}

/*头部，导航*/
.x-header{ height: 88px; background-color: #fff;}
.x-header .fixed{ position: fixed; width: 100%; height: 88px; left: 0; top: 0; background-color: #fff; z-index: 99;}
.x-header .x-content{ flex: 1; font-size: 16px;}
.x-header .logo{ width: 160px; height: 60px; background: url('../images/logo.jpg') no-repeat; background-size: cover; overflow: hidden; text-indent: -88em;}
.x-header .logo a{ display: block; height: 100%;}
.x-header .nav{ flex: 1;}
.x-header .nav ul li{ padding: 0 35px;}
.x-header .nav ul li.active a{ color: #005CA2; font-weight: 500; padding: 10px 0; display: block;}
.x-header .nav ul li.active a:after{ background-color: #2070AD;}
.x-header .nav ul li:hover a{ color: #005CA2;}
.x-header .nav ul a{ color: #3A3A3A; font-weight: 400; padding-bottom: 10px; position: relative; transition: .3s;}
.x-header .nav ul a:after{ content: ''; position: absolute; width: 25px; height: 4px; border-radius: 2px; background-color: transparent; left: 50%; bottom: 0; transform: translate3d(-50%, 0, 0)}
.x-header .user .avatar{ width: 32px; height: 32px; margin-right: 13px; border-radius: 50%; overflow: hidden;}
.x-header .user a{ color: #3A3A3A;}

/*底部*/
.x-footer{ background: #005CA2; color: #fff;}
.x-footer .x-content{ position: relative; height: 144px; line-height: 1.3; font-size: 16px;}
.x-footer .x-content .mail{ position: absolute; left: 0; top: 30px; padding-left: 56px;}
.x-footer .x-content .mail:before{ content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: url('../images/icon-11.png') no-repeat; background-size: cover;}
.x-footer .x-content .code{ position: absolute; right: 0; top: 30px; display: flex;}
.x-footer .x-content .code dl{ text-align: right; padding-right: 16px;}
.x-footer .x-content .code img{ width: 90px; height: 90px;}
.x-footer .copyright{ text-align: center; height: 33px; line-height: 1; background: #004D87; color: #fff; font-size: 13px;}
.x-footer .copyright a{ color: #fff; padding: 0 5px;}

/*滚动公告*/
.x-placard{ width: 100%; height: 42px; overflow: hidden; position: relative; padding: 0 20px; background: linear-gradient(90deg, #C7EAF9 0%, #C9E9FB 100%);}
.x-placard:before{ content: ''; width: 24px; height: 24px; background: url('../images/icon-01.png') no-repeat; background-size: cover;}
.x-placard .swiper{ flex: 1; height: 42px; margin-left: 10px; color: #3F3F3F;}
.x-placard .swiper .swiper-slide{ line-height: 42px;}

/*登录*/
.m-login{ height: 100vh; background: url('/assets/images/pic-012.jpg') no-repeat center center; background-size: cover;}
.m-login .x-content{ background-color: #fff; overflow: hidden; height: 800px; width: 1180px; position: absolute; left: 50%; top: 50%; padding: 0; display: flex; transform: translate3d(-50%, -50%, 0); border-radius: 6px; box-shadow: 0 4px 12px 0 rgba(59, 163, 215, 0.1);}
.m-login .left{ position: relative; width: 670px; background: url('/assets/images/login-bg.jpg') no-repeat left top; background-size: cover;}
.m-login .left .logo{ position: absolute; left: 40px; top: 40px; width: 150px; height: 59px; background: url('../images/logo.png') no-repeat; background-size: cover; overflow: hidden; text-indent: -88em;}
.m-login .left .content{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0);}
.m-login .left .content dl{ color: #005CA2; white-space: nowrap; text-align: center; padding-bottom: 40px; position: relative;}
.m-login .left .content dl:after{ content: ''; position: absolute; width: 21px; height: 2px; background-color: #005CA2; left: 50%; bottom: 0; transform: translate3d(-50%, -50%, 0);}
.m-login .left .content dt{ font-size: 34px;}
.m-login .left .content dd{ font-size: 18px; text-transform: uppercase; font-weight: 300; font-family: '黑体'}
.m-login .left .content ul{ display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding-top: 40px;}
.m-login .left .content li{ flex: 1; }
.m-login .left .content li em{ margin: 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; width: 70px; height: 70px; background-color: #005CA2; border-radius: 50%; border: 3px solid #71ACDA;}
.m-login .left .copyright{ position: absolute; left: 40px; bottom: 20px; color: #005CA2;}
.m-login .left .copyright a{ color: #005CA2; font-size: 13px;}
.m-login .right{ flex: 1; display: flex; align-items: center; justify-content: center;}
.m-login .right .content{ width: 320px;}
.m-login .right .content .title{ text-align: center; font-size: 20px; color: #333344;}
.m-login .right .content .x-form{ padding: 32px 0;}
.m-login .right .content .x-form-item{ display: block;}
.m-login .right .content .code{ display: flex;}
.m-login .right .content .code .x-button{ font-size: 14px; min-width: 90px; margin-left: 10px;}
.m-login .right .content .submit{ padding-top: 20px;}
.m-login .right .content .submit .x-button{ width: 100%; height: 46px; border-radius: 40px;}
.m-login .right .content .tools{ display: flex;}
.m-login .right .content .tools a{ color: #6A6A6A;}
.m-login .right .content .tools .bind{ flex: 1px; text-align: right;}
.m-login .right .content .tools .bind a{ color: #51B2E2}

/*首页*/
.m-home{}
.m-home-banner .swiper{ height: 544px;}
.m-home-banner .swiper-slide{ background: no-repeat center center; background-size: cover;}
.m-home-content .x-content{ padding-top: 52px; padding-bottom: 52px; overflow: hidden;}
.m-home-content .left{ width: 776px; float: left;}
.m-home-content .help-banner{ overflow: hidden; margin-bottom: 24px;}
.m-home-content .help-banner a{ display: block;}
.m-home-content .x-placard{ margin-bottom: 24px;}

.m-home-star{ margin-bottom: 24px; gap: 24px;}
.m-home-star .x-card{ width: 376px; height: 248px; display: flex; align-items: center; flex-direction: column;}
.m-home-star .is-grateful{ float: left; background: url('../images/pic-002.jpg') no-repeat #F6E9DA; background-size: cover;}
.m-home-star .is-contribute{ float: right; background: url('../images/pic-003.jpg') no-repeat #D1EBFB; background-size: cover;}
.m-home-star .is-contribute .count:before{ background-image: url('../images/icon-07.png');}
.m-home-star .x-card .title{ height: 50px; line-height: 50px; color: #3F3F3F; font-size: 18px; font-weight: bold; padding: 0 18px; width: 100%; text-align: left;}
.m-home-star .x-card ul{ flex: 1; gap: 20px; padding: 0 20px; width: 100%;}
.m-home-star .x-card li{ display: flex; align-items: center; justify-content: center; text-align: center;}

/*送卡*/
.m-deliver{ gap: 24px; margin-bottom: 24px;}
.m-deliver a{ display: block; position: relative; border-radius: 6px; overflow: hidden;}
.m-deliver img{ width: 100%;}
.m-deliver .x-button{ position: absolute; bottom: 30px; right: 25px;}
.m-deliver .x-card:hover .x-button{ animation: breathe .8s infinite alternate; }

.m-home-content .right{ width: 376px; float: right;}
.x-home-login{ height: 252px; margin-bottom: 24px; background: url(../images/pic-001.png) no-repeat; background-size: cover; flex-direction: column;}
.x-home-login dt{ font-size: 16px; }
.x-home-login dd{ font-size: 14px; }
.x-home-login .info{ padding-top: 10px;}
.x-home-login .info li{ flex: 1;}
.x-home-login .info em{ display: flex; align-items: center; justify-content: center;}
.x-home-login .info em:before{ content: ''; width: 18px; height: 18px; background: url('../images/icon-24.png') no-repeat; background-size: cover; margin-right: 5px;}
.x-home-login .info .gold em:before{ background-image: url('../images/icon-45.png');}

/*感恩*/
.m-home-content.m-grateful .x-tabs{ margin-bottom: 24px; font-size: 18px;}
.m-contribute-header{margin-bottom: 24px;}
.m-contribute-header .x-tabs{ font-size: 18px;}
.m-contribute-header .m-content-type{ padding: 15px 40px; position: relative;}
.m-contribute-header .m-content-type:before{ content: ''; left: 0; top: 0; position: absolute; width: 100%; height: 50px; background: linear-gradient(180deg, #D9EFFF 0%, #FFFFFF 100%); opacity: .4;}
.m-contribute-header .m-content-type ul{ position: relative;}
.m-contribute-header .m-content-type li{ width: 90px; min-height: 90px; border-radius: 6px; overflow: hidden; position: relative;}
.m-contribute-header .m-content-type dl{ transition: .3s; position: relative; padding: 10px 0; color: #787878; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer;}
.m-contribute-header .m-content-type dl:before{ content: ''; width: 50px; height: 50px; display: block; background: no-repeat center center; background-size: cover;}
.m-contribute-header .m-content-type .item-1:before{ background-image: url('../images/icon-39.png');}
.m-contribute-header .m-content-type .item-2:before{ background-image: url('../images/icon-40.png');}
.m-contribute-header .m-content-type .item-3:before{ background-image: url('../images/icon-41.png');}
.m-contribute-header .m-content-type .item-4:before{ background-image: url('../images/icon-42.png');}
.m-contribute-header .m-content-type .item-5:before{ background-image: url('../images/icon-43.png');}
.m-contribute-header .m-content-type .item-6:before{ background-image: url('../images/icon-44.png');}
.m-contribute-header .m-content-type li.active dl,
.m-contribute-header .m-content-type li:hover dl{ background-color: #E8F9FF; color: #2070AD;}
.m-contribute-header .m-content-type li.active .item-1:before,
.m-contribute-header .m-content-type li:hover .item-1:before{ background-image: url('../images/icon-38.png');}
.m-contribute-header .m-content-type li.active .item-2:before,
.m-contribute-header .m-content-type li:hover .item-2:before{ background-image: url('../images/icon-13.png');}
.m-contribute-header .m-content-type li.active .item-3:before,
.m-contribute-header .m-content-type li:hover .item-3:before{ background-image: url('../images/icon-14.png');}
.m-contribute-header .m-content-type li.active .item-4:before,
.m-contribute-header .m-content-type li:hover .item-4:before{ background-image: url('../images/icon-15.png');}
.m-contribute-header .m-content-type li.active .item-5:before,
.m-contribute-header .m-content-type li:hover .item-5:before{ background-image: url('../images/icon-16.png');}
.m-contribute-header .m-content-type li.active .item-6:before,
.m-contribute-header .m-content-type li:hover .item-6:before{ background-image: url('../images/icon-17.png');}

/*排行榜*/
.m-bulletin,
.m-ranking{ margin-bottom: 24px; min-height: 100px;}
.m-bulletin .title,
.m-ranking .title{ display: flex; align-items: center; height: 50px; padding: 0 20px;}
.m-ranking .title{ height: 70px;}
.m-bulletin .title:before,
.m-ranking .title:before{ content: ''; width: 32px; height: 32px; background: no-repeat center center; background-size: cover;}
.m-bulletin .title:before{ background-image: url('../images/icon-08.png');}
.m-bulletin.is-grateful .title,
.m-ranking.is-grateful .title{ background: linear-gradient(180deg, #FFF4EC 0%, #FFFFFF 100%);}
.m-bulletin.is-contribute .title,
.m-ranking.is-contribute .title{ background: linear-gradient(180deg, #D9EFFF 0%, #FFFFFF 100%);}
.m-ranking.is-grateful .title:before{ background-image: url('../images/icon-02.png');}
.m-ranking.is-contribute .title:before{ background-image: url('../images/icon-09.png');}
.m-bulletin .title strong,
.m-ranking .title strong{ font-size: 18px; color: #3F3F3F; padding: 0 8px; flex: 1;}
.m-ranking .title .change{ position: relative; border: 1px solid #005CA2; display: flex; align-items: center; border-radius: 3px; padding: 0 10px;}
.m-ranking .title .change:after{ content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #005CA2;}
.m-ranking .title select{ color: #005CA2; background: transparent; flex: 1; padding-right: 5px;}
.m-ranking .list{ padding: 0 20px 20px; font-size: 14px;}
.m-ranking .list ul{ color: #9C9C9C;}
.m-ranking .list ol{ color: #6A6A6A;}
.m-ranking .list ul,
.m-ranking .list ol{ display: flex; align-items: center;}
.m-ranking .list ol li:first-child{ font-size: 12px; font-weight: bold;}
.m-ranking .list ul li:first-child,
.m-ranking .list ol li:first-child{ flex: inherit; width: 60px; padding-right: 20px; text-align: center;}
.m-ranking .list ul li:last-child,
.m-ranking .list ol li:last-child{ text-align: right;}
.m-ranking .list ol li:last-child{ color: #BC4A4A;}
.m-ranking .list li{ flex: 1; padding: 4px 0; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.m-ranking .list img{ width: 30px; height: 30px;}
.m-ranking .tags{ padding: 20px 20px 0; gap: 15px;}
.m-ranking .tags .x-tag{ cursor: pointer; min-width: 90px; height: 28px; line-height: 28px; color: #2070AD; text-align: center; margin-left: 0; background: rgba(32, 112, 173, 0.08); border: 0;}
.m-ranking .tags .x-tag.active{ color: #fff; background-color: #2070AD;}

/*公告*/
.m-bulletin .list{ padding: 0 20px 20px;}
.m-bulletin .list .swiper{ height: 340px;}
.m-bulletin .list .swiper-slide,
.m-bulletin .list li{ display: flex; align-items: center; padding: 4px 0;}
.m-bulletin .list .swiper-slide a,
.m-bulletin .list li a{ color: #6A6A6A; flex: 1; font-size: 14px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.m-bulletin .list .swiper-slide a:hover,
.m-bulletin .list li a:hover{ text-decoration: underline;}
.m-bulletin .list .swiper-slide time,
.m-bulletin .list li time{ text-align: right; font-size: 12px; color: #A0A0A0; padding-left: 15px;}

/*商城入口*/
.m-home-mall a{ display: block;}

/*个人中心*/
.x-others-banner{ background: url('../images/banner-03.jpg') no-repeat center top; background-size: cover; height: 350px;}
.x-others-banner.is-grateful{ background-image: url('../images/banner-06.jpg');}
.x-others-banner.is-contribute{ background-image: url('../images/banner-07.jpg');}
.x-others-banner.is-send{ background-image: url('../images/banner-08.jpg');}
/*个人中心-导航*/
.x-menu{ padding: 20px 0;}
.x-menu li a{ display: flex; font-size: 16px; border-left: 6px solid transparent; color: #3A3A3A; flex-direction: column; justify-content: center; text-align: center; align-items: center; padding: 15px 0; transition: .3s;}
.x-menu li a:hover{ background-color: rgba(50, 164, 221, 0.08);}
.x-menu li .icon{ width: 40px; height: 40px;}
.x-menu li.active a{ background-color: rgba(50, 164, 221, 0.08); border-left-color: #005CA2;}

.m-personal{ margin-top: -125px; padding-bottom: 50px;}
.m-personal .header{ height: 252px; background: url('../images/banner-04.jpg') no-repeat center top; background-size: cover; margin-bottom: 24px;}
.m-personal .header .column{ flex-direction: column; height: 100%; flex: 1;}
.m-personal .header .x-user{ flex: 1; width: 100%; padding: 0 50px;}
.m-personal .header .x-user .avatar{ width: 110px; height: 110px; border: 4px solid #B4DAEF;}
.m-personal .header .x-user dl{ flex: 1; padding-left: 28px;}
.m-personal .header .x-user dt{ font-size: 28px; display: flex; align-items: flex-end; line-height: 1;}
.m-personal .header .x-user dt strong{ padding-right: 20px;}
.m-personal .header .x-user .location{ font-size: 14px; font-weight: normal; display: flex; align-items: center;}
.m-personal .header .x-user .location:before{ content: ''; width: 16px; height: 16px; background: url('../images/icon-24.png') no-repeat; background-size: cover;}
.m-personal .header .x-user dd{ margin-top: 10px; }
.m-personal .header .x-user .logout{ padding-top: 10px;}
.m-personal .header .x-user .logout .x-button.is-plain{ font-size: 12px; border-radius: 30px; height: 30px; line-height: 28px; padding: 0 10px; min-width: 80px;}
.m-personal .header .x-placard{ background: linear-gradient(90deg, #DDF3FF 0%, rgba(228, 245, 255, 0) 100%);}
.m-personal .x-layout{ display: flex;}
.m-personal .x-layout-sider{ width: 276px; margin-right: 24px;}
.m-personal .visitor .title{ display: flex; align-items: center; height: 50px; padding: 0 20px; color: #3F3F3F; font-size: 18px;}
.m-personal .visitor .title strong{ flex: 1;}
.m-personal .visitor .list{ flex-wrap: wrap; position: relative; padding: 20px 10px;}
.m-personal.m-personal-my .visitor .x-tabs:before,
.m-personal .visitor .list:before{ content: ''; left: 0; top: 0; position: absolute; width: 100%; height: 50px; background: linear-gradient(180deg, #D9EFFF 0%, #FFFFFF 100%); opacity: .4;}
.m-personal .visitor .list .item{ position: relative; width: 50%; padding: 10px 25px; display: flex; align-items: center; justify-content: center; text-align: center;}
.m-personal .visitor .list .x-user{ flex: 1;}
.m-personal .x-layout-main{ flex: 1;}
.m-personal .x-layout-main .x-primary .user{ width: 712px;}
.m-personal .x-layout-main .n-text{ padding: 24px 0; font-size: 14px; color: #3F3F3F;}
.m-personal .x-layout-main .visitor-content .list{ display: flex; align-items: center; width: 874px;}
.m-personal .x-layout-main .visitor-content .list:before{ display: none;}
.m-personal .x-layout-main .visitor-content .next,
.m-personal .x-layout-main .visitor-content .prev{ width: 16px; height: 32px; cursor: pointer; background: url('../images/icon-47.png') no-repeat; background-size: cover;}
.m-personal .x-layout-main .visitor-content .next{ background-image: url('../images/icon-46.png');}
.m-personal .x-layout-main .visitor-content .swiper{ flex: 1; width: 100%;}
.m-personal .x-layout-main .visitor-content .swiper-slide{ text-align: center;}
.m-personal .x-layout-main .visitor-content .swiper-button-disabled{ opacity: .5;}

/*自己的主页*/
.m-personal-my .header{ display: flex;}
.m-personal-my .header .column{ flex: 1;}
.m-personal-my .header .balance{ min-width: 250px; background-color: #FFFFFF; position: relative;}
.m-personal-my .header .balance:before{ content: ''; position: absolute; bottom: 0; right: 10px; width: 150px; height: 150px; background: url('../images/icon-26.png') no-repeat; background-size: cover;}
.m-personal-my .header .balance dl{ color: #C39031; padding: 20px; position: relative;}
.m-personal-my .header .balance dt{ font-size: 16px; padding-bottom: 6px;}
.m-personal-my .header .balance dd{ font-weight: 400; font-size: 32px; display: flex; align-items: flex-end; line-height: 1;}
.m-personal-my .header .balance dd:after{ content: ''; width: 20px; height: 20px; margin-left: 5px; background: url('../images/icon-25.png') no-repeat; background-size: cover;}

/*我的账户*/
.m-account .balance{ padding: 40px 30px; border-bottom: 1px solid #EDEDED; color: #C39031;}
.m-account .balance dl{ flex: 1;}
.m-account .balance dt{ color: #3F3F3F; font-size: 18px; padding-bottom: 5px;}
.m-account .balance .count{ font-weight: 400; font-size: 60px; display: flex; align-items: flex-end; line-height: 1;}
.m-account .balance .count:after{ content: ''; width: 30px; height: 30px; margin-left: 5px; background: url('../images/icon-25.png') no-repeat; background-size: cover;}
.m-account .balance .tips{ color: #BC4A4A; padding-top: 20px;}
.m-account .table{ padding: 30px;}
.m-account .table h2{ font-size: 18px; color: #3F3F3F; padding-bottom: 15px;}
.m-account .table table{ width: 100%; font-size: 14px;}
.m-account .table thead{ height: 53px; background: url('../images/pic-010.jpg') no-repeat; background-size: cover; color: #005CA2;}
.m-account .table th{ text-align: left;}
.m-account .table th:first-child,
.m-account .table td:first-child{ text-align: center;}
.m-account .table tbody tr{ transition: .3s;}
.m-account .table tbody tr:hover{ background-color: #fafafa;}
.m-account .table td{ padding: 10px 0;}
.m-account .table td sup{ color: #BC4A4A;}
.m-account .table td sub{ color: #408C64;}
.m-account .table .more{ text-align: center; padding: 20px 0;}
.m-account .banner img{ width: 100%;}

/*专用账户，个人资料*/
.m-dedicated .x-form{ width: 600px;}
.m-dedicated .x-form .title{ color: #005CA2; font-size: 20px; text-align: center; padding: 50px 0;}
.m-dedicated .submit{ text-align: center; padding: 50px 0;}
.m-dedicated .submit .x-button{ font-size: 18px; width: 220px; height: 53px;}
.m-dedicated .submit .x-button + .x-button{ margin-left: 54px;}

/*发布*/
.x-input-push{ display: inline-block; padding: 10px 0;}
.x-input-push input{}
.x-input-push button{ width: 28px; height: 28px; border: 0; background: url('../images/icon-31.png') no-repeat; background-size: cover; overflow: hidden; text-indent: -88em;}

.m-send{ margin-top: -125px; padding-bottom: 50px;}
.m-send-content{ min-height: 100vh; position: relative; overflow: initial;}
.m-send-content:before{ content: ''; position: absolute; right: 0; top: -130px; width: 250px; height: 250px; background: url('../images/pic-015.png') no-repeat; background-size: cover;}
.m-send-content .title{ display: flex; border-radius: 6px 6px 0 0; padding: 0 35px; align-items: center; height: 70px; background: url('../images/pic-010.jpg') no-repeat; background-size: cover; }
.m-send-content .title strong{ color: #3F3F3F; font-size: 18px; font-weight: 500;}
.m-send-content .title strong + strong{ margin-left: 20px;}
.m-send-content .content{ padding: 50px;}
.m-send-content .content .submit{ text-align: center; padding: 100px 0 50px;}
.m-send-content .content .submit .x-button{ font-size: 18px; width: 220px; height: 53px;}
.m-send-content .content .submit .x-button + .x-button{ margin-left: 54px;}
.m-send-content .x-form-item{ border-bottom: 1px solid #EDEDED; padding-top: 20px; padding-bottom: 50px;}
.m-send-content .x-form-item:last-child{ border-bottom: 0;}
.m-send-content .x-form-item .x-tag{ margin-top: 5px; margin-bottom: 5px;}
.m-send-content .x-form-item .m-tag-input{ flex-wrap: wrap;}
.m-send-content .x-form-item .m-tag-input .tags,
.m-send-content .x-form-item .m-tag-input .x-input-push{ display: inline-block;}
.m-send-content .card-list{ gap: 25px;}
.m-send-content .card-list .item{ border-radius: 6px; overflow: hidden; cursor: pointer; position: relative;}
.m-send-content .card-list .item.active:before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); left: 0; top: 0;}
.m-send-content .card-list .item.active:after{ content: ''; position: absolute; width: 32px; height: 32px; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); background: url('../images/icon-35.png') no-repeat; background-size: cover;}
.m-send-content .card-list .item .pic,
.m-send-content .card-list .item .upload{ height: 146px; background-color: #F7F7F7; text-align: center;}
.m-send-content .card-list .item .pic img,
.m-send-content .card-list .item .upload img{ max-height: 100%; max-width: 100%;}
.m-send-content .card-list .upload{ display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #005CA2;}
.m-send-content .card-list .upload .icon{ width: 28px; height: 28px; background: url('../images/icon-31.png') no-repeat; background-size: cover;}
.m-send-content .type-list{ gap: 9px;}
.m-send-content .type-list .item{ height: 120px; cursor: pointer; position: relative; background-color: #E8F9FF; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; border-radius: 6px;}
.m-send-content .type-list .item.active:after{ content: ''; position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; background: url('../images/icon-34.png') no-repeat; background-size: cover;}
.m-send-content .type-list .item dd{ width: 70px; height: 70px;}
.m-send-content .type-list .item dt{ color: #6A6A6A; font-size: 16px;}
.m-send-content .m-recipient-list{ border-bottom: 1px solid #EDEDED;}
.m-send-content .m-recipient-list .x-form-item{ border-bottom: 0; padding-top: 0; padding-bottom: 20px;}
.m-send-content .m-recipient-list .x-form-item .label{ height: 36px; line-height: 36px;}
.m-send-content .m-recipient-list .x-form-item-content{ width: 330px; padding-right: 50px;}
.m-send-content .m-recipient-list .x-input input,
.m-send-content .m-recipient-list .x-select{ height: 36px; line-height: 1; border-radius: 3px; border: 1px solid rgba(0, 92, 162, 0.3); background-color: #fff;}
.m-send-content .m-recipient-list .x-select select{ padding: 5px 12px;}
.m-send-content .m-recipient-list .x-input-push{ width: 100%; padding: 0;}
.m-send-content .m-recipient-list .x-input-push .select2-container{ width: 100% !important;}
.m-send-content .m-recipient-list .x-input-push .select2-selection{ height: 36px;}
.m-send-content .m-recipient-list .x-input-push .select2-selection__rendered{ line-height: 34px;}
.m-send-content .m-recipient-list .x-input-push .select2-selection__arrow{ height: 34px;}
.m-send-content .m-recipient-list .x-input-push .select2-container--default .select2-selection--single{ border: 1px solid rgba(0, 92, 162, 0.3);}

/*适配*/
@media (max-width: 1200px) {
  .m-login .x-content{ width: 950px;}
  .m-login .left{ width: 560px;}
}
@media (max-height: 800px) {
  .m-login .x-content{ height: 600px; width: 950px;}
  .m-login .left{ width: 560px;}
}
/*循环动画*/
@-webkit-keyframes breathe {
  0%{
    transform: scale(0.95);
  }
  100%{
    transform: scale(1);
  }
}
.image-rendering{
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
/*下载证书*/
.x-download-credentials ._content{ padding: 0; background: transparent;}
.x-download-credentials .block{ width: 490px; height: 630px; position: relative; background: url('/assets/images/pic-023.jpg') no-repeat transparent; background-size: cover; border-radius: 6px;}
.x-download-credentials .block article{ display: block; width: 400px; height: 413px; padding: 10px; position: absolute; left: 45px; top: 32px;}
.x-download-credentials .block .x-user{ text-align: center;}
.x-download-credentials .block .x-user .avatar{ border: 2px solid #fff; margin-top: -35px;}
.x-download-credentials .block .x-user dl{ white-space: nowrap; padding: 5px 0 0;}
.x-download-credentials .block .x-user dt{ font-size: 18px; line-height: 1.2;}
.x-download-credentials .block .x-user dd{ font-size: 12px;}
.x-download-credentials .block aside{ font-size: 12px; color: #6A6A6A; line-height: 1.3; padding: 24px 26px;}
.x-download-credentials .block .x-grid{ width: 330px; position: absolute; left: 50%; top: 355px; transform: translate3d(-50%, 0, 0); font-size: 12px; text-align: center; color: #6A6A6A;}
.x-download-credentials .block .x-grid li{ margin: 0 auto;}
.x-download-credentials .block .x-grid strong{ font-weight: normal;}
.x-download-credentials .block .x-grid .icon{ width: 50px; height: 50px; margin: 0 auto;}
.x-download-credentials .button{ text-align: center; padding-top: 20px;}
.x-download-credentials .button button{ background-color: #fff; border-radius: 50px; height: 50px; width: 220px; color: #005CA2; font-size: 18px; cursor: pointer;}

.pore{
  position: relative;
}
.poab{
  position: absolute;
}

.mobile-login {
  min-height: 100vh;
  background: #C0E6FF url('../images/pic-001.png') no-repeat center center;
  background-size: cover;
}

.mobile-login .header {
  padding: 10.66666667vw 0;
  text-align: center;
}

.mobile-login .header img {
  height: 10.13333333vw;
}

.mobile-login .footer {
  text-align: center;
  padding: 10.66666667vw 0 5.33333333vw;
}

.mobile-login .footer img {
  width: 72vw;
}

.mobile-login .content {
  width: 87.2vw;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 1.6vw;
  padding: 8vw 6.66666667vw 10.66666667vw;
}

.mobile-login .content .title {
  text-align: center;
  font-size: 4.8vw;
  color: #252525;
}

.mobile-login .content .x-form {
  padding: 4.26666667vw 0;
}
.mobile-login .content .x-form-item .x-input{
  width: 100%;
}

.mobile-login .content .x-form-item .x-input input {
  border: 0;
  border-bottom: 0.26666667vw solid #EBEDF5;
  border-radius: 0;
}

.mobile-login .content .x-form-item {
  padding-top: 2.66666667vw;
}

.mobile-login .content .x-form-item.is-suffix {
  border-bottom: 0.26666667vw solid #EBEDF5;
}

.mobile-login .content .x-form-item.is-suffix .x-input input {
  border-bottom: 0;
}

.mobile-login .content .code {
  display: flex;
  align-items: center;
  width: 100%;
}

.mobile-login .content .code .x-button {
  font-size: 3.73333333vw;
  min-width: 24vw;
  padding: 2.66666667vw 0;
  border-radius: 1.6vw;
}

.mobile-login .content .submit {
  padding-top: 5.33333333vw;
  text-align: center;
}

.mobile-login .content .submit .x-button {
  width: 61.33333333vw;
}

.mobile-login .content .tools {
  display: flex;
  font-size: 3.2vw;
  padding-top: 4vw;
}

.mobile-login .content .tools a {
  color: #6A6A6A;
}

.mobile-login .content .tools .bind {
  flex: 1;
  text-align: right;
}

.mobile-login .content .tools .bind a {
  color: #51B2E2;
}