.sub-common{
    height: calc(100% - 210px);
}
.con-table table tbody tr .total { color:#4b86f7; font-size:1.1em; font-weight:bold; }
.text-blue{
    color:#4b86f7;
}
.text-right{
    text-align: right;
}
.empSelect{
    border: 1px solid #e0e5ed;
    border-radius: 5px;
    padding: 10px;
    vertical-align: middle;
    margin-right: 8px;
}
.h-menus .depth2-wrap.on {
    display: block;
    position: fixed;
    left: 0;
    width: 100%;
}
select[disabled="disabled"] {
    color: initial;
}

/*genderGraphGdi*/
#genderGraphGdi {
    font-size: 0;
}
#genderGraphGdi .blue{
    color:#32c1cd;
}


#genderGraphGdi .chart .title{
    font-size: 18px;
    margin-bottom: 50px;
}
#genderGraphGdi .chart .percent{
    font-size: 15px;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: -40px;
}

#genderGraphGdi .chart .male .percent{
    color:#32c1cd;
}

#genderGraphGdi .chart .female .percent{
    color:#f24e3f;
}

#genderGraphGdi .chart{
    display: inline-block;
    width: 50%;
    text-align: center;
    margin-top: 40px;
}



#genderGraphGdi .chart .male,
#genderGraphGdi .chart .female
{
    position:relative;
    display: inline-block;
    width: 140px;
    height: 300px;
    background: lightgray;
}
#genderGraphGdi .chart .bar{
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    bottom:0;
    transition:.5s;
}
#genderGraphGdi .chart .male .bar{
    background: #32c1cd;
}
#genderGraphGdi .chart .female .bar{
    background: #f24e3f;
}
#genderGraphGdi .chart .body{
    height: 100%;
    background-repeat: no-repeat;
    position: relative;
}
#genderGraphGdi .chart .male .body{
    background: url("../images/chart/male.png") center;
}
#genderGraphGdi .chart .female .body{
    background: url("../images/chart/female.png") center;
}

/*type_2*/
#genderGraphGdi.type_2 .chart .male,
#genderGraphGdi.type_2 .chart .female
{
    background: transparent;
    overflow:hidden;
}
#genderGraphGdi.type_2 .chart .body{
    top:100%;
    transition:.5s;
}
#genderGraphGdi.type_2 .chart .male .body{
    background: url("../images/chart/male_half.png") left no-repeat;
}
#genderGraphGdi.type_2 .chart .female .body{
    background: url("../images/chart/female_half.png") right no-repeat;
    margin-right: 3px;
}
#genderGraphGdi.type_2 .title{
    text-align: center;
    font-size: 20px;
}
#genderGraphGdi.type_2 .chart{
    width: 33%;
    position: relative;
}
#genderGraphGdi.type_2 .chart .percent{
    top: -30px;
}
#genderGraphGdi.type_2 .chart .percent .male{
    color: #32c1cd;
}
#genderGraphGdi.type_2 .chart .percent .female{
    color: #f24e3f;
}
#genderGraphGdi.type_2 .year{
    font-size: 18px;
    margin-top: 10px;
}

#genderGraphGdi.type_2 .axis{
    position: absolute;
    width: 100%;
    /*background: grey;*/
    top: 0;
    opacity: .5;
    bottom: 38px
}
#genderGraphGdi.type_2 .axis li{
    width: 60%;
    border-top: 1px solid rgba(0,0,0,.5);
    position: absolute;
    left:20%
}
#genderGraphGdi.type_2 .axis li span{
    position: absolute;
    left: -30px;
    top: -12px;
    font-size: 15px;
}

#genderGraphGdi.type_2 .axis li.lvl_0{
    bottom:0;
}
#genderGraphGdi.type_2 .axis li.lvl_1{
    bottom:10%
}
#genderGraphGdi.type_2 .axis li.lvl_2{
    bottom:20%
}
#genderGraphGdi.type_2 .axis li.lvl_3{
    bottom:30%
}
#genderGraphGdi.type_2 .axis li.lvl_4{
    bottom:40%
}
#genderGraphGdi.type_2 .axis li.lvl_5{
    bottom:50%
}
#genderGraphGdi.type_2 .axis li.lvl_6{
    bottom:60%
}
#genderGraphGdi.type_2 .axis li.lvl_7{
    bottom:70%
}
#genderGraphGdi.type_2 .axis li.lvl_8{
    bottom:80%
}
#genderGraphGdi.type_2 .axis li.lvl_9{
     bottom:90%
}
#genderGraphGdi.type_2 .axis li.lvl_10{
    bottom:100%
}