body {word-break:keep-all;}

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


/* report */
#OVERVIEW .gu_grid.report .grid_inner {font-size:0;}
#OVERVIEW .gu_grid.report .grid_inner > div {display:inline-block; vertical-align:top;}
#OVERVIEW .gu_grid.report .grid_inner > div.img_area {max-width:242px;}
#OVERVIEW .gu_grid.report .grid_inner > div.gu_text {margin-left:60px;width:calc(100% - 302px)}
#OVERVIEW .gu_grid.report .grid_inner > div.gu_text .gu_btn_area {margin-top:60px;}

/* value */
#OVERVIEW .gu_grid.value .gu_text {margin-bottom:100px;}
#OVERVIEW .gu_grid.value .img_area {padding-bottom:20px;}

/* organization */
#OVERVIEW .gu_grid.organization .gu_text {margin-bottom:100px;}
#OVERVIEW .gu_grid.organization .gu_diagram {text-align:center;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_sub_title {margin-bottom:30px;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_box_title {margin-bottom:30px;}
#OVERVIEW .gu_grid.organization .gu_diagram .circle {width: 244px; height: 244px; float:none;margin:0 auto;}
#OVERVIEW .gu_grid.organization .gu_diagram .circle .circle_inner {display:table-cell; vertical-align:middle;}
#OVERVIEW .gu_grid.organization .gu_diagram .circle .circle_inner p {display:block; width:100%; margin-top:0;}
#OVERVIEW .gu_grid.organization .gu_diagram .line {position:relative; width:1px; height:60px;background:#e5e5e5;margin:24px auto;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li {width:calc(20% - 10px); margin-right:12px; padding-bottom:0;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li:last-child {margin-right:0;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li .bottom {height:170px;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li .bottom p {width:90%;margin-bottom:0;}
#OVERVIEW .gu_grid.organization .gu_diagram .square_grid {font-size:0;}
#OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box {display:table;width:calc((100% - 24px)/3);margin-right:12px;margin-bottom:12px;background:#e0edf0; height:88px; float:left;}
#OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box:nth-child(3n) {margin-right:0;}
#OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box .gu_box_desc {display:table-cell; vertical-align:middle;}
#OVERVIEW .gu_grid.organization .gu_diagram .square_grid sup {font-size:12px;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_caption_area {text-align:left;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_caption_area span {display:inline-block; margin-right:20px;}
#OVERVIEW .gu_grid.organization .gu_diagram .gu_caption_area span:last-child {margin-top:10px;margin-bottom:20px;}


/* system */
#OVERVIEW .gu_grid.system ul li {width:calc(50% - 35px); float:left; text-align:center;margin-bottom:70px;}
#OVERVIEW .gu_grid.system ul li:nth-child(1), #OVERVIEW .gu_grid.system ul li:nth-child(3) {margin-right:70px;}

#OVERVIEW .gu_grid.system ul li .box {position:relative;background-color:#f2f2f2; border-top:2px solid #64B6C9; height:202px; box-sizing:border-box; display:table; width:100%;}
#OVERVIEW .gu_grid.system ul li .box:before {content:'';position:absolute;width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 12px; border-color: transparent transparent transparent #999999;}
#OVERVIEW .gu_grid.system ul li:nth-child(1) .box:before {right:-42px;top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
#OVERVIEW .gu_grid.system ul li:nth-child(2) .box:before {bottom:-47px;left:50%; -webkit-transform:translateX(-50%) rotate(90deg); -moz-transform:translateX(-50%) rotate(90deg); -ms-transform:translateX(-50%) rotate(90deg); -o-transform:translateX(-50%) rotate(90deg); transform:translateX(-50%) rotate(90deg);}
#OVERVIEW .gu_grid.system ul li:nth-child(3) .box:before {top:-47px;left:50%; -webkit-transform:translateX(-50%) rotate(-90deg); -moz-transform:translateX(-50%) rotate(-90deg); -ms-transform:translateX(-50%) rotate(-90deg); -o-transform:translateX(-50%) rotate(-90deg); transform:translateX(-50%) rotate(-90deg);}
#OVERVIEW .gu_grid.system ul li:nth-child(4) .box:before {left:-37px;top:50%; -webkit-transform:translateX(-50%) rotate(180deg); -moz-transform:translateX(-50%) rotate(180deg); -ms-transform:translateX(-50%) rotate(180deg); -o-transform:translateX(-50%) rotate(180deg); transform:translateX(-50%) rotate(180deg);}

#OVERVIEW .gu_grid.system ul li .box p {display:table-cell; vertical-align:middle;}
#OVERVIEW .gu_grid.system ul li .box p span {font-size:18px;color:#222; display:block;}
#OVERVIEW .gu_grid.system ul li .box p span.mb10 {margin-bottom:10px;}
#OVERVIEW .gu_grid.system ul li.text_left .box p {text-align:left; padding-left:100px;}

/* external */
#OVERVIEW .gu_grid.external .grid_inner {font-size:0;}
#OVERVIEW .gu_grid.external .grid_inner > .box {width:calc(50% - 10px);}
#OVERVIEW .gu_grid.external .grid_inner > .box:nth-child(1) {float:left;margin-right:20px;}
#OVERVIEW .gu_grid.external .grid_inner > .box:nth-child(2) {float:right;}
#OVERVIEW .gu_grid.external .grid_inner > .box > img {width:100%;}
#OVERVIEW .gu_grid.external .grid_inner > .box > div {margin-bottom:0;}
#OVERVIEW .gu_grid.external .grid_inner > .box > div.gu_sub_title {margin-top:30px; text-align:left;}
#OVERVIEW .gu_grid.external .gu_caption_area {text-align:left; margin-top:50px;}




/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #OVERVIEW .gu_grid.report .grid_inner > div.gu_text .gu_btn_area {margin-top:30px;}
    #OVERVIEW .gu_grid.report .grid_inner > div.img_area {max-width:197px;}
    #OVERVIEW .gu_grid.report .grid_inner > div.gu_text {margin-left:40px;width:calc(100% - 237px)}
    #OVERVIEW .gu_grid.value .gu_text {margin-bottom:60px;}
    #OVERVIEW .gu_grid.system ul li.text_left .box p {padding:0 40px;}
    #OVERVIEW .gu_grid.system ul li:nth-child(3), #OVERVIEW .gu_grid.system ul li:nth-child(4) {margin-bottom:20px;}
    #OVERVIEW .gu_grid.organization .gu_text {margin-bottom:50px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_sub_title {margin-bottom:15px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .circle {width:190px;height:190px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li .bottom {height:133px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box {height:76px;}
    #OVERVIEW .gu_grid.external .gu_caption_area {margin-top:25px;}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    #OVERVIEW .gu_grid.report .grid_inner > div.img_area {max-width:100%;width:100%; text-align:center; margin-bottom:40px;}
    #OVERVIEW .gu_grid.report .grid_inner > div.img_area img {max-width:60%;}
    #OVERVIEW .gu_grid.report .grid_inner > div.gu_text {width:100%;margin-left:0;}
    #OVERVIEW .gu_grid.value .img_area {max-width:335px;margin:0 auto;}
    #OVERVIEW .gu_grid.organization .gu_diagram .circle {width:170px !important;height:170px !important; position:absolute;left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
    #OVERVIEW .gu_grid.organization .gu_diagram .line {height:45px;margin:200px auto 10px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .float_text {right:-150px;}
    #OVERVIEW .gu_grid.organization .gu_text {font-size:13px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box {border-top:2px solid #64B6C9}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li {border-bottom:1px solid #dcdcdc;width:100%;border-top:0; padding-top:0; margin-right:0; position:relative;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li .top {float:left; width:40%; position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li .top span {padding-bottom:0;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li .bottom {float:right; width:60%; padding:20px 30px; border-top:none;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_grid_box li .bottom p {text-align:left;}
    #OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box {width:calc((100% - 5px)/2);margin-right:5px; margin-bottom:5px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box:nth-child(3n) {margin-right:5px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box:nth-child(2n) {margin-right:0;}
    #OVERVIEW .gu_grid.organization .gu_diagram .square_grid .box .gu_box_desc {font-size:13px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .square_grid sup {font-size:11px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_caption_area span:nth-child(2) {margin-top:10px;}
    #OVERVIEW .gu_grid.organization .gu_diagram .gu_caption_area span:last-child {margin-bottom:0;}

    #OVERVIEW .gu_grid.system ul li {width:100%; margin:0 0 50px 0 !important;}
    #OVERVIEW .gu_grid.system ul li .box:before {border-width:8px 0 8px 9px;top: auto !important; right: auto !important;bottom:-34px !important;left:50% !important; -webkit-transform: translateX(-50%) rotate(90deg) !important;-moz-transform: translateX(-50%) rotate(90deg) !important;-ms-transform: translateX(-50%) rotate(90deg) !important;-o-transform: translateX(-50%) rotate(90deg) !important;transform: translateX(-50%) rotate(90deg) !important;}
    #OVERVIEW .gu_grid.system ul li.text_left .box p {padding:0 20px;}
    #OVERVIEW .gu_grid.external .grid_inner > .box {width:100%;margin-right:0;float:none !important;}
    #OVERVIEW .gu_grid.external .grid_inner > .box:last-child {margin-top:50px;}
    #OVERVIEW .gu_grid.external .grid_inner > .box > div {font-size:16px;}
    #OVERVIEW .gu_grid.external .grid_inner > .box > div.gu_sub_title {margin-top:20px;}
}