#chart {width: 100%; padding-top: 60px; text-align: center;}
#chart a {text-decoration: none; color: #575757;}
#chart .logo-container {display: block; margin-top: 10px;}
#chart .chart-img {width: 100%;}
#chart .chart-img-m {display: none; width: 100%; max-width: 170px;}
#chart .chart-img.logo {width: auto; height: 42px;}
#chart .chart-img.w278 {max-width: 278px;}
#chart .chart-img.percent {max-width: 181px;}
#chart p{margin: 20px 10px 0 10px; color: #575757;}
#chart .level {font-size: 0; margin: auto;}
#chart .level.w82 {width: 82%;} 
#chart .level .col {display: inline-block; vertical-align: top; width: 33%; margin-top: 30px;}
#chart .level .grid {display: inline-block; vertical-align: top; max-width: 409px; position: relative; float: right; width: 45%;}
#chart .level .grid .cate-text::before {content: ''; margin: -3px auto 0; border-top: 3px solid #ca5200; width: 55%; position: absolute; left: 0; right: 0;}
#chart .level .grid:first-child {float: left;}
#chart .level .grid .shadow {position: absolute; bottom: -30px; z-index: 0; width: 50%; max-width: 104px;}
#chart .level .grid .shadow.left {left: 0}
#chart .level .grid .shadow.right {right: 0;}
#chart .level .grid .cate-text {border: 1px solid #9e9e9e;}
#chart .level .grid .cate-text .cate-title {margin-top: 30px; color: #ca5200; font-weight:normal;}
#chart .dendrogram {font-size: 0; margin: auto; width: 100%; margin-top: 30px;}
#chart .dendrogram.w82 {width: 82%;}
#chart .line-block {width: 33%; height: 45px; display: inline-block; }
#chart .line-block.w30 {width: 30%;}
#chart .line-block.TL {border-right: 1px solid #9e9e9e;}
#chart .line-block.BL {border-top: 1px solid #9e9e9e; border-left: 1px solid #9e9e9e; border-right: 1px solid #9e9e9e;}
#chart .line-block.BL.w247 {border-right: none;}
#chart .line-block.BR {border-top: 1px solid #9e9e9e; border-right: 1px solid #9e9e9e;}
#chart .text {position: absolute; right: 60px; bottom: -80px; color: #575757;}
#chart .level .grid .cate-content {margin-bottom: 30px;}
#chart .singleLine{display: none;}
#chart .percent-container {position:relative;display:block;}
#chart .percent-container .percent-text {color:white;font-size:55px;    position: absolute; top: 50%; left: 50%;font-family:'robotoregular', 'Arial-narrow', 'Microsoft JhengHei', sans-serif, simsun;
                                          -ms-transform: translate(-50%, -45px); /* IE 9 */
    -webkit-transform: translate(-50%, -45px); /* Safari */
    transform: translate(-50%, -45px);
    font-weight: bolder;
    
}

#chart .percent-container .percent-text::after {content: '%';font-weight:normal;font-size:30px;}
#chart .percent-container .percent-text.pad-right::after {margin-left:-5px;}

#chart .percent-container .symbol {font-weight:normal;font-size:30px;}

    @media only screen and (min-width: 641px) and (max-width: 1020px){
        #chart .chart-img.logo {display: none; width: 85px;}
        #chart .chart-img-m {display: block; margin: auto;}
        #chart .logoText{/*display: none;*/}
        #chart .dendrogram .doubleLine {display: none;}
        #chart .level .grid {display: block; margin: auto; float: none; width: 100%;}
        #chart .level .grid:first-child {float: none;} 
        #chart .line-block {height: 40px;}
        #chart .singleLine{display: block;} 
        #chart .text {right: 0px; left: 0; color: #707070;}
        #chart .cate-text .cate-content .space {display: none;}
    }
        @media only screen and (min-width: 0px) and (max-width: 640px){
            #chart p {margin-top: 10px;}
            #chart .chart-img.percent {max-width: 91px;}
            #chart .level .grid .cate-text .fts26 {font-size: 16px;}
            #chart .level .grid .cate-text .fts16 {font-size: 14px;}
            #chart .level .grid .cate-text .lhs28 {line-height: 20px;}
            #chart .level .grid .cate-text .lhs24 {line-height: 28px;}
            #chart .chart-img.logo {display: none; width: 85px;}
            #chart .chart-img-m {display: block; margin: auto; max-width: 85px;}
            #chart .logoText{/*display: none;*/}
            #chart .dendrogram .doubleLine {display: none;}
            #chart .level .grid {display: block; margin: auto; float: none; width: 100%;}
            #chart .level .grid:first-child {float: none;} 
            #chart .line-block {height: 20px;}
            #chart .singleLine{display: block;} 
            #chart .text {right: 0px; left: 0; bottom: -30px; color: #707070;}
            #chart .fts12 {font-size: 13px;}
            #chart .level .grid .cate-text .cate-title {margin-top: 10px;}
            #chart .level .grid .cate-content {margin-bottom: 10px;}
            #chart .cate-text .cate-content .space {display: none;}
            #chart .percent-container .percent-text {font-size:25px;  -ms-transform: translate(-50%, -20px); /* IE 9 */
                        -webkit-transform: translate(-50%, -20px); /* Safari */
                        transform: translate(-50%, -20px);
    
            }

            #chart .percent-container .percent-text::after {font-size:15px;}
            #chart .percent-container .percent-text.pad-right::after {margin-left:-2px;}
        }