@import './common.css';

.mt30{
    margin-top: .3rem;
}
.mt40{
    margin-top: .4rem;
}
.mb30{
    margin-bottom: .3rem;
}
.height3{
    height: .5rem;
}
.dis_flex {
    -webkit-display: flex;
    -moz-display: flex;
    display: flex;
}
.flex {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}
.wrapper{
    max-width: 7.5rem;
    margin: auto;
    font-family: 微软雅黑;
    padding-bottom: 1.43rem;
}
.redColor{
    color:#CB2C2C
}
.header{
    font-size: .36rem;
    color: #fff;
    line-height: .88rem;
    position: relative;
}
.header .arrow{
    position: absolute;
    top: .25rem;
    left:.2rem;
    width: .2rem;
    height: .37rem;
    background: url("../images/back_arrow.png") no-repeat;
    background-size: contain;
}

.nameInfo{
    height: 1rem;
    background: #FBF8EA;
    margin: auto;
    /*line-height: 1rem;*/
    padding:0 .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nameInfo .name{
    font-size: .6rem;
    color: #4D4D4D;
    font-weight: bold;
}
.nameInfo .totalInfo{
    color: #B3B3B3;
    font-size: .32rem;
}
.nameInfo .totalInfo .total{
    font-size: .6rem;
    font-weight: bold;
}

.navMenu{
    background: #fff;
    /*height: .8rem;*/
    /*padding:0 .2rem;*/
    /*line-height: .8rem;*/
}
.navbar{
    width: 100%;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
    display: flex;
    justify-content:space-between
}
.navbar-item{
    display: inline-flex;
}
.navMenu .navbar-item a{
    font-size: .32rem;
    color: #8D8D8D;
    padding: .16rem 0 .16rem;
}
.navMenu .swiper-slide-thumb-active a{
    color: #E53F3F;
    border-bottom: .06rem solid #E53F3F;
}


.resultBox {
    /* height: 8.84rem; */
    margin: .22rem auto 0;
}
.baseInfo {
    padding: .01rem .3rem 0 .3rem;
}
.baseInfo p {
    font-size: .32rem;
    color: #4F4F4F;
    line-height: .48rem;
    /*margin-bottom: .28rem;*/
}
.card{
    padding: .4rem 0 .3rem;
    overflow: hidden;
}
.cardComment{
    padding: .3rem 0 .3rem;
}
.card-item{
    /*height: .7rem;*/
    margin-top: .3rem;
}
.cardComment .card-item:first-child{
    margin-top: 0;
}
.card-item .fontCont{
    width: .7rem;
    height: .7rem;
    background: url("../images/fontbg.png") no-repeat;
    background-size: contain;
}

.card-item .fontCont span{
    text-align: center;
    width: .7rem;
    height: .7rem;
    line-height: .7rem;
    font-size: .5rem;
    color: #4D4D4D;
    font-weight:bold;
    display: block;
    position: relative;
    top: 1px;
}

.card-item .fontInfo .infoType{
    margin-left: .35rem;
    /*height: .7rem;*/
    font-size: .28rem;
    color: #B3B3B3;
    float: left;
    text-align: center;
    font-weight:bold;
}
.card-item .fontInfo .infoType span{
    display: block;
}
.card-item .fontInfo .infoType .labelDesp{
    color: #4D4D4D;
    /*line-height: 0.6rem;*/
}
.cardAllCom {
    border-top:.02rem dashed rgba(179,179,179,1);
}
.cardAllCom .title{
    color: #4D4D4D;
    font-size: .32rem;
    margin-bottom: .4rem;
    font-weight: bold;

}
.cardAllCom .titleH2 img{
    width: .23rem;
    vertical-align: middle;
}
/*.cardAllCom .infoDes{*/
/*    color: #4F4F4F;*/
/*    font-size: .32rem;*/
/*    line-height: .48rem;*/
/*}*/

h2.titleH2 {
    background: url(../images/titleBg.png) no-repeat 0 5px;
    background-size: .3rem .3rem;
    color: #A63030;
    font-size: .32rem;
    margin-bottom: .3rem;
}
h2.titleH2 span {
    padding-left: 0.45rem;
    font-weight: bold;
}

.titleH2 .right{
    color: #4D4D4D;
    font-size: .28rem;
    position: relative;
    top: 2px;
}
.titleH2 .right img{
    top: -1px;
    position: relative;
}
.iphone .titleH2 .right img{
    /*top: 0px;*/
}

/*国学起名*/
.tableInfo{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .32rem;
    color: #4D4D4D;
}
.tableInfo td{
    text-align:center;
    border: .02rem dashed #B3B3B3;
    padding: .1rem 0;
}
.tableInfo td.colorGrey{
    color: #B3B3B3;
    font-size: .28rem;
    font-weight: bold;
}



.progressBox{
    font-size: .32rem;
}
.progressBox .progressItem{
    margin-bottom: .3rem;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
    display: flex;
    line-height: .3rem;
}
.progressBox .progressItem .before{
    width: .32rem;
}
.progressBox .progressItem  .progress{
    flex: 1;
    margin: 0 .1rem;
    height: .3rem;
    background: #E6E6E6;
    position: relative;
    border-radius:.15rem;
}
.progressBox .progressItem  .progress .progressVal{
    position: absolute;
    top: 0;
    left: 0;
    height: .3rem;
    border-radius:.15rem;
}
.progressBox .progressItem .after{
    width: .82rem;
}
p.desp{
    color: #4D4D4D;
    font-size: .32rem;
    line-height: .48rem;
}



.jincolor{
    color: #C2B350;
}
.jinbg{
    background: #E9E0A4;
}
.mucolor{
    color: #8AD383;
}
.mubg{
    background: #B5E8B0;
}

.shuicolor{
    color: #71BBE2;
}
.shuibg{
    background: #A1CEE6;
}

.huocolor{
    color: #D55A42;
}
.huobg{
    background: #E7AEA3;
}

.tucolor{
    color: #C38A31;
}
.tubg{
    background: #E4C594;
}


/*三才五格*/

.analysis-panel{
    height: 2.3rem;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
    display: flex;
    color: #4D4D4D;
    margin-bottom: 10px;
    font-size: .32rem;
    margin-top: .43rem;
}
.iphone .analysis-panel{
    height: 2.4rem;
}
.leftText{
    margin:0 .2rem 0 .3rem ;
    display: flex;
    align-items: center;
    height: 2.04rem;
}
.rightText{
    margin:0 .3rem 0 .2rem ;
}
.centerText{
    /*margin: 0 .3rem;*/
    text-align: center;
    margin: -.16rem .3rem 0;;
}
.centerText .textItem{
    margin-bottom: .22rem;
    line-height: normal;
}
.iphone .centerText .textItem{
    margin-bottom: .22rem;
    line-height: .46rem;
}
.rightText .textItem{
    height: .66rem;
    line-height: .66rem;
    margin-bottom: .06rem;
}
.analysis-panel .borderBox,.analysis-panel .borderContBox{
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.analysis-panel .borderBox{
    height: 2.04rem;
    border: .02rem solid #C4C4C4;
    border-right: 0;
}
.analysis-panel .borderContBox .border{
    border: .02rem solid #C4C4C4;
    border-left: 0;
    height: .62rem;
    margin-bottom: .06rem;
}
.structuralAnalysis .totalNum{
    font-size: .32rem;
    color: #4D4D4D;
    text-align: center;
    padding-top: .2rem;
    border-top: .02rem dashed #B3B3B3;
    margin-bottom: .1rem;
}

/*.........*/

.dlItem{
    padding: .3rem 0 0;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
    display: flex;
    font-size: .32rem;
}

.dlItem .typeName{
    width: 1.1rem;
}
.dlItem .nameAnly {
    position: relative;
    top: -2px;
}
.dlItem .typeName .nameVal{
    /*width: .2rem;*/
    text-align: center;
    display: block;
    font-weight: bold;
    position: relative;
    top: 2px;
}

.iphone .dlItem .typeName .nameVal{
    top: -2px;
}

.dlItem .infodesp{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: .1rem;
    border-bottom: .02rem dashed #CCCCCC;
    padding-bottom: .3rem;
    min-height: .88rem;
}
.dlItem:last-child .infodesp{
    border-bottom: .02rem dashed transparent;
}
.dlItem .infodesp .typeAnalysis .attr{
    display: inline-block;
    width: .8rem;
    height: .4rem;
    line-height: .4rem;
    text-align: center;
    color: #fff;
    font-size: .28rem;
}
.dlItem .infodesp .subtypeAnalysis{
    line-height: .36rem;
    font-size: .28rem;
    color: #B3B3B3;
    margin-top: 5px;
}
.nicebg{
    background: #24A7E0;
}
.badbg{
    background: #B8885C;
}
.grey{
    color: #B3B3B3;
}

/*按钮*/
.btnBox{
    background: #fff;
    /*height: 1.4rem;*/
    padding: .2rem 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 7.5rem;
    z-index: 1000;
}
.btn{
    width: 7.1rem;
    height: 1rem;
    margin: 0 auto;
    background: url(../images/btnbg.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 1rem;
    font-size: .4rem;
    font-weight: bold;
    color: #fff;
}

.blank-nav {
    display: none;
}

.fixed{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    max-width: 7.5rem;
}


/*新增代码*/
.swiper-container {
    width: 100%;
    height: 100%;
}

.navMenu .swiper-slide {
    text-align: center;
    /*font-size: 18px;*/
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}