body {word-break:keep-all;}

/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../../img/sustainability/social/KV_visual.png');}
h2.gu_title { padding-bottom: 110px; }
.gu_tab_depth4 li { width:25%; }

.btnwr { display:flex; justify-content: center; align-items: center; margin-bottom:60px; }
.download { color: #000; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -0.28px; display:flex; justify-content: center; align-items: center; gap:4px; padding:17px 64px; border: 2px solid #E0E0E0; }

#ESG > .gu_title { padding-bottom:55px; }
#ESG > .gu_sub_title { margin-bottom:110px; }
#ESG .gu_btn_down {margin-bottom: 20px;}
#ESG .un {margin-top:118px;}
#ESG .circles {overflow:hidden; width:100%; font-size:0; margin-bottom: 60px;}
#ESG .circles div {width:192px; height:192px; border-radius:100%; background-color:#e0edf0; position:relative; display:inline-block; vertical-align:top;}
#ESG .circles div:nth-child(even) {background-color:#f5f5f5;}
#ESG .circles div p {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; width:100%;}
#ESG .circles:after {content:''; display:block; clear:both;}

#ESG .conflict-minerals .gu_box_title {margin:90px 0 30px;}
#ESG .conflict-minerals .gu_title + .gu_box_title {margin-top:0;}

#ESG .guideline .gu_grid {margin-top:70px;}
#ESG .guideline .gu_grid .gu_box_title {margin-bottom:20px;}

#PHILOSOPHY .gu_sub_title {text-align:left; margin-bottom:50px;}
#PHILOSOPHY .gu_box_title {text-align:center;}
#PHILOSOPHY .diagram {margin:100px 0 80px; text-align:center;}
#PHILOSOPHY .diagram .diagram_inner {position:relative; display:inline-block; margin-left:-20px;}
#PHILOSOPHY .diagram .diagram_inner .img{width:346px;}
#PHILOSOPHY .diagram .diagram_inner .diagram_text {position:absolute; width:100%; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
#PHILOSOPHY .diagram .diagram_inner .diagram_text span {display:inline-block;}
#PHILOSOPHY .diagram .diagram_inner .diagram_text span.center {font-size:24px;}
#PHILOSOPHY .diagram .diagram_inner .diagram_text span:first-child {position:absolute;left:-16px;}
#PHILOSOPHY .diagram .diagram_inner .diagram_text span:last-child {position:absolute; right:-34px;}
#PHILOSOPHY .download_list ul { font-size: 0; }
#PHILOSOPHY .download_list ul li { padding: 30px 60px; background: #f2f2f2; margin-bottom: 60px; }
#PHILOSOPHY .download_list ul li > div { display: inline-block; vertical-align: top; }
#PHILOSOPHY .download_list .img_area {width:45%; padding-right:30px; }
#PHILOSOPHY .download_list .text_area {width: 50%;}
#PHILOSOPHY .download_list ul li > div.text_area .gu_title { text-align: left; padding-bottom: 20px; }
#PHILOSOPHY .download_list ul li > div.text_area .gu_sub_title { text-align: left; margin-bottom: 60px; }
#PHILOSOPHY .download_list .gu_btn_down {text-align:left;}

#PROGRAM .box li .list p{display:block; position:relative; padding-left:16px;}
#PROGRAM .box li .list p:before{content:'•'; display:inline-block; font-size:16px; line-height:30px; color:#555; position:absolute; left:0; top:0; }
#PROGRAM .gu_sub_title{text-align:left;}
#PROGRAM .box{background-color:#f2f2f2; padding:50px 40px; margin-bottom:60px;}
#PROGRAM .box li{margin-bottom:60px; }
#PROGRAM .box li:last-child{margin-bottom:0;}
#PROGRAM .gu_box_title{margin-bottom:15px;}
#PROGRAM .gu_box_sub_title{font-weight: 600;font-size:20px;margin-bottom: 0;padding-bottom: 20px;}
#PROGRAM .gu_box_title{margin-bottom:30px; clear:both;}
#PROGRAM .gu_grid_box{margin-top:50px;}
#PROGRAM .gu_grid_box li {width: calc(33.33% - 16px); margin-right:24px;}
#PROGRAM .gu_grid_box li:nth-child(3n) {margin-right:0;}
#PROGRAM .gu_grid_box li .top .img {height: 65px;margin: 0 0 20px;}
#PROGRAM .gu_grid_box li .top .img img {width: 35%;}
#PROGRAM .gu_grid_box li .bottom {height: 252px;}
#PROGRAM .gu_grid_box li .bottom p {width:100%;text-align: left;position: relative;top: 0;left: 0;transform: none;padding: 18px 30px;box-sizing: border-box;line-height: 1.67;}
#PROGRAM .gu_grid_box li .bottom p .dot { display: block; text-indent: -14px; padding-left: 14px;}
#PROGRAM .gu_grid_box li .bottom p .dot:before { content: '•';position: relative; margin-right: 6px; font-size: 16px; top: 0px; }

#HOTLINE .box li .list p{display:block; position:relative; padding-left:16px;}
#HOTLINE .box li .list p:before{content:'•'; display:inline-block; font-size:16px; line-height:30px; color:#555; position:absolute; left:0; top:0; }
#HOTLINE .gu_sub_title{text-align:left;}
#HOTLINE .box{background-color:#f2f2f2; padding:50px 40px; margin-bottom:60px;}
#HOTLINE .box li{margin-bottom:60px; }
#HOTLINE .box li:last-child{margin-bottom:0;}
#HOTLINE .gu_box_title{margin-bottom:15px;}
#HOTLINE .gu_box_sub_title{font-weight:400; margin-bottom:22px;}

#COUNCIL .gu_sub_title{text-align:left;}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #PHILOSOPHY .gu_sub_title {margin-bottom:30px;}
    #PHILOSOPHY .diagram {margin:50px 0 40px;}
    #PHILOSOPHY .diagram .diagram_inner {width:345px;}
    #PHILOSOPHY .diagram .diagram_inner .diagram_text span.center {font-size:18px;}

    #PROGRAM .box {margin-bottom:40px;}
    #PROGRAM .gu_grid_box li {/* width:calc(50% - 8px); */margin-right:16px;}
    #PROGRAM .gu_grid_box li:nth-child(3n) {margin-right:16px;}
    #PROGRAM .gu_grid_box li:nth-child(2n) {/* margin-right:0px; */}
    #PROGRAM .gu_grid_box li .top .img {margin: 0 0 12px;}
    #PROGRAM .gu_grid_box li .bottom {/* height:141px; */}
    
    #HOTLINE .box {margin-bottom:40px;}
}

@media all and (max-width: 840px) {
    #PHILOSOPHY .download_list .img_area {width:100%;}
    #PHILOSOPHY .download_list .text_area {width:100%; padding-top:30px;}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    .pc { display:none; }
    h2.gu_title { padding-bottom:80px; }
    .btnwr { display:block; margin-bottom:30px; }
    
    #PHILOSOPHY .diagram .diagram_inner {width:244px}
    #PHILOSOPHY .diagram .diagram_inner .diagram_text {font-size:15px;}
    #PHILOSOPHY .diagram .diagram_inner .diagram_text span.center {font-size:16px;}
    #PHILOSOPHY .diagram .diagram_inner .diagram_text span:first-child {left:-11px;}
    #PHILOSOPHY .diagram .diagram_inner .diagram_text span:last-child {right:-26px;}
    #PHILOSOPHY .gu_box_title {font-size:16px;}
    #PHILOSOPHY .download_list ul li {padding: 30px 30px;}

    #PROGRAM .box {padding:30px 20px; margin-bottom:30px;}
    #PROGRAM .gu_box_title {margin-bottom:15px;}
    #PROGRAM .gu_box_sub {margin-bottom:15px;}
    #PROGRAM .box li {margin-bottom:40px;}
    #PROGRAM .gu_box_sub_title { padding-bottom: 10px; font-size: 19px; }
    #PROGRAM .gu_grid_box li {width:100%; margin-right: 0px; float:none;}
    #PROGRAM .gu_grid_box li:nth-child(3n) {margin-right:0px;}
    #PROGRAM .gu_grid_box li .bottom { height: auto; padding: 0; }
    #PROGRAM .gu_grid_box li .bottom p {width: 100%;padding: 10px 20px;font-size: 14px;font-weight: 500;}
    #PROGRAM .gu_grid_box li .top .img {margin: 4px 0 12px;}
    
    #HOTLINE .box {padding:30px 20px; margin-bottom:30px;}
    #HOTLINE .gu_box_title {margin-bottom:15px;}
    #HOTLINE .gu_box_sub {margin-bottom:15px;}
    #HOTLINE .box li {margin-bottom:40px;}
}