/*===功能通用组件===*/
html.font-1-0 {
    font-size: 100px;
}
html.font-1-1 {
    font-size: 110px;
}
html.font-1-2 {
    font-size: 120px;
}
html.font-1-5 {
    font-size: 150px;
}
html {
    font-size: 100px;
}

@charset "utf-8";
/* reset */

blockquote{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    word-wrap: break-word;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 清除列表项的间距和补白样式 */
menu,
ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 清除标题样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: initial;
    margin: 0;
    font-weight: inherit;
}

/* 清除间距、粗体样式 */
dl,
dt,
dd,
hr,
p {
    margin: 0;
    font-weight: inherit;
}

/* 清除字体粗体样式 */
th,
em,
strong {
    font-weight: inherit;
}

/* 清除字体特殊样式 */
u,
em,
i {
    font-style: inherit;
}

/* html5 */
article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/* 表格基本样式 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    margin: 0;
    word-wrap: break-word;
    line-height: 1;
    font-size: 0.16rem;
    /*font-family: noto_sansregular, "Microsoft Yahei";*/
    font-family: Arial, "Microsoft Yahei";
    -webkit-text-size-adjust: none;
    color: var(--umu-color-text, #333);
    /*background: #fbfcfd;*/
    background: var(--umu-color-bg-base, #fff);
}


body.locale-jp {
    font-family: "noto_sansregular", "hiragino kaku gothic pro", "MS Gothic", "meiryo", "Arial", "Microsoft Yahei";
}

a {
    color: #2196f3;
    text-decoration: none;
}
input, textarea {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
:-ms-input-placeholder {
    color: #a9a9a9 !important;
}

::-ms-clear,
::-ms-reveal {
    display: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{color: #bdbdbd;}


pre {
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -ms-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

a img {
    border: 0;
}

/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

html.display-rtl {
  direction: rtl;
}

.i{}

.iG{background: url(/themes/cn/images/icon.png) no-repeat 9.99rem;-webkit-background-size: 300px auto;background-size: 3rem auto;display: inline-block;vertical-align: middle;}

.iG_common{}

.icon-common-refresh {
    height: 0.24rem;
    width: 0.24rem;
    background: url(/themes/cn/images/icon/icon-refresh.png) no-repeat;
    background-size: contain;
}

.iG_common_close{width: 0.2rem;height: 0.2rem;background-position: -0.2rem 0;}
.iG_common_share{
    width: 0.2rem;
    height: 0.2rem;
    background-position: -1.41rem 0;
    /*background-image: url(../images/share-new.png);
    background-size: contain;
    background-position: inherit;*/
}
.iG_common_checkBox{}

.i_close{width: 0.1rem;height: 0.1rem;display: inline-block;position: relative;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.i_close:before{content:'';position: absolute;background: #999999;width: 100%;height: 0.02rem;margin-top: 0.04rem;}
.i_close:after{content:'';position: absolute;background: #999999;width: 0.02rem;height: 100%;margin-left: 0.04rem;}

/*==form icon==*/
.iG_form{}

.iG_form_check{vertical-align: top;}
.selected .input .iG_form_check,
.checked .input .iG_form_check{width: 0.18rem;height: 0.18rem;background-position: 0 -0.2rem;}

.optionList .selected .input .iG_form_check,
.optionList .checked .input .iG_form_check{width: 0.16rem;height: 0.16rem;background-position: -0.2rem -0.2rem;}

.option-list .checked .input .iG_form_check{width: 0.16rem;height: 0.16rem;background-position: -0.2rem -0.2rem;}

/*==评论icon==*/
.iG_comment{}

.iG_comment_like{width: 0.2rem;height: 0.2rem;background-position: -0.4rem 0;}
.liked .iG_comment_like,
.active .iG_comment_like{background-position: -0.6rem 0;}

.iG_comment_dislike{width: 0.2rem;height: 0.2rem;background-position: -0.8rem 0;}
.liked .iG_comment_dislike,
.active .iG_comment_dislike{background-position: -1rem 0;}


/*==arrow icon==*/
.iG_arrow{}

.iG_arrow_right{display:inline-block;vertical-align:middle;width:0.09rem;height:0.16rem;background:url(/themes/cn/images/icon/arrow.png) no-repeat center;-webkit-background-size:9px auto;background-size:0.09rem auto;}

/* 箭头类型太多，估计设计师都是随意画的，所以做成通用的样式价值不大。。哎，捉急。。 */
.iG_arrow1{width: 0.2rem;height: 0.2rem;background-position: -1.2rem 0;}
.iG_arrow1.directionLeft{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}


.iG_arrow2{display:inline-block;vertical-align:middle;width:0.09rem;height:0.16rem;background:url(/themes/cn/images/icon/arrow.png) no-repeat center;-webkit-background-size:9px auto;background-size:0.09rem auto;}
.iG_arrow2.left{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.iG_arrow2.up,
.active .iG_arrow2.down{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);}
.iG_arrow2.down,
.active .iG_arrow2.up{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}

/* */
.icon-alarm{background: url(/themes/cn/images/icon/alarm.png) no-repeat;background-size: 0.2rem auto;display: inline-block;vertical-align: -0.05rem;width: 0.2rem;height: 0.2rem;}
.overdue .icon-alarm{background-position: 0 -0.2rem;}

/* form */

.form {}

.formRow {}

.formRowLabel {}

.formRowMain {}


/* radio box */


/* check box */


/* == single option == */

.radioBox,
.checkBox {}

.radioBox .input,
.checkBox .input {
    display: inline-block;
    vertical-align: middle;
    width: 0.18rem;
    height: 0.18rem;
    border: 1px solid #cccccc;
    background: var(--umu-color-bg-base, #fff);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.radioBox .optionDetail,
.checkBox .optionDetail {
    font-size: 0.18rem;
    color: var(--umu-color-text, #333);
}

.radioBox .input {
    border-radius: 50%;
}

.checkBox .input {
    border-radius: 2px;
}

.radioBox.selected .input,
.checkBox.checked .input {
    background: var(--umu-color-primary, #F2AF2E);
    border: 0;
}


/* == option list == */

.optionList .radioBox,
.optionList .checkBox {
    display: block;
    margin-top: 0.15rem;
    background: #f1f3f7;
    border-radius: 3px;
    padding: 0.1rem 0.15rem;
    line-height: 0.2rem;
    overflow: hidden;
    zoom: 1;
    cursor: pointer;
}

.optionList .radioBox .input,
.optionList .checkBox .input {
    width: 0.16rem;
    height: 0.16rem;
    border-color: #ffba1f;
    float: left;
    margin-top: 0.02rem;
}

.optionList .radioBox .optionDetail,
.optionList .checkBox .optionDetail {
    font-size: 0.16rem;
    margin-left: 0.3rem;
}

.optionList .radioBox.selected,
.optionList .checkBox.checked {
    background: #ffba1f
}

.optionList .radioBox.selected .input,
.optionList .checkBox.checked .input {
    background: 0;
}

.optionList .radioBox.selected .optionDetail,
.optionList .checkBox.checked .optionDetail {
    color: #FFF;
}


/* input text */


/* textarea */

.textarea,
.inputText {}

.inputText input,
.textarea textarea {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    background: var(--umu-color-bg-base, #fff);
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.18rem;
    font-family: Arial, "Microsoft Yahei";
    color: var(--umu-color-text, #333);
    resize: none;
    overflow: auto;
}

.locale-jp .textarea textarea {
    font-family: "noto_sansregular", "hiragino kaku gothic pro", "MS Gothic", "meiryo", Arial, "Microsoft Yahei";
}

.inputText input {
    height: 0.42rem;
    padding: 0.06rem 0.13rem;
    line-height: 0.28rem;
}

.textarea textarea {
    height: 1.1rem;
    padding: 0.09rem 0.13rem;
    line-height: 0.24rem;
}

.inputText input:focus,
.textarea textarea:focus {
    border-color: #98c1e2;
    -webkit-box-shadow: 0 0 3px rgba(106, 164, 213, 0.35);
    -moz-box-shadow: 0 0 3px rgba(106, 164, 213, 0.35);
    box-shadow: 0 0 0.03rem rgba(106, 164, 213, 0.35);
}

/* 多行输入字符限制提示 */
.lengthLimit{
    display: none;
    margin: 0.05rem 0;
    font-size: 0.14rem;
    color: #a0a0a0;
}


/* button */

.btn {}

.btn_giraffe {
    display: block;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    border-radius: 8px;
    font-size: 0.16rem;
    color: #fff;
    /* background: var(--umu-color-primary, #F2AF2E) url(../images/giraffe_new.png) no-repeat 100% 0; */
    background: var(--umu-color-primary, #F2AF2E) no-repeat 100% 0;
    -webkit-background-size: 35px auto;
    background-size: 0.35rem auto;
}

.qa .questionSubmit .btn_giraffe,
.btn_giraffe_2,
.btn_giraffe_7 {
    background-color: var(--umu-color-primary, #F2AF2E);
    background-position: 100% 0;
}

.discuss .questionSubmit .btn_giraffe,
.btn_giraffe_3 {
    background-color: #ff7d7a;
    background-position: 100% -0.43rem;
}

.survey .questionSubmit .btn_giraffe,
.btn_giraffe_1,
.btn_giraffe_6,
.btn_giraffe_8 {
    background-color: #9fc937;
    background-position: 100% -0.86rem;
}

.btn_giraffe_9 {
    background-color: var(--umu-color-bg-base, #fff);
    border: 1px solid var(--umu-color-primary-border, #F2AF2E);
    color: var(--umu-color-primary, #F2AF2E);
}

.btn_giraffe_disabled {
    color: #CCCCCC;
    background: var(--umu-color-bg-base, #fff);
    border: 1px solid #CCCCCC;
    pointer-events: none;
    cursor: not-allowed;
}

.btn_giraffe_app {
    background-color: var(--umu-color-bg-base, #fff);
    border: 1px solid var(--umu-color-primary-border, #F2AF2E);
    background-position: 100% -2.16rem;
    color: var(--umu-color-primary, #F2AF2E);
}

.btn_giraffe_sub {
    background-color: var(--umu-color-bg-base, #fff);
    background-position: 100% -1.29rem;
    color: #4d696d;
    border: 1px #ddd solid;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn_giraffe.disabled {
    background-color: #cccccc;
    background-position: 100% -1.72rem;
    color: #FFF;
}


/* select */

.select select {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 100%;
    height: 0.42rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    padding: 0.06rem 0.13rem;
    border: 1px solid #ccc;
    background: var(--umu-color-bg-base, #fff);
    font-size: 0.16rem;
}

/**
 * 图片使用以下页面结构：div.img > img
 * div.img 的尺寸依据图片的 max-width、max-height 尺寸定义，可选将默认图片设置于此元素
 */
.img img{width: 100%;vertical-align: middle;}


/*==用户头像==*/
/**
 * img 只设置宽度，不可设置高度，要注意清除底部3px空白
 *     loaded 类通过通用的 img-load 在图片加载成功后设置，其将为 img 添加 htight:100%; 样式
 */
.imgAvat{background: var(--umu-color-fill-secondary, #eee);}
.imgAvat img{background: var(--umu-color-primary, #ffbd2b) url(/themes/cn/images/weike_avatar_default.png) no-repeat center;-webkit-background-size: 100% 100%;background-size: 100% 100%;}
.imgAvat.img,
.imgAvat img{border-radius: 50%;overflow: hidden;width: 100%;height: 100%;vertical-align: top;}
.imgAvat.round.img,
.imgAvat.round img{border-radius: 999px;overflow: hidden;}
.imgAvat img.loaded{height: 100%;}

.imgAvat.imgAvat_1 .avatarWord,
.img.imgAvat.imgAvat_1 img,
.avatList > div:nth-child(9n+1) .imgAvat img{background-color: var(--umu-color-primary, #ffbd2a);}
.imgAvat.imgAvat_2 .avatarWord,
.img.imgAvat.imgAvat_2 img,
.avatList > div:nth-child(9n+2) .imgAvat img{background-color: #e53685;}
.imgAvat.imgAvat_3 .avatarWord,
.img.imgAvat.imgAvat_3 img,
.avatList > div:nth-child(9n+3) .imgAvat img{background-color: #ff6666;}
.imgAvat.imgAvat_4 .avatarWord,
.img.imgAvat.imgAvat_4 img,
.avatList > div:nth-child(9n+4) .imgAvat img{background-color: #29bebf;}
.imgAvat.imgAvat_5 .avatarWord,
.img.imgAvat.imgAvat_5 img,
.avatList > div:nth-child(9n+5) .imgAvat img{background-color: #e55b36;}
.imgAvat.imgAvat_6 .avatarWord,
.img.imgAvat.imgAvat_6 img,
.avatList > div:nth-child(9n+6) .imgAvat img{background-color: #0fabdf;}
.imgAvat.imgAvat_7 .avatarWord,
.img.imgAvat.imgAvat_7 img,
.avatList > div:nth-child(9n+7) .imgAvat img{background-color: #bc4ca8;}
.imgAvat.imgAvat_8 .avatarWord,
.img.imgAvat.imgAvat_8 img,
.avatList > div:nth-child(9n+8) .imgAvat img{background-color: #9453b6;}
.imgAvat.imgAvat_9 .avatarWord,
.img.imgAvat.imgAvat_9 img,
.avatList > div:nth-child(9n+9) .imgAvat img{background-color: #05a78a;}

/* */

.user-avatar-info {
    position: relative;
    z-index: 1;
}

.user-avatar-info .user-medal-info-holder {
    position: absolute;
    bottom: -0.05rem;
    right: -0.05rem;
    z-index: 9;
}

.user-avatar-info .user-level-info-holder {
    position: absolute;
    z-index: 9;
    bottom: -0.08rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.user-avatar-info .user-level-info-holder.size-L {
    bottom: -0.1rem;
}

.user-avatar-info .user-medal-info-holder.width-30 {
}

.system-red-spot{
    font-size: 0.12rem;
    color: #FFF;
    background: #dd2c00;
    border-radius: 15px;
    overflow: hidden;
    font-weight: 700;
    min-width: 0.1rem;
    min-height: 0.2rem;
    line-height: 0.2rem;
    text-align: center;
    padding: 0 0.05rem;
    display: inline-block;
    vertical-align: middle;
}
.umu-text-clamp {
    overflow: hidden;
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.umu-text-clamp.clamp-1 {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
.umu-text-clamp.clamp-2 {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}
.umu-text-clamp.clamp-3 {
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.modalDialog {
    position: fixed;
    z-index: 9999;
}

.modalDialogMain {
    background: var(--umu-color-bg-base, #fff);
    position: relative;
    width: 2.4rem;
}

.modalDialog .title {
    font-size: 0.17rem;
    color: #000000;
    text-align: center;
    line-height: 1.4;
    padding: 0.2rem 0.1rem 0;
}

.modalDialog .info {
    font-size: 0.13rem;
    color: #545454;
    text-align: center;
    line-height: 1.4;
    padding: 0.1rem;
}

.modalDialog .opts {
    overflow: hidden;
    border-top: 1px solid #EBEBEB;
    margin-top: 0.2rem;
    display: table;
    width: 100%;
}

.modalDialog .opt {
    display: table-cell;
}

.modalDialog .opt:nth-child(2) {
   width: 50%;
}

.modalDialog .btn {
    display: block;
    height: 0.44rem;
    line-height: 0.44rem;
    text-align: center;
    color: #1e6ee6;
    font-size: 0.15rem;
}

.modalDialog .opt:nth-child(n+1) .btn {
    border-left: 1px solid #EBEBEB;
}

.modalDialog .btn_close {
    position: absolute;
    z-index: 9;
    top: 0.1rem;
    right: 0.1rem;
    font-size: 0.26rem;
    font-weight: 400;
    color: #c0c0c0;
    width: 0.3rem;
    text-align: center;
}

.modalDialog .btn_close:before {
    border-radius: 3px;
    content: '\00D7';
}

.modalDialogMask {
    position: fixed;
    display: none;
    z-index: 9998;
    background: rgba(0,0,0,.5);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/*二维码弹窗*/
.modalDialog.dialog-info .modalDialogMain {
    margin: 0 auto;
    width: 80%;
    max-width: 4.2rem;
    border-radius: 2px;
}

.modalDialog.dialog-info {
    width: 100%;
}
.dialog-account-disabled .modalDialogMain {
    width: 3.2rem;
    border-radius: 4px;
}
.dialog-account-disabled .modalDialogMain .btn_close {
    display: none;
}
.dialog-account-disabled .modalDialogMain .title {
    text-align:left;
    font-size: 0.2rem;
    color: var(--umu-color-text, #222);
    line-height: 0.26rem;
    padding: 0.24rem;
    padding-bottom: 0;
}
.dialog-account-disabled .modalDialogMain .opts {
    border-top: 0;
    margin-top: 0;
}
.dialog-account-disabled.modalDialog.custome-login .modalDialogMain .info {
    text-align:left;
    color: var(--umu-color-text, #222);
    font-size: 0.14rem;
    font-weight: 400;
    line-height: 0.2rem;
    padding: 0.12rem 0.24rem;
}
.dialog-account-disabled .modalDialogMain .btn {
    text-align: right;
    margin-right: 0.24rem;
}

a.disabled {
    cursor: default;
}

/* ripple特效，要求父元素添加 position:relative; 和 overflow:hidden; */
.ripple{position:absolute;background:rgba(0,0,0,.15);border-radius:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);pointer-events:none;}
.ripple.show{-webkit-animation:ripple .75s ease-out;animation:ripple .75s ease-out;}

@-webkit-keyframes ripple{
    to{-webkit-transform:scale(2);transform:scale(2);opacity:0;}
}
@keyframes ripple{
    to{-webkit-transform:scale(2);transform:scale(2);opacity:0;}
}

/* 点赞按钮icon的放大效果 */
@-webkit-keyframes likebeat{
    0%{-webkit-transform:scale(1);transform:scale(1);}
    50%{-webkit-transform:scale(1.75);transform:scale(1.75);}
    75%{-webkit-transform:scale(1.25);transform:scale(1.25);}
    100%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes likebeat{
    0%{-webkit-transform:scale(1);transform:scale(1);}
    50%{-webkit-transform:scale(1.75);transform:scale(1.75);}
    75%{-webkit-transform:scale(1.25);transform:scale(1.25);}
    100%{-webkit-transform:scale(1);transform:scale(1);}
}

.page-loading{
    padding: 1.2rem 0;
}

.sprite-frame{
    width: 0.5rem;
    height: 0.13rem;
    margin: auto;
    background: url(/themes/cn/images/loading-sprite.png) no-repeat;
    background-size: 0.5rem auto;
    -webkit-animation: page-loading-frame 3s steps(30) infinite;
    animation: page-loading-frame 3s steps(30) infinite;
}

@-webkit-keyframes page-loading-frame {
    from {
        background-position-y: 0rem;
    }
    to {
        background-position-y: -3.75rem;
    }
}

@keyframes page-loading-frame {
    from {
        background-position-y: 0rem;
    }
    to {
        background-position-y: -3.75rem;
    }
}

@keyframes data-buffering {
    50%{opacity:0;}
}

@-webkit-keyframes data-buffering {
    50%{opacity:0;}
}

/*===业务通用组件===*/
/* header */
.header{padding:0 0.15rem;background:#fdfeff;border-bottom:1px solid #dcddde;position:fixed;width:100%;left:0;top:0;z-index:20;min-height: 0.45rem;-moz-box-sizing:border-box;box-sizing:border-box;}
.header .logo{float:left;padding:0.08rem 0.06rem 0 0;}
.header h1{font-size:0.2rem;color:#26262c;padding:0.1rem 0;line-height:0.25rem;min-height:0.25rem;padding-left:0.08rem;position:relative;overflow:hidden;}
.header .btn_refresh{width:0.47rem;height:0.44rem;float:right;margin-right:-0.15rem;text-align: center;}
.header .btn_refresh .i{margin: 0.12rem;}
.header.noFixed{position: relative;left: auto;top: auto;/*margin-bottom: -45px;*/}

/* content */
.content{ /*padding:45px 0 113px;*/ -webkit-tap-highlight-color:transparent;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;position: relative;min-height: 20rem;}


/* layer */
.layer_tip{width:1.2rem;padding:0.18rem 0.2rem 0.15rem;background:rgba(0,0,0,0.8);border-radius:4px;position:absolute;left:50%;top:50%;margin-left:-0.8rem;z-index:9999;}
.layer_tip .icon{display:block;width:0.43rem;height:0.4rem;margin:0 auto 0.15rem;background:url(/themes/cn/images/sprite_tip.png) no-repeat;-webkit-background-size:86px 40px;background-size:0.86rem 0.4rem;}
.layer_tip .icon_info{background-position:0 0;}
.layer_tip .icon_success{background-position:-0.43rem 0;}
.layer_tip .tip{text-align:center;font-size:0.18rem;line-height:0.24rem;color:#fff;word-wrap:break-word;}
.layer_tip_mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9998;}

.layer_tip.hide-icon {
    width: 2rem;
    font-size: 0.15rem;
    line-height: 0.23rem;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-left: unset;
    background: #222222;
}

.locale-jp  .layer_tip{width:1.8rem;margin-left: -1.1rem;}



/* page qrcode */
.pageQrcode{position:fixed;left:0;right:0;top:0.2rem;display: none;}
.pageQrcodeWrap{position: relative;}

.pageQrcode .code {position:absolute;right:-1.85rem;top:0; width: 1.48rem; padding: 0.16rem 0; border:1px solid #d9dadc;background-color:#fff;color: #757575; text-align: center;}
.pageQrcode .code .img{width: 1.02rem;height: 1.02rem;display: block; margin: 0 auto;}
.pageQrcode .code .desc {font-size: 0.14rem;line-height: 0.2rem;}
.pageQrcode .code .desc p {padding: 0rem 0.16rem; margin-top: 0.08rem;}
.pageQrcode .code .desc hr {margin-top: 0.08rem; height: 0; border:none; border-top: 1px dashed #e0e0e0;}

.pageQrcode .access-code-desc .access-code-wrap {
    color: var(--umu-color-text, #222);
}
.pageQrcode .access-code-desc .access-code {
    font-weight: bold;
}

.wechatServiceAccount {
    color: var(--umu-color-text, #333);
}
.wechatServiceAccount .icon {
    width: 0.42rem;
    height: 0.42rem;
    display: block;
    background-image: url(/themes/cn/images/common/components/infoDetail/info_type_success_event.png);
    margin: 0 auto 0.1rem;
    background-size: contain;
}
.wechatServiceAccount .icon-success {
    background-image: url(/themes/cn/images/common/components/infoDetail/info_type_success_event.png);
}

.wechatServiceAccount .icon-fail {
    background-image: url(/themes/cn/images/common/components/infoDetail/info_type_f.png);
}

.wechatServiceAccount .message {
    font-weight: bolder;
    font-size: 0.18rem;
    text-align: center;
}

.wechatServiceAccount .tips {
    font-size: 0.16rem;
    text-align: center;
    margin-top: 0.15rem;
}

.wechatServiceAccount .qrcode {
    display: block;
    width: 1.55rem;
    height: 1.55rem;
    margin: 0.13rem auto 0.12rem;
}

.info-panel {
    text-align: center;
    font-size: 0.14rem;
    color: #757575;
}

.info-panel .title {
    color: #ff9800;
    font-size: 0.23rem;
    text-align: center;
    margin-top: 0.15rem;
    margin-bottom: 0.1rem;
    line-height: 0.26rem;
}

.info-panel .title.title-primary {
    color: #ff9800;
}

.info-panel .title.title-normal {
    color: var(--umu-color-text, #222);
}

.divider-line {
    display: block;
    height: 0.01rem;
    border: 0;
    border-top: 1px solid var(--umu-color-border, #e0e0e0);
    margin: 1em 0;
    padding: 0;
}

.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*保留两行省略*/

.truncate-text-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.truncate-text-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

i.icon {
    width: 0.16rem;
    height: 0.16rem;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}


i.icon.icon-task {
    background-image: url('/themes/cn/images/icon/icon-task.png');
}

i.icon.icon-weike {
    background-image: url('/themes/cn/images/icon/icon-weike.png');
}

i.icon.icon-note {
    background-image: url('/themes/cn/images/icon/icon-note.png');
}

i.icon.icon-session {
    background-image: url('/themes/cn/images/icon/icon-session.png');
}

i.icon.icon-detail {
    background-image: url('/themes/cn/images/icon/icon-detail.png');
}

i.icon.icon-following-teachers {
    background-image: url('/themes/cn/images/icon/icon-following-teachers.png');
}

i.icon.icon-following-fans {
    background-image: url('/themes/cn/images/icon/icon-following-fans.png');
}

i.icon.icon-teachers-register {
    background-image: url('/themes/cn/images/icon/icon-teachers-register.png');
}

i.icon.icon-my-course {
    background-image: url('/themes/cn/images/icon/icon-my-course.png');
}
i.icon.icon-my-course-red {
    background-image: url('/themes/cn/images/icon/icon-my-course-red.png');
}

i.icon.icon-tasks-completed {
    background-image: url('/themes/cn/images/icon/icon-tasks-completed.png');
}

i.icon.icon-tasks-coming {
    background-image: url('/themes/cn/images/icon/icon-tasks-coming.png');
}

i.icon.icon-home {
    background-image: url('/themes/cn/images/icon/icon-home.png');
}

i.icon.icon-index-achievement {
    background-image: url('/themes/cn/images/icon/icon-index-achievement.png');
    vertical-align: -0.05rem;
}


i.icon.icon-help {
    background-image: url('/themes/cn/images/icon/icon-help.png');
}

i.icon.icon-password-switch {
    background-image: url('/themes/cn/images/icon/ViewCourse.png');
}

i.icon.icon-password-switch.active {
    background-image: url('/themes/cn/images/icon/ViewCourse.png');
}

i.icon.icon-password-switch.close {
    background-image: url('/themes/cn/images/icon/Dismiss.png');
}

i.icon.icon-mail-blue {
    background-image: url('/themes/cn/images/icon/icon-mail-blue.png');
}

i.icon.icon-mail-yellow {
    background-image: url('/themes/cn/images/icon/icon-mail-yellow.png');
}

i.icon.icon-mail-green {
    background-image: url('/themes/cn/images/icon/icon-mail-green.png');
}

i.icon.icon-back {
    background-image: url('/themes/cn/images/icon/icon-back.png');
}

i.icon.icon-back-blue {
    background-image: url('/themes/cn/images/icon/icon-back-blue.png');
}

i.icon.icon-forward {
    background-image: url('/themes/cn/images/icon/icon-forward.png');
}

i.icon.icon-expand-down {
    background-image: url('/themes/cn/images/icon/icon-expand-down.png');
}

i.icon.icon-phone {
    background-image: url('/themes/cn/images/icon/icon-phone.png');
}

i.icon.icon-wechat {
    background-image: url('/themes/cn/images/icon/icon-wechat.png');
}

i.icon.icon-sso {
    background-image: url('/themes/cn/images/icon/icon-sso.png');
}

i.icon.icon-success {
    background-image: url('/themes/cn/images/icon/icon-success.png');
    width: 0.3rem;
    height: 0.3rem;
}

i.icon.icon-warning {
    background-image: url('/themes/cn/images/icon/icon-warning.png');
    width: 0.3rem;
    height: 0.3rem;
}

i.icon.icon-tooltip {
    background-image: url('/themes/cn/images/icon/icon-tooltip.png');
}

i.icon.icon-member {
    background-image: url('/themes/cn/images/icon/icon-member.png');
    width: 0.25rem;
    height: 0.2rem;
}

i.icon.icon-course-points {
    background-image: url('/themes/cn/images/icon/icon-course-points.png');
    width: 0.2rem;
    height: 0.2rem;
}

/**
 * icon arrow 系列
 * 默认方向向上，通过添加类名实现其它3个方向样式
 * 父元素添加 .icon-activatable.active 做180度旋转，或者直接使用方向类名
 * 有 a:hover 样式
 */
i.icon.icon-arrow.up {
}

i.icon.icon-arrow.right {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

i.icon.icon-arrow.down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

i.icon.icon-arrow.left {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.icon-activatable.active i.icon.icon-arrow.up {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.icon-activatable.active i.icon.icon-arrow.right {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.icon-activatable.active i.icon.icon-arrow.down {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.icon-activatable.active i.icon.icon-arrow.left {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* 具体的arrow样式。因为设计师很随意，所以对具体的样式暂时无法明确命名，先以数字标识 */
i.icon.icon-arrow.arrow1 {
    background-image: url('/themes/cn/images/icon/icon-arrow-1.png');
    width: 0.2rem;
    height: 0.2rem;
}

a:hover i.icon.icon-arrow.arrow1 {
}

/* */
i.icon.icon-user {
    background-image: url('/themes/cn/images/icon/icon-user.png');
}

i.icon.icon-book {
    background-image: url('/themes/cn/images/icon/icon-book.png');
}

i.icon.icon-bandge {
    background-image: url('/themes/cn/images/icon/icon-bandge.png');
}

i.icon.icon-message-read-mark {
    width: 0.1rem;
    height: 0.1rem;
    background-image: url('/themes/cn/images/icon/icon-message-read-mark.png');
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}

.readed i.icon.icon-message-read-mark {
    background-position: 0 100%;
}

i.icon.icon-message-status-error {
    width: 0.2rem;
    height: 0.2rem;
    background-image: url('/themes/cn/images/icon/icon-warning.png');
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
i.icon.icon-close {
    background-image: url('/themes/cn/images/icon/icon-close.png');
}
i.icon.icon-red-pack-yuan {
    background-image: url('/themes/cn/images/icon/red_pack_yuan.png');
    width: 0.17rem;
    height: 0.17rem;
}

i.icon.icon-invitation {
    background-image: url('/themes/cn/images/icon/icon-invitation.png');
}

i.icon.icon-enroll-course{
    background-image: url('/themes/cn/images/icon/icon-enroll-course.png');
}
i.icon.icon-index-chat{
    background-image: url('/themes/cn/images/icon/icon-index-chat.png');
}
i.icon.icon-index-task{
    background-image: url('/themes/cn/images/icon/icon-index-task.png');
}
i.icon.icon-rank{
    background-image: url('/themes/cn/images/icon/icon-rank.png');
}

i.icon.icon-rank-1st{
    background-image: url('/themes/cn/images/icon/rank-1st.png');
}
i.icon.icon-rank-2nd{
    background-image: url('/themes/cn/images/icon/rank-2nd.png');
}
i.icon.icon-rank-3rd{
    background-image: url('/themes/cn/images/icon/rank-3rd.png');
}
i.icon.icon-rank-star{
    background-image: url('/themes/cn/images/icon/icon-rank-star.png');
}
i.icon.icon-rank-like{
    background-image: url('/themes/cn/images/icon/icon-rank-like.png');
}
i.icon.icon-rank-learn{
    background-image: url('/themes/cn/images/icon/icon-rank-learn.png');
}
i.icon.icon-setting {
    background-image: url('/themes/cn/images/icon/icon-setting.png');
    width: 0.2rem;
    height: 0.2rem;
}

i.icon.icon-menu {
    background-image: url('/themes/cn/images/icon/icon-menu.png');
    width: 0.2rem;
    height: 0.2rem;
    background-position: 50% 50%;
}

i.icon.icon-checkbox {
    background-image: url('/themes/cn/images/icon/icon-checkbox.png');
    width: 0.2rem;
    height: 0.2rem;
}

i.icon.icon-like-grey{
    background-image: url('/themes/cn/images/icon/icon-like-grey.png');
}

i.icon.icon-clock{
    background-image: url('/themes/cn/images/icon/icon-clock.png');
}

i.icon.icon-checkbox {
    background-image: url('/themes/cn/images/icon/icon-checkbox.png');
    width: 0.2rem;
    height: 0.2rem;
}

i.icon.icon-horizontal-arrow {
    background-image: url('/themes/cn/images/icon/icon-horizontal-arrow.png');
    width: 0.05rem;
    height: 0.1rem;
}

i.icon.icon-horizontal-arrow-active {
    background-image: url('/themes/cn/images/icon/icon-horizontal-arrow-active.png');
    width: 0.05rem;
    height: 0.1rem;
}

i.icon.icon-msg-center {
    background-image: url('/themes/cn/images/icon/icon-msg-center.png');
    width: 0.25rem;
    height: 0.25rem;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
i.icon.icon-msg-center.icon-msg-type-praise {
    background-position: 0 0;
}
i.icon.icon-msg-center.icon-msg-type-reply {
    background-position: 0 -0.25rem;
}
i.icon.icon-msg-center.icon-msg-type-system {
    background-position: 0 -0.5rem;
}

i.icon.icon-msg-center.icon-msg-type-task {
    background-position: 0 -0.75rem;
}

i.icon.icon-msg-center-fold {
    background-image: url('/themes/cn/images/icon/icon-msg-center-fold.png');
    width: 0.35rem;
    height: 0.35rem;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
i.icon.icon-msg-center-fold.icon-fold-type-activity {
    background-position: 0 0;
}
i.icon.icon-msg-center-fold.icon-fold-type-enroll {
    background-position: 0 -0.35rem;
}
i.icon.icon-msg-center-fold.icon-fold-type-im {
    background-position: 0 -0.7rem;
}
i.icon.icon-category {
    background-image: url('/themes/cn/images/icon/icon-category.png');
    width: 0.19rem;
    height: 0.17rem;
}

i.icon.icon-search {
    background-image: url('/themes/cn/images/icon/icon-search.png');
    width: 0.16rem;
    height: 0.15rem;
}
i.icon.icon-review-star {
    background-image: url('/themes/cn/images/session/icon_star.png');
    width: 0.14rem;
    height: 0.14rem;
}


i.icon.icon-course-home {
    background-image: url('/themes/cn/images/icon/icon-course-home.png');
}

i.icon.icon-time {
    background-image: url('/themes/cn/images/icon/icon-time.png');
    width: 0.24rem;
    height: 0.24rem;
}

i.icon.icon-select {
    background-image: url('/themes/cn/images/icon/icon-select.png');
    width: 0.15rem;
    height: 0.11rem;
}

i.icon.icon-lock {
    background-image: url('/themes/cn/images/icon/icon-lock-yellow.png');
    width: 0.12rem;
    height: 0.14rem;
}

i.icon.icon-unlock {
    background-image: url('/themes/cn/images/icon/icon-unlock.png');
    width: 0.12rem;
    height: 0.14rem;
}

i.icon.icon-lock-mark {
    background-image: url('/themes/cn/images/icon/icon-lock.png');
    width: 0.48rem;
    height: 0.48rem;
}

i.icon.icon-previous {
    background-image: url('/themes/cn/images/icon/icon-previous.png');
    width: 0.08rem;
    height: 0.14rem;
}


i.icon.icon-done {
    background-image: url('/themes/cn/images/icon/icon-done.png');
    width: 0.24rem;
    height: 0.24rem;
}

i.icon.icon-trophy {
    background-image: url('/themes/cn/images/icon/icon-trophy.png');
    width: 0.24rem;
    height: 0.24rem;

}

i.icon.icon-class {
    background-image: url('/themes/cn/images/icon/icon-class.png');
    width: 0.24rem;
    height: 0.24rem;

}

i.icon.icon-right-corner-lock {
    width: 0.32rem;
    height: 0.32rem;
    background-image: url(/themes/cn/images/icon/icon-top-lock.png);
    background-size: 0.32rem 0.32rem;
}


i.icon.icon-score-rate {
    background-image: url('/themes/cn/images/icon/icon-score-rate.png');
    width: 0.24rem;
    height: 0.24rem;
}

i.icon.icon-score {
    background-image: url('/themes/cn/images/icon/icon-score.png');
    width: 0.24rem;
    height: 0.24rem;
}

i.icon.icon-objective-full-mark {
    background-image: url('/themes/cn/images/icon/icon-objective-full-mark.png');
    width: 0.24rem;
    height: 0.24rem;
}

i.icon.icon-objective-score {
    background-image: url('/themes/cn/images/icon/icon-objective-score.png');
    width: 0.24rem;
    height: 0.24rem;
}

i.icon.phone {
    background-image: url('/themes/cn/images/icon/Phone.png');
}

i.icon.email-green {
    background-image: url('/themes/cn/images/icon/Email-green.png');
}

i.icon.email-blue {
    background-image: url('/themes/cn/images/icon/Email-blue.png');
}

i.icon.send-email {
    background-image: url('/themes/cn/images/icon/Sendemail.png');
}


.btn, a, .no-touch-highlight {
    -webkit-tap-highlight-color: transparent;
}

.umu-btn {
    display: block;
    text-align: center;
    border-radius: 3px;
    font-size: 0.17rem;
    padding: 0.12rem;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


/*黄色*/

.umu-btn.btn-primary {
    color: #fff;
    background: var(--umu-color-primary, #ffbd2b);
}

.umu-btn.btn-primary:active {
    background: var(--umu-color-primary-active, #eaa900);
    color: #fff;
}


.umu-btn.btn-secondary {
    color: var(--umu-color-primary, #ffbd2b);
    border: 1px solid var(--umu-color-primary-border, #ffbd2b);
}

/* 蓝色 */
.umu-btn.btn-optional {
    color: #fff;
    background: #1E6EE6;
}
.umu-btn.btn-optional.striking {
    color: #1E6EE6;
    background: var(--umu-color-bg-base, #fff);
    border: 1px solid #1E6EE6;
}


/*文本类型的按钮*/

.umu-btn.btn-text {
    display: inline-block;
    font-size: 0.14rem;
    background: transparent;
    color: #757575;
}
.umu-btn.btn-text:active{
    color: #757575;
}

.umu-btn.btn-link {
    display: inline-block;
    font-size: 0.14rem;
    background: transparent;
    color: #1E6EE6;
}

.umu-btn.btn-link:active {
    color: #1976d2;
}

.umu-btn.disabled,.umu-btn.disabled:active {
    color: var(--umu-color-text-tertiary, #999);
    cursor: default;
    background: #e0e0e0;
}

.umu-btn.btn-text.disabled, .umu-btn.btn-link.disabled {
    color: var(--umu-color-text-tertiary, #999);
    background: transparent;
}

.umu-btn.btn-yellow {
    padding: 0.03rem;
    border-radius: 3px;
    background-color: var(--umu-color-primary, #ffbd2a);
    color: #fff;
    min-width: 0.7rem;
    display: inline-block;
    text-align: center;
    border: 1px solid var(--umu-color-primary-border, #ffbd2a);
}

.umu-form {
    text-align: left;
}

.umu-form label {
    display: block;
    font-size: 0.14rem;
    color: var(--umu-color-text, #222);
    line-height: 0.16rem;
    margin-bottom: 0.1rem;
}

.umu-form.umu-from-center {
    text-align: center;
}

.umu-form-body {
    margin-bottom: 0.2rem;
}

.umu-form .form-info {
    color: var(--umu-color-text-tertiary, #999);
    font-size: 0.14rem;
}

.umu-form .umu-form-body .umu-form-row {
    margin-top: 0.3rem;
    position: relative;
}

.umu-form .btn-primary {
    margin: 0.1rem 0;
}

.umu-form .umu-form-body .umu-form-tip {
    text-align: left;
    font-size: 0.12rem;
}

.umu-form .umu-form-tip.error {
    color: #d50000;
    /*position: absolute;*/
    line-height: 1.5;
}

.quick-register-dialog-main .umu-form .umu-form-tip.error {
    color: #DD4E40;
}

.quick-register-dialog-main .umu-input {
    font-size: 0.16rem;
    line-height: 0.24rem;
}
.umu-input{
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--umu-color-fill-secondary, #eee);
    border-radius: 0;
    font-size: 0.18rem;
    /*margin-top: 15px;*/
    line-height: 0.28rem;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.06rem 0;
}

.umu-input:focus{
    outline: none;
    box-shadow: none;
    border-bottom: 1px solid #1E6EE6;
}

.input-wrap{
    position: relative;
}
.input-wrap .input-tooltip{
    display: inline-block;
    position: absolute;
    right: 0.05rem;
    top: 0rem;
    padding: 0.13rem;
}
.umu-card {
    width: 100%;
    color: #000000;
    display: inline-block;
    background: var(--umu-color-bg-base, #fff);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.19rem;
    position: relative;
}

.umu-card-wrap {
    /* box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
    background: var(--umu-color-bg-base, #fff); */
}

.umu-card .umu-card-cover-wrap {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.umu-card.keep-ratio .umu-card-cover-wrap {
    /*     16:9 https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css/10441480#10441480 */
    padding-bottom: 56.25%;
}

.umu-card .umu-card-cover {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    /*height: 103px;*/
    height: 1.6rem;
    background-position: center top;
    border-bottom: 1px solid rgb(223, 223, 223);
    background-image: url(./images/umu-placeholder.png);
    background-color: var(--umu-color-fill-secondary, #eee);
    /*border-top: 1px solid #dfdfdf;*/
}

.umu-card.keep-ratio .umu-card-cover-wrap .umu-card-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
}

.umu-card .umu-card-cover.umu-img-default {
    background-position: center;
}

.umu-card .umu-card-title {
    padding: 0.12rem;
}

.umu-card .umu-card-title .main-title {
    font-size: 0.16rem;
    line-height: 0.19rem;
}

.umu-card .umu-card-title .sub-title {
    font-size: 0.13rem;
    line-height: 0.18rem;
}

/*ip4/5处理*/
@media screen and (device-aspect-ratio: 40/71) {
    .umu-card .umu-card-title {
        padding: 0.12rem;
    }
}

@media screen and (device-aspect-ratio: 2/3) {
    .umu-card .umu-card-title {
        padding: 0.12rem;
    }
}

/*ip4/5处理 end*/
.umu-card .umu-card-title .icon {
    width: 0.2rem;
    vertical-align: top;
    margin-top: 0.02rem;
    margin-right: 0.1rem;
}

.umu-card .sub-title {
    font-size: 0.14rem;
    color: #757575;
    margin-top: 0.04rem;
}

.umu-card.cover-left-card .umu-card-cover {
    margin: 0.1rem;
    float: left;
    width: 1.25rem;
    height: 0.78rem;
    top: -0.02rem;
    left: 0;
    position: absolute;
    border-bottom: none;
}

.umu-card.cover-left-card .umu-card-title {
    margin-left: 1.4rem;
    padding: 0.1rem;
}

.umu-card.cover-left-card .main-title {
    line-height: 1.3;
    min-height: 0.46rem;
}

/* */
.umu-card .card-badage {
    position: absolute;
    z-index: 1;
}

.umu-card .card-badage .type-badage {
    color: #000000;
    font-size: 0.12rem;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 16px;
    padding: 0 0.12rem 0 0.08rem;
    line-height: 0.22rem;
    background: #FFCC0C;
}

.umu-card .card-badage.inline {
    position: static;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin-right: 0.05rem;
    line-height: 1;
}

.umu-card .card-badage.inline .type-badage {
    font-size: 0.1rem;
    line-height: 0.2rem;
}

/* */
.umu-card .umu-card-cover-wrap .lock-status {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
}

.umu-card .umu-card-cover-wrap .lock-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.24rem;
    height: 0.24rem;
    margin: -0.12rem 0 0 -0.12rem;
    background: url(/themes/cn/images/icon/icon-lock.png) no-repeat center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}

/* 大卡片 一行一个*/
.large-umu-card .umu-card {
    display: block;
    width: auto;
    margin: 0 0.16rem 0.16rem 0.16rem;
    background: transparent;
    /* border-radius: 4px; */
    overflow: hidden;
}

.large-umu-card .umu-card-wrap {
    position: relative;
}

.large-umu-card .umu-card .umu-card-cover {
    border-bottom: 0;
}

.large-umu-card .umu-card .umu-card-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    padding: 0.16rem;
    border-radius: 0 0 4px 4px;
}

.large-umu-card .umu-card .umu-card-title .main-title {
    font-size: 0.16rem;
    color: #FFF;
    line-height: 1.2;
}
.large-umu-card .umu-card .umu-card-title .sub-title {
    color: rgba(255, 255, 255, 0.7);
}

/* 正常卡片 一行2个*/
.normal-umu-card {
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

.normal-umu-card .umu-card {
    width: auto;
    display: block;
    margin: 0rem 0.08rem 0.16rem 0.16rem;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.normal-umu-card:nth-child(2n) .umu-card {
    margin-left: 0.08rem;
    margin-right: 0.16rem;
}

.normal-umu-card .umu-card.keep-ratio .umu-card-cover-wrap {
    padding-bottom: 60%;
    /* border-radius: 4px; */
}

.normal-umu-card:nth-last-child(-n+2) .umu-card {
    margin-bottom: 0rem;
}

.normal-umu-card .umu-card-cover {
    height: auto;
    padding-bottom: 60%;
    border-bottom: none;
}

.normal-umu-card .umu-card-wrap {
    /* box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
    border-radius: 2px; */
}

.normal-umu-card .umu-card-title {
    height: 0.66rem;
    padding: 0.1rem 0;
}

.normal-umu-card .umu-card .sub-title {
    line-height: 0.15rem;
}

.normal-umu-card .umu-card .umu-card-title .main-title {
    font-size: 0.14rem;
    color: var(--umu-color-text, #222);
    line-height: 1.5;
}
.normal-umu-card .umu-card .umu-card-title .sub-title {
    font-size: 0.12rem;
    color: #757575;
    margin-top: 0.06rem;
}

/* 小卡片 列表 一行1个*/
.small-umu-card {
    /* border-bottom: 1px solid var(--umu-color-border-secondary, #f5f5f5); */
}
.small-umu-card:last-child {
    border-bottom: none;
}

.small-umu-card .umu-card.keep-ratio .umu-card-cover-wrap {
    padding-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0.16rem;
}

.small-umu-card .umu-card.keep-ratio .umu-card-cover-wrap .umu-card-cover {
    width: 0.94rem;
    height: 0.53rem;
    position: static;
}

.small-umu-card .umu-card .umu-card-cover {
    border-bottom: none;
    /* border-radius: 4px; */
}

.small-umu-card .umu-card .umu-card-title {
    margin-left: 1.1rem;
    padding: 0 0.16rem 0.16rem;
    min-height: 0.54rem;
    margin-bottom: 0.16rem;
}

.small-umu-card .umu-card .umu-card-title .main-title {
    line-height: 1.3;
    font-size: 0.14rem;
}
.small-umu-card .umu-card .umu-card-title .sub-title {
    margin-top: 0.04rem;
}

/* makes sure width works if not specified on input */
input[type="range"] {
    width: 95%;
}

.range {
    position: relative;
    padding: 0rem 0.1rem;
}
/* hide the input value offscreen */
.range input {
    display: none;
}

/* legend */
.range .legend {
    font-size: 0.16rem;
    position: absolute;
    top: -0.25rem;
    right: 0;
    z-index: 1;
    /* position tweak to allow us to click just off each end of the slider */
    left: 0.2rem;
    margin-left: -0.2rem;
    padding-left: 0.2rem;
}

.range .legend .label {
    padding-top: 0.55rem;
    float: left;
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;

}
.range .legend .label:first-child {
    text-align: left;
}
.range .legend .label:last-child {
    text-align: right;
}

.range .legend .label-last-child {
	margin-left: -0.3rem;
}

.range .legend .singleCharLabel:first-child {
	position: relative;
	left: 0.15rem; /* 3/8 btn size */
}
.range .legend .singleCharLabel:last-child {
	position: relative;
	left: 0.15rem; /* 3/8 btn size */
}

.range .legend .doubleCharLabel:first-child {
	position: relative;
	left: 0.1rem; /* 1/4 btn size */
}
.range .legend .doubleCharLabel:last-child {
	position: relative;
	left: 0.2rem; /* 1/2 btn size */
}

.range .legend .label-empty {
    position: relative;
}
.range .legend .label-empty:before {
    content: '';
    position: absolute;
    width: 0.01rem;
    top: 0.62rem; left: 50%; bottom: 0.07rem;
    background: #CCC;
    border-left: 1px solid white;
}
.range .legend .label-empty:first-child:before {
    left: 0.2rem; /* btn half size */
}
.range .legend .label-empty:last-child:before {
    left: auto;
    right: 0.2rem; /* btn half size */
}

.range .legend .label.active {
    -webkit-transition: 0.2s all ease-out;
       -moz-transition: 0.2s all ease-out;
         -o-transition: 0.2s all ease-out;
            transition: 0.2s all ease-out;

    color: #8D8DAC;
    text-shadow: 1px 1px 1px #CCC;
}

/* bar, fill, btn */
.range .bar,
.range .fill {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    height: 0.1rem;
}
.range .bar {
    position: relative;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 0.2rem; /* btn half size  */
    margin-right: 0.2rem; /* btn half size */
    background: #999;
    border-bottom: 1px solid rgba(255, 255, 255, .9);
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05);
         -o-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 0.01rem 0.04rem rgba(0, 0, 0, 0.3), 0 0.01rem 0.05rem rgba(0, 0, 0, 0.05);
}
.range .fill {
    background: #60B9B4;
    position: absolute;
    top: 0; left: 0;
}
.range .btn {
    margin-top: -0.16rem;
    position: absolute;
    top: 0; left: -0.2rem; /* btn half size */
    width: 0.38rem;
    height: 0.38rem;
    z-index: 2;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, .8);

    background-image: -webkit-radial-gradient(10px 10px, circle cover, #FFF, #DDD);
    background-image:    -moz-radial-gradient(10px 10px, circle cover, #FFF, #DDD);
    background-image:      -o-radial-gradient(10px 10px, circle cover, #FFF, #DDD);
    background-image:         radial-gradient(10px 10px, circle cover, #FFF, #DDD);

    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3);
         -o-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0.01rem 0.04rem rgba(0, 0, 0, 0.1), 0 0.02rem 0.05rem rgba(0, 0, 0, 0.3);
}
.range .btn:active {
    border-color: rgba(255, 255, 255, .5);
    top: 0.01rem;
    -webkit-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3);
         -o-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0px 1px 4px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1), 0rem 0.01rem 0.04rem rgba(0, 0, 0, 0.3);
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

.range.inside .bar{
    margin-left: 0;
    margin-right: 0;
}
.range.inside .btn {
    left: 0;
}
.range.inside .fill {
    padding-right: 0.2rem; /* btn half size */
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

.range .fill,
.range .btn {
    -webkit-transition: 0.2s all ease-out;
       -moz-transition: 0.2s all ease-out;
         -o-transition: 0.2s all ease-out;
            transition: 0.2s all ease-out;
}
.range.moving .fill,
.range.moving .btn {
    -webkit-transition: none;
       -moz-transition: none;
         -o-transition: none;
            transition: none;
}



/* 媒体查询始终在最后一个，各业务包含媒体查询时，也单独使用文件引入 */
@media screen and (min-width:1024px){
    body{width:7rem;margin:0 auto;}
    .pageQrcode,
    .header{width:7rem;left:50%;margin-left:-3.5rem;}
    .header.noFixed{margin-left: 0;}
    .header,
    .content{border-left:1px solid #dcddde;border-right:1px solid #dcddde;}
    .pageQrcode{display: block;}
}

/*===业务功能===*/


/* 让页面可以适应高度 */
/*
    div.doc > ContentWrapper.doc-frame > header + div.doc-stretch-body + (sessionSibligns + footer)
 */
html, body {
    height: 100%;
}


.doc {
    min-height: 100%;
}

.doc-frame {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.doc-stretch-body {
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* 有fixed定位的元素时，添加 doc-fixed 容器，保证元素的宽度与 doc 一致。此时该元素使用绝对定位 */
.doc-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99;
}

.doc-fixed.top {
    top: 0;
}

.doc-fixed.bottom {
    bottom: 0;
}

/* iphone x */
@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3) {

        .doc-fixed {
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .doc-fixed.filled {
            background-color: var(--umu-color-bg-base, #fff);
        }

        /* .doc-fixed.filled:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
            background-color: var(--umu-color-bg-base, #fff);
        } */

    }

@media screen and (min-width: 1024px) {
    body {
        width: 7rem;
        margin: 0 auto
    }

    .doc,
    .doc-fixed.bordered {
        border-left: 1px solid #dcddde;
        border-right: 1px solid #dcddde
    }

    .doc .header.noFixed {
        margin-left: -0.01rem;
    }

    .doc-fixed {
        width:7rem;
        left: 50%;
        margin-left: -3.5rem
    }

    .doc-fixed.bordered {
        width:6.98rem;
    }
}

.grecaptcha-badge {
    visibility: hidden;
}

.heard {
    z-index: 1003;
    position: relative;
}