body {word-break:keep-all;}

/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../../img/investors/governance/KV_investors_governance.jpg')}


#INVESTORS_GOVERNANCE .gu_table tbody tr:hover {background: transparent;}
#INVESTORS_GOVERNANCE .gu_table.hover tbody tr:hover {background: #f3f5fd;}
#INVESTORS_GOVERNANCE .gu_sort_area {position:absolute;top:46px;right:0; margin-top:40px;z-index:1}
#INVESTORS_GOVERNANCE .gu_table.sort_table {padding-top:50px;}

/*주식 분포 사항*/
#GOVERNANCE_STOCKS .gu_grid.graph .img_area {position:relative; text-align:center; height:450px; margin-bottom:50px;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area.show_m {display:none;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area.hide_m {display:block;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area svg {position:absolute; top:50%; left:50%; width:100%; height:100%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area svg circle {stroke-dashoffset: 25;fill: transparent; stroke-width:8; stroke-dasharray:0, 100; transform-origin: center;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area svg .circle1 {stroke:#188aa4;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area svg .circle2 {stroke:#222222;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area svg .circle3 {stroke:#64b6c9;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area svg .circle4 {stroke:#e0edf0;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area svg .circle5 {stroke:#bababa;}

#GOVERNANCE_STOCKS .gu_grid.graph.on .img_area svg .circle1 {stroke-dasharray: 39; transition:stroke-dasharray 1.5s; }
#GOVERNANCE_STOCKS .gu_grid.graph.on .img_area svg .circle2 {stroke-dasharray: 71, 40; transition:stroke-dasharray 1.5s;}
#GOVERNANCE_STOCKS .gu_grid.graph.on .img_area svg .circle3 {stroke-dasharray: 26.5; transition:stroke-dasharray 1.5s;}
#GOVERNANCE_STOCKS .gu_grid.graph.on .img_area svg .circle4 {stroke-dasharray: 34, 80; transition:stroke-dasharray 1.5s;}
#GOVERNANCE_STOCKS .gu_grid.graph.on .img_area svg .circle5 {stroke-dasharray: 33, 65; transition:stroke-dasharray 1.5s;}

#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li {position:absolute;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li.graph_li1 {width: 30%; top: 0%; left: 0; text-align:left;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li.graph_li2 {width: 26%; top: 8%; right: 0; text-align:right;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li.graph_li3 {width: 26%; top: 80%; right: 0;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%); text-align:right;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li.graph_li4 {width: 23%; top: 33%; left: 0; text-align: left;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li.graph_li5 {width: 31%; bottom: 0; left: 0; text-align:left;}

#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li .num {position:relative; font-size:20px;color:#000;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li .num:before {content:''; position:absolute;bottom:-10px;left:0;width:0;height:1px;background:#bfbfbf;
    -webkit-transition: all 1200ms ease-out;
    -moz-transition: all 1200ms ease-out;
    -ms-transition: all 1200ms ease-out;
    -o-transition: all 1200ms ease-out;
    transition: all 1200ms ease-out;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li2 .num:before,
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li3 .num:before,
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li4 .num:before {left:auto;right:0;}
#GOVERNANCE_STOCKS .gu_grid.graph.on .img_area .graph_li .num:before {width:100%;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li .num:after {content:''; position:absolute;width:14px; height:14px;border-radius:100%;opacity:0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    -webkit-transition-delay:1150ms;
    -moz-transition-delay:1150ms;
    -ms-transition-delay:1150ms;
    -o-transition-delay:1150ms;
    transition-delay:1150ms;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li1 .num:after {background:#188aa4;right:-10px; bottom:-16px;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li2 .num:after {background:#bababa;left:-10px; bottom:-16px;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li3 .num:after {background:#e0edf0;left:-10px; bottom:-16px;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li4 .num:after {background:#64b6c9;right:-10px; bottom:-16px;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li5 .num:after {background:#222222;right:-10px; bottom:-16px;}
#GOVERNANCE_STOCKS .gu_grid.graph.on .img_area .graph_li .num:after {opacity:1;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li .num > span {font-size:32px;}
#GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li .desc {font-size:18px; line-height:34px;color:#666; margin-top:12px; padding-top:10px;}


/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area {height:400px;max-width:667px;margin:0 auto 40px;}
    #GOVERNANCE_STOCKS .gu_grid.graph.on .img_area .graph_li .num:before {width:80%;}
    #GOVERNANCE_STOCKS .gu_grid.graph.on .img_area .graph_li3 .num:before {width:70%;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li.graph_li3 {top:50%;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li1 .num:after {right: 35px;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li2 .num:after {left:35px;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li3 .num:after {left:35px;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li4 .num:after {left:35px;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area .graph_li5 .num:after {right:35px;}
    #INVESTORS_GOVERNANCE .gu_table.sort_table {padding-top:65px;}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    #INVESTORS_GOVERNANCE .gu_table.sort_table {padding-top:70px;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area.show_m {display:block;max-width:500px;margin:0 auto 30px; width:100%;height:auto;}
    #GOVERNANCE_STOCKS .gu_grid.graph .img_area.hide_m {display:none;}
}