body { word-break:keep-all; } 

#SUB_KEYVISUAL .gu_sub_top .kv_img_area { background-image: url('../../../../img/sustainability/co-op/KV_sustainability_co-op.jpg'); } 
.graphContainer { text-align:center; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(206px,auto); align-items: end; margin-top: 100px; } 
.graphContainer .graphWrap { } 
.graphContainer .graphWrap .graphBox { position:relative; display: flex; justify-content: center; align-items: flex-end; gap: 17px; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; } 
.graphContainer .graphWrap .graph { position: relative; width: 46px; height:0; -webkit-transition:all 1s ease-out; -moz-transition:all 1s ease-out; -o-transition:all 1s ease-out; transition:all 1s ease-out; } 
.graphContainer .graphWrap .graphBox span { position: relative; display:none; color: #7e7e7e; font-weight: 600; font-size: 17px; top: -27px; } 
.graphContainer .graphWrap .graphBox .graph:nth-child(2) span { color: #222; font-size: 20px; } 
.graphContainer .graphWrap:nth-child(2) .graphBox span { bottom: 36%; } 
.graphContainer .graphWrap .graph:nth-child(1) { background:#e0edf0; } 
.graphContainer .graphWrap .graph:nth-child(2) { background:#64b6c9; } 
.graphContainer .graphWrap .label { padding: 20px 0; font-size:17px; line-height:1.4; color:#000; letter-spacing: -1px; font-weight: 600; } 
.graphContainer .graphWrap:nth-child(3) .label { } 
.graphContainer.on .graphWrap .graph { height: 105px; } 
.graphContainer.on .graphWrap:nth-child(1) .graph:nth-child(2) { height: 137px; } 
.graphContainer.on .graphWrap:nth-child(2) .graph:nth-child(2) { height: 75px; } 
.graphContainer.on .graphWrap:nth-child(3) .graph:nth-child(2) { height: 87px; } 
.graphContainer.on .graphWrap:nth-child(4) .graph:nth-child(2) { height: 108px; } 
.gu_content .gu_sub_title { text-align: left; font-size: 16px; color: #444444; line-height: 1.8; } 

.gu_content .gu_sub_title.large { margin-bottom: 20px; font-size: 20px; color: #222; } 
.gu_grid .comments { position: relative; font-size: 17px; color: #7e7e7e; font-weight: 600; } 
.gu_grid .comments:before { content: ''; position: absolute; display: inline-block; width: 20px; height: 20px; background: #e0edf0; left: -30px; } 
.gu_grid .comments_block { display: grid; justify-content: end; margin-bottom: 20px; row-gap: 15px; } 
.gu_grid .comments:nth-child(2):before { background: #64b6c9; } 
.gu_grid .comments:nth-child(2) { } 
/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {.gu_grid .comments_block { position: absolute; display: flex; bottom: -60px; justify-content: center; width: 100%; gap: 60px; } 
    .graphContainer .graphWrap .label { } 
    .gu_grid { margin-bottom: 170px; } 
    .graphContainer .graphWrap .graph { width: 42px; } 
    .graphContainer.on .graphWrap .graph { height: 90px; } 
    .graphContainer.on .graphWrap:nth-child(1) .graph:nth-child(2) { height: 122px; } 
	.graphContainer.on .graphWrap:nth-child(2) .graph:nth-child(2) { height: 60px; } 
	.graphContainer.on .graphWrap:nth-child(3) .graph:nth-child(2) { height: 72px; } 
	.graphContainer.on .graphWrap:nth-child(4) .graph:nth-child(2) { height: 93px; } 
    .graphContainer .graphWrap .graphBox span { font-size: 15px; top: -24px; } 
    .graphContainer .graphWrap .graphBox .graph:nth-child(2) span { font-size: 18px; } 
    .graphContainer .graphWrap .graphBox {gap: 15px;}
 }

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
	.graphContainer {grid-template-columns: repeat(2, 1fr);column-gap: 15px;grid-auto-rows: minmax(170px,auto);} 
	.gu_content .gu_sub_title.large { font-size: 17px;  } 
	.gu_content .gu_sub_title { font-size: 14.5px; line-height: 1.7;} 
	.graphContainer .graphWrap .graphBox span { font-size: 13px; top: -17px; } 
	.graphContainer .graphWrap .graphBox .graph:nth-child(2) span { font-size: 16px; top: -21px; } 
	.graphContainer .graphWrap .graph { width: 33px; } 
	.graphContainer.on .graphWrap .graph { height: 70px; } 
	.graphContainer.on .graphWrap:nth-child(1) .graph:nth-child(2) {height: 92px;} 
	.graphContainer.on .graphWrap:nth-child(2) .graph:nth-child(2) {height: 50px;} 
	.graphContainer.on .graphWrap:nth-child(3) .graph:nth-child(2) {height: 60px;} 
	.graphContainer.on .graphWrap:nth-child(4) .graph:nth-child(2) {height: 74px;} 
	.gu_grid .comments { font-size: 14px; } 
	.gu_grid .comments:before { width: 17px; height: 17px; top: -2px; left: -26px; } 
	.gu_grid .comments_block { gap: 50px; } 
	.graphContainer .graphWrap .graphBox { gap: 11px; } 
	.gu_grid { margin-bottom: 120px; margin-top: -60px; } 
	.graphContainer .graphWrap .label {font-size: 15px;padding: 13px 0 0;} 
 }