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

#SUSTAINABILITY_GOVERNANCE.container { margin-bottom:0; }
#ETHICAL-LAW.section { position: relative; width: 100%; min-height:768px; max-width:100%; padding:116px 0 0; }
.gu_content.gu_contents_depth4 { margin-bottom:160px; }

#MANAGEMENT .bx { display:flex; flex-direction: column; gap:24px; }
#MANAGEMENT .bx .tit { color: #222; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.6px; }
#MANAGEMENT .bx .des { color: #666; font-size: 16px;  font-weight: 400; line-height: 1.75; letter-spacing: -0.4px; }

#MANAGEMENT .section01 { background: url('../../../../img/sustainability/governance/ethical-law/section01_bg.png') center / cover no-repeat; color:#fff; padding:110px 50px; margin:0 auto 110px; }
#MANAGEMENT .section01 .gu_content { display:flex; flex-direction: column; gap:110px; }
#MANAGEMENT .section01 .title { font-family: "HDFont", sans-serif; }
#MANAGEMENT .section01 .title, #MANAGEMENT .section01 .tit, #MANAGEMENT .section01 .des { text-align:left; color:#fff; }

#MANAGEMENT .list { display:flex; flex-wrap:wrap; justify-content: space-between; align-items: stretch; gap:56px; }
#MANAGEMENT .list .item { width:calc(33.3% - 38px); max-width:242px; }
#MANAGEMENT .list .num { font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.6px; }
#MANAGEMENT .list .txt { font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: -0.4px; margin-top:8px; }

#MANAGEMENT .section02 { margin-bottom:110px; }
#MANAGEMENT .imgwr { display: flex; justify-content: space-between; align-items: stretch; gap:20px; margin-top:56px; }
#MANAGEMENT .imgwr .item { width:calc(33.3% - 10px); }
#MANAGEMENT .imgwr .img { background:center / 100% auto; width:100%; height:auto; aspect-ratio: 335/219; margin-bottom:25px; }
#MANAGEMENT .imgwr .item:nth-child(1) .img { background-image:url('../../../../img/sustainability/governance/ethical-law/img01.jpg'); }
#MANAGEMENT .imgwr .item:nth-child(2) .img { background-image:url('../../../../img/sustainability/governance/ethical-law/img02.jpg'); }
#MANAGEMENT .imgwr .item:nth-child(3) .img { background-image:url('../../../../img/sustainability/governance/ethical-law/img03.jpg'); }
#MANAGEMENT .imgwr .text .tit { color: #222; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.45px; margin-bottom:12px; }
#MANAGEMENT .imgwr .text ul {}
#MANAGEMENT .imgwr .text li { color: #666; font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: -0.4px; }

#MANAGEMENT .section03 { height:420px; background: url('../../../../img/sustainability/governance/ethical-law/section03_bg.png') center / cover no-repeat; color:#fff; text-align:center; }
#MANAGEMENT .section03 .gu_content { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:40px;  }
#MANAGEMENT .section03 .txt { font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.8px; }
#MANAGEMENT .section03 .btn { display:inline-flex; justify-content:center; align-items: center; font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-0.45px; padding:20px 24px; background: #222; gap:10px; }
#MANAGEMENT .section03 .btn:after { content:""; display:block; width:24px; height:auto; aspect-ratio: 1/1; background:url('../../../../img/common/icon/icon-arrowright-w.png') center / 100% auto no-repeat; }

#PROGRAM .gu_content .gu_sub_title {text-align:left; margin-bottom:100px;}
#PROGRAM .gu_tab_depth5 {margin-top:120px;}
#PROGRAM .gu_tab_depth5 ul li {min-width: calc(100% / 3); width:33.33%;}

/* about */
#PROGRAM .gu_contents_depth5.about .gu_box_title {margin-bottom:40px;}
#PROGRAM .gu_contents_depth5.about .box {padding:40px 32px; background-color:#f2f2f2;}
#PROGRAM .gu_contents_depth5.about .box p {padding-left:24px; position:relative;}
#PROGRAM .gu_contents_depth5.about .box p:before {position:absolute; left:0; top:0; content:'(1)'; display:inline-block; font-size:16px; line-height:30px;}
#PROGRAM .gu_contents_depth5.about .box p:nth-child(2):before {content:'(2)';}
#PROGRAM .gu_contents_depth5.about .box p:nth-child(3):before {content:'(3)';}
#PROGRAM .gu_contents_depth5.about .box p:nth-child(4):before {content:'(4)';}
#PROGRAM .gu_contents_depth5.about .box p:nth-child(5):before {content:'(5)';}
#PROGRAM .gu_contents_depth5.about .box p:nth-child(6):before {content:'(6)';}
#PROGRAM .gu_contents_depth5.about .box p:nth-child(7):before {content:'(7)';}
#PROGRAM .gu_contents_depth5.about .gu_diagram {margin:40px auto 100px;}
#PROGRAM .gu_contents_depth5.about .gu_diagram .circle:last-child {margin-right:0;}
#PROGRAM .gu_contents_depth5.about .gu_diagram .circle {width:230px; height:230px; margin-right:13px;}

/* vision */
#PROGRAM .gu_contents_depth5.vision .gu_content {padding:0 36px;}
#PROGRAM .gu_contents_depth5.vision .gu_sub_title {text-align:center;}
#PROGRAM .gu_contents_depth5.vision .gu_simple_grid_box {margin-top:0;}
#PROGRAM .gu_contents_depth5.vision .gu_sub_title_en {margin-bottom:40px;}
#PROGRAM .gu_contents_depth5.vision .gu_diagram {padding:0 36px;margin:40px auto 80px;}
#PROGRAM .gu_contents_depth5.vision .gu_diagram .circle {width:280px; height:280px; margin-right:24px; margin-bottom:24px;}
#PROGRAM .gu_contents_depth5.vision .gu_diagram .circle:nth-child(3),
#PROGRAM .gu_contents_depth5.vision .gu_diagram .circle:nth-child(6) {margin-right:0;}
#PROGRAM .gu_contents_depth5.vision .gu_diagram .circle .circle_inner p {width: 50%;}
#PROGRAM .gu_contents_depth5.vision .gu_diagram .circle .circle_inner p span {color:#999;}
#PROGRAM .gu_contents_depth5.vision .gu_simple_grid_box li {width: calc(33.33% - 14px);}

/* duty */
#PROGRAM .gu_contents_depth5.duty .gu_grid {margin-top:70px;}
#PROGRAM .gu_contents_depth5.duty .gu_title + .gu_grid {margin-top:0;}
#PROGRAM .gu_contents_depth5.duty .gu_grid .gu_box_desc {margin-bottom:10px;}
#PROGRAM .gu_contents_depth5.duty .gu_box_title {margin-bottom:20px;}
#PROGRAM .gu_contents_depth5.duty .gu_text.text_indent > span:first-child {width:24px; display:inline-block; vertical-align:top;}
#PROGRAM .gu_contents_depth5.duty .gu_text.text_indent > span:last-child {width:calc(100% - 24px); display:inline-block; vertical-align:top;}
#PROGRAM .gu_contents_depth5.duty ul.grid3 {font-size:0;}
#PROGRAM .gu_contents_depth5.duty ul.grid3 .gu_box_sub_title {margin-bottom:10px;}
#PROGRAM .gu_contents_depth5.duty ul.grid3 > li {display:inline-block; width:33.33%; vertical-align:top;}
#PROGRAM .gu_contents_depth5.duty ul.grid3 > li span > span {position:relative; padding-left:12px; display:block;}
#PROGRAM .gu_contents_depth5.duty ul.grid3 > li span > span:before {content:'•'; position:absolute;;left:0;top:0;}
#PROGRAM .gu_contents_depth5.duty ul.gu_grid_box {margin-top:60px;}
#PROGRAM .gu_contents_depth5.duty ul.gu_grid_box li {width:calc(33.33% - 16px); margin-right:24px; padding-bottom:0;}
#PROGRAM .gu_contents_depth5.duty ul.gu_grid_box li:last-child {margin-right:0;}
#PROGRAM .gu_contents_depth5.duty ul.gu_grid_box .bottom {height:200px;}
#PROGRAM .gu_contents_depth5.duty ul.gu_grid_box .bottom p {width:84%;}
#PROGRAM .gu_contents_depth5.duty ul.gu_grid_box .bottom span {display:block; position:relative; padding-left:12px; text-align:left;}
#PROGRAM .gu_contents_depth5.duty ul.gu_grid_box .bottom span:before {content:'•'; position:absolute;left:0;top:0;}
#PROGRAM .gu_contents_depth5.duty .gu_text.box {background: #f2f2f2; padding: 40px;}
#PROGRAM .gu_contents_depth5.duty .gu_text.box p {display:inline-block; vertical-align:top;}
#PROGRAM .gu_contents_depth5.duty .gu_text.box p span {display: block; position: relative; padding-left: 12px;}
#PROGRAM .gu_contents_depth5.duty .gu_text.box p span:before {content: '•'; position: absolute; left: 0; top: 0;}

#PRACTICE .gu_text.box {margin:60px 0;background: #f2f2f2;padding: 40px;}
#PRACTICE .gu_sub_title {text-align:left;margin-bottom:20px;}
#PRACTICE .gu_grid {margin-top:70px;}
#PRACTICE .gu_grid:nth-child(2) {margin-top:0;}
#PRACTICE .gu_grid .gu_btn_down {margin-top:30px;}

#MANUAL .gu_grid_box li {width:calc(25% - 12px);margin-right:16px;}
#MANUAL .gu_grid_box li:nth-child(4n) {margin-right:0;}
#MANUAL .gu_grid_box li .bottom {height:80px;}

#ORGANIZATION .grid_box3 {font-size:0; text-align:center;max-width:876px;margin:0 auto;}
#ORGANIZATION .grid_box3 .box.box_top {display:block;width:calc(33.33% * 2);margin:0 auto;padding-right:0;}
#ORGANIZATION .grid_box3 .box {position:relative;display:inline-block; vertical-align:top;padding-right:20px;width:33.33%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#ORGANIZATION .grid_box3 .box.box3 {padding-right:0; padding-left:20px;}
#ORGANIZATION .grid_box3 .box p {position:relative; width:100%; padding:18px 12px; margin-bottom:16px;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#ORGANIZATION .grid_box3 .box > span {display:block; text-align:left; position:relative; padding-left:15px;}
#ORGANIZATION .grid_box3 .box > span:before {content:'-'; display:inline-block; position:absolute; left:0; }

#ORGANIZATION .grid_box3 .box.box_top p:nth-child(1) {background:#188aa4;color:#fff;margin-bottom:80px;width:50%;}
#ORGANIZATION .grid_box3 .box.box1 p:nth-child(1),
#ORGANIZATION .grid_box3 .box.box2 p:nth-child(1) {background:#e0edf0;}
#ORGANIZATION .grid_box3 .box.box1 p:nth-child(2),
#ORGANIZATION .grid_box3 .box.box2 p:nth-child(2),
#ORGANIZATION .grid_box3 .box.box3 p:nth-child(2),
#ORGANIZATION .grid_box3 .box.box3 p:nth-child(3) {background:#fff;border:1px solid #dcdcdc;}
#ORGANIZATION .grid_box3 .box.box3 p:nth-child(1) {background:#e7e7e7;}

#ORGANIZATION .grid_box3 .box.box_top p:nth-child(1):before {content: ''; position: absolute; width: 1px; height: 37px; background: #c8c8c8; bottom: -37px; left: 50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
#ORGANIZATION .grid_box3 .box.box_top p:nth-child(1):after {content: ''; position: absolute; width: 100%; height: 1px; background: #c8c8c8; bottom: -37px; left: 50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
#ORGANIZATION .grid_box3 .box.box1:before {content: ''; position: absolute; width: 1px; height: 44px; background: #c8c8c8; top: -44px; left: 50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
#ORGANIZATION .grid_box3 .box.box2:before {content: ''; position: absolute; width: 1px; height: 44px; background: #c8c8c8; top: -44px; left: 50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #MANAGEMENT.section { padding-top:70px; }
    #MANAGEMENT .title { font-size: 24px; line-height: 32px; padding:0 50px; }
    #MANAGEMENT .section01 { margin:0 0 70px; padding:70px 50px; }
    #MANAGEMENT .section01 .title { padding:0; }
    #MANAGEMENT .section01 .gu_content { gap:70px; }
    #MANAGEMENT .section02 { margin-bottom:70px; padding:0 50px; }
    #MANAGEMENT .section03 { padding:70px; }

    #PROGRAM .gu_contents_depth5 {margin-top:100px;}
    #PROGRAM .gu_content .gu_sub_title {margin-bottom:60px;}
    #PROGRAM .gu_contents_depth5 .gu_diagram {margin:30px auto 60px;}
    #PROGRAM .gu_contents_depth5.about .gu_diagram {margin:30px auto 60px;}
    #PROGRAM .gu_contents_depth5.about .gu_diagram .circle {width:154px; height:154px; margin-right:12px;}
    #PROGRAM .gu_contents_depth5.about .gu_box_title {margin-bottom:20px;}
    #PROGRAM .gu_contents_depth5.vision .gu_diagram {padding:0;margin:30px auto 60px;}
    #PROGRAM .gu_contents_depth5.vision .gu_diagram .circle {width:202px; height:202px; margin-right:22px;}
    #PROGRAM .gu_contents_depth5.vision .gu_diagram .circle:nth-child(3n) {margin-right:0;}
    #PROGRAM .gu_contents_depth5.duty .gu_grid {margin-top:60px;}

    #PRACTICE .gu_grid .gu_btn_down {text-align:right;}

    #MANUAL .gu_grid_box li .bottom {height:54px;}

    #ORGANIZATION .grid_box3 {max-width:650px;}
    #ORGANIZATION .grid_box3 .box {padding-right:15px;}
    #ORGANIZATION .grid_box3 .box p {font-size:14px;padding:12px 4px;}
    #ORGANIZATION .grid_box3 .box > span {font-size:13px; line-height:24px;}
    #ORGANIZATION .grid_box3 .box.box3 {padding-left:15px;}
    #ORGANIZATION .grid_box3 .box.box_top p:nth-child(1) {margin-bottom:39px;}
    #ORGANIZATION .grid_box3 .box.box_top p:nth-child(1):before {height:20px;bottom:-20px;}
    #ORGANIZATION .grid_box3 .box.box_top p:nth-child(1):after {bottom:-20px;}
    #ORGANIZATION .grid_box3 .box.box1:before {height:20px;top:-20px;}
    #ORGANIZATION .grid_box3 .box.box2:before {height:20px;top:-20px;}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    .pc { display:none !important; }
    .gu_content h2.gu_title { padding-bottom:80px; }

    #MANAGEMENT.section { padding-top:60px; }
    #MANAGEMENT .title { padding:0 20px; }
    #MANAGEMENT .section01 { margin:0 0 60px; padding:60px 20px; background-image:url('../../../../img/sustainability/governance/ethical-law/section01_m_bg.png'); }
    #MANAGEMENT .section01 .title { padding:0; }
    #MANAGEMENT .section01 .gu_content { gap:60px; }
    #MANAGEMENT .list { display:block; }
    #MANAGEMENT .list .item { width:50%; min-width:230px; }
    #MANAGEMENT .list .item + .item { margin-top:30px; }
    #MANAGEMENT .section02 { margin-bottom:60px; padding:0 20px; }
    #MANAGEMENT .imgwr { display:block; }
    #MANAGEMENT .imgwr .item { width:100%; }
    #MANAGEMENT .imgwr .item + .item { margin-top: 30px; }
    #MANAGEMENT .section03 .txt { font-size:20px; }
    #MANAGEMENT .section03 .btn { font-size:13px; padding:12px 16px; }
    #MANAGEMENT .section03 .btn:before { width:16px; }
    
    #PROGRAM .gu_tab_depth5 {margin-top:70px;}
    #PROGRAM .gu_contents_depth5 .gu_diagram {max-width:280px !important;}
    #PROGRAM .gu_contents_depth5.about .gu_box_title {margin-bottom:15px;}
    #PROGRAM .gu_contents_depth5.about .box {padding:30px 20px;}

    /* vision */
    #PROGRAM .gu_contents_depth5.vision .gu_diagram .circle {margin-right:10px;}
    #PROGRAM .gu_contents_depth5.vision .gu_diagram .circle:nth-child(3n) {margin-right:10px;}
    #PROGRAM .gu_contents_depth5.vision .gu_diagram .circle:nth-child(2n) {margin-right:0;}
    #PROGRAM .gu_contents_depth5.vision .gu_simple_grid_box li {height:80px; margin-right:12px; width:calc(33.33% - 8px);}
    #PROGRAM .gu_contents_depth5.vision .gu_simple_grid_box li:last-child {margin-right: 0;}
    #PROGRAM .gu_contents_depth5.vision .gu_simple_grid_box li .gu_box_sub_title {font-size:13px;}
    #PROGRAM .gu_contents_depth5.vision .gu_diagram .circle .circle_inner p {width:87%;}

    #PROGRAM .gu_contents_depth5.duty .gu_grid {margin-top:50px;}
    #PROGRAM .gu_contents_depth5.duty ul.grid3 > li {width:100%;}
    #PROGRAM .gu_contents_depth5.duty ul.grid3 .gu_box_sub_title {margin-top:20px;}
    #PROGRAM .gu_contents_depth5.duty ul.grid3 > li:first-child .gu_box_sub_title {margin-top:0;}
    #PROGRAM .gu_contents_depth5.duty ul.gu_grid_box {margin-top:30px;}
    #PROGRAM .gu_contents_depth5.duty ul.gu_grid_box li {width:100%; padding-bottom:20px;}
    #PROGRAM .gu_contents_depth5.duty ul.gu_grid_box li .bottom {height:140px; padding:30px 20px;}
    #PROGRAM .gu_contents_depth5.duty .gu_text.box {padding:30px 20px;}

    #PRACTICE .gu_grid {margin-top:50px;}
    #PRACTICE .gu_grid .gu_btn_down {margin-top:15px;}

    #MANUAL .gu_grid_box li {width:calc(50% - 8px);}
    #MANUAL .gu_grid_box li:nth-child(2n) {margin-right:0;}
    #MANUAL .gu_grid_box li .bottom {height:56px !important; padding:16px;}
    
    #ORGANIZATION .grid_box3 .box {width:50%;}
    #ORGANIZATION .grid_box3 .box.box_top {width:100%;}
    #ORGANIZATION .grid_box3 .box.box_top p:nth-child(1) {margin:0 auto 39px;}
    #ORGANIZATION .grid_box3 .box.box1 {padding-right:7px;}
    #ORGANIZATION .grid_box3 .box.box2 {padding-right:0; padding-left:7px;}
    #ORGANIZATION .grid_box3 .box.box3 {width:100%; padding-left:0; margin-top:20px;}
    #ORGANIZATION .grid_box3 .box p {margin-bottom:5px;}
}