@charset "UTF-8";html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}button,input,select,textarea{font:12px/1.5 "Hiragino Sans GB","Microsoft YaHei","黑体",sans-serif;}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}img{vertical-align:bottom}
.clearfix{display:block;height:0;clear:both;visibility:hidden}
*html .clearfix{height:0px}
*+html .clearfix{height:0px}.marM{margin:0 auto}.ml0{margin-left:0}.mr0{margin-right:0}.mt0{margin-top:0}.mb0{margin-bottom:0}.mv02{margin-top:2px;margin-bottom:2px}.mv03{margin-top:3px;margin-bottom:3px}.mv05{margin-top:5px;margin-bottom:5px}.mv10{margin-top:10px;margin-bottom:10px}.mv15{margin-top:15px;margin-bottom:15px}.mv20{margin-top:20px;margin-bottom:20px}.mv25{margin-top:25px;margin-bottom:25px}.mv30{margin-top:30px;margin-bottom:30px}.mh05{margin-left:5px;margin-right:5px}.mh08{margin-left:8px;margin-right:8px}.mh10{margin-left:10px;margin-right:10px}.mh15{margin-left:10px;margin-right:15px}.mh20{margin-left:20px;margin-right:20px}.mh25{margin-left:25px;margin-right:25px}.mh30{margin-left:30px;margin-right:30px}.mt03{margin-top:3px}.mt05{margin-top:5px}.mt08{margin-top:8px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt18{margin-top:18px}.mt20{margin-top:20px}.mt25{margin-top:25px}.mt30{margin-top:30px}.mt35{margin-top:35px}.mt40{margin-top:40px}.mt50{margin-top:50px}.mt100{margin-top:100px}.mr03{margin-right:3px}.mr05{margin-right:5px}.mr10{margin-right:10px}.mr12{margin-right:12px}.mr13{margin-right:13px}.mr14{margin-right:14px}.mr15{margin-right:15px}.mr18{margin-right:18px}.mr20{margin-right:20px}.mr25{margin-right:25px}.mr30{margin-right:30px}.mr35{margin-right:35px}.mr40{margin-right:40px}.mr50{margin-right:50px}.mr100{margin-right:100px}.mb03{margin-bottom:3px}.mb05{margin-bottom:5px}.mb08{margin-bottom:8px}.mb10{margin-bottom:10px}.mb13{margin-bottom:13px}.mb14{margin-bottom:14px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb25{margin-bottom:25px}.mb30{margin-bottom:30px}.mb35{margin-bottom:35px}.mb50{margin-bottom:50px}.ml05{margin-left:5px}.ml08{margin-left:8px}.ml10{margin-left:10px}.ml14{margin-left:14px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml25{margin-left:25px}.ml30{margin-left:30px}.ml35{margin-left:35px}.ml50{margin-left:50px}.pl0{padding-left:0}.pl05{padding-left:5px}.pl08{padding-left:8px}.pl10{padding-left:10px}.pl15{padding-left:15px}.pl20{padding-left:20px}.pl25{padding-left:25px}.pl30{padding-left:30px}.pl35{padding-left:35px}.pl40{padding-left:40px}.pl50{padding-left:50px}.pr0{padding-right:0}.pr05{padding-right:5px}.pr08{padding-right:8px}.pr10{padding-right:10px}.pr15{padding-right:15px}.pr20{padding-right:20px}.pr30{padding-right:30px}.pr40{padding-right:40px}.pr50{padding-right:50px}.pt0{padding-top:0}.pt05{padding-top:5px}.pt08{padding-top:8px}.pt10{padding-top:10px}.pt15{padding-top:15px}.pt20{padding-top:20px}.pt25{padding-top:25px}.pt30{padding-top:30px}.pt40{padding-top:40px}.pt50{padding-top:50px}.padV5{padding:0 5px}.padV10{padding:0 10px}.padV15{padding:0 15px}.pb0{padding-bottom:0}.pb05{padding-bottom:5px}.pb08{padding-bottom:8px}.pb10{padding-bottom:10px}.pb15{padding-bottom:15px}.pb20{padding-bottom:20px}.pb25{padding-bottom:25px}.pb30{padding-bottom:30px}.pb40{padding-bottom:40px}.pb50{padding-bottom:50px}.fb{font-weight:bolder}.ft12{font-size:12px}.ft14{font-size:14px}.ft16{font-size:16px}.ft18{font-size:18px}.ft20{font-size:20px}.ft22{font-size:22px}.ft24{font-size:24px}.ft26{font-size:26px}.ft28{font-size:28px}.ft30{font-size:30px}.ft32{font-size:32px}.ft34{font-size:34px}.ft36{font-size:36px}.l{float:left;*display:inline}.r{float:right;*display:inline}.clearf:after{content:".";display:block;clear:both;height:0;visibility:hidden}.clearf{zoom:1}.tal{text-align:left}.tar{text-align:right}.tac{text-align:center}.indent-2em{text-indent:2em}.pr{position:relative}.pa{position:absolute}.pf{position:fixed}.w960{width:960px}.w980{width:980px}.w1000{width:1000px}.w1200{width:1200px}.w330{width:350px}.w350{width:350px}.w160{width:160px}.w170{width:170px}.w180{width:180px}.w190{width:190px}.co777{color:#777}.co555{color:#555}.cof57911{color:#f57911}.pointer{cursor:pointer}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis}.none{display:none}body{font:12px/1.5 "Hiragino Sans GB","Microsoft YaHei","黑体",sans-serif}.main-body{width:1000px;margin:0 auto}body.bg-white,.bg-white .main{background-color:#fff}a{outline:0;text-decoration:none;color:#64636a}a:hover{text-decoration:none;color:#f60}.orange,a.orange{color:#fd6633}.red{color:#f00}
body,#wrap{margin:0;padding:0;background:#F3F3F3;
    background-size:100% 100%;
    background-position: center 0;
    background-attachment:fixed;background-image:none;
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
}
body{position:absolute;left:0px;top:0px;right:0px;bottom:0px;font-weight: 400;
    color: #535353;}
body::-webkit-scrollbar {
    display: none;
}
body::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa; /* or add it to the track */
}
body::-webkit-scrollbar-thumb {
    background: #000;
}
.wrap{display: inline-block;flex-direction: column;width: 100%;float: left;position: relative}
section{margin: 0px;padding: 0px;}
i,em{font-style:normal}input:focus{outline:none;box-shadow: none;}
.w100{width: 100%;float: left}
.bg-ffffff{background: #ffffff}
.color-a0a0a0{color:#a0a0a0}
.color-535353{color:#535353}
.color-787878{color:#787878}
.color-F8AA23{color:#F8AA23}
.color-f8aa23{color:#f8aa23}
.color-308CFC{color:#308CFC}
.color-aeaeae{color:#aeaeae}
.pd10{padding: 10px;}
.pd20{padding: 20px;}
.pd-lr20{padding-left: 20px;padding-right: 20px;}
.flex-1{flex: 1}
.flex-2{flex: 2}
.flex-3{flex: 3}
.fs-12{font-size: 12px}
.fs-14{font-size: 14px}
.fs-16{font-size: 16px;}
.fs-18{font-size: 18px;}
.font-w7{font-weight: 700;}
.fl{float:left}
.fr{float:right}
.ps-r{position: relative}
.ps-a {position: absolute;}
.flexDirC{
    display: flex;
    flex-direction: column;
}
.flexDirR{display: flex; flex-direction: row}
.flexCenter{justify-content: center;align-content: center;align-items: center;}
.flexEnd{justify-content: flex-end;align-content: flex-end;align-items: flex-end;}
.flexSB {
    align-items: center;
    justify-content: space-between;
}
.flexSR{
    align-items: flex-end;justify-content: center;
}
.flexSL{
    align-items: flex-start;justify-content: center;
}
.flex-start{
    align-items: flex-start;justify-content: flex-start;
}

.flexSA {
    align-items: center;
    justify-content: space-around;
}
.flexSE {
    align-items: center;
    justify-content: space-evenly;
}
.body-view{
    position: fixed;width: 100%;z-index: 9;left:0;top:0;
    flex: 2;background: #F2F4F6;
}
.up-angle{
    position: absolute;z-index: 1;left: 50%;bottom: 0px;margin-left: -30px;width: 60px;height: 30px;
    display: none;overflow: hidden;
}
.angle,
.angleb{
    content: "";
    position: absolute;
    width: 8px;margin-left: 24px;margin-top: 8px;
    height: 8px;
    border: 4px solid #ffffff;
    border-radius: 1px;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(135deg);
    overflow: hidden;
}
.angle.ani{
    animation: angleShow 1s linear 1s infinite normal;
    -moz-animation: angleShow 1s linear 1s infinite normal;
    -webkit-animation: angleShow 1s linear 1s infinite normal;
    -o-animation: angleShow 1s linear 1s infinite normal;
}
.angleb{
    margin-top: 16px;
    animation: angleShow 1s linear 1s infinite normal;
    -moz-animation: angleShow 1s linear 1s infinite normal;
    -webkit-animation: angleShow 1s linear 1s infinite normal;
    -o-animation: angleShow 1s linear 1s infinite normal;
}
.angle.down{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #000000;
    border-radius: 1px;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
    overflow: hidden;
}
@keyframes angleShow {
    from {opacity: 1;}
    to {opacity: 0;}
}

@-moz-keyframes angleShow {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes angleShow {
    from {opacity: 1;}
    to {opacity: 0;}
}

@-o-keyframes angleShow{
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes angleAnimi {
    from {margin-top: 38px;}
    to {margin-top: 8px;}
}

@-moz-keyframes angleAnimi {
    from {margin-top: 38px;}
    to {margin-top: 8px;}
}
@-webkit-keyframes angleAnimi {
    from {margin-top: 38px;}
    to {margin-top: 8px;}
}

@-o-keyframes angleAnimi{
    from {margin-top: 38px;}
    to {margin-top: 8px;}
}
@keyframes angleAnimiB {
    from {margin-top: 46px;}
    to {margin-top: 16px;}
}
.body-show-more{
    position: fixed;z-index: 10;left: 0px;top:0px;right:0px;height:44px;background: #308CFC;
    display: none;
}
.svg{position: fixed;z-index: 2;right:0px;top:0px;width: 50px;height: 50px;}
.svg .icon{width: 20px;height: 20px;float: right;margin-top: 15px;margin-right: 15px;}
.body-data{
    position: relative;width: 100%;
    background: #f5f5f5;
    flex: 1;
}
.body-avatar,.body-mall{
    position: absolute;z-index: 1;left: 20px;top:20px;width:50px;height:50px;
    overflow: hidden;border-radius: 50px;border: 2px solid #f5f5f5;
}
.body-user{position: fixed;z-index: 20;left: 0px;top:0px;background: rgba(0,0,0,0.5);right:0px;bottom:0px;display: none;}
.body-user-view{
    position: fixed;z-index: 2;left: 90px;top:20px;background: #ffffff;border-radius: 10px;padding: 20px 0px;
    margin: 0px;
    right: 40px;
}
.body-user-view .card-title{margin-left: 20px;}
.body-user-view .card-icon{position: fixed;z-index: 2;left: 25px;top:25px;width:44px;height:44px;overflow: hidden;
    border-radius: 22px;}
.body-user-view-btn{
    height: 25px;line-height: 25px;
    border-radius: 24px;
    border: 1px solid #308CFC;
    color: #308CFC;
    padding: 0px 20px;
}
.body-user-form-view{
    position: fixed;z-index: 2;left: 0px;top:0px;background: #ffffff;border-radius: 0px;padding: 10px 0px;
    margin: 0px;
    width: 100%;
    animation:animationDown 0.2s ease-in-out 0s 1 alternate forwards;
    -webkit-animation:animationDown 0.2s ease-in-out 0s 1 alternate forwards;
}
.body-user-before{width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #ffffff;
    left: -20px;
    top: 15px;
    transform: rotate(-90deg);
    position: absolute;
}
.body-user .edit{
    position: absolute;right: 0px;top:0px;width: 40px;height: 40px;
    background: url("https://scanner.3dic.cn/weChat_offical_accounts/img/my_account/edit.png") no-repeat;
    background-size: 22px auto; background-position: 9px 9px;
}
.body-user .nickname{
    float: left;width: 100%;line-height: 25px;font-size: 14px;
}

.body-user-form-view .form{display: flex;flex-direction: column;flex: 1;background: #ffffff;}
.body-user-form-view p{display: flex;flex-direction: row;flex: 1;line-height: 30px;margin-top: 10px;}
.body-user-form-view label{width: 40px;float: left;margin-left: 10px;height: 30px;}
.body-user-form-view input{height: 30px;flex: 1;margin-left: 10px;margin-right: 10px;margin-right: 10px;border: none;border-bottom: 1px solid #dcdddd;outline:none;
    text-align:right;box-shadow: none;}
.body-user-form-view em{margin-right: 10px;}
.body-user-form-view img{width: 50px;height: 50px;margin-right: 10px;}
.body-user-form-view .btn{height: 35px;line-height: 35px;background: #dcdddd;border-radius: 6px;overflow: hidden;margin-right: 20px;color: #1b1b1b;
    padding: 0px 20px;font-size: 16px;}
.body-user-form-view .btn.ok{background: #308CFC;color: #ffffff;}
@keyframes animationDown {
    from {top:-100%;}
    to {top:0px;}
}

@-webkit-keyframes animationDown{
    from {top:-100%;}
    to {top:0px;}
}
@keyframes animationUp {
    from {top:0px;}
    to {top:-100%;}
}

@-webkit-keyframes animationUp{
    from {top:0px;}
    to {top:-100%;}
}
@keyframes animationRight {
    from {left:100%;}
    to {left:0px;}
}
.body-mall{
    top:90px;
    text-align: center;line-height: 50px;background: rgba(0,0,0,0.5);
    font-size: 14px;color: #ffffff;
}
.card-table{overflow-x: auto;white-space: nowrap;width:100%;position: fixed;top: 0px;left:0px;display:none;
    clear: both;flex-direction: row;padding: 0px 0px;background: #ffffff;z-index: 3;border-bottom: 1px solid #EDEDED;
    overflow-y: hidden;
    box-shadow: 0px 4px 4px #f3f3f3;
}
.card-table::-webkit-scrollbar {
    display: none;
}
.card-table.before:before{
    content: "";
    display: block;
    position: fixed;z-index: 1;
    margin-left: -21px;height:50px;margin-bottom: 0px;width: 21px;
    /*background-image: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(25%,#fff));
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0,#fff 25%);*/
    box-shadow: 20px 0px 20px #F9F9F9;
}
.card-table:after,.card-table.after:after{
    content: "";
    display: block;
    position: fixed;z-index: 1;
    margin-left: 100%;height:50px;margin-bottom: 0px;width: 21px;
    /*background-image: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(25%,#fff));
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0,#fff 25%);*/
    box-shadow: -20px 0px 20px #F9F9F9;
}
.card-table.after:after{display: none;}
.card-table span{padding: 16px 20px;background: none;margin-left: 0px;border-radius: 0px;overflow: hidden;
    display: flex;flex-direction: column; align-items: center;justify-content: center;position: relative;
    font-size: 14px;font-weight: 400;
    color: #959595;
}
.card-table span .icon{width: 30px;height: 30px;}
.card-table span .line{position: absolute;z-index: 1;right:0px;top:10px;bottom:10px;width:1px;background: #EDEDED;
    display: none;}
.card-table span.on{color: #308CFC;font-size: 15px;}
.card-table span.on:before{background: #308CFC;height:6px;position: absolute;left:50%;margin-left:-25px;bottom: 0px;
    content: " ";border-radius: 3px;width: 50px;display: block;}
.card-table span.on .line{background: #308CFC;display: none;}
.card-table-left-shadow{
    width: 10px;z-index: 1;height:60px;position: fixed;right:-14px;top:0px;
    -webkit-box-shadow: -10px 0 6px -4px rgba(0, 0, 0, 0.65);
    box-shadow: -10px 0 6px -4px rgba(0, 0, 0, 0.65);
}
.body-color-select{
    position: absolute;z-index: 1;right:10px;bottom:10px;
}
.body-color-select span{
    width: 40px;height: 40px;border-radius: 6px; border: 1px solid #000000;
    box-shadow: 2px 2px 2px #888888;float: left;clear: both;margin-top: 10px;
}
.card-body{
    float: left;width: 100%;clear: both;margin-top: 60px;position: absolute;
    overflow-x: hidden;left: 0;top:0;bottom:0;right:0;overflow-y: auto;
}
.card-body-article{
    position: fixed;left: 0px;right:0px;bottom:0px;background: #ffffff;display: none;
    padding-top: 0px;z-index: 1;
    overflow-y: auto;
    animation:animationRight 0.2s ease-in-out 0s 1 alternate forwards;
    -webkit-animation:animationRight 0.2s ease-in-out 0s 1 alternate forwards;
}
.card-body-article-txt {
    position: absolute;z-index: 2;left: 20px;right:20px;bottom: 0px;top:40px;
    display: flex;flex-direction: column;
}
.card-body-article-txt .article-title{
    margin-left: 20px;font-weight: 400;
    color: #535353;font-size: 18px;
}
.card-body-article-txt .article-des{
    margin-left: 20px;font-weight: 400;
    color: #757475;font-size: 14px;
    margin-top: 10px;
}
.card-body-article-txt .article-txt{
    margin-top: 20px;
    background: #FFFFFF;padding: 10px 30px 20px;border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.card-body-article .title{
    position: absolute;left: 0px;top: -90px;
    margin-left: 20px;font-weight: 400;
    color: #535353;font-size: 18px;
}
.card-body-article .title-des{
    position: absolute;left: 0px;top: -70px;
    margin-left: 20px;font-weight: 400;
    color: #757475;font-size: 14px;
}
.article-header-view{
    height: 250px;width: 100%;position: relative;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background: -webkit-linear-gradient(top, #FFFFFF,#E4F0FF); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom, #FFFFFF,#E4F0FF); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom, #FFFFFF,#E4F0FF); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #FFFFFF,#E4F0FF); /* 标准的语法 */
}
.article-header-view-icon{
    position: absolute;right:0px;top:0px;
    background: url("../bodyicon/body-article.png");
    background-repeat: no-repeat;
    background-size: 150px auto;
    height: 250px;width: 150px;
}
.article-back{width: 34px;height: 34px; z-index:2;overflow: hidden;top: 65px;left: 5px;position: fixed;
    background: #ffffff;border-radius: 4px;display: none;}
.loading{
    /*top: calc(50% - 70px);
    left: calc(50% - 70px);*/
    position: fixed;z-index: 9;left: 50%;top:50%;
    width: 60px;height: 60px;margin-left: -30px;margin-top: -30px;background: none;text-align: center;
    border-radius: 0px;overflow: hidden;
}
.loading svg{
    width: 60px;
    height: 60px;
}
.load-msg {
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 13px;
    /* margin-top: 20px; */
}
.loading svg path,.loading svg rect {
    fill: #ffffff;
}
.warp{
    background: #ffffff;clear: both;float: left;margin: 0px;padding: 0px;width: 100%;
    display: inline-block;flex-direction: column;
}
/**测量历史*/
.measure-list{
    float: left;width:100%;
}
.measure-list .measure-list-li{line-height: 24px;border-bottom: 1px dashed #E5E5E5;
    width: calc(100% - 40px);padding: 12px 20px;flex-direction: column;display: flex;
    position: relative;
}
.measure-list-li.on{
    background: #F3F8FF;
    border-bottom: 1px solid #308CFC;
}
.measure-list-li.on:before{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    left: 0px;top:-1px;right:0px;
    height: 1px;background: #308CFC;
}
.measure-list .measure-list-li:first-child{border-top: 1px solid #FFFFFF;}
.measure-list .measure-list-li:last-child{border-bottom: none}
.measure-list .measure-list-li.on:last-child{border-bottom: 1px solid #308CFC;}

.measure-list .measure-list-li span{padding: 0px 0px;line-height: 20px;}
.measure-list .measure-list-li span:first-child{font-size: 12px;}
.measure-list .measure-list-li span:nth-child(2){font-size: 14px;}
.measure-list .measure-list-li .ang{position: absolute;z-index: 1;right:0px;height:28px;top: 15px}
.measure-list .img{float: left;width: 20px;height: 20px;margin-top: 5px;margin-right: 10px;}
.measure-list .no-more{width: 100%;position: relative;text-align: center;margin-top: 20px;font-size: 12px;
    font-weight: 400;
    color: #AEAEAE; }

/**数据展示*/
.title{float: left;margin-left: 20px;text-indent: 0px;font-size: 4vw;font-weight: 700;width: 100%;overflow: hidden;}
.title em:first-child{font-size: 4vw;font-weight: 700;}
.question{margin-left: 0px;float: left;margin-top: 3px;
    display: inline-block;
    width: 4vw;
    height: 4vw;
    background: url("https://scanner.3dic.cn/weChat_offical_accounts/img/my_body/icon-question.png") no-repeat;
    background-size: contain;
    vertical-align: middle;}

.no-data{
    position: fixed;z-index: 99;left:0px;top:0px;right:0px;bottom: 0px;background: #b9d3ff;display: flex;flex-direction: column;
    align-items: center;justify-content: center;
}
.no-data.normal{
    position: relative;z-index: 0;background: none;width: 100%;float: left;clear: both;margin-top: 60px;
}
.no-data img{width: 111px;height: 106px;}
.no-data img.w50{width: 111px;height:106px}
.no-data p{line-height: 20px;color:#AEAEAE;font-size: 14px;margin-top: 15px;text-align: center}
.no-data .template{background: #308CFC;color: #ffffff;padding: 6px 15px;border-radius: 6px;overflow: hidden;margin-top: 20px;}

.canvas-loading{
    position: absolute;left:0px;top:0px;right:0px;bottom: 0px;background: #b9d3ff;display: flex;flex-direction: column;
    align-items: center;justify-content: center;z-index: 99;
}
.canvas-loading img{width: 90px;height: 90px;overflow: hidden;}
.canvas-loading p{line-height: 20px;color: #333333;font-size: 14px;margin-top: 15px;text-align: center}

.message-view{position: fixed;z-index: 999;left: 0;top:0px;right:0px;display: flex;flex-direction: row; align-items: center; justify-content: center;}
.message-view .message-view-text{background: rgba(0,0,0,0.5);border-radius: 6px;padding: 6px 20px;color: #ffffff;margin-top: 20px;max-width: 80%;
    font-size: 14px;}
.close-mask{
    width: 3vw;
    height: 3vw;
    position: absolute;
    right: 10px;top: -10px;
}
/**特征报告*/
.body-report{
    width:100%;float: left;padding: 0px;margin: 0px;
    position: relative;align-items: center;justify-content: center;overflow: hidden;
}
.body-report-bg{flex: 1;float: left;width:100%;}
.body-report-circular{position: absolute;width: 100%;margin-left:0%;top:0px;bottom: 0px;}
.body-report-circular-hale-v{position: absolute;width: 100%;height:150px;top:50%;left: 0px;overflow: hidden;margin-top: -48px}
.body-report-circular-hale{position: absolute;
    width: 180px;
    height: 180px;
    top: -30px;
    left: 50%;
    margin-left: -88px;
    border-radius: 50%;
    border: 1px solid orangered;}
.body-report-circular-normal{position: absolute;width: 160px;height:160px;top:50%;margin-top:-70px;left:50%;margin-left:-81px;border-radius: 50%; border: 5px solid #EDEDED;}
.body-report-circular-hover{position: absolute;height:160px; left:50%;margin-left:-80px;top:50%;margin-top:-70px;
}
.body-report-tag{position: absolute;width: 93px;margin-left:-178px;top:50%;left:50%;bottom: 0px;
    overflow: hidden;height: 26px;line-height: 26px;text-align: center;
    background-image: url("https://scanner.3dic.cn/weChat_offical_accounts/img/my_body/grade-1.png");
    background-repeat: no-repeat;
    background-size: 375px auto;
    background-position: -10px -69px;
}
.body-report-tag .tag{width: 83px;text-align: center;float: left;color: orangered;font-weight: 400}
.body-report-em {
    font-size: 16vw;
    font-style: normal;position: absolute;left: 0px;top:36%;text-align: center;right:0px;
    font-family: AgencyFB-Bold;
    line-height: 1;
}
.body-report-text-1 {
    font-size: 4vw;
    color: #838383;position: absolute;left: 0px;top:72%;text-align: center;right:0px;
}
.bg-percent{position: absolute;left: 50%;margin-left: -82px;top:0px;}
.body-report-text-2 {
    clear: both;
    text-align: center;
    font-size: 4.13vw;
    margin: 5vw 5vw 11vw;
    line-height: 1;
}
.body-report-text-2 span {
    color: #F8AA23;
    font-size: 5vw;
}
.body-report-canvas-b{clear: both;width: 100%;flex-direction: row;display: flex; align-items: center;justify-content: center;height:240px}

.body-report-type{
    clear: both;width: 100%;flex-direction: row;display: flex; align-items: center;justify-content: center;margin-top: 10px;margin-bottom: 10px;
}
.body-report-type span{flex: 1;margin-left: 5px;margin-right: 5px;
    box-shadow: 0rem 0rem 10px #e8e8e8;}
.body-report-type span.active{border-radius: 6px;
    box-shadow: 0rem 0rem 10px #86C8FF;
}
.box-shadow-86c8ff{
    box-shadow: 0rem 0rem 10px #e8e8e8;
    float: left;
}
.body-report-type span img{float: left;width: 100%}
.body-report-article{
    padding-top: 10px;
    /*padding-right: 30px;padding-left: 30px;*/
    padding-bottom: 20px;
    display: flex;flex-direction: column;
}
.body-report-article p{float: left;clear: both;line-height: 20px; text-indent: 0px;font-size: 14px;margin-top: 10px;
    color: #535353;font-weight: 400}
.body-report-article p.title{/*text-indent: 0px;font-size: 20px;line-height: 30px;font-weight: bold;
    color: #308CFC;text-align: center;width: 100%;
    border-left: none;margin:0px;padding:20px 0px 30px*/
    margin-top: 0px;
}
.body-report-article p.t{text-indent: 0px;font-size: 18px;line-height: 30px;font-weight: 600;color: #308CFC;margin-top: 15px;margin-bottom: 5px;}
/*.cloth-body p.t:first-child{margin-top: 0px;}*/
.body-report-article p.c{text-indent: 0px;flex-direction: row;display: flex; align-items: center;justify-content: center;}
.body-report-article p.t-c{text-indent: 0px;font-size: 18px;line-height: 30px;font-weight: bold;color: orange;margin-top: 20px;margin-bottom: 0px; text-align: center}
.body-report-article p img{max-width: 100%;margin: 0px auto;padding: 0px;}

.text-3 {
    margin: 4vw 0;
    font-size: 4.8vw;
    color: #308CFC;
    font-weight: 500;
}
.fat-rule{
    clear: both;width: 100%;flex-direction: row;display: flex; align-items: center;justify-content: center;margin-top: 10px;margin-bottom: 10px;}
.fat-rule li{margin-left:5px;margin-right: 5px;}
.fat-rule li:before {
    content: "";
    display: inline-block;
    width: 2.67vw;
    border-radius: 2vw;
    margin-right: 1vw;
    vertical-align: middle;
    border: .4vw solid #36E8B8;
}.fat-rule li:nth-child(2):before {
     border: .4vw solid #308CFC;
 }
.fat-rule li:nth-child(3):before {
    border: .4vw solid #F8AA23;
}
.fat-score{display:flex;justify-content:space-around;margin:7vw 9vw 6vw;position:relative;min-height:33vw}
.fat-score li{width:36vw;height:33vw;background-size:100% 100%;position:absolute;z-index:1;text-align:center;padding-top:10vw}
.fat-score li:nth-child(1){left:0}
.fat-score li:nth-child(2){right:0}
.fat-score em{font-style:normal;font-size:7.99vw;font-family:agencyFB-Bold;margin-bottom:3vw}
.fat-score p{font-size:3.46vw}
.fat-score .percent-circle{position:absolute;width:36vw;height:33vw;background-size:100% 100%;overflow:hidden;top:0;text-align:center;z-index:2}
.fat-score .percent-circle-left{left:0}
.fat-score .percent-circle-right{right:0}

.cloth-body{background: #ffffff;flex: 1;float: left;display: flex;flex-direction: column;width:100%}
.cloth-body p{float: left;clear: both;line-height: 20px; text-indent: 0px;font-size: 16px;margin-top: 10px;color: #535353;font-weight: 400}
.cloth-body p.title{/*text-indent: 0px;font-size: 20px;line-height: 30px;font-weight: bold;
    color: #308CFC;text-align: center;width: 100%;
    border-left: none;margin:0px;padding:20px 0px 30px*/
    margin-top: 0px;
}
.cloth-body p.t{text-indent: 0px;font-size: 18px;line-height: 30px;font-weight: 600;color: #308CFC;margin-top: 15px;margin-bottom: 5px;}
/*.cloth-body p.t:first-child{margin-top: 0px;}*/
.cloth-body p.c{text-indent: 0px;flex-direction: row;display: flex; align-items: center;justify-content: center;}
.cloth-body p.t-c{text-indent: 0px;font-size: 18px;line-height: 30px;font-weight: bold;color: orange;margin-top: 20px;margin-bottom: 0px; text-align: center}
.cloth-body p img{max-width: 100%;margin: 0px auto;padding: 0px;}

.no-phone{
    position: fixed;z-index: 9;left: 0px;top:0px;right:0px;bottom:0px;background: rgba(0,0,0,0);
}
.no-phone-text{
    position: fixed;z-index: 10;left: 0px;right:0px;bottom:0px;background: rgba(0,0,0,0.5);display: flex;flex-direction: column;align-items: center;
    justify-content: center;
}
.no-phone-text-btn{width: 80%;height: 44px;line-height: 44px;text-align: center;background: #308CFC;
    font-size: 16px;font-weight: bold; color:#ffffff;
    border-radius: 6px;overflow: hidden}
.no-phone-text p{height: 20px;margin-top: 10px;color: #ffffff;font-size: 14px;}

/**新页面*/
.top-left-view{
    position: fixed;z-index: 10;left: 25px;top:25px;display: flex;flex-direction: column;
}
.top-left-view .li{width: 44px;height: 44px;margin-bottom: 15px;border-radius: 44px;overflow: hidden;}
.top-left-view .li img{width: 44px;height: 44px;}

.card-title{
    height: 30px;line-height: 30px;font-size: 14px;color: #535353;font-weight: 400;
    display: flex;flex-direction: row;
}
.card-title-before:before{
    content: " ";display: block;
    background-image: linear-gradient(to right, #2BAEFF , #308CFC);
    width: 9px;height: 9px;border-radius: 5px;overflow: hidden;margin-right: 10px;
    margin-top: 10px;
}
.slide-bar{
    position: absolute;z-index: 1;left: 20%;bottom: 0px;margin-left: 0px;right:0px;height: 60px;
    display: inline-block;overflow: hidden;background: none;overflow: hidden;
}
.slide-bar .i{
    position: absolute;width: 40px;height: 20px;left: 30%;margin-left: -15px;margin-top: 30px;display: none;
}
.slide-bar .line{
    position: absolute;width: 40px;height: 2px;left: 30%;margin-left: 2px;margin-top: 45px;border-radius: 2px;background: #f5f5f5;display: block;
}
.slide-bar.animi .line{display: none}
.slide-bar.animi .i{margin-top: 50px;display: inline-block;
    animation: angleAnimi 1.5s linear 0s infinite normal;
    -moz-animation: angleAnimi 1.5s linear 0s infinite normal;
    -webkit-animation: angleAnimi 1.5s linear 0s infinite normal;
    -o-animation: angleAnimi 1.5s linear 0s infinite normal;
}

.angle.down{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;left: 50%;margin-left: -5px;
    border-radius: 1px;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
    overflow: hidden;
}
.angle_left_down,.angle_right_down,.angle_left_up,.angle_right_up{
    width: 15px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    border: none;
    left: 50%;top:10px;margin-left: 4px;
    transform: rotate(-30deg);
    overflow: hidden;
    position: absolute;
}
.angle_right_down{
    transform: rotate(30deg);margin-left:16px;
}
.angle_right_up{
    transform: rotate(30deg);margin-left: -12px;top:20px;
}
.angle_left_up{
    margin-left: 0px;top:20px;
}
.card-video{
    position: relative;
    display: flex;flex-direction: column;align-items: center;justify-content: center;
    width: 100%;background: none;
    display: none;margin-top: 20px;clear: both;float: left;
}
.card-video .card-video-pre-image{
    position: absolute;z-index: 1;left:0px;top:0px;right:0px;bottom:0px;
    align-items: center;justify-content: center;display: flex;flex-direction: row;
    border-radius: 10px;overflow: hidden;
}
.card-video .card-video-pre-image img{max-width: 100%;max-height: 100%;}
.card-video .card-video-play{
    position: absolute;width: 50px;height: 50px;z-index: 2;
    left: 50%;margin-left: -25px;
    top: 50%;margin-top: -25px;
}
.card-video .video-view{
    width: 100%;position: relative;float: left;
    border-radius: 10px;overflow: hidden;display: none;
}
/**时间线*/
.card-time-tree-view {
    position: relative;display: flex;flex-direction: row;width: 100%;float: left;
    align-items: flex-start;justify-content: flex-start;
}
.card-time-tree-view .name{
    font-size: 15px;
    font-weight: 500;
    color: #535353;margin-right: 0px;
    float: left;padding: 0px;
}
.card-time-tree-view .card-tree-view{
    position: relative;min-height: 85px;flex: 1;display: flex;width: 100%;
    flex-direction: column;align-items: center;
}
.card-time-tree-view .card-tree-view .def-line{height:6px;border-radius: 3px;
    margin-top: 52px;
    width: 100%;overflow: hidden;position: relative;
    display: flex;flex-direction: row;align-items: center;align-items: center;

    background: -webkit-linear-gradient(left, #72F4D1, #84BBFF, #FFEE9F, #FFBB84, #FF8C7D); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #72F4D1, #84BBFF, #FFEE9F, #FFBB84, #FF8C7D); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #72F4D1, #84BBFF, #FFEE9F, #FFBB84, #FF8C7D); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #72F4D1, #84BBFF, #FFEE9F, #FFBB84, #FF8C7D); /* 标准的语法 */
}
.body-report-li .card-time-tree-view .def-line,.body-report-article .card-time-tree-view .def-line{
    background: -webkit-linear-gradient(left, #DEF2FF,#B5D6FF,#FFEBC8); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #DEF2FF,#B5D6FF,#FFEBC8); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #DEF2FF,#B5D6FF,#FFEBC8); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #DEF2FF,#B5D6FF,#FFEBC8); /* 标准的语法 */
}
.card-time-tree-view .card-tree-view .def-line .line{
    height:6px;flex: 1;
}
/*.def-line .line.bg-CFF3EC{background: #CFF3EC;}
.def-line .line.bg-AAD0FF{background: #AAD0FF;}
.def-line .line.bg-FFE1AC{background: #FFE1AC;}
.def-line .line.bg-FFC1A8{background: #FFC1A8;}
.def-line .line.bg-FFA5AB{background: #FFA5AB;}*/
.def-line .line.bg-level1{background: #52E6D6}
.def-line .line.bg-level2{background: #308CFC}
.def-line .line.bg-level3{background: #F8AA23}
.def-line .line.bg-level4{background: #FF6628}
.def-line .line.bg-level5{background: #F82330}

.def-line .line.bg-72F4D1{background: #72F4D1;}
.def-line .line.bg-84BBFF{background: #84BBFF;}
.def-line .line.bg-7AC0FE{background: #7AC0FE;}
.def-line .line.bg-FFEE9F{background: #FFEE9F;}
.def-line .line.bg-FFBB84{background: #FFBB84;}
.def-line .line.bg-F8AA23{background: #F8AA23;}
.def-line .line.bg-FF8C7D{background: #FF8C7D;}


.def-line .line.bg-CFF3EC{background: #72F4D1;}
.def-line .line.bg-AAD0FF{background: #7AC0FE;}
.def-line .line.bg-FFE1AC{background: #F8AA23;}
.def-line .line.bg-FFC1A8{background: #FFC1A8;}
.def-line .line.bg-FFA5AB{background: #FFA5AB;}

.card-time-tree-view .card-tree-view .def-line .line-on{
    position: absolute;z-index: 1;left: 0px;top:0px;bottom: 0px;border-radius: 3px;
    background:#308CFC;
}
.card-time-tree-view .card-tree-view .def-line .line-on.bg-F8AA23{background:#F8AA23;}
.card-time-tree-view .card-tree-view .def-line .line-on.bg-f8aa23{background:#f8aa23;}
.card-time-tree-view .card-tree-view .def-line .line:last-child{border-right: none;}
.card-time-tree-view .card-tree-view .tag-view{
    position: absolute;top: 50%;margin-top: 18px;display: flex;flex-direction: row;
    align-items: center;justify-content: center;left: 0px;right:0px;
}
.card-time-tree-view .card-tree-view .tag-view .tag-name{
    height: 22px;
    font-size: 12px;
    font-weight: 400;flex: 1;text-align: center;
    color: #AEAEAE;display: flex;flex-direction: row;
    align-items: center;justify-content: center;
}
.card-time-tree-view .card-tree-view .badge-view{
    position: absolute;top: 50%;margin-top: -14px;display: flex;flex-direction: row;
    lign-items: center;justify-content: center;left: 0px;right:0px;
}
.card-time-tree-view .card-tree-view .badge-view .badge-name{
    height: 22px;
    font-size: 12px;
    font-weight: 400;flex: 2;text-align: center;
    color: #AEAEAE;
}
.card-time-tree-view .card-tree-view .badge-val,.badge-val{
    min-width: 85px;
    position: absolute;z-index: 1;top:50%;margin-top: -44px;
    display: flex;flex-direction: column;lign-items: center;justify-content: center;
}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name,.badge-val .badge-val-name {
    display: flex;flex-direction: row;align-items: center;justify-content: center;
    font-size: 14px;color: #FFFFFF;border-radius: 20px;padding: 0px 15px;
    height: 25px;line-height: 25px;
    background: #308CFC; position: relative;float: left;
}
.badge-val-current-line{height: 6px;border-radius: 3px;background: #308CFC;
    position: absolute;left: 0px;overflow: hidden;
    display: none;
}
.badge-val-current-line.bg-48DACA{background: #48DACA}
.badge-val-current-line.bg-308CFC{background: #308CFC}
.badge-val-current-line.bg-F8AA23{background: #F8AA23}
.badge-val-current-line.bg-F8AA23{background: #F8AA23}
.badge-val-current-line.bg-F82330{background: #F82330}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.svg-angle,
.badge-val .badge-val-name.svg-angle{padding-right: 5px;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name .icon,
.badge-val .badge-val-name .icon{width: 20px;height: 20px;margin-left: 4px;}
.card-time-tree-view .card-tree-view .badge-val .point,.badge-val .point{
    position: absolute;background:#FFFFFF;border:2px solid #308CFC;width: 11px;height:11px;border-radius: 8px;overflow: hidden;
    left: 50%;margin-left: -7px;bottom: -39px;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-level1{
    background:#FFFFFF;border:2px solid #48DACA;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-level2{
    background:#FFFFFF;border:2px solid #308CFC;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-level3{
    background:#FFFFFF;border:2px solid #F8AA23;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-level4{
    background:#FFFFFF;border:2px solid #FF6628;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-level5{
    background:#FFFFFF;border:2px solid #F82330;
}


.card-time-tree-view .card-tree-view .badge-val .point.color-48DACA,
.badge-val .point.color-48DACA{
    background:#FFFFFF;border:2px solid  #48DACA;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-F8AA23,
.badge-val .point.color-F8AA23{
    background:#FFFFFF;border:2px solid #F8AA23;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-F8AA23,
.badge-val .point.color-F8AA23{
    background:#FFFFFF;border:2px solid #F8AA23;
}
.card-time-tree-view .card-tree-view .badge-val .point.color-F82330,
.badge-val .point.color-F82330{
    background:#FFFFFF;border:2px solid #F82330;
}
.card-time-tree-view .card-tree-view .badge-val .badge-val-current,
.badge-val .badge-val-current{
    content: " ";text-indent: -9999px;overflow: hidden;
    left: 0px;right:0px;bottom: 100px;background: #308CFC;height:3px;
    width: 100px;
}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name:after,
.badge-val .badge-val-name:after{
    content: " ";
    position: absolute;
    left:50%;
    margin-left: -10px;
    top: 24px;
    overflow: hidden;
    width: 25px;
    height: 19px;
    border: none;
    /*border: 10px solid;
    border-color: #308CFC transparent transparent;*/
    background: url("../img/angle_normal.png") no-repeat;
}
.right-angle{
    background-image: url("../img/right-angle.png");
    background-repeat: no-repeat;
    background-size: 8px auto;
    width: 14px;
    background-position: 0px 8px;
}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level1{background: #48DACA}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level2{background: #308CFC}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level3{background: #F8AA23}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level4{background: #FF6628}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level5{background: #F82330}

.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-48DACA,
.badge-val .badge-val-name.bg-48DACA{background:#48DACA}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-308CFC,
.badge-val .badge-val-name.bg-308CFC{background:#308CFC}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-F8AA23,
.badge-val .badge-val-name.bg-F8AA23{background:#F8AA23}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-F8AA23,
.badge-val .badge-val-name.bg-F8AA23 {background:#F8AA23}

.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-FFC1A8,
.badge-val .badge-val-name.bg-FFC1A8{background:#FFC1A8}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-F82330,
.badge-val .badge-val-name.bg-F82330{background:#F82330}

.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level1:after,
.badge-val .badge-val-name.bg-level1:after{
    border-color: #48DACA transparent transparent;
    background: url("../img/level-1.png") no-repeat;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level2:after,
.badge-val .badge-val-name.bg-level2:after{
    border-color: #308CFC transparent transparent;
    background: url("../img/level-2.png") no-repeat;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level3:after,
.badge-val .badge-val-name.bg-level3:after{
    border-color: #F8AA23 transparent transparent;
    background: url("../img/level-3.png") no-repeat;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level4:after,
.badge-val .badge-val-name.bg-level4:after{
    border-color: #FF6628 transparent transparent;
    background: url("../img/level-4.png") no-repeat;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-level5:after,
.badge-val .badge-val-name.bg-level5:after{
    border-color: #F82330 transparent transparent;
    background: url("../img/level-5.png") no-repeat;}


.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-48DACA:after,
.badge-val .badge-val-name.bg-48DACA:after{border-color: #48DACA transparent transparent;
    background: url("../img/angle_diff.png") no-repeat;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-F8AA23:after,
.badge-val .badge-val-name.bg-F8AA23:after{border-color: #F8AA23 transparent transparent;
    background: url("../img/angle_up.png") no-repeat;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-F8AA23:after,
.badge-val .badge-val-name.bg-F8AA23:after{border-color: #308CFC transparent transparent;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-F82330:after,
.badge-val .badge-val-name.bg-F82330:after{border-color: #F82330 transparent transparent;
    background: url("../img/angle_up.png") no-repeat;}
.card-time-tree-view .card-tree-view .badge-val .badge-val-name.bg-308CFC:after,
.badge-val .badge-val-name.bg-308CFC:after{border-color: #308CFC transparent transparent;}
/**体脂信息*/
.body-fat{
    padding-left: 10px;padding-right: 10px;margin-bottom: 10px;background: #ffffff;
    border-radius: 6px;overflow: hidden;
}
.body-fat-weight{
    font-size: 16vw;color: #000000;
}
.body-fat-bmi{font-size: 8vw;font-weight: 500;}
.body-fat-title{
    /*border-bottom: 1px solid #f5f5f5;*/width:100%;line-height: 45px;font-size: 16px;
    float: left;height:45px;font-weight: 500;
    color: #535353;
}
.body-fat-title span{
    font-size: 16px;font-weight: 500;
    color: #535353;
}
.body-fat-title.no-border{border-bottom: none;}
.body-fat-title b{font-size: 26px;margin-right: 4px;font-weight: 500}
.body-fat-title span{padding-left: 10px;}
.body-fat-tag{height: 25px;line-height: 25px;padding: 0px 0px;border-radius: 10px;font-size: 14px;
    color: #308CFC;margin-top: 10px;
}
.body-fat-card{
    flex: 1;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;
    background: #f5f5f5;
    border-radius: 5px;padding-top: 10px;padding-bottom: 10px;
    border-right: 3px solid #dcdddd;
}
.body-fat-card:last-child{border-right: none;}
.body-fat-card .name{font-size: 14px;color: #000000;margin-bottom: 8px;}
.body-fat-card .value{font-size: 8vw;color: #000000; font-weight: 500;}
.body-fat-card .unit{font-size: 12px;margin-left: 2px;}
.body-fat-score-view{
    border-radius: 10px;
    flex: 2;margin-top: 10px;margin-bottom: 10px;
    margin-left: 5px;margin-right: 5px;
    display: flex;flex-direction: column;align-items: center;
    justify-content: center;position: relative;
    box-shadow: 0rem 0rem 10px #f3f3f3;
}
.body-fat-score-view:first-child{box-shadow: none;}
.body-fat-score-view:first-child,.body-fat-score-view:last-child{border-right: none;}
.body-fat-score-view .img{width: 22px;height: 22px;overflow: hidden;margin-top: 6px;}
.body-fat-score-view .name {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #787878;
}
.body-fat-score-view .val{
    margin-top: 4px;
    font-size: 18px;
    font-weight: 500;
    color: #308CFC;
}
.body-fat-score-view .val.color-308CFC{color: #308CFC}
.body-fat-score-view .val.color-F8AA23{color: #F8AA23}
.body-fat-score-view .val.color-48DACA{color: #48DACA}
.body-fat-score-view .score-bg{width: 70px;height: 70px;border: 8px solid rgb(228,240,255);border-radius: 50%;
    position: relative;
}
.body-fat-score-view .score-bg .val{position: absolute;z-index: 1;left: 0px;top:50%;margin-top: -10px;
    height: 20px;line-height: 20px;text-align: center;right: 0px;
    font-size: 12px;
    font-weight: 400;
    color: #308CFC;
}
.body-fat-score-view .score-bg .img{
    width: 96px;height: 96px;position: absolute;z-index: 1;left: -13px;top: -13px;
}
.body-fat-card-list{
    flex-direction: row;display: flex;flex: 1;margin-top: 15px;
    padding: 12px 0px;justify-content: center;align-items: center;
    box-shadow: 0rem 0rem 10px #f3f3f3;clear: both;
}
.body-fat-card-list .icon-view{width: 10px;height: 10px;overflow: hidden;background:#308CFC;border-radius: 10px;
    margin-left: 10px;}
.body-fat-card-list .icon{margin-right:10px;height: 14px;overflow: hidden;background:none;color: #787878}
.body-fat-card-list .name{font-size: 14px;margin-bottom: 0px;margin-left: 10px;flex:1;margin-right: 20px;
    color: #787878;
}
.body-fat-card-list .value{font-size: 14px;color: #333333;margin-right: 5px;}
.body-fat-card-list .tag{height: 20px;line-height: 20px;color: #308CFC;padding: 0px 0px;border-radius: 10px;
    margin-right: 5px;font-weight: 700;margin-left: 15px;
}
.body-fat-card-list .tag.dif,.body-fat-tag.dif{
    color: #48DACA;
}
.body-fat-card-list .tag.up,.body-fat-tag.up{
    color: #F8AA23;
}
.body-fat svg{fill: #999999;}
.body-fat svg.icon{width: 15px;height:15px;margin-right: 0px}
/**尺码推荐*/
.body-report-size {
    display: flex;flex-direction: column;width: 100%;border-radius: 4px;border: none;
}
.body-report-size .li{display: flex;flex-direction: row;font-size: 3.47vw;text-indent: 6px;color:#787878;
    overflow: hidden;border-bottom: 1px solid #dcdddd;padding: 10px 0px;font-weight: 400;
    text-align: center;align-items: center;justify-content: center;
}
.body-report-size .li.header-title,
.body-report-size .li:last-child{border-bottom: none;}
.body-report-size .li .label{flex: 10;line-height: 25px;height: 25px;flex-direction: row;display: flex;
    font-size: 14px;color:#787878;text-align: center;align-items: center;justify-content: center;}
.body-report-size .li .label.before{justify-content: flex-start;text-align: left;}
.body-report-size .li .label.before:before{
    content: " ";
    background: #308CFC;width: 10px;height:10px;border-radius: 5px;overflow: hidden;
    margin-right: 10px;display: inline;
}
.body-report-size .li.header-title .label.before:before{
    background: #FFFFFF;
}
.body-report-size .li .label.label-re{display: none;}
.body-report-size .li.header-title .label{color:#535353;}
.body-report-size .li .round{flex: 20;line-height: 25px;height: 25px;color:#787878;font-size: 14px;}
.body-report-size .li .round.normal{
    color: #535353;}
.body-report-size.no-size .li .round{flex: 14}
.body-report-size .li em:last-child,.body-report-size.no-size .li em.round{text-align: right;}

/*.cloth-body p.t:first-child{margin-top: 0px;}*/
.cloth-body p.c{text-indent: 0px;flex-direction: row;display: flex; align-items: center;justify-content: center;}
.cloth-body p.t-c{text-indent: 0px;font-size: 18px;line-height: 30px;font-weight: bold;color: orange;margin-top: 20px;margin-bottom: 0px; text-align: center}
.cloth-body p img{max-width: 100%;margin: 0px auto;padding: 0px;}
.cloth-body-card{
    position: relative;border-radius: 6px;
    border-bottom: 1px solid #E5E5E5;padding: 15px 0px 15px;
    font-size: 3.47vw;line-height: 20px;display: flex;flex-direction: column;
    /*box-shadow: 0px 0 6px 1px #86C8FF;*/
}
.cloth-body-card:last-child{border-bottom: none;}
.cloth-body-card .name{
    width: 100%;left: 0px;top:0px;background: #ffffff;line-height: 20px;height: 20px;
    padding: 0px 0px;font-size: 14px;
    font-weight: 400;
    color: #787878;
    display: flex;flex-direction: row;
    justify-content: flex-start;align-items: center;
}
.cloth-body-card .name:before{width: 10px;height: 10px;overflow: hidden;background:#308CFC;border-radius: 10px;
    margin-right: 10px;content: " ";text-indent: -999px;display: block;}
.cloth-body-card .text{
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);clear: both;
    font-size: 14px;
    font-weight: 400;
    color: #535353;
}
/**量体数据展示*/
.body-data-notes{
    height: 39px;text-align: center;line-height: 39px;
    background: #FFFFFF;
    border: 1px solid #308CFC;
    border-radius: 18px;width: 100%;float: left;color: #308CFC;
}
.body-data-view{
    padding: 0px 15px 10px;display: flex;flex-wrap: wrap;
}
.body-data-view .w33{width: calc(33.33% - 18px);margin: 7px 7px;display: flex;flex-direction: column;
    text-align: center;justify-content: center;align-items: center;box-shadow: 0rem 0rem 10px #f3f3f3;
    padding: 10px 0px;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
}
.body-data-view .w33.on{background: #f8fbff;border-color: #308CFC;}
.body-data-view .w33 img{width: 28px;height:28px;}
.body-data-view .w33 p{font-size: 12px;margin-top: 6px;
    font-weight: 400;
    color: #787878;}
.body-data-view .w33 span{
    font-size: 18px;margin-top: 6px;
    font-weight: 500;
    color: #535353
}
.body-data-view-w100{width: calc(100% - 20px);display: flex;flex-direction: column;
    text-align: center;justify-content: center;align-items: center;box-shadow: 0rem 0rem 10px #f3f3f3;
    padding: 10px 0px;
    border: 1px solid #FFFFFF;
    border-radius: 8px;margin-left: 10px;
}
.body-trend-view-head{
    display: flex;flex-direction: row;height: 22px;line-height: 22px;
    align-items: center;width:100%;float: left;
}
.body-trend-view-head .img{margin-left: 10px;width:22px;height:22px;float: left}
.body-trend-view-head .name{
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    margin-left: 10px;
}
.body-trend-view-head .unit{
    font-size: 12px;
    font-weight: 400;
    color: #AEAEAE;
    margin-left: 10px;
}
.body-trend-view-head .angle-view{
    float: right;position: relative;
    width: 22px;height: 22px;overflow: hidden;margin-right: 10px;
}
.body-trend-view-head .angle-view:before{
    content: "";
    display: block;
    width:20px;height:2px;
    background: #AEAEAE;
    transform: rotate(45deg);
    margin-left: -6px;
    margin-top: 10px;
    position: absolute;
}
.body-trend-view-head .angle-view:after{
    content: "";
    display: block;
    width:20px;height:2px;
    background: #AEAEAE;
    transform: rotate(-45deg);
    margin-left: 7px;
    margin-top: 10px;
    position: absolute;
}
.body-report-score{
    width: 247px;height: 135px;position: relative;
}
.body-report-score-tag{
    position: absolute;z-index: 1;
    left: 50%;top: 10px;
}
.body-report-score-tag em{
    background:#308CFC;border-top-left-radius: 10px;border-bottom-right-radius: 10px;color: #ffffff;
    font-size: 12px;padding: 4px 10px;margin-bottom: 10px;margin-right:10px;
    margin-left: 50px;
}
.body-report-score-tag em:nth-child(2){
    position: absolute;z-index: 1; margin-left: -300px;
    top:20px;background: #FFEFE6;color: #F8AA23;
}
.body-report-score-tag em:nth-child(3){
    margin-top: 30px;
    position: absolute;z-index: 1; margin-left: -60px;
    top:20px;background: #FFEFE6;color: #F8AA23;
}
.body-report-score .img{width: 240px;height: 139px;position: absolute;left:0px;top:0px;}
.body-report-score .progress-bar{
    left: 6px;
    top: 10px;
    right: 8px;
    height:279px;
    position: absolute;border-radius: 50%;
    background: -webkit-linear-gradient(left, #C2DDFF,#318FFC);
    background: -o-linear-gradient(right, #C2DDFF,#318FFC);
    background: -moz-linear-gradient(right, #C2DDFF,#318FFC);
    background: linear-gradient(to right, #C2DDFF,#318FFC);
}
.body-report-score .canvas-progress-bar{
    left: 6px;
    top: 2px;
    right: 8px;
    height:139px;
    position: absolute;
}
.body-report-score .canvas-progress-point{
    left: -2px;
    bottom: 2px;
    right: 8px;
    height:20px;
    width: 20px;
    border-radius: 50%;
    border: 4px solid #318FFC;
    position: absolute;
    background: #FFFFFF;
}
.canvas-score{border-radius: 50%;box-shadow: 0rem 0rem 10px #f3f3f3;overflow: hidden;}
.body-report-score .semicircle{
    left:0px;top:20px;right: 0px;height:279px;
    background: #FFFFFF;position: absolute;border-radius: 50%;
}
.body-report-score .score-view{
    font-size: 36px;
    font-weight: 500;
    color: #308CFC;
    left:0px;top:70px;right: 0px;position: absolute;
    text-align: center;
}
.body-report-score .score-desc{
    font-size: 14px;
    font-weight: 400;
    color: #787878;
    left:0px;top:115px;right: 0px;position: absolute;
    text-align: center;
}
.body-report-score-des{font-size: 14px;
    font-weight: 400;
    color: #787878;
    width: 100%;float: left;text-align: center;
    margin-top: 20px;
}
.body-data2{padding: 20px;display: flex;flex-wrap: wrap;}
.body-data2 li{width: calc(50% - 4px);position: relative;border: 2px solid #FFFFFF;}
.body-data2 li p{
    padding-top: 10px;border-top: 1px solid #E5E5E5;padding-bottom: 20px;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    margin-right: 36px;
    display: flex;flex-direction: column;
}
.body-data2 li.on p{border-top: 1px solid #308CFC;background: #f8fbff;
    border-bottom: 1px solid #308CFC;
    border-right: 1px solid #308CFC;
    border-left: 1px solid #308CFC;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.body-data2 li p:before{
    content: " ";
    position: absolute;left: -4px;top:-4px;
    width: 8px;
    height: 8px;
    background: #308CFC;
    border-radius: 50%;;
}
.body-data2 li.on p:before{background: #308CFC;}
.body-data2 li p em{
    margin-left: 15px;
    font-size: 18px;
    font-weight: 400;
    color: #535353;
}
.body-data2 li p span{
    margin-left: 15px;
    font-size: 12px;
    font-weight: 400;
    color: #787878;
    margin-top: 5px;
}
.body-data2 li img{
    position: absolute;top:20px;right:46px;
    width: 30px;
}
section .msg-alert-box {
    color: #787878;
    display: flex;flex-direction: column;padding-bottom: 30px;
}
section .msg-alert-box p {
    margin-left: 20px;margin-right: 20px;
    border-radius: 10px;overflow: hidden;
    padding: 15px 15px;
    font-size: 14px;
    line-height: 4.8vw;
    background: #F3F8FF;
    position: relative;display: flex;flex-direction: row;
}
section .msg-alert-box p.warning{
    color: #F8AA23;
    background: #FFEFE6;
}
section .msg-alert-box p:before{
    content: "";
    background: url("../img/warning.png");
    background-size: 20px auto;
    color: #E5E5E5;
    font-size: 12px;float: left;
    flex-basis: 20px;
    width: 20px;
    border-radius: 20px;height: 20px;display: block;margin-right: 8px;
    text-align: center;line-height: 20px;overflow: hidden;
}
section .msg-alert-box p.no-before:before{display: none}
section .msg-alert-box button,section .msg-alert-box .button {
    margin: 15px auto;
    display: block;
    color: #787878;
    background: 0 0;
    padding: 8px 10vw;
    border: 1px solid #AEAEAE;
    border-radius: 18px;
    font-size: 4vw;
    font-weight: 500;
}

.msg-box {
    background: rgba(0,0,0,0.5);
    border-radius: 0vw;
    width: 100%;
    margin: 0vw;
    position: fixed;
    z-index: 99;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.msg-box .msg-bg {
    width: 85%;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.msg-box .msg-bg img {
    width: 3vw;
    height: 3vw;
    position: absolute;z-index: 2;padding: 10px 10px;
    top: 3vw;
    right: 3vw
}
.msg-bg .header{
    height: 60px;position: relative;
    float: left;width: 100%;
    background: -webkit-linear-gradient(top, #FFFFFF,#E4F0FF); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom, #FFFFFF,#E4F0FF); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom, #FFFFFF,#E4F0FF); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #FFFFFF,#E4F0FF); /* 标准的语法 */
}
.msg-bg .header-child{
    height: 30px;position: relative;display: flex;flex-direction: row;
    clear: both;
    float: left;width: 100%;background: #FFFFFF;align-items: center;
    background: none;
}
.msg-bg .header:after{
    content: "";
    position: absolute;
    background-image: url("../img/head-adorn.png");
    background-position: right  0px center;
    background-repeat: no-repeat;
    right: 0px;top:0px;
    left: 50%;height: 90px;
    background-size: auto 90px;
}
.msg-bg .header-child:after{
    display: none;
}

.msg-box .header h5 {
    position: relative;
    font-size: 18px;margin-left: 40px;
    margin-top: 10px;margin-bottom: 40px;
    font-weight: 400;
    color: #535353;
}
.msg-box .header-child h5{
    height: 34px;line-height: 34px; position: relative;
    font-size: 14px;margin-left: 0px;margin-top: 0px;margin-bottom: 0px;
    font-weight: 500;
    color: #535353;
}
.msg-box .header-child em.before{
    content: " ";
    display: inline;
    overflow: hidden;
    width: 4px;
    height: 4px;
    border: 2px solid #2BAEFF;
    background: #2BAEFF;
    margin-right: 15px;
    margin-left: 18px;
    border-radius: 50%;
    margin-top: 0px;
}
.msg-box .header h5:after{
    content: " ";
    width: 43px;
    height: 6px;
    background: #99C7FF;
    border-radius: 6px;
    position: absolute;left: 0px;top:35px;
}

.msg-box .msg-bg ul,.msg-box .msg-bg .ul {
    padding: 4vw 5vw;
    font-size: 3.2vw;
    color: #5B5B5B;
    line-height: 1.8;
    margin: 0px 0px 10px;
    flex: 1;
    position: relative;
}
.msg-box .msg-bg ul{overflow-y: auto;}
.msg-box .msg-bg .ul{
}
.msg-box .msg-bg .ul:after{
    content: "";
    height: 1px;position: absolute;z-index: 1;left: 20px;right:20px;
    border-bottom: 1px solid #e5e5e5;
    top: 50px;
}
.msg-box .msg-bg li{
    width: 100%;
    line-height: 23px;
    font-size: 12px;float: left;
    position: relative;
    font-weight: 400;
    color: #535353;
}
.msg-box .msg-bg em.before{
    display: block;overflow: hidden;
    flex-basis: 4px;
    width: 4px;
    height: 4px;
    border:2px solid #2BAEFF;
    border-radius: 50%;
    margin-top: 6px;float: left;
    position: absolute;
}
.msg-box .msg-bg li span{float: left;margin-left: 20px}
.msg-box .header-child h5{float: left;margin-left: 40px}

.msg-box .msg-bg em {
    font-style: normal;
    color: #535353;
}
.msg-box .msg-bg i{flex: 1;margin-left: 4px;}

.msg-box .msg-bg p {
    font-size: 3.2vw;
    color: #535353;
    margin: 5vw 0;
    line-height: 4.8vw
}

.msg-box div#msgContent {
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;flex-direction: column;
}

.msg-box div#msgContent::-webkit-scrollbar {
    width: .53vw;
    height: .53vw;
    background-color: #fff
}

.msg-box div#msgContent::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
    background-color: #fff
}

.msg-box div#msgContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #EDEDED
}

.body-report-li{
    /*border-radius: 8px;*/
    border-bottom: 1px solid #E5E5E5;position: relative;
    padding: 10px 10px 10px;margin:0px 20px 0px;display: flex;flex-direction: column;flex: 1;
}
.body-report-li .body-report-circle{
    width: 9px;
    height: 9px;
    background: #308CFC;
    border-radius: 50%;
    display: block;
    margin-top: 20px;
}
.body-report-li:first-child{border-top: 1px solid #E5E5E5;}
.body-report-li:last-child{border-bottom: none;}
.body-report-li .name{font-size: 12px;
    font-weight: 400;
    color: #787878;}
.body-report-li .icon{width: 48px;height: 48px;}
.body-report-li .report-angle .icon{width: 20px;height: 20px}
.body-report-li .report-angle .icon path:nth-child(1){display: inline-block}
.body-report-li .report-angle .icon path:nth-child(2){display: none}
.body-report-li.on .report-angle .icon path:nth-child(1){display: none}
.body-report-li.on .report-angle .icon path:nth-child(2){display: inline-block}
.fold-view{
    float: left;width: 100%;clear: both;display: none;
    margin-top: 10px;margin-bottom: 10px;
}
.body-report-li.on .fold-view{display: block}
.body-report-li em{font-size:4.13vw;color: #333333;line-height: 22px; font-weight: 400;text-align: center}
.body-report-li p{line-height: 20px;font-size:12px;color: #333333;text-align: left;}
.body-report-li p.tac{text-align: center;}
.body-report-li b{font-weight: 700}
.body-report-li b.h48{height: 48px;line-height: 48px;}
.body-report-li b.size4{font-size: 14px;font-weight: 700;}
.body-report-li .a,.body-report-li-a{text-decoration: none;
    font-size: 12px;font-weight: 400;padding: 3px 10px;
    margin-top: 18px;position: absolute;right:0px;bottom:0px;
    border: 1px solid #AEAEAE;
    border-radius: 12px;
    color: #AEAEAE;
}
.body-report-li .a.mr{right:10px;bottom:20px;}


.point-view{
    position: relative;min-height: 90px;clear: both;margin-left: 20px;margin-right: 20px;
}
.point-view .badge-val{margin-top: -45px;}
.point-view-text{
    position: absolute;left: 0px;top:22px;right:0px;background: none;border-radius: 0px;
    display: flex;flex-direction: row;color: #AEAEAE;font-size: 11px;
    font-weight: 400;
}
.point-view-text.i-dark{top: 60px;}
.point-view-text.i-dark i{color: #AEAEAE;font-size: 11px;
    font-weight: 400;}
.point-view-text b{
    font-size: 11px;
    font-weight: 400;
    flex: 2;
    text-align: center;
    color: #AEAEAE;
}
.point-view-line{
    position: absolute;left: 0px;top:48px;height: 6px;right:0px;background: #dcdddd;border-radius: 3px;
    display: flex;flex-direction: row;overflow: hidden;
}
.body-report-article .point-view{margin-left: 0px;margin-right: 0px;}
.body-report-article .point-view-line,.body-report-article .point-view-text{left:0px;right:0px;}
.body-report-article .card-tree-view.ml30{margin-left: 0px;}
.body-report-article .size4{margin-left: 15px;}
.point-view-line .on{flex:1;height:6px;}
.point-view-normal{background: #0D90FF;}
.point-view-green{background:  #0D90FF;}
.point-view-warning{background: orange;}
.point-view-weight{background: #f57911;}
.point-view-error{background: #f5222d;}
.point-view-diff{}
.point-view-cycle{
    position: absolute;left: 20px;top:28px;
    overflow: hidden;width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #333333;
}
/**趋势*/
.trend-full-view{
    display: block;background: #F3F5F9;width: 100%;float: left;position: relative;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}
.trend-full-view .trend-body-view{
    position: relative;width: 100%;display: flex;flex-direction: row;
    /*position: absolute;left: 0px;top:90px;right:0px;bottom:0px;*/touch-action: pan-y;
    overflow: hidden;
}
.trend-full-view .trend-title{
    font-size: 18px;
    font-weight: 700;
    color: #2D2D2D;
    position: absolute;left: 20px;top:15px
}
.trend-full-view .time-view{
    position: relative;z-index: 1;left: 0px;top: 0px;bottom: 0px;padding:0px;
    width: 100px;
}
.trend-full-view .time-view .line{
    position: absolute;left: 24px;width:2px;top:40px;height:0px;overflow: hidden;
    border-radius: 5px;opacity: 0.5;
    background: -webkit-linear-gradient(top, #835AF5, #308CFC);
    background: -o-linear-gradient(bottom, #835AF5, #308CFC);
    background: -moz-linear-gradient(bottom, #835AF5, #308CFC);
    background: linear-gradient(to bottom, #835AF5, #308CFC);
}
.trend-full-view .time-view .line:before{
    content: " ";position: absolute;left: -5px;top:-16px;
    overflow: hidden;width: 0;display: none;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #333333;
    transform: rotate(0deg);
}
.trend-full-view .time-view .line:after{display: none;
    content: " ";position: absolute;left: -0px;bottom:-1px;
    overflow: hidden;width: 10px;
    height: 10px;
    background:#333333;
    border-radius: 5px;
}
.trend-full-view .time-view .time-list{
    position: relative;top: 10px;bottom:0px;left:0px;padding-top: 10px;
    overflow-y: auto;width:120px;flex: 1;
}
.trend-full-view .time-view .time-list::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar { width: 0 !important;height:0px !important; }
.trend-full-view .time-view .time-list .year{
    position: absolute;
    transform: rotate(0deg);
    color: #a5a5a5;font-size: 12px;left: 8px;
    top: -42px;
}
.trend-full-view .time-view .time-list .year:after{
    content: " ";
    position: absolute;
    width: 8px;
    height: 8px;
    background: transparent;
    top: 0px;
    left: 46px;
    border: 2px solid #a5a5a5;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    z-index: 9;
}
.trend-full-view .time-view .time-list .li{
    position: relative;
    clear: both;display: flex;flex-direction: row;align-items: center;
    margin-left: 30px;margin-top: 0px;height: 25px;
    padding: 0px 0px 80px;
}
.trend-full-view .time-view .time-list .li:nth-last-child(2){margin-bottom: 0px;}
.trend-full-view .time-view .time-list .li:last-child{margin-bottom: 0px}
.trend-full-view .time-view .time-list .li:before{
    content: " ";position: absolute;left: -14px;top:8px;
    overflow: hidden;width: 14px;
    height: 14px;
    border:2px solid #D9D9D9;background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 0px 10px #ABABAB;
}
.trend-full-view .time-view .time-list .li.on:before{
    background: #FFFFFF;box-shadow: 0px 0px 10px #308CFC;
    border:2px solid #95C5FF;
}
.trend-full-view .time-view .time-list .li:after{
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    background: #A9A9A9;
    border-radius: 50%;
    left: -9.462%;top:14px;
    z-index: 9;
}
.trend-full-view .time-view .time-list .li.on:after{
    background: #308CFC;
    /*top: 15px;
    left: -10px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);*/
}
.trend-full-view .time-view .time-list .li em{margin-left: 12px;margin-top: 10px;
    font-weight: 500;font-size: 12px;
    color: #aeaeae;
}
.trend-full-view .time-view .time-list .li.on em{color:#308CFC;}
.trend-full-view .time-view .refer-view{
    position: absolute;z-index: 10;width: 80px;height:22px;background: none;
    top: 0px;left: 10px;/*touch-action: pan-y;*/margin-top: 16px;
    border: none;padding: 10px 0px;
    /*box-shadow: 0px 0px 10px #F82330;*/
}
.trend-full-view .time-view .refer-view:before{
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url("../trendicon/move.png?v=1") no-repeat;
    background-size: 30px auto;
    top: -5px;
    left: -2px;
    /*border: 2px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);*/
    z-index: 9;
}
.trend-full-view .time-view .refer-view .time{
    padding: 0px 0px 0px 6px;color: #FFFFFF;font-size: 12px;font-weight: 500;
    width:50px;text-align: center;
    height: 18px;display: flex;flex-direction: row;align-items: center;justify-content: center;
    background: #F82330;
    border-radius: 18px;position: absolute;
    border: 2px solid #F82330;
    left: 16px;top:-1px;
    /*box-shadow: 0px 0px 10px #F82330;*/
}
.trend-full-view .time-view .refer-view .time:before{
    content: " ";display: inline-block;visibility: initial;
    position: absolute;left: -7px;height:16px;width: 30px;top:4px;
    background: #F82330;z-index: -1;
    box-shadow: 0px 0px 10px #FF6628;display: none;
}
.trend-full-view .trend-cycle-view{
    /*position: absolute;left: 130px;top:0px;right:0px;bottom:0px;*/
    /*background: #FFFFFF;*/padding-top: 23px;position: relative;flex: 1;
    margin-right: 20px;width: calc(100% - 20px);overflow: hidden;
}
.trend-full-view .trend-cycle-view .canvas{
    width: 100%;float: left;margin-bottom: 20px;
    display: flex;flex-direction: column;align-items: center;justify-content: center;
    /*overflow: hidden;*/text-indent: 0px;position: relative;
    box-shadow: 0rem 0rem 10px #E9E9E9;
    background: #FFFFFF;border-radius: 12px;
}
.trend-full-view .trend-cycle-view .part-des{
    position: absolute;z-index: 1;left: 10px;font-size: 14px;color: #E5E5E5;
}
.trend-full-view .trend-cycle-view .part-des.part-back{
    top: 50px;
}
.trend-full-view .trend-cycle-view .part-des.part-front{
    bottom:20px;
}
.trend-full-view .part-title{
    position: absolute;right:-4px;display: flex;flex-direction: column;
    align-items: flex-start;justify-content: flex-start;
    font-size: 14px;
    font-weight: 400;width: 60px;text-align: left;
    color: #858585;z-index: 1;top:50px;
    height: 40px;
}
.trend-full-view .part-title .li{flex-direction: row;display: flex;flex:1;
    align-items: center;justify-content: flex-start;height:20px;}
.trend-full-view .part-title .li i{height: 8px;width:8px;border-radius: 4px;}
.trend-full-view .part-title .li .val{
    margin-left: 8px;
    font-size: 12px;
    font-weight: 400;
    float: right;
    display: block;
}
.trend-full-view .part-title-diff{
    position: absolute;right:-4px;display: flex;flex-direction: column;
    align-items: flex-start;justify-content: flex-start;
    font-size: 12px;
    font-weight: 400;width: 60px;text-align: left;
    color: #858585;z-index: 1;bottom:26px;
    height: 40px;
}
.trend-full-view .trend-cycle-view .img{
    /*transform: rotate(270deg);*/
    max-height: 200px;max-width: 200px;
    /*filter: drop-shadow(40px 0px yellow);*/
    background-blend-mode: lighten;
    background-size: cover;
}
.trend-exit-full{
    position: fixed;z-index: 9999;right:20px;top:15px;
    padding: 8px 15px;border-radius: 15px;background: #308CFC;color: #535353;overflow: hidden;
    box-shadow: 0px 0px 10px #95C5FF;color:#FFFFFF;
}




.trend-full-bar-view{
    position: fixed;min-height:30px;z-index: 9999;left:30px;bottom:30px;right:30px;
    padding:0px;margin:0px;
}
.trend-full-bar-view .bar-line{
    height:10px;position: absolute;left:0px;bottom:10px;right:0px;background: #ffffff;border-radius: 5px;overflow: hidden;display: inline-block
}
.trend-full-bar-view .bar-line-cover{
    height:10px;width:0;position: absolute;left:0px;bottom:10px;background: #2BAEFF;border-radius: 5px;overflow: hidden;display: inline-block
}
.trend-full-bar-view .bar-ball-bg{
    height:26px;width:26px;position: absolute;left:12px;bottom:0px;
    background:rgba(255,255,255,0);border-radius: 50%;overflow: hidden;display: inline-block;
    border: 2px solid #FFFFFF;
}
.trend-full-bar-view .bar-ball{
    height:30px;width:30px;position: absolute;left:0;bottom:0px;background:#2BAEFF;border-radius: 50%;overflow: hidden;display: inline-block
}
.trend-full-bar-view .tip-view{
    position: absolute;z-index: 1;left:0px;bottom: 45px;background: rgba(0,0,0,0.5);
    border-radius: 15px;padding: 6px 10px;font-size: 16px;font-weight: 700;color: #ffffff;

}
.trend-full-bar-view .tip-view.on{
    background: #2BAEFF;
}
.trend-full-bar-view .tip-view:before{
    content: "";display: inline-block;position: absolute;
    left: 50%;bottom:-10px;margin-left: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.5);
}
.trend-full-bar-view .tip-view.on:before{
    border-top: 10px solid #2BAEFF;
}
.trend-full-card-view{
    position: fixed;z-index: 9999;left:0px;top:60px;right:0px;background: #FFFFFF;
    padding:10px 0px;margin:0px;border-radius: 0px;overflow: hidden;
    border: none;overflow-x: auto;touch-action: pan-x;
}
.trend-full-card-view .tip-view{
    float: left;
    position: relative;background: rgba(0,0,0,0);margin-left: 20px;
    border-radius: 10px;padding: 0px 0px;font-size: 12px;font-weight: 400;color: #000000;
    height: 30px;display: flex;flex-direction: row;align-items: center;justify-content: center;
    margin-right: 10px;margin-top: 0px;
}
.trend-full-card-view .tip-view:last-child{margin-right: 0px;}
/*.trend-full-card-view .tip-view.on{color: #FFFFFF;}*/
.trend-full-card-view .tip-view i{position: relative;
    width:23px;height:23px;border-radius: 50%;overflow: hidden;margin-right: 8px;
    background: none;border: 1px solid #BFBFBF;float: left;}
.trend-full-card-view .tip-view.on i{
    background: #308CFC;border-color: #308CFC;
    border-width: 0px;width: 24px;height:24px;
}
.trend-full-card-view .tip-view i:before{
    content: "";display: none;
    position: absolute;
    width: 14px;
    height: 8px;z-index: 1;right:-1px;
    background: transparent;
    top: 4px;
    left: 5px;
    border: 3px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);
    z-index: 9;
}
.trend-full-card-view .tip-view.on i:before{
    display: inline-block;
}
.trend-full-card-view .tip-view i:after{

}
.trend-full-card-view .tip-view.on:after{
    display: inline-block;
}
.trend-cycle-view-line-view {
    position: fixed;z-index: 9999;
    left: 20px;top: 150px;background: rgba(0,0,0,0);
    flex-direction: column;
    border-radius: 10px;overflow: hidden;
}
.trend-cycle-view-line-view:before{
    content: " ";display: inline-block;position: absolute;left: 10px;
    top:13px;width:10px;bottom:12px;
    background: #FFFFFF;
}
.trend-cycle-view-line-view .time{
    width:100%;float:left;font-size: 12px;color: #FFFFFF;position: relative;
    height: 30px;display: flex;flex-direction: row;align-items: center;
    margin-bottom: 10px;border-radius: 10px;
}
.trend-cycle-view-line-view .time:last-child{margin-bottom: 0px;}
.trend-cycle-view-line-view .time.on{
    /*background: rgba(0,0,0,0.3);*/
}
.trend-cycle-view-line-view .time.on:before{
    content: "";display: inline-block;position: absolute;z-index: 1;
    width: 16px;height: 16px;left: 5px;border:2px solid #308CFC;border-radius: 50%;
    overflow: hidden;
}
.trend-cycle-view-line-view .time .before{
    width: 10px;height:10px;margin-left: 10px;
    left: 0px;top:0px;border-radius: 8px;overflow: hidden;margin-right: 16px;float: left;
}
.trend-cycle-view-line-view .time em{display: none}
.trend-cycle-view-line-view .time.on em{display: block;}

.bod-box{
    margin: 0 12px 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
    /* padding-bottom:20px; */
}
.cont_tit{
    font-size: 16px;
    font-weight: 800;
    color: #676767;
    line-height: 16px;
    padding: 15px 0 15px 15px;
}
.cont_txt{
    font-size: 12px;
    font-weight: 400;
    color: #676767;
    line-height: 18px;
}
.card_cont{
    padding: 0 16px 15px 16px;
}
.card_cont.max-height,.part-list-article-card .max-height{
    max-height: 160px;overflow: hidden;
}
.show-all .card_cont.max-height,.part-list-article-card.show-all .max-height{
    max-height: 100000px;
}
.body_tag{
    height:400px;position: relative;
    background: linear-gradient(0deg, #EFFAFF 0%, #D8F0FF 49%,#B7D7FF  100%);
}
.cloth-body-recommend-view{
    background: #EFFAFF;overflow-x: hidden;
}
.cloth-body-recommend-view em{
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
    text-align: justify;
    justify-content: space-between;
    display: flex;
}
.cloth-body-recommend-view em.more-view{
    display: none;
}
.cloth-body-recommend-view.show-all em.more-view{
    display: flex;
}
.cont_txt em{
    text-indent: 2em;
}
.mask-view{
    position: fixed;z-index: 100;left:0px;right:0px;bottom:0px;top:0px;
    background: none;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.mask-view-bg{
    position: fixed;z-index: 100;left:0px;right:0px;bottom:0px;top:0px;
    background: rgba(0,0,0,0.5);
}
.mask-view .mask-view-content{
    padding: 0px 0px;z-index: 101;max-height: 100%;max-width: 100%;
}
.cloth-body-recommend-view.fix-view{
    position: fixed;z-index: 99;left:0px;right:0px;bottom:0px;
    /*top: 0px;*/
}
.cloth-body-recommend-view.fix-view .bod-box{
    margin: 0;
    background-color: #EFFAFF;
    border-radius: 0px;
}
.cloth-body-recommend-view .fix-head-back {
    width: 34px;height: 34px; z-index:2;overflow: hidden;top: 65px;left: 5px;position: fixed;
    background: #ffffff;border-radius: 4px;display: none;
}
.cloth-body-recommend-view.fix-view .fix-head-back {
    width: 34px;
    height: 34px;
    display: flex;flex-direction: row;align-items: center;justify-content: center;
    z-index: 2;
    background: none;position: relative;top:0;float: left;
}
.cloth-body-recommend-view.fix-view .cont_tit{
    padding-left: 4px;
}
.cloth-body-recommend-view.fix-view .view-hide{
    display: none !important;display: none;
}
.cloth-body-recommend-view.fix-view .part-list-article-card{
    display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;
    margin-bottom: 20px;background: #FFFFFF;border-radius: 10px;padding: 10px 16px;
}
.cloth-body-recommend-view .part-list-article-card.fix-des-view{
    display: none;
}
.cloth-body-recommend-view.fix-view .part-list-article-card.fix-des-view{
    display: flex;
}
.cloth-body-recommend-view.fix-view .part-list-article-card .article-name{
    text-indent: 0em !important;text-indent: 0;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 800;
    color: #676767;
    padding: 0px 0 0px 0px;
    margin-bottom: 15px;
}
.cloth-body-recommend-view.fix-view .part_list{
    background: #FFFFFF !important;
}
.cloth-body-recommend-view .content-em{
    width: 2em;float: left;display: inline-block;
    height: 10px;
}
.cloth-body-recommend-view-tag-name em{
    font-size: 12px;
    font-weight: 400;
    color: #676767;
    line-height: 1.5em;
}
.cloth-body-recommend-view .icon{
    width: 20px;
    height: 20px;
}
.cloth-body-recommend-view path{fill: #676767;}
.cloth-body-recommend-view path:nth-child(1){display: inline-block}
.cloth-body-recommend-view path:nth-child(2){display: none}
.cloth-body-recommend-view.show-all path:nth-child(1){display: none}
.cloth-body-recommend-view.show-all path:nth-child(2){display: inline-block}
.cloth-body-recommend-view .show-more-view,.show-more-view-any{
    right:10px;height: 30px;position: absolute;left:0px;bottom:0;
    background: rgba(255,255,255,1);
    box-shadow: 0px -10px 10px rgba(255,255,255,0.95);
    display: flex;flex-direction: row;align-items: center;justify-content: center;
}
.part-article-list-view{
    border-radius: 10px;
}
.fix-view  .part-article-list-view{
    border-radius: 10px;
    padding-bottom: 50px;
}
.cloth-body-recommend-view.show-all .show-more-view,.show-all .show-more-view-any {
    box-shadow:none;position: relative;
    float: left;
    width: 100%;
}
.cloth-body-recommend-view.fix-view .show-more-view{
    display: none;
}
.cloth-body-recommend-view .show-more-view i{background: #676767;top:20px;}
.cloth-body-recommend-view.show-all .show-more-view i.angle_left_up{
    margin-left: -12px;
}
.cloth-body-recommend-view.show-all .show-more-view i.angle_right_up{
    margin-left: 0px;
}
.cloth-body-recommend-view .cloth-recommend-article-view{
    display: flex;flex-direction: column;
}
.cloth-body-recommend-view .squared-paper{
    display: flex;flex-wrap: wrap;flex-direction: revert;width:calc(100% + 30px);
}
.cloth-body-recommend-view.show-all .squared-paper{
    flex-direction: column;width:100%;
}
.cloth-body-recommend-view .cloth-recommend-article-view em{
    text-indent: 0em;font-size: 12px;line-height: 18px;color: #676767;
}
.cloth-body-recommend-view .cloth-recommend-article-view br.more-view{
    display: none;
}
.cloth-body-recommend-view.show-all br.more-view{
    display: inline-block;
}
.cloth-body-recommend-view .img{
    width: calc(33% - 10px);float: left;
    height: 80px;position: relative;
    display: flex;flex-direction: row;align-items: center;justify-content: center;
    background: #f5f5f5;border-radius: 4px;overflow: hidden;
}
.cloth-body-recommend-view .img.mr10{
    margin-right: 10px;margin-top: 10px;
}
.cloth-body-recommend-view.show-all .img{
    margin: 20px auto;width:auto;height:auto;max-width: 100%;float: none;
    background: none;border-radius: 0px;overflow: auto;
}
.cloth-body-recommend-view .img img{
    max-width: 100%;
}
.cloth-body-recommend-view.show-all .img img{max-height: 100%;}
.cloth-body-recommend-view .shape-img-view{
    flex-shrink: 0;width:86px;height:125px;/*background: #C4E2FF;*/
    display: flex;flex-direction: row;align-items: center;justify-content: center;
    float: left;margin-right: 0px;margin-bottom: 0px;
}
.cloth-body-recommend-view .shape-img-view img{
    max-width: 100%;max-height: 100%;
}
.img_box{
    position: absolute;
    width: 140px;
    top: 0;left: 0;right: 0;bottom: 0;
    margin: auto;
    background-color: none;
}

.sta_title{
    font-size: 18px;font-weight: 800;
    color: #676767;margin: 25px 0 8px 14px;
}
.cloth-body-recommend-view-crycle-line-bg{
    background-image: url(https://3d-clothing.oss-cn-shenzhen.aliyuncs.com/frontweb/cdn/ody_pic_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    left: 20%;
    bottom: 39px;
    width: 60%;
    height: 95px;
}
.line{
    display: block;
    width: 56px;
    height: 5px;
    background: #358FFC;
    border-radius: 0px;
}
.bubble{
    display: inline-block;
    min-width: 70px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 0 10px #c4e2ff;
    padding: 0 6px 0 6px;
    line-height: 24px;
    text-align: center;
    margin-left: -4px;
}
.oval{
    display: inline-block;
    width: 8px;height: 5px;
    background: #FFFFFF;
    border-radius: 65%;
    margin-left: -4px;
    z-index: 4;
}
.big-circle{
    width: 21px;height: 21px;
    background: #308CFC;
    opacity: 0.5;
    border-radius: 50%;
    z-index: 2;
    margin-left: -36px;
    position: relative;
    left: 50%;
}
.tag-cycle-right .big-circle{
    margin-left: -97px;
}
/*.tag-cycle-right .bubble{
    margin-left: 2px;
}*/
.tag-cycle-right .oval{
    margin-left: 4px;
}
.big-circle:after{
    content: "";
    width: 40px;height: 1px;background: #FFFFFF;
    position: absolute;left:18px;top:0;
    transform: rotate(-30deg);
}
.big-circle:before{
    content: "";
    width: 20px;height: 1px;background: #FFFFFF;
    position: absolute;left:55px;top:-10px;
}
.big-circle.down-line:after{
    transform: rotate(30deg);
    top:20px;
}
.big-circle.down-line:before{
    content: "";
    left:55px;top:30px;
}
.tag-cycle-right .big-circle:after{
    content: "";right:18px;left:auto;top:20px;
}
.tag-cycle-right .big-circle:before{
    content: "";right:55px;left:auto;top:30px;
}
.tag-cycle-right .big-circle.down-line:after{
    content: "";right:18px;left:auto;top:0px;
}
.tag-cycle-right .big-circle.down-line:before{
    content: "";right:55px;left:auto;top:-11px;
}
.s-circle{
    width: 5px;height: 5px;
    background: #3690FC;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    z-index: 3;
}
.tag-foot{
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    color: #5B94DA;
    line-height: 15px;
    bottom: 12px;
}
.scroll_view{
    padding: 0 15px;
    box-sizing: border-box;
}
.part_list{
    width: 100%;
    height: 33px;
    line-height: 33px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #F2F2F2;
    border-radius: 17px;
}
.part_list::-webkit-scrollbar {
    /*隐藏滚动条*/
    display: none;
}
.part_list span{
    display: inline-block;
    font-size: 12px;
    padding: 0 20px;
}
.part_list span.on{
    color: #FFFFFF;
    background: #308CFC;
    border-radius: 17px;
}
.cloth-recommend-figure-view{
    width: 100%;
    height: 70px;
    text-align: center;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius: 17px;
}
.cloth-recommend-figure{
    height:70px;
    width: 33px;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.part_list-left .part_list{
    text-align: left;
}
.cloth-recommend-figure-view .part_list span{
    display: inline-block;
    padding: 0 0px;
}
.cloth-recommend-figure em{
    font-size: 12px;color: #676767;clear: both;text-align: center;
}
.cloth-recommend-figure .img{
    width: 33px;height: 33px;border-radius: 50%;background:#F2F2F2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cloth-recommend-figure .img img{
    max-width: 33px;max-height: 33px;overflow: hidden;
}
.ai-images{
    border-radius: 10px !important;
}
.ai-images .img{}
.ai-images span{padding: 0 !important;margin-right: 10px;background: #f5f5f5;display: flex;flex-direction: row;
    align-items: center;justify-content: center;}
.ai-images span:last-child{margin-right: 0px;}
.bigBox{
    position: relative;
    /* height: 100px; */
    transition:height 2.5s ease-out;
}
.prettyprint{
    height: 100px;
    overflow-y: hidden;
}
.card_more , .pack-up{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    background-color: #e6edf0;
    text-align: center;
}
.txt-indent{
    text-indent: 2em;
}
/**纤体*/
.slim-card{
    width: 100%;
    padding: 10px 0px;position: relative;
    background: linear-gradient(128deg, #308CFC 0%, #61A8FF 48%, #308CFC 100%);
    border-radius: 12px;
}
.slim-card .slim-img{
    position: absolute;right:20px;top:10px;
    width: 50px;
}
.slim-card .title{
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    width: 100%;
}
.slim-card .desc{
    font-size: 10px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 18px;
    margin-right: 90px;margin-top: 6px;
}
.slim-size-view{
    width: calc(100% - 30px);
    margin-left: 15px;
    height: 86px;
    background: rgba(255,255,255,0.8);
    border-radius: 12px;
    margin-top: 25px;
}
.slim-size-view .size-item{
    flex: 1;display: flex;flex-direction: column;align-items: center;
    justify-content: center;position: relative;
}
.slim-size-view .size-item .name{
    font-size: 12px;
    font-weight: 400;
    color: #676767;
}
.slim-size-view .size-item .size{
    font-size: 24px;
    font-weight: 500;
    color: #676767;
}
.slim-type{
    flex:1;
    cursor: pointer;
    border-radius: 10px;margin-right: 10px;
}
.slim-type.on{
    background: #FFFFFF;
    box-shadow: 0px 3px 9px 1px rgba(229,229,229,0.5);
}
.slim-type:last-child{margin-right: 0px;}
.slim-type .img{
    width: calc(100% - 20px);
    margin-top: 10px;
    background: #EEEEEE;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.slim-type .hover{
    position: absolute;
    background: #308CFC;opacity: 0.5;
    width: 70%;height: 70%;left: 15%;top:15%;
    display: none;border-radius: 50%;
}
.slim-type.on .hover{
    display: inline-block;
}
.slim-type img{
    width: 100%;
}
.slim-type.on img{
    /*background-image: url("1.jpg"), linear-gradient(#308CFC, #308CFC);*/
    background-blend-mode: lighten;
    background-size: cover;
    border-right: 20px solid transparent;
    /*-webkit-filter: drop-shadow(#308CFC 800px 0);
    filter: drop-shadow(#308CFC 800px 0);
    transform: translate(-800px);*/
}
.slim-type.on .img{
    background: #FFFFFF;
    border: 1px solid #308CFC;
}
.slim-type.on .img-1,.slim-type .img-2{display: none}
.slim-type.on .img-2{display: inline-block}
.slim-type .name{
    height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: #676767;
    line-height: 18px;
    margin-top: 10px;
}
.slim-time{
    flex:1;display: flex;flex-direction: column;position: relative;
    align-items: center;justify-content: center;cursor: pointer;
}
.slim-time .slim-time-name{
    font-size: 12px;
    font-weight: 400;
    color: #AEAEAE;
    line-height: 18px;
}
.slim-time .slim-time-time{
    font-size: 12px;
    font-weight: 400;
    color: #AEAEAE;
    line-height: 18px;
}
.slim-time .slim-time-point{
    position: absolute;
    bottom:-25px;border-radius: 50px;
    background: #FFFFFF;
    width: 30px;height: 30px;display: none;
}
.slim-time .slim-time-point:after{
    content: " ";
    width: 6px;
    height: 6px;
    background: #308CFC;
    border-radius: 50%;
    position: absolute;left: 12px;bottom:7px;
}
.slim-time.on .slim-time-name,.slim-time.on .slim-time-time{
    color: #308CFC;
}
.slim-time.on .slim-time-point{
    display: inline-block;
}
.slim-card-vs{position: relative;display: flex;flex-direction: row;align-items: center;
    width: 100%;float: right;margin: 10px 0px;
    justify-content: center;}
.slim-card-vs .icon-view{
    flex: 1;margin-right: 20px;position: relative;    margin-left: 25px;
    background-image: url("https://3d-clothing.oss-cn-shenzhen.aliyuncs.com/frontweb/icons/slim/slim-body-mesh.png");
    background-repeat: no-repeat;
    background-position: center center;
    height: 140px;
}
.slim-card-vs .icon-view img{
    float: left;width: 100%;
}
.slim-card-vs .vs-bg-1{
    display: inline-block;
    width: calc(100% - 4px);
    padding: 2px 2px;
    border-radius: 12px;
    background: linear-gradient(90deg, #308CFC, #E9F3FF, #E9F3FF);
    height: 70px;
    position: relative;display: flex;flex-direction: row;
}
.slim-card-vs .vs-bg-2{
    background:#E9F3FF;float: left;
    width: 100%;height:100%;flex: 1;
    border-radius: 10px;
}
.slim-card-vs .vs-bg-3{
    display: inline-block;
    right:0;top:0;
    background: linear-gradient(90deg, #FFF0F1, #FFF0F1,  #F82A36);
    width: calc(50% - 4px);
    padding: 2px 2px;
    border-radius: 12px;
    height: 70px;
    position: absolute;display: flex;flex-direction: row;
}
.slim-card-vs .vs-bg-3:before{
    content: "";position: absolute;
    height: 0px;
    width: 0px;
    border-bottom: 76px solid #FFF0F1;
    border-left: 20px solid transparent;
    left: -15px;
    top:-2px;
}
.slim-card-vs .vs-bg-4{
    background:#FFF0F1;float: left;
    width: 100%;height:100%;flex: 1;
    border-radius: 10px;
}
.slim-card-vs .vs-val{
    width: 18px;
    height: 18px;
    border: 2px solid #BFDCFF;
    background: #FFFFFF;
    border-radius: 50%;
    position: absolute;left: 50%;top:30%;
    margin-left: -12px;margin-top: -9px;
}
.slim-card-vs .vs-view{
    width: 100%;
    display: flex;flex-direction: row;
    height: 72px;align-items: center;justify-content: center;
    position: absolute;left:0;top:0;
}
.slim-card-vs .vs-3d{
    height: 30px;cursor: pointer;padding: 0px 10px;
    background: #FFFFFF;
    box-shadow: 0px 3px 7px 3px #F3F3F3;
    border-radius: 10px;
    align-items: center;justify-content: center;display: flex;flex-direction: row;
    font-size: 10px;
    font-weight: 400;
    color: #535353;
    margin-top: 15px;margin-bottom: 10px;
}
.slim-card-vs .vs-view .vs-name{
    font-size: 10px;
    font-weight: 400;
    color: #535353;
}
.slim-card-vs .vs-view .vs-size{
    font-size: 25px;
    font-weight: 500;
    color: #535353;
}
.slim-card-vs .vs-view .vs-diff{
    font-size: 10px;
    font-weight: 400;line-height: 14px;
    color: #535353;
}
.slim-card-vs .vs-view .vs-diff.color-25AE00{
    color: #25AE00;
}

.underwear-head-bg{
    background: linear-gradient(0deg, #FFFFFF 0%,#FFFFFF 10%, #67ACFF 100%);
    width: 100%;padding-top: 20px;
}
.underwear-head{
    display: flex;flex-direction: column;align-items: center;justify-content: flex-start;
    background-image: url("https://3d-clothing.oss-cn-shenzhen.aliyuncs.com/frontweb/cdn/underwear/underwear-radar-body.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;overflow-x: hidden;
}
.underwear-head .underwear-title{font-size: 15px;font-weight: 800;color: #FFFFFF;margin-top: 25px;
    text-align: center}
.underwear-head .radar-view{
    width: 240px;height: 230px;position: absolute;left: 50%;margin-left: -120px;top:30px;
}
.underwear-head .tag-view{
    width: 240px;height: 230px;position: absolute;left: 50%;margin-left: -120px;top:30px;
    display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.underwear-head .tag-view .tag{
    position: absolute;left: 50%;top:-20px;color: #FFFFFF;margin-left: -23px;
    display: flex;flex-direction: row;
}
.underwear-head .tag-view .tag:nth-child(2){
    top: 77px;margin-left: -177px;
}
.underwear-head .tag-view .tag:nth-child(3){
    top: 77px;margin-left: 130px;width: 60px;
}
.underwear-head .tag-view .tag:nth-child(4){
    top: 225px;margin-left: -130px;
}
.underwear-head .tag-view .tag:nth-child(5){
    top: 225px;margin-left: 85px;width: 60px;
}
.underwear-head .tag-view .score-num{
    font-size: 25px;
    font-weight: 800;
    color: #575757;margin-top: 23px;
}
.underwear-head .tag-view .score-num i{
    font-size: 12px;
}
.underwear-head .chest-age{
    height: 20px;
    background: #ECF5FF;
    padding: 0px 20px;
    border-radius: 10px;margin-top: 306px;
    font-size: 12px;
    font-weight: 800;
    color: #575757;
}
.underwear-box{
    background: #FFFFFF;
    box-shadow: 0px 3px 19px 1px #DEEDFF;
    border-radius: 10px;
}
.underwear-center-title-view{
    position: relative;height: 35px;display: flex;flex-direction: row;align-items: center;
    justify-content: center;font-size: 18px;font-weight: 800;color: #333333;
}
.underwear-center-title-view.small{
    font-size: 12px;min-height: 20px;
}
.underwear-center-title-view.start{align-items: flex-start;justify-content: flex-start}
.underwear-center-title-view .underwear-title-view{
    position: relative;display: flex;flex-direction: row;float: left;
}
.underwear-center-title-view .bg-line{height: 10px;width: 120px;background:#DEEDFF;border-radius: 5px;
    position: absolute;top:20px;left: 50%;z-index: 0;margin-left: -60px}
.underwear-center-title-view .bg-line.w50{width: 100%;margin-left: 0px;left:0;top:15px;float: left;}
.underwear-center-title-view.start .bg-line{
    top: 8px;height: 6px;
}
.underwear-center-title-view.start .bg-line.top18{
    top: 18px;
}
.underwear-center-title-view .t{z-index: 2;position: absolute;display: flex;flex-direction: row;}
.underwear-tag-title{
    font-size: 12px;
    font-weight: 500;
    color: #7AA2FE;
}
.underwear-tag-title.color-FFA780{
    color: #FFA780;
}
.underwear-tag-title.color-7AC0FE{color:#7AC0FE}
.underwear-p{
    font-size: 12px;
    font-weight: 400;
    color: #676767;
    line-height: 18px;
}
.underwear-chest-tag{
    background: #ECF5FF;font-weight: 600;font-size: 16px;padding: 6px 15px;border-radius: 10px;
    color: #308CFC;
}
.underwear-guide{
    display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;
    margin-bottom: 5px;margin-top: 5px;
}
.underwear-guide.ml-guide{
    margin-left: 17px;
}
.underwear-guide .icon{
    width: 10px;height: 10px;margin-top: 5px;margin-left: 10px;
}
.underwear-guide .icon.point{width: 5px;margin-left: 15px;margin-top: 7px;
    height: 5px;
    background: #308CFC;
    border-radius: 50%;}
.underwear-guide .icon path{fill: #308CFC;}
.underwear-guide .icon.warning path{fill: #F82330;}
.underwear-guide .icon.cart {
    background: #ECF5FF;border-radius: 50%;padding: 4px 4px;
    margin-left: 0px;margin-top: 0px;
}
.underwear-guide .guide-content{flex: 1;margin-left: 10px;font-size: 12px;
    font-weight: 400;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;
    color: #676767;
    line-height: 18px;}
.underwear-box .warning-content{
    color: #308CFC;margin-left: 30px;
}
.underwear-guide .guide-content .warning-content{
    color: #F82330;margin-left: 0px;
}
.underwear-card{
    position: relative;display: flex;flex-direction: row;align-items: center;justify-content: center;
    background: #FFFFFF;margin-left: 40px;height: 40px;
    margin-top: 5px;margin-bottom: 5px;
}
.underwear-card:before{
    content: "";
    position: absolute;z-index: 1;background: none;
    width: 0;left: -40px;
    height: 0;
    border: 20px solid;
    border-color: transparent #FFFFFF transparent transparent;
}
.underwear-card .i{width: 8px;
    height: 8px;z-index: 1;position: absolute;left: 0px;
    background: #308CFC;margin-left: -24px;
    border-radius: 50%;}
.underwear-card .name{
    font-size: 12px;
    font-weight: 400;
    color: #676767;
}
.underwear-card .val{
    font-size: 12px;width: 75px;
    font-weight: 400;
    color: #676767;
}
.underwear-card .line{
    border-bottom: 1px dashed #BCD6FD;
    width: 100%;height: 0px;
}
.underwear-size-view{
    width: 100%;display: flex;flex-direction: row;height: 460px;
    background: linear-gradient(180deg, #FFFFFF 0%, #ECF5FF 25%, #ECF5FF 100%);
}
.underwear-size-bg{
    background-image: url("https://3d-clothing.oss-cn-shenzhen.aliyuncs.com/frontweb/cdn/underwear/underwear-size-body.png");
    background-position: -10px 25px;
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.underwear-size-view .gird-bg{
    background: radial-gradient(circle, #D8EAFF 0%, rgba(236,245,255,0.5) 100%);position: absolute;
    right:0;top:148px;width: 200px;height: 200px;border-radius: 100%;
    opacity: 0.5;
}
.underwear-size-view .gird-view{
    display: flex;flex-wrap: wrap;width: 162px;height: 162px;right:0;top:0;
    background: rgba(255,255,255,0.26);margin-right: 20px;
    border-radius: 100%;margin-top: 170px;position: absolute;
}
.underwear-size-view .gird-view .item-view{
    width: 33.33%;text-align: center;
    height: 54px;display: flex;flex-direction: row;align-items: center;justify-content: center;
}
.underwear-size-view .gird-view .item-view.hover .name,
.underwear-size-view .gird-view .item-view.hover .en-name{
    background: #D2E6FF;font-weight: 800;padding: 5px 10px;
    color: #308CFC;border-radius: 10px;
}
.underwear-size-view .gird-view .item-view .en-name,
.underwear-size-view.en-size .gird-view .item-view .name{
    display: none;
}
.underwear-size-view.en-size .gird-view .item-view .en-name{
    display: block;
}
.underwear-size-view .recommend-size{
    background: #F4F9FF;position: relative;
    border-radius: 10px;padding: 20px 20px;display: flex;flex-direction: column;align-items: center;
}
.recommend-size .name{
    font-size: 15px;
    font-weight: 800;width: 100%;text-align: left;
    color: #575757;
}
.recommend-size .help{right:10px;top:20px;width: 20px;height:20px;position: absolute;z-index: 1;
    cursor: pointer;}
.recommend-size .help .icon{width: 20px;height:20px;}
.recommend-size .help .icon path{fill: #308CFC}
.recommend-size .radio-view{
}
.recommend-size .radio-view .radio-item{cursor: pointer;
    font-size: 12px;position: relative;line-height: 1.3em;
    padding: 0px 10px 10px;
    font-weight: 400;
    color: #9CC9FF;
}
.recommend-size .radio-view .radio-item i{display: none;width: 24px;
    height: 4px;
    background: #308CFC;
    border-radius: 2px;position: absolute;bottom: 0px;left:50%;margin-left: -12px;
}
.recommend-size .radio-view .radio-item.hover{
    color: #308CFC;
}
.recommend-size .radio-view .radio-item.hover i{display: block}
.recommend-size .val-size{
    font-size: 30px;
    font-weight: 800;
    color: #575757;
}
.underwear-size-view.en-size .val-size .cn,.underwear-size-view .val-size .en{
    display: none;
}
.underwear-size-view.en-size .val-size .en{
    display: block;
}
.recommend-size .recommend-size-item{
    border-bottom: 1px solid #DCDCDC;padding: 10px 0px;display: flex;flex-direction: row;align-items: center;
    justify-content: center;
}
.recommend-size .recommend-size-item:last-child{border-bottom: none;}
.recommend-size-item .part-name{
    font-size: 12px;
    font-weight: 400;
    color: #6B6B6B;flex: 1;
}
.recommend-size-item .part-val{
    font-size: 12px;
    font-weight: 400;
    color: #6B6B6B;
}
.recommend-size-remark{
    height: 25px;position: absolute;bottom: 30px;line-height: 25px;padding: 0px 15px;
    background: #FFFFFF;left: 50%;margin-left: -159px;
    border-radius: 20px;word-break: break-word;
    font-size: 12px;
    font-weight: 400;
    color: #676767;
}
.chest-category-img{
    flex: 1;display: flex;flex-direction: row;align-items: center;justify-content: center;
}
.chest-category-img.w200{height: 100px;width: 100px;}
.chest-category-img img{
    max-width: 100%;max-height: 100%;
}
.chest-category-img.op2{
    fill-opacity: 20%;
    opacity: 0.2;
}
.chest-symmetric-img{
    border-radius:50%;border:2px solid #C8E1FF;width:100px;height:100px;position:relative;
    overflow:hidden;display: flex;flex-direction: row;align-items: center;justify-content: center;
}
.chest-symmetric-img img{
    max-width:80%;max-height:80%
}
.chest-symmetric-img .left-img,.chest-symmetric-img .right-img{
    position:absolute;z-index:1;left:50%;top:40%;width:25px;margin-left:2px;
}
.chest-symmetric-img .left-img.small,.chest-symmetric-img .right-img.small{
    width: 18px;margin-top:5px;
}
.chest-symmetric-img .left-img.top,.chest-symmetric-img .right-img.top{
    margin-top:5px;
}
.chest-symmetric-img .left-img{margin-left:-27px;}
.card-time-tree-view.underwear-time .card-tree-view .def-line,
.card-time-tree-view.underwear-type-time .card-tree-view .def-line{
    margin-top: 27px;
}
.card-time-tree-view.underwear-time .card-tree-view .tag-view,
.card-time-tree-view.underwear-type-time .card-tree-view .tag-view{
    margin-top:0px;
}
.card-time-tree-view.underwear-time .card-tree-view .badge-val .point.color-level1{
    border-color: #7AC0FE;
}
.card-time-tree-view.underwear-time .card-tree-view .badge-val .point.color-level2{
    border-color: #7AA2FE;
}
.card-time-tree-view.underwear-time .card-tree-view .badge-val .point.color-level3{
    border-color: #CB7AFE;
}
.card-time-tree-view.underwear-type-time .card-tree-view .badge-val .point.color-level1{
    border-color: #7AC0FE;
}
.card-time-tree-view.underwear-type-time .card-tree-view .badge-val .point.color-level2{
    border-color: #FFEE9F;
}
.card-time-tree-view.underwear-type-time .card-tree-view .badge-val .point.color-level3{
    border-color: #FFA780;
}
.card-time-tree-view.underwear-height-time .card-tree-view .badge-val .point.color-level1{
    border-color: #FFEE9F;
}
.card-time-tree-view.underwear-height-time .card-tree-view .badge-val .point.color-level2{
    border-color: #7AC0FE;
}
.card-time-tree-view.underwear-height-time .card-tree-view .badge-val .point.color-level3{
    border-color: #FFA780;
}
.card-time-tree-view.underwear-type-time .card-tree-view .badge-val,
.card-time-tree-view.underwear-time .card-tree-view .badge-val{
    min-width: 15px;
}
.card-time-tree-view .chest-line{
    background: linear-gradient(90deg, #7AC0FE 30%, #7AA2FE 36%,#7AA2FE 67%, #CB7AFE 75%, #CB7AFE 100%);
    height: 6px;flex: 1;border-radius: 2px;
}
.card-time-tree-view .chest-type-line{
    background: linear-gradient(90deg, #7AC0FE 30%, #FFEE9F 36%, #FFEE9F 67%, #FFA780 75%, #FFA780 100%);
    height: 6px;flex: 1;border-radius: 2px;
}
.card-time-tree-view .chest-height-line{
    background:  linear-gradient(90deg, #FFEE9F 25%, #7AC0FE 34%,#7AC0FE 67%, #FFA780 71%, #FFA780 100%);
    height: 6px;flex: 1;border-radius: 2px;
}
.product-recommend-view{
    position: relative;display: flex;flex-direction: row;align-items: center;justify-content: center;
}
.product-recommend-view .pro-item{
    padding: 0px 40px;display: flex;flex-direction: column;
    width: 300px;
    margin-bottom: 20px;
}
.product-recommend-view .pro-item .hot-tag{
    position: absolute;z-index: 1;left:0;top:10px;padding: 6px 12px;
    background: #308CFC;
    opacity: 0.7;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
}
.product-recommend-view .pro-item .img{
    width: 100%;height: 300px;display: flex;flex-direction: row;align-items: center;
    justify-content: center;margin-top: 55px;
}
.product-recommend-view .pro-item .img img{max-height: 100%;max-width: 100%;}
.product-recommend-view .pro-item .pro-title{
    font-size: 15px;
    font-weight: 400;
    color: #676767;
}
.product-recommend-view .pro-item .pro-des{
    font-weight: 400;
    font-size: 12px;
    margin-top: 10px;
    color: #A2A2A2;
}
.product-recommend-view .pro-item .pro-price{
    font-size: 15px;
    margin-top: 10px;
    font-weight: 800;
    color: #676767;
}
.body-data2.underwear{
    padding: 0px;
}
.body-data2.underwear li{
    display: flex;flex-direction: row;border-top: 1px solid #E5E5E5;
    width: calc(50% - 11px);padding-bottom: 10px;align-items: center;justify-content: flex-start;
}
.body-data2.underwear li:nth-child(2n+1){margin-right: 10px}
.body-data2.underwear li p{border-top: none;padding: 0px;margin-right: 0px;}
.body-data2.underwear li.on p{background: none;
    border-color: #FFFFFF;
}
.body-data2.underwear li p em{font-size: 15px;margin-top: 4px;margin-left: 0px;}
.body-data2.underwear li img{
    position: relative;width: 80px;height: 80px;right:auto;left: 0px;
    top:0px
}
.body-data2.underwear li p span{
    margin-left: 0px;
}
.right-fixed-history{
    position: fixed;z-index: 10;border-radius: 15px;height: 30px;background: #FFFFFF;
    top:10px;right:15px;display: flex;flex-direction: row;align-items: center;justify-content: center;
    padding: 0px 4px;
}
.right-fixed-history i{
    border-width: 10px;
    border-style: solid;
    border-color: #308CFC transparent transparent transparent;
    margin-left: 6px;margin-top: 10px;margin-right: 4px;
}
.right-fixed-history-up{
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    right: 52px;
    top: 45px;
    transform: rotate(90deg);
    position: absolute;
}
.right-fixed-history-measure-data{
    border-radius: 10px;overflow: hidden;
}
.right-fixed-history-measure-data em{display: flex;flex-direction: row;align-items: center;justify-content: center;
    flex: 1;}
.right-fixed-history-measure-header,.right-fixed-history-measure-li{
    width: 100%;display: flex;flex-direction: row;
    height: 48px;
    background: #C8E2FF;
}
.right-fixed-history-measure-li:nth-child(2n+1){background: #F2F8FF}
.right-fixed-history-measure-li:nth-child(2n){background: #ECF5FF}